@import url("/assets/fonts.css");

.backup-fallback {
  margin-top: 22px;
}
.backup-fallback summary {
  cursor: pointer;
  margin-bottom: 16px;
}
.backup-fallback textarea {
  font-family: monospace;
  font-size: 12px;
}
:root {
  color-scheme: dark;
  --bg: #0c1118;
  --surface: #121923;
  --surface-2: #17212c;
  --border: #25303c;
  --muted: #8c99aa;
  --text: #e8edf1;
  --gold: #dbbe82;
  --sage: #80bcad;
  --blue: #84accb;
  --danger: #f4a3a3;
  --sidebar: 236px;
  --sans: "Inter", "Segoe UI", sans-serif;
  font-family: "Inter", "Segoe UI", sans-serif;
  font-size: 14px;
  font-synthesis: none;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}
button,
a {
  touch-action: manipulation;
}
button {
  cursor: pointer;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  color: inherit;
}
button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}
button,
input,
select,
textarea {
  border-radius: 7px;
}
input,
select,
textarea {
  background: #0d141e;
  border: 1px solid #34404e;
  padding: 11px 12px;
  color: var(--text);
  width: 100%;
  min-width: 0;
}
input:hover,
select:hover,
textarea:hover {
  border-color: #526171;
}
input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}
input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--gold);
  flex-shrink: 0;
}
input::placeholder,
textarea::placeholder {
  color: #8390a1;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 48px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -1.2px;
}
h2 {
  font-size: 19px;
  font-weight: 550;
  letter-spacing: -0.5px;
}
h3 {
  font-size: 14px;
  font-weight: 600;
}
small {
  font-size: 11px;
}
svg.icon {
  height: 19px;
  width: 19px;
  flex-shrink: 0;
  vertical-align: middle;
}
.icon-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  flex-shrink: 0;
  color: var(--muted);
}
.icon-btn:hover {
  background: #ffffff08;
  color: var(--text);
  border-color: var(--border);
}
.primary,
.secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 42px;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
  line-height: 1.4;
  transition:
    background 0.18s,
    border-color 0.18s,
    transform 0.18s;
}
.primary {
  background: var(--gold);
  color: #201d17;
  box-shadow: 0 3px 18px #d7b5740b;
}
.primary:hover {
  background: #eed4a0;
  transform: translateY(-1px);
}
.secondary {
  background: #ffffff03;
  border-color: #35404c;
  color: #d6dde5;
}
.secondary:hover {
  background: #ffffff08;
  border-color: #65717e;
}
.primary .icon,
.secondary .icon {
  width: 16px;
  height: 16px;
}
.secondary.small {
  min-height: 34px;
  padding: 7px 11px;
}
.text-btn {
  background: none;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  font-size: 11px;
  font-weight: 500;
  color: #aeb9c7;
}
.text-btn:hover {
  color: var(--gold);
}
.text-btn .icon {
  width: 14px;
  height: 14px;
}
.full {
  width: 100%;
}
.eyebrow {
  font-size: 9px;
  letter-spacing: 1.8px;
  color: var(--muted);
  font-weight: 600;
}
.microcopy {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.7;
}
.help {
  font-size: 13px;
  color: var(--muted);
}
.gold-text {
  color: var(--gold);
}
.sage-text {
  color: var(--sage);
}
.danger {
  color: var(--danger) !important;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  top: -80px;
  left: 20px;
  background: var(--gold);
  color: #111;
  padding: 12px;
  z-index: 100;
}
.skip-link:focus {
  top: 10px;
}
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar);
  background: #0e151e;
  border-right: 1px solid #202a35;
  display: flex;
  flex-direction: column;
  padding: 35px 20px 17px;
  z-index: 30;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 6px 30px;
  color: #edddb9;
}
.brand-symbol {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: block;
  /* Exclude the 8px caption and its 8px gap from the vertical alignment. */
  transform: translateY(-8px);
}
.brand-symbol .brand-emblem {
  display: block;
  width: 100%;
  height: 100%;
}
.brand-name {
  font-family: Georgia, serif;
  font-size: 32px;
  letter-spacing: 0.07em;
  line-height: 1;
}
.brand-wordmark {
  display: flex;
  align-items: baseline;
  white-space: nowrap;
}
.brand-two {
  /* Georgia's old-style 2 is shorter than its capitals; use a lining numeral. */
  font-family: "Times New Roman", "Liberation Serif", serif;
  font-size: 1.08em;
  font-variant-numeric: lining-nums;
  letter-spacing: 0;
  color: var(--gold);
}
.brand-name small {
  display: block;
  font-family: Inter, "Segoe UI", sans-serif;
  font-size: 8px;
  letter-spacing: 0.6em;
  padding-left: 0.6em;
  text-align: center;
  color: #a79d89;
  margin-top: 8px;
}
.sidebar-label {
  font-size: 8px;
  color: #778697;
  letter-spacing: 1.1px;
  font-weight: 600;
  padding: 0 11px;
  margin: 8px 0 15px;
}
.nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 45px;
  margin-bottom: 6px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #9daabb;
  font-size: 12px;
  transition: background 0.18s;
}
.nav-link:hover {
  background: #1a2531;
  color: var(--text);
}
.nav-link.active {
  background: linear-gradient(90deg, #c6a86716, #c6a86708);
  color: #e1c996;
  border-color: #b6955626;
}
.nav-link.active:before {
  content: "";
  position: absolute;
  left: 0;
  height: 20px;
  width: 2px;
  background: var(--gold);
}
.nav-count {
  margin-left: auto;
  background: #ffffff08;
  font-size: 10px;
  padding: 0 6px;
  border-radius: 4px;
}
.sidebar-divider {
  height: 1px;
  background: #232b35;
  margin: 22px 10px 20px;
}
.sidebar-characters {
  overflow-y: auto;
  min-height: 56px;
}
.mini-character {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  width: 100%;
  background: none;
  border: 0;
  padding: 8px 10px;
  color: #aeb8c4;
  font-size: 11px;
}
.mini-character:hover,
.mini-character.active {
  color: #f2efea;
}
.mini-character > span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}
.mini-character small {
  display: block;
  color: #748295;
  font-size: 9px;
  margin-top: 1px;
}
.mini-character .avatar {
  width: 29px;
  height: 32px;
  border-radius: 6px;
}
.mini-character .icon {
  height: 15px;
  width: 15px;
}
.sidebar-add {
  padding: 12px 11px;
  font-size: 10px;
}
.sidebar-bottom {
  margin-top: auto;
  padding-top: 24px;
}
.sidebar-bottom .nav-link {
  font-size: 10px;
  gap: 9px;
  padding: 10px 5px;
}
.sidebar-bottom .icon {
  width: 16px;
}
.save-status {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border-top: 1px solid #25303a;
  padding: 17px 3px 15px;
  color: #acb8c5;
  font-size: 9px;
}
.save-status small {
  display: block;
  color: #7a889a;
  font-size: 9px;
}
.status-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: #8fc2a7;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 8px #8fc2a733;
}
.save-status .status-dot {
  margin-top: 5px;
}
.status-dot.warning-dot {
  background: var(--gold);
}
.sidebar-version {
  display: flex;
  justify-content: space-between;
  font-size: 7px;
  color: #758194;
  letter-spacing: 1px;
  padding: 0 4px;
}
.workspace {
  margin-left: var(--sidebar);
  min-width: 0;
}
.topbar {
  height: 74px;
  border-bottom: 1px solid #202a35;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 38px;
}
.breadcrumb {
  display: flex;
  gap: 13px;
  align-items: center;
  font-size: 10px;
}
.breadcrumb > span:first-of-type {
  color: #778698;
  font-size: 8px;
  letter-spacing: 1.4px;
}
.breadcrumb strong {
  font-weight: 500;
  color: #c3cdd8;
}
.breadcrumb-slash {
  color: #536171;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 17px;
}
.region-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 8px;
  color: #9baaba;
  letter-spacing: 1.3px;
}
.profile-button {
  padding: 0;
  border: 0;
  background: none;
}
.profile-button .avatar {
  height: 30px;
  width: 30px;
  border-radius: 50%;
}
.profile-button .icon {
  height: 16px;
  width: 16px;
}
.mobile-menu {
  display: none;
}
main {
  max-width: 1560px;
  margin: auto;
  padding: 30px 38px 12px;
  min-height: calc(100vh - 146px);
  outline: none;
}
footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin: 5px 38px 0;
  border-top: 1px solid #202a35;
  padding: 22px 0;
  color: #7c8999;
  font-size: 8px;
  letter-spacing: 0.3px;
}
footer > span {
  display: flex;
  align-items: center;
  gap: 12px;
}
footer .brand-emblem {
  width: 23px;
  height: 23px;
  color: var(--gold);
}
footer i {
  font-style: normal;
  color: #7e8b9c;
  letter-spacing: 0;
}
footer a {
  color: #a5afbd;
}
footer a:hover {
  color: var(--gold);
}
.hero {
  position: relative;
  overflow: hidden;
  min-height: 294px;
  border: 1px solid #364453;
  border-radius: 10px;
  background: #172535 url("/assets/aion2-official-city.webp") center 35% / cover
    no-repeat;
  isolation: isolate;
}
.hero:before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      #0c1725ed 0%,
      #0e1a28b8 40%,
      #0c172526 75%,
      #0c172510
    ),
    linear-gradient(0deg, #0c17255c, transparent 50%);
  z-index: -1;
}
.hero-content {
  padding: 32px 36px;
  max-width: 560px;
}
.hero-kicker {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #d7c597;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 11px;
}
.hero-kicker span {
  height: 5px;
  width: 5px;
  transform: rotate(45deg);
  background: var(--gold);
}
.hero h1 {
  font-size: 49px;
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -1.3px;
  color: #f3f1ea;
}
.hero h1 em {
  font-weight: 400;
  color: #e4c68f;
}
.hero p {
  color: #b6c3d2;
  font-size: 11px;
  line-height: 1.9;
  margin: 14px 0 19px;
}
.hero .primary {
  min-height: 37px;
  font-size: 10px;
  padding: 9px 14px;
}
.hero-location {
  position: absolute;
  right: 21px;
  bottom: 19px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 1.8px;
  color: #eee9dd;
  text-shadow: 0 1px 10px #000;
}
.hero-location .icon {
  width: 13px;
  height: 13px;
}
.hero-date {
  position: absolute;
  right: 20px;
  top: 20px;
  color: #e7e6e2;
  font-size: 9px;
  background: #111c287d;
  border: 1px solid #bcc9d82b;
  border-radius: 5px;
  padding: 6px 11px;
  backdrop-filter: blur(9px);
  text-transform: capitalize;
}
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 16px;
}
.section-heading h2,
.section-heading h3 {
  display: flex;
  align-items: center;
  gap: 9px;
}
.section-heading h2 .icon {
  color: var(--gold);
}
.section-heading .eyebrow {
  display: block;
  margin-bottom: 5px;
}
.roster-heading {
  margin-top: 27px;
  margin-bottom: 12px;
}
.roster-heading h2 {
  font-size: 13px;
  letter-spacing: 0;
}
.count-label {
  font-size: 9px;
  color: #a0adbb;
  padding: 0 6px;
  border-radius: 4px;
  background: #1f2934;
  line-height: 1.7;
}
.roster-heading .text-btn {
  font-size: 9px;
}
.character-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: thin;
  padding: 2px 0 5px;
  margin-bottom: 23px;
}
.character-chip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 11px;
  position: relative;
  min-width: 200px;
  text-align: left;
  padding: 12px 17px 12px 12px;
  background: #101821;
  border: 1px solid #29333f;
  border-radius: 8px;
}
.character-chip:hover {
  background: #17202a;
  border-color: #59606b;
}
.character-chip.selected {
  background: linear-gradient(110deg, #bda16b0f, #151d26);
  border-color: #927951a1;
}
.avatar {
  width: 35px;
  height: 39px;
  border-radius: 7px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  background: radial-gradient(circle at 30% 20%, #ccb07129, #9574420b);
  border: 1px solid #ba99533d;
  color: #d7bc7f;
}
.avatar.asmodian {
  background: radial-gradient(circle at 30% 20%, #b989d629, #8962920b);
  border-color: #b291c23d;
  color: #c0a1d3;
}
.avatar.large {
  width: 58px;
  height: 63px;
  border-radius: 10px;
}
.avatar.large .icon {
  width: 29px;
  height: 29px;
}
.character-chip strong {
  font-size: 11px;
  font-weight: 600;
  display: flex;
  gap: 9px;
  align-items: center;
}
.character-chip small {
  color: var(--muted);
  display: block;
  font-size: 9px;
  margin-top: 3px;
}
.tiny-badge {
  font-size: 6px;
  background: #b9965126;
  color: #e1c78f;
  border: 1px solid #b99b563d;
  padding: 1px 4px;
  border-radius: 3px;
  letter-spacing: 0.6px;
}
.alt-label {
  font-size: 7px;
  color: #8b99aa;
  letter-spacing: 0.6px;
}
.selected-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  margin-left: 16px;
}
.add-character {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 155px;
  border: 1px dashed #34404d;
  background: none;
  color: #95a1b0;
  font-size: 10px;
  min-height: 66px;
}
.add-character:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.add-character .icon {
  width: 16px;
  height: 16px;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}
.stat-card {
  min-width: 0;
  background: linear-gradient(130deg, #16202b, #121922);
  border: 1px solid #2b3642;
  border-radius: 8px;
  padding: 17px 18px 14px;
}
.stat-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: #acb8c5;
}
.stat-label .icon {
  height: 15px;
  width: 15px;
  color: #8696a7;
}
.stat-label > span,
.stat-label > .icon:last-child:not(:first-child) {
  margin-left: auto;
  color: #708394;
  font-size: 9px;
}
.stat-card.sage .stat-label > .icon {
  color: var(--sage);
}
.stat-card.blue .stat-label > .icon {
  color: var(--blue);
}
.stat-card.gold .stat-label > .icon {
  color: var(--gold);
}
.stat-number {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 29px;
  letter-spacing: -1px;
  font-weight: 500;
  line-height: 1.4;
  margin: 11px 0 10px;
  font-variant-numeric: tabular-nums;
}
.stat-number > span {
  font-size: 15px;
  color: #77899c;
  letter-spacing: 0;
}
.stat-number small {
  font-size: 8px;
  letter-spacing: 0;
  color: #8292a4;
  margin-left: 3px;
}
.reset-number {
  font-size: 25px;
  margin: 14px 0 13px;
}
.stat-foot {
  display: flex;
  gap: 7px;
  color: #8d9daf;
  font-size: 9px;
  line-height: 1;
}
.stat-foot strong {
  font-weight: 500;
  color: #c6cbd1;
}
.progress {
  height: 3px;
  background: #2a3541;
  overflow: hidden;
  border-radius: 4px;
}
.progress i {
  height: 100%;
  display: block;
  background: var(--gold);
  border-radius: 4px;
  max-width: 100%;
  transition: width 0.25s;
}
.progress.sage i {
  background: var(--sage);
}
.progress.blue i {
  background: var(--blue);
}
.dashboard-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 272px;
  gap: 24px;
}
.routine-panel {
  min-width: 0;
}
.routine-panel > .section-heading {
  margin: 1px 0 19px;
}
.routine-panel > .section-heading h2 {
  font-size: 19px;
}
.tabs {
  display: flex;
  gap: 20px;
  border-bottom: 1px solid #2c3744;
  overflow: auto;
}
.tabs button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
  font-size: 10px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 13px 0;
  color: #92a0b1;
}
.tabs .icon {
  width: 14px;
  height: 14px;
}
.tabs button.active {
  color: #e8ca92;
  border-bottom-color: var(--gold);
}
.routine-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 0 13px;
}
.filters {
  display: flex;
  gap: 5px;
}
.filters button {
  background: transparent;
  border: 1px solid transparent;
  color: #92a0b1;
  font-size: 9px;
  padding: 5px 10px;
  white-space: nowrap;
}
.filters button.active {
  background: #25303d;
  border-color: #344251;
  color: #e2e9ee;
}
.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #303b49;
  border-radius: 6px;
  padding: 0 10px;
  background: #0f1721;
  max-width: 300px;
}
.search-box .icon {
  width: 14px;
  height: 14px;
  color: #798da1;
}
.search-box input {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
  height: 40px;
  line-height: normal;
  outline: 0;
  font-size: 11px;
}
.search-box:focus-within {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.search-box.compact {
  max-width: 170px;
  border-color: transparent;
  background: none;
  padding: 0;
}
.search-box.compact input {
  font-size: 12px;
}
.task-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #131c26;
  border: 1px solid #2b3745;
  border-radius: 7px;
  margin-bottom: 9px;
  min-height: 83px;
  padding: 15px 13px;
  transition:
    border-color 0.18s,
    background 0.18s;
}
.task-row:hover {
  border-color: #4b5968;
  background: #17212c;
}
.task-check {
  width: 19px;
  height: 19px;
  border: 1px solid #506072;
  border-radius: 4px;
  background: #0b141d;
  padding: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.task-check .icon {
  height: 14px;
  width: 14px;
}
.task-check:hover {
  border-color: var(--gold);
}
.task-row.done .task-check {
  background: #638f80;
  border-color: #638f80;
  color: #081e18;
}
.task-row.done {
  background: #111c23;
  border-color: #2a3b3c;
}
.task-row.done .task-name h3 {
  color: #8eaaa4;
  text-decoration: line-through;
  text-decoration-color: #8eaaa459;
}
.task-row.done .task-emblem {
  opacity: 0.6;
}
.task-emblem {
  width: 34px;
  height: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: linear-gradient(135deg, #83a6b41a, #34485a15);
  border: 1px solid #728f9b21;
  color: #a4bdc8;
  flex-shrink: 0;
}
.task-emblem.moon {
  color: #b2a0d0;
  background: #9c87b917;
}
.task-emblem.sparkles {
  color: #d4b67d;
  background: #a58a5217;
}
.task-emblem.flame {
  color: #99bbce;
  background: #809aab17;
}
.task-emblem .icon {
  height: 20px;
  width: 20px;
}
.task-copy {
  min-width: 0;
  flex: 1;
}
.task-name {
  display: flex;
  align-items: center;
  gap: 7px;
}
.task-name h3 {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.priority-dot {
  height: 4px;
  width: 4px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}
.task-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.scope-tag {
  font-size: 7px;
  font-weight: 500;
  letter-spacing: 0.2px;
  border: 1px solid #53677b30;
  background: #5c7e9712;
  color: #9fbbd1;
  border-radius: 3px;
  padding: 1px 5px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1.5;
}
.scope-tag.shared {
  color: #d4c196;
  background: #a58a5210;
  border-color: #a68e5c25;
}
.scope-tag .icon {
  width: 9px;
  height: 9px;
}
.time-tag {
  font-size: 8px;
  color: #8d9dad;
  line-height: 1.4;
}
.time-tag.scheduled {
  color: #b9a680;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.time-tag .icon {
  width: 10px;
  height: 10px;
}
.time-tag.live {
  color: #96c9b6;
}
.counter {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  background: #0e1621;
  border: 1px solid #293646;
  border-radius: 5px;
  height: 29px;
  padding: 0 2px;
  font-variant-numeric: tabular-nums;
}
.counter button {
  background: none;
  border: 0;
  color: #91a0b2;
  font-size: 13px;
  width: 21px;
  height: 26px;
  padding: 0;
}
.counter button:hover {
  color: var(--gold);
  background: #ffffff08;
}
.counter input {
  width: 23px;
  font-size: 10px;
  border: 0;
  padding: 0;
  background: none;
  text-align: center;
  border-radius: 2px;
  color: #dce5ed;
}
.counter span {
  font-size: 9px;
  color: #7e91a5;
  white-space: nowrap;
  padding-right: 3px;
}
.task-more {
  width: 20px;
  height: 27px;
  margin-left: -7px;
}
.task-more .icon {
  height: 16px;
  width: 16px;
}
.routine-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-top: 16px;
  color: #7f91a4;
  font-size: 8px;
  line-height: 1.6;
}
.routine-footer > span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.routine-footer .icon {
  height: 12px;
  width: 12px;
}
.routine-footer .text-btn {
  font-size: 8px;
  white-space: nowrap;
}
.panel {
  border: 1px solid #293644;
  border-radius: 8px;
  background: linear-gradient(135deg, #151e28, #111a24);
  padding: 21px;
}
.dashboard-rail {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.journey-panel {
  position: relative;
  text-align: center;
  padding: 20px 22px;
  background:
    radial-gradient(ellipse at 50% 20%, #b3965520, transparent 60%),
    linear-gradient(140deg, #17202a, #111923);
}
.journey-panel > .eyebrow {
  font-size: 8px;
  letter-spacing: 1.5px;
  color: #bcb296;
}
.journey-symbol {
  color: #c7ab72;
  width: 65px;
  height: 56px;
  margin: 19px auto 8px;
  filter: drop-shadow(0 0 14px #caac6550);
}
.journey-symbol svg {
  width: 100%;
  height: 100%;
}
.journey-panel h3 {
  font-family: Georgia, serif;
  font-size: 16px;
  font-weight: 400;
  color: #eadfc6;
  margin-bottom: 6px;
}
.journey-panel p {
  font-size: 9px;
  color: #8b9daf;
}
.goal-number {
  font-family: Georgia, serif;
  font-size: 36px;
  color: #f2e1bf;
  margin: 12px 0 19px;
  line-height: 1;
}
.goal-number small {
  display: block;
  font-family: Inter, "Segoe UI", sans-serif;
  font-size: 7px;
  letter-spacing: 2px;
  color: #a99878;
  margin-top: 7px;
}
.goal-caption {
  display: flex;
  justify-content: space-between;
  gap: 7px;
  color: #8b9dac;
  font-size: 8px;
  margin: 8px 0 18px;
}
.journey-panel .secondary {
  font-size: 9px;
  min-height: 33px;
  padding: 7px;
}
.upcoming-panel {
  padding: 15px 18px;
}
.upcoming-panel h3 {
  font-size: 11px;
  font-weight: 500;
}
.upcoming-panel h3 .icon {
  height: 14px;
  width: 14px;
  color: var(--gold);
}
.upcoming-panel .section-heading {
  margin-bottom: 6px;
}
.upcoming-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 10px 0;
  border-bottom: 1px solid #2b354151;
}
.event-time {
  font-size: 16px;
  color: #d4c293;
  min-width: 44px;
  font-variant-numeric: tabular-nums;
}
.event-time small {
  font-size: 6px;
  display: block;
  text-align: center;
  letter-spacing: 1px;
  color: #7c8a9c;
}
.upcoming-item strong {
  font-size: 10px;
  font-weight: 500;
  display: block;
}
.upcoming-item > div:last-child small {
  display: block;
  font-size: 8px;
  color: #a3967c;
  margin-top: 2px;
}
.upcoming-panel .microcopy {
  font-size: 8px;
  margin-top: 10px;
}
.codex-teaser {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #2a3644;
  border-radius: 7px;
  padding: 15px;
  background: #141e29;
}
.codex-teaser > .icon {
  color: #a7b9ca;
  height: 20px;
  width: 20px;
}
.codex-teaser > .icon:last-child {
  height: 13px;
  width: 13px;
  margin-left: auto;
  color: #73869a;
}
.codex-teaser strong {
  font-size: 9px;
  font-weight: 500;
  display: block;
}
.codex-teaser small {
  display: block;
  color: #8899ac;
  font-size: 8px;
}
.daily-motto {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  color: #7c8d9e;
  font-size: 9px;
  margin: 28px 0 15px;
}
.daily-motto .icon {
  color: #be9e63;
  width: 15px;
  height: 15px;
}
.daily-motto .line {
  height: 1px;
  max-width: 70px;
  flex: 1;
  background: #2b3540;
}
.page-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin: 14px 0 29px;
}
.page-heading .eyebrow {
  color: #baa67f;
  font-size: 9px;
}
.page-heading h1 {
  margin: 12px 0;
  font-size: 48px;
}
.page-heading p {
  font-size: 12px;
  color: #a2afbe;
  line-height: 1.8;
}
.page-heading .primary {
  flex-shrink: 0;
}
.badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid #43526345;
  background: #24324248;
  color: #a9bed1;
  border-radius: 4px;
  font-size: 8px;
  letter-spacing: 0.6px;
  padding: 4px 7px;
  white-space: nowrap;
}
.badge.gold-badge {
  border-color: #a98c4e44;
  background: #a98c4e17;
  color: #d6be88;
}
.badge.sage-badge {
  border-color: #7da99344;
  background: #7da99317;
  color: #a2d1bb;
}
.roster-summary {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 17px 20px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 25px;
  flex-wrap: wrap;
}
.roster-summary > span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #c1cbd5;
  font-size: 11px;
}
.roster-summary .icon {
  color: #9fb09b;
  height: 16px;
  width: 16px;
}
.roster-summary small {
  font-size: 9px;
  color: var(--muted);
  margin-left: auto;
}
.roster-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.roster-card {
  padding: 25px;
}
.roster-card.main-card {
  border-color: #957c4d88;
  background:
    radial-gradient(ellipse at 0 0, #b1935020, transparent 65%), var(--surface);
}
.roster-card-top {
  display: flex;
  gap: 13px;
  align-items: center;
  margin-bottom: 21px;
}
.roster-card-top .icon-btn {
  margin-left: auto;
}
.roster-card h2 {
  font-family: Georgia, serif;
  font-size: 28px;
  font-weight: 400;
  overflow-wrap: anywhere;
}
.roster-card p {
  font-size: 10px;
  color: #9cacbd;
  margin: 5px 0 9px;
}
.server-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  color: #9bacc0;
  overflow-wrap: anywhere;
  flex-wrap: wrap;
}
.server-line .icon {
  height: 12px;
  width: 12px;
}
.server-line span {
  color: #8d9dae;
}
.roster-gs {
  font-size: 31px;
  margin: 23px 0 20px;
  letter-spacing: -1px;
  color: #e4ca94;
}
.roster-gs small {
  display: block;
  font-size: 7px;
  letter-spacing: 1.3px;
  color: #899eb3;
  margin-top: 0;
}
.roster-stat {
  display: flex;
  justify-content: space-between;
  margin: 15px 0 8px;
  font-size: 10px;
  color: #9db0c2;
}
.roster-stat strong {
  color: #c1d0de;
  font-weight: 500;
}
.roster-card .secondary {
  margin-top: 25px;
  font-size: 10px;
}
.roster-add-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 340px;
  border: 1px dashed #3c4957;
  background: #101924;
  color: #a4b1bf;
  padding: 20px;
}
.roster-add-card > span {
  height: 50px;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #192431;
  border: 1px solid #344352;
  color: #c5ad82;
}
.roster-add-card strong {
  font-size: 12px;
  font-weight: 500;
}
.roster-add-card small {
  font-size: 10px;
  color: #7f93a8;
}
.roster-add-card:hover {
  border-color: var(--gold);
}
.notice {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 15px 18px;
  border: 1px solid #85734848;
  border-radius: 7px;
  background: #ae8e4209;
  color: #bcae94;
  margin: 0 0 26px;
  font-size: 11px;
}
.notice > .icon {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: #d6b977;
}
.notice a {
  color: var(--gold);
  text-decoration: underline;
}
.agenda-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 25px;
}
.agenda-layout > .section-heading h2 {
  font-size: 16px;
}
.agenda-event {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-bottom: 12px;
  padding: 22px;
}
.agenda-time {
  font-size: 28px;
  letter-spacing: -0.7px;
  color: #dcc494;
  min-width: 84px;
  font-variant-numeric: tabular-nums;
}
.agenda-time small {
  display: block;
  font-size: 10px;
  letter-spacing: 0;
  color: #8e9fb2;
}
.agenda-details {
  flex: 1;
}
.agenda-details h2 {
  font-size: 15px;
  margin: 6px 0;
}
.agenda-details .eyebrow {
  font-size: 7px;
  color: var(--gold);
}
.agenda-details p {
  font-size: 10px;
  color: #9cadbf;
}
.agenda-details > small {
  color: #8b9caf;
  font-size: 9px;
}
.agenda-event .secondary {
  font-size: 10px;
}
.spaced {
  margin-top: 28px;
}
.flexible-list {
  padding: 7px 21px;
}
.flexible-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 16px 0;
  border-bottom: 1px solid #263544;
}
.flexible-list > div:last-child {
  border: 0;
}
.flexible-list > div > span {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
}
.flexible-list .icon {
  width: 16px;
  height: 16px;
  color: #b3a281;
}
.flexible-list .text-btn {
  font-size: 9px;
}
.reset-panel h3 {
  display: flex;
  align-items: center;
  gap: 9px;
}
.reset-panel h3 .icon {
  color: var(--gold);
  height: 17px;
  width: 17px;
}
.reset-entry {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 19px 0;
  padding-bottom: 18px;
  border-bottom: 1px solid #2c3947;
}
.reset-entry > span {
  font-size: 10px;
  color: #9dadbe;
}
.reset-entry > strong {
  font-size: 20px;
  font-weight: 500;
}
.reset-entry > small {
  font-size: 9px;
  color: #889db1;
}
.reset-panel > .text-btn {
  margin-top: 20px;
  justify-content: space-between;
}
.note-panel {
  margin-top: 20px;
}
.note-panel h3 {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: 400;
  color: #e0d4bb;
  line-height: 1.4;
}
.note-panel .eyebrow {
  font-size: 8px;
  color: #b6a784;
  display: block;
  margin-bottom: 10px;
}
.note-panel p {
  font-size: 11px;
  color: #9dadbe;
  line-height: 1.9;
  margin: 12px 0 17px;
}
.gear-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 24px;
  align-items: start;
}
.gear-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.gear-toolbar > .text-btn {
  font-size: 9px;
}
.segmented {
  display: flex;
  gap: 3px;
  background: #101923;
  border: 1px solid #2d3a49;
  border-radius: 7px;
  padding: 4px;
}
.segmented button {
  padding: 8px 13px;
  border: 1px solid transparent;
  background: none;
  font-size: 10px;
  color: #93a7bc;
}
.segmented button.active {
  border-color: #b79b5955;
  background: #ae914918;
  color: #dbc28f;
}
.equipment-panel {
  padding: 19px 18px 0;
}
.equipment-panel h2,
.arcana-panel h2,
.daevanion-panel h2 {
  font-size: 15px;
}
.equipment-heading,
.equipment-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 72px 65px 60px 40px;
  gap: 11px;
  align-items: center;
}
.equipment-heading {
  font-size: 8px;
  color: #899bae;
  padding: 9px 0 14px;
  text-align: center;
}
.equipment-heading > span:first-child {
  text-align: left;
}
.equipment-row {
  border-top: 1px solid #293544;
  padding: 11px 0;
}
.equipment-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
}
.item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1d2a36;
  border: 1px solid #344557;
  width: 32px;
  height: 36px;
  border-radius: 5px;
  color: #7f97ae;
  flex-shrink: 0;
}
.item-icon.equipped {
  background: #aa8c421b;
  border-color: #a28b545b;
  color: var(--gold);
}
.item-icon .icon {
  width: 17px;
  height: 17px;
}
.stone-link {
  display: block;
  font-size: 8px;
  color: #8b9db2;
  margin-top: 1px;
}
.equipment-row input {
  font-size: 11px;
  text-align: center;
  padding: 7px 3px;
  background: #0e1822;
  border-color: #324151;
  border-radius: 4px;
}
.equipment-row input:disabled {
  color: #63768b;
  opacity: 0.5;
}
.slot-score {
  font-size: 11px;
  color: var(--gold);
  text-align: center;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.equipment-foot {
  padding: 15px 0;
  border-top: 1px solid #2b3745;
  color: #8397ac;
  font-size: 9px;
}
.arcana-panel,
.daevanion-panel {
  margin-top: 20px;
}
.arcana-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
}
.arcana-card {
  text-align: center;
  background: #101923;
  border: 1px solid #2e3c4c;
  border-radius: 6px;
  padding: 14px 7px 10px;
}
.arcana-card > span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  color: #b7a4c6;
}
.arcana-card > span .icon {
  width: 25px;
  height: 25px;
}
.arcana-card h3 {
  font-size: 10px;
  font-weight: 500;
  margin-bottom: 10px;
}
.arcana-card select {
  font-size: 9px;
  padding: 7px 2px;
}
.arcana-card > label:not(.sr-only) {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 8px;
  color: #93a2b7;
  margin: 10px 0 0;
}
.arcana-card input {
  padding: 3px;
  font-size: 10px;
  text-align: center;
}
.daevanion-panel h2 {
  margin-bottom: 17px;
}
.daevanion-panel h2 .icon {
  color: var(--gold);
}
.daevanion-panel .form-row label {
  font-size: 11px;
}
.gear-summary {
  position: sticky;
  top: 20px;
}
.score-panel {
  text-align: center;
  padding: 24px;
}
.score-panel > .eyebrow {
  font-size: 8px;
  color: #c5b890;
}
.score-ring {
  background: conic-gradient(var(--gold) var(--progress), #2b3540 0);
  height: 180px;
  width: 180px;
  border-radius: 50%;
  padding: 3px;
  margin: 24px auto;
  box-shadow: 0 0 40px #be994b0b;
}
.score-ring > div {
  height: 100%;
  width: 100%;
  border: 8px solid #141e28;
  background: radial-gradient(ellipse at center, #c6a66312, #141e28 70%);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.score-ring .icon {
  color: var(--gold);
  height: 24px;
  width: 24px;
  margin-bottom: 8px;
}
.score-ring strong {
  font-size: 38px;
  font-weight: 500;
  letter-spacing: -1.5px;
  line-height: 1.2;
  color: #eee2c7;
}
.score-ring small {
  font-size: 7px;
  color: #aa9e88;
  letter-spacing: 1px;
  margin-top: 7px;
}
.score-breakdown > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 11px 0;
  font-size: 11px;
  color: #9eb1c5;
}
.score-breakdown strong {
  color: #cbd6df;
  font-size: 12px;
  font-weight: 500;
}
.simulation-delta {
  border-top: 1px solid #33414e;
  border-bottom: 1px solid #33414e;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  color: #b2c0cc;
  padding: 17px 0;
  margin: 18px 0;
}
.simulation-delta strong {
  font-size: 19px;
  font-weight: 500;
  color: var(--sage);
}
.target-label {
  text-align: left;
  display: block;
  font-size: 10px;
  color: #a6b6c5;
}
.target-label input {
  margin-top: 8px;
  padding: 8px 12px;
}
.score-panel .microcopy {
  font-size: 9px;
  text-align: left;
  margin-top: 8px;
}
.preset-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 9px;
  border-bottom: 1px solid #283746;
  padding: 7px 0;
  color: #9fb1c4;
  gap: 8px;
}
.preset-row strong {
  color: var(--gold);
  font-weight: 500;
}
.note-panel .text-btn {
  margin-top: 15px;
  font-size: 10px;
}
.codex-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-bottom: 30px;
}
.codex-intro > .panel:first-child {
  padding: 27px;
  background:
    radial-gradient(ellipse at 90% 0, #d2b77612, transparent 75%),
    var(--surface);
}
.codex-intro h2 {
  font-family: Georgia, serif;
  font-size: 29px;
  font-weight: 400;
  line-height: 1.3;
  margin: 14px 0;
}
.codex-intro p {
  font-size: 11px;
  color: #99adbf;
  line-height: 1.9;
}
.codex-principles {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
  padding: 25px;
}
.codex-principles > div {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  font-size: 10px;
  color: #92a7bd;
}
.codex-principles > div > .icon {
  color: var(--gold);
  height: 18px;
  width: 18px;
  margin-top: 2px;
}
.codex-principles strong {
  display: block;
  color: #d9e1e8;
  font-weight: 500;
  font-size: 12px;
  margin-bottom: 3px;
}
.source-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 17px;
}
.source-card {
  transition:
    transform 0.18s,
    border-color 0.18s;
  display: flex;
  flex-direction: column;
}
.source-card:hover {
  border-color: #8f7951;
  transform: translateY(-3px);
}
.source-card > div {
  display: flex;
  align-items: center;
  gap: 9px;
}
.source-monogram {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: #b5995f17;
  border: 1px solid #b5995f2b;
  color: #d1b980;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, serif;
  font-size: 17px;
  flex-shrink: 0;
}
.source-card .microcopy {
  font-size: 8px;
}
.source-card > div > .icon {
  height: 12px;
  width: 12px;
  margin-left: auto;
  color: #8fa1b1;
}
.source-card h3 {
  font-size: 14px;
  margin: 17px 0 8px;
  font-weight: 500;
}
.source-card p {
  font-size: 10px;
  color: #95a9bd;
  line-height: 1.9;
  margin-bottom: 20px;
}
.source-card > strong {
  margin-top: auto;
  padding-top: 13px;
  border-top: 1px solid #293746;
  font-size: 9px;
  font-weight: 500;
  color: #c7b58e;
  display: flex;
  justify-content: space-between;
}
.knowledge-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 17px;
  margin-top: 25px;
}
.knowledge-grid details {
  font-size: 11px;
  color: #9eafbf;
}
.knowledge-grid summary {
  font-size: 12px;
  font-weight: 500;
  color: #d7e0e8;
  cursor: pointer;
}
.knowledge-grid p {
  margin: 14px 0;
  line-height: 1.9;
}
.knowledge-grid a {
  color: var(--gold);
  font-size: 10px;
}
.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
}
.settings-panel h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  margin-bottom: 17px;
}
.settings-panel h2 .icon {
  color: var(--gold);
}
.settings-panel > p {
  color: #9eafbf;
  font-size: 11px;
  line-height: 1.9;
  margin-bottom: 20px;
}
.settings-panel .primary {
  font-size: 11px;
}
.settings-panel .text-btn {
  font-size: 9px;
}
.backup-info {
  display: flex;
  gap: 10px;
  align-items: center;
  background: #0c1720;
  border: 1px solid #314051;
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 21px;
  font-size: 11px;
}
.backup-info small {
  display: block;
  color: #869db2;
  font-size: 9px;
  margin-top: 3px;
}
.backup-actions {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-bottom: 20px;
}
.backup-actions > button {
  width: 100%;
  font-size: 11px;
}
.settings-grid .note-panel {
  margin-top: 20px;
}
.settings-panel .microcopy {
  font-size: 10px;
}
.storage-warning {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid #9e744c;
  color: #f2ce9b;
  border-radius: 8px;
  padding: 16px;
  font-size: 12px;
  margin-bottom: 20px;
  background: #392617;
}
.empty {
  padding: 45px 20px;
  text-align: center;
  border: 1px dashed #33414d;
  border-radius: 8px;
  color: #9cafbe;
}
.empty > .icon {
  width: 36px;
  height: 36px;
  margin-bottom: 18px;
  color: var(--gold);
}
.empty h3 {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 10px;
  color: #d6e0e8;
}
.empty p {
  font-size: 11px;
  margin-bottom: 20px;
}
dialog {
  width: min(550px, calc(100vw - 30px));
  max-height: 90dvh;
  background: #131e29;
  border: 1px solid #4b5867;
  color: var(--text);
  padding: 26px;
  border-radius: 12px;
  box-shadow: 0 25px 100px #0008;
}
dialog::backdrop {
  background: #03080dbd;
  backdrop-filter: blur(6px);
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 23px;
}
.modal-head h2 {
  font-family: Georgia, serif;
  font-size: 26px;
  font-weight: 400;
  margin-top: 7px;
}
.modal-head .eyebrow {
  font-size: 8px;
  color: #bca679;
}
.modal-head .icon-btn {
  font-size: 26px;
}
.modal-head .icon-btn:hover {
  color: #fff;
}
.modal-head + div > form > label:first-child {
  margin-top: 0;
}
form > label,
label {
  display: block;
  font-size: 11px;
  color: #b7c5d3;
  margin: 15px 0 7px;
}
label input,
label select,
label textarea {
  display: block;
  margin-top: 7px;
}
label small {
  font-size: 9px;
  color: #8399b0;
  display: block;
  margin-top: 4px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-row label {
  margin-top: 14px;
}
form > .microcopy {
  margin: 10px 0;
}
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  line-height: 1.6;
  margin: 17px 0;
}
.checkbox-label input {
  margin: 0;
}
.checkbox-label small {
  margin-top: 2px;
  display: block;
  color: #8fa4b8;
}
.form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #304051;
}
.form-actions > .danger {
  margin-right: auto;
  font-size: 10px;
}
.form-actions > button {
  font-size: 11px;
}
.form-error {
  color: #f1aaa1;
  font-size: 11px;
  min-height: 0;
  margin-top: 13px;
}
.form-error:empty {
  display: none;
}
.character-sync-panel {
  margin-bottom: 20px;
  padding: 14px;
  border: 1px solid #344654;
  border-radius: 8px;
  background: #192833;
}
html:has(dialog[open]) {
  overflow: hidden;
}
.character-sync-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.character-sync-heading strong {
  display: block;
  font-size: 13px;
}
.character-sync-heading small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
.character-sync-action {
  flex: 0 0 auto;
  max-width: 48%;
  text-align: right;
}
.character-sync-action button {
  min-height: 40px;
  font-size: 12px;
}
.character-sync-progress {
  margin-top: 14px;
}
.character-sync-message {
  margin: 12px 0 0;
  color: #b9dbc9;
  font-size: 12px;
  line-height: 1.5;
}
.character-sync-message.is-error {
  color: #f1aaa1;
}
.character-sync-message:empty,
.character-sync-panel [hidden] {
  display: none;
}
@media (max-width: 450px) {
  .character-sync-heading {
    flex-wrap: wrap;
    gap: 10px;
  }
  .character-sync-action {
    max-width: 100%;
    text-align: left;
  }
  .character-sync-action button {
    min-height: 44px;
  }
}
.form-divider {
  height: 1px;
  background: #344251;
  margin: 22px 0;
}
fieldset {
  border: 1px solid #344454;
  border-radius: 7px;
  padding: 10px 16px 14px;
  margin: 15px 0;
}
legend {
  font-size: 11px;
  color: #c9b98e;
  padding: 0 7px;
}
.weekday-picker {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.weekday-picker > label {
  margin: 0;
  position: relative;
  flex: 1;
  min-width: 34px;
}
.weekday-picker input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}
.weekday-picker span {
  display: block;
  text-align: center;
  border: 1px solid #3a4a5d;
  background: #101b26;
  font-size: 9px;
  border-radius: 5px;
  padding: 7px 4px;
  cursor: pointer;
}
.weekday-picker input:checked + span {
  color: var(--gold);
  background: #bd9c5119;
  border-color: #bc9c5266;
}
.weekday-picker input:focus-visible + span {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
#toast {
  position: fixed;
  left: calc(50% + var(--sidebar) / 2);
  bottom: 26px;
  transform: translate(-50%, 25px);
  opacity: 0;
  pointer-events: none;
  z-index: 100;
  border: 1px solid #617364;
  background: #1b2d2b;
  box-shadow: 0 8px 40px #0005;
  color: #e2ede9;
  padding: 13px 21px;
  border-radius: 8px;
  font-size: 12px;
  max-width: min(580px, 85vw);
  transition:
    opacity 0.2s,
    transform 0.2s;
}
#toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
[hidden] {
  display: none !important;
}
@media (min-width: 1600px) {
  :root {
    --sidebar: 254px;
  }
  .topbar {
    padding: 0 48px;
  }
  main {
    padding: 36px 48px 16px;
  }
  .hero {
    min-height: 335px;
  }
  .hero-content {
    padding: 39px 44px;
  }
  .hero h1 {
    font-size: 58px;
  }
  .hero p {
    font-size: 12px;
  }
  .stats-grid {
    gap: 20px;
  }
  .stat-card {
    padding: 20px 23px 18px;
  }
  .stat-number {
    font-size: 34px;
  }
  .stat-number small {
    font-size: 10px;
  }
  .dashboard-columns {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 28px;
  }
  .task-row {
    min-height: 91px;
    padding: 17px;
    gap: 15px;
  }
  .task-name h3 {
    font-size: 13px;
  }
  .time-tag {
    font-size: 10px;
  }
  .scope-tag {
    font-size: 8px;
  }
  .tabs button {
    font-size: 12px;
  }
  .task-emblem {
    height: 43px;
    width: 40px;
  }
  .counter {
    height: 33px;
  }
  .counter input {
    font-size: 12px;
    width: 30px;
  }
  .counter span {
    font-size: 11px;
  }
  .counter button {
    width: 24px;
  }
  .journey-panel {
    padding: 24px;
  }
  .journey-panel h3 {
    font-size: 19px;
  }
  .journey-panel .secondary {
    font-size: 11px;
  }
  .goal-caption {
    font-size: 10px;
  }
  .journey-panel p {
    font-size: 11px;
  }
  .upcoming-panel h3 {
    font-size: 13px;
  }
  .upcoming-item strong {
    font-size: 12px;
  }
  .upcoming-item > div:last-child small {
    font-size: 10px;
  }
  .codex-teaser strong {
    font-size: 11px;
  }
  .codex-teaser small {
    font-size: 10px;
  }
}
@media (max-width: 1250px) {
  :root {
    --sidebar: 205px;
  }
  .sidebar {
    padding: 30px 14px 16px;
  }
  .sidebar-label {
    font-size: 7px;
  }
  .nav-link {
    font-size: 11px;
  }
  .brand {
    gap: 8px;
  }
  .brand-name {
    font-size: 29px;
  }
  .brand-symbol {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
  }
  .topbar {
    padding: 0 25px;
  }
  main {
    padding: 25px;
  }
  .hero h1 {
    font-size: 43px;
  }
  .hero {
    min-height: 275px;
  }
  .hero-content {
    padding: 30px;
  }
  .stats-grid {
    gap: 10px;
  }
  .stat-card {
    padding: 14px 12px;
  }
  .stat-label {
    font-size: 9px;
    gap: 5px;
  }
  .stat-number {
    font-size: 27px;
    flex-wrap: wrap;
    gap: 4px;
  }
  .stat-number small {
    font-size: 7px;
  }
  .reset-number {
    font-size: 23px;
  }
  .dashboard-columns {
    grid-template-columns: minmax(0, 1fr) 242px;
    gap: 18px;
  }
  .task-row {
    gap: 9px;
    padding: 13px 10px;
  }
  .task-emblem {
    display: none;
  }
  .task-name h3 {
    font-size: 11px;
  }
  .task-more {
    margin-left: -5px;
  }
  .tabs {
    gap: 15px;
  }
  .tabs button {
    font-size: 9px;
  }
  .journey-panel {
    padding: 17px;
  }
  .goal-caption {
    font-size: 7px;
  }
  .gear-layout {
    grid-template-columns: minmax(0, 1fr) 245px;
    gap: 18px;
  }
  .equipment-heading,
  .equipment-row {
    grid-template-columns: minmax(105px, 1fr) 54px 48px 45px 32px;
    gap: 8px;
  }
  .equipment-name {
    font-size: 10px;
    gap: 7px;
  }
  .item-icon {
    width: 27px;
    height: 30px;
  }
  .arcana-grid {
    gap: 5px;
  }
  .arcana-card {
    padding: 9px 5px;
  }
  .arcana-card h3 {
    font-size: 9px;
  }
  .score-panel {
    padding: 18px;
  }
  .score-ring {
    width: 170px;
    height: 170px;
  }
  .source-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .roster-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .agenda-layout {
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 18px;
  }
  .agenda-event {
    padding: 17px;
    gap: 15px;
  }
  .agenda-event .secondary {
    font-size: 0;
    padding: 8px;
    min-height: 34px;
  }
  .agenda-event .secondary .icon {
    width: 14px;
    height: 14px;
  }
  .agenda-time {
    font-size: 23px;
    min-width: 65px;
  }
  .agenda-details h2 {
    font-size: 12px;
  }
  .agenda-details p {
    font-size: 9px;
  }
  footer {
    margin: 5px 25px 0;
  }
  footer i {
    display: none;
  }
}
@media (max-width: 1050px) {
  .dashboard-columns {
    grid-template-columns: 1fr;
  }
  .dashboard-rail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    align-items: start;
  }
  .journey-panel {
    grid-row: span 2;
  }
  .journey-symbol {
    margin: 12px auto 8px;
    height: 40px;
    width: 50px;
  }
  .task-emblem {
    display: flex;
  }
  .tabs {
    gap: 26px;
  }
  .tabs button {
    font-size: 11px;
  }
  .task-row {
    padding: 16px;
    gap: 14px;
  }
  .task-name h3 {
    font-size: 12px;
  }
  .time-tag {
    font-size: 9px;
  }
  .stat-number small {
    display: none;
  }
  .hero-date {
    font-size: 8px;
  }
  .hero-location {
    font-size: 6px;
  }
  .hero h1 {
    font-size: 43px;
  }
  .gear-layout {
    grid-template-columns: 1fr;
  }
  .gear-summary {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
  .gear-summary .note-panel {
    margin: 0;
  }
  .gear-toolbar {
    gap: 8px;
  }
  .equipment-heading,
  .equipment-row {
    grid-template-columns: minmax(160px, 1fr) 80px 70px 65px 50px;
    gap: 11px;
  }
  .gear-summary .score-panel {
    padding: 20px;
  }
  .agenda-layout {
    grid-template-columns: 1fr;
  }
  .agenda-layout > aside {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
  .agenda-layout .note-panel {
    margin-top: 0;
  }
  .agenda-details h2 {
    font-size: 16px;
  }
  .agenda-details p {
    font-size: 11px;
  }
  .agenda-event .secondary {
    font-size: 10px;
  }
  .agenda-time {
    font-size: 28px;
    min-width: 83px;
  }
  .settings-grid {
    grid-template-columns: 1fr;
  }
  .page-heading {
    align-items: flex-start;
  }
  .page-heading .primary {
    font-size: 10px;
    margin-top: 15px;
  }
  .page-heading h1 {
    font-size: 41px;
  }
  .codex-intro {
    grid-template-columns: 1fr;
  }
  .codex-intro h2 {
    font-size: 29px;
  }
  .codex-principles {
    gap: 18px;
  }
  .knowledge-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  :root {
    --sidebar: 0px;
  }
  .sidebar {
    width: 255px;
    transform: translateX(-100%);
    transition: transform 0.2s;
    padding: 27px 20px 20px;
    z-index: 60;
  }
  .sidebar.is-open {
    transform: translateX(0);
  }
  .sidebar .nav-link {
    font-size: 12px;
  }
  .sidebar .sidebar-label {
    font-size: 8px;
  }
  .sidebar .sidebar-version {
    font-size: 8px;
  }
  .sidebar-overlay {
    position: fixed;
    inset: 0;
    background: #0009;
    z-index: 50;
    border: 0;
    border-radius: 0;
  }
  .mobile-menu {
    display: inline-flex;
    width: 27px;
    margin-right: 3px;
  }
  .topbar {
    height: 62px;
    padding: 0 20px;
  }
  .topbar-right {
    gap: 12px;
  }
  .breadcrumb {
    gap: 9px;
    font-size: 10px;
  }
  .breadcrumb > span:first-of-type,
  .breadcrumb-slash {
    display: none;
  }
  .region-badge {
    font-size: 7px;
    letter-spacing: 0.7px;
  }
  .topbar-right > button.icon-btn {
    display: none;
  }
  .workspace {
    margin-left: 0;
  }
  main {
    padding: 19px 20px 10px;
  }
  .hero {
    min-height: 278px;
    background-position: 50% center;
  }
  .hero:before {
    background: linear-gradient(
      90deg,
      #101c2bf0 0%,
      #101c2bb8 55%,
      #101c2b70 100%
    );
  }
  .hero-content {
    padding: 30px 25px;
  }
  .hero h1 {
    font-size: 44px;
  }
  .hero-kicker {
    font-size: 7px;
    letter-spacing: 1.3px;
  }
  .hero p {
    font-size: 10px;
  }
  .hero-date {
    display: none;
  }
  .hero-location {
    font-size: 6px;
    bottom: 12px;
    right: 13px;
  }
  .roster-heading {
    margin-top: 24px;
  }
  .roster-heading h2 {
    font-size: 13px;
  }
  .character-strip {
    margin-bottom: 20px;
  }
  .character-chip {
    min-width: 180px;
    padding: 11px;
  }
  .character-chip strong {
    font-size: 11px;
  }
  .character-chip small {
    font-size: 9px;
  }
  .add-character {
    flex-basis: 130px;
    font-size: 10px;
  }
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 24px;
  }
  .stat-card {
    padding: 14px 15px;
  }
  .stat-label {
    font-size: 10px;
  }
  .stat-number {
    font-size: 27px;
    margin: 9px 0;
  }
  .stat-number small {
    display: block;
    font-size: 7px;
  }
  .stat-foot {
    font-size: 9px;
  }
  .reset-number {
    font-size: 24px;
    margin: 12px 0;
  }
  .routine-panel > .section-heading h2 {
    font-size: 18px;
  }
  .routine-panel > .section-heading .eyebrow {
    font-size: 8px;
  }
  .tabs {
    justify-content: space-between;
    gap: 13px;
  }
  .tabs button {
    font-size: 10px;
  }
  .tabs .icon {
    height: 13px;
    width: 13px;
  }
  .task-row {
    gap: 11px;
    padding: 14px 12px;
    min-height: 84px;
  }
  .task-name h3 {
    font-size: 11px;
  }
  .task-meta {
    gap: 6px;
  }
  .task-emblem {
    height: 33px;
    width: 31px;
  }
  .task-emblem .icon {
    width: 17px;
    height: 17px;
  }
  .counter {
    gap: 2px;
  }
  .counter button {
    width: 21px;
  }
  .counter input {
    width: 21px;
  }
  .counter span {
    font-size: 8px;
  }
  .task-more {
    margin-left: -6px;
    width: 18px;
  }
  .routine-footer {
    font-size: 8px;
  }
  .routine-footer > .text-btn {
    font-size: 8px;
  }
  .page-heading {
    display: block;
    margin: 10px 0 22px;
  }
  .page-heading h1 {
    font-size: 40px;
  }
  .page-heading p {
    font-size: 11px;
  }
  .page-heading .primary,
  .page-heading > .secondary {
    margin-top: 16px;
    font-size: 11px;
  }
  .roster-summary {
    gap: 13px;
    font-size: 11px;
    padding: 14px;
  }
  .roster-summary small {
    margin-left: 0;
  }
  .roster-summary > span {
    font-size: 10px;
  }
  .roster-grid {
    gap: 13px;
  }
  .roster-card {
    padding: 19px;
  }
  .roster-card h2 {
    font-size: 25px;
  }
  .roster-card p {
    font-size: 9px;
  }
  .avatar.large {
    width: 45px;
    height: 50px;
  }
  .roster-card-top {
    gap: 9px;
  }
  .source-grid {
    gap: 13px;
  }
  .source-card {
    padding: 17px;
  }
  .source-card h3 {
    font-size: 13px;
  }
  .source-card .microcopy {
    font-size: 7px;
  }
  .source-card p {
    font-size: 10px;
  }
  .settings-grid {
    gap: 18px;
  }
  .agenda-event {
    padding: 18px;
  }
  .agenda-details h2 {
    font-size: 14px;
  }
  .agenda-details p {
    font-size: 10px;
  }
  .equipment-heading,
  .equipment-row {
    grid-template-columns: minmax(140px, 1fr) 66px 55px 55px 34px;
    gap: 9px;
  }
  .equipment-name {
    font-size: 11px;
  }
  .equipment-panel {
    padding: 17px 14px 0;
  }
  .arcana-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .arcana-card > span {
    height: 39px;
  }
  .gear-toolbar .text-btn {
    font-size: 9px;
  }
  .score-ring {
    width: 168px;
    height: 168px;
  }
  .notice {
    font-size: 10px;
    padding: 13px;
  }
  .notice .icon {
    width: 15px;
    height: 15px;
  }
  .codex-intro {
    gap: 16px;
  }
  .codex-intro > .panel:first-child {
    padding: 22px;
  }
  .codex-intro h2 {
    font-size: 28px;
  }
  footer {
    padding: 18px 0;
    margin: 0 20px;
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
    font-size: 7px;
  }
  footer > span {
    gap: 10px;
  }
  footer > span:last-child {
    justify-content: space-between;
    width: 100%;
  }
  #toast {
    left: 50%;
    font-size: 11px;
    bottom: 20px;
  }
}
@media (max-width: 480px) {
  main {
    padding: 15px 14px 7px;
  }
  .topbar {
    padding: 0 14px;
  }
  .topbar-right {
    gap: 9px;
  }
  .hero {
    min-height: 268px;
  }
  .hero-content {
    padding: 28px 22px;
  }
  .hero h1 {
    font-size: 41px;
  }
  .hero p {
    font-size: 9px;
  }
  .hero-kicker {
    font-size: 6px;
    letter-spacing: 1.1px;
  }
  .hero .primary {
    font-size: 9px;
    min-height: 36px;
    padding: 8px 11px;
  }
  .hero-location {
    display: none;
  }
  .stats-grid {
    gap: 9px;
  }
  .stat-card {
    padding: 13px 12px;
  }
  .stat-label {
    font-size: 9px;
    gap: 6px;
  }
  .stat-number small {
    display: none;
  }
  .stat-number {
    font-size: 28px;
  }
  .reset-number {
    font-size: 23px;
  }
  .roster-heading .text-btn {
    font-size: 8px;
  }
  .routine-panel > .section-heading h2 {
    font-size: 16px;
  }
  .routine-panel > .section-heading .eyebrow {
    font-size: 7px;
    letter-spacing: 1.2px;
  }
  .routine-panel > .section-heading .secondary {
    font-size: 9px;
    gap: 5px;
    padding: 7px;
  }
  .tabs {
    gap: 10px;
  }
  .tabs button {
    font-size: 9px;
    gap: 5px;
  }
  .tabs .icon {
    width: 12px;
    height: 12px;
  }
  .routine-toolbar {
    padding: 13px 0 11px;
    gap: 6px;
  }
  .filters {
    gap: 0;
  }
  .filters button {
    font-size: 8px;
    padding: 5px 8px;
  }
  .search-box.compact {
    max-width: 135px;
  }
  .search-box.compact input {
    font-size: 9px;
  }
  .task-row {
    display: grid;
    grid-template-columns: 19px minmax(0, 1fr) auto 17px;
    gap: 10px;
    position: relative;
    padding: 14px 10px;
    min-height: 88px;
  }
  .task-emblem {
    display: none;
  }
  .task-copy {
    min-width: 0;
  }
  .task-name h3 {
    font-size: 10px;
  }
  .task-meta {
    gap: 5px;
  }
  .time-tag {
    font-size: 8px;
  }
  .time-tag.scheduled {
    line-height: 1.5;
  }
  .scope-tag {
    font-size: 6px;
    padding: 1px 4px;
  }
  .counter {
    height: 30px;
  }
  .counter input {
    font-size: 9px;
    width: 19px;
  }
  .counter button {
    font-size: 12px;
    width: 18px;
    min-height: 28px;
  }
  .counter span {
    font-size: 7px;
    padding-right: 2px;
  }
  .task-row:not(:has(.task-check)) {
    grid-template-columns: minmax(0, 1fr) auto 17px;
  }
  .task-more {
    width: 17px;
    grid-column: 4;
    margin: 0;
  }
  .task-row:not(:has(.task-check)) .task-more {
    grid-column: 3;
  }
  .routine-footer {
    flex-direction: column;
    gap: 10px;
  }
  .routine-footer .text-btn {
    align-self: flex-end;
  }
  .dashboard-rail {
    grid-template-columns: 1fr;
  }
  .journey-panel {
    grid-row: auto;
    padding: 23px;
  }
  .journey-panel h3 {
    font-size: 20px;
  }
  .journey-panel p {
    font-size: 11px;
  }
  .journey-symbol {
    width: 61px;
    height: 51px;
  }
  .goal-caption {
    font-size: 10px;
  }
  .journey-panel .secondary {
    font-size: 11px;
    min-height: 39px;
  }
  .goal-number {
    font-size: 40px;
    margin: 13px 0 22px;
  }
  .upcoming-panel {
    padding: 18px 22px;
  }
  .upcoming-panel h3 {
    font-size: 13px;
  }
  .upcoming-item strong {
    font-size: 12px;
  }
  .upcoming-item > div:last-child small {
    font-size: 10px;
  }
  .upcoming-panel .microcopy {
    font-size: 9px;
  }
  .codex-teaser {
    padding: 18px 22px;
  }
  .codex-teaser strong {
    font-size: 11px;
  }
  .codex-teaser small {
    font-size: 9px;
  }
  .daily-motto {
    font-size: 8px;
    gap: 8px;
  }
  .roster-grid {
    grid-template-columns: 1fr;
  }
  .roster-card {
    padding: 23px;
  }
  .roster-card p {
    font-size: 11px;
  }
  .roster-card h2 {
    font-size: 29px;
  }
  .server-line {
    font-size: 10px;
  }
  .roster-gs {
    font-size: 34px;
  }
  .roster-stat {
    font-size: 12px;
  }
  .roster-card .secondary {
    font-size: 12px;
  }
  .roster-add-card {
    min-height: 220px;
  }
  .roster-summary {
    gap: 12px;
  }
  .roster-summary > span:first-child {
    width: 100%;
  }
  .agenda-layout > aside {
    grid-template-columns: 1fr;
  }
  .agenda-event {
    padding: 16px 13px;
    gap: 13px;
    flex-wrap: wrap;
  }
  .agenda-time {
    font-size: 24px;
    min-width: 68px;
  }
  .agenda-details h2 {
    font-size: 12px;
  }
  .agenda-details p {
    font-size: 9px;
  }
  .agenda-event .secondary {
    margin-left: auto;
    font-size: 9px;
    min-height: 30px;
    padding: 7px;
  }
  .agenda-details .eyebrow {
    font-size: 6px;
  }
  .section-heading h2 {
    font-size: 16px;
  }
  .agenda-layout .section-heading .badge {
    font-size: 6px;
    padding: 4px;
  }
  .flexible-list {
    padding: 6px 15px;
  }
  .flexible-list > div {
    gap: 10px;
  }
  .flexible-list > div > span {
    font-size: 10px;
    gap: 6px;
  }
  .flexible-list .text-btn {
    font-size: 8px;
    white-space: nowrap;
  }
  .flexible-list .text-btn .icon {
    display: none;
  }
  .gear-toolbar {
    display: block;
  }
  .gear-toolbar > .text-btn {
    margin-top: 13px;
    font-size: 9px;
  }
  .segmented button {
    flex: 1;
    padding: 10px;
    font-size: 10px;
  }
  .equipment-panel {
    padding: 16px 10px 0;
  }
  .equipment-panel .section-heading h2 {
    font-size: 14px;
  }
  .equipment-panel .microcopy {
    font-size: 9px;
  }
  .equipment-heading,
  .equipment-row {
    grid-template-columns: minmax(107px, 1fr) 48px 43px 43px 28px;
    gap: 5px;
  }
  .equipment-heading {
    font-size: 6px;
    letter-spacing: 0;
  }
  .equipment-name {
    font-size: 9px;
    gap: 6px;
  }
  .item-icon {
    width: 22px;
    height: 28px;
  }
  .item-icon .icon {
    width: 14px;
    height: 14px;
  }
  .stone-link {
    font-size: 7px;
  }
  .equipment-row input {
    font-size: 10px;
    padding: 8px 2px;
  }
  .slot-score {
    font-size: 10px;
  }
  .equipment-foot {
    font-size: 8px;
  }
  .arcana-panel {
    padding: 17px 13px;
  }
  .arcana-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
  }
  .arcana-card {
    padding: 12px 8px;
  }
  .arcana-card select {
    font-size: 10px;
  }
  .arcana-card h3 {
    font-size: 10px;
  }
  .gear-summary {
    grid-template-columns: 1fr;
  }
  .score-panel {
    padding: 25px !important;
  }
  .score-ring {
    width: 195px;
    height: 195px;
  }
  .score-breakdown > div {
    font-size: 12px;
  }
  .score-breakdown strong {
    font-size: 13px;
  }
  .target-label {
    font-size: 11px;
  }
  .score-panel .microcopy {
    font-size: 10px;
  }
  .source-grid {
    grid-template-columns: 1fr;
  }
  .source-card {
    padding: 21px;
  }
  .source-card h3 {
    font-size: 16px;
  }
  .source-card .microcopy {
    font-size: 9px;
  }
  .source-card p {
    font-size: 12px;
  }
  .source-card > strong {
    font-size: 10px;
  }
  .source-monogram {
    width: 36px;
    height: 36px;
  }
  .section-heading .search-box {
    max-width: 180px;
  }
  .section-heading .search-box input {
    font-size: 9px;
  }
  .knowledge-grid details {
    padding: 20px;
  }
  .knowledge-grid summary {
    font-size: 12px;
  }
  .form-row {
    gap: 12px;
  }
  .settings-panel {
    padding: 21px;
  }
  .settings-panel > p {
    font-size: 12px;
  }
  .form-actions {
    gap: 8px;
  }
  .form-actions > button {
    padding: 9px;
    font-size: 10px;
  }
  .form-actions > .danger {
    padding: 0;
    font-size: 9px;
  }
  dialog {
    padding: 22px 18px;
  }
  .modal-head h2 {
    font-size: 24px;
  }
  .storage-warning {
    flex-wrap: wrap;
    font-size: 11px;
  }
  .storage-warning .secondary {
    margin-left: auto;
  }
  footer {
    margin: 0 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}
/* Readability and compact layout after desktop/mobile review. */
.primary,
.secondary {
  border-radius: 6px;
}
.nav-link {
  font-size: 13px;
}
.mini-character {
  font-size: 12px;
}
.mini-character small {
  font-size: 10px;
}
.sidebar-label {
  font-size: 9px;
}
.sidebar-add {
  font-size: 11px;
}
.sidebar-bottom .nav-link {
  font-size: 11px;
}
.save-status {
  font-size: 10px;
}
.save-status small {
  font-size: 9px;
}
.hero {
  min-height: 250px;
}
.hero-content {
  padding: 25px 34px;
}
.hero h1 {
  font-size: 44px;
}
.hero-kicker {
  font-size: 9px;
  letter-spacing: 1.4px;
}
.hero p {
  font-size: 12px;
  margin: 11px 0 16px;
}
.hero .primary {
  font-size: 11px;
}
.hero-date {
  font-size: 10px;
}
.stat-label {
  font-size: 12px;
}
.stat-number small {
  font-size: 10px;
}
.stat-foot {
  font-size: 11px;
}
.character-chip strong {
  font-size: 13px;
}
.character-chip small {
  font-size: 11px;
}
.tiny-badge {
  font-size: 8px;
}
.alt-label {
  font-size: 9px;
}
.roster-heading h2 {
  font-size: 15px;
}
.roster-heading .text-btn {
  font-size: 11px;
}
.tabs button {
  font-size: 12px;
}
.filters button {
  font-size: 11px;
}
.search-box.compact input {
  font-size: 11px;
}
.task-name h3 {
  font-size: 13px;
}
.scope-tag {
  font-size: 9px;
}
.time-tag {
  font-size: 10px;
}
.counter input {
  font-size: 12px;
  width: 25px;
}
.counter span {
  font-size: 11px;
}
.counter button {
  width: 24px;
}
.counter {
  height: 33px;
}
.routine-footer {
  font-size: 10px;
}
.routine-footer .text-btn {
  font-size: 10px;
}
.journey-panel p {
  font-size: 11px;
}
.journey-panel .secondary {
  font-size: 11px;
}
.goal-caption {
  font-size: 10px;
}
.upcoming-panel h3 {
  font-size: 13px;
}
.upcoming-item strong {
  font-size: 12px;
}
.upcoming-item > div:last-child small {
  font-size: 10px;
}
.upcoming-panel .microcopy {
  font-size: 10px;
}
.codex-teaser strong {
  font-size: 11px;
}
.codex-teaser small {
  font-size: 10px;
}
.equipment-heading {
  font-size: 10px;
}
.equipment-name {
  font-size: 12px;
}
.stone-link {
  font-size: 10px;
}
.equipment-row input {
  font-size: 13px;
}
.slot-score {
  font-size: 13px;
}
.mobile-gear-score {
  display: none;
}
@media (max-width: 1250px) {
  .stat-label {
    font-size: 10px;
  }
  .stat-number small {
    display: none;
  }
  .task-row {
    gap: 9px;
  }
  .tabs {
    gap: 14px;
  }
  .tabs button {
    font-size: 11px;
  }
  .task-name h3 {
    font-size: 12px;
  }
  .time-tag {
    font-size: 9px;
  }
  .scope-tag {
    font-size: 8px;
  }
  .counter span {
    font-size: 10px;
  }
  .counter input {
    font-size: 11px;
    width: 21px;
  }
  .counter button {
    width: 20px;
  }
  .routine-footer {
    font-size: 9px;
  }
  .routine-footer .text-btn {
    font-size: 9px;
  }
  .goal-caption {
    font-size: 8px;
  }
  .equipment-name {
    font-size: 11px;
  }
  .equipment-heading {
    font-size: 8px;
  }
}
@media (max-width: 1050px) {
  .mobile-gear-score {
    position: sticky;
    top: 10px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #1a2735ed;
    border: 1px solid #78684b;
    border-radius: 8px;
    padding: 11px 17px;
    backdrop-filter: blur(14px);
    margin-bottom: 20px;
    box-shadow: 0 5px 25px #0005;
  }
  .mobile-gear-score > span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #b8c9d7;
  }
  .mobile-gear-score .icon {
    color: var(--gold);
    height: 17px;
    width: 17px;
  }
  .mobile-gear-score strong {
    color: #ead2a0;
    font-size: 23px;
    font-weight: 500;
  }
  .mobile-gear-score small {
    font-size: 9px;
    color: #b7aa8f;
  }
  .equipment-heading {
    font-size: 10px;
  }
  .equipment-name {
    font-size: 12px;
  }
}
@media (max-width: 760px) {
  .sidebar:not(.is-open) {
    visibility: hidden;
  }
  .hero {
    min-height: 260px;
  }
  .hero-content {
    padding: 27px 24px;
  }
  .hero h1 {
    font-size: 43px;
  }
  .hero-kicker {
    font-size: 8px;
  }
  .hero p {
    font-size: 11px;
  }
  .hero .primary {
    font-size: 10px;
  }
  .stat-label {
    font-size: 11px;
  }
  .stat-foot {
    font-size: 10px;
  }
  .task-name h3 {
    font-size: 13px;
  }
  .task-row {
    gap: 12px;
  }
  .scope-tag {
    font-size: 9px;
  }
  .time-tag {
    font-size: 10px;
  }
  .counter input {
    font-size: 12px;
  }
  .counter span {
    font-size: 10px;
  }
  .counter button {
    width: 24px;
  }
  .routine-footer {
    font-size: 10px;
  }
  .routine-footer .text-btn {
    font-size: 10px;
  }
  .goal-caption {
    font-size: 10px;
  }
  .equipment-name {
    font-size: 12px;
  }
  .equipment-heading {
    font-size: 9px;
  }
  .equipment-row input {
    font-size: 12px;
  }
  .slot-score {
    font-size: 12px;
  }
  .stone-link {
    font-size: 9px;
  }
}
@media (max-width: 480px) {
  .hero-kicker {
    font-size: 7px;
  }
  .hero h1 {
    font-size: 41px;
  }
  .hero p {
    font-size: 10px;
  }
  .hero .primary {
    font-size: 10px;
  }
  .roster-heading h2 {
    font-size: 14px;
  }
  .roster-heading .text-btn {
    font-size: 9px;
  }
  .character-chip strong {
    font-size: 12px;
  }
  .character-chip small {
    font-size: 10px;
  }
  .stat-label {
    font-size: 10px;
  }
  .stat-foot {
    font-size: 10px;
  }
  .tabs {
    gap: 9px;
  }
  .tabs button {
    font-size: 10px;
  }
  .tabs .icon {
    display: none;
  }
  .filters button {
    font-size: 10px;
  }
  .search-box.compact {
    max-width: 130px;
  }
  .search-box.compact input {
    font-size: 10px;
  }
  .task-row {
    gap: 9px;
    grid-template-columns: 19px minmax(0, 1fr) auto 17px;
  }
  .task-name h3 {
    font-size: 12px;
  }
  .scope-tag {
    font-size: 8px;
  }
  .time-tag {
    font-size: 9px;
  }
  .counter {
    gap: 1px;
  }
  .counter input {
    width: 20px;
    font-size: 11px;
  }
  .counter span {
    font-size: 9px;
  }
  .counter button {
    width: 20px;
  }
  .routine-footer {
    font-size: 9px;
  }
  .routine-footer .text-btn {
    font-size: 9px;
  }
  .equipment-name {
    font-size: 11px;
  }
  .equipment-heading {
    font-size: 8px;
  }
  .equipment-row input {
    font-size: 12px;
  }
  .slot-score {
    font-size: 11px;
  }
  .stone-link {
    font-size: 9px;
  }
  .equipment-name .item-icon {
    display: none;
  }
  .equipment-heading,
  .equipment-row {
    grid-template-columns: minmax(98px, 1fr) 48px 43px 43px 28px;
    gap: 5px;
  }
  .gear-toolbar .segmented button {
    font-size: 11px;
  }
  .arcana-card h3 {
    font-size: 12px;
  }
  .arcana-card select {
    font-size: 11px;
  }
  .arcana-card label {
    font-size: 10px;
  }
  .arcana-card input {
    font-size: 12px;
  }
}
/* Locale, local time and connected characters */
label.search-box {
  display: flex;
  align-items: center;
  margin: 0;
  min-height: 42px;
}
label.search-box > input {
  display: block;
  margin: 0;
  padding: 0;
  height: 40px;
  line-height: normal;
  flex: 1;
  width: 100%;
  min-width: 0;
}
label.search-box > .icon {
  flex-shrink: 0;
}
.language-control {
  margin: 0;
}
.language-control select {
  width: 110px;
  margin: 0;
  padding: 7px 24px 7px 10px;
  min-height: 34px;
  font-size: 12px;
  color: var(--muted);
}
.local-time {
  cursor: help;
  text-underline-offset: 4px;
  text-decoration: underline dotted #6c7e90;
}
.local-time:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: 3px;
}
.time-tooltip {
  position: fixed;
  z-index: 1000;
  width: 260px;
  max-width: calc(100vw - 20px);
  padding: 17px 19px;
  border: 1px solid #665737;
  border-radius: 12px;
  background: #151e29;
  box-shadow: 0 12px 35px #0009;
  text-align: left;
  line-height: 1.5;
  color: #e8e7df;
}
.time-tooltip[hidden] {
  display: none;
}
.time-tooltip > span {
  display: block;
  font-size: 11px;
  color: #cfb982;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.time-tooltip strong {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin: 3px 0;
}
.time-tooltip small {
  font-size: 11px;
  color: #b2bfcd;
}
.tooltip-divider {
  height: 1px;
  background: #33404b;
  margin: 12px 0;
}
.portrait {
  overflow: hidden;
  padding: 0;
}
.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 20px 0;
  padding: 16px 20px;
}
.profile-strip > div {
  display: flex;
  align-items: center;
  gap: 16px;
}
.profile-strip strong,
.profile-strip small {
  display: block;
}
.profile-strip strong {
  font-size: 14px;
}
.profile-strip small {
  font-size: 11px;
  color: #9eafbf;
  margin-top: 5px;
}
.profile-power {
  font-size: 21px;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.profile-power small {
  font-size: 10px;
}
.sync-button {
  font-size: 11px;
  min-height: 38px;
}
.sync-button:disabled {
  opacity: 0.65;
}
.roster-sync {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}
.roster-sync .secondary {
  margin: 0;
}
.import-search {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.import-search .search-box {
  flex: 1;
  max-width: none;
}
.character-result {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px;
  margin: 12px 0;
  text-align: left;
  background: #16212e;
  border: 1px solid #354352;
  border-radius: 9px;
}
.character-result:hover {
  border-color: var(--gold);
  background: #1d2937;
}
.character-result > img {
  width: 54px;
  height: 62px;
  object-fit: cover;
  border-radius: 6px;
}
.character-result > span:nth-child(2) {
  flex: 1;
}
.character-result strong,
.character-result small {
  display: block;
}
.character-result small {
  color: #a4b4c3;
  font-size: 12px;
  margin-top: 5px;
}
.import-loading {
  padding: 25px;
  text-align: center;
}
.import-loading > .icon {
  width: 35px;
  height: 35px;
  color: var(--gold);
  animation: sync-spin 2s linear infinite;
}
@keyframes sync-spin {
  to {
    transform: rotate(360deg);
  }
}
.time-preview {
  display: grid;
  gap: 7px;
  border-left: 2px solid var(--gold);
  background: #18232b;
  padding: 12px 14px;
  margin: 16px 0;
  font-size: 12px;
  color: #bcc9d4;
}
.time-preview:empty {
  display: none;
}
.time-preview strong {
  color: var(--gold);
  font-size: 11px;
}
.time-preview small {
  color: #8fa3b5;
}
.image-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
select.native-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 0;
  pointer-events: none;
  clip-path: inset(50%);
}
.custom-select {
  display: block;
  min-width: 0;
  position: relative;
  margin-top: 8px;
}
.game-class-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  vertical-align: middle;
}
.player-class {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  vertical-align: middle;
  white-space: nowrap;
}
.player-class .game-class-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.avatar .game-class-icon {
  width: 78%;
  height: 78%;
  object-fit: contain;
}
.game-boss-icon {
  object-fit: contain;
}
.select-emblem {
  display: inline-flex;
  width: 24px;
  flex-shrink: 0;
  margin-right: 9px;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
}
.select-emblem .icon,
.select-emblem .game-class-icon {
  width: 22px;
  height: 22px;
}
.select-trigger > span:first-child {
  display: flex;
  align-items: center;
}
.select-trigger {
  width: 100%;
  min-height: 42px;
  padding: 10px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #101923;
  border: 1px solid #354452;
  border-radius: 8px;
  color: #d9e2e8;
  font: inherit;
  font-size: 13px;
  text-align: left;
}
.select-trigger > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.select-trigger:hover {
  border-color: #8e7d57;
  background: #17212c;
}
.select-trigger[aria-expanded="true"] {
  border-color: var(--gold);
  background: #17212c;
}
.select-chevron {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid #b6b8b0;
  border-bottom: 1.5px solid #b6b8b0;
  transform: rotate(45deg) translateY(-2px);
  flex-shrink: 0;
  margin: 0 3px;
  transition: transform 0.15s;
}
.select-trigger[aria-expanded="true"] .select-chevron {
  transform: rotate(225deg) translate(-2px, -1px);
}
.select-popup {
  position: fixed;
  z-index: 1200;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid #665b42;
  border-radius: 10px;
  background: #151f2a;
  box-shadow: 0 16px 40px #0009;
  scrollbar-width: thin;
}
.select-popup [role="option"] {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 11px 34px 11px 12px;
  border-radius: 6px;
  color: #c7d2dd;
  font-size: 13px;
  cursor: pointer;
  position: relative;
  line-height: 1.35;
}
.select-popup [role="option"]:hover,
.select-popup .is-highlighted {
  background: #28313a;
  color: #f0e7d1;
}
.select-popup [aria-selected="true"] {
  color: #e1c58b;
  background: #b19b5e12;
}
.select-popup [aria-selected="true"]::after {
  content: "✓";
  position: absolute;
  right: 12px;
}
.select-popup [aria-disabled="true"] {
  opacity: 0.4;
  cursor: default;
}
.language-control .custom-select {
  margin: 0;
  width: 118px;
}
.language-control .select-trigger {
  min-height: 38px;
  font-size: 12px;
}
.arcana-card .select-trigger {
  font-size: 11px;
  padding: 8px;
  gap: 8px;
}
.inspector-search {
  padding: 22px;
  margin-bottom: 26px;
}
.inspector-search > label {
  display: block;
  font-size: 12px;
  color: #b5c1ce;
  margin-bottom: 10px;
}
.inspector-search .search-box {
  flex: 1;
  width: auto;
}
.player-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.player-result {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  text-decoration: none;
}
.player-result:hover {
  border-color: var(--gold);
  background: #1a2430;
}
.player-card-identity {
  flex: 1;
  min-width: 0;
}
.player-result strong {
  font-size: 16px;
  color: #e8e9e3;
}
.player-result small {
  display: block;
  color: #9eafbf;
  font-size: 11px;
  margin-top: 6px;
}
.player-result-gs {
  color: var(--gold);
  font-size: 23px;
  text-align: right;
}
.player-result-gs small {
  font-size: 8px;
  letter-spacing: 0.1em;
}
.inspector-portrait {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid #685b40;
  flex-shrink: 0;
}
.inspector-portrait.fallback,
.inspector-portrait.image-fallback {
  display: grid;
  place-items: center;
  color: var(--gold);
}
.inspector-hero {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 30px;
  background:
    radial-gradient(ellipse at top right, #5a503329, transparent 70%), #151e28;
}
.inspector-hero > .inspector-portrait {
  width: 88px;
  height: 88px;
}
.inspector-identity {
  flex: 1;
}
.inspector-identity h2 {
  font:
    34px Georgia,
    serif;
  margin: 8px 0;
  color: #eee5d3;
}
.inspector-identity p,
.inspector-identity small {
  color: #a7b6c4;
  font-size: 12px;
}
.inspector-scores {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 12px;
  text-align: center;
}
.score-card {
  position: relative;
  border: 1px solid #86754c;
  border-radius: 12px;
  padding: 14px 20px 18px;
  background: linear-gradient(150deg, #b8a26b13, #0e1721dd);
  box-shadow:
    inset 0 0 0 4px #17232c,
    inset 0 0 0 5px #85704533;
}
.score-card.power-score-card {
  border-color: #557e83;
  box-shadow:
    inset 0 0 0 4px #17232c,
    inset 0 0 0 5px #557e8333;
}
.score-card > strong {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font:
    36px/1.25 Georgia,
    serif;
  color: var(--gold);
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
}
.power-score-card > strong {
  color: #78f2fb;
}
.score-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  object-fit: contain;
}
.gear-score-card > strong {
  color: var(--text);
}
.roster-last-sync {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}
.score-ornament {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  color: var(--gold);
}
.score-ornament:before,
.score-ornament:after {
  content: "";
  height: 1px;
  width: 24px;
  background: linear-gradient(90deg, transparent, #b49b61);
}
.score-ornament:after {
  transform: rotate(180deg);
}
.score-ornament svg {
  width: 16px;
  height: 16px;
}
.display-title {
  color: #a9c5df;
  font-size: 13px;
  margin: -1px 0 14px;
}
.display-title > span {
  color: var(--gold);
  margin-right: 5px;
}
.inspector-identity {
  min-width: 0;
}
.inspector-identity h2 {
  overflow-wrap: anywhere;
}
.inspector-scores small {
  display: block;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #a5b5c3;
  margin-top: 6px;
}
.inspector-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 26px;
}
.inspector-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.inspector-equipment,
.inspector-stats {
  padding: 22px;
}
.inspector-stats {
  margin-bottom: 0;
}
.inspector-layout h3 {
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
}
.player-stats > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #293543;
  font-size: 12px;
}
.player-stats > div > span {
  color: #a3b3c2;
  overflow-wrap: anywhere;
}
.player-stats strong {
  color: #e3e4dc;
  text-align: right;
}
@media (max-width: 1000px) {
  .inspector-layout {
    grid-template-columns: 1fr;
  }
  .inspector-scores {
    gap: 16px;
  }
  .score-card > strong {
    font-size: 23px;
  }
}
@media (max-width: 760px) {
  .language-control .custom-select {
    width: 95px;
  }
  .language-control .select-trigger {
    padding: 8px 10px;
    font-size: 11px;
    gap: 8px;
  }
  .player-results {
    grid-template-columns: 1fr;
  }
  .inspector-hero {
    flex-wrap: wrap;
    padding: 20px;
    gap: 16px;
  }
  .inspector-scores {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    text-align: center;
  }
  .inspector-identity h2 {
    font-size: 27px;
  }
  .inspector-hero > .inspector-portrait {
    width: 64px;
    height: 64px;
  }
  .inspector-search {
    padding: 16px;
  }
}
.profile-sheet-head {
  display: flex;
  align-items: center;
  gap: 18px;
}
.profile-sheet-head > strong {
  margin-left: auto;
  font-size: 32px;
  color: var(--gold);
}
.profile-sheet-head small {
  display: block;
  font-size: 9px;
  letter-spacing: 0.1em;
}
.profile-sheet-head h3 {
  margin: 0;
}
.profile-sheet-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin: 20px 0;
  color: #adbdca;
  font-size: 12px;
}
.imported-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.imported-items > div {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 1px solid #2c3946;
  border-radius: 6px;
}
.imported-items img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}
.imported-items strong {
  display: block;
  font-size: 11px;
  font-weight: 500;
}
.imported-items small {
  display: block;
  color: #a5b6c6;
  font-size: 10px;
  margin-top: 3px;
}
.board-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}
.board-list > div {
  padding: 12px;
  background: #17212b;
  border-radius: 6px;
}
.board-list strong,
.board-list small {
  display: block;
  margin-top: 6px;
}
.board-list small {
  font-size: 10px;
  color: #9bafc1;
}
@media (max-width: 760px) {
  .profile-strip,
  .profile-strip > div:last-child {
    flex-wrap: wrap;
  }
  .profile-strip {
    padding: 14px;
    gap: 14px;
  }
  .profile-strip > div:last-child {
    justify-content: space-between;
    width: 100%;
  }
  .topbar-right {
    gap: 8px;
  }
  .language-control select {
    width: 81px;
    font-size: 11px;
  }
  .topbar .region-badge {
    display: none;
  }
  .import-search {
    flex-direction: column;
  }
  .character-result {
    gap: 9px;
    padding: 10px;
  }
  .character-result .text-btn {
    font-size: 10px;
  }
  .profile-sheet-head {
    gap: 10px;
  }
  .profile-sheet-head > strong {
    font-size: 23px;
  }
  .imported-items {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .import-loading > .icon {
    animation: none;
  }
}
.account-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: 12px;
  max-width: 175px;
}
.account-link span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-panel {
  max-width: 760px;
  padding: 36px;
  margin: 24px auto;
  text-align: center;
}
.account-emblem {
  width: 70px;
  height: 70px;
  margin: 0 auto 18px;
  border: 1px solid #8f7848;
  border-radius: 22px;
  background: linear-gradient(135deg, #263e45, #191c2c);
  display: grid;
  place-items: center;
  color: #dbc38d;
}
.account-emblem svg {
  width: 32px;
  height: 32px;
}
.account-panel p {
  color: var(--muted);
  line-height: 1.8;
}
.account-panel .button-row {
  justify-content: center;
  flex-wrap: wrap;
  display: flex;
  gap: 12px;
}
.discord-login {
  display: inline-flex;
  background: #5865f2;
  color: white;
  text-decoration: none;
  border-color: #5865f2;
}
.discord-login:hover {
  background: #4752c4;
  color: white;
  border-color: #4752c4;
}
.discord-login:focus-visible {
  outline: 2px solid #b9c0ff;
  outline-offset: 3px;
}
.discord-login .discord-icon {
  flex: 0 0 24px;
  width: 24px;
  height: 18px;
  object-fit: contain;
}
.account-panel .discord-login {
  margin: 16px 0;
}
.account-panel a.secondary {
  display: inline-flex;
  text-decoration: none;
}
.account-local {
  text-align: left;
}
.sync-conflict {
  max-width: 760px;
  margin: 24px auto;
  padding: 28px;
  border-color: #ae8d53;
}
.conflict-choices {
  display: flex;
  gap: 16px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.conflict-choices button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
@media (max-width: 760px) {
  .account-link {
    max-width: 32px;
  }
  .account-link span {
    display: none;
  }
  .account-panel {
    padding: 24px 18px;
  }
}
/* Rich public character inspection */
.detailed-items button {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #101720;
  text-align: left;
  min-width: 0;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.detailed-items button:hover {
  background: #1d2a36;
  border-color: var(--gold);
}
.detailed-items button > img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  border: 1px solid currentColor;
  border-radius: 7px;
  background: #0b1117;
}
.detailed-items button span {
  min-width: 0;
}
.detailed-items strong {
  display: block;
  font-size: 12px;
  line-height: 1.5;
}
.detailed-items small {
  display: block;
  color: var(--muted);
  font-size: 11px;
}
.grade-common {
  color: #becbd0;
}
.grade-rare {
  color: #83ce9f;
}
.grade-legend {
  color: #87c8f0;
}
.grade-unique {
  color: #f1cf86;
}
.grade-epic {
  color: #cf9be6;
}
.grade-mythic {
  color: #ee9e8a;
}
.detailed-stats button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-bottom: 1px solid #26303b;
  padding: 9px 0;
  background: transparent;
  text-align: left;
}
.detailed-stats button > img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}
.detailed-stats button > span {
  flex: 1;
  color: var(--muted);
  font-size: 12px;
}
.detailed-stats button > strong {
  color: var(--text);
}
.detailed-stats button:hover span {
  color: var(--text);
}
.companion-list > div {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #0e1720;
}
.inspector-companions {
  padding: 22px;
  margin-top: 20px;
}
.inspector-companions h3 {
  font-size: 15px;
  margin: 0 0 16px;
}
.companion-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.companion-list strong {
  overflow-wrap: anywhere;
  font-size: 13px;
}
.companion-list small {
  margin-top: 4px;
  font-size: 11px;
}
.explained-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.explained-stat {
  padding: 11px;
  border: 1px solid #2b3842;
  border-radius: 8px;
  background: #101921;
  min-width: 0;
}
.explained-stat header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.explained-stat img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}
.explained-stat h4 {
  flex: 1;
  font-size: 11px;
  font-weight: 500;
  margin: 0;
  color: #c7d4da;
  overflow-wrap: anywhere;
}
.explained-stat header strong {
  color: var(--gold);
  font-size: 16px;
  font-weight: 500;
}
.explained-stat ul {
  list-style: none;
  padding: 0;
  margin: 9px 0 0;
  font-size: 10px;
  line-height: 1.6;
  color: #8fa8b5;
}
.explained-stat li + li {
  margin-top: 3px;
}
.detail-stat.detail-stone > img {
  width: 36px;
  height: 42px;
}
.detail-stat.detail-stone > span,
.detail-stat.detail-stone strong {
  color: inherit;
}
.detail-stone small {
  display: block;
  color: #8396a5;
  font-size: 10px;
  margin-top: 3px;
}
.detail-stone {
  padding: 4px 0;
}
.stone-guide {
  padding: 22px;
  margin-top: 24px;
}
.stone-guide summary {
  cursor: pointer;
  font-weight: 500;
  color: var(--gold);
}
.stone-guide summary span {
  display: block;
  padding-top: 6px;
  font-size: 11px;
  color: var(--muted);
}
.stone-guide p {
  color: var(--muted);
  font-size: 12px;
}
.stone-catalogue {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.stone-catalogue h3 {
  font-size: 13px;
}
.stone-catalogue section > div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 12px;
  margin: 6px 0;
}
.stone-catalogue img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}
@media (max-width: 540px) {
  .stone-catalogue {
    grid-template-columns: 1fr;
  }
}
.companion-list img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}
.companion-list strong,
.companion-list small {
  display: block;
}
.companion-list small {
  color: var(--muted);
}
.inspector-skills,
.daevanion-detail,
.inspector-titles {
  padding: 28px;
  margin-top: 24px;
}
.skill-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.skill-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--border);
  background: #0f1720;
  border-radius: 10px;
  text-align: left;
  min-width: 0;
}
.skill-card.equipped {
  border-color: #486c65;
}
.skill-card:hover {
  background: #1c2a32;
  border-color: var(--gold);
}
.skill-card.unlearned {
  opacity: 0.45;
}
.skill-card strong {
  display: block;
  font-size: 13px;
}
.skill-card small {
  display: block;
  color: var(--muted);
  font-size: 11px;
}
.skill-icon {
  position: relative;
  flex: 0 0 48px;
  height: 48px;
}
.skill-icon img {
  width: 48px;
  height: 48px;
  border-radius: 6px;
}
.skill-icon b {
  position: absolute;
  bottom: -5px;
  right: -5px;
  font-size: 11px;
  border: 1px solid #897248;
  border-radius: 4px;
  min-width: 22px;
  text-align: center;
  background: #16252c;
  color: var(--gold);
}
.detail-popover {
  position: fixed;
  z-index: 500;
  width: 390px;
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
  overflow: auto;
  pointer-events: none;
  overscroll-behavior: contain;
  padding: 18px;
  border: 1px solid #786647;
  border-radius: 16px;
  background: linear-gradient(145deg, #1a252eef, #0c1118);
  backdrop-filter: blur(18px);
  box-shadow:
    0 20px 80px #000b,
    0 0 24px #aa8d3910;
  font-size: 13px;
}
.detail-popover.touch-detail {
  pointer-events: auto;
}
.detail-popover.detail-item {
  width: 660px;
}
.detail-popover.detail-skill {
  width: 660px;
}
.detail-item-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.detail-item-columns > div {
  min-width: 0;
}
.detail-item-columns > div:only-child {
  grid-column: 1 / -1;
}
.detail-item-columns > div + div {
  border-left: 1px solid var(--border);
  padding-left: 18px;
}
.detail-body .detail-requirements {
  margin: 0 0 10px;
  font-size: 11px;
}
.detail-body .detail-section h4 {
  margin: 14px 0 8px;
}
.detail-body .detail-section:first-child h4 {
  margin-top: 0;
}
.detail-more {
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: 14px;
}
.detail-more > h4 {
  color: var(--gold);
  font-weight: 600;
  margin: 0 0 12px;
}
.detail-more > h4 .badge {
  margin-left: 6px;
  font-size: 10px;
}
.detail-item-info {
  font-size: 11px;
  line-height: 1.5;
}
.detail-item-info p,
.detail-item-info ul {
  margin: 6px 0;
}
.detail-item-info h4 {
  margin: 8px 0 4px;
}
.detail-specialties .specialty-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
}
.detail-specialties .specialty-list > div {
  margin: 0;
  align-items: flex-start;
  padding: 8px;
  border: 1px solid #293a46;
  border-radius: 8px;
}
.detail-specialties .specialty-list img {
  width: 28px;
  height: 28px;
}
.detail-specialties .specialty-list > div > span {
  line-height: 1.45;
}
@media (max-width: 640px) {
  .detail-item-columns,
  .detail-specialties .specialty-list {
    grid-template-columns: 1fr;
  }
  .detail-item-columns {
    gap: 14px;
  }
  .detail-item-columns > div + div {
    border-left: 0;
    border-top: 1px solid var(--border);
    padding: 14px 0 0;
  }
}
.detail-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 14px 16px 0;
  border-bottom: 1px solid #3c4145;
}
.detail-heading > img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  background: #0c1017;
  border: 1px solid currentColor;
  border-radius: 8px;
}
.detail-heading h3 {
  margin: 2px 0;
  font-size: 18px;
  font-family: Inter, sans-serif;
  line-height: 1.4;
}
.detail-heading p {
  margin: 4px 0 0;
  color: var(--muted);
}
.detail-body {
  padding-top: 12px;
}
.detail-body p {
  white-space: pre-line;
}
.detail-body h4 {
  margin: 20px 0 8px;
  color: var(--gold);
  font-size: 12px;
}
.detail-body h4 small {
  float: right;
  color: var(--muted);
}
.detail-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 7px 0;
}
.detail-stat > span {
  flex: 1;
}
.detail-stat > img {
  width: 25px;
  height: 25px;
  object-fit: contain;
}
.detail-stat strong {
  font-size: 13px;
  color: #c7e5d5;
}
.detail-stat em {
  font-style: normal;
  color: var(--sage);
}
.detail-main {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.detail-body ul {
  padding-left: 17px;
  color: var(--muted);
}
.detail-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.detail-flags span {
  background: #232f39;
  padding: 3px 7px;
  border-radius: 4px;
  color: var(--muted);
  font-size: 10px;
}
.skill-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  color: var(--muted);
  margin-bottom: 16px;
}
.skill-metrics strong {
  display: block;
  color: var(--text);
}
.skill-description {
  line-height: 1.8;
}
.specialty-list > div {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 12px 0;
  color: #89d6cd;
}
.specialty-list img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}
.specialty-list small {
  display: block;
  color: var(--muted);
}
.specialty-list .locked {
  color: #c3ced5;
}
.specialty-list .locked img {
  filter: grayscale(1);
  opacity: 0.65;
}
.reference-date {
  border-top: 1px solid var(--border);
  padding-top: 12px;
  color: var(--muted);
  font-size: 10px;
}
.board-tabs {
  display: flex;
  gap: 8px;
  overflow: auto;
  padding: 4px 4px 14px;
  margin-bottom: 12px;
}
.board-tabs button {
  flex: 1;
  min-width: 112px;
  padding: 12px 18px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #101720;
}
.board-tabs button.active {
  background: linear-gradient(135deg, #263834, #232c34);
  color: var(--gold);
  border-color: #8d7850;
}
.board-tabs small {
  display: block;
  color: var(--muted);
}
.board-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 24px;
}
.board-scroll {
  overflow: auto;
  overscroll-behavior-x: contain;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid #283747;
  background: radial-gradient(ellipse at center, #1a2c3b 0%, #0a111b 75%);
}
.node-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), 32px);
  grid-template-rows: repeat(var(--rows), 32px);
  gap: 5px;
  width: max-content;
  min-width: 100%;
  justify-content: center;
}
.board-node {
  position: relative;
  width: 32px;
  height: 32px;
  padding: 2px;
  border: 1px solid #3b454e;
  border-radius: 50%;
  background: #0c1420;
}
.board-node img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.board-node.locked {
  filter: grayscale(0.85);
  opacity: 0.35;
}
.board-node.unlocked {
  border-color: currentColor;
  box-shadow: 0 0 9px #bda35933;
}
.board-node:hover,
.board-node:focus-visible {
  opacity: 1;
  filter: none;
  transform: scale(1.18);
  z-index: 2;
}
.board-node.skill-node {
  border-radius: 6px;
}
.board-node.stat-node,
.board-node.start-node {
  border: 0;
  padding: 0;
  border-radius: 3px;
  background: transparent;
}
.board-node.stat-node.unlocked {
  box-shadow: none;
}
.board-node.stat-node.locked {
  opacity: 0.75;
  filter: none;
}
.board-node.start-node {
  opacity: 1;
  filter: none;
}
.node-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 6px;
  height: 6px;
  background: #a3edbf;
  border-radius: 50%;
}
.board-effects h4 {
  color: var(--gold);
  margin: 8px 0 14px;
}
.board-effects ul {
  padding: 0;
  list-style: none;
  font-size: 12px;
  margin: 0 0 24px;
}
.board-effects li {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 7px 0;
}
.board-effects img {
  width: 24px;
  height: 24px;
  border-radius: 4px;
}
.board-effects small {
  color: var(--muted);
}
.title-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.title-grid article {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #101720;
}
.title-grid h4 {
  font-size: 16px;
  margin: 8px 0;
}
.title-grid ul {
  padding-left: 16px;
  font-size: 12px;
  color: var(--text);
}
.title-grid small {
  color: var(--muted);
}
.title-category-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.title-collection {
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.history-strip {
  margin-top: 28px;
}
.history-strip .section-heading {
  gap: 16px;
  margin-bottom: 20px;
}
.history-strip h3 {
  margin: 0 0 8px;
}
.history-strip .microcopy {
  margin: 0;
}
.history-points {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.history-points article {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #101a23;
}
.history-points time {
  display: block;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 12px;
}
.history-score {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.history-score .score-icon,
.rank-score .score-icon {
  width: 24px;
  height: 24px;
  flex-basis: 24px;
}
.history-points strong {
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}
.history-score small {
  color: var(--muted);
  font-size: 10px;
}
.history-power strong {
  color: #78f2fb;
}
.rank-score {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
@media (max-width: 1100px) {
  .skill-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .board-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .board-effects {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
  }
  .board-effects h4:nth-of-type(2) {
    grid-row: 1;
    grid-column: 2;
  }
  .board-effects ul:nth-of-type(2) {
    grid-row: 2;
    grid-column: 2;
  }
}
@media (max-width: 760px) {
  .companion-list {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .explained-stats {
    gap: 8px;
  }
  .explained-stat {
    padding: 9px;
  }
  .explained-stat header {
    flex-wrap: wrap;
    gap: 6px;
  }
  .explained-stat h4 {
    font-size: 10px;
  }
  .inspector-stats,
  .inspector-companions {
    padding: 16px;
  }
  .inspector-skills,
  .daevanion-detail,
  .inspector-titles {
    padding: 20px 14px;
  }
  .inspector-skills .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .skill-grid {
    gap: 8px;
  }
  .skill-card {
    gap: 10px;
    padding: 10px 8px;
  }
  .skill-card strong {
    font-size: 11px;
  }
  .skill-icon,
  .skill-icon img {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }
  .skill-card small {
    font-size: 10px;
  }
  .title-grid {
    grid-template-columns: 1fr;
  }
  .detail-popover {
    left: 12px !important;
    top: auto !important;
    bottom: 12px;
    width: calc(100vw - 24px);
    max-height: 80dvh;
  }
  .board-effects {
    display: block;
  }
  .board-tabs button {
    min-width: 100px;
    padding: 10px;
  }
  .board-tabs {
    gap: 6px;
  }
  .daevanion-detail .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }
}
.server-page {
  max-width: 1000px;
  margin: 50px auto;
  padding: 20px;
}
.server-page .panel {
  padding: 32px;
  margin-top: 24px;
}
.leaderboard-panel {
  overflow: hidden;
  padding: 0;
}
.leaderboard-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-end;
  padding: 24px;
  border-bottom: 1px solid var(--border);
}
.leaderboard-filters label {
  flex: 1;
  min-width: 160px;
  font-size: 12px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.leaderboard-table {
  width: 100%;
}
.leaderboard-row {
  position: relative;
  display: grid;
  grid-template-columns: 60px minmax(230px, 1fr) 130px 100px 150px 36px;
  gap: 14px;
  padding: 18px 26px;
  align-items: center;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.leaderboard-row:not(.leaderboard-head):hover {
  background: #203039;
}
.leaderboard-head {
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.09em;
  color: var(--muted);
  padding-top: 14px;
  padding-bottom: 14px;
}
.rank {
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
}
.rank svg {
  width: 18px;
}
.podium .rank {
  color: var(--gold);
}
.rank-1 {
  background: linear-gradient(100deg, #95815314, transparent);
}
.rank-player {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.rank-profile {
  display: flex;
  align-items: center;
  gap: inherit;
  width: 100%;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.rank-profile::after {
  content: "";
  position: absolute;
  inset: 0;
}
.rank-profile:focus-visible::after {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}
.rank-profile > span {
  position: relative;
  z-index: 1;
  min-width: 0;
}
.rank-follow,
.rank-updated {
  position: relative;
  z-index: 1;
}
.rank-follow {
  display: flex;
  justify-content: flex-end;
}
.rank-profile .player-card-avatar {
  flex-basis: 44px;
}
.rank-profile .inspector-portrait {
  width: 44px;
  height: 52px;
  border-radius: 8px;
}
.rank-player strong {
  font-size: 16px;
}
.rank-power {
  color: #78f2fb;
  font-size: 17px;
}
.rank-gs {
  color: var(--text);
  font-weight: 600;
}
.rank-updated {
  font-size: 11px;
  color: var(--muted);
}
.leaderboard-pagination {
  display: flex;
  justify-content: space-between;
  padding: 22px 24px;
  align-items: center;
  color: var(--muted);
}
@media (max-width: 1100px) {
  .leaderboard-row {
    grid-template-columns: 40px minmax(180px, 1fr) 105px 80px 36px;
  }
  .rank-updated {
    display: none;
  }
}
@media (max-width: 760px) {
  .leaderboard-filters {
    gap: 12px;
    padding: 18px;
  }
  .leaderboard-filters label {
    min-width: 120px;
  }
  .leaderboard-row {
    grid-template-columns: 28px minmax(0, 1fr) 78px;
    grid-template-rows: 24px 24px;
    gap: 6px 8px;
    padding: 16px 10px;
  }
  .leaderboard-head {
    grid-template-rows: auto;
  }
  .leaderboard-row > .rank {
    grid-column: 1;
    grid-row: 1;
    justify-content: center;
  }
  .leaderboard-row > .rank-player {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .leaderboard-row > .rank-score:nth-child(3) {
    grid-column: 3;
    grid-row: 1;
  }
  .leaderboard-row > .rank-score:nth-child(4) {
    grid-column: 3;
    grid-row: 2;
    font-size: 11px;
  }
  .leaderboard-row > .rank-follow {
    grid-column: 1;
    grid-row: 2;
    justify-content: center;
  }
  .rank-follow .follow-toggle {
    width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 5px;
  }
  .leaderboard-row .score-icon {
    width: 18px;
    height: 20px;
    flex-basis: 18px;
  }
  .rank-gs {
    display: none;
  }
  .leaderboard-head > :is(:nth-child(4), .rank-updated, .rank-follow) {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .rank-player {
    gap: 8px;
  }
  .rank-player strong {
    font-size: 14px;
  }
  .rank-power {
    font-size: 13px;
    text-align: right;
  }
  .rank {
    font-size: 14px;
  }
  .rank svg {
    display: none;
  }
  .leaderboard-pagination {
    padding: 16px;
  }
}
@media (max-width: 760px) {
  .leaderboard-filters {
    display: grid;
    grid-template-columns: 1fr;
  }
  .leaderboard-filters label {
    min-width: 0;
  }
  .leaderboard-count {
    margin-left: 0;
    text-align: left;
    display: flex;
    gap: 10px;
    align-items: center;
  }
}

/* Character navigation keeps each detailed discipline on its own screen. */
.character-menu {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 8px;
  margin: 24px 0 20px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 14px;
  scrollbar-width: thin;
}
.character-menu a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  padding: 13px 20px;
  border-radius: 9px;
  color: var(--muted);
  text-decoration: none;
  flex: 1;
}
.character-menu a:hover {
  background: #c6a7660b;
  color: var(--text);
}
.character-menu a[aria-current] {
  background: linear-gradient(135deg, #b797502c, #b7975010);
  color: var(--gold);
  box-shadow: inset 0 0 0 1px #c6a76645;
}
.character-menu a span {
  font-size: 11px;
  opacity: 0.7;
}
.character-content > .panel {
  padding: 26px;
}
.character-content h3 {
  display: flex;
  align-items: center;
  gap: 10px;
}
.equipment-tab .detailed-items {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.legion-label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  margin-bottom: 9px;
  font-size: 13px;
}
.legion-label svg {
  width: 15px;
}
.legion-label strong {
  color: var(--gold);
}
.cosmetic-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.cosmetic-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border: 1px solid #ffffff0c;
  background: linear-gradient(135deg, #ffffff04, transparent);
  border-radius: 12px;
  min-width: 0;
}
.cosmetic-card img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  flex-shrink: 0;
}
.cosmetic-card h4 {
  margin: 5px 0 0;
  font-size: 14px;
  overflow-wrap: anywhere;
}
.cosmetic-card small {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
@media (max-width: 1200px) {
  .equipment-tab .detailed-items,
  .cosmetic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .character-menu {
    margin: 20px 0 16px;
  }
  .character-menu a {
    padding: 11px 15px;
    flex: none;
  }
  .character-content > .panel {
    padding: 18px;
  }
  .equipment-tab .detailed-items,
  .cosmetic-grid {
    grid-template-columns: 1fr;
  }
}
.profile-breadcrumb {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 12px;
}
.profile-breadcrumb a {
  color: var(--gold);
  text-decoration: none;
}
.profile-search-disclosure {
  margin-bottom: 22px;
  font-size: 13px;
  color: var(--muted);
}
.profile-search-disclosure summary {
  cursor: pointer;
  width: fit-content;
  padding: 6px 0;
}
.profile-search-disclosure .inspector-search {
  margin: 12px 0 0;
}
@media (max-width: 760px) {
  .profile-breadcrumb {
    flex-wrap: wrap;
  }
}
@media (max-width: 760px) {
  .character-menu {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
  }
  .character-menu a {
    padding: 11px 4px;
    white-space: normal;
    font-size: 12px;
    text-align: center;
  }
}
.journey-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 32px;
  padding: 32px;
  margin: 24px 0 32px;
  background:
    radial-gradient(ellipse at 95% 0, #b49b5520, transparent 60%),
    var(--surface);
}
.journey-overview h2 {
  font:
    28px "Cormorant Garamond",
    Georgia,
    serif;
  margin: 12px 0;
}
.journey-overview p {
  color: var(--muted);
  line-height: 1.7;
  max-width: 640px;
}
.journey-overview small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
  max-width: 640px;
}
.journey-score {
  display: grid;
  gap: 12px;
  border-left: 1px solid var(--border);
  padding-left: 28px;
}
.journey-score > strong {
  font:
    42px "Cormorant Garamond",
    Georgia,
    serif;
  color: var(--gold);
}
.journey-score > span,
.journey-score label {
  font-size: 12px;
  color: var(--muted);
}
.journey-score label {
  display: flex;
  align-items: center;
  gap: 12px;
}
.journey-score input {
  width: 110px;
}
.journey-phases {
  display: grid;
  gap: 22px;
}
.journey-phase {
  padding: 28px;
}
.journey-phase > header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.journey-phase h2 {
  margin: 7px 0 0;
  font-size: 22px;
}
.phase-index {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid #c6a76655;
  border-radius: 12px;
  font:
    25px "Cormorant Garamond",
    Georgia,
    serif;
  color: var(--gold);
  flex-shrink: 0;
}
.journey-step {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid #ffffff09;
}
.journey-step:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.journey-step h3 {
  margin: 0 0 9px;
  font-size: 15px;
}
.journey-step p {
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
  max-width: 100ch;
  font-size: 13px;
}
.journey-step .task-check {
  margin-top: 2px;
  flex-shrink: 0;
}
.journey-step.complete .task-check {
  color: var(--sage);
  border-color: var(--sage);
  background: #7ea99715;
}
.journey-step.complete h3 {
  color: var(--sage);
}
.journey-link {
  padding: 24px;
}
.journey-link h3 {
  font-size: 19px;
  margin: 15px 0;
}
.journey-link p {
  line-height: 1.7;
  color: var(--muted);
  font-size: 13px;
}
.personal-goals {
  overflow: hidden;
}
@media (max-width: 760px) {
  .journey-overview {
    grid-template-columns: 1fr;
    padding: 22px;
    gap: 22px;
  }
  .journey-score {
    border-left: 0;
    border-top: 1px solid var(--border);
    padding: 20px 0 0;
  }
  .journey-phase {
    padding: 20px;
  }
  .journey-step {
    gap: 12px;
  }
  .journey-step p {
    font-size: 12px;
  }
  .journey-phase h2 {
    font-size: 19px;
  }
}
.board-zoom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 20px 0 14px;
  color: var(--muted);
  font-size: 12px;
}
.board-zoom > div {
  display: flex;
  align-items: center;
  gap: 8px;
}
.board-zoom output {
  min-width: 48px;
  text-align: center;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.board-scroll {
  box-sizing: content-box;
  width: calc(100% - 26px);
  aspect-ratio: var(--cols) / var(--rows);
  align-self: start;
  min-width: 0;
  max-height: none;
  padding: 12px;
  overflow: auto;
  overscroll-behavior: contain;
}
.node-grid {
  width: calc(100% * var(--board-zoom, 1));
  min-width: 0;
  aspect-ratio: var(--cols) / var(--rows);
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
  gap: 0.5%;
  margin: auto;
}
.node-grid .board-node {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}
.board-layout {
  grid-template-columns: minmax(0, 1fr) minmax(210px, 26%);
  align-items: start;
}
@media (max-width: 1100px) {
  .board-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .board-effects {
    margin-top: 10px;
  }
}
@media (max-width: 760px) {
  .board-zoom {
    flex-wrap: wrap;
  }
  .board-zoom > span {
    display: none;
  }
  .board-zoom > div {
    width: 100%;
    justify-content: space-between;
  }
  .node-grid .board-node {
    padding: 0;
  }
  .node-dot {
    width: 4px;
    height: 4px;
  }
}
.game-calendar {
  margin-bottom: 38px;
}
.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  margin: 22px 0 14px;
}
.calendar-days button {
  display: grid;
  gap: 8px;
  text-align: center;
  padding: 18px 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #101823;
}
.calendar-days button small {
  color: var(--muted);
  font-size: 11px;
}
.calendar-days button strong {
  font-size: 15px;
  font-weight: 500;
}
.calendar-days button.active {
  border-color: var(--gold);
  background: linear-gradient(150deg, #bea76925, #bea76905);
  color: var(--gold);
}
.calendar-hint {
  color: var(--muted);
  font-size: 12px;
  margin: 18px 0;
}
.calendar-events {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.calendar-event {
  padding: 23px;
}
.calendar-event header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 22px;
}
.calendar-event h3 {
  margin: 0 0 7px;
  font-size: 17px;
}
.calendar-event small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
  display: block;
}
.event-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(65px, 1fr));
  gap: 8px;
}
.event-slot {
  border: 1px solid #ffffff12;
  border-radius: 6px;
  background: #0d1720;
  text-align: center;
  padding: 8px 5px;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
.event-slot.past {
  opacity: 0.45;
}
.event-slot.live {
  border-color: var(--sage);
  color: var(--sage);
}
.unscheduled-events {
  padding: 22px;
  margin: 22px 0;
}
.unscheduled-events summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--gold);
}
.unscheduled-events > p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}
.unscheduled-events > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 24px 0;
}
.unscheduled-events h3 {
  font-size: 14px;
  margin: 0 0 8px;
}
.unscheduled-events article p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.7;
  margin: 0;
}
@media (max-width: 760px) {
  .calendar-days {
    gap: 5px;
  }
  .calendar-days button {
    padding: 14px 2px;
    gap: 5px;
  }
  .calendar-days button strong {
    font-size: 11px;
  }
  .calendar-days button small {
    font-size: 9px;
  }
  .calendar-events,
  .unscheduled-events > div {
    grid-template-columns: 1fr;
  }
  .calendar-event {
    padding: 18px;
  }
}
/* Compact character identity and consistent lining numerals. */
.inspector-hero {
  padding: 22px;
  gap: 24px;
  align-items: center;
}
.inspector-hero > .inspector-portrait {
  width: 126px;
  height: 146px;
  object-fit: cover;
}
.inspector-identity h2 {
  margin: 4px 0;
  font-size: clamp(28px, 3vw, 42px);
}
.inspector-identity p {
  margin: 9px 0;
}
.inspector-scores {
  align-self: center;
  gap: 12px;
}
.score-card {
  padding: 16px 20px;
  min-width: 140px;
}
.score-card > strong {
  font-family: "Segoe UI", system-ui, sans-serif;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum", "tnum";
  font-size: clamp(26px, 2.5vw, 36px);
  font-weight: 500;
  line-height: 1.15;
  margin-top: 7px;
  letter-spacing: -0.04em;
}
.score-ornament {
  display: none;
}
.inspector-scores small {
  font-size: 10px;
}
.profile-strip {
  gap: 18px;
  flex-wrap: wrap;
}
.profile-strip .journal-scores {
  display: flex;
  gap: 10px;
  margin-left: auto;
}
.journal-scores .score-card {
  min-width: 110px;
  padding: 10px 15px;
}
.journal-scores .score-card > strong {
  font-size: 24px;
}
.journal-scores .score-card small {
  font-size: 10px;
}
.profile-strip-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.board-stage {
  position: relative;
  min-width: 0;
  padding-top: 58px;
  border: 1px solid #283747;
  border-radius: 14px;
  background: radial-gradient(ellipse at center, #1a2c3b, #0a111b 80%);
  overflow: hidden;
}
.board-stage .board-zoom {
  position: absolute;
  inset: 10px 14px auto;
  z-index: 3;
  margin: 0;
}
.board-stage .board-zoom > span {
  font-size: 11px;
}
.board-stage .board-scroll {
  box-sizing: border-box;
  width: 100%;
  padding: 16px;
  border: 0;
  border-radius: 0;
  background: none;
  aspect-ratio: var(--cols) / var(--rows);
}
.board-stage .node-grid {
  align-content: center;
}
.board-effects {
  display: block;
}
.board-effects section {
  margin-bottom: 18px;
}
.board-effects h4 {
  margin-top: 0;
  font-size: 12px;
}
.board-bonus-grid {
  display: grid;
  gap: 7px;
}
.board-bonus-grid article,
.board-effects li {
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #334239;
  border-radius: 9px;
  background: linear-gradient(110deg, #78977815, #0d1720);
  font-size: 12px;
}
.board-effects li {
  border-color: #304551;
  background: linear-gradient(110deg, #42779320, #0d1720);
}
.board-effects li img {
  width: 34px;
  height: 34px;
}
.board-effects ul {
  margin-bottom: 0;
}
.board-tabs .pvp-board {
  border-color: #7e52a8;
  color: #c8a5f2;
}
.board-tabs .pvp-board.active {
  background: linear-gradient(135deg, #563376, #251735);
  color: #e0c7ff;
  border-color: #b682ed;
}
.pvp-board .board-stage {
  border-color: #694588;
  background: radial-gradient(ellipse at center, #352345, #120c1c 85%);
}
.pvp-board .node-dot {
  background: #d4a5ff;
}
.pvp-board .board-effects h4 {
  color: #d4a5ff;
}
.pvp-board .board-bonus-grid article {
  border-color: #59386c;
  background: #59386c20;
}
@media (max-width: 1100px) {
  .board-effects {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
  .board-effects > small {
    grid-column: 1 / -1;
  }
  .inspector-hero {
    flex-wrap: wrap;
  }
}
@media (max-width: 760px) {
  .inspector-hero {
    padding: 18px;
    gap: 16px;
  }
  .inspector-hero > .inspector-portrait {
    width: 90px;
    height: 116px;
  }
  .inspector-identity {
    min-width: 0;
    flex: 1;
  }
  .inspector-scores {
    width: 100%;
  }
  .score-card {
    min-width: 0;
    padding: 12px;
    flex: 1;
  }
  .board-stage {
    padding-top: 52px;
  }
  .board-stage .board-scroll {
    padding: 8px;
  }
  .board-effects {
    display: block;
  }
  .profile-strip .journal-scores {
    width: 100%;
    margin: 0;
  }
  .profile-strip-actions {
    width: 100%;
  }
}
/* Resource tracking stays separate from resetting journal checkboxes. */
.odyle-panel {
  padding: 22px;
  margin-bottom: 20px;
  background:
    radial-gradient(ellipse at top right, #287a7330, transparent 70%), #101a24;
}
.odyle-panel header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.odyle-panel header > div {
  flex: 1;
}
.odyle-panel h3 {
  margin: 0 0 5px;
}
.odyle-panel small {
  color: var(--muted);
  font-size: 12px;
}
.odyle-value {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.odyle-value strong {
  font:
    600 36px/1.2 "Segoe UI",
    sans-serif;
  color: #a8ecd9;
  font-variant-numeric: lining-nums tabular-nums;
}
.odyle-value small {
  margin-left: auto;
}
.odyle-panel .progress-bar {
  margin: 12px 0 18px;
  height: 5px;
  border-radius: 9px;
  background: #25343f;
  overflow: hidden;
}
.odyle-panel .progress-bar > span {
  display: block;
  height: 100%;
  background: #8ed6bf;
}
.odyle-facts {
  margin: 0;
  display: grid;
  gap: 10px;
  font-size: 13px;
}
.odyle-facts > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.odyle-facts dt {
  color: var(--muted);
}
.odyle-facts dd {
  margin: 0;
  text-align: right;
}
.odyle-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}
.odyle-panel .microcopy {
  margin: 14px 0 0;
  line-height: 1.6;
}
.odyle-membership {
  padding: 14px 16px;
  margin: 18px 0 6px;
  border: 1px solid #344454;
  border-radius: 8px;
  background: #172532;
}
.odyle-membership .checkbox-label {
  margin: 0;
  color: var(--text);
}
.odyle-membership .microcopy {
  margin: 8px 0 0;
  line-height: 1.5;
}
#odyle-form .form-row {
  align-items: end;
}
@media (max-width: 460px) {
  #odyle-form .form-row {
    gap: 10px;
  }
}
.odyle-panel.compact {
  padding: 16px;
  margin: 16px 0;
}
.odyle-panel.compact .odyle-value strong {
  font-size: 26px;
}
.roster-card .journal-scores {
  margin: 20px 0;
}
.roster-card .score-card strong {
  font-size: 26px;
}
.counter:has(input[max="1000000"]) {
  flex-wrap: wrap;
  justify-content: flex-end;
}
.counter input[max="1000000"] {
  width: 92px;
}
.routine-library {
  display: grid;
  gap: 10px;
}
.routine-library article {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.routine-library article > div {
  flex: 1;
}
.routine-library h3 {
  margin: 0 0 6px;
  font-size: 15px;
}
.routine-library p {
  font-size: 12px;
  color: var(--muted);
  margin: 6px 0 0;
  line-height: 1.6;
}
.routine-library small {
  color: var(--gold);
}
.agenda-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 24px 0;
}
.agenda-timeline {
  padding: 24px 28px;
}
.agenda-timeline > header {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.agenda-timeline h2 {
  text-transform: capitalize;
  margin: 0 0 8px;
}
.agenda-timeline > header p {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}
.agenda-slot {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 24px;
  border-bottom: 1px solid var(--border);
  padding: 20px 0;
}
.agenda-slot:last-child {
  border-bottom: 0;
}
.agenda-slot-time {
  padding-top: 10px;
  color: var(--gold);
  font:
    600 17px/1.5 "Segoe UI",
    sans-serif;
  font-variant-numeric: tabular-nums;
}
.agenda-slot-events {
  display: grid;
  gap: 14px;
  border-left: 1px solid #314858;
  padding-left: 24px;
}
.agenda-slot-event {
  display: flex;
  align-items: center;
  gap: 16px;
}
.agenda-slot-event > div {
  flex: 1;
}
.agenda-slot-event h3 {
  margin: 0 0 5px;
  font-size: 16px;
}
.agenda-slot-event p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}
.agenda-slot-event.live {
  border-radius: 10px;
  background: #48766220;
  padding: 12px;
}
.agenda-past summary {
  padding: 18px 0;
  color: var(--muted);
  font-size: 13px;
}
.agenda-past summary span {
  margin-left: 8px;
  color: var(--gold);
}
.agenda-past .agenda-slot {
  opacity: 0.65;
}
.agenda-bottom {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 28px;
  margin-top: 28px;
}
.personal-event {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  gap: 16px;
  margin-top: 12px;
}
.personal-event h3 {
  margin: 8px 0 0;
}
.account-panel.account-identity {
  display: flex;
  text-align: left;
  align-items: center;
  gap: 26px;
  max-width: none;
  padding: 30px;
}
.account-avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 82px;
  height: 82px;
  border: 1px solid #676edb;
  border-radius: 24px;
  background: linear-gradient(140deg, #5c5aa440, #23223e);
  color: #c6caff;
  font:
    600 28px "Segoe UI",
    sans-serif;
}
.account-copy {
  flex: 1;
}
.account-copy h2 {
  margin: 8px 0;
}
.account-copy p {
  margin: 8px 0 0;
}
.account-copy .account-status {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--sage);
}
.account-controls {
  display: grid;
  gap: 12px;
}
.account-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 24px 0;
}
.account-benefits article {
  padding: 24px;
}
.account-benefits article > svg {
  color: var(--gold);
  width: 26px;
  height: 26px;
}
.account-benefits h3 {
  font-size: 17px;
}
.account-benefits p {
  color: var(--muted);
  line-height: 1.7;
  font-size: 14px;
}
.account-panel.account-local {
  max-width: none;
  text-align: left;
  padding: 24px 30px;
}
@media (max-width: 760px) {
  .agenda-toolbar {
    flex-wrap: wrap;
  }
  .agenda-timeline {
    padding: 18px 14px;
  }
  .agenda-slot {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 8px;
  }
  .agenda-slot-events {
    padding-left: 10px;
  }
  .agenda-slot-event {
    gap: 10px;
    flex-wrap: wrap;
  }
  .agenda-slot-event .task-emblem {
    display: none;
  }
  .agenda-slot-event h3 {
    font-size: 14px;
  }
  .agenda-slot-time {
    font-size: 14px;
  }
  .agenda-slot-event .badge {
    font-size: 10px;
  }
  .agenda-bottom,
  .account-benefits {
    grid-template-columns: 1fr;
  }
  .agenda-bottom > section:empty {
    display: none;
  }
  .account-panel.account-identity {
    flex-wrap: wrap;
    padding: 22px;
    gap: 16px;
  }
  .account-avatar {
    width: 60px;
    height: 60px;
    border-radius: 18px;
  }
  .account-controls {
    width: 100%;
  }
  .routine-library article {
    flex-wrap: wrap;
  }
  .routine-library .task-emblem {
    display: none;
  }
  .routine-library article > div {
    min-width: 180px;
  }
}
.journey-overview.journey-compact {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 0.75fr);
  align-items: center;
  gap: 32px;
  padding: 28px;
}
.journey-compact h2 {
  margin: 10px 0;
  font-size: 28px;
}
.journey-compact p {
  max-width: 480px;
  margin: 0 0 16px;
}
.journey-metrics {
  display: grid;
  grid-template-columns: 1fr 24px 1fr;
  gap: 12px;
  align-items: center;
}
.journey-metrics .score-card {
  padding: 14px;
}
.journey-metrics .score-card strong {
  font-size: 34px;
}
.journey-target {
  display: grid;
  gap: 10px;
  color: var(--gold);
  font-size: 12px;
}
.journey-target input {
  width: 100%;
  text-align: center;
  font:
    600 24px "Segoe UI",
    sans-serif;
  height: 54px;
}
.journey-arrow {
  color: var(--gold);
}
.journey-gap {
  grid-column: 1/-1;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.journey-priorities {
  margin: 26px 0;
}
.journey-priorities header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.journey-priorities small {
  color: var(--muted);
  font-size: 12px;
}
.journey-priorities > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.journey-item {
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.journey-item img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}
.journey-item span {
  flex: 1;
  min-width: 0;
}
.journey-item strong {
  display: block;
  font-size: 13px;
  margin-top: 6px;
}
.journey-step h3 .badge {
  margin-left: 10px;
  font-size: 10px;
  vertical-align: middle;
}
@media (max-width: 960px) {
  .journey-overview.journey-compact {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 22px;
  }
  .journey-priorities > div {
    grid-template-columns: 1fr;
  }
  .journey-priorities header {
    display: block;
    margin-bottom: 12px;
  }
}
.gear-intro {
  padding: 18px 22px;
  margin: 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.gear-intro > div {
  display: flex;
  align-items: center;
  gap: 12px;
}
.gear-intro p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.equipment-name > .item-icon {
  flex-shrink: 0;
  overflow: hidden;
  padding: 3px;
}
.equipment-name > span {
  min-width: 0;
}
.equipment-name > span > small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  margin-bottom: 4px;
}
.equipment-name .gear-item-name {
  font-size: 13px;
  text-align: left;
  display: block;
  color: var(--text);
  background: none;
  border: 0;
  padding: 0;
  line-height: 1.45;
}
.equipment-name .gear-item-name:hover {
  color: var(--gold);
}
.equipment-name .item-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.equipment-row {
  grid-template-columns: minmax(180px, 1fr) 74px 74px 74px 46px;
  gap: 12px;
  min-height: 92px;
}
.equipment-heading {
  grid-template-columns: minmax(180px, 1fr) 74px 74px 74px 46px;
  gap: 12px;
}
.gear-options {
  max-height: 52vh;
  overflow-y: auto;
  margin-top: 18px;
}
.gear-option {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 14px;
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  gap: 14px;
  background: #101a24;
  color: var(--text);
  text-align: left;
}
.gear-option:hover {
  border-color: var(--gold);
  background: #1c2730;
}
.gear-option img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}
.gear-option > span {
  flex: 1;
}
.gear-option strong,
.gear-option small {
  display: block;
}
.gear-option small {
  color: var(--muted);
  font-size: 12px;
  margin-top: 6px;
}
.arcana-grid {
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 14px;
}
.arcana-grid .arcana-card {
  padding: 16px;
  text-align: left;
}
.arcana-card-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.arcana-card-heading img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: brightness(2.2) drop-shadow(0 3px 8px #bc942622);
}
.arcana-card-heading h3 {
  margin: 0;
  font-size: 15px;
}
.arcana-card > label:not(.sr-only) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  font-size: 12px;
  color: var(--muted);
}
.arcana-card > label input {
  width: 72px;
  height: 42px;
  text-align: center;
  font:
    600 20px "Segoe UI",
    sans-serif;
}
.arcana-grade-0 img {
  opacity: 0.45;
  filter: grayscale(1);
}
.arcana-grade-4 {
  border-color: #a5824644;
}
@media (max-width: 760px) {
  .gear-intro {
    flex-wrap: wrap;
  }
  .equipment-row {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    padding: 16px 12px;
  }
  .equipment-row .equipment-name {
    grid-column: 1/-1;
  }
  .equipment-row .slot-score {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }
  .equipment-row .equipment-name > span {
    padding-right: 35px;
  }
  .equipment-heading {
    display: none;
  }
  .arcana-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .arcana-card-heading {
    gap: 8px;
  }
}

/* Game descriptions: preserve prose while distinguishing values and units. */
.game-value {
  font-family: Inter, "Segoe UI", sans-serif;
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: 650;
  white-space: nowrap;
  color: #eee6cf;
}
.game-damage {
  color: #ffb5a0;
}
.game-percent {
  color: #eccc82;
}
.game-time {
  color: #c8b7fb;
}
.game-range {
  color: #b5dcd8;
}
.game-mana {
  color: #8ccef0;
}
.game-health {
  color: #96e4be;
}
.game-skill-ref {
  color: #a2dbf2;
  font-weight: 600;
}
.detail-body .skill-description {
  line-height: 1.8;
  color: #cbd5df;
}
.detail-body > ul,
ul.detail-body {
  line-height: 1.65;
}
.detail-body li + li {
  margin-top: 8px;
}
.specialty-list > div > span {
  line-height: 1.6;
}
.equipment-field {
  min-width: 0;
}
.equipment-field > span {
  display: none;
}
.equipment-field > input {
  width: 100%;
}
@media (max-width: 760px) {
  .equipment-row .equipment-name {
    grid-row: 1;
    min-width: 0;
  }
  .equipment-row .equipment-name .item-icon {
    display: flex;
    width: 38px;
    height: 44px;
  }
  .equipment-row .slot-score {
    align-self: start;
    padding-top: 6px;
    font-size: 14px;
  }
  .equipment-field > span {
    display: block;
    margin-bottom: 7px;
    font-size: 10px;
    color: var(--muted);
  }
  .equipment-row .equipment-field input {
    height: 40px;
    font-size: 14px;
  }
}
/* Consistent breathing room between character-section titles and content. */
.character-content .section-heading {
  margin-bottom: 22px;
  row-gap: 14px;
}
.character-content .section-heading h3 {
  margin: 0;
  font-size: 18px;
}
.character-content .panel > h3 {
  margin: 0 0 22px;
  font-size: 18px;
}
.character-content > .panel {
  margin-top: 0;
}
.character-content > .panel + .panel,
.character-content > .equipment-tab + .panel {
  margin-top: 22px;
}
.explained-stats {
  gap: 16px;
}
.explained-stat {
  padding: 20px;
  border-radius: 12px;
  background: linear-gradient(130deg, #15222d, #101820);
}
.explained-stat header {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 12px;
}
.explained-stat img {
  width: 36px;
  height: 36px;
}
.explained-stat h4 {
  font-size: 15px;
  line-height: 1.4;
}
.explained-stat-value {
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.explained-stat .explained-stat-value > strong {
  font:
    600 36px/1.15 Inter,
    "Segoe UI",
    sans-serif;
  font-variant-numeric: lining-nums tabular-nums;
}
.explained-stat-value > span {
  color: var(--gold);
  font:
    600 22px/1.2 Inter,
    "Segoe UI",
    sans-serif;
}
.explained-stat ul {
  border-top: 1px solid #c6a76620;
  padding-top: 14px;
  margin-top: 16px;
  color: #b7c6cf;
  font-size: 13px;
  line-height: 1.7;
}
.explained-stat li + li {
  margin-top: 7px;
}
.explained-stat ul .game-value {
  font-size: inherit;
}
@media (max-width: 760px) {
  .character-content .section-heading {
    margin-bottom: 18px;
  }
  .explained-stats {
    gap: 10px;
  }
  .explained-stat {
    padding: 14px 12px;
  }
  .explained-stat header {
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 10px 7px;
  }
  .explained-stat img {
    width: 26px;
    height: 26px;
  }
  .explained-stat h4 {
    font-size: 12px;
  }
  .explained-stat-value {
    grid-column: 1/-1;
  }
  .explained-stat .explained-stat-value > strong {
    font-size: 32px;
  }
  .explained-stat ul {
    font-size: 12px;
  }
}

/* Character portraits, equipment categories and consistent score alignment. */
.portrait-button {
  position: relative;
  display: block;
  flex-shrink: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #766443;
  border-radius: 12px;
  background: #0b121b;
  cursor: zoom-in;
}
.portrait-button > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.portrait-zoom {
  position: absolute;
  bottom: 5px;
  right: 5px;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 6px;
  background: #06101cce;
  color: #f1dfb5;
  font: 23px/1 sans-serif;
  opacity: 0;
  transition: opacity 0.15s;
}
.portrait-button:hover .portrait-zoom,
.portrait-button:focus-visible .portrait-zoom {
  opacity: 1;
}
.portrait-viewer {
  width: fit-content;
  max-width: calc(100vw - 32px);
  padding: 18px;
}
.portrait-viewer > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 14px;
}
.portrait-viewer h2 {
  font-size: 22px;
  margin: 0;
}
.portrait-viewer .original-portrait {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(90dvh - 135px);
  object-fit: contain;
  border-radius: 8px;
  margin: auto;
}
.image-pending {
  opacity: 0.45;
}
.inspector-sheet > .inspector-hero {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  min-height: 0;
  padding: 20px;
}
.inspector-avatar,
.inspector-hero > .inspector-portrait {
  width: 128px;
  height: 128px;
}
.inspector-identity > p {
  margin: 8px 0 0;
}
.inspector-identity .legion-label {
  margin-top: 7px;
}
.inspector-hero .inspector-scores {
  width: auto;
}
.inspector-actions {
  align-items: center;
}
.profile-synced {
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
  text-align: right;
}
.score-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.score-card > small {
  width: 100%;
  margin-top: 0;
}
.profile-strip .journal-scores {
  align-self: stretch;
}
.profile-strip .journal-scores .score-card {
  min-width: 142px;
}
.profile-strip .profile-strip-actions {
  padding-left: 22px;
  margin-left: 4px;
  border-left: 1px solid #bca57438;
}
.profile-strip .profile-strip-actions > * {
  white-space: nowrap;
}
.routine-panel .section-heading {
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
}
.button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.routine-panel .button-row {
  margin-left: auto;
}
.routine-panel .button-row .text-btn {
  padding: 10px 4px;
}
.roster-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
}
.roster-identity {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  align-items: center;
  gap: 16px;
}
.roster-identity .avatar {
  width: 112px;
  height: 128px;
  border-radius: 13px;
}
.roster-card .roster-card-top {
  margin: 0 0 10px;
  gap: 12px;
}
.roster-card-top .icon-btn {
  margin-left: 0;
}
.roster-identity h2 {
  margin-top: 0;
  font-size: 29px;
}
.roster-card .roster-sync {
  margin: 18px 0 0;
  gap: 10px;
  flex-wrap: wrap;
}
.roster-card .roster-sync .secondary {
  margin: 0;
}
.roster-card .journal-scores {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.roster-card .journal-scores .score-card {
  min-width: 0;
}
.roster-card .journal-scores .score-card strong {
  font-size: 28px;
}
.sidebar-character-row {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
}
.sidebar-character-row .mini-character {
  flex: 1;
  min-width: 0;
}
.sidebar-character-row .mini-character > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.character-profile-link {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  height: 32px;
  width: 30px;
  color: #9caebe;
  border-radius: 7px;
}
.character-profile-link:hover,
.character-profile-link:focus-visible {
  color: var(--gold);
  background: #dcc99e18;
}
.character-profile-link > .icon {
  width: 16px;
  height: 16px;
}
.compact-tooltip {
  position: absolute;
  z-index: 20;
  right: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%);
  padding: 7px 10px;
  border-radius: 7px;
  border: 1px solid #756644;
  background: #101a24;
  box-shadow: 0 5px 18px #0008;
  color: #eee5d3;
  white-space: nowrap;
  font:
    12px/1.4 Inter,
    sans-serif;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.character-profile-link:hover .compact-tooltip,
.character-profile-link:focus-visible .compact-tooltip {
  opacity: 1;
  visibility: visible;
}
.account-identity .account-avatar {
  width: 104px;
  height: 104px;
  border-color: #8b7953;
}
.equipment-groups {
  display: grid;
  gap: 24px;
}
.equipment-group + .equipment-group {
  padding-top: 22px;
  border-top: 1px solid #9da7af20;
}
.equipment-group > h4 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  color: #c6b78f;
  font:
    500 13px/1.5 Inter,
    sans-serif;
}
.equipment-group > h4 .icon {
  width: 17px;
  height: 17px;
}
.equipment-group > h4 > span {
  color: #8998a6;
  font-size: 11px;
  margin-left: 3px;
}
.equipment-group .detailed-items {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.equipment-group-weapons .detailed-items {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.equipment-group .detailed-items > button {
  min-height: 84px;
  padding: 12px;
  gap: 13px;
}
.equipped-item-icon {
  position: relative;
  display: block;
  flex: 0 0 48px;
  width: 48px;
  height: 52px;
}
.equipped-item-icon img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.equipped-item-copy {
  min-width: 0;
  flex: 1;
}
.equipped-item-copy strong {
  line-height: 1.45;
}
.item-icon {
  position: relative;
  overflow: visible;
}
.item-enchant {
  position: absolute;
  bottom: -3px;
  right: -4px;
  min-width: 25px;
  padding: 2px 4px;
  border: 1px solid #b4995b;
  border-radius: 5px;
  background: #17150deb;
  color: #ffe6a8;
  box-shadow: 0 2px 5px #000b;
  font:
    700 12px/1.2 Inter,
    sans-serif;
  text-align: center;
  letter-spacing: 0;
}
.item-detail-level {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}
.enchant-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 5px;
  border: 1px solid #aa874e;
  color: #ffe2a0;
  background: #b38e3420;
  font:
    700 20px/1.3 Inter,
    sans-serif;
}
.equipment-group-arcana .detailed-items {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.equipment-group-arcana .detailed-items > button {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 18px 12px;
  background: linear-gradient(150deg, #b0924720, #0e1721);
}
.equipment-group-arcana .equipped-item-icon {
  flex-basis: auto;
  width: 64px;
  height: 80px;
  margin-bottom: 4px;
}
.equipment-group-arcana .equipped-item-icon img {
  width: 64px;
  height: 80px;
}
.equipment-group-arcana .equipped-item-copy strong {
  white-space: normal;
}
.gear-choice-intro {
  margin: 0 0 22px;
  line-height: 1.7;
}
.score-ring > div {
  background: radial-gradient(ellipse at center, #27353f, #101b25 73%);
}
.score-ring strong {
  font:
    650 44px/1.1 Inter,
    "Segoe UI",
    sans-serif;
  text-shadow:
    0 2px 3px #000,
    0 0 8px #000c;
  font-variant-numeric: lining-nums tabular-nums;
}
.score-ring .score-target {
  display: block;
  margin-top: 10px;
  color: #b2bdc5;
  font-size: 12px;
}
.score-target b {
  color: #f1d9a5;
  font-weight: 600;
}
/* Daevanion frames keep the game silhouette, with no separate status dot. */
.board-node .node-dot {
  display: none;
}
.node-grid .board-node.skill-node,
.node-grid .board-node.start-node {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.node-artwork {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
}
.node-artwork > .node-frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 2px #000b);
}
.node-artwork > .node-skill-image {
  position: absolute;
  inset: 10%;
  width: 80%;
  height: 80%;
  object-fit: cover;
  clip-path: polygon(
    3% 3%,
    30% 4%,
    50% 0,
    70% 4%,
    97% 3%,
    96% 30%,
    100% 50%,
    96% 70%,
    97% 97%,
    70% 96%,
    50% 100%,
    30% 96%,
    3% 97%,
    4% 70%,
    0 50%,
    4% 30%
  );
}
.node-grid .skill-node.locked {
  opacity: 0.52;
  filter: grayscale(1) brightness(0.65);
}
.node-grid .skill-node.unlocked .node-frame {
  filter: drop-shadow(0 0 3px #deb36566);
}
.node-grid .start-node {
  z-index: 1;
}
.node-class-emblem {
  background: radial-gradient(circle, #246776 0, #122e3c 47%, transparent 65%);
}
.node-class-emblem::before {
  content: "";
  position: absolute;
  inset: -6%;
  border: 3px double #877343;
  background: #0b171dd9;
  clip-path: polygon(
    50% 0,
    63% 12%,
    85% 9%,
    88% 31%,
    100% 50%,
    88% 68%,
    91% 90%,
    68% 88%,
    50% 100%,
    32% 88%,
    9% 91%,
    12% 68%,
    0 50%,
    12% 32%,
    9% 9%,
    32% 12%
  );
}
.node-class-emblem > .game-class-icon {
  position: absolute;
  z-index: 2;
  inset: 13%;
  width: 74%;
  height: 74%;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px #000);
}
.node-class-emblem .node-frame {
  background: radial-gradient(circle, #29707a99, #123345 65%, transparent 66%);
}
.detail-heading > .node-artwork {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
}
@media (max-width: 1100px) {
  .inspector-sheet > .inspector-hero {
    grid-template-columns: 112px minmax(0, 1fr);
  }
  .inspector-avatar,
  .inspector-hero > .inspector-portrait {
    width: 112px;
    height: 112px;
  }
  .inspector-hero .inspector-scores {
    grid-column: 1/-1;
    width: 100%;
  }
  .profile-strip .profile-strip-actions {
    border-left: 0;
    border-top: 1px solid #bca57438;
    margin: 0;
    padding: 16px 0 0;
    width: 100%;
  }
  .equipment-group-arcana .detailed-items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .inspector-sheet > .inspector-hero {
    grid-template-columns: 90px minmax(0, 1fr);
    padding: 16px;
    gap: 16px;
  }
  .inspector-avatar,
  .inspector-hero > .inspector-portrait {
    width: 90px;
    height: 110px;
  }
  .profile-synced {
    margin-left: auto;
    flex: 1 1 130px;
    width: auto;
    text-align: right;
  }
  .profile-strip .journal-scores {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .profile-strip .journal-scores .score-card {
    min-width: 0;
  }
  .routine-panel .button-row {
    margin: 0;
    gap: 16px;
  }
  .equipment-group .detailed-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .equipment-group .detailed-items > button {
    flex-wrap: wrap;
    align-content: start;
    gap: 10px;
    padding: 12px;
  }
  .equipment-group .equipped-item-copy {
    flex: 1 1 100%;
  }
  .equipment-group .detailed-items strong {
    white-space: normal;
    font-size: 12px;
  }
  .equipment-group-arcana .detailed-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .roster-identity {
    grid-template-columns: minmax(0, 1fr) 96px;
    gap: 12px;
  }
  .roster-identity .avatar {
    width: 96px;
    height: 116px;
  }
  .roster-card .journal-scores .score-card strong {
    font-size: 24px;
  }
  .account-identity .account-avatar {
    width: 86px;
    height: 86px;
  }
}
.profile-progress {
  margin: 16px 0;
  padding: 18px 22px;
}
.profile-progress-copy {
  display: flex;
  align-items: center;
  gap: 14px;
}
.profile-progress-copy > div {
  flex: 1;
}
.profile-progress-copy strong {
  display: block;
  font-size: 0.98rem;
}
.profile-progress-copy small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}
.profile-progress-copy > b {
  font: 600 1.4rem/1.1 var(--sans);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--gold);
}
.profile-progress-copy > b small {
  display: inline;
  font-size: 0.7em;
  margin-left: 2px;
}
.loading-shugo {
  font-size: 2rem;
  color: var(--gold);
}
.profile-progress-track {
  margin-top: 14px;
  height: 5px;
  border-radius: 8px;
  overflow: hidden;
  background: #263644;
}
.profile-progress-track span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #729bba, #d9bc7a);
  border-radius: inherit;
  transition: width 0.35s;
}
.profile-progress-track.indeterminate span {
  animation: shugo-wait 1.8s ease-in-out infinite alternate;
}
@keyframes shugo-wait {
  to {
    transform: translateX(310%);
  }
}
.character-overview {
  display: grid;
  gap: 18px;
}
.character-overview .panel {
  padding: 22px;
  min-width: 0;
}
.overview-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(290px, 1fr);
  gap: 18px;
  align-items: stretch;
}
.character-overview .section-heading {
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.character-overview h3 {
  font-size: 1.15rem;
}
.character-overview .text-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--gold);
  font-size: 0.8rem;
}
.character-overview .text-link svg {
  width: 15px;
  height: 15px;
}
.overview-weapon-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.overview-weapon {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  min-width: 0;
  text-align: left;
  border: 1px solid color-mix(in srgb, currentColor 50%, #17232d);
  border-radius: 12px;
  background:
    radial-gradient(
      ellipse at 10% 50%,
      color-mix(in srgb, currentColor 9%, transparent),
      transparent 75%
    ),
    #0d1821;
}
.overview-weapon:hover {
  border-color: currentColor;
  background-color: #15232d;
}
.overview-weapon-art {
  position: relative;
  flex: 0 0 76px;
}
.overview-weapon-art img {
  width: 76px;
  height: 90px;
  object-fit: contain;
  filter: drop-shadow(0 5px 12px #0008);
}
.overview-weapon-art .enchant-badge {
  position: absolute;
  right: -2px;
  bottom: 0;
  font-size: 1.12rem;
}
.overview-weapon-copy {
  flex: 1;
  min-width: 0;
}
.overview-weapon-copy small {
  display: block;
  font-size: 0.72rem;
  opacity: 0.8;
  margin-bottom: 8px;
}
.overview-weapon-copy > strong {
  display: block;
  font: 600 1.05rem/1.4 var(--sans);
}
.overview-item-level {
  display: block;
  color: #a5b7c6;
  margin-top: 9px;
  font-size: 0.78rem;
}
.overview-weapon > svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  opacity: 0.65;
}
.overview-attribute-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.overview-attribute {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 12px;
  text-align: left;
  border: 1px solid #2b3c49;
  border-radius: 10px;
  background: #0d1821;
  min-width: 0;
}
.overview-attribute:hover {
  border-color: var(--gold);
}
.overview-attribute img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.overview-attribute > span {
  color: #b4c6d3;
  font: 500 0.78rem/1.3 var(--sans);
  min-width: 0;
  overflow-wrap: anywhere;
}
.overview-attribute > strong {
  font: 600 1.8rem/1 var(--sans);
  font-variant-numeric: lining-nums tabular-nums;
  color: #f2dfae;
}
.overview-skill-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.overview-skill {
  display: flex;
  align-items: center;
  text-align: left;
  gap: 12px;
  padding: 12px;
  min-width: 0;
  border: 1px solid #3a354c;
  border-radius: 10px;
  background: linear-gradient(110deg, #27213940, transparent), #0d1821;
  width: 100%;
}
.overview-skill:hover {
  border-color: #c6a8e8;
  background-color: #152430;
}
.overview-skill strong {
  min-width: 0;
  font-size: 0.85rem;
  line-height: 1.45;
}
.overview-skill .skill-icon,
.overview-skill .skill-icon img {
  width: 48px;
  height: 48px;
}
.overview-skill .skill-icon {
  flex: 0 0 48px;
}
.overview-title-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.overview-title-grid article {
  display: flex;
  gap: 14px;
  padding: 4px 18px 4px 0;
  border-right: 1px solid #2b3c49;
}
.overview-title-grid article:last-child {
  border: 0;
}
.overview-title-symbol {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  height: 48px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, currentColor 15%, transparent),
    transparent
  );
  border-top: 1px solid currentColor;
  clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
}
.overview-title-symbol svg {
  width: 23px;
  height: 23px;
}
.overview-title-grid h4 {
  margin: 8px 0;
  font-size: 1rem;
  line-height: 1.4;
}
.overview-title-grid ul {
  padding: 0;
  margin: 8px 0 0;
  list-style: none;
  color: #acbfcd;
  font-size: 0.8rem;
  line-height: 1.55;
}
.overview-title-grid li + li {
  margin-top: 3px;
}
.overview-board-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.overview-board-grid a {
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 10px;
  font-size: 0.86rem;
  border-radius: 10px;
  --board-accent: #79c5c1;
}
.overview-board-grid a:hover {
  background: #23333f66;
}
.overview-board-grid a.pvp-board {
  --board-accent: #bc95ed;
}
.overview-board-ring {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: conic-gradient(var(--board-accent) var(--progress), #263644 0);
  padding: 3px;
}
.overview-board-ring b {
  display: grid;
  grid-auto-flow: column;
  align-content: center;
  justify-content: center;
  align-items: baseline;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #101c26;
  font: 600 1.25rem/1 var(--sans);
  color: #e0ebed;
  font-variant-numeric: lining-nums tabular-nums;
}
.overview-board-ring small {
  font-size: 0.7rem;
  margin-left: 2px;
  color: var(--board-accent);
}
.overview-board-grid a > small {
  color: var(--muted);
  font-size: 0.73rem;
}
.overview-pending {
  display: flex;
  gap: 12px;
  align-items: center;
  color: var(--muted);
  grid-column: 1 / -1;
}
@media (max-width: 1200px) {
  .overview-columns {
    grid-template-columns: 1fr;
  }
  .overview-attribute-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .overview-skill-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .character-overview .panel {
    padding: 16px;
  }
  .overview-title-grid,
  .overview-weapon-grid {
    grid-template-columns: 1fr;
  }
  .overview-attribute-grid,
  .overview-skill-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .overview-title-grid article {
    border-right: 0;
    border-bottom: 1px solid #2b3c49;
    padding: 0 0 16px;
  }
  .overview-board-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }
  .overview-skill {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .overview-skill strong {
    font-size: 0.8rem;
  }
  .profile-progress-copy strong {
    font-size: 0.85rem;
  }
  .character-overview .section-heading h3 {
    font-size: 1.05rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .profile-progress-track span {
    animation: none;
    transition: none;
  }
}

/* Global region choice stays readable on narrow search and import forms. */
.region-control {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  margin-bottom: 14px;
}
.region-control .custom-select {
  max-width: 100%;
}
.leaderboard-filters .region-control {
  flex-basis: 200px;
  margin-bottom: 0;
}
/* Public character identity, followed players and personal leaderboards. */
.sidebar {
  height: 100dvh;
  overflow: hidden;
  padding: 24px 16px 14px;
}
.sidebar > * {
  flex-shrink: 0;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.sidebar-brand .brand {
  padding: 0 6px;
}
.sidebar-close {
  display: none;
}
.sidebar > nav .nav-link {
  min-height: 40px;
  margin-bottom: 3px;
  padding: 8px 10px;
}
.sidebar > .sidebar-players {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-height: 0;
  margin-top: 16px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.sidebar-player-scroll {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  scrollbar-color: #435365 transparent;
  scroll-padding-block: 44px;
}
.sidebar-player-content {
  position: relative;
  isolation: isolate;
  padding-bottom: 4px;
}
.sidebar .sidebar-characters,
.sidebar .following-shortlist {
  max-height: none;
  overflow: visible;
}
.sidebar-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  width: 100%;
  min-height: 42px;
  margin: 0;
  padding: 10px;
  border: 0;
  border-radius: 0;
  background: #0e151e;
  color: #a0aebe;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.07em;
  text-align: left;
}
.sidebar-section-title:hover {
  color: var(--gold);
  background: #17232e;
}
.sidebar-section-title:focus-visible {
  outline-offset: -3px;
}
.sidebar-section-count {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  margin-left: auto;
  padding: 0 5px;
  border-radius: 5px;
  background: #23313e;
  color: #d8e1e9;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.sidebar-section-title > .icon {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
}
.sidebar-jump-up {
  transform: rotate(-90deg);
}
.sidebar-jump-down {
  transform: rotate(90deg);
}
.sidebar-following-title {
  /* Both sections share a scroll container: the next heading stays reachable
     at its bottom, then remains at the top while its players scroll past. */
  position: sticky;
  top: 0;
  bottom: 0;
  z-index: 2;
  border-block: 1px solid #2b3946;
  background: #16212c;
  box-shadow: 0 -5px 12px #0e151e55;
}
.sidebar-bottom {
  margin-top: 0;
  padding-top: 8px;
}
.sidebar-bottom .nav-link {
  min-height: 36px;
  margin-bottom: 0;
  padding-block: 8px;
}
.sidebar .save-status {
  padding-block: 10px;
}
.navigation-open,
.navigation-open body {
  overflow: hidden;
}
@media (max-height: 850px) {
  .sidebar {
    padding-top: 14px;
    padding-bottom: 10px;
  }
  .sidebar-tagline,
  .sidebar-version {
    display: none;
  }
  .sidebar > nav .nav-link {
    min-height: 36px;
    padding-block: 6px;
  }
  .sidebar > .sidebar-players {
    margin-top: 10px;
  }
}
@media (max-width: 760px), (max-width: 1000px) and (max-height: 550px) {
  :root {
    --sidebar: 0px;
  }
  .sidebar {
    width: min(360px, calc(100vw - 24px));
    padding: max(16px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom));
    transform: translateX(-100%);
    transition: transform .2s;
    z-index: 60;
  }
  .sidebar.is-open {
    transform: translateX(0);
  }
  .sidebar:not(.is-open) {
    visibility: hidden;
  }
  .sidebar-overlay {
    position: fixed;
    inset: 0;
    background: #0009;
    z-index: 50;
    border: 0;
    border-radius: 0;
  }
  .sidebar-tagline,
  .sidebar-version,
  .sidebar .save-status small {
    display: none;
  }
  .sidebar-close {
    display: inline-flex;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
  }
  .sidebar > nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }
  .sidebar > nav .nav-link {
    gap: 8px;
    min-height: 44px;
    margin: 0;
    padding: 8px;
    font-size: 12px;
    line-height: 1.35;
  }
  .sidebar > nav .nav-link > .icon {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
  }
  .sidebar .nav-count {
    margin-left: 0;
  }
  .sidebar > .sidebar-players {
    margin-top: 12px;
  }
  .sidebar-section-title {
    min-height: 44px;
    font-size: 11px;
  }
  .sidebar .mini-character {
    min-height: 54px;
    font-size: 13px;
  }
  .sidebar .mini-character small {
    font-size: 11px;
  }
  .sidebar .mini-character .faction-badge {
    font-size: 10px;
  }
  .sidebar .follow-sync,
  .sidebar .character-profile-link {
    width: 44px;
    height: 44px;
  }
  .sidebar .sidebar-add,
  .sidebar-bottom .nav-link {
    min-height: 44px;
    font-size: 12px;
  }
  .sidebar .save-status {
    border-top: 0;
    padding: 4px 5px;
  }
  .mobile-menu {
    display: inline-flex;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    margin-left: -8px;
  }
}
@media (max-height: 550px) {
  .sidebar {
    padding-block: 8px;
  }
  .sidebar-brand {
    margin-bottom: 6px;
  }
  .sidebar-brand .brand-name {
    font-size: 24px;
  }
  .sidebar-brand .brand-name small,
  .sidebar .save-status {
    display: none;
  }
  .sidebar-brand .brand-symbol {
    transform: none;
    flex-basis: 30px;
    width: 30px;
    height: 30px;
  }
  .sidebar > nav .nav-link {
    min-height: 32px;
    padding-block: 4px;
  }
  .sidebar > .sidebar-players {
    margin-top: 6px;
  }
  .sidebar-bottom {
    padding-top: 2px;
  }
}
@media (min-width: 600px) and (max-width: 1000px) and (max-height: 550px) {
  .sidebar {
    width: min(720px, calc(100vw - 24px));
  }
  .sidebar > nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .sidebar > nav .nav-link {
    min-height: 40px;
  }
  .sidebar-close,
  .sidebar-bottom .nav-link {
    min-height: 36px;
    height: 36px;
  }
  .sidebar-section-title {
    min-height: 36px;
    padding-block: 6px;
  }
}
.faction-badge {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  width: fit-content;
  border-radius: 4px;
  padding: 2px 6px;
  font: 600 10px/1.4 var(--font-body, sans-serif);
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.faction-badge.elyos {
  color: #f0d394;
  background: #dfbd7215;
  border: 1px solid #dfbd7233;
}
.faction-badge.asmodian {
  color: #c9b3f4;
  background: #b095e61a;
  border: 1px solid #b095e638;
}
.mini-character .faction-badge {
  font-size: 8px;
  padding: 0;
  background: none;
  border: 0;
}
.sidebar-following {
  margin: 0;
  padding-top: 4px;
}
.sidebar-follow-empty {
  padding: 0 10px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
}
.sidebar-following .mini-character {
  text-decoration: none;
  min-width: 0;
}
.sidebar-following .avatar {
  object-fit: cover;
  flex-shrink: 0;
}
.sidebar-following .follow-sync {
  flex-shrink: 0;
}
.following-section {
  margin: 0 0 32px;
  scroll-margin-top: 20px;
}
.following-section .section-heading {
  gap: 12px;
  flex-wrap: wrap;
}
.following-section .section-heading a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.section-count {
  display: inline-block;
  margin-left: 8px;
  color: var(--muted);
  font: 500 14px var(--font-body, sans-serif);
}
.following-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  padding: 22px;
  font-size: 13px;
}
.following-empty .icon {
  color: var(--gold);
  flex-shrink: 0;
}
.player-card {
  overflow: hidden;
  min-width: 0;
  padding: 0;
}
.player-card .player-result {
  border: 0;
  padding: 16px 20px;
}
.player-card .player-result:hover {
  background: #203039;
}
.player-card-avatar {
  position: relative;
  flex: 0 0 56px;
  align-self: center;
  padding-bottom: 6px;
}
.player-card-avatar img.inspector-portrait {
  display: block;
}
.player-card-level {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  min-width: 43px;
  padding: 2px 5px;
  border: 1px solid #907847;
  border-radius: 5px;
  background: linear-gradient(135deg, #3b3222, #211e18);
  box-shadow: 0 2px 5px #0006;
  color: #f2d99e;
  font-size: 9px;
  line-height: 1.2;
  white-space: nowrap;
}
.player-card-level b {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.player-card-name {
  display: flex;
  align-items: center;
  gap: 8px;
}
.player-card-name strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.player-card-name .faction-badge {
  flex-shrink: 0;
  padding: 1px 4px;
  font-size: 9px;
}
.player-card-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  margin-top: 7px;
  color: #a8b8c7;
  font-size: 11px;
  line-height: 20px;
}
.player-card-meta .player-class {
  min-width: 0;
  max-width: 58%;
  gap: 5px;
  color: #d4dee6;
}
.player-card-class-label,
.player-card-server {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.player-card-location {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.player-class + .player-card-location {
  padding-left: 9px;
  border-left: 1px solid #40505d;
}
.player-card-region {
  flex-shrink: 0;
  padding: 0 4px;
  border: 1px solid #344451;
  border-radius: 4px;
  background: #0b141d80;
  color: #aebfcf;
  font-size: 9px;
  font-weight: 600;
  line-height: 16px;
  text-decoration: none;
}
.player-card-identity strong,
.rank-player strong {
  overflow-wrap: anywhere;
}
.player-scores {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  flex-shrink: 0;
}
.player-scores .rank-power {
  color: #78f2fb;
  font-weight: 600;
  font-size: 18px;
}
.player-scores .rank-gs {
  color: var(--text);
  font-size: 14px;
}
.player-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 16px;
  border-top: 1px solid var(--border);
  background: #0c141a40;
}
.player-card-updated {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.6;
}
.player-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.player-card-actions .follow-toggle {
  width: 32px;
  height: 32px;
}
.follow-toggle.is-followed {
  color: var(--gold);
  background: #dfbd7217;
  border-color: #dfbd7255;
}
.follow-toggle.is-followed svg {
  fill: currentColor;
}
.follow-toggle.is-followed:hover {
  background: #dfbd722b;
  border-color: var(--gold);
}
.follow-sync.small {
  min-height: 32px;
  padding: 5px 10px;
  font-size: 11px;
}
.follow-sync .icon {
  width: 14px;
  height: 14px;
}
.leaderboard-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.leaderboard-filters label {
  min-width: 0;
}
.leaderboard-page-info {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
}
.leaderboard-page-info > span:first-child {
  color: var(--muted);
}
@media (max-width: 1200px) {
  .leaderboard-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .player-results {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .leaderboard-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .leaderboard-page-info {
    flex-direction: column;
    gap: 3px;
  }
  .player-card .player-result {
    padding: 14px 12px;
    gap: 10px;
  }
  .player-card-avatar {
    flex-basis: 44px;
  }
  .player-card-meta {
    gap: 6px;
  }
  .player-class + .player-card-location {
    padding-left: 6px;
  }
  .player-card .inspector-portrait {
    width: 44px;
    height: 52px;
  }
  .player-card .player-result strong {
    font-size: 15px;
  }
  .player-scores .rank-power {
    font-size: 15px;
  }
  .player-scores .rank-gs {
    display: flex;
    font-size: 12px;
  }
  .player-card-footer {
    padding: 8px 12px;
    gap: 8px;
  }
  .following-section .section-heading h2 {
    font-size: 24px;
  }
  .leaderboard-row > .rank-score {
    display: flex;
  }
}

@media (max-width: 380px) {
  .leaderboard-row {
    grid-template-columns: 22px minmax(0, 1fr) 64px;
    column-gap: 4px;
    padding-inline: 6px;
  }
  .leaderboard-head {
    font-size: 9px;
    letter-spacing: 0.03em;
  }
  .leaderboard-head > :first-child {
    font-size: 8px;
    letter-spacing: 0;
  }
  .rank-player {
    gap: 6px;
  }
  .rank-player strong {
    font-size: 13px;
  }
  .rank-player .faction-badge {
    font-size: 8px;
  }
  .leaderboard-row > .rank-score {
    gap: 4px;
    font-size: 12px;
  }
  .leaderboard-row .score-icon {
    width: 16px;
    height: 18px;
    flex-basis: 16px;
  }
  .rank-profile .player-card-avatar {
    flex-basis: 40px;
  }
  .rank-profile .inspector-portrait {
    width: 40px;
  }
  .player-card .player-result {
    padding-inline: 10px;
    gap: 8px;
  }
  .player-card-meta {
    gap: 5px;
    font-size: 10px;
  }
  .player-card-meta .player-class,
  .player-card-location {
    gap: 3px;
  }
  .player-class + .player-card-location {
    padding-left: 5px;
  }
  .player-card-region {
    padding-inline: 3px;
  }
  .player-card .player-scores .rank-power {
    font-size: 13px;
  }
  .player-card .rank-score .score-icon {
    width: 18px;
    height: 20px;
  }
}

/* Weekly totals reuse the daily entries; each day stays individually editable. */
.weekly-recap {
  border: 1px solid #2b3745;
  border-radius: 9px;
  background: #131c26;
  padding: 16px;
  margin-bottom: 12px;
}
.weekly-recap.complete { border-color: #426b5a; }
.weekly-recap-heading { display: flex; align-items: center; gap: 12px; }
.weekly-recap-heading > div:first-of-type { flex: 1; min-width: 0; }
.weekly-recap h3 { font-size: 14px; margin: 0 0 7px; }
.weekly-total { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.weekly-total strong { font-size: 22px; color: #eef1f5; }
.weekly-total span { font-size: 12px; color: #91a2b4; }
.weekly-total .icon { color: var(--sage); width: 17px; height: 17px; }
.weekly-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; margin-top: 18px; }
.weekly-day { min-width: 0; margin: 0; text-align: center; display: flex; flex-direction: column; gap: 3px; }
.weekly-day > span { color: #a4b2c2; font-size: 11px; }
.weekly-day > small { color: #8393a6; font-size: 10px; }
.weekly-day.today > span { color: var(--gold); }
.weekly-day input { text-align: center; padding: 8px 2px; margin: 3px 0 0; width: 100%; min-width: 0; appearance: textfield; }
.weekly-day input::-webkit-inner-spin-button, .weekly-day input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.weekly-day input:disabled { opacity: 0.4; }
.weekly-recap > .microcopy { margin: 12px 0 0; font-size: 11px; }
.weekly-recap-kina .weekly-days {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10ch), 1fr));
}
.weekly-recap-kina .weekly-total { flex-wrap: wrap; }
@media (max-width: 600px) {
  .weekly-recap { padding: 13px 10px; }
  .weekly-recap-heading { gap: 7px; }
  .weekly-recap-heading .task-emblem { display: none; }
  .weekly-recap h3 { font-size: 13px; }
  .weekly-total strong { font-size: 20px; }
  .weekly-days { gap: 4px; }
  .weekly-recap-kina .weekly-recap-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .weekly-recap-kina .weekly-total { grid-column: 1; }
  .weekly-recap-kina .weekly-recap-heading > button {
    grid-column: 2;
    grid-row: 1 / 3;
  }
}

/* Shop purchases have their own visual group and do not fill routine goals. */
.journal-shops {
  margin-top: 30px;
}
.shop-section-heading {
  margin-bottom: 18px;
}
.shop-section-heading h2 {
  font-size: 20px;
  margin: 0 0 6px;
}
.shop-section-heading p {
  color: var(--muted);
  font-size: 12px;
  margin: 0;
}
.shop-group {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 14px;
}
.shop-group-heading {
  padding: 16px;
  background: #18222c;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.shop-group-heading h3 {
  font-size: 13px;
  margin: 0;
}
.shop-group-heading > span {
  font-size: 10px;
  color: var(--gold);
}
.shop-group .shop-row {
  border: 0;
  border-radius: 0;
  margin: 0;
  border-top: 1px solid var(--border);
}
.shop-emblem {
  display: flex;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  background: #1b2430;
  border: 1px solid #34404e;
  border-radius: 9px;
}
.shop-emblem img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.shop-price {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #ddc89a;
  font-size: 11px;
  flex-wrap: wrap;
}
.shop-price img {
  object-fit: contain;
}
.shop-price small {
  color: var(--muted);
  font-size: 10px;
}
.shop-row .task-meta {
  flex-wrap: wrap;
  gap: 6px 10px;
}
.shop-row.done .task-emblem {
  opacity: 0.65;
}
@media (max-width: 600px) {
  .shop-group-heading {
    padding: 13px 12px;
  }
  .shop-group .shop-row {
    grid-template-columns: 20px 40px minmax(0, 1fr) 20px;
    padding: 14px 10px;
    column-gap: 9px;
  }
  .shop-row .shop-emblem {
    display: flex;
    width: 40px;
    height: 40px;
    grid-column: 2;
    grid-row: 1;
  }
  .shop-emblem img {
    width: 38px;
    height: 38px;
  }
  .shop-row .task-copy {
    grid-column: 3 / 5;
    grid-row: 1;
  }
  .shop-row .task-check {
    grid-column: 1;
    grid-row: 1;
  }
  .shop-row .counter {
    grid-column: 2 / 4;
    grid-row: 2;
    justify-self: start;
    height: 36px;
  }
  .shop-row .counter button {
    width: 32px;
    min-height: 34px;
  }
  .shop-row .counter input {
    width: 40px;
  }
  .shop-row .task-more {
    grid-column: 4;
    grid-row: 2;
  }
}

.shop-totals { padding: 12px 16px; border-top: 1px solid var(--border); background: #111b24; }
.shop-totals > div { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; }
.shop-totals img { object-fit: contain; flex-shrink: 0; }
.shop-totals strong { color: #e6dcc5; font-weight: 600; }
.shop-totals small { display: block; margin-top: 4px; font-size: 10px; }
.shop-total-separator { margin: 0 5px; }
.shop-tab-heading { color: #aab8c6; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; margin: 0; padding: 12px 16px 9px; border-top: 1px solid var(--border); }
.shop-requirement { color: var(--gold); font-size: 10px; }
.filters button { display: inline-flex; align-items: center; gap: 5px; }
.filters button > .icon { width: 13px; height: 13px; }

.shop-step { color: #a4c4d5; font-size: 10px; }

/* The official game glyphs include their own transparent padding. */
.sidebar > nav .nav-link > .navigation-game-icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  object-fit: contain;
  transform: scale(var(--nav-scale, 1));
  filter: drop-shadow(0 0 0 #b9c8d4) brightness(1.15);
}
.sidebar > nav .nav-link:is(:hover, .active) > .navigation-game-icon {
  filter: drop-shadow(0 0 0 #dfc58a) sepia(0.75) saturate(1.5) brightness(1.35);
}
.sidebar .mini-character {
  gap: 8px;
  padding: 8px;
  min-height: 54px;
}
.sidebar .mini-character > .avatar {
  flex: 0 0 32px;
  width: 32px;
  height: 36px;
}
.sidebar-player-copy {
  flex: 1;
  min-width: 0;
}
.sidebar-player-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
}
.sidebar-player-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-player-gs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  color: #d9d4c8;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mini-character .sidebar-player-gs .icon {
  flex: 0 0 12px;
  width: 12px;
  height: 14px;
}
.sidebar-player-copy > small {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-class { display: inline-flex; flex: 0 0 16px; align-items: center; }
.sidebar-class > :is(.game-class-icon, .icon) { width: 16px; height: 16px; }
.sidebar-player-meta { overflow: hidden; text-overflow: ellipsis; }

.sidebar-characters:empty { display: none; }

.save-status-content {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.save-status-content:hover { color: var(--gold); }
.save-status-content > span:last-child { min-width: 0; line-height: 1.5; }
.account-promotion {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 22px 0;
  padding: 18px 22px;
  background: linear-gradient(110deg, #1c2236, #14222d);
  border: 1px solid #414563;
  border-radius: 12px;
}
.account-promotion > div:not(.account-promotion-icon) { flex: 1; min-width: 0; }
.account-promotion strong { font-size: 15px; font-weight: 600; }
.account-promotion p { margin: 6px 0 0; color: #aebdce; font-size: 12px; line-height: 1.6; }
.account-promotion .discord-login { flex-shrink: 0; }
.account-promotion-icon { color: #c7b8f4; }
.account-promotion-icon > .icon { width: 28px; height: 28px; }
.welcome-hero { min-height: 350px; }
.welcome-hero .hero-content { max-width: 650px; }
.welcome-hero h1 { max-width: 560px; }
.welcome-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.welcome-actions .text-btn { color: #d8d1c2; }
.welcome-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 24px; }
.welcome-benefits .panel { padding: 24px; }
.welcome-benefits .icon { color: var(--gold); width: 26px; height: 26px; }
.welcome-benefits h2 { margin: 16px 0 8px; font-size: 17px; font-weight: 500; }
.welcome-benefits p { color: var(--muted); font-size: 13px; line-height: 1.65; }
.header-timing {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 560px;
  min-width: 420px;
  max-width: 740px;
  gap: 20px;
  color: #aab9c8;
}
.header-timing-item {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.header-timing-item > .icon { flex: 0 0 20px; width: 20px; height: 20px; color: #b9ab88; }
.header-timing-item > div { min-width: 0; }
.header-timing-item small { display: block; font-size: 10px; line-height: 1.6; }
.header-timing-item strong { display: block; color: #e3dbca; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.header-reset { flex-shrink: 0; }
.header-timing-item + .header-timing-item { padding-left: 20px; border-left: 1px solid #2a3541; }
.header-next-event { flex: 1; max-width: 310px; }
.header-next-event > .icon { color: #85c9c6; }
.header-next-event > div { flex: 1; }
.header-event-detail { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.header-event-detail strong { flex-shrink: 0; color: #a7dfd7; }
.header-event-separator { flex-shrink: 0; color: #718697; }
.header-event-name { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #e0e9ec; font-size: 12px; line-height: 1.6; text-decoration: none; }
.header-event-name:hover { color: var(--gold); }
.header-timing-item.is-soon strong { color: #edc17d; }
.header-resets-paused { flex: 1; }
.header-resets-paused:hover strong { color: var(--gold); }
.header-next-event.is-unavailable strong { color: var(--muted); }
@media (max-width: 1600px) {
  .breadcrumb > span:first-of-type, .breadcrumb-slash { display: none; }
  .header-timing { gap: 14px; }
  .header-timing-item + .header-timing-item { padding-left: 14px; }
}
@media (max-width: 1280px) {
  .topbar { height: auto; min-height: 74px; flex-wrap: wrap; padding-block: 12px; gap: 10px 14px; }
  .header-timing { order: 3; flex: 1 0 100%; width: 100%; min-width: 0; max-width: none; border-top: 1px solid #273340; padding-top: 10px; }
  .header-reset { flex: 1; }
  .header-next-event { flex: 2; max-width: none; }
}
@media (max-width: 1000px) {
  .account-promotion { flex-wrap: wrap; }
  .account-promotion .discord-login { margin-left: 44px; }
  .welcome-benefits { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .topbar { min-height: 62px; gap: 10px; }
  .header-timing { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 12px; }
  .header-timing-item { gap: 8px; }
  .header-timing-item + .header-timing-item { padding-left: 12px; }
  .header-reset strong { font-size: 12px; }
  .header-next-event, .header-resets-paused { grid-column: 1 / -1; }
  .header-timing .header-next-event { padding: 8px 0 0; border-left: 0; border-top: 1px solid #26323e; }
  .header-event-name { font-size: 12px; }
  .welcome-hero { min-height: 330px; }
  .welcome-actions { align-items: flex-start; flex-direction: column; gap: 8px; }
  .welcome-actions button { min-height: 44px; }
  .account-promotion { padding: 18px; gap: 12px; }
  .account-promotion .discord-login { margin-left: 0; width: 100%; }
  .welcome-benefits .panel { padding: 20px; }
  .sidebar .save-status small { display: block; }
}