:root {
  /* Brand gold — canonical: Portal/BRAND_GOLD.md (do not revert to #c4a35a / #e8c56a) */
  --ink: #030304;
  --ink-soft: #1a1a1c;
  --paper: #e8efe9;
  --paper-dim: #c5d4c8;
  --accent: #a8865c;
  --accent-hot: #c9a574;
  --danger: #b85c4a;
  --line: rgba(232, 239, 233, 0.14);
  --font-display: "Fraunces", Georgia, serif;
  --font-herald: "Cinzel", "Fraunces", Georgia, serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --press-rise: 4px;
  --press-shadow: rgba(0, 0, 0, 0.45);
  --scroll-size: 10px;
  --scroll-clear: 0.85rem;
  --scroll-track: rgba(28, 28, 30, 0.72);
  --scroll-thumb: rgba(168, 134, 92, 0.38);
  --scroll-thumb-hover: rgba(201, 165, 116, 0.58);
  --border-glow-hot: rgba(201, 165, 116, 0.96);
  --border-glow-mid: rgba(168, 134, 92, 0.78);
  --border-glow-soft: rgba(160, 120, 65, 0.42);
  --border-glow-halo: rgba(201, 165, 116, 0.22);
  --frame-bevel: 3px;
  --frame-edge: rgba(168, 134, 92, 0.44);
  --frame-lip: rgba(0, 0, 0, 0.52);
  --frame-radius: 3px;
  --frame-face: linear-gradient(180deg, rgba(232, 239, 233, 0.1) 0%, rgba(0, 0, 0, 0.34) 100%);
  --frame-shadow-3d:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 var(--press-rise) 0 rgba(0, 0, 0, 0.52),
    0 10px 20px rgba(0, 0, 0, 0.22);
  /* Details / Guidance / Quest — SAO ink plates (readable, low eye strain) */
  --sao-panel: #0c0c0e;
  --sao-panel-mid: #121214;
  --sao-panel-wash-a: rgba(201, 165, 116, 0.11);
  --sao-panel-wash-b: rgba(90, 70, 30, 0.22);
  --sao-panel-face:
    radial-gradient(420px 180px at 8% 0%, var(--sao-panel-wash-a), transparent 58%),
    radial-gradient(360px 200px at 100% 100%, var(--sao-panel-wash-b), transparent 55%),
    linear-gradient(160deg, rgba(28, 24, 18, 0.9), rgba(12, 12, 14, 0.98) 48%, var(--sao-panel) 72%),
    var(--sao-panel);
  --sao-panel-face-alt:
    radial-gradient(380px 160px at 100% 0%, rgba(168, 134, 92, 0.12), transparent 52%),
    radial-gradient(340px 200px at 0% 100%, rgba(70, 58, 32, 0.2), transparent 55%),
    var(--sao-panel);
  --sao-panel-face-soft:
    radial-gradient(360px 170px at 50% 0%, rgba(201, 165, 116, 0.1), transparent 55%),
    radial-gradient(300px 180px at 0% 100%, rgba(168, 134, 92, 0.08), transparent 50%),
    var(--sao-panel);
  --sao-code-face: #141416;
  --sao-code-border: rgba(168, 134, 92, 0.3);
  --sao-code-text: #e8efe9;
  --scene-gradient-default:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(201, 165, 116, 0.18), transparent 58%),
    radial-gradient(ellipse 55% 45% at 18% 78%, rgba(90, 70, 30, 0.32), transparent 55%),
    radial-gradient(ellipse 40% 35% at 88% 18%, rgba(140, 140, 148, 0.12), transparent 52%),
    linear-gradient(180deg, #07070b 0%, #030305 55%, #09090d 100%);
}

* {
  box-sizing: border-box;
  scrollbar-width: none; /* Firefox — keep scroll, hide bar */
  -ms-overflow-style: none; /* legacy Edge */
}

html,
body {
  margin: 0;
  min-height: 100%;
  touch-action: manipulation;
}

html {
  scrollbar-gutter: auto;
}

/* App-wide — no visible scrollbars (wheel / trackpad / touch still scroll) */
*::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent;
}

*::-webkit-scrollbar-track,
*::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-corner {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/*
 * Keep thumbs in a right gutter — not over text.
 * scrollbar-gutter for classic engines; padding for overlay (macOS) scrollbars.
 */
.rpg-run-body,
.guide-split-panel .guide-answer-box,
.rpg-dossier-body,
.rpg-delivery-drawer,
.pace-side-panel,
.rpg-train-fold-body,
.rpg-train-fold-panel,
.code-fold-panel,
.talk-thread,
.talk-thread-chat,
.fb-thread,
.meet-thread,
.question-panel .talk-thread,
.pace-quest-answer .answer-text,
pre.code-text,
pre.latex-code-box,
.code-input {
  scrollbar-gutter: stable;
}

body {
  font-family: var(--font-body);
  color: var(--paper);
  background: var(--ink);
  line-height: 1.5;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.atmosphere {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: #020203;
  overflow: hidden;
}

/* Apple-style mesh canvas — stage overrides set --scene-gradient */
.atmosphere::before {
  content: "";
  position: absolute;
  inset: -8%;
  background: var(--scene-gradient, var(--scene-gradient-default));
  pointer-events: none;
  transition: background 0.45s ease;
}

.atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* Beginning — home / pick your seat */
.atmosphere--begin {
  --scene-gradient:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(201, 165, 116, 0.18), transparent 58%),
    radial-gradient(ellipse 55% 45% at 18% 78%, rgba(90, 70, 30, 0.32), transparent 55%),
    radial-gradient(ellipse 40% 35% at 88% 18%, rgba(140, 140, 148, 0.12), transparent 52%),
    linear-gradient(180deg, #07070b 0%, #030305 55%, #09090d 100%);
}

/* Tutorial — meet / walkthrough chat */
.atmosphere--tutorial {
  --scene-gradient:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(201, 165, 116, 0.18), transparent 58%),
    radial-gradient(ellipse 55% 45% at 18% 78%, rgba(90, 70, 30, 0.32), transparent 55%),
    radial-gradient(ellipse 40% 35% at 88% 18%, rgba(140, 140, 148, 0.12), transparent 52%),
    linear-gradient(180deg, #07070b 0%, #030305 55%, #09090d 100%);
}

.atmosphere--live {
  background: #030305;
  --scene-gradient:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(201, 165, 116, 0.18), transparent 58%),
    radial-gradient(ellipse 55% 45% at 18% 78%, rgba(90, 70, 30, 0.32), transparent 55%),
    radial-gradient(ellipse 40% 35% at 88% 18%, rgba(140, 140, 148, 0.12), transparent 52%),
    linear-gradient(180deg, #07070b 0%, #030305 55%, #09090d 100%);
}

.atmosphere--live::after {
  opacity: 0.055;
}

/* Waiting for results — soft mid glow (processing) */
.atmosphere--waiting {
  --scene-gradient:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(201, 165, 116, 0.18), transparent 58%),
    radial-gradient(ellipse 55% 45% at 18% 78%, rgba(90, 70, 30, 0.32), transparent 55%),
    radial-gradient(ellipse 40% 35% at 88% 18%, rgba(140, 140, 148, 0.12), transparent 52%),
    linear-gradient(180deg, #07070b 0%, #030305 55%, #09090d 100%);
}

/* Details / coaching — dual bloom, reflective */
.atmosphere--details {
  --scene-gradient:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(201, 165, 116, 0.18), transparent 58%),
    radial-gradient(ellipse 55% 45% at 18% 78%, rgba(90, 70, 30, 0.32), transparent 55%),
    radial-gradient(ellipse 40% 35% at 88% 18%, rgba(140, 140, 148, 0.12), transparent 52%),
    linear-gradient(180deg, #07070b 0%, #030305 55%, #09090d 100%);
}

@media (prefers-reduced-motion: no-preference) {
  .atmosphere--waiting::before {
    animation: scene-wait-breathe 7s ease-in-out infinite;
  }
}

@keyframes scene-wait-breathe {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.92;
    transform: scale(1.02);
  }
}

/* —— Page transitions: fade out / fade in (no left–right slide) —— */
.page-nav-curtain {
  display: none;
}

.page-nav-scope main,
html.page-nav-deck main {
  will-change: opacity;
}

html.page-nav-pending main {
  opacity: 0;
  transform: none;
  filter: none;
}

html.page-nav-pending .atmosphere::before {
  opacity: 1;
  transform: none;
  filter: none;
}

html.page-nav-enter-go main {
  transition: opacity 240ms cubic-bezier(0.32, 0.72, 0, 1);
  opacity: 1;
  transform: none;
  filter: none;
}

html.page-nav-enter-go .atmosphere::before {
  transition: none;
  opacity: 1;
  transform: none;
  filter: none;
}

html.page-nav-leave-go main {
  transition: opacity 200ms cubic-bezier(0.45, 0, 0.84, 0.2);
  opacity: 0;
  transform: none;
  filter: none;
}

html.page-nav-leave-go .atmosphere::before {
  transition: none;
  opacity: 1;
  transform: none;
  filter: none;
}

/* Deck (portal ↔ admin) — same fade, slightly slower */
html.page-nav-deck.page-nav-pending main {
  opacity: 0;
  transform: none;
  filter: none;
}

html.page-nav-deck.page-nav-enter-go main {
  transition: opacity 320ms cubic-bezier(0.32, 0.72, 0, 1);
  opacity: 1;
  transform: none;
  filter: none;
}

html.page-nav-deck.page-nav-leave-go main {
  transition: opacity 260ms cubic-bezier(0.45, 0, 0.84, 0.2);
  opacity: 0;
  transform: none;
  filter: none;
}

html.page-nav-deck .page-nav-curtain {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  html.page-nav-pending main,
  html.page-nav-leave-go main,
  html.page-nav-deck.page-nav-pending main,
  html.page-nav-deck.page-nav-leave-go main {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  html.page-nav-pending .atmosphere::before,
  html.page-nav-leave-go .atmosphere::before {
    opacity: 1;
    transform: none;
    transition: none;
  }

  html.page-nav-leave-go .page-nav-curtain,
  html.page-nav-deck .page-nav-curtain {
    opacity: 0 !important;
    transition: none;
  }
}


.top {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 1.1rem 1.75rem;
  border-bottom: 1px solid var(--line);
}

.brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--paper);
  letter-spacing: -0.02em;
}

main {
  position: relative;
  z-index: 1;
  max-width: 52rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

main:has(.result) {
  max-width: min(48rem, 100%);
  height: 100dvh;
  max-height: 100dvh;
  min-height: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /* Ceiling under fixed desk chrome — middle block fills the rest, no page scroll. */
  padding: var(--desk-chrome-clear) 1.25rem 0.85rem;
  overflow: hidden;
}

body:has(main:has(.result)),
html:has(main:has(.result)) {
  height: 100dvh;
  overflow: hidden;
}

body:has(.desk-nav) main:has(.result) {
  padding: var(--desk-chrome-clear) 1.25rem 0.85rem;
}

.result {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  gap: 0.55rem;
  overflow: hidden;
}

.result > h1 {
  flex: 0 0 auto;
  margin: 0;
  font-size: clamp(1.45rem, 2.6vw, 1.85rem);
  line-height: 1.15;
}

.result > .result-lede-row,
.result > .lede {
  flex: 0 0 auto;
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.35;
}

.result > .score-summary {
  flex: 0 0 auto;
  margin: 0.15rem 0 0;
  padding: 0;
  border: none;
}

.result > .rpg-result-log {
  /* Hug the quest cards — do not stretch empty height into the panel. */
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-top: 0.15rem;
  padding: 0.75rem 0.85rem 0.8rem;
  overflow: hidden;
}

.result .rpg-result-log > .section-title,
.result .rpg-result-log > .rpg-hint,
.result .rpg-result-log-head {
  flex: 0 0 auto;
}

.result .rpg-result-log > .rpg-hint,
.result .rpg-result-log-copy > .rpg-hint {
  margin: 0 0 0.55rem;
  font-size: 0.82rem;
}

.result .rpg-result-log .rpg-quest-map {
  flex: 0 1 auto;
  min-height: 0;
  align-content: start;
  gap: 0.35rem;
  overflow: auto;
  overscroll-behavior: contain;
}

.result .rpg-scoreboard {
  padding: 0.75rem 0.9rem 0.8rem;
  gap: 0.75rem 1rem;
}

.result .rpg-scoreboard-value {
  font-size: clamp(1.65rem, 3.2vw, 2.05rem);
}

.result .rpg-result-log .rpg-quest {
  padding: 0.36rem 0.4rem 0.34rem;
  gap: 0.22rem;
}

.result .rpg-result-log .rpg-quest-num {
  font-size: 0.78rem;
}

@media (max-width: 860px) {
  body:has(main:has(.result)),
  html:has(main:has(.result)) {
    height: auto;
    overflow: auto;
  }

  main:has(.result) {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .result {
    overflow: visible;
  }

  .result > .rpg-result-log {
    overflow: visible;
  }
}

.hero-main {
  max-width: min(52rem, 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
}

.start-page .hero-main {
  max-width: min(52rem, 100%);
  /* Center the hero stack in the four-tick frame; chrome stays fixed. */
  align-items: flex-start;
  min-height: 100dvh;
  box-sizing: border-box;
  padding-top: max(
    var(--desk-chrome-clear),
    calc(var(--start-horizon) - var(--start-content-half))
  );
  padding-bottom: 3rem;
}

/* Fixed top chrome — viewport corners (Admin desk page as reference). */
:root {
  --desk-chrome-top: 1rem;
  --desk-chrome-side: 1rem;
  --desk-chrome-bar: 2.75rem;
  --desk-chrome-clear: calc(var(--desk-chrome-top) + var(--desk-chrome-bar) + 0.85rem);
  /* Keep hero centered where the four-tick frame used to sit. */
  --start-horizon: 44vh;
  /* ~half of brand → Begin stack. */
  --start-content-half: 12rem;
}

/* Soft frosted strip: de-emphasize gaps / margins around the top nav chips. */
.desk-nav-veil {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--desk-chrome-clear) + 0.55rem);
  z-index: 55;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(6, 6, 8, 0.42) 0%,
    rgba(6, 6, 8, 0.22) 48%,
    rgba(6, 6, 8, 0.06) 78%,
    rgba(6, 6, 8, 0) 100%
  );
  -webkit-backdrop-filter: blur(6px) saturate(0.9);
  backdrop-filter: blur(6px) saturate(0.9);
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 58%,
    rgba(0, 0, 0, 0.45) 82%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 58%,
    rgba(0, 0, 0, 0.45) 82%,
    transparent 100%
  );
}

@media (prefers-reduced-transparency: reduce) {
  .desk-nav-veil {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: linear-gradient(
      180deg,
      rgba(6, 6, 8, 0.72) 0%,
      rgba(6, 6, 8, 0.4) 55%,
      rgba(6, 6, 8, 0) 100%
    );
  }
}

.desk-nav {
  position: fixed;
  top: var(--desk-chrome-top);
  z-index: 60;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4rem;
  box-sizing: border-box;
  padding: 0.3rem;
  border-radius: 5px;
  background: rgba(8, 8, 10, 0.88);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  /* Never participate in page-transition transforms on <main>. */
  transform: none !important;
  filter: none !important;
}

.desk-nav--account {
  right: var(--desk-chrome-side);
  left: auto;
  justify-content: flex-end;
  max-width: calc(100vw - 2 * var(--desk-chrome-side));
}

.desk-nav--admin {
  left: var(--desk-chrome-side);
  right: auto;
  justify-content: flex-start;
}

/* Keep page content below the fixed chrome — no overlap while scrolling. */
body:has(.desk-nav) {
  scroll-padding-top: var(--desk-chrome-clear);
}

body:has(.desk-nav) main {
  padding-top: max(2.5rem, var(--desk-chrome-clear));
}

body:has(.desk-nav) main.hero-main {
  padding-top: max(3.5rem, var(--desk-chrome-clear));
  align-items: flex-start;
}

.start-interview-dock,
.start-history-dock {
  position: fixed;
  left: var(--desk-chrome-side);
  bottom: var(--desk-chrome-top);
  z-index: 80;
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
  padding: 0.35rem;
  border: 1px solid rgba(168, 134, 92, 0.42);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(18, 16, 12, 0.98), rgba(8, 8, 10, 0.96));
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.48),
    0 0 24px rgba(201, 165, 116, 0.08);
  transform: none !important;
  filter: none !important;
  pointer-events: auto;
}

/* Same black chrome as Admin Desk / Main — not Interview gold accents */
.start-dock-action,
.start-history-open {
  cursor: pointer;
  min-height: 2.15rem;
  height: 2.15rem;
  padding: 0 0.75rem;
  border: 1px solid rgba(168, 134, 92, 0.38);
  border-radius: 3px;
  background: rgba(12, 12, 14, 0.96);
  color: var(--paper-dim);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  text-decoration: none;
}

.start-dock-action .desk-nav-ico,
.start-history-open .desk-nav-ico {
  width: 0.95rem;
  height: 0.95rem;
}

.start-dock-action:hover,
.start-dock-action:focus-visible,
.start-history-open:hover,
.start-history-open:focus-visible {
  color: #c9a574;
  border-color: rgba(201, 165, 116, 0.7);
  background: rgba(201, 165, 116, 0.1);
  box-shadow: none;
  outline: none;
}

.start-history-panel {
  /* Wide enough for Level · Type · Seat · Firm on one filter row. */
  max-width: min(56rem, calc(100vw - 1.5rem));
  width: min(56rem, calc(100vw - 1.5rem));
  /* Fixed height so the double 框 does not grow with long history */
  height: min(78vh, 40rem);
  max-height: min(78vh, 40rem);
}

.start-history-card {
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  max-height: 100%;
  /* Keep roster clear of .start-panel::after double-frame (inset 0.55rem) */
  box-sizing: border-box;
  padding: 0.7rem;
  overflow: hidden;
}

.start-history-card .start-panel-head {
  padding: 0.55rem 0.55rem 0.7rem;
}

.start-history-body {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.45rem 0.35rem 0.55rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.start-history-body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.start-history-filters {
  margin: 0 0 0.65rem;
}

.start-history-count {
  margin: 0 0 0.55rem;
  color: rgba(201, 165, 116, 0.78);
  font-size: 0.82rem;
}

.start-history-status {
  margin: 0.15rem 0 0;
  color: var(--paper-dim);
  font-size: 0.95rem;
}

.start-history-roster {
  margin-top: 0.25rem;
}

.start-history-roster .hist-row.is-current {
  border-color: rgba(201, 165, 116, 0.55);
  box-shadow: inset 3px 0 0 rgba(201, 165, 116, 0.82);
}

/* History popup: show EXP chips immediately (not gated on page-load observer) */
.start-history-roster .rpg-xp-chip:not(.is-live) {
  opacity: 1;
  transform: none;
}

.start-history-now {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(201, 165, 116, 0.88);
  vertical-align: middle;
}

body:has(.desk-nav).start-page main.hero-main {
  /* Keep desk chrome clear; center hero in the four-tick frame. */
  padding-top: max(
    var(--desk-chrome-clear),
    calc(var(--start-horizon) - var(--start-content-half))
  );
  align-items: flex-start;
}

.desk-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  box-sizing: border-box;
  margin: 0;
  min-height: 2.15rem;
  height: 2.15rem;
  padding: 0 0.75rem;
  border: 1px solid rgba(168, 134, 92, 0.38);
  border-radius: 3px;
  background: rgba(12, 12, 14, 0.96);
  color: var(--paper-dim);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 0.12s ease,
    border-color 0.12s ease,
    background 0.12s ease;
}

.desk-nav-ico {
  width: 0.95rem;
  height: 0.95rem;
  flex-shrink: 0;
  display: block;
}

.desk-nav-btn:hover,
.desk-nav-btn:focus-visible {
  color: var(--accent-hot);
  border-color: rgba(201, 165, 116, 0.7);
  background: rgba(201, 165, 116, 0.1);
  outline: none;
}

.desk-nav-logout {
  margin: 0;
  display: inline-flex;
  align-items: center;
}

.desk-nav-btn--signout {
  color: #c45a4e;
  border-color: rgba(184, 92, 74, 0.45);
  background: rgba(80, 24, 20, 0.28);
}

.desk-nav-btn--signout:hover,
.desk-nav-btn--signout:focus-visible {
  color: #f0a39a;
  border-color: rgba(232, 130, 118, 0.75);
  background: rgba(120, 36, 30, 0.38);
  outline: none;
}

.desk-nav-btn.is-current {
  border-color: rgba(201, 165, 116, 0.85);
  color: var(--accent-hot);
  background: rgba(201, 165, 116, 0.12);
}

.desk-nav-btn--inbox {
  position: relative;
  gap: 0.45rem;
}

.desk-nav-badge,
.inbox-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.55rem;
  height: 1.55rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-align: center;
  color: #1a1208;
  background: #c9a574;
  border: 1.5px solid #e2c899;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 0 12px rgba(201, 165, 116, 0.42);
}

/* Help and Inbox nav chip — ~0.7× so it fits the desk-nav row. */
.desk-nav-badge {
  min-width: 1.08rem;
  height: 1.08rem;
  padding: 0 0.28rem;
  font-size: 0.56rem;
  letter-spacing: 0.02em;
  border-width: 1px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
}

.desk-nav-badge.is-hot {
  animation: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}

.desk-nav-badge.is-zero,
.inbox-count-badge.is-zero {
  color: #e2c899;
  background: rgba(14, 10, 6, 0.95);
  border-color: rgba(201, 165, 116, 0.9);
  box-shadow:
    0 0 0 1px rgba(201, 165, 116, 0.3),
    inset 0 0 0 1px rgba(201, 165, 116, 0.18);
}

.desk-nav-badge.is-hot,
.inbox-count-badge.is-hot {
  color: #1a1208;
  background: linear-gradient(180deg, #e2c899 0%, #a8865c 100%);
  border-color: #ead4a4;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.65),
    0 0 16px rgba(201, 165, 116, 0.55);
  animation: inboxBadgePulse 1.6s ease-in-out infinite;
}

@keyframes inboxBadgePulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.65),
      0 0 14px rgba(201, 165, 116, 0.5);
  }
  50% {
    transform: scale(1.08);
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.65),
      0 0 22px rgba(201, 165, 116, 0.75);
  }
}

@media (prefers-reduced-motion: reduce) {
  .desk-nav-badge.is-hot,
  .inbox-count-badge.is-hot {
    animation: none;
  }
}

/* —— Support Inbox (Outlook-style 3-pane) —— */
.inbox-shell {
  min-height: 70vh;
}

.inbox-shell--outlook {
  position: relative;
  display: grid;
  grid-template-columns: minmax(9.5rem, 12rem) minmax(16rem, 22rem) minmax(0, 1fr);
  gap: 0.55rem;
  width: 100%;
  min-height: min(78vh, 44rem);
  padding: 0.55rem;
  border: 1px solid rgba(168, 134, 92, 0.22);
  border-radius: 10px;
  overflow: hidden;
  background:
    linear-gradient(160deg, rgba(201, 165, 116, 0.05), transparent 42%),
    rgba(24, 21, 18, 0.52);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  color: #f0e8dc;
  font-family: var(--font-body);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 240, 210, 0.04);
}

.inbox-folders {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.95rem 0.7rem 0.85rem;
  border: 1px solid rgba(168, 134, 92, 0.14);
  border-radius: 8px;
  background: rgba(33, 29, 24, 0.58);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 240, 210, 0.03);
}

.inbox-folder-nav {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: 0.35rem;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.inbox-folders-foot {
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(168, 134, 92, 0.16);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  display: grid;
  gap: 0.45rem;
}

.inbox-groups-rail-btn {
  appearance: none;
  display: grid;
  gap: 0.12rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0.7rem 0.75rem 0.75rem;
  border: 1px solid rgba(90, 72, 52, 0.65);
  border-bottom-width: 3px;
  border-bottom-color: rgba(0, 0, 0, 0.72);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(28, 22, 16, 0.98), rgba(10, 8, 6, 0.98));
  color: rgba(210, 190, 168, 0.88);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 240, 210, 0.04);
  transition:
    transform 0.08s ease,
    border-bottom-width 0.08s ease,
    border-color 0.12s ease,
    background 0.12s ease;
}

.inbox-groups-rail-btn:hover,
.inbox-groups-rail-btn:focus-visible {
  border-color: rgba(168, 134, 92, 0.55);
  background:
    linear-gradient(180deg, rgba(36, 28, 20, 0.98), rgba(14, 11, 8, 0.98));
  outline: none;
}

.inbox-groups-rail-btn.is-active {
  border-color: rgba(201, 165, 116, 0.55);
  box-shadow: inset 3px 0 0 var(--accent-hot, #c9a574);
  color: #e8dcc8;
}

.inbox-groups-rail-kicker {
  font-family: var(--font-herald);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(201, 165, 116, 0.72);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-groups-rail-label {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-sheet--groups {
  z-index: 28;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.inbox-sheet--announcement {
  position: absolute;
  inset: 0;
  z-index: 45;
  min-width: 0;
  max-width: none;
  width: auto;
  height: auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.15rem 1.25rem 1.35rem;
  box-sizing: border-box;
  border-radius: 10px;
  background:
    radial-gradient(ellipse 80% 55% at 12% -10%, rgba(201, 165, 116, 0.16), transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(70, 110, 180, 0.1), transparent 50%),
    linear-gradient(180deg, rgba(28, 22, 16, 0.98), rgba(8, 8, 10, 0.99));
  border: 1px solid rgba(201, 165, 116, 0.42);
  box-shadow:
    0 22px 56px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(255, 236, 200, 0.08);
}

.inbox-sheet--announcement[hidden] {
  display: none !important;
}

.inbox-announcement-fx {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
}

.inbox-announcement-corner {
  position: absolute;
  width: 1.1rem;
  height: 1.1rem;
  border-color: rgba(201, 165, 116, 0.75);
  border-style: solid;
  border-width: 0;
}

.inbox-announcement-corner--tl {
  top: 0.55rem;
  left: 0.55rem;
  border-top-width: 2px;
  border-left-width: 2px;
}

.inbox-announcement-corner--tr {
  top: 0.55rem;
  right: 0.55rem;
  border-top-width: 2px;
  border-right-width: 2px;
}

.inbox-announcement-corner--bl {
  bottom: 0.55rem;
  left: 0.55rem;
  border-bottom-width: 2px;
  border-left-width: 2px;
}

.inbox-announcement-corner--br {
  bottom: 0.55rem;
  right: 0.55rem;
  border-bottom-width: 2px;
  border-right-width: 2px;
}

.inbox-announcement-scan {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 18%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(201, 165, 116, 0.35),
    transparent
  );
  opacity: 0.55;
  animation: inbox-announcement-scan 7.5s ease-in-out infinite;
}

@keyframes inbox-announcement-scan {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.25;
  }
  50% {
    transform: translateY(12rem);
    opacity: 0.55;
  }
}

.inbox-shell.is-announcement-open > .inbox-folders,
.inbox-shell.is-announcement-open > .inbox-list,
.inbox-shell.is-announcement-open > .inbox-reading {
  visibility: hidden;
  pointer-events: none;
}

.inbox-reading.is-groups-open > .inbox-panel {
  visibility: hidden;
}

.inbox-sheet-head.inbox-announcement-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(201, 165, 116, 0.22);
  margin: 0;
}

.inbox-announcement-brand {
  min-width: 0;
  flex: 1 1 auto;
}

.inbox-announcement-head .inbox-sheet-kicker {
  margin: 0 0 0.2rem;
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(201, 165, 116, 0.78);
}

.inbox-announcement-head .inbox-sheet-title {
  margin: 0;
  font-family: var(--font-display, "Fraunces", serif);
  font-size: clamp(1.55rem, 2.4vw, 2.05rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.1;
  color: #f7f0e6;
  text-shadow: 0 0 24px rgba(201, 165, 116, 0.18);
}

.inbox-announcement-sub {
  margin: 0.35rem 0 0;
  font-family: var(--stats-sans, "IBM Plex Sans", sans-serif);
  font-size: 0.78rem;
  color: rgba(180, 176, 168, 0.72);
  letter-spacing: 0.02em;
}

.inbox-announcement-head-done {
  flex: 0 0 auto;
  margin-left: auto;
}

.inbox-announcement-head-done .inbox-tool-btn {
  min-height: 2rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.inbox-announcement-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr);
  gap: 0.95rem;
  min-height: 0;
  flex: 1 1 auto;
  align-items: stretch;
  overflow: hidden;
}

.inbox-announcement-rail {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
  min-height: 0;
  padding: 0.75rem;
  border: 1px solid rgba(168, 134, 92, 0.28);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(40, 30, 22, 0.55), rgba(12, 11, 10, 0.72));
  box-shadow: inset 0 1px 0 rgba(255, 236, 200, 0.05);
}

.inbox-announcement-rail-kicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0;
  padding: 0 0.1rem;
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(201, 165, 116, 0.82);
}

.inbox-announcement-rail-tools {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}

.inbox-announcement-rail-tools .inbox-tool-btn {
  flex: 1 1 auto;
  min-height: 2rem;
  padding: 0.35rem 0.55rem;
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  justify-content: center;
}

.inbox-announcement-select-all {
  margin: 0.05rem 0.1rem 0;
  font-size: 0.72rem;
  color: rgba(210, 190, 168, 0.82);
}

.inbox-announcement-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0.4rem;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  align-self: stretch;
}

.inbox-announcement-tick {
  flex: 0 0 auto;
  margin-top: 0.85rem;
}

.inbox-announcement-row .inbox-announcement-card {
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  align-self: stretch;
}

.inbox-announcement-rail-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.15rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  border: 1px solid rgba(201, 165, 116, 0.35);
  background: rgba(201, 165, 116, 0.12);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: rgba(247, 240, 230, 0.9);
}

.inbox-announcement-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
  width: 100%;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0.15rem 0.2rem 0.25rem 0.15rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(168, 134, 92, 0.35) transparent;
}

.inbox-announcement-empty {
  margin: 0.75rem 0.15rem;
}

.inbox-announcement-card {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.28rem;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0.7rem 0.75rem 0.75rem;
  border: 1px solid rgba(168, 134, 92, 0.26);
  border-radius: 4px;
  background:
    linear-gradient(165deg, rgba(32, 26, 20, 0.95), rgba(12, 11, 10, 0.98));
  color: rgba(210, 206, 198, 0.88);
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
  transition:
    border-color 0.14s ease,
    background 0.14s ease,
    box-shadow 0.14s ease;
}

.inbox-announcement-card:hover,
.inbox-announcement-card:focus-visible {
  border-color: rgba(201, 165, 116, 0.55);
  background:
    linear-gradient(165deg, rgba(46, 36, 26, 0.98), rgba(16, 13, 11, 0.98));
  outline: none;
  box-shadow: 0 0 0 1px rgba(201, 165, 116, 0.18);
}

.inbox-announcement-card.is-unread {
  border-color: rgba(120, 165, 255, 0.55);
  box-shadow:
    inset 3px 0 0 rgba(110, 160, 255, 0.95),
    0 0 0 1px rgba(90, 140, 230, 0.12);
  background:
    linear-gradient(165deg, rgba(28, 42, 68, 0.88), rgba(12, 16, 28, 0.96));
}

.inbox-announcement-card.is-active {
  border-color: rgba(201, 165, 116, 0.78);
  background:
    linear-gradient(165deg, rgba(58, 42, 28, 0.98), rgba(22, 16, 12, 0.98));
  box-shadow: 0 0 0 1px rgba(201, 165, 116, 0.28);
}

.inbox-announcement-card.is-active:hover,
.inbox-announcement-card.is-active:focus-visible {
  border-color: rgba(201, 165, 116, 0.88);
  box-shadow: 0 0 0 1px rgba(201, 165, 116, 0.36);
}

.inbox-announcement-card.is-active.is-unread {
  box-shadow:
    inset 3px 0 0 rgba(110, 160, 255, 0.95),
    0 0 0 1px rgba(201, 165, 116, 0.28);
}

.inbox-announcement-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
}

.inbox-announcement-card-status {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.4rem;
  border: 1px solid rgba(168, 134, 92, 0.28);
  border-radius: 999px;
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(168, 160, 148, 0.78);
  background: rgba(0, 0, 0, 0.28);
}

.inbox-announcement-card.is-unread .inbox-announcement-card-status {
  border-color: rgba(120, 165, 255, 0.55);
  color: rgba(170, 200, 255, 0.98);
  background: rgba(50, 90, 170, 0.28);
}

.inbox-announcement-card-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: rgba(120, 170, 255, 0.95);
  box-shadow: 0 0 8px rgba(110, 160, 255, 0.85);
  animation: inbox-announcement-pulse 1.8s ease-in-out infinite;
}

@keyframes inbox-announcement-pulse {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.92);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

.inbox-announcement-card-title {
  min-width: 0;
  font-family: var(--font-display, "Fraunces", serif);
  font-size: 0.95rem;
  font-weight: 650;
  color: rgba(247, 240, 230, 0.96);
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.inbox-announcement-card-preview {
  font-family: var(--stats-sans, "IBM Plex Sans", sans-serif);
  font-size: 0.74rem;
  line-height: 1.4;
  color: rgba(180, 176, 168, 0.78);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.inbox-announcement-detail {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 0;
  border: 0;
}

.inbox-announcement-detail-stage {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-height: 100%;
  padding: 1rem 1.05rem 1.15rem;
  border: 1px solid rgba(201, 165, 116, 0.36);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(34, 26, 18, 0.55) 0%, transparent 4.5rem),
    linear-gradient(165deg, rgba(201, 165, 116, 0.07), transparent 42%),
    linear-gradient(180deg, rgba(22, 18, 14, 0.96), rgba(8, 8, 10, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 200, 0.07),
    0 14px 32px rgba(0, 0, 0, 0.28);
}

.inbox-announcement-detail-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.inbox-announcement-detail-kicker {
  margin: 0;
  flex: 0 0 auto;
  padding: 0.28rem 0.55rem;
  border: 1px solid rgba(201, 165, 116, 0.4);
  border-radius: 2px;
  background: rgba(201, 165, 116, 0.1);
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(232, 214, 180, 0.92);
}

.inbox-announcement-detail-meta-rule {
  display: block;
  flex: 1 1 auto;
  height: 1px;
  min-width: 2rem;
  background: linear-gradient(
    90deg,
    rgba(201, 165, 116, 0.55),
    rgba(201, 165, 116, 0.08) 70%,
    transparent
  );
}

.inbox-announcement-detail-titlebox {
  position: relative;
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr);
  gap: 0.85rem;
  align-items: stretch;
  padding: 0.95rem 1rem 1rem 0.85rem;
  border: 1px solid rgba(201, 165, 116, 0.34);
  border-radius: 4px;
  background:
    linear-gradient(135deg, rgba(58, 42, 28, 0.55), rgba(16, 13, 11, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 236, 200, 0.06);
}

.inbox-announcement-detail-title-bar {
  display: block;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(
    180deg,
    rgba(232, 198, 140, 0.95),
    rgba(201, 165, 116, 0.35)
  );
  box-shadow: 0 0 10px rgba(201, 165, 116, 0.35);
}

.inbox-announcement-detail-divider {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0 0.15rem;
}

.inbox-announcement-detail-divider-cap {
  width: 0.45rem;
  height: 0.45rem;
  border: 1px solid rgba(201, 165, 116, 0.55);
  background: rgba(201, 165, 116, 0.18);
  transform: rotate(45deg);
  flex: 0 0 auto;
}

.inbox-announcement-detail-divider-line {
  flex: 1 1 auto;
  height: 1px;
  background: repeating-linear-gradient(
    90deg,
    rgba(201, 165, 116, 0.45) 0 0.35rem,
    transparent 0.35rem 0.7rem
  );
}

.inbox-announcement-detail-bodybox {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1 1 auto;
  min-height: 10rem;
  padding: 0.85rem 0.95rem 1rem;
  border: 1px solid rgba(168, 134, 92, 0.3);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(18, 16, 14, 0.92), rgba(10, 10, 12, 0.96));
  box-shadow: inset 3px 0 0 rgba(201, 165, 116, 0.42);
}

.inbox-announcement-detail-body-label {
  margin: 0;
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(201, 165, 116, 0.72);
}

.inbox-groups-rail-btn {
  position: relative;
}

.inbox-announcement-rail-badge {
  position: absolute;
  top: 0.35rem;
  right: 0.4rem;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.28rem;
  font-size: 0.58rem;
  letter-spacing: 0.02em;
  border-width: 1px;
  line-height: 1;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
  animation: none;
}

.inbox-announcement-rail-badge.is-hot {
  animation: none;
}

.inbox-announcement-view {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
  flex: 1 1 auto;
}

.inbox-announcement-view-title {
  margin: 0;
  min-width: 0;
  max-width: 100%;
  font-family: var(--font-display, "Fraunces", serif);
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.3;
  color: #f7f0e6;
  text-shadow: 0 0 28px rgba(201, 165, 116, 0.16);
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.inbox-announcement-view-body,
.portal-announcement-body {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--stats-sans, "IBM Plex Sans", sans-serif);
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(228, 222, 212, 0.92);
}

.inbox-announcement-detail-bodybox .inbox-announcement-view-body {
  flex: 1 1 auto;
  padding: 0.15rem 0 0;
  color: rgba(220, 214, 204, 0.9);
}

.inbox-announcement-editor {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.95rem 1rem;
  border: 1px solid rgba(201, 165, 116, 0.3);
  border-radius: 6px;
  background: rgba(12, 11, 10, 0.88);
}

.inbox-announcement-editor[hidden],
.inbox-announcement-view[hidden],
.inbox-announcement-layout[hidden] {
  display: none !important;
}

.inbox-announcement-form {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}

.inbox-announcement-form input[type="text"],
.inbox-announcement-form textarea {
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  padding: 0.55rem 0.65rem;
  border: 1px solid rgba(168, 134, 92, 0.28);
  border-radius: 1px;
  background: rgba(8, 9, 12, 0.92);
  color: rgba(232, 239, 233, 0.92);
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  font-size: 0.82rem;
  line-height: 1.45;
}

.inbox-announcement-form textarea {
  min-height: 12rem;
  resize: vertical;
}

.inbox-announcement-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.35rem;
  width: 100%;
}

@media (max-width: 860px) {
  .inbox-announcement-layout {
    grid-template-columns: 1fr;
    overflow: auto;
  }

  .inbox-announcement-rail {
    max-height: 40vh;
  }

}

.inbox-announcement-foot {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(201, 165, 116, 0.22);
}

.inbox-announcement-skip {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0;
  font-family: var(--stats-sans, "IBM Plex Sans", sans-serif);
  font-size: 0.88rem;
  line-height: 1.35;
  color: rgba(232, 226, 216, 0.92);
  cursor: pointer;
  writing-mode: horizontal-tb;
}

.inbox-announcement-skip input {
  margin-top: 0.2rem;
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  accent-color: rgba(201, 165, 116, 0.95);
}

.inbox-announcement-skip span {
  display: inline;
  writing-mode: horizontal-tb;
  letter-spacing: 0.01em;
  white-space: normal;
}

.inbox-announcement-skip-hint {
  margin: 0 0 0 1.55rem;
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  font-size: 0.68rem;
  line-height: 1.4;
  color: rgba(168, 160, 148, 0.72);
}

.portal-announcement-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: clamp(0.75rem, 2vw, 1.5rem);
  box-sizing: border-box;
  background: rgba(4, 4, 6, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.portal-announcement-overlay[hidden] {
  display: none !important;
}

.portal-announcement-sheet {
  position: relative !important;
  inset: auto !important;
  width: min(72rem, 100%);
  max-height: 100%;
  height: auto;
  margin: 0 auto;
  flex: 1 1 auto;
  min-height: 0;
}

html.is-announcement-overlay {
  overflow: hidden;
}

.portal-announcement-dialog::backdrop {
  background: rgba(4, 4, 6, 0.72);
  backdrop-filter: blur(3px);
}

.portal-announcement-card {
  position: relative;
  overflow: hidden;
  max-width: min(32rem, 92vw);
  padding: 1.35rem 1.4rem 1.25rem;
  border: 1px solid rgba(201, 165, 116, 0.48);
  border-radius: 10px;
  background:
    radial-gradient(ellipse 70% 50% at 15% -5%, rgba(201, 165, 116, 0.18), transparent 55%),
    linear-gradient(180deg, rgba(28, 22, 16, 0.98), rgba(8, 8, 10, 0.99));
  box-shadow:
    0 28px 64px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 236, 200, 0.08);
}

.portal-announcement-card-fx {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
}

.portal-announcement-card > :not(.portal-announcement-card-fx) {
  position: relative;
  z-index: 1;
}

.portal-announcement-kicker {
  margin: 0 0 0.35rem;
  letter-spacing: 0.22em;
  color: rgba(201, 165, 116, 0.82);
}

.portal-announcement-title {
  margin: 0 0 0.85rem !important;
  font-family: var(--font-display, "Fraunces", serif) !important;
  font-size: clamp(1.35rem, 3vw, 1.75rem) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  color: #f7f0e6 !important;
  text-shadow: 0 0 24px rgba(201, 165, 116, 0.16);
}

.portal-announcement-card .portal-announcement-body {
  max-height: min(40vh, 18rem);
  overflow-y: auto;
  margin: 0.15rem 0 0.95rem;
  text-align: left;
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(228, 222, 212, 0.92);
}

.portal-announcement-dismiss {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0 0 0.95rem;
  font-family: var(--stats-sans, "IBM Plex Sans", sans-serif);
  font-size: 0.88rem;
  color: rgba(232, 226, 216, 0.92);
  cursor: pointer;
  text-align: left;
  writing-mode: horizontal-tb;
}

.portal-announcement-dismiss input {
  margin-top: 0.15rem;
  flex: 0 0 auto;
}

.portal-announcement-dismiss span {
  writing-mode: horizontal-tb;
  white-space: normal;
}

.inbox-groups-rail-btn[data-inbox-open-announcement] {
  border-color: rgba(201, 165, 116, 0.32);
  background:
    linear-gradient(165deg, rgba(48, 36, 24, 0.55), rgba(14, 12, 11, 0.85));
}

.inbox-groups-rail-btn[data-inbox-open-announcement]:hover,
.inbox-groups-rail-btn[data-inbox-open-announcement].is-active {
  border-color: rgba(201, 165, 116, 0.62);
  box-shadow: 0 0 0 1px rgba(201, 165, 116, 0.12);
}

.inbox-folders-kicker {
  margin: 0 0 0.15rem;
  padding: 0 0.35rem;
  font-family: var(--font-herald);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(201, 165, 116, 0.72);
}

.inbox-folders-brand {
  margin: 0 0 0.85rem;
  padding: 0 0.35rem;
  font-family: var(--font-display);
  font-size: 1.42rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: #f7f0e6;
}

.inbox-folder-item {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  margin: 0;
  padding: 0.48rem 0.6rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: rgba(232, 223, 210, 0.88);
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.015em;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.inbox-folder-item:hover,
.inbox-folder-item:focus-visible {
  border-color: transparent;
  background: rgba(201, 165, 116, 0.12);
  color: #f4ebe0;
  outline: none;
}

.inbox-folder-item.is-active {
  border-color: transparent;
  background: rgba(201, 165, 116, 0.2);
  color: #f0d9a8;
  font-weight: 700;
  box-shadow: inset 2px 0 0 var(--accent-hot);
}

.inbox-folder-item--new {
  margin-bottom: 0.45rem;
  border-color: rgba(168, 134, 92, 0.28);
  background: #2a241c;
  font-family: var(--font-display);
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #f3ebe0;
}

.inbox-folder-ico {
  display: inline-flex;
  width: 1.1rem;
  justify-content: center;
  font-family: var(--font-herald);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent-hot);
}

.inbox-folder-label {
  flex: 1 1 auto;
  min-width: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

.inbox-folder-star {
  flex: 0 0 auto;
  margin-left: 0.15rem;
  font-size: 0.95rem;
  line-height: 1;
  color: #e8c06a;
}

.inbox-folder-item .inbox-count-badge {
  margin-left: auto;
  flex: 0 0 auto;
  /* Compact chip — must stay under folder row height so 1+ does not expand rem. */
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.28rem;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-width: 1px;
  line-height: 1;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
  animation: none;
}

.inbox-folder-item .inbox-count-badge.is-hot {
  animation: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}

.inbox-folder-sep {
  margin: 0.85rem 0.2rem 0.35rem;
  padding: 0.7rem 0.15rem 0;
  border-top: 1px solid rgba(168, 134, 92, 0.38);
  box-shadow: inset 0 1px 0 rgba(255, 240, 210, 0.04);
  font-family: var(--font-herald);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(201, 165, 116, 0.72);
}

.inbox-list {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(168, 134, 92, 0.14);
  border-radius: 8px;
  background: rgba(37, 32, 25, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 240, 210, 0.03);
}

.inbox-list-toolbar {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.45rem;
  padding: 0.75rem 0.8rem;
  border-bottom: 1px solid rgba(168, 134, 92, 0.12);
  background: rgba(42, 36, 28, 0.45);
}

.inbox-list-toolbar .inbox-filter-combo {
  flex: 0 0 auto;
  min-width: 0;
  width: 100%;
  gap: 0;
}

/* Match Search firm / ledger-combo chrome */
.inbox-list-toolbar .inbox-filter-combo .user-combo-shell {
  min-height: 2.2rem;
  border: 1px solid rgba(168, 134, 92, 0.42);
  border-radius: 3px;
  background: rgba(8, 9, 10, 0.96);
  box-shadow: none;
}

.inbox-list-toolbar .inbox-filter-combo.is-open .user-combo-shell,
.inbox-list-toolbar .inbox-filter-combo .user-combo-shell:focus-within {
  border-color: rgba(201, 165, 116, 0.65);
  box-shadow: none;
}

.inbox-list-toolbar .inbox-filter-combo.is-picked .user-combo-shell {
  border-color: rgba(168, 134, 92, 0.42);
}

.inbox-list-toolbar .inbox-filter-combo .user-combo-input {
  min-height: 2.2rem;
  padding: 0.4rem 0.7rem;
  border-radius: 3px 0 0 3px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(232, 239, 233, 0.88);
  background: transparent;
}

.inbox-list-toolbar .inbox-filter-combo.is-picked .user-combo-input {
  caret-color: transparent;
  cursor: pointer;
  color: rgba(232, 239, 233, 0.88);
}

.inbox-list-toolbar .inbox-filter-combo .user-combo-input::placeholder {
  color: rgba(197, 212, 200, 0.45);
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 500;
  font-size: 0.78rem;
}

.inbox-list-toolbar .inbox-filter-combo .user-combo-toggle {
  min-width: 2.1rem;
  border-left: 1px solid rgba(168, 134, 92, 0.28);
  border-radius: 0 3px 3px 0;
  background: transparent;
  color: rgba(168, 134, 92, 0.85);
  font-size: 0.72rem;
}

.inbox-list-toolbar .inbox-filter-combo .user-combo-toggle:hover {
  background: rgba(201, 165, 116, 0.08);
}

.inbox-list-toolbar .inbox-filter-combo .user-combo-menu {
  z-index: 40;
  max-height: min(14rem, 45vh);
  top: calc(100% + 0.35rem);
  padding: 0.35rem;
  border: 1px solid rgba(168, 134, 92, 0.42);
  border-radius: 3px;
  background: #0a0a0a;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
}

.inbox-list-toolbar .inbox-filter-combo .user-combo-menu[hidden] {
  display: none !important;
}

.inbox-list-toolbar .inbox-filter-combo .user-combo-menu [role="option"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  margin: 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(232, 239, 233, 0.88);
  white-space: nowrap;
  cursor: pointer;
}

.inbox-list-toolbar .inbox-filter-combo .user-combo-menu [role="option"]:hover,
.inbox-list-toolbar .inbox-filter-combo .user-combo-menu [role="option"].is-active {
  border-color: rgba(168, 134, 92, 0.35);
  background: rgba(201, 165, 116, 0.1);
}

.inbox-list-toolbar .inbox-filter-combo .user-combo-menu [role="option"][hidden] {
  display: none !important;
}

.inbox-list-toolbar .inbox-filter-combo .user-combo-email {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(240, 217, 168, 0.95);
  overflow: hidden;
  text-overflow: ellipsis;
}

.inbox-list-toolbar .inbox-filter-combo .user-combo-meta {
  flex: 0 0 auto;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: rgba(197, 212, 200, 0.55);
}

.inbox-list-toolbar .inbox-filter-combo .user-combo-meta code {
  font-size: 0.68rem;
  color: rgba(197, 212, 200, 0.7);
}

.inbox-list-toolbar .inbox-filter-combo .ledger-combo-all {
  gap: 0.45rem;
}

.inbox-list-toolbar .inbox-filter-combo .ledger-combo-all:hover,
.inbox-list-toolbar .inbox-filter-combo .ledger-combo-all.is-active {
  background: rgba(201, 165, 116, 0.12);
}

.inbox-list-toolbar .inbox-filter-combo .ledger-combo-all-mark {
  width: 0.55rem;
  height: 0.55rem;
  border: 1px solid rgba(201, 165, 116, 0.75);
  transform: rotate(45deg);
  flex: 0 0 auto;
}

.inbox-list-toolbar .inbox-filter-combo .ledger-combo-all .user-combo-email {
  flex: 1 1 auto;
}

.inbox-list-toolbar .inbox-filter-combo .ledger-combo-default-tag {
  display: inline-block;
  padding: 0.12rem 0.35rem;
  border: 1px solid rgba(168, 134, 92, 0.55);
  border-radius: 2px;
  font-family: var(--font-herald);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(201, 165, 116, 0.9);
  background: transparent;
}

.inbox-list-toolbar .inbox-filter-combo .ledger-combo-sep {
  height: 1px;
  margin: 0.25rem 0.35rem;
  padding: 0;
  border: 0;
  background: rgba(168, 134, 92, 0.22);
  pointer-events: none;
}

.inbox-list-toolbar .inbox-filter-combo .ledger-combo-all[hidden] + .ledger-combo-sep {
  display: none;
}

.inbox-list-toolbar .inbox-filter-combo .user-combo-empty {
  padding: 0.55rem 0.7rem;
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(197, 212, 200, 0.45);
}

/* Keep New mail CTA style for left folder / empty-stage links */
.inbox-list-new {
  display: inline-flex;
  align-items: center;
  padding: 0.42rem 0.78rem;
  border: 1px solid rgba(201, 165, 116, 0.6);
  border-radius: 4px;
  color: #f0d9a8;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: rgba(201, 165, 116, 0.16);
  white-space: nowrap;
}

.inbox-list-new:hover,
.inbox-list-new:focus-visible {
  border-color: rgba(230, 200, 150, 0.9);
  background: rgba(201, 165, 116, 0.26);
  outline: none;
}

.inbox-list-head {
  display: none;
}

.inbox-list .inbox-thread-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0;
  padding: 0.55rem 0.55rem 0.75rem;
  max-height: none;
  flex: 1 1 auto;
  overflow: auto;
}

.inbox-list-empty {
  margin: 1.25rem 0.85rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.45;
  color: rgba(210, 190, 168, 0.72);
}

.inbox-bulk-bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  margin: 0 0 0.55rem;
  padding: 0.42rem 0.65rem;
  border: 1px solid rgba(168, 134, 92, 0.34);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(28, 22, 16, 0.92), rgba(10, 8, 6, 0.88));
  box-shadow: inset 0 1px 0 rgba(255, 236, 200, 0.04);
}

.inbox-bulk-bar[hidden] {
  display: none !important;
}

.inbox-bulk-left,
.inbox-bulk-actions {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4rem 0.45rem;
  min-width: 0;
}

.inbox-bulk-left {
  flex: 0 1 auto;
}

.inbox-bulk-actions {
  flex: 0 0 auto;
  margin-left: auto;
}

.inbox-bulk-sep {
  width: 1px;
  height: 1.1rem;
  background: rgba(201, 165, 116, 0.28);
}

.inbox-bulk-select-all.is-on,
.inbox-bulk-select-all.is-partial {
  border-color: rgba(201, 165, 116, 0.72);
  background: rgba(201, 165, 116, 0.22);
}

.inbox-bulk-count {
  min-width: 5.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(201, 165, 116, 0.82);
}

.inbox-bulk-btn {
  appearance: none;
  border: 1px solid rgba(201, 165, 116, 0.42);
  border-radius: 999px;
  background: rgba(201, 165, 116, 0.1);
  color: rgba(245, 230, 205, 0.95);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.3rem 0.62rem;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}

.inbox-bulk-btn:hover:not(:disabled) {
  border-color: rgba(201, 165, 116, 0.72);
  background: rgba(201, 165, 116, 0.18);
}

.inbox-bulk-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.inbox-bulk-btn--handled {
  border-color: rgba(110, 185, 120, 0.72);
  background: rgba(55, 120, 70, 0.38);
  color: #d8f0d4;
}

.inbox-bulk-btn--unhandled {
  border-color: rgba(210, 150, 90, 0.55);
  background: rgba(120, 70, 30, 0.28);
}

.inbox-bulk-btn--danger {
  border-color: rgba(196, 90, 90, 0.55);
  background: rgba(120, 40, 40, 0.28);
}

/* Custom tick boxes (select-all + per-row) */
.inbox-tick {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  user-select: none;
}

.inbox-tick input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.inbox-tick-box {
  box-sizing: border-box;
  width: 1.05rem;
  height: 1.05rem;
  border: 1.5px solid rgba(201, 165, 116, 0.55);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 240, 210, 0.05);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.inbox-tick-box::after {
  content: "";
  display: block;
  width: 0.28rem;
  height: 0.52rem;
  margin: 0.1rem auto 0;
  border: solid transparent;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0.6);
  opacity: 0;
  transition: opacity 0.12s ease, transform 0.12s ease, border-color 0.12s ease;
}

.inbox-tick:hover .inbox-tick-box {
  border-color: rgba(201, 165, 116, 0.85);
}

.inbox-tick input:focus-visible + .inbox-tick-box {
  outline: 2px solid rgba(201, 165, 116, 0.55);
  outline-offset: 2px;
}

.inbox-tick input:checked + .inbox-tick-box {
  border-color: rgba(201, 165, 116, 0.95);
  background: linear-gradient(180deg, rgba(201, 165, 116, 0.55), rgba(150, 110, 60, 0.55));
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 210, 0.2),
    0 0 0 1px rgba(201, 165, 116, 0.2);
}

.inbox-tick input:checked + .inbox-tick-box::after {
  border-color: #1a120a;
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

.inbox-tick input:indeterminate + .inbox-tick-box {
  border-color: rgba(201, 165, 116, 0.95);
  background: rgba(201, 165, 116, 0.22);
}

.inbox-tick input:indeterminate + .inbox-tick-box::after {
  width: 0.55rem;
  height: 0;
  margin: 0.42rem auto 0;
  border-width: 0 0 2px 0;
  border-color: rgba(245, 230, 205, 0.95);
  opacity: 1;
  transform: none;
}

.inbox-tick-label {
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

.inbox-thread-check {
  grid-area: check;
  display: inline-grid;
  place-items: center;
  margin: 0.15rem 0 0;
}

.inbox-list-head-check {
  width: 1.05rem;
}

.inbox-thread-handled-by {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.72rem;
  color: rgba(201, 165, 116, 0.78);
}

.inbox-handle-form {
  margin: 0 0 0.75rem;
}

.inbox-handle-form--head {
  margin: 0;
}

.inbox-reading-head-tools {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  flex: 0 0 auto;
}

.inbox-reading-head-tools .inbox-bulk-btn--handled {
  border-color: rgba(100, 190, 115, 0.85);
  background: rgba(48, 130, 72, 0.48);
  color: #e4ffe0;
}

.inbox-reading-head-tools .inbox-bulk-btn--handled:hover:not(:disabled) {
  border-color: rgba(130, 220, 140, 0.95);
  background: rgba(58, 150, 85, 0.58);
  color: #f2fff0;
}

.inbox-reading-head-tools .inbox-bulk-btn--danger {
  border-color: rgba(190, 90, 80, 0.85);
  background: rgba(120, 42, 36, 0.55);
  color: #ffe8e4;
}

.inbox-reading-head-tools .inbox-bulk-btn--danger:hover:not(:disabled) {
  border-color: rgba(220, 120, 110, 0.95);
  background: rgba(140, 50, 42, 0.68);
  color: #fff2f0;
}

/* Deleted threads have no reply pane — full-width focus board. */
.inbox-reading .inbox-panel.is-thread-focus:not(:has(> .inbox-reply-form)):not(:has(> .inbox-handle-form)) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "head"
    "board";
}

.inbox-shell--outlook .inbox-thread-item {
  position: relative;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  grid-template-areas:
    "check star from when"
    "check star main main";
  gap: 0.18rem 0.45rem;
  align-items: start;
  padding: 0.72rem 0.85rem 1.7rem;
  border: 1px solid rgba(168, 134, 92, 0.22);
  border-radius: 6px;
  background: rgba(8, 6, 4, 0.55);
  text-decoration: none;
  color: inherit;
  cursor: default;
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.25);
  opacity: 0.78;
}

/* Candidates have no bulk select / Deleted — drop the check column. */
.inbox-shell--outlook .inbox-thread-item--candidate {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "star from when"
    "star main main";
}

.inbox-thread-hit {
  display: contents;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.inbox-thread-star {
  grid-area: star;
  appearance: none;
  display: inline-grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  margin: 0.05rem 0 0;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: rgba(201, 165, 116, 0.58);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.12s ease, background 0.12s ease, transform 0.1s ease;
}

.inbox-thread-star:hover,
.inbox-thread-star:focus-visible {
  color: rgba(201, 165, 116, 0.95);
  background: rgba(201, 165, 116, 0.1);
  outline: none;
}

.inbox-thread-star.is-on {
  color: #e8c06a;
  text-shadow: 0 0 10px rgba(232, 192, 106, 0.35);
}

.inbox-thread-star:active {
  transform: scale(0.92);
}

.inbox-reading-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.inbox-reading-star {
  width: 2rem;
  height: 2rem;
  font-size: 1.2rem;
  margin: 0;
}

.inbox-shell--outlook .inbox-thread-item .inbox-thread-from,
.inbox-shell--outlook .inbox-thread-item .inbox-thread-subject {
  font-weight: 500;
  color: rgba(210, 190, 168, 0.78);
}

.inbox-shell--outlook .inbox-thread-item .inbox-thread-preview,
.inbox-shell--outlook .inbox-thread-item .inbox-thread-when {
  color: rgba(180, 160, 140, 0.55);
}

/* Author display:grid beats UA [hidden]{display:none} — filters must win. */
.inbox-shell--outlook .inbox-thread-item[hidden] {
  display: none !important;
}

.inbox-thread-from {
  grid-area: from;
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #f2ebe1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-thread-main {
  grid-area: main;
  display: grid;
  gap: 0.14rem;
  min-width: 0;
}

.inbox-shell--outlook .inbox-thread-subject {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #f7f0e6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-shell--outlook .inbox-thread-preview {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.35;
  color: rgba(210, 190, 168, 0.78);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-shell--outlook .inbox-thread-when {
  grid-area: when;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 500;
  color: rgba(210, 190, 168, 0.7);
  white-space: nowrap;
  justify-self: end;
}

.inbox-shell--outlook .inbox-thread-kind {
  position: absolute;
  right: 0.65rem;
  bottom: 0.45rem;
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 1.3rem);
  padding: 0.14rem 0.42rem;
  border: 1px solid rgba(201, 165, 116, 0.55);
  border-radius: 2px;
  background: rgba(201, 165, 116, 0.1);
  font-family: var(--font-herald);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(240, 217, 168, 0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.inbox-shell--outlook .inbox-thread-item:hover,
.inbox-shell--outlook .inbox-thread-item:focus-visible {
  border-color: rgba(201, 165, 116, 0.48);
  background: rgba(28, 22, 16, 0.78);
  outline: none;
}

.inbox-shell--outlook .inbox-thread-item.is-active {
  border-color: rgba(201, 165, 116, 0.78);
  background:
    linear-gradient(90deg, rgba(201, 165, 116, 0.38), rgba(201, 165, 116, 0.24) 42%, rgba(168, 134, 92, 0.18));
  box-shadow:
    inset 4px 0 0 var(--accent-hot),
    0 0 0 1px rgba(201, 165, 116, 0.28),
    0 6px 16px rgba(0, 0, 0, 0.28);
}

.inbox-shell--outlook .inbox-thread-item.is-active .inbox-thread-from,
.inbox-shell--outlook .inbox-thread-item.is-active .inbox-thread-subject {
  color: #fff6e8;
}

.inbox-shell--outlook .inbox-thread-item.is-unread {
  opacity: 1;
  border-color: rgba(168, 134, 92, 0.42);
  background:
    linear-gradient(90deg, rgba(201, 165, 116, 0.1), transparent 42%),
    rgba(14, 11, 8, 0.88);
  box-shadow:
    inset 4px 0 0 rgba(201, 165, 116, 0.85),
    inset 0 1px 0 rgba(255, 240, 210, 0.05);
}

.inbox-shell--outlook .inbox-thread-item.is-unread .inbox-thread-from,
.inbox-shell--outlook .inbox-thread-item.is-unread .inbox-thread-subject {
  font-weight: 700;
  color: #fff8ef;
}

.inbox-shell--outlook .inbox-thread-item.is-unread .inbox-thread-preview,
.inbox-shell--outlook .inbox-thread-item.is-unread .inbox-thread-when {
  color: rgba(220, 200, 175, 0.78);
}

.inbox-shell--outlook .inbox-thread-item.is-unread:not(.is-active) {
  border-color: rgba(168, 134, 92, 0.45);
}

.inbox-thread-unread-dot {
  position: absolute;
  top: 0.72rem;
  right: 0.72rem;
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  background: var(--accent-hot, #c9a574);
  box-shadow: 0 0 8px rgba(201, 165, 116, 0.65);
  pointer-events: none;
}

.inbox-shell--outlook .inbox-thread-item.is-unread .inbox-thread-when {
  padding-right: 0.85rem;
}

.inbox-reading {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  border: 1px solid rgba(168, 134, 92, 0.14);
  border-radius: 8px;
  background: rgba(44, 38, 31, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  overflow-x: hidden;
  overflow-y: auto;
  box-shadow: inset 0 1px 0 rgba(255, 240, 210, 0.03);
}

.inbox-reading .inbox-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1 1 auto;
  min-height: 100%;
  height: 100%;
  padding: 1.15rem 1.35rem 1.4rem;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.inbox-reading-head {
  margin: 0 0 1.1rem;
  padding-bottom: 0.95rem;
  border-bottom: 1px solid rgba(168, 134, 92, 0.12);
}

.inbox-reading-kicker {
  margin: 0 0 0.3rem;
  font-family: var(--font-herald);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(201, 165, 116, 0.88);
}

.inbox-reading-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.85rem 1.25rem;
  margin: 0 0 0.55rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(168, 134, 92, 0.22);
}

.inbox-reading-title {
  margin: 0;
  min-width: 0;
  flex: 1 1 auto;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #f7f0e6;
  line-height: 1.25;
}

.inbox-reading-meta {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 400;
  color: rgba(210, 190, 168, 0.82);
  line-height: 1.45;
}

.inbox-reading-candidate {
  flex: 0 1 auto;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.4rem;
  margin: 0;
  max-width: min(48%, 22rem);
  text-align: right;
  line-height: 1.25;
  white-space: nowrap;
}

.inbox-reading-candidate-label {
  font-family: var(--font-herald);
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(201, 165, 116, 0.88);
}

.inbox-reading-candidate-id {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.01em;
  color: #f3e6d2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inbox-reading-remark {
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.015em;
  color: rgba(236, 220, 192, 0.94);
}

.inbox-reading-meta.inbox-reading-handled,
.inbox-reading-meta.inbox-reading-unhandled {
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.02em;
}

.inbox-reading-meta.inbox-reading-handled {
  color: rgba(160, 200, 150, 0.95);
}

.inbox-reading-meta.inbox-reading-unhandled {
  color: rgba(235, 175, 120, 0.98);
}

.inbox-compose-toggle {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  position: relative;
}

.inbox-compose-toggle .inbox-count-badge {
  margin-left: auto;
}

.inbox-compose-toggle.is-active {
  border-color: rgba(201, 165, 116, 0.85);
  background: rgba(201, 165, 116, 0.12);
}

.inbox-empty-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.35rem;
  padding: 0.85rem 0.9rem;
  border: 1px dashed rgba(201, 165, 116, 0.45);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  background: rgba(0, 0, 0, 0.28);
}

.inbox-empty-cta:hover,
.inbox-empty-cta:focus-visible {
  border-style: solid;
  border-color: rgba(201, 165, 116, 0.85);
  background: rgba(201, 165, 116, 0.1);
  outline: none;
}

.inbox-empty-cta-copy {
  display: grid;
  gap: 0.15rem;
}

.inbox-empty-cta-copy strong {
  font-size: 0.95rem;
  color: var(--accent-hot, #c9a574);
}

.inbox-empty-cta-copy span {
  font-size: 0.8rem;
  color: var(--paper-dim, rgba(244, 232, 208, 0.55));
}

.inbox-panel--empty {
  min-height: min(62vh, 28rem);
  display: flex;
  align-items: center;
  justify-content: center;
}

.inbox-empty-stage {
  width: min(100%, 26rem);
  margin: 1.5rem auto;
  padding: 2rem 1.5rem;
  border: 1px solid rgba(201, 165, 116, 0.16);
  border-radius: 10px;
  background:
    linear-gradient(165deg, rgba(201, 165, 116, 0.1), transparent 50%),
    rgba(50, 43, 34, 0.55);
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.inbox-empty-stage-kicker {
  margin: 0 0 0.35rem;
  font-family: var(--font-herald);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(201, 165, 116, 0.88);
}

.inbox-empty-stage-title {
  margin: 0 0 0.45rem;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 600;
  color: #f0d9a8;
}

.inbox-empty-stage-copy {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.94rem;
  color: rgba(210, 190, 168, 0.82);
  line-height: 1.5;
}

.inbox-empty-stage-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid rgba(201, 165, 116, 0.55);
  border-radius: 4px;
  text-decoration: none;
  color: rgba(244, 232, 208, 0.95);
  background: rgba(0, 0, 0, 0.35);
}

.inbox-empty-stage-btn:hover,
.inbox-empty-stage-btn:focus-visible {
  border-color: rgba(201, 165, 116, 0.95);
  background: rgba(201, 165, 116, 0.12);
  outline: none;
}

.inbox-rail .inbox-thread-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.75rem;
  max-height: min(62vh, 36rem);
  overflow: auto;
  padding-right: 0.15rem;
}

.inbox-thread-item {
  display: grid;
  gap: 0.15rem;
  padding: 0.65rem 0.7rem;
  border: 1px solid rgba(201, 165, 116, 0.22);
  border-radius: 4px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.25);
}

.inbox-thread-item:hover,
.inbox-thread-item:focus-visible {
  border-color: rgba(201, 165, 116, 0.55);
  background: rgba(201, 165, 116, 0.08);
  outline: none;
}

.inbox-thread-item.is-active {
  border-color: rgba(201, 165, 116, 0.85);
  background: rgba(201, 165, 116, 0.12);
}

.inbox-thread-item.is-unread {
  /* Outlook unread cue — stronger treatment lives under .inbox-shell--outlook */
  box-shadow: inset 2px 0 0 var(--accent-hot, #c9a574);
}

.inbox-thread-kind {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(201, 165, 116, 0.7);
}

.inbox-shell--outlook .inbox-thread-item.is-active .inbox-thread-kind {
  /* Dark warm umber on gold selection — same hue family, lower value (not shine+shine) */
  border-color: rgba(168, 134, 92, 0.42);
  background: #2a2118;
  color: #d8c09a;
  box-shadow: inset 0 1px 0 rgba(255, 240, 210, 0.06);
}

.inbox-thread-subject {
  font-size: 0.92rem;
}

.inbox-thread-meta,
.inbox-thread-preview,
.inbox-thread-when {
  font-size: 0.78rem;
  color: var(--paper-dim, rgba(244, 232, 208, 0.55));
}

.inbox-unread-inline {
  color: var(--accent-hot, #c9a574);
}

@media (max-width: 960px) {
  .inbox-shell--outlook {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(14rem, 40vh) minmax(18rem, 1fr);
    gap: 0.5rem;
  }

  .inbox-folders {
    border-right: 0;
  }

  .inbox-folder-nav {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .inbox-folder-item {
    width: auto;
  }

  .inbox-folder-item.is-active {
    box-shadow: none;
  }

  .inbox-list {
    border-right: 0;
    max-height: 40vh;
  }
}

.inbox-messages {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

html.inbox-thread-focus-lock,
html.inbox-thread-focus-lock body {
  overflow: hidden;
}

/* Focus mode: folders + mail list hide; conversation fills the shell. */
.inbox-shell.inbox-shell--outlook.is-thread-focus {
  grid-template-columns: minmax(0, 1fr);
}

.inbox-shell.is-thread-focus > .inbox-folders,
.inbox-shell.is-thread-focus > .inbox-list {
  display: none !important;
}

.inbox-shell.is-thread-focus > .inbox-reading {
  grid-column: 1 / -1;
  min-width: 0;
  width: 100%;
  height: 100%;
}

.inbox-reading .inbox-panel.is-thread-focus,
.inbox-reading .inbox-panel.is-thread-focus:has(> .inbox-reply-form),
.inbox-reading .inbox-panel.is-thread-focus:has(> .inbox-handle-form) {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.95fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "head head"
    "board reply";
  gap: 0.85rem 1.1rem;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 1.1rem 1.25rem 1.25rem;
}

.inbox-panel.is-thread-focus > .inbox-reading-head {
  grid-area: head;
  margin: 0;
  padding-bottom: 0.75rem;
}

.inbox-panel.is-thread-focus > .inbox-thread-focus-board {
  grid-area: board;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.inbox-panel.is-thread-focus > .inbox-messages,
.inbox-panel.is-thread-focus > .inbox-compose-hint {
  display: none !important;
}

.inbox-panel.is-thread-focus > .inbox-reply-form,
.inbox-panel.is-thread-focus > .inbox-handle-form {
  grid-area: reply;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 1rem 1.05rem;
  border: 1px solid rgba(168, 134, 92, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(36, 28, 20, 0.92), rgba(12, 10, 8, 0.96));
}

.inbox-panel.is-thread-focus > .inbox-reply-form > textarea {
  flex: 1 1 auto;
  min-height: 12rem;
}

.inbox-thread-focus-board[hidden] {
  display: none !important;
}

.inbox-focus-left {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-height: 0;
  height: 100%;
}

.inbox-focus-active {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 1.15rem 1.2rem 1.25rem;
  border: 1px solid rgba(201, 165, 116, 0.42);
  border-radius: 8px;
  background:
    linear-gradient(165deg, rgba(46, 36, 26, 0.98), rgba(16, 13, 11, 0.98));
  box-shadow: 0 0 0 1px rgba(201, 165, 116, 0.12);
}

.inbox-focus-active .inbox-msg-from {
  margin-bottom: 0.55rem;
}

.inbox-focus-active .inbox-msg-body {
  font-size: 1.05rem;
  line-height: 1.65;
  margin-bottom: 0.85rem;
}

.inbox-focus-history-wrap {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 32%;
  min-height: 5.5rem;
}

.inbox-focus-history-kicker {
  margin: 0;
  font-family: var(--font-herald);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(201, 165, 116, 0.78);
}

.inbox-focus-history {
  list-style: none;
  margin: 0;
  padding: 0.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(168, 134, 92, 0.22);
  border-radius: 6px;
  background: rgba(8, 6, 4, 0.45);
}

.inbox-focus-history-item {
  appearance: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "from when"
    "preview preview";
  gap: 0.15rem 0.65rem;
  width: 100%;
  margin: 0;
  padding: 0.45rem 0.55rem;
  border: 1px solid rgba(168, 134, 92, 0.22);
  border-radius: 4px;
  background: rgba(24, 18, 12, 0.75);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.inbox-focus-history-item:hover,
.inbox-focus-history-item:focus-visible {
  border-color: rgba(201, 165, 116, 0.55);
  outline: none;
}

.inbox-focus-history-item.is-active {
  border-color: rgba(201, 165, 116, 0.78);
  background: rgba(58, 42, 28, 0.88);
  box-shadow: 0 0 0 1px rgba(201, 165, 116, 0.22);
}

.inbox-focus-history-from {
  grid-area: from;
  font-family: var(--font-herald);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(201, 165, 116, 0.88);
}

.inbox-focus-history-when {
  grid-area: when;
  font-size: 0.68rem;
  color: rgba(190, 172, 150, 0.7);
}

.inbox-focus-history-preview {
  grid-area: preview;
  font-size: 0.78rem;
  color: rgba(220, 205, 185, 0.88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inbox-thread-focus-btn {
  white-space: nowrap;
}

@media (max-width: 960px) {
  .inbox-reading .inbox-panel.is-thread-focus,
  .inbox-reading .inbox-panel.is-thread-focus:has(> .inbox-reply-form),
  .inbox-reading .inbox-panel.is-thread-focus:has(> .inbox-handle-form) {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) minmax(12rem, 40%);
    grid-template-areas:
      "head"
      "board"
      "reply";
  }
}

.inbox-msg {
  padding: 0.85rem 0.95rem;
  border: 1px solid rgba(201, 165, 116, 0.28);
  border-radius: 4px;
  background: #231e18;
}

.inbox-msg--admin {
  border-color: rgba(201, 165, 116, 0.5);
  background: #2e271e;
}

.inbox-msg-from {
  margin: 0 0 0.4rem;
  font-family: var(--font-herald);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(201, 165, 116, 0.9);
}

.inbox-msg-body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 400;
  white-space: pre-wrap;
  line-height: 1.55;
  color: #f0e8dc;
}

.inbox-msg-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.55rem;
  flex-wrap: wrap;
}

.inbox-msg-when {
  display: block;
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 500;
  color: rgba(210, 190, 168, 0.68);
}

.inbox-sinv-cta {
  box-sizing: border-box;
  flex: 0 0 auto;
  margin-left: auto;
  min-height: 1.85rem;
  height: 1.85rem;
  padding: 0 0.95rem;
  border: 1px solid rgba(201, 165, 116, 0.65);
  border-radius: 2px;
  background: #0c0d10;
  color: #c9a574;
  font: inherit;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.inbox-sinv-cta:hover,
.inbox-sinv-cta:focus-visible {
  filter: brightness(1.08);
  color: #e8d4b0;
  border-color: rgba(201, 165, 116, 0.85);
  outline: none;
}

.inbox-sinv-cta.is-disabled,
.inbox-sinv-cta.is-disabled:hover,
.inbox-sinv-cta.is-disabled:focus,
.inbox-sinv-cta.is-disabled:focus-visible,
.inbox-sinv-cta:disabled,
.inbox-sinv-cta:disabled:hover,
.inbox-sinv-cta:disabled:focus,
.inbox-sinv-cta:disabled:focus-visible {
  opacity: 0.42 !important;
  filter: saturate(0.55);
  cursor: not-allowed !important;
  pointer-events: none !important;
  outline: none;
}

.inbox-kind-pick {
  border: 0;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
}

.inbox-kind-grid {
  display: grid;
  gap: 0.45rem;
}

@media (min-width: 720px) {
  .inbox-kind-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.inbox-kind-opt {
  display: flex;
  align-items: center;
  min-height: 2.35rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid rgba(201, 165, 116, 0.28);
  border-radius: 4px;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.22);
}

.inbox-kind-opt:has(input:checked) {
  border-color: rgba(201, 165, 116, 0.85);
  background: rgba(201, 165, 116, 0.1);
}

.inbox-kind-opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.inbox-kind-title {
  font-weight: 600;
  line-height: 1.2;
  color: var(--accent-hot, #c9a574);
}

.inbox-disclaimer {
  margin: 0 0 1rem;
  padding: 0.7rem 0.85rem;
  border-left: 2px solid rgba(196, 90, 78, 0.7);
  background: rgba(80, 24, 20, 0.22);
  font-size: 0.84rem;
  line-height: 1.4;
  color: #f0c4be;
}

.inbox-disclaimer--dialog {
  margin: 0;
}

.inbox-broadcast-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  max-height: 12rem;
  overflow: auto;
  display: grid;
  gap: 0.35rem;
}

.inbox-broadcast-panel {
  margin: 0 0 1.1rem;
  padding: 0.85rem 0.9rem 1rem;
  border: 1px solid rgba(201, 165, 116, 0.28);
  border-radius: 6px;
  background:
    linear-gradient(160deg, rgba(201, 165, 116, 0.06), transparent 42%),
    rgba(0, 0, 0, 0.28);
}

.inbox-bcast-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
}

.inbox-bcast-head .login-label {
  margin: 0;
}

.inbox-bcast-count {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-hot, #c9a574);
}

.inbox-bcast-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.55rem;
}

.inbox-bcast-toolbar--footer {
  justify-content: flex-end;
  margin: 0.15rem 0 0;
}

.inbox-bcast-list-frame {
  margin: 0 0 0.55rem;
  padding: 0.65rem 0.7rem;
  border: 1px solid rgba(201, 165, 116, 0.38);
  border-radius: 6px;
  background:
    linear-gradient(160deg, rgba(201, 165, 116, 0.05), transparent 48%),
    rgba(0, 0, 0, 0.22);
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.inbox-bcast-list-frame .inbox-broadcast-grid {
  margin-bottom: 0;
  max-height: 16rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.inbox-bcast-list-frame .inbox-broadcast-grid::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.inbox-member-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem 0.85rem;
  margin: 0 0 0.55rem;
}

.inbox-member-count {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  margin: 0;
  min-width: 0;
  padding: 0.32rem 0.65rem;
  border: 1px solid rgba(201, 165, 116, 0.35);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 240, 210, 0.05);
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #f3ebe0;
}

.inbox-member-count strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0;
  color: #fff8ee;
  font-variant-numeric: tabular-nums;
}

.inbox-member-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.45rem;
  margin-left: auto;
}

.inbox-member-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.75rem;
  margin: 0 0 0.65rem;
  padding: 0.45rem 0.55rem;
  border: 1px dashed rgba(168, 134, 92, 0.42);
  border-radius: 6px;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(201, 165, 116, 0.04),
      rgba(201, 165, 116, 0.04) 6px,
      transparent 6px,
      transparent 12px
    ),
    rgba(10, 8, 6, 0.55);
}

.inbox-member-filter-kicker {
  flex: 0 0 auto;
  font-family: var(--font-herald);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(201, 165, 116, 0.78);
}

.inbox-member-filter-seg {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  flex: 1 1 auto;
  min-width: min(100%, 16rem);
  border: 1px solid rgba(168, 134, 92, 0.38);
  border-radius: 4px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.45);
}

.inbox-member-filter-btn {
  appearance: none;
  margin: 0;
  padding: 0.42rem 0.7rem;
  border: 0;
  border-right: 1px solid rgba(168, 134, 92, 0.28);
  border-radius: 0;
  background: transparent;
  color: rgba(190, 175, 155, 0.72);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    background 0.12s ease,
    color 0.12s ease;
}

.inbox-member-filter-btn:last-child {
  border-right: 0;
}

.inbox-member-filter-btn:hover,
.inbox-member-filter-btn:focus-visible {
  color: #efe6d4;
  background: rgba(201, 165, 116, 0.1);
  outline: none;
}

.inbox-member-filter-btn.is-active {
  color: #120c08;
  background:
    linear-gradient(180deg, rgba(220, 188, 140, 0.95), rgba(184, 148, 100, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 245, 220, 0.35);
}

.inbox-tool-btn--dark {
  border: 1px solid rgba(70, 56, 40, 0.75);
  border-bottom-width: 3px;
  border-bottom-color: rgba(0, 0, 0, 0.78);
  background:
    linear-gradient(180deg, rgba(26, 20, 14, 0.98), rgba(8, 6, 4, 0.98));
  color: rgba(200, 180, 158, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 240, 210, 0.04);
}

.inbox-tool-btn--dark:hover,
.inbox-tool-btn--dark:focus-visible {
  border-color: rgba(168, 134, 92, 0.55);
  background:
    linear-gradient(180deg, rgba(36, 28, 20, 0.98), rgba(12, 9, 6, 0.98));
  color: #e8dcc8;
  outline: none;
}

.inbox-sheet .inbox-bcast-search {
  width: 100%;
  margin: 0 0 0.55rem;
}

.inbox-sheet .inbox-bcast-search .user-combo-shell {
  min-height: 2.2rem;
  border: 1px solid rgba(168, 134, 92, 0.42);
  border-radius: 3px;
  background: rgba(8, 9, 10, 0.96);
  box-shadow: none;
}

.inbox-sheet .inbox-bcast-search .user-combo-shell:focus-within {
  border-color: rgba(201, 165, 116, 0.65);
}

.inbox-sheet .inbox-bcast-search .user-combo-input {
  min-height: 2.2rem;
  padding: 0.4rem 0.7rem;
  border-radius: 3px 0 0 3px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(232, 239, 233, 0.88);
  background: transparent;
}

.inbox-sheet .inbox-bcast-search .user-combo-input::placeholder {
  color: rgba(197, 212, 200, 0.45);
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 500;
  font-size: 0.78rem;
}

.inbox-sheet .inbox-bcast-search .user-combo-toggle {
  min-width: 2.1rem;
  border-left: 1px solid rgba(168, 134, 92, 0.28);
  border-radius: 0 3px 3px 0;
  background: transparent;
  color: rgba(168, 134, 92, 0.85);
  font-size: 0.72rem;
  cursor: pointer;
}

.inbox-sheet .inbox-bcast-search .user-combo-toggle:hover {
  background: rgba(201, 165, 116, 0.08);
}

.inbox-bcast-search-empty {
  margin: 0 0 0.55rem;
  font-family: var(--font-body);
  font-size: 0.84rem;
  color: rgba(210, 190, 168, 0.7);
}

.inbox-bcast-search-empty[hidden],
.inbox-broadcast-grid [data-inbox-recipient-row][hidden],
.inbox-broadcast-grid [data-inbox-member-row][hidden] {
  display: none !important;
}

.inbox-tool-btn {
  appearance: none;
  border: 1px solid rgba(201, 165, 116, 0.4);
  border-bottom-width: 3px;
  border-bottom-color: rgba(0, 0, 0, 0.55);
  background: rgba(0, 0, 0, 0.35);
  color: rgba(244, 232, 208, 0.92);
  border-radius: 4px;
  padding: 0.4rem 0.7rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition:
    transform 0.08s ease,
    border-bottom-width 0.08s ease,
    background 0.12s ease,
    border-color 0.12s ease;
}

.inbox-tool-btn:hover,
.inbox-tool-btn:focus-visible {
  border-color: rgba(201, 165, 116, 0.85);
  background: rgba(201, 165, 116, 0.12);
  outline: none;
}

.inbox-tool-btn--accent {
  border-color: rgba(201, 165, 116, 0.7);
  color: var(--accent-hot, #c9a574);
}

.inbox-tool-btn--danger {
  border-color: rgba(196, 90, 78, 0.55);
  color: #f0c4be;
}

.inbox-press:active,
.inbox-tool-btn:active,
.inbox-mode-card:active,
.inbox-group-card:active,
.inbox-groups-rail-btn:active {
  transform: translateY(2px);
  border-bottom-width: 1px;
}

.inbox-compose-form .cta:active {
  transform: none;
  filter: brightness(0.96);
}

.inbox-compose-label {
  display: block;
  margin: 0 0 0.35rem;
  font-family: var(--font-herald);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(201, 165, 116, 0.88);
}

.inbox-compose-hint {
  margin: 0 0 0.75rem;
  font-family: var(--font-body);
  font-size: 0.86rem;
  line-height: 1.45;
  color: rgba(210, 190, 168, 0.72);
}

.inbox-mode-launch {
  border: 0;
  margin: 0 0 1.15rem;
  padding: 0;
}

.inbox-mode-launch-grid {
  display: grid;
  gap: 0.55rem;
}

@media (min-width: 720px) {
  .inbox-mode-launch-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.inbox-mode-card {
  appearance: none;
  display: grid;
  gap: 0.28rem;
  width: 100%;
  margin: 0;
  padding: 0.9rem 0.95rem 1rem;
  border: 1px solid rgba(201, 165, 116, 0.32);
  border-bottom-width: 3px;
  border-bottom-color: rgba(0, 0, 0, 0.55);
  border-radius: 6px;
  background: rgba(8, 6, 4, 0.55);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.08s ease,
    border-bottom-width 0.08s ease,
    border-color 0.12s ease,
    background 0.12s ease;
}

.inbox-mode-card:hover,
.inbox-mode-card:focus-visible {
  border-color: rgba(201, 165, 116, 0.7);
  background: rgba(201, 165, 116, 0.1);
  outline: none;
}

.inbox-mode-card.is-active {
  border-color: rgba(201, 165, 116, 0.85);
  background: rgba(201, 165, 116, 0.16);
  box-shadow: inset 3px 0 0 var(--accent-hot, #c9a574);
}

.inbox-mode-card-kicker {
  font-family: var(--font-herald);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(201, 165, 116, 0.7);
}

.inbox-mode-card-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: #f4ebe0;
}

.inbox-mode-card-blurb {
  font-family: var(--font-body);
  font-size: 0.84rem;
  line-height: 1.4;
  color: rgba(210, 190, 168, 0.72);
}

.inbox-selection-summary {
  margin: 0 0 1.15rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid rgba(168, 134, 92, 0.28);
  border-radius: 6px;
  background: rgba(8, 6, 4, 0.45);
}

.inbox-selection-copy {
  margin: 0 0 0.55rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: #e8dfd2;
}

.inbox-reading .inbox-panel {
  position: relative;
}

.inbox-sheet {
  position: absolute;
  inset: 0;
  z-index: 24;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.1rem 1.2rem 1.35rem;
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 8px;
  background:
    linear-gradient(165deg, rgba(201, 165, 116, 0.08), transparent 40%),
    rgba(22, 18, 14, 0.96);
  border: 1px solid rgba(201, 165, 116, 0.35);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}

.inbox-sheet[hidden] {
  display: none !important;
}

.inbox-panel.is-sheet-open > .inbox-outlook-compose > .inbox-outlook-row,
.inbox-panel.is-sheet-open > .inbox-outlook-compose > .inbox-outlook-body,
.inbox-panel.is-sheet-open > .inbox-outlook-compose > .inbox-outlook-footer,
.inbox-panel.is-sheet-open > .inbox-reading-head,
.inbox-panel.is-sheet-open > .inbox-compose-form--admin > .inbox-selection-summary,
.inbox-panel.is-sheet-open > .inbox-compose-form--admin > .inbox-message-fields,
.inbox-panel.is-sheet-open > .inbox-groups-desk {
  visibility: hidden;
}

.inbox-panel--outlook {
  display: flex;
  flex-direction: column;
  padding: 0;
  min-height: 100%;
  height: 100%;
}

.inbox-outlook-compose {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 0;
  min-height: 0;
  height: 100%;
  padding: 0.55rem 1.1rem 1rem;
}

.inbox-outlook-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex: 0 0 auto;
  margin-top: 0.65rem;
  padding-top: 0;
}

.inbox-outlook-footer > .cta {
  margin: 0;
}

.inbox-outlook-row {
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  margin: 0;
  padding: 0.55rem 0;
  border: 0;
  border-bottom: 1px solid rgba(168, 134, 92, 0.22);
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: text;
}

.inbox-outlook-to {
  grid-template-columns: 4.2rem minmax(0, 1fr);
  cursor: default;
}

.inbox-outlook-row-label {
  font-family: var(--font-herald);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(201, 165, 116, 0.88);
}

.inbox-outlook-to-combo {
  width: 100%;
  min-width: 0;
  gap: 0;
}

.inbox-outlook-to-combo .user-combo-shell {
  align-items: stretch;
  min-height: 2.2rem;
  border: 1px solid rgba(168, 134, 92, 0.42);
  border-radius: 3px;
  background: rgba(8, 9, 10, 0.96);
  box-shadow: none;
}

.inbox-outlook-to-combo.is-open .user-combo-shell,
.inbox-outlook-to-combo .user-combo-shell:focus-within {
  border-color: rgba(201, 165, 116, 0.65);
  box-shadow: none;
}

.inbox-outlook-to-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.28rem;
  min-width: 0;
  width: 100%;
  padding: 0.28rem 0.55rem;
  box-sizing: border-box;
}

.inbox-outlook-to-chips {
  display: contents;
}

.inbox-outlook-to-chip {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.2rem;
  max-width: 100%;
  padding: 0.18rem 0.2rem 0.18rem 0.4rem;
  border: 0;
  border-radius: 2px;
  outline: none;
  box-shadow: none;
  background: rgba(201, 165, 116, 0.22);
  color: #f0e6d8;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-sizing: border-box;
}

.inbox-outlook-to-chip--group {
  background: rgba(201, 165, 116, 0.32);
  color: #f7f0e6;
}

.inbox-outlook-to-chip-label {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
  line-height: 1.25;
}

.inbox-outlook-to-chip-x {
  flex: 0 0 auto;
  margin: 0;
  padding: 0 0.2rem;
  border: 0;
  border-radius: 2px;
  outline: none;
  box-shadow: none;
  background: transparent;
  color: rgba(201, 165, 116, 0.75);
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.1;
  cursor: pointer;
}

.inbox-outlook-to-chip-x:hover,
.inbox-outlook-to-chip-x:focus-visible {
  color: #f0e6d8;
  background: rgba(201, 165, 116, 0.12);
  outline: none;
}

.inbox-outlook-to-combo .inbox-outlook-to-search {
  flex: 1 1 4.5rem;
  min-width: 3.5rem;
  width: auto;
  min-height: 1.5rem;
  margin: 0;
  padding: 0.15rem 0.1rem;
  border: 0;
  border-radius: 0;
  outline: none;
  background: transparent;
  box-shadow: none;
  color: rgba(232, 239, 233, 0.88);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* Beat .inbox-page .auth-form input — no nested gold/black frame inside the shell */
.inbox-page .auth-form.inbox-outlook-compose .inbox-outlook-to-search,
.inbox-page .auth-form.inbox-outlook-compose .inbox-outlook-to-search:focus {
  border: 0;
  border-color: transparent;
  outline: none;
  box-shadow: none;
  background: transparent;
  padding: 0.15rem 0.1rem;
  min-height: 1.5rem;
}

.inbox-page .inbox-outlook-to-chip,
.inbox-page .inbox-outlook-to-chip--group {
  border: 0;
  outline: none;
  box-shadow: none;
}

.inbox-outlook-to-combo .inbox-outlook-to-search::placeholder {
  color: transparent;
}

.inbox-outlook-to-combo .inbox-outlook-to-search:focus {
  outline: none;
}

.inbox-outlook-to-combo .user-combo-toggle {
  align-self: stretch;
  min-width: 2.1rem;
  border-left: 1px solid rgba(168, 134, 92, 0.28);
  border-radius: 0 3px 3px 0;
  background: transparent;
  color: rgba(168, 134, 92, 0.85);
  font-size: 0.72rem;
}

.inbox-outlook-to-combo .user-combo-toggle:hover,
.inbox-outlook-to-combo .user-combo-toggle:focus-visible {
  background: rgba(201, 165, 116, 0.08);
  outline: none;
}

.inbox-outlook-to-combo .inbox-outlook-to-suggest {
  z-index: 40;
  top: calc(100% + 0.35rem);
  max-height: min(14rem, 45vh);
  padding: 0.35rem;
  border: 1px solid rgba(168, 134, 92, 0.42);
  border-radius: 3px;
  background: #0a0a0a;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
}

.inbox-outlook-to-combo .inbox-outlook-to-suggest[hidden] {
  display: none !important;
}

.inbox-outlook-to-suggest-item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  width: 100%;
  margin: 0;
  padding: 0.5rem 0.7rem;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: #e8dfd2;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.inbox-outlook-to-suggest-item:hover,
.inbox-outlook-to-suggest-item.is-active,
.inbox-outlook-to-suggest-item:focus-visible {
  background: rgba(201, 165, 116, 0.12);
  outline: none;
}

.inbox-outlook-to-suggest-email {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(232, 239, 233, 0.92);
}

.inbox-outlook-to-suggest-id {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: rgba(197, 212, 200, 0.55);
}

.inbox-outlook-subject {
  grid-template-columns: 4.2rem minmax(0, 1fr);
  cursor: text;
}

.inbox-outlook-subject input {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0.4rem 0.65rem;
  border: 1px solid rgba(168, 134, 92, 0.38);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.28);
  color: #f4ebe0;
  font-family: var(--font-body);
  font-size: 0.96rem;
  outline: none;
  box-sizing: border-box;
}

.inbox-outlook-subject input:focus {
  border-color: rgba(201, 165, 116, 0.65);
  background: rgba(0, 0, 0, 0.38);
}

.inbox-outlook-compose:not(.is-recipients-ready) .inbox-outlook-subject,
.inbox-outlook-compose:not(.is-recipients-ready) .inbox-outlook-body {
  opacity: 0.55;
  cursor: not-allowed;
}

.inbox-outlook-compose:not(.is-recipients-ready) .inbox-outlook-subject input,
.inbox-outlook-compose:not(.is-recipients-ready) .inbox-outlook-body {
  cursor: not-allowed;
  caret-color: transparent;
  pointer-events: none;
}

.inbox-outlook-subject input:disabled,
.inbox-outlook-body:disabled {
  opacity: 1;
  color: rgba(210, 190, 168, 0.55);
}

.inbox-outlook-body {
  flex: 1 1 auto;
  width: 100%;
  min-height: 12rem;
  margin: 0.75rem 0 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(168, 134, 92, 0.38);
  border-radius: 4px;
  resize: none;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: rgba(0, 0, 0, 0.28);
  color: #f4ebe0;
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.55;
  outline: none;
  cursor: text;
  box-sizing: border-box;
}

.inbox-outlook-body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.inbox-page .auth-form.inbox-outlook-compose .inbox-outlook-body,
.inbox-page .auth-form.inbox-outlook-compose .inbox-outlook-body:focus {
  resize: none;
  border-color: rgba(168, 134, 92, 0.38);
  background: rgba(0, 0, 0, 0.28);
  outline: none;
  box-shadow: none;
}

.inbox-page .auth-form.inbox-outlook-compose .inbox-outlook-body:focus {
  border-color: rgba(201, 165, 116, 0.65);
  background: rgba(0, 0, 0, 0.38);
}

.inbox-outlook-body::placeholder {
  color: rgba(210, 190, 168, 0.42);
}

.inbox-group-create {
  margin: 0 0 1.1rem;
  padding: 0.85rem 0.9rem 1rem;
  border: 1px solid rgba(168, 134, 92, 0.28);
  border-radius: 6px;
  background: rgba(8, 6, 4, 0.4);
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

.inbox-group-create .inbox-save-group-row {
  margin-bottom: 0.65rem;
  min-width: 0;
  max-width: 100%;
}

.inbox-pick-groups-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.inbox-group-pick-tag {
  appearance: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0;
  padding: 0.42rem 0.8rem 0.45rem;
  border: 1px solid rgba(90, 72, 52, 0.7);
  border-bottom-width: 3px;
  border-bottom-color: rgba(0, 0, 0, 0.78);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(28, 22, 16, 0.98), rgba(8, 6, 4, 0.98));
  color: rgba(220, 200, 178, 0.92);
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 240, 210, 0.04);
  transition:
    transform 0.08s ease,
    border-bottom-width 0.08s ease,
    border-color 0.12s ease,
    background 0.12s ease;
}

.inbox-group-pick-tag:hover,
.inbox-group-pick-tag:focus-visible {
  border-color: rgba(168, 134, 92, 0.6);
  color: #e8dcc8;
  background:
    linear-gradient(180deg, rgba(38, 30, 22, 0.98), rgba(12, 9, 6, 0.98));
  outline: none;
}

.inbox-group-pick-tag:active {
  transform: translateY(2px);
  border-bottom-width: 1px;
}

.inbox-group-pick-tag--system {
  border-color: rgba(168, 134, 92, 0.55);
  color: rgba(232, 220, 200, 0.96);
}

.inbox-group-pick-name {
  color: inherit;
}

.inbox-group-pick-meta {
  font-size: 0.78em;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(201, 165, 116, 0.72);
}

.inbox-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}

.inbox-sheet-head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}

.inbox-sheet-kicker {
  margin: 0 0 0.2rem;
  font-family: var(--font-herald);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(201, 165, 116, 0.85);
}

.inbox-sheet-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 600;
  color: #f4ebe0;
}

.inbox-groups-desk {
  margin: 1.25rem 0 0;
  padding: 1rem 1.05rem 1.15rem;
  border: 1px solid rgba(168, 134, 92, 0.32);
  border-radius: 8px;
  background:
    linear-gradient(160deg, rgba(201, 165, 116, 0.07), transparent 45%),
    rgba(8, 6, 4, 0.5);
}

.inbox-groups-desk-head {
  margin-bottom: 0.85rem;
}

.inbox-groups-desk-title {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: #f4ebe0;
}

.inbox-groups-desk-lede {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.86rem;
  line-height: 1.45;
  color: rgba(210, 190, 168, 0.72);
}

.inbox-groups-list {
  list-style: none;
  margin: 0 0 0.85rem;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

@media (min-width: 720px) {
  .inbox-groups-list {
    grid-template-columns: 1fr 1fr;
  }
}

.inbox-group-card {
  appearance: none;
  display: grid;
  gap: 0.15rem;
  width: 100%;
  margin: 0;
  padding: 0.7rem 0.8rem;
  border: 1px solid rgba(168, 134, 92, 0.35);
  border-bottom-width: 3px;
  border-bottom-color: rgba(0, 0, 0, 0.55);
  border-radius: 6px;
  background: rgba(12, 10, 8, 0.72);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.08s ease,
    border-bottom-width 0.08s ease,
    border-color 0.12s ease,
    background 0.12s ease;
}

.inbox-group-card-row {
  position: relative;
  display: grid;
  min-width: 0;
}

.inbox-group-card-row .inbox-group-card {
  padding-right: 2.4rem;
}

.inbox-group-card-x {
  appearance: none;
  position: absolute;
  top: 0.45rem;
  right: 0.4rem;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: rgba(210, 180, 160, 0.55);
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition:
    color 0.12s ease,
    background 0.12s ease,
    border-color 0.12s ease;
}

.inbox-group-card-x:hover,
.inbox-group-card-x:focus-visible {
  color: #f0c4be;
  border-color: rgba(196, 90, 78, 0.45);
  background: rgba(120, 40, 32, 0.28);
  outline: none;
}

.inbox-group-delete-members {
  margin: 0;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(168, 134, 92, 0.28);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.28);
  max-height: 11rem;
  overflow-x: hidden;
  overflow-y: auto;
}

.inbox-group-delete-members[hidden] {
  display: none !important;
}

.inbox-group-delete-members-kicker {
  margin: 0 0 0.4rem;
  font-family: var(--font-herald);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(201, 165, 116, 0.78);
}

.inbox-group-delete-members-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.28rem;
}

.inbox-group-delete-members-list li {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.86rem;
  line-height: 1.35;
  color: rgba(240, 232, 220, 0.9);
  overflow-wrap: anywhere;
}

.inbox-group-card:hover,
.inbox-group-card:focus-visible {
  border-color: rgba(201, 165, 116, 0.65);
  outline: none;
}

.inbox-group-card.is-active {
  border-color: rgba(201, 165, 116, 0.85);
  background: rgba(201, 165, 116, 0.14);
  box-shadow: inset 3px 0 0 var(--accent-hot, #c9a574);
}

.inbox-group-card-name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: #f0e6d8;
}

.inbox-group-card-meta {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(201, 165, 116, 0.78);
}

.inbox-groups-home[hidden] {
  display: none !important;
}

.inbox-group-detail {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
}

.inbox-group-detail[hidden] {
  display: none !important;
}

.inbox-group-detail .inbox-sheet-title {
  overflow: hidden;
  text-overflow: ellipsis;
}

.inbox-group-detail-form > input[name="group_name"] {
  margin-bottom: 0.35rem;
}

.inbox-group-detail-form .inbox-compose-label--members {
  margin-top: 1.55rem;
}

.inbox-group-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.75rem;
}

.inbox-broadcast-grid--compact {
  max-height: 12rem;
}

.inbox-panel > .inbox-compose-form--admin {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.inbox-group-row {
  margin: 0 0 0.85rem;
}

.inbox-group-apply {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.45rem;
  margin-bottom: 0.55rem;
}

.inbox-group-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.inbox-group-chip {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid rgba(201, 165, 116, 0.35);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
}

.inbox-group-chip-btn,
.inbox-group-chip-del {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0.28rem 0.65rem;
}

.inbox-group-chip-btn:hover,
.inbox-group-chip-del:hover {
  background: rgba(201, 165, 116, 0.12);
}

.inbox-group-chip-del {
  border-left: 1px solid rgba(201, 165, 116, 0.28);
  color: rgba(240, 196, 190, 0.9);
}

.inbox-group-hint {
  margin: 0 0 0.75rem;
  font-size: 0.82rem;
  color: var(--paper-dim, rgba(244, 232, 208, 0.55));
}

.inbox-broadcast-grid {
  list-style: none;
  margin: 0 0 0.9rem;
  padding: 0;
  display: grid;
  gap: 0.4rem;
  max-height: 14rem;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

@media (min-width: 720px) {
  .inbox-broadcast-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.inbox-recipient {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid rgba(201, 165, 116, 0.22);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.28);
  cursor: pointer;
  text-transform: none;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.inbox-recipient:has(input:checked) {
  border-color: rgba(201, 165, 116, 0.8);
  background: rgba(201, 165, 116, 0.1);
}

.inbox-recipient input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.inbox-recipient-mark {
  width: 1rem;
  height: 1rem;
  border: 1.5px solid rgba(201, 165, 116, 0.55);
  border-radius: 3px;
  background: transparent;
  box-shadow: inset 0 0 0 0 transparent;
}

.inbox-recipient:has(input:checked) .inbox-recipient-mark {
  background: var(--accent-hot, #c9a574);
  border-color: var(--accent-hot, #c9a574);
  box-shadow: inset 0 0 0 2px #111;
}

.inbox-recipient-email {
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: rgba(232, 223, 210, 0.92);
  overflow-wrap: anywhere;
}

.inbox-save-group {
  margin-top: 0.35rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(201, 165, 116, 0.18);
}

.inbox-save-group-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.45rem;
  min-width: 0;
  max-width: 100%;
}

.inbox-message-fields {
  margin-top: 0.35rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(201, 165, 116, 0.22);
  animation: inboxFieldsIn 0.22s ease-out;
}

@keyframes inboxFieldsIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.inbox-check {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  cursor: pointer;
}

.inbox-compose-form textarea:disabled,
.inbox-compose-form input:disabled,
.inbox-compose-form button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.inbox-page .inbox-candidate-combo {
  margin-top: 0.15rem;
}

.inbox-page .inbox-candidate-combo .user-combo-shell {
  border-color: rgba(168, 134, 92, 0.45);
  border-bottom-width: 1px;
  border-bottom-color: rgba(168, 134, 92, 0.45);
  background: rgba(6, 4, 3, 0.92);
}

.inbox-page .inbox-candidate-combo.is-open .user-combo-shell,
.inbox-page .inbox-candidate-combo .user-combo-shell:focus-within {
  border-color: rgba(201, 165, 116, 0.78);
  box-shadow: 0 0 0 1px rgba(201, 165, 116, 0.22);
}

.inbox-page .inbox-candidate-combo .user-combo-input {
  min-height: 2.35rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  color: var(--paper);
}

.inbox-page .inbox-candidate-combo .user-combo-input::placeholder {
  color: rgba(210, 190, 168, 0.48);
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 0.78rem;
  font-weight: 500;
}

.inbox-page .inbox-candidate-combo .user-combo-toggle {
  min-width: 2.25rem;
  border-left: 1px solid rgba(168, 134, 92, 0.35);
  color: rgba(201, 165, 116, 0.9);
  background: transparent;
}

.inbox-page .inbox-candidate-combo .user-combo-menu {
  border-color: rgba(168, 134, 92, 0.42);
  background: #050403;
  max-height: 14rem;
}

.inbox-page .inbox-candidate-combo .user-combo-menu [role="option"] {
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid rgba(168, 134, 92, 0.12);
  color: rgba(230, 221, 210, 0.9);
}

.inbox-page .inbox-candidate-combo .user-combo-menu [role="option"]:hover,
.inbox-page .inbox-candidate-combo .user-combo-menu [role="option"].is-active {
  background: rgba(160, 110, 60, 0.14);
  color: var(--accent-hot);
}

.inbox-page .inbox-candidate-combo .user-combo-email {
  font-family: var(--font-body);
  font-size: 0.88rem;
  letter-spacing: 0.01em;
}

.inbox-page .inbox-candidate-combo .user-combo-empty {
  color: rgba(210, 190, 168, 0.5);
}

.inbox-reply-form > .cta,
.inbox-compose-form > .cta,
.inbox-message-fields > .cta {
  align-self: flex-end;
  margin-left: auto;
  display: block;
}

.auth-form.inbox-reply-form,
.auth-form.inbox-compose-form,
.inbox-message-fields {
  display: flex;
  flex-direction: column;
}

/* Candidate compose: compact topic tags; message fills down to Send */
.inbox-reading .inbox-panel:has(> .inbox-compose-form) {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.inbox-reading .inbox-panel:has(> .inbox-compose-form) > .inbox-reading-head {
  flex: 0 0 auto;
}

.auth-form.inbox-compose-form {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  gap: 0.55rem;
}

.inbox-compose-form > .login-label,
.inbox-compose-form > input,
.inbox-compose-form > .inbox-kind-pick {
  flex: 0 0 auto;
}

.inbox-compose-form > #compose-body {
  flex: 1 1 auto;
  width: 100%;
  min-height: 10rem;
  height: auto;
  resize: none;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  box-sizing: border-box;
}

.inbox-compose-form > #compose-body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.inbox-compose-form > .cta {
  flex: 0 0 auto;
  margin-top: 0;
}

/* Conversation reply: fill leftover pane height; no drag-resize handle */
.inbox-reading .inbox-panel:has(> .inbox-reply-form) {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.inbox-reading .inbox-panel:has(> .inbox-reply-form) > .inbox-reading-head {
  flex: 0 0 auto;
}

.inbox-reading .inbox-panel:has(> .inbox-reply-form) > .inbox-messages {
  flex: 0 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  margin-bottom: 0.65rem;
}

.auth-form.inbox-reply-form {
  flex: 1 1 12rem;
  min-height: 12rem;
  margin: 0;
  gap: 0.5rem;
}

.inbox-reply-form > .login-label {
  flex: 0 0 auto;
}

.inbox-reply-form > textarea {
  flex: 1 1 auto;
  width: 100%;
  min-height: 8rem;
  height: auto;
  resize: none;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
}

.inbox-reply-form > .cta {
  flex: 0 0 auto;
  margin-top: 0;
}

.inbox-empty {
  margin: 0.75rem 0.25rem;
}

/* Inbox — warmer, lighter mailroom (still distinct from Study moonlight / Admin desk) */
.atmosphere--inbox-night {
  background: #12100e;
  --scene-gradient:
    radial-gradient(ellipse 55% 45% at 18% 72%, rgba(140, 95, 50, 0.22), transparent 60%),
    radial-gradient(ellipse 42% 36% at 84% 16%, rgba(90, 68, 42, 0.22), transparent 58%),
    radial-gradient(ellipse 55% 30% at 50% 100%, rgba(48, 36, 24, 0.45), transparent 55%),
    linear-gradient(180deg, #1a1612 0%, #12100e 48%, #0e0c0a 100%);
}

.atmosphere--inbox-night::after {
  opacity: 0.035;
}

.inbox-page {
  --paper: #f0e8dc;
  --paper-dim: rgba(210, 190, 168, 0.78);
  --accent: #a8865c;
  --accent-hot: #c9a574;
  --inbox-ink: #1a1510;
  --inbox-panel: #1a1714;
  --inbox-panel-edge: rgba(168, 130, 88, 0.36);
  --inbox-glow: rgba(180, 120, 70, 0.14);
  --inbox-edge: rgba(168, 130, 88, 0.38);
  --inbox-edge-hot: rgba(201, 165, 116, 0.78);
  --inbox-fill: #2a241c;
  --inbox-fill-hot: rgba(201, 165, 116, 0.16);
}

/* Wider mail frame — beat default portal-main 72rem cap */
.inbox-page main.portal-main,
body:has(.desk-nav) .inbox-page main.portal-main {
  max-width: min(96rem, calc(100vw - 0.75rem));
  width: min(96rem, calc(100vw - 0.75rem));
  margin-inline: auto;
  padding-left: clamp(0.55rem, 1.2vw, 1rem);
  padding-right: clamp(0.55rem, 1.2vw, 1rem);
}

.inbox-page .inbox-shell--outlook {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  grid-template-columns: minmax(10rem, 13rem) minmax(18rem, 26rem) minmax(0, 1fr);
}

.inbox-page .sao-fx {
  opacity: 0.58;
  filter: saturate(0.75) brightness(0.88) sepia(0.14);
}

/* Drop TL / BR corner right-angle brackets on Mailbox */
.inbox-page .sao-fx-bracket--tl,
.inbox-page .sao-fx-bracket--br {
  display: none;
}

.inbox-page .desk-nav-btn.is-current {
  border-color: var(--inbox-edge-hot);
  color: var(--accent-hot);
}

.inbox-page .inbox-shell--outlook {
  border-color: rgba(168, 134, 92, 0.22);
  background:
    linear-gradient(160deg, rgba(201, 165, 116, 0.05), transparent 42%),
    rgba(24, 21, 18, 0.48);
}

.inbox-page .inbox-folders {
  background: rgba(33, 29, 24, 0.52);
}

.inbox-page .inbox-list {
  background: rgba(37, 32, 25, 0.5);
}

.inbox-page .inbox-reading {
  background: rgba(44, 38, 31, 0.5);
}

.inbox-page .inbox-shell .admin-menu,
.inbox-page .inbox-shell .admin-panel {
  background: var(--inbox-panel);
  border-color: var(--inbox-panel-edge);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 18px 40px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(201, 165, 116, 0.07);
}

.inbox-page .admin-menu-kicker,
.inbox-page .admin-panel-kicker {
  color: rgba(201, 165, 116, 0.72);
}

.inbox-page .admin-menu-brand,
.inbox-page .admin-panel-head h1 {
  color: #e8dcc8;
}

.inbox-page .admin-menu-user,
.inbox-page .admin-panel-head .lede {
  color: var(--paper-dim);
}

.inbox-page .inbox-compose-toggle,
.inbox-page .admin-menu-item {
  border-color: var(--inbox-edge);
  background: var(--inbox-fill);
  color: var(--paper);
}

.inbox-page .inbox-compose-toggle:hover,
.inbox-page .inbox-compose-toggle:focus-visible,
.inbox-page .admin-menu-item:hover,
.inbox-page .admin-menu-item:focus-visible {
  border-color: var(--inbox-edge-hot);
  background: var(--inbox-fill-hot);
}

.inbox-page .inbox-compose-toggle.is-active {
  border-color: var(--inbox-edge-hot);
  background: rgba(160, 110, 60, 0.16);
}

.inbox-page .inbox-thread-item {
  border-color: rgba(168, 134, 92, 0.3);
  background: rgba(6, 5, 4, 0.78);
  cursor: pointer;
}

.inbox-page .inbox-thread-item:hover,
.inbox-page .inbox-thread-item:focus-visible {
  border-color: rgba(201, 165, 116, 0.5);
  background: rgba(22, 18, 14, 0.82);
}

.inbox-page .inbox-thread-item.is-active {
  border-color: rgba(201, 165, 116, 0.82);
  background:
    linear-gradient(90deg, rgba(201, 165, 116, 0.4), rgba(201, 165, 116, 0.26) 42%, rgba(168, 134, 92, 0.2));
  box-shadow:
    inset 4px 0 0 var(--accent-hot),
    0 0 0 1px rgba(201, 165, 116, 0.32),
    0 6px 16px rgba(0, 0, 0, 0.28);
}

.inbox-page .inbox-thread-item.is-unread:not(.is-active) {
  opacity: 1;
  border-color: rgba(168, 134, 92, 0.45);
  background:
    linear-gradient(90deg, rgba(201, 165, 116, 0.1), transparent 42%),
    rgba(14, 11, 8, 0.88);
  box-shadow:
    inset 4px 0 0 rgba(201, 165, 116, 0.85),
    inset 0 1px 0 rgba(255, 240, 210, 0.05);
}

.inbox-page .inbox-thread-kind,
.inbox-page .inbox-msg-from {
  color: rgba(201, 165, 116, 0.78);
}

.inbox-page .inbox-thread-item.is-active .inbox-thread-kind {
  border-color: rgba(168, 134, 92, 0.42);
  background: #2a2118;
  color: #d8c09a;
  box-shadow: inset 0 1px 0 rgba(255, 240, 210, 0.06);
}

.inbox-page .inbox-msg {
  border-color: rgba(168, 130, 88, 0.24);
  background: rgba(8, 6, 4, 0.72);
}

.inbox-page .inbox-msg--admin {
  border-color: rgba(201, 165, 116, 0.48);
  background: rgba(42, 30, 18, 0.45);
}

.inbox-page .inbox-empty-cta,
.inbox-page .inbox-empty-stage,
.inbox-page .inbox-broadcast-panel {
  border-color: var(--inbox-edge);
  background:
    linear-gradient(165deg, rgba(160, 110, 60, 0.08), transparent 48%),
    rgba(8, 6, 4, 0.82);
}

.inbox-page .inbox-empty-cta-copy strong,
.inbox-page .inbox-empty-stage-title,
.inbox-page .inbox-empty-stage-kicker,
.inbox-page .inbox-kind-title,
.inbox-page .inbox-bcast-count:not(.inbox-member-count) {
  color: var(--accent-hot);
}

.inbox-page .inbox-member-count {
  color: #f3ebe0;
  border-color: rgba(201, 165, 116, 0.35);
  background: rgba(0, 0, 0, 0.55);
}

.inbox-page .inbox-member-count strong {
  color: #fff8ee;
}

.inbox-page .inbox-empty-stage-btn,
.inbox-page .inbox-tool-btn,
.inbox-page .inbox-kind-opt,
.inbox-page .inbox-recipient {
  border-color: var(--inbox-edge);
  background: var(--inbox-fill);
  color: var(--paper);
}

.inbox-page .inbox-empty-stage-btn:hover,
.inbox-page .inbox-tool-btn:hover,
.inbox-page .inbox-kind-opt:has(input:checked),
.inbox-page .inbox-recipient:has(input:checked) {
  border-color: var(--inbox-edge-hot);
  background: var(--inbox-fill-hot);
}

.inbox-page .inbox-tool-btn--accent {
  color: var(--accent-hot);
  border-color: rgba(201, 165, 116, 0.55);
}

/* Beat .inbox-page .inbox-tool-btn fill so Create/Delete accents actually show. */
.inbox-page .inbox-announcement-rail-tools .inbox-tool-btn--accent {
  border-color: rgba(201, 165, 116, 0.8);
  color: #e8c89a;
  background: rgba(201, 165, 116, 0.16);
}

.inbox-page .inbox-announcement-rail-tools .inbox-tool-btn--danger {
  border-color: rgba(210, 85, 75, 0.9);
  color: #ffc4be;
  background: rgba(150, 40, 36, 0.42);
}

.inbox-page .inbox-announcement-rail-tools .inbox-tool-btn--danger:hover,
.inbox-page .inbox-announcement-rail-tools .inbox-tool-btn--danger:focus-visible {
  border-color: rgba(235, 110, 100, 0.95);
  background: rgba(175, 48, 42, 0.55);
  color: #ffe0dc;
}

.inbox-page .inbox-announcement-rail-tools .inbox-tool-btn--danger:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

/* Force every notice card to the full Notices rail width (ignore short titles). */
.inbox-page .inbox-announcement-rail,
.inbox-page .inbox-announcement-list,
.inbox-page .inbox-announcement-row {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.inbox-page .inbox-announcement-row .inbox-announcement-card {
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.inbox-page .inbox-recipient:has(input:checked) .inbox-recipient-mark {
  background: var(--accent-hot);
  border-color: var(--accent-hot);
  box-shadow: inset 0 0 0 2px #120c08;
}

.inbox-page .inbox-recipient-mark {
  border-color: rgba(201, 165, 116, 0.5);
}

.inbox-page .inbox-group-chip {
  border-color: rgba(168, 130, 88, 0.35);
  background: rgba(8, 6, 4, 0.78);
}

.inbox-page .inbox-disclaimer {
  border-left-color: rgba(170, 96, 88, 0.7);
  background: rgba(52, 24, 20, 0.3);
  color: #e4c4be;
}

.inbox-page .auth-form input,
.inbox-page .auth-form textarea,
.inbox-page .auth-form select {
  border-color: var(--inbox-edge);
  background: #1c1814;
  color: #f0e8dc;
}

.inbox-page .login-label {
  font-family: var(--font-herald);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(201, 165, 116, 0.88);
}

.inbox-page .auth-form input:focus,
.inbox-page .auth-form textarea:focus,
.inbox-page .auth-form select:focus {
  border-color: var(--inbox-edge-hot);
  outline-color: rgba(201, 165, 116, 0.4);
}

.inbox-page .cta,
.inbox-page button.cta {
  border-color: rgba(201, 165, 116, 0.65);
  color: #0c0c0e;
  background: linear-gradient(180deg, rgba(201, 165, 116, 0.95), rgba(168, 134, 92, 0.92));
  box-shadow: none;
}

.inbox-page .cta:hover,
.inbox-page button.cta:hover {
  border-color: rgba(201, 165, 116, 0.85);
  color: #0c0c0e;
  background: linear-gradient(180deg, rgba(201, 165, 116, 0.95), rgba(168, 134, 92, 0.92));
  filter: brightness(1.06);
}

.inbox-page .desk-nav-badge,
.inbox-page .inbox-count-badge {
  color: #1a1208;
  background: #d4b078;
  border-color: #ead4a4;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.65),
    0 0 12px rgba(200, 150, 80, 0.42);
}

.inbox-page .desk-nav-badge.is-zero,
.inbox-page .inbox-count-badge.is-zero {
  color: #e2c899;
  background: rgba(14, 10, 6, 0.95);
  border-color: rgba(212, 176, 120, 0.9);
  box-shadow:
    0 0 0 1px rgba(212, 176, 120, 0.3),
    inset 0 0 0 1px rgba(212, 176, 120, 0.18);
}

.inbox-page .desk-nav-badge.is-hot,
.inbox-page .inbox-count-badge.is-hot {
  color: #1a1208;
  background: linear-gradient(180deg, #f0d9a0 0%, #c49248 100%);
  border-color: #ead4a4;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.65),
    0 0 16px rgba(230, 170, 70, 0.55);
}

@media (max-width: 640px) {
  .desk-nav--admin,
  .desk-nav--account {
    max-width: calc(50vw - 1.1rem);
  }

  .desk-nav-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 4.5rem;
  }
}

.desk-nav-btn--home {
  border-color: rgba(168, 134, 92, 0.38);
}

.desk-nav-logo {
  width: 0.95rem;
  height: 0.95rem;
}

.hub-section {
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(201, 165, 116, 0.18);
}

.hub-section:first-of-type {
  margin-top: 1.25rem;
}

.hub-panel-head h1 {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 2.4vw, 2.35rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--paper);
}

.hub-lede {
  max-width: 36rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--paper-dim);
}

.hub-status-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
}

.hub-status-head-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.hub-status-head-copy .admin-panel-kicker {
  margin: 0;
}

/* Status frame bottom sits 0.5rem higher than the shared panel inset. */
#panel-status.admin-panel {
  padding-bottom: 1.2rem;
}

/* Experience sits under the identity card and spans the card width. */
.char-status > .char-hero {
  margin-bottom: 0.65rem;
}

.hub-experience-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  box-sizing: border-box;
  width: 100%;
  min-height: 3.15rem;
  margin: 0;
  padding: 0.55rem 1.15rem 0.6rem 1.05rem;
  border: 1px solid rgba(168, 134, 92, 0.28);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.28);
  box-shadow: inset 3px 0 0 rgba(201, 165, 116, 0.45);
  color: var(--paper-dim);
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease;
}

.hub-experience-copy {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.hub-experience-kicker {
  font-family: var(--font-herald);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(201, 165, 116, 0.72);
}

.hub-experience-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.15;
  color: var(--paper, #e8efe9);
}

.hub-experience-aside {
  flex: 0 0 auto;
  font-family: var(--font-herald);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(232, 239, 233, 0.46);
}

.hub-experience-link:hover,
.hub-experience-link:focus-visible {
  color: var(--paper);
  border-color: rgba(201, 165, 116, 0.55);
  background: rgba(201, 165, 116, 0.08);
}

.hub-experience-link:hover .hub-experience-aside,
.hub-experience-link:focus-visible .hub-experience-aside {
  color: rgba(232, 239, 233, 0.72);
}

.hub-ach-open {
  position: relative;
  isolation: isolate;
  flex: 0 0 auto;
  display: grid;
  gap: 0.15rem;
  align-content: start;
  min-width: 10.5rem;
  margin: 0.15rem 0 0;
  padding: 0.7rem 0.9rem 0.75rem;
  border: 1px solid rgba(180, 170, 210, 0.42);
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(201, 165, 116, 0.08), transparent 70%),
    rgba(0, 0, 0, 0.4);
  color: rgba(243, 223, 154, 0.95);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  overflow: hidden;
  animation: hub-ach-prism 7.5s ease-in-out infinite;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    transform 0.18s ease;
}
a.hub-ach-open,
a.hub-ach-open:visited {
  color: rgba(243, 223, 154, 0.95);
  text-decoration: none;
}

.hub-ach-open-aura {
  pointer-events: none;
  position: absolute;
  inset: -40%;
  z-index: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(255, 140, 170, 0.28),
    rgba(255, 200, 120, 0.22),
    rgba(160, 230, 170, 0.26),
    rgba(120, 190, 255, 0.28),
    rgba(180, 140, 255, 0.26),
    rgba(255, 140, 170, 0.28)
  );
  filter: blur(16px);
  opacity: 0.38;
  animation: hub-ach-spin 14s linear infinite;
  mix-blend-mode: soft-light;
}

.hub-ach-open-sheen {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.1) 48%,
    rgba(200, 230, 255, 0.08) 52%,
    transparent 70%
  );
  background-size: 220% 100%;
  animation: hub-ach-sheen 5.8s ease-in-out infinite;
  mix-blend-mode: soft-light;
  opacity: 0.7;
}

.hub-ach-open::before,
.hub-ach-open::after {
  content: "";
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  border-color: rgba(220, 200, 240, 0.55);
  border-style: solid;
  pointer-events: none;
  z-index: 3;
}

.hub-ach-open::before {
  top: 0;
  left: 0;
  border-width: 1px 0 0 1px;
}

.hub-ach-open::after {
  right: 0;
  bottom: 0;
  border-width: 0 1px 1px 0;
}

.hub-ach-open > .hub-ach-open-kicker,
.hub-ach-open > .hub-ach-open-title {
  position: relative;
  z-index: 2;
}

.hub-ach-open:hover,
.hub-ach-open.is-opened {
  border-color: rgba(210, 190, 230, 0.55);
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 1px rgba(210, 200, 240, 0.18),
    inset 0 0 28px rgba(150, 190, 255, 0.14),
    inset 0 0 40px rgba(200, 150, 240, 0.1);
}

.hub-ach-open.is-opening {
  cursor: progress;
  transform: none;
}

.hub-ach-open.is-opening .hub-ach-open-kicker {
  /* Opening: same design + color as Super Intelligence (original hub kicker). */
  color: rgba(210, 185, 220, 0.72);
  text-shadow: 0 0 10px rgba(160, 190, 255, 0.2);
}

.hub-ach-open:hover .hub-ach-open-aura,
.hub-ach-open.is-opened .hub-ach-open-aura {
  opacity: 0.52;
  filter: blur(14px);
}

/* Super Intelligence — original hub kicker (mono + cool lavender), not bronze accent. */
.hub-ach-open-kicker {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(210, 185, 220, 0.72);
  text-shadow: 0 0 10px rgba(160, 190, 255, 0.2);
}

.hub-ach-open-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #f3df9a;
  line-height: 1.15;
  text-shadow:
    0 0 12px rgba(200, 180, 255, 0.18),
    0 0 18px rgba(140, 200, 230, 0.12);
}

.hub-ach-open-mark {
  margin-top: 0.15rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(210, 220, 230, 0.68);
}

@keyframes hub-ach-prism {
  0%,
  100% {
    border-color: rgba(180, 170, 210, 0.42);
    box-shadow:
      inset 0 0 0 1px rgba(160, 180, 255, 0.12),
      inset 0 0 22px rgba(140, 180, 255, 0.14),
      inset 0 0 36px rgba(190, 140, 230, 0.1);
  }
  33% {
    border-color: rgba(160, 200, 190, 0.45);
    box-shadow:
      inset 0 0 0 1px rgba(140, 210, 190, 0.14),
      inset 0 0 22px rgba(120, 220, 190, 0.13),
      inset 0 0 36px rgba(255, 190, 130, 0.08);
  }
  66% {
    border-color: rgba(210, 170, 190, 0.44);
    box-shadow:
      inset 0 0 0 1px rgba(220, 160, 190, 0.12),
      inset 0 0 22px rgba(255, 160, 190, 0.12),
      inset 0 0 36px rgba(140, 190, 255, 0.1);
  }
}

@keyframes hub-ach-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes hub-ach-sheen {
  0%,
  100% {
    background-position: 120% 0;
    opacity: 0.35;
  }
  45% {
    opacity: 0.75;
  }
  55% {
    background-position: -30% 0;
    opacity: 0.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hub-ach-open,
  .hub-ach-open-aura,
  .hub-ach-open-sheen {
    animation: none;
  }
  .hub-ach-open-aura {
    opacity: 0.28;
    transform: none;
  }
}

.char-ach-board {
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  box-sizing: border-box;
  color: rgba(220, 224, 220, 0.92);
}

.char-ach-board[open] {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}

.char-ach-board::backdrop {
  background: #050b12;
}

.char-ach-board-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  max-height: none;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

.char-ach-board-tick,
.char-ach-board-scan,
.char-ach-board-head {
  display: none !important;
}

.char-ach-board-x {
  position: absolute;
  top: 1.05rem;
  right: 1.15rem;
  z-index: 5;
  flex: 0 0 auto;
  appearance: none;
  margin: 0;
  padding: 0.45rem 0.85rem;
  cursor: pointer;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(210, 214, 208, 0.88);
  border: 1px solid rgba(160, 168, 160, 0.35);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.45);
}

.char-ach-board-x:hover {
  border-color: rgba(210, 170, 90, 0.55);
  color: #f3df9a;
}

/* Region tree open: hide lattice Close so Back is the only exit control */
.char-ach-board:has([data-ach-region-stage]:not([hidden])) .char-ach-board-x {
  visibility: hidden;
  pointer-events: none;
}

.char-ach-board-body {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  margin: 0;
  overscroll-behavior: contain;
}

/* Full-screen lattice: blue atlas edge-to-edge (no outer frame) */
.char-ach-board .ach-board--atlas {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  gap: 0;
  margin: 0;
}

.char-ach-board .ach-atlas--jarvis {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  margin: 0;
  padding: 1.35rem 1.25rem 1.15rem;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* Top-left lattice registry plate (distinct from Status header CTA) */
.ach-atlas-brand {
  --ach-brand-ink: #d7e8f2;
  --ach-brand-muted: rgba(150, 180, 198, 0.78);
  --ach-brand-line: rgba(110, 190, 210, 0.55);
  position: absolute;
  top: 1.05rem;
  left: 1.05rem;
  z-index: 4;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "rail kicker"
    "rail title"
    "rail meta";
  column-gap: 0.7rem;
  row-gap: 0.12rem;
  align-content: start;
  min-width: 12.25rem;
  max-width: min(17.5rem, calc(100% - 7.5rem));
  padding: 0.7rem 0.95rem 0.72rem 0.72rem;
  margin: 0;
  border: 1px solid rgba(90, 150, 170, 0.38);
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(45, 120, 140, 0.16), transparent 42%),
    linear-gradient(180deg, rgba(12, 22, 28, 0.94), rgba(8, 14, 18, 0.9));
  box-shadow:
    inset 0 0 0 1px rgba(120, 200, 220, 0.08),
    0 10px 28px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  pointer-events: none;
  clip-path: polygon(
    0 0,
    calc(100% - 0.55rem) 0,
    100% 0.55rem,
    100% 100%,
    0.55rem 100%,
    0 calc(100% - 0.55rem)
  );
}

.ach-atlas-brand-rail {
  grid-area: rail;
  width: 0.22rem;
  align-self: stretch;
  min-height: 2.8rem;
  background: linear-gradient(
    180deg,
    rgba(120, 220, 235, 0.95),
    rgba(70, 150, 170, 0.35) 55%,
    rgba(40, 90, 110, 0.2)
  );
  box-shadow: 0 0 12px rgba(90, 200, 220, 0.35);
}

.ach-atlas-brand-scan {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(110, 200, 220, 0.07) 48%,
    transparent 52%
  );
  background-size: 100% 220%;
  animation: ach-atlas-brand-scan 4.8s ease-in-out infinite;
}

@keyframes ach-atlas-brand-scan {
  0%,
  100% {
    background-position: 0 0%;
    opacity: 0.35;
  }
  50% {
    background-position: 0 100%;
    opacity: 0.7;
  }
}

.ach-atlas-brand-corner {
  position: absolute;
  width: 0.55rem;
  height: 0.55rem;
  border-color: var(--ach-brand-line);
  border-style: solid;
  pointer-events: none;
  z-index: 3;
}

.ach-atlas-brand-corner--tl {
  top: 0;
  left: 0;
  border-width: 2px 0 0 2px;
}

.ach-atlas-brand-corner--tr {
  top: 0;
  right: 0;
  border-width: 2px 2px 0 0;
}

.ach-atlas-brand-corner--bl {
  left: 0;
  bottom: 0;
  border-width: 0 0 2px 2px;
}

.ach-atlas-brand-corner--br {
  right: 0;
  bottom: 0;
  border-width: 0 2px 2px 0;
}

.ach-atlas-brand-kicker,
.ach-atlas-brand-title,
.ach-atlas-brand-meta {
  position: relative;
  z-index: 2;
}

.ach-atlas-brand-kicker {
  grid-area: kicker;
  margin: 0;
  font-family: var(--font-ui, var(--font-body), system-ui, sans-serif);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ach-brand-muted);
  line-height: 1.15;
}

.ach-atlas-brand-title {
  grid-area: title;
  margin: 0;
  font-family: var(--font-ui, var(--font-body), system-ui, sans-serif);
  font-size: clamp(1.05rem, 1.8vw, 1.28rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--ach-brand-ink);
  text-shadow: 0 0 14px rgba(90, 190, 210, 0.22);
}

.ach-atlas-brand-meta {
  grid-area: meta;
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0.2rem 0 0;
  font-family: var(--font-ui, var(--font-body), system-ui, sans-serif);
  line-height: 1.1;
}

.ach-atlas-brand-meta-n {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #8fd6e4;
  font-variant-numeric: tabular-nums;
}

.ach-atlas-brand-meta-label {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(140, 170, 185, 0.72);
}

.char-ach-board:has([data-ach-region-stage]:not([hidden])) .ach-atlas-brand {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .ach-atlas-brand-scan {
    animation: none;
    opacity: 0.35;
  }
}

.char-ach-board .ach-jarvis-field {
  flex: 1 1 auto;
  align-content: center;
  min-height: 0;
}

.char-ach-board .ach-seal-space {
  flex: 0 0 auto;
}
.hub-empty {
  margin: 0.35rem 0 0.35rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--accent-hot);
}

.hub-empty-sub {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--paper-dim);
}

/* Achievements — branching trees of rank-board seals */
.ach-board {
  display: grid;
  gap: 1.15rem;
  min-width: 0;
  max-width: 100%;
}

.ach-board--atlas {
  position: relative;
  gap: 1rem;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.ach-atlas {
  display: grid;
  gap: 0.85rem;
  min-width: 0;
  flex: 1 1 auto;
}

.ach-atlas--jarvis {
  position: relative;
  align-content: start;
  flex: 1 1 auto;
  gap: 0;
  min-height: 18rem;
  padding: 0.85rem 0.85rem 0.9rem;
  border: 1px solid rgba(120, 160, 200, 0.18);
  border-radius: 2px;
  overflow: hidden;
  background:
    radial-gradient(520px 220px at 50% 28%, rgba(50, 110, 180, 0.07), transparent 70%),
    radial-gradient(480px 200px at 50% 88%, rgba(40, 90, 150, 0.05), transparent 72%),
    linear-gradient(165deg, #071018 0%, #050b12 55%, #04080e 100%);
}

.ach-atlas--jarvis::before,
.ach-atlas--jarvis::after {
  content: "";
  position: absolute;
  inset: -15%;
  pointer-events: none;
  z-index: 0;
}

.ach-atlas--jarvis::before {
  background-image:
    linear-gradient(rgba(120, 170, 220, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 170, 220, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.5;
  mask-image: radial-gradient(ellipse at 50% 42%, #000 22%, transparent 80%);
}

.ach-atlas--jarvis::after {
  background-image:
    linear-gradient(rgba(160, 200, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160, 200, 255, 0.06) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.55;
  mix-blend-mode: screen;
  animation: ach-square-drift 28s linear infinite;
  mask-image: radial-gradient(ellipse at 50% 48%, #000 28%, transparent 84%);
}

.ach-atlas--jarvis > .ach-jarvis-field,
.ach-atlas--jarvis > .ach-seal-space {
  position: relative;
  z-index: 1;
}

.ach-atlas--jarvis .ach-jarvis-field {
  flex: 0 0 auto;
  height: auto;
}

.ach-jarvis-field {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.85rem 0.75rem;
  justify-items: center;
  align-items: center;
  align-content: center;
  min-height: 0;
  padding: 0.35rem 0.15rem 0.55rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

@media (max-width: 1100px) {
  .ach-jarvis-field {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .ach-jarvis-field {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ach-jarvis-field::before,
.ach-jarvis-field::after {
  content: none;
  display: none;
}

.ach-jarvis-field-grid,
.ach-atlas-frame-grid,
.ach-atlas-frame-ripples,
.ach-jarvis-field-ripples {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.ach-jarvis-field-grid,
.ach-atlas-frame-grid {
  opacity: 0.22;
  background-image:
    linear-gradient(rgba(90, 150, 210, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90, 150, 210, 0.08) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(circle at 50% 45%, #000 20%, transparent 75%);
}

.ach-jarvis-ripple {
  position: absolute;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
}

.ach-jarvis-ripple > i {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--ripple-size, 70vmax);
  height: var(--ripple-size, 70vmax);
  margin-left: calc(var(--ripple-size, 70vmax) / -2);
  margin-top: calc(var(--ripple-size, 70vmax) / -2);
  border-radius: 50%;
  border: 1px solid rgba(140, 190, 255, 0.4);
  box-shadow:
    0 0 18px rgba(90, 160, 230, 0.18),
    inset 0 0 28px rgba(120, 180, 255, 0.08);
  background: radial-gradient(
    circle at 50% 50%,
    rgba(150, 210, 255, 0.16) 0%,
    rgba(80, 150, 230, 0.06) 28%,
    transparent 62%
  );
  opacity: 0;
  transform: scale(0.08);
  will-change: transform, opacity;
}

.ach-jarvis-ripple > i:nth-child(1) {
  --ripple-size: min(85vmax, 120vw);
}
.ach-jarvis-ripple > i:nth-child(2) {
  --ripple-size: min(140vmax, 180vw);
  border-color: rgba(130, 180, 245, 0.22);
  background: radial-gradient(
    circle at 50% 50%,
    rgba(120, 180, 255, 0.08) 0%,
    transparent 55%
  );
}

/* Drop points — left / center / right */
.ach-jarvis-ripple--1 { left: 18%; top: 42%; }
.ach-jarvis-ripple--2 { left: 50%; top: 48%; }
.ach-jarvis-ripple--3 { left: 82%; top: 44%; }

.ach-jarvis-ripple--1 > i:nth-child(1) { --ripple-size: min(80vmax, 115vw); }
.ach-jarvis-ripple--1 > i:nth-child(2) { --ripple-size: min(135vmax, 175vw); }

.ach-jarvis-ripple--3 > i:nth-child(1) { --ripple-size: min(80vmax, 115vw); }
.ach-jarvis-ripple--3 > i:nth-child(2) { --ripple-size: min(135vmax, 175vw); }

@media (prefers-reduced-motion: no-preference) {
  .ach-jarvis-ripple > i:nth-child(1) {
    animation: ach-field-ripple 12.5s ease-out infinite;
  }
  .ach-jarvis-ripple > i:nth-child(2) {
    animation: ach-field-ripple 12.5s ease-out infinite;
    animation-delay: 3.2s;
  }

  .ach-jarvis-ripple--1 > i:nth-child(1) { animation-delay: 0s; }
  .ach-jarvis-ripple--1 > i:nth-child(2) { animation-delay: 3.2s; }

  .ach-jarvis-ripple--2 > i:nth-child(1) { animation-delay: -5.4s; animation-duration: 13.2s; }
  .ach-jarvis-ripple--2 > i:nth-child(2) { animation-delay: -2.1s; animation-duration: 13.2s; }

  .ach-jarvis-ripple--3 > i:nth-child(1) { animation-delay: -8.8s; animation-duration: 12.8s; }
  .ach-jarvis-ripple--3 > i:nth-child(2) { animation-delay: -5.5s; animation-duration: 12.8s; }
}

@keyframes ach-field-ripple {
  0% {
    transform: scale(0.06);
    opacity: 0;
  }
  10% {
    opacity: 0.72;
  }
  48% {
    opacity: 0.28;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ach-jarvis-ripple > i {
    animation: none !important;
    opacity: 0.14;
    transform: scale(0.55);
  }
  .ach-jarvis-ripple > i:nth-child(2) {
    opacity: 0.08;
    transform: scale(0.72);
  }
}

.ach-jarvis-pod {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 0.45rem;
  width: 100%;
  max-width: 8.4rem;
  margin: 0;
  padding: 0.35rem 0.2rem 0.15rem;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  appearance: none;
  font: inherit;
  text-align: center;
  outline: none;
  transition: transform 0.14s ease;
}

.ach-jarvis-pod:hover,
.ach-jarvis-pod.is-hot {
  transform: translateY(-0.2rem);
}

.ach-jarvis-pod.is-on {
  transform: translateY(-0.28rem);
}

.ach-jarvis-gem {
  position: relative;
  width: 5.1rem;
  height: 5.9rem;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
}

.ach-jarvis-orbit {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 5.1rem;
  height: 1.65rem;
  margin-left: -2.55rem;
  margin-top: -0.82rem;
  border: 1px solid color-mix(in srgb, var(--ach-pod-ink, #f3e2a8) 55%, transparent);
  border-radius: 50%;
  box-shadow:
    0 0 10px color-mix(in srgb, var(--ach-pod-glow, rgba(120, 180, 255, 0.45)) 55%, transparent),
    inset 0 0 8px color-mix(in srgb, var(--ach-pod-glow, rgba(120, 180, 255, 0.35)) 30%, transparent);
  pointer-events: none;
  opacity: 0.62;
  transform-style: preserve-3d;
}

.ach-jarvis-orbit--a {
  transform: rotateX(68deg);
}

.ach-jarvis-orbit--b {
  width: 3.85rem;
  height: 1.25rem;
  margin-left: -1.925rem;
  margin-top: -0.62rem;
  opacity: 0.48;
  transform: rotateZ(32deg) rotateX(58deg);
}

.ach-jarvis-orbit--c {
  width: 5.7rem;
  height: 1.9rem;
  margin-left: -2.85rem;
  margin-top: -0.95rem;
  opacity: 0.28;
  border-style: dashed;
  border-width: 1px;
  transform: rotateZ(-18deg) rotateX(72deg);
}

.ach-jarvis-gem-svg {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  color: var(--ach-pod-ink, #f3e2a8);
  filter:
    drop-shadow(0 12px 14px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 10px color-mix(in srgb, var(--ach-pod-glow, rgba(120, 180, 255, 0.45)) 50%, transparent));
}

.ach-gem-halo {
  fill: none;
  stroke: color-mix(in srgb, var(--ach-pod-ink, #f3e2a8) 40%, transparent);
  stroke-width: 0.75;
  opacity: 0.5;
}

.ach-gem-bloom {
  opacity: 0.72;
  pointer-events: none;
}

.ach-gem-face {
  stroke: none;
}

.ach-gem-face--upper-back { opacity: 0.2; }
.ach-gem-face--lower-back { opacity: 0.14; }
.ach-gem-face--upper-front { opacity: 0.38; }
.ach-gem-face--lower-front { opacity: 0.28; }

.ach-gem-wire {
  fill: none;
  stroke: color-mix(in srgb, var(--ach-pod-ink, #dcecff) 85%, #fff);
  stroke-width: 1.2;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 0 2.5px var(--ach-pod-glow, rgba(120, 180, 255, 0.65)));
}

.ach-gem-wire--equator-back {
  stroke-width: 0.85;
  opacity: 0.35;
  stroke-dasharray: 3.5 3;
}

.ach-gem-wire--equator-front {
  stroke-width: 1.35;
  opacity: 0.95;
}

.ach-gem-wire--silhouette {
  stroke-width: 1.25;
  opacity: 0.92;
}

.ach-gem-wire--meridian {
  stroke-width: 0.75;
  opacity: 0.55;
}

.ach-gem-wire--meridian-soft {
  stroke-width: 0.55;
  opacity: 0.28;
  stroke-dasharray: 2 3;
}

.ach-gem-wire--scan {
  stroke-width: 1.4;
  opacity: 0.35;
  stroke-dasharray: 14 48;
  stroke-linecap: round;
}

.ach-gem-node {
  fill: color-mix(in srgb, var(--ach-pod-ink, #e8f4ff) 70%, #fff);
  stroke: var(--ach-pod-glow, rgba(120, 180, 255, 0.75));
  stroke-width: 0.55;
  filter: drop-shadow(0 0 3.5px var(--ach-pod-glow, rgba(120, 180, 255, 0.8)));
}

.ach-gem-node--mid {
  opacity: 0.8;
}

.ach-gem-node--core {
  fill: var(--ach-pod-ink, #e8f4ff);
  opacity: 0.98;
  filter:
    drop-shadow(0 0 4px var(--ach-pod-ink, #e8f4ff))
    drop-shadow(0 0 12px var(--ach-pod-glow, rgba(120, 180, 255, 0.9)));
}

/* Core bloom: crystal ink as the main light (not white) */
radialGradient[id^="ach-gem-core-"] stop:nth-child(1) {
  stop-color: var(--ach-pod-ink, #e8f4ff);
  stop-opacity: 0.98;
}

radialGradient[id^="ach-gem-core-"] stop:nth-child(2) {
  stop-color: var(--ach-pod-ink, #e8f4ff);
  stop-opacity: 0.55;
}

radialGradient[id^="ach-gem-core-"] stop:nth-child(3) {
  stop-color: var(--ach-pod-ink, #e8f4ff);
  stop-opacity: 0;
}

.ach-jarvis-gem-glow {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 2%;
  height: 34%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, var(--ach-pod-glow, rgba(120, 180, 255, 0.45)), transparent 72%);
  filter: blur(6px);
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
}

.ach-jarvis-pod.is-hot .ach-jarvis-gem-glow,
.ach-jarvis-pod.is-on .ach-jarvis-gem-glow {
  opacity: 1;
}

.ach-jarvis-pod.is-hot .ach-jarvis-orbit,
.ach-jarvis-pod.is-on .ach-jarvis-orbit {
  opacity: 0.95;
  border-color: color-mix(in srgb, var(--ach-pod-ink, #f3e2a8) 80%, #fff);
}

.ach-jarvis-pod.is-hot .ach-jarvis-gem-svg,
.ach-jarvis-pod.is-on .ach-jarvis-gem-svg {
  filter:
    drop-shadow(0 12px 14px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 18px var(--ach-pod-glow, rgba(120, 180, 255, 0.65)));
}

@media (prefers-reduced-motion: no-preference) {
  .ach-jarvis-gem {
    animation: ach-jarvis-float 4.2s ease-in-out infinite;
  }
  .ach-jarvis-gem-svg {
    animation: ach-jarvis-spin 8.5s ease-in-out infinite;
    transform-origin: 50% 52%;
  }
  .ach-jarvis-orbit--a {
    animation: ach-jarvis-orbit-a 8s linear infinite;
  }
  .ach-jarvis-orbit--b {
    animation: ach-jarvis-orbit-b 6.2s linear infinite;
  }
  .ach-jarvis-orbit--c {
    animation: ach-jarvis-orbit-c 11s linear infinite;
  }
  .ach-gem-node--core {
    animation: ach-jarvis-core 2.2s ease-in-out infinite;
  }
  .ach-gem-bloom {
    animation: ach-jarvis-bloom 3.2s ease-in-out infinite;
  }
  .ach-gem-wire--scan {
    animation: ach-jarvis-scan 3.8s linear infinite;
  }
  .ach-jarvis-pod:nth-of-type(3n) .ach-jarvis-gem { animation-delay: -0.7s; }
  .ach-jarvis-pod:nth-of-type(3n+1) .ach-jarvis-gem { animation-delay: -1.5s; }
  .ach-jarvis-pod:nth-of-type(3n+2) .ach-jarvis-gem { animation-delay: -2.3s; }
  .ach-jarvis-pod:nth-of-type(3n) .ach-jarvis-gem-svg { animation-delay: -1.2s; }
  .ach-jarvis-pod:nth-of-type(3n+1) .ach-jarvis-gem-svg { animation-delay: -3.1s; }
  .ach-jarvis-pod:nth-of-type(3n+2) .ach-jarvis-gem-svg { animation-delay: -5.4s; }
  .ach-jarvis-pod:nth-of-type(3n) .ach-gem-wire--scan { animation-delay: -0.4s; }
  .ach-jarvis-pod:nth-of-type(3n+1) .ach-gem-wire--scan { animation-delay: -1.6s; }
  .ach-jarvis-pod:nth-of-type(3n+2) .ach-gem-wire--scan { animation-delay: -2.8s; }

  .ach-jarvis-pod:hover .ach-jarvis-gem-svg,
  .ach-jarvis-pod.is-hot .ach-jarvis-gem-svg,
  .ach-jarvis-pod.is-on .ach-jarvis-gem-svg {
    animation-duration: 3.8s;
  }
  .ach-jarvis-pod:hover .ach-jarvis-orbit--a,
  .ach-jarvis-pod.is-hot .ach-jarvis-orbit--a,
  .ach-jarvis-pod.is-on .ach-jarvis-orbit--a {
    animation-duration: 4.5s;
  }
}

@keyframes ach-jarvis-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.38rem); }
}

@keyframes ach-jarvis-spin {
  0% { transform: rotate(-5deg) scaleX(1) scaleY(1); }
  25% { transform: rotate(0deg) scaleX(0.86) scaleY(1.04); }
  50% { transform: rotate(5deg) scaleX(1) scaleY(1); }
  75% { transform: rotate(0deg) scaleX(0.86) scaleY(1.04); }
  100% { transform: rotate(-5deg) scaleX(1) scaleY(1); }
}

@keyframes ach-jarvis-orbit-a {
  from { transform: rotateX(68deg) rotate(0deg); }
  to { transform: rotateX(68deg) rotate(360deg); }
}

@keyframes ach-jarvis-orbit-b {
  from { transform: rotateZ(32deg) rotateX(58deg) rotate(0deg); }
  to { transform: rotateZ(32deg) rotateX(58deg) rotate(-360deg); }
}

@keyframes ach-jarvis-orbit-c {
  from { transform: rotateZ(-18deg) rotateX(72deg) rotate(0deg); }
  to { transform: rotateZ(-18deg) rotateX(72deg) rotate(360deg); }
}

@keyframes ach-jarvis-core {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

@keyframes ach-jarvis-bloom {
  0%, 100% { opacity: 0.32; }
  50% { opacity: 0.72; }
}

@keyframes ach-jarvis-scan {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -62; }
}

@media (prefers-reduced-motion: reduce) {
  .ach-jarvis-gem,
  .ach-jarvis-gem-svg,
  .ach-jarvis-orbit--a,
  .ach-jarvis-orbit--b,
  .ach-jarvis-orbit--c,
  .ach-gem-node--core,
  .ach-gem-bloom,
  .ach-gem-wire--scan {
    animation: none !important;
  }
}

/* Pedestal base under each crystal */
.ach-jarvis-base {
  position: relative;
  display: grid;
  gap: 0.18rem;
  justify-items: center;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.55rem 0.35rem 0.45rem;
  isolation: isolate;
}

.ach-jarvis-base-plate {
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid color-mix(in srgb, var(--ach-pod-ink, #f3e2a8) 35%, transparent);
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 40%),
    linear-gradient(180deg, rgba(8, 12, 18, 0.15), rgba(0, 0, 0, 0.55)),
    var(--ach-pod-base, rgba(20, 40, 70, 0.45));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 8px 18px rgba(0, 0, 0, 0.35);
  clip-path: polygon(8% 0, 92% 0, 100% 28%, 100% 100%, 0 100%, 0 28%);
}

.ach-jarvis-pod.is-hot .ach-jarvis-base-plate,
.ach-jarvis-pod.is-on .ach-jarvis-base-plate {
  border-color: color-mix(in srgb, var(--ach-pod-ink, #f3e2a8) 70%, #fff);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 0 16px color-mix(in srgb, var(--ach-pod-glow, rgba(120, 180, 255, 0.4)) 55%, transparent);
}

.ach-jarvis-base-name {
  font-family: var(--font-herald);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ach-pod-ink, #dcecff);
  line-height: 1.15;
}

.ach-jarvis-base-meta {
  display: inline-flex;
  align-items: baseline;
  gap: 0.02em;
  margin-top: 0.05rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: 0.02em;
}

.ach-jarvis-base-meta-n {
  font-size: 1.05rem;
  font-weight: 800;
  font-family: var(--font-display, var(--font-herald));
}

.ach-jarvis-base-meta-sep {
  font-size: 0.78rem;
  font-weight: 700;
  opacity: 0.55;
  margin: 0 0.04em;
}

.ach-jarvis-base-meta-t {
  font-size: 0.78rem;
  font-weight: 700;
  opacity: 0.72;
}

/* Incomplete type — count reads as the pedestal’s primary status */
.ach-jarvis-base-meta.is-open {
  color: color-mix(in srgb, var(--ach-pod-ink, #e8f4ff) 88%, #fff);
  text-shadow:
    0 0 10px color-mix(in srgb, var(--ach-pod-glow, rgba(120, 180, 255, 0.55)) 70%, transparent),
    0 1px 0 rgba(0, 0, 0, 0.55);
}

.ach-jarvis-base-meta.is-open .ach-jarvis-base-meta-n {
  color: #fff;
}

.ach-jarvis-base-meta.is-open .ach-jarvis-base-meta-t {
  color: color-mix(in srgb, var(--ach-pod-ink, #dcecff) 75%, #fff);
  opacity: 0.9;
}

/* Complete type — calmer, still readable */
.ach-jarvis-base-meta.is-complete {
  color: rgba(190, 210, 200, 0.78);
  text-shadow: none;
}

.ach-jarvis-base-meta.is-complete .ach-jarvis-base-meta-n {
  font-size: 0.92rem;
  color: rgba(210, 230, 218, 0.92);
}

.ach-jarvis-base-meta.is-complete .ach-jarvis-base-meta-sep,
.ach-jarvis-base-meta.is-complete .ach-jarvis-base-meta-t {
  opacity: 0.65;
}

.ach-jarvis-pod.is-hot .ach-jarvis-base-meta.is-open,
.ach-jarvis-pod.is-on .ach-jarvis-base-meta.is-open {
  text-shadow:
    0 0 14px var(--ach-pod-glow, rgba(120, 180, 255, 0.65)),
    0 1px 0 rgba(0, 0, 0, 0.55);
}

.ach-jarvis-base-kicker {
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(160, 170, 180, 0.48);
}

/* Per-type crystal colors */
.ach-jarvis-pod--ascent {
  --ach-pod-ink: #b8dcff;
  --ach-pod-glow: rgba(64, 148, 255, 0.58);
  --ach-pod-base: rgba(22, 62, 130, 0.46);
}
.ach-jarvis-pod--ascent .ach-gem-face--upper-back { fill: rgba(28, 88, 175, 0.2); }
.ach-jarvis-pod--ascent .ach-gem-face--lower-back { fill: rgba(14, 42, 100, 0.16); }
.ach-jarvis-pod--ascent .ach-gem-face--upper-front { fill: rgba(56, 130, 230, 0.34); }
.ach-jarvis-pod--ascent .ach-gem-face--lower-front { fill: rgba(24, 72, 150, 0.24); }

.ach-jarvis-pod--edge {
  --ach-pod-ink: #ffd2b8;
  --ach-pod-glow: rgba(255, 120, 70, 0.5);
  --ach-pod-base: rgba(120, 45, 25, 0.42);
}
.ach-jarvis-pod--edge .ach-gem-face--upper-back { fill: rgba(168, 69, 34, 0.18); }
.ach-jarvis-pod--edge .ach-gem-face--lower-back { fill: rgba(90, 32, 16, 0.14); }
.ach-jarvis-pod--edge .ach-gem-face--upper-front { fill: rgba(212, 106, 58, 0.3); }
.ach-jarvis-pod--edge .ach-gem-face--lower-front { fill: rgba(130, 50, 24, 0.22); }

.ach-jarvis-pod--vault {
  --ach-pod-ink: #f0e0a8;
  --ach-pod-glow: rgba(220, 180, 70, 0.48);
  --ach-pod-base: rgba(90, 70, 25, 0.42);
}
.ach-jarvis-pod--vault .ach-gem-face--upper-back { fill: rgba(143, 116, 40, 0.18); }
.ach-jarvis-pod--vault .ach-gem-face--lower-back { fill: rgba(75, 58, 18, 0.14); }
.ach-jarvis-pod--vault .ach-gem-face--upper-front { fill: rgba(196, 160, 64, 0.3); }
.ach-jarvis-pod--vault .ach-gem-face--lower-front { fill: rgba(110, 88, 28, 0.22); }

.ach-jarvis-pod--risk_desk {
  --ach-pod-ink: #ffc8c8;
  --ach-pod-glow: rgba(230, 70, 80, 0.48);
  --ach-pod-base: rgba(100, 25, 35, 0.42);
}
.ach-jarvis-pod--risk_desk .ach-gem-face--upper-back { fill: rgba(143, 42, 54, 0.18); }
.ach-jarvis-pod--risk_desk .ach-gem-face--lower-back { fill: rgba(75, 20, 28, 0.14); }
.ach-jarvis-pod--risk_desk .ach-gem-face--upper-front { fill: rgba(196, 69, 82, 0.3); }
.ach-jarvis-pod--risk_desk .ach-gem-face--lower-front { fill: rgba(110, 30, 40, 0.22); }

.ach-jarvis-pod--signal_craft {
  --ach-pod-ink: #c8f5e8;
  --ach-pod-glow: rgba(50, 200, 160, 0.48);
  --ach-pod-base: rgba(20, 80, 65, 0.42);
}
.ach-jarvis-pod--signal_craft .ach-gem-face--upper-back { fill: rgba(31, 125, 99, 0.18); }
.ach-jarvis-pod--signal_craft .ach-gem-face--lower-back { fill: rgba(16, 64, 52, 0.14); }
.ach-jarvis-pod--signal_craft .ach-gem-face--upper-front { fill: rgba(47, 173, 138, 0.3); }
.ach-jarvis-pod--signal_craft .ach-gem-face--lower-front { fill: rgba(24, 95, 75, 0.22); }

/* Cadence: violet pulse — kept clear of Ascent’s cobalt blue */
.ach-jarvis-pod--cadence {
  --ach-pod-ink: #e4d4ff;
  --ach-pod-glow: rgba(168, 110, 255, 0.55);
  --ach-pod-base: rgba(72, 36, 120, 0.46);
}
.ach-jarvis-pod--cadence .ach-gem-face--upper-back { fill: rgba(118, 72, 188, 0.2); }
.ach-jarvis-pod--cadence .ach-gem-face--lower-back { fill: rgba(58, 28, 105, 0.16); }
.ach-jarvis-pod--cadence .ach-gem-face--upper-front { fill: rgba(158, 108, 230, 0.34); }
.ach-jarvis-pod--cadence .ach-gem-face--lower-front { fill: rgba(92, 52, 160, 0.24); }

.ach-jarvis-pod--forge {
  --ach-pod-ink: #ffd9b0;
  --ach-pod-glow: rgba(240, 140, 50, 0.5);
  --ach-pod-base: rgba(100, 50, 15, 0.42);
}
.ach-jarvis-pod--forge .ach-gem-face--upper-back { fill: rgba(168, 94, 24, 0.18); }
.ach-jarvis-pod--forge .ach-gem-face--lower-back { fill: rgba(90, 48, 12, 0.14); }
.ach-jarvis-pod--forge .ach-gem-face--upper-front { fill: rgba(212, 132, 48, 0.3); }
.ach-jarvis-pod--forge .ach-gem-face--lower-front { fill: rgba(130, 72, 18, 0.22); }

.ach-jarvis-pod--scriptorium {
  --ach-pod-ink: #d4e8f0;
  --ach-pod-glow: rgba(90, 170, 190, 0.52);
  --ach-pod-base: rgba(28, 62, 78, 0.46);
}
.ach-jarvis-pod--scriptorium .ach-gem-face--upper-back { fill: rgba(48, 110, 130, 0.2); }
.ach-jarvis-pod--scriptorium .ach-gem-face--lower-back { fill: rgba(22, 52, 64, 0.16); }
.ach-jarvis-pod--scriptorium .ach-gem-face--upper-front { fill: rgba(78, 160, 178, 0.34); }
.ach-jarvis-pod--scriptorium .ach-gem-face--lower-front { fill: rgba(36, 90, 108, 0.24); }

.char-id-head-meta {
  display: grid;
  gap: 0.2rem;
  justify-items: end;
  text-align: right;
  min-width: 0;
}

.char-id-display-name {
  margin: 0;
  font-family: var(--font-herald);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(244, 232, 210, 0.95);
  overflow-wrap: anywhere;
}

.ach-atlas-caption,
.ach-seal-space {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 1rem 1.15rem;
  align-items: center;
  margin-top: 0.15rem;
  padding: 0.85rem 0.35rem 0.2rem;
  border-top: 1px solid rgba(120, 160, 200, 0.14);
}

.ach-seal-space-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 6.25rem;
  height: 7.1rem;
}

.ach-seal-space-gem {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: end;
  pointer-events: none;
  color: var(--ach-pod-ink, #f3e2a8);
}

.ach-seal-space-gem[hidden] {
  display: none !important;
}

.ach-seal-space-gem .ach-jarvis-gem {
  width: 4.6rem;
  height: 5.4rem;
}

.ach-seal-space-gem .ach-jarvis-gem-svg {
  width: 100%;
  height: 100%;
}

.ach-seal-space-gem .ach-jarvis-orbit {
  opacity: 0.85;
}

.ach-seal-space-plate {
  position: absolute;
  left: 50%;
  bottom: 0.15rem;
  width: 3.4rem;
  height: 0.42rem;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--ach-pod-ink, #f3e2a8) 55%, transparent),
    transparent
  );
  box-shadow: 0 0 12px color-mix(in srgb, var(--ach-pod-glow, rgba(232, 190, 70, 0.45)) 70%, transparent);
}

.ach-seal-space-gem--idle {
  --ach-pod-ink: #f4f7fc;
  --ach-pod-glow: rgba(230, 238, 255, 0.62);
  --ach-pod-base: rgba(160, 175, 200, 0.28);
  color: var(--ach-pod-ink);
  opacity: 0.88;
  transition: opacity 0.18s ease;
}

.ach-seal-space-gem--idle .ach-gem-face--upper-back { fill: rgba(210, 220, 235, 0.22); }
.ach-seal-space-gem--idle .ach-gem-face--lower-back { fill: rgba(150, 165, 185, 0.16); }
.ach-seal-space-gem--idle .ach-gem-face--upper-front { fill: rgba(235, 242, 252, 0.38); }
.ach-seal-space-gem--idle .ach-gem-face--lower-front { fill: rgba(175, 190, 210, 0.26); }

.ach-seal-space.is-holding .ach-seal-space-gem--idle {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.ach-seal-space-copy {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.ach-atlas-caption-kicker {
  margin: 0;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(200, 170, 120, 0.72);
}

.ach-atlas-caption-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: rgba(236, 238, 234, 0.96);
}

.ach-atlas-caption-hook {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(180, 186, 178, 0.68);
  max-width: 52rem;
}

@media (max-width: 640px) {
  .ach-atlas-caption,
  .ach-seal-space {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .ach-seal-space-copy {
    justify-items: center;
  }
}

.ach-region-stage {
  min-width: 0;
  border-top: 1px solid rgba(160, 148, 110, 0.22);
  padding-top: 0.85rem;
}

.ach-region-stage[hidden] {
  display: none !important;
}

.ach-region-stage .ach-tree[hidden] {
  display: none !important;
}

.ach-region-stage .ach-tree {
  border: 1px solid rgba(160, 168, 160, 0.2);
}

.ach-region-pop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
}

.ach-region-pop[hidden] {
  display: none !important;
}

.ach-region-pop-backdrop {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
  overflow: hidden;
  z-index: 0;
  background: #05070a;
}

.ach-region-pop-backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(120, 170, 220, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 170, 220, 0.035) 1px, transparent 1px);
  background-size: 36px 36px;
  opacity: 0.4;
}

.ach-region-pop-backdrop::after {
  content: none;
  display: none;
}

/* Lattice field still uses opacity breath */
@keyframes ach-square-drift {
  0% {
    background-position: 0 0, 0 0, 0 0, 0 0;
    opacity: 0.55;
  }
  50% {
    background-position: 36px 36px, -36px 36px, 0 0, 0 0;
    opacity: 0.78;
  }
  100% {
    background-position: 72px 72px, -72px 72px, 0 0, 0 0;
    opacity: 0.55;
  }
}

.ach-region-pop-card {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  overflow: hidden;
  padding: 1.15rem 1.35rem 1.25rem;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overscroll-behavior: contain;
  animation: ach-region-pop-in 0.16s ease-out;
}

@keyframes ach-region-pop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.ach-region-pop-x {
  position: absolute;
  top: 1.05rem;
  right: 1.15rem;
  z-index: 3;
  float: none;
  margin: 0;
  padding: 0.45rem 0.85rem;
  cursor: pointer;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(210, 214, 208, 0.88);
  border: 1px solid rgba(160, 168, 160, 0.35);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.45);
}

.ach-region-pop-x:hover {
  border-color: rgba(210, 170, 90, 0.55);
  color: #f3df9a;
}

.ach-region-pop .ach-tree[hidden] {
  display: none !important;
}

.ach-region-pop .ach-tree:not([hidden]) {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  padding: 0 2.5rem 0 0;
  overflow: hidden;
}

.ach-region-pop .ach-tree-head {
  display: grid;
  grid-template-columns: 5.8rem minmax(0, 1fr);
  gap: 1rem 1.15rem;
  align-items: center;
  flex: 0 0 auto;
  max-width: 48rem;
  padding-right: 5rem;
  margin-bottom: 1rem;
}

.ach-region-pop .ach-tree-canvas {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 1.25rem 0.75rem 1.75rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.ach-region-pop .ach-tree-list {
  margin: auto;
}


.ach-board-summary {
  display: grid;
  gap: 0.55rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid rgba(160, 140, 90, 0.28);
  background:
    radial-gradient(ellipse 80% 120% at 0% 0%, rgba(201, 165, 116, 0.08), transparent 55%),
    rgba(8, 9, 8, 0.55);
}

.ach-board-summary-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.55rem 1rem;
}

.ach-board-kicker {
  margin: 0;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(168, 134, 92, 0.72);
}

.ach-board-count {
  margin: 0;
  font-size: 0.95rem;
  color: rgba(210, 214, 208, 0.88);
}

.ach-board-count strong {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: #f0e6c8;
}

.ach-board-count span {
  margin-left: 0.2rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgba(170, 176, 170, 0.65);
}

.ach-board-meter {
  height: 0.28rem;
  border: 1px solid rgba(140, 148, 140, 0.28);
  background: rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.ach-board-meter-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, rgba(140, 110, 50, 0.75), rgba(201, 165, 116, 0.95));
}

.ach-board-next {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.65rem;
  align-items: baseline;
  font-size: 0.78rem;
}

.ach-board-next-kicker {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(168, 134, 92, 0.7);
}

.ach-board-next strong {
  color: #f3df9a;
}

.ach-board-next-meta {
  color: rgba(170, 176, 170, 0.62);
  font-size: 0.72rem;
}

.ach-board-equip-hint {
  margin: 0;
  font-size: 0.72rem;
  color: rgba(170, 176, 170, 0.65);
}

.ach-board-equip-hint strong {
  color: rgba(220, 200, 140, 0.88);
  font-weight: 600;
}

.ach-trees {
  display: grid;
  gap: 1.35rem;
  min-width: 0;
}

.ach-tree {
  min-width: 0;
  padding: 0.85rem 0.75rem 1rem;
  border: 1px solid rgba(160, 168, 160, 0.2);
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(201, 165, 116, 0.04), transparent 28%),
    rgba(0, 0, 0, 0.28);
  overflow-x: auto;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.ach-tree--ascent { border-color: rgba(70, 140, 230, 0.32); }
.ach-tree--edge { border-color: rgba(210, 130, 90, 0.28); }
.ach-tree--vault { border-color: rgba(168, 134, 92, 0.28); }
.ach-tree--risk_desk { border-color: rgba(190, 110, 140, 0.28); }
.ach-tree--signal_craft { border-color: rgba(90, 170, 150, 0.28); }
.ach-tree--cadence { border-color: rgba(160, 110, 230, 0.34); }
.ach-tree--forge { border-color: rgba(230, 140, 60, 0.3); }
.ach-tree--scriptorium { border-color: rgba(90, 170, 190, 0.34); }

.ach-tree-head {
  display: grid;
  grid-template-columns: 5.8rem minmax(0, 1fr);
  gap: 0.85rem 1rem;
  align-items: center;
  margin-bottom: 0.85rem;
  padding: 0 0.25rem;
}

.ach-tree-head-crystal {
  position: relative;
  display: grid;
  place-items: center;
  align-content: end;
  width: 5.5rem;
  height: 6.4rem;
  pointer-events: none;
  color: var(--ach-pod-ink, #b8dcff);
}

.ach-tree-head-crystal .ach-jarvis-gem {
  width: 4.4rem;
  height: 5.2rem;
}

.ach-tree-head-crystal .ach-jarvis-gem-svg {
  width: 100%;
  height: 100%;
}

.ach-tree-head-crystal .ach-jarvis-orbit {
  opacity: 0.85;
}

.ach-tree-head-copy {
  min-width: 0;
}

.ach-tree-kicker {
  margin: 0 0 0.15rem;
  font-family: var(--font-herald);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(180, 186, 178, 0.58);
}

.ach-tree-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: rgba(236, 238, 234, 0.96);
}

.ach-tree-hook {
  margin: 0.25rem 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: rgba(200, 206, 198, 0.68);
  max-width: 52rem;
}

.ach-tree-hall {
  margin: 0.55rem 0 0;
}

.ach-tree-hall-link,
.ach-tree-tip-link .ach-tree-hall-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0.28rem 0.65rem;
  border: 1px solid rgba(90, 170, 190, 0.45);
  border-radius: 3px;
  background: rgba(28, 62, 78, 0.55);
  color: #d4e8f0;
  font-family: var(--font-herald);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}

.ach-tree-hall-link:hover,
.ach-tree-hall-link:focus-visible {
  border-color: rgba(120, 200, 215, 0.7);
  color: #eef8fb;
  outline: none;
}

.ach-tree-tip-link {
  margin: 0.45rem 0 0;
}

@media (max-width: 640px) {
  .ach-tree-head,
  .ach-region-pop .ach-tree-head {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding-right: 0;
  }

  .ach-region-pop .ach-tree-head {
    padding-top: 2.4rem;
  }
}

.ach-tree-canvas {
  display: flex;
  justify-content: flex-start;
  min-width: min-content;
  padding: 0.35rem 0.75rem 0.75rem;
}

/* Org-chart tree — left-to-right depth, siblings stacked vertically */
.ach-tree-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.15rem;
  position: relative;
}

.ach-tree-item {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-top: 0;
  padding-left: 0;
}

.ach-tree-item > .ach-tree-list {
  margin-top: 0;
  margin-left: 0;
  padding-top: 0;
  padding-left: 0;
}

.ach-tree-item.has-kids > .ach-tree-list {
  position: relative;
  margin-left: 1.35rem;
}

/* Connectors are drawn in JS (.ach-tree-wire) — hide legacy pseudo wires */
.ach-tree-item::before,
.ach-tree-item::after,
.ach-tree-item.has-kids > .ach-tree-list::before,
.ach-tree-item.has-kids > .ach-tree-list > .ach-tree-item::after {
  display: none !important;
  content: none !important;
}

.ach-tree-item > .ach-tree-node::before {
  display: none !important;
  content: none !important;
}

.ach-tree-wire {
  position: absolute;
  border-radius: 2px;
  background: rgba(55, 58, 62, 0.55);
  pointer-events: none;
  z-index: 0;
}

.ach-tree-wire--h {
  height: 3px;
  margin-top: -1.5px;
}

.ach-tree-wire--v {
  width: 3px;
  margin-left: -1.5px;
}

.ach-tree-wire.is-lit {
  background: rgba(243, 223, 154, 0.92);
}

.ach-tree-node {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Tree seal layout — keep designed track silhouettes (same as rank-row seals) */
.ach-seal-tile.char-tier-board-seal,
button.ach-seal-tile.char-tier-board-seal {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  width: auto;
  min-width: 10.5rem;
  max-width: 13rem;
  min-height: 1.55rem;
  height: auto;
  margin: 0;
  padding: 0.28rem 0.62rem 0.28rem 0.4rem;
  overflow: hidden; /* light/sheen stay inside the plate */
  isolation: isolate;
  white-space: nowrap;
  font-family: var(--font-herald);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.15;
  text-transform: uppercase;
  text-align: left;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
  appearance: none;
  cursor: pointer;
}

/* No outer bloom — aura stays inset (track styles + breathe keyframes) */
.ach-tree-item > .ach-tree-node > .ach-seal-tile,
.ach-tree-item.is-unlocked > .ach-tree-node > .ach-seal-tile {
  filter: none;
}

.ach-tree-item.is-equipped > .ach-tree-node > .ach-seal-tile {
  box-shadow:
    inset 0 0 0 1px rgba(201, 165, 116, 0.55),
    inset 0 0 14px rgba(180, 140, 60, 0.22) !important;
}

.ach-seal-tile-label {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  font: inherit;
  font-weight: 700;
  letter-spacing: inherit;
  line-height: 1.15;
  color: inherit;
  text-shadow: inherit;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

button.ach-seal-tile.is-busy {
  opacity: 0.55;
  pointer-events: none;
}

/* Fulfilled seals stand out; incomplete ones recede (keep plate design) */
.ach-tree-item.is-unlocked > .ach-tree-node > .ach-seal-tile {
  opacity: 1;
  filter: none;
}

.ach-tree-item.is-progress > .ach-tree-node > .ach-seal-tile,
.ach-tree-item.is-progress > .ach-tree-node > .ach-seal-tile.is-dim {
  opacity: 0.72;
  filter: saturate(0.55) brightness(0.82);
  animation: none !important;
  cursor: default;
}

.ach-tree-item.is-progress.is-next > .ach-tree-node > .ach-seal-tile {
  opacity: 0.9;
  filter: saturate(0.7) brightness(0.9);
}

.ach-tree-item.is-locked > .ach-tree-node > .ach-seal-tile,
.ach-tree-item.is-locked > .ach-tree-node > .ach-seal-tile.is-dim {
  opacity: 0.38;
  filter: grayscale(0.85) saturate(0.2) brightness(0.7);
  animation: none !important;
  cursor: default;
  pointer-events: none;
}

.ach-tree-item.is-locked .ach-seal-tile-label,
.ach-tree-item.is-progress .ach-seal-tile-label {
  color: inherit;
}

.ach-tree-item.is-locked .char-seal-chip-pips i,
.ach-tree-item.is-progress .char-seal-chip-pips i {
  opacity: 0.3;
  box-shadow: none;
}

.ach-tree-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.55rem);
  z-index: 8;
  width: max(14rem, 100%);
  min-width: 13.5rem;
  max-width: 18rem;
  padding: 0.65rem 0.75rem 0.7rem;
  border: 1px solid rgba(168, 134, 92, 0.4);
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 40%),
    rgba(10, 11, 10, 0.96);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 12px 28px rgba(0, 0, 0, 0.55);
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease, visibility 0.12s ease;
}

.ach-tree-tip[hidden] {
  display: block;
}

.ach-tree-node:hover > .ach-tree-tip,
.ach-tree-node:focus-within > .ach-tree-tip,
.ach-tree-tip.is-on {
  opacity: 1;
  visibility: visible;
}

.ach-tree-tip-kicker {
  margin: 0 0 0.2rem;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(168, 134, 92, 0.72);
}

.ach-tree-tip-label {
  display: block;
  font-family: var(--font-herald);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #f0e6c8;
  line-height: 1.2;
}

.ach-tree-tip-blurb {
  margin: 0.35rem 0 0;
  font-size: 0.72rem;
  line-height: 1.4;
  color: rgba(200, 206, 198, 0.78);
}

.ach-tree-tip-meta {
  margin: 0.45rem 0 0;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(168, 134, 92, 0.8);
}

.ach-tree-tip-bar {
  height: 0.18rem;
  margin-top: 0.4rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(140, 148, 140, 0.22);
  overflow: hidden;
}

.ach-tree-tip-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, rgba(140, 110, 50, 0.65), rgba(201, 165, 116, 0.9));
}

@media (max-width: 720px) {
  .ach-tree-list {
    gap: 0.75rem;
  }

  .ach-seal-tile.char-tier-board-seal,
  button.ach-seal-tile.char-tier-board-seal {
    min-width: 9.5rem;
    max-width: 12rem;
    font-size: 0.58rem;
    letter-spacing: 0.06em;
  }
}

.portal-page .admin-menu-brand {
  font-family: var(--font-display);
  font-size: 1.7rem;
  letter-spacing: 0.04em;
}

.portal-page .admin-menu-kicker {
  letter-spacing: 0.32em;
}

.portal-page .admin-menu-label {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.portal-page .char-ability-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.03em;
}

.portal-page .admin-panel-kicker {
  font-family: var(--font-herald);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.portal-page .char-section-title {
  font-family: var(--font-herald);
  font-size: 0.8rem;
  letter-spacing: 0.22em;
}

.portal-page .char-stat-label {
  font-family: var(--font-herald);
  letter-spacing: 0.16em;
}

.portal-warn-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(26rem, 92vw);
  max-width: min(26rem, 92vw);
  height: fit-content;
  max-height: min(80vh, 32rem);
  border: 1px solid rgba(201, 165, 116, 0.65);
  border-radius: 0.7rem;
  padding: 0;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 210, 120, 0.1), transparent 55%),
    linear-gradient(180deg, rgba(28, 24, 18, 0.98) 0%, rgba(10, 10, 12, 0.98) 100%);
  color: inherit;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.45),
    0 18px 48px rgba(0, 0, 0, 0.55);
}

.cal-desk-sheet {
  margin: auto;
  padding: 0;
  border: 1px solid rgba(168, 134, 92, 0.38);
  border-radius: 1px;
  background: #0c0d10;
  color: inherit;
  max-width: min(28rem, calc(100vw - 1.5rem));
  width: 100%;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 18px 48px rgba(0, 0, 0, 0.55);
}

.cal-desk-sheet::backdrop {
  background: rgba(4, 4, 6, 0.72);
}

.cal-desk-sheet-card {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0.85rem 1rem 0.9rem;
  background: #0c0d10;
  box-sizing: border-box;
}

.cal-desk-sheet .cal-detail-head {
  margin: 0;
  padding: 0;
  border: 0;
}

.cal-desk-sheet .cal-detail-kicker {
  margin: 0 0 0.2rem;
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(201, 165, 116, 0.78);
}

.cal-desk-sheet .cal-detail-title {
  margin: 0;
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--stats-paper, #f4eee3);
}

.cal-desk-sheet-copy {
  margin: 0;
  max-width: 36em;
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(220, 212, 196, 0.78);
}

.cal-desk-sheet-foot {
  margin-top: 0.15rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(168, 134, 92, 0.28);
}

.cal-desk-sheet-foot .rsv-btn {
  min-height: 2.15rem;
  padding: 0.4rem 0.9rem;
  border-radius: 1px;
}

#panel-grant-rsv .cal-desk-sheet .cal-detail-kicker {
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  color: rgba(201, 165, 116, 0.78);
}

#panel-grant-rsv .cal-desk-sheet .cal-detail-title {
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  font-size: 0.95rem;
  color: var(--stats-paper, #f4eee3);
}

.portal-warn-dialog::backdrop {
  background: rgba(4, 3, 8, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.portal-warn-card {
  margin: 0;
  padding: 1.35rem 1.45rem 1.25rem;
  display: grid;
  gap: 0.8rem;
}

.portal-warn-card h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--accent-hot);
}

.portal-warn-card p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--paper-dim);
}

.portal-warn-card .cta {
  justify-self: end;
  margin-top: 0;
}

.portal-warn-kicker {
  margin: 0;
  font-family: var(--font-herald);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(201, 165, 116, 0.88);
}

.portal-warn-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  margin-top: 0.35rem;
  width: 100%;
}

.portal-warn-actions .inbox-tool-btn {
  min-height: 2.35rem;
  padding: 0.45rem 0.95rem;
}

.portal-warn-actions form {
  display: inline-flex;
  margin: 0;
  margin-left: auto;
}

.portal-warn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.35rem;
  padding: 0.45rem 0.95rem;
  border: 1px solid rgba(201, 165, 116, 0.45);
  border-radius: 4px;
  background: transparent;
  color: rgba(232, 214, 184, 0.92);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.portal-warn-secondary:hover,
.portal-warn-secondary:focus-visible {
  border-color: rgba(201, 165, 116, 0.75);
  color: #f2e6d2;
  outline: none;
  cursor: pointer;
}

.portal-warn-card > form {
  display: flex;
  justify-content: flex-end;
  margin: 0;
}

.admin-ban-form {
  max-width: none;
  width: 100%;
}

.admin-ban-dual {
  display: grid;
  gap: 1rem;
  margin: 0 0 1.35rem;
}

@media (min-width: 840px) {
  .admin-ban-dual {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.admin-ban-scope {
  margin: 0 0 0.95rem;
  padding: 0;
  border: 0;
  min-width: 0;
}

.admin-ban-scope legend {
  padding: 0;
  margin: 0 0 0.4rem;
}

.admin-ban-scope-track {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  min-width: 0;
}

.admin-ban-scope-opt {
  position: relative;
  display: block;
  margin: 0;
  cursor: pointer;
  min-width: 0;
}

.admin-ban-scope-opt input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.admin-ban-scope-card {
  display: grid;
  gap: 0.18rem;
  min-height: 3.35rem;
  padding: 0.55rem 0.7rem 0.6rem;
  border: 1px solid rgba(168, 134, 92, 0.32);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.28);
  color: rgba(210, 218, 212, 0.78);
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease,
    color 0.15s ease;
}

.admin-ban-scope-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(232, 239, 233, 0.92);
}

.admin-ban-scope-hint {
  font-size: 0.72rem;
  line-height: 1.3;
  color: rgba(180, 188, 182, 0.62);
}

.admin-ban-scope-opt:hover .admin-ban-scope-card {
  border-color: rgba(201, 165, 116, 0.55);
  background: rgba(168, 134, 92, 0.08);
}

.admin-ban-scope-opt:focus-within .admin-ban-scope-card {
  border-color: rgba(201, 165, 116, 0.78);
  box-shadow: 0 0 0 2px rgba(201, 165, 116, 0.16);
}

.admin-ban-scope-opt input:checked + .admin-ban-scope-card {
  border-color: rgba(201, 165, 116, 0.82);
  background: linear-gradient(180deg, rgba(168, 134, 92, 0.22), rgba(0, 0, 0, 0.34));
  box-shadow:
    inset 0 0 0 1px rgba(201, 165, 116, 0.18),
    0 0 0 1px rgba(201, 165, 116, 0.12);
}

.admin-ban-scope-opt input:checked + .admin-ban-scope-card .admin-ban-scope-title {
  color: #e8d4b0;
}

.admin-ban-scope-opt input:checked + .admin-ban-scope-card .admin-ban-scope-hint {
  color: rgba(210, 196, 168, 0.78);
}

.admin-ban-scope-opt.is-login input:checked + .admin-ban-scope-card {
  border-color: rgba(210, 96, 84, 0.72);
  background: linear-gradient(180deg, rgba(168, 56, 48, 0.28), rgba(0, 0, 0, 0.34));
  box-shadow:
    inset 0 0 0 1px rgba(210, 96, 84, 0.16),
    0 0 0 1px rgba(210, 96, 84, 0.1);
}

.admin-ban-scope-opt.is-login input:checked + .admin-ban-scope-card .admin-ban-scope-title {
  color: #f0c4bc;
}

.admin-ban-scope-opt.is-login input:checked + .admin-ban-scope-card .admin-ban-scope-hint {
  color: rgba(230, 180, 172, 0.78);
}

@media (max-width: 560px) {
  .admin-ban-scope-track {
    grid-template-columns: 1fr;
  }
}

.admin-ban-form.admin-create-form {
  margin-top: 0.65rem;
}

.admin-blacklist-head .admin-panel-head-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 0;
}

.admin-blacklist-head .admin-panel-kicker {
  margin-bottom: 0;
}

.admin-blacklist-head h1 {
  margin: 0 0 0.55rem;
  color: #f4eee3;
}

.admin-blacklist-lede {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  max-width: 42rem;
}

.admin-blacklist-lede-line {
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #e8d4b0;
}

.admin-blacklist-lede-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.4rem;
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(182, 168, 144, 0.78);
}

.admin-blacklist-lede-sep {
  color: rgba(182, 168, 144, 0.4);
  font-weight: 500;
}

.admin-blacklist-open {
  flex-shrink: 0;
  margin: 0;
  min-height: 2.2rem;
  padding: 0.4rem 1rem;
  border: 1px solid rgba(148, 168, 178, 0.48);
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(42, 48, 54, 0.92) 0%, rgba(14, 16, 18, 0.96) 100%);
  color: #d7e2e8;
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(210, 225, 235, 0.1),
    0 1px 0 rgba(0, 0, 0, 0.4);
  transition:
    border-color 0.15s ease,
    color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.admin-blacklist-open:hover,
.admin-blacklist-open:focus-visible {
  border-color: rgba(186, 206, 218, 0.78);
  color: #f0f6fa;
  background:
    linear-gradient(180deg, rgba(58, 68, 76, 0.95) 0%, rgba(18, 22, 26, 0.98) 100%);
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(220, 235, 245, 0.14),
    0 0 0 2px rgba(148, 168, 178, 0.18);
}

.admin-blacklist-submit {
  margin: 0;
  min-width: 10rem;
  min-height: 2.4rem;
  padding: 0.55rem 1.15rem;
  border: 1px solid rgba(168, 134, 92, 0.72);
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(92, 72, 48, 0.98) 0%, rgba(48, 36, 24, 0.98) 100%);
  color: #e8d4b0;
  font-family: var(--font-herald);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(201, 165, 116, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(0, 0, 0, 0.45);
  transition:
    border-color 0.12s ease,
    background 0.12s ease,
    color 0.12s ease,
    box-shadow 0.12s ease;
}

.admin-blacklist-submit:hover,
.admin-blacklist-submit:focus-visible {
  border-color: rgba(201, 165, 116, 0.9);
  color: #f3e6cf;
  background:
    linear-gradient(180deg, rgba(112, 88, 58, 0.98) 0%, rgba(58, 44, 28, 0.98) 100%);
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(201, 165, 116, 0.3),
    0 0 0 2px rgba(201, 165, 116, 0.16);
}

.admin-blacklist-submit:active {
  background:
    linear-gradient(180deg, rgba(58, 44, 28, 0.98) 0%, rgba(40, 30, 20, 0.98) 100%);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.35);
}

.admin-blacklist-dialog {
  width: min(96vw, 56rem);
  max-width: 96vw;
  height: min(calc(100dvh - var(--desk-chrome-clear) - 2.25rem), 42rem);
  max-height: calc(100dvh - var(--desk-chrome-clear) - 2.25rem);
  margin: calc(var(--desk-chrome-clear) + 0.35rem) auto 1rem;
  padding: 0;
  border: 1px solid rgba(168, 134, 92, 0.45);
  border-radius: 4px;
  background: transparent;
  color: inherit;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65);
}

.admin-blacklist-dialog::backdrop {
  background: rgba(4, 4, 6, 0.72);
}

.admin-blacklist-dialog[open] {
  display: flex;
  flex-direction: column;
}

.admin-blacklist-dialog-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: 1rem 1.05rem 1.05rem;
  border: 0;
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(28, 24, 18, 0.98) 0%, rgba(10, 10, 12, 0.98) 100%);
}

.admin-blacklist-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  flex: 0 0 auto;
  margin-bottom: 0.85rem;
}

.admin-blacklist-dialog-title {
  margin: 0.15rem 0 0.2rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--paper);
}

.admin-blacklist-dialog-note {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--paper-dim);
}

.admin-blacklist-dialog-x {
  flex: 0 0 auto;
  margin: 0;
  min-height: 2.1rem;
  padding: 0.35rem 0.85rem;
}

.admin-blacklist-dialog-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding-right: 0.15rem;
}

.admin-blacklist-dialog-body .admin-roster {
  margin: 0;
}

.admin-ban-detail-dialog {
  width: min(96vw, 72rem);
  max-width: 96vw;
  height: min(calc(100dvh - var(--desk-chrome-clear) - 2.25rem), 48rem);
  max-height: calc(100dvh - var(--desk-chrome-clear) - 2.25rem);
  margin-top: calc(var(--desk-chrome-clear) + 0.35rem);
  margin-bottom: 1rem;
  margin-left: max(2vw, calc((100vw - min(96vw, 68rem)) / 2 - 6rem));
  margin-right: max(2vw, calc((100vw - min(96vw, 68rem)) / 2 - 6rem));
  padding: 0;
  border: 1px solid rgba(168, 134, 92, 0.45);
  border-radius: 3px;
  background: #0c0c0e;
  color: inherit;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65);
}

.admin-ban-detail-dialog::backdrop {
  background: rgba(4, 4, 6, 0.72);
}

.admin-ban-detail-dialog[open] {
  display: flex;
  flex-direction: column;
}

.admin-ban-detail-dialog .admin-ban-detail {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0.75rem 0.85rem 0.9rem;
  border: 0;
  overflow: hidden;
  background: transparent;
}

.admin-ban-detail-dialog .admin-stats-holdings-head {
  margin-bottom: 0.15rem;
}

.admin-ban-detail-dialog .admin-stats-card-title {
  word-break: break-word;
}

.admin-ban-detail-dialog .admin-stats-holdings-filters-fold {
  flex: 0 0 auto;
  overflow: hidden;
}

.admin-ban-detail-dialog .admin-ban-dual--holdings {
  margin: 0;
  gap: 0.55rem;
  /* Inset so each panel’s full border (incl. bottom) isn’t flush/eaten by the fold edge */
  padding: 0.55rem 0.6rem 0.65rem;
  box-sizing: border-box;
}

.admin-ban-detail-dialog .admin-ban-panel {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0.55rem 0.6rem 0.6rem;
  border: 1px solid var(--stats-line, rgba(168, 134, 92, 0.45));
  border-bottom: 1px solid var(--stats-line, rgba(168, 134, 92, 0.45));
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.28);
  background-clip: padding-box;
  box-sizing: border-box;
  max-width: none;
  width: 100%;
}

.admin-ban-detail-dialog .admin-ban-panel-kicker {
  margin: 0;
  font-family: var(--font-herald);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stats-gold, var(--accent));
}

.admin-ban-detail-dialog .admin-ban-panel-field {
  display: grid;
  gap: 0.28rem;
  margin: 0;
  width: 100%;
}

.admin-ban-detail-dialog .admin-ban-panel-field > span {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stats-muted, rgba(182, 168, 144, 0.78));
}

.admin-ban-detail-dialog .admin-ban-panel-field textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 4.2rem;
  margin: 0;
  padding: 0.45rem 0.55rem;
  resize: vertical;
  border: 1px solid rgba(168, 134, 92, 0.38);
  border-radius: 2px;
  background: var(--stats-panel-deep, rgba(8, 8, 10, 0.92));
  color: var(--stats-paper, var(--paper));
  font: inherit;
  font-size: 0.78rem;
  box-shadow: none;
}

.admin-ban-detail-dialog .admin-ban-panel-field textarea:focus {
  outline: none;
  border-color: rgba(201, 165, 116, 0.7);
  box-shadow: 0 0 0 2px rgba(201, 165, 116, 0.14);
}

.admin-ban-detail-dialog .admin-ban-panel-foot {
  display: flex;
  justify-content: flex-end;
  margin: 0.1rem 0 0;
}

.admin-ban-detail-dialog .admin-ban-panel-foot .admin-stats-go {
  min-height: 1.85rem;
  min-width: 8.5rem;
}

/* Ban = coral danger; Unban = sage restore — beat admin gold .admin-stats-go */
.admin-page .admin-ban-detail-dialog .admin-stats-go.admin-ban-go--ban,
.admin-ban-detail-dialog .admin-stats-go.admin-ban-go--ban {
  border-color: rgba(196, 92, 78, 0.72);
  background: rgba(28, 10, 10, 0.92);
  color: #f0b8ae;
}

.admin-page .admin-ban-detail-dialog .admin-stats-go.admin-ban-go--ban:hover,
.admin-page .admin-ban-detail-dialog .admin-stats-go.admin-ban-go--ban:focus-visible,
.admin-ban-detail-dialog .admin-stats-go.admin-ban-go--ban:hover,
.admin-ban-detail-dialog .admin-stats-go.admin-ban-go--ban:focus-visible {
  border-color: rgba(220, 120, 100, 0.9);
  background: rgba(48, 14, 12, 0.95);
  color: #f8d4cc;
  filter: none;
}

.admin-page .admin-ban-detail-dialog .admin-stats-go.admin-ban-go--unban,
.admin-ban-detail-dialog .admin-stats-go.admin-ban-go--unban {
  border-color: rgba(110, 168, 130, 0.72);
  background: rgba(8, 18, 12, 0.92);
  color: #b6dcc4;
}

.admin-page .admin-ban-detail-dialog .admin-stats-go.admin-ban-go--unban:hover,
.admin-page .admin-ban-detail-dialog .admin-stats-go.admin-ban-go--unban:focus-visible,
.admin-ban-detail-dialog .admin-stats-go.admin-ban-go--unban:hover,
.admin-ban-detail-dialog .admin-stats-go.admin-ban-go--unban:focus-visible {
  border-color: rgba(140, 196, 158, 0.9);
  background: rgba(12, 28, 18, 0.95);
  color: #d4efe0;
  filter: none;
}

.admin-ban-detail-dialog .admin-stats-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.admin-ban-detail-dialog .admin-ban-events-table td {
  vertical-align: top;
}

.admin-ban-detail-dialog .admin-ban-event-type {
  font-family: var(--stats-mono, var(--font-mono, monospace));
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--stats-gold, var(--accent-hot));
  margin-right: 0.35rem;
}

.admin-ban-detail-dialog .admin-ban-event-actor {
  font-size: 0.72rem;
  color: var(--stats-muted, var(--paper-dim));
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.admin-ban-detail-dialog .admin-ban-event-reason {
  font-size: 0.78rem;
  color: var(--stats-paper, var(--paper-dim));
  line-height: 1.35;
}

.admin-ban-detail-dialog .admin-ban-event-when {
  font-size: 0.68rem;
  white-space: nowrap;
  color: var(--stats-muted, var(--paper-dim));
}

.admin-ban-detail-dialog .admin-ban-detail-empty {
  margin: 0.35rem 0 0;
}

.admin-ban-creds {
  width: 100%;
}

.admin-form.admin-ban-form textarea,
.admin-ban-form textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 5.5rem;
  resize: none;
  font: inherit;
  color: inherit;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(168, 134, 92, 0.38);
  border-bottom-width: 3px;
  border-bottom-color: rgba(0, 0, 0, 0.62);
  border-radius: 4px;
  padding: 0.65rem 0.75rem;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.admin-ban-form textarea:focus {
  outline: none;
  border-color: rgba(201, 165, 116, 0.75);
  box-shadow: 0 0 0 2px rgba(201, 165, 116, 0.18);
}

.admin-ban-form textarea::placeholder {
  color: rgba(232, 239, 233, 0.28);
}

.admin-ban-form .user-combo,
.admin-ban-form .user-combo-shell,
.admin-ban-form .user-combo-input {
  width: 100%;
}

.admin-ban-form .user-combo-input {
  border: 1px solid rgba(168, 134, 92, 0.38);
  border-bottom-width: 3px;
  border-bottom-color: rgba(0, 0, 0, 0.62);
  min-height: 2.45rem;
  background: rgba(0, 0, 0, 0.28);
}

.admin-ban-form .user-combo-input:focus {
  outline: none;
  border-color: rgba(201, 165, 116, 0.75);
  box-shadow: 0 0 0 2px rgba(201, 165, 116, 0.18);
}

.hub-book-form {
  margin: 0.65rem 0 1.25rem;
  max-width: none;
  width: 100%;
  gap: 0.75rem;
}

.hub-settings-form {
  margin: 0;
  max-width: 36rem;
  width: 100%;
}

.hub-settings-creds {
  display: grid;
  gap: 0.7rem;
}

.hub-settings-account {
  display: grid;
  gap: 0.35rem;
  margin: 0 0 0.15rem;
  padding: 0 0 0.65rem;
  border-bottom: 1px solid var(--stats-line-soft, rgba(168, 134, 92, 0.14));
}

.hub-settings-account-id {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
  margin: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--stats-paper, var(--paper));
  font-family: var(--stats-mono, ui-monospace, monospace);
  font-size: 0.8rem;
}

.hub-settings-account-id strong {
  font-weight: 700;
  word-break: break-word;
}

.hub-settings-account-label {
  flex: 0 0 auto;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stats-gold-dim, rgba(168, 134, 92, 0.78));
}

.admin-stage:has(#panel-settings.is-active:not([hidden])) {
  overflow: hidden;
}

#panel-settings.hub-panel.is-active {
  display: flex;
  flex-direction: column;
  height: calc(100% - 0.35rem);
  max-height: calc(100% - 0.35rem);
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
  color: var(--stats-paper);
  font-family: var(--stats-mono);
}

#panel-settings .hub-settings-roster-head,
#panel-settings .login-alert {
  flex: 0 0 auto;
}

#panel-settings .hub-settings-roster-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem 1.25rem;
  margin-bottom: 0.55rem;
}

#panel-settings .hub-settings-roster-head .admin-panel-kicker {
  margin: 0;
  font-family: var(--font-herald);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stats-gold);
}

#panel-settings .hub-settings-lede {
  margin: 0;
  text-align: right;
}

#panel-settings .hub-settings-lede .admin-sessions-count {
  font-family: var(--stats-mono);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--stats-gold);
  text-transform: none;
  letter-spacing: 0.02em;
}

#panel-settings .hub-settings-lede .admin-sessions-lede-copy {
  display: block;
  margin-top: 0.12rem;
  font-family: var(--stats-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stats-muted);
}

#panel-settings .hub-settings-book {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  margin-top: 0.15rem;
  border: 1px solid var(--stats-line-soft);
  border-radius: 2px;
  background: var(--stats-panel);
  box-shadow: none;
  overflow: hidden;
}

#panel-settings .hub-settings-book-inner {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0.75rem 0.85rem 0.95rem;
  scrollbar-width: none;
}

#panel-settings .hub-settings-book-inner::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

#panel-settings .hub-settings-creds .admin-create-section {
  margin: 0;
  font-family: var(--font-herald);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stats-gold);
}

#panel-settings .hub-settings-form .login-label {
  font-family: var(--stats-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stats-gold-dim);
}

#panel-settings .hub-settings-form .pw-field input,
#panel-settings .hub-settings-form .login-field input {
  border: 1px solid var(--stats-line);
  border-radius: 1px;
  background: var(--stats-detail);
  color: var(--stats-paper);
  font-family: var(--stats-mono);
  font-size: 0.78rem;
}

#panel-settings .hub-settings-form .pw-toggle {
  border: 1px solid var(--stats-line);
  border-radius: 1px;
  background: var(--stats-detail);
  color: var(--stats-muted);
}

#panel-settings .hub-settings-form .field-hint {
  font-family: var(--stats-mono);
  color: var(--stats-muted);
}

#panel-settings .hub-settings-foot-note {
  font-family: var(--stats-mono);
  color: var(--stats-muted);
}

.hub-settings-rules {
  list-style: none;
  margin: 0 0 0.15rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem 0.65rem;
}

#panel-create-user .admin-create-rules {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0.15rem 0 0.85rem;
}

#panel-create-user .admin-create-submit:disabled,
#panel-create-user .admin-create-submit[aria-disabled="true"] {
  opacity: 0.42;
  cursor: not-allowed;
  filter: grayscale(0.25);
}

#panel-settings .hub-settings-rule {
  font-family: var(--stats-mono);
  color: var(--stats-muted);
}

.hub-settings-rule {
  position: relative;
  margin: 0;
  padding: 0.2rem 0.15rem 0.2rem 1.05rem;
  font-size: 0.72rem;
  line-height: 1.3;
  color: rgba(197, 212, 200, 0.55);
  transition: color 0.15s ease;
}

.hub-settings-rule::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  border: 1px solid rgba(168, 134, 92, 0.45);
  background: transparent;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.hub-settings-rule.is-met {
  color: #a8d5b5;
}

.hub-settings-rule.is-met::before {
  border-color: rgba(168, 213, 181, 0.85);
  background: rgba(168, 213, 181, 0.75);
  box-shadow: 0 0 0 2px rgba(168, 213, 181, 0.12);
}

.hub-settings-rule.is-unmet::before {
  border-color: rgba(168, 134, 92, 0.4);
}

@media (max-width: 560px) {
  .hub-settings-rules {
    grid-template-columns: 1fr;
  }
}

.pw-field {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
  gap: 0.4rem;
}

.hub-settings-form .pw-field input {
  min-width: 0;
  width: 100%;
}

.pw-toggle {
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.45rem;
  min-width: 2.45rem;
  padding: 0;
  border: 1px solid rgba(168, 134, 92, 0.38);
  border-radius: 4px;
  background: rgba(8, 10, 12, 0.55);
  color: var(--paper-dim);
  cursor: pointer;
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}

.pw-toggle:hover,
.pw-toggle[aria-pressed="true"] {
  color: var(--accent);
  border-color: rgba(201, 165, 116, 0.65);
  background: rgba(201, 165, 116, 0.08);
}

.pw-eye {
  display: block;
  width: 1.15rem;
  height: 1.15rem;
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}

.pw-eye--open {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

.pw-eye--shut {
  display: none;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.6 10.6a3 3 0 004.2 4.2'/%3E%3Cpath d='M9.9 5.1A10.4 10.4 0 0112 5c6.5 0 10 7 10 7a17.3 17.3 0 01-3.2 4.1'/%3E%3Cpath d='M6.1 6.1C4 7.8 2.5 10.1 2 12c0 0 3.5 7 10 7 1.4 0 2.7-.3 3.9-.8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.6 10.6a3 3 0 004.2 4.2'/%3E%3Cpath d='M9.9 5.1A10.4 10.4 0 0112 5c6.5 0 10 7 10 7a17.3 17.3 0 01-3.2 4.1'/%3E%3Cpath d='M6.1 6.1C4 7.8 2.5 10.1 2 12c0 0 3.5 7 10 7 1.4 0 2.7-.3 3.9-.8'/%3E%3C/svg%3E");
}

.pw-toggle[aria-pressed="true"] .pw-eye--open {
  display: none;
}

.pw-toggle[aria-pressed="true"] .pw-eye--shut {
  display: block;
}

.hub-settings-foot {
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.hub-settings-foot-note {
  margin: 0;
  flex: 1 1 10rem;
  font-size: 0.72rem;
  line-height: 1.4;
  color: rgba(197, 212, 200, 0.5);
}

.hub-settings-form .admin-create-submit:disabled,
.hub-settings-form .admin-create-submit[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

.hub-settings-form .admin-create-submit.is-busy {
  opacity: 0.7;
  cursor: wait;
}

.hub-book-creds {
  width: 100%;
  gap: 0.55rem;
}

.hub-book-creds > .login-field {
  margin: 0;
  gap: 0.28rem;
}

.hub-book-creds [data-user-combo-hint] {
  display: none;
}

.hub-book-form .cal,
.admin-grant-form .cal {
  width: 100%;
  max-width: none;
}

#panel-reservations .hub-lede,
#panel-grant-rsv .lede {
  max-width: none;
  width: 100%;
}

.admin-stage:has(#panel-reservations.is-active:not([hidden])) {
  overflow: hidden;
}

#panel-reservations.hub-panel.is-active {
  display: flex;
  flex-direction: column;
  /* Lock the Seat panel; only Your reservations scrolls inside. */
  height: calc(100% - 0.35rem);
  max-height: calc(100% - 0.35rem);
  min-height: 0;
  overflow: hidden;
  align-self: stretch;
  width: 100%;
  box-sizing: border-box;
}

#panel-reservations .hub-seat-roster-head,
#panel-reservations .hub-seat-board-note,
#panel-reservations .hub-seat-slot-note {
  flex: 0 0 auto;
}

#panel-reservations .hub-seat-roster-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.55rem 1.25rem;
  margin-bottom: 0.75rem;
}

#panel-reservations .hub-seat-roster-head .admin-panel-kicker {
  margin: 0 0 0.3rem;
}

#panel-reservations .hub-seat-roster-head-main {
  flex: 1 1 18rem;
  min-width: 0;
  max-width: min(52rem, calc(100% - 8rem));
}

#panel-reservations .hub-seat-head-rules {
  margin: 0.7rem 0 0;
  max-width: min(52rem, 100%);
  padding: 0.05rem 0 0.05rem 0.85rem;
  border: 0;
  border-left: 2px solid var(--accent, #a8865c);
  background: transparent;
  font-family: var(--stats-mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--stats-muted, rgba(197, 212, 200, 0.58));
}

#panel-reservations .hub-seat-lede {
  margin: 0;
  text-align: right;
}

#panel-reservations .hub-seat-lede .admin-sessions-count {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--stats-gold, var(--accent-hot));
  text-transform: none;
  letter-spacing: 0.02em;
}

#panel-reservations .hub-seat-lede .admin-sessions-lede-copy {
  display: block;
  margin-top: 0.12rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stats-muted);
}

#panel-reservations .hub-seat-lede.is-booked .admin-sessions-count,
#panel-reservations .hub-seat-lede.is-booked .admin-sessions-lede-copy {
  color: #7ecfc0;
}

#panel-reservations .hub-seat-board-note {
  margin: 0.9rem 0 0;
  max-width: 38rem;
  padding: 0.05rem 0 0.15rem 0.85rem;
  border: 0;
  border-left: 2px solid var(--accent, #a8865c);
  background: transparent;
  font-family: var(--stats-mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 0.74rem;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--stats-muted, rgba(197, 212, 200, 0.58));
}

#panel-reservations .hub-seat-board-note-lead {
  display: block;
  margin: 0 0 0.28rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--stats-paper, rgba(232, 239, 233, 0.92));
}

#panel-reservations .hub-seat-board-note-path {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stats-gold-dim, rgba(168, 134, 92, 0.78));
}

#panel-reservations .hub-seat-slot-note {
  max-width: min(56rem, 100%);
}

.rsv-page-noshow-note {
  margin: 0.75rem 0 0;
  max-width: min(56rem, 100%);
  padding: 0.05rem 0 0.15rem 0.85rem;
  border: 0;
  border-left: 2px solid var(--accent, #a8865c);
  background: transparent;
  font-family: var(--stats-mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 0.74rem;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--stats-muted, rgba(197, 212, 200, 0.58));
}

.rsv-page-noshow-note .hub-seat-board-note-lead {
  display: block;
  margin: 0 0 0.28rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--stats-paper, rgba(232, 239, 233, 0.92));
}

#panel-reservations .hub-seat-book {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--stats-line);
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(28, 26, 22, 0.55) 0%, var(--stats-ink) 100%);
  box-shadow:
    inset 0 0 0 1px var(--stats-line-soft),
    0 1px 0 rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

/* Admin board — hug calendar + note; no empty stretch under the border */
#panel-reservations .hub-seat-book--board {
  flex: 0 0 auto;
  height: auto;
  max-height: none;
  min-height: 0;
  overflow: visible;
  /* Drop outer book frame — panel already frames; avoids nested empty box feel */
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#panel-reservations .hub-seat-book--board .hub-seat-book-inner {
  flex: 0 0 auto;
  overflow: visible;
  min-height: 0;
  padding: 0;
}

#panel-reservations .hub-seat-book--board .cal {
  margin: 0 0 0.55rem;
}

#panel-reservations .hub-seat-book--board .hub-seat-board-note {
  margin: 0.35rem 0 0;
}

#panel-reservations .hub-seat-book-inner {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overscroll-behavior: contain;
  padding: 0.65rem 0.75rem 0.85rem;
  scrollbar-width: none;
}

#panel-reservations .hub-seat-book-inner > .hub-book-form,
#panel-reservations .hub-seat-book-inner > .hub-seat-rsv-head {
  flex: 0 0 auto;
}

#panel-reservations .hub-seat-book-inner::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

#panel-reservations .hub-seat-book-sub {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stats-muted, rgba(182, 168, 144, 0.62));
}

#panel-reservations .hub-seat-book-sub--foot {
  margin: 0.85rem 0 0;
  padding: 0;
  text-align: left;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 0.78rem;
}

#panel-reservations .hub-seat-rsv-head {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin: 0.85rem 0 0.55rem;
  padding-top: 0.85rem;
  width: 100%;
  border-top: 1px solid rgba(168, 134, 92, 0.38);
}

#panel-reservations .hub-seat-rsv-title {
  margin: 0;
}

#panel-reservations .hub-seat-rsv-count {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0;
  white-space: nowrap;
}

#panel-reservations .hub-seat-rsv-count-num {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--stats-gold, var(--accent-hot));
  letter-spacing: 0.02em;
}

#panel-reservations .hub-seat-rsv-count-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stats-muted);
}

#panel-reservations .hub-seat-rsv-count.is-booked .hub-seat-rsv-count-num,
#panel-reservations .hub-seat-rsv-count.is-booked .hub-seat-rsv-count-label {
  color: #7ecfc0;
}

#panel-reservations .hub-seat-rsv-book {
  display: block;
  flex: 0 1 auto;
  align-self: stretch;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  /* Box hugs records; scroll only when list exceeds this cap. */
  height: auto;
  max-height: min(12.5rem, 28vh);
  min-height: 0;
  border: 1px solid rgba(120, 118, 110, 0.42);
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(22, 22, 26, 0.92) 0%, rgba(8, 8, 10, 0.98) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    0 1px 0 rgba(0, 0, 0, 0.35);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(168, 134, 92, 0.55) transparent;
}

#panel-reservations .hub-seat-rsv-book::-webkit-scrollbar {
  width: 0.45rem;
}

#panel-reservations .hub-seat-rsv-book::-webkit-scrollbar-thumb {
  background: rgba(168, 134, 92, 0.45);
  border-radius: 999px;
}

#panel-reservations .hub-seat-rsv-book .rsv-roster {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

#panel-reservations .hub-seat-rsv-book .rsv-roster-item {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.75rem 0.85rem;
  border: 0;
  border-bottom: 1px solid rgba(120, 118, 110, 0.28);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#panel-reservations .hub-seat-rsv-book .rsv-roster-item:last-child {
  border-bottom: 0;
}

/* Active seat: green row. Past seats: neutral / warm — not shared green. */
#panel-reservations .hub-seat-rsv-book .rsv-roster-item:has(.tag--scheduled) {
  background: rgba(24, 72, 68, 0.42);
  border-bottom-color: rgba(64, 168, 152, 0.35);
}

#panel-reservations .hub-seat-rsv-book .rsv-roster-item:has(.tag--scheduled):hover,
#panel-reservations .hub-seat-rsv-book .rsv-roster-item:has(.tag--scheduled):focus-within {
  background: rgba(36, 96, 88, 0.5);
}

#panel-reservations .hub-seat-rsv-book .rsv-roster-item:has(.tag--used),
#panel-reservations .hub-seat-rsv-book .rsv-roster-item:has(.tag--completed),
#panel-reservations .hub-seat-rsv-book .rsv-roster-item:has(.tag--cancelled),
#panel-reservations .hub-seat-rsv-book .rsv-roster-item:has(.tag--past) {
  background: rgba(18, 20, 24, 0.55);
  border-bottom-color: rgba(120, 130, 145, 0.22);
}

#panel-reservations .hub-seat-rsv-book .rsv-roster-item:has(.tag--used):hover,
#panel-reservations .hub-seat-rsv-book .rsv-roster-item:has(.tag--completed):hover,
#panel-reservations .hub-seat-rsv-book .rsv-roster-item:has(.tag--cancelled):hover,
#panel-reservations .hub-seat-rsv-book .rsv-roster-item:has(.tag--past):hover,
#panel-reservations .hub-seat-rsv-book .rsv-roster-item:has(.tag--used):focus-within,
#panel-reservations .hub-seat-rsv-book .rsv-roster-item:has(.tag--completed):focus-within,
#panel-reservations .hub-seat-rsv-book .rsv-roster-item:has(.tag--cancelled):focus-within,
#panel-reservations .hub-seat-rsv-book .rsv-roster-item:has(.tag--past):focus-within {
  background: rgba(36, 40, 48, 0.72);
}

#panel-reservations .hub-seat-rsv-book .rsv-roster-item.is-no-show,
#panel-reservations .hub-seat-rsv-book .rsv-roster-item:has(.tag--no-show) {
  background: rgba(48, 22, 16, 0.45);
  border-bottom-color: rgba(196, 110, 78, 0.28);
}

#panel-reservations .hub-seat-rsv-book .rsv-roster-item.is-no-show:hover,
#panel-reservations .hub-seat-rsv-book .rsv-roster-item.is-no-show:focus-within,
#panel-reservations .hub-seat-rsv-book .rsv-roster-item:has(.tag--no-show):hover,
#panel-reservations .hub-seat-rsv-book .rsv-roster-item:has(.tag--no-show):focus-within {
  background: rgba(72, 32, 22, 0.55);
}

#panel-reservations .hub-seat-rsv-book .rsv-roster-item:has(.tag--scheduled) .rsv-when {
  color: #d4f5ee;
}

#panel-reservations .hub-seat-rsv-book .rsv-when {
  color: #c8c4bc;
}

#panel-reservations .hub-seat-rsv-book .rsv-roster-item.is-no-show .rsv-when,
#panel-reservations .hub-seat-rsv-book .rsv-roster-item:has(.tag--no-show) .rsv-when {
  color: #e8c4b4;
}

/* Only the active seat stays teal; past statuses use distinct muted colors. */
#panel-reservations .hub-seat-rsv-book .tag.tag--scheduled {
  color: #7ecfc0;
  border-color: rgba(64, 168, 152, 0.55);
  background: rgba(10, 28, 26, 0.72);
}

#panel-reservations .hub-seat-rsv-book .tag.tag--used,
#panel-reservations .hub-seat-rsv-book .tag.tag--completed {
  color: #b8c0c8;
  border-color: rgba(140, 150, 165, 0.55);
  background: rgba(22, 26, 32, 0.88);
}

#panel-reservations .hub-seat-rsv-book .tag.tag--cancelled,
#panel-reservations .hub-seat-rsv-book .tag.tag--past {
  color: #9a958c;
  border-color: rgba(120, 112, 100, 0.5);
  background: rgba(28, 26, 22, 0.88);
}

#panel-reservations .hub-seat-rsv-book .tag.tag--no-show {
  color: #f0b090;
  border-color: rgba(196, 110, 78, 0.7);
  background: rgba(48, 22, 16, 0.88);
}

#panel-reservations .hub-seat-rsv-book .rsv-roster-item:has(.tag--used) .rsv-when,
#panel-reservations .hub-seat-rsv-book .rsv-roster-item:has(.tag--completed) .rsv-when,
#panel-reservations .hub-seat-rsv-book .rsv-roster-item:has(.tag--cancelled) .rsv-when,
#panel-reservations .hub-seat-rsv-book .rsv-roster-item:has(.tag--past) .rsv-when {
  color: #a8b0b8;
}

/* Live slot countdown — only visible after the booked hour starts */
.rsv-slot-countdown {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0.02rem;
  margin-left: 0.2rem;
  padding: 0.1rem 0.35rem 0.12rem;
  border: 1px solid rgba(201, 165, 116, 0.55);
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(48, 36, 18, 0.92) 0%, rgba(16, 14, 12, 0.96) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.08);
  vertical-align: middle;
  line-height: 1;
  min-width: 4.4rem;
}

.rsv-slot-countdown[hidden] {
  display: none !important;
}

.rsv-slot-countdown-kicker {
  font-family: var(--stats-mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(201, 165, 116, 0.78);
  line-height: 1.05;
}

.rsv-slot-countdown-clock {
  font-family: var(--stats-mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.05;
  color: #f3e6c8;
  font-variant-numeric: tabular-nums;
  align-self: flex-end;
  text-align: right;
}

.rsv-slot-countdown.is-urgent {
  border-color: rgba(220, 120, 96, 0.7);
  background:
    linear-gradient(180deg, rgba(64, 28, 20, 0.95) 0%, rgba(22, 12, 10, 0.98) 100%);
}

.rsv-slot-countdown.is-urgent .rsv-slot-countdown-kicker {
  color: rgba(240, 160, 130, 0.9);
}

.rsv-slot-countdown.is-urgent .rsv-slot-countdown-clock {
  color: #ffd0bc;
}

#panel-reservations .hub-seat-rsv-book .rsv-roster-item.is-slot-live {
  background: rgba(28, 84, 76, 0.55);
}

#panel-reservations .hub-seat-rsv-book .rsv-roster-main {
  align-items: center;
}

#panel-reservations .hub-seat-rsv-empty {
  margin: 0;
  padding: 1rem 0.95rem;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: rgba(140, 180, 172, 0.72);
}

#panel-reservations .hub-book-form {
  margin: 0;
}

/* Shared compact calendar + day popup (grant + main book) */
.admin-grant-form .cal--compact .cal-months,
.hub-book-form .cal--compact .cal-months {
  width: 100%;
}

.meet-composer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  width: 100%;
}

.meet-skip-form {
  margin: 0;
}

.meet-skip-walkthrough {
  appearance: none;
  border: 2px dashed rgba(196, 90, 78, 0.85);
  background: rgba(90, 22, 18, 0.45);
  color: #f0b4aa;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.72rem;
  padding: 0.55rem 0.85rem;
  border-radius: 0.2rem;
  cursor: pointer;
  box-shadow: none;
}

.meet-skip-walkthrough:hover,
.meet-skip-walkthrough:focus-visible {
  background: rgba(120, 30, 24, 0.7);
  color: #ffd2c8;
  outline: 2px solid rgba(232, 130, 118, 0.55);
  outline-offset: 2px;
}

.cal-day.has-mine {
  border-color: rgba(64, 168, 152, 0.85);
  background:
    linear-gradient(165deg, rgba(24, 110, 98, 0.62) 0%, rgba(8, 24, 22, 0.96) 100%);
  color: #c8efe6;
  box-shadow: inset 0 0 0 1px rgba(90, 190, 172, 0.28);
}

/* Yours = teal (confirmed / ownership). Others = warm pewter (occupied metal; matches board, not purple). */
.cal-day.is-open.has-mine:not(.is-full):not(.has-full),
.cal-day.has-mine:not(.is-full):not(.has-full) {
  border-color: rgba(72, 186, 168, 0.95);
  background:
    linear-gradient(165deg, rgba(28, 120, 108, 0.74) 0%, rgba(6, 26, 24, 0.97) 100%);
  color: #d4f5ee;
  box-shadow:
    inset 0 0 0 1px rgba(110, 210, 192, 0.32),
    0 0 0 1px rgba(48, 140, 128, 0.28);
  opacity: 1;
  filter: none;
}

.cal-day.is-open.has-mine:not(.is-full):not(.has-full) .cal-day-num,
.cal-day.has-mine:not(.is-full):not(.has-full) .cal-day-num {
  color: #e8fff8;
  font-weight: 800;
}

.cal-day-dot--mine,
.cal-day.has-mine .cal-day-dot {
  color: #9ee8d8;
  font-weight: 800;
}

.cal-day.is-open.has-bookings:not(.has-mine):not(.is-full),
.cal-day.has-bookings:not(.has-mine):not(.is-full) {
  border-color: rgba(148, 136, 118, 0.88);
  background:
    linear-gradient(165deg, rgba(78, 70, 58, 0.78) 0%, rgba(16, 14, 12, 0.97) 100%);
  color: #ddd6cc;
  box-shadow: inset 0 0 0 1px rgba(180, 168, 148, 0.28);
  opacity: 1;
  filter: none;
}

.cal-day.is-open.has-bookings:not(.has-mine):not(.is-full) .cal-day-num,
.cal-day.has-bookings:not(.has-mine):not(.is-full) .cal-day-num {
  color: #ebe4da;
  font-weight: 700;
}

.cal-day.has-bookings:not(.has-mine) .cal-day-dot {
  color: #b0a89c;
  font-weight: 700;
}

.portal-main .desk-stage {
  width: 100%;
  max-width: min(56rem, 100%);
  margin-inline: auto;
}

/* Legacy corner (unused on start; keep for safety) */
.portal-corner {
  position: fixed;
  top: 1.15rem;
  right: 1.15rem;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.12rem;
  min-width: 7.5rem;
  padding: 0.65rem 0.85rem 0.6rem;
  border: 1px solid rgba(201, 165, 116, 0.55);
  border-bottom-width: 3px;
  border-bottom-color: #4a3c1c;
  border-radius: 4px;
  background:
    linear-gradient(165deg, rgba(56, 46, 24, 0.72) 0%, rgba(12, 16, 14, 0.95) 100%);
  color: var(--accent-hot);
  text-decoration: none;
  text-align: right;
  box-shadow:
    inset 0 1px 0 rgba(201, 165, 116, 0.2),
    0 4px 0 rgba(0, 0, 0, 0.4),
    0 10px 18px rgba(0, 0, 0, 0.28);
  transition:
    transform 0.08s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.portal-corner:hover {
  color: #f3df9a;
  border-color: rgba(243, 223, 154, 0.85);
  transform: translateY(-1px);
}

.portal-corner:active {
  transform: translateY(2px);
  border-bottom-width: 1px;
}

.portal-corner-kicker {
  font-family: var(--font-herald);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.portal-corner-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.hero {
  width: 100%;
  animation: rise 0.7s ease-out both;
}

.brand-mark {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 700;
  margin: 0 0 0.45rem;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--accent-hot);
  animation: rise 0.8s 0.05s ease-out both;
}

.start-page .brand-mark {
  margin-bottom: 0.45rem;
}

h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 3.5vw, 2.1rem);
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
  line-height: 1.2;
}

.start-headline-row {
  position: relative;
  display: block;
  margin: 0 0 0.75rem;
  max-width: min(48rem, 100%);
  /* Reserve chip width so the title never sits under Explore. */
  padding-right: calc(min(14.5rem, 42vw) + 1.1rem);
}

.start-headline-row > h1 {
  margin: 0;
  min-width: 0;
  /* Row height follows the title alone — Explore sits independently. */
  max-width: 100%;
}

.lede {
  color: var(--paper-dim);
  margin: 0 0 2rem;
  max-width: 34rem;
}

/* Special-mode switch — title once; OFF/ON + sliding diamond; hint inside at bottom */
.start-explore-chip {
  --explore-edge: rgba(94, 231, 255, 0.62);
  --explore-ink: #d8f8ff;
  --explore-gem: 0.72rem;
  --explore-slide: 0.38s cubic-bezier(0.22, 0.9, 0.28, 1);
  flex: 0 0 auto;
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0.45rem 0.75rem 0.55rem;
  width: min(14.5rem, 100%);
  border: 1px solid var(--explore-edge);
  border-radius: 1.15rem;
  color: var(--explore-ink);
  font: inherit;
  font-family: var(--font-body);
  cursor: pointer;
  white-space: nowrap;
  background:
    linear-gradient(
      135deg,
      rgba(94, 231, 255, 0.22) 0%,
      rgba(12, 36, 48, 0.94) 38%,
      rgba(6, 14, 22, 0.98) 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(180, 245, 255, 0.22),
    inset 0 -1px 0 rgba(0, 40, 55, 0.45),
    0 0 0 1px rgba(94, 231, 255, 0.14),
    0 0 22px rgba(64, 210, 240, 0.28),
    0 0 40px rgba(30, 140, 180, 0.12),
    0 5px 0 rgba(0, 0, 0, 0.48);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.2s ease,
    transform 0.12s ease;
}

.start-explore-chip-kicker {
  font-family: var(--font-herald);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(160, 235, 250, 0.82);
  text-shadow: 0 0 10px rgba(94, 231, 255, 0.35);
}

.start-explore-chip-rail {
  display: grid;
  grid-template-columns: 1.6rem minmax(3.4rem, 1fr) 1.6rem;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
}

.start-explore-chip-side {
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  color: rgba(170, 220, 235, 0.42);
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.start-explore-chip-side--off {
  text-align: left;
}

.start-explore-chip-side--on {
  text-align: right;
}

.start-explore-chip-track {
  position: relative;
  height: 1.35rem;
  border-radius: 999px;
  border: 1px solid rgba(94, 231, 255, 0.28);
  background:
    linear-gradient(180deg, rgba(8, 28, 38, 0.95) 0%, rgba(4, 12, 18, 0.98) 100%);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.55);
}

.start-explore-chip-gem {
  position: absolute;
  top: 50%;
  left: 0.28rem;
  width: var(--explore-gem);
  height: var(--explore-gem);
  margin-top: calc(var(--explore-gem) / -2);
  border: 1px solid rgba(180, 245, 255, 0.95);
  background:
    linear-gradient(145deg, #b8f7ff 0%, #3dd5f0 42%, #147a96 100%);
  box-shadow:
    0 0 10px rgba(94, 231, 255, 0.75),
    0 0 18px rgba(64, 200, 230, 0.35);
  transform: rotate(45deg);
  transition:
    left var(--explore-slide),
    box-shadow 0.2s ease,
    transform var(--explore-slide);
  pointer-events: none;
}

.start-explore-chip-hint {
  display: block;
  margin: 0;
  padding: 0.05rem 0.15rem 0;
  font-size: 0.66rem;
  font-weight: 450;
  letter-spacing: 0.01em;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
  color: rgba(170, 220, 235, 0.58);
}

.start-explore-wrap {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: grid;
  gap: 0.35rem;
  justify-items: stretch;
  width: min(14.5rem, 42vw);
  /* Chip top lines up with the title; note hangs below without stretching the row. */
  pointer-events: none;
}

.start-explore-wrap .start-explore-chip {
  width: 100%;
  pointer-events: auto;
}

.start-explore-rank-note {
  margin: 0;
  padding: 0 0.35rem;
  max-width: 22rem;
  font-size: 0.62rem;
  font-weight: 450;
  letter-spacing: 0.01em;
  line-height: 1.35;
  text-align: center;
  color: rgba(170, 220, 235, 0.52);
  pointer-events: none;
}

.start-explore-chip:hover {
  --explore-edge: rgba(122, 240, 255, 0.9);
  border-color: var(--explore-edge);
  box-shadow:
    inset 0 1px 0 rgba(200, 250, 255, 0.3),
    inset 0 -1px 0 rgba(0, 40, 55, 0.4),
    0 0 0 1px rgba(94, 231, 255, 0.28),
    0 0 28px rgba(80, 220, 255, 0.42),
    0 0 48px rgba(40, 160, 200, 0.18),
    0 5px 0 rgba(0, 0, 0, 0.48);
}

.start-explore-chip:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 1px 0 rgba(180, 245, 255, 0.18),
    0 0 0 1px rgba(94, 231, 255, 0.22),
    0 0 18px rgba(64, 210, 240, 0.3),
    0 2px 0 rgba(0, 0, 0, 0.48);
}

.start-explore-chip-side--off {
  color: rgba(200, 248, 255, 0.92);
  text-shadow: 0 0 10px rgba(94, 231, 255, 0.35);
}

.start-explore-chip[aria-pressed="true"] {
  --explore-edge: rgba(140, 245, 255, 0.98);
  background:
    linear-gradient(
      135deg,
      rgba(94, 231, 255, 0.4) 0%,
      rgba(18, 70, 88, 0.96) 40%,
      rgba(8, 22, 32, 0.99) 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(210, 250, 255, 0.35),
    inset 0 -1px 0 rgba(0, 50, 70, 0.5),
    0 0 0 1px rgba(122, 240, 255, 0.4),
    0 0 32px rgba(80, 230, 255, 0.5),
    0 0 56px rgba(40, 170, 210, 0.22),
    0 5px 0 rgba(0, 0, 0, 0.48);
}

.start-explore-chip[aria-pressed="true"] .start-explore-chip-kicker {
  color: rgba(200, 248, 255, 0.95);
}

.start-explore-chip[aria-pressed="true"] .start-explore-chip-side--off {
  color: rgba(170, 220, 235, 0.42);
  text-shadow: none;
}

.start-explore-chip[aria-pressed="true"] .start-explore-chip-side--on {
  color: rgba(200, 248, 255, 0.95);
  text-shadow: 0 0 10px rgba(94, 231, 255, 0.4);
}

.start-explore-chip[aria-pressed="true"] .start-explore-chip-gem {
  left: calc(100% - 0.28rem - var(--explore-gem));
  box-shadow:
    0 0 12px rgba(122, 240, 255, 0.9),
    0 0 22px rgba(80, 220, 255, 0.5);
  transform: rotate(45deg) scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .start-explore-chip-gem {
    transition-duration: 0.01ms;
  }
}

@media (max-width: 560px) {
  .start-headline-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    padding-right: 0;
  }

  .start-explore-wrap {
    position: static;
    width: min(14.5rem, 100%);
    align-self: flex-end;
    pointer-events: auto;
  }
}

.start-form {
  display: grid;
  gap: 1.25rem;
  width: 100%;
  animation: rise 0.85s 0.12s ease-out both;
}

.start-form > .cta {
  justify-self: end;
}

/* Fixed bottom-left so Begin stays aligned with the score box (warn must not reflow). */
.start-begin-warn {
  position: fixed;
  left: max(1rem, env(safe-area-inset-left, 0px));
  /* Sit above History / Reservations corner controls */
  bottom: max(4.35rem, calc(env(safe-area-inset-bottom, 0px) + 3.85rem));
  z-index: 45;
  margin: 0;
  max-width: min(22rem, calc(100vw - 2rem));
  padding: 0.55rem 0.75rem;
  text-align: left;
  font-size: 0.86rem;
  line-height: 1.4;
  font-weight: 600;
  color: #f0b4a0;
  border: 1px solid rgba(240, 180, 160, 0.35);
  border-radius: 6px;
  background: rgba(28, 16, 14, 0.92);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.start-begin-warn[hidden] {
  display: none;
}

/* Start Begin interview — mode-off gold key; mode-on cyan (see explore-mode-on below) */
body.start-page #start-submit.cta {
  --begin-ink: #f6e7b8;
  --begin-edge: rgba(201, 165, 116, 0.72);
  --begin-fill-a: rgba(72, 52, 24, 0.72);
  --begin-fill-b: rgba(18, 14, 10, 0.94);
  --begin-glow: rgba(201, 165, 116, 0.28);
  --begin-sweep: rgba(255, 230, 170, 0.16);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: min(100%, 14.5rem);
  padding: 0.88rem 1.55rem 0.82rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  color: var(--begin-ink);
  border: 1px solid var(--begin-edge);
  border-bottom: 3px solid #4a3c1c;
  border-radius: 2px;
  background:
    radial-gradient(120% 90% at 18% 0%, var(--begin-glow), transparent 55%),
    linear-gradient(165deg, var(--begin-sweep) 0%, transparent 48%),
    linear-gradient(180deg, var(--begin-fill-a) 0%, var(--begin-fill-b) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 190, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 0 18px rgba(201, 165, 116, 0.18),
    0 4px 0 rgba(0, 0, 0, 0.4),
    0 10px 20px rgba(0, 0, 0, 0.35);
  text-shadow: 0 0 12px rgba(255, 220, 140, 0.25);
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease,
    color 0.16s ease,
    opacity 0.16s ease,
    filter 0.16s ease,
    transform 0.12s ease;
}

body.start-page #start-submit.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 240, 200, 0.14) 42%,
    transparent 68%
  );
  transform: translateX(-120%);
  opacity: 0.7;
}

body.start-page #start-submit.cta:hover:not(:disabled) {
  color: #fff4d2;
  border-color: rgba(232, 196, 140, 0.92);
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 210, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 0 22px rgba(201, 165, 116, 0.35),
    0 0 40px rgba(201, 165, 116, 0.16),
    0 5px 0 rgba(0, 0, 0, 0.42),
    0 12px 24px rgba(0, 0, 0, 0.4);
}

body.start-page #start-submit.cta:hover:not(:disabled)::before {
  animation: begin-cta-sweep 1.1s ease-out;
}

body.start-page #start-submit.cta:active:not(:disabled) {
  transform: translateY(1px);
  filter: brightness(0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 190, 0.12),
    0 2px 0 rgba(0, 0, 0, 0.4),
    0 6px 14px rgba(0, 0, 0, 0.35);
}

/* Reserved if Begin is ever truly disabled (selection uses click-warn instead). */
body.start-page #start-submit.cta:disabled {
  opacity: 0.38;
  filter: grayscale(0.25);
  color: rgba(236, 220, 180, 0.72);
  text-shadow: none;
  border-color: rgba(168, 134, 92, 0.32);
  background:
    linear-gradient(180deg, rgba(40, 32, 22, 0.35) 0%, rgba(12, 10, 8, 0.55) 100%);
  box-shadow:
    inset 0 1px 0 rgba(201, 165, 116, 0.06),
    0 2px 0 rgba(0, 0, 0, 0.3);
  cursor: not-allowed;
}

@keyframes begin-cta-sweep {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

@media (prefers-reduced-motion: reduce) {
  body.start-page #start-submit.cta:hover:not(:disabled)::before {
    animation: none;
  }
}

.start-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.start-tiles:has(#explore-tile:not([hidden])) {
  /* Same width as one Firm/Seat tile (2-col grid, 1rem gap); left-aligned */
  grid-template-columns: 1fr;
  width: calc((100% - 1rem) / 2);
  max-width: none;
  justify-self: start;
  justify-content: stretch;
}

/* Blue-gold identity cards (outside Firm / Seat) */
/* Author display:grid beats UA [hidden] — force hide (Explore tile before special mode). */
.start-tile.id-card[hidden] {
  display: none !important;
}

.start-tile.id-card {
  --id-sweep: rgba(255, 230, 170, 0.18);
  --id-glow: rgba(255, 210, 120, 0.12);
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  gap: 0.45rem;
  min-height: 7.25rem;
  margin: 0;
  padding: 1.05rem 1.15rem 1.15rem;
  text-align: left;
  color: #f3df9a;
  font: inherit;
  cursor: pointer;
  isolation: isolate;
  border: 1px solid rgba(168, 134, 92, 0.42);
  border-bottom: 3px solid #4a3c1c;
  border-radius: 2px;
  background:
    radial-gradient(120% 80% at 18% 0%, var(--id-glow), transparent 55%),
    linear-gradient(165deg, rgba(56, 46, 24, 0.45) 0%, transparent 42%),
    linear-gradient(180deg, #161410 0%, #0c0c0e 100%);
  box-shadow:
    inset 0 1px 0 rgba(201, 165, 116, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 3px 0 rgba(0, 0, 0, 0.4),
    0 8px 16px rgba(0, 0, 0, 0.35);
  transform: translateY(0);
  transition:
    transform 0.1s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
  overflow: hidden;
}

.start-tile.id-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 38%,
    var(--id-sweep) 50%,
    transparent 62%,
    transparent 100%
  );
  transform: translateX(-130%);
  animation: tt-node-light-sweep 3.8s ease-in-out infinite;
}

.start-tile.id-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  pointer-events: none;
  border-radius: 1px;
  box-shadow: inset 0 0 22px var(--id-glow);
  opacity: 0.9;
}

.id-card-kicker,
.id-card-title,
.id-card-sub,
.id-card-langs {
  position: relative;
  z-index: 1;
}

.id-card-langs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3rem;
  margin-top: 0.1rem;
  width: 100%;
}

.id-card-langs[hidden] {
  display: none !important;
}

.id-card-langs .tag-coding-lang {
  margin: 0;
  padding: 0.14rem 0.42rem 0.14rem 0.34rem;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  min-height: 1.35rem;
  color: #f0d4a8;
  border-color: rgba(232, 196, 140, 0.7);
  background: rgba(88, 52, 28, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 230, 190, 0.12);
}

.id-card-langs .tag-coding-lang.tag-coding-sql {
  color: #b8e8dc;
  border-color: rgba(120, 200, 185, 0.68);
  background: rgba(28, 58, 54, 0.58);
  box-shadow: inset 0 1px 0 rgba(200, 245, 235, 0.1);
}

.id-card-langs .tag-coding-icon {
  opacity: 0.95;
}

.id-card-kicker {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(168, 134, 92, 0.78);
  line-height: 1.2;
}

.id-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.4vw, 1.45rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--accent-hot);
  letter-spacing: -0.02em;
  /* Fraunces default & is overly ornate */
  font-feature-settings: "liga" 0, "dlig" 0, "calt" 0, "ss01" 0;
}

.id-card-amp {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: normal;
  font-weight: inherit;
  letter-spacing: 0;
}

.start-tile.id-card.is-empty .id-card-title {
  color: #e6d2a0;
  font-weight: 500;
}

/* Path crumbs / partial picks — same display face as title, lighter ink for hierarchy */
.id-card-sub {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: #ebe0c8;
  font-feature-settings: "liga" 0, "dlig" 0, "calt" 0, "ss01" 0;
}

.start-tile.id-card:hover {
  border-color: rgba(201, 165, 116, 0.72);
  --id-glow: rgba(255, 210, 120, 0.18);
  --id-sweep: rgba(255, 230, 170, 0.26);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(201, 165, 116, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 5px 0 rgba(0, 0, 0, 0.45),
    0 12px 22px rgba(0, 0, 0, 0.42);
}

.start-tile.id-card:focus-visible {
  outline: 2px solid rgba(201, 165, 116, 0.7);
  outline-offset: 2px;
}

.start-tile.id-card:active {
  transform: translateY(2px);
  border-bottom-width: 1px;
  box-shadow:
    inset 0 3px 10px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(0, 0, 0, 0.35);
}

.start-tile.id-card.is-filled {
  border-color: rgba(201, 165, 116, 0.7);
  --id-glow: rgba(255, 210, 120, 0.16);
  --id-sweep: rgba(255, 230, 170, 0.22);
}

.start-tile.id-card.is-filled .id-card-kicker {
  color: #e8c96a;
}

.start-tile.id-card.is-filled .id-card-title {
  color: var(--accent-hot);
}

.start-tile.id-card.is-invalid {
  border-color: rgba(184, 92, 74, 0.85);
  box-shadow:
    inset 0 0 0 1px rgba(184, 92, 74, 0.2),
    0 3px 0 rgba(0, 0, 0, 0.4),
    0 8px 16px rgba(0, 0, 0, 0.35);
}

.start-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(168, 134, 92, 0.48);
  border-radius: 2px;
  padding: 0;
  color: var(--paper);
  max-width: min(96rem, calc(100vw - 0.75rem));
  width: min(96rem, calc(100vw - 0.75rem));
  max-height: min(94vh, 58rem);
  height: min(94vh, 58rem);
  background:
    radial-gradient(ellipse 70% 55% at 22% 18%, rgba(201, 165, 116, 0.18), transparent 58%),
    radial-gradient(ellipse 55% 45% at 12% 82%, rgba(90, 70, 30, 0.32), transparent 55%),
    radial-gradient(ellipse 42% 38% at 92% 12%, rgba(140, 140, 148, 0.1), transparent 52%),
    linear-gradient(180deg, #07070b 0%, #030305 55%, #09090d 100%);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(201, 165, 116, 0.08);
}

/* SAO HUD layer inside firm/seat panels */
.start-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  background:
    radial-gradient(circle at 28% 42%, transparent 0 18%, rgba(201, 165, 116, 0.07) 19%, transparent 20%),
    radial-gradient(circle at 28% 42%, transparent 0 28%, rgba(201, 165, 116, 0.05) 29%, transparent 30%),
    radial-gradient(circle at 28% 42%, transparent 0 40%, rgba(201, 165, 116, 0.04) 41%, transparent 42%),
    linear-gradient(rgba(201, 165, 116, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 165, 116, 0.055) 1px, transparent 1px);
  background-size:
    auto,
    auto,
    auto,
    52px 52px,
    52px 52px;
  mask-image: radial-gradient(ellipse 85% 75% at 30% 40%, #000 15%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 30% 40%, #000 15%, transparent 78%);
}

.start-panel::after {
  content: "";
  position: absolute;
  inset: 0.55rem;
  z-index: 0;
  pointer-events: none;
  border: 1px solid rgba(168, 134, 92, 0.18);
  box-shadow:
    inset 10px 10px 0 -9px rgba(201, 165, 116, 0.35),
    inset -10px -10px 0 -9px rgba(201, 165, 116, 0.28);
  opacity: 0.85;
}

.start-panel::backdrop {
  background:
    radial-gradient(ellipse 60% 50% at 30% 40%, rgba(201, 165, 116, 0.14), transparent 62%),
    rgba(3, 3, 5, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.start-panel-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  height: 100%;
  max-height: min(94vh, 58rem);
}

#explore-panel .start-panel-card,
#seat-panel .start-panel-card {
  /* Keep 3 rows — lang box overlays bottom-left; no full-width footer strip */
  grid-template-rows: auto auto minmax(0, 1fr);
}

#explore-panel .start-panel-body,
#seat-panel .start-panel-body {
  /* Room under Root so the floating lang box does not cover tree nodes */
  padding-bottom: 13.5rem;
}

.start-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.35rem 1.2rem 0.95rem;
  border-bottom: 1px solid rgba(168, 134, 92, 0.2);
}

.start-panel-kicker {
  margin: 0 0 0.2rem;
  color: rgba(168, 134, 92, 0.8);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.start-panel-title {
  margin: 0;
  font-family: var(--font-herald);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent-hot);
}

.tech-tree-path,
.start-panel-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
  padding: 0.7rem 1.2rem 0;
}

.tech-tree-path-sep {
  color: rgba(200, 210, 215, 0.55);
  font-size: 0.68rem;
  line-height: 1;
  letter-spacing: 0;
}

.tech-tree-path-step,
.start-panel-step {
  color: #6d7a72;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 2px;
}

.tech-tree-path-step.is-done,
.start-panel-step.is-done {
  color: var(--accent);
}

.tech-tree-path-step.is-active,
.start-panel-step.is-active {
  color: var(--accent-hot);
  border-color: rgba(168, 134, 92, 0.4);
  background: rgba(168, 134, 92, 0.1);
}

.start-panel-body {
  overflow: auto;
  padding: 0.85rem 1rem 1.15rem;
  display: grid;
  gap: 0.6rem;
  scrollbar-gutter: stable;
}

.tech-tree-option {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.7rem 0.9rem;
  text-align: left;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: #e8fbff;
  cursor: pointer;
  border: 1px solid rgba(94, 231, 255, 0.4);
  border-radius: 8px;
  background: rgba(8, 24, 34, 0.88);
  box-shadow: inset 0 1px 0 rgba(180, 245, 255, 0.1);
}

.tech-tree-option:hover,
.tech-tree-option:focus-visible {
  border-color: rgba(122, 240, 255, 0.85);
  background: rgba(14, 48, 62, 0.95);
  outline: none;
}

/* Explore: Firm/Seat card chrome (cyan); language ticks live in the panel footer */
#explore-tile.explore-pick {
  --explore-card-h: 7.25rem;
  display: grid;
  justify-items: stretch;
  gap: 0.55rem;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  cursor: default;
}

#explore-tile.explore-pick[hidden] {
  display: none !important;
}

/* Level · Type — same id-card shell as Firm/Seat, cyan ink */
#explore-path-btn.explore-path-card {
  --id-sweep: rgba(160, 240, 255, 0.2);
  --id-glow: rgba(94, 231, 255, 0.16);
  width: 100%;
  min-height: var(--explore-card-h);
  color: #d8f8ff;
  border-color: rgba(61, 213, 240, 0.48);
  border-bottom-color: #145a6e;
  background:
    radial-gradient(120% 80% at 18% 0%, var(--id-glow), transparent 55%),
    linear-gradient(165deg, rgba(24, 56, 68, 0.5) 0%, transparent 42%),
    linear-gradient(180deg, #101820 0%, #0a1016 100%);
  box-shadow:
    inset 0 1px 0 rgba(94, 231, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 3px 0 rgba(0, 0, 0, 0.4),
    0 8px 16px rgba(0, 0, 0, 0.35);
}

#explore-path-btn.explore-path-card .id-card-kicker {
  color: rgba(94, 231, 255, 0.78);
}

#explore-path-btn.explore-path-card.is-empty .id-card-title {
  color: rgba(180, 240, 255, 0.78);
}

#explore-path-btn.explore-path-card.is-filled {
  border-color: rgba(94, 231, 255, 0.72);
  --id-glow: rgba(94, 231, 255, 0.2);
  --id-sweep: rgba(160, 240, 255, 0.24);
}

#explore-path-btn.explore-path-card.is-filled .id-card-kicker {
  color: #7af0ff;
}

#explore-path-btn.explore-path-card.is-filled .id-card-title {
  color: #e8fbff;
}

#explore-path-btn.explore-path-card {
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  gap: 0.4rem;
}

#explore-path-btn.explore-path-card .id-card-langs {
  margin-top: 0.15rem;
  min-height: 1.35rem;
}

#explore-path-btn.explore-path-card .tag-coding-lang {
  color: #e8c49a;
  border-color: rgba(196, 130, 80, 0.55);
  background: rgba(72, 42, 22, 0.5);
}

#explore-path-btn.explore-path-card .tag-coding-lang.tag-coding-sql {
  color: #9fd4c8;
  border-color: rgba(90, 170, 155, 0.58);
  background: rgba(22, 48, 46, 0.55);
}

#explore-path-btn.explore-path-card:hover {
  border-color: rgba(94, 231, 255, 0.78);
  --id-glow: rgba(94, 231, 255, 0.22);
  --id-sweep: rgba(160, 240, 255, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(94, 231, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 5px 0 rgba(0, 0, 0, 0.45),
    0 12px 22px rgba(0, 0, 0, 0.42);
}

#explore-path-btn.explore-path-card:focus-visible {
  outline-color: rgba(94, 231, 255, 0.75);
}

#explore-tile.explore-pick.is-invalid #explore-path-btn.explore-path-card {
  border-color: rgba(184, 92, 74, 0.85);
  box-shadow:
    inset 0 0 0 1px rgba(184, 92, 74, 0.2),
    0 3px 0 rgba(0, 0, 0, 0.4),
    0 8px 16px rgba(0, 0, 0, 0.35);
}

/* Explore panel — floating lang HUD, inset from panel corner */
.explore-panel-lang {
  position: absolute;
  left: 2.15rem;
  bottom: 1.9rem;
  z-index: 4;
  width: auto;
  max-width: min(20.5rem, calc(100% - 4.5rem));
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  pointer-events: none;
}

.explore-lang-box {
  position: relative;
  display: grid;
  gap: 0.7rem;
  width: 19.5rem;
  max-width: 100%;
  padding: 1.2rem 1.1rem 0.95rem;
  box-sizing: border-box;
  pointer-events: auto;
  isolation: isolate;
  /* Single border only — no inner double-frame (that's the big Explore panel) */
  border: 1px solid rgba(94, 231, 255, 0.4);
  border-radius: 2px;
  background:
    radial-gradient(120% 80% at 8% 0%, rgba(94, 231, 255, 0.08), transparent 50%),
    linear-gradient(180deg, rgba(12, 28, 38, 0.97) 0%, rgba(5, 12, 18, 0.98) 100%);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.48),
    0 0 18px rgba(40, 140, 170, 0.12),
    inset 0 1px 0 rgba(180, 240, 255, 0.08);
  overflow: visible;
}

.explore-lang-box-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.7rem;
}

.explore-lang-box-title {
  position: absolute;
  top: 0;
  left: 0.85rem;
  z-index: 3;
  margin: 0;
  padding: 0.14rem 0.55rem;
  transform: translateY(-50%);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(190, 240, 250, 0.88);
  background:
    linear-gradient(180deg, rgba(14, 34, 46, 0.98) 0%, rgba(8, 20, 28, 0.98) 100%);
  border: 1px solid rgba(94, 231, 255, 0.42);
  border-radius: 1px;
  box-shadow:
    0 0 10px rgba(64, 180, 210, 0.18),
    inset 0 1px 0 rgba(200, 250, 255, 0.12);
}

.explore-lang-ticks {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  gap: 0.55rem;
  width: 100%;
  min-height: 0;
}

/* Row: diamond star OUTSIDE tag | coding tag */
.explore-lang-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  margin: 0;
  cursor: pointer;
  user-select: none;
}

.explore-lang-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
  white-space: nowrap;
}

.explore-lang-row .explore-lang-tag {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.32rem;
  width: 100%;
  min-height: 2.15rem;
  margin: 0;
  padding: 0.38rem 0.65rem;
  box-sizing: border-box;
  font-size: 0.82rem;
  font-weight: 650;
  opacity: 0.38;
  filter: saturate(0.55);
  transition:
    opacity 0.16s ease,
    filter 0.16s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease;
}

.explore-lang-row .explore-lang-tag .tag-coding-icon {
  width: 0.9rem;
  height: 0.9rem;
}

.explore-lang-row:hover .explore-lang-tag {
  opacity: 0.7;
  filter: saturate(0.8);
}

.explore-lang-row.is-on .explore-lang-tag,
.explore-lang-row:has(.explore-lang-input:checked) .explore-lang-tag {
  opacity: 1;
  filter: none;
  box-shadow:
    0 0 0 1px rgba(232, 196, 154, 0.28),
    0 0 16px rgba(196, 130, 80, 0.38),
    0 0 28px rgba(196, 130, 80, 0.16);
}

.explore-lang-row.is-on .explore-lang-tag.tag-coding-sql,
.explore-lang-row:has(.explore-lang-input:checked) .explore-lang-tag.tag-coding-sql {
  box-shadow:
    0 0 0 1px rgba(90, 170, 155, 0.34),
    0 0 16px rgba(90, 170, 155, 0.4),
    0 0 28px rgba(90, 170, 155, 0.16);
}

.explore-lang-row:has(.explore-lang-input:focus-visible) .explore-lang-tag {
  outline: 2px solid rgba(94, 231, 255, 0.7);
  outline-offset: 2px;
}

/* Diamond star — left of tag, outside the tag border */
.explore-lang-mark {
  --gem: 0.48rem;
  position: relative;
  z-index: 1;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  opacity: 0.4;
  transition: opacity 0.16s ease;
}

.explore-lang-mark::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--gem) + 0.28rem);
  height: calc(var(--gem) + 0.28rem);
  margin: calc((var(--gem) + 0.28rem) / -2) 0 0 calc((var(--gem) + 0.28rem) / -2);
  transform: rotate(45deg);
  border: 1px solid rgba(94, 231, 255, 0.22);
  border-radius: 1px;
  background:
    linear-gradient(145deg, rgba(18, 42, 54, 0.35) 0%, rgba(6, 14, 20, 0.4) 100%);
  box-shadow:
    inset 0 1px 0 rgba(180, 245, 255, 0.04),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

.explore-lang-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--gem);
  height: var(--gem);
  margin: calc(var(--gem) / -2) 0 0 calc(var(--gem) / -2);
  transform: rotate(45deg) scale(0.45);
  border: 1px solid rgba(94, 231, 255, 0.16);
  background:
    linear-gradient(145deg, rgba(40, 70, 85, 0.18) 0%, rgba(12, 24, 32, 0.28) 100%);
  box-shadow: none;
  opacity: 0.28;
  transition:
    transform 0.16s cubic-bezier(0.22, 0.9, 0.28, 1),
    opacity 0.14s ease,
    border-color 0.14s ease,
    background 0.14s ease,
    box-shadow 0.14s ease;
}

.explore-lang-row:hover .explore-lang-mark {
  opacity: 0.7;
}

.explore-lang-row:hover .explore-lang-mark::before {
  border-color: rgba(122, 240, 255, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(200, 250, 255, 0.1),
    0 0 4px rgba(64, 200, 230, 0.12);
}

.explore-lang-row.is-on .explore-lang-mark,
.explore-lang-row:has(.explore-lang-input:checked) .explore-lang-mark {
  opacity: 1;
}

.explore-lang-row.is-on .explore-lang-mark::before,
.explore-lang-row:has(.explore-lang-input:checked) .explore-lang-mark::before {
  border-color: rgba(180, 235, 250, 0.75);
  background:
    linear-gradient(145deg, rgba(60, 160, 185, 0.4) 0%, rgba(16, 52, 68, 0.85) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 0 5px rgba(94, 231, 255, 0.22);
}

.explore-lang-row.is-on .explore-lang-mark::after,
.explore-lang-row:has(.explore-lang-input:checked) .explore-lang-mark::after {
  border-color: rgba(230, 250, 255, 0.85);
  background:
    linear-gradient(145deg, #e8f8ff 0%, #8ad8ea 45%, #2aa8c4 100%);
  box-shadow:
    0 0 4px rgba(140, 230, 245, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

.explore-home-remark {
  margin: 0.1rem 0 0;
  max-width: 100%;
  font-size: 0.68rem;
  line-height: 1.45;
  color: rgba(170, 220, 235, 0.72);
}

/* Seat panel lang HUD — gold chrome (not Explore cyan); tags keep own colors */
#seat-panel .explore-lang-box {
  border-color: rgba(168, 134, 92, 0.48);
  background:
    radial-gradient(120% 80% at 8% 0%, rgba(212, 168, 96, 0.1), transparent 50%),
    linear-gradient(180deg, rgba(28, 22, 14, 0.97) 0%, rgba(12, 10, 8, 0.98) 100%);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.48),
    0 0 18px rgba(168, 134, 92, 0.14),
    inset 0 1px 0 rgba(232, 196, 154, 0.1);
}

#seat-panel .explore-lang-box-title {
  color: rgba(232, 196, 154, 0.9);
  background:
    linear-gradient(180deg, rgba(36, 28, 18, 0.98) 0%, rgba(18, 14, 10, 0.98) 100%);
  border-color: rgba(168, 134, 92, 0.5);
  box-shadow:
    0 0 10px rgba(168, 134, 92, 0.2),
    inset 0 1px 0 rgba(232, 196, 154, 0.14);
}

#seat-panel .explore-lang-mark::before {
  border-color: rgba(168, 134, 92, 0.28);
  background:
    linear-gradient(145deg, rgba(54, 42, 24, 0.4) 0%, rgba(18, 14, 10, 0.45) 100%);
  box-shadow:
    inset 0 1px 0 rgba(232, 196, 154, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}

#seat-panel .explore-lang-mark::after {
  border-color: rgba(168, 134, 92, 0.22);
  background:
    linear-gradient(145deg, rgba(80, 60, 32, 0.22) 0%, rgba(24, 18, 12, 0.3) 100%);
}

#seat-panel .explore-lang-row:hover .explore-lang-mark::before {
  border-color: rgba(212, 168, 96, 0.65);
  box-shadow:
    inset 0 1px 0 rgba(232, 196, 154, 0.12),
    0 0 4px rgba(168, 134, 92, 0.18);
}

#seat-panel .explore-lang-row.is-on .explore-lang-mark::before,
#seat-panel .explore-lang-row:has(.explore-lang-input:checked) .explore-lang-mark::before {
  border-color: rgba(232, 196, 154, 0.78);
  background:
    linear-gradient(145deg, rgba(180, 130, 70, 0.45) 0%, rgba(60, 42, 22, 0.88) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 5px rgba(212, 168, 96, 0.28);
}

#seat-panel .explore-lang-row.is-on .explore-lang-mark::after,
#seat-panel .explore-lang-row:has(.explore-lang-input:checked) .explore-lang-mark::after {
  border-color: rgba(255, 230, 190, 0.88);
  background:
    linear-gradient(145deg, #fff4e0 0%, #e0b86a 45%, #b07a32 100%);
  box-shadow:
    0 0 4px rgba(212, 168, 96, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

#seat-panel .explore-lang-row:has(.explore-lang-input:focus-visible) .explore-lang-tag {
  outline-color: rgba(232, 196, 154, 0.75);
}

#seat-panel .explore-home-remark {
  color: rgba(210, 180, 140, 0.72);
}

.explore-lang-warn {
  margin: 0.35rem 0 0;
  max-width: 100%;
  font-size: 0.78rem;
  line-height: 1.4;
  font-weight: 600;
  color: #f0b4a0;
}

.explore-lang-warn[hidden] {
  display: none;
}

/* —— Tech tree (Firm / Seat) —— */
.tech-tree {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 2.5rem;
  min-width: min(100%, 88rem);
  padding: 0.65rem 0.5rem 1rem;
}

.tt-links {
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}

.tt-link-path {
  fill: none;
  stroke: rgba(224, 138, 60, 0.35);
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.tt-link-path.is-hot {
  stroke: rgba(255, 200, 90, 0.85);
  stroke-width: 2.25;
  filter: drop-shadow(0 0 4px rgba(255, 190, 70, 0.45));
}

.tt-link-path.is-locked {
  stroke: rgba(120, 140, 155, 0.22);
  stroke-width: 1.75;
  filter: none;
  opacity: 0.85;
}

.tt-col {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 12rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.tt-col--blank {
  pointer-events: none;
}

.tt-col-label--blank {
  color: transparent;
  text-shadow: none;
}

.tt-col-stack {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

/* Column color systems + pressable lit nodes */
.tt-col-label {
  margin: 0;
  padding: 0.1rem 0.2rem 0.35rem;
  font-family: var(--font-herald);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(201, 165, 116, 0.22);
}

.tt-tone-root .tt-col-label { color: #c9a574; }
.tt-tone-type .tt-col-label,
.tt-tone-level .tt-col-label { color: #7ec8dc; }
.tt-tone-desk .tt-col-label,
.tt-tone-family .tt-col-label { color: #b8a6e8; }
.tt-tone-role .tt-col-label { color: #e8a890; }

.tt-node {
  --tt-rim: rgba(201, 165, 116, 0.7);
  --tt-rim-deep: #4a3c1c;
  --tt-glow: rgba(255, 210, 120, 0.16);
  --tt-fill-a: rgba(56, 46, 24, 0.72);
  --tt-fill-b: rgba(18, 22, 30, 0.88);
  --tt-sweep: rgba(255, 230, 170, 0.2);

  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  text-align: left;
  font: inherit;
  cursor: pointer;
  color: #f3df9a;
  border: 1px solid var(--tt-rim);
  border-bottom: 3px solid var(--tt-rim-deep);
  border-radius: 3px;
  background:
    radial-gradient(120% 80% at 20% 0%, var(--tt-glow), transparent 55%),
    linear-gradient(165deg, var(--tt-fill-a) 0%, var(--tt-fill-b) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 190, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 3px 0 rgba(0, 0, 0, 0.4),
    0 8px 16px rgba(0, 0, 0, 0.28);
  transform: translateY(0);
  transition:
    transform 0.08s ease,
    box-shadow 0.12s ease,
    border-color 0.14s ease,
    opacity 0.16s ease,
    filter 0.16s ease,
    background 0.16s ease;
}

.tt-node::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Keep sweep clipped even if a parent filter expands paint */
  clip-path: inset(0 round 2px);
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 38%,
    var(--tt-sweep) 50%,
    transparent 62%,
    transparent 100%
  );
  transform: translateX(-130%);
  animation: tt-node-light-sweep 3.8s ease-in-out infinite;
  will-change: transform;
}

.tt-node::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  pointer-events: none;
  border-radius: 2px;
  box-shadow: inset 0 0 18px var(--tt-glow);
  opacity: 0.85;
}

.tt-node-titleonly {
  padding: 0.78rem 0.95rem;
}

.tt-node.is-leaf.has-langs {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.32rem;
  /* Keep overflow clipped so light-sweep never leaks (was visible) */
  overflow: hidden;
}

.tt-node-langs {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.28rem;
  width: 100%;
}

.tt-node-langs .tag-coding-lang {
  margin-left: 0;
  padding: 0.1rem 0.34rem 0.1rem 0.28rem;
  font-size: 0.58rem;
  min-height: 1.25rem;
}

.tt-node-langs .tag-coding-icon {
  width: 0.72rem;
  height: 0.72rem;
}

.tt-node-label {
  position: relative;
  z-index: 1;
  display: block;
  font-family: var(--font-herald);
  font-size: clamp(0.88rem, 1.25vw, 1.05rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: none;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}

.tt-node.is-root .tt-node-label {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.92rem;
  font-weight: 700;
}

.tt-tone-root .tt-node:not(.is-locked) {
  --tt-rim: rgba(201, 165, 116, 0.78);
  --tt-rim-deep: #5a4820;
  --tt-glow: rgba(255, 210, 120, 0.2);
  --tt-fill-a: rgba(62, 50, 24, 0.78);
  --tt-fill-b: rgba(20, 24, 30, 0.9);
  --tt-sweep: rgba(255, 232, 170, 0.26);
}
.tt-tone-root .tt-node:not(.is-locked) .tt-node-label { color: #f6e2a0; }

.tt-tone-type .tt-node:not(.is-locked),
.tt-tone-level .tt-node:not(.is-locked) {
  --tt-rim: rgba(201, 165, 116, 0.72);
  --tt-rim-deep: #3a4a38;
  --tt-glow: rgba(120, 210, 230, 0.18);
  --tt-fill-a: rgba(28, 58, 68, 0.78);
  --tt-fill-b: rgba(16, 28, 36, 0.92);
  --tt-sweep: rgba(180, 240, 255, 0.22);
}
.tt-tone-type .tt-node:not(.is-locked) .tt-node-label,
.tt-tone-level .tt-node:not(.is-locked) .tt-node-label { color: #b8e8f4; }

.tt-tone-desk .tt-node:not(.is-locked),
.tt-tone-family .tt-node:not(.is-locked) {
  --tt-rim: rgba(201, 165, 116, 0.72);
  --tt-rim-deep: #3a3458;
  --tt-glow: rgba(180, 150, 255, 0.18);
  --tt-fill-a: rgba(42, 34, 68, 0.78);
  --tt-fill-b: rgba(20, 18, 36, 0.92);
  --tt-sweep: rgba(220, 200, 255, 0.22);
}
.tt-tone-desk .tt-node:not(.is-locked) .tt-node-label,
.tt-tone-family .tt-node:not(.is-locked) .tt-node-label { color: #d4c6f8; }

.tt-tone-role .tt-node:not(.is-locked) {
  --tt-rim: rgba(201, 165, 116, 0.72);
  --tt-rim-deep: #5a3428;
  --tt-glow: rgba(255, 160, 120, 0.16);
  --tt-fill-a: rgba(68, 36, 30, 0.78);
  --tt-fill-b: rgba(28, 18, 18, 0.92);
  --tt-sweep: rgba(255, 200, 170, 0.22);
}
.tt-tone-role .tt-node:not(.is-locked) .tt-node-label { color: #f6c8b4; }

.tt-node:hover:not(:disabled):not(.is-locked) {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 190, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 5px 0 rgba(0, 0, 0, 0.45),
    0 12px 20px rgba(0, 0, 0, 0.35),
    0 0 16px rgba(201, 165, 116, 0.18);
}

.tt-node:active:not(:disabled):not(.is-locked) {
  transform: translateY(2px);
  border-bottom-width: 1px;
  box-shadow:
    inset 0 3px 10px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(0, 0, 0, 0.35),
    0 1px 0 rgba(0, 0, 0, 0.4);
}

.tt-node:active:not(:disabled):not(.is-locked)::before {
  animation-play-state: paused;
  opacity: 0.35;
}

.tt-node:focus-visible {
  outline: 2px solid rgba(201, 165, 116, 0.7);
  outline-offset: 2px;
}

.tt-col.has-pick .tt-node:not(.is-selected):not(.is-locked) {
  /* Avoid filter: — it can paint the sweep outside overflow:hidden */
  opacity: 0.42;
  --tt-rim: rgba(168, 134, 92, 0.42);
  --tt-rim-deep: #2a2414;
  --tt-glow: rgba(201, 165, 116, 0.05);
  --tt-sweep: transparent;
  --tt-fill-a: rgba(28, 26, 22, 0.55);
  --tt-fill-b: rgba(12, 14, 18, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 190, 0.08),
    0 2px 0 rgba(0, 0, 0, 0.35);
}
.tt-col.has-pick .tt-node:not(.is-selected):not(.is-locked) .tt-node-label {
  color: rgba(210, 195, 160, 0.52);
  text-shadow: none;
  font-weight: 500;
}
.tt-col.has-pick .tt-node:not(.is-selected):not(.is-locked)::before {
  /* Dimmed options: no sweep — prevents 光 leaking out of the card */
  animation: none;
  opacity: 0;
  transform: none;
}

.tt-node.is-selected {
  opacity: 1 !important;
  filter: none !important;
  z-index: 2;
  --tt-rim: rgba(255, 220, 140, 0.95);
  --tt-rim-deep: #7a6228;
  --tt-glow: rgba(255, 210, 120, 0.28);
  --tt-sweep: rgba(255, 240, 200, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 210, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 3px 0 rgba(0, 0, 0, 0.4),
    0 0 18px rgba(255, 190, 70, 0.28),
    0 8px 16px rgba(0, 0, 0, 0.3);
}
.tt-node.is-selected .tt-node-label {
  color: #fff0c0 !important;
  font-weight: 700;
  text-shadow:
    0 0 10px rgba(255, 210, 100, 0.35),
    0 1px 0 rgba(0, 0, 0, 0.5);
}
.tt-node.is-selected::before {
  animation-duration: 2.6s;
}

.tt-tone-type .tt-node.is-selected,
.tt-tone-level .tt-node.is-selected {
  --tt-fill-a: rgba(36, 72, 82, 0.85);
  --tt-glow: rgba(140, 220, 240, 0.22);
}
.tt-tone-desk .tt-node.is-selected,
.tt-tone-family .tt-node.is-selected {
  --tt-fill-a: rgba(52, 42, 82, 0.85);
  --tt-glow: rgba(190, 170, 255, 0.22);
}
.tt-tone-role .tt-node.is-selected {
  --tt-fill-a: rgba(78, 42, 34, 0.85);
  --tt-glow: rgba(255, 170, 130, 0.2);
}

@keyframes tt-node-light-sweep {
  0%,
  18% { transform: translateX(-130%); }
  45%,
  55% { transform: translateX(130%); }
  100% { transform: translateX(130%); }
}

@media (prefers-reduced-motion: reduce) {
  .tt-node::before,
  .start-tile.id-card::before {
    animation: none;
    transform: translateX(0);
    opacity: 0.35;
  }
}

/* Unavailable: fade in place — same size/type so the tree rem does not jump. */
.tt-node.is-locked,
.tt-node:disabled {
  cursor: not-allowed;
  opacity: 0.34;
  filter: grayscale(0.4);
  box-shadow: none;
  transform: none;
  pointer-events: none;
}
.tt-node.is-locked::before,
.tt-node:disabled::before,
.tt-node.is-locked::after,
.tt-node:disabled::after {
  display: none;
}
.tt-node.is-locked .tt-node-label,
.tt-node:disabled .tt-node-label {
  text-shadow: none;
}
.tt-node.is-locked .tt-node-langs,
.tt-node:disabled .tt-node-langs {
  opacity: 0.9;
}
.tt-node.is-locked.is-selected,
.tt-node:disabled.is-selected {
  opacity: 0.42;
  filter: grayscale(0.25);
}

.start-panel-actions {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  flex-shrink: 0;
  margin-top: 0.35rem;
}

/* Quiet rect pair — outline Close + soft-fill Confirm (no pill) */
.start-panel-btn {
  --sp-btn-edge: rgba(201, 165, 116, 0.55);
  --sp-btn-ink: rgba(236, 228, 210, 0.92);
  --sp-btn-fill: rgba(48, 42, 34, 0.72);
  --sp-btn-fill-edge: rgba(168, 134, 92, 0.38);
  --sp-btn-fill-ink: rgba(210, 195, 165, 0.72);
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 7.5rem;
  min-height: 2.4rem;
  margin: 0;
  padding: 0.55rem 1.25rem;
  border-radius: 2px;
  border: 1px solid transparent;
  font: inherit;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition:
    transform 0.1s ease,
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease,
    color 0.15s ease,
    opacity 0.15s ease;
}

.start-panel-close {
  color: var(--sp-btn-ink);
  border-color: var(--sp-btn-edge);
  background: transparent;
  box-shadow: none;
}

.start-panel-close:hover,
.start-panel-close:focus-visible {
  color: #f6e7c0;
  border-color: rgba(232, 197, 130, 0.85);
  background: rgba(201, 165, 116, 0.08);
  outline: none;
}

.start-panel-close:active {
  transform: translateY(1px);
  background: rgba(201, 165, 116, 0.12);
}

/* History dock Close — quiet desk-key (match Cancel / Hint row) */
.start-history-panel .ghost.start-panel-close {
  --desk-quiet-ink: rgba(232, 239, 233, 0.82);
  --desk-quiet-edge: rgba(232, 239, 233, 0.3);
  --desk-quiet-lip: #454b54;
  --desk-quiet-shelf: #252a30;
  box-sizing: border-box;
  min-height: 2.5rem;
  height: 2.5rem;
  padding: 0 1.05rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.1;
  border-radius: 2px;
  color: var(--desk-quiet-ink);
  background:
    linear-gradient(180deg, rgba(232, 239, 233, 0.1) 0%, rgba(0, 0, 0, 0.42) 100%);
  border: 1px solid var(--desk-quiet-edge);
  border-bottom: 3px solid var(--desk-quiet-lip);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 3px 0 var(--desk-quiet-shelf),
    0 8px 14px rgba(0, 0, 0, 0.28);
  transform: translateY(0);
  transition:
    transform 0.08s ease,
    box-shadow 0.12s ease,
    border-color 0.14s ease,
    background 0.14s ease,
    color 0.14s ease;
}

.start-history-panel .ghost.start-panel-close:hover,
.start-history-panel .ghost.start-panel-close:focus-visible {
  color: #e8efe9;
  border-color: rgba(232, 239, 233, 0.45);
  background:
    linear-gradient(180deg, rgba(232, 239, 233, 0.1) 0%, rgba(0, 0, 0, 0.42) 100%);
  transform: translateY(-2px);
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 5px 0 var(--desk-quiet-shelf),
    0 12px 18px rgba(0, 0, 0, 0.32);
}

.start-history-panel .ghost.start-panel-close:active {
  transform: translateY(1px);
  border-bottom-width: 1px;
  background:
    linear-gradient(180deg, rgba(232, 239, 233, 0.08) 0%, rgba(0, 0, 0, 0.5) 100%);
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.45),
    0 1px 0 var(--desk-quiet-shelf);
}

.start-panel-confirm {
  color: #f0e2bc;
  border-color: rgba(232, 197, 130, 0.72);
  background: linear-gradient(180deg, rgba(90, 72, 48, 0.88) 0%, rgba(52, 42, 30, 0.92) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 230, 180, 0.1);
}

.start-panel-confirm:hover:not(:disabled),
.start-panel-confirm:focus-visible:not(:disabled) {
  color: #fff4d6;
  border-color: rgba(245, 220, 160, 0.9);
  background: linear-gradient(180deg, rgba(110, 88, 56, 0.95) 0%, rgba(62, 50, 34, 0.96) 100%);
  outline: none;
}

.start-panel-confirm:active:not(:disabled) {
  transform: translateY(1px);
}

.start-panel-confirm:disabled {
  color: rgba(232, 210, 170, 0.38);
  cursor: not-allowed;
  transform: none;
  border-color: rgba(168, 134, 92, 0.28);
  background: transparent;
  box-shadow: none;
  opacity: 1;
}

/* Explore panel — cyan quiet pair (as in original screenshot) */
#explore-panel .start-panel-btn {
  --sp-btn-edge: rgba(122, 210, 230, 0.72);
  --sp-btn-ink: rgba(210, 240, 250, 0.92);
  --sp-btn-fill: rgba(28, 48, 58, 0.78);
  --sp-btn-fill-edge: rgba(70, 110, 125, 0.45);
  --sp-btn-fill-ink: rgba(130, 170, 185, 0.55);
}

#explore-panel .start-panel-close:hover,
#explore-panel .start-panel-close:focus-visible {
  color: #e8fbff;
  border-color: rgba(160, 235, 250, 0.9);
  background: rgba(94, 231, 255, 0.08);
}

#explore-panel .start-panel-confirm {
  color: #d8f4ff;
  border-color: rgba(122, 210, 230, 0.65);
  background: linear-gradient(180deg, rgba(36, 68, 82, 0.92) 0%, rgba(18, 36, 46, 0.95) 100%);
  box-shadow: inset 0 1px 0 rgba(160, 230, 245, 0.1);
}

#explore-panel .start-panel-confirm:hover:not(:disabled),
#explore-panel .start-panel-confirm:focus-visible:not(:disabled) {
  color: #f0fbff;
  border-color: rgba(160, 235, 250, 0.85);
  background: linear-gradient(180deg, rgba(44, 84, 100, 0.96) 0%, rgba(22, 44, 56, 0.97) 100%);
}

#explore-panel .start-panel-confirm:disabled {
  color: rgba(160, 210, 225, 0.38);
  border-color: rgba(94, 231, 255, 0.22);
  background: transparent;
  box-shadow: none;
  opacity: 1;
}

.start-panel-back {
  justify-self: start;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
}

.start-panel-back:hover {
  color: var(--accent-hot);
}

.start-panel-empty {
  margin: 0.4rem 0 0;
  color: var(--muted, #8a857a);
  font-size: 0.92rem;
  line-height: 1.4;
}

.start-option-list {
  display: grid;
  gap: 0.4rem;
}

.start-option {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.75rem 0.85rem;
  text-align: left;
  color: var(--paper);
  font: inherit;
  font-size: 0.94rem;
  cursor: pointer;
  border: 1px solid rgba(168, 134, 92, 0.22);
  border-radius: 2px;
  background: rgba(21, 36, 30, 0.65);
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.start-option:hover,
.start-option.is-selected {
  border-color: rgba(168, 134, 92, 0.65);
  background: rgba(26, 44, 36, 0.95);
  color: #f3df9a;
}

@media (max-width: 720px) {
  .start-tiles {
    grid-template-columns: 1fr;
  }

  .start-panel {
    max-width: calc(100vw - 0.75rem);
    width: calc(100vw - 0.75rem);
    max-height: 94vh;
    height: 94vh;
  }

  .start-panel-card {
    max-height: 94vh;
  }

  .tech-tree,
  .tech-tree-seat {
    flex-direction: column;
    min-width: 0;
    gap: 1.1rem;
  }

  .tt-col {
    min-width: 0;
  }

  .tt-links {
    display: none;
  }
}

.pick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.pick-grid-3 {
  /* Level + type on first row; position full width so long titles fit */
  grid-template-columns: minmax(8rem, 1fr) minmax(12rem, 1.2fr);
}

.pick-grid-3 .pick-position {
  grid-column: 1 / -1;
}

.pick-grid-2 {
  grid-template-columns: minmax(14rem, 1.15fr) minmax(14rem, 1fr);
}

.pick-step {
  margin: 0;
  padding: 0;
  border: none;
  display: grid;
  gap: 0.75rem;
}

.pick-step legend {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--accent-hot);
  padding: 0;
  margin-bottom: 0.15rem;
}

.pick select {
  width: max-content;
  min-width: 11.5rem;
  max-width: 100%;
  text-overflow: ellipsis;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23c4a35a' d='M1.2 1.4L6 6.2 10.8 1.4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 0.72rem 0.48rem;
  transition: color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

/* Custom on-brand dropdown (replaces OS select popup) */
.pick-dd {
  position: relative;
  display: block;
  width: 100%;
  min-width: 11.5rem;
  max-width: 100%;
}

.pick-dd .pick-native {
  position: absolute !important;
  left: 0;
  top: 0;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: none !important;
  box-shadow: none !important;
}

.pick-dd-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-width: inherit;
  max-width: 100%;
  min-height: 2.65rem;
  box-sizing: border-box;
  font: inherit;
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  text-transform: none;
  text-align: left;
  color: rgba(232, 239, 233, 0.88);
  background: rgba(8, 9, 10, 0.96);
  border: 1px solid rgba(168, 134, 92, 0.42);
  border-radius: 3px;
  padding: 0.55rem 2rem 0.55rem 0.8rem;
  cursor: pointer;
  box-shadow: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23c4a35a' d='M1.2 1.4L6 6.2 10.8 1.4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 0.72rem 0.48rem;
  transition:
    border-color 0.15s ease,
    color 0.15s ease,
    background 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pick-dd.is-empty .pick-dd-trigger {
  color: rgba(197, 212, 200, 0.45);
  font-weight: 500;
}

.pick-dd-trigger:hover:not(:disabled) {
  border-color: rgba(201, 165, 116, 0.65);
  color: #efe6c8;
}

.pick-dd-trigger:active:not(:disabled),
.pick-dd.is-open .pick-dd-trigger {
  border-color: rgba(201, 165, 116, 0.75);
  background-color: rgba(14, 12, 10, 0.98);
}

.pick-dd.is-open {
  position: relative;
  z-index: 115;
}

.pick-dd.is-disabled .pick-dd-trigger,
.pick-dd-trigger:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.pick-dd.is-invalid .pick-dd-trigger {
  border-color: rgba(184, 92, 74, 0.75);
}

.pick-dd-menu {
  position: absolute;
  z-index: 120;
  left: 0;
  right: 0;
  top: calc(100% + 0.35rem);
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  width: 100%;
  min-width: 100%;
  max-width: min(36rem, calc(100vw - 2rem));
  max-height: min(16rem, 50vh);
  overflow: auto;
  border: 1px solid rgba(168, 134, 92, 0.45);
  border-radius: 3px;
  background: #0a0a0a;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
}

.pick-dd-menu li {
  margin: 0;
  padding: 0.7rem 0.85rem;
  color: rgba(232, 239, 233, 0.88);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  font-style: normal;
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-transform: none;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
}

.pick-dd-menu li:not(.pick-dd-hint):not(.pick-dd-disabled):hover,
.pick-dd-menu li:not(.pick-dd-hint):not(.pick-dd-disabled).is-active,
.pick-dd-menu li:not(.pick-dd-hint):not(.pick-dd-disabled):focus {
  background: rgba(28, 24, 18, 0.95);
  border-color: rgba(168, 134, 92, 0.55);
  color: #efe6c8;
  outline: none;
}

.pick-dd-menu li.is-selected {
  color: #efe6c8;
  background: rgba(28, 24, 18, 0.95);
  border-color: rgba(168, 134, 92, 0.55);
}

.pick-dd-menu li.pick-dd-hint {
  color: rgba(197, 212, 200, 0.4);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  cursor: default;
  pointer-events: none;
}

.pick-dd-menu li.pick-dd-disabled {
  color: rgba(197, 212, 200, 0.28);
  cursor: not-allowed;
}

.pick-position .pick-dd,
.pick-desk .pick-dd {
  width: 100%;
  max-width: 100%;
}

/* Placeholder state vs real choice */
.pick select:invalid,
.pick select.is-empty {
  color: var(--paper-dim);
  font-style: italic;
  border-style: dashed;
  border-color: rgba(232, 239, 233, 0.22);
}

.pick select:not(:invalid):not(.is-empty):not(:disabled) {
  color: var(--paper);
  font-style: normal;
  border-style: solid;
  border-color: rgba(168, 134, 92, 0.38);
  background-color: rgba(8, 14, 12, 0.95);
}

.pick select:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  font-style: italic;
  color: var(--paper-dim);
}

.pick select option {
  font-style: normal;
  font-weight: 500;
  color: #12241e;
  background: #e8efe9;
}

/* Hint row in the open list (OS may also grey disabled options) */
.pick select option.pick-placeholder,
.pick select option[value=""] {
  color: #4a5750;
  font-style: normal;
  font-weight: 600;
  font-size: 0.8em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pick-position select,
.pick-desk select {
  overflow: visible;
}

@media (max-width: 800px) {
  .pick-grid-3,
  .pick-grid-2 {
    grid-template-columns: 1fr;
  }

  .pick-grid-3 .pick-position {
    grid-column: auto;
  }
}

@media (max-width: 640px) {
  .pick-grid {
    grid-template-columns: 1fr;
  }
}

.pick {
  margin: 0;
  width: 100%;
  min-width: 0;
  justify-items: stretch;
}

label {
  display: grid;
  gap: 0.35rem;
}

label span {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--paper-dim);
  font-weight: 600;
}

select,
input,
textarea {
  font: inherit;
  color: var(--paper);
  background: rgba(14, 26, 23, 0.65);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0.7rem 0.8rem;
  width: 100%;
}

select:focus,
input:focus,
textarea:focus {
  outline: 1px solid var(--accent);
  border-color: var(--accent);
}

.pick select {
  width: max-content;
}


.seed {
  max-width: 8rem;
}

.cta,
button.cta,
a.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font: inherit;
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0c0c0e;
  background: linear-gradient(180deg, rgba(201, 165, 116, 0.95), rgba(168, 134, 92, 0.92));
  border: 1px solid rgba(201, 165, 116, 0.65);
  border-radius: 2px;
  padding: 0.72rem 1.2rem 0.66rem;
  cursor: pointer;
  text-decoration: none;
  width: fit-content;
  box-shadow: none;
  transform: translateY(0);
  filter: none;
  transition:
    filter 0.12s ease,
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease,
    opacity 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  -webkit-appearance: none;
}

.cta:hover,
button.cta:hover,
a.cta:hover {
  color: #0c0c0e;
  border-color: rgba(201, 165, 116, 0.85);
  background: linear-gradient(180deg, rgba(201, 165, 116, 0.95), rgba(168, 134, 92, 0.92));
  filter: brightness(1.06);
  transform: none;
  box-shadow: none;
}

.cta:active,
button.cta:active,
a.cta:active {
  transform: none;
  filter: brightness(0.96);
  color: #0c0c0e;
  background: linear-gradient(180deg, rgba(188, 154, 108, 0.95), rgba(150, 118, 80, 0.92));
  border-color: rgba(168, 134, 92, 0.75);
  box-shadow: none;
}

.cta:disabled,
button.cta:disabled,
a.cta[aria-disabled="true"] {
  opacity: 0.42;
  cursor: not-allowed;
  transform: none;
  filter: none;
  color: #0c0c0e;
  background: linear-gradient(180deg, rgba(201, 165, 116, 0.55), rgba(168, 134, 92, 0.5));
  border-color: rgba(201, 165, 116, 0.4);
  box-shadow: none;
  pointer-events: none;
}

/* Interview / walkthrough Submit only — original green-gold key (not gold fill CTAs). */
.cta.cta-submit,
button.cta.cta-submit {
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--accent-hot);
  background:
    linear-gradient(180deg, rgba(201, 165, 116, 0.16) 0%, rgba(8, 14, 12, 0.55) 100%),
    #15241e;
  border: 1px solid rgba(168, 134, 92, 0.58);
  border-bottom: 3px solid #4a3c1c;
  border-radius: 2px;
  box-shadow:
    inset 0 1px 0 rgba(201, 165, 116, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 3px 0 rgba(0, 0, 0, 0.55),
    0 8px 16px rgba(0, 0, 0, 0.35);
  filter: none;
  transition:
    transform 0.07s ease,
    box-shadow 0.07s ease,
    border-color 0.15s ease,
    border-bottom-width 0.07s ease,
    background 0.15s ease,
    color 0.15s ease;
}

.cta.cta-submit:hover,
button.cta.cta-submit:hover {
  color: #f3df9a;
  border-color: rgba(201, 165, 116, 0.85);
  background:
    linear-gradient(180deg, rgba(201, 165, 116, 0.26) 0%, rgba(8, 14, 12, 0.45) 100%),
    #1a2c24;
  transform: translateY(-2px);
  filter: none;
  box-shadow:
    inset 0 1px 0 rgba(201, 165, 116, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 5px 0 rgba(0, 0, 0, 0.55),
    0 12px 20px rgba(0, 0, 0, 0.4);
}

.cta.cta-submit:active,
button.cta.cta-submit:active {
  transform: translateY(2px);
  border-bottom-width: 1px;
  color: var(--accent);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(20, 32, 28, 0.9) 100%),
    #101a16;
  filter: none;
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.55),
    0 1px 0 rgba(0, 0, 0, 0.5);
}

.cta.cta-submit:disabled,
button.cta.cta-submit:disabled,
.cta.cta-submit[aria-disabled="true"],
button.cta.cta-submit[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  filter: none;
  color: var(--accent-hot);
  background:
    linear-gradient(180deg, rgba(201, 165, 116, 0.12) 0%, rgba(8, 14, 12, 0.45) 100%),
    #15241e;
  border-color: rgba(168, 134, 92, 0.4);
  border-bottom-color: #4a3c1c;
  box-shadow:
    inset 0 1px 0 rgba(201, 165, 116, 0.08),
    0 2px 0 rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

.ghost,
button.ghost,
a.ghost {
  display: inline-flex;
  align-items: center;
  font: inherit;
  font-weight: 500;
  color: var(--paper-dim);
  background: linear-gradient(180deg, rgba(232, 239, 233, 0.1) 0%, rgba(0, 0, 0, 0.28) 100%);
  border: 1px solid rgba(232, 239, 233, 0.22);
  border-bottom: 4px solid rgba(0, 0, 0, 0.55);
  border-radius: 3px;
  padding: 0.65rem 1rem 0.6rem;
  cursor: pointer;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 var(--press-rise) 0 rgba(0, 0, 0, 0.5),
    0 8px 14px rgba(0, 0, 0, 0.28);
  transform: translateY(0);
  transition:
    transform 0.07s ease,
    box-shadow 0.07s ease,
    border-bottom-width 0.07s ease,
    color 0.15s ease,
    border-color 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.ghost:hover {
  color: var(--paper);
  border-color: rgba(232, 239, 233, 0.35);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 6px 0 rgba(0, 0, 0, 0.5),
    0 12px 18px rgba(0, 0, 0, 0.32);
}

.ghost:active {
  transform: translateY(3px);
  border-bottom-width: 1px;
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(0, 0, 0, 0.55);
}

.ghost:disabled,
button.ghost:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 2px 0 rgba(0, 0, 0, 0.4);
}

.ghost.danger {
  color: #e8a89c;
  border-color: rgba(184, 92, 74, 0.55);
  border-bottom-color: #5a2e26;
  box-shadow:
    inset 0 1px 0 rgba(255, 200, 180, 0.1),
    0 var(--press-rise) 0 #3a1c18,
    0 8px 14px rgba(0, 0, 0, 0.3);
}

.ghost.danger:hover {
  border-color: rgba(232, 160, 144, 0.7);
}

.ghost.danger:active {
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.55),
    0 1px 0 #3a1c18;
}

.interview-main {
  max-width: min(72rem, 100%);
  padding: 0;
  width: 100%;
  /* Desk shell may extend 5rem past the live column on the right. */
  overflow-x: visible;
}

.interview {
  display: grid;
  gap: 1rem;
}

.meta-compact {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) auto auto;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-bottom: 0.25rem;
  animation: rise 0.5s ease-out both;
}

/* Keep Submit / Hint / Skip / Quit / timers visible while the stage scrolls.
   Frame bleeds full viewport width (L/R only); inner content stays on the 72rem column. */
.interview-live > .meta.meta-compact {
  position: sticky;
  top: 0;
  z-index: 50;
  box-sizing: border-box;
  width: 100vw;
  max-width: 100vw;
  margin-top: -0.75rem;
  margin-bottom: 0.15rem;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-top: 0.7rem;
  padding-bottom: 0.75rem;
  padding-left: calc((100vw - min(72rem, 100vw)) / 2 + 1rem);
  padding-right: calc((100vw - min(72rem, 100vw)) / 2 + 1rem);
  background:
    linear-gradient(
      180deg,
      rgba(6, 8, 12, 0.99) 0%,
      rgba(8, 10, 14, 0.98) 78%,
      rgba(8, 10, 14, 0.96) 100%
    );
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(232, 239, 233, 0.12);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  animation: none;
  isolation: isolate;
}

body:has(.interview-live) {
  overflow-x: hidden;
}

.meta-left .role {
  margin: 0;
}

.meta-left .desk {
  margin: 0.2rem 0 0;
}

.meta-right {
  display: grid;
  gap: 0.45rem;
  justify-items: end;
}

.meta-right .progress {
  margin: 0;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

/* TECHNICAL + SQL/Python: identical chip height/padding in the live header */
.meta-right .progress > .tag {
  margin-left: 0;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 1.55rem;
  padding: 0 0.45rem;
  line-height: 1;
  vertical-align: middle;
}

.meta-right .progress > .tag-coding-lang {
  margin-left: 0;
  box-sizing: border-box;
  height: 1.55rem;
  padding: 0 0.45rem;
  gap: 0.22rem;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  line-height: 1;
}

.meta-right .progress > .tag-coding-lang .tag-coding-icon {
  width: 0.72rem;
  height: 0.72rem;
}

.meta-right-tools {
  display: flex;
  align-items: stretch;
  gap: 0.55rem;
}

.meta-right-tools .upload-open-btn {
  align-self: center;
}

.meta-actions {
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0.45rem;
  align-items: stretch;
}

.meta-actions .cta,
.meta-actions .ghost {
  box-sizing: border-box;
  min-height: 2.45rem;
  padding: 0 0.85rem;
  font-size: 0.82rem;
  line-height: 1.15;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.meta-actions .cta.cta-submit {
  border-bottom-width: 4px;
  border-bottom-color: #5c4a24;
  box-shadow:
    inset 0 1px 0 rgba(201, 165, 116, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 4px 0 #2a2210,
    0 8px 16px rgba(0, 0, 0, 0.35);
}

.meta-actions .cta.cta-submit:hover {
  box-shadow:
    inset 0 1px 0 rgba(201, 165, 116, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 6px 0 #2a2210,
    0 12px 20px rgba(0, 0, 0, 0.4);
}

.meta-actions .ghost:not(.danger) {
  border-bottom-color: #454b54;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 4px 0 #252a30,
    0 8px 14px rgba(0, 0, 0, 0.28);
}

.meta-actions .ghost:not(.danger):hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 6px 0 #252a30,
    0 12px 18px rgba(0, 0, 0, 0.32);
}

.meta-actions .ghost.danger {
  border-bottom-color: #5a2e26;
  box-shadow:
    inset 0 1px 0 rgba(255, 200, 180, 0.1),
    0 4px 0 #3a1c18,
    0 8px 14px rgba(0, 0, 0, 0.3);
}

.meta-actions .ghost.danger:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 200, 180, 0.12),
    0 6px 0 #3a1c18,
    0 12px 18px rgba(0, 0, 0, 0.32);
}

.timers {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.55rem;
  font-variant-numeric: tabular-nums;
}

.timer {
  display: grid;
  gap: 0.1rem;
  min-width: 4.5rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.28);
  text-align: right;
}

.timer-label {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-dim);
  font-weight: 600;
}

.timer-value {
  font-family: ui-monospace, "IBM Plex Mono", monospace;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--accent-hot);
}

.timer-booking {
  min-width: 6.4rem;
  text-align: right;
  border-color: rgba(201, 165, 116, 0.55);
}

.timer-booking[hidden] {
  display: none !important;
}

.timer-period {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.15;
  color: rgba(201, 165, 116, 0.78);
  white-space: nowrap;
}

.timer-booking.is-urgent {
  border-color: rgba(232, 168, 156, 0.55);
}

.timer-booking.is-urgent .timer-value {
  color: #e8a89c;
}

.timer-booking.is-urgent .timer-period {
  color: rgba(232, 168, 156, 0.85);
}

/* Float in the sticky header's RHS bleed (out of flow so it cannot shove
   Submit / Hint / Session / Upload). Wide screens: center in that bleed. */
.interview-live > .meta.meta-compact > .timer-booking {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  z-index: 3;
  transform: translateY(-50%);
  display: grid;
  align-content: center;
  justify-items: end;
  min-width: 6.6rem;
  margin: 0;
  pointer-events: none;
}

/* Content column is 72rem; center the chip in the leftover right bleed. */
@media (min-width: 72.01rem) {
  .interview-live > .meta.meta-compact > .timer-booking {
    /* B = (100vw - 72rem) / 2; pin center of chip at B/2 from the right edge. */
    right: calc((100vw - 72rem) / 4);
    transform: translate(50%, -50%);
    justify-items: center;
    text-align: center;
  }
}

@media (max-width: 1100px) {
  .interview-live > .meta.meta-compact > .timer-booking {
    right: 0.45rem;
    min-width: 5.6rem;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
  }

  .interview-live > .meta.meta-compact > .timer-booking .timer-period {
    display: none;
  }
}

@media (max-width: 860px) {
  .interview-live > .meta.meta-compact > .timer-booking {
    top: auto;
    bottom: 0.35rem;
    transform: none;
  }
}

.talk-panel {
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.22);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: min(36vh, 16rem);
  min-height: 8rem;
}

.interview-live {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: calc(100vh - 1.5rem);
  max-width: 72rem;
  margin: 0 auto;
  padding: 0.75rem 1rem 1.35rem;
  box-sizing: border-box;
  /* Desk panel may paint to the viewport right edge (2rem gutter). */
  overflow-x: visible;
  /* Fallback until JS measures the sticky meta (tags + timers + upload). */
  --interview-meta-sticky: 6.75rem;
}

/* Wordless wait rail — inside question box; only while waiting */
.question-panel {
  position: relative;
}

.interview-wait {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  height: 2px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.interview-wait.is-on,
.interview-wait:not([hidden]) {
  opacity: 1;
  visibility: visible;
}

.interview-wait[hidden] {
  display: block !important;
  opacity: 0;
  visibility: hidden;
}

.interview-wait-track {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: rgba(140, 170, 200, 0.14);
}

.interview-wait-light {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 32%;
  background: linear-gradient(
    90deg,
    rgba(180, 205, 230, 0) 0%,
    rgba(170, 200, 230, 0.35) 28%,
    rgba(230, 240, 250, 0.9) 50%,
    rgba(170, 200, 230, 0.35) 72%,
    rgba(180, 205, 230, 0) 100%
  );
  box-shadow:
    0 0 8px rgba(160, 195, 230, 0.35),
    0 0 14px rgba(120, 160, 200, 0.18);
  transform: translateX(-120%);
  animation: none;
}

.interview-wait.is-on .interview-wait-light {
  animation: interview-wait-sweep 2.8s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

@keyframes interview-wait-sweep {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(420%);
  }
}

html.interview-is-waiting {
  cursor: progress;
}

html.interview-is-waiting .interview-live .cta,
html.interview-is-waiting .interview-live .meta-actions .ghost {
  pointer-events: none;
  opacity: 0.72;
}

/* Photo upload stays available during Submit wait and after the opening answer. */
html.interview-is-waiting .interview-live .upload-open-btn {
  pointer-events: auto;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .interview-wait.is-on .interview-wait-light {
    width: 100%;
    transform: none;
    animation: interview-wait-pulse 2.4s ease-in-out infinite;
    background: linear-gradient(
      90deg,
      rgba(140, 170, 200, 0.2),
      rgba(220, 232, 245, 0.75),
      rgba(140, 170, 200, 0.2)
    );
    box-shadow: none;
  }

  @keyframes interview-wait-pulse {
    0%,
    100% {
      opacity: 0.4;
    }
    50% {
      opacity: 1;
    }
  }
}

.interview-stage {
  display: grid;
  /* Keep the layout slot at 20rem; desk shell grows to the right (not into the question column). */
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem);
  gap: 0.85rem;
  align-items: start;
  flex: 1;
  min-height: 0;
  overflow: visible;
}

.interview-main-col {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-width: 0;
  min-height: 0;
}

.interview-compose {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin-top: 0;
}

.compose-scroll {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  display: grid;
  grid-template-rows: auto minmax(12rem, 1fr) auto;
  gap: 0.65rem;
  padding-bottom: 0.35rem;
}

.actions-sticky {
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.65rem 0 0.35rem;
  margin-top: 0.25rem;
  background: linear-gradient(180deg, transparent, rgba(12, 14, 18, 0.92) 28%);
  border-top: 1px solid var(--line);
}

.interview-live .answer-panel-input {
  min-height: 0;
  height: 100%;
  resize: none;
}

.interview-live .code-box-large .code-input {
  min-height: 8rem;
}

.desk-messenger {
  min-height: 0;
  display: flex;
  align-self: start;
  position: sticky;
  /* Always clear the sticky meta head (measured via --interview-meta-sticky). */
  top: calc(var(--interview-meta-sticky, 6.75rem) + 0.75rem);
  z-index: 0;
  /*
    Left edge stays on the grid cell; grow right until 2rem remains to the
    viewport edge. (Centered 72rem column: outer margin is (100vw - W) / 2,
    live padding-right is 1rem → delta = 50vw - W/2 - 1rem.)
  */
  width: max(
    15rem,
    calc(100% + 50vw - min(72rem, 100vw) / 2 - 1rem)
  );
  max-width: none;
  /* Top sticky offset → bottom with 2rem viewport gutter. */
  max-height: calc(
    100dvh - var(--interview-meta-sticky, 6.75rem) - 0.75rem - 2rem
  );
}

.fb-shell-desk {
  width: 100%;
  min-height: 14rem;
  /* Fill down until 2rem remains above the viewport bottom. */
  height: calc(
    100dvh - var(--interview-meta-sticky, 6.75rem) - 0.75rem - 2rem
  );
  max-height: calc(
    100dvh - var(--interview-meta-sticky, 6.75rem) - 0.75rem - 2rem
  );
  grid-template-rows: auto minmax(0, 1fr);
  border-radius: 12px;
}

@supports not (height: 100dvh) {
  .desk-messenger {
    max-height: calc(
      100vh - var(--interview-meta-sticky, 6.75rem) - 0.75rem - 2rem
    );
  }

  .fb-shell-desk {
    height: calc(
      100vh - var(--interview-meta-sticky, 6.75rem) - 0.75rem - 2rem
    );
    max-height: calc(
      100vh - var(--interview-meta-sticky, 6.75rem) - 0.75rem - 2rem
    );
  }
}

.fb-shell-desk .fb-thread,
.fb-shell-desk .desk-thread {
  max-height: none;
  min-height: 0;
  overflow-y: auto;
  align-content: start;
  justify-content: start;
  gap: 0.45rem;
  padding-bottom: 1rem;
}

.question-panel .talk-panel-head .speech-role {
  letter-spacing: 0.06em;
}

@media (max-width: 860px) {
  .interview-live {
    --interview-meta-sticky: 9rem;
  }

  .meta-compact {
    grid-template-columns: 1fr auto;
  }

  .meta-actions {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .interview-stage {
    grid-template-columns: 1fr;
  }

  .fb-shell-desk {
    height: auto;
    max-height: min(
      18rem,
      calc(100dvh - var(--interview-meta-sticky, 9rem) - 0.75rem - 2rem)
    );
    min-height: 12rem;
  }

  .desk-messenger {
    position: static;
    max-height: none;
    /* Stacked layout: stay within the stage width. */
    width: 100%;
  }

  .interview-boards {
    grid-template-columns: 1fr;
  }
}

.meet {
  display: grid;
  gap: 0.85rem;
  max-width: 52rem;
  margin: 0 auto;
  width: 100%;
}

.meet-main {
  max-width: 56rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem 1.25rem;
}

.meet.meet-messenger {
  width: 100%;
}

.meet-demo-compact {
  margin-top: 0.45rem;
  padding: 0.55rem 0.75rem 0.6rem;
}

.meet-demo-compact textarea {
  min-height: 3.25rem;
  max-height: 5.5rem;
  resize: vertical;
}

.meet-demo-compact .code-input {
  min-height: 4rem;
  max-height: 7rem;
}

.meet-code-tools-demo {
  margin-top: 0.45rem;
  overflow: hidden;
}

.meet-code-tools-demo .code-box-bar {
  pointer-events: none;
}

.meet-code-tools-demo.is-interactive .code-box-bar {
  pointer-events: auto;
}

.meet-code-tools-demo:not(.is-interactive) .code-tool-btn:disabled {
  opacity: 1;
  cursor: default;
}

.meet-code-tools-demo .code-input.meet-code-tools-input,
textarea.meet-code-tools-input {
  box-sizing: border-box;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  /* Two stub lines + padding — no spare vertical void */
  field-sizing: content;
  padding: 0.55rem 0.85rem 0.65rem;
  resize: none !important;
  overflow: hidden;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 0.9rem;
  line-height: 1.45;
}

@supports not (field-sizing: content) {
  .meet-code-tools-demo .code-input.meet-code-tools-input,
  textarea.meet-code-tools-input {
    height: 3.35rem !important;
    min-height: 3.35rem !important;
    max-height: 3.35rem !important;
  }
}

.meet-code-tools-demo .code-run-panel {
  margin: 0;
  border-top: 1px solid rgba(168, 134, 92, 0.22);
}

.meet-code-tools-guide {
  list-style: none;
  margin: 0;
  padding: 0.65rem 0.85rem 0.75rem;
  display: grid;
  gap: 0.4rem;
  border-top: 1px solid rgba(168, 134, 92, 0.22);
  background: rgba(0, 0, 0, 0.22);
}

.meet-code-tools-guide li {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--paper-dim);
}

.meet-code-tools-guide strong {
  color: var(--accent-hot);
  font-weight: 700;
}

.meet-code-tools-aside {
  margin-top: 0.55rem;
}

/* Walkthrough answer practice — same type box as live interview, compact */
.meet-demo-answer-panel.answer-panel {
  margin-top: 0.45rem;
  max-height: none;
  min-height: 0;
  height: auto;
  flex: none;
}

.meet-demo-answer-panel .answer-panel-head {
  padding: 0.45rem 0.75rem;
}

.meet-demo-answer-panel .answer-panel-body {
  padding: 0.55rem 0.7rem 0.65rem;
}

.meet-demo-answer-panel .answer-panel-input {
  min-height: 3.5rem;
  max-height: 6.5rem;
  height: auto;
  resize: vertical;
  font-size: 0.95rem;
  line-height: 1.45;
  border-radius: 10px;
  padding: 0.55rem 0.7rem;
}

.meet-demo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
  align-items: stretch;
}

.meet-demo-actions .cta.cta-submit,
.meet-demo-actions .ghost {
  box-sizing: border-box;
  min-height: 2.45rem;
  padding: 0 0.85rem;
  font-size: 0.82rem;
  line-height: 1.15;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.meet-demo-actions .cta.cta-submit {
  border-bottom-width: 4px;
  border-bottom-color: #5c4a24;
  box-shadow:
    inset 0 1px 0 rgba(201, 165, 116, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 4px 0 #2a2210,
    0 8px 16px rgba(0, 0, 0, 0.35);
}

/* Clickable walkthrough CTA — shine only (no gold fill); see desk-key block */

.meet-demo-actions .ghost:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.meet-demo-actions .cta.cta-submit:disabled,
.meet-demo-actions .cta.cta-submit[aria-disabled="true"] {
  opacity: 0.72;
}

/* —— Desk-key actions (meet walkthrough + live interview only) —— */
.interview-live .meta-actions,
.interview-live .meta-right-tools,
.meet .meet-demo-actions,
.meet .fb-composer,
.meet .meet-composer-row,
#skip-dialog .quit-dialog-actions,
#quit-dialog .quit-dialog-actions,
#skip-walkthrough-dialog .quit-dialog-actions {
  --desk-btn-h: 2.5rem;
  --desk-gold-ink: #c9a574;
  --desk-gold-ink-hot: #f3df9a;
  --desk-gold-edge: rgba(201, 165, 116, 0.72);
  --desk-gold-lip: #5c4a24;
  --desk-gold-shelf: #2a2210;
  --desk-quiet-ink: rgba(232, 239, 233, 0.82);
  --desk-quiet-edge: rgba(232, 239, 233, 0.3);
  --desk-quiet-lip: #454b54;
  --desk-quiet-shelf: #252a30;
  --desk-danger-ink: #e8a89c;
  --desk-danger-ink-hot: #f0c0b4;
  --desk-danger-edge: rgba(184, 92, 74, 0.55);
  --desk-danger-lip: #5a2e26;
  --desk-danger-shelf: #3a1c18;
}

.interview-live .meta-actions .cta.cta-submit,
.interview-live .meta-actions .ghost,
.interview-live .meta-right-tools .upload-open-btn,
.meet .meet-demo-actions .cta.cta-submit,
.meet .meet-demo-actions .ghost,
.meet .fb-composer .cta.fb-send,
.interview-live .photo-choose-btn.ghost,
.meet .photo-choose-btn.ghost,
#skip-dialog .quit-dialog-actions .ghost,
#quit-dialog .quit-dialog-actions .ghost,
#skip-walkthrough-dialog .quit-dialog-actions .ghost {
  box-sizing: border-box;
  min-height: var(--desk-btn-h);
  height: var(--desk-btn-h);
  padding: 0 1.05rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.1;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: none;
  transform: translateY(0);
  transition:
    transform 0.08s ease,
    box-shadow 0.12s ease,
    border-color 0.14s ease,
    background 0.14s ease,
    color 0.14s ease,
    filter 0.12s ease,
    opacity 0.14s ease;
}

/* Primary outline — Submit */
.interview-live .meta-actions .cta.cta-submit,
.meet .meet-demo-actions .cta.cta-submit {
  color: var(--desk-gold-ink);
  background:
    linear-gradient(180deg, rgba(201, 165, 116, 0.18) 0%, rgba(8, 12, 14, 0.72) 100%),
    #141816;
  border: 1px solid var(--desk-gold-edge);
  border-bottom: 3px solid var(--desk-gold-lip);
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 190, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 3px 0 var(--desk-gold-shelf),
    0 8px 16px rgba(0, 0, 0, 0.35);
  filter: none;
  text-shadow: 0 0 12px rgba(201, 165, 116, 0.18);
}

.interview-live .meta-actions .cta.cta-submit:hover,
.meet .meet-demo-actions .cta.cta-submit:hover {
  color: var(--desk-gold-ink-hot);
  border-color: rgba(232, 196, 140, 0.9);
  background:
    linear-gradient(180deg, rgba(201, 165, 116, 0.28) 0%, rgba(10, 14, 16, 0.65) 100%),
    #1a201c;
  filter: none;
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 210, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 5px 0 var(--desk-gold-shelf),
    0 12px 20px rgba(0, 0, 0, 0.4);
}

.interview-live .meta-actions .cta.cta-submit:active,
.meet .meet-demo-actions .cta.cta-submit:active {
  transform: translateY(1px);
  border-bottom-width: 1px;
  color: #a8865c;
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.5),
    0 1px 0 var(--desk-gold-shelf);
}

.interview-live .meta-actions .cta.cta-submit:disabled,
.interview-live .meta-actions .cta.cta-submit[aria-disabled="true"],
.meet .meet-demo-actions .cta.cta-submit:disabled,
.meet .meet-demo-actions .cta.cta-submit[aria-disabled="true"] {
  opacity: 0.62;
  color: var(--desk-gold-ink);
  cursor: not-allowed;
  transform: none;
  filter: none;
  pointer-events: none;
  box-shadow:
    inset 0 1px 0 rgba(201, 165, 116, 0.08),
    0 2px 0 var(--desk-gold-shelf);
}

/* Primary fill — Next / Send / I am ready */
.meet .fb-composer .cta.fb-send {
  color: #0c0c0e;
  font-weight: 800;
  background:
    linear-gradient(180deg, #e8d4a8 0%, #c9a574 46%, #a8865c 100%);
  border: 1px solid rgba(232, 210, 160, 0.78);
  border-bottom: 3px solid var(--desk-gold-lip);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 230, 0.5),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 3px 0 var(--desk-gold-shelf),
    0 8px 16px rgba(0, 0, 0, 0.32);
  filter: none;
  text-shadow: none;
}

.meet .fb-composer .cta.fb-send:hover {
  color: #0c0c0e;
  border-color: rgba(245, 220, 170, 0.92);
  filter: brightness(1.05);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 252, 240, 0.55),
    0 5px 0 var(--desk-gold-shelf),
    0 12px 20px rgba(0, 0, 0, 0.38);
}

.meet .fb-composer .cta.fb-send:active {
  transform: translateY(1px);
  border-bottom-width: 1px;
  filter: brightness(0.96);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.28),
    0 1px 0 var(--desk-gold-shelf);
}

.meet .fb-composer .cta.fb-send:disabled,
.meet .fb-composer .cta.fb-send[aria-disabled="true"] {
  opacity: 0.42;
  cursor: not-allowed;
  transform: none;
  filter: none;
  color: #0c0c0e;
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 230, 0.2),
    0 2px 0 var(--desk-gold-shelf);
}

/* Secondary quiet — Hint / Skip / Upload / Choose files / dialog Cancel */
.interview-live .meta-actions .ghost:not(.danger),
.interview-live .meta-right-tools .upload-open-btn.ghost,
.meet .meet-demo-actions .ghost,
.interview-live .photo-choose-btn.ghost,
.meet .photo-choose-btn.ghost,
#skip-dialog .quit-dialog-actions .ghost:not(.danger),
#quit-dialog .quit-dialog-actions .ghost:not(.danger),
#skip-walkthrough-dialog .quit-dialog-actions .ghost:not(.danger) {
  color: var(--desk-quiet-ink);
  background:
    linear-gradient(180deg, rgba(232, 239, 233, 0.1) 0%, rgba(0, 0, 0, 0.42) 100%);
  border: 1px solid var(--desk-quiet-edge);
  border-bottom: 3px solid var(--desk-quiet-lip);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 3px 0 var(--desk-quiet-shelf),
    0 8px 14px rgba(0, 0, 0, 0.28);
}

.interview-live .meta-actions .ghost:not(.danger):hover,
.interview-live .meta-right-tools .upload-open-btn.ghost:hover,
.meet .meet-demo-actions .ghost:hover:not(:disabled),
.interview-live .photo-choose-btn.ghost:hover,
.meet .photo-choose-btn.ghost:hover,
#skip-dialog .quit-dialog-actions .ghost:not(.danger):hover,
#quit-dialog .quit-dialog-actions .ghost:not(.danger):hover,
#skip-walkthrough-dialog .quit-dialog-actions .ghost:not(.danger):hover {
  color: #e8efe9;
  border-color: rgba(232, 239, 233, 0.45);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 5px 0 var(--desk-quiet-shelf),
    0 12px 18px rgba(0, 0, 0, 0.32);
}

.interview-live .meta-actions .ghost:not(.danger):active,
.interview-live .meta-right-tools .upload-open-btn.ghost:active,
.meet .meet-demo-actions .ghost:active:not(:disabled),
#skip-dialog .quit-dialog-actions .ghost:not(.danger):active,
#quit-dialog .quit-dialog-actions .ghost:not(.danger):active,
#skip-walkthrough-dialog .quit-dialog-actions .ghost:not(.danger):active {
  transform: translateY(1px);
  border-bottom-width: 1px;
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.45),
    0 1px 0 var(--desk-quiet-shelf);
}

/* Clickable Hint / Skip / Upload on walkthrough — cool shining bound, not gold fill */
@keyframes meet-demo-cta-shine {
  0%,
  100% {
    border-color: rgba(170, 215, 230, 0.42);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 3px 0 var(--desk-quiet-shelf),
      0 8px 14px rgba(0, 0, 0, 0.28),
      0 0 0 1px rgba(140, 200, 220, 0.28),
      0 0 14px rgba(100, 190, 220, 0.22);
  }
  50% {
    border-color: rgba(210, 240, 250, 0.88);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 3px 0 var(--desk-quiet-shelf),
      0 8px 14px rgba(0, 0, 0, 0.28),
      0 0 0 2px rgba(190, 235, 250, 0.55),
      0 0 26px rgba(120, 210, 240, 0.48);
  }
}

.meet .meet-demo-actions .ghost.is-active,
.meet .meet-demo-actions .inline-demo-form .ghost {
  color: var(--desk-quiet-ink);
  border-color: rgba(170, 215, 230, 0.55);
  border-bottom-color: var(--desk-quiet-lip);
  background:
    linear-gradient(180deg, rgba(232, 239, 233, 0.1) 0%, rgba(0, 0, 0, 0.42) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 3px 0 var(--desk-quiet-shelf),
    0 8px 14px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(140, 200, 220, 0.35),
    0 0 16px rgba(100, 190, 220, 0.28);
  animation: meet-demo-cta-shine 1.65s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .meet .meet-demo-actions .ghost.is-active,
  .meet .meet-demo-actions .inline-demo-form .ghost {
    animation: none;
    border-color: rgba(190, 230, 245, 0.75);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      0 3px 0 var(--desk-quiet-shelf),
      0 0 0 2px rgba(170, 220, 240, 0.5),
      0 0 18px rgba(110, 200, 230, 0.4);
  }
}

.meet .meet-demo-actions .ghost:disabled {
  opacity: 0.34;
  cursor: not-allowed;
  transform: none;
}

/* Hint used — quiet transparent disabled (same family as Skip, faded) */
.interview-live .meta-actions .ghost:not(.danger):disabled {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  filter: none;
  color: rgba(232, 239, 233, 0.55);
  background:
    linear-gradient(180deg, rgba(232, 239, 233, 0.04) 0%, rgba(0, 0, 0, 0.22) 100%);
  border: 1px solid rgba(232, 239, 233, 0.16);
  border-bottom: 3px solid rgba(69, 75, 84, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 2px 0 rgba(37, 42, 48, 0.55);
  text-shadow: none;
  letter-spacing: 0.1em;
  padding: 0 0.85rem;
}

/* Quit / Skip question / Skip walkthrough confirm — danger coral desk-key */
.interview-live .meta-actions .ghost.danger,
#skip-dialog .quit-dialog-actions .ghost.danger,
#quit-dialog .quit-dialog-actions .ghost.danger,
#skip-walkthrough-dialog .quit-dialog-actions .ghost.danger {
  color: var(--desk-danger-ink);
  border: 1px solid var(--desk-danger-edge);
  border-bottom: 3px solid var(--desk-danger-lip);
  background:
    linear-gradient(180deg, rgba(232, 160, 144, 0.12) 0%, rgba(0, 0, 0, 0.45) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 200, 180, 0.12),
    0 3px 0 var(--desk-danger-shelf),
    0 8px 14px rgba(0, 0, 0, 0.3);
  filter: none;
  text-shadow: none;
}

.interview-live .meta-actions .ghost.danger:hover,
#skip-dialog .quit-dialog-actions .ghost.danger:hover,
#quit-dialog .quit-dialog-actions .ghost.danger:hover,
#skip-walkthrough-dialog .quit-dialog-actions .ghost.danger:hover {
  color: var(--desk-danger-ink-hot);
  border-color: rgba(232, 160, 144, 0.72);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 200, 180, 0.16),
    0 5px 0 var(--desk-danger-shelf),
    0 12px 18px rgba(0, 0, 0, 0.34);
}

.interview-live .meta-actions .ghost.danger:active,
#skip-dialog .quit-dialog-actions .ghost.danger:active,
#quit-dialog .quit-dialog-actions .ghost.danger:active,
#skip-walkthrough-dialog .quit-dialog-actions .ghost.danger:active {
  transform: translateY(1px);
  border-bottom-width: 1px;
  color: #d09084;
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.5),
    0 1px 0 var(--desk-danger-shelf);
}

/* Upload — same quiet desk-key as Hint/Skip; lock size vs timer stretch */
.interview-live .meta-right-tools .upload-open-btn.ghost {
  align-self: center;
  flex: 0 0 auto;
  height: var(--desk-btn-h);
  min-height: var(--desk-btn-h);
  max-height: var(--desk-btn-h);
  gap: 0.4rem;
  padding: 0 0.95rem;
  font: inherit;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.1;
  border-radius: 2px;
}

.interview-live .meta-right-tools .upload-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.22rem;
  border-radius: 2px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1;
  color: #0c0c0e;
  background: linear-gradient(180deg, #e8d4a8 0%, #c9a574 55%, #a8865c 100%);
  border: 1px solid rgba(232, 210, 160, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 248, 230, 0.35);
}

/* Skip walkthrough — keep dashed red; match height only */
.meet .meet-composer-row .meet-skip-walkthrough {
  min-height: var(--desk-btn-h);
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.inline-demo-form {
  margin: 0;
  display: inline;
}

.fb-composer-hint {
  margin: 0;
  color: #8b929a;
  font-size: 0.88rem;
}

.meet-demo-question {
  margin: 0.65rem 0 0.75rem;
  padding: 0.75rem 0.85rem;
  background: #1a1d24;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: #e8eaed;
}

.meet-demo-question p {
  margin: 0;
}

.meet-q-label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8b929a;
  font-weight: 600;
}

.meet-demo-question.is-next {
  border-color: rgba(168, 134, 92, 0.45);
  background: rgba(168, 134, 92, 0.08);
}

.meet .hint-box.meet-hint-demo {
  margin: 0 0 0.5rem;
}

.meet-lede {
  margin: 0;
  color: var(--paper-dim);
  font-size: 0.98rem;
}

/* Dark Messenger-style shell */
.fb-shell {
  display: grid;
  grid-template-rows: auto minmax(12rem, 1fr) auto auto;
  min-height: min(70vh, 38rem);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  background: #0e0f12;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.meet .fb-shell {
  min-height: 0;
  grid-template-rows: auto auto auto auto;
}

.meet .fb-thread {
  /* Tutorial: ~2 bubbles tall (not the full warmup history). */
  min-height: 0;
  max-height: min(16vh, 7.5rem);
  padding-top: 0.7rem;
  padding-bottom: 0.75rem;
  gap: 0.55rem;
}

.fb-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: #16181d;
}

.fb-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 1rem;
  color: #0e0f12;
  background: linear-gradient(145deg, #a8865c, #6e5840);
  flex-shrink: 0;
}

.fb-avatar-sm {
  width: 1.85rem;
  height: 1.85rem;
  font-size: 0.8rem;
  align-self: flex-end;
  margin-bottom: 0.15rem;
}

.fb-avatar-photo {
  padding: 0;
  border-radius: 999px;
  display: block;
  object-fit: cover;
  object-position: center 18%;
  background: #16181d;
  border: 1px solid rgba(168, 134, 92, 0.35);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.fb-avatar-sm.fb-avatar-photo {
  object-position: center 20%;
}

.fb-name {
  margin: 0;
  font-weight: 600;
  color: #f2f3f5;
}

.fb-status {
  margin: 0.1rem 0 0;
  font-size: 0.78rem;
  color: #8b929a;
}

.fb-thread {
  overflow-y: auto;
  padding: 1.1rem 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: #0e0f12;
  min-height: 10rem;
  max-height: min(32vh, 16rem);
}

.fb-row {
  display: flex;
  gap: 0.45rem;
  align-items: flex-end;
  max-width: 92%;
}

.fb-row-them {
  align-self: flex-start;
}

.fb-bubble {
  background: #2a2d34;
  color: #e8eaed;
  border-radius: 18px;
  border-bottom-left-radius: 5px;
  padding: 0.7rem 0.95rem;
  line-height: 1.45;
  font-size: 0.98rem;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

.fb-bubble-hint {
  background: #1f3d38;
  color: #d8ebe4;
  border: 1px solid rgba(94, 168, 148, 0.42);
  box-shadow: 0 0 0 1px rgba(94, 168, 148, 0.1);
}

.fb-bubble.is-typing {
  color: #8b929a;
  font-style: italic;
}

.replying-dots {
  display: inline-flex;
  margin-left: 0.08rem;
}

.replying-dots span {
  animation: replying-dot 1.1s ease-in-out infinite;
  opacity: 0.25;
}

.replying-dots span:nth-child(2) {
  animation-delay: 0.18s;
}

.replying-dots span:nth-child(3) {
  animation-delay: 0.36s;
}

@keyframes replying-dot {
  0%,
  70%,
  100% {
    opacity: 0.25;
    transform: translateY(0);
  }
  35% {
    opacity: 1;
    transform: translateY(-0.08rem);
  }
}

.fb-demo {
  padding: 0.75rem 1rem 0.35rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: #12141a;
}

.fb-demo-note {
  margin: 0;
  color: #8b929a;
  font-size: 0.9rem;
}

.meet-demo-box {
  margin: 0;
}

.meet-demo-box textarea {
  cursor: default;
  color: var(--paper-dim);
  width: 100%;
}

.fb-composer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem 0.95rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: #16181d;
}

.fb-dots {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}

.fb-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: #3a3f48;
}

.fb-dot.is-on {
  background: #a8865c;
  transform: scale(1.15);
}

.fb-dot.is-done {
  background: #6b7280;
}

.fb-row-me {
  align-self: flex-end;
  flex-direction: row-reverse;
  margin-left: auto;
}

.fb-bubble-me {
  background: #3a5a8c;
  border-radius: 18px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 18px;
}

.fb-target {
  margin: 0.35rem 0 0.75rem;
  padding: 0.65rem 0.8rem;
  background: rgba(168, 134, 92, 0.12);
  border: 1px dashed rgba(168, 134, 92, 0.45);
  color: #e8eaed;
  white-space: pre-wrap;
  font-size: 0.92rem;
}

.practice-form {
  margin: 0;
  display: grid;
  gap: 0.5rem;
}

.meet-hint-err {
  color: #e08a7a;
}

.meet-demo-box textarea:not([readonly]) {
  cursor: text;
  color: var(--paper);
}

.fb-send:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.fb-composer form {
  margin: 0;
}

/* legacy meet-chat removed from flow; keep minimal if referenced */
.meet-chat,
.meet-thread,
.meet-form {
  display: none;
}

@media (max-width: 860px) {
  .interview-boards {
    grid-template-columns: 1fr;
  }
}

.desk-chat {
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.18);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: min(48vh, 26rem);
  min-height: 12rem;
}

.desk-thread {
  overflow-y: auto;
  padding: 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.4rem;
  scroll-behavior: auto;
}

.desk-msg {
  border-left: 3px solid rgba(168, 134, 92, 0.62);
  padding-left: 0.55rem;
  margin: 0;
}

.desk-msg.desk-msg-me,
.desk-msg.fb-row-me {
  border-left: none;
  padding-left: 0;
  max-width: min(92%, 22rem);
}

.desk-focus-space {
  flex: 0 0 0;
  pointer-events: none;
}

.desk-msg-body {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--paper);
}

.desk-placeholder .desk-msg-body {
  color: var(--paper-dim);
  font-size: 0.85rem;
}

.talk-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.65rem;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--line);
  background: rgba(28, 30, 34, 0.55);
}

.talk-panel-head-main {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.5rem;
  min-width: 0;
  flex: 1 1 auto;
}

.question-lang-tags {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
}

.question-lang-tags .tag-coding-lang {
  margin-left: 0;
  font-size: 0.62rem;
  padding: 0.12rem 0.38rem 0.12rem 0.3rem;
  line-height: 1.15;
}

.question-lang-tags .tag-coding-icon {
  width: 0.78rem;
  height: 0.78rem;
}

.talk-thread {
  overflow-y: auto;
  padding: 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  scroll-behavior: auto;
}

.talk-thread-chat .talk-msg {
  max-width: 88%;
  min-width: 0;
  border: none;
  padding: 0;
}

.talk-thread-chat .talk-msg[data-kind="question"],
.talk-thread-chat .talk-msg[data-kind="probe"],
.talk-thread-chat .talk-msg[data-kind="hint"] {
  max-width: min(96%, 42rem);
}

.talk-row-them {
  align-self: flex-start;
}

.talk-row-me {
  align-self: flex-end;
}

.talk-row-them .talk-msg-body {
  background: #2a2d34;
  color: #e8eaed;
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  padding: 0.65rem 0.85rem;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-wrap: anywhere;
}

.talk-thread-chat .talk-msg-body .latex-code-box {
  margin: 0.55rem 0;
}

.talk-row-me .talk-msg-body {
  background: #3a5a8c;
  color: #e8eaed;
  border-radius: 14px;
  border-bottom-right-radius: 4px;
  padding: 0.65rem 0.85rem;
  text-align: left;
}

/* Submitted code in the Q&A thread — same code-box language as the editor */
.talk-thread-chat .talk-msg-body--with-code {
  display: grid;
  gap: 0.55rem;
  max-width: min(36rem, 92vw);
  padding: 0.55rem 0.65rem 0.65rem;
}

.talk-thread-chat .talk-code-box {
  margin: 0;
  border-color: rgba(201, 165, 116, 0.28);
  background:
    linear-gradient(180deg, rgba(12, 14, 12, 0.55), rgba(6, 7, 6, 0.72));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.talk-thread-chat .talk-code-box .code-box-bar {
  padding: 0.4rem 0.55rem;
}

.talk-thread-chat .talk-code-box .code-text {
  margin: 0;
  padding: 0.55rem 0.65rem 0.7rem;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 0.82rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: rgba(232, 239, 233, 0.92);
}

.talk-row-them[data-kind="probe"] .talk-msg-body {
  border-left: 3px solid rgba(168, 134, 92, 0.7);
}

.talk-row-them[data-kind="hint"] .talk-msg-body {
  border-left: 3px solid rgba(201, 165, 116, 0.65);
}

.talk-hint-label {
  margin: 0 0 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(201, 165, 116, 0.88);
}

.talk-row-them[data-kind="hint_nudge"] .talk-msg-body {
  border-left: 3px solid rgba(201, 165, 116, 0.45);
  color: rgba(232, 239, 233, 0.82);
  font-size: 0.95em;
}

.talk-thread-chat .talk-msg-body.latex-body,
.talk-thread-chat .talk-msg-body .problem {
  border: none;
}

.talk-msg-body {
  margin: 0;
}

.talk-msg-body.latex-body .problem {
  padding: 0;
  border: none;
  background: transparent;
}

.answer-form-priority {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.25rem;
  animation: rise 0.6s 0.08s ease-out both;
}

.answer-panel {
  max-height: none;
  min-height: 12rem;
  flex: 1;
  height: 100%;
  background: rgba(8, 10, 12, 0.72);
  border-color: rgba(232, 239, 233, 0.2);
}

.answer-panel-head {
  padding: 0.7rem 1rem;
  background: linear-gradient(180deg, rgba(36, 40, 44, 0.95), rgba(22, 24, 28, 0.92));
  border-bottom: 1px solid rgba(168, 134, 92, 0.35);
}

.answer-panel-label {
  margin: 0;
  display: block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #f2f4f6;
  cursor: text;
}

.answer-panel-body {
  padding: 0.85rem 0.95rem 1rem;
  min-height: 0;
  display: grid;
}

.answer-panel-input {
  width: 100%;
  min-height: min(42vh, 22rem);
  margin: 0;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: #2a2d34;
  color: #e8eaed;
  font: inherit;
  font-size: 1rem;
  line-height: 1.6;
  resize: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.answer-panel-input::placeholder {
  color: #8b929a;
}

.answer-panel-input:focus {
  outline: none;
  border-color: rgba(168, 134, 92, 0.45);
  box-shadow: 0 0 0 1px rgba(168, 134, 92, 0.18);
}

.compose-save-note {
  margin: 0.55rem 0 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--paper-dim);
}

.fb-demo .compose-save-note {
  margin-top: 0.65rem;
  max-width: 36rem;
}

.answer-box-large {
  margin-top: 0;
  height: 100%;
  grid-template-rows: auto minmax(0, 1fr);
}

.answer-box-large textarea {
  min-height: min(42vh, 22rem);
  font-size: 1rem;
  line-height: 1.6;
}

.code-box-large .code-input {
  min-height: min(36vh, 18rem);
}


.interview .meta {
  margin-bottom: 1.25rem;
  animation: rise 0.5s ease-out both;
}

.interview .role {
  font-family: var(--font-display);
  font-size: 1.35rem;
  margin: 0;
}

.interview .desk,
.interview .progress {
  margin: 0.25rem 0 0;
  color: var(--paper-dim);
  font-size: 0.92rem;
}

.tag {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--line);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
}

/* Ban status chips — distinct from gold role tags and from each other */
.tag.tag--login-ban {
  color: #d9a8ec;
  border-color: rgba(168, 108, 196, 0.62);
  background: rgba(46, 22, 54, 0.72);
}

.tag.tag--booking-ban {
  color: #f0b888;
  border-color: rgba(201, 132, 72, 0.62);
  background: rgba(52, 30, 14, 0.72);
}

.tag.tag--no-show {
  color: #f0b090;
  border-color: rgba(196, 110, 78, 0.7);
  background: rgba(48, 22, 16, 0.88);
}

.tag.tag--scheduled {
  color: #7ecfc0;
  border-color: rgba(64, 168, 152, 0.55);
  background: rgba(10, 28, 26, 0.72);
}

.tag.tag--used,
.tag.tag--completed {
  color: #b8c0c8;
  border-color: rgba(140, 150, 165, 0.55);
  background: rgba(22, 26, 32, 0.88);
}

.tag.tag--cancelled,
.tag.tag--past {
  color: #9a958c;
  border-color: rgba(120, 112, 100, 0.5);
  background: rgba(28, 26, 22, 0.88);
}

.tag.coding {
  color: #e0b080;
  border-color: rgba(196, 130, 80, 0.5);
}

.tag-coding-lang {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  color: #e8c49a;
  border-color: rgba(196, 130, 80, 0.55);
  background: rgba(72, 42, 22, 0.45);
  text-transform: none;
  letter-spacing: 0.04em;
}

/* SQL: same coding-pill shape, cooler teal sibling of the Python warm tone */
.tag-coding-lang.tag-coding-sql {
  color: #9fd4c8;
  border-color: rgba(90, 170, 155, 0.58);
  background: rgba(22, 48, 46, 0.5);
}

.tag.coding.tag-coding-sql,
.code-langs .tag.coding.tag-coding-sql {
  color: #9fd4c8;
  border-color: rgba(90, 170, 155, 0.55);
}

.tag-coding-icon {
  width: 0.85rem;
  height: 0.85rem;
  flex: 0 0 auto;
  display: block;
}

.tag-coding-sep {
  opacity: 0.55;
}

.coding-scope-label {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.32rem 0.4rem;
}

.coding-scope-kicker,
.coding-scope-note {
  font-family: var(--font-herald);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-dim);
}

.coding-scope-label .tag-coding-lang {
  margin-left: 0;
}

.hero > .lede:has(+ .coding-scope-label) {
  margin-bottom: 0.55rem;
}

.hero > .coding-scope-label {
  margin: 0 0 1.45rem;
}

.rpg-dossier-flags .tag-coding-lang {
  text-transform: none;
  letter-spacing: 0.04em;
  padding: 0.14rem 0.4rem 0.14rem 0.32rem;
  font-size: 0.64rem;
}

.tag-skipped,
.tag-quit {
  color: #e8a89c;
  border-color: rgba(184, 92, 74, 0.55);
  background: rgba(184, 92, 74, 0.14);
}

.tag-empty {
  color: var(--paper-dim);
  border-color: rgba(232, 239, 233, 0.22);
  background: var(--ink-soft);
}

.tag-hint {
  color: #f0e6c8;
  border-color: rgba(168, 134, 92, 0.5);
  background: rgba(168, 134, 92, 0.14);
}

.tag-off-topic {
  --ot-text: #ffd0a8;
  --ot-accent: #ff7a28;
  --ot-border: rgba(255, 106, 42, 0.82);
  --ot-bg-top: rgba(78, 26, 8, 0.92);
  --ot-bg-bot: rgba(42, 14, 4, 0.96);
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  margin-left: 0;
  padding: 0.22rem 0.62rem 0.22rem 0.48rem;
  border: 1px solid var(--ot-border);
  border-left: 3px solid var(--ot-accent);
  border-radius: 3px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ot-text);
  background: linear-gradient(165deg, var(--ot-bg-top), var(--ot-bg-bot));
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.42),
    0 2px 8px rgba(255, 90, 20, 0.16),
    inset 0 1px 0 rgba(255, 190, 130, 0.1);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  white-space: nowrap;
}

.tag-off-topic::before {
  content: "⚠";
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ot-accent);
  text-shadow: 0 0 6px rgba(255, 110, 40, 0.45);
}

.answer-box-head .tag-off-topic {
  margin-left: 0;
  font-size: 0.64rem;
  gap: 0.28rem;
  padding: 0.2rem 0.55rem 0.2rem 0.44rem;
}

.rpg-quest-guard-tags .tag-off-topic {
  font-size: 0.58rem;
  gap: 0.22rem;
  padding: 0.12rem 0.38rem 0.12rem 0.34rem;
  letter-spacing: 0.07em;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.38),
    0 1px 5px rgba(255, 90, 20, 0.14);
}

.rpg-quest-guard-tags .tag-off-topic::before {
  font-size: 0.62rem;
}

.rpg-dossier-flags .tag-off-topic {
  font-size: 0.62rem;
  gap: 0.24rem;
  padding: 0.14rem 0.42rem 0.14rem 0.38rem;
}

.rpg-dossier-flags .tag-off-topic::before {
  font-size: 0.66rem;
}

.tag-malice {
  color: #e8a89c;
  border-color: rgba(184, 92, 74, 0.6);
  background: rgba(184, 92, 74, 0.16);
}

.photo-grade-notice {
  margin: 0.35rem 0 0.55rem;
  padding: 0.55rem 0.7rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: rgba(239, 230, 200, 0.92);
  border: 1px solid rgba(168, 134, 92, 0.4);
  background: rgba(168, 134, 92, 0.1);
}

.answer-box-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.55rem;
  margin-bottom: 0.55rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(232, 239, 233, 0.14);
}

.answer-box-head .section-title {
  margin: 0;
}

.answer-box > .section-title:first-child {
  margin: 0 0 0.55rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(232, 239, 233, 0.14);
}

.tag-time {
  color: var(--accent-hot);
  border-color: rgba(168, 134, 92, 0.45);
  background: rgba(168, 134, 92, 0.1);
  font-variant-numeric: tabular-nums;
}

.result-timers {
  display: flex;
  gap: 0.75rem;
  margin: 0.75rem 0 1.25rem;
}

.score-summary {
  display: grid;
  gap: 0.75rem;
  margin: 0.75rem 0 1.5rem;
  padding: 0.95rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* Session cube — hangs outside question log panel (not clipped) */
.result:has(> .rpg-result-log > .result-suggest-cube-anchor) {
  overflow: visible;
}

.result > .rpg-result-log:has(> .result-suggest-cube-anchor) {
  position: relative;
  overflow: visible;
}

main:has(.result > .rpg-result-log > .result-suggest-cube-anchor) {
  overflow: visible;
}

:root {
  --study-suggest-done-split-height: 31rem;
}

.result > .rpg-result-log > .result-suggest-cube-anchor {
  position: fixed;
  left: calc((100vw + min(72rem, 100vw)) / 2 - 7.5rem);
  bottom: calc(
    100vh - var(--desk-chrome-clear) - var(--study-suggest-split-margin-top, 2rem) -
      var(--study-suggest-done-split-height) + 0.55rem - 5rem
  );
  right: auto;
  margin: 0;
  transform: none;
  z-index: 10;
  pointer-events: none;
}

.result > .rpg-result-log > .result-suggest-cube-anchor .study-suggest-cube {
  pointer-events: auto;
}

/* Done / details — drop viewport corner brackets (conflict with panels) */
body:has(.result) .sao-fx-bracket--tl,
body:has(.result) .sao-fx-bracket--br,
body:has(.main-status) .sao-fx-bracket--tl,
body:has(.main-status) .sao-fx-bracket--br {
  display: none;
}

@media (max-width: 900px) {
  .result > .rpg-result-log > .result-suggest-cube-anchor {
    left: auto;
    right: 0.75rem;
  }

  body:has(main.main-status),
  html:has(main.main-status) {
    height: auto;
    overflow: auto;
  }

  main.main-status {
    height: auto;
    max-height: none;
    justify-content: flex-start;
  }

  .main-status .rpg-status-split {
    transform: none;
  }
}

.rpg-scoreboard {
  display: grid;
  grid-template-columns: minmax(9.5rem, 0.85fr) minmax(0, 1.35fr) auto;
  gap: 1rem 1.25rem;
  align-items: center;
  width: 100%;
  padding: 1rem 1.15rem 1.1rem;
  border: 1px solid var(--frame-edge);
  border-bottom: var(--frame-bevel) solid var(--frame-lip);
  border-radius: var(--frame-radius);
  background:
    linear-gradient(180deg, rgba(168, 134, 92, 0.14) 0%, rgba(0, 0, 0, 0.38) 100%),
    linear-gradient(160deg, rgba(168, 134, 92, 0.1), transparent 45%);
  box-shadow: var(--frame-shadow-3d);
}

.rpg-scoreboard-main {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.rpg-scoreboard-meta {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0.15rem 0.85rem;
  border-left: 1px solid rgba(168, 134, 92, 0.28);
  border-right: 1px solid rgba(168, 134, 92, 0.28);
  min-width: 0;
}

.rpg-scoreboard-outcome {
  position: relative;
  display: grid;
  gap: 0.28rem;
  align-content: center;
  justify-items: start;
  margin: 0;
  padding: 0.35rem 1rem;
  border-left: 1px solid rgba(168, 134, 92, 0.28);
  border-right: 1px solid rgba(168, 134, 92, 0.28);
  min-width: 0;
}

.rpg-outcome-kicker {
  margin: 0;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(168, 134, 92, 0.78);
  font-weight: 700;
}

.rpg-outcome-label {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 3.5vw, 1.95rem);
  font-weight: 700;
  line-height: 1.05;
  color: #efe6c8;
  letter-spacing: -0.02em;
}

.rpg-outcome-headline {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.35;
  color: rgba(232, 239, 233, 0.88);
}

.rpg-outcome-chip {
  display: inline-flex;
  align-items: center;
  margin-top: 0.15rem;
  padding: 0.18rem 0.55rem;
  border: 1px solid rgba(168, 134, 92, 0.42);
  border-radius: 2px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-hot);
  background: rgba(0, 0, 0, 0.28);
}

.rpg-outcome-chip-cleared {
  border-color: rgba(168, 134, 92, 0.55);
  color: #b7e0c8;
  background: rgba(46, 90, 70, 0.35);
}

.rpg-outcome-chip-drilling {
  border-color: rgba(168, 134, 92, 0.4);
  color: rgba(232, 214, 160, 0.92);
}

.rpg-outcome-note {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(197, 212, 200, 0.78);
  max-width: 28rem;
}

.rpg-outcome-ace .rpg-outcome-label,
.rpg-outcome-strong .rpg-outcome-label {
  color: var(--accent-hot);
}

.rpg-outcome-solid .rpg-outcome-label {
  color: #d8ecc8;
}

.rpg-outcome-building .rpg-outcome-label,
.rpg-outcome-warmup .rpg-outcome-label {
  color: #e8d6a8;
}

.rpg-scoreboard-meta-row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0.45rem 0.65rem;
  align-items: baseline;
}

.rpg-scoreboard-meta-row dt {
  margin: 0;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(168, 134, 92, 0.78);
}

.rpg-scoreboard-meta-row dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.3;
  color: #efe6c8;
  overflow-wrap: anywhere;
}

.rpg-scoreboard-label {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}

.rpg-scoreboard-value {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 3.1rem);
  font-weight: 700;
  line-height: 0.95;
  color: var(--accent-hot);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

.rpg-scoreboard-value small {
  font-size: 0.5em;
  margin-left: 0.08em;
  font-weight: 600;
  opacity: 0.85;
}

.rpg-scoreboard-bar {
  display: block;
  height: 0.55rem;
  margin-top: 0.15rem;
  max-width: 18rem;
  border: 1px solid rgba(232, 239, 233, 0.14);
  background: rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.rpg-scoreboard-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #3e6e5c, var(--accent-hot));
  transform-origin: left center;
  animation: rpg-fill 0.45s ease-out both;
}

.rpg-scoreboard-strong .rpg-scoreboard-value {
  color: #9ed4b4;
}

.rpg-scoreboard-strong .rpg-scoreboard-fill {
  background: linear-gradient(90deg, #2f6b4f, #8fd4ab);
}

.rpg-scoreboard-strong {
  border-color: rgba(90, 158, 122, 0.65);
}

.rpg-scoreboard-fair .rpg-scoreboard-value {
  color: #c9a574;
}

.rpg-scoreboard-fair .rpg-scoreboard-fill {
  background: linear-gradient(90deg, #7a6340, #c9a574);
}

.rpg-scoreboard-fair {
  border-color: rgba(168, 134, 92, 0.62);
}

.rpg-scoreboard-weak {
  border-color: rgba(184, 92, 74, 0.55);
}

.rpg-scoreboard-weak .rpg-scoreboard-value {
  color: #e8a090;
}

.rpg-scoreboard-weak .rpg-scoreboard-fill {
  background: linear-gradient(90deg, #8a4538, #e8a090);
}

.rpg-scoreboard-null .rpg-scoreboard-value {
  color: var(--paper-dim);
}

.rpg-scoreboard-pending .rpg-scoreboard-value {
  color: #c9a574;
}

.rpg-scoreboard-pending .rpg-scoreboard-main {
  align-content: start;
  gap: 0.55rem;
}

.rpg-scoreboard-pending .score-pending-note {
  margin: 0;
  max-width: 14rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.35;
  color: #efe6c8;
}

.rpg-scoreboard .score-pending-note {
  margin: 0.35rem 0 0;
  font-size: 0.88rem;
  font-weight: 400;
  color: rgba(214, 199, 160, 0.78);
}

/* Middle column = judge progress (replaces repeating Outcome copy) */
.score-grading-outcome {
  gap: 0.45rem;
  align-content: center;
  justify-items: stretch;
  width: 100%;
  min-width: 0;
}

.score-grading-outcome .score-grading-status {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  margin: 0;
}

.score-grading-word {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.4vw, 1.85rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #efe6c8;
  line-height: 1;
}

.score-grading-dots {
  display: inline-flex;
  gap: 0.18rem;
  align-items: center;
  min-width: 1.1rem;
}

.score-grading-dots i {
  display: block;
  width: 0.22rem;
  height: 0.22rem;
  border-radius: 50%;
  background: rgba(201, 165, 116, 0.75);
  animation: score-grading-dot 1.1s ease-in-out infinite;
}

.score-grading-dots i:nth-child(2) {
  animation-delay: 0.18s;
}

.score-grading-dots i:nth-child(3) {
  animation-delay: 0.36s;
}

@keyframes score-grading-dot {
  0%,
  80%,
  100% {
    opacity: 0.25;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-0.12rem);
  }
}

.score-grading-pct {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: #c9a574;
  line-height: 1;
}

.score-grading-track {
  position: relative;
  display: block;
  width: 100%;
  max-width: 22rem;
  height: 0.55rem;
  overflow: hidden;
  border: 1px solid rgba(232, 239, 233, 0.14);
  background: rgba(0, 0, 0, 0.5);
}

.score-grading-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #7a6340, #c9a574, #c4e0a8);
  transition: width 0.55s ease-out;
}

.score-grading-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 236, 180, 0.05) 40%,
    rgba(255, 236, 180, 0.45) 50%,
    rgba(255, 236, 180, 0.05) 60%,
    transparent 100%
  );
  background-size: 45% 100%;
  background-repeat: no-repeat;
  animation: score-grading-sheen 1.65s linear infinite;
  pointer-events: none;
}

@keyframes score-grading-sheen {
  0% {
    background-position: -40% 0;
  }
  100% {
    background-position: 140% 0;
  }
}

.score-grading-caption {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: rgba(196, 186, 160, 0.72);
}

.score-summary.score-grading-done .score-grading-fill {
  background: linear-gradient(90deg, #2f6b4f, #8fd4ab);
}

.score-summary.score-grading-done .score-grading-sheen,
.score-summary.score-grading-timeout .score-grading-sheen,
.score-summary.score-grading-timeout .score-grading-dots {
  animation: none;
  opacity: 0;
}

.score-grading-refresh {
  margin-top: 0.35rem;
  justify-self: start;
}

/* Session time — same line-boundary plate as question timer */
.rpg-session-clock {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  min-width: 6.5rem;
  padding: 0.55rem 0.7rem 0.5rem;
  color: var(--paper-dim);
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.28);
  text-align: center;
}

button.rpg-session-clock {
  position: relative;
  font: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  overflow: visible;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

button.rpg-session-clock:hover,
button.rpg-session-clock:focus-visible,
button.rpg-session-clock.is-open {
  border-color: rgba(168, 134, 92, 0.55);
  background: rgba(12, 22, 18, 0.92);
  color: var(--paper);
  box-shadow: 0 0 0 1px rgba(168, 134, 92, 0.22);
}

button.rpg-session-clock:focus-visible {
  outline: 2px solid rgba(201, 165, 116, 0.65);
  outline-offset: 2px;
}

.rpg-session-clock.is-ledger .rpg-clock-emblem {
  width: 2.6rem;
  height: 2.6rem;
  margin: 0 auto;
}

.rpg-session-clock.is-ledger .rpg-hourglass {
  width: 1.85rem;
  height: 2.45rem;
  color: rgba(201, 165, 116, 0.75);
  transition:
    color 0.22s ease,
    opacity 0.22s ease,
    filter 0.22s ease;
}

.rpg-session-clock.is-ledger:hover .rpg-clock-glow,
.rpg-session-clock.is-ledger.is-open .rpg-clock-glow {
  opacity: 0;
}

.rpg-session-clock.is-ledger:hover .rpg-hourglass,
.rpg-session-clock.is-ledger:focus-visible .rpg-hourglass,
.rpg-session-clock.is-ledger.is-open .rpg-hourglass {
  color: #f6e2a0;
  opacity: 1;
  filter: drop-shadow(0 0 7px rgba(201, 165, 116, 0.7));
}

.rpg-hourglass {
  width: 2.35rem;
  height: 3.1rem;
  display: block;
  opacity: 0.85;
}

.rpg-clock-time {
  font-family: ui-monospace, "IBM Plex Mono", monospace;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--accent-hot);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1;
}

.rpg-session-label {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--paper-dim);
  opacity: 1;
}

.rpg-scoreboard-main .result-actions {
  margin: 0.55rem 0 0;
  flex-basis: auto;
}

/* Done page primary action — high-contrast brand fill vs dark scoreboard. */
.rpg-scoreboard-main .result-actions .cta-details {
  display: inline-flex;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  white-space: normal;
  text-align: left;
  line-height: 1.2;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  padding: 0.85rem 0.85rem 0.8rem 1rem;
  color: #14110c;
  background: linear-gradient(165deg, #f3e6cf 0%, #e4c896 48%, #d4b078 100%);
  border: 1px solid #f0e2c4;
  border-bottom: 3px solid #5a4520;
  border-radius: 3px;
  box-shadow:
    0 1px 0 rgba(255, 248, 230, 0.65) inset,
    0 0 0 1px rgba(90, 69, 32, 0.35),
    0 6px 18px rgba(0, 0, 0, 0.45);
  transition:
    filter 0.12s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.12s ease,
    background 0.15s ease;
}

.rpg-scoreboard-main .result-actions .cta-details:hover {
  color: #14110c;
  filter: brightness(1.05);
  background: linear-gradient(165deg, #f8edd8 0%, #edd2a4 48%, #e0c08a 100%);
  border-color: #f6ebcf;
  box-shadow:
    0 1px 0 rgba(255, 248, 230, 0.8) inset,
    0 0 0 1px rgba(90, 69, 32, 0.4),
    0 8px 22px rgba(0, 0, 0, 0.5);
  transform: translateY(-1px);
}

.rpg-scoreboard-main .result-actions .cta-details:active {
  color: #14110c;
  filter: brightness(0.97);
  transform: translateY(1px);
  border-bottom-width: 2px;
  box-shadow:
    0 1px 0 rgba(255, 248, 230, 0.35) inset,
    0 0 0 1px rgba(90, 69, 32, 0.3),
    0 3px 10px rgba(0, 0, 0, 0.35);
}

.rpg-scoreboard-main .result-actions .cta-details .cta-details-label {
  flex: 1 1 auto;
  min-width: 0;
}

.rpg-scoreboard-main .result-actions .cta-details .cta-details-arrow {
  flex: 0 0 auto;
  display: block;
  width: 2.9rem;
  height: 1.95rem;
  color: #1a140c;
  opacity: 1;
  transition: transform 0.14s ease;
}

.rpg-scoreboard-main .result-actions .cta-details:hover .cta-details-arrow {
  transform: translateX(5px);
}

@media (max-width: 720px) {
  .rpg-scoreboard {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .rpg-scoreboard-meta {
    padding: 0.65rem 0;
    border-left: 0;
    border-right: 0;
    border-top: 1px solid rgba(168, 134, 92, 0.28);
    border-bottom: 1px solid rgba(168, 134, 92, 0.28);
  }

  .rpg-scoreboard-outcome {
    padding: 0.75rem 0;
    border-left: 0;
    border-right: 0;
    border-top: 1px solid rgba(168, 134, 92, 0.28);
    border-bottom: 1px solid rgba(168, 134, 92, 0.28);
  }

  .rpg-session-clock {
    justify-self: start;
  }
}

.score-pill {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 5.5rem;
}

.score-label {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.score-value {
  font-size: 1.55rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--paper);
  line-height: 1.1;
}

.score-pill-overall .score-value {
  font-size: 1.85rem;
  color: var(--accent-hot);
}

.score-hint {
  display: block;
  margin-top: 0.2rem;
  max-width: 14rem;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--paper-dim);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.score-pending {
  border-color: rgba(168, 134, 92, 0.35);
}

.score-pending-note {
  margin: 0;
  color: var(--accent-hot);
  font-size: 1rem;
  font-weight: 500;
}

.score-failed-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.65rem;
  align-items: center;
}

.score-band-legend {
  margin: 0.45rem 0 0;
  max-width: 28rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--paper-dim);
}

.score-band-legend-brief {
  margin: 0.35rem 0 0;
  padding: 0 0 0 0.55rem;
}

.quest-content-breakdown,
.coding-score-blend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  margin: 0.35rem 0 0.55rem;
  font-size: 0.78rem;
  color: var(--paper-dim);
}

.coding-score-blend-final {
  color: var(--accent-hot);
  font-weight: 600;
}

.score-failed-note {
  margin: 0.45rem 0 0;
  padding: 0.55rem 0.7rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #e8a89c;
  border: 1px solid rgba(184, 92, 74, 0.45);
  background: rgba(184, 92, 74, 0.12);
}

.tag-score {
  color: var(--accent-hot);
  border-color: rgba(168, 134, 92, 0.55);
  background: rgba(168, 134, 92, 0.16);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.tag-score.tag-score-pending {
  color: var(--accent-hot);
  border-color: rgba(201, 165, 116, 0.7);
  background: rgba(168, 134, 92, 0.22);
  animation: score-pulse 1.4s ease-in-out infinite;
}

@keyframes score-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.65;
  }
}

/* Per-question RPG score gauge (results page) */
.rpg-xp {
  position: relative;
  display: grid;
  gap: 0.12rem;
  min-width: 8.5rem;
  width: 8.5rem;
  padding: 0.35rem 0.65rem 0.45rem;
  border: 1px solid rgba(168, 134, 92, 0.45);
  background:
    linear-gradient(145deg, rgba(168, 134, 92, 0.14), transparent 55%),
    rgba(0, 0, 0, 0.38);
  text-align: right;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}

.rpg-xp::before {
  content: "";
  position: absolute;
  top: 0.28rem;
  left: 0.35rem;
  width: 0.4rem;
  height: 0.4rem;
  border: 1px solid rgba(168, 134, 92, 0.7);
  transform: rotate(45deg);
  background: rgba(201, 165, 116, 0.35);
}

.rpg-xp-label {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  padding-left: 0.55rem;
}

.rpg-xp-value {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.05;
  color: var(--accent-hot);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.rpg-xp-value small {
  font-size: 0.65em;
  margin-left: 0.05em;
  font-weight: 600;
  opacity: 0.85;
}

.rpg-xp-bar {
  display: block;
  width: 100%;
  height: 0.38rem;
  margin-top: 0.16rem;
  background: rgba(232, 239, 233, 0.1);
  overflow: hidden;
}

.rpg-xp-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #3e6e5c, var(--accent-hot));
  transform-origin: left center;
  animation: rpg-fill 0.45s ease-out both;
}

.rpg-xp-strong {
  border-color: rgba(90, 158, 122, 0.7);
}

.rpg-xp-strong .rpg-xp-value {
  color: #9ed4b4;
}

.rpg-xp-strong .rpg-xp-fill {
  background: linear-gradient(90deg, #2f6b4f, #8fd4ab);
}

.rpg-xp-fair .rpg-xp-value {
  color: #c9a574;
}

.rpg-xp-fair .rpg-xp-fill {
  background: linear-gradient(90deg, #7a6340, #c9a574);
}

.rpg-xp-fair {
  border-color: rgba(168, 134, 92, 0.55);
}

.rpg-xp-weak {
  border-color: rgba(184, 92, 74, 0.55);
}

.rpg-xp-weak .rpg-xp-value {
  color: #e8a090;
}

.rpg-xp-weak .rpg-xp-fill {
  background: linear-gradient(90deg, #8a4538, #e8a090);
}

.rpg-xp-null .rpg-xp-value {
  color: var(--paper-dim);
}

.rpg-xp-null .rpg-xp-fill {
  width: 0 !important;
}

.rpg-xp-pending {
  animation: score-pulse 1.4s ease-in-out infinite;
}

.rpg-xp-pending .rpg-xp-fill {
  animation: rpg-xp-scan 1.6s ease-in-out infinite;
}

@keyframes rpg-xp-scan {
  0%,
  100% {
    width: 20%;
    opacity: 0.5;
  }
  50% {
    width: 70%;
    opacity: 1;
  }
}

.improve-block {
  margin-top: 0.85rem;
  padding: 0.85rem 1rem 1rem;
  border: 1px solid rgba(168, 134, 92, 0.35);
  border-left: 3px solid var(--accent);
  background: rgba(0, 0, 0, 0.28);
}

.improve-list {
  margin: 0.45rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.45rem;
}

.improve-list li {
  margin: 0;
  padding: 0.55rem 0.75rem;
  color: var(--paper);
  font-size: 0.95rem;
  line-height: 1.45;
  border: 1px solid var(--line);
  background: rgba(232, 239, 233, 0.04);
}

.improve-list li::before {
  content: "→ ";
  color: var(--accent);
  font-weight: 600;
}

.result-actions {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.55rem;
  margin: 0.35rem 0 0;
}

.result-actions .cta {
  display: inline-flex;
  text-decoration: none;
  white-space: nowrap;
}

.result-back {
  margin: 0 0 0.75rem;
}

.result-back a {
  color: var(--paper-dim);
  text-decoration: none;
}

.result-back a:hover {
  color: var(--accent-hot);
}

.analysis-block {
  margin: 0 0 1.5rem;
}

.analysis-block h2 {
  margin: 0 0 0.55rem;
}

.analysis-summary {
  margin: 0;
  color: var(--paper);
  line-height: 1.5;
}

.tip-qtags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-right: 0.35rem;
  vertical-align: middle;
}

.result-details .improve-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.35rem 0.5rem;
}

.turn-skipped,
.turn-quit {
  border-left: 3px solid rgba(184, 92, 74, 0.65);
  padding-left: 0.75rem;
}

.turn-empty {
  border-left: 3px solid var(--ink-soft);
  padding-left: 0.75rem;
}

.turn-hinted:not(.turn-skipped):not(.turn-empty) {
  border-left: 3px solid rgba(168, 134, 92, 0.62);
  padding-left: 0.75rem;
}

.turn-list {
  list-style: none;
  padding: 0;
  margin: 2rem 0;
  display: grid;
  gap: 1.5rem;
}

.turn-list li,
.turn-card {
  border-top: none;
  padding-top: 0;
  margin: 0;
  padding: 0.95rem 1rem 1.05rem 1.15rem;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.22);
  border-left-width: 6px;
  border-left-style: solid;
}

.turn-card.turn-answered {
  border-left-color: rgba(168, 134, 92, 0.85);
}

.turn-card.turn-answered.turn-hinted {
  border-left-color: rgba(168, 134, 92, 0.75);
}

.turn-card.turn-empty {
  border-left-color: rgba(160, 168, 176, 0.55);
  opacity: 0.92;
}

.turn-card.turn-skipped {
  border-left-color: rgba(196, 140, 70, 0.9);
}

.turn-card.turn-quit {
  border-left-color: rgba(184, 92, 74, 0.9);
}

.turn-body {
  display: grid;
  gap: 0.15rem;
}

.turn-index {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--paper);
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.turn-list li header,
.turn-list li .turn-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.9rem;
  margin-bottom: 0.75rem;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--paper);
}

.turn-list .turn-head > .tag {
  margin-left: 0;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.28rem 0.55rem;
  letter-spacing: 0.05em;
}

.turn-list .turn-head-right {
  margin-left: auto;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.65rem;
}

.turn-list .turn-timer {
  margin-left: 0;
}


.prompt {
  margin: 1.5rem 0;
  animation: rise 0.55s 0.05s ease-out both;
}

.speech {
  display: grid;
  gap: 0.45rem;
  margin-top: 1.1rem;
}

.speech-who {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.65rem;
}

.speech-role {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}

.interviewer-speech .speech-role {
  color: var(--accent-hot);
}

.candidate-speech .speech-role {
  color: #e8d6a0;
}

.speech-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--paper);
}

.speech-sub {
  font-size: 0.85rem;
  color: var(--paper-dim);
}

.interviewer-speech .speech-bubble {
  border-left: 3px solid rgba(168, 134, 92, 0.65);
}

.candidate-speech {
  display: grid;
  gap: 0.65rem;
}

.pace-quest-answer-stack {
  display: grid;
  gap: 0.65rem;
}

.rpg-run-body .code-box-readonly,
.pace-quest-answer-stack .code-box-readonly {
  margin: 0;
}

.question-box {
  margin-top: 0;
  padding: 0.85rem 1rem 1rem;
  border: 1px solid var(--frame-edge);
  border-bottom: var(--frame-bevel) solid var(--frame-lip);
  border-radius: var(--frame-radius);
  background:
    linear-gradient(180deg, rgba(196, 210, 198, 0.14) 0%, rgba(0, 0, 0, 0.32) 100%);
  color: var(--paper-dim);
  display: grid;
  gap: 0.45rem;
  box-shadow: var(--frame-shadow-3d);
}

.question-box .section-title {
  margin: 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(232, 239, 233, 0.14);
  color: rgba(168, 134, 92, 0.85);
}

.question-box .focus-stage-head {
  margin: 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(232, 239, 233, 0.14);
  align-items: center;
}

.question-box .focus-stage-head .section-title {
  padding-bottom: 0;
  border-bottom: none;
}

.question-box .latex-body,
.question-box .latex-body .katex {
  color: var(--paper);
}

.latex-inline-code {
  /* Stay in the paragraph flow — wrap long SQL instead of a separate box. */
  display: inline;
  padding: 0.08em 0.35em;
  border: 1px solid rgba(232, 239, 233, 0.14);
  border-radius: 0.2rem;
  background: rgba(12, 14, 16, 0.72);
  color: var(--sao-code-text);
  font-family: ui-monospace, "SF Mono", "IBM Plex Mono", Menlo, monospace;
  font-size: 0.9em;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.talk-thread-chat .latex-inline-code,
.talk-msg-body .latex-inline-code,
.problem .latex-inline-code {
  /* Long window clauses wrap with the sentence; trailing "." stays attached. */
  white-space: break-spaces;
  line-height: 1.45;
}

.latex-code-box,
pre.latex-code-box {
  display: block;
  margin: 0.85rem 0;
  padding: 0.85rem 1rem 1rem;
  border: 1px solid var(--sao-code-border);
  background: var(--sao-code-face);
  color: var(--sao-code-text);
  font-family: ui-monospace, "SF Mono", "IBM Plex Mono", Menlo, monospace;
  font-size: 0.88rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  overflow-x: auto;
  max-width: 100%;
  box-sizing: border-box;
  tab-size: 4;
}

.latex-body .latex-code-box {
  border: 1px solid var(--sao-code-border);
  background: var(--sao-code-face);
}

.guide-split-panel .guide-answer-box .latex-code-box,
.guide-split-panel .judge-block .latex-code-box {
  margin: 0.75rem 0 0.35rem;
}

.guide-split-panel .guide-answer-box .latex-suggested .latex-code-box,
.guide-split-panel .guide-answer-box .code-fold-panel .latex-code-box,
.guide-split-panel .guide-answer-box .code-fold-panel .code-text {
  margin: 0;
  background: var(--sao-code-face);
  border: none;
}

.latex-body,
pre.answer {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: "IBM Plex Sans", ui-monospace, monospace;
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
}

/* Prose answers/questions: flow normally; paragraphs come from latex.js */
.latex-body {
  white-space: normal;
  line-height: 1.7;
}

.latex-body > p {
  margin: 0 0 1.15em;
}

.latex-body > p:last-child {
  margin-bottom: 0;
}

.latex-body > .latex-para {
  margin: 0 0 1.15em;
}

.latex-body > .latex-para:last-child {
  margin-bottom: 0;
}

/* Suggested Code sits between prose blocks — keep clear paragraph gutters */
.latex-body .latex-suggested,
.latex-body [data-code-fold].latex-suggested {
  margin: 1.25rem 0;
}

.latex-body.problem {
  padding: 0;
  border: none;
}

.latex-body .latex-list {
  margin: 0.45em 0 0.55em;
  padding-left: 1.25em;
}

.latex-body .latex-list > li {
  margin: 0.2em 0;
}

.study-reader-card-body .latex-list,
.study-reader-hint .latex-list {
  margin: 0.55em 0 0.35em;
  padding-left: 1.35em;
  list-style: disc;
}

.study-reader-card-body .latex-list > li,
.study-reader-hint .latex-list > li {
  margin: 0.35em 0;
  line-height: 1.55;
}

.latex-body .katex {
  font-size: 1.05em;
  color: var(--paper);
}

.question-box .latex-body .katex {
  color: var(--paper);
}

.latex-body .katex-display {
  margin: 0.75rem 0;
  max-width: 100%;
  overflow: visible; /* never a nested scrollport — steals page wheel */
  text-align: center;
}

.latex-body .katex-display > .katex {
  max-width: 100%;
}


.hint-box {
  margin: 1rem 0 1.5rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--frame-edge);
  border-bottom: var(--frame-bevel) solid var(--frame-lip);
  border-left: 3px solid var(--accent);
  border-radius: var(--frame-radius);
  background:
    linear-gradient(180deg, rgba(168, 134, 92, 0.12) 0%, rgba(0, 0, 0, 0.3) 100%);
  box-shadow: var(--frame-shadow-3d);
}

.hint-box strong {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--accent-hot);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.answer-form {
  display: grid;
  gap: 1rem;
  animation: rise 0.6s 0.1s ease-out both;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

.actions.meta-actions {
  align-items: stretch;
}

.mono {
  font-family: ui-monospace, "IBM Plex Mono", monospace;
  font-size: 0.85rem;
  color: var(--paper-dim);
}

.result h1,
.history h1 {
  margin-bottom: 0.5rem;
}

.latex-body.problem.short {
  max-height: none;
  overflow: visible;
  opacity: 1;
  border: none;
  padding: 0;
  font-size: 0.95rem;
}

.section-title {
  margin: 0 0 0.45rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

.answer-form label span.section-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  font-weight: 600;
}

.answer-box {
  margin-top: 0.35rem;
  padding: 0.85rem 1rem 1rem;
  border: 1px solid var(--frame-edge);
  border-bottom: var(--frame-bevel) solid var(--frame-lip);
  border-radius: var(--frame-radius);
  background: var(--frame-face);
  display: grid;
  gap: 0.55rem;
  box-shadow: var(--frame-shadow-3d);
}

.answer-box-label {
  display: block;
}

.answer-box .section-title,
.answer-box-label .section-title {
  margin: 0;
}

.photo-compose-chip {
  margin: 0.65rem 0 0;
  font-size: 0.8rem;
  color: var(--paper-dim);
}

.photo-attach-hint {
  font-size: 0.82rem;
  color: var(--paper-dim);
  line-height: 1.35;
  margin: 0.2rem 0 0;
}

.photo-choose-btn {
  cursor: pointer;
}

.photo-input-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.upload-open-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.upload-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.28rem;
  border-radius: 999px;
  font-size: 0.72rem;
  line-height: 1;
  color: #141814;
  background: var(--accent);
}

.upload-dialog {
  background: #121612;
  border-color: rgba(215, 199, 160, 0.18);
}

.upload-dialog-card {
  gap: 0.9rem;
  padding: 1.1rem 1.25rem 1.15rem;
}

.upload-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.upload-dialog-sub {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  color: var(--paper-dim);
}

.upload-dialog-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: stretch;
  min-height: 8rem;
}

.photo-drop {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.7rem;
  min-height: 10rem;
  padding: 1.1rem 1.35rem;
  border: 1px dashed rgba(215, 199, 160, 0.35);
  background: rgba(0, 0, 0, 0.28);
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.photo-drop.is-dragover {
  border-color: var(--accent);
  background: rgba(215, 199, 160, 0.08);
}

/* Choose files — large hit target inside the drop zone (interview + meet demo) */
.photo-drop .photo-choose-btn,
.interview-live .photo-drop .photo-choose-btn.ghost,
.meet .photo-drop .photo-choose-btn.ghost,
.meet .meet-upload-drop .photo-choose-btn.ghost {
  width: min(100%, 18rem);
  min-width: 12rem;
  min-height: 3.35rem;
  height: auto;
  padding: 0.85rem 1.5rem;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  opacity: 1;
}

.photo-drop-label {
  margin: 0;
  font-size: 0.92rem;
  color: var(--paper);
}

.photo-drop-status {
  margin: 0;
  font-size: 0.78rem;
  color: var(--paper-dim);
}

.photo-drop-status.is-error {
  color: var(--accent-hot);
}

.photo-qr-box {
  flex: 0 0 auto;
  text-align: center;
  padding: 0.55rem 0.55rem 0.45rem;
  border: 1px solid rgba(215, 199, 160, 0.22);
  background: rgba(10, 12, 10, 0.85);
}

.photo-qr-image {
  display: block;
  width: 160px;
  height: 160px;
  object-fit: contain;
  border-radius: 2px;
}

.photo-qr-image svg {
  display: block;
  width: 160px;
  height: 160px;
}

.photo-qr-caption {
  margin: 0.4rem 0 0;
  font-size: 0.72rem;
  color: var(--paper-dim);
  line-height: 1.3;
  max-width: 10rem;
  margin-left: auto;
  margin-right: auto;
}

.photo-count-label {
  margin: 0;
  font-size: 0.8rem;
  color: var(--paper-dim);
}

.meet-upload-demo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: stretch;
}

.meet-upload-drop {
  min-height: 10rem;
  pointer-events: none;
}

.meet-upload-drop .photo-choose-btn,
.meet-upload-drop .photo-choose-btn:disabled,
.meet-upload-drop .photo-choose-btn[aria-disabled="true"] {
  pointer-events: none;
  opacity: 1;
  cursor: default;
  /* Same quiet desk-key plate as live Upload dialog */
  color: rgba(232, 239, 233, 0.82);
  background:
    linear-gradient(180deg, rgba(232, 239, 233, 0.1) 0%, rgba(0, 0, 0, 0.42) 100%);
  border: 1px solid rgba(232, 239, 233, 0.3);
  border-bottom: 3px solid #454b54;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 3px 0 #252a30,
    0 8px 14px rgba(0, 0, 0, 0.28);
  transform: none;
  filter: none;
}

@media (max-width: 720px) {
  .meet-upload-demo {
    grid-template-columns: 1fr;
  }
}

.photo-preview,
.photo-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 0.55rem;
}

.photo-preview-item,
.photo-gallery-item {
  margin: 0;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.25);
  overflow: hidden;
  aspect-ratio: 1;
}

.photo-preview-item img,
.photo-gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-gallery {
  margin-top: 0.75rem;
  display: grid;
  gap: 0.45rem;
}

.photo-mobile {
  min-height: 100vh;
  display: grid;
  place-items: start center;
  padding: 1.25rem;
}

.photo-mobile-card {
  width: min(100%, 28rem);
  display: grid;
  gap: 0.85rem;
  padding: 1.1rem 1rem 1.35rem;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.28);
}

.photo-mobile-card h1 {
  margin: 0;
  font-size: 1.45rem;
}

.photo-mobile-problem {
  font-size: 0.92rem;
  color: var(--paper-dim);
  max-height: 8rem;
  overflow: auto;
}

.photo-mobile-count,
.photo-mobile-ok,
.photo-mobile-error {
  margin: 0;
  font-size: 0.9rem;
}

.photo-mobile-ok {
  color: var(--accent);
}

.photo-mobile-error {
  color: var(--accent-hot);
}

.photo-mobile-actions {
  display: grid;
  gap: 0.65rem;
}

.photo-mobile-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}

.photo-mobile-capture,
.photo-mobile-library {
  display: block;
  text-align: center;
  cursor: pointer;
}

@media (max-width: 720px) {
  .upload-dialog-grid {
    grid-template-columns: 1fr;
  }

  .photo-qr-box {
    justify-self: center;
  }
}

.answer-box textarea {
  border: none;
  background: transparent;
  padding: 0.35rem 0 0;
  min-height: 10rem;
  resize: none;
}

.answer-box textarea:focus {
  outline: none;
}

.code-box {
  margin-top: 0.75rem;
  border: 1px solid rgba(232, 239, 233, 0.18);
  background: rgba(12, 14, 16, 0.78);
  display: grid;
  /* Keep clipping on the editor only — bar buttons need room for 3D bottoms. */
  overflow: visible;
}

.code-box-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.65rem 0.9rem 0.9rem;
  border-bottom: 1px solid rgba(232, 239, 233, 0.12);
  background: rgba(28, 30, 34, 0.9);
  min-width: 0;
  box-sizing: border-box;
  overflow: visible;
  position: relative;
  z-index: 2;
}

.code-box-bar .section-title {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--paper-dim);
}

.code-box-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  margin-left: auto;
  min-width: 0;
  max-width: 100%;
  flex: 1 1 12rem;
  padding: 0.1rem 0 0.15rem;
  overflow: visible;
}

.code-tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
  flex: 0 0 auto;
  white-space: nowrap;
  min-height: 2rem;
  padding: 0 0.72rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 6px;
  border: 1px solid transparent;
  border-bottom-width: 3px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.07s ease,
    box-shadow 0.07s ease,
    border-bottom-width 0.07s ease,
    filter 0.12s ease;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 3px 0 rgba(0, 0, 0, 0.45),
    0 6px 12px rgba(0, 0, 0, 0.22);
}

.code-tool-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.code-tool-btn:active:not(:disabled) {
  transform: translateY(2px);
  border-bottom-width: 1px;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.35),
    0 1px 0 rgba(0, 0, 0, 0.4);
}

.code-tool-btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  transform: none;
  filter: none;
}

.code-tool-btn:focus-visible {
  outline: 2px solid rgba(201, 165, 116, 0.65);
  outline-offset: 2px;
}

.code-tool-icon {
  width: 0.95rem;
  height: 0.95rem;
  flex-shrink: 0;
}

.code-tool-cases {
  color: #f0dfb0;
  background: linear-gradient(180deg, rgba(168, 134, 92, 0.34) 0%, rgba(92, 72, 28, 0.72) 100%);
  border-color: rgba(215, 185, 110, 0.55);
  border-bottom-color: rgba(48, 36, 12, 0.95);
}

.code-tool-cases:hover:not(:disabled) {
  color: #fff6df;
  border-color: rgba(232, 205, 140, 0.72);
}

.code-tool-run {
  width: 2rem;
  padding: 0;
  color: #d7f5de;
  background: linear-gradient(180deg, rgba(95, 196, 120, 0.42) 0%, rgba(28, 88, 48, 0.82) 100%);
  border-color: rgba(143, 209, 158, 0.62);
  border-bottom-color: rgba(18, 58, 32, 0.95);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 3px 0 rgba(18, 58, 32, 0.9),
    0 0 14px rgba(95, 196, 120, 0.22);
}

.code-tool-run .code-tool-icon {
  width: 1rem;
  height: 1rem;
  margin-left: 0.08rem;
}

.code-tool-run:hover:not(:disabled) {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 3px 0 rgba(18, 58, 32, 0.9),
    0 0 18px rgba(95, 196, 120, 0.34);
}

.code-tool-stop {
  width: 2rem;
  padding: 0;
  color: #ffd8cc;
  background: linear-gradient(180deg, rgba(224, 112, 88, 0.4) 0%, rgba(98, 36, 28, 0.82) 100%);
  border-color: rgba(240, 160, 138, 0.62);
  border-bottom-color: rgba(68, 22, 16, 0.95);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 3px 0 rgba(68, 22, 16, 0.9),
    0 0 12px rgba(224, 112, 88, 0.18);
}

.code-tool-stop:hover:not(:disabled) {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 3px 0 rgba(68, 22, 16, 0.9),
    0 0 16px rgba(224, 112, 88, 0.28);
}

.code-editor-wrap {
  min-height: 12rem;
  overflow: hidden;
}

.code-editor-wrap .CodeMirror {
  min-height: 12rem;
}

.code-run-panel {
  border-top: 1px solid rgba(232, 239, 233, 0.12);
  padding: 0.65rem 0.85rem 0.75rem;
  background: rgba(8, 10, 12, 0.72);
}

.code-run-summary {
  margin: 0 0 0.45rem;
  font-size: 0.86rem;
}

.code-run-summary.is-pass {
  color: #8fd19e;
}

.code-run-summary.is-fail {
  color: #f0a08a;
}

.code-run-results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.code-run-row {
  display: grid;
  gap: 0.35rem;
  padding: 0.5rem 0.6rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.82rem;
}

.code-run-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.code-run-row.is-pass {
  border-color: rgba(143, 209, 158, 0.35);
  background: rgba(143, 209, 158, 0.08);
}

.code-run-row.is-fail {
  border-color: rgba(240, 160, 138, 0.35);
  background: rgba(240, 160, 138, 0.08);
}

.code-run-row-title {
  font-weight: 600;
}

.code-run-row-status {
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.code-run-row.is-pass .code-run-row-status {
  color: #8fd19e;
}

.code-run-row.is-fail .code-run-row-status {
  color: #f0a08a;
}

.code-run-row-output {
  display: grid;
  gap: 0.2rem;
}

.code-run-output-label {
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--paper-dim);
}

.code-run-output-value {
  margin: 0;
  padding: 0.35rem 0.45rem;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.76rem;
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
  color: #e6e8ea;
}

.quit-dialog.code-samples-dialog {
  max-width: min(44rem, calc(100vw - 2rem));
  width: min(44rem, calc(100vw - 2rem));
}

.code-samples-card {
  gap: 0.75rem;
}

.code-samples-list {
  display: grid;
  gap: 0.65rem;
  max-height: min(52vh, 28rem);
  overflow-y: auto;
}

.code-samples-contract {
  border: 1px solid rgba(215, 199, 160, 0.22);
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
  background: rgba(36, 48, 62, 0.55);
}

.code-samples-contract-pre {
  margin: 0.35rem 0 0;
  white-space: pre-wrap;
}

.code-sample-card {
  border: 1px solid rgba(215, 199, 160, 0.18);
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
  background: rgba(0, 0, 0, 0.28);
}

.code-sample-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.45rem;
}

.code-sample-idx {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.code-sample-name {
  font-size: 0.82rem;
  color: var(--paper-dim);
}

.code-sample-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}

@media (max-width: 720px) {
  .code-sample-grid {
    grid-template-columns: 1fr;
  }
}

.code-sample-label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--paper-dim);
  margin-bottom: 0.25rem;
}

.code-sample-pre {
  margin: 0;
  padding: 0.45rem 0.55rem;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.78rem;
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
}

.coding-review {
  margin-top: 0;
  display: grid;
  gap: 0.55rem;
  width: 100%;
}

.coding-review.code-box[data-code-fold] {
  margin-top: 0.75rem;
}

.coding-review-toggle-label {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.45rem;
}

.coding-review-sep {
  opacity: 0.55;
  font-weight: 500;
}

.coding-review-count {
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(232, 220, 190, 0.78);
}

.coding-review-count.is-pass {
  color: rgba(232, 214, 160, 0.95);
}

.coding-review-count.is-fail {
  color: rgba(232, 160, 120, 0.98);
}

.coding-review-count.is-pending {
  color: rgba(232, 220, 190, 0.58);
  font-weight: 600;
}

.coding-review-fold-panel {
  padding-top: 0.15rem;
}

.coding-review-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.coding-review-card-head {
  justify-content: space-between;
}

.coding-review-status {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(232, 220, 190, 0.7);
}

.coding-review-card.is-pass {
  border-color: rgba(168, 134, 92, 0.35);
}

.coding-review-card.is-pass .coding-review-status {
  color: rgba(232, 214, 160, 0.92);
}

.coding-review-card.is-fail {
  border-color: rgba(232, 160, 120, 0.35);
}

.coding-review-card.is-fail .coding-review-status {
  color: rgba(232, 160, 120, 0.95);
}

.coding-review-card.is-pending .coding-review-status {
  color: rgba(232, 220, 190, 0.55);
}

.coding-review-grid {
  grid-template-columns: 1fr 1fr;
}

.coding-review-yours {
  grid-column: 1 / -1;
}

@media (min-width: 900px) {
  .coding-review-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .coding-review-yours {
    grid-column: auto;
  }
}

.code-edit-note {
  margin: 0.35rem 0 0;
  padding: 0 0.15rem;
  font-size: 0.72rem;
  line-height: 1.4;
  color: rgba(197, 212, 200, 0.58);
}

.code-packages-note {
  margin: 0;
  padding: 0.45rem 0.85rem;
  border-bottom: 1px solid rgba(232, 239, 233, 0.1);
  background: rgba(20, 22, 26, 0.92);
  color: rgba(210, 218, 212, 0.78);
  font-size: 0.78rem;
  line-height: 1.55;
}

.code-pkg-chip {
  display: inline-block;
  margin: 0.12rem 0.12rem 0.12rem 0.2rem;
  padding: 0.06rem 0.42rem;
  border: 1px solid rgba(201, 165, 116, 0.55);
  border-radius: 0.28rem;
  background: rgba(168, 134, 92, 0.16);
  color: rgba(245, 236, 220, 0.98);
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.86em;
  letter-spacing: 0.01em;
  vertical-align: baseline;
}

.code-packages-aside {
  margin-left: 0.2rem;
  color: rgba(210, 218, 212, 0.55);
  font-weight: 400;
}

.auth-panel {
  max-width: 40rem;
  margin: 2rem auto;
  padding: 0 1rem 3rem;
}
.auth-form {
  display: grid;
  gap: 0.85rem;
  margin: 1.25rem 0;
}
.auth-form label {
  display: grid;
  gap: 0.35rem;
  font-size: 0.92rem;
}
.auth-form input,
.auth-form textarea,
.auth-form select {
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(232, 239, 233, 0.22);
  background: rgba(12, 14, 16, 0.75);
  color: inherit;
  font: inherit;
}
.auth-error { color: #f0a0a0; }
.auth-ok { color: #a8d5b5; }

/* Sign-in — RHS card + exaggerated SAO HUD (Portal gold) */
.atmosphere--sao {
  --scene-gradient:
    radial-gradient(ellipse 70% 55% at 28% 42%, rgba(201, 165, 116, 0.22), transparent 58%),
    radial-gradient(ellipse 55% 45% at 18% 78%, rgba(90, 70, 30, 0.35), transparent 55%),
    radial-gradient(ellipse 40% 35% at 88% 18%, rgba(140, 140, 148, 0.12), transparent 52%),
    linear-gradient(180deg, #07070b 0%, #030305 55%, #09090d 100%);
}

/* Explore mode — cyan background wash (all Explore pages) */
body.explore-mode-on .atmosphere--sao {
  background: #02080c;
  --scene-gradient:
    radial-gradient(ellipse 70% 55% at 28% 42%, rgba(94, 231, 255, 0.22), transparent 58%),
    radial-gradient(ellipse 55% 45% at 18% 78%, rgba(18, 90, 110, 0.38), transparent 55%),
    radial-gradient(ellipse 40% 35% at 88% 18%, rgba(70, 170, 200, 0.14), transparent 52%),
    linear-gradient(180deg, #06141c 0%, #030a10 55%, #071820 100%);
}

body.explore-mode-on .atmosphere--sao::before {
  transition: background 0.45s ease, opacity 0.45s ease;
}

/*
 * Explore: cool-blue HUD ornaments (rings, beams, sparks, diamonds).
 * Live pages still pin brand-gold UI chrome below.
 */
body.explore-mode-on .sao-fx {
  filter: hue-rotate(165deg) saturate(1.15) brightness(1.05);
}

/*
 * Meet / interview / details / done: keep brand-gold UI
 * (Submit, timers, tags, Hint/Skip/Quit, Upload count).
 * Atmosphere wash + .sao-fx ornaments stay cool blue.
 */
body.explore-mode-on:not(.start-page) {
  --accent: #a8865c;
  --accent-hot: #c9a574;
  --border-glow-hot: rgba(201, 165, 116, 0.96);
  --border-glow-mid: rgba(168, 134, 92, 0.78);
  --border-glow-soft: rgba(160, 120, 65, 0.42);
  --border-glow-halo: rgba(201, 165, 116, 0.22);
  --frame-edge: rgba(168, 134, 92, 0.44);
  --scroll-thumb: rgba(168, 134, 92, 0.38);
  --scroll-thumb-hover: rgba(201, 165, 116, 0.58);
}

body.explore-mode-on:not(.start-page) .cta.cta-submit,
body.explore-mode-on:not(.start-page) button.cta.cta-submit {
  color: #c9a574;
}

body.explore-mode-on:not(.start-page) .cta.cta-submit:hover,
body.explore-mode-on:not(.start-page) button.cta.cta-submit:hover {
  color: #f3df9a;
}

body.explore-mode-on:not(.start-page) .timer-value {
  color: #c9a574;
}

body.explore-mode-on:not(.start-page) .tag:not(.tag-coding-lang) {
  color: #a8865c;
}

/* Coding lang pills — keep original Python warm / SQL teal (not Explore cyan, not forced gold) */
body.explore-mode-on:not(.start-page) .tag-coding-lang,
body.explore-mode-on:not(.start-page) .tag.coding.tag-coding-lang,
body.explore-mode-on:not(.start-page) .rpg-quest-langs .tag-coding-lang {
  color: #e8c49a;
  border-color: rgba(196, 130, 80, 0.55);
  background: rgba(72, 42, 22, 0.45);
}

body.explore-mode-on:not(.start-page) .tag-coding-lang.tag-coding-sql,
body.explore-mode-on:not(.start-page) .tag.coding.tag-coding-sql,
body.explore-mode-on:not(.start-page) .code-langs .tag.coding.tag-coding-sql,
body.explore-mode-on:not(.start-page) .rpg-quest-langs .tag-coding-lang.tag-coding-sql {
  color: #9fd4c8;
  border-color: rgba(90, 170, 155, 0.58);
  background: rgba(22, 48, 46, 0.5);
}

body.explore-mode-on:not(.start-page) .upload-count {
  color: #0c0c0e;
  background: linear-gradient(180deg, #e8d4a8 0%, #c9a574 55%, #a8865c 100%);
  border-color: rgba(232, 210, 160, 0.55);
}

body.explore-mode-on:not(.start-page) .meet-demo-actions .ghost.is-active,
body.explore-mode-on:not(.start-page) .meet-demo-actions .inline-demo-form .ghost {
  color: rgba(232, 239, 233, 0.88);
  border-bottom-color: #454b54;
}

body.explore-mode-on:not(.start-page) .meet .fb-composer .cta.fb-send {
  color: #0c0c0e;
  background: linear-gradient(180deg, #e8d4a8 0%, #c9a574 46%, #a8865c 100%);
  border-color: rgba(232, 210, 160, 0.78);
}

/* Focus / enlarge controls — always brand gold on Explore live pages */
body.explore-mode-on:not(.start-page) .focus-stage-btn {
  color: rgba(201, 165, 116, 0.78);
  border-color: rgba(168, 134, 92, 0.28);
  background: rgba(0, 0, 0, 0.28);
}

body.explore-mode-on:not(.start-page) .focus-stage-btn:hover,
body.explore-mode-on:not(.start-page) .focus-stage-btn:focus-visible,
body.explore-mode-on:not(.start-page) [data-focus-stage]:hover > .focus-stage-btn,
body.explore-mode-on:not(.start-page) [data-focus-stage]:focus-within > .focus-stage-btn,
body.explore-mode-on:not(.start-page) [data-focus-stage]:hover .talk-panel-head .focus-stage-btn,
body.explore-mode-on:not(.start-page) [data-focus-stage]:hover .answer-panel-head .focus-stage-btn,
body.explore-mode-on:not(.start-page) [data-focus-stage]:hover .guide-split-panel-actions .focus-stage-btn,
body.explore-mode-on:not(.start-page) [data-focus-stage]:hover .code-box-tools .focus-stage-btn,
body.explore-mode-on:not(.start-page) [data-focus-stage]:hover .answer-box-head .focus-stage-btn,
body.explore-mode-on:not(.start-page) [data-focus-stage]:hover .focus-stage-head .focus-stage-btn,
body.explore-mode-on:not(.start-page) [data-focus-stage]:hover .study-reader-plate-head .focus-stage-btn,
body.explore-mode-on:not(.start-page) [data-focus-stage]:hover .study-reader-plate-head .guide-split-panel-actions .focus-stage-btn {
  color: #c9a574;
  border-color: rgba(201, 165, 116, 0.55);
  background: rgba(201, 165, 116, 0.1);
}

body.explore-mode-on:not(.start-page) .focus-stage-btn[aria-pressed="true"],
body.explore-mode-on:not(.start-page) .focus-stage-btn.is-expanded {
  color: #c9a574;
  border-color: rgba(201, 165, 116, 0.65);
  background: rgba(201, 165, 116, 0.14);
}

/* Start page only — Explore UI accents (cards / Begin / tokens) */
body.start-page.explore-mode-on {
  --accent: #3dd5f0;
  --accent-hot: #5ee7ff;
  --border-glow-hot: rgba(94, 231, 255, 0.96);
  --border-glow-mid: rgba(61, 213, 240, 0.78);
  --border-glow-soft: rgba(40, 160, 190, 0.42);
  --border-glow-halo: rgba(94, 231, 255, 0.22);
  --frame-edge: rgba(61, 213, 240, 0.44);
  --scroll-thumb: rgba(61, 213, 240, 0.38);
  --scroll-thumb-hover: rgba(94, 231, 255, 0.58);
}

body.start-page.explore-mode-on .brand-mark {
  color: #5ee7ff;
  text-shadow: 0 0 28px rgba(94, 231, 255, 0.28);
}

body.start-page.explore-mode-on .start-tile.id-card {
  --id-sweep: rgba(160, 240, 255, 0.2);
  --id-glow: rgba(94, 231, 255, 0.16);
  color: #d8f8ff;
  border-color: rgba(61, 213, 240, 0.48);
  border-bottom-color: #145a6e;
  background:
    radial-gradient(120% 80% at 18% 0%, var(--id-glow), transparent 55%),
    linear-gradient(165deg, rgba(24, 56, 68, 0.5) 0%, transparent 42%),
    linear-gradient(180deg, #101820 0%, #0a1016 100%);
  box-shadow:
    inset 0 1px 0 rgba(94, 231, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 3px 0 rgba(0, 0, 0, 0.4),
    0 8px 16px rgba(0, 0, 0, 0.35);
}

body.start-page.explore-mode-on .id-card-kicker {
  color: rgba(94, 231, 255, 0.78);
}

body.start-page.explore-mode-on .start-tile.id-card.is-empty .id-card-title {
  color: #b8eef8;
}

body.start-page.explore-mode-on .id-card-sub {
  color: #d2f2fa;
}

/* Start Explore: lang pills keep original warm Python / teal SQL (not cyan accent) */
body.start-page.explore-mode-on .id-card-langs .tag-coding-lang,
body.start-page.explore-mode-on #explore-path-btn.explore-path-card .tag-coding-lang {
  color: #f0d4a8;
  border-color: rgba(232, 196, 140, 0.7);
  background: rgba(88, 52, 28, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 230, 190, 0.12);
}

body.start-page.explore-mode-on .id-card-langs .tag-coding-lang.tag-coding-sql,
body.start-page.explore-mode-on #explore-path-btn.explore-path-card .tag-coding-lang.tag-coding-sql {
  color: #b8e8dc;
  border-color: rgba(120, 200, 185, 0.68);
  background: rgba(28, 58, 54, 0.58);
  box-shadow: inset 0 1px 0 rgba(200, 245, 235, 0.1);
}

body.start-page.explore-mode-on .start-tile.id-card:hover:not(.explore-pick) {
  border-color: rgba(94, 231, 255, 0.78);
  --id-glow: rgba(94, 231, 255, 0.22);
  --id-sweep: rgba(160, 240, 255, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(94, 231, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 5px 0 rgba(0, 0, 0, 0.45),
    0 12px 22px rgba(0, 0, 0, 0.42);
}

body.start-page.explore-mode-on .start-tile.id-card:focus-visible {
  outline-color: rgba(94, 231, 255, 0.75);
}

body.start-page.explore-mode-on .start-tile.id-card.is-filled {
  border-color: rgba(94, 231, 255, 0.72);
  --id-glow: rgba(94, 231, 255, 0.2);
  --id-sweep: rgba(160, 240, 255, 0.24);
}

body.start-page.explore-mode-on .start-tile.id-card.is-filled .id-card-kicker {
  color: #7af0ff;
}

/* Terms row stays gold (do not follow Explore cyan --accent). */
body.start-page.explore-mode-on .terms-link {
  color: #e8c49a;
}

body.start-page.explore-mode-on .terms-link:hover {
  color: #f0d4ae;
}

body.start-page.explore-mode-on .terms-agreed-note {
  color: #a8865c;
}

body.start-page.explore-mode-on .terms-agree-label input[type="checkbox"] {
  accent-color: #a8865c;
}

/* Explore mode on — cyan Begin key matching Explore card chrome */
body.start-page.explore-mode-on #start-submit.cta {
  --begin-ink: #e8fbff;
  --begin-edge: rgba(94, 231, 255, 0.78);
  --begin-fill-a: rgba(28, 78, 92, 0.78);
  --begin-fill-b: rgba(6, 18, 26, 0.96);
  --begin-glow: rgba(94, 231, 255, 0.32);
  --begin-sweep: rgba(160, 240, 255, 0.2);
  border-bottom-color: #145a6e;
  text-shadow: 0 0 14px rgba(122, 240, 255, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(200, 250, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 0 20px rgba(94, 231, 255, 0.28),
    0 0 40px rgba(61, 213, 240, 0.14),
    0 4px 0 rgba(0, 0, 0, 0.4),
    0 10px 20px rgba(0, 0, 0, 0.35);
}

body.start-page.explore-mode-on #start-submit.cta::before {
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(180, 245, 255, 0.22) 42%,
    transparent 68%
  );
}

body.start-page.explore-mode-on #start-submit.cta:hover:not(:disabled) {
  color: #f2fcff;
  border-color: rgba(160, 245, 255, 0.95);
  filter: brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(220, 250, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 0 24px rgba(94, 231, 255, 0.45),
    0 0 48px rgba(61, 213, 240, 0.22),
    0 5px 0 rgba(0, 0, 0, 0.42),
    0 12px 24px rgba(0, 0, 0, 0.4);
}

body.start-page.explore-mode-on #start-submit.cta:disabled {
  opacity: 0.36;
  filter: grayscale(0.2);
  color: rgba(180, 230, 245, 0.7);
  text-shadow: none;
  border-color: rgba(94, 231, 255, 0.28);
  border-bottom-color: rgba(20, 70, 90, 0.55);
  background:
    linear-gradient(180deg, rgba(16, 36, 46, 0.4) 0%, rgba(6, 12, 18, 0.55) 100%);
  box-shadow:
    inset 0 1px 0 rgba(94, 231, 255, 0.06),
    0 2px 0 rgba(0, 0, 0, 0.3);
}

/* Portal chrome (nav / History / Reservations) stays gold — not Interview content. */
body.start-page.explore-mode-on .desk-nav-btn:hover,
body.start-page.explore-mode-on .desk-nav-btn:focus-visible {
  color: #c9a574;
  border-color: rgba(201, 165, 116, 0.7);
  background: rgba(201, 165, 116, 0.1);
}

body.start-page.explore-mode-on .desk-nav-btn.is-current {
  border-color: rgba(201, 165, 116, 0.85);
  color: #c9a574;
  background: rgba(201, 165, 116, 0.12);
}

body.start-page.explore-mode-on .desk-nav-badge,
body.start-page.explore-mode-on .inbox-count-badge {
  color: #1a1208;
  background: #c9a574;
  border-color: #e2c899;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 0 12px rgba(201, 165, 116, 0.42);
}

body.start-page.explore-mode-on .start-dock-action,
body.start-page.explore-mode-on .start-history-open {
  border-color: rgba(168, 134, 92, 0.38);
  background: rgba(12, 12, 14, 0.96);
  color: var(--paper-dim);
}

body.start-page.explore-mode-on .start-dock-action:hover,
body.start-page.explore-mode-on .start-history-open:hover,
body.start-page.explore-mode-on .start-dock-action:focus-visible,
body.start-page.explore-mode-on .start-history-open:focus-visible {
  color: #c9a574;
  border-color: rgba(201, 165, 116, 0.7);
  background: rgba(201, 165, 116, 0.1);
  box-shadow: none;
}

body.start-page.explore-mode-on .start-panel {
  border-color: rgba(61, 213, 240, 0.5);
  background:
    radial-gradient(ellipse 70% 55% at 22% 18%, rgba(94, 231, 255, 0.16), transparent 58%),
    radial-gradient(ellipse 55% 45% at 12% 82%, rgba(18, 90, 110, 0.32), transparent 55%),
    radial-gradient(ellipse 42% 38% at 92% 12%, rgba(70, 170, 200, 0.1), transparent 52%),
    linear-gradient(180deg, #06141c 0%, #030a10 55%, #071820 100%);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(94, 231, 255, 0.1);
}

body.start-page.explore-mode-on .start-panel::before {
  background:
    radial-gradient(circle at 28% 42%, transparent 0 18%, rgba(94, 231, 255, 0.07) 19%, transparent 20%),
    radial-gradient(circle at 28% 42%, transparent 0 28%, rgba(94, 231, 255, 0.05) 29%, transparent 30%),
    radial-gradient(circle at 28% 42%, transparent 0 40%, rgba(94, 231, 255, 0.04) 41%, transparent 42%),
    linear-gradient(rgba(94, 231, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94, 231, 255, 0.055) 1px, transparent 1px);
  background-size:
    auto,
    auto,
    auto,
    52px 52px,
    52px 52px;
}

body.start-page.explore-mode-on .start-panel::after {
  border-color: rgba(61, 213, 240, 0.22);
  box-shadow:
    inset 10px 10px 0 -9px rgba(94, 231, 255, 0.35),
    inset -10px -10px 0 -9px rgba(61, 213, 240, 0.28);
}

body.start-page.explore-mode-on .start-panel::backdrop {
  background:
    radial-gradient(ellipse 60% 50% at 30% 40%, rgba(94, 231, 255, 0.14), transparent 62%),
    rgba(2, 8, 12, 0.72);
}

body.start-page.explore-mode-on .start-panel-kicker,
body.start-page.explore-mode-on .start-panel-title {
  color: #5ee7ff;
}

.login-page .sao-fx-core,
.login-page .sao-fx-ring,
.login-page .sao-fx-cross,
.login-page .sao-fx-beam {
  left: 28%;
}

.login-page .sao-fx-grid {
  right: 30%;
}

.login-page .sao-fx-bracket--br {
  left: 42%;
  right: auto;
}



.sao-fx {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.82;
  transition: filter 0.45s ease;
}

.login-page .sao-fx {
  opacity: 1;
}

.login-main {
  position: relative;
  z-index: 1;
  max-width: none;
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 1.25rem clamp(1rem, 3vw, 2.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-shell {
  width: min(68rem, 100%);
  display: grid;
  grid-template-columns: 1.15fr minmax(20rem, 26rem);
  gap: clamp(1.25rem, 3vw, 2.75rem);
  align-items: center;
}

.login-stage {
  position: relative;
  min-height: 22rem;
  padding: 1.5rem 0.5rem 1.5rem 0.25rem;
  animation: rise 0.7s ease-out both;
}

.login-stage-kicker {
  margin: 0 0 0.85rem;
  font-family: var(--font-herald);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.34em;
  color: var(--accent-hot);
  text-shadow: 0 0 18px rgba(201, 165, 116, 0.45);
  animation: login-kicker-blink 2.4s steps(2, end) infinite;
}

@keyframes login-kicker-blink {
  0%,
  100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.login-stage-brand {
  margin: 0 0 0.65rem;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.5vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--paper);
  text-shadow: 0 0 40px rgba(201, 165, 116, 0.2);
}

.login-stage-line {
  margin: 0 0 1.75rem;
  color: var(--paper-dim);
  font-size: 1rem;
  letter-spacing: 0.04em;
}

.login-stage-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: rgba(232, 239, 233, 0.72);
}

.login-stage-stats li span {
  display: inline-block;
  min-width: 3.2rem;
  margin-right: 0.65rem;
  color: var(--accent);
}

.sao-fx-core {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 10rem;
  height: 10rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(243, 223, 154, 0.45) 0%,
    rgba(168, 134, 92, 0.18) 35%,
    transparent 70%
  );
  filter: blur(2px);
  animation: sao-core-pulse 3.2s ease-in-out infinite;
}

@keyframes sao-core-pulse {
  0%,
  100% { transform: translate(-50%, -50%) scale(0.85); opacity: 0.55; }
  50% { transform: translate(-50%, -50%) scale(1.25); opacity: 1; }
}

.sao-fx-ring {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(58vmin, 28rem);
  height: min(58vmin, 28rem);
  border: 1px solid rgba(201, 165, 116, 0.35);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.25);
  opacity: 0;
  animation: sao-ring-expand 6.5s ease-out infinite;
  box-shadow: 0 0 24px rgba(201, 165, 116, 0.12);
}

.sao-fx-ring--a { animation-delay: 0s; }
.sao-fx-ring--b {
  width: min(48vmin, 22rem);
  height: min(48vmin, 22rem);
  border-color: rgba(168, 134, 92, 0.28);
  animation-delay: 1.6s;
}
.sao-fx-ring--c {
  width: min(72vmin, 36rem);
  height: min(72vmin, 36rem);
  border-color: rgba(201, 165, 116, 0.18);
  animation-delay: 3.2s;
}
.sao-fx-ring--d {
  width: min(90vmin, 46rem);
  height: min(90vmin, 46rem);
  border-style: dashed;
  border-color: rgba(201, 165, 116, 0.14);
  animation-delay: 4.8s;
  animation-duration: 8s;
}

@keyframes sao-ring-expand {
  0% {
    transform: translate(-50%, -50%) scale(0.2);
    opacity: 0;
  }
  10% { opacity: 0.85; }
  65% { opacity: 0.2; }
  100% {
    transform: translate(-50%, -50%) scale(1.7);
    opacity: 0;
  }
}

.sao-fx-cross {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(42vmin, 20rem);
  height: min(42vmin, 20rem);
  transform: translate(-50%, -50%);
  opacity: 0.45;
  animation: sao-cross-spin 28s linear infinite;
}

.sao-fx-cross::before,
.sao-fx-cross::after {
  content: "";
  position: absolute;
  background: rgba(201, 165, 116, 0.35);
}

.sao-fx-cross::before {
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  transform: translateX(-50%);
}

.sao-fx-cross::after {
  top: 50%;
  left: 0;
  height: 1px;
  width: 100%;
  transform: translateY(-50%);
}

@keyframes sao-cross-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.sao-fx-beam {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 140vmax;
  height: 2px;
  transform-origin: left center;
  background: linear-gradient(
    90deg,
    rgba(243, 223, 154, 0.65),
    rgba(201, 165, 116, 0.15),
    transparent
  );
  opacity: 0.35;
  animation: sao-beam-sweep 7s ease-in-out infinite;
}

.sao-fx-beam--1 { transform: translate(0, -50%) rotate(-18deg); }
.sao-fx-beam--2 {
  transform: translate(0, -50%) rotate(28deg);
  animation-delay: -3.5s;
  opacity: 0.22;
}

@keyframes sao-beam-sweep {
  0%,
  100% { opacity: 0.12; filter: brightness(0.8); }
  50% { opacity: 0.55; filter: brightness(1.4); }
}

.sao-fx-grid {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -22%;
  height: 55%;
  background-image:
    linear-gradient(rgba(168, 134, 92, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 134, 92, 0.16) 1px, transparent 1px);
  background-size: 42px 42px;
  transform: perspective(480px) rotateX(64deg);
  transform-origin: 50% 100%;
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent 80%);
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent 80%);
  animation: sao-grid-drift 12s linear infinite;
  opacity: 0.7;
}

@keyframes sao-grid-drift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 42px, 42px 0; }
}

.sao-fx-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: -12%;
  height: 16%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(201, 165, 116, 0.07) 45%,
    rgba(243, 223, 154, 0.2) 50%,
    rgba(201, 165, 116, 0.07) 55%,
    transparent 100%
  );
  animation: sao-scan 5.5s ease-in-out infinite;
}

.sao-fx-scan--fast {
  height: 8%;
  opacity: 0.7;
  animation-duration: 3.2s;
  animation-delay: -1.4s;
}

@keyframes sao-scan {
  0% { top: -15%; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 0.65; }
  100% { top: 108%; opacity: 0; }
}

.sao-fx-stream {
  position: absolute;
  top: -10%;
  width: 1px;
  height: 120%;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(201, 165, 116, 0.55),
    transparent
  );
  animation: sao-stream-fall 2.8s linear infinite;
  opacity: 0.55;
}

.sao-fx-stream--1 { left: 12%; animation-duration: 2.4s; }
.sao-fx-stream--2 { left: 22%; animation-duration: 3.1s; animation-delay: -1s; }
.sao-fx-stream--3 { left: 36%; animation-duration: 2.6s; animation-delay: -0.4s; }

@keyframes sao-stream-fall {
  from { transform: translateY(-20%); opacity: 0; }
  20% { opacity: 0.7; }
  to { transform: translateY(20%); opacity: 0; }
}

.sao-fx-hex {
  position: absolute;
  width: 3.2rem;
  height: 3.2rem;
  border: 1px solid rgba(201, 165, 116, 0.4);
  background: rgba(168, 134, 92, 0.05);
  transform: rotate(45deg);
  animation: sao-hex-float 10s ease-in-out infinite;
  box-shadow: 0 0 16px rgba(201, 165, 116, 0.12);
}

.sao-fx-hex--1 { left: 6%; top: 14%; animation-duration: 11s; }
.sao-fx-hex--2 {
  left: 18%;
  top: 28%;
  width: 2rem;
  height: 2rem;
  animation-duration: 8s;
  animation-delay: -2s;
}
.sao-fx-hex--3 {
  left: 8%;
  bottom: 24%;
  width: 5rem;
  height: 5rem;
  animation-duration: 14s;
  animation-delay: -5s;
}
.sao-fx-hex--4 {
  left: 32%;
  top: 18%;
  width: 1.4rem;
  height: 1.4rem;
  animation-duration: 7s;
  animation-delay: -1s;
}
.sao-fx-hex--5 {
  left: 40%;
  bottom: 34%;
  width: 2.6rem;
  height: 2.6rem;
  animation-duration: 12s;
  animation-delay: -3s;
}
.sao-fx-hex--6 {
  left: 2%;
  top: 48%;
  width: 1.8rem;
  height: 1.8rem;
  animation-duration: 9s;
  animation-delay: -6s;
}

@keyframes sao-hex-float {
  0%,
  100% { transform: rotate(45deg) translate(0, 0); opacity: 0.4; }
  50% { transform: rotate(45deg) translate(18px, -28px); opacity: 0.95; }
}

.sao-fx-bracket {
  display: none;
}

.sao-fx-bracket--tl,
.sao-fx-bracket--br {
  display: none;
}

.sao-fx-line {
  position: absolute;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(201, 165, 116, 0.65),
    transparent
  );
  animation: sao-line-pulse 3.8s ease-in-out infinite;
}

.sao-fx-line--1 { left: 4%; top: 34%; width: 22%; }
.sao-fx-line--2 { left: 10%; top: 58%; width: 16%; animation-delay: 1.2s; }
.sao-fx-line--3 { left: 28%; top: 72%; width: 12%; animation-delay: 2.1s; }

@keyframes sao-line-pulse {
  0%,
  100% { opacity: 0.15; transform: scaleX(0.65); }
  50% { opacity: 1; transform: scaleX(1); }
}

.sao-fx-mote {
  position: absolute;
  left: var(--x, 50%);
  bottom: -4%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(201, 165, 116, 0.65);
  box-shadow: 0 0 10px rgba(201, 165, 116, 0.45);
  animation: sao-mote-rise var(--d, 12s) linear infinite;
  animation-delay: var(--delay, 0s);
  opacity: 0;
}

.sao-fx-mote--bright {
  width: 5px;
  height: 5px;
  background: rgba(243, 223, 154, 0.95);
  box-shadow: 0 0 16px rgba(201, 165, 116, 0.7);
}

@keyframes sao-mote-rise {
  0% {
    transform: translateY(0) scale(0.6);
    opacity: 0;
  }
  8% { opacity: 0.95; }
  80% { opacity: 0.4; }
  100% {
    transform: translateY(-115vh) scale(1.1);
    opacity: 0;
  }
}

/* Start page — same gold SAO palette; no rings / spinning cross / beams */
.sao-fx-alt {
  display: none;
}

.start-page .sao-fx-ring,
.start-page .sao-fx-cross,
.start-page .sao-fx-beam {
  display: none !important;
}

.start-page .sao-fx-alt {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.start-page .sao-fx-grid {
  opacity: 0.45;
  height: 42%;
  bottom: -18%;
}

.start-page .sao-fx-mesh {
  position: absolute;
  left: 50%;
  top: 42%;
  width: min(78vmin, 42rem);
  height: min(58vmin, 30rem);
  transform: translate(-50%, -50%);
  opacity: 0.38;
  background-image:
    linear-gradient(30deg, rgba(201, 165, 116, 0.22) 1px, transparent 1px),
    linear-gradient(150deg, rgba(201, 165, 116, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 134, 92, 0.12) 1px, transparent 1px);
  background-size: 28px 48px, 28px 48px, 48px 48px;
  mask-image: radial-gradient(ellipse 55% 50% at 50% 45%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 55% 50% at 50% 45%, #000 0%, transparent 72%);
  animation: sao-mesh-drift 22s linear infinite;
}

@keyframes sao-mesh-drift {
  from { background-position: 0 0, 0 0, 0 0; }
  to { background-position: 28px 48px, -28px 48px, 48px 0; }
}

.start-page .sao-fx-rail {
  position: absolute;
  top: 12%;
  bottom: 14%;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(201, 165, 116, 0.45) 12%,
    rgba(201, 165, 116, 0.2) 50%,
    rgba(201, 165, 116, 0.45) 88%,
    transparent
  );
  opacity: 0.55;
}

.start-page .sao-fx-rail::before,
.start-page .sao-fx-rail::after {
  content: "";
  position: absolute;
  left: 0;
  width: 10px;
  height: 1px;
  background: rgba(201, 165, 116, 0.55);
}

.start-page .sao-fx-rail::before { top: 18%; }
.start-page .sao-fx-rail::after { bottom: 22%; }

.start-page .sao-fx-rail--l {
  left: 5.5%;
}

.start-page .sao-fx-rail--l::before,
.start-page .sao-fx-rail--l::after {
  left: 0;
}

.start-page .sao-fx-rail--r {
  right: 5.5%;
  left: auto;
}

.start-page .sao-fx-rail--r::before,
.start-page .sao-fx-rail--r::after {
  left: auto;
  right: 0;
}

.start-page .sao-fx-chevron {
  position: absolute;
  width: 0.85rem;
  height: 0.85rem;
  border-right: 1.5px solid rgba(201, 165, 116, 0.55);
  border-bottom: 1.5px solid rgba(201, 165, 116, 0.55);
  transform: rotate(45deg);
  opacity: 0.45;
  animation: sao-chevron-drift 11s ease-in-out infinite;
}

.start-page .sao-fx-chevron--1 {
  left: 72%;
  top: 22%;
}

.start-page .sao-fx-chevron--2 {
  left: 78%;
  top: 48%;
  animation-delay: -3.5s;
  width: 0.65rem;
  height: 0.65rem;
}

.start-page .sao-fx-chevron--3 {
  left: 68%;
  top: 68%;
  animation-delay: -7s;
  transform: rotate(-135deg);
}

@keyframes sao-chevron-drift {
  0%,
  100% { opacity: 0.25; translate: 0 0; }
  50% { opacity: 0.75; translate: 0 -12px; }
}

.start-page .sao-fx-node {
  position: absolute;
  width: 5px;
  height: 5px;
  background: rgba(243, 223, 154, 0.7);
  box-shadow: 0 0 10px rgba(201, 165, 116, 0.45);
  transform: rotate(45deg);
  animation: sao-node-blink 3.6s ease-in-out infinite;
}

.start-page .sao-fx-node--1 { left: 5.5%; top: 34%; margin-left: -2px; }
.start-page .sao-fx-node--2 { left: 5.5%; top: 62%; margin-left: -2px; animation-delay: -1.2s; }
.start-page .sao-fx-node--3 { right: 5.5%; top: 28%; margin-right: -2px; animation-delay: -2s; }
.start-page .sao-fx-node--4 { right: 5.5%; top: 70%; margin-right: -2px; animation-delay: -0.6s; }

@keyframes sao-node-blink {
  0%,
  100% { opacity: 0.2; }
  50% { opacity: 1; }
}

.start-page .sao-fx-hex--r1 {
  left: auto;
  right: 7%;
  top: 16%;
  width: 2.4rem;
  height: 2.4rem;
  animation-duration: 12s;
}

.start-page .sao-fx-hex--r2 {
  left: auto;
  right: 14%;
  top: 36%;
  width: 1.5rem;
  height: 1.5rem;
  animation-duration: 9s;
  animation-delay: -2.5s;
}

.start-page .sao-fx-hex--r3 {
  left: auto;
  right: 5%;
  bottom: 22%;
  top: auto;
  width: 3.6rem;
  height: 3.6rem;
  animation-duration: 14s;
  animation-delay: -4s;
}

.start-page .sao-fx-rule {
  position: absolute;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(201, 165, 116, 0.55),
    transparent
  );
  animation: sao-line-pulse 4.4s ease-in-out infinite;
}

.start-page .sao-fx-rule--1 {
  right: 6%;
  top: 26%;
  width: 18%;
  left: auto;
}

.start-page .sao-fx-rule--2 {
  right: 10%;
  top: 54%;
  width: 14%;
  left: auto;
  animation-delay: 1.4s;
}

.start-page .sao-fx-rule--3 {
  right: 4%;
  top: 78%;
  width: 20%;
  left: auto;
  animation-delay: 2.6s;
}

/* Card stays still — motion only on background HUD */
.login-card-hover {
  width: 100%;
  justify-self: end;
}

.login-card {
  position: relative;
  width: 100%;
  padding: 2rem 1.85rem 1.95rem;
  border: 1px solid var(--frame-edge);
  border-bottom-width: var(--frame-bevel);
  border-radius: 8px;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 210, 120, 0.09), transparent 52%),
    linear-gradient(180deg, rgba(42, 38, 28, 0.97) 0%, rgba(16, 16, 18, 0.99) 42%, rgba(10, 10, 12, 0.99) 100%);
  box-shadow:
    var(--frame-shadow-3d),
    0 22px 56px rgba(0, 0, 0, 0.6);
  animation: rise 0.75s 0.08s ease-out both;
  overflow: hidden;
}

.login-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 42%,
    rgba(255, 230, 170, 0.07) 50%,
    transparent 58%,
    transparent 100%
  );
  background-size: 220% 100%;
  animation: login-sheen 7s ease-in-out infinite;
  pointer-events: none;
}

@keyframes login-sheen {
  0%,
  100% { background-position: 120% 0; }
  45%,
  55% { background-position: -20% 0; }
}

.login-brand {
  position: relative;
  z-index: 1;
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent-hot);
  text-align: center;
}

.login-title {
  position: relative;
  z-index: 1;
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--paper);
}

.login-sub {
  position: relative;
  z-index: 1;
  margin: 0 0 1.35rem;
  text-align: center;
  color: var(--paper-dim);
  font-size: 0.9rem;
  line-height: 1.45;
}

.login-alert {
  position: relative;
  z-index: 1;
  margin: 0 0 1rem;
  padding: 0.65rem 0.85rem;
  border-radius: 4px;
  font-size: 0.9rem;
}

.auth-error.login-alert {
  border: 1px solid rgba(184, 92, 74, 0.55);
  background: rgba(60, 24, 20, 0.55);
  color: #f0a0a0;
}

.auth-ok.login-alert {
  border: 1px solid rgba(72, 140, 96, 0.65);
  background: #2f6b45;
  color: #ffffff;
}

/* Single-active-session takeover: freeze UI + warning */
.session-taken-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 3vw, 1.75rem);
  box-sizing: border-box;
  background: rgba(4, 4, 6, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.session-taken-card {
  width: min(28rem, 100%);
  padding: 1.45rem 1.5rem 1.35rem;
  border: 1px solid rgba(220, 120, 96, 0.55);
  border-radius: 10px;
  background:
    radial-gradient(ellipse 70% 50% at 12% -8%, rgba(220, 120, 96, 0.2), transparent 55%),
    linear-gradient(180deg, rgba(32, 18, 16, 0.98), rgba(8, 8, 10, 0.99));
  box-shadow:
    0 28px 64px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 220, 200, 0.08);
}

.session-taken-kicker {
  margin: 0 0 0.35rem;
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: rgba(240, 160, 130, 0.9);
}

.session-taken-title {
  margin: 0 0 0.75rem;
  font-family: var(--font-display, "Fraunces", serif);
  font-size: clamp(1.35rem, 3vw, 1.7rem);
  font-weight: 700;
  line-height: 1.15;
  color: #f7f0e6;
}

.session-taken-body {
  margin: 0 0 1.15rem;
  font-size: 0.98rem;
  line-height: 1.45;
  color: rgba(235, 228, 218, 0.88);
}

.session-taken-btn {
  display: block;
  width: auto;
  min-width: 10.5rem;
  margin-left: auto;
}

html.is-session-taken-freeze {
  overflow: hidden;
}

html.is-session-taken-freeze body > *:not(.session-taken-overlay) {
  pointer-events: none;
  user-select: none;
}

html.is-session-taken-freeze .session-taken-overlay {
  pointer-events: auto;
}

/* Bottom-left toasts (slide up) — replace inline login-alert banners */
.portal-toast-host {
  position: fixed;
  top: auto;
  right: auto;
  left: max(1rem, env(safe-area-inset-left, 0px));
  bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  z-index: 2147483000;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 0.55rem;
  max-width: min(22rem, calc(100vw - 2rem));
  width: max-content;
  height: auto;
  pointer-events: none;
}

/* Popover top-layer host (above modal <dialog>) — reset UA centered inset */
.portal-toast-host[popover],
.portal-toast-host:popover-open {
  position: fixed;
  inset: auto;
  top: auto;
  right: auto;
  left: max(1rem, env(safe-area-inset-left, 0px));
  bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  overflow: visible;
  color: inherit;
  width: max-content;
  height: auto;
  max-width: min(22rem, calc(100vw - 2rem));
}

.portal-toast-host:popover-open {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 0.55rem;
  pointer-events: none;
}

.portal-toast-host--br,
.portal-toast-host--br[popover],
.portal-toast-host--br:popover-open {
  left: auto;
  right: max(1rem, env(safe-area-inset-right, 0px));
  align-items: flex-end;
}

dialog[open] > .portal-toast-host--br {
  left: auto;
  right: max(1rem, env(safe-area-inset-right, 0px));
  align-items: flex-end;
}

/* Host parked inside an open <dialog> — stay fixed to viewport corner */
dialog[open] > .portal-toast-host {
  position: fixed;
  inset: auto;
  top: auto;
  right: auto;
  left: max(1rem, env(safe-area-inset-left, 0px));
  bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  z-index: 2147483000;
  pointer-events: none;
}

.portal-toast {
  position: relative;
  pointer-events: auto;
  width: min(22rem, calc(100vw - 2rem));
  padding: 0.75rem 2rem 0.8rem 0.95rem;
  border: 1px solid rgba(201, 165, 116, 0.45);
  border-radius: 6px;
  background:
    radial-gradient(120% 90% at 0% 100%, rgba(255, 210, 120, 0.1), transparent 55%),
    linear-gradient(165deg, rgba(36, 30, 22, 0.98) 0%, rgba(10, 10, 12, 0.98) 100%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 14px 36px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(1.15rem);
  transition:
    opacity 0.28s ease,
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.portal-toast.is-in {
  opacity: 1;
  transform: translateY(0);
}

.portal-toast.is-leaving {
  opacity: 0;
  transform: translateY(0.85rem);
  transition:
    opacity 0.24s ease,
    transform 0.24s ease;
}

.portal-toast--ok {
  border-color: rgba(168, 213, 181, 0.55);
}

.portal-toast--bad {
  border-color: rgba(232, 130, 118, 0.55);
}

.portal-toast-kicker {
  margin: 0 0 0.2rem;
  font-family: var(--font-herald);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

.portal-toast--ok .portal-toast-kicker {
  color: #a8d5b5;
}

.portal-toast--bad .portal-toast-kicker {
  color: #f0a39a;
}

.portal-toast-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--paper);
}

.portal-toast-close {
  position: absolute;
  top: 0.35rem;
  right: 0.4rem;
  z-index: 2;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 3px;
  background: transparent;
  color: var(--paper-dim);
  font: inherit;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.portal-toast-close:hover,
.portal-toast-close:focus-visible {
  color: var(--accent-hot);
  outline: none;
}

.login-form {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1.1rem;
  margin: 0;
}

.login-field {
  display: grid;
  gap: 0.4rem;
}

.login-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(232, 239, 233, 0.7);
}

.login-req {
  color: var(--danger);
  margin-left: 0.1rem;
}

.login-form input {
  width: 100%;
  box-sizing: border-box;
  min-height: 2.65rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(0, 0, 0, 0.55);
  border-radius: 4px;
  background: rgba(8, 9, 10, 0.92);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.4;
  outline: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  -webkit-text-fill-color: var(--paper);
  caret-color: var(--accent-hot);
}

.login-form input::placeholder {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(190, 196, 188, 0.45);
  -webkit-text-fill-color: rgba(190, 196, 188, 0.45);
  opacity: 1;
}

.login-form input:hover {
  border-color: rgba(168, 134, 92, 0.4);
}

.login-form input:focus {
  border-color: rgba(201, 165, 116, 0.75);
  box-shadow: 0 0 0 2px rgba(201, 165, 116, 0.18);
}

/* Keep dark card look + body type under browser autofill */
.login-form input:-webkit-autofill,
.login-form input:-webkit-autofill:hover,
.login-form input:-webkit-autofill:focus,
.login-form input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--paper) !important;
  caret-color: var(--accent-hot);
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  border: 1px solid rgba(201, 165, 116, 0.55);
  box-shadow:
    0 0 0 1000px rgba(8, 9, 10, 0.98) inset,
    0 0 0 2px rgba(201, 165, 116, 0.12);
  transition: background-color 99999s ease-out 0s;
}

.login-submit {
  width: fit-content;
  margin-top: 0.35rem;
  margin-left: auto;
  min-height: 2.55rem;
  padding-top: 0.78rem;
  padding-bottom: 0.72rem;
  justify-content: center;
}

@media (max-width: 860px) {
  .login-shell {
    grid-template-columns: 1fr;
    max-width: 28rem;
  }

  .login-stage {
    min-height: 0;
    padding: 0.25rem 0 0.5rem;
    text-align: center;
  }

  .login-stage-stats {
    justify-items: center;
  }

  .login-stage-brand {
    font-size: clamp(1.8rem, 8vw, 2.4rem);
  }

  .login-card-hover {
    justify-self: stretch;
  }
}

@media (max-width: 480px) {
  .login-card {
    padding: 1.45rem 1.15rem 1.5rem;
  }

  .login-stage-stats {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-card::before,
  .login-stage-kicker,
  .sao-fx-core,
  .sao-fx-ring,
  .sao-fx-cross,
  .sao-fx-beam,
  .sao-fx-grid,
  .sao-fx-scan,
  .sao-fx-stream,
  .sao-fx-hex,
  .sao-fx-bracket,
  .sao-fx-line,
  .sao-fx-mote,
  .start-page .sao-fx-mesh,
  .start-page .sao-fx-chevron,
  .start-page .sao-fx-node,
  .start-page .sao-fx-rule {
    animation: none !important;
  }

  .sao-fx-ring,
  .sao-fx-scan,
  .sao-fx-stream,
  .sao-fx-mote,
  .sao-fx-beam,
  .sao-fx-cross {
    opacity: 0;
  }

  .sao-fx-grid {
    opacity: 0.25;
  }

  .login-stage-kicker {
    opacity: 1;
  }
}

/* Admin / portal — shared game-style command menu */
body:has(main.admin-main),
body:has(main.portal-main) {
  height: 100dvh;
  overflow: hidden;
}

html:has(main.admin-main),
html:has(main.portal-main) {
  height: 100dvh;
  overflow: hidden;
}

.admin-main,
.portal-main {
  height: 100dvh;
  max-height: 100dvh;
  min-height: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /* Clear fixed desk chrome; keep shell filling the remaining viewport. */
  padding: var(--desk-chrome-clear) clamp(1rem, 3vw, 2rem) 1rem;
  overflow: hidden;
}

/* Match Admin desk width — left edge stays at legacy 72rem center; +8rem grows right. */
main.admin-main,
main.portal-main {
  --admin-frame-w: 80rem;
  --admin-frame-w-legacy: 72rem;
  width: 100%;
  max-width: min(var(--admin-frame-w), 100%);
  margin-left: max(
    clamp(1rem, 3vw, 2rem),
    calc((100vw - min(var(--admin-frame-w-legacy), 100vw)) / 2)
  );
  margin-right: max(
    clamp(1rem, 3vw, 2rem),
    calc((100vw - min(var(--admin-frame-w), 100vw)) / 2)
  );
}

/* Beat body:has(.desk-nav) main { padding-top } so Admin + Main share one ceiling. */
body:has(.desk-nav) main.admin-main,
body:has(.desk-nav) main.portal-main {
  padding: var(--desk-chrome-clear) clamp(1rem, 3vw, 2rem) 1rem;
}

/* Admin command desk: true viewport center (ignore asymmetric Main frame margins). */
body.admin-page main.admin-main {
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  align-items: center;
  /* Allow tall 9-module deck instead of clipping the bottom row. */
  overflow-x: hidden;
  overflow-y: auto;
}

/* Drop TL / BR corner right-angle brackets on Admin desk */
.admin-page .sao-fx-bracket--tl,
.admin-page .sao-fx-bracket--br {
  display: none;
}

.admin-shell,
.game-shell {
  display: grid;
  grid-template-columns: minmax(15rem, 18.5rem) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 1.25rem;
  align-items: stretch;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* Admin desk: one command deck; 01–07 open as popups over the deck. */
.admin-page .admin-shell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  grid-template-columns: unset;
  grid-template-rows: unset;
  gap: 0;
  width: min(58rem, 100%);
  max-width: min(58rem, 100%);
  /* Sit 7rem below the visual center (was 6rem). */
  margin: 7rem auto 0;
  /* Never shrink — 9th module must stay fully inside the deck frame. */
  flex: 0 0 auto;
  max-height: none;
  overflow: visible;
  /* Do not transform this shell — it contains position:fixed .admin-stage. */
}

/* Command deck HUD — gold palette, enlarged control panel */
.admin-page .admin-menu.admin-jarvis-deck {
  --deck-gold: #c9a574;
  --deck-gold-hot: #e0c08a;
  --deck-gold-soft: rgba(201, 165, 116, 0.55);
  --deck-gold-dim: rgba(168, 134, 92, 0.78);
  --deck-ink: rgba(232, 239, 233, 0.94);
  --deck-muted: rgba(197, 212, 200, 0.62);
  --font-deck-display: "Orbitron", "IBM Plex Mono", ui-monospace, monospace;
  --font-deck-ui: "Exo 2", "IBM Plex Sans", system-ui, sans-serif;
  position: relative;
  isolation: isolate;
  width: 100%;
  height: auto;
  max-height: none;
  align-self: stretch;
  padding: 2.15rem 1.85rem 2.65rem;
  border: 1px solid var(--deck-gold-soft);
  border-radius: 4px;
  /* Flat glass — no top→bottom wash; high transparency for background FX. */
  background: rgba(6, 6, 8, 0.38);
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
  box-shadow:
    0 0 0 1px rgba(201, 165, 116, 0.12),
    0 0 28px rgba(201, 165, 116, 0.08),
    0 18px 48px rgba(0, 0, 0, 0.35);
  /* Keep FX rings on .admin-jarvis-fx; do not clip module 09. */
  overflow: visible;
  color: var(--deck-ink);
  transform: translateY(-5rem);
}

.admin-page .admin-jarvis-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.admin-page .admin-jarvis-corner {
  position: absolute;
  width: 1.65rem;
  height: 1.65rem;
  border: 2px solid var(--deck-gold);
  opacity: 0.85;
}

.admin-page .admin-jarvis-corner--tl {
  top: 0.55rem;
  left: 0.55rem;
  border-right: 0;
  border-bottom: 0;
}

.admin-page .admin-jarvis-corner--tr {
  top: 0.55rem;
  right: 0.55rem;
  border-left: 0;
  border-bottom: 0;
  border-color: var(--deck-gold-hot);
}

.admin-page .admin-jarvis-corner--bl {
  bottom: 0.55rem;
  left: 0.55rem;
  border-right: 0;
  border-top: 0;
  border-color: var(--deck-gold-hot);
}

.admin-page .admin-jarvis-corner--br {
  bottom: 0.55rem;
  right: 0.55rem;
  border-left: 0;
  border-top: 0;
}

.admin-page .admin-jarvis-ring {
  position: absolute;
  right: -4.25rem;
  top: -4.75rem;
  width: 17rem;
  height: 17rem;
  border-radius: 50%;
  border: 1px solid rgba(201, 165, 116, 0.28);
  box-shadow: inset 0 0 24px rgba(201, 165, 116, 0.08);
}

.admin-page .admin-jarvis-ring--a {
  animation: admin-jarvis-spin 28s linear infinite;
}

.admin-page .admin-jarvis-ring--b {
  right: -2.6rem;
  top: -3rem;
  width: 12.5rem;
  height: 12.5rem;
  border-style: dashed;
  border-color: rgba(168, 134, 92, 0.4);
  animation: admin-jarvis-spin 18s linear infinite reverse;
}

.admin-page .admin-jarvis-scan {
  display: none;
}

@keyframes admin-jarvis-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes admin-jarvis-scan {
  0%,
  12% {
    transform: translateY(0);
    opacity: 0;
  }
  18% {
    opacity: 0.75;
  }
  55% {
    transform: translateY(280%);
    opacity: 0.35;
  }
  70%,
  100% {
    transform: translateY(320%);
    opacity: 0;
  }
}

@keyframes admin-jarvis-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(201, 165, 116, 0.55);
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 0 0.45rem rgba(201, 165, 116, 0);
    opacity: 0.7;
  }
}

.admin-page .admin-jarvis-head,
.admin-page .admin-jarvis-deck .admin-menu-list {
  position: relative;
  z-index: 1;
}

.admin-page .admin-jarvis-head {
  margin-bottom: 1.45rem;
  padding-right: 1.25rem;
}

.admin-page .admin-jarvis-deck .admin-menu-kicker {
  margin: 0 0 0.5rem;
  font-family: var(--font-deck-display) !important;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--deck-gold);
  text-shadow: 0 0 12px rgba(201, 165, 116, 0.28);
}

.admin-page .admin-jarvis-deck .admin-menu-brand {
  margin: 0 0 0.35rem;
  font-family: var(--font-deck-display) !important;
  font-size: clamp(2.15rem, 5vw, 2.75rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--deck-gold-hot);
  text-shadow:
    0 0 18px rgba(201, 165, 116, 0.28),
    0 0 2px rgba(201, 165, 116, 0.4);
}

.admin-page .admin-jarvis-deck .admin-menu-user {
  margin: 0 0 0.95rem;
  font-family: var(--font-deck-ui);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--deck-muted);
  word-break: break-all;
}

.admin-page .admin-jarvis-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  margin: 0;
  padding: 0.55rem 0.85rem;
  border: 1px solid rgba(201, 165, 116, 0.32);
  border-radius: 2px;
  background: rgba(8, 8, 10, 0.42);
  font-family: var(--font-deck-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--deck-gold-dim);
}

.admin-page .admin-jarvis-pulse {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--deck-gold);
  animation: admin-jarvis-pulse 1.8s ease-out infinite;
}

.admin-page .admin-jarvis-status-sep {
  color: var(--deck-gold-hot);
  opacity: 0.8;
}

.admin-page .admin-jarvis-deck .admin-menu-list {
  grid-template-columns: 1fr;
  gap: 0.55rem;
}

@media (min-width: 640px) {
  .admin-page .admin-jarvis-deck .admin-menu-list {
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem 0.65rem;
  }

  .admin-page .admin-jarvis-deck .admin-menu-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

.admin-page .admin-jarvis-deck .admin-menu-item {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  gap: 0.85rem;
  align-items: center;
  min-height: 4.15rem;
  width: 100%;
  padding: 1.05rem 1.2rem 1.05rem 1.05rem;
  border: 1px solid rgba(201, 165, 116, 0.28);
  border-radius: 3px;
  background:
    linear-gradient(90deg, rgba(201, 165, 116, 0.14), transparent 42%),
    rgba(8, 8, 10, 0.55);
  color: var(--deck-ink);
  font-family: var(--font-deck-ui);
  box-shadow: inset 3px 0 0 rgba(201, 165, 116, 0.4);
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.12s ease;
}

.admin-page .admin-jarvis-deck .admin-menu-item:hover,
.admin-page .admin-jarvis-deck .admin-menu-item:focus-visible {
  color: var(--paper, #e8efe9);
  border-color: rgba(201, 165, 116, 0.72);
  background:
    linear-gradient(90deg, rgba(201, 165, 116, 0.2), transparent 50%),
    rgba(201, 165, 116, 0.1);
  box-shadow:
    inset 3px 0 0 var(--deck-gold),
    0 0 16px rgba(201, 165, 116, 0.16);
  outline: none;
  transform: translateX(2px);
}

.admin-page .admin-jarvis-deck .admin-menu-item.is-active {
  color: var(--deck-gold-hot);
  border-color: rgba(201, 165, 116, 0.75);
  background:
    linear-gradient(90deg, rgba(201, 165, 116, 0.22), transparent 55%),
    rgba(201, 165, 116, 0.1);
  box-shadow:
    inset 3px 0 0 var(--deck-gold-hot),
    0 0 18px rgba(201, 165, 116, 0.18);
}

.admin-page .admin-jarvis-deck .admin-menu-idx {
  font-family: var(--font-deck-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--deck-gold);
}

.admin-page .admin-jarvis-deck .admin-menu-item.is-active .admin-menu-idx {
  color: var(--deck-gold-hot);
}

.admin-page .admin-jarvis-deck .admin-menu-label {
  font-family: var(--font-deck-ui);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: left;
}

.admin-page .admin-jarvis-item-mark {
  width: 0.65rem;
  height: 0.65rem;
  border: 1px solid var(--deck-gold-soft);
  transform: rotate(45deg);
  opacity: 0.55;
}

.admin-page .admin-jarvis-deck .admin-menu-item:hover .admin-jarvis-item-mark,
.admin-page .admin-jarvis-deck .admin-menu-item:focus-visible .admin-jarvis-item-mark {
  opacity: 1;
  background: rgba(201, 165, 116, 0.35);
  box-shadow: 0 0 8px rgba(201, 165, 116, 0.4);
}

.admin-page .admin-jarvis-deck .admin-menu-item.is-active .admin-jarvis-item-mark {
  border-color: var(--deck-gold-hot);
  background: rgba(201, 165, 116, 0.55);
  box-shadow: 0 0 8px rgba(201, 165, 116, 0.4);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .admin-page .admin-jarvis-ring--a,
  .admin-page .admin-jarvis-ring--b,
  .admin-page .admin-jarvis-scan,
  .admin-page .admin-jarvis-pulse {
    animation: none;
  }
}

.admin-page .admin-menu {
  width: 100%;
  height: auto;
  max-height: none;
  align-self: stretch;
  padding: 1.45rem 1.25rem 1.35rem;
}

.admin-page .admin-menu-list {
  grid-template-columns: 1fr;
  gap: 0.45rem;
}

@media (min-width: 640px) {
  .admin-page .admin-menu-list {
    grid-template-columns: 1fr 1fr;
  }

  .admin-page .admin-menu-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

.admin-page .admin-menu-item {
  min-height: 3.1rem;
  padding: 0.85rem 0.85rem;
}

.admin-page .admin-stage {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: auto;
  height: auto;
  max-height: none;
  margin: 0;
  /* Clear fixed desk-nav (Admin desk / Main / …) above the popup. */
  padding: calc(var(--desk-chrome-clear) + 0.55rem) max(1rem, 2.5vw) max(1rem, 2.25vh);
  overflow: auto;
  overscroll-behavior: contain;
  background: rgba(4, 4, 6, 0.72);
  scrollbar-width: thin;
}

.admin-page .admin-stage:not(:has(.admin-panel.is-active:not([hidden]))) {
  display: none;
}

.admin-page .admin-stage .admin-panel.is-active:not([hidden]) {
  --admin-popup-max-h: calc(100dvh - var(--desk-chrome-clear) - 2.25rem);
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(96vw, 88rem);
  height: var(--admin-popup-max-h) !important;
  max-height: var(--admin-popup-max-h) !important;
  margin: 0 auto;
  overflow: hidden;
  box-sizing: border-box;
  animation: rise 0.35s ease-out both;
}

.admin-page .admin-stage .admin-panel.is-active:not([hidden]) > .admin-command-title-row {
  flex: 0 0 auto;
}

/* Title + Back share one horizontal row (01–07). */
.admin-page .admin-command-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.55rem 1rem;
}

.admin-page .admin-command-title-row > .admin-panel-kicker,
.admin-page .admin-command-title-row .admin-panel-kicker {
  margin: 0;
}

.admin-page .admin-command-title-row > .admin-command-dialog-close,
.admin-page .admin-command-title-row .admin-user-head-actions {
  flex: 0 0 auto;
  margin-left: auto;
}

.admin-page .admin-command-dialog-close {
  flex: 0 0 auto;
  box-sizing: border-box;
  min-width: 7.5rem;
  min-height: 1.85rem;
  padding: 0 1.6rem;
  border: 1px solid rgba(168, 134, 92, 0.45);
  border-radius: 2px;
  background: rgba(168, 134, 92, 0.12);
  color: var(--accent-hot, #c9a574);
  font: inherit;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
}

.admin-page .admin-command-dialog-close:hover {
  background: rgba(168, 134, 92, 0.22);
}

.admin-page #panel-investigation .admin-investigation-head {
  display: flex;
  margin-bottom: 0.85rem;
}

.admin-page .admin-stage #panel-create-user.admin-panel.is-active:not([hidden]),
.admin-page .admin-stage #panel-grant-rsv.admin-panel.is-active:not([hidden]),
.admin-page .admin-stage #panel-blacklist.admin-panel.is-active:not([hidden]),
.admin-page .admin-stage #panel-stats.admin-panel.is-active:not([hidden]) {
  overflow: auto;
}


.admin-page #panel-investigation .admin-investigation-holdings {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
}

.admin-page #panel-investigation.admin-panel.is-active:not([hidden]) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.admin-page #panel-investigation .admin-investigation-launch {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
}

.admin-page #panel-investigation .admin-investigation-split {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(16rem, 0.9fr);
  gap: 0.75rem;
  flex: 1 1 auto;
  min-height: 0;
  align-items: stretch;
}

.admin-page #panel-investigation .admin-investigation-catalog,
.admin-page #panel-investigation .admin-investigation-picked {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.admin-page #panel-investigation .admin-investigation-picked-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  margin: 0;
}

.admin-page #panel-investigation .admin-investigation-picked-form .admin-investigation-picked {
  flex: 1 1 auto;
}

.admin-page #panel-investigation .admin-investigation-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
}

.admin-menu,
.game-menu {
  /* Same as Admin desk: card hugs menu content; only scrolls if the list itself overflows. */
  position: relative;
  top: auto;
  width: 100%;
  height: fit-content;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  align-self: start;
  padding: 1.25rem 1rem 1.1rem;
  border: 1px solid var(--frame-edge);
  border-bottom-width: var(--frame-bevel);
  border-radius: 8px;
  background: #0c0d10;
  box-shadow: var(--frame-shadow-3d);
  z-index: 5;
}

.admin-menu-kicker,
.game-menu-kicker {
  margin: 0 0 0.35rem;
  font-family: var(--font-herald);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: var(--accent);
}

.admin-menu-brand,
.game-menu-brand {
  margin: 0 0 0.2rem;
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--accent-hot);
}

.admin-menu-user,
.game-menu-user {
  margin: 0 0 1.1rem;
  font-size: 0.82rem;
  color: var(--paper-dim);
  word-break: break-all;
}

.admin-menu-list,
.game-menu-list {
  display: grid;
  gap: 0.35rem;
}

.char-rank-slot {
  margin: 0;
  display: grid;
  gap: 0.45rem;
}

.admin-menu .char-rank-slot,
.game-menu .char-rank-slot {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(201, 165, 116, 0.18);
}

.admin-menu .char-rank-btn,
.game-menu .char-rank-btn {
  width: 100%;
}

.admin-menu-item,
.game-menu-item {
  display: grid;
  grid-template-columns: 2.1rem 1fr;
  gap: 0.55rem;
  align-items: center;
  width: 100%;
  padding: 0.72rem 0.7rem;
  border: 1px solid rgba(168, 134, 92, 0.18);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.28);
  color: var(--paper-dim);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease,
    transform 0.08s ease;
}

.admin-menu-item:hover,
.game-menu-item:hover {
  color: var(--paper);
  border-color: rgba(201, 165, 116, 0.42);
  background: rgba(201, 165, 116, 0.08);
}

.admin-menu-item.is-active,
.game-menu-item.is-active {
  color: var(--accent-hot);
  border-color: rgba(201, 165, 116, 0.65);
  background:
    linear-gradient(90deg, rgba(201, 165, 116, 0.16), rgba(0, 0, 0, 0.2));
  box-shadow: inset 3px 0 0 var(--accent-hot);
}

.admin-menu-idx,
.game-menu-idx {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--accent);
}

.admin-menu-label,
.game-menu-label {
  font-weight: 600;
  font-size: 0.92rem;
}

.admin-menu-foot,
.game-menu-foot {
  display: grid;
  gap: 0.45rem;
  margin-top: 1.15rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(232, 239, 233, 0.1);
}

.admin-menu-foot .admin-foot-link,
.admin-menu-foot .desk-nav-btn {
  width: 100%;
  justify-content: flex-start;
}

.admin-logout,
.game-logout {
  margin: 0.15rem 0 0;
  text-align: center;
}

.admin-logout .ghost,
.admin-menu-foot > .ghost,
.game-logout .ghost {
  width: 100%;
  justify-content: center;
}

.menu-signout {
  appearance: none;
  margin: 0;
  padding: 0.2rem 0.35rem;
  border: none;
  background: none;
  color: rgba(197, 212, 200, 0.42);
  font: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-color: transparent;
  cursor: pointer;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.menu-signout:hover,
.menu-signout:focus-visible {
  color: rgba(197, 212, 200, 0.72);
  text-decoration-color: rgba(197, 212, 200, 0.35);
  outline: none;
}

/* Cross-deck gates — portal ↔ admin (not in-tab nav) */
.menu-gate {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 0.55rem;
  align-items: center;
  margin-top: 0.85rem;
  padding: 0.85rem 0.9rem 0.8rem;
  border: 1px solid rgba(201, 165, 116, 0.62);
  border-bottom-width: 3px;
  border-bottom-color: #4a3c1c;
  border-radius: 4px;
  background:
    linear-gradient(165deg, rgba(56, 46, 24, 0.72) 0%, rgba(12, 16, 14, 0.95) 100%);
  color: var(--accent-hot);
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(201, 165, 116, 0.22),
    0 4px 0 rgba(0, 0, 0, 0.45),
    0 10px 18px rgba(0, 0, 0, 0.28);
  transition:
    transform 0.08s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    color 0.15s ease;
}

.game-menu .menu-gate {
  margin-top: 0.75rem;
}

.admin-menu-foot .menu-gate {
  margin-top: 0;
  width: 100%;
  box-sizing: border-box;
}

.menu-gate:hover {
  color: #f3df9a;
  border-color: rgba(243, 223, 154, 0.85);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(201, 165, 116, 0.3),
    0 5px 0 rgba(0, 0, 0, 0.5),
    0 14px 22px rgba(0, 0, 0, 0.35);
}

.menu-gate:active {
  transform: translateY(2px);
  border-bottom-width: 1px;
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.45),
    0 1px 0 rgba(0, 0, 0, 0.4);
}

.menu-gate-kicker {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-herald);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

.menu-gate-title {
  grid-column: 1;
  grid-row: 2;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.menu-gate-arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--accent-hot);
  opacity: 0.9;
}

.menu-gate--back {
  grid-template-columns: auto 1fr;
}

.menu-gate--back .menu-gate-arrow {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.menu-gate--back .menu-gate-kicker,
.menu-gate--back .menu-gate-title {
  grid-column: 2;
}

.admin-stage {
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  align-self: stretch;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 0.15rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.admin-stage::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* History archive — fixed panel 框; natural-size rows; scroll the list (no bar). */
.admin-stage:has(#panel-history.is-active:not([hidden])) {
  overflow: hidden;
}

/* Main 02 Archive: grow right to a 2rem viewport gutter so Level/Type/Seat/Firm fit. */
body.portal-page:has(#panel-history.is-active:not([hidden])) main.portal-main {
  max-width: none;
  width: auto;
  margin-right: 2rem;
  padding-right: 0.75rem;
}

body.portal-page:has(#panel-history.is-active:not([hidden])) .admin-shell.game-shell,
body.portal-page:has(#panel-history.is-active:not([hidden])) .admin-stage,
body.portal-page:has(#panel-history.is-active:not([hidden])) #panel-history.hub-panel {
  width: 100%;
  max-width: none;
}

#panel-history.hub-panel.is-active {
  display: flex;
  flex-direction: column;
  height: calc(100% - 0.35rem);
  max-height: calc(100% - 0.35rem);
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}

#panel-history .hub-history-roster-head,
#panel-history .hub-history-ledger-tools {
  flex: 0 0 auto;
}

#panel-history .hub-history-roster-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem 1.25rem;
  margin-bottom: 0.75rem;
}

#panel-history .hub-history-roster-head .admin-sessions-roster-head-main {
  min-width: 0;
}

#panel-history .hub-history-roster-head .admin-panel-kicker {
  margin: 0;
}

#panel-history .hub-history-roster-head .admin-sessions-roster-head-meta {
  display: grid;
  gap: 0.28rem;
  justify-items: end;
  text-align: right;
  max-width: 24rem;
  margin-left: auto;
}

#panel-history .hub-history-ledger-tools {
  margin: 0 0 0.55rem;
}

#panel-history .admin-stats-holdings-filters-fold {
  margin-bottom: 0;
}

#panel-history .admin-stats-holdings-filters .admin-stats-field {
  flex: 1 1 8.5rem;
  min-width: 8rem;
}

#panel-history .admin-stats-holdings-filters .admin-stats-field--session-combo {
  flex: 1 1 10rem;
  min-width: 9rem;
}

#panel-history .admin-stats-holdings-filters .admin-stats-field--narrow,
#panel-history .admin-stats-holdings-filters-rows {
  flex: 0 0 auto;
  width: auto;
  min-width: 5rem;
}

#panel-history .admin-stats-holdings-filters .ledger-combo {
  width: 100%;
}

#panel-history .admin-stats-holdings-filters .ledger-combo .user-combo-shell {
  min-height: 2.05rem;
  border: 1px solid rgba(168, 134, 92, 0.38);
  border-radius: 2px;
  background: var(--stats-panel-deep);
}

#panel-history .admin-stats-holdings-filters .ledger-combo .user-combo-input {
  min-height: 2.05rem;
  padding: 0.35rem 0.45rem;
  font-size: 0.78rem;
  color: var(--stats-paper);
}

#panel-history .hub-history-lede {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.3rem 0.4rem;
  margin: 0;
}

#panel-history .hub-history-lede .admin-sessions-count {
  font-family: var(--stats-mono);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--stats-paper);
  text-transform: uppercase;
}

#panel-history .hub-history-lede .admin-sessions-lede-copy {
  font-family: var(--stats-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stats-muted);
}

#panel-history .hub-history-book {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--stats-line);
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(28, 26, 22, 0.55) 0%, var(--stats-ink) 100%);
  box-shadow:
    inset 0 0 0 1px var(--stats-line-soft),
    0 1px 0 rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

#panel-history .hub-history-book .hist-roster,
#panel-history .hist-roster {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  display: flex !important;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: flex-start;
  align-items: stretch;
  gap: 0.4rem !important;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0.5rem !important;
  margin: 0 !important;
  list-style: none;
  background: transparent;
  border: 0;
}

#panel-history .hist-roster::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

#panel-history .hub-history-book .hist-row:not([hidden]),
#panel-history .hist-roster > .hist-row:not([hidden]),
#panel-history .hist-roster > .admin-roster-item:not([hidden]) {
  flex: 0 0 auto;
  display: block !important;
  width: 100%;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(168, 134, 92, 0.38) !important;
  border-radius: 2px !important;
  background: rgba(0, 0, 0, 0.34) !important;
  box-shadow: inset 0 0 0 1px var(--stats-line-soft);
}

#panel-history .hist-roster > .hist-row:hover,
#panel-history .hist-roster > .hist-row:focus-within {
  border-color: rgba(201, 165, 116, 0.72) !important;
  background: rgba(168, 134, 92, 0.12) !important;
  box-shadow: inset 0 0 0 1px var(--stats-line);
}

#panel-history .hist-row:has([data-hist-star]) {
  display: block;
  grid-template-columns: none;
}

#panel-history .hist-row-plate {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.45rem 0.85rem;
  padding: 0.4rem 0.55rem 0.4rem 0.65rem;
  min-width: 0;
}

#panel-history .hist-row-plate--starred {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

#panel-history .hist-row-hit-stretch {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  margin: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  color: transparent;
}

#panel-history .hist-row-copy,
#panel-history .hist-row-score,
#panel-history .hist-row-star {
  position: relative;
  z-index: 1;
}

#panel-history .hist-roster > .hist-row,
#panel-history .hist-roster > .admin-roster-item {
  cursor: pointer;
}

#panel-history .hist-row-star {
  margin: 0;
  width: 1.45rem;
  height: 1.45rem;
  align-self: center;
  font-size: 0.95rem;
  cursor: pointer;
}

#panel-history .hist-row-copy {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

#panel-history .hist-row-titleline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
  min-width: 0;
}

#panel-history .hist-row-seat {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.15;
  color: #f4eee3;
  text-decoration: none;
  cursor: pointer;
}

#panel-history .hist-row-seat:hover {
  color: #fff4e0;
}

#panel-history .hist-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.3rem;
  margin: 0;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

#panel-history .hist-row-firm {
  font-family: var(--font-herald);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #d4b88a;
}

#panel-history .hist-row-meta-sep {
  color: rgba(182, 168, 144, 0.45);
  font-size: 0.65rem;
}

#panel-history .hist-row-when {
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  font-size: 0.66rem;
  letter-spacing: 0.01em;
  color: #cfc3ae;
}

#panel-history .hist-row-score {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  justify-self: end;
  gap: 0.35rem;
  margin-left: auto;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

#panel-history .hist-xp.rpg-xp {
  min-width: 4.5rem;
}

#panel-history .hist-xp .rpg-xp-value {
  font-size: 0.95rem;
}

#panel-history .hub-history-pager {
  flex: 0 0 auto;
  margin: 0;
  margin-top: auto;
  padding: 0.45rem 0.65rem;
  border-top: 1px solid var(--stats-line);
  background: rgba(0, 0, 0, 0.28);
  justify-content: flex-end;
}

#panel-history .hub-history-pager[hidden] {
  display: none !important;
}

#panel-history .hub-history-pager .admin-stats-pager-status {
  color: var(--stats-muted);
}

#panel-history .hub-history-pager .admin-stats-pager-jump-input {
  border: 1px solid rgba(168, 134, 92, 0.38) !important;
  background: var(--stats-panel-deep) !important;
  color: var(--stats-paper) !important;
  box-shadow: none;
}

#panel-history .hub-history-pager .admin-stats-pager-jump-input:focus {
  border-color: rgba(201, 165, 116, 0.72) !important;
  box-shadow: 0 0 0 1px rgba(201, 165, 116, 0.28);
}

#panel-history .hub-history-book-empty:not([hidden]),
#panel-history .hub-history-book > .hub-empty:not([hidden]) {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 1.35rem 1rem;
  text-align: center;
  font-family: var(--font-herald, var(--font-display));
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stats-muted, rgba(182, 168, 144, 0.72));
}

#panel-history .hub-history-book-empty[hidden],
#panel-history .hub-history-book > .hub-empty[hidden] {
  display: none !important;
}

#panel-history .hub-history-book:has(#hist-empty:not([hidden])) .hist-roster {
  display: none !important;
}

/* History Search + pager CTAs — dark fill, gold rim (match Admin desk) */
#panel-history .admin-stats-go,
#panel-history .admin-stats-pager-btn {
  border: 1px solid rgba(201, 165, 116, 0.65) !important;
  border-radius: 2px !important;
  background: #0c0d10 !important;
  color: var(--accent-hot, #c9a574) !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  box-shadow: none !important;
}

#panel-history .admin-stats-go:hover,
#panel-history .admin-stats-pager-btn:hover {
  filter: brightness(1.08);
  color: #e8d4b0 !important;
  border-color: rgba(201, 165, 116, 0.85) !important;
}

#panel-history .admin-stats-pager-btn {
  min-height: 1.7rem;
  padding: 0.2rem 0.65rem;
  font-size: 0.66rem !important;
}

#panel-history .admin-stats-pager-btn.is-disabled,
#panel-history .admin-stats-pager-btn:disabled {
  opacity: 0.35;
  filter: none;
  pointer-events: none;
}

/* Recent sessions — same fixed frame + scroll list pattern. */
.admin-stage:has(#panel-sessions.is-active:not([hidden])) {
  overflow: hidden;
}

#panel-sessions.admin-panel.is-active {
  display: flex;
  flex-direction: column;
  height: calc(100% - 0.35rem);
  max-height: calc(100% - 0.35rem);
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}

#panel-sessions .admin-panel-head,
#panel-sessions .admin-sessions-ledger-tools,
#panel-sessions #sessions-empty,
#panel-sessions > .admin-empty {
  flex: 0 0 auto;
}

#panel-sessions .admin-sessions-roster-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem 1.25rem;
  margin-bottom: 0.75rem;
}

#panel-sessions .admin-sessions-roster-head-main {
  min-width: 0;
}

#panel-sessions .admin-sessions-roster-head-main .admin-panel-kicker {
  margin: 0 0 0.3rem;
}

#panel-sessions .admin-sessions-roster-head-main h1 {
  margin: 0;
}

#panel-sessions .admin-sessions-roster-head-meta {
  display: grid;
  gap: 0.28rem;
  justify-items: end;
  text-align: right;
  max-width: 24rem;
  margin-left: auto;
}

#panel-sessions .admin-sessions-ledger-tools {
  margin: 0 0 0.55rem;
}

#panel-sessions .admin-stats-holdings-filters-fold {
  margin-bottom: 0;
}

#panel-sessions .admin-stats-holdings-filters .admin-stats-field {
  flex: 1 1 8.5rem;
  min-width: 8rem;
}

#panel-sessions .admin-stats-holdings-filters .admin-stats-field--session-combo {
  flex: 1 1 10rem;
  min-width: 9rem;
}

#panel-sessions .admin-stats-holdings-filters .admin-stats-field--narrow,
#panel-sessions .admin-stats-holdings-filters-rows {
  flex: 0 0 auto;
  width: auto;
  min-width: 5rem;
}

#panel-sessions .admin-stats-holdings-filters .ledger-combo {
  width: 100%;
}

#panel-sessions .admin-stats-holdings-filters .ledger-combo .user-combo-shell {
  min-height: 2.05rem;
  border: 1px solid rgba(168, 134, 92, 0.38);
  border-radius: 2px;
  background: var(--stats-panel-deep);
}

#panel-sessions .admin-stats-holdings-filters .ledger-combo .user-combo-input {
  min-height: 2.05rem;
  padding: 0.35rem 0.45rem;
  font-size: 0.78rem;
  color: var(--stats-paper);
}

#panel-sessions .admin-sessions-lede {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.3rem 0.4rem;
  margin: 0;
}

#panel-sessions .admin-sessions-count {
  font-family: var(--stats-mono);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--stats-paper);
  text-transform: uppercase;
}

#panel-sessions .admin-sessions-lede-copy {
  font-family: var(--stats-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stats-muted);
}

/* Outer book + inner record plates */
#panel-sessions .admin-sessions-book {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--stats-line);
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(28, 26, 22, 0.55) 0%, var(--stats-ink) 100%);
  box-shadow:
    inset 0 0 0 1px var(--stats-line-soft),
    0 1px 0 rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

#panel-sessions .admin-sessions-book .hist-roster,
#panel-sessions .hist-roster {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  display: flex !important;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: flex-start;
  align-items: stretch;
  gap: 0.4rem !important;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0.5rem !important;
  margin: 0 !important;
  list-style: none;
  background: transparent;
  border: 0;
}

#panel-sessions .hist-roster::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

#panel-sessions .admin-sessions-book .hist-row:not([hidden]),
#panel-sessions .hist-roster > .hist-row:not([hidden]),
#panel-sessions .hist-roster > .admin-roster-item:not([hidden]) {
  flex: 0 0 auto;
  display: block !important;
  width: 100%;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(168, 134, 92, 0.38) !important;
  border-radius: 2px !important;
  background: rgba(0, 0, 0, 0.34) !important;
  box-shadow: inset 0 0 0 1px var(--stats-line-soft);
}

#panel-sessions .hist-roster > .hist-row:hover,
#panel-sessions .hist-roster > .hist-row:focus-within {
  border-color: rgba(201, 165, 116, 0.72) !important;
  background: rgba(168, 134, 92, 0.12) !important;
  box-shadow: inset 0 0 0 1px var(--stats-line);
}

#panel-sessions .hist-row-plate {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.45rem 0.85rem;
  padding: 0.4rem 0.65rem;
  min-width: 0;
}

#panel-sessions .hist-row-hit-stretch,
#admin-user-hist-dialog .hist-row-hit-stretch {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  margin: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  color: transparent;
}

#panel-sessions .hist-row-copy,
#panel-sessions .hist-row-score,
#panel-sessions .hist-row-titleline .hist-admin-form,
#admin-user-hist-dialog .hist-row-copy,
#admin-user-hist-dialog .hist-row-score,
#admin-user-hist-dialog .hist-row-titleline .hist-admin-form {
  position: relative;
  z-index: 1;
}

#panel-sessions .hist-row-seat,
#panel-sessions .hist-row-meta,
#panel-sessions .hist-row-score,
#admin-user-hist-dialog .hist-row-seat,
#admin-user-hist-dialog .hist-row-meta,
#admin-user-hist-dialog .hist-row-score {
  cursor: pointer;
}

#panel-sessions .hist-row-copy {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

#panel-sessions .hist-row-titleline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
  min-width: 0;
}

#panel-sessions .hist-row-seat {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.15;
  color: #f4eee3;
  text-decoration: none;
}

#panel-sessions .hist-row-seat:hover {
  color: #fff4e0;
}

#panel-sessions .hist-row-titleline .hist-admin-form {
  margin: 0;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  overflow: visible;
}

#panel-sessions .hist-roster > .hist-row {
  overflow: visible;
}

#panel-sessions .hist-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.3rem;
  margin: 0;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

#panel-sessions .hist-row-firm {
  font-family: var(--font-herald);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #d4b88a;
}

#panel-sessions .hist-row-meta-sep {
  color: rgba(182, 168, 144, 0.45);
  font-size: 0.65rem;
}

#panel-sessions .hist-row-account {
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 0.66rem;
  letter-spacing: 0.01em;
  color: #cfc3ae;
}

#panel-sessions .hist-row-account.is-empty {
  font-family: var(--font-herald);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(182, 168, 144, 0.65);
}

#panel-sessions .hist-row-when {
  margin-top: 0;
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 0.64rem;
  letter-spacing: 0.02em;
  color: rgba(201, 165, 116, 0.92);
}

#panel-sessions .hist-row-score {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  justify-self: end;
  gap: 0.2rem;
  margin-left: auto;
  min-width: 5.5rem;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

#panel-sessions .hist-roster > .hist-row,
#panel-sessions .hist-roster > .admin-roster-item,
#panel-sessions .hist-row-seat,
#panel-sessions .hist-row-meta {
  cursor: pointer;
}

#panel-sessions .hist-xp.rpg-xp {
  min-width: 5.25rem;
  padding: 0.18rem 0.4rem 0.22rem;
}

#panel-sessions .hist-xp .rpg-xp-value {
  font-size: 0.95rem;
}

#panel-sessions .admin-sessions-pager {
  flex: 0 0 auto;
  margin: 0;
  margin-top: auto;
  padding: 0.45rem 0.65rem;
  border-top: 1px solid var(--stats-line);
  background: rgba(0, 0, 0, 0.28);
  justify-content: flex-end;
}

#panel-sessions .admin-sessions-pager .admin-stats-pager-status {
  color: var(--stats-muted);
}

#panel-sessions .admin-sessions-pager .admin-stats-pager-jump-input {
  border: 1px solid rgba(168, 134, 92, 0.38) !important;
  background: var(--stats-panel-deep) !important;
  color: var(--stats-paper) !important;
  box-shadow: none;
}

#panel-sessions .admin-sessions-pager .admin-stats-pager-jump-input:focus {
  border-color: rgba(201, 165, 116, 0.72) !important;
  box-shadow: 0 0 0 1px rgba(201, 165, 116, 0.28);
}

.game-stage,
.admin-panel {
  min-width: 0;
  padding: 1.5rem 1.6rem 1.7rem;
  border: 1px solid var(--frame-edge);
  border-bottom-width: var(--frame-bevel);
  border-radius: 8px;
  background: #0c0d10;
  box-shadow: var(--frame-shadow-3d);
  animation: rise 0.45s ease-out both;
}

.admin-panel-head,
.game-stage-head {
  margin-bottom: 1.15rem;
}

.admin-panel-kicker,
.game-stage-kicker {
  margin: 0 0 0.35rem;
  font-family: var(--font-herald);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: var(--accent);
}

/* Admin + Main titles — Cinzel (same as Statistics / Holdings), not stats mono */
.admin-page .admin-panel-kicker,
.admin-page .game-stage-kicker,
.admin-page .admin-create-section,
.admin-page .admin-grant-section,
.admin-page .admin-grant-book-title,
.admin-page .admin-blacklist-layer-title,
.admin-page .admin-stats-holdings-open-title,
.admin-page .admin-stats-card-title,
.admin-page .admin-stats-section-title,
.admin-page .admin-stats-kpi-kicker,
.admin-page .admin-ban-panel-kicker,
.admin-page .char-section-title,
.admin-page .hub-seat-rsv-title,
.admin-page .admin-menu-kicker,
.admin-page .cal-detail-kicker,
.portal-page .admin-panel-kicker,
.portal-page .game-stage-kicker,
.portal-page .admin-create-section,
.portal-page .char-section-title,
.portal-page .hub-seat-rsv-title,
.portal-page .admin-menu-kicker,
.portal-page .admin-stats-section-title,
.portal-page .admin-stats-holdings-open-title,
.portal-page .admin-stats-card-title,
.portal-page .cal-detail-kicker {
  font-family: var(--font-herald) !important;
}

.admin-panel-head h1,
.game-stage-head h1 {
  margin-bottom: 0.35rem;
}

.admin-panel-head .lede,
.game-stage-head .lede {
  margin-bottom: 0;
}

.admin-form {
  max-width: 28rem;
  gap: 1rem;
}

.admin-create-form {
  max-width: none;
  width: 100%;
  gap: 0.85rem;
  margin: 0.65rem 0 0;
}

.admin-create-head .lede {
  max-width: 42rem;
}

.admin-role-pick {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.admin-role-pick > .login-label {
  display: block;
  margin-bottom: 0.4rem;
}

.admin-role-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}

.admin-role-opt {
  display: block;
  margin: 0;
  cursor: pointer;
}

.admin-role-opt input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
}

.admin-role-card {
  display: grid;
  gap: 0.18rem;
  min-height: 0;
  padding: 0.65rem 0.8rem;
  border: 1px solid rgba(168, 134, 92, 0.32);
  border-bottom-width: 3px;
  border-bottom-color: rgba(0, 0, 0, 0.55);
  border-radius: 4px;
  background:
    linear-gradient(165deg, rgba(48, 40, 28, 0.55) 0%, rgba(12, 11, 10, 0.92) 100%);
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.admin-role-opt:hover .admin-role-card {
  border-color: rgba(201, 165, 116, 0.55);
}

.admin-role-opt:focus-within .admin-role-card,
.admin-role-opt input:checked + .admin-role-card {
  border-color: rgba(201, 165, 116, 0.88);
  box-shadow:
    inset 0 0 0 1px rgba(201, 165, 116, 0.22),
    0 0 0 1px rgba(201, 165, 116, 0.12);
  background:
    linear-gradient(165deg, rgba(90, 68, 28, 0.55) 0%, rgba(18, 14, 10, 0.95) 100%);
}

.admin-role-name {
  font-family: var(--font-display, var(--font-herald));
  font-size: 0.98rem;
  letter-spacing: 0.04em;
  color: var(--paper);
}

.admin-role-blurb {
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--paper-dim);
}

.admin-create-creds {
  display: grid;
  gap: 0.65rem;
  padding: 0.75rem 0.9rem 0.8rem;
  border: 1px solid rgba(201, 165, 116, 0.18);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(28, 24, 18, 0.55) 0%, rgba(10, 10, 12, 0.35) 100%);
}

.admin-create-section {
  margin: 0;
  font-family: var(--font-herald);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

.admin-create-form .login-field {
  gap: 0.28rem;
}

.admin-create-form .login-field input {
  border: 1px solid rgba(168, 134, 92, 0.38);
  border-bottom-width: 3px;
  border-bottom-color: rgba(0, 0, 0, 0.62);
  min-height: 2.45rem;
  padding: 0.55rem 0.75rem;
  background-color: rgba(8, 9, 10, 0.98);
  color: var(--paper);
  caret-color: var(--accent-hot);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.admin-create-form .login-field input:focus {
  outline: none;
  border-color: rgba(201, 165, 116, 0.75);
  background-color: rgba(8, 9, 10, 0.98);
  box-shadow: 0 0 0 2px rgba(201, 165, 116, 0.18);
}

.admin-create-form .login-field input::placeholder {
  color: rgba(232, 239, 233, 0.28);
}

/* Chrome/Safari autofill paints white over dark inputs — keep desk palette */
.admin-create-form .login-field input:-webkit-autofill,
.admin-create-form .login-field input:-webkit-autofill:hover,
.admin-create-form .login-field input:-webkit-autofill:focus,
.admin-create-form .login-field input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--paper) !important;
  caret-color: var(--accent-hot);
  border: 1px solid rgba(201, 165, 116, 0.55);
  border-bottom-width: 3px;
  border-bottom-color: rgba(0, 0, 0, 0.62);
  box-shadow:
    0 0 0 1000px rgba(8, 9, 10, 0.98) inset,
    0 0 0 2px rgba(201, 165, 116, 0.12);
  transition: background-color 99999s ease-out 0s;
}

.admin-create-foot {
  display: flex;
  justify-content: flex-end;
  margin: 0.15rem 0 0;
  padding: 0.55rem 0 0;
  border-top: 1px solid rgba(201, 165, 116, 0.14);
}

.admin-create-submit {
  margin: 0;
  min-width: 10rem;
}

#panel-create-user.admin-panel {
  height: fit-content;
  padding-bottom: 1.25rem;
}

@media (max-width: 560px) {
  .admin-role-grid {
    grid-template-columns: 1fr;
  }
}

.admin-form select,
.admin-form textarea,
.admin-form input {
  width: 100%;
  box-sizing: border-box;
  min-height: 2.65rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid rgba(0, 0, 0, 0.55);
  border-radius: 4px;
  background: rgba(8, 9, 10, 0.92);
  color: var(--paper);
  font: inherit;
}

.admin-form textarea {
  min-height: 6rem;
  resize: vertical;
}

.admin-form.admin-ban-form textarea {
  min-height: 5.5rem;
  resize: none;
}

/* Searchable user combobox (grant reservation) */
.user-combo {
  position: relative;
  display: grid;
  gap: 0.35rem;
}

.user-combo-shell {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
  border: 1px solid rgba(168, 134, 92, 0.38);
  border-bottom-width: 3px;
  border-bottom-color: rgba(0, 0, 0, 0.62);
  border-radius: 4px;
  background: rgba(8, 9, 10, 0.92);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.user-combo.is-open .user-combo-shell,
.user-combo-shell:focus-within {
  border-color: rgba(201, 165, 116, 0.75);
  box-shadow: 0 0 0 2px rgba(201, 165, 116, 0.18);
}

.user-combo.is-picked .user-combo-shell {
  border-color: rgba(201, 165, 116, 0.55);
}

.user-combo-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 2.65rem;
  margin: 0;
  padding: 0.65rem 0.75rem;
  border: 0;
  border-radius: 4px 0 0 2px;
  background: transparent;
  box-shadow: none;
  color: var(--paper);
  font: inherit;
  outline: none;
}

.admin-form .user-combo-input {
  min-height: 2.65rem;
}

.user-combo-input.is-picked {
  color: var(--paper);
}

.user-combo-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid rgba(168, 134, 92, 0.28);
  border-radius: 0 3px 1px 0;
  background: rgba(201, 165, 116, 0.06);
  color: var(--accent-hot);
  font-size: 0.85rem;
  cursor: pointer;
}

.user-combo-toggle:hover {
  background: rgba(201, 165, 116, 0.14);
}

.user-combo-menu {
  position: absolute;
  z-index: 12;
  top: calc(100% - 0.15rem);
  left: 0;
  right: 0;
  max-height: 14rem;
  overflow: auto;
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  border: 1px solid rgba(168, 134, 92, 0.42);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(28, 26, 20, 0.98) 0%, rgba(8, 10, 12, 0.98) 100%);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(201, 165, 116, 0.12);
}

.user-combo-menu[hidden] {
  display: none !important;
}

.user-combo-menu [role="option"] {
  display: grid;
  gap: 0.2rem;
  padding: 0.55rem 0.65rem;
  border-radius: 3px;
  cursor: pointer;
  color: var(--paper);
}

.user-combo-menu [role="option"]:hover,
.user-combo-menu [role="option"].is-active {
  background: rgba(201, 165, 116, 0.14);
  color: var(--accent-hot);
}

.user-combo-menu [role="option"][hidden] {
  display: none !important;
}

.user-combo-email {
  font-weight: 600;
  font-size: 0.92rem;
}

.user-combo-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  color: var(--paper-dim);
}

.user-combo-meta code {
  font-size: 0.68rem;
  color: rgba(197, 212, 200, 0.65);
}

.user-combo-empty {
  padding: 0.65rem 0.7rem;
  color: var(--paper-dim);
  font-size: 0.85rem;
}

.admin-submit {
  margin-top: 0.25rem;
  margin-left: auto;
}

.admin-roster {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.admin-roster-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem 1rem;
  padding: 0.8rem 0.95rem;
  border: 1px solid rgba(232, 239, 233, 0.12);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.28);
}

.admin-roster-item--link {
  padding: 0;
}

.admin-roster-hit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem 1rem;
  width: 100%;
  margin: 0;
  padding: 0.8rem 0.95rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  border-radius: 4px;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.admin-roster-item--link:hover,
.admin-roster-item--link:focus-within {
  border-color: rgba(201, 165, 116, 0.42);
  background: rgba(201, 165, 116, 0.08);
}

.admin-roster-hit-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
  min-width: 0;
}

.admin-user-back {
  margin: 0 0 1.1rem;
}

.admin-user-stats-return-wrap {
  margin: 0 0 1.15rem;
}

.admin-user-stats-return {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 2.35rem;
  padding: 0.55rem 1rem;
  border: 1px solid rgba(201, 165, 116, 0.55);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(18, 14, 10, 0.96), rgba(8, 6, 4, 0.98));
  color: #e8d4b0;
  font-family: var(--font-herald);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  box-shadow:
    inset 0 0 0 1px rgba(201, 165, 116, 0.08),
    0 10px 28px rgba(0, 0, 0, 0.38);
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

.admin-user-stats-return:hover,
.admin-user-stats-return:focus-visible {
  border-color: rgba(201, 165, 116, 0.85);
  background: linear-gradient(180deg, rgba(32, 26, 18, 0.98), rgba(14, 11, 8, 0.99));
  color: #f3e6cf;
  outline: none;
  cursor: pointer;
  box-shadow:
    inset 0 0 0 1px rgba(201, 165, 116, 0.16),
    0 0 0 1px rgba(201, 165, 116, 0.14),
    0 10px 28px rgba(0, 0, 0, 0.42);
}

/* Account detail still uses a full-width return strip. */
.admin-user-stats-return-wrap .admin-user-stats-return {
  display: flex;
  width: 100%;
  min-height: 3.15rem;
  padding: 0.75rem 1.25rem;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
}

.result-lede-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem 1rem;
  flex: 0 0 auto;
}

.result-lede-row > .lede {
  flex: 1 1 12rem;
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.35;
  min-width: 0;
}

.result-lede-row > .desk-stats-ledger-return {
  flex: 0 0 auto;
  margin-left: auto;
}

.rpg-brief-head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem 0.75rem;
  flex: 0 0 auto;
  flex-shrink: 0;
  z-index: 2;
}

.rpg-brief-head-actions .desk-stats-ledger-return {
  flex: 0 0 auto;
}

.desk-stats-ledger-return-wrap {
  flex: 0 0 auto;
  margin: 0 0 0.65rem;
  max-width: 24rem;
}

.main-status > .desk-stats-ledger-return-wrap {
  margin: 0 0 0.85rem;
  max-width: 24rem;
}

.admin-panel-head--detail .admin-panel-head-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 0.35rem;
}

.admin-user-head-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem 0.55rem;
}

.admin-panel-head--detail .admin-panel-kicker {
  margin-bottom: 0;
}

.admin-back-link {
  flex-shrink: 0;
  font-family: var(--font-herald);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper-dim);
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.admin-back-link:hover {
  color: var(--accent-hot);
  border-bottom-color: rgba(201, 165, 116, 0.45);
}

.admin-back-link--btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.15rem;
  padding: 0.35rem 1.05rem;
  border: 1px solid rgba(201, 165, 116, 0.55);
  border-radius: 4px;
  border-bottom-width: 1px;
  background: #0c0d10;
  color: var(--accent-hot, #c9a574);
  font-family: var(--font-herald);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: none;
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.admin-back-link--btn:hover {
  color: #e8d4b0;
  border-color: rgba(201, 165, 116, 0.85);
  border-bottom-color: rgba(201, 165, 116, 0.85);
  background: #0c0d10;
  box-shadow: inset 0 0 0 1px rgba(201, 165, 116, 0.12);
  cursor: pointer;
}

.admin-back-link--btn {
  cursor: pointer;
}

.admin-back-link--roster {
  min-height: 2.45rem;
  padding: 0.45rem 1.15rem;
  font-size: 0.78rem;
  background: #0c0d10;
  box-shadow: none;
}

.admin-back-link--roster:hover,
.admin-back-link--roster:focus-visible {
  background: #0c0d10;
  color: #e8d4b0;
}

/* Users roster list — Holdings-style filters + paged scroll list. */
.admin-stage:has(#panel-users.is-active:not([hidden]):not(:has(.admin-panel-head--detail))) {
  overflow: hidden;
}

/* Account detail: allow the fixed-height panel to scroll (Manage account, etc.). */
#panel-users.admin-panel.is-active:has(.admin-panel-head--detail) {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

#panel-users.admin-panel.is-active:not(:has(.admin-panel-head--detail)) {
  display: flex;
  flex-direction: column;
  height: calc(100% - 0.35rem);
  max-height: calc(100% - 0.35rem);
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}

#panel-users .admin-panel-head:not(.admin-panel-head--detail),
#panel-users .admin-users-ledger-tools,
#panel-users #users-empty,
#panel-users > .admin-empty {
  flex: 0 0 auto;
}

#panel-users .admin-users-roster-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem 1.25rem;
  margin-bottom: 0.75rem;
}

#panel-users .admin-users-roster-head-main {
  min-width: 0;
}

#panel-users .admin-users-roster-head-main .admin-panel-kicker {
  margin: 0 0 0.3rem;
}

#panel-users .admin-users-roster-head-main h1 {
  margin: 0;
}

#panel-users .admin-users-roster-head-meta {
  display: grid;
  gap: 0.28rem;
  justify-items: end;
  text-align: right;
  max-width: 24rem;
  margin-left: auto;
}

#panel-users .admin-users-ledger-tools {
  margin: 0 0 0.55rem;
}

#panel-users .admin-stats-holdings-filters-fold {
  margin-bottom: 0;
}

#panel-users .admin-stats-holdings-filters .admin-stats-field {
  flex: 1 1 8.5rem;
  min-width: 8rem;
}

#panel-users .admin-stats-holdings-filters .admin-stats-field--session-combo {
  flex: 1 1 10rem;
  min-width: 9rem;
}

#panel-users .admin-stats-holdings-filters .admin-stats-field--narrow,
#panel-users .admin-stats-holdings-filters-rows {
  flex: 0 0 auto;
  width: auto;
  min-width: 5rem;
}

#panel-users .admin-stats-holdings-filters .ledger-combo {
  width: 100%;
}

#panel-users .admin-stats-holdings-filters .ledger-combo .user-combo-shell {
  min-height: 2.05rem;
  border: 1px solid rgba(168, 134, 92, 0.38);
  border-radius: 2px;
  background: var(--stats-panel-deep);
}

#panel-users .admin-stats-holdings-filters .ledger-combo .user-combo-input {
  min-height: 2.05rem;
  padding: 0.35rem 0.45rem;
  font-size: 0.78rem;
  color: var(--stats-paper);
}

#panel-users .admin-users-lede {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.3rem 0.4rem;
  margin: 0;
}

#panel-users .admin-users-count {
  font-family: var(--stats-mono);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--stats-paper);
  text-transform: uppercase;
}

#panel-users .admin-users-lede-copy {
  font-family: var(--stats-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stats-muted);
}

#panel-users .admin-users-lede-hint {
  margin: 0;
  max-width: 22rem;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--stats-muted);
}

#panel-users .admin-users-book {
  flex: 1 1 auto;
  min-height: 0;
  display: flex !important;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  margin-top: 0.15rem;
  border: 1px solid var(--stats-line) !important;
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(28, 26, 22, 0.55) 0%, var(--stats-ink) 100%) !important;
  box-shadow:
    inset 0 0 0 1px var(--stats-line-soft),
    0 1px 0 rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

#panel-users .admin-users-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
  border: 0;
  border-radius: 0;
}

#panel-users .admin-users-table {
  width: 100%;
}

#panel-users .admin-users-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0.35rem 0.45rem;
  background: #121014;
  box-shadow: 0 1px 0 rgba(201, 165, 116, 0.22);
}

#panel-users .admin-users-table td {
  padding: 0;
  vertical-align: middle;
  line-height: 1.2;
}

#panel-users .admin-users-th-num,
#panel-users .admin-users-td-num {
  width: 2.25rem;
  text-align: center;
  white-space: nowrap;
}

#panel-users .admin-users-roster,
#panel-users .admin-users-book .admin-roster.admin-users-roster {
  display: table-row-group !important;
  flex: unset;
  min-height: 0;
  max-height: none;
  overflow: visible;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none;
  background: transparent;
  border: 0;
}

#panel-users .admin-users-book .admin-roster-item:not([hidden]),
#panel-users .admin-users-roster > .admin-roster-item:not([hidden]),
#panel-users .admin-users-table tbody > tr.admin-roster-item:not([hidden]) {
  display: table-row !important;
  flex: unset;
  width: auto;
  height: auto;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
}

#panel-users .admin-users-table tbody > tr.admin-roster-item[hidden] {
  display: none !important;
}

#panel-users .admin-users-table tbody > tr.admin-roster-item:hover,
#panel-users .admin-users-table tbody > tr.admin-roster-item:focus-within {
  background: rgba(168, 134, 92, 0.1) !important;
}

#panel-users .admin-users-num,
#panel-users .admin-users-hit,
#panel-users .admin-users-userid,
#panel-users .admin-users-signal,
#panel-users .admin-users-tags {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 0.28rem 0.45rem;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

#panel-users .admin-users-num {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

#panel-users .admin-users-hit strong {
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--paper);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#panel-users .admin-users-userid code,
#panel-users .admin-users-signal code {
  font-size: 0.68rem;
  line-height: 1.2;
  word-break: break-all;
}

#panel-users .admin-users-userid code {
  color: var(--stats-muted, rgba(197, 212, 200, 0.62));
}

#panel-users .admin-users-signal code {
  color: var(--stats-gold, #c9a574);
}

#panel-users .admin-users-signal .is-empty {
  color: var(--stats-muted, rgba(197, 212, 200, 0.45));
}

#panel-users .admin-users-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.3rem;
  align-items: center;
}

#panel-users .admin-users-tags .tag {
  font-size: 0.54rem;
  padding: 0.08rem 0.3rem;
  line-height: 1.15;
}

#panel-users .admin-users-pager {
  flex: 0 0 auto;
  margin: 0;
  margin-top: auto;
  padding: 0.45rem 0.65rem;
  border-top: 1px solid var(--stats-line);
  background: rgba(0, 0, 0, 0.28);
  justify-content: flex-end;
}

#panel-users .admin-users-pager .admin-stats-pager-status {
  color: var(--stats-muted);
}

#panel-users .admin-users-pager .admin-stats-pager-jump-input {
  border: 1px solid rgba(168, 134, 92, 0.38) !important;
  background: var(--stats-panel-deep) !important;
  color: var(--stats-paper) !important;
  box-shadow: none;
}

#panel-users .admin-users-pager .admin-stats-pager-jump-input:focus {
  border-color: rgba(201, 165, 116, 0.72) !important;
  box-shadow: 0 0 0 1px rgba(201, 165, 116, 0.28);
}

#panel-users > .char-section-title,
#panel-users > .admin-user-block-title {
  margin: 0.15rem 0 1.05rem;
  padding-bottom: 0;
  border-bottom: none;
}

.admin-user-block-title {
  margin: 0 0 0.85rem;
  font-family: var(--font-herald);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

#panel-users .admin-user-email {
  margin: 0 0 0.55rem;
  font-family: var(--font-display, var(--font-herald));
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #f4eee3;
  word-break: break-word;
}

#panel-users .admin-user-lede {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  margin: 0 0 1.15rem;
}

#panel-users .admin-user-tags {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

#panel-users .admin-user-tag.tag {
  margin: 0;
  padding: 0.22rem 0.55rem;
  border-radius: 3px;
  border-color: rgba(201, 165, 116, 0.42);
  background: rgba(0, 0, 0, 0.35);
  color: #e8d4b0;
  font-family: var(--font-herald);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

#panel-users .admin-user-tag.tag.is-ok {
  border-color: rgba(120, 168, 132, 0.45);
  color: #c5dbc8;
  background: rgba(24, 42, 30, 0.45);
}

#panel-users .admin-user-tag.tag.is-bad {
  border-color: rgba(196, 92, 78, 0.5);
  color: #f0b8ae;
  background: rgba(48, 18, 16, 0.5);
}

#panel-users .admin-user-tag.tag.tag--login-ban {
  color: #d9a8ec;
  border-color: rgba(168, 108, 196, 0.62);
  background: rgba(46, 22, 54, 0.72);
}

#panel-users .admin-user-tag.tag.tag--booking-ban {
  color: #f0b888;
  border-color: rgba(201, 132, 72, 0.62);
  background: rgba(52, 30, 14, 0.72);
}

#panel-users .admin-user-id {
  display: inline-flex;
  align-items: center;
  min-height: 1.55rem;
  padding: 0.12rem 0.5rem;
  border: 1px solid rgba(168, 134, 92, 0.28);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.28);
}

#panel-users .admin-user-id code {
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: #b6a890;
}

.admin-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.75rem 1rem;
  margin: 0 0 0.85rem;
}

#panel-users .admin-detail-grid--account {
  /* One row, six fields (1×6). */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.55rem 0.65rem;
  margin-bottom: 1rem;
}

.admin-user-section-launch {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  gap: 0.55rem;
  margin: 0 0 0.35rem;
  padding-top: 1.05rem;
  border-top: 1px solid rgba(168, 134, 92, 0.38);
}

#panel-users .admin-user-section-launch {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  padding-top: 1.15rem;
}

#panel-users .admin-user-section-launch--manage {
  margin-top: 0.85rem;
  padding-top: 1.05rem;
}

.admin-user-section-btn--danger {
  border-color: rgba(196, 92, 78, 0.55);
  background: #0c0d10;
}

.admin-user-section-btn--danger::before {
  background: rgba(196, 92, 78, 0.72);
}

.admin-user-section-btn--danger .admin-user-section-btn-title {
  color: #f0b8ae;
}

.admin-user-section-btn--danger:hover,
.admin-user-section-btn--danger:focus-visible {
  border-color: rgba(220, 120, 100, 0.85);
  background:
    linear-gradient(90deg, rgba(196, 92, 78, 0.22), transparent 42%),
    rgba(18, 8, 8, 0.72);
}

.admin-user-ban-selected {
  margin: 0 0 1rem;
  font-size: 0.86rem;
  color: var(--paper-dim);
}

.admin-user-ban-selected strong {
  color: var(--paper);
}

.admin-user-ban-selected code {
  font-size: 0.78rem;
}

.admin-submit--danger {
  border-color: rgba(196, 92, 78, 0.65);
  color: #f5d0c8;
}

.admin-delete-confirm {
  margin: 0.35rem 0 0.85rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(196, 92, 78, 0.55);
  border-radius: 4px;
  background: rgba(48, 14, 12, 0.55);
}

.admin-delete-confirm[hidden] {
  display: none !important;
}

.admin-delete-confirm-title {
  margin: 0 0 0.35rem;
  font-family: var(--font-herald);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f0b8ae;
}

.admin-delete-confirm-copy {
  margin: 0 0 0.85rem;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--paper);
}

.admin-delete-confirm-copy strong {
  color: #f5d0c8;
}

.admin-delete-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.55rem;
}

.admin-user-section-kicker {
  grid-column: 1 / -1;
  margin: 0 0 0.35rem;
  font-family: var(--font-herald);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.admin-user-section-btn {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0.12rem 0.65rem;
  margin: 0;
  /* Match Statistics Holdings launch (彈出) footprint */
  min-height: 2.55rem;
  padding: 0.7rem 0.85rem 0.7rem 1rem;
  border: 1px solid var(--stats-line-soft, rgba(168, 134, 92, 0.28));
  border-radius: 2px;
  background: #0c0d10;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  box-sizing: border-box;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}
a.admin-user-section-btn,
a.admin-user-section-btn:visited {
  color: inherit;
  text-decoration: none;
}

.admin-user-section-btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45rem;
  bottom: 0.45rem;
  width: 2px;
  border-radius: 0 1px 1px 0;
  background: rgba(201, 165, 116, 0.62);
}

.admin-user-section-btn::after {
  content: "›";
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 1.15rem;
  line-height: 1;
  font-weight: 700;
  color: #d4b88a;
  transition: transform 0.15s ease, color 0.15s ease;
}

.admin-user-section-btn:hover,
.admin-user-section-btn:focus-visible {
  border-color: rgba(168, 134, 92, 0.55);
  background: #0c0d10;
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(168, 134, 92, 0.28);
  transform: none;
}

.admin-user-section-btn:hover::after,
.admin-user-section-btn:focus-visible::after {
  color: #f0d9a8;
  transform: translateX(2px);
}

.admin-user-section-btn-title {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-herald);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stats-gold, #c9a574);
}

.admin-user-section-btn-meta {
  grid-column: 1;
  grid-row: 2;
  font-family: var(--stats-mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 0.62rem;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--stats-muted, #cfc3ae);
}

.admin-user-section-btn-meta.is-empty {
  font-family: var(--font-herald);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(182, 168, 144, 0.72);
}

.admin-user-section-btn--danger .admin-user-section-btn-meta {
  color: rgba(240, 184, 174, 0.82);
}

.admin-user-section-dialog {
  width: min(96vw, 42rem);
  max-width: 96vw;
  height: min(calc(100dvh - var(--desk-chrome-clear) - 2.25rem), 42rem);
  max-height: calc(100dvh - var(--desk-chrome-clear) - 2.25rem);
  margin: calc(var(--desk-chrome-clear) + 0.35rem) auto 1rem;
  padding: 0;
  border: 1px solid rgba(168, 134, 92, 0.45);
  border-radius: 4px;
  background: transparent;
  color: inherit;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65);
}

.admin-user-section-dialog--wide {
  width: min(96vw, 56rem);
}

.admin-user-section-dialog::backdrop {
  background: rgba(4, 4, 6, 0.72);
}

.admin-user-section-dialog[open] {
  display: flex;
  flex-direction: column;
}

.admin-user-section-dialog-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: 1rem 1.05rem 1.05rem;
  border: 0;
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(28, 24, 18, 0.98) 0%, rgba(10, 10, 12, 0.98) 100%);
}

.admin-user-section-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  flex: 0 0 auto;
  margin-bottom: 0.85rem;
}

.admin-user-section-dialog-title {
  margin: 0;
  font-family: var(--font-herald);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.admin-user-section-dialog-x {
  flex: 0 0 auto;
  margin: 0;
  min-height: 2.1rem;
  padding: 0.35rem 0.85rem;
}

.admin-user-section-dialog-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding-right: 0.15rem;
}

/* User History dialog — same book / plate / filter language as Admin 03 Ledger */
#admin-user-hist-dialog.admin-user-section-dialog--wide {
  width: min(56rem, 96vw);
  max-height: min(88vh, 52rem);
}

#admin-user-hist-dialog .admin-user-hist-card {
  min-height: 0;
  height: 100%;
}

#admin-user-hist-dialog .admin-user-hist-head {
  align-items: center;
  margin-bottom: 0.65rem;
}

#admin-user-hist-dialog .admin-user-hist-head-main .admin-panel-kicker {
  margin: 0;
}

#admin-user-hist-dialog .admin-user-hist-head-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem 0.85rem;
}

#admin-user-hist-dialog .admin-user-hist-lede {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.3rem 0.4rem;
  margin: 0;
}

#admin-user-hist-dialog .admin-user-hist-body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  overflow: hidden;
}

#admin-user-hist-dialog .admin-user-hist-tools {
  flex: 0 0 auto;
  margin: 0;
}

#admin-user-hist-dialog .admin-stats-holdings-filters-fold {
  margin-bottom: 0;
}

#admin-user-hist-dialog .admin-stats-holdings-filters .admin-stats-field {
  flex: 1 1 8.5rem;
  min-width: 8rem;
}

#admin-user-hist-dialog .admin-stats-holdings-filters .admin-stats-field--session-combo {
  flex: 1 1 10rem;
  min-width: 9rem;
}

#admin-user-hist-dialog .admin-stats-holdings-filters .admin-stats-field--narrow,
#admin-user-hist-dialog .admin-stats-holdings-filters-rows {
  flex: 0 0 auto;
  width: auto;
  min-width: 5rem;
}

#admin-user-hist-dialog .admin-stats-holdings-filters .ledger-combo {
  width: 100%;
}

#admin-user-hist-dialog .admin-stats-holdings-filters .ledger-combo .user-combo-shell {
  min-height: 2.05rem;
  border: 1px solid rgba(168, 134, 92, 0.38);
  border-radius: 2px;
  background: var(--stats-panel-deep);
}

#admin-user-hist-dialog .admin-stats-holdings-filters .ledger-combo .user-combo-input {
  min-height: 2.05rem;
  padding: 0.35rem 0.45rem;
  font-size: 0.78rem;
  color: var(--stats-paper);
}

#admin-user-hist-dialog .admin-user-hist-book {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--stats-line);
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(28, 26, 22, 0.55) 0%, var(--stats-ink) 100%);
  box-shadow:
    inset 0 0 0 1px var(--stats-line-soft),
    0 1px 0 rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

#admin-user-hist-dialog .admin-user-hist-book .hist-roster {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  display: flex !important;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: flex-start;
  align-items: stretch;
  gap: 0.4rem !important;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0.5rem !important;
  margin: 0 !important;
  list-style: none;
  background: transparent;
  border: 0;
}

#admin-user-hist-dialog .admin-user-hist-book .hist-roster::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

#admin-user-hist-dialog .admin-user-hist-book .hist-row:not([hidden]) {
  flex: 0 0 auto;
  display: block !important;
  width: 100%;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(168, 134, 92, 0.38) !important;
  border-radius: 2px !important;
  background: rgba(0, 0, 0, 0.34) !important;
  box-shadow: inset 0 0 0 1px var(--stats-line-soft);
}

#admin-user-hist-dialog .admin-user-hist-book .hist-row:hover,
#admin-user-hist-dialog .admin-user-hist-book .hist-row:focus-within {
  border-color: rgba(201, 165, 116, 0.72) !important;
  background: rgba(168, 134, 92, 0.12) !important;
  box-shadow: inset 0 0 0 1px var(--stats-line);
}

#admin-user-hist-dialog .hist-row-plate {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.45rem 0.85rem;
  padding: 0.4rem 0.65rem;
  min-width: 0;
}

#admin-user-hist-dialog .hist-row-copy {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

#admin-user-hist-dialog .hist-row-titleline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
  min-width: 0;
}

#admin-user-hist-dialog .hist-row-seat {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.15;
  color: #f4eee3;
  text-decoration: none;
}

#admin-user-hist-dialog .hist-row-seat:hover {
  color: #fff4e0;
}

#admin-user-hist-dialog .hist-row-titleline .hist-admin-form {
  margin: 0;
  display: inline-flex;
}

#admin-user-hist-dialog .hist-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.3rem;
  margin: 0;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

#admin-user-hist-dialog .hist-row-firm {
  font-family: var(--font-herald);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #d4b88a;
}

#admin-user-hist-dialog .hist-row-meta-sep {
  color: rgba(182, 168, 144, 0.45);
  font-size: 0.65rem;
}

#admin-user-hist-dialog .hist-row-when {
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  font-size: 0.66rem;
  letter-spacing: 0.01em;
  color: #cfc3ae;
}

#admin-user-hist-dialog .hist-row-score {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  justify-self: end;
  gap: 0.35rem;
  margin-left: auto;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

#admin-user-hist-dialog .admin-user-hist-book .hist-row {
  cursor: pointer;
}

#admin-user-hist-dialog .hist-row-seat,
#admin-user-hist-dialog .hist-row-meta {
  cursor: pointer;
}

#admin-user-hist-dialog .admin-user-hist-pager {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.45rem 0.65rem;
  border-top: 1px solid var(--stats-line);
  background: rgba(0, 0, 0, 0.28);
  justify-content: flex-end;
}

#admin-user-hist-dialog .admin-user-hist-pager .admin-stats-pager-status {
  color: var(--stats-muted);
}

#admin-user-hist-dialog .admin-user-hist-pager .admin-stats-pager-jump-input {
  border: 1px solid rgba(168, 134, 92, 0.38) !important;
  background: var(--stats-panel-deep) !important;
  color: var(--stats-paper) !important;
}

#admin-user-hist-dialog .admin-sessions-count {
  font-family: var(--stats-mono);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--stats-paper);
  text-transform: uppercase;
}

#admin-user-hist-dialog .admin-sessions-lede-copy {
  font-family: var(--stats-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stats-muted);
}

.admin-ban-record {
  margin: 1.15rem 0 0;
}

.admin-ban-record .admin-roster,
.admin-ban-record .admin-empty {
  margin-bottom: 0;
}

.admin-pw-section {
  margin: 1.85rem 0 1.75rem;
}

.admin-pw-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  margin-bottom: 0.55rem;
}

.admin-pw-section-head .char-section-title {
  margin: 0;
}

.admin-pw-open {
  margin: 0;
  min-height: 2.1rem;
  padding: 0.35rem 0.85rem;
}

.admin-pw-dialog {
  width: min(34rem, calc(100vw - 2rem));
  max-width: 34rem;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
}

.admin-pw-dialog::backdrop {
  background: rgba(4, 5, 7, 0.72);
}

.admin-pw-dialog-card {
  display: grid;
  gap: 0.75rem;
  padding: 1rem 1.05rem 1.05rem;
  border: 1px solid rgba(201, 165, 116, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(28, 24, 18, 0.96) 0%, rgba(10, 10, 12, 0.96) 100%);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}

.admin-pw-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.admin-pw-dialog-title {
  margin: 0.15rem 0 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--paper);
  word-break: break-word;
}

.admin-pw-dialog-x {
  margin: 0;
  flex: 0 0 auto;
}

.admin-pw-dialog-body {
  gap: 0.7rem;
}

.admin-pw-reset-lede {
  margin: 0 0 0.1rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--paper-dim);
  text-transform: none;
  letter-spacing: 0;
}

.admin-pw-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  margin: 0.1rem 0 0.15rem;
}

.admin-pw-mode-card {
  position: relative;
  margin: 0;
  cursor: pointer;
}

.admin-pw-mode-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.admin-pw-mode-card-ui {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem;
  align-items: start;
  min-height: 100%;
  padding: 0.65rem 0.7rem;
  border: 1px solid rgba(168, 134, 92, 0.28);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.28);
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.admin-pw-mode-card:hover .admin-pw-mode-card-ui {
  border-color: rgba(201, 165, 116, 0.5);
}

.admin-pw-mode-card input:checked + .admin-pw-mode-card-ui {
  border-color: rgba(201, 165, 116, 0.78);
  background: rgba(201, 165, 116, 0.08);
  box-shadow: 0 0 0 1px rgba(201, 165, 116, 0.18);
}

.admin-pw-mode-card input:focus-visible + .admin-pw-mode-card-ui {
  outline: 2px solid rgba(201, 165, 116, 0.55);
  outline-offset: 2px;
}

.admin-pw-mode-dot {
  width: 0.85rem;
  height: 0.85rem;
  margin-top: 0.12rem;
  border-radius: 50%;
  border: 1.5px solid rgba(168, 134, 92, 0.55);
  background: transparent;
  box-shadow: inset 0 0 0 0 transparent;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

.admin-pw-mode-card input:checked + .admin-pw-mode-card-ui .admin-pw-mode-dot {
  border-color: rgba(201, 165, 116, 0.95);
  background: rgba(201, 165, 116, 0.2);
  box-shadow: inset 0 0 0 0.22rem rgba(201, 165, 116, 0.95);
}

.admin-pw-mode-copy {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.admin-pw-mode-name {
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--paper);
  text-transform: none;
  letter-spacing: 0.01em;
}

.admin-pw-mode-blurb {
  font-family: var(--font-body);
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--paper-dim);
  text-transform: none;
  letter-spacing: 0;
}

.admin-pw-manual {
  display: grid;
  gap: 0.65rem;
}

.admin-pw-check {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0.15rem 0 0;
  cursor: pointer;
}

.admin-pw-check input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.admin-pw-check-ui {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.1rem;
  border: 1.5px solid rgba(168, 134, 92, 0.55);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.35);
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.admin-pw-check-ui::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
  -webkit-mask: center / 0.72rem 0.72rem no-repeat;
  mask: center / 0.72rem 0.72rem no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  opacity: 0;
  transform: scale(0.7);
  transition:
    opacity 0.12s ease,
    transform 0.12s ease,
    background 0.12s ease;
}

.admin-pw-check input:checked + .admin-pw-check-ui {
  border-color: rgba(201, 165, 116, 0.95);
  background: rgba(201, 165, 116, 0.16);
  box-shadow: 0 0 0 1px rgba(201, 165, 116, 0.18);
}

.admin-pw-check input:checked + .admin-pw-check-ui::after {
  background: var(--accent);
  opacity: 1;
  transform: scale(1);
}

.admin-pw-check input:focus-visible + .admin-pw-check-ui {
  outline: 2px solid rgba(201, 165, 116, 0.55);
  outline-offset: 2px;
}

.admin-pw-check-label {
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--paper);
  text-transform: none;
  letter-spacing: 0;
}

.admin-pw-check-sub {
  display: inline;
  color: var(--paper-dim);
  font-size: 0.78rem;
}

.admin-pw-reveal {
  display: grid;
  gap: 0.45rem;
  margin: 0.35rem 0 0.25rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(168, 213, 181, 0.35);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(40, 56, 44, 0.55) 0%, rgba(10, 10, 12, 0.35) 100%);
}

.admin-pw-reveal-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}

.admin-pw-reveal-value {
  flex: 1 1 12rem;
  margin: 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(168, 213, 181, 0.28);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.35);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  word-break: break-all;
  color: var(--paper);
  user-select: all;
}

.admin-pw-copy {
  margin: 0;
  min-width: 5.5rem;
}

.admin-pw-reset-form .admin-create-submit.is-busy {
  opacity: 0.7;
  cursor: wait;
}

@media (max-width: 560px) {
  .admin-pw-mode {
    grid-template-columns: 1fr;
  }
}

.admin-detail-grid > div {
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(168, 134, 92, 0.28);
  border-radius: 4px;
  background: #070708;
}

#panel-users .admin-detail-grid--account > div {
  padding: 0.78rem 0.9rem 0.82rem;
  border-color: rgba(168, 134, 92, 0.2);
  background:
    linear-gradient(180deg, rgba(36, 32, 26, 0.88), rgba(22, 19, 15, 0.94));
  box-shadow: inset 0 1px 0 rgba(255, 240, 210, 0.04);
}

@media (max-width: 1100px) {
  #panel-users .admin-detail-grid--account {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  #panel-users .admin-detail-grid--account {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #panel-users .admin-user-section-launch,
  #panel-users .admin-user-section-launch--manage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  #panel-users .admin-detail-grid--account,
  #panel-users .admin-user-section-launch,
  #panel-users .admin-user-section-launch--manage {
    grid-template-columns: 1fr;
  }
}

.admin-pw-reset-form {
  margin: 0;
  max-width: none;
}

.admin-detail-grid dt {
  margin: 0 0 0.28rem;
  font-family: var(--font-herald);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.admin-detail-grid dd {
  margin: 0;
  color: #f0e8da;
  font-size: 0.95rem;
  line-height: 1.35;
  word-break: break-word;
}

#panel-users .admin-detail-grid--account dd.admin-detail-dd--email {
  font-family: var(--font-display, var(--font-herald));
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #f4eee3;
}

#panel-users .admin-detail-grid--account dd.admin-detail-dd--role {
  font-family: var(--font-herald);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #e8d4b0;
}

#panel-users .admin-detail-grid--account dd.admin-detail-dd--status {
  font-family: var(--font-herald);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#panel-users .admin-detail-grid--account dd.admin-detail-dd--status.is-ok {
  color: #c5dbc8;
}

#panel-users .admin-detail-grid--account dd.admin-detail-dd--status.is-bad {
  color: #f0b8ae;
}

#panel-users .admin-detail-grid--account .admin-detail-dd-sub {
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #b6a890;
}

#panel-users .admin-detail-grid--account dd.admin-detail-dd--when {
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 0.84rem;
  letter-spacing: 0.02em;
  color: #e2d6c2;
}

#panel-users .admin-detail-grid--account dd.admin-detail-dd--num {
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #f0e8da;
}

.admin-detail-notes {
  margin: 0 0 1.25rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(168, 134, 92, 0.18);
  border-radius: 4px;
  color: var(--paper-dim);
  line-height: 1.45;
}

.admin-detail-notes strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--accent-hot);
  font-weight: 600;
}

.admin-roster-item[hidden] {
  display: none !important;
}

/* Row display:block/flex !important beats UA [hidden] — pager/filters must win */
#panel-sessions .admin-sessions-book .hist-row[hidden],
#panel-sessions .hist-roster > .hist-row[hidden],
#panel-sessions .hist-roster > .admin-roster-item[hidden],
#panel-history .hub-history-book .hist-row[hidden],
#panel-history .hist-roster > .hist-row[hidden],
#panel-history .hist-roster > .admin-roster-item[hidden],
#panel-users .admin-users-book .admin-roster-item[hidden],
#panel-users .admin-users-roster > .admin-roster-item[hidden],
#panel-users .admin-users-table tbody > tr.admin-roster-item[hidden],
#panel-blacklist .admin-blacklist-book .admin-roster-item[hidden],
#panel-blacklist .admin-blacklist-roster > .admin-roster-item[hidden],
#admin-user-hist-dialog .admin-user-hist-book .hist-row[hidden] {
  display: none !important;
}

.admin-roster-item strong,
.admin-roster-item a {
  color: var(--paper);
  margin-right: 0.45rem;
}

.admin-roster-meta,
.admin-roster-item code {
  font-size: 0.8rem;
  color: var(--paper-dim);
  word-break: break-all;
}

.field-hint {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--paper-dim);
}

.field-hint.is-idle {
  color: rgba(197, 212, 200, 0.55);
}

.field-hint.is-ok {
  color: #a8d5b5;
}

.field-hint.is-bad {
  color: #f0a0a0;
}

.login-field .field-hint,
.admin-form .field-hint {
  letter-spacing: 0.01em;
}

.admin-empty a {
  display: inline-block;
  margin: 0 0.15rem;
  padding: 0.18rem 0.5rem;
  border: 1px solid rgba(168, 134, 92, 0.55);
  border-radius: 3px;
  background: rgba(8, 10, 12, 0.88);
  color: var(--accent-hot);
  text-decoration: none;
  font-size: 0.86em;
  line-height: 1.35;
  vertical-align: baseline;
  box-shadow: inset 0 1px 0 rgba(201, 165, 116, 0.12);
}

.admin-empty a:hover {
  border-color: rgba(201, 165, 116, 0.8);
  background: rgba(20, 24, 18, 0.95);
  color: #f3df9a;
}

/* Character status — wireframe HUD + XP */
.char-hero {
  --char-hud-stroke: rgba(198, 210, 220, 0.9);
  --char-hud-glow: rgba(150, 170, 190, 0.4);
  --char-hud-core: rgba(230, 238, 245, 0.98);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  gap: 0.55rem 1.35rem;
  align-items: center;
  margin: 0 0 1.35rem;
  padding: 1.15rem 1.05rem 1.05rem;
  border: 1px solid rgba(170, 185, 200, 0.22);
  border-radius: 4px;
  background:
    radial-gradient(ellipse 70% 80% at 18% 28%, rgba(150, 170, 190, 0.12), transparent 55%),
    rgba(0, 0, 0, 0.32);
}

.char-id-card > .char-hud,
.char-id-card > .char-hero-copy,
.char-id-card > .char-summary,
.char-id-card > .char-id-kicker,
.char-id-card > .char-id-head {
  position: relative;
  z-index: 2;
}

.char-id-head {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  min-width: 0;
}

.char-id-head-main {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
  flex: 1 1 auto;
}

.char-id-kicker {
  margin: 0;
  font-family: var(--font-herald);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(168, 134, 92, 0.72);
  text-shadow: 0 0 12px rgba(201, 165, 116, 0.2);
}

.char-id-scope {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.28rem;
  width: min(100%, 13.5rem);
}

.char-id-scope-btn {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0.32rem 0.55rem;
  border: 1px solid rgba(160, 168, 160, 0.28);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.35);
  color: rgba(210, 214, 208, 0.78);
  font-family: var(--font-herald);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

.char-id-scope-btn:hover,
.char-id-scope-btn:focus-visible {
  border-color: rgba(201, 165, 116, 0.45);
  color: rgba(245, 236, 210, 0.95);
  outline: none;
}

.char-id-scope-btn.is-on {
  border-color: rgba(201, 165, 116, 0.62);
  background:
    linear-gradient(135deg, rgba(201, 165, 116, 0.16), transparent 55%),
    rgba(12, 12, 10, 0.72);
  color: #f3df9a;
  box-shadow:
    inset 0 0 0 1px rgba(201, 165, 116, 0.12),
    0 0 12px rgba(210, 160, 60, 0.1);
}

.char-id-signal {
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  font-family: var(--font-herald);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(168, 134, 92, 0.72);
  text-shadow: 0 0 12px rgba(201, 165, 116, 0.2);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.char-id-card > .char-hud {
  grid-column: 1;
  grid-row: 2;
}

.char-id-card > .char-hero-copy {
  grid-column: 2;
  grid-row: 2;
}

.char-id-card > .char-summary {
  grid-column: 1 / -1;
  grid-row: 3;
}

.char-id-card > .char-summary[hidden],
.char-id-card > .char-summary:not(.is-on) {
  display: none !important;
}

.char-id-card > script[data-identity-plates-json] {
  display: none !important;
}

/* Jarvis light track — clipped exactly to identity card bounds */
.char-id-card {
  overflow: hidden;
  border-radius: 4px;
  contain: paint;
}

.char-id-light {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease;
}

.char-id-card.is-lit .char-id-light {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .char-id-light {
    display: none;
  }
}

.char-hud {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-width: 11rem;
  margin: 0 auto;
}

.char-hud-canvas {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
}

.char-hud-ring {
  pointer-events: none;
  position: absolute;
  inset: 4%;
  border: 1px solid rgba(170, 185, 200, 0.35);
  border-radius: 50%;
  box-shadow:
    inset 0 0 28px rgba(150, 170, 190, 0.1),
    0 0 18px rgba(150, 170, 190, 0.12);
  animation: char-hud-pulse 4.5s ease-in-out infinite;
  z-index: 1;
}

/* Achievement cone nested in the ball Jarvis core */
.char-hud-crystal {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 38%;
  height: 44%;
  margin: 0;
  transform: translate(-50%, -52%);
  color: var(--ach-pod-ink, #f4f7fc);
  pointer-events: none;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--ach-pod-glow, rgba(180, 210, 255, 0.55)) 70%, transparent));
}

.char-hud-crystal .ach-jarvis-gem {
  width: 100%;
  height: 100%;
}

.char-hud-crystal .ach-jarvis-gem-svg {
  width: 100%;
  height: 100%;
}

.char-hud-crystal .ach-jarvis-orbit {
  opacity: 0.55;
}

.char-hud-crystal .ach-jarvis-orbit--a {
  width: 86%;
  height: 28%;
  margin-left: -43%;
  margin-top: -14%;
}

.char-hud-crystal .ach-jarvis-orbit--b {
  width: 64%;
  height: 22%;
  margin-left: -32%;
  margin-top: -11%;
}

.char-hud-crystal .ach-jarvis-orbit--c {
  width: 100%;
  height: 34%;
  margin-left: -50%;
  margin-top: -17%;
}

.char-hud-crystal .ach-jarvis-gem-glow {
  width: 70%;
  height: 42%;
  opacity: 0.7;
}

.char-tier-spark .char-hud-ring {
  border-color: rgba(170, 185, 200, 0.4);
  box-shadow:
    inset 0 0 28px rgba(150, 170, 190, 0.12),
    0 0 18px rgba(150, 170, 190, 0.14);
}
.char-tier-circuit .char-hud-ring {
  border-color: rgba(201, 165, 116, 0.45);
  box-shadow:
    inset 0 0 28px rgba(210, 160, 70, 0.14),
    0 0 18px rgba(210, 160, 70, 0.16);
}
.char-tier-lattice .char-hud-ring {
  border-color: rgba(140, 190, 130, 0.45);
  box-shadow:
    inset 0 0 28px rgba(120, 180, 110, 0.14),
    0 0 18px rgba(120, 180, 110, 0.14);
}
.char-tier-core .char-hud-ring {
  border-color: rgba(243, 210, 120, 0.5);
  box-shadow:
    inset 0 0 28px rgba(232, 170, 70, 0.16),
    0 0 18px rgba(232, 170, 70, 0.18);
}
.char-tier-signal .char-hud-ring {
  border-color: rgba(110, 190, 180, 0.48);
  box-shadow:
    inset 0 0 28px rgba(80, 180, 170, 0.14),
    0 0 18px rgba(80, 180, 170, 0.16);
}
.char-tier-nexus .char-hud-ring {
  border-color: rgba(255, 220, 140, 0.55);
  box-shadow:
    inset 0 0 28px rgba(255, 210, 120, 0.18),
    0 0 18px rgba(255, 210, 120, 0.2);
}

@keyframes char-hud-pulse {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(1);
  }
  50% {
    opacity: 0.95;
    transform: scale(1.03);
  }
}

@media (prefers-reduced-motion: reduce) {
  .char-hud-ring {
    animation: none;
  }
}

.char-tier-spark {
  --char-hud-stroke: rgba(198, 210, 220, 0.9);
  --char-hud-glow: rgba(150, 170, 190, 0.4);
  --char-hud-core: rgba(230, 238, 245, 0.98);
}
.char-tier-circuit {
  --char-hud-stroke: rgba(201, 165, 116, 0.92);
  --char-hud-glow: rgba(210, 160, 70, 0.45);
  --char-hud-core: rgba(255, 230, 160, 0.98);
}
.char-hero.char-tier-circuit {
  border-color: rgba(201, 165, 116, 0.28);
  background:
    radial-gradient(ellipse 70% 80% at 18% 45%, rgba(201, 165, 116, 0.12), transparent 55%),
    rgba(0, 0, 0, 0.32);
}
.char-tier-lattice {
  --char-hud-stroke: rgba(170, 210, 150, 0.92);
  --char-hud-glow: rgba(120, 180, 110, 0.42);
  --char-hud-core: rgba(210, 240, 195, 0.98);
}
.char-hero.char-tier-lattice {
  border-color: rgba(140, 190, 130, 0.28);
  background:
    radial-gradient(ellipse 70% 80% at 18% 45%, rgba(120, 180, 110, 0.12), transparent 55%),
    rgba(0, 0, 0, 0.32);
}
.char-tier-core {
  --char-hud-stroke: rgba(243, 210, 120, 0.95);
  --char-hud-glow: rgba(232, 170, 70, 0.5);
  --char-hud-core: rgba(255, 236, 180, 1);
}
.char-hero.char-tier-core {
  border-color: rgba(243, 210, 120, 0.32);
  background:
    radial-gradient(ellipse 70% 80% at 18% 45%, rgba(232, 170, 70, 0.14), transparent 55%),
    rgba(0, 0, 0, 0.32);
}
.char-tier-signal {
  --char-hud-stroke: rgba(140, 210, 200, 0.92);
  --char-hud-glow: rgba(80, 180, 170, 0.45);
  --char-hud-core: rgba(200, 245, 235, 0.98);
}
.char-hero.char-tier-signal {
  border-color: rgba(110, 190, 180, 0.3);
  background:
    radial-gradient(ellipse 70% 80% at 18% 45%, rgba(80, 180, 170, 0.12), transparent 55%),
    rgba(0, 0, 0, 0.32);
}
.char-tier-nexus {
  --char-hud-stroke: rgba(255, 236, 190, 0.98);
  --char-hud-glow: rgba(255, 210, 120, 0.55);
  --char-hud-core: rgba(255, 248, 220, 1);
}
.char-hero.char-tier-nexus {
  border-color: rgba(255, 220, 140, 0.36);
  background:
    radial-gradient(ellipse 70% 80% at 18% 45%, rgba(255, 210, 120, 0.16), transparent 55%),
    rgba(0, 0, 0, 0.32);
}

.char-hero-copy {
  display: grid;
  gap: 0.85rem;
  min-width: 0;
}

.char-hero-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.65rem 0.85rem;
  align-items: stretch;
  min-width: 0;
}

.char-hero-meta:has(.char-id-podium.is-empty),
.char-hero-meta:has(.char-id-podium[hidden]) {
  grid-template-columns: minmax(0, 1fr);
}

.char-hero-meta-main {
  display: grid;
  gap: 0.65rem 1rem;
  align-content: start;
  min-width: 0;
}

.char-hero-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1.15rem;
  min-width: 0;
}

.char-hero-meta-row--stats {
  align-items: flex-end;
}

.char-hero-meta-row--marks {
  align-items: flex-end;
}

.char-hero-meta-row--marks > .char-hero-tier-seal,
.char-hero-meta-row--marks > .char-hero-seal {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 2.55rem;
}

.ach-jarvis-pod--idle {
  --ach-pod-ink: #f4f7fc;
  --ach-pod-glow: rgba(230, 238, 255, 0.62);
  --ach-pod-base: rgba(160, 175, 200, 0.28);
}
.ach-jarvis-pod--idle .ach-gem-face--upper-back { fill: rgba(210, 220, 235, 0.22); }
.ach-jarvis-pod--idle .ach-gem-face--lower-back { fill: rgba(150, 165, 185, 0.16); }
.ach-jarvis-pod--idle .ach-gem-face--upper-front { fill: rgba(235, 242, 252, 0.38); }
.ach-jarvis-pod--idle .ach-gem-face--lower-front { fill: rgba(175, 190, 210, 0.26); }

/* Crystal-in-ball motion (identity HUD + rank avatar) */
@media (prefers-reduced-motion: no-preference) {
  .char-hud-crystal .ach-jarvis-gem,
  .char-tier-board-crystal .ach-jarvis-gem {
    animation: ach-mini-jarvis-float 4.2s ease-in-out infinite;
  }
  .char-hud-crystal .ach-jarvis-gem-svg,
  .char-tier-board-crystal .ach-jarvis-gem-svg {
    animation: ach-jarvis-spin 8.5s ease-in-out infinite;
    transform-origin: 50% 52%;
  }
  .char-hud-crystal .ach-jarvis-orbit--a,
  .char-tier-board-crystal .ach-jarvis-orbit--a {
    animation: ach-jarvis-orbit-a 8s linear infinite;
  }
  .char-hud-crystal .ach-jarvis-orbit--b,
  .char-tier-board-crystal .ach-jarvis-orbit--b {
    animation: ach-jarvis-orbit-b 6.2s linear infinite;
  }
  .char-hud-crystal .ach-jarvis-orbit--c,
  .char-tier-board-crystal .ach-jarvis-orbit--c {
    animation: ach-jarvis-orbit-c 11s linear infinite;
  }
  .char-hud-crystal .ach-gem-node--core,
  .char-tier-board-crystal .ach-gem-node--core {
    animation: ach-jarvis-core 2.2s ease-in-out infinite;
  }
  .char-hud-crystal .ach-gem-bloom,
  .char-tier-board-crystal .ach-gem-bloom {
    animation: ach-jarvis-bloom 3.2s ease-in-out infinite;
  }
  .char-hud-crystal .ach-gem-wire--scan,
  .char-tier-board-crystal .ach-gem-wire--scan {
    animation: ach-jarvis-scan 3.8s linear infinite;
  }
}

@keyframes ach-mini-jarvis-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.12rem); }
}

.char-id-podium {
  --podium-ink: #e8f4ff;
  --podium-line: rgba(150, 205, 255, 0.5);
  --podium-glow: rgba(110, 190, 255, 0.28);
  --podium-fill: rgba(8, 14, 22, 0.78);
  --podium-place: var(--podium-ink);
  position: relative;
  align-self: center;
  justify-self: end;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  justify-items: center;
  gap: 0.12rem;
  width: 5.6rem;
  min-height: 5.6rem;
  padding: 0.55rem 0.45rem 0.5rem;
  border: 1px solid var(--podium-line);
  border-radius: 3px;
  background:
    radial-gradient(ellipse 80% 55% at 50% 28%, var(--podium-glow), transparent 68%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.06), transparent 42%),
    var(--podium-fill);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 0 18px color-mix(in srgb, var(--podium-glow) 55%, transparent);
  overflow: hidden;
  isolation: isolate;
}

.char-id-podium[hidden],
.char-id-podium.is-empty {
  display: none;
}

.char-id-podium-glow {
  position: absolute;
  inset: 12% 18%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--podium-glow), transparent 70%);
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
}

.char-id-podium-laurel {
  position: absolute;
  top: 54%;
  width: 1.15rem;
  height: 2.4rem;
  border: 1.5px solid color-mix(in srgb, var(--podium-line) 80%, transparent);
  border-radius: 60% 40% 55% 45%;
  opacity: 0.55;
  z-index: 1;
  pointer-events: none;
}

.char-id-podium-laurel--l {
  left: 0.28rem;
  border-right: 0;
  transform: translateY(-50%) rotate(-8deg);
}

.char-id-podium-laurel--r {
  right: 0.28rem;
  border-left: 0;
  transform: translateY(-50%) rotate(8deg);
}

.char-id-podium-kicker {
  position: relative;
  z-index: 2;
  font-family: var(--font-herald);
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--podium-ink) 78%, #fff 22%);
}

.char-id-podium-place {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: var(--font-herald);
  font-size: 2.05rem;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: var(--podium-place);
  text-shadow:
    0 0 14px var(--podium-glow),
    0 1px 0 rgba(0, 0, 0, 0.45);
}

.char-id-podium-label {
  position: relative;
  z-index: 2;
  font-family: var(--font-herald);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--podium-ink) 70%, transparent);
}

/* Top 1 — prism diamond (iridescent, no gold) */
.char-id-card.podium-1 .char-id-podium {
  --podium-ink: #f2f8ff;
  --podium-line: rgba(170, 225, 255, 0.72);
  --podium-glow: rgba(150, 210, 255, 0.42);
  --podium-fill: rgba(5, 12, 22, 0.86);
  border-color: transparent;
  background:
    linear-gradient(var(--podium-fill), var(--podium-fill)) padding-box,
    linear-gradient(
      135deg,
      #7ad7ff 0%,
      #b8a6ff 22%,
      #ff9ecf 44%,
      #7dffc8 66%,
      #9fd8ff 88%,
      #c9b8ff 100%
    ) border-box;
  border: 1px solid transparent;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 22px rgba(140, 200, 255, 0.28),
    0 0 28px rgba(190, 140, 255, 0.12);
}

.char-id-card.podium-1 .char-id-podium-glow {
  background: conic-gradient(
    from 210deg,
    rgba(122, 215, 255, 0.85),
    rgba(184, 166, 255, 0.85),
    rgba(255, 158, 207, 0.8),
    rgba(125, 255, 200, 0.75),
    rgba(122, 215, 255, 0.85)
  );
  opacity: 0.38;
  filter: blur(7px);
}

.char-id-card.podium-1 .char-id-podium-place {
  background: linear-gradient(
    135deg,
    #ffffff 8%,
    #9fe4ff 28%,
    #d0baff 48%,
    #ffb4d8 68%,
    #a8ffe0 88%,
    #ffffff 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 10px rgba(170, 210, 255, 0.55));
}

/* Top 2 — sapphire crystal */
.char-id-card.podium-2 .char-id-podium {
  --podium-ink: #d7e9ff;
  --podium-line: rgba(100, 170, 255, 0.7);
  --podium-glow: rgba(80, 150, 255, 0.4);
  --podium-fill: rgba(6, 12, 28, 0.86);
  --podium-place: #9ec5ff;
  background:
    radial-gradient(ellipse 75% 50% at 50% 22%, rgba(90, 160, 255, 0.28), transparent 65%),
    linear-gradient(165deg, rgba(140, 190, 255, 0.1), transparent 45%),
    var(--podium-fill);
  box-shadow:
    inset 0 0 0 1px rgba(150, 200, 255, 0.1),
    0 0 20px rgba(70, 140, 255, 0.28);
}

.char-id-card.podium-2 .char-id-podium-place {
  color: #b8d6ff;
  text-shadow:
    0 0 16px rgba(90, 160, 255, 0.55),
    0 1px 0 rgba(0, 0, 0, 0.5);
}

/* Top 3 — emerald facet */
.char-id-card.podium-3 .char-id-podium {
  --podium-ink: #d8ffe8;
  --podium-line: rgba(80, 210, 150, 0.68);
  --podium-glow: rgba(70, 200, 140, 0.36);
  --podium-fill: rgba(4, 18, 14, 0.86);
  --podium-place: #8ef0bf;
  background:
    radial-gradient(ellipse 75% 50% at 50% 22%, rgba(70, 210, 150, 0.26), transparent 65%),
    linear-gradient(165deg, rgba(120, 255, 190, 0.1), transparent 45%),
    var(--podium-fill);
  box-shadow:
    inset 0 0 0 1px rgba(140, 255, 200, 0.1),
    0 0 20px rgba(60, 190, 130, 0.26);
}

.char-id-card.podium-3 .char-id-podium-place {
  color: #9af5c8;
  text-shadow:
    0 0 16px rgba(70, 210, 150, 0.5),
    0 1px 0 rgba(0, 0, 0, 0.5);
}

.char-hero-seal {
  margin: 0;
  min-width: 0;
  overflow: visible;
}

.char-seal-chip {
  --seal-ink: #f3df9a;
  --seal-line: rgba(210, 170, 90, 0.55);
  --seal-fill: rgba(0, 0, 0, 0.35);
  --seal-mark: rgba(243, 223, 154, 0.85);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  max-width: 14rem;
  min-height: 1.75rem;
  margin: 0;
  padding: 0.28rem 0.62rem 0.28rem 0.42rem;
  border: 1px solid var(--seal-line);
  border-radius: 2px;
  background: var(--seal-fill);
  color: var(--seal-ink);
  font: inherit;
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.15s ease, background 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}

.char-seal-chip:hover,
.char-seal-chip:focus-visible {
  filter: brightness(1.08);
  outline: none;
}

.char-seal-chip.is-empty {
  --seal-ink: rgba(232, 239, 233, 0.45);
  --seal-line: rgba(160, 168, 160, 0.35);
  --seal-fill: rgba(0, 0, 0, 0.22);
  --seal-mark: rgba(160, 168, 160, 0.45);
}

.char-seal-chip-mark {
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  box-sizing: border-box;
  background: var(--seal-mark);
  opacity: 0.9;
}

.char-seal-chip-label {
  display: block;
  min-width: 0;
  font-family: var(--font-herald);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.15;
  text-transform: uppercase;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow:
    0 0 10px color-mix(in srgb, var(--seal-mark, rgba(243, 223, 154, 0.85)) 35%, transparent),
    0 1px 0 rgba(0, 0, 0, 0.45);
}

.char-seal-chip.is-empty .char-seal-chip-label {
  letter-spacing: 0.18em;
  font-weight: 600;
  opacity: 0.7;
  text-shadow: none;
}

.char-tier-board-seal {
  --seal-ink: #f3df9a;
  --seal-line: rgba(210, 170, 90, 0.45);
  --seal-fill: rgba(0, 0, 0, 0.28);
  --seal-mark: rgba(243, 223, 154, 0.7);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  max-width: 13rem;
  min-height: 1.4rem;
  padding: 0.22rem 0.55rem 0.22rem 0.38rem;
  border: 1px solid var(--seal-line);
  border-radius: 2px;
  background: var(--seal-fill);
  color: var(--seal-ink);
  font-family: var(--font-herald);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  text-shadow:
    0 0 8px color-mix(in srgb, var(--seal-mark, rgba(243, 223, 154, 0.7)) 30%, transparent),
    0 1px 0 rgba(0, 0, 0, 0.4);
}

.char-tier-board-seal-tick {
  flex: 0 0 auto;
  width: 0.4rem;
  height: 0.4rem;
  box-sizing: border-box;
  background: var(--seal-mark);
}

/* Cube-wire chrome on seals — neon edge + corner brackets; box size unchanged */
.char-tier-board-seal-wire {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--seal-mark, var(--seal-ink, #f3df9a)) 72%, #fff);
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--seal-mark, var(--seal-ink, #f3df9a)) 22%, transparent),
    inset 0 0 12px color-mix(in srgb, var(--seal-mark, var(--seal-ink, #f3df9a)) 16%, transparent),
    0 0 8px color-mix(in srgb, var(--seal-mark, var(--seal-ink, #f3df9a)) 28%, transparent);
  background:
    linear-gradient(
      var(--seal-mark, var(--seal-ink, #f3df9a)),
      var(--seal-mark, var(--seal-ink, #f3df9a))
    )
      0 0 / 0.42rem 1.25px no-repeat,
    linear-gradient(
      var(--seal-mark, var(--seal-ink, #f3df9a)),
      var(--seal-mark, var(--seal-ink, #f3df9a))
    )
      0 0 / 1.25px 0.42rem no-repeat,
    linear-gradient(
      var(--seal-mark, var(--seal-ink, #f3df9a)),
      var(--seal-mark, var(--seal-ink, #f3df9a))
    )
      100% 0 / 0.42rem 1.25px no-repeat,
    linear-gradient(
      var(--seal-mark, var(--seal-ink, #f3df9a)),
      var(--seal-mark, var(--seal-ink, #f3df9a))
    )
      100% 0 / 1.25px 0.42rem no-repeat,
    linear-gradient(
      var(--seal-mark, var(--seal-ink, #f3df9a)),
      var(--seal-mark, var(--seal-ink, #f3df9a))
    )
      0 100% / 0.42rem 1.25px no-repeat,
    linear-gradient(
      var(--seal-mark, var(--seal-ink, #f3df9a)),
      var(--seal-mark, var(--seal-ink, #f3df9a))
    )
      0 100% / 1.25px 0.42rem no-repeat,
    linear-gradient(
      var(--seal-mark, var(--seal-ink, #f3df9a)),
      var(--seal-mark, var(--seal-ink, #f3df9a))
    )
      100% 100% / 0.42rem 1.25px no-repeat,
    linear-gradient(
      var(--seal-mark, var(--seal-ink, #f3df9a)),
      var(--seal-mark, var(--seal-ink, #f3df9a))
    )
      100% 100% / 1.25px 0.42rem no-repeat;
  opacity: 0.92;
  filter: drop-shadow(0 0 2px color-mix(in srgb, var(--seal-mark, var(--seal-ink, #f3df9a)) 45%, transparent));
}

.char-tier-board-seal-wire::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid color-mix(in srgb, var(--seal-mark, var(--seal-ink, #f3df9a)) 28%, transparent);
  border-radius: inherit;
  opacity: 0.55;
  pointer-events: none;
}

.char-seal-chip.is-empty .char-tier-board-seal-wire,
.char-tier-board-seal.is-dim .char-tier-board-seal-wire {
  opacity: 0.35;
  filter: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--seal-mark, var(--seal-ink, #f3df9a)) 12%, transparent);
}

.char-seal-chip.is-on .char-tier-board-seal-wire,
.ach-board .ach-tree-item.is-unlocked > .ach-tree-node > .ach-seal-tile .char-tier-board-seal-wire {
  opacity: 1;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--seal-mark, var(--seal-ink, #f3df9a)) 28%, transparent);
  filter: none;
}

/* Track-specific seal treatments — strong silhouettes; hardness escalates glow/pips */
.char-seal-chip,
.char-tier-board-seal {
  gap: 0.28rem;
}

.char-seal-chip-pips {
  display: inline-flex;
  align-items: center;
  gap: 0.12rem;
  flex: 0 0 auto;
  margin-right: 0.05rem;
}

.char-seal-chip-pips i {
  display: block;
  width: 0.22rem;
  height: 0.22rem;
  border-radius: 50%;
  background: var(--seal-mark, rgba(243, 223, 154, 0.85));
  opacity: 0.55;
  box-shadow: none;
}

.char-tier-board-seal .char-seal-chip-pips i {
  width: 0.16rem;
  height: 0.16rem;
}

.seal-rank-1 .char-seal-chip-pips i { opacity: 0.4; }
.seal-rank-2 .char-seal-chip-pips i { opacity: 0.55; }
.seal-rank-3 .char-seal-chip-pips i { opacity: 0.7; }
.seal-rank-4 .char-seal-chip-pips i {
  opacity: 0.85;
  box-shadow: inset 0 0 4px var(--seal-mark, rgba(243, 223, 154, 0.5));
}
.seal-rank-5 .char-seal-chip-pips i,
.seal-rank-6 .char-seal-chip-pips i {
  opacity: 1;
  box-shadow: inset 0 0 6px var(--seal-mark, rgba(243, 223, 154, 0.75));
}

.char-seal-chip.is-preview {
  pointer-events: none;
}

/* Seal plates — static finish (no moving sheen / breathe / pulse) */
.char-seal-chip.is-on,
.char-tier-board-seal[class*="seal-track-"]:not(.seal-track-none) {
  animation: none;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--seal-line) 55%, transparent),
    inset 0 0 14px color-mix(in srgb, var(--seal-mark) 22%, transparent),
    inset 0 0 24px color-mix(in srgb, var(--seal-mark) 10%, transparent);
}

.char-seal-chip.is-on::after,
.char-tier-board-seal[class*="seal-track-"]:not(.seal-track-none)::after {
  display: none;
  content: none;
  animation: none;
}

.char-seal-chip.is-on > *,
.char-tier-board-seal[class*="seal-track-"]:not(.seal-track-none) > * {
  position: relative;
  z-index: 4;
}

/* —— Ascent: gold climb / mountain —— */
.char-seal-chip.seal-track-ascent, .char-tier-board-seal.seal-track-ascent {
  --seal-ink: #f3df9a;
  --seal-line: rgba(201, 165, 116, 0.75);
  --seal-mark: #c9a574;
  border-radius: 2px 2px 2px 0;
  border-left-width: 3px;
  background:
    linear-gradient(90deg, rgba(201, 165, 116, 0.28) 0 0.28rem, transparent 0.28rem),
    linear-gradient(180deg, rgba(201, 165, 116, 0.16), rgba(0, 0, 0, 0.4));
  box-shadow: inset 0 1px 0 rgba(243, 223, 154, 0.18);
}

.char-seal-chip.seal-track-ascent .char-seal-chip-mark,
.char-tier-board-seal.seal-track-ascent .char-tier-board-seal-tick {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: var(--seal-mark);
  width: 0.5rem;
  height: 0.45rem;
}

.char-seal-chip.seal-track-ascent.seal-rank-1, .char-tier-board-seal.seal-track-ascent.seal-rank-1 {
  --seal-ink: #d8c48a;
  --seal-line: rgba(180, 150, 80, 0.45);
  filter: saturate(0.7) brightness(0.9);
}
.char-seal-chip.seal-track-ascent.seal-rank-1 .char-seal-chip-mark,
.char-tier-board-seal.seal-track-ascent.seal-rank-1 .char-tier-board-seal-tick {
  width: 0.36rem;
  height: 0.32rem;
  opacity: 0.65;
}
.char-seal-chip.seal-track-ascent.seal-rank-2, .char-tier-board-seal.seal-track-ascent.seal-rank-2 {
  --seal-ink: #edd89a;
  --seal-line: rgba(210, 170, 90, 0.65);
  background:
    linear-gradient(90deg, rgba(201, 165, 116, 0.38) 0 0.32rem, transparent 0.32rem),
    linear-gradient(180deg, rgba(201, 165, 116, 0.22), rgba(0, 0, 0, 0.4));
}
.char-seal-chip.seal-track-ascent.seal-rank-2 .char-seal-chip-mark,
.char-tier-board-seal.seal-track-ascent.seal-rank-2 .char-tier-board-seal-tick {
  width: 0.48rem;
  height: 0.48rem;
  box-shadow: inset 0 0 5px rgba(201, 165, 116, 0.4);
}
.char-seal-chip.seal-track-ascent.seal-rank-3, .char-tier-board-seal.seal-track-ascent.seal-rank-3 {
  --seal-ink: #f6e4a8;
  --seal-line: rgba(240, 200, 110, 0.8);
  background:
    linear-gradient(90deg, rgba(240, 200, 110, 0.5) 0 0.36rem, transparent 0.36rem),
    linear-gradient(180deg, rgba(255, 220, 140, 0.28), rgba(0, 0, 0, 0.4));
  box-shadow: inset 0 0 12px rgba(201, 165, 116, 0.22);
}
.char-seal-chip.seal-track-ascent.seal-rank-3 .char-seal-chip-mark,
.char-tier-board-seal.seal-track-ascent.seal-rank-3 .char-tier-board-seal-tick {
  width: 0.55rem;
  height: 0.55rem;
  background: linear-gradient(180deg, #fff0c0, #e0b850);
  box-shadow: inset 0 0 8px rgba(243, 223, 154, 0.55);
}
.char-seal-chip.seal-track-ascent.seal-rank-4, .char-tier-board-seal.seal-track-ascent.seal-rank-4 {
  --seal-ink: #fff1c0;
  --seal-line: rgba(255, 220, 140, 0.9);
  border-left-width: 4px;
  background:
    linear-gradient(90deg, rgba(255, 210, 120, 0.62) 0 0.4rem, transparent 0.4rem),
    linear-gradient(180deg, rgba(255, 230, 160, 0.35), rgba(0, 0, 0, 0.42));
  box-shadow: inset 0 0 16px rgba(201, 165, 116, 0.32);
}
.char-seal-chip.seal-track-ascent.seal-rank-4 .char-seal-chip-mark,
.char-tier-board-seal.seal-track-ascent.seal-rank-4 .char-tier-board-seal-tick {
  width: 0.6rem;
  height: 0.6rem;
  clip-path: polygon(50% 0, 100% 58%, 78% 100%, 22% 100%, 0 58%);
  background: linear-gradient(180deg, #fff6d0, #c9a574);
  box-shadow:
    inset 0 0 10px rgba(255, 220, 140, 0.7),
    0.26rem 0.16rem 0 -0.1rem rgba(201, 165, 116, 0.55);
}
.seal-track-ascent.seal-rank-5,
.char-seal-chip.seal-track-ascent.seal-rank-6, .char-tier-board-seal.seal-track-ascent.seal-rank-6 {
  --seal-ink: #fff8d8;
  --seal-line: rgba(255, 230, 160, 0.98);
  border-left-width: 5px;
  background:
    linear-gradient(90deg, rgba(255, 220, 130, 0.78) 0 0.45rem, transparent 0.45rem),
    linear-gradient(180deg, rgba(255, 236, 180, 0.48), rgba(20, 14, 4, 0.5));
  box-shadow:
    inset 0 0 0 1px rgba(255, 240, 190, 0.35),
    inset 0 0 22px rgba(255, 210, 120, 0.45);
}
.char-seal-chip.seal-track-ascent.seal-rank-5 .char-seal-chip-mark,
.seal-track-ascent.seal-rank-5 .char-tier-board-seal-tick,
.char-seal-chip.seal-track-ascent.seal-rank-6 .char-seal-chip-mark,
.char-tier-board-seal.seal-track-ascent.seal-rank-6 .char-tier-board-seal-tick {
  width: 0.68rem;
  height: 0.68rem;
  clip-path: polygon(50% 0, 100% 52%, 72% 100%, 28% 100%, 0 52%);
  background: linear-gradient(180deg, #fff, #f3df9a 40%, #d4a84a);
  box-shadow:
    inset 0 0 14px rgba(255, 236, 180, 0.9),
    0.3rem 0.2rem 0 -0.08rem rgba(201, 165, 116, 0.7),
    -0.3rem 0.2rem 0 -0.08rem rgba(201, 165, 116, 0.7);
}

/* —— Edge: steel blade / chevron —— */
.char-seal-chip.seal-track-edge, .char-tier-board-seal.seal-track-edge {
  --seal-ink: #d8e6f2;
  --seal-line: rgba(140, 175, 210, 0.7);
  --seal-mark: #9bb8d4;
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 0.55rem) 0, 100% 50%, calc(100% - 0.55rem) 100%, 0 100%);
  padding-right: 0.85rem;
  background: linear-gradient(135deg, rgba(90, 130, 170, 0.32), rgba(0, 0, 0, 0.42));
}

.char-seal-chip.seal-track-edge .char-seal-chip-mark,
.char-tier-board-seal.seal-track-edge .char-tier-board-seal-tick {
  width: 0.42rem;
  height: 0.42rem;
  transform: rotate(45deg);
  background: var(--seal-mark);
  border: 1px solid rgba(200, 220, 240, 0.55);
  border-radius: 0;
}

.char-seal-chip.seal-track-edge.seal-rank-1, .char-tier-board-seal.seal-track-edge.seal-rank-1 {
  --seal-ink: #a8b8c8;
  clip-path: polygon(0 0, calc(100% - 0.28rem) 0, 100% 50%, calc(100% - 0.28rem) 100%, 0 100%);
  padding-right: 0.5rem;
  filter: saturate(0.65) brightness(0.88);
}
.char-seal-chip.seal-track-edge.seal-rank-1 .char-seal-chip-mark,
.char-tier-board-seal.seal-track-edge.seal-rank-1 .char-tier-board-seal-tick {
  width: 0.28rem;
  height: 0.28rem;
  opacity: 0.6;
}
.char-seal-chip.seal-track-edge.seal-rank-2, .char-tier-board-seal.seal-track-edge.seal-rank-2 {
  --seal-ink: #c5d6e6;
  --seal-line: rgba(130, 170, 210, 0.7);
  background: linear-gradient(135deg, rgba(100, 145, 185, 0.38), rgba(0, 0, 0, 0.42));
}
.char-seal-chip.seal-track-edge.seal-rank-2 .char-seal-chip-mark,
.char-tier-board-seal.seal-track-edge.seal-rank-2 .char-tier-board-seal-tick {
  width: 0.4rem;
  height: 0.4rem;
  box-shadow: 0 0 0 1px rgba(180, 210, 235, 0.35);
}
.char-seal-chip.seal-track-edge.seal-rank-3, .char-tier-board-seal.seal-track-edge.seal-rank-3 {
  --seal-ink: #dceaf5;
  --seal-line: rgba(160, 200, 235, 0.82);
  clip-path: polygon(0 0, calc(100% - 0.65rem) 0, 100% 50%, calc(100% - 0.65rem) 100%, 0 100%);
  padding-right: 0.95rem;
  background: linear-gradient(135deg, rgba(120, 170, 210, 0.45), rgba(0, 0, 0, 0.42));
  box-shadow: inset 0 0 12px rgba(100, 160, 210, 0.22);
}
.char-seal-chip.seal-track-edge.seal-rank-3 .char-seal-chip-mark,
.char-tier-board-seal.seal-track-edge.seal-rank-3 .char-tier-board-seal-tick {
  width: 0.48rem;
  height: 0.48rem;
  background: linear-gradient(135deg, #eaf4fb, #7aa0c2);
  box-shadow: inset 0 0 8px rgba(160, 200, 235, 0.5);
}
.char-seal-chip.seal-track-edge.seal-rank-4, .char-tier-board-seal.seal-track-edge.seal-rank-4 {
  --seal-ink: #eef6fc;
  --seal-line: rgba(180, 215, 245, 0.9);
  clip-path: polygon(0 0, calc(100% - 0.75rem) 0, 100% 50%, calc(100% - 0.75rem) 100%, 0 100%);
  padding-right: 1.05rem;
  background: linear-gradient(135deg, rgba(140, 185, 225, 0.55), rgba(0, 0, 0, 0.45));
  box-shadow: inset 0 0 16px rgba(110, 170, 220, 0.32);
}
.char-seal-chip.seal-track-edge.seal-rank-4 .char-seal-chip-mark,
.char-tier-board-seal.seal-track-edge.seal-rank-4 .char-tier-board-seal-tick {
  width: 0.52rem;
  height: 0.52rem;
  background: #eaf4fb;
  box-shadow:
    inset 0 0 10px rgba(180, 215, 240, 0.7),
    0.32rem 0 0 -0.1rem rgba(155, 184, 212, 0.8);
}
.seal-track-edge.seal-rank-5,
.char-seal-chip.seal-track-edge.seal-rank-6, .char-tier-board-seal.seal-track-edge.seal-rank-6 {
  --seal-ink: #f5fafd;
  --seal-line: rgba(210, 235, 255, 0.98);
  clip-path: polygon(0 0, calc(100% - 0.9rem) 0, 100% 50%, calc(100% - 0.9rem) 100%, 0 100%);
  padding-right: 1.2rem;
  background: linear-gradient(135deg, rgba(160, 205, 240, 0.65), rgba(8, 16, 28, 0.5));
  box-shadow:
    inset 0 0 0 1px rgba(200, 230, 255, 0.3),
    inset 0 0 22px rgba(120, 180, 230, 0.45);
}
.char-seal-chip.seal-track-edge.seal-rank-5 .char-seal-chip-mark,
.seal-track-edge.seal-rank-5 .char-tier-board-seal-tick,
.char-seal-chip.seal-track-edge.seal-rank-6 .char-seal-chip-mark,
.char-tier-board-seal.seal-track-edge.seal-rank-6 .char-tier-board-seal-tick {
  width: 0.56rem;
  height: 0.56rem;
  background: #fff;
  box-shadow:
    inset 0 0 12px rgba(200, 230, 255, 0.9),
    0.36rem 0 0 -0.08rem #9bb8d4,
    0.58rem 0 0 -0.14rem rgba(155, 184, 212, 0.55);
}

/* —— Vault: copper stamp —— */
.char-seal-chip.seal-track-vault, .char-tier-board-seal.seal-track-vault {
  --seal-ink: #efd2a8;
  --seal-line: rgba(180, 120, 70, 0.75);
  --seal-mark: #c4884a;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(140, 90, 45, 0.38), rgba(0, 0, 0, 0.45));
  box-shadow:
    inset 0 0 0 1px rgba(200, 140, 80, 0.25),
    inset 0 0 10px rgba(160, 100, 50, 0.15);
}

.char-seal-chip.seal-track-vault .char-seal-chip-mark,
.char-tier-board-seal.seal-track-vault .char-tier-board-seal-tick {
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 1px;
  border: 1px solid rgba(239, 210, 168, 0.55);
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--seal-mark);
}

.char-seal-chip.seal-track-vault.seal-rank-1, .char-tier-board-seal.seal-track-vault.seal-rank-1 {
  filter: saturate(0.7) brightness(0.9);
}
.char-seal-chip.seal-track-vault.seal-rank-1 .char-seal-chip-mark,
.char-tier-board-seal.seal-track-vault.seal-rank-1 .char-tier-board-seal-tick {
  opacity: 0.55;
  box-shadow: none;
}
.char-seal-chip.seal-track-vault.seal-rank-2 .char-seal-chip-mark,
.char-tier-board-seal.seal-track-vault.seal-rank-2 .char-tier-board-seal-tick {
  background: rgba(196, 136, 74, 0.3);
}
.char-seal-chip.seal-track-vault.seal-rank-3, .char-tier-board-seal.seal-track-vault.seal-rank-3 {
  --seal-ink: #f5dfb8;
  --seal-line: rgba(200, 140, 80, 0.85);
  box-shadow:
    inset 0 0 0 1px rgba(220, 160, 100, 0.35),
    inset 0 0 14px rgba(180, 110, 50, 0.25);
}
.char-seal-chip.seal-track-vault.seal-rank-3 .char-seal-chip-mark,
.char-tier-board-seal.seal-track-vault.seal-rank-3 .char-tier-board-seal-tick {
  background: rgba(196, 136, 74, 0.65);
  box-shadow: inset 0 0 0 1px rgba(239, 210, 168, 0.55);
}
.char-seal-chip.seal-track-vault.seal-rank-4, .char-tier-board-seal.seal-track-vault.seal-rank-4 {
  --seal-ink: #ffe6c0;
  --seal-line: rgba(220, 160, 95, 0.92);
  background: linear-gradient(180deg, rgba(170, 110, 55, 0.5), rgba(0, 0, 0, 0.48));
  box-shadow:
    inset 0 0 0 2px rgba(230, 170, 100, 0.35),
    inset 0 0 16px rgba(180, 110, 50, 0.32);
}
.char-seal-chip.seal-track-vault.seal-rank-4 .char-seal-chip-mark,
.char-tier-board-seal.seal-track-vault.seal-rank-4 .char-tier-board-seal-tick {
  background: #c4884a;
  border-color: rgba(255, 230, 190, 0.75);
  box-shadow: 0 0 0 2px rgba(40, 20, 8, 0.45), inset 0 0 10px rgba(196, 136, 74, 0.55);
}
.seal-track-vault.seal-rank-5,
.char-seal-chip.seal-track-vault.seal-rank-6, .char-tier-board-seal.seal-track-vault.seal-rank-6 {
  --seal-ink: #fff0d0;
  --seal-line: rgba(240, 180, 110, 0.98);
  background: linear-gradient(180deg, rgba(200, 130, 60, 0.62), rgba(20, 10, 4, 0.55));
  box-shadow:
    inset 0 0 0 1px rgba(255, 210, 150, 0.4),
    inset 0 0 0 4px rgba(80, 45, 20, 0.4),
    inset 0 0 22px rgba(200, 120, 50, 0.45);
}
.char-seal-chip.seal-track-vault.seal-rank-5 .char-seal-chip-mark,
.seal-track-vault.seal-rank-5 .char-tier-board-seal-tick,
.char-seal-chip.seal-track-vault.seal-rank-6 .char-seal-chip-mark,
.char-tier-board-seal.seal-track-vault.seal-rank-6 .char-tier-board-seal-tick {
  width: 0.56rem;
  height: 0.56rem;
  background: linear-gradient(180deg, #ffe8c0, #c4884a);
  border: 1px solid rgba(255, 240, 200, 0.85);
  box-shadow:
    0 0 0 2px rgba(40, 20, 8, 0.5),
    inset 0 0 14px rgba(240, 170, 90, 0.7);
}

/* —— Risk Desk: crimson hazard bars —— */
.char-seal-chip.seal-track-risk_desk, .char-tier-board-seal.seal-track-risk_desk {
  --seal-ink: #f2c8c4;
  --seal-line: rgba(190, 90, 85, 0.75);
  --seal-mark: #d46a62;
  border-radius: 1px;
  background: linear-gradient(90deg, rgba(170, 55, 50, 0.45) 0 0.32rem, rgba(0, 0, 0, 0.42) 0.32rem);
  transform: skewX(-2deg);
}

.char-seal-chip.seal-track-risk_desk .char-seal-chip-label, .char-tier-board-seal.seal-track-risk_desk .char-seal-chip-label,
.char-seal-chip.seal-track-risk_desk .char-seal-chip-pips, .char-tier-board-seal.seal-track-risk_desk .char-seal-chip-pips,
.char-seal-chip.seal-track-risk_desk .char-seal-chip-mark,
.char-tier-board-seal.seal-track-risk_desk .char-tier-board-seal-tick {
  transform: skewX(2deg);
}

.char-seal-chip.seal-track-risk_desk .char-seal-chip-mark,
.char-tier-board-seal.seal-track-risk_desk .char-tier-board-seal-tick {
  width: 0.2rem;
  height: 0.55rem;
  border-radius: 1px;
  background: var(--seal-mark);
  box-shadow: 0.16rem 0 0 rgba(212, 106, 98, 0.5);
}

.char-seal-chip.seal-track-risk_desk.seal-rank-1, .char-tier-board-seal.seal-track-risk_desk.seal-rank-1 {
  filter: saturate(0.7) brightness(0.9);
  transform: skewX(-1deg);
}
.char-seal-chip.seal-track-risk_desk.seal-rank-1 .char-seal-chip-mark,
.char-tier-board-seal.seal-track-risk_desk.seal-rank-1 .char-tier-board-seal-tick {
  box-shadow: none;
  height: 0.38rem;
  opacity: 0.65;
}
.char-seal-chip.seal-track-risk_desk.seal-rank-2 .char-seal-chip-mark,
.char-tier-board-seal.seal-track-risk_desk.seal-rank-2 .char-tier-board-seal-tick {
  box-shadow: 0.16rem 0 0 rgba(212, 106, 98, 0.65);
}
.char-seal-chip.seal-track-risk_desk.seal-rank-3, .char-tier-board-seal.seal-track-risk_desk.seal-rank-3 {
  --seal-ink: #ffd4d0;
  --seal-line: rgba(210, 100, 95, 0.85);
  background: linear-gradient(90deg, rgba(190, 55, 50, 0.55) 0 0.36rem, rgba(0, 0, 0, 0.42) 0.36rem);
  box-shadow: inset 0 0 12px rgba(180, 60, 50, 0.22);
}
.char-seal-chip.seal-track-risk_desk.seal-rank-3 .char-seal-chip-mark,
.char-tier-board-seal.seal-track-risk_desk.seal-rank-3 .char-tier-board-seal-tick {
  box-shadow:
    0.15rem 0 0 #d46a62,
    0.3rem 0 0 rgba(212, 106, 98, 0.45);
}
.char-seal-chip.seal-track-risk_desk.seal-rank-4, .char-tier-board-seal.seal-track-risk_desk.seal-rank-4 {
  --seal-ink: #ffe0dc;
  --seal-line: rgba(230, 120, 110, 0.92);
  background: linear-gradient(90deg, rgba(200, 50, 45, 0.65) 0 0.4rem, rgba(20, 6, 6, 0.48) 0.4rem);
  box-shadow: inset 0 0 16px rgba(190, 55, 45, 0.32);
  transform: skewX(-3deg);
}
.char-seal-chip.seal-track-risk_desk.seal-rank-4 .char-seal-chip-mark,
.char-tier-board-seal.seal-track-risk_desk.seal-rank-4 .char-tier-board-seal-tick {
  height: 0.6rem;
  background: #e87870;
  box-shadow:
    0.15rem 0 0 #d46a62,
    0.3rem 0 0 #e88880,
    0.45rem 0 0 rgba(212, 106, 98, 0.4);
}
.seal-track-risk_desk.seal-rank-5,
.char-seal-chip.seal-track-risk_desk.seal-rank-6, .char-tier-board-seal.seal-track-risk_desk.seal-rank-6 {
  --seal-ink: #ffe8e4;
  --seal-line: rgba(255, 140, 130, 0.98);
  background: linear-gradient(90deg, rgba(220, 45, 40, 0.78) 0 0.48rem, rgba(24, 6, 6, 0.55) 0.48rem);
  box-shadow:
    inset 0 0 0 1px rgba(255, 180, 170, 0.28),
    inset 0 0 22px rgba(210, 50, 40, 0.45);
  transform: skewX(-4deg);
}
.char-seal-chip.seal-track-risk_desk.seal-rank-5 .char-seal-chip-mark,
.seal-track-risk_desk.seal-rank-5 .char-tier-board-seal-tick,
.char-seal-chip.seal-track-risk_desk.seal-rank-6 .char-seal-chip-mark,
.char-tier-board-seal.seal-track-risk_desk.seal-rank-6 .char-tier-board-seal-tick {
  width: 0.18rem;
  height: 0.65rem;
  background: #ff9a90;
  box-shadow:
    0.14rem 0 0 #d46a62,
    0.28rem 0 0 #e88880,
    0.42rem 0 0 #f0a098,
    0.56rem 0 0 rgba(212, 106, 98, 0.45);
}

/* —— Signal Craft: teal pulse rings —— */
.char-seal-chip.seal-track-signal_craft, .char-tier-board-seal.seal-track-signal_craft {
  --seal-ink: #c8efe4;
  --seal-line: rgba(70, 180, 150, 0.7);
  --seal-mark: #5ecfb0;
  border-radius: 999px;
  padding-left: 0.4rem;
  padding-right: 0.55rem;
  background: linear-gradient(180deg, rgba(40, 130, 110, 0.35), rgba(0, 0, 0, 0.42));
}

.char-seal-chip.seal-track-signal_craft .char-seal-chip-mark,
.char-tier-board-seal.seal-track-signal_craft .char-tier-board-seal-tick {
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--seal-mark) 0 35%, transparent 38%);
  box-shadow:
    0 0 0 1px rgba(94, 207, 176, 0.45),
    0 0 0 2.5px rgba(94, 207, 176, 0.18);
}

.char-seal-chip.seal-track-signal_craft.seal-rank-1, .char-tier-board-seal.seal-track-signal_craft.seal-rank-1 {
  filter: saturate(0.7) brightness(0.9);
}
.char-seal-chip.seal-track-signal_craft.seal-rank-1 .char-seal-chip-mark,
.char-tier-board-seal.seal-track-signal_craft.seal-rank-1 .char-tier-board-seal-tick {
  width: 0.32rem;
  height: 0.32rem;
  box-shadow: 0 0 0 1px rgba(94, 207, 176, 0.3);
  opacity: 0.65;
}
.char-seal-chip.seal-track-signal_craft.seal-rank-2 .char-seal-chip-mark,
.char-tier-board-seal.seal-track-signal_craft.seal-rank-2 .char-tier-board-seal-tick {
  box-shadow:
    0 0 0 1px rgba(94, 207, 176, 0.5),
    0 0 0 2.5px rgba(94, 207, 176, 0.22);
}
.char-seal-chip.seal-track-signal_craft.seal-rank-3, .char-tier-board-seal.seal-track-signal_craft.seal-rank-3 {
  --seal-ink: #d8fff4;
  --seal-line: rgba(90, 200, 170, 0.85);
  background: linear-gradient(180deg, rgba(50, 150, 130, 0.42), rgba(0, 0, 0, 0.42));
  box-shadow: inset 0 0 12px rgba(70, 180, 150, 0.22);
}
.char-seal-chip.seal-track-signal_craft.seal-rank-3 .char-seal-chip-mark,
.char-tier-board-seal.seal-track-signal_craft.seal-rank-3 .char-tier-board-seal-tick {
  box-shadow:
    0 0 0 1px rgba(94, 207, 176, 0.55),
    0 0 0 2.5px rgba(94, 207, 176, 0.28),
    0 0 0 4px rgba(94, 207, 176, 0.12);
}
.char-seal-chip.seal-track-signal_craft.seal-rank-4, .char-tier-board-seal.seal-track-signal_craft.seal-rank-4 {
  --seal-ink: #e4fff8;
  --seal-line: rgba(110, 220, 185, 0.92);
  background: linear-gradient(180deg, rgba(60, 170, 145, 0.5), rgba(0, 0, 0, 0.45));
  box-shadow: inset 0 0 16px rgba(70, 190, 160, 0.32);
}
.char-seal-chip.seal-track-signal_craft.seal-rank-4 .char-seal-chip-mark,
.char-tier-board-seal.seal-track-signal_craft.seal-rank-4 .char-tier-board-seal-tick {
  width: 0.52rem;
  height: 0.52rem;
  background: radial-gradient(circle at 50% 50%, #b8ffe8 0 32%, #5ecfb0 38%, transparent 42%);
  box-shadow:
    0 0 0 1px rgba(120, 230, 200, 0.6),
    0 0 0 3px rgba(94, 207, 176, 0.3),
    0 0 0 5px rgba(94, 207, 176, 0.12);
}
.seal-track-signal_craft.seal-rank-5,
.char-seal-chip.seal-track-signal_craft.seal-rank-6, .char-tier-board-seal.seal-track-signal_craft.seal-rank-6 {
  --seal-ink: #f0fffa;
  --seal-line: rgba(140, 240, 210, 0.98);
  background: linear-gradient(180deg, rgba(70, 190, 160, 0.58), rgba(4, 20, 16, 0.5));
  box-shadow:
    inset 0 0 0 1px rgba(160, 240, 215, 0.35),
    inset 0 0 22px rgba(80, 200, 170, 0.45);
}
.char-seal-chip.seal-track-signal_craft.seal-rank-5 .char-seal-chip-mark,
.seal-track-signal_craft.seal-rank-5 .char-tier-board-seal-tick,
.char-seal-chip.seal-track-signal_craft.seal-rank-6 .char-seal-chip-mark,
.char-tier-board-seal.seal-track-signal_craft.seal-rank-6 .char-tier-board-seal-tick {
  width: 0.58rem;
  height: 0.58rem;
  background: radial-gradient(circle at 50% 50%, #fff 0 16%, #9af0d4 28%, #5ecfb0 40%, transparent 44%);
  box-shadow:
    0 0 0 1px rgba(180, 250, 225, 0.75),
    0 0 0 3px rgba(94, 207, 176, 0.4),
    0 0 0 5.5px rgba(94, 207, 176, 0.2),
    inset 0 0 12px rgba(94, 207, 176, 0.65);
}

/* —— Cadence: lunar pulse rings —— */
.char-seal-chip.seal-track-cadence, .char-tier-board-seal.seal-track-cadence {
  --seal-ink: #d4e4f8;
  --seal-line: rgba(110, 155, 210, 0.72);
  --seal-mark: #8eb6e0;
  border-radius: 999px;
  background:
    radial-gradient(circle at 20% 30%, rgba(140, 180, 230, 0.28), transparent 55%),
    linear-gradient(180deg, rgba(60, 100, 150, 0.35), rgba(0, 0, 0, 0.45));
  box-shadow: inset 0 0 0 1px rgba(150, 190, 230, 0.22);
}
.char-seal-chip.seal-track-cadence .char-seal-chip-mark,
.char-tier-board-seal.seal-track-cadence .char-tier-board-seal-tick {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: transparent;
  box-shadow:
    inset 0 0 0 2px var(--seal-mark),
    0 0 0 3px rgba(110, 155, 210, 0.2);
}
.char-seal-chip.seal-track-cadence.seal-rank-1, .char-tier-board-seal.seal-track-cadence.seal-rank-1 {
  filter: saturate(0.7) brightness(0.9);
}
.char-seal-chip.seal-track-cadence.seal-rank-3, .char-tier-board-seal.seal-track-cadence.seal-rank-3 {
  --seal-ink: #e4effc;
  box-shadow:
    inset 0 0 0 1px rgba(160, 200, 240, 0.3),
    inset 0 0 14px rgba(90, 140, 200, 0.22);
}
.char-seal-chip.seal-track-cadence.seal-rank-3 .char-seal-chip-mark,
.char-tier-board-seal.seal-track-cadence.seal-rank-3 .char-tier-board-seal-tick {
  box-shadow:
    inset 0 0 0 2px #b6d2f0,
    0 0 0 3px rgba(120, 170, 220, 0.28),
    0 0 0 5px rgba(120, 170, 220, 0.12);
}
.seal-track-cadence.seal-rank-5,
.char-seal-chip.seal-track-cadence.seal-rank-4,
.char-tier-board-seal.seal-track-cadence.seal-rank-4,
.char-seal-chip.seal-track-cadence.seal-rank-6,
.char-tier-board-seal.seal-track-cadence.seal-rank-6 {
  --seal-ink: #f0f6ff;
  --seal-line: rgba(180, 215, 255, 0.95);
  background:
    radial-gradient(circle at 25% 25%, rgba(180, 210, 255, 0.4), transparent 50%),
    linear-gradient(180deg, rgba(80, 130, 190, 0.5), rgba(8, 14, 24, 0.55));
}
.char-seal-chip.seal-track-cadence.seal-rank-4 .char-seal-chip-mark,
.char-tier-board-seal.seal-track-cadence.seal-rank-4 .char-tier-board-seal-tick,
.char-seal-chip.seal-track-cadence.seal-rank-5 .char-seal-chip-mark,
.seal-track-cadence.seal-rank-5 .char-tier-board-seal-tick,
.char-seal-chip.seal-track-cadence.seal-rank-6 .char-seal-chip-mark,
.char-tier-board-seal.seal-track-cadence.seal-rank-6 .char-tier-board-seal-tick {
  width: 0.5rem;
  height: 0.5rem;
  box-shadow:
    inset 0 0 0 2px #dceaff,
    0 0 0 3px rgba(140, 185, 235, 0.4),
    0 0 0 6px rgba(140, 185, 235, 0.18);
}

/* —— Forge: molten ingot —— */
.char-seal-chip.seal-track-forge, .char-tier-board-seal.seal-track-forge {
  --seal-ink: #f0d2a0;
  --seal-line: rgba(200, 130, 50, 0.75);
  --seal-mark: #e09a40;
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(220, 140, 50, 0.22), transparent 40%),
    linear-gradient(90deg, rgba(160, 80, 20, 0.4), rgba(0, 0, 0, 0.45));
  box-shadow: inset 0 0 0 1px rgba(230, 160, 70, 0.22);
}
.char-seal-chip.seal-track-forge .char-seal-chip-mark,
.char-tier-board-seal.seal-track-forge .char-tier-board-seal-tick {
  width: 0.55rem;
  height: 0.28rem;
  border-radius: 1px;
  clip-path: none;
  background: linear-gradient(180deg, #ffd090, var(--seal-mark));
  box-shadow: inset 0 1px 0 rgba(255, 230, 180, 0.45);
}
.char-seal-chip.seal-track-forge.seal-rank-1, .char-tier-board-seal.seal-track-forge.seal-rank-1 {
  filter: saturate(0.7) brightness(0.9);
}
.char-seal-chip.seal-track-forge.seal-rank-3, .char-tier-board-seal.seal-track-forge.seal-rank-3 {
  --seal-ink: #ffe0b0;
  box-shadow:
    inset 0 0 0 1px rgba(240, 170, 80, 0.35),
    inset 0 0 14px rgba(200, 110, 40, 0.25);
}
.char-seal-chip.seal-track-forge.seal-rank-3 .char-seal-chip-mark,
.char-tier-board-seal.seal-track-forge.seal-rank-3 .char-tier-board-seal-tick {
  height: 0.32rem;
  background: linear-gradient(180deg, #ffe2b0, #e09a40);
}
.seal-track-forge.seal-rank-5,
.char-seal-chip.seal-track-forge.seal-rank-4,
.char-tier-board-seal.seal-track-forge.seal-rank-4,
.char-seal-chip.seal-track-forge.seal-rank-6,
.char-tier-board-seal.seal-track-forge.seal-rank-6 {
  --seal-ink: #fff0d0;
  --seal-line: rgba(255, 180, 90, 0.95);
  background:
    linear-gradient(180deg, rgba(255, 170, 70, 0.4), transparent 42%),
    linear-gradient(90deg, rgba(200, 90, 20, 0.6), rgba(20, 8, 2, 0.55));
}
.char-seal-chip.seal-track-forge.seal-rank-4 .char-seal-chip-mark,
.char-tier-board-seal.seal-track-forge.seal-rank-4 .char-tier-board-seal-tick,
.char-seal-chip.seal-track-forge.seal-rank-5 .char-seal-chip-mark,
.seal-track-forge.seal-rank-5 .char-tier-board-seal-tick,
.char-seal-chip.seal-track-forge.seal-rank-6 .char-seal-chip-mark,
.char-tier-board-seal.seal-track-forge.seal-rank-6 .char-tier-board-seal-tick {
  width: 0.62rem;
  height: 0.34rem;
  background: linear-gradient(180deg, #fff4d0, #ffb040 45%, #c07020);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.7),
    0 0 8px rgba(255, 160, 60, 0.35);
}

/* Lattice crystal palette — seal cone + plate match achievement type colors */
.char-seal-chip.seal-track-ascent,
.char-seal-chip.seal-track-ascent[class*="seal-rank-"],
.char-tier-board-seal.seal-track-ascent,
.char-tier-board-seal.seal-track-ascent[class*="seal-rank-"] {
  --seal-ink: #c5e4ff;
  --seal-line: rgba(70, 145, 240, 0.78);
  --seal-mark: #5a9cff;
  --seal-sheen: rgba(170, 215, 255, 0.72);
  --seal-fill: rgba(18, 48, 105, 0.55);
  background:
    linear-gradient(90deg, rgba(64, 148, 255, 0.35) 0 0.28rem, transparent 0.28rem),
    linear-gradient(180deg, rgba(40, 100, 190, 0.4), rgba(6, 16, 40, 0.55));
  border-color: var(--seal-line);
  color: var(--seal-ink);
}

.char-seal-chip.seal-track-edge,
.char-seal-chip.seal-track-edge[class*="seal-rank-"],
.char-tier-board-seal.seal-track-edge,
.char-tier-board-seal.seal-track-edge[class*="seal-rank-"] {
  --seal-ink: #ffd4bc;
  --seal-line: rgba(255, 120, 70, 0.78);
  --seal-mark: #ff7a3c;
  --seal-sheen: rgba(255, 190, 150, 0.7);
  --seal-fill: rgba(110, 40, 18, 0.55);
  background: linear-gradient(135deg, rgba(212, 100, 50, 0.48), rgba(40, 12, 6, 0.55));
  border-color: var(--seal-line);
  color: var(--seal-ink);
}

.char-seal-chip.seal-track-vault,
.char-seal-chip.seal-track-vault[class*="seal-rank-"],
.char-tier-board-seal.seal-track-vault,
.char-tier-board-seal.seal-track-vault[class*="seal-rank-"] {
  --seal-ink: #f3e4b0;
  --seal-line: rgba(220, 180, 70, 0.78);
  --seal-mark: #e0bc48;
  --seal-sheen: rgba(255, 230, 160, 0.65);
  --seal-fill: rgba(80, 60, 18, 0.55);
  background: linear-gradient(180deg, rgba(180, 145, 50, 0.42), rgba(28, 20, 6, 0.55));
  border-color: var(--seal-line);
  color: var(--seal-ink);
}

.char-seal-chip.seal-track-risk_desk,
.char-seal-chip.seal-track-risk_desk[class*="seal-rank-"],
.char-tier-board-seal.seal-track-risk_desk,
.char-tier-board-seal.seal-track-risk_desk[class*="seal-rank-"] {
  --seal-ink: #ffcfcf;
  --seal-line: rgba(230, 70, 80, 0.8);
  --seal-mark: #e85a62;
  --seal-sheen: rgba(255, 180, 180, 0.68);
  --seal-fill: rgba(95, 22, 30, 0.55);
  background: linear-gradient(90deg, rgba(196, 55, 65, 0.55) 0 0.36rem, rgba(28, 6, 10, 0.55) 0.36rem);
  border-color: var(--seal-line);
  color: var(--seal-ink);
}

.char-seal-chip.seal-track-signal_craft,
.char-seal-chip.seal-track-signal_craft[class*="seal-rank-"],
.char-tier-board-seal.seal-track-signal_craft,
.char-tier-board-seal.seal-track-signal_craft[class*="seal-rank-"] {
  --seal-ink: #c8f5e8;
  --seal-line: rgba(50, 200, 160, 0.78);
  --seal-mark: #3dceb0;
  --seal-sheen: rgba(160, 255, 220, 0.7);
  --seal-fill: rgba(16, 70, 55, 0.55);
  background: linear-gradient(180deg, rgba(35, 140, 115, 0.45), rgba(4, 22, 18, 0.55));
  border-color: var(--seal-line);
  color: var(--seal-ink);
}

.char-seal-chip.seal-track-cadence,
.char-seal-chip.seal-track-cadence[class*="seal-rank-"],
.char-tier-board-seal.seal-track-cadence,
.char-tier-board-seal.seal-track-cadence[class*="seal-rank-"] {
  --seal-ink: #e6d6ff;
  --seal-line: rgba(168, 110, 255, 0.78);
  --seal-mark: #b07aff;
  --seal-sheen: rgba(210, 180, 255, 0.7);
  --seal-fill: rgba(58, 28, 105, 0.55);
  background:
    radial-gradient(circle at 22% 28%, rgba(168, 110, 255, 0.32), transparent 55%),
    linear-gradient(180deg, rgba(110, 70, 190, 0.45), rgba(18, 8, 36, 0.55));
  border-color: var(--seal-line);
  color: var(--seal-ink);
}

.char-seal-chip.seal-track-forge,
.char-seal-chip.seal-track-forge[class*="seal-rank-"],
.char-tier-board-seal.seal-track-forge,
.char-tier-board-seal.seal-track-forge[class*="seal-rank-"] {
  --seal-ink: #ffd9b0;
  --seal-line: rgba(240, 140, 50, 0.8);
  --seal-mark: #f08a28;
  --seal-sheen: rgba(255, 200, 130, 0.7);
  --seal-fill: rgba(95, 45, 12, 0.55);
  background:
    linear-gradient(180deg, rgba(240, 140, 50, 0.28), transparent 42%),
    linear-gradient(90deg, rgba(180, 90, 25, 0.5), rgba(24, 10, 4, 0.55));
  border-color: var(--seal-line);
  color: var(--seal-ink);
}

.char-seal-chip.seal-track-scriptorium,
.char-seal-chip.seal-track-scriptorium[class*="seal-rank-"],
.char-tier-board-seal.seal-track-scriptorium,
.char-tier-board-seal.seal-track-scriptorium[class*="seal-rank-"] {
  --seal-ink: #d8eef4;
  --seal-line: rgba(90, 170, 190, 0.8);
  --seal-mark: #5aacc0;
  --seal-sheen: rgba(170, 220, 230, 0.7);
  --seal-fill: rgba(28, 62, 78, 0.55);
  background:
    linear-gradient(180deg, rgba(90, 170, 190, 0.28), transparent 42%),
    linear-gradient(135deg, rgba(48, 110, 130, 0.48), rgba(12, 28, 36, 0.55));
  border-color: var(--seal-line);
  color: var(--seal-ink);
}

.char-seal-chip.seal-track-ascent .char-seal-cone,
.char-tier-board-seal.seal-track-ascent .char-seal-cone { color: #5a9cff; }
.char-seal-chip.seal-track-edge .char-seal-cone,
.char-tier-board-seal.seal-track-edge .char-seal-cone { color: #ff7a3c; }
.char-seal-chip.seal-track-vault .char-seal-cone,
.char-tier-board-seal.seal-track-vault .char-seal-cone { color: #e0bc48; }
.char-seal-chip.seal-track-risk_desk .char-seal-cone,
.char-tier-board-seal.seal-track-risk_desk .char-seal-cone { color: #e85a62; }
.char-seal-chip.seal-track-signal_craft .char-seal-cone,
.char-tier-board-seal.seal-track-signal_craft .char-seal-cone { color: #3dceb0; }
.char-seal-chip.seal-track-cadence .char-seal-cone,
.char-tier-board-seal.seal-track-cadence .char-seal-cone { color: #b07aff; }
.char-seal-chip.seal-track-forge .char-seal-cone,
.char-tier-board-seal.seal-track-forge .char-seal-cone { color: #f08a28; }
.char-seal-chip.seal-track-scriptorium .char-seal-cone,
.char-tier-board-seal.seal-track-scriptorium .char-seal-cone { color: #5aacc0; }

@media (prefers-reduced-motion: reduce) {
  .char-seal-chip.is-on,
  .char-tier-board-seal[class*="seal-track-"]:not(.seal-track-none),
  .char-seal-chip.is-on::after,
  .char-tier-board-seal[class*="seal-track-"]:not(.seal-track-none)::after,
  .char-seal-chip.seal-rank-5,
  .char-seal-chip.seal-rank-6,
  .char-tier-board-seal.seal-rank-5,
  .char-tier-board-seal.seal-rank-6 {
    animation: none !important;
  }
}

/* Achievements tree seals — layout only; track silhouettes come from seal-track rules */
.ach-board .ach-seal-tile-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .ach-board .ach-seal-tile.char-tier-board-seal,
  .ach-board button.ach-seal-tile.char-tier-board-seal {
    min-width: 9.5rem;
    max-width: 12rem;
    font-size: 0.58rem;
    letter-spacing: 0.06em;
  }
}

/* Incomplete tree seals — mute without flattening designed plates */
.ach-board .ach-tree-item.is-progress > .ach-tree-node > .ach-seal-tile {
  opacity: 0.7 !important;
  filter: saturate(0.45) brightness(0.78) !important;
  animation: none !important;
}

.ach-board .ach-tree-item.is-progress.is-next > .ach-tree-node > .ach-seal-tile {
  opacity: 0.88 !important;
  filter: saturate(0.65) brightness(0.88) !important;
}

.ach-board .ach-tree-item.is-locked > .ach-tree-node > .ach-seal-tile {
  opacity: 0.34 !important;
  filter: grayscale(0.9) saturate(0.15) brightness(0.65) !important;
  animation: none !important;
}

.ach-board .ach-tree-item.is-unlocked > .ach-tree-node > .ach-seal-tile {
  opacity: 1 !important;
  filter: none !important;
}

.ach-board .ach-tree-item.is-unlocked > .ach-tree-node > .ach-seal-tile::after {
  display: none;
}

.ach-board .ach-tree-item:not(.is-unlocked) > .ach-tree-node > .ach-seal-tile::after {
  display: none !important;
  animation: none !important;
}

/* Achievement plates: track tint + harder glow */
.ach-node-plate.seal-track-ascent {
  border-color: rgba(201, 165, 116, 0.4);
  background:
    linear-gradient(180deg, rgba(201, 165, 116, 0.1), transparent 45%),
    rgba(8, 8, 10, 0.85);
}
.ach-node-plate.seal-track-edge {
  border-color: rgba(140, 175, 210, 0.4);
  background:
    linear-gradient(180deg, rgba(90, 130, 170, 0.12), transparent 45%),
    rgba(8, 8, 10, 0.85);
}
.ach-node-plate.seal-track-vault {
  border-color: rgba(180, 120, 70, 0.4);
  background:
    linear-gradient(180deg, rgba(140, 90, 45, 0.12), transparent 45%),
    rgba(8, 8, 10, 0.85);
}
.ach-node-plate.seal-track-risk_desk {
  border-color: rgba(190, 90, 85, 0.4);
  background:
    linear-gradient(180deg, rgba(170, 55, 50, 0.12), transparent 45%),
    rgba(8, 8, 10, 0.85);
}
.ach-node-plate.seal-track-signal_craft {
  border-color: rgba(70, 180, 150, 0.4);
  background:
    linear-gradient(180deg, rgba(40, 130, 110, 0.12), transparent 45%),
    rgba(8, 8, 10, 0.85);
}
.ach-node-plate.seal-track-cadence {
  border-color: rgba(110, 155, 210, 0.4);
  background:
    linear-gradient(180deg, rgba(60, 100, 150, 0.12), transparent 45%),
    rgba(8, 8, 10, 0.85);
}
.ach-node-plate.seal-track-forge {
  border-color: rgba(200, 130, 50, 0.4);
  background:
    linear-gradient(180deg, rgba(180, 100, 30, 0.12), transparent 45%),
    rgba(8, 8, 10, 0.85);
}
.ach-node-plate.seal-track-scriptorium {
  border-color: rgba(90, 170, 190, 0.42);
  background:
    linear-gradient(180deg, rgba(60, 130, 150, 0.14), transparent 45%),
    rgba(8, 8, 10, 0.85);
}

.ach-node-plate.seal-rank-4,
.ach-node-plate.seal-rank-5,
.ach-node-plate.seal-rank-6 {
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.05);
}
.ach-node-plate.seal-track-ascent.seal-rank-4,
.ach-node-plate.seal-track-ascent.seal-rank-5,
.ach-node-plate.seal-track-ascent.seal-rank-6 {
  border-color: rgba(255, 220, 140, 0.65);
  box-shadow: 0 0 18px rgba(201, 165, 116, 0.2);
}
.ach-node-plate.seal-track-edge.seal-rank-4,
.ach-node-plate.seal-track-edge.seal-rank-5,
.ach-node-plate.seal-track-edge.seal-rank-6 {
  border-color: rgba(170, 210, 240, 0.65);
  box-shadow: 0 0 18px rgba(100, 160, 210, 0.2);
}
.ach-node-plate.seal-track-vault.seal-rank-4,
.ach-node-plate.seal-track-vault.seal-rank-5,
.ach-node-plate.seal-track-vault.seal-rank-6 {
  border-color: rgba(210, 150, 90, 0.65);
  box-shadow: 0 0 18px rgba(180, 110, 50, 0.2);
}
.ach-node-plate.seal-track-risk_desk.seal-rank-4,
.ach-node-plate.seal-track-risk_desk.seal-rank-5,
.ach-node-plate.seal-track-risk_desk.seal-rank-6 {
  border-color: rgba(220, 110, 100, 0.65);
  box-shadow: 0 0 18px rgba(190, 60, 50, 0.2);
}
.ach-node-plate.seal-track-signal_craft.seal-rank-4,
.ach-node-plate.seal-track-signal_craft.seal-rank-5,
.ach-node-plate.seal-track-signal_craft.seal-rank-6 {
  border-color: rgba(90, 210, 175, 0.65);
  box-shadow: 0 0 18px rgba(70, 180, 150, 0.2);
}

.char-hero-kicker {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(232, 239, 233, 0.5);
  margin-bottom: 0.15rem;
}

.char-hero-level {
  margin: 0;
  min-width: 4.5rem;
}

.char-hero-level strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 3.35rem);
  font-weight: 700;
  color: var(--accent-hot);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-shadow: 0 0 24px rgba(201, 165, 116, 0.35);
}

.char-hero-runs {
  margin: 0;
}

.char-hero-runs strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--accent-hot);
  line-height: 1.1;
  min-width: 1.1ch;
}

/* Compact ban tags: right of Runs, above Seal — do not resize the card. */
.char-hero-ban-tags {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.18rem;
  margin: 0;
  padding: 0;
  align-self: center;
  max-width: 6.5rem;
  flex: 0 0 auto;
}

.char-id-ban-tag {
  display: inline-block;
  margin: 0;
  padding: 0.1rem 0.34rem;
  border-radius: 2px;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.15;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.char-id-ban-tag.is-login {
  color: #ffe4de;
  background: rgba(168, 36, 28, 0.72);
  border: 1px solid rgba(255, 110, 88, 0.85);
  box-shadow: 0 0 0 1px rgba(255, 80, 60, 0.18);
}

.char-id-ban-tag.is-booking {
  color: #fff0d4;
  background: rgba(148, 78, 12, 0.7);
  border: 1px solid rgba(232, 156, 58, 0.85);
  box-shadow: 0 0 0 1px rgba(232, 156, 58, 0.16);
}

.char-hero-tier-block {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1rem;
}

.char-hero-tier-seal {
  margin: 0;
  min-width: 0;
}

.char-hero-tier {
  margin: 0;
}

.char-hero-tier strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: rgba(243, 223, 154, 0.92);
  line-height: 1.1;
}

.char-hero-district {
  margin: 0;
}

.char-hero-district strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--accent-hot);
  line-height: 1.1;
  min-width: 1.1ch;
}

/* Distinct magnetic pull — monochrome plate (silver / ink) */
.char-rank-btn {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8.25rem;
  align-items: center;
  gap: 0.55rem 0.65rem;
  width: 100%;
  margin: 0;
  padding: 0.65rem 0.7rem 0.7rem 0.8rem;
  text-align: left;
  cursor: pointer;
  color: #d8dce2;
  border: 1px solid rgba(170, 178, 188, 0.42);
  border-radius: 3px;
  background:
    linear-gradient(135deg, rgba(28, 30, 34, 0.96) 0%, rgba(10, 11, 13, 0.98) 52%, rgba(22, 24, 28, 0.94) 100%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(230, 235, 240, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4);
  overflow: hidden;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, filter 0.16s ease, background 0.16s ease;
}

.char-rank-btn-glow {
  position: absolute;
  inset: -40% -20%;
  background: linear-gradient(
    110deg,
    transparent 40%,
    rgba(220, 228, 236, 0.06) 50%,
    transparent 60%
  );
  transform: translateX(-60%);
  animation: char-rank-sheen 6.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
}

.char-rank-btn > *:not(.char-rank-btn-glow) {
  position: relative;
  z-index: 1;
}

.char-rank-btn-main {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.char-rank-btn-kicker {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(168, 176, 186, 0.72);
  opacity: 1;
}

.char-rank-btn-title {
  font-family: var(--font-herald);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #eef1f5;
}

.char-rank-btn-tier {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.45rem;
  margin-top: 0.2rem;
}

.char-rank-btn-tier-kicker {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.65;
}

.char-rank-btn-tier strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
}

.char-rank-btn-mark {
  display: grid;
  justify-items: end;
  align-content: center;
  gap: 0.1rem;
  width: 100%;
  min-width: 0;
  max-width: none;
  padding-left: 0.55rem;
  border-left: 1px solid rgba(170, 178, 188, 0.28);
  box-sizing: border-box;
}

.char-rank-btn-mark-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.28rem;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(160, 168, 178, 0.7);
  opacity: 1;
  text-align: right;
  line-height: 1.2;
  white-space: normal;
  max-width: 100%;
}

/* LIVE — red recording pulse on Progress board + mode tab */
.char-rank-btn--weekly {
  align-items: start;
  border-color: rgba(210, 70, 70, 0.42);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 120, 120, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 0 18px rgba(180, 40, 40, 0.12);
}

.char-rank-btn--weekly .char-rank-btn-mark {
  align-content: start;
  gap: 0.18rem;
}

.char-rank-btn-live {
  display: inline-flex;
  align-items: center;
  align-self: end;
  gap: 0.22rem;
  margin: 0;
  padding: 0.1rem 0.3rem 0.1rem 0.22rem;
  border: 1px solid rgba(230, 80, 80, 0.55);
  border-radius: 2px;
  background: rgba(42, 10, 12, 0.82);
  color: #ffc0c0;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.2;
  box-shadow:
    0 0 10px rgba(220, 50, 50, 0.22),
    inset 0 0 0 1px rgba(255, 100, 100, 0.08);
}

.char-rank-btn-live i {
  display: block;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: #ff3b3b;
  box-shadow:
    0 0 0 1px rgba(255, 80, 80, 0.35),
    0 0 8px rgba(255, 50, 50, 0.85);
  animation: char-rank-mode-live-pulse 2.4s ease-in-out infinite;
}

.char-rank-btn-mark strong,
.char-rank-btn-rank {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.28rem;
  margin: 0.08rem 0 0;
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: #f2f4f7;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.55),
    0 0 18px rgba(200, 210, 220, 0.12);
}

.char-rank-btn-rank-label {
  font-family: var(--font-herald);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(176, 184, 194, 0.72);
  text-shadow: none;
  transform: translateY(-0.18em);
}

.char-rank-btn-rank-n {
  position: relative;
  display: inline-block;
  font-size: 2.15rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: #ffffff;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.6),
    0 0 22px rgba(210, 220, 230, 0.2);
  transition: color 0.16s ease, text-shadow 0.16s ease, transform 0.16s ease;
}

.char-rank-btn-rank-n::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -0.12rem;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(210, 218, 228, 0.7),
    transparent
  );
  opacity: 0.85;
}

.char-rank-btn-mark strong.is-dash,
.char-rank-btn-rank.is-dash {
  opacity: 0.55;
  font-weight: 600;
  text-shadow: none;
}

.char-rank-btn-rank.is-dash .char-rank-btn-rank-n {
  color: rgba(180, 186, 194, 0.55);
  text-shadow: none;
}

.char-rank-btn-rank.is-dash .char-rank-btn-rank-n::after {
  opacity: 0.35;
}

.char-rank-btn:hover .char-rank-btn-rank-n,
.char-rank-btn:focus-visible .char-rank-btn-rank-n {
  color: #ffffff;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.55),
    0 0 28px rgba(220, 228, 238, 0.28);
  transform: translateY(-1px);
}

.char-rank-btn:hover .char-rank-btn-rank-n::after,
.char-rank-btn:focus-visible .char-rank-btn-rank-n::after {
  opacity: 1;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(230, 236, 244, 0.88),
    transparent
  );
}

/* GOAT — brand gold rim + gold-washed interior (Portal/BRAND_GOLD.md) */
.char-rank-btn--goat {
  color: #e2c899;
  border-color: rgba(201, 165, 116, 0.55);
  background:
    linear-gradient(
      135deg,
      rgba(42, 32, 18, 0.97) 0%,
      rgba(14, 12, 10, 0.98) 48%,
      rgba(32, 24, 14, 0.95) 100%
    );
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(226, 200, 153, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42),
    0 0 18px rgba(168, 134, 92, 0.16);
}

.char-rank-btn--goat .char-rank-btn-mark {
  border-left-color: rgba(201, 165, 116, 0.36);
}

.char-rank-btn--goat .char-rank-btn-kicker,
.char-rank-btn--goat .char-rank-btn-mark-kicker {
  color: rgba(201, 165, 116, 0.78);
  opacity: 1;
}

.char-rank-btn--goat .char-rank-btn-title {
  /* Match rim / brand accent-hot — not a brighter pale gold */
  color: #c9a574;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.55),
    0 0 16px rgba(168, 134, 92, 0.28);
}

.char-rank-btn--goat .char-rank-btn-rank {
  color: #e2c899;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.55),
    0 0 18px rgba(201, 165, 116, 0.18);
}

.char-rank-btn--goat .char-rank-btn-rank-label {
  color: rgba(201, 165, 116, 0.72);
}

.char-rank-btn--goat .char-rank-btn-rank-n {
  color: #f0e0b8;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.6),
    0 0 22px rgba(201, 165, 116, 0.28);
}

.char-rank-btn--goat .char-rank-btn-rank-n::after {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(201, 165, 116, 0.78),
    transparent
  );
}

.char-rank-btn--goat .char-rank-btn-rank.is-dash .char-rank-btn-rank-n {
  color: rgba(168, 134, 92, 0.48);
}

.char-rank-btn--goat:hover .char-rank-btn-rank-n,
.char-rank-btn--goat:focus-visible .char-rank-btn-rank-n {
  color: #f5e6c4;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.55),
    0 0 28px rgba(226, 200, 153, 0.36);
}

.char-rank-btn--goat .char-rank-btn-glow {
  background: linear-gradient(
    110deg,
    transparent 40%,
    rgba(226, 200, 153, 0.1) 50%,
    transparent 60%
  );
}

.char-rank-btn--goat:hover,
.char-rank-btn--goat:focus-visible {
  border-color: rgba(226, 200, 153, 0.78);
  filter: brightness(1.06);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 6px 18px rgba(90, 60, 20, 0.32),
    inset 0 1px 0 rgba(226, 200, 153, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 0 22px rgba(201, 165, 116, 0.28);
}

.char-rank-btn:hover,
.char-rank-btn:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.06);
  border-color: rgba(200, 208, 218, 0.72);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 6px 18px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(230, 236, 244, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  outline: none;
}

.char-rank-btn--weekly:hover,
.char-rank-btn--weekly:focus-visible {
  border-color: rgba(240, 100, 100, 0.7);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 6px 18px rgba(160, 30, 30, 0.28),
    inset 0 1px 0 rgba(255, 140, 140, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 0 22px rgba(200, 50, 50, 0.2);
}

.char-rank-btn:active {
  transform: translateY(0);
  filter: brightness(1.02);
}

.char-rank-btn.is-opened {
  border-color: rgba(210, 218, 228, 0.78);
}

.char-rank-btn--weekly.is-opened {
  border-color: rgba(240, 110, 110, 0.72);
}

.char-rank-btn--goat.is-opened {
  border-color: rgba(226, 200, 153, 0.82);
}

@keyframes char-rank-sheen {
  0%,
  55% {
    transform: translateX(-70%);
  }
  80%,
  100% {
    transform: translateX(70%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .char-rank-btn,
  .char-rank-btn-glow {
    animation: none;
  }
}

.char-tier-board {
  border: none;
  padding: 0;
  background: transparent;
  /* Fill the viewport; only 2rem remaining on every side */
  position: fixed;
  inset: 2rem;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  color: rgba(220, 224, 220, 0.92);
  box-sizing: border-box;
}

.char-tier-board::backdrop {
  background: rgba(4, 5, 4, 0.88);
  backdrop-filter: blur(6px);
}

.char-tier-board-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  padding: 1.35rem 1.5rem 1.4rem;
  border: 1px solid rgba(160, 168, 160, 0.28);
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 22%),
    linear-gradient(145deg, rgba(18, 20, 18, 0.98), rgba(8, 9, 8, 0.99));
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 24px 64px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
  box-sizing: border-box;
}

.char-tier-board-tick {
  position: absolute;
  width: 1.1rem;
  height: 1.1rem;
  border-color: rgba(180, 186, 178, 0.55);
  border-style: solid;
  pointer-events: none;
  z-index: 2;
}
.char-tier-board-tick--tl {
  top: 0.45rem;
  left: 0.45rem;
  border-width: 2px 0 0 2px;
}
.char-tier-board-tick--tr {
  top: 0.45rem;
  right: 0.45rem;
  border-width: 2px 2px 0 0;
}
.char-tier-board-tick--bl {
  bottom: 0.45rem;
  left: 0.45rem;
  border-width: 0 0 2px 2px;
}
.char-tier-board-tick--br {
  bottom: 0.45rem;
  right: 0.45rem;
  border-width: 0 2px 2px 0;
}

.char-tier-board-scan {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(255, 255, 255, 0.012) 3px,
    rgba(255, 255, 255, 0.012) 4px
  );
  z-index: 0;
}

.char-tier-board-head,
.char-tier-board-split,
.char-tier-board-frame,
.char-tier-board-list,
.char-tier-board-empty,
.char-tier-tree {
  position: relative;
  z-index: 1;
}

.char-tier-board-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  flex: 0 0 auto;
  margin-bottom: 0.85rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(160, 168, 160, 0.18);
}

.char-tier-board-head-copy {
  position: relative;
  min-width: 0;
  padding: 0.15rem 0 0.2rem 0.85rem;
}

.char-tier-board-head-copy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1rem;
  bottom: 0.1rem;
  width: 2px;
  border-radius: 1px;
  background: linear-gradient(
    180deg,
    rgba(122, 215, 255, 0.95),
    rgba(184, 166, 255, 0.8),
    rgba(125, 255, 200, 0.75)
  );
  box-shadow: 0 0 10px rgba(140, 200, 255, 0.35);
}

.char-tier-board-kicker {
  margin: 0 0 0.28rem;
  font-family: var(--font-herald);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(170, 190, 210, 0.78);
  text-shadow: 0 0 12px rgba(140, 190, 255, 0.18);
}

.char-tier-board-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.5vw, 2.1rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.05;
  color: #eef4ff;
  text-shadow:
    0 0 18px rgba(140, 200, 255, 0.28),
    0 1px 0 rgba(0, 0, 0, 0.35);
}

.char-rank-mode-bar {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  margin: 0 0 0.95rem;
  padding: 0.35rem;
  border: 1px solid rgba(140, 150, 160, 0.18);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(18, 20, 22, 0.75), rgba(8, 9, 10, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.char-rank-mode-btn {
  --mode-ink: rgba(220, 224, 230, 0.92);
  --mode-line: rgba(160, 168, 178, 0.38);
  --mode-glow: rgba(200, 208, 218, 0.05);
  --mode-fill: rgba(8, 9, 11, 0.92);
  --mode-spine-a: rgba(210, 216, 224, 0.72);
  --mode-spine-b: rgba(170, 178, 188, 0.55);
  --mode-spine-c: rgba(130, 138, 148, 0.5);
  --mode-pulse: rgba(210, 216, 224, 0.78);
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0;
  padding: 0.62rem 0.75rem 0.72rem 0.65rem;
  border: 1px solid var(--mode-line);
  border-radius: 3px;
  background:
    linear-gradient(105deg, color-mix(in srgb, var(--mode-glow) 55%, transparent), transparent 48%),
    linear-gradient(180deg, rgba(16, 17, 19, 0.72), var(--mode-fill));
  box-shadow:
    inset 0 1px 0 rgba(230, 235, 240, 0.05),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35);
  color: var(--mode-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease, transform 0.14s ease, opacity 0.14s ease;
}

.char-rank-mode-btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--mode-spine-a), var(--mode-spine-b), var(--mode-spine-c));
  opacity: 0.42;
  z-index: 0;
}

.char-rank-mode-btn::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--mode-pulse) 80%, transparent),
    transparent
  );
  opacity: 0;
  transform: scaleX(0.55);
  transition: opacity 0.16s ease, transform 0.16s ease;
  z-index: 1;
  pointer-events: none;
}

.char-rank-mode-gems,
.char-rank-mode-copy,
.char-rank-mode-pulse,
.char-rank-mode-live {
  position: relative;
  z-index: 1;
}

.char-rank-mode-gems {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex: 0 0 auto;
  min-height: 0.95rem;
}

.char-rank-mode-gem {
  display: block;
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 1px;
  transform: rotate(45deg);
  box-shadow: none;
  opacity: 0.7;
  animation: char-rank-gem-dance 2.8s ease-in-out infinite;
  will-change: transform, opacity;
}

.char-rank-mode-gem:nth-child(1) {
  animation-delay: 0s;
}

.char-rank-mode-gem:nth-child(2) {
  animation-delay: 0.35s;
}

.char-rank-mode-gem:nth-child(3) {
  animation-delay: 0.7s;
}

.char-rank-mode-gem.is-1,
.char-rank-mode-gem.is-2,
.char-rank-mode-gem.is-3,
.char-rank-mode-gem.is-a,
.char-rank-mode-gem.is-b,
.char-rank-mode-gem.is-c {
  color: rgba(190, 196, 204, 0.72);
  background: linear-gradient(135deg, rgba(200, 206, 214, 0.72), rgba(140, 148, 158, 0.58));
  box-shadow: none;
}

.char-rank-mode-gem.is-2,
.char-rank-mode-gem.is-b {
  color: rgba(170, 176, 186, 0.7);
  background: linear-gradient(135deg, rgba(175, 182, 192, 0.7), rgba(125, 132, 142, 0.56));
}

.char-rank-mode-gem.is-3,
.char-rank-mode-gem.is-c {
  color: rgba(150, 156, 166, 0.72);
  background: linear-gradient(135deg, rgba(155, 162, 172, 0.7), rgba(110, 116, 126, 0.56));
}

@keyframes char-rank-gem-dance {
  0%,
  100% {
    transform: rotate(45deg) translateY(0.02rem) scale(0.98);
    opacity: 0.55;
  }
  50% {
    transform: rotate(45deg) translateY(-0.04rem) scale(1.01);
    opacity: 0.82;
  }
}

.char-rank-mode-copy {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
  flex: 1 1 auto;
}

.char-rank-mode-kicker {
  font-family: var(--font-herald);
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--mode-ink) 68%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.char-rank-mode-btn strong {
  margin: 0;
  font-family: var(--font-herald);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: inherit;
  line-height: 1.15;
}

.char-rank-mode-pulse {
  flex: 0 0 auto;
  width: 0.32rem;
  height: 0.32rem;
  margin-left: auto;
  border-radius: 50%;
  background: var(--mode-pulse);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--mode-pulse) 12%, transparent);
  opacity: 0.28;
}

.char-rank-mode-live {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  flex: 0 0 auto;
  margin-left: auto;
  padding: 0.2rem 0.4rem 0.2rem 0.32rem;
  border: 1px solid rgba(230, 80, 80, 0.55);
  border-radius: 2px;
  background: rgba(42, 10, 12, 0.82);
  box-shadow:
    0 0 10px rgba(220, 50, 50, 0.2),
    inset 0 0 0 1px rgba(255, 100, 100, 0.08);
  font-family: var(--font-herald);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffc0c0;
  text-shadow: none;
}

.char-rank-mode-live-dot {
  display: block;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: #ff3b3b;
  box-shadow:
    0 0 0 1px rgba(255, 80, 80, 0.35),
    0 0 8px rgba(255, 50, 50, 0.85);
  animation: char-rank-mode-live-pulse 2.2s ease-in-out infinite;
}

.char-rank-mode-btn--weekly.is-on .char-rank-mode-live {
  border-color: rgba(255, 100, 100, 0.7);
  background: rgba(52, 12, 14, 0.9);
  box-shadow:
    0 0 14px rgba(230, 55, 55, 0.28),
    inset 0 0 0 1px rgba(255, 120, 120, 0.12);
  color: #ffd0d0;
}

.char-rank-mode-btn--weekly,
.char-rank-mode-btn--goat {
  --mode-ink: rgba(220, 224, 230, 0.92);
  --mode-line: rgba(160, 168, 178, 0.38);
  --mode-glow: rgba(200, 208, 218, 0.05);
  --mode-fill: rgba(8, 9, 11, 0.92);
  --mode-spine-a: rgba(210, 216, 224, 0.72);
  --mode-spine-b: rgba(170, 178, 188, 0.55);
  --mode-spine-c: rgba(130, 138, 148, 0.5);
  --mode-pulse: rgba(210, 216, 224, 0.78);
}

/* GOAT tab — same brand gold family as .char-rank-btn--goat (outside) */
.char-rank-mode-btn--goat {
  --mode-ink: #e2c899;
  --mode-line: rgba(201, 165, 116, 0.55);
  --mode-glow: rgba(201, 165, 116, 0.12);
  --mode-fill: rgba(14, 12, 10, 0.96);
  --mode-spine-a: rgba(226, 200, 153, 0.88);
  --mode-spine-b: rgba(201, 165, 116, 0.7);
  --mode-spine-c: rgba(168, 134, 92, 0.55);
  --mode-pulse: rgba(201, 165, 116, 0.85);
}

.char-rank-mode-btn--goat .char-rank-mode-gem.is-a,
.char-rank-mode-btn--goat .char-rank-mode-gem.is-b,
.char-rank-mode-btn--goat .char-rank-mode-gem.is-c {
  color: rgba(201, 165, 116, 0.85);
  background: linear-gradient(135deg, rgba(226, 200, 153, 0.88), rgba(168, 134, 92, 0.65));
  box-shadow: 0 0 6px rgba(201, 165, 116, 0.22);
}

.char-rank-mode-btn--goat .char-rank-mode-gem.is-b {
  background: linear-gradient(135deg, rgba(201, 165, 116, 0.82), rgba(140, 110, 70, 0.62));
}

.char-rank-mode-btn--goat .char-rank-mode-gem.is-c {
  background: linear-gradient(135deg, rgba(184, 150, 100, 0.78), rgba(120, 92, 55, 0.58));
}

.char-rank-mode-btn--goat:not(.is-on) {
  border-color: rgba(168, 134, 92, 0.28);
  background:
    linear-gradient(180deg, rgba(28, 22, 14, 0.55), rgba(10, 9, 8, 0.82));
}

.char-rank-mode-btn--goat:not(.is-on):hover,
.char-rank-mode-btn--goat:not(.is-on):focus-visible {
  border-color: rgba(201, 165, 116, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(226, 200, 153, 0.1),
    0 4px 12px rgba(60, 40, 15, 0.32);
}

.char-rank-mode-btn--goat.is-on {
  border-color: rgba(226, 200, 153, 0.72);
  background:
    linear-gradient(105deg, rgba(201, 165, 116, 0.14), transparent 52%),
    linear-gradient(
      135deg,
      rgba(42, 32, 18, 0.97) 0%,
      rgba(14, 12, 10, 0.98) 48%,
      rgba(32, 24, 14, 0.95) 100%
    );
  box-shadow:
    inset 0 0 0 1px rgba(226, 200, 153, 0.16),
    inset 0 1px 0 rgba(226, 200, 153, 0.14),
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 0 18px rgba(168, 134, 92, 0.2),
    0 6px 16px rgba(40, 28, 10, 0.35);
}

.char-rank-mode-btn--goat.is-on strong {
  color: #c9a574;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.55),
    0 0 14px rgba(168, 134, 92, 0.28);
}

.char-rank-mode-btn--goat.is-on .char-rank-mode-kicker {
  color: rgba(201, 165, 116, 0.78);
}

/* Idle = available but not chosen */
.char-rank-mode-btn:not(.is-on) {
  opacity: 0.58;
  filter: none;
  border-color: rgba(120, 128, 138, 0.22);
  background:
    linear-gradient(180deg, rgba(14, 15, 16, 0.55), rgba(8, 9, 10, 0.78));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.char-rank-mode-btn:not(.is-on)::before {
  opacity: 0.2;
}

.char-rank-mode-btn:not(.is-on) .char-rank-mode-gem {
  opacity: 0.4;
  animation: none;
}

.char-rank-mode-btn:not(.is-on) .char-rank-mode-live,
.char-rank-mode-btn:not(.is-on) .char-rank-mode-pulse {
  opacity: 0.45;
}

.char-rank-mode-btn:not(.is-on):hover,
.char-rank-mode-btn:not(.is-on):focus-visible {
  opacity: 0.88;
  filter: brightness(1.06);
  transform: translateY(-1px);
  border-color: rgba(190, 198, 208, 0.48);
  box-shadow:
    inset 0 1px 0 rgba(230, 235, 240, 0.06),
    0 4px 12px rgba(0, 0, 0, 0.28);
  outline: none;
}

.char-rank-mode-btn:not(.is-on):hover::before,
.char-rank-mode-btn:not(.is-on):focus-visible::before {
  opacity: 0.45;
}

.char-rank-mode-btn.is-on {
  opacity: 1;
  filter: none;
  z-index: 1;
  border-color: rgba(210, 216, 224, 0.72);
  background:
    linear-gradient(105deg, rgba(200, 208, 218, 0.1), transparent 52%),
    linear-gradient(180deg, rgba(22, 24, 28, 0.95), rgba(8, 9, 11, 0.96));
  box-shadow:
    inset 0 0 0 1px rgba(220, 226, 234, 0.14),
    inset 0 1px 0 rgba(240, 245, 250, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 6px 16px rgba(0, 0, 0, 0.28);
}

.char-rank-mode-btn.is-on::before {
  opacity: 0.92;
  width: 3px;
}

.char-rank-mode-btn.is-on::after {
  opacity: 1;
  transform: scaleX(1);
}

.char-rank-mode-btn.is-on .char-rank-mode-gem {
  opacity: 0.95;
}

.char-rank-mode-btn.is-on .char-rank-mode-pulse {
  display: none;
}

.char-rank-mode-btn.is-on strong {
  color: #f2f4f7;
  text-shadow: 0 0 14px rgba(220, 228, 236, 0.16);
}

.char-rank-mode-btn.is-on:hover,
.char-rank-mode-btn.is-on:focus-visible {
  filter: brightness(1.03);
  transform: none;
  outline: none;
}

@keyframes char-rank-mode-pulse {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.95);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

@keyframes char-rank-mode-live-pulse {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(0.94);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .char-rank-mode-gem,
  .char-rank-mode-btn.is-on .char-rank-mode-pulse,
  .char-rank-mode-live-dot {
    animation: none;
  }
}

@media (max-width: 720px) {
  .char-rank-mode-bar {
    grid-template-columns: 1fr;
  }
}

.char-rank-mode-panel {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1 1 auto;
}

.char-rank-mode-panel[hidden],
.char-rank-mode-panel:not(.is-on) {
  display: none !important;
}

.char-rank-mode-panel > .char-tier-board-frame:not(.char-tier-board-me) {
  flex: 1 1 auto;
}

.char-tier-board-frame.char-tier-board-me {
  flex: 0 0 auto;
  flex-grow: 0;
  flex-shrink: 0;
  min-height: min-content;
  height: auto;
  overflow: visible;
}

.char-tier-board-frame.char-tier-board-me .char-tier-board-list,
.char-tier-board-frame.char-tier-board-me .char-tier-board-me-list {
  flex: 0 0 auto;
  flex-grow: 0;
  flex-shrink: 0;
  min-height: min-content;
  height: auto;
  overflow: visible;
  padding-top: 0.25rem;
  padding-bottom: 0.35rem;
}

.char-tier-board-frame.char-tier-board-me .char-tier-board-entry {
  min-height: 5.75rem;
  align-items: stretch;
}

.char-tier-board-entry.is-unranked .char-tier-board-place {
  border-color: rgba(120, 126, 120, 0.28);
  background: rgba(0, 0, 0, 0.32);
  box-shadow: none;
  filter: none;
}

.char-tier-board-entry.is-unranked .char-tier-board-place-n {
  color: rgba(180, 186, 178, 0.55);
  text-shadow: none;
  font-size: 1.25rem;
}

.char-tier-board-entry.is-unranked .char-tier-board-place-label {
  color: rgba(160, 166, 158, 0.5);
}

.char-tier-board-empty--weekly {
  display: grid;
  gap: 0.45rem;
}

.char-tier-board-empty--weekly span {
  display: block;
  font-size: 0.82rem;
  opacity: 0.78;
}

.char-tier-board-lede {
  margin: 0.45rem 0 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: rgba(200, 206, 200, 0.62);
  max-width: 40rem;
}

.char-tier-board-mark {
  color: rgba(220, 224, 218, 0.9);
  font-family: var(--font-display);
}

.char-tier-board-x {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.45rem 0.85rem;
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(210, 214, 208, 0.85);
  border: 1px solid rgba(160, 168, 160, 0.35);
  border-radius: 1px;
  background: rgba(0, 0, 0, 0.35);
}

.char-tier-board-x:hover,
.char-tier-board-x:focus-visible {
  border-color: rgba(200, 206, 198, 0.55);
  background: rgba(255, 255, 255, 0.05);
  outline: none;
}

.char-tier-board-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12.5rem, 16.5rem);
  gap: 0.85rem 1.15rem;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
}

.char-tier-board-main {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
  min-height: 0;
}

.char-tier-board-frame {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  padding: 0.55rem 0.5rem 0.6rem;
  border: 1px solid rgba(130, 210, 230, 0.42);
  border-radius: 2px;
  background:
    linear-gradient(
      165deg,
      rgba(90, 190, 220, 0.12) 0%,
      rgba(18, 36, 48, 0.28) 38%,
      rgba(6, 12, 16, 0.22) 100%
    );
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(160, 230, 245, 0.18),
    0 0 32px rgba(50, 170, 210, 0.22),
    inset 0 0 48px rgba(40, 140, 180, 0.1);
  overflow: hidden;
}

.char-tier-board-frame::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0.35rem;
  border: 1px solid rgba(140, 210, 230, 0.22);
  border-radius: 1px;
  z-index: 1;
}

.char-tier-board-frame-glow {
  pointer-events: none;
  position: absolute;
  inset: -20% -10%;
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(120, 220, 250, 0.28), transparent 58%),
    radial-gradient(ellipse 50% 40% at 85% 70%, rgba(80, 160, 210, 0.12), transparent 60%),
    radial-gradient(ellipse 45% 35% at 10% 80%, rgba(100, 200, 230, 0.1), transparent 55%);
  animation: char-tier-frame-breathe 4.8s ease-in-out infinite;
  z-index: 0;
}

.char-tier-board-frame-grid {
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background:
    linear-gradient(90deg, rgba(140, 220, 240, 0.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(140, 220, 240, 0.04) 1px, transparent 1px);
  background-size: 1.35rem 1.35rem;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 85%);
  z-index: 0;
}

.char-tier-board-frame-tick {
  position: absolute;
  width: 0.85rem;
  height: 0.85rem;
  border-color: rgba(160, 230, 250, 0.75);
  border-style: solid;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 0 4px rgba(100, 210, 240, 0.55));
}
.char-tier-board-frame-tick--tl {
  top: 0.28rem;
  left: 0.28rem;
  border-width: 2px 0 0 2px;
}
.char-tier-board-frame-tick--tr {
  top: 0.28rem;
  right: 0.28rem;
  border-width: 2px 2px 0 0;
}
.char-tier-board-frame-tick--bl {
  bottom: 0.28rem;
  left: 0.28rem;
  border-width: 0 0 2px 2px;
}
.char-tier-board-frame-tick--br {
  bottom: 0.28rem;
  right: 0.28rem;
  border-width: 0 2px 2px 0;
}

@keyframes char-tier-frame-breathe {
  0%,
  100% {
    opacity: 0.72;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.02);
  }
}

.char-tier-board-list {
  position: relative;
  z-index: 2;
  list-style: none;
  margin: 0;
  padding: 0.2rem 0.25rem 0.35rem;
  display: grid;
  gap: 0.35rem;
  align-content: start;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  scrollbar-width: none; /* Firefox — no bar over row frames */
  -ms-overflow-style: none;
}
.char-tier-board-list::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.char-tier-board-entry {
  display: grid;
  grid-template-columns: 3.55rem minmax(0, 1fr);
  gap: 0.4rem;
  align-items: stretch;
}

.char-tier-board-entry[hidden],
.char-tier-board-entry.is-filtered-out {
  display: none !important;
}

.char-tier-board-cut {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.65rem;
  margin: 0.55rem 0 0.35rem;
  padding: 0.35rem 0.4rem;
  pointer-events: none;
}

.char-tier-board-cut-line {
  display: block;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(201, 165, 116, 0.55),
    rgba(180, 186, 178, 0.35),
    rgba(201, 165, 116, 0.55),
    transparent
  );
  box-shadow: 0 0 10px rgba(201, 165, 116, 0.2);
}

.char-tier-board-cut-label {
  flex: 0 0 auto;
  font-family: var(--font-herald);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(201, 165, 116, 0.78);
  white-space: nowrap;
  padding: 0.22rem 0.55rem;
  border: 1px solid rgba(201, 165, 116, 0.35);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.45);
}

.char-tier-board-place {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.12rem;
  align-self: stretch;
  padding: 0.35rem 0.2rem;
  border: 1px solid rgba(150, 158, 150, 0.32);
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.06), transparent 70%),
    rgba(0, 0, 0, 0.45);
  clip-path: polygon(
    0 0,
    calc(100% - 6px) 0,
    100% 6px,
    100% 100%,
    6px 100%,
    0 calc(100% - 6px)
  );
}

.char-tier-board-place-label {
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(180, 186, 178, 0.62);
  line-height: 1;
}

.char-tier-board-place-n {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 700;
  color: rgba(236, 238, 234, 0.96);
  line-height: 1;
  letter-spacing: 0.02em;
}

.char-tier-board-place-bar {
  display: block;
  width: 55%;
  height: 2px;
  margin-top: 0.1rem;
  opacity: 0.9;
}

.char-tier-board-row {
  position: relative;
  display: grid;
  grid-template-columns: 2.55rem minmax(0, 1fr) 5.8rem;
  gap: 0.35rem 0.55rem;
  align-items: center;
  min-width: 0;
  padding: 0.4rem 0.55rem 0.42rem 0.65rem;
  border: 1px solid rgba(140, 148, 140, 0.22);
  border-radius: 1px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.03), transparent 42%),
    rgba(0, 0, 0, 0.32);
  clip-path: polygon(
    0 0,
    calc(100% - 8px) 0,
    100% 8px,
    100% 100%,
    8px 100%,
    0 calc(100% - 8px)
  );
  transition:
    border-color 0.14s ease,
    box-shadow 0.14s ease,
    transform 0.14s ease,
    filter 0.14s ease,
    background 0.14s ease;
}

/* Me frame uses the blue board frame; list rows stay neutral (no YOU chrome). */

/* Top 3 — gem facets (prism / sapphire / emerald; avoid site gold) */
.char-tier-board-entry.is-top-1 .char-tier-board-row {
  border-color: rgba(170, 225, 255, 0.72);
  background:
    linear-gradient(
      105deg,
      rgba(122, 215, 255, 0.22),
      rgba(184, 166, 255, 0.14) 28%,
      rgba(255, 158, 207, 0.1) 48%,
      rgba(125, 255, 200, 0.08) 68%,
      transparent 78%
    ),
    rgba(5, 12, 22, 0.9);
  box-shadow:
    0 0 28px rgba(140, 200, 255, 0.22),
    0 0 22px rgba(190, 140, 255, 0.1),
    inset 0 0 0 1px rgba(200, 230, 255, 0.22),
    inset 0 0 40px rgba(80, 150, 220, 0.08);
}
.char-tier-board-entry.is-top-1 .char-tier-board-place {
  border-color: transparent;
  background:
    linear-gradient(rgba(6, 14, 24, 0.92), rgba(6, 14, 24, 0.92)) padding-box,
    linear-gradient(
      135deg,
      #7ad7ff 0%,
      #b8a6ff 22%,
      #ff9ecf 44%,
      #7dffc8 66%,
      #9fd8ff 88%,
      #c9b8ff 100%
    ) border-box;
  border: 1px solid transparent;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 18px rgba(140, 200, 255, 0.28);
}
.char-tier-board-entry.is-top-1 .char-tier-board-place-label {
  color: rgba(190, 225, 255, 0.78);
}
.char-tier-board-entry.is-top-1 .char-tier-board-place-n {
  background: linear-gradient(
    135deg,
    #ffffff 8%,
    #9fe4ff 28%,
    #d0baff 48%,
    #ffb4d8 68%,
    #a8ffe0 88%,
    #ffffff 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 8px rgba(170, 210, 255, 0.55));
}
.char-tier-board-entry.is-top-1 .char-tier-board-name {
  color: #e8f4ff;
  text-shadow: 0 0 14px rgba(140, 200, 255, 0.35);
}
.char-tier-board-entry.is-top-1 .char-tier-board-place-bar,
.char-tier-board-entry.is-top-1 .char-tier-board-podium {
  height: 3px;
  opacity: 1;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(122, 215, 255, 0.45),
    rgba(184, 166, 255, 0.95),
    rgba(255, 158, 207, 0.9),
    rgba(125, 255, 200, 0.85),
    rgba(122, 215, 255, 0.45),
    transparent
  );
  box-shadow: 0 0 10px rgba(150, 200, 255, 0.5);
}
.char-tier-board-entry.is-top-1 .char-tier-board-stat-bar > span {
  background: linear-gradient(90deg, rgba(100, 180, 255, 0.85), rgba(200, 170, 255, 1), rgba(160, 255, 220, 0.95));
  box-shadow: 0 0 8px rgba(140, 200, 255, 0.35);
}

.char-tier-board-entry.is-top-2 .char-tier-board-row {
  border-color: rgba(100, 170, 255, 0.72);
  background:
    linear-gradient(105deg, rgba(80, 150, 255, 0.26), rgba(40, 90, 180, 0.1) 42%, transparent 62%),
    rgba(6, 12, 28, 0.9);
  box-shadow:
    0 0 26px rgba(70, 140, 255, 0.22),
    inset 0 0 0 1px rgba(150, 200, 255, 0.26),
    inset 0 0 40px rgba(50, 110, 220, 0.1);
}
.char-tier-board-entry.is-top-2 .char-tier-board-place {
  border-color: rgba(100, 170, 255, 0.75);
  background:
    radial-gradient(circle at 50% 30%, rgba(120, 180, 255, 0.42), transparent 68%),
    linear-gradient(180deg, rgba(20, 45, 90, 0.65), rgba(0, 0, 0, 0.62));
  box-shadow:
    inset 0 0 0 1px rgba(160, 210, 255, 0.22),
    0 0 18px rgba(80, 150, 255, 0.3);
}
.char-tier-board-entry.is-top-2 .char-tier-board-place-label {
  color: rgba(140, 190, 255, 0.78);
}
.char-tier-board-entry.is-top-2 .char-tier-board-place-n {
  color: #b8d6ff;
  text-shadow:
    0 0 10px rgba(90, 160, 255, 0.55),
    0 0 22px rgba(60, 130, 255, 0.4);
}
.char-tier-board-entry.is-top-2 .char-tier-board-name {
  color: #c8defe;
  text-shadow: 0 0 12px rgba(80, 150, 255, 0.32);
}
.char-tier-board-entry.is-top-2 .char-tier-board-place-bar,
.char-tier-board-entry.is-top-2 .char-tier-board-podium {
  height: 3px;
  opacity: 1;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(80, 150, 255, 0.4),
    rgba(160, 210, 255, 1),
    rgba(80, 150, 255, 0.4),
    transparent
  );
  box-shadow: 0 0 10px rgba(90, 160, 255, 0.5);
}
.char-tier-board-entry.is-top-2 .char-tier-board-stat-bar > span {
  background: linear-gradient(90deg, rgba(50, 110, 220, 0.85), rgba(160, 210, 255, 1));
  box-shadow: 0 0 8px rgba(80, 150, 255, 0.35);
}

.char-tier-board-entry.is-top-3 .char-tier-board-row {
  border-color: rgba(80, 210, 150, 0.7);
  background:
    linear-gradient(105deg, rgba(70, 200, 140, 0.24), rgba(30, 110, 80, 0.1) 42%, transparent 62%),
    rgba(4, 18, 14, 0.9);
  box-shadow:
    0 0 26px rgba(60, 190, 130, 0.2),
    inset 0 0 0 1px rgba(140, 255, 200, 0.22),
    inset 0 0 40px rgba(40, 140, 100, 0.1);
}
.char-tier-board-entry.is-top-3 .char-tier-board-place {
  border-color: rgba(80, 210, 150, 0.72);
  background:
    radial-gradient(circle at 50% 30%, rgba(100, 230, 170, 0.38), transparent 68%),
    linear-gradient(180deg, rgba(15, 55, 40, 0.65), rgba(0, 0, 0, 0.62));
  box-shadow:
    inset 0 0 0 1px rgba(150, 255, 210, 0.2),
    0 0 18px rgba(60, 190, 130, 0.28);
}
.char-tier-board-entry.is-top-3 .char-tier-board-place-label {
  color: rgba(120, 230, 180, 0.78);
}
.char-tier-board-entry.is-top-3 .char-tier-board-place-n {
  color: #9af5c8;
  text-shadow:
    0 0 10px rgba(70, 210, 150, 0.5),
    0 0 22px rgba(40, 170, 120, 0.38);
}
.char-tier-board-entry.is-top-3 .char-tier-board-name {
  color: #b8f5d6;
  text-shadow: 0 0 12px rgba(60, 190, 130, 0.3);
}
.char-tier-board-entry.is-top-3 .char-tier-board-place-bar,
.char-tier-board-entry.is-top-3 .char-tier-board-podium {
  height: 3px;
  opacity: 1;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(70, 200, 140, 0.4),
    rgba(150, 255, 210, 1),
    rgba(70, 200, 140, 0.4),
    transparent
  );
  box-shadow: 0 0 10px rgba(70, 200, 140, 0.5);
}
.char-tier-board-entry.is-top-3 .char-tier-board-stat-bar > span {
  background: linear-gradient(90deg, rgba(30, 140, 100, 0.85), rgba(150, 255, 210, 1));
  box-shadow: 0 0 8px rgba(60, 190, 130, 0.35);
}

.char-tier-board-avatar {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.12rem;
  align-self: center;
  width: 2.35rem;
}

.char-tier-board-jarvis {
  width: 2.35rem;
  height: 2.35rem;
  display: block;
  position: relative;
  z-index: 2;
}

/* Achievement cone nested in rank-row Jarvis ball */
.char-tier-board-avatar-crystal {
  position: absolute;
  left: 50%;
  top: 1.175rem; /* center of 2.35rem jarvis ball, not whole avatar+podium */
  z-index: 3;
  display: grid;
  place-items: center;
  width: 42%;
  height: 1.12rem;
  margin: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.char-tier-board-podium {
  display: block;
  width: 70%;
  height: 2px;
  margin: 0 auto;
  opacity: 0.9;
  position: relative;
  z-index: 2;
}

.char-tier-board-body {
  display: grid;
  gap: 0.22rem;
  min-width: 0;
}

.char-tier-board-who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.55rem;
  min-width: 0;
  overflow: visible;
}

.char-tier-board-entry.is-peekable {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.char-tier-board-entry.is-peekable:focus {
  outline: none;
}

.char-tier-board-entry.is-peekable .char-tier-board-place,
.char-tier-board-entry.is-peekable .char-tier-board-row {
  transition:
    transform 0.14s ease,
    box-shadow 0.14s ease;
}

/* Hover / press = depth only — do not recolor borders, fills, or type. */
.char-tier-board-entry.is-peekable:hover .char-tier-board-row {
  transform: translateY(-2px);
  box-shadow:
    0 6px 0 rgba(0, 0, 0, 0.55),
    0 12px 22px rgba(0, 0, 0, 0.38);
}

.char-tier-board-entry.is-peekable:hover .char-tier-board-place {
  transform: translateY(-2px);
  box-shadow:
    0 6px 0 rgba(0, 0, 0, 0.5),
    0 10px 18px rgba(0, 0, 0, 0.32);
}

.char-tier-board-entry.is-peekable:active .char-tier-board-row {
  transform: translateY(2px);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.65),
    inset 0 4px 12px rgba(0, 0, 0, 0.55);
}

.char-tier-board-entry.is-peekable:active .char-tier-board-place {
  transform: translateY(2px);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.6),
    inset 0 3px 10px rgba(0, 0, 0, 0.5);
}

.char-tier-board-entry.is-peekable:focus-visible .char-tier-board-row,
.char-tier-board-entry.is-peekable:focus-visible .char-tier-board-place {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.28),
    0 4px 0 rgba(0, 0, 0, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  .char-tier-board-entry.is-peekable:hover .char-tier-board-row,
  .char-tier-board-entry.is-peekable:hover .char-tier-board-place,
  .char-tier-board-entry.is-peekable:active .char-tier-board-row,
  .char-tier-board-entry.is-peekable:active .char-tier-board-place {
    transform: none;
  }
}

.char-identity-peek {
  border: none;
  padding: 0;
  background: transparent;
  width: min(42rem, 96vw);
  max-width: 96vw;
  max-height: min(92vh, 48rem);
  color: rgba(220, 224, 220, 0.92);
}

.char-identity-peek::backdrop {
  background: rgba(3, 4, 3, 0.78);
  backdrop-filter: blur(6px);
}

.char-identity-peek-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-height: min(92vh, 48rem);
  padding: 1.05rem 1.1rem 1.15rem;
  border: 1px solid rgba(160, 168, 160, 0.28);
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 24%),
    linear-gradient(145deg, rgba(18, 20, 18, 0.98), rgba(8, 9, 8, 0.99));
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 22px 56px rgba(0, 0, 0, 0.65);
  overflow: auto;
}

.char-identity-peek-tick {
  position: absolute;
  width: 0.9rem;
  height: 0.9rem;
  border-color: rgba(180, 186, 178, 0.5);
  border-style: solid;
  pointer-events: none;
  z-index: 2;
}
.char-identity-peek-tick--tl {
  top: 0.4rem;
  left: 0.4rem;
  border-width: 2px 0 0 2px;
}
.char-identity-peek-tick--tr {
  top: 0.4rem;
  right: 0.4rem;
  border-width: 2px 2px 0 0;
}
.char-identity-peek-tick--bl {
  bottom: 0.4rem;
  left: 0.4rem;
  border-width: 0 0 2px 2px;
}
.char-identity-peek-tick--br {
  bottom: 0.4rem;
  right: 0.4rem;
  border-width: 0 2px 2px 0;
}

.char-identity-peek-head {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}

.char-identity-peek-head-copy {
  position: relative;
  min-width: 0;
  padding: 0.12rem 0 0.15rem 0.85rem;
}

.char-identity-peek-head-copy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.08rem;
  bottom: 0.08rem;
  width: 2px;
  border-radius: 1px;
  background: linear-gradient(
    180deg,
    rgba(122, 215, 255, 0.95),
    rgba(184, 166, 255, 0.8),
    rgba(125, 255, 200, 0.75)
  );
  box-shadow: 0 0 10px rgba(140, 200, 255, 0.35);
}

.char-identity-peek-kicker {
  margin: 0 0 0.22rem;
  font-family: var(--font-herald);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(170, 190, 210, 0.78);
  text-shadow: 0 0 12px rgba(140, 190, 255, 0.18);
}

.char-identity-peek-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #eef4ff;
  text-shadow:
    0 0 16px rgba(140, 200, 255, 0.26),
    0 1px 0 rgba(0, 0, 0, 0.35);
  overflow-wrap: anywhere;
}

.char-identity-peek-x {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  margin: 0;
  padding: 0.35rem 0.65rem;
  border: 1px solid rgba(160, 168, 160, 0.35);
  border-radius: 1px;
  background: rgba(0, 0, 0, 0.35);
  color: rgba(210, 214, 208, 0.88);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.char-identity-peek-x:hover,
.char-identity-peek-x:focus-visible {
  border-color: rgba(201, 165, 116, 0.45);
  color: rgba(245, 236, 210, 0.95);
}

.char-identity-peek-body {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.char-identity-peek-body .char-id-card {
  margin-bottom: 0;
}

.char-identity-peek-body .char-id-card.is-readonly .char-seal-chip.is-static {
  cursor: default;
  pointer-events: none;
}

.char-tier-board-rank {
  display: inline-flex;
  align-items: baseline;
  gap: 0.22rem;
  flex-shrink: 0;
}

.char-tier-board-rank-label {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(190, 196, 188, 0.62);
  line-height: 1;
}

.char-tier-board-rank-n {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: rgba(236, 238, 234, 0.96);
  line-height: 1;
}

.char-tier-board-name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: rgba(242, 244, 240, 0.98);
  letter-spacing: 0.02em;
  line-height: 1.15;
}

.char-tier-board-chips {
  display: grid;
  gap: 0.22rem;
  align-content: center;
  justify-items: stretch;
  width: 5.8rem;
  flex: 0 0 5.8rem;
  min-width: 5.8rem;
}

.char-tier-board-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  padding: 0.18rem 0.48rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  border: 1px solid rgba(170, 178, 170, 0.42);
  background: rgba(0, 0, 0, 0.42);
  color: rgba(236, 240, 234, 0.96);
  line-height: 1.2;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}

.char-tier-board-chip-deco {
  pointer-events: none;
  position: absolute;
  inset: 0;
}

/* Tier: corner ticks + soft wash — color by tier identity (not podium) */
.char-tier-board-chip--tier {
  font-family: var(--font-herald);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.66rem;
  padding: 0.18rem 0.35rem;
  white-space: nowrap;
  border-color: rgba(170, 185, 200, 0.42);
  color: rgba(198, 210, 220, 0.95);
  background:
    linear-gradient(135deg, rgba(150, 170, 190, 0.12), transparent 55%),
    rgba(8, 10, 8, 0.55);
  clip-path: polygon(
    0 0,
    calc(100% - 5px) 0,
    100% 5px,
    100% 100%,
    5px 100%,
    0 calc(100% - 5px)
  );
}
button.char-tier-board-chip--tier.is-openable {
  /* Keep herald face from .char-tier-board-chip--tier (do not font:inherit). */
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--font-herald);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  cursor: pointer;
  position: relative;
}
button.char-tier-board-chip--tier.is-openable:hover,
button.char-tier-board-chip--tier.is-openable.is-opened {
  filter: brightness(1.12);
  box-shadow: 0 0 0 1px rgba(220, 200, 150, 0.35);
}
button.char-tier-board-chip--tier.is-openable::after {
  content: "▸";
  font-family: var(--font-ui, var(--font-body), system-ui, sans-serif);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.65;
  margin-left: 0.1rem;
}

/* Tier Path intro (from identity Tier chip) */
.char-tier-path {
  --tp-width-cut: 30rem; /* 15rem each side */
  border: none;
  background: transparent;
  color: #e8eef2;
  box-sizing: border-box;
}
/* Closed dialog must stay hidden — never force display on the base selector. */
.char-tier-path:not([open]) {
  display: none !important;
}
.char-tier-path[open],
dialog.char-tier-path:modal {
  /* Transparent full-viewport host — never size the <dialog> box itself. */
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  color: #e8eef2;
  box-sizing: border-box !important;
  transform: none !important;
}
.char-tier-path::backdrop {
  background: rgba(6, 10, 12, 0.78);
}
/* Visible 框 lives on the card — UA dialog width rules cannot stretch this. */
.char-tier-path[open] > .char-tier-path-card,
dialog.char-tier-path:modal > .char-tier-path-card,
.char-tier-path-card {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto !important;
  width: calc(100vw - var(--tp-width-cut, 30rem)) !important;
  max-width: calc(100vw - var(--tp-width-cut, 30rem)) !important;
  height: calc(100vh - 4rem) !important;
  max-height: calc(100vh - 4rem) !important;
  min-width: 0;
  min-height: 0;
  margin: 0 auto !important;
  border: 1px solid rgba(160, 175, 190, 0.35);
  background:
    linear-gradient(180deg, rgba(30, 36, 42, 0.98), rgba(10, 12, 14, 0.96));
  padding: 1.5rem 1.75rem 1.6rem;
  overflow: hidden;
  box-sizing: border-box !important;
}
.char-tier-path-tick {
  position: absolute;
  width: 0.55rem;
  height: 0.55rem;
  border-color: rgba(210, 190, 150, 0.55);
  border-style: solid;
  pointer-events: none;
}
.char-tier-path-tick--tl { top: 0; left: 0; border-width: 2px 0 0 2px; }
.char-tier-path-tick--tr { top: 0; right: 0; border-width: 2px 2px 0 0; }
.char-tier-path-tick--bl { left: 0; bottom: 0; border-width: 0 0 2px 2px; }
.char-tier-path-tick--br { right: 0; bottom: 0; border-width: 0 2px 2px 0; }
.char-tier-path-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.1rem;
  flex: 0 0 auto;
}
.char-tier-path-kicker {
  margin: 0 0 0.2rem;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(200, 180, 140, 0.8);
}
.char-tier-path-head h2 {
  margin: 0;
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.55rem;
  color: #f0e2b8;
}
/* Match admin “← BACK TO HISTORY” return control — larger, no game ticks. */
.char-tier-path-x {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 2.55rem;
  margin: 0;
  padding: 0.62rem 1.35rem;
  border: 1px solid rgba(201, 165, 116, 0.55);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(18, 14, 10, 0.96), rgba(8, 6, 4, 0.98));
  color: #e8d4b0;
  cursor: pointer;
  font-family: var(--font-herald, Georgia, serif);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.1;
  box-shadow:
    inset 0 0 0 1px rgba(201, 165, 116, 0.08),
    0 10px 28px rgba(0, 0, 0, 0.38);
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}
.char-tier-path-x:hover,
.char-tier-path-x:focus-visible {
  border-color: rgba(201, 165, 116, 0.85);
  background: linear-gradient(180deg, rgba(32, 26, 18, 0.98), rgba(14, 11, 8, 0.99));
  color: #f3e6cf;
  outline: none;
  box-shadow:
    inset 0 0 0 1px rgba(201, 165, 116, 0.16),
    0 0 0 1px rgba(201, 165, 116, 0.14),
    0 10px 28px rgba(0, 0, 0, 0.42);
}
.char-tier-path-x:active {
  transform: translateY(1px);
}
.char-tier-path-body {
  /* Frame is 30rem narrower (15rem/side); Identity+Ranking | bands shrink (3:2). */
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 0.9rem 1.15rem;
  align-items: stretch;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  width: 100%;
}
.char-tier-path-col--jarvis {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-width: 0;
  min-height: 0;
  height: 100%;
}
.char-tier-path-col--jarvis > .char-tier-path-identity {
  flex: 1 1 auto;
  min-height: 0;
}
.char-tier-path-col--jarvis > .char-tier-path-rank {
  flex: 0 0 auto;
}
.char-tier-path-id-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  min-width: 0;
}
.char-tier-path-id-title {
  margin: 0;
  flex: 0 0 auto;
  font-family: var(--font-herald);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(210, 185, 130, 0.9);
  line-height: 1.3;
}
.char-tier-path-brief-line {
  margin: 0;
  flex: 0 1 16rem;
  max-width: 16rem;
  text-align: right;
  font-family: var(--font-display, Georgia, serif);
  font-size: 0.72rem;
  line-height: 1.35;
  letter-spacing: 0.015em;
  color: rgba(190, 185, 170, 0.82);
}
.char-tier-path-rank-bridge {
  margin: 0;
  padding: 0.15rem 0.15rem 0;
  font-family: var(--font-display, Georgia, serif);
  font-size: 0.82rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: rgba(190, 180, 155, 0.88);
  border-top: 1px solid rgba(170, 150, 110, 0.28);
  padding-top: 0.55rem;
}
.char-tier-path-rank-copy {
  margin: -0.1rem 0 0.15rem;
  font-size: 0.76rem;
  line-height: 1.35;
  color: rgba(170, 185, 198, 0.88);
}
.char-tier-path-rank-split {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-herald);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(180, 165, 125, 0.78);
}
.char-tier-path-rank-split::before,
.char-tier-path-rank-split::after {
  content: "";
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(180, 160, 110, 0.45), transparent);
}
.char-tier-path-fresh-line {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.75rem;
  align-items: center;
  font-size: 0.8rem;
  color: rgba(185, 195, 205, 0.9);
}
.char-tier-path-panel {
  position: relative;
  margin: 0;
  padding: 0.75rem 0.8rem 0.85rem;
  border: 1px solid rgba(170, 150, 110, 0.38);
  background:
    linear-gradient(165deg, rgba(38, 34, 28, 0.55) 0%, rgba(12, 14, 16, 0.92) 48%, rgba(8, 10, 12, 0.96) 100%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(240, 220, 170, 0.06),
    inset 0 0 28px rgba(0, 0, 0, 0.28);
  clip-path: polygon(
    0 0,
    calc(100% - 10px) 0,
    100% 10px,
    100% 100%,
    10px 100%,
    0 calc(100% - 10px)
  );
}
.char-tier-path-panel-tick {
  position: absolute;
  width: 0.45rem;
  height: 0.45rem;
  border-color: rgba(220, 190, 120, 0.7);
  border-style: solid;
  pointer-events: none;
  z-index: 1;
}
.char-tier-path-panel-tick--tl { top: 3px; left: 3px; border-width: 2px 0 0 2px; }
.char-tier-path-panel-tick--tr { top: 3px; right: 3px; border-width: 2px 2px 0 0; }
.char-tier-path-panel-tick--bl { left: 3px; bottom: 3px; border-width: 0 0 2px 2px; }
.char-tier-path-panel-tick--br { right: 3px; bottom: 3px; border-width: 0 2px 2px 0; }
.char-tier-path-rank {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  flex: 0 0 auto;
  min-width: 0;
  min-height: 13.5rem;
  padding: 0.85rem 0.9rem 0.95rem;
}
.char-tier-path-rank-slot {
  display: grid;
  gap: 0.4rem;
  flex: 1 1 auto;
  align-content: stretch;
  min-height: 10.5rem;
}
.char-tier-path-rank-slot .char-rank-btn {
  width: 100%;
  min-height: 4.1rem;
}
.char-tier-path-col--jarvis .char-rank-btn-title {
  font-family: var(--font-herald);
  letter-spacing: 0.06em;
}
.char-tier-path-node-chips {
  display: grid;
  gap: 0.22rem;
  justify-items: stretch;
  width: 5.8rem;
  min-width: 5.8rem;
  align-self: start;
  padding-top: 0.08rem;
}
.char-tier-path-bands {
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.85rem 0.9rem 0.85rem;
}
.char-tier-path-bands .char-tier-path-districts {
  flex: 0 0 auto;
  margin-top: 0.05rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(160, 150, 120, 0.22);
}
.char-tier-path-bands .char-tier-path-districts .char-tier-path-section-label {
  margin-bottom: 0.28rem;
}
.char-tier-path-identity {
  display: grid;
  align-content: center;
  gap: 0.75rem;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 1rem 1.05rem 1.15rem;
  background:
    radial-gradient(55% 70% at 18% 40%, rgba(180, 120, 200, 0.16), transparent 62%),
    linear-gradient(165deg, rgba(38, 34, 28, 0.55) 0%, rgba(12, 14, 16, 0.92) 48%, rgba(8, 10, 12, 0.96) 100%);
}
.char-tier-path-id-row {
  display: grid;
  grid-template-columns: minmax(5.5rem, 7.5rem) minmax(0, 1fr);
  gap: 0.7rem 0.9rem;
  align-items: center;
  min-height: 0;
  justify-content: start;
  margin-top: -1rem;
}
.char-tier-path-jarvis {
  position: relative;
  width: 100%;
  max-width: 7.25rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  justify-self: start;
}
.char-tier-path-jarvis .char-hud-canvas {
  width: 100%;
  height: 100%;
  max-width: 116px;
  max-height: 116px;
}
.char-tier-path-id-side {
  display: grid;
  gap: 0.85rem;
  align-content: center;
  min-width: 0;
}
.char-tier-path-id-meta {
  display: flex;
  gap: 1.35rem;
  align-items: baseline;
}
.char-tier-path-id-stat {
  margin: 0;
  display: grid;
  gap: 0.12rem;
  justify-items: start;
}
.char-tier-path-id-stat .char-hero-kicker {
  font-family: var(--font-herald);
  letter-spacing: 0.14em;
}
.char-tier-path-id-stat strong {
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.85rem, 2.8vw, 2.45rem);
  color: #f0e2b8;
  line-height: 1;
}
.char-tier-path-id-stat:last-child strong {
  font-size: clamp(1.35rem, 2.1vw, 1.8rem);
}
.char-tier-path-id-marks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.75rem;
  width: 100%;
}
.char-tier-path-id-marks .char-hero-tier-seal {
  display: grid;
  gap: 0.28rem;
  justify-items: start;
}
.char-tier-path-identity .char-hero-tier-seal .char-tier-board-chip--tier {
  width: auto;
  min-width: 6.2rem;
  min-height: 1.85rem;
  padding: 0.3rem 0.7rem;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  box-sizing: border-box;
}
.char-tier-path-exp {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.35rem 0.55rem;
  align-items: center;
  margin-top: 0.15rem;
  padding: 0.45rem 0.5rem 0.4rem;
  border: 1px solid rgba(200, 170, 100, 0.28);
  background: rgba(0, 0, 0, 0.28);
  box-sizing: border-box;
}
.char-tier-path-exp-kicker {
  font-family: var(--font-herald);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #e2c67a;
}
.char-tier-path-exp-bar {
  height: 0.42rem;
  border: 1px solid rgba(200, 170, 100, 0.35);
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.char-tier-path-exp-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #8a6a2e, #e2c67a 55%, #f0e2b8);
}
.char-tier-path-exp-meta {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: rgba(210, 195, 150, 0.85);
  white-space: nowrap;
}
.char-tier-path-section-label {
  margin: 0 0 0.4rem;
  font-family: var(--font-herald);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(210, 185, 130, 0.88);
}
.char-tier-path-districts-row {
  display: flex;
  gap: 0.28rem;
  flex-wrap: nowrap;
}
.char-tier-path-district {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: 0.28rem 0.15rem 0.22rem;
  border: 1px solid rgba(150, 160, 175, 0.4);
  text-align: center;
  display: grid;
  gap: 0.02rem;
  justify-items: center;
  background:
    linear-gradient(160deg, rgba(40, 44, 52, 0.75), rgba(8, 10, 12, 0.92));
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(230, 235, 240, 0.06);
  clip-path: polygon(
    0 0,
    calc(100% - 5px) 0,
    100% 5px,
    100% 100%,
    5px 100%,
    0 calc(100% - 5px)
  );
}
.char-tier-path-district-deco {
  position: absolute;
  inset: 2px;
  border: 1px solid rgba(170, 185, 200, 0.12);
  pointer-events: none;
}
.char-tier-path-district em {
  position: relative;
  font-family: var(--font-herald);
  font-style: normal;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: rgba(230, 235, 240, 0.95);
  line-height: 1.1;
}
.char-tier-path-district-tag {
  position: relative;
  font-size: 0.48rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(140, 155, 170, 0.75);
  min-height: 0.7em;
}
.char-tier-path-district.is-peak {
  border-color: rgba(90, 190, 200, 0.55);
  background:
    linear-gradient(160deg, rgba(28, 70, 78, 0.55), rgba(8, 12, 14, 0.94));
}
.char-tier-path-district.is-peak em {
  color: rgba(150, 230, 235, 0.95);
}
.char-tier-path-district.is-peak .char-tier-path-district-tag {
  color: rgba(120, 210, 215, 0.88);
}
.char-tier-path-district.is-floor {
  border-color: rgba(120, 140, 160, 0.45);
  background:
    linear-gradient(160deg, rgba(28, 34, 42, 0.8), rgba(6, 8, 10, 0.95));
}
.char-tier-path-district.is-you {
  border-color: rgba(230, 195, 120, 0.85);
  background:
    linear-gradient(160deg, rgba(90, 70, 28, 0.55), rgba(18, 14, 10, 0.94));
  box-shadow:
    0 0 0 1px rgba(220, 190, 120, 0.25),
    inset 0 0 0 1px rgba(220, 190, 120, 0.18),
    inset 0 1px 0 rgba(240, 220, 160, 0.12);
}
.char-tier-path-district.is-you em {
  color: #f0e2b8;
}
.char-tier-path-district.is-you .char-tier-path-district-tag {
  color: #e2c67a;
}
/* Current seat wins over peak/floor accents */
.char-tier-path-district.is-you.is-peak,
.char-tier-path-district.is-you.is-floor {
  border-color: rgba(230, 195, 120, 0.85);
  background:
    linear-gradient(160deg, rgba(90, 70, 28, 0.55), rgba(18, 14, 10, 0.94));
}
.char-tier-path-district.is-you.is-peak em,
.char-tier-path-district.is-you.is-floor em {
  color: #f0e2b8;
}
.char-tier-path-district.is-you.is-peak .char-tier-path-district-tag,
.char-tier-path-district.is-you.is-floor .char-tier-path-district-tag {
  color: #e2c67a;
}
.char-tier-path-districts-hint {
  margin: 0.28rem 0 0;
  display: flex;
  gap: 0.3rem;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(150, 165, 180, 0.68);
}
.char-tier-path-nodes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-rows: repeat(6, minmax(4.1rem, 1fr));
  gap: 0.4rem;
  flex: 1 1 auto;
  min-height: 0;
}
.char-tier-path-node {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) minmax(5.6rem, auto);
  gap: 0.35rem 0.55rem;
  align-items: start;
  padding: 0.5rem 0.55rem 0.45rem;
  min-height: 4.1rem;
  border: 1px solid rgba(120, 160, 180, 0.28);
  border-radius: 2px;
  background:
    linear-gradient(135deg, rgba(28, 30, 34, 0.9) 0%, rgba(10, 11, 13, 0.94) 55%, rgba(22, 24, 28, 0.9) 100%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(230, 235, 240, 0.05);
}
.char-tier-path-node.is-you {
  border-color: rgba(220, 190, 120, 0.6);
  box-shadow:
    0 0 0 1px rgba(220, 190, 120, 0.18),
    inset 0 0 0 1px rgba(220, 190, 120, 0.12),
    inset 0 1px 0 rgba(230, 235, 240, 0.06);
  background:
    linear-gradient(135deg, rgba(48, 40, 28, 0.55) 0%, rgba(14, 12, 10, 0.94) 55%, rgba(28, 24, 18, 0.9) 100%);
}
.char-tier-path-node-orb {
  width: 2.75rem;
  display: grid;
  place-items: start center;
  padding-top: 0.1rem;
}
.char-tier-path-node-orb canvas {
  display: block;
  width: 40px;
  height: 40px;
}
.char-tier-path-node-main {
  display: grid;
  grid-template-rows: auto auto 1.05rem;
  gap: 0.1rem;
  min-width: 0;
  align-content: start;
  padding-top: 0.05rem;
}
.char-tier-path-node-title {
  font-family: var(--font-herald);
  font-size: clamp(0.84rem, 1.1vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #eef1f5;
  line-height: 1.15;
}
.char-tier-path-node-range {
  font-style: normal;
  font-size: clamp(0.7rem, 0.9vw, 0.8rem);
  letter-spacing: 0.04em;
  color: rgba(160, 175, 190, 0.88);
  line-height: 1.2;
}
.char-tier-path-node-mark {
  display: block;
  min-height: 1.05rem;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #e2c67a;
  line-height: 1.05rem;
  white-space: nowrap;
}
.char-tier-path-node:not(.is-you) .char-tier-path-node-mark {
  visibility: hidden;
}
.char-tier-path-node .char-tier-board-chip {
  width: 100%;
  min-width: 0;
  font-size: 0.62rem;
}
.char-tier-path-start-cta {
  display: inline-flex;
  padding: 0.35rem 0.7rem;
  border: 1px solid rgba(220, 190, 120, 0.55);
  background: rgba(200, 170, 90, 0.14);
  color: #f0e2b8;
  text-decoration: none;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.char-tier-path-start-cta:hover {
  background: rgba(200, 170, 90, 0.24);
}
@media (max-width: 1100px) {
  .char-tier-path {
    --tp-width-cut: 20rem; /* 10rem each side */
  }
}
@media (max-width: 820px) {
  .char-tier-path {
    --tp-width-cut: 2rem;
  }
  .char-tier-path[open] > .char-tier-path-card,
  dialog.char-tier-path:modal > .char-tier-path-card,
  .char-tier-path-card {
    height: calc(100vh - 2rem) !important;
    max-height: calc(100vh - 2rem) !important;
    padding: 1.1rem 1rem 1.15rem;
    overflow: auto;
  }
  .char-tier-path-body {
    grid-template-columns: 1fr;
    overflow: auto;
  }
  .char-tier-path-col--jarvis {
    grid-template-rows: none;
    height: auto;
  }
  .char-tier-path-id-row {
    grid-template-columns: minmax(5.5rem, 7rem) minmax(0, 1fr);
  }
  .char-tier-path-id-head {
    flex-wrap: wrap;
  }
  .char-tier-path-brief-line {
    flex-basis: 100%;
    max-width: none;
    text-align: left;
  }
  .char-tier-path-nodes {
    grid-template-rows: none;
  }
}
.char-tier-board-chip--tier .char-tier-board-chip-deco::before,
.char-tier-board-chip--tier .char-tier-board-chip-deco::after {
  content: "";
  position: absolute;
  width: 0.35rem;
  height: 0.35rem;
  border-color: rgba(170, 185, 200, 0.55);
  border-style: solid;
}
.char-tier-board-chip--tier .char-tier-board-chip-deco::before {
  top: 1px;
  left: 1px;
  border-width: 1px 0 0 1px;
}
.char-tier-board-chip--tier .char-tier-board-chip-deco::after {
  right: 1px;
  bottom: 1px;
  border-width: 0 1px 1px 0;
}

.char-tier-board-entry.char-tier-spark .char-tier-board-chip--tier,
.char-id-card.char-tier-spark .char-tier-board-chip--tier,
.char-tier-path-node.char-tier-spark .char-tier-board-chip--tier,
.char-tier-path-you-row.char-tier-spark .char-tier-board-chip--tier,
.char-tier-path-identity.char-tier-spark .char-tier-board-chip--tier {
  border-color: rgba(170, 185, 200, 0.48);
  color: rgba(198, 210, 220, 0.96);
  background:
    linear-gradient(135deg, rgba(150, 170, 190, 0.14), transparent 55%),
    rgba(8, 10, 8, 0.55);
}
.char-tier-board-entry.char-tier-spark .char-tier-board-chip--tier .char-tier-board-chip-deco::before,
.char-tier-board-entry.char-tier-spark .char-tier-board-chip--tier .char-tier-board-chip-deco::after,
.char-id-card.char-tier-spark .char-tier-board-chip--tier .char-tier-board-chip-deco::before,
.char-id-card.char-tier-spark .char-tier-board-chip--tier .char-tier-board-chip-deco::after,
.char-tier-path-node.char-tier-spark .char-tier-board-chip--tier .char-tier-board-chip-deco::before,
.char-tier-path-node.char-tier-spark .char-tier-board-chip--tier .char-tier-board-chip-deco::after,
.char-tier-path-you-row.char-tier-spark .char-tier-board-chip--tier .char-tier-board-chip-deco::before,
.char-tier-path-you-row.char-tier-spark .char-tier-board-chip--tier .char-tier-board-chip-deco::after,
.char-tier-path-identity.char-tier-spark .char-tier-board-chip--tier .char-tier-board-chip-deco::before,
.char-tier-path-identity.char-tier-spark .char-tier-board-chip--tier .char-tier-board-chip-deco::after {
  border-color: rgba(170, 185, 200, 0.65);
}

.char-tier-board-entry.char-tier-circuit .char-tier-board-chip--tier,
.char-id-card.char-tier-circuit .char-tier-board-chip--tier,
.char-tier-path-node.char-tier-circuit .char-tier-board-chip--tier,
.char-tier-path-you-row.char-tier-circuit .char-tier-board-chip--tier,
.char-tier-path-identity.char-tier-circuit .char-tier-board-chip--tier {
  border-color: rgba(255, 168, 88, 0.5);
  color: rgba(255, 186, 120, 0.96);
  background:
    linear-gradient(135deg, rgba(255, 150, 70, 0.16), transparent 55%),
    rgba(8, 10, 8, 0.55);
}
.char-tier-board-entry.char-tier-circuit .char-tier-board-chip--tier .char-tier-board-chip-deco::before,
.char-tier-board-entry.char-tier-circuit .char-tier-board-chip--tier .char-tier-board-chip-deco::after,
.char-id-card.char-tier-circuit .char-tier-board-chip--tier .char-tier-board-chip-deco::before,
.char-id-card.char-tier-circuit .char-tier-board-chip--tier .char-tier-board-chip-deco::after,
.char-tier-path-node.char-tier-circuit .char-tier-board-chip--tier .char-tier-board-chip-deco::before,
.char-tier-path-node.char-tier-circuit .char-tier-board-chip--tier .char-tier-board-chip-deco::after,
.char-tier-path-you-row.char-tier-circuit .char-tier-board-chip--tier .char-tier-board-chip-deco::before,
.char-tier-path-you-row.char-tier-circuit .char-tier-board-chip--tier .char-tier-board-chip-deco::after,
.char-tier-path-identity.char-tier-circuit .char-tier-board-chip--tier .char-tier-board-chip-deco::before,
.char-tier-path-identity.char-tier-circuit .char-tier-board-chip--tier .char-tier-board-chip-deco::after {
  border-color: rgba(255, 176, 100, 0.7);
}

.char-tier-board-entry.char-tier-lattice .char-tier-board-chip--tier,
.char-id-card.char-tier-lattice .char-tier-board-chip--tier,
.char-tier-path-node.char-tier-lattice .char-tier-board-chip--tier,
.char-tier-path-you-row.char-tier-lattice .char-tier-board-chip--tier,
.char-tier-path-identity.char-tier-lattice .char-tier-board-chip--tier {
  border-color: rgba(140, 190, 130, 0.5);
  color: rgba(170, 220, 155, 0.96);
  background:
    linear-gradient(135deg, rgba(120, 180, 110, 0.16), transparent 55%),
    rgba(8, 10, 8, 0.55);
}
.char-tier-board-entry.char-tier-lattice .char-tier-board-chip--tier .char-tier-board-chip-deco::before,
.char-tier-board-entry.char-tier-lattice .char-tier-board-chip--tier .char-tier-board-chip-deco::after,
.char-id-card.char-tier-lattice .char-tier-board-chip--tier .char-tier-board-chip-deco::before,
.char-id-card.char-tier-lattice .char-tier-board-chip--tier .char-tier-board-chip-deco::after,
.char-tier-path-node.char-tier-lattice .char-tier-board-chip--tier .char-tier-board-chip-deco::before,
.char-tier-path-node.char-tier-lattice .char-tier-board-chip--tier .char-tier-board-chip-deco::after,
.char-tier-path-you-row.char-tier-lattice .char-tier-board-chip--tier .char-tier-board-chip-deco::before,
.char-tier-path-you-row.char-tier-lattice .char-tier-board-chip--tier .char-tier-board-chip-deco::after,
.char-tier-path-identity.char-tier-lattice .char-tier-board-chip--tier .char-tier-board-chip-deco::before,
.char-tier-path-identity.char-tier-lattice .char-tier-board-chip--tier .char-tier-board-chip-deco::after {
  border-color: rgba(150, 200, 140, 0.7);
}

.char-tier-board-entry.char-tier-core .char-tier-board-chip--tier,
.char-id-card.char-tier-core .char-tier-board-chip--tier,
.char-tier-path-node.char-tier-core .char-tier-board-chip--tier,
.char-tier-path-you-row.char-tier-core .char-tier-board-chip--tier,
.char-tier-path-identity.char-tier-core .char-tier-board-chip--tier {
  border-color: rgba(210, 130, 190, 0.5);
  color: rgba(235, 170, 220, 0.96);
  background:
    linear-gradient(135deg, rgba(190, 100, 170, 0.16), transparent 55%),
    rgba(8, 10, 8, 0.55);
}
.char-tier-board-entry.char-tier-core .char-tier-board-chip--tier .char-tier-board-chip-deco::before,
.char-tier-board-entry.char-tier-core .char-tier-board-chip--tier .char-tier-board-chip-deco::after,
.char-id-card.char-tier-core .char-tier-board-chip--tier .char-tier-board-chip-deco::before,
.char-id-card.char-tier-core .char-tier-board-chip--tier .char-tier-board-chip-deco::after,
.char-tier-path-node.char-tier-core .char-tier-board-chip--tier .char-tier-board-chip-deco::before,
.char-tier-path-node.char-tier-core .char-tier-board-chip--tier .char-tier-board-chip-deco::after,
.char-tier-path-you-row.char-tier-core .char-tier-board-chip--tier .char-tier-board-chip-deco::before,
.char-tier-path-you-row.char-tier-core .char-tier-board-chip--tier .char-tier-board-chip-deco::after,
.char-tier-path-identity.char-tier-core .char-tier-board-chip--tier .char-tier-board-chip-deco::before,
.char-tier-path-identity.char-tier-core .char-tier-board-chip--tier .char-tier-board-chip-deco::after {
  border-color: rgba(220, 150, 205, 0.7);
}

.char-tier-board-entry.char-tier-signal .char-tier-board-chip--tier,
.char-id-card.char-tier-signal .char-tier-board-chip--tier,
.char-tier-path-node.char-tier-signal .char-tier-board-chip--tier,
.char-tier-path-you-row.char-tier-signal .char-tier-board-chip--tier,
.char-tier-path-identity.char-tier-signal .char-tier-board-chip--tier {
  border-color: rgba(90, 190, 180, 0.5);
  color: rgba(140, 220, 210, 0.96);
  background:
    linear-gradient(135deg, rgba(70, 170, 160, 0.16), transparent 55%),
    rgba(8, 10, 8, 0.55);
}
.char-tier-board-entry.char-tier-signal .char-tier-board-chip--tier .char-tier-board-chip-deco::before,
.char-tier-board-entry.char-tier-signal .char-tier-board-chip--tier .char-tier-board-chip-deco::after,
.char-id-card.char-tier-signal .char-tier-board-chip--tier .char-tier-board-chip-deco::before,
.char-id-card.char-tier-signal .char-tier-board-chip--tier .char-tier-board-chip-deco::after,
.char-tier-path-node.char-tier-signal .char-tier-board-chip--tier .char-tier-board-chip-deco::before,
.char-tier-path-node.char-tier-signal .char-tier-board-chip--tier .char-tier-board-chip-deco::after,
.char-tier-path-you-row.char-tier-signal .char-tier-board-chip--tier .char-tier-board-chip-deco::before,
.char-tier-path-you-row.char-tier-signal .char-tier-board-chip--tier .char-tier-board-chip-deco::after,
.char-tier-path-identity.char-tier-signal .char-tier-board-chip--tier .char-tier-board-chip-deco::before,
.char-tier-path-identity.char-tier-signal .char-tier-board-chip--tier .char-tier-board-chip-deco::after {
  border-color: rgba(110, 200, 190, 0.7);
}

.char-tier-board-entry.char-tier-nexus .char-tier-board-chip--tier,
.char-id-card.char-tier-nexus .char-tier-board-chip--tier,
.char-tier-path-node.char-tier-nexus .char-tier-board-chip--tier,
.char-tier-path-you-row.char-tier-nexus .char-tier-board-chip--tier,
.char-tier-path-identity.char-tier-nexus .char-tier-board-chip--tier {
  border-color: rgba(170, 140, 230, 0.52);
  color: rgba(200, 180, 255, 0.96);
  background:
    linear-gradient(135deg, rgba(150, 120, 220, 0.18), transparent 55%),
    rgba(8, 10, 8, 0.55);
}
.char-tier-board-entry.char-tier-nexus .char-tier-board-chip--tier .char-tier-board-chip-deco::before,
.char-tier-board-entry.char-tier-nexus .char-tier-board-chip--tier .char-tier-board-chip-deco::after,
.char-id-card.char-tier-nexus .char-tier-board-chip--tier .char-tier-board-chip-deco::before,
.char-id-card.char-tier-nexus .char-tier-board-chip--tier .char-tier-board-chip-deco::after,
.char-tier-path-node.char-tier-nexus .char-tier-board-chip--tier .char-tier-board-chip-deco::before,
.char-tier-path-node.char-tier-nexus .char-tier-board-chip--tier .char-tier-board-chip-deco::after,
.char-tier-path-you-row.char-tier-nexus .char-tier-board-chip--tier .char-tier-board-chip-deco::before,
.char-tier-path-you-row.char-tier-nexus .char-tier-board-chip--tier .char-tier-board-chip-deco::after,
.char-tier-path-identity.char-tier-nexus .char-tier-board-chip--tier .char-tier-board-chip-deco::before,
.char-tier-path-identity.char-tier-nexus .char-tier-board-chip--tier .char-tier-board-chip-deco::after {
  border-color: rgba(185, 160, 245, 0.72);
}

/* Identity card: same tier plate design, seal-matched height */
.char-id-card .char-hero-tier-seal .char-tier-board-chip--tier {
  width: auto;
  min-width: 5.5rem;
  min-height: 1.75rem;
  padding: 0.28rem 0.62rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  box-sizing: border-box;
}

/* Level plate: match rank gem facets (prism / sapphire / emerald) */
.char-tier-board-chip--lv {
  font-family: var(--font-display);
  font-size: 0.84rem;
  letter-spacing: 0.04em;
  padding: 0.14rem 0.48rem 0.14rem 0.52rem;
  border-style: solid;
  border-width: 1px;
  border-color: rgba(170, 178, 170, 0.4);
  color: rgba(230, 236, 230, 0.92);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 2px 0 0 rgba(230, 236, 230, 0.55);
}
.char-tier-board-chip--lv .char-tier-board-chip-deco::before {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1px dashed rgba(180, 186, 180, 0.35);
  pointer-events: none;
}

.char-tier-board-entry.is-top-1 .char-tier-board-chip--lv {
  border-color: transparent;
  color: #f2e8ff;
  background:
    linear-gradient(rgba(8, 12, 22, 0.88), rgba(8, 12, 22, 0.88)) padding-box,
    linear-gradient(
      135deg,
      #7ad7ff 0%,
      #b8a6ff 28%,
      #ff9ecf 55%,
      #7dffc8 78%,
      #9fd8ff 100%
    ) border-box;
  border: 1px solid transparent;
  box-shadow:
    inset 2px 0 0 rgba(220, 170, 255, 0.95),
    0 0 14px rgba(184, 166, 255, 0.35),
    0 0 18px rgba(255, 158, 207, 0.18);
  text-shadow: 0 0 10px rgba(210, 170, 255, 0.45);
}
.char-tier-board-entry.is-top-1 .char-tier-board-chip--lv .char-tier-board-chip-deco::before {
  border-color: rgba(210, 180, 255, 0.55);
}

.char-tier-board-entry.is-top-2 .char-tier-board-chip--lv {
  border-color: rgba(110, 175, 255, 0.85);
  color: #c8e0ff;
  background:
    linear-gradient(180deg, rgba(90, 160, 255, 0.42), rgba(30, 70, 150, 0.18) 70%, transparent),
    rgba(6, 14, 32, 0.72);
  box-shadow:
    inset 2px 0 0 rgba(160, 210, 255, 1),
    0 0 14px rgba(80, 150, 255, 0.4);
  text-shadow: 0 0 10px rgba(100, 170, 255, 0.45);
}
.char-tier-board-entry.is-top-2 .char-tier-board-chip--lv .char-tier-board-chip-deco::before {
  border-color: rgba(130, 190, 255, 0.6);
}

.char-tier-board-entry.is-top-3 .char-tier-board-chip--lv {
  border-color: rgba(90, 225, 160, 0.82);
  color: #b4ffd6;
  background:
    linear-gradient(180deg, rgba(80, 220, 150, 0.4), rgba(20, 90, 60, 0.18) 70%, transparent),
    rgba(4, 20, 14, 0.72);
  box-shadow:
    inset 2px 0 0 rgba(150, 255, 210, 1),
    0 0 14px rgba(70, 210, 150, 0.38);
  text-shadow: 0 0 10px rgba(90, 230, 160, 0.42);
}
.char-tier-board-entry.is-top-3 .char-tier-board-chip--lv .char-tier-board-chip-deco::before {
  border-color: rgba(110, 230, 170, 0.55);
}

.char-tier-board-stats {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.2rem 0.45rem;
  min-width: 0;
}

.char-tier-board-stat {
  display: grid;
  gap: 0.04rem;
  min-width: 0;
}

.char-tier-board-stat--xp {
  flex: 0 0 4.4rem;
  width: 4.4rem;
}

.char-tier-board-stat--num {
  flex: 0 0 auto;
  min-width: 2.35rem;
}

.char-tier-board-crystal {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--ach-pod-ink, #b8dcff);
  pointer-events: none;
  overflow: visible;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--ach-pod-glow, rgba(180, 210, 255, 0.55)) 65%, transparent));
}

.char-tier-board-crystal.ach-jarvis-pod--idle {
  filter: drop-shadow(0 0 5px rgba(230, 238, 255, 0.75));
  opacity: 0.95;
}

.char-tier-board-crystal .ach-jarvis-gem {
  width: 100%;
  height: 100%;
}

.char-tier-board-crystal .ach-jarvis-gem-svg {
  width: 100%;
  height: 100%;
}

.char-tier-board-crystal .ach-jarvis-orbit {
  opacity: 0.48;
}

.char-tier-board-crystal .ach-jarvis-orbit--a {
  width: 86%;
  height: 28%;
  margin-left: -43%;
  margin-top: -14%;
}

.char-tier-board-crystal .ach-jarvis-orbit--b {
  width: 64%;
  height: 22%;
  margin-left: -32%;
  margin-top: -11%;
}

.char-tier-board-crystal .ach-jarvis-orbit--c {
  width: 100%;
  height: 34%;
  margin-left: -50%;
  margin-top: -17%;
}

.char-tier-board-crystal .ach-jarvis-gem-glow {
  width: 60%;
  height: 36%;
  opacity: 0.48;
}

.char-tier-board-who .char-tier-board-seal {
  max-width: 11rem;
  min-height: 1.15rem;
  padding: 0.12rem 0.42rem 0.12rem 0.28rem;
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  line-height: 1.1;
}

.char-tier-board-stat--text {
  flex: 1 1 6.5rem;
  min-width: 5.5rem;
  max-width: 12rem;
}

.char-tier-board-stat em {
  font-style: normal;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(190, 196, 188, 0.62);
}

.char-tier-board-stat strong {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(236, 238, 234, 0.96);
  line-height: 1.15;
}

.char-tier-board-stat--text strong {
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Compact Best position / Best firm — same height as Best / Avg / Runs */
.char-tier-board-stats .char-tier-board-plate {
  flex: 0 1 8.5rem;
  align-self: center;
  min-width: 5.5rem;
  max-width: 10rem;
  min-height: 0 !important;
  height: 2.35rem;
  max-height: 2.35rem;
  box-sizing: border-box;
  gap: 0.02rem;
  padding: 0.18rem 0.5rem 0.2rem;
  margin: 0;
  align-content: center;
}

.char-tier-board-stats .char-tier-board-plate .char-stat-label {
  font-size: 0.48rem;
  letter-spacing: 0.1em;
  line-height: 1.1;
  color: rgba(200, 206, 198, 0.58);
}

.char-tier-board-stats .char-stat--seat.char-tier-board-plate {
  padding-left: 0.55rem;
  border-left-width: 2px;
}

.char-tier-board-stats .char-stat--seat.char-tier-board-plate .char-stat-value {
  font-size: 0.68rem;
  font-weight: 600;
  color: #f0e6c8;
  max-width: 100%;
  width: 100%;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  display: block;
  -webkit-line-clamp: unset;
  min-height: 0;
}

.char-tier-board-stats .char-stat--seat.char-tier-board-plate .char-stat-mark {
  top: 0.28rem;
  right: 0.32rem;
  width: 0.55rem;
  height: 0.55rem;
}

.char-tier-board-stats .char-stat--seat.char-tier-board-plate .char-stat-mark::after {
  inset: 0.12rem;
}

.char-tier-board-stats .char-stat--firm.char-tier-board-plate {
  height: 2.35rem;
  min-height: 0;
  padding: 0.16rem 0.7rem;
  border-radius: 999px;
  justify-items: center;
  text-align: center;
}

.char-tier-board-stats .char-stat--firm.char-tier-board-plate .char-stat-value {
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  max-width: 100%;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  line-height: 1.15;
  display: block;
}

.char-tier-board-stats .char-stat--firm.char-tier-board-plate .char-stat-mark {
  inset: 0.14rem;
  border-radius: 999px;
}

.char-tier-board-stat-bar {
  display: block;
  height: 0.16rem;
  margin-top: 0.08rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(140, 148, 140, 0.2);
  overflow: hidden;
}

.char-tier-board-stat-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, rgba(180, 186, 180, 0.45), rgba(245, 248, 245, 0.92));
}

.char-tier-board-empty {
  margin: 0;
  padding: 2rem 0.5rem;
  text-align: center;
  color: rgba(180, 186, 178, 0.55);
  font-size: 0.95rem;
}

/* Right-rail tech tree (tier path + district key) */
.char-tier-tree {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-height: 0;
  padding: 0.55rem 0.65rem 0.7rem;
  border: 1px solid rgba(140, 148, 140, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 30%),
    rgba(0, 0, 0, 0.28);
  clip-path: polygon(
    0 0,
    calc(100% - 10px) 0,
    100% 10px,
    100% 100%,
    10px 100%,
    0 calc(100% - 10px)
  );
}

.char-tier-tree-kicker {
  margin: 0;
  font-family: var(--font-herald);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(170, 176, 170, 0.62);
}

.char-tier-tree-districts {
  position: relative;
  display: grid;
  gap: 0.28rem;
  padding: 0.4rem 0.45rem 0.42rem;
  border: 1px solid rgba(160, 168, 160, 0.32);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent 55%),
    rgba(0, 0, 0, 0.38);
  clip-path: polygon(
    0 0,
    calc(100% - 6px) 0,
    100% 6px,
    100% 100%,
    6px 100%,
    0 calc(100% - 6px)
  );
}

.char-tier-tree-districts-kicker {
  font-family: var(--font-herald);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(190, 196, 188, 0.65);
}

.char-tier-tree-districts-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.22rem;
}

.char-tier-tree-district {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 1.55rem;
  margin: 0;
  padding: 0;
  font: inherit;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(230, 234, 228, 0.92);
  border: 1px solid rgba(160, 168, 160, 0.38);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

.char-tier-tree-district[data-filter-district=""] {
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.char-tier-tree-district-deco {
  pointer-events: none;
  position: absolute;
  inset: 0;
}
.char-tier-tree-district-deco::before,
.char-tier-tree-district-deco::after {
  content: "";
  position: absolute;
  width: 0.28rem;
  height: 0.28rem;
  border-color: rgba(200, 206, 198, 0.45);
  border-style: solid;
}
.char-tier-tree-district-deco::before {
  top: 1px;
  left: 1px;
  border-width: 1px 0 0 1px;
}
.char-tier-tree-district-deco::after {
  right: 1px;
  bottom: 1px;
  border-width: 0 1px 1px 0;
}

.char-tier-tree-district.is-high {
  border-color: rgba(220, 226, 218, 0.55);
  color: rgba(248, 250, 246, 0.98);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 70%),
    rgba(0, 0, 0, 0.45);
}
.char-tier-tree-district.is-low {
  opacity: 0.72;
  color: rgba(190, 196, 188, 0.78);
}

.char-tier-tree-district:hover {
  border-color: rgba(210, 170, 90, 0.45);
  color: #f3df9a;
  opacity: 1;
}

.char-tier-tree-district.is-yours:not(.is-on) {
  box-shadow: inset 0 0 0 1px rgba(232, 214, 160, 0.12);
}

.char-tier-tree-district.is-on {
  border-color: rgba(232, 214, 160, 0.7);
  color: #12120e;
  opacity: 1;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 0 10px rgba(210, 180, 100, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 236, 180, 0.98), rgba(210, 170, 90, 0.92));
  text-shadow: none;
}
.char-tier-tree-district.is-on .char-tier-tree-district-deco::before,
.char-tier-tree-district.is-on .char-tier-tree-district-deco::after {
  border-color: rgba(40, 36, 20, 0.45);
}

.char-tier-tree-districts-hint {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(160, 168, 160, 0.58);
}

.char-tier-tree-frame {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  padding: 0.25rem 0 0.15rem 0.15rem;
}

.char-tier-tree-trunk {
  position: absolute;
  left: 1.05rem;
  top: 0.55rem;
  bottom: 0.55rem;
  width: 2px;
  background: linear-gradient(
    180deg,
    rgba(255, 230, 160, 0.55),
    rgba(180, 190, 180, 0.35) 45%,
    rgba(140, 150, 140, 0.25)
  );
  box-shadow: 0 0 10px rgba(210, 190, 140, 0.18);
}

.char-tier-tree-nodes {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  gap: 0.28rem;
  align-content: space-between;
  flex: 1;
  min-height: 18rem;
}

.char-tier-tree-nodes > li {
  min-width: 0;
}

.char-tier-tree-node {
  position: relative;
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr);
  gap: 0.4rem;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0.28rem 0.4rem 0.28rem 0.05rem;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  opacity: 0.72;
  transition: opacity 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.char-tier-tree-node:hover {
  opacity: 1;
  border-color: rgba(160, 168, 160, 0.28);
  background: rgba(255, 255, 255, 0.03);
}

.char-tier-tree-jarvis {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  justify-self: start;
  filter: drop-shadow(0 0 6px rgba(180, 190, 180, 0.22));
  transition: transform 0.15s ease, filter 0.15s ease;
}

.char-tier-tree-jarvis-canvas {
  width: 1.85rem;
  height: 1.85rem;
  display: block;
  pointer-events: none;
}

.char-tier-tree-copy {
  display: grid;
  gap: 0.05rem;
  min-width: 0;
}
.char-tier-tree-copy strong {
  font-family: var(--font-herald);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(220, 224, 218, 0.88);
  line-height: 1.1;
}
.char-tier-tree-copy em {
  font-style: normal;
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  color: rgba(160, 168, 160, 0.55);
}

.char-tier-tree-node.is-all .char-tier-tree-jarvis {
  filter: drop-shadow(0 0 8px rgba(230, 236, 228, 0.35));
}
.char-tier-tree-node.is-spark .char-tier-tree-jarvis {
  filter: drop-shadow(0 0 8px rgba(150, 170, 190, 0.35));
}
.char-tier-tree-node.is-circuit .char-tier-tree-jarvis {
  filter: drop-shadow(0 0 8px rgba(255, 150, 70, 0.38));
}
.char-tier-tree-node.is-lattice .char-tier-tree-jarvis {
  filter: drop-shadow(0 0 8px rgba(120, 180, 110, 0.35));
}
.char-tier-tree-node.is-core .char-tier-tree-jarvis {
  filter: drop-shadow(0 0 8px rgba(190, 100, 170, 0.38));
}
.char-tier-tree-node.is-signal .char-tier-tree-jarvis {
  filter: drop-shadow(0 0 8px rgba(70, 170, 160, 0.38));
}
.char-tier-tree-node.is-nexus .char-tier-tree-jarvis {
  filter: drop-shadow(0 0 10px rgba(150, 120, 220, 0.42));
}

.char-tier-tree-node.is-yours:not(.is-on) {
  opacity: 0.9;
  border-color: rgba(160, 168, 160, 0.22);
}

.char-tier-tree-node.is-on {
  opacity: 1;
  border-color: rgba(220, 226, 218, 0.35);
  background:
    radial-gradient(ellipse 90% 140% at 20% 50%, rgba(255, 255, 255, 0.1), transparent 60%),
    rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.char-tier-tree-node.is-on .char-tier-tree-copy strong {
  color: rgba(248, 250, 246, 0.98);
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
}
.char-tier-tree-node.is-on .char-tier-tree-jarvis {
  transform: scale(1.08);
}

@media (max-width: 860px) {
  .char-tier-board-split {
    grid-template-columns: minmax(0, 1fr) minmax(11rem, 13.5rem);
  }
}

@media (max-width: 720px) {
  .char-tier-board {
    inset: 1rem;
  }
  .char-tier-board-card {
    padding: 1rem 0.9rem 1.05rem;
  }
  .char-tier-board-split {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
  }
  .char-tier-tree {
    order: -1;
    max-height: 11rem;
  }
  .char-tier-tree-nodes {
    grid-auto-flow: column;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-template-rows: auto;
    min-height: 0;
    gap: 0.25rem;
  }
  .char-tier-tree-trunk {
    display: none;
  }
  .char-tier-tree-node {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: 0.2rem 0.15rem;
  }
  .char-tier-tree-jarvis {
    width: 1.65rem;
    height: 1.65rem;
  }
  .char-tier-tree-jarvis-canvas {
    width: 1.45rem;
    height: 1.45rem;
  }
  .char-tier-tree-copy em {
    display: none;
  }
  .char-tier-tree-copy strong {
    font-size: 0.58rem;
    letter-spacing: 0.04em;
  }
  .char-tier-board-entry {
    grid-template-columns: 3.1rem minmax(0, 1fr);
    gap: 0.3rem;
  }
  .char-tier-board-place-n {
    font-size: 1.25rem;
  }
  .char-tier-board-row {
    grid-template-columns: 2.35rem minmax(0, 1fr) 5.2rem;
    padding: 0.35rem 0.4rem 0.38rem 0.5rem;
  }
  .char-tier-board-chips {
    width: 5.2rem;
    min-width: 5.2rem;
  }
  .char-tier-board-stats {
    gap: 0.18rem 0.35rem;
  }
  .char-tier-board-stats .char-tier-board-plate {
    flex: 1 1 0;
    min-width: 4.5rem;
    max-width: none;
  }
}

.char-xp-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.char-xp-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(232, 239, 233, 0.5);
}

.char-xp-nums {
  font-size: 0.78rem;
  color: rgba(232, 239, 233, 0.78);
}

.char-xp-total {
  color: rgba(232, 239, 233, 0.45);
}

.char-xp-track {
  height: 0.42rem;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
  border: 1px solid rgba(201, 165, 116, 0.2);
}

.char-xp-fill {
  display: block;
  height: 100%;
  border-radius: 1px;
  background: linear-gradient(90deg, rgba(168, 134, 92, 0.75), rgba(243, 223, 154, 0.95));
  box-shadow: 0 0 10px rgba(201, 165, 116, 0.35);
  transition: width 0.45s ease;
}

/* SAO EXP bar — identity card */
.char-xp--sao .char-xp-top {
  margin-bottom: 0.4rem;
  align-items: center;
}

.char-xp--sao .char-xp-label {
  font-family: var(--font-herald);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: rgba(201, 165, 116, 0.85);
  text-shadow: 0 0 10px rgba(201, 165, 116, 0.25);
}

.char-xp--sao .char-xp-nums {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.35rem;
  font-family: var(--font-herald);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(236, 240, 230, 0.88);
  font-variant-numeric: tabular-nums;
}

.char-xp--sao .char-xp-cur {
  color: #f3df9a;
  text-shadow: 0 0 10px rgba(201, 165, 116, 0.35);
}

.char-xp--sao .char-xp-sep {
  color: rgba(168, 134, 92, 0.55);
}

.char-xp--sao .char-xp-need,
.char-xp--sao .char-xp-cap {
  color: rgba(210, 216, 208, 0.78);
}

.char-xp--sao .char-xp-total {
  margin-left: 0.25rem;
  padding-left: 0.45rem;
  border-left: 1px solid rgba(168, 134, 92, 0.35);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: rgba(170, 176, 168, 0.62);
}

.char-xp--sao .char-xp-track {
  position: relative;
  height: 0.72rem;
  border-radius: 0;
  clip-path: polygon(
    0 0,
    calc(100% - 8px) 0,
    100% 8px,
    100% 100%,
    8px 100%,
    0 calc(100% - 8px)
  );
  border: 1px solid rgba(201, 165, 116, 0.45);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 55%),
    rgba(0, 0, 0, 0.55);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.45),
    0 0 14px rgba(201, 165, 116, 0.08);
  overflow: hidden;
}

.char-xp--sao .char-xp-track-ticks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  box-shadow:
    inset 2px 0 0 rgba(201, 165, 116, 0.35),
    inset -2px 0 0 rgba(201, 165, 116, 0.2);
}

.char-xp--sao .char-xp-track-ticks::before,
.char-xp--sao .char-xp-track-ticks::after {
  content: "";
  position: absolute;
  width: 0.4rem;
  height: 0.4rem;
  border-color: rgba(243, 223, 154, 0.7);
  border-style: solid;
}
.char-xp--sao .char-xp-track-ticks::before {
  top: 1px;
  left: 1px;
  border-width: 1px 0 0 1px;
}
.char-xp--sao .char-xp-track-ticks::after {
  right: 1px;
  bottom: 1px;
  border-width: 0 1px 1px 0;
}

.char-xp--sao .char-xp-fill {
  position: relative;
  z-index: 1;
  height: 100%;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(255, 245, 200, 0.55), transparent 45%),
    linear-gradient(90deg, rgba(160, 110, 40, 0.95), rgba(243, 223, 154, 1) 55%, rgba(255, 236, 170, 0.95));
  box-shadow:
    0 0 16px rgba(201, 165, 116, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.char-xp--sao .char-xp-fill-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.35) 48%,
    transparent 62%
  );
  background-size: 220% 100%;
  animation: char-xp-sheen 3.8s ease-in-out infinite;
}

.char-xp--sao .char-xp-segments {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent 11px,
    rgba(0, 0, 0, 0.28) 11px,
    rgba(0, 0, 0, 0.28) 12px
  );
  mix-blend-mode: multiply;
  opacity: 0.55;
}

@keyframes char-xp-sheen {
  0%,
  100% { background-position: 120% 0; opacity: 0.35; }
  50% { background-position: -20% 0; opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
  .char-xp--sao .char-xp-fill-sheen {
    animation: none;
    opacity: 0.35;
  }
}

@media (max-width: 560px) {
  .char-hero {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .char-id-card > .char-hud,
  .char-id-card > .char-hero-copy {
    grid-column: 1;
  }
  .char-id-card > .char-hud {
    grid-row: 2;
  }
  .char-id-card > .char-hero-copy {
    grid-row: 3;
  }
  .char-id-card > .char-summary {
    grid-row: 4;
  }
  .char-hero-meta {
    justify-items: center;
    width: 100%;
    grid-template-columns: 1fr;
  }
  .char-hero-meta:has(.char-id-podium.is-empty),
  .char-hero-meta:has(.char-id-podium[hidden]) {
    grid-template-columns: 1fr;
  }
  .char-hero-meta-main {
    width: 100%;
    justify-items: center;
  }
  .char-hero-meta-row {
    justify-content: center;
  }
  .char-id-podium {
    justify-self: center;
  }
  .char-hero-seal,
  .char-hero-tier-seal {
    align-items: center;
  }
  .char-seal-chip {
    max-width: 8.5rem;
  }
  .char-rank-btn {
    text-align: left;
  }
  .char-xp-top {
    flex-direction: column;
    align-items: center;
  }
}

/* EXP reward chip — numerosity + magnitude tiers + reveal payoff */
.rpg-xp-chip {
  --xp-ink: var(--accent-hot);
  --xp-edge: rgba(201, 165, 116, 0.5);
  --xp-wash: rgba(201, 165, 116, 0.12);
  --xp-num-size: 0.95rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.55rem;
  padding: 0.28rem 0.55rem 0.28rem 0.45rem;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--xp-edge);
  border-radius: 3px;
  color: var(--xp-ink);
  background:
    linear-gradient(180deg, rgba(255, 236, 180, 0.08) 0%, transparent 42%),
    var(--xp-wash);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 180, 0.14),
    0 0 0 1px rgba(0, 0, 0, 0.35);
}

html.has-xp-chip-js .rpg-xp-chip:not(.is-live) {
  opacity: 0;
  transform: translateY(6px) scale(0.92);
}

.rpg-xp-chip.is-live {
  opacity: 1;
  transform: none;
  animation: rpg-xp-chip-pop 0.62s cubic-bezier(0.22, 1.35, 0.36, 1) both;
  animation-delay: var(--xp-stagger, 0s);
}

.rpg-xp-chip-sheen {
  position: absolute;
  inset: -20% -40%;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 236, 180, 0.28) 48%,
    transparent 62%
  );
  transform: translateX(-55%);
  pointer-events: none;
  z-index: 0;
}

.rpg-xp-chip.is-live .rpg-xp-chip-sheen {
  animation: rpg-xp-chip-sheen 0.85s ease-out 0.12s both;
}

.rpg-xp-chip-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  background:
    radial-gradient(circle at 18% 50%, rgba(255, 220, 140, 0.35), transparent 42%),
    radial-gradient(circle at 78% 40%, rgba(201, 165, 116, 0.22), transparent 38%);
}

.rpg-xp-chip.is-live .rpg-xp-chip-burst {
  animation: rpg-xp-chip-burst 0.7s ease-out both;
}

.rpg-xp-chip-body {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 0.12rem;
  line-height: 1;
}

.rpg-xp-chip-sign {
  font-family: var(--font-display);
  font-size: calc(var(--xp-num-size) * 0.78);
  font-weight: 700;
  color: rgba(255, 236, 180, 0.92);
  transform: translateY(-0.02em);
}

.rpg-xp-chip-num {
  font-family: var(--font-display);
  font-size: var(--xp-num-size);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  min-width: 1.1ch;
  color: #e2c899;
  text-shadow: 0 0 12px rgba(201, 165, 116, 0.28);
}

.rpg-xp-chip-unit {
  margin-left: 0.18rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(201, 165, 116, 0.78);
}

.rpg-xp-chip-tag {
  position: relative;
  z-index: 1;
  padding: 0.12rem 0.32rem;
  border: 1px solid rgba(168, 134, 92, 0.28);
  border-radius: 2px;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(197, 212, 200, 0.72);
  background: rgba(0, 0, 0, 0.28);
  white-space: nowrap;
}

.rpg-xp-chip-tag--full {
  color: rgba(255, 228, 160, 0.95);
  border-color: rgba(201, 165, 116, 0.45);
  background: rgba(201, 165, 116, 0.14);
}

/* Magnitude tiers — bigger gains feel more “jackpot” (variable reward) */
.rpg-xp-chip--surge {
  --xp-edge: rgba(201, 165, 116, 0.62);
  --xp-wash: rgba(201, 165, 116, 0.16);
  --xp-num-size: 1.05rem;
}

.rpg-xp-chip--blaze {
  --xp-edge: rgba(240, 200, 110, 0.78);
  --xp-wash: rgba(240, 180, 80, 0.18);
  --xp-num-size: 1.15rem;
}

.rpg-xp-chip--apex {
  --xp-edge: rgba(255, 214, 120, 0.9);
  --xp-wash: rgba(255, 190, 70, 0.2);
  --xp-num-size: 1.28rem;
}

.rpg-xp-chip--apex .rpg-xp-chip-num {
  text-shadow:
    0 0 10px rgba(255, 210, 120, 0.4),
    0 0 22px rgba(232, 160, 60, 0.22);
}

.rpg-xp-chip--hero {
  margin-top: 0.65rem;
  padding: 0.38rem 0.7rem 0.38rem 0.55rem;
  gap: 0.42rem;
  --xp-num-size: 1.35rem;
}

.rpg-xp-chip--hero.rpg-xp-chip--surge {
  --xp-num-size: 1.45rem;
}

.rpg-xp-chip--hero.rpg-xp-chip--blaze {
  --xp-num-size: 1.55rem;
}

.rpg-xp-chip--hero.rpg-xp-chip--apex {
  --xp-num-size: 1.7rem;
}

.rpg-xp-chip--hero .rpg-xp-chip-unit {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
}

.rpg-xp-chip--hero .rpg-xp-chip-tag {
  font-size: 0.62rem;
  padding: 0.16rem 0.38rem;
}

.rpg-xp-chip--hist {
  margin-top: 0;
  padding: 0.16rem 0.4rem 0.16rem 0.34rem;
  gap: 0.28rem;
  --xp-num-size: 0.82rem;
}

.rpg-xp-chip--hist.rpg-xp-chip--surge {
  --xp-num-size: 0.88rem;
}

.rpg-xp-chip--hist.rpg-xp-chip--blaze,
.rpg-xp-chip--hist.rpg-xp-chip--apex {
  --xp-num-size: 0.94rem;
}

.rpg-xp-chip--hist .rpg-xp-chip-unit {
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  margin-left: 0.12rem;
}

.rpg-xp-chip--hist .rpg-xp-chip-tag {
  font-size: 0.52rem;
  padding: 0.08rem 0.26rem;
  letter-spacing: 0.06em;
}

.rpg-xp-chip.is-half {
  --xp-edge: rgba(170, 185, 200, 0.38);
  --xp-wash: rgba(120, 140, 160, 0.1);
}

.rpg-xp-chip.is-half .rpg-xp-chip-num {
  color: rgba(220, 230, 236, 0.92);
  text-shadow: none;
}

.rpg-xp-chip.is-half .rpg-xp-chip-sign,
.rpg-xp-chip.is-half .rpg-xp-chip-unit {
  color: rgba(170, 185, 200, 0.78);
}

@keyframes rpg-xp-chip-pop {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.86);
  }
  58% {
    opacity: 1;
    transform: translateY(-2px) scale(1.06);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes rpg-xp-chip-sheen {
  from {
    transform: translateX(-55%);
  }
  to {
    transform: translateX(55%);
  }
}

@keyframes rpg-xp-chip-burst {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.15);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rpg-xp-chip,
  .rpg-xp-chip.is-live {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .rpg-xp-chip.is-live .rpg-xp-chip-sheen,
  .rpg-xp-chip.is-live .rpg-xp-chip-burst {
    animation: none;
    opacity: 0;
  }
}

/* Character status score records — four plates inside the hero frame */
.char-hero > .char-summary {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(170, 185, 200, 0.16);
}

.char-summary {
  display: grid;
  grid-template-columns:
    minmax(0, 0.72fr)
    minmax(0, 0.72fr)
    minmax(0, 1.15fr)
    minmax(0, 1.55fr);
  gap: 0.65rem;
  margin: 0 0 1.35rem;
}

@media (max-width: 900px) {
  .char-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .char-summary {
    grid-template-columns: 1fr;
  }
}

.char-stat {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.28rem;
  min-width: 0;
  min-height: 4.5rem;
  padding: 0.6rem 0.75rem 0.65rem;
  overflow: hidden;
  isolation: isolate;
}

.char-stat-label {
  position: relative;
  z-index: 1;
  font-family: var(--font-herald);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(232, 239, 233, 0.52);
}

.char-stat-value {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--accent-hot);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.char-stat-value small {
  font-size: 0.55em;
  margin-left: 0.05em;
  opacity: 0.75;
}

.char-stat-mark {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

/* 1 · Avg run — steady baseline gauge */
.char-stat--avg {
  border: 1px solid rgba(201, 165, 116, 0.22);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(20, 22, 16, 0.28), rgba(8, 9, 7, 0.22));
}

.char-stat--avg .char-stat-value {
  font-size: 1.85rem;
  font-variant-numeric: tabular-nums;
}

.char-stat--avg .char-stat-meter {
  position: relative;
  z-index: 1;
  display: block;
  height: 0.28rem;
  margin-top: 0.35rem;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.char-stat--avg .char-stat-meter::after {
  content: "";
  display: block;
  height: 100%;
  width: calc(var(--stat, 0) * 1%);
  max-width: 100%;
  background: linear-gradient(90deg, rgba(160, 140, 80, 0.55), rgba(201, 165, 116, 0.9));
}

.char-stat--avg .char-stat-mark {
  right: -0.4rem;
  bottom: -0.6rem;
  width: 3.2rem;
  height: 3.2rem;
  border: 1px solid rgba(201, 165, 116, 0.18);
  border-radius: 50%;
  opacity: 0.7;
}

/* 2 · Best run — peak spike */
.char-stat--peak {
  border: 1px solid rgba(243, 223, 154, 0.45);
  border-radius: 4px 4px 4px 0;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255, 220, 140, 0.12), transparent 50%),
    linear-gradient(155deg, rgba(42, 34, 16, 0.32), rgba(10, 10, 8, 0.22));
  box-shadow: inset 0 1px 0 rgba(255, 236, 180, 0.12);
}

.char-stat--peak .char-stat-label {
  color: rgba(243, 223, 154, 0.7);
}

.char-stat--peak .char-stat-value {
  font-size: 2.05rem;
  font-weight: 700;
  color: #e2c899;
  text-shadow: 0 0 18px rgba(201, 165, 116, 0.35);
}

.char-stat--peak .char-stat-peakline {
  position: relative;
  z-index: 1;
  display: block;
  height: 1.15rem;
  margin-top: 0.15rem;
  background:
    linear-gradient(90deg, transparent 0%, rgba(201, 165, 116, 0.15) 40%, transparent 40%),
    linear-gradient(
      135deg,
      transparent 48%,
      rgba(243, 223, 154, 0.95) 48%,
      rgba(243, 223, 154, 0.95) 52%,
      transparent 52%
    );
  background-size: 100% 1px, 100% 100%;
  background-position: center, center;
  background-repeat: no-repeat;
  opacity: 0.85;
}

.char-stat--peak .char-stat-mark {
  top: 0.45rem;
  right: 0.55rem;
  width: 0;
  height: 0;
  border-left: 0.35rem solid transparent;
  border-right: 0.35rem solid transparent;
  border-bottom: 0.55rem solid rgba(243, 223, 154, 0.85);
  filter: drop-shadow(0 0 6px rgba(201, 165, 116, 0.55));
}

/* 3 · Best position — seat nameplate */
.char-stat--seat {
  border: none;
  border-left: 3px solid var(--accent);
  border-radius: 0 4px 4px 0;
  background:
    linear-gradient(90deg, rgba(201, 165, 116, 0.1), transparent 42%),
    rgba(0, 0, 0, 0.38);
  padding: 0.55rem 0.7rem 0.55rem 0.85rem;
  align-content: center;
}

.char-stat--seat .char-stat-value {
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #f0e6c8;
  max-width: 100%;
  width: 100%;
  min-width: 0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  box-sizing: border-box;
}

/* Identity card (main menu + nameless record) — larger Best Position, wrap up to 2 lines.
   Rank-list rows keep compact sizing via .char-tier-board-plate overrides. */
.char-id-card .char-stat--seat {
  min-height: 4rem;
}

.char-id-card .char-stat--seat .char-stat-value {
  font-size: 1.1rem;
  line-height: 1.18;
  white-space: normal;
  overflow: visible;
}

.char-stat--seat .char-stat-mark {
  top: 0.45rem;
  right: 0.55rem;
  width: 0.85rem;
  height: 0.85rem;
  border: 1px solid rgba(201, 165, 116, 0.35);
  transform: rotate(45deg);
  opacity: 0.55;
}

.char-stat--seat .char-stat-mark::after {
  content: "";
  position: absolute;
  inset: 0.18rem;
  background: rgba(201, 165, 116, 0.35);
}

/* 4 · Best firm — seal / stamp */
.char-stat--firm {
  border: 1px dashed rgba(201, 165, 116, 0.4);
  border-radius: 999px;
  text-align: center;
  justify-items: center;
  align-content: center;
  background:
    radial-gradient(circle at 50% 45%, rgba(201, 165, 116, 0.12), transparent 62%),
    rgba(6, 7, 5, 0.72);
  min-height: 4.5rem;
  padding: 0.5rem 0.85rem;
}

.char-stat--firm .char-stat-label {
  letter-spacing: 0.18em;
}

.char-stat--firm .char-stat-value {
  font-family: var(--font-herald);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-hot);
  max-width: 100%;
  width: 100%;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  box-sizing: border-box;
}

.char-stat--firm .char-stat-mark {
  inset: 0.28rem;
  border: 1px solid rgba(201, 165, 116, 0.16);
  border-radius: 999px;
}

.portal-page .char-stat--avg .char-stat-value,
.portal-page .char-stat--peak .char-stat-value {
  font-family: var(--font-display);
}

.admin-user-section-dialog-body .char-rank-slot {
  margin-top: 0.85rem;
}

.char-section-title {
  margin: 0 0 0.65rem;
  font-family: var(--font-herald);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.char-ability-list,
.char-improve-list {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}

.char-ability,
.char-improve {
  padding: 0.85rem 0.95rem;
  border: 1px solid rgba(232, 239, 233, 0.12);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.28);
}

.char-ability-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
}

.char-ability-name {
  display: block;
  color: var(--paper);
}

.char-ability-blurb {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.82rem;
  color: var(--paper-dim);
}

.char-ability-score {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--accent-hot);
}

.char-ability-score small {
  margin-left: 0.2rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--paper-dim);
}

.char-ability-track {
  height: 0.45rem;
  border-radius: 999px;
  background: rgba(232, 239, 233, 0.08);
  overflow: hidden;
}

.char-ability-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(168, 134, 92, 0.55), rgba(201, 165, 116, 0.95));
}

.char-footnote {
  margin: -0.55rem 0 1.25rem;
  font-size: 0.78rem;
  color: rgba(197, 212, 200, 0.55);
}

.char-improve-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.35rem;
}

.char-improve p {
  margin: 0 0 0.45rem;
  color: var(--paper-dim);
  font-size: 0.9rem;
}

.char-improve-link {
  font-size: 0.82rem;
  color: var(--accent-hot);
}

.char-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.55rem;
  margin: 0.35rem 0 0;
}

.admin-grant-form {
  max-width: none;
  width: 100%;
  gap: 0.75rem;
}

#panel-grant-rsv .admin-panel-head {
  margin-bottom: 0.55rem;
}

.admin-stage:has(#panel-grant-rsv.is-active:not([hidden])) {
  /* Let account dropdown paint past the panel edge */
  overflow: visible;
}

#panel-grant-rsv.admin-panel.is-active {
  display: flex;
  flex-direction: column;
  /* Hug content — no empty stretch under Account */
  height: auto;
  max-height: calc(100% - 0.35rem);
  min-height: 0;
  overflow: visible;
  box-sizing: border-box;
  padding-bottom: 0.85rem;
  color: var(--stats-paper);
  font-family: var(--stats-mono);
}

#panel-grant-rsv .admin-grant-roster-head {
  flex: 0 0 auto;
  margin-bottom: 0.55rem;
}

#panel-grant-rsv .admin-grant-roster-head .admin-panel-kicker {
  margin: 0;
  font-family: var(--font-herald);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stats-gold);
}

#panel-grant-rsv .admin-grant-ledger-tools {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.55rem 0 0;
  border: 0;
  border-top: 1px solid var(--stats-line-soft);
  background: transparent;
  overflow: visible;
  position: relative;
  z-index: 6;
}

#panel-grant-rsv .admin-grant-account {
  display: grid;
  gap: 0.35rem;
  width: 100%;
  max-width: none;
  overflow: visible;
}

/* Search + tags only — label sits above this frame */
#panel-grant-rsv .admin-grant-account-frame {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 0.45rem;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0.55rem 0.65rem 0.55rem;
  border: 1px solid var(--stats-line);
  border-radius: var(--frame-radius, 3px);
  background: var(--stats-panel);
  box-shadow: inset 0 0 0 1px rgba(168, 134, 92, 0.1);
  overflow: visible;
}

#panel-grant-rsv .admin-grant-account-frame::after {
  content: "";
  position: absolute;
  inset: 0.35rem;
  z-index: 0;
  pointer-events: none;
  border: 1px solid var(--stats-line-soft);
  border-radius: 2px;
}

#panel-grant-rsv .admin-grant-account-frame > * {
  position: relative;
  z-index: 1;
}

/* ACCOUNT left · hint right — same row, above search frame */
#panel-grant-rsv .admin-grant-account-head {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  min-width: 0;
  width: 100%;
}

/* Match Seat calendar title; sit flush above search frame, left */
#panel-grant-rsv .admin-grant-section {
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  font-family: var(--font-herald);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stats-paper, rgba(232, 239, 233, 0.92));
}

#panel-grant-rsv .admin-grant-account-field {
  margin: 0;
  min-width: 0;
  width: 100%;
  max-width: none;
  flex: 1 1 auto;
  /* Dropdown stacks above tags/hint so results are not obscured */
  position: relative;
  z-index: 12;
  overflow: visible;
}

#panel-grant-rsv .admin-grant-account .ledger-combo,
#panel-grant-rsv .admin-grant-account .user-combo {
  width: 100%;
  overflow: visible;
}

#panel-grant-rsv .admin-grant-account .ledger-combo .user-combo-shell {
  width: 100%;
  min-height: 2.05rem;
  border: 1px solid var(--stats-line);
  border-radius: 1px;
  background: var(--stats-detail);
}

#panel-grant-rsv .admin-grant-account .ledger-combo .user-combo-input {
  min-height: 2.05rem;
  padding: 0.35rem 0.45rem;
  font-family: var(--stats-mono);
  font-size: 0.74rem;
  color: var(--stats-paper);
  background: transparent;
}

#panel-grant-rsv .admin-grant-account .ledger-combo .user-combo-toggle {
  color: var(--stats-gold-dim);
}

#panel-grant-rsv .admin-grant-account .user-combo-menu {
  z-index: 40;
  max-height: min(18rem, 42vh);
  padding: 0;
  border: 1px solid var(--stats-line, rgba(168, 134, 92, 0.28));
  border-radius: 2px;
  background: #0c0d10;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.35);
}

#panel-grant-rsv .admin-grant-account .user-combo-menu [role="option"] {
  margin: 0;
  padding: 0.55rem 0.7rem;
  border-radius: 0;
  border-bottom: 1px solid rgba(168, 134, 92, 0.22);
  background: #0c0d10;
  color: var(--stats-paper, rgba(232, 239, 233, 0.92));
}

#panel-grant-rsv .admin-grant-account .user-combo-menu [role="option"]:last-child {
  border-bottom: 0;
}

#panel-grant-rsv .admin-grant-account .user-combo-menu [role="option"]:hover,
#panel-grant-rsv .admin-grant-account .user-combo-menu [role="option"].is-active {
  background: rgba(201, 165, 116, 0.1);
  color: var(--stats-gold, var(--accent-hot));
}

#panel-grant-rsv .admin-grant-account .user-combo-menu .user-combo-empty {
  border-bottom: 0;
  color: var(--stats-muted);
  cursor: default;
}

#panel-grant-rsv .admin-grant-account .user-combo-menu [role="option"].is-tagged,
#panel-grant-rsv .admin-grant-account .user-combo-menu [role="option"][hidden] {
  display: none !important;
}

#panel-grant-rsv .grant-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  min-height: 0;
  position: relative;
  z-index: 1;
}

#panel-grant-rsv .grant-tags:empty {
  display: none;
}

#panel-grant-rsv .cal-day-dialog-candidates--manage .cal-cand-tags.grant-tags:empty {
  display: flex;
  min-height: 2.5rem;
}

/* Divider between search and tags only when tags are present — foot layout legacy */
#panel-grant-rsv .cal-manage-account > .grant-tags:not(:empty) {
  margin-top: 0.15rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--stats-line-soft);
}

/* Tag chips — compact booked-card look; account name only */
#panel-grant-rsv .grant-tags .tag,
#panel-grant-rsv [data-grant-tags] .grant-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.28rem 0.5rem;
  font-family: var(--stats-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid rgba(168, 134, 92, 0.28);
  border-radius: 1px;
  background:
    linear-gradient(180deg, rgba(28, 26, 22, 0.55) 0%, rgba(12, 13, 16, 0.96) 100%);
  color: rgba(232, 239, 233, 0.92);
  cursor: pointer;
  box-shadow: none;
  text-align: left;
}

#panel-grant-rsv .cal-cand-tags.grant-tags {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0.3rem;
  padding-left: 0.35rem;
  border-left: 0.1rem solid rgba(201, 165, 116, 0.72);
}

#panel-grant-rsv .cal-cand-tags .grant-tag {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
  gap: 0.35rem;
  min-height: 0;
  padding: 0.32rem 0.45rem;
  font-size: 0.7rem;
  font-weight: 500;
  border: 1px solid rgba(120, 196, 160, 0.4);
  background:
    linear-gradient(180deg, rgba(40, 72, 58, 0.42) 0%, rgba(12, 18, 15, 0.96) 100%);
  color: var(--stats-paper, rgba(232, 239, 233, 0.92));
}

#panel-grant-rsv [data-grant-tags] .grant-tag:hover,
#panel-grant-rsv [data-grant-tags] .grant-tag:focus-visible {
  border-color: rgba(120, 196, 160, 0.7);
  background:
    linear-gradient(180deg, rgba(48, 84, 66, 0.5) 0%, rgba(14, 20, 17, 0.98) 100%);
  outline: none;
}

#panel-grant-rsv .cal-cand-tags .grant-tag.is-selected {
  border-color: rgba(120, 196, 160, 0.85);
  background:
    linear-gradient(180deg, rgba(52, 98, 74, 0.58) 0%, rgba(14, 22, 18, 0.98) 100%);
  box-shadow: inset 0 0 0 1px rgba(120, 196, 160, 0.28);
}

#panel-grant-rsv [data-grant-tags] .grant-tag.is-booked {
  opacity: 0.5;
  cursor: not-allowed;
  border-color: rgba(148, 136, 118, 0.4);
  background:
    linear-gradient(180deg, rgba(28, 26, 22, 0.55) 0%, rgba(12, 13, 16, 0.96) 100%);
}

#panel-grant-rsv [data-grant-tags] .grant-tag.is-booked.is-selected {
  box-shadow: none;
}

#panel-grant-rsv .cal-cand-tags .grant-tag-email {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--stats-paper, rgba(232, 239, 233, 0.92));
  font-weight: 500;
}

#panel-grant-rsv [data-grant-tags] .grant-tag-x {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 1.85rem;
  min-height: 1.85rem;
  margin: -0.2rem -0.15rem -0.2rem 0;
  padding: 0;
  border: 1px solid rgba(120, 196, 160, 0.35);
  border-radius: 1px;
  background: rgba(8, 12, 10, 0.65);
  color: rgba(220, 232, 224, 0.92);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

#panel-grant-rsv [data-grant-tags] .grant-tag-x:hover,
#panel-grant-rsv [data-grant-tags] .grant-tag-x:focus-visible {
  border-color: rgba(201, 165, 116, 0.75);
  background: rgba(40, 28, 18, 0.9);
  color: #f4eee3;
  outline: none;
}

/* Tag list fills TAG panel (hint removed) */
#panel-grant-rsv .cal-cand-section--tags .cal-cand-tags {
  flex: 1 1 auto;
  min-height: 0;
}

#panel-grant-rsv .admin-grant-book {
  flex: 0 0 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0.15rem 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

#panel-grant-rsv .admin-grant-book-head {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.3rem 1rem;
  margin: 0 0 0.45rem;
  padding: 0 0 0.4rem;
  border-bottom: 1px solid var(--stats-line-soft);
}

#panel-grant-rsv .admin-grant-book-title {
  margin: 0;
  flex: 0 0 auto;
  font-family: var(--font-herald);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stats-paper, rgba(232, 239, 233, 0.92));
}

#panel-grant-rsv .admin-grant-book-note {
  margin: 0;
  font-family: var(--stats-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stats-muted);
}

#panel-grant-rsv .admin-grant-book-inner {
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
  padding: 0.15rem 0 0;
  scrollbar-width: none;
  background: transparent;
}

#panel-grant-rsv .admin-grant-book-inner::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

#panel-grant-rsv .admin-grant-book .cal {
  margin-top: 0;
}

#panel-grant-rsv .cal-month-title {
  font-family: var(--stats-mono);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stats-paper, var(--paper, #f4eee3));
}

#panel-grant-rsv .cal-weekday {
  font-family: var(--stats-mono);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--stats-gold-dim);
}

#panel-grant-rsv .cal-day {
  border-radius: 1px;
  border-color: var(--stats-line-soft);
  background: var(--stats-detail);
  color: var(--stats-muted);
  font-family: var(--stats-mono);
}

#panel-grant-rsv .cal-day-num {
  font-family: var(--stats-mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: inherit;
}

#panel-grant-rsv .cal-day.is-open:not(.is-full):not(.has-full):not(.has-mine):not(.has-bookings) {
  border-color: rgba(168, 134, 92, 0.38);
  background: rgba(10, 11, 14, 0.96);
  color: rgba(220, 214, 204, 0.88);
  box-shadow: none;
  opacity: 1;
}

#panel-grant-rsv .cal-day.is-open:not(:disabled):not(.is-full):not(.has-full):not(.has-mine):not(.has-bookings) {
  border-color: rgba(168, 134, 92, 0.48);
  background: rgba(12, 13, 16, 0.98);
  box-shadow: none;
  cursor: pointer;
}

#panel-grant-rsv .cal-day.is-open:not(.is-full):not(.has-full):not(.has-mine):not(.has-bookings) .cal-day-num,
#panel-grant-rsv .cal-day.is-open:not(:disabled):not(.is-full):not(.has-full):not(.has-mine):not(.has-bookings) .cal-day-num {
  color: rgba(240, 236, 228, 0.95);
  font-weight: 600;
}

/* Same as Main · Seat: open = quiet gold, booked = warm pewter, yours = teal */
#panel-grant-rsv .cal-day.is-open.has-bookings:not(.has-mine):not(.is-full),
#panel-grant-rsv .cal-day.has-bookings:not(.has-mine):not(.is-full) {
  border-color: rgba(148, 136, 118, 0.88);
  background:
    linear-gradient(165deg, rgba(78, 70, 58, 0.78) 0%, rgba(16, 14, 12, 0.97) 100%);
  color: #ddd6cc;
  box-shadow: inset 0 0 0 1px rgba(180, 168, 148, 0.28);
  opacity: 1;
  filter: none;
}

#panel-grant-rsv .cal-day.is-open.has-bookings:not(.has-mine):not(.is-full) .cal-day-num,
#panel-grant-rsv .cal-day.has-bookings:not(.has-mine):not(.is-full) .cal-day-num {
  color: #ebe4da;
  font-weight: 700;
}

#panel-grant-rsv .cal-day.has-bookings:not(.has-mine) .cal-day-dot {
  color: #b0a89c;
  font-weight: 700;
}

#panel-grant-rsv .cal-day.is-open.has-mine:not(.is-full),
#panel-grant-rsv .cal-day.has-mine:not(.is-full) {
  border-color: rgba(72, 186, 168, 0.95);
  background:
    linear-gradient(165deg, rgba(28, 120, 108, 0.74) 0%, rgba(6, 26, 24, 0.97) 100%);
  color: #d4f5ee;
  box-shadow:
    inset 0 0 0 1px rgba(110, 210, 192, 0.32),
    0 0 0 1px rgba(48, 140, 128, 0.28);
  opacity: 1;
  filter: none;
}

#panel-grant-rsv .cal-day.is-open.has-mine:not(.is-full) .cal-day-num,
#panel-grant-rsv .cal-day.has-mine:not(.is-full) .cal-day-num {
  color: #e8fff8;
  font-weight: 800;
}

#panel-grant-rsv .cal-day.has-mine .cal-day-dot {
  color: #9ee8d8;
  font-weight: 800;
}

#panel-grant-rsv .cal-day.is-closed:not(.is-full):not(.has-full),
#panel-grant-rsv .cal-day.is-unavailable:not(.is-full):not(.has-full) {
  border-color: rgba(168, 134, 92, 0.32);
  background: #0a0b0e;
  color: rgba(120, 128, 136, 0.7);
  opacity: 0.78;
  filter: none;
  box-shadow: none;
}

#panel-grant-rsv .cal-day.has-tagged {
  border-color: rgba(111, 191, 138, 0.75);
  background: linear-gradient(180deg, rgba(56, 110, 88, 0.45) 0%, #0e1612 100%);
  box-shadow: inset 0 0 0 1px rgba(111, 191, 138, 0.18);
  opacity: 1;
}

#panel-grant-rsv .cal-day.has-tagged .cal-day-num {
  color: var(--stats-green);
}

#panel-grant-rsv .cal-detail {
  border: 1px solid var(--stats-line-soft);
  border-radius: 2px;
  background: var(--stats-detail);
}

#panel-grant-rsv .cal-detail-kicker {
  font-family: var(--font-herald);
  color: var(--stats-gold);
}

#panel-grant-rsv .cal-detail-title {
  font-family: var(--stats-mono);
  font-size: 0.95rem;
  color: var(--stats-paper);
}

/* 05 · Blacklist — Statistics / Holdings chrome */
.admin-stage:has(#panel-blacklist.is-active:not([hidden])) {
  overflow: hidden;
}

#panel-blacklist.admin-panel.is-active {
  display: flex;
  flex-direction: column;
  /* Hug Ban + Record — no empty stretch under the border */
  height: auto;
  max-height: calc(100% - 0.35rem);
  min-height: 0;
  overflow: auto;
  box-sizing: border-box;
  padding-bottom: 0.85rem;
  color: var(--stats-paper);
  font-family: var(--stats-mono);
}

#panel-blacklist .admin-blacklist-roster-head {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.55rem 1.25rem;
  margin: 0 0 0.75rem;
  padding: 0 0 0.55rem;
  border-bottom: 1px solid var(--stats-line-soft);
}

#panel-blacklist .admin-blacklist-roster-head .admin-panel-kicker {
  margin: 0;
  font-family: var(--font-herald);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stats-gold);
}

#panel-blacklist .admin-sessions-lede {
  margin: 0;
  text-align: right;
}

#panel-blacklist .admin-sessions-count {
  font-family: var(--stats-mono);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--stats-gold);
  letter-spacing: 0.02em;
}

#panel-blacklist .admin-sessions-lede-copy {
  display: block;
  margin-top: 0.12rem;
  font-family: var(--stats-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stats-muted);
}

/* Ban on-page · Record launch — shared section titles */
#panel-blacklist .admin-blacklist-layer--ban {
  flex: 0 0 auto;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
}

#panel-blacklist .admin-blacklist-layer-title {
  margin: 0;
  font-family: var(--font-herald);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stats-paper, rgba(232, 239, 233, 0.92));
}

#panel-blacklist .admin-blacklist-record-launch {
  flex: 0 0 auto;
  width: 100%;
  margin: 0.85rem 0 0;
  padding: 0.85rem 0 0;
  border-top: 1px solid var(--stats-line-soft);
}

#panel-blacklist .admin-blacklist-login-ban-launch {
  flex: 0 0 auto;
  width: 100%;
  margin: 0.85rem 0 0;
  padding: 0.85rem 0 0;
  border-top: 1px solid var(--stats-line-soft);
}

#panel-blacklist .admin-blacklist-login-ban-launch .admin-stats-holdings-open {
  padding: 0.85rem 1rem;
  min-height: 3.1rem;
  align-items: center;
  border-color: var(--stats-line);
  background: #0c0d10;
}

#panel-blacklist .admin-blacklist-login-ban-launch .admin-stats-holdings-open-title {
  font-family: var(--font-herald);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--stats-paper, rgba(232, 239, 233, 0.92));
}

#panel-blacklist .admin-blacklist-login-ban-dialog .admin-blacklist-login-ban-holdings {
  color: var(--stats-paper);
  font-family: var(--stats-mono);
  overflow: visible;
}

#panel-blacklist .admin-blacklist-login-ban-dialog .admin-blacklist-ban-inline {
  margin-top: 0.55rem;
}

#panel-blacklist .admin-blacklist-login-ban-dialog .admin-blacklist-ban-account {
  z-index: 12;
}

#panel-blacklist .admin-blacklist-record-launch .admin-stats-holdings-open {
  padding: 0.85rem 1rem;
  min-height: 3.1rem;
  align-items: center;
  border-color: var(--stats-line);
  background: #0c0d10;
}

#panel-blacklist .admin-blacklist-record-launch .admin-stats-holdings-open-title {
  font-family: var(--font-herald);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--stats-paper, rgba(232, 239, 233, 0.92));
}

#panel-blacklist .admin-blacklist-record-launch .admin-stats-holdings-open.is-alert .admin-stats-holdings-open-title {
  /* Warm rose — reads on the red alert wash */
  color: #f0b4a6;
}

#panel-blacklist .admin-blacklist-record-launch .admin-stats-holdings-open.is-alert {
  border-color: rgba(201, 120, 104, 0.55);
  background:
    linear-gradient(90deg, rgba(201, 120, 104, 0.14) 0%, rgba(201, 120, 104, 0.04) 42%, #0c0d10 100%);
  box-shadow: inset 3px 0 0 rgba(201, 120, 104, 0.85);
}

#panel-blacklist .admin-blacklist-record-launch .admin-stats-holdings-open.is-alert:hover,
#panel-blacklist .admin-blacklist-record-launch .admin-stats-holdings-open.is-alert:focus-visible {
  border-color: rgba(201, 120, 104, 0.8);
  box-shadow:
    inset 3px 0 0 rgba(201, 120, 104, 0.95),
    inset 0 0 0 1px rgba(201, 120, 104, 0.22);
}

#panel-blacklist .admin-blacklist-record-launch .admin-stats-holdings-open.is-clear .admin-stats-holdings-open-title {
  color: #b6dcc4;
}

#panel-blacklist .admin-blacklist-record-launch .admin-stats-holdings-open.is-clear {
  border-color: rgba(110, 168, 130, 0.55);
  background:
    linear-gradient(90deg, rgba(110, 168, 130, 0.14) 0%, rgba(110, 168, 130, 0.04) 42%, #0c0d10 100%);
  box-shadow: inset 3px 0 0 rgba(110, 168, 130, 0.85);
}

#panel-blacklist .admin-blacklist-record-launch .admin-stats-holdings-open.is-clear:hover,
#panel-blacklist .admin-blacklist-record-launch .admin-stats-holdings-open.is-clear:focus-visible {
  border-color: rgba(140, 196, 158, 0.8);
  box-shadow:
    inset 3px 0 0 rgba(140, 196, 158, 0.95),
    inset 0 0 0 1px rgba(110, 168, 130, 0.22);
}

#panel-blacklist .admin-blacklist-record-count {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-family: var(--stats-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#panel-blacklist .admin-blacklist-record-count.is-hot {
  color: #e8a090;
}

#panel-blacklist .admin-blacklist-record-count-n {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #f0b4a6;
  font-variant-numeric: tabular-nums;
}

#panel-blacklist .admin-blacklist-record-count.is-empty {
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #b6dcc4;
}

#panel-blacklist .admin-sessions-lede.is-hot .admin-sessions-count {
  color: #e8a090;
  font-size: 1.35rem;
}

#panel-blacklist .admin-sessions-lede.is-hot .admin-sessions-lede-copy {
  color: rgba(232, 160, 144, 0.78);
}

#panel-blacklist .admin-blacklist-ban-frame {
  position: relative;
  box-sizing: border-box;
  margin: 0;
  padding: 0.85rem 0.95rem 0.95rem;
  border: 1px solid var(--stats-line);
  border-radius: var(--frame-radius, 3px);
  background: #0c0d10;
  box-shadow: inset 0 0 0 1px rgba(168, 134, 92, 0.1);
}

#panel-blacklist .admin-blacklist-ban-frame::after {
  content: "";
  position: absolute;
  inset: 0.35rem;
  z-index: 0;
  pointer-events: none;
  border: 1px solid var(--stats-line-soft);
  border-radius: 2px;
}

#panel-blacklist .admin-blacklist-ban-frame > * {
  position: relative;
  z-index: 1;
}

#panel-blacklist .admin-blacklist-ledger-tools {
  flex: 0 0 auto;
  margin: 0 0 0.55rem;
  padding: 0;
  border: 0;
  background: transparent;
}

#panel-blacklist .admin-stats-holdings-filters-fold {
  margin-bottom: 0;
  border: 1px solid var(--stats-line);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.28);
}

#panel-blacklist .admin-stats-holdings-filters-fold > summary {
  font-family: var(--stats-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stats-gold-dim);
}

#panel-blacklist .admin-stats-holdings-filters {
  padding: 0.55rem 0.6rem 0.65rem;
}

#panel-blacklist .admin-stats-holdings-filters .admin-stats-field > span,
#panel-blacklist .admin-stats-holdings-filters .admin-stats-field--session-combo > span,
#panel-blacklist .admin-blacklist-ban-reason > span,
#panel-blacklist .admin-blacklist-ban-scope legend {
  font-family: var(--stats-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stats-gold-dim);
}

/* Ban form — larger labels / bars */
#panel-blacklist .admin-blacklist-ban-inline .admin-blacklist-ban-account > span,
#panel-blacklist .admin-blacklist-ban-inline .admin-blacklist-ban-account-head > span,
#panel-blacklist .admin-blacklist-ban-inline .admin-blacklist-ban-reason > span,
#panel-blacklist .admin-blacklist-ban-inline .admin-blacklist-ban-scope legend {
  font-family: var(--stats-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stats-gold);
  margin-bottom: 0.35rem;
}

#panel-blacklist .admin-blacklist-ban-account-head > span {
  margin: 0;
  margin-bottom: 0;
}

#panel-blacklist .admin-stats-holdings-filters .admin-stats-field--session-combo {
  flex: 1 1 10rem;
  min-width: 9rem;
}

#panel-blacklist .admin-stats-holdings-filters .ledger-combo .user-combo-shell,
#panel-blacklist .admin-blacklist-ban-inline .user-combo-shell {
  min-height: 2.05rem;
  border: 1px solid var(--stats-line);
  border-radius: 1px;
  background: var(--stats-detail);
}

#panel-blacklist .admin-blacklist-ban-inline .user-combo-shell {
  min-height: 2.55rem;
}

#panel-blacklist .admin-stats-holdings-filters .ledger-combo .user-combo-input,
#panel-blacklist .admin-blacklist-ban-inline .user-combo-input {
  min-height: 2.05rem;
  padding: 0.35rem 0.45rem;
  font-family: var(--stats-mono);
  font-size: 0.74rem;
  color: var(--stats-paper);
  background: transparent;
}

#panel-blacklist .admin-blacklist-ban-inline .user-combo-input {
  min-height: 2.55rem;
  padding: 0.45rem 0.6rem;
  font-size: 0.86rem;
}

#panel-blacklist .admin-stats-holdings-filters select,
#panel-blacklist .admin-stats-holdings-filters-rows select {
  min-height: 2.05rem;
  border: 1px solid var(--stats-line);
  border-radius: 1px;
  background: var(--stats-detail);
  color: var(--stats-paper);
  font-family: var(--stats-mono);
  font-size: 0.74rem;
}

#panel-blacklist .admin-blacklist-ban-inline {
  display: grid;
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  border: 0;
  max-width: none;
  width: 100%;
}

/* One section per row: Candidate · Ban type · Reason · Apply ban */
#panel-blacklist .admin-blacklist-ban-stack-row {
  display: block;
  width: 100%;
  min-width: 0;
}

#panel-blacklist .admin-blacklist-ban-account {
  display: block;
  width: 100%;
  min-width: 0;
  position: relative;
  z-index: 8;
  overflow: visible;
}

#panel-blacklist .admin-blacklist-ban-account-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
  margin: 0 0 0.35rem;
}

#panel-blacklist .admin-ban-tag-hint {
  margin: 0;
  margin-left: auto;
  text-align: right;
  font-family: var(--stats-mono);
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  color: var(--stats-muted);
  white-space: nowrap;
}

#panel-blacklist .admin-blacklist-ban-account .ban-tag-combo,
#panel-blacklist .admin-blacklist-ban-account .user-combo {
  width: 100%;
  overflow: visible;
}

#panel-blacklist .admin-blacklist-ban-account .user-combo-menu {
  z-index: 40;
  max-height: min(18rem, 42vh);
  padding: 0;
  border: 1px solid var(--stats-line, rgba(168, 134, 92, 0.28));
  border-radius: 2px;
  background: #0c0d10;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.35);
}

#panel-blacklist .admin-blacklist-ban-account .user-combo-menu [role="option"] {
  margin: 0;
  padding: 0.55rem 0.7rem;
  border-radius: 0;
  border-bottom: 1px solid rgba(168, 134, 92, 0.22);
  background: #0c0d10;
}

#panel-blacklist .admin-blacklist-ban-account .user-combo-menu [role="option"]:last-child {
  border-bottom: 0;
}

#panel-blacklist .admin-blacklist-ban-account .user-combo-menu [role="option"].is-tagged,
#panel-blacklist .admin-blacklist-ban-account .user-combo-menu [role="option"][hidden] {
  display: none !important;
}

#panel-blacklist .ban-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.45rem 0 0;
  min-height: 0;
}

#panel-blacklist .ban-tags:empty {
  display: none;
}

#panel-blacklist .ban-tags:not(:empty) {
  padding-top: 0.5rem;
  border-top: 1px solid var(--stats-line-soft);
}

/* Selected ban targets — red chips (not gold / teal grant tags) */
#panel-blacklist .ban-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.28rem 0.5rem;
  font-family: var(--stats-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid rgba(201, 88, 88, 0.7);
  border-radius: 1px;
  background: rgba(48, 14, 14, 0.96);
  color: #f0c0c0;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

#panel-blacklist .ban-tag:hover,
#panel-blacklist .ban-tag:focus-visible {
  border-color: rgba(232, 120, 120, 0.9);
  background: rgba(64, 18, 18, 0.98);
  outline: none;
}

#panel-blacklist .ban-tag-email {
  color: #f5d0d0;
}

#panel-blacklist .ban-tag-x {
  color: rgba(240, 176, 176, 0.75);
  font-size: 0.85rem;
  line-height: 1;
}

#panel-blacklist .admin-blacklist-ban-scope {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

#panel-blacklist .admin-blacklist-ban-scope legend {
  margin: 0 0 0.35rem;
  padding: 0;
}

#panel-blacklist .admin-blacklist-ban-scope .admin-ban-scope-track {
  gap: 0.45rem;
}

#panel-blacklist .admin-blacklist-ban-scope .admin-ban-scope-card {
  min-height: 2.55rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--stats-line);
  border-radius: 1px;
  background: var(--stats-detail);
  box-shadow: none;
}

#panel-blacklist .admin-blacklist-ban-scope .admin-ban-scope-opt input:checked + .admin-ban-scope-card {
  border-color: rgba(201, 165, 116, 0.75);
  background: rgba(201, 165, 116, 0.1);
  box-shadow: inset 0 0 0 1px rgba(201, 165, 116, 0.12);
}

#panel-blacklist .admin-blacklist-ban-scope .admin-ban-scope-title {
  font-family: var(--stats-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stats-paper);
}

#panel-blacklist .admin-blacklist-ban-scope .admin-ban-scope-hint {
  font-family: var(--stats-mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: var(--stats-muted);
}

#panel-blacklist .admin-blacklist-ban-reason {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
}

#panel-blacklist .admin-blacklist-ban-reason textarea {
  width: 100%;
  min-height: 4.25rem;
  resize: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--stats-line);
  border-radius: 1px;
  background: var(--stats-detail);
  color: var(--stats-paper);
  font-family: var(--stats-mono);
  font-size: 0.86rem;
  line-height: 1.45;
  box-shadow: none;
}

#panel-blacklist .admin-blacklist-ban-reason textarea:focus {
  outline: none;
  border-color: rgba(201, 165, 116, 0.7);
  box-shadow: 0 0 0 1px rgba(201, 165, 116, 0.16);
}

#panel-blacklist .admin-blacklist-ban-submit-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}

#panel-blacklist .admin-blacklist-ban-submit-row .admin-blacklist-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 9.5rem;
  max-width: none;
  min-height: 2.35rem;
  margin: 0;
  padding: 0.45rem 1rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  border-radius: 1px !important;
  box-sizing: border-box;
}

#panel-blacklist .admin-blacklist-book {
  flex: 1 1 auto;
  min-height: 0;
  display: flex !important;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  margin-top: 0;
  border: 1px solid var(--stats-line-soft) !important;
  border-radius: 2px;
  background: var(--stats-panel-deep, rgba(4, 5, 7, 0.88)) !important;
  box-shadow: none;
  overflow: hidden;
}

#panel-blacklist .admin-blacklist-book-head {
  display: none;
}

#panel-blacklist .admin-blacklist-record-dialog .admin-blacklist-record-holdings {
  color: var(--stats-paper);
  font-family: var(--stats-mono);
}

#panel-blacklist .admin-blacklist-record-dialog .admin-blacklist-book {
  flex: 1 1 auto;
  min-height: 0;
}

#panel-blacklist .admin-blacklist-book .admin-roster.admin-blacklist-roster,
#panel-blacklist .admin-blacklist-roster {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  display: flex !important;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: flex-start;
  align-items: stretch;
  gap: 0.4rem !important;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0.55rem !important;
  margin: 0 !important;
  list-style: none;
  background: transparent;
  border: 0;
}

#panel-blacklist .admin-blacklist-roster::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* Holdings-style record rows */
#panel-blacklist .admin-blacklist-book .admin-roster-item:not([hidden]),
#panel-blacklist .admin-blacklist-roster > .admin-roster-item:not([hidden]) {
  flex: 0 0 auto;
  display: block !important;
  width: 100%;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--stats-line) !important;
  border-radius: 1px !important;
  background: var(--stats-detail) !important;
  box-shadow: none !important;
  overflow: hidden;
}

#panel-blacklist .admin-blacklist-book .admin-roster-item:last-child,
#panel-blacklist .admin-blacklist-roster > .admin-roster-item:last-child {
  border-bottom: 1px solid var(--stats-line) !important;
}

#panel-blacklist .admin-blacklist-book .admin-roster-item:hover,
#panel-blacklist .admin-blacklist-book .admin-roster-item:focus-within {
  border-color: rgba(201, 165, 116, 0.72) !important;
  background: rgba(201, 165, 116, 0.08) !important;
  box-shadow: inset 3px 0 0 var(--stats-gold) !important;
}

#panel-blacklist .admin-blacklist-roster .admin-roster-hit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--stats-paper);
  font-family: var(--stats-mono);
  text-align: left;
  cursor: pointer;
}

#panel-blacklist .admin-blacklist-roster .admin-roster-hit-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.35rem;
  min-width: 0;
}

#panel-blacklist .admin-blacklist-roster .admin-roster-hit-main strong {
  font-family: var(--stats-mono);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--stats-paper);
}

#panel-blacklist .admin-blacklist-roster .admin-roster-hit-main .tag {
  font-family: var(--stats-mono);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--stats-line);
  border-radius: 1px;
  background: rgba(201, 165, 116, 0.1);
  color: var(--stats-bbg);
  padding: 0.12rem 0.35rem;
}

#panel-blacklist .admin-blacklist-roster .admin-roster-hit-main .tag.tag--login-ban {
  color: #d9a8ec;
  border-color: rgba(168, 108, 196, 0.62);
  background: rgba(46, 22, 54, 0.72);
}

#panel-blacklist .admin-blacklist-roster .admin-roster-hit-main .tag.tag--booking-ban {
  color: #f0b888;
  border-color: rgba(201, 132, 72, 0.62);
  background: rgba(52, 30, 14, 0.72);
}

#panel-blacklist .admin-blacklist-roster .admin-roster-hit-main .tag::before {
  content: none;
}

#panel-blacklist .admin-blacklist-roster .admin-roster-hit code {
  font-family: var(--stats-mono);
  font-size: 0.66rem;
  color: var(--stats-muted);
}

#panel-blacklist .admin-blacklist-book > .admin-empty {
  margin: 1.1rem 0.85rem;
  font-family: var(--stats-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stats-muted);
}

#panel-blacklist .admin-blacklist-pager {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
  margin: 0;
  margin-top: auto;
  padding: 0.45rem 0.65rem;
  border-top: 1px solid var(--stats-line-soft);
  background: rgba(0, 0, 0, 0.22);
  justify-content: flex-end;
}

#panel-blacklist .admin-blacklist-pager[hidden] {
  display: none !important;
}

#panel-blacklist .admin-blacklist-pager .admin-stats-pager-status {
  font-family: var(--stats-mono);
  color: var(--stats-muted);
}

#panel-blacklist .admin-blacklist-pager .admin-stats-pager-jump-input {
  border: 1px solid var(--stats-line) !important;
  border-radius: 1px !important;
  background: var(--stats-detail) !important;
  color: var(--stats-paper) !important;
  font-family: var(--stats-mono);
  box-shadow: none;
}

#panel-blacklist .admin-blacklist-pager .admin-stats-pager-jump-input:focus {
  border-color: rgba(201, 165, 116, 0.72) !important;
  box-shadow: 0 0 0 1px rgba(201, 165, 116, 0.28);
}

/* Match Main book + Admin grant calendar shell */
.hub-book-creds .cal,
.admin-grant-form .cal {
  margin-top: 0.15rem;
}

.admin-timetable {
  display: grid;
  gap: 0.85rem;
  margin: 0.35rem 0 0.75rem;
}

.admin-timetable-day-label {
  margin: 0 0 0.4rem;
  font-family: var(--font-herald);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.admin-timetable-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr));
  gap: 0.35rem;
}

.admin-slot {
  display: grid;
  gap: 0.1rem;
  justify-items: center;
  padding: 0.45rem 0.25rem;
  border: 1px solid rgba(168, 134, 92, 0.28);
  border-radius: 3px;
  background: rgba(8, 10, 12, 0.88);
  color: var(--paper-dim);
  font: inherit;
  cursor: pointer;
  transition:
    border-color 0.12s ease,
    background 0.12s ease,
    color 0.12s ease;
}

.admin-slot:hover:not(:disabled) {
  border-color: rgba(201, 165, 116, 0.55);
  color: var(--paper);
}

.admin-slot.is-selected {
  border-color: rgba(201, 165, 116, 0.85);
  background: rgba(201, 165, 116, 0.14);
  color: var(--accent-hot);
  box-shadow: inset 0 0 0 1px rgba(201, 165, 116, 0.25);
}

.admin-slot.is-full,
.admin-slot:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.admin-slot-time {
  font-size: 0.82rem;
  font-weight: 600;
}

.admin-slot-fill {
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  color: rgba(197, 212, 200, 0.65);
}

.admin-slot.is-selected .admin-slot-fill {
  color: rgba(243, 223, 154, 0.85);
}

.admin-timetable--view {
  margin-bottom: 1.1rem;
}

.admin-slot.is-empty .admin-slot-fill {
  color: rgba(168, 213, 181, 0.55);
}

.admin-slot.is-full:not(:disabled) {
  opacity: 0.85;
  border-color: rgba(184, 92, 74, 0.45);
}

/* Month booking calendar */
.cal {
  margin: 0.25rem 0 1.1rem;
}

.cal-window {
  margin: 0 0 0.75rem;
}

.cal-months {
  --cal-day-h: 3.1rem;
  display: grid;
  gap: 1.25rem;
  align-items: start;
}

@media (min-width: 960px) {
  .cal-months {
    position: relative;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2.3rem;
    row-gap: 1.4rem;
    /* Room so the divider can run past the date grids */
    padding-block: 0.35rem;
    overflow: visible;
  }

  .cal-months > .cal-month:first-child {
    position: static;
    padding-right: 0;
    margin-right: 0;
    border-right: 0;
  }

  /* Centered vertical rule between equal month columns */
  .cal-months::before {
    content: "";
    position: absolute;
    top: -0.15rem;
    bottom: -0.15rem;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    background: rgba(168, 134, 92, 0.42);
    pointer-events: none;
  }

  .cal-months > .cal-month:first-child::after {
    content: none;
    display: none;
  }
}

/* Grant / book: denser month grids so the panel fits without scrolling. */
.cal--compact .cal-months {
  --cal-day-h: 2.15rem;
  gap: 0.75rem;
}

@media (min-width: 960px) {
  .cal--compact .cal-months {
    column-gap: 1.7rem;
    row-gap: 0.9rem;
    padding-block: 0.28rem;
  }

  .cal--compact .cal-months > .cal-month:first-child {
    padding-right: 0;
    margin-right: 0;
  }

  .cal--compact .cal-months::before {
    top: -0.1rem;
    bottom: -0.1rem;
  }
}

.cal--compact .cal-month-title {
  font-size: 0.95rem;
}

.cal--compact .cal-month-head {
  margin-bottom: 0.35rem;
}

.cal--compact .cal-weekdays,
.cal--compact .cal-week,
.cal--compact .cal-grid {
  gap: 0.18rem;
}

.cal--compact .cal-grid {
  padding: 0.28rem;
}

.cal--compact .cal-day,
.cal--compact .cal-day.is-pad {
  height: var(--cal-day-h, 2.15rem);
  min-height: var(--cal-day-h, 2.15rem);
  max-height: var(--cal-day-h, 2.15rem);
  padding: 0.22rem 0.28rem;
}

.cal--compact .cal-day-num {
  font-size: 0.82rem;
}

.cal--compact .cal-day-dot {
  font-size: 0.58rem;
}

.cal--compact .cal-weekday {
  font-size: 0.55rem;
}

.cal-day-dialog {
  position: fixed;
  inset: 0;
  margin: calc(var(--desk-chrome-clear) + 0.35rem) auto 1rem;
  width: min(96vw, 88rem);
  max-width: 96vw;
  height: min(calc(100dvh - var(--desk-chrome-clear) - 2.25rem), 48rem);
  max-height: calc(100dvh - var(--desk-chrome-clear) - 2.25rem);
  padding: 0;
  border: 1px solid rgba(168, 134, 92, 0.45);
  border-radius: 3px;
  background: #0c0d10;
  color: inherit;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65);
  overflow: hidden;
}

/* Admin 04 manage desk — same 金框 as other admin panels (01–08). */
#panel-grant-rsv .cal-day-dialog {
  border: 1px solid var(--frame-edge, rgba(168, 134, 92, 0.44));
  border-bottom-width: var(--frame-bevel, 3px);
  border-radius: 8px;
  box-shadow: var(--frame-shadow-3d);
}

/* 04 title row inside the manage dialog (panel head is covered by the fixed dialog). */
#panel-grant-rsv .cal-manage-dialog-head {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 1.1rem;
  margin: 0 0 0.15rem;
  padding: 0 0 0.55rem;
  border-bottom: 1px solid rgba(168, 134, 92, 0.22);
}

#panel-grant-rsv .cal-manage-dialog-head .admin-panel-kicker {
  margin: 0;
  font-family: var(--font-herald);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stats-gold, var(--accent-hot, #c9a574));
}

#panel-grant-rsv .cal-manage-dialog-head .admin-command-dialog-close {
  margin-left: auto;
}

#panel-grant-rsv .cal-day-dialog-card > .cal-day-dialog-layout--split3 {
  flex: 1 1 auto;
  min-height: 0;
}

#panel-grant-rsv .cal-day-dialog-dates--manage {
  padding-top: 0.05rem;
}

.cal-day-dialog[open] {
  display: flex;
  flex-direction: column;
}

.cal-day-dialog::backdrop {
  background: rgba(4, 4, 6, 0.72);
}

.cal-day-dialog-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  max-height: none;
  padding: 0.85rem 1rem 0.95rem;
  overflow: hidden;
  background: #0c0d10;
  background-image: none;
  box-sizing: border-box;
}

.cal-day-dialog-layout {
  display: grid;
  grid-template-columns: minmax(12.5rem, 16.5rem) minmax(0, 1fr);
  gap: 0.85rem 1rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.cal-day-dialog-layout--split3 {
  grid-template-columns:
    minmax(11.5rem, 14.5rem)
    minmax(0, 1fr)
    minmax(15rem, 19rem);
}

.cal-day-dialog-dates {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-height: 0;
  min-width: 0;
  padding-right: 0.15rem;
  border-right: 1px solid rgba(168, 134, 92, 0.22);
}

.cal-day-dialog-day-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding-right: 0.2rem;
}

.cal-day-dialog-week {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
  padding-left: 0.35rem;
  border-left: 0.1rem solid rgba(201, 165, 116, 0.72);
}

.cal-day-dialog-week-rule {
  flex: 0 0 auto;
  height: 0;
  margin: 0.15rem 0.2rem 0.05rem;
  border: 0;
  border-top: 1px solid rgba(201, 165, 116, 0.4);
  pointer-events: none;
}

.cal-day-dialog-day {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 0.55rem;
  width: 100%;
  margin: 0;
  padding: 0.5rem 0.6rem;
  border: 1px solid rgba(168, 134, 92, 0.28);
  border-radius: 1px;
  background: #0c0d10;
  color: var(--stats-paper, #f4eee3);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.cal-day-dialog-day.has-bookings {
  border-color: rgba(148, 136, 118, 0.7);
  background:
    linear-gradient(90deg, rgba(78, 70, 58, 0.4) 0%, rgba(16, 14, 12, 0.97) 72%);
}

.cal-day-dialog-day.is-blocked-day {
  border-color: rgba(160, 88, 96, 0.78);
  background:
    linear-gradient(90deg, rgba(88, 36, 42, 0.48) 0%, rgba(18, 10, 12, 0.96) 72%);
  color: #e8c8cc;
  box-shadow: inset 0 0 0 1px rgba(180, 110, 118, 0.2);
  opacity: 1;
}

.cal-day-dialog-day.is-blocked-day .cal-day-dialog-day-label {
  color: #f2d8dc;
}

.cal-day-dialog-day.is-blocked-day .cal-day-dialog-day-meta {
  color: #e0a8b0;
}

.cal-day-dialog-day.is-blocked-day:hover {
  border-color: rgba(180, 100, 108, 0.88);
  background:
    linear-gradient(90deg, rgba(100, 42, 48, 0.55) 0%, rgba(20, 12, 14, 0.97) 72%);
}

.cal-day-dialog-day:hover:not(.is-blocked-day):not(.has-bookings) {
  border-color: rgba(168, 134, 92, 0.45);
  background: rgba(255, 255, 255, 0.03);
}

.cal-day-dialog-day.is-selected,
.cal-day-dialog-day.is-selected:hover {
  border-color: rgba(96, 180, 255, 0.95);
  box-shadow: 0 0 0 1px rgba(96, 180, 255, 0.75);
}

.cal-day-dialog-day.has-bookings:hover {
  border-color: rgba(168, 154, 132, 0.75);
  background:
    linear-gradient(90deg, rgba(96, 86, 70, 0.45) 0%, rgba(18, 16, 14, 0.97) 72%);
}

.cal-day-dialog-day.has-bookings.is-selected,
.cal-day-dialog-day.has-bookings.is-selected:hover {
  border-color: rgba(96, 180, 255, 0.95);
  background:
    linear-gradient(90deg, rgba(78, 70, 58, 0.4) 0%, rgba(16, 14, 12, 0.97) 72%);
  box-shadow: 0 0 0 1px rgba(96, 180, 255, 0.75);
}

.cal-day-dialog-day.is-blocked-day.is-selected,
.cal-day-dialog-day.is-blocked-day.is-selected:hover {
  border-color: rgba(96, 180, 255, 0.95);
  background:
    linear-gradient(90deg, rgba(88, 36, 42, 0.48) 0%, rgba(18, 10, 12, 0.96) 72%);
  box-shadow: 0 0 0 1px rgba(96, 180, 255, 0.75);
  color: #e8c8cc;
}

.cal-day-dialog-day-label {
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  font-size: 0.76rem;
  font-weight: 600;
}

.cal-day-dialog-day-meta {
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stats-muted, rgba(180, 176, 168, 0.62));
}

.cal-day-dialog-day.is-open-day .cal-day-dialog-day-meta {
  color: rgba(201, 165, 116, 0.72);
}

.cal-day-dialog-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  height: 100%;
}

.cal-day-dialog-main > .cal-detail {
  flex: 1 1 auto;
  height: 100%;
}

.cal-day-dialog-candidates {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding-left: 0.85rem;
  border-left: 1px solid rgba(168, 134, 92, 0.22);
}

.cal-day-dialog-candidates--manage {
  gap: 0.65rem;
}

.cal-cand-section-label {
  margin: 0;
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stats-gold, #c9a574);
}

.cal-cand-search {
  display: block;
  margin: 0;
  flex: 0 0 auto;
}

.cal-cand-search-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 2.05rem;
  margin: 0;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--stats-line, rgba(168, 134, 92, 0.28));
  border-radius: 1px;
  background: var(--stats-detail, #0c0d10);
  color: var(--stats-paper, rgba(232, 239, 233, 0.92));
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  outline: none;
}

.cal-cand-search-input::placeholder {
  color: rgba(180, 176, 168, 0.48);
}

.cal-cand-search-input:focus {
  border-color: rgba(201, 165, 116, 0.65);
}

.cal-cand-section {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
  min-height: 0;
}

.cal-cand-section--booked {
  flex: 1 1 50%;
}

.cal-day-dialog-candidates--manage .cal-cand-section--booked {
  flex: 1 1 50%;
  max-height: 50%;
  min-height: 0;
}

.cal-cand-section--tags {
  flex: 1 1 50%;
  max-height: 50%;
  min-height: 0;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(168, 134, 92, 0.22);
}

.cal-cand-section--tags .cal-detail-kicker {
  flex: 0 0 auto;
}

.cal-cand-tags {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  align-content: flex-start;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.cal-cand-tags::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.cal-day-dialog-candidates--manage .cal-cand-tags.grant-tags:empty {
  display: flex;
  min-height: 2.5rem;
}

.cal-day-dialog-candidates .cal-hour-occ,
.cal-day-dialog-candidates .cal-cand-occ {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 0.45rem 0.5rem;
  overflow-x: hidden;
  overflow-y: auto;
  border-color: rgba(168, 134, 92, 0.22);
  background: rgba(8, 9, 12, 0.92);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Manage: booked list fills available height; scroll for overflow (hidden scrollbar) */
.cal-day-dialog-candidates--manage .cal-cand-occ {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0.35rem 0.4rem;
}

.cal-day-dialog-candidates--manage .cal-hour-occ-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.cal-day-dialog-candidates--manage .cal-hour-occ-body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.cal-day-dialog-candidates--manage .cal-hour-people-wrap {
  gap: 0.35rem;
}

.cal-day-dialog-candidates--manage .cal-hour-slot-group {
  gap: 0.35rem;
}

.cal-day-dialog-candidates--manage .cal-hour-person {
  min-height: 0;
  box-sizing: border-box;
  cursor: pointer;
}

.cal-day-dialog-candidates .cal-cand-occ::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.cal-day-dialog-candidates .cal-hour-occ-kicker {
  display: none;
}

.cal-cand-filter-empty {
  margin: 0.35rem 0 0;
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: rgba(180, 176, 168, 0.58);
}

.cal-day-dialog-candidates .cal-hour-people-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.cal-day-dialog-candidates .cal-hour-slot-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
  padding-left: 0.35rem;
  border-left: 0.1rem solid rgba(201, 165, 116, 0.72);
}

.cal-day-dialog-candidates .cal-hour-people {
  gap: 0.35rem;
}

.cal-day-dialog-candidates .cal-hour-person {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  padding: 0.45rem 0.5rem;
  border: 1px solid rgba(168, 134, 92, 0.22);
  border-radius: 1px;
  background:
    linear-gradient(180deg, rgba(28, 26, 22, 0.55) 0%, rgba(12, 13, 16, 0.96) 100%);
}

/* Author display:flex beats UA [hidden] — force filter hide */
.cal-day-dialog-candidates .cal-hour-person[hidden],
.cal-day-dialog-candidates .cal-hour-slot-group[hidden],
.cal-day-dialog-candidates .cal-hour-people-wrap[hidden] {
  display: none !important;
}

.cal-day-dialog-candidates .cal-hour-person.is-tagged {
  border-color: rgba(120, 196, 160, 0.4);
  background:
    linear-gradient(180deg, rgba(40, 72, 58, 0.42) 0%, rgba(12, 18, 15, 0.96) 100%);
}

.cal-day-dialog-candidates .cal-hour-person-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 0.55rem;
  min-width: 0;
}

.cal-day-dialog-candidates .cal-hour-person-name {
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--stats-paper, rgba(232, 239, 233, 0.92));
  word-break: break-word;
}

.cal-day-dialog-candidates .cal-hour-person-when {
  margin-left: 0;
  flex: 0 0 auto;
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--stats-paper, #f4eee3);
}

.cal-day-dialog-candidates .cal-hour-person-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
}

.cal-day-dialog-candidates .cal-hour-person-actions form {
  margin: 0;
  display: inline-flex;
}

.cal-day-dialog-candidates .cal-hour-person-btn {
  min-height: 1.65rem;
  height: 1.65rem;
  padding: 0 0.55rem;
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cal-day-dialog-candidates .cal-hour-person-btn.rsv-btn--cancel {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  border-color: rgba(168, 134, 92, 0.35);
  background: transparent;
  color: var(--paper-dim);
}

.cal-day-dialog-candidates .cal-hour-person-btn.rsv-btn--cancel:hover,
.cal-day-dialog-candidates .cal-hour-person-btn.rsv-btn--cancel:focus-visible {
  border-color: rgba(232, 130, 118, 0.55);
  color: #f0a39a;
}

.cal-day-dialog-block-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: auto;
  padding-top: 0.55rem;
}

@media (max-width: 960px) {
  .cal-day-dialog-layout--split3 {
    grid-template-columns: minmax(11rem, 13.5rem) minmax(0, 1fr);
  }

  .cal-day-dialog .cal-hours {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .cal-day-dialog-candidates {
    grid-column: 1 / -1;
    border-left: 0;
    border-top: 1px solid rgba(168, 134, 92, 0.22);
    padding-left: 0;
    padding-top: 0.65rem;
    max-height: 38vh;
  }
}

@media (max-width: 720px) {
  .cal-day-dialog-layout,
  .cal-day-dialog-layout--split3 {
    grid-template-columns: 1fr;
  }

  .cal-day-dialog-dates {
    border-right: 0;
    border-bottom: 1px solid rgba(168, 134, 92, 0.22);
    padding-right: 0;
    padding-bottom: 0.55rem;
    max-height: 10.5rem;
  }
}

.cal-day-dialog .cal-detail {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: #0c0d10;
  box-shadow: none;
  overflow: hidden;
}

/* #panel-grant-rsv .cal-detail uses an ID rule that otherwise keeps a frame around hours. */
#panel-grant-rsv .cal-day-dialog .cal-detail,
#panel-grant-rsv .cal-day-dialog .cal-detail[data-cal-detail] {
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: #0c0d10;
  box-shadow: none;
}

.cal-day-dialog .cal-detail-kicker {
  margin: 0;
  font-family: var(--font-herald);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.25;
  min-height: 1.1rem;
  color: var(--stats-gold, #c9a574);
}

#panel-grant-rsv .cal-day-dialog .cal-detail-kicker {
  font-family: var(--font-herald);
  color: var(--stats-gold);
}

.cal-day-dialog-dates > .cal-detail-kicker {
  flex: 0 0 auto;
  margin: 0;
}

.cal-cand-booked-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 0.55rem;
  flex: 0 0 auto;
  min-width: 0;
  flex-wrap: nowrap;
}

.cal-cand-booked-head .cal-detail-kicker {
  margin: 0;
  flex: 0 0 auto;
  min-width: 0;
}

.cal-cand-booked-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 0.28rem;
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
}

.cal-cand-booked-btn,
#panel-grant-rsv .cal-cand-booked-actions .cal-cand-booked-btn.rsv-btn {
  min-height: 2rem;
  height: 2rem;
  width: 100%;
  min-width: 0;
  padding: 0 0.28rem;
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  flex: none;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cal-cand-booked-btn--select-all,
#panel-grant-rsv .cal-cand-booked-actions .cal-cand-booked-btn--select-all.rsv-btn {
  white-space: normal;
  font-size: 0.48rem;
  letter-spacing: 0.02em;
  line-height: 1.05;
  padding: 0.12rem 0.15rem;
  text-overflow: clip;
}

.cal-cand-booked-btn-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.02rem;
  line-height: 1.05;
}

.cal-cand-section--booked > .cal-detail-kicker {
  flex: 0 0 auto;
  margin: 0;
}

.cal-day-dialog-candidates--manage .cal-hour-person {
  min-height: 0;
  box-sizing: border-box;
  cursor: pointer;
}

.cal-day-dialog-candidates .cal-hour-person.is-selectable.is-picked {
  border-color: rgba(90, 150, 255, 0.75);
  box-shadow: inset 0 0 0 1px rgba(90, 150, 255, 0.35);
  background:
    linear-gradient(180deg, rgba(36, 56, 96, 0.42) 0%, rgba(12, 14, 22, 0.96) 100%);
}

.cal-day-dialog-candidates .cal-hour-person-name-tag {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0.12rem 0.4rem;
  border: 1px solid rgba(201, 165, 116, 0.55);
  border-radius: 1px;
  background:
    linear-gradient(180deg, rgba(78, 62, 42, 0.5) 0%, rgba(16, 14, 12, 0.96) 100%);
  color: var(--stats-paper, #f4eee3);
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  font-size: 0.7rem;
  font-weight: 500;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-day-dialog-candidates .cal-hour-person-name-tag:hover,
.cal-day-dialog-candidates .cal-hour-person-name-tag:focus-visible {
  border-color: rgba(201, 165, 116, 0.9);
  background:
    linear-gradient(180deg, rgba(96, 76, 50, 0.58) 0%, rgba(18, 16, 14, 0.98) 100%);
  color: #f8f1e6;
  outline: none;
}

.cal-day-dialog .cal-detail-head {
  flex: 0 0 auto;
  margin: 0 0 0.55rem;
  padding: 0.15rem 0 0;
  border: 0;
  align-items: flex-start;
  overflow: visible;
}

/* Compact Close chip — light chrome, no bulky ghost press pad */
.cal-day-dialog .cal-detail-head .cal-detail-close.ghost,
.cal-day-dialog .cal-detail-head .cal-detail-close.ghost:hover,
.cal-day-dialog .cal-detail-head .cal-detail-close.ghost:active {
  transform: none;
  min-height: 1.55rem;
  height: 1.55rem;
  padding: 0 0.55rem;
  border: 1px solid rgba(168, 134, 92, 0.42);
  border-bottom-width: 1px;
  border-radius: 1px;
  background: rgba(12, 13, 16, 0.92);
  box-shadow: none;
  color: rgba(220, 212, 196, 0.82);
  font-family: var(--font-herald, var(--stats-mono, "IBM Plex Mono", monospace));
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
}

.cal-day-dialog .cal-detail-head .cal-detail-close.ghost:hover {
  color: var(--paper);
  border-color: rgba(201, 165, 116, 0.72);
  background: rgba(28, 24, 18, 0.96);
  box-shadow: inset 0 0 0 1px rgba(201, 165, 116, 0.12);
}

.cal-day-dialog .cal-detail-head .cal-detail-close.ghost:active {
  border-bottom-width: 1px;
  background: rgba(8, 8, 10, 0.98);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.45);
}

.cal-day-dialog .cal-detail-head .cal-detail-kicker {
  margin: 0;
}

.cal-day-dialog .cal-hours {
  flex: 0 0 auto;
  align-content: start;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0.32rem;
  min-height: 0;
  /* Keep the hour band compact so months can show a full 5-row grid. */
  max-height: min(30%, 10.35rem);
  overflow: auto;
  background: #0c0d10;
  border: none;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(168, 134, 92, 0.28);
}

/* 04 manage: no Day detail head — show all 3 hour rows; months keep remaining height for 5 rows. */
#panel-grant-rsv .cal-day-dialog .cal-hours {
  max-height: none;
  overflow: visible;
  padding-top: 0.1rem;
}

#panel-grant-rsv .cal-day-dialog .cal-detail {
  gap: 0.55rem;
}

#panel-grant-rsv .cal-day-dialog .cal-detail-months {
  flex: 1 1 auto;
  min-height: 0;
}

.cal-detail-months {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  /* Titles/weekdays stay put; only each month’s date grid scrolls. */
  overflow: hidden;
  margin: 0;
  padding: 0.4rem 0 0.55rem;
  border-bottom: 1px solid rgba(168, 134, 92, 0.28);
}

.cal-detail-months:empty {
  display: none;
}

.cal-detail-months .cal-months {
  flex: 1 1 auto;
  margin: 0;
  height: 100%;
  min-height: 0;
  align-items: stretch;
}

.cal-detail-months .cal-month {
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}

.cal-detail-months .cal-month-head,
.cal-detail-months .cal-weekdays {
  flex: 0 0 auto;
}

.cal-detail-months .cal-grid {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  align-content: start;
  overscroll-behavior: contain;
}

#panel-grant-rsv .cal-day-dialog .cal-detail-months .cal-months,
.portal-page .cal-day-dialog .cal-detail-months .cal-months {
  gap: 0.65rem;
  --cal-day-h: 2.15rem;
}

.cal-day-dialog .cal-hour-occ {
  flex: 0 0 auto;
  margin: 0.15rem 0 0;
}

#panel-grant-rsv .cal-day-dialog .cal-hour-occ {
  border: none;
  background: transparent;
  padding: 0.35rem 0 0;
  min-height: 0;
}

.cal-day-dialog .cal-hour-occ--board {
  flex: 0 1 auto;
  max-height: min(38vh, 16rem);
  overflow: auto;
  border-color: rgba(110, 158, 196, 0.42);
  background:
    linear-gradient(180deg, rgba(36, 64, 96, 0.22) 0%, rgba(8, 12, 20, 0.96) 100%);
}

.cal-day-dialog .cal-hour-occ--board .cal-hour-occ-kicker {
  color: #9ec5e8;
}

.cal-day-dialog .cal-detail:has(.cal-hour-occ--board) .cal-hours {
  flex: 1 1 45%;
}

.cal-day-dialog-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 0.55rem;
  flex: 0 0 auto;
  margin: 0;
  margin-top: auto;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(168, 134, 92, 0.28);
  background: #0c0d10;
}

.cal-day-dialog-foot--manage {
  justify-content: center;
  align-items: stretch;
  padding-top: 0.55rem;
  overflow: visible;
  position: relative;
  z-index: 6;
}

.cal-manage-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto;
  column-gap: 0.65rem;
  row-gap: 0.35rem;
  align-items: center;
  width: min(100%, 56rem);
  margin: 0 auto;
  padding: 0.45rem 0.7rem 0.5rem;
  border: 1px solid rgba(168, 134, 92, 0.32);
  border-radius: 1px;
  background:
    linear-gradient(180deg, rgba(28, 26, 22, 0.55) 0%, rgba(10, 11, 14, 0.98) 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

#panel-grant-rsv .cal-manage-panel--account {
  position: relative;
  z-index: 8;
  overflow: visible;
  grid-template-rows: auto auto;
  align-items: center;
}

/* Flatten so Grant shares the search-bar row (not centered against label+input) */
#panel-grant-rsv .cal-manage-panel--account .cal-manage-account {
  display: contents;
}

#panel-grant-rsv .cal-manage-panel--account .cal-manage-search-label {
  grid-column: 1;
  grid-row: 1;
}

#panel-grant-rsv .cal-manage-panel--account .admin-grant-account-field {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
}

#panel-grant-rsv .cal-manage-panel--account .cal-manage-panel-grant-btn {
  grid-column: 2;
  grid-row: 2;
  align-self: stretch;
  height: auto;
  min-height: 2.15rem;
}

#panel-grant-rsv .cal-manage-account .user-combo-menu {
  /* Open upward so the list is not clipped by the Day Detail foot / dialog bottom */
  top: auto;
  bottom: calc(100% - 0.15rem);
  z-index: 30;
  max-height: min(16rem, 48vh);
}

.cal-manage-account {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  width: 100%;
}

.cal-manage-search-label {
  margin: 0;
  padding: 0;
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--stats-paper, rgba(232, 239, 233, 0.88));
  line-height: 1.2;
}

.cal-manage-account .admin-grant-account-field {
  margin: 0;
}

.cal-manage-account .user-combo-shell {
  min-height: 2.15rem;
}

.cal-manage-panel-label {
  grid-column: 1;
  grid-row: 1;
  white-space: nowrap;
}

.cal-manage-panel-pick {
  display: block;
  flex: none;
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  min-width: 0;
  width: 100%;
}

.cal-manage-panel-pick select {
  width: 100%;
  min-height: 2.15rem;
  max-height: 2.85rem;
  padding: 0.25rem 0.4rem;
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  font-size: 0.72rem;
}

.cal-manage-panel-grant-btn {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  width: auto;
  min-width: 5.5rem;
  margin: 0;
  min-height: 2.15rem;
}

.cal-manage-panel-hint {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  font-size: 0.56rem;
}

.cal-detail-block-bar {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 0 0 auto;
  flex-shrink: 0;
  margin-top: 0;
  padding: 0.55rem 0 0.35rem;
  border-top: 0;
  overflow: visible;
  position: relative;
  z-index: 2;
}

.cal-block-edit-hint {
  flex: 0 0 auto;
  margin: 0;
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  font-size: 0.62rem;
  letter-spacing: 0.03em;
  color: rgba(180, 176, 168, 0.72);
  text-align: left;
}

.cal-block-edit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem 0.75rem;
  width: 100%;
}

.cal-block-edit-lhs,
.cal-block-edit-rhs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.cal-block-edit-rhs {
  margin-left: auto;
}

.cal-block-mode {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.22rem;
}

.cal-block-mode-kicker {
  margin: 0;
  font-family: var(--font-herald, var(--stats-mono, "IBM Plex Mono", monospace));
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(201, 165, 116, 0.72);
}

.cal-block-mode-switch {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  min-width: 11.5rem;
  padding: 0.18rem;
  border: 1px solid rgba(168, 134, 92, 0.42);
  border-radius: 2px;
  background: rgba(8, 8, 10, 0.92);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  box-sizing: border-box;
  overflow: visible;
}

.cal-block-mode-opt {
  appearance: none;
  margin: 0;
  min-height: 1.85rem;
  padding: 0.32rem 0.7rem;
  border: 1px solid transparent;
  border-radius: 1px;
  box-sizing: border-box;
  line-height: 1.25;
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    color 0.12s ease,
    background 0.12s ease,
    border-color 0.12s ease,
    box-shadow 0.12s ease;
}

/* Idle = 淺 fill so both modes read as choosable plates. */
.cal-block-mode-opt--block {
  color: rgba(255, 216, 196, 0.72);
  border-color: rgba(220, 140, 100, 0.28);
  background: rgba(130, 56, 36, 0.22);
}

.cal-block-mode-opt--unblock {
  color: rgba(210, 246, 240, 0.72);
  border-color: rgba(120, 200, 188, 0.28);
  background: rgba(36, 92, 86, 0.22);
}

.cal-block-mode-opt:hover:not(:disabled):not(.is-mode-on) {
  color: rgba(232, 224, 210, 0.95);
}

.cal-block-mode-opt--block:hover:not(:disabled):not(.is-mode-on) {
  background: rgba(130, 56, 36, 0.32);
  border-color: rgba(220, 140, 100, 0.45);
}

.cal-block-mode-opt--unblock:hover:not(:disabled):not(.is-mode-on) {
  background: rgba(36, 92, 86, 0.32);
  border-color: rgba(120, 200, 188, 0.45);
}

.cal-block-mode-opt:focus-visible {
  outline: 1px solid rgba(201, 165, 116, 0.75);
  outline-offset: 1px;
}

/* Selected = 深 fill (same chroma family, stronger). */
.cal-block-mode-opt--block.is-mode-on {
  color: #ffd8c4;
  border-color: rgba(220, 140, 100, 0.85);
  background: rgba(130, 56, 36, 0.55);
  box-shadow: inset 0 0 0 1px rgba(240, 180, 140, 0.18);
}

.cal-block-mode-opt--unblock.is-mode-on {
  color: #d2f6f0;
  border-color: rgba(120, 200, 188, 0.85);
  background: rgba(36, 92, 86, 0.55);
  box-shadow: inset 0 0 0 1px rgba(150, 220, 208, 0.18);
}

.cal-block-mode-opt:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.cal-day-dialog.has-edit-mode .cal-block-mode-kicker::after {
  content: " · selecting";
  letter-spacing: 0.08em;
  color: rgba(201, 165, 116, 0.55);
}

.cal-block-edit-idle,
.cal-block-edit-active {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  justify-content: flex-end;
}

.cal-day-dialog.is-block-edit .cal-day-dialog-day.is-edit-picked,
.cal-day-dialog.is-unblock-edit .cal-day-dialog-day.is-edit-picked {
  border-color: rgba(96, 180, 255, 0.98);
  box-shadow: 0 0 0 1px rgba(96, 180, 255, 0.85);
}

.cal-day-dialog.is-unblock-edit .cal-day-dialog-day.is-edit-picked {
  border-color: rgba(88, 168, 158, 0.98);
  box-shadow: 0 0 0 1px rgba(88, 168, 158, 0.85);
}

.cal-day-dialog .cal-hour.is-edit-picked {
  border-color: rgba(96, 180, 255, 0.98) !important;
  box-shadow: 0 0 0 1px rgba(96, 180, 255, 0.85);
}

.cal-day-dialog.is-unblock-edit .cal-hour.is-edit-picked {
  border-color: rgba(88, 168, 158, 0.98) !important;
  box-shadow: 0 0 0 1px rgba(88, 168, 158, 0.85);
}

.cal-day-dialog.is-block-edit .cal-hour.is-block-locked,
.cal-day-dialog.is-block-edit .cal-day-dialog-day.is-block-locked {
  opacity: 0.55;
  cursor: not-allowed;
}

.cal-block-btn {
  min-height: 1.85rem;
  height: auto;
  padding: 0.3rem 0.7rem;
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
}

.cal-block-btn--block {
  border: 1px solid rgba(196, 118, 88, 0.78);
  color: #f0c2a8;
  background: rgba(110, 48, 32, 0.34);
}

.cal-block-btn--block:hover,
.cal-block-btn--block:focus-visible {
  border-color: rgba(220, 140, 100, 0.95);
  color: #ffd8c4;
  background: rgba(130, 56, 36, 0.48);
  outline: none;
}

.cal-block-btn--unblock {
  border: 1px solid rgba(88, 168, 158, 0.75);
  color: #b4e8e0;
  background: rgba(28, 72, 68, 0.36);
}

.cal-block-btn--unblock:hover,
.cal-block-btn--unblock:focus-visible {
  border-color: rgba(120, 200, 188, 0.9);
  color: #d2f6f0;
  background: rgba(36, 92, 86, 0.5);
  outline: none;
}

.cal-block-btn--block.is-mode-on {
  box-shadow: 0 0 0 1px rgba(220, 140, 100, 0.55);
}

.cal-block-btn--unblock.is-mode-on {
  box-shadow: 0 0 0 1px rgba(120, 200, 188, 0.55);
}

.cal-block-btn--apply {
  border: 1px solid rgba(186, 150, 88, 0.85);
  color: #e8d4a0;
  background: rgba(120, 48, 42, 0.22);
}

.cal-block-btn--apply:hover:not(:disabled),
.cal-block-btn--apply:focus-visible:not(:disabled) {
  border-color: rgba(210, 175, 105, 0.95);
  color: #f2e2b8;
  background: rgba(140, 56, 48, 0.32);
  outline: none;
}

.cal-block-btn--apply:disabled {
  border-color: rgba(168, 134, 92, 0.35);
  color: rgba(200, 180, 140, 0.45);
  background: rgba(90, 40, 36, 0.12);
}

.cal-block-btn--cancel {
  border: 1px solid rgba(168, 134, 92, 0.4);
  color: rgba(220, 212, 196, 0.78);
  background: transparent;
}

.cal-block-btn--cancel:hover:not(:disabled),
.cal-block-btn--cancel:focus-visible:not(:disabled) {
  border-color: rgba(201, 165, 116, 0.7);
  color: var(--stats-paper, #f4eee3);
  outline: none;
}

.cal-block-btn--cancel:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.cal-block-btn--day {
  border-color: rgba(186, 168, 96, 0.78);
  color: #e8dba8;
  background: rgba(78, 70, 32, 0.32);
}

.cal-block-btn--day.cal-block-btn--block {
  border-color: rgba(196, 118, 88, 0.78);
  color: #f0c2a8;
  background: rgba(110, 48, 32, 0.34);
}

.cal-block-btn--day.cal-block-btn--unblock {
  border-color: rgba(186, 168, 96, 0.72);
  color: #e8dba8;
  background: rgba(78, 70, 32, 0.32);
}

.cal-block-btn--hour {
  border-color: rgba(110, 158, 196, 0.75);
  color: #b8d4ef;
  background: rgba(36, 64, 96, 0.34);
}

.cal-block-btn--hour.cal-block-btn--block {
  border-color: rgba(176, 96, 132, 0.78);
  color: #efb8d0;
  background: rgba(88, 36, 62, 0.36);
}

.cal-block-btn--hour.cal-block-btn--unblock {
  border-color: rgba(88, 168, 158, 0.75);
  color: #b4e8e0;
  background: rgba(28, 72, 68, 0.36);
}

.cal-block-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

@media (max-width: 720px) {
  .cal-manage-panel,
  .cal-manage-panel--account {
    grid-template-columns: 1fr;
  }

  .cal-manage-panel-grant-btn {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
  }

  #panel-grant-rsv .cal-manage-panel--account {
    grid-template-rows: auto auto auto;
  }

  #panel-grant-rsv .cal-manage-panel--account .cal-manage-panel-grant-btn {
    grid-column: 1;
    grid-row: 3;
    width: 100%;
  }
}

.cal-day-dialog-foot > .cta,
.cal-day-dialog-foot > .admin-submit {
  margin: 0;
}

.cal-day-dialog .cal-hour {
  min-height: 3.05rem;
  max-height: 3.05rem;
  padding: 0.28rem 0.25rem 0.26rem;
  border: 1px solid rgba(168, 134, 92, 0.28);
  border-radius: 1px;
  background: #0c0d10;
  background-image: none;
  box-shadow: none;
  color: var(--paper);
  gap: 0.04rem;
  box-sizing: border-box;
}

.cal-day-dialog .cal-hour:hover:not(:disabled):not(.is-selected):not(.is-mine):not(.is-full):not(.is-past) {
  border-color: rgba(201, 165, 116, 0.65);
  background: rgba(201, 165, 116, 0.08);
  color: var(--paper);
}

.cal-day-dialog .cal-hour.is-empty {
  border-color: rgba(168, 134, 92, 0.34);
  background: rgba(12, 12, 14, 0.96);
}

.cal-day-dialog .cal-hour.is-partial {
  border-color: rgba(148, 136, 118, 0.75);
  background:
    linear-gradient(180deg, rgba(78, 70, 58, 0.48) 0%, rgba(16, 14, 12, 0.97) 100%);
  color: #ddd6cc;
  box-shadow: inset 0 0 0 1px rgba(180, 168, 148, 0.18);
}

.cal-day-dialog .cal-hour.is-partial .cal-hour-time {
  color: #ebe4da;
  font-weight: 700;
}

.cal-day-dialog .cal-hour.is-partial .cal-hour-status {
  color: #b0a89c;
}

.cal-day-dialog .cal-hour.is-partial .cal-hour-fill {
  color: rgba(196, 184, 168, 0.85);
}

.cal-day-dialog .cal-hour.is-full,
.cal-day-dialog .cal-hour.is-full:disabled {
  border-color: rgba(220, 100, 78, 0.78);
  background:
    linear-gradient(180deg, rgba(140, 42, 32, 0.55) 0%, rgba(36, 12, 10, 0.96) 100%);
  color: #ffd2c6;
  box-shadow: inset 0 0 0 1px rgba(220, 100, 78, 0.28);
  opacity: 1;
}

.cal-day-dialog .cal-hour.is-full .cal-hour-time {
  color: #ffe0d6;
  font-weight: 700;
}

.cal-day-dialog .cal-hour.is-full .cal-hour-status {
  color: #ffb4a4;
}

.cal-day-dialog .cal-hour.is-full .cal-hour-fill {
  color: rgba(255, 190, 176, 0.88);
}

.cal-day-dialog .cal-hour.is-past,
.cal-day-dialog .cal-hour.is-past:disabled {
  border-color: rgba(72, 72, 70, 0.85);
  background: rgba(14, 14, 16, 0.96);
  color: rgba(120, 118, 112, 0.75);
  opacity: 0.72;
  filter: grayscale(0.35);
}

.cal-day-dialog .cal-hour.is-past .cal-hour-time,
.cal-day-dialog .cal-hour.is-past .cal-hour-status,
.cal-day-dialog .cal-hour.is-past .cal-hour-fill {
  color: rgba(130, 128, 122, 0.72);
  font-weight: 500;
}

.cal-day-dialog .cal-hour.is-mine,
.cal-day-dialog .cal-hour.is-mine:disabled {
  border-color: rgba(72, 186, 168, 0.95);
  background:
    linear-gradient(180deg, rgba(28, 120, 108, 0.62) 0%, rgba(6, 26, 24, 0.97) 100%);
  color: #d4f5ee;
  box-shadow: inset 0 0 0 1px rgba(110, 210, 192, 0.32);
  opacity: 1;
  filter: none;
}

.cal-day-dialog .cal-hour.is-mine .cal-hour-time {
  color: #e8fff8;
  font-weight: 800;
}

.cal-day-dialog .cal-hour.is-mine .cal-hour-status {
  color: #9ee8d8;
  font-weight: 700;
}

.cal-day-dialog .cal-hour.is-mine .cal-hour-fill {
  color: rgba(158, 232, 216, 0.9);
}

.cal-day-dialog .cal-hour.is-selected:not(.is-mine),
.cal-day-dialog .cal-hour.is-selected:hover:not(:disabled):not(.is-mine) {
  border-color: rgba(96, 180, 255, 0.98);
  box-shadow: 0 0 0 1px rgba(96, 180, 255, 0.85);
}

.cal-day-dialog .cal-hour-time {
  color: var(--paper);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.1;
}

.cal-day-dialog .cal-hour-status {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(201, 165, 116, 0.72);
}

/* Ongoing hour: Open + mm:ss in the status band (same tile rem). */
.cal-day-dialog .cal-hour-status.is-live {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.28rem;
  max-width: 100%;
  line-height: 1.1;
}

.cal-day-dialog .cal-hour-status-label {
  letter-spacing: 0.1em;
}

.cal-day-dialog .cal-hour-status-left {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  text-transform: none;
  color: rgba(243, 230, 200, 0.92);
}

.cal-day-dialog .cal-hour.is-live:not(.is-past):not(.is-full):not(.is-blocked) {
  border-color: rgba(201, 165, 116, 0.55);
}

.cal-day-dialog .cal-hour.is-empty .cal-hour-status {
  color: rgba(168, 134, 92, 0.62);
}

.cal-day-dialog .cal-hour-fill {
  font-size: 0.62rem;
  color: rgba(232, 239, 233, 0.48);
}

.cal-day-dialog .cal-hour.is-empty .cal-hour-fill {
  color: rgba(232, 239, 233, 0.4);
}

.cal-day-dialog .cal-hour-occ {
  background: #0c0d10;
  border: 1px solid rgba(168, 134, 92, 0.28);
}

#panel-grant-rsv .cal-day-dialog .cal-hour-occ {
  background: transparent;
  border: none;
}

/* In-page move: pick destination on Day Detail */
.cal-day-dialog.is-move-pick .cal-detail-head .cal-detail-kicker {
  color: rgba(120, 180, 255, 0.95);
}

.cal-day-dialog.is-move-pick .cal-hour:not(:disabled):not(.is-move-from) {
  box-shadow: inset 0 0 0 1px rgba(90, 150, 255, 0.28);
}

.cal-day-dialog.is-move-pick .cal-hour:not(:disabled):not(.is-move-from):hover {
  border-color: rgba(90, 150, 255, 0.75);
  box-shadow: inset 0 0 0 1px rgba(90, 150, 255, 0.45);
}

.cal-day-dialog.is-move-pick .cal-hour.is-move-from {
  border-color: rgba(201, 165, 116, 0.85);
  box-shadow: inset 0 0 0 1px rgba(201, 165, 116, 0.35);
  opacity: 0.95;
}

.cal-hour-person.is-moving {
  box-shadow: inset 0 0 0 1px rgba(90, 150, 255, 0.55);
  background: rgba(40, 70, 120, 0.22);
}

.admin-grant-form {
  max-width: none;
  width: 100%;
  gap: 0.75rem;
}

.admin-grant-form .lede,
.admin-panel#panel-grant-rsv .lede {
  max-width: none;
  width: 100%;
}

.cal-month-head {
  margin: 0 0 0.55rem;
}

.cal-month {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.cal-month-title {
  margin: 0;
  font-family: var(--font-display, var(--font-herald));
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--paper);
  letter-spacing: 0.02em;
}

@media (min-width: 960px) {
  .cal-months > .cal-month:last-child .cal-month-head,
  .cal-months > .cal-month:last-child .cal-month-title {
    text-align: right;
  }
}

.cal-weekdays,
.cal-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.28rem;
}

.cal-week {
  height: var(--cal-day-h, 3.1rem);
  min-height: var(--cal-day-h, 3.1rem);
  max-height: var(--cal-day-h, 3.1rem);
}

.cal-weekdays {
  margin-bottom: 0.35rem;
  flex: 0 0 auto;
}

.cal-weekday {
  text-align: center;
  font-family: var(--font-herald);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(168, 134, 92, 0.72);
}

.cal-grid {
  display: grid;
  grid-template-rows: repeat(6, var(--cal-day-h, 3.1rem));
  gap: 0.28rem;
  flex: 0 0 auto;
  width: 100%;
  /* Frame the whole date block so cells aren’t edge-clipped / unboxed */
  box-sizing: border-box;
  padding: 0.35rem;
  border: 1px solid rgba(168, 134, 92, 0.42);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.22);
}

.cal-day {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0.35rem 0.4rem 0.3rem;
  border: 1px solid rgba(168, 134, 92, 0.38);
  border-radius: 3px;
  background: rgba(8, 10, 12, 0.88);
  color: var(--paper);
  font: inherit;
  cursor: pointer;
  box-sizing: border-box;
  transition:
    border-color 0.12s ease,
    background 0.12s ease,
    color 0.12s ease;
}

.cal-day.is-pad {
  border: 1px solid transparent;
  background: transparent;
  height: 100%;
  min-height: 0;
  cursor: default;
}

.cal-day:hover:not(:disabled):not(.is-pad) {
  border-color: rgba(201, 165, 116, 0.55);
}

.cal-day.is-today {
  box-shadow: inset 0 0 0 1px rgba(201, 165, 116, 0.45);
}

.cal-day-dialog.is-block-edit .cal-day.is-edit-picked,
.cal-day-dialog.is-unblock-edit .cal-day.is-edit-picked,
.cal-day.is-edit-picked {
  border-color: rgba(96, 180, 255, 0.98) !important;
  box-shadow: 0 0 0 1px rgba(96, 180, 255, 0.85);
}

.cal-day-dialog.is-unblock-edit .cal-day.is-edit-picked {
  border-color: rgba(88, 168, 158, 0.98) !important;
  box-shadow: 0 0 0 1px rgba(88, 168, 158, 0.85);
}

.cal-day-dialog.is-block-edit .cal-day.is-block-locked,
.cal-day.is-block-locked {
  opacity: 0.55;
  cursor: not-allowed;
}

.cal-day.is-selected {
  border-color: rgba(201, 165, 116, 0.9);
  background: rgba(201, 165, 116, 0.14);
  color: var(--accent-hot);
}

.cal-day.is-muted,
.cal-day:disabled:not(.is-open) {
  opacity: 0.62;
  cursor: not-allowed;
}

.cal-day.is-open:not(.is-full):not(.has-full):not(.has-mine):not(.has-bookings) {
  border-color: rgba(168, 134, 92, 0.38);
  background: rgba(10, 11, 14, 0.96);
  color: rgba(220, 214, 204, 0.88);
  box-shadow: none;
  opacity: 1;
}

.cal-day.is-open:not(:disabled):not(.is-full):not(.has-full):not(.has-mine):not(.has-bookings) {
  border-color: rgba(168, 134, 92, 0.48);
  background: rgba(12, 13, 16, 0.98);
  box-shadow: none;
  cursor: pointer;
}

.cal-day.is-open:not(.is-full):not(.has-full):not(.has-mine):not(.has-bookings) .cal-day-num {
  color: rgba(232, 228, 220, 0.9);
  font-weight: 600;
}

.cal-day.is-open:not(:disabled):not(.is-full):not(.has-full):not(.has-mine):not(.has-bookings) .cal-day-num {
  color: rgba(240, 236, 228, 0.95);
  font-weight: 600;
}

/* Your seat (teal) vs others booked (warm pewter) — after .is-open so they always win */
.cal-day.is-open.has-mine:not(.is-full):not(.has-full),
.cal-day.has-mine:not(.is-full):not(.has-full) {
  border-color: rgba(72, 186, 168, 0.95);
  background:
    linear-gradient(165deg, rgba(28, 120, 108, 0.74) 0%, rgba(6, 26, 24, 0.97) 100%);
  color: #d4f5ee;
  box-shadow:
    inset 0 0 0 1px rgba(110, 210, 192, 0.32),
    0 0 0 1px rgba(48, 140, 128, 0.28);
  opacity: 1;
  filter: none;
}

.cal-day.is-open.has-mine:not(.is-full):not(.has-full) .cal-day-num,
.cal-day.has-mine:not(.is-full):not(.has-full) .cal-day-num {
  color: #e8fff8;
  font-weight: 800;
}

.cal-day-dot--mine,
.cal-day.has-mine .cal-day-dot {
  color: #9ee8d8;
  font-weight: 800;
}

.cal-day.is-open.has-bookings:not(.has-mine):not(.is-full),
.cal-day.has-bookings:not(.has-mine):not(.is-full) {
  border-color: rgba(148, 136, 118, 0.88);
  background:
    linear-gradient(165deg, rgba(78, 70, 58, 0.78) 0%, rgba(16, 14, 12, 0.97) 100%);
  color: #ddd6cc;
  box-shadow: inset 0 0 0 1px rgba(180, 168, 148, 0.28);
  opacity: 1;
  filter: none;
}

.cal-day.is-open.has-bookings:not(.has-mine):not(.is-full) .cal-day-num,
.cal-day.has-bookings:not(.has-mine):not(.is-full) .cal-day-num {
  color: #ebe4da;
  font-weight: 700;
}

.cal-day.has-bookings:not(.has-mine) .cal-day-dot {
  color: #b0a89c;
  font-weight: 700;
}

/* Admin Manage reservations — lock same palette after shared .cal-day rules */
#panel-grant-rsv .cal-day.is-open:not(.is-full):not(.has-full):not(.has-mine):not(.has-bookings) {
  border-color: rgba(168, 134, 92, 0.38);
  background: rgba(10, 11, 14, 0.96);
  color: rgba(220, 214, 204, 0.88);
  box-shadow: none;
  opacity: 1;
}

#panel-grant-rsv .cal-day.is-open:not(:disabled):not(.is-full):not(.has-full):not(.has-mine):not(.has-bookings) {
  border-color: rgba(168, 134, 92, 0.48);
  background: rgba(12, 13, 16, 0.98);
  box-shadow: none;
  cursor: pointer;
}

#panel-grant-rsv .cal-day.is-open:not(.is-full):not(.has-full):not(.has-mine):not(.has-bookings) .cal-day-num,
#panel-grant-rsv .cal-day.is-open:not(:disabled):not(.is-full):not(.has-full):not(.has-mine):not(.has-bookings) .cal-day-num {
  color: rgba(240, 236, 228, 0.95);
  font-weight: 600;
}

#panel-grant-rsv .cal-day.is-open.has-bookings:not(.has-mine):not(.is-full),
#panel-grant-rsv .cal-day.has-bookings:not(.has-mine):not(.is-full) {
  border-color: rgba(148, 136, 118, 0.88);
  background:
    linear-gradient(165deg, rgba(78, 70, 58, 0.78) 0%, rgba(16, 14, 12, 0.97) 100%);
  color: #ddd6cc;
  box-shadow: inset 0 0 0 1px rgba(180, 168, 148, 0.28);
  opacity: 1;
  filter: none;
}

#panel-grant-rsv .cal-day.is-open.has-bookings:not(.has-mine):not(.is-full) .cal-day-num,
#panel-grant-rsv .cal-day.has-bookings:not(.has-mine):not(.is-full) .cal-day-num {
  color: #ebe4da;
  font-weight: 700;
}

#panel-grant-rsv .cal-day.has-bookings:not(.has-mine) .cal-day-dot {
  color: #b0a89c;
  font-weight: 700;
}

#panel-grant-rsv .cal-day.is-open.has-mine:not(.is-full),
#panel-grant-rsv .cal-day.has-mine:not(.is-full) {
  border-color: rgba(72, 186, 168, 0.95);
  background:
    linear-gradient(165deg, rgba(28, 120, 108, 0.74) 0%, rgba(6, 26, 24, 0.97) 100%);
  color: #d4f5ee;
  box-shadow:
    inset 0 0 0 1px rgba(110, 210, 192, 0.32),
    0 0 0 1px rgba(48, 140, 128, 0.28);
  opacity: 1;
  filter: none;
}

#panel-grant-rsv .cal-day.is-open.has-mine:not(.is-full) .cal-day-num,
#panel-grant-rsv .cal-day.has-mine:not(.is-full) .cal-day-num {
  color: #e8fff8;
  font-weight: 800;
}

#panel-grant-rsv .cal-day.has-mine .cal-day-dot {
  color: #9ee8d8;
  font-weight: 800;
}

.cal-day.is-closed:not(.is-full):not(.has-full),
.cal-day.is-unavailable:not(.is-full):not(.has-full) {
  border-color: rgba(168, 134, 92, 0.34);
  background:
    linear-gradient(180deg, rgba(22, 22, 24, 0.98) 0%, rgba(10, 10, 12, 0.98) 100%);
  color: rgba(120, 116, 108, 0.85);
  opacity: 0.78;
  cursor: not-allowed;
  box-shadow: none;
  filter: grayscale(0.45);
}

.cal-day.is-closed:not(.is-full):not(.has-full) .cal-day-num,
.cal-day.is-unavailable:not(.is-full):not(.has-full) .cal-day-num {
  color: rgba(92, 90, 84, 0.65);
  font-weight: 500;
}

.cal-day.has-bookings {
  /* base flag only — colored wash lives in the higher-specificity rules above */
  border-color: rgba(148, 136, 118, 0.4);
}

.cal-day.has-full {
  border-color: rgba(184, 92, 74, 0.62);
  background:
    linear-gradient(165deg, rgba(140, 42, 32, 0.42) 0%, rgba(28, 12, 10, 0.92) 100%);
  color: #f2c4b8;
  opacity: 1;
}

.cal-day.is-full {
  border-color: rgba(220, 100, 78, 0.85);
  background:
    linear-gradient(165deg, rgba(160, 48, 36, 0.72) 0%, rgba(48, 14, 12, 0.95) 100%);
  color: #ffd2c6;
  box-shadow: inset 0 0 0 1px rgba(220, 100, 78, 0.35);
  opacity: 1;
}

.cal-day.has-full .cal-day-dot,
.cal-day.is-full .cal-day-dot {
  color: #ffb4a4;
  font-weight: 600;
}

/* Admin blackout — distinct from open gold, pewter booked, coral full */
.cal-day.is-blocked:not(.is-full),
.cal-day.is-open.is-blocked:not(.is-full) {
  border-color: rgba(160, 88, 96, 0.78);
  background:
    linear-gradient(165deg, rgba(88, 36, 42, 0.55) 0%, rgba(18, 10, 12, 0.97) 100%);
  color: #e8c8cc;
  box-shadow: inset 0 0 0 1px rgba(180, 110, 118, 0.22);
  opacity: 1;
  filter: none;
}

.cal-day.is-blocked:not(.is-full) .cal-day-num,
.cal-day.is-open.is-blocked:not(.is-full) .cal-day-num {
  color: #f2d8dc;
  font-weight: 700;
}

.cal-day.has-blocked:not(.is-blocked):not(.is-full):not(.has-mine) {
  box-shadow: inset 0 -2px 0 rgba(160, 88, 96, 0.55);
}

.cal-day-dot--blocked,
.cal-day.is-blocked .cal-day-dot,
.cal-day.has-blocked .cal-day-dot--blocked {
  color: #e0a8b0;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  max-width: 100%;
  line-height: 1.1;
  text-align: right;
}

.cal-day-num {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1;
}

.cal-day-dot {
  align-self: flex-end;
  font-size: 0.65rem;
  letter-spacing: 0.02em;
  color: rgba(176, 166, 150, 0.85);
}

.cal-detail {
  margin-top: 0.95rem;
  padding: 0.95rem 1rem 1.05rem;
  border: 1px solid rgba(168, 134, 92, 0.32);
  border-radius: 4px;
  background: rgba(6, 8, 10, 0.72);
}

.cal-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.cal-detail-kicker {
  margin: 0 0 0.2rem;
  font-family: var(--font-herald);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.cal-detail-title {
  margin: 0;
  font-family: var(--font-display, var(--font-herald));
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--paper);
}

.cal-day-dialog .cal-detail-head .cal-detail-title {
  font-family: var(--font-display, var(--font-herald));
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--paper);
}

.cal-hours {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
  gap: 0.35rem;
}

.cal-hour {
  display: grid;
  gap: 0.1rem;
  justify-items: center;
  padding: 0.45rem 0.25rem;
  border: 1px solid rgba(168, 134, 92, 0.28);
  border-radius: 3px;
  background: rgba(8, 10, 12, 0.88);
  color: var(--paper-dim);
  font: inherit;
  cursor: pointer;
  transition:
    border-color 0.12s ease,
    background 0.12s ease,
    color 0.12s ease;
}

.cal-hour:hover:not(:disabled) {
  border-color: rgba(201, 165, 116, 0.55);
  color: var(--paper);
}

.cal-hour.is-selected {
  border-color: rgba(96, 180, 255, 0.98);
  box-shadow: 0 0 0 1px rgba(96, 180, 255, 0.85);
}

.cal-hour-status {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(201, 165, 116, 0.7);
}

.cal-hour.is-partial {
  border-color: rgba(148, 136, 118, 0.7);
  background:
    linear-gradient(180deg, rgba(78, 70, 58, 0.42) 0%, rgba(16, 14, 12, 0.95) 100%);
  color: #ddd6cc;
}

.cal-hour.is-partial .cal-hour-time {
  color: #ebe4da;
  font-weight: 700;
}

.cal-hour.is-partial .cal-hour-status {
  color: #b0a89c;
}

.cal-hour.is-partial .cal-hour-fill {
  color: rgba(196, 184, 168, 0.85);
}

.cal-hour.is-mine,
.cal-hour.is-mine:disabled {
  opacity: 1;
  cursor: default;
  border-color: rgba(72, 186, 168, 0.95);
  background:
    linear-gradient(180deg, rgba(28, 120, 108, 0.55) 0%, rgba(6, 26, 24, 0.94) 100%);
  color: #d4f5ee;
  box-shadow: inset 0 0 0 1px rgba(110, 210, 192, 0.28);
}

.cal-hour.is-mine .cal-hour-time {
  color: #e8fff8;
  font-weight: 700;
}

.cal-hour.is-mine .cal-hour-fill {
  color: rgba(158, 232, 216, 0.9);
  font-weight: 600;
}

.cal-hour.is-blocked:not(.is-past):not(.is-full),
.cal-day-dialog .cal-hour.is-blocked:not(.is-past):not(.is-full) {
  border-color: rgba(160, 88, 96, 0.78);
  background:
    linear-gradient(180deg, rgba(88, 36, 42, 0.48) 0%, rgba(18, 10, 12, 0.96) 100%);
  color: #e8c8cc;
  box-shadow: inset 0 0 0 1px rgba(180, 110, 118, 0.2);
  opacity: 1;
}

.cal-hour.is-blocked:not(.is-past):not(.is-full) .cal-hour-time,
.cal-day-dialog .cal-hour.is-blocked:not(.is-past):not(.is-full) .cal-hour-time {
  color: #f2d8dc;
  font-weight: 700;
}

.cal-hour.is-blocked:not(.is-past):not(.is-full) .cal-hour-status,
.cal-hour.is-blocked:not(.is-past):not(.is-full) .cal-hour-fill,
.cal-day-dialog .cal-hour.is-blocked:not(.is-past):not(.is-full) .cal-hour-status,
.cal-day-dialog .cal-hour.is-blocked:not(.is-past):not(.is-full) .cal-hour-fill {
  color: #e0a8b0;
}

.cal-hour.is-locked:disabled:not(.is-full):not(.is-past) {
  opacity: 0.72;
  cursor: not-allowed;
}

.cal-day.has-tagged {
  border-color: rgba(120, 196, 160, 0.85);
  background:
    linear-gradient(180deg, rgba(56, 110, 88, 0.55) 0%, rgba(18, 32, 26, 0.92) 100%);
  box-shadow: inset 0 0 0 1px rgba(160, 220, 180, 0.22);
  opacity: 1;
}

.cal-day.has-tagged .cal-day-num {
  color: #d8ffe8;
}

.cal-hour.is-tagged,
.cal-hour.is-tagged:disabled {
  border-color: rgba(120, 196, 160, 0.9);
  background: rgba(72, 140, 110, 0.28);
}

.cal-hours--manage {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.35rem;
  max-height: none;
  overflow: visible;
}

@media (max-width: 42rem) {
  .cal-hours--manage {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.cal-hour-occ {
  margin: 0.15rem 0 0;
  padding: 0.55rem 0.65rem;
  border: 1px solid rgba(168, 134, 92, 0.28);
  border-radius: 1px;
  background: #0c0d10;
  min-height: 2.4rem;
}

.cal-hour-occ-hint {
  margin: 0;
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: rgba(180, 176, 168, 0.62);
}

.cal-hour-occ-body:not([hidden]) {
  display: block;
}

.cal-hour-occ-kicker {
  margin: 0 0 0.35rem;
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stats-gold, #c9a574);
}

.cal-hour-person-name--link {
  color: #d4e6f6;
  text-decoration: none;
  border-bottom: 1px solid rgba(110, 158, 196, 0.45);
}

.cal-hour-person-name--link:hover,
.cal-hour-person-name--link:focus-visible {
  color: #eaf5ff;
  border-bottom-color: rgba(158, 197, 232, 0.85);
}

.cal-hour-person-when {
  margin-left: 0.45rem;
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--stats-paper, #f4eee3);
}

.cal-board-foot-note {
  margin: 0;
  max-width: 36rem;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--stats-muted, rgba(180, 176, 168, 0.7));
}

.cal-book-slot-note {
  flex: 1 1 28rem;
  margin: 0;
  max-width: min(48rem, calc(100% - 9rem));
  margin-right: auto;
  font-family: var(--stats-mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--stats-gold-dim, rgba(201, 165, 116, 0.85));
}

.cal-hour-occ .cal-hour-people {
  gap: 0.3rem;
}

.cal-hour-block {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 0.45rem;
  align-items: start;
  padding: 0.35rem;
  border: 1px solid rgba(168, 134, 92, 0.28);
  border-radius: 1px;
  background: #0c0d10;
}

.cal-hour-block.has-tagged-occ {
  border-color: rgba(120, 196, 160, 0.55);
}

.cal-hour-block .cal-hour {
  width: 100%;
}

.cal-hour-people {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.cal-hour-person {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  padding: 0.2rem 0.3rem;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.03);
}

.cal-hour-person.is-tagged {
  background: rgba(72, 140, 110, 0.22);
  border: 1px solid rgba(120, 196, 160, 0.35);
}

.cal-hour-person-name {
  font-size: 0.78rem;
  color: var(--paper);
}

.cal-hour-person-actions {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
}

.cal-hour-empty {
  margin: 0;
  font-size: 0.72rem;
  color: rgba(180, 176, 168, 0.55);
  align-self: center;
}

.grant-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.55rem;
  min-height: 1.6rem;
}

.grant-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.5rem;
  border: 1px solid rgba(168, 134, 92, 0.55);
  border-radius: 3px;
  background: rgba(168, 134, 92, 0.14);
  color: #ffe7b0;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}

.grant-tag:hover {
  border-color: rgba(201, 165, 116, 0.85);
  background: rgba(168, 134, 92, 0.24);
}

.grant-tag-x {
  opacity: 1;
  font-size: 1.15rem;
  line-height: 1;
}

.grant-manage-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.65rem;
  align-items: flex-end;
  justify-content: flex-end;
  width: 100%;
}

.grant-manage-block {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
  align-items: center;
  margin-right: auto;
}

.grant-manage-block .rsv-btn {
  min-height: 2.2rem;
  padding-inline: 0.65rem;
  border-color: rgba(160, 88, 96, 0.45);
  color: #e0a8b0;
}

.grant-manage-block .rsv-btn:hover,
.grant-manage-block .rsv-btn:focus-visible {
  border-color: rgba(180, 110, 118, 0.75);
  color: #f2d8dc;
  background: rgba(88, 36, 42, 0.28);
}

.grant-manage-pick {
  flex: 1 1 14rem;
  min-width: 12rem;
  margin: 0;
  margin-right: auto;
  display: grid;
  gap: 0.35rem;
}

.grant-manage-pick-label {
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stats-gold, #c9a574);
}

.grant-manage-pick select {
  width: 100%;
  min-height: 2.55rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid rgba(168, 134, 92, 0.28);
  border-radius: 1px;
  background: #0c0d10;
  color: var(--paper);
  font: inherit;
  font-size: 0.82rem;
  box-sizing: border-box;
}

.grant-manage-pick-hint {
  margin: 0;
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  color: var(--stats-muted, rgba(180, 176, 168, 0.62));
}

.grant-manage-foot .cta,
.grant-manage-foot .rsv-btn {
  align-self: flex-end;
  min-height: 2.55rem;
}

.cal-hour.is-empty .cal-hour-fill {
  color: rgba(168, 213, 181, 0.55);
}

.cal-hour.is-full,
.cal-hour.is-full:disabled {
  opacity: 1;
  cursor: not-allowed;
  border-color: rgba(220, 100, 78, 0.75);
  background:
    linear-gradient(180deg, rgba(150, 46, 34, 0.78) 0%, rgba(52, 16, 14, 0.95) 100%);
  color: #ffd2c6;
  box-shadow: inset 0 0 0 1px rgba(255, 160, 140, 0.18);
}

.cal-hour.is-full .cal-hour-time {
  color: #ffe0d6;
}

.cal-hour.is-full .cal-hour-fill {
  color: #ffb4a4;
  font-weight: 600;
}

.cal-hour.is-past:not(.is-full),
.cal-hour.is-past:not(.is-full):disabled {
  opacity: 1;
  cursor: not-allowed;
  border-color: rgba(120, 118, 112, 0.55);
  background:
    linear-gradient(180deg, rgba(48, 46, 42, 0.88) 0%, rgba(18, 18, 18, 0.95) 100%);
  color: rgba(180, 176, 168, 0.75);
  box-shadow: none;
}

.cal-hour.is-past:not(.is-full) .cal-hour-time {
  color: rgba(190, 186, 178, 0.8);
  text-decoration: line-through;
  text-decoration-color: rgba(160, 156, 148, 0.55);
}

.cal-hour.is-past:not(.is-full) .cal-hour-fill {
  color: rgba(160, 156, 148, 0.7);
  font-weight: 500;
}

.cal-day.is-unavailable:not(.is-full):not(.has-full) {
  border-color: rgba(168, 134, 92, 0.34);
  background: rgba(16, 16, 18, 0.95);
  color: rgba(130, 128, 122, 0.85);
}

.cal-hour-time {
  font-size: 0.82rem;
  font-weight: 600;
}

.cal-hour-fill {
  font-size: 0.68rem;
  color: rgba(197, 212, 200, 0.65);
}

.cal-mine-list {
  display: grid;
  gap: 0.55rem;
}

.cal-mine-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(168, 134, 92, 0.22);
  border-radius: 3px;
  background: rgba(8, 10, 12, 0.55);
}

.rsv-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}

.rsv-roster-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 1rem;
}

.rsv-roster-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem 0.65rem;
  min-width: 0;
}

.rsv-when {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--paper);
}

.rsv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0;
  min-height: 1.9rem;
  height: 1.9rem;
  padding: 0 0.85rem;
  border-radius: 3px;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 0.12s ease,
    border-color 0.12s ease,
    background 0.12s ease;
}

.rsv-btn--go {
  border: 1px solid rgba(201, 165, 116, 0.75);
  background: rgba(201, 165, 116, 0.14);
  color: var(--accent-hot);
}

.rsv-btn--go:hover,
.rsv-btn--go:focus-visible {
  border-color: rgba(201, 165, 116, 0.95);
  background: rgba(201, 165, 116, 0.22);
  outline: none;
}

.rsv-btn--cancel {
  border: 1px solid rgba(232, 239, 233, 0.18);
  background: rgba(0, 0, 0, 0.28);
  color: var(--paper-dim);
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 500;
}

.rsv-btn--cancel:hover,
.rsv-btn--cancel:focus-visible {
  border-color: rgba(232, 130, 118, 0.55);
  color: #f0a39a;
  outline: none;
}

.rsv-btn--link {
  border: 1px solid rgba(168, 134, 92, 0.35);
  background: transparent;
  color: var(--paper-dim);
}

.rsv-btn--link:hover,
.rsv-btn--link:focus-visible {
  border-color: rgba(201, 165, 116, 0.7);
  color: var(--accent-hot);
  outline: none;
}

.admin-rsv-delete {
  margin: 0;
  margin-left: auto;
}

.cal-list-title {
  margin: 1.25rem 0 0.65rem;
  font-family: var(--font-herald);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.start-rsv-note {
  margin-bottom: 1rem !important;
  color: var(--accent-hot) !important;
}

.admin-roster-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.85rem;
}

.admin-roster-filters.hist-ledger-filters {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.55rem;
}

.hist-ledger-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.55rem 0.7rem;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}

.hist-ledger-row--time {
  grid-template-columns: minmax(0, 1fr);
  max-width: 18rem;
}

.hist-ledger-row--dims {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hist-ledger-row--meta {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  max-width: none;
}

@media (max-width: 720px) {
  .hist-ledger-row--dims {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .hist-ledger-row--meta {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.admin-roster-filters.hist-ledger-filters .admin-roster-select {
  flex: unset;
  min-width: 0;
  max-width: none;
  width: 100%;
}

.admin-roster-filters.hist-ledger-filters .admin-roster-select > .pick-dd,
.admin-roster-filters.hist-ledger-filters .admin-roster-select > select {
  width: 100%;
  min-width: 0;
}

/* “All sessions” uses value="" — still a real choice, same white as Newest first */
.hist-ledger-filters .pick-dd.is-empty .pick-dd-trigger {
  color: rgba(232, 239, 233, 0.88);
  font-weight: 600;
}

@media (max-width: 520px) {
  .hist-ledger-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .hist-ledger-row--time,
  .hist-ledger-row--meta {
    max-width: none;
  }
}

.hist-ledger-filters .ledger-combo {
  width: 100%;
  gap: 0;
}

/* Match pick-dd / NEWEST FIRST trigger + menu */
.hist-ledger-filters .ledger-combo .user-combo-shell {
  min-height: 2.2rem;
  border: 1px solid rgba(168, 134, 92, 0.42);
  border-bottom-width: 1px;
  border-bottom-color: rgba(168, 134, 92, 0.42);
  border-radius: 3px;
  background: rgba(8, 9, 10, 0.96);
  box-shadow: none;
}

.hist-ledger-filters .ledger-combo.is-open .user-combo-shell,
.hist-ledger-filters .ledger-combo .user-combo-shell:focus-within {
  border-color: rgba(201, 165, 116, 0.65);
  box-shadow: none;
}

.hist-ledger-filters .ledger-combo.is-picked .user-combo-shell {
  border-color: rgba(168, 134, 92, 0.42);
}

.hist-ledger-filters .ledger-combo .user-combo-input {
  min-height: 2.2rem;
  padding: 0.4rem 0.7rem;
  border-radius: 3px 0 0 3px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(232, 239, 233, 0.88);
}

.hist-ledger-filters .ledger-combo.is-picked .user-combo-input {
  caret-color: transparent;
  cursor: pointer;
  color: rgba(232, 239, 233, 0.88);
}

.hist-ledger-filters .ledger-combo .user-combo-input::placeholder {
  color: rgba(197, 212, 200, 0.45);
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 500;
  font-size: 0.78rem;
}

.hist-ledger-filters .ledger-combo .user-combo-toggle {
  min-width: 2.1rem;
  border-left: 1px solid rgba(168, 134, 92, 0.28);
  border-radius: 0 3px 3px 0;
  background: transparent;
  color: rgba(168, 134, 92, 0.85);
  font-size: 0.72rem;
}

.hist-ledger-filters .ledger-combo .user-combo-toggle:hover {
  background: rgba(201, 165, 116, 0.08);
}

.hist-ledger-filters .ledger-combo .user-combo-menu {
  z-index: 30;
  max-height: min(14rem, 45vh);
  top: calc(100% + 0.35rem);
  padding: 0.35rem;
  border-radius: 3px;
  background: #0a0a0a;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
}

.hist-ledger-filters .ledger-combo .user-combo-menu [role="option"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  margin: 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(232, 239, 233, 0.88);
  white-space: nowrap;
}

.hist-ledger-filters .ledger-combo .user-combo-menu [role="option"]:hover,
.hist-ledger-filters .ledger-combo .user-combo-menu [role="option"].is-active {
  background: rgba(28, 24, 18, 0.95);
  border-color: rgba(168, 134, 92, 0.55);
  color: #efe6c8;
}

.hist-ledger-filters .ledger-combo .user-combo-email {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  min-width: 0;
}

.hist-ledger-filters .ledger-combo .user-combo-meta {
  flex: 0 0 auto;
  margin-left: auto;
  text-transform: none;
  letter-spacing: 0.04em;
}

.hist-ledger-filters .ledger-combo .user-combo-meta .tag {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hist-ledger-filters .ledger-combo .ledger-combo-all {
  justify-content: flex-start;
  gap: 0.45rem;
  margin-bottom: 0.15rem;
  padding: 0.6rem 0.7rem;
  border-color: rgba(168, 134, 92, 0.35);
  background:
    linear-gradient(90deg, rgba(201, 165, 116, 0.12), rgba(201, 165, 116, 0.03) 55%, transparent);
  color: #efe6c8;
}

.hist-ledger-filters .ledger-combo .ledger-combo-all:hover,
.hist-ledger-filters .ledger-combo .ledger-combo-all.is-active {
  border-color: rgba(201, 165, 116, 0.7);
  background:
    linear-gradient(90deg, rgba(201, 165, 116, 0.2), rgba(201, 165, 116, 0.06) 60%, transparent);
  color: #f3df9a;
}

.hist-ledger-filters .ledger-combo .ledger-combo-all-mark {
  flex: 0 0 auto;
  width: 0.42rem;
  height: 0.42rem;
  box-sizing: border-box;
  border: 1px solid rgba(201, 165, 116, 0.85);
  background: rgba(201, 165, 116, 0.35);
  box-shadow: 0 0 8px rgba(201, 165, 116, 0.35);
  transform: rotate(45deg);
}

.hist-ledger-filters .ledger-combo .ledger-combo-all .user-combo-email {
  flex: 1 1 auto;
  color: #f3df9a;
  font-family: var(--font-herald);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.hist-ledger-filters .ledger-combo .ledger-combo-default-tag {
  display: inline-block;
  padding: 0.18rem 0.4rem;
  border: 1px solid rgba(201, 165, 116, 0.55);
  border-radius: 2px;
  background: rgba(201, 165, 116, 0.1);
  color: rgba(243, 223, 154, 0.92);
  font-family: var(--font-herald);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
}

.hist-ledger-filters .ledger-combo .ledger-combo-sep {
  list-style: none;
  height: 0;
  margin: 0.2rem 0.55rem 0.35rem;
  padding: 0;
  border: 0;
  border-top: 1px solid rgba(168, 134, 92, 0.28);
  pointer-events: none;
}

.hist-ledger-filters .ledger-combo .ledger-combo-all[hidden] + .ledger-combo-sep {
  display: none !important;
}

.hist-ledger-filters .ledger-combo .user-combo-empty {
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(197, 212, 200, 0.4);
}

.hist-ledger-count {
  margin: -0.35rem 0 0.65rem;
  font-size: 0.82rem;
  color: rgba(200, 206, 200, 0.62);
}

.admin-filter {
  padding: 0.42rem 0.7rem;
  border: 1px solid rgba(168, 134, 92, 0.28);
  border-radius: 3px;
  background: rgba(8, 10, 12, 0.88);
  color: var(--paper-dim);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.admin-filter:hover {
  border-color: rgba(201, 165, 116, 0.5);
  color: var(--paper);
}

.admin-filter.is-active {
  border-color: rgba(201, 165, 116, 0.8);
  background: rgba(201, 165, 116, 0.14);
  color: var(--accent-hot);
}

.admin-roster-search {
  flex: 1 1 10rem;
  min-width: 8rem;
}

.admin-roster-search input {
  width: 100%;
  box-sizing: border-box;
  min-height: 2.2rem;
  padding: 0.4rem 0.65rem;
  border: 1px solid rgba(0, 0, 0, 0.55);
  border-radius: 3px;
  background: rgba(8, 9, 10, 0.92);
  color: var(--paper);
  font: inherit;
  font-size: 0.88rem;
}

.admin-roster-select {
  flex: 1 1 12rem;
}

.admin-roster-select .pick-dd,
.admin-roster-select .user-combo {
  width: 100%;
  min-width: 0;
}

.admin-roster-select select,
.admin-form select {
  /* Native select is visually replaced when data-pick is set */
  width: 100%;
  box-sizing: border-box;
  min-height: 2.2rem;
  padding: 0.4rem 0.65rem;
  border: 1px solid rgba(0, 0, 0, 0.55);
  border-radius: 3px;
  background: rgba(8, 9, 10, 0.92);
  color: var(--paper);
  font: inherit;
  font-size: 0.88rem;
}

.pick-dd--compact .pick-dd-trigger {
  min-height: 2.2rem;
  padding: 0.4rem 1.85rem 0.4rem 0.7rem;
  font-size: 0.78rem;
}

.pick-dd--compact .pick-dd-menu {
  max-height: min(14rem, 45vh);
}

.pick-dd--compact .pick-dd-menu li {
  padding: 0.55rem 0.7rem;
  font-size: 0.76rem;
}

.admin-form .pick-dd {
  width: 100%;
}

@media (max-width: 860px) {
  body:has(main.admin-main),
  body:has(main.portal-main) {
    height: auto;
    overflow: auto;
  }

  .admin-main,
  .portal-main {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .admin-shell,
  .game-shell {
    grid-template-columns: 1fr;
    overflow: visible;
    min-height: 0;
  }

  .admin-menu,
  .game-menu {
    position: static;
    max-height: none;
  }

  .admin-stage {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .admin-menu-list,
  .game-menu-list {
    grid-template-columns: 1fr;
  }
}

.rsv-list { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 0.75rem; }
.rsv-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(232, 239, 233, 0.14);
  background: rgba(12, 14, 16, 0.55);
}

.code-langs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.code-langs .tag {
  margin-left: 0;
}

.code-input,
.code-text {
  margin: 0;
  padding: 0.85rem 1rem 1rem;
  border: none;
  background: transparent;
  color: #e6e8ea;
  font-family: ui-monospace, "SF Mono", "IBM Plex Mono", Menlo, monospace;
  font-size: 0.88rem;
  line-height: 1.55;
  white-space: pre;
  overflow-x: auto;
  tab-size: 4;
}

.code-input {
  width: 100%;
  min-height: 16rem;
  resize: vertical;
  white-space: pre;
}

.code-input:focus {
  outline: none;
}

.code-input::placeholder {
  color: rgba(230, 232, 234, 0.35);
}

.code-box-readonly .code-text {
  white-space: pre-wrap;
  word-break: break-word;
}

.answer-text {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: "IBM Plex Sans", ui-monospace, monospace;
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
  color: var(--paper);
}

.answer-text-empty {
  font-style: italic;
  color: rgba(232, 220, 190, 0.55);
  white-space: normal;
}

.answer-box-empty {
  opacity: 0.92;
}

.ref-toggle {
  margin-top: 0.75rem;
}

.ref-toggle summary {
  display: inline-flex;
  align-items: center;
  font: inherit;
  font-weight: 500;
  color: var(--paper-dim);
  background: linear-gradient(180deg, rgba(232, 239, 233, 0.1) 0%, rgba(0, 0, 0, 0.28) 100%);
  border: 1px solid rgba(232, 239, 233, 0.22);
  border-bottom: 4px solid rgba(0, 0, 0, 0.55);
  border-radius: 3px;
  padding: 0.5rem 0.9rem 0.45rem;
  cursor: pointer;
  list-style: none;
  width: fit-content;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 var(--press-rise) 0 rgba(0, 0, 0, 0.5),
    0 8px 14px rgba(0, 0, 0, 0.28);
  transform: translateY(0);
  transition:
    transform 0.07s ease,
    box-shadow 0.07s ease,
    border-bottom-width 0.07s ease,
    color 0.15s ease,
    border-color 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.ref-toggle summary::-webkit-details-marker {
  display: none;
}

.ref-toggle summary:hover {
  color: var(--paper);
  border-color: rgba(232, 239, 233, 0.35);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 6px 0 rgba(0, 0, 0, 0.5),
    0 12px 18px rgba(0, 0, 0, 0.32);
}

.ref-toggle summary:active {
  transform: translateY(3px);
  border-bottom-width: 1px;
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(0, 0, 0, 0.55);
}

.ref-toggle[open] summary {
  margin-bottom: 0.55rem;
  color: var(--accent-hot);
  border-color: rgba(168, 134, 92, 0.45);
  border-bottom-color: #5c4a22;
}

.ref-toggle[open] summary::after {
  content: " · hide";
  opacity: 0.7;
  font-weight: 400;
}

.judge-block {
  margin-top: 0;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(168, 134, 92, 0.42);
  border-bottom: var(--frame-bevel) solid var(--frame-lip);
  border-radius: var(--frame-radius);
  background:
    linear-gradient(180deg, rgba(201, 165, 116, 0.1) 0%, rgba(0, 0, 0, 0.32) 100%);
  display: grid;
  gap: 0.45rem;
  box-shadow: var(--frame-shadow-3d);
}

.judge-block .section-title {
  color: #9fd4b4;
}

pre.answer {
  margin-top: 0.4rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--frame-edge);
  border-bottom: var(--frame-bevel) solid var(--frame-lip);
  border-radius: var(--frame-radius);
  background: var(--frame-face);
  box-shadow: var(--frame-shadow-3d);
}

.session-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
}

.session-list li a {
  display: grid;
  grid-template-columns: 10rem 5.5rem 4.5rem 5rem minmax(4rem, auto);
  gap: 0.75rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--paper);
  text-decoration: none;
  align-items: baseline;
}

.session-list li a:hover {
  color: var(--accent-hot);
}

.session-list .when,
.session-list .status {
  color: var(--paper-dim);
  font-size: 0.88rem;
}

.hist-badges {
  display: inline-flex;
  gap: 0.35rem;
  justify-content: flex-end;
}

.hist-roster {
  gap: 0.55rem;
}

.hist-row {
  padding: 0;
  overflow: hidden;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.hist-row:has([data-hist-star]) {
  display: grid;
  grid-template-columns: 2.15rem minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
}

.hist-row-star {
  appearance: none;
  display: inline-grid;
  place-items: center;
  align-self: start;
  width: 1.55rem;
  height: 1.55rem;
  margin: 0.85rem 0 0 0.55rem;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: rgba(201, 165, 116, 0.58);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.12s ease, background 0.12s ease, transform 0.1s ease;
}

.hist-row-star:hover,
.hist-row-star:focus-visible {
  color: rgba(201, 165, 116, 0.95);
  background: rgba(201, 165, 116, 0.1);
  outline: none;
}

.hist-row-star.is-on {
  color: #e8c06a;
}

.hist-row-star:active {
  transform: scale(0.92);
}

.hist-row-star.rpg-outcome-star {
  position: absolute;
  top: 0.05rem;
  right: 1rem;
  z-index: 2;
  margin: 0;
  width: 2.6rem;
  height: 2.6rem;
  align-self: auto;
  border: 1px solid rgba(168, 134, 92, 0.42);
  border-radius: 3px;
  background: rgba(8, 9, 10, 0.88);
  font-size: 1.85rem;
  line-height: 1;
}

.hist-row-star.rpg-outcome-star:hover,
.hist-row-star.rpg-outcome-star:focus-visible {
  border-color: rgba(201, 165, 116, 0.55);
  background: rgba(12, 13, 14, 0.96);
}

.hist-row:has([data-hist-star]) .hist-row-hit {
  padding-left: 0.45rem;
}

.hist-row-hit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.85rem 1rem;
  align-items: center;
  width: 100%;
  padding: 0.85rem 1rem;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
  background: transparent;
}

/* Brighten the whole bordered plate — not only the inner hit (avoids dark RHS strip). */
.hist-row:hover,
.hist-row:focus-within {
  border-color: rgba(201, 165, 116, 0.42);
  background: rgba(201, 165, 116, 0.08);
  box-shadow: inset 0 0 0 1px rgba(201, 165, 116, 0.06);
}

.hist-row-hit:hover {
  background: transparent;
}

.hist-row-copy {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.hist-row-seat {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--paper);
}

.hist-row-firm {
  font-size: 0.9rem;
  color: var(--paper-dim);
}

.hist-row-account {
  font-size: 0.78rem;
  color: rgba(197, 212, 200, 0.72);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hist-row-when {
  margin-top: 0.15rem;
  font-size: 0.78rem;
  color: rgba(168, 134, 92, 0.85);
  letter-spacing: 0.02em;
}

.hist-row-score {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 0.35rem;
  min-width: 5.5rem;
}

.hist-row-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.35rem;
  padding: 0 0.75rem 0.65rem;
}

.hist-admin-form {
  margin: 0;
}

.hist-admin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0;
  min-height: 1.35rem;
  padding: 0.12rem 0.45rem;
  border: 1px solid rgba(201, 165, 116, 0.55);
  border-radius: 1px;
  background: #0c0d10;
  color: var(--stats-bbg, #c9a574);
  font-family: var(--stats-mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  box-shadow: none;
  transform: none;
  cursor: pointer;
  vertical-align: middle;
}

.hist-admin-btn:hover,
.hist-admin-btn:focus-visible {
  background: rgba(201, 165, 116, 0.14);
  border-color: rgba(232, 205, 150, 0.85);
  color: #ffe2b0;
  outline: none;
}

.hist-admin-btn:active {
  background: rgba(201, 165, 116, 0.22);
}

.hist-admin-btn--quiet {
  opacity: 0.75;
}

.hist-xp.rpg-xp {
  min-width: 5.5rem;
}

@media (max-width: 640px) {
  .hist-row-hit {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }

  .hist-row-score {
    justify-self: start;
    align-items: flex-start;
    width: 100%;
  }
}

.hist-badge {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--paper-dim);
}

.hist-badge--c {
  color: var(--paper);
  text-transform: none;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.hist-badge--pending {
  color: #a8865c;
}

.hist-badge--failed {
  color: #c46b6b;
}

.hist-tag {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: max-content;
  flex: 0 0 auto;
  margin: 0;
  padding: 0.12rem 0.42rem;
  border: 1px solid rgba(168, 134, 92, 0.38);
  border-radius: 1px;
  background: rgba(28, 24, 18, 0.72);
  color: rgba(214, 186, 138, 0.95);
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.25;
  white-space: nowrap;
  box-sizing: border-box;
}

.hist-tag--special-invite {
  border-color: rgba(168, 134, 92, 0.48);
  color: rgba(232, 208, 160, 0.96);
}

.hist-tag--explore {
  border-color: rgba(61, 213, 240, 0.45);
  color: rgba(168, 236, 255, 0.96);
  background: rgba(8, 28, 36, 0.78);
}

/* Dedicated row under original history chrome — does not sit in titleline/meta. */
.hist-special-invite-slot {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 0.28rem 0.65rem 0.4rem;
  padding: 0;
  flex: 0 0 auto;
  align-self: flex-start;
  justify-self: start;
  box-sizing: border-box;
}

.hist-row:has([data-hist-star]) > .hist-special-invite-slot {
  grid-column: 1 / -1;
}

#panel-history .hist-special-invite-slot,
#panel-sessions .hist-special-invite-slot,
#admin-user-hist-dialog .hist-special-invite-slot {
  margin-left: 0.65rem;
}

.hist-row-hit + .hist-special-invite-slot,
.hist-row-plate + .hist-special-invite-slot {
  margin-top: 0.15rem;
}

.result-lede-row + .hist-special-invite-slot {
  margin: 0.35rem 0 0.15rem;
}

.admin-stats-brief-record-row .hist-special-invite-slot {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 0.28rem 0 0;
}

.study-tome-row .hist-special-invite-slot {
  display: block;
  width: max-content;
  max-width: calc(100% - 2.5rem);
  margin: 0.15rem 0.55rem 0.35rem;
}

@media (max-width: 640px) {
  .session-list li a {
    grid-template-columns: 1fr 1fr;
  }

  .top {
    padding: 1rem 1.1rem;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.quit-dialog {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 0;
  background: #16181d;
  color: #e8eaed;
  max-width: min(24rem, calc(100vw - 2rem));
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
}

.quit-dialog::backdrop {
  background: rgba(6, 8, 10, 0.72);
}

.quit-dialog-card {
  margin: 0;
  padding: 1.25rem 1.35rem 1.15rem;
  display: grid;
  gap: 0.75rem;
}

.quit-dialog-title {
  margin: 0;
  font-family: Fraunces, Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
}

.quit-dialog-body {
  margin: 0;
  color: #a8afb8;
  font-size: 0.95rem;
  line-height: 1.45;
}

.quit-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

.quit-dialog.upload-dialog {
  max-width: min(40rem, calc(100vw - 2rem));
  width: min(40rem, calc(100vw - 2rem));
}

/* —— RPG status / details —— */
body:has(main.main-status),
html:has(main.main-status) {
  height: 100dvh;
  overflow: hidden;
}

main.main-status {
  max-width: min(72rem, 100%);
  width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  min-height: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  padding: var(--desk-chrome-clear) 1.5rem 1.5rem;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

body:has(.desk-nav) main.main-status {
  padding-top: var(--desk-chrome-clear);
}

.main-status > .rpg-status {
  width: 100%;
  margin-block: auto;
}

.main-status .rpg-status-split {
  margin-top: 0;
  /* Lift Run summary + How to improve as a pair (net -2rem from center). */
  transform: translateY(-2rem);
  width: 100%;
}

/* Keep the two panels a balanced centered pair (no left shift / asymmetric grow). */
.main-status .rpg-status-split > .rpg-brief {
  width: 100%;
  max-width: none;
}

.main-status .rpg-status-split > .rpg-abilities {
  margin-left: 0;
}

.rpg-status {
  display: grid;
  gap: 1.25rem;
  margin-top: 0;
}

.rpg-status-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 1rem 1.15rem;
  align-items: start;
}

.rpg-status-split > .rpg-brief,
.rpg-status-split > .rpg-abilities {
  min-width: 0;
  height: 100%;
}

.rpg-status-split > .rpg-abilities {
  overflow: visible;
}

.rpg-status-split .rpg-brief-frame,
.rpg-status-split .rpg-abilities {
  height: 100%;
  box-sizing: border-box;
}

.rpg-status-split .rpg-ability-dials {
  gap: 0.7rem;
}

.rpg-status-split .rpg-dial-ring,
.rpg-status-split .rpg-grade-mark {
  width: 4.6rem;
}

.rpg-status-split .rpg-grade-letter {
  font-size: clamp(1.45rem, 2.8vw, 1.85rem);
}

.rpg-status-split .rpg-dial-blurb {
  max-width: none;
  font-size: 0.9rem;
}

.rpg-status-split .rpg-improve-title {
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
}

@media (max-width: 900px) {
  .rpg-status-split {
    grid-template-columns: 1fr;
  }
}

.rpg-hero {
  display: grid;
  gap: 0.35rem;
  padding: 1.25rem 1.35rem 1.35rem;
  border: 1px solid var(--line);
  background:
    radial-gradient(500px 180px at 0% 0%, rgba(168, 134, 92, 0.14), transparent 60%),
    rgba(0, 0, 0, 0.28);
}

.rpg-emblem {
  position: relative;
  width: 5.5rem;
  height: 5.5rem;
  display: grid;
  place-items: center;
}

.rpg-emblem-ring {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(168, 134, 92, 0.55);
  border-radius: 50%;
  box-shadow: inset 0 0 0 6px rgba(14, 26, 23, 0.85);
  animation: rpg-pulse 3.2s ease-in-out infinite;
}

.rpg-emblem-core {
  position: relative;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent-hot);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.rpg-emblem-building .rpg-emblem-ring {
  border-color: rgba(176, 120, 72, 0.7);
}
.rpg-emblem-building .rpg-emblem-core {
  color: #c9975a;
}

.rpg-emblem-developing .rpg-emblem-ring {
  border-color: rgba(168, 178, 190, 0.75);
}
.rpg-emblem-developing .rpg-emblem-core {
  color: #c5ced8;
}

.rpg-emblem-solid .rpg-emblem-ring {
  border-color: rgba(212, 168, 68, 0.8);
}
.rpg-emblem-solid .rpg-emblem-core {
  color: #e0b84a;
}

.rpg-emblem-strong .rpg-emblem-ring {
  border-color: rgba(140, 190, 210, 0.8);
}
.rpg-emblem-strong .rpg-emblem-core {
  color: #9fd0e0;
}

.rpg-emblem-ace .rpg-emblem-ring {
  border-color: rgba(150, 200, 255, 0.85);
}
.rpg-emblem-ace .rpg-emblem-core {
  color: #b8dcff;
}

.rpg-emblem-unranked .rpg-emblem-core {
  color: rgba(168, 134, 92, 0.55);
}

@keyframes rpg-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.04);
    opacity: 1;
  }
}

.rpg-identity {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.rpg-kicker {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.rpg-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.35rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.rpg-rank {
  margin: 0;
  color: var(--accent-hot);
  font-weight: 600;
}

.rpg-desk {
  margin: 0;
  color: var(--paper-dim);
  font-size: 0.92rem;
}

.rpg-power {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.5rem 0.65rem;
  align-items: center;
  margin-top: 0.55rem;
}

.rpg-power-label,
.rpg-power-val {
  font-size: 0.8rem;
  color: var(--paper-dim);
  white-space: nowrap;
}

.rpg-power-val {
  color: var(--accent-hot);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.rpg-power-track,
.rpg-ability-track {
  height: 0.55rem;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.rpg-power-fill,
.rpg-ability-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #3e6e5c, var(--accent));
  transform-origin: left center;
  animation: rpg-fill 0.45s ease-out both;
}

@keyframes rpg-fill {
  from {
    transform: scaleX(0.35);
    opacity: 0.65;
  }
  to {
    transform: scaleX(1);
    opacity: 1;
  }
}

.rpg-brief {
  margin: 0;
}

.rpg-brief-frame {
  position: relative;
  padding: 1.55rem 1.35rem 1.35rem 1.4rem;
  border: 1px solid var(--frame-edge);
  border-bottom: var(--frame-bevel) solid var(--frame-lip);
  border-radius: var(--frame-radius);
  background:
    linear-gradient(165deg, rgba(28, 22, 12, 0.92) 0%, rgba(8, 14, 12, 0.96) 55%, rgba(6, 10, 9, 0.98) 100%);
  box-shadow: var(--frame-shadow-3d);
}

.rpg-brief-frame::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.95rem;
  bottom: 0.95rem;
  width: 3px;
  background: linear-gradient(180deg, var(--accent-hot), var(--accent) 55%, #7a6230);
}

.rpg-brief-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.85rem 1rem;
  padding: 0.15rem 0 1rem 0.55rem;
  border-bottom: 1px solid rgba(168, 134, 92, 0.28);
}

.rpg-brief-head-copy {
  min-width: 0;
  flex: 1 1 auto;
}

/* Details chrome — Back / Close / Hide: designed gold secondary, not plain ghost. */
.rpg-brief-back.ghost,
a.rpg-brief-back,
button.ghost.rpg-inspector-close,
.rpg-inspector-close.ghost,
button.ghost.rpg-session-ledger-close,
.rpg-session-ledger-close.ghost,
.guide-split-panel-head .guide-split-hide,
button.ghost.guide-split-hide {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin: 0;
  min-height: 2.15rem;
  padding: 0.38rem 0.85rem 0.36rem;
  box-sizing: border-box;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.1;
  color: #f0e6c8;
  border: 1px solid rgba(232, 210, 160, 0.55);
  border-bottom: 3px solid #5a4520;
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(243, 230, 207, 0.16) 0%, rgba(168, 134, 92, 0.1) 38%, rgba(8, 10, 9, 0.92) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 230, 0.22),
    0 0 0 1px rgba(90, 69, 32, 0.28),
    0 4px 12px rgba(0, 0, 0, 0.35);
  transform: translateY(0);
  transition:
    color 0.14s ease,
    border-color 0.14s ease,
    background 0.14s ease,
    box-shadow 0.14s ease,
    transform 0.12s ease,
    filter 0.12s ease;
}

.rpg-brief-back.ghost {
  align-self: flex-end;
  margin: 0 0 0.12rem;
}

.rpg-brief-back.ghost:hover,
a.rpg-brief-back:hover,
.rpg-brief-back.ghost:focus-visible,
a.rpg-brief-back:focus-visible,
button.ghost.rpg-inspector-close:hover,
.rpg-inspector-close.ghost:hover,
button.ghost.rpg-inspector-close:focus-visible,
.rpg-inspector-close.ghost:focus-visible,
button.ghost.rpg-session-ledger-close:hover,
.rpg-session-ledger-close.ghost:hover,
button.ghost.rpg-session-ledger-close:focus-visible,
.rpg-session-ledger-close.ghost:focus-visible,
.guide-split-panel-head .guide-split-hide:hover,
button.ghost.guide-split-hide:hover,
.guide-split-panel-head .guide-split-hide:focus-visible,
button.ghost.guide-split-hide:focus-visible {
  color: #fff6df;
  border-color: rgba(246, 235, 207, 0.85);
  background:
    linear-gradient(180deg, rgba(246, 235, 207, 0.28) 0%, rgba(201, 165, 116, 0.18) 42%, rgba(12, 14, 12, 0.94) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 230, 0.35),
    0 0 0 1px rgba(90, 69, 32, 0.35),
    0 0 18px rgba(201, 165, 116, 0.18),
    0 6px 16px rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
  filter: brightness(1.04);
  outline: none;
}

.rpg-brief-back.ghost:active,
a.rpg-brief-back:active,
button.ghost.rpg-inspector-close:active,
.rpg-inspector-close.ghost:active,
button.ghost.rpg-session-ledger-close:active,
.rpg-session-ledger-close.ghost:active,
.guide-split-panel-head .guide-split-hide:active,
button.ghost.guide-split-hide:active {
  color: #efe2c0;
  transform: translateY(1px);
  border-bottom-width: 2px;
  filter: brightness(0.98);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(90, 69, 32, 0.3),
    0 2px 8px rgba(0, 0, 0, 0.35);
}

.rpg-brief-kicker {
  margin: 0 0 0.35rem;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.rpg-brief-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--accent-hot);
}

.rpg-brief-title-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.rpg-brief-title-row .rpg-brief-title {
  flex: 0 1 auto;
  min-width: 0;
}

.hist-row-star.rpg-brief-star {
  position: static;
  flex: 0 0 auto;
  margin: 0;
  width: 2.6rem;
  height: 2.6rem;
  align-self: center;
  border: 1px solid rgba(168, 134, 92, 0.42);
  border-radius: 3px;
  background: rgba(8, 9, 10, 0.88);
  font-size: 1.85rem;
  line-height: 1;
}

.hist-row-star.rpg-brief-star:hover,
.hist-row-star.rpg-brief-star:focus-visible {
  border-color: rgba(201, 165, 116, 0.55);
  background: rgba(12, 13, 14, 0.96);
}

.rpg-brief-score {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent-hot);
  letter-spacing: 0.02em;
}

.rpg-brief-score span {
  font-size: 1.85rem;
}

.rpg-brief-power {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.55rem 0.85rem;
  align-items: center;
  margin: 1.1rem 0 0;
  padding: 0 0 0 0.55rem;
}

.rpg-brief-power-label,
.rpg-brief-power-val {
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(232, 230, 210, 0.75);
  white-space: nowrap;
}

.rpg-brief-power-val {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1;
  color: #e8a090;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  text-transform: none;
}

.rpg-brief-power-val span {
  font-size: 1.85rem;
}

.rpg-brief-power-track {
  height: 0.72rem;
  border: 1px solid rgba(184, 92, 74, 0.42);
  background: rgba(0, 0, 0, 0.42);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}

.rpg-brief-power-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #8a4538, #e8a090);
  transform-origin: left center;
  animation: rpg-fill 0.45s ease-out both;
  box-shadow: 0 0 10px rgba(232, 160, 144, 0.22);
}

.rpg-brief-power-strong .rpg-brief-power-val {
  color: #9ed4b4;
}

.rpg-brief-power-strong .rpg-brief-power-track {
  border-color: rgba(90, 158, 122, 0.45);
}

.rpg-brief-power-strong .rpg-brief-power-fill {
  background: linear-gradient(90deg, #2f6b4f, #8fd4ab);
  box-shadow: 0 0 10px rgba(143, 212, 171, 0.22);
}

.rpg-brief-power-fair .rpg-brief-power-val {
  color: #c9a574;
}

.rpg-brief-power-fair .rpg-brief-power-track {
  border-color: rgba(168, 134, 92, 0.5);
}

.rpg-brief-power-fair .rpg-brief-power-fill {
  background: linear-gradient(90deg, #7a6340, #c9a574);
  box-shadow: 0 0 10px rgba(201, 165, 116, 0.2);
}

.rpg-brief-power-weak .rpg-brief-power-val {
  color: #e8a090;
}

.rpg-brief-power-weak .rpg-brief-power-track {
  border-color: rgba(184, 92, 74, 0.42);
}

.rpg-brief-power-weak .rpg-brief-power-fill {
  background: linear-gradient(90deg, #8a4538, #e8a090);
}

.rpg-brief-power-null .rpg-brief-power-val {
  color: var(--paper-dim);
}

.rpg-brief-power-null .rpg-brief-power-fill {
  background: rgba(232, 239, 233, 0.18);
  box-shadow: none;
}

.rpg-brief-body {
  padding: 0.75rem 0 0.1rem 0.55rem;
  border-top: 1px solid rgba(168, 134, 92, 0.18);
  margin-top: 0.7rem;
}

.rpg-brief-meta-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem 1.25rem;
  align-items: center;
  padding-bottom: 0.15rem;
  overflow: visible;
}

/* Compact run context — secondary to How it went / What to do next.
   Bottom rule matches .rpg-brief-body border-top (same length + L/R). */
.rpg-brief-meta-band-compact {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.45rem;
  align-items: start;
  box-sizing: border-box;
  width: calc(100% + 0.55rem);
  max-width: none;
  margin: 0 0 0.55rem -0.55rem;
  /* Bottom air matches space above Position/Desk to the body top rule. */
  padding: 0.35rem 0 1.1rem 0.55rem;
  border-bottom: 1px solid rgba(168, 134, 92, 0.18);
}

.rpg-brief-meta-band-compact .rpg-brief-meta {
  gap: 0.18rem;
}

.rpg-brief-meta-band-compact .rpg-brief-meta-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1.75rem;
}

.rpg-brief-meta-band-compact .rpg-brief-meta-inline .rpg-brief-meta-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.4rem;
  grid-template-columns: none;
  min-width: 0;
}

.rpg-brief-meta-band-compact .rpg-brief-meta-inline .rpg-brief-meta-row dt {
  flex: 0 0 auto;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  opacity: 0.9;
}

.rpg-brief-meta-band-compact .rpg-brief-meta-inline .rpg-brief-meta-row dd {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 0.74rem;
  line-height: 1.25;
  color: rgba(239, 230, 200, 0.82);
}

.rpg-brief-meta-band-compact .rpg-brief-meta-row {
  grid-template-columns: 4.6rem 1fr;
  gap: 0.35rem;
}

.rpg-brief-meta-band-compact .rpg-brief-meta-row dt {
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  opacity: 0.9;
}

.rpg-brief-meta-band-compact .rpg-brief-meta-row dd {
  font-size: 0.74rem;
  line-height: 1.25;
  color: rgba(239, 230, 200, 0.82);
}

/* Same vertical ledger plaque as Done — proportionally smaller, not a horizontal chip. */
.rpg-brief-meta-band-compact .rpg-brief-clock {
  --rpg-clock-scale: 0.52;
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: none;
  justify-items: center;
  align-content: center;
  gap: 0.35rem;
  min-width: 6.5rem;
  width: max-content;
  max-width: 7.25rem;
  min-height: 0;
  padding: 0.55rem 0.7rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.28);
  text-align: center;
  transform: scale(var(--rpg-clock-scale));
  transform-origin: center right;
  /* reclaim unused layout box after scale */
  margin-block: calc((1 - var(--rpg-clock-scale)) * -3.4rem / 2);
  margin-inline-start: calc((1 - var(--rpg-clock-scale)) * -6.5rem);
}

.rpg-brief-meta-band-compact .rpg-clock-emblem,
.rpg-brief-meta-band-compact .rpg-session-clock.is-ledger .rpg-clock-emblem {
  width: 2.6rem;
  height: 2.6rem;
  margin: 0 auto;
  display: grid;
  place-items: center;
  overflow: visible;
}

.rpg-brief-meta-band-compact .rpg-brief-clock .rpg-hourglass,
.rpg-brief-meta-band-compact .rpg-session-clock.is-ledger .rpg-hourglass {
  width: 1.85rem;
  height: 2.45rem;
  transform: none;
  color: rgba(201, 165, 116, 0.75);
}

.rpg-brief-meta-band-compact .rpg-brief-clock:hover .rpg-hourglass,
.rpg-brief-meta-band-compact .rpg-brief-clock:focus-visible .rpg-hourglass,
.rpg-brief-meta-band-compact .rpg-brief-clock.is-open .rpg-hourglass,
.rpg-brief-meta-band-compact .rpg-session-clock.is-ledger:hover .rpg-hourglass,
.rpg-brief-meta-band-compact .rpg-session-clock.is-ledger:focus-visible .rpg-hourglass,
.rpg-brief-meta-band-compact .rpg-session-clock.is-ledger.is-open .rpg-hourglass {
  transform: translateY(-1px);
  color: #f6e2a0;
  filter: drop-shadow(0 0 7px rgba(201, 165, 116, 0.7));
}

.rpg-brief-meta-band-compact .rpg-brief-clock .rpg-session-label {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--paper-dim);
}

.rpg-brief-meta-band-compact .rpg-brief-clock .rpg-clock-time {
  font-family: ui-monospace, "IBM Plex Mono", monospace;
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--accent-hot);
}

.rpg-brief-meta-band-compact .rpg-clock-glow {
  inset: -18%;
}

.rpg-brief-meta {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.rpg-brief-clock {
  position: relative;
  min-width: 5.75rem;
  width: max-content;
  max-width: 7.25rem;
  min-height: 8.35rem;
  padding: 0.95rem 0.6rem 0.85rem;
  border-color: rgba(168, 134, 92, 0.35);
  background: rgba(0, 0, 0, 0.35);
  color: rgba(232, 230, 210, 0.75);
  justify-self: end;
  overflow: visible;
  cursor: default;
  font: inherit;
  text-align: center;
  transition:
    border-color 0.28s ease,
    box-shadow 0.28s ease,
    background 0.28s ease;
}

button.rpg-brief-clock {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.35rem;
  margin: 0;
}

.rpg-brief-clock:hover,
.rpg-brief-clock:focus-visible {
  outline: none;
  border-color: rgba(201, 165, 116, 0.72);
  background: rgba(20, 18, 10, 0.55);
  box-shadow:
    0 0 0 1px rgba(201, 165, 116, 0.18),
    0 0 22px rgba(201, 165, 116, 0.22);
}

.rpg-brief-clock.is-open {
  border-color: rgba(201, 165, 116, 0.85);
  background: rgba(10, 9, 6, 0.92);
  box-shadow:
    0 0 0 1px rgba(201, 165, 116, 0.28),
    0 0 22px rgba(201, 165, 116, 0.28);
}

.rpg-clock-scrim {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(2, 3, 4, 0.78);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(2px);
}

.rpg-clock-scrim.is-on {
  opacity: 1;
  pointer-events: auto;
}

/* Hosted inside open .rpg-inspector (top layer) so ledger is in front of Pace.
   Use fixed + fit card to host so Mark/Close are not clipped by a narrower dialog. */
.rpg-inspector > .rpg-clock-scrim {
  position: fixed;
  inset: 0;
  z-index: 100;
}

.rpg-inspector > .rpg-session-ledger {
  position: fixed;
  inset: 0;
  z-index: 110;
  padding: 2rem;
  box-sizing: border-box;
  overflow: auto;
}

.rpg-inspector > .rpg-session-ledger .rpg-session-ledger-card {
  width: calc(100vw - 4rem);
  max-width: calc(100vw - 4rem);
  height: calc(100vh - 4rem);
  max-height: calc(100vh - 4rem);
  box-sizing: border-box;
}

.rpg-inspector:has(> .rpg-session-ledger.is-on) {
  overflow: visible;
}

.rpg-clock-glow {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(201, 165, 116, 0.22) 0%,
    rgba(201, 165, 116, 0.06) 42%,
    transparent 70%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
  z-index: 0;
}

.rpg-brief-clock:hover .rpg-clock-glow,
.rpg-brief-clock.is-open .rpg-clock-glow {
  opacity: 0;
}

.rpg-clock-emblem {
  position: relative;
  z-index: 1;
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  margin: 0 auto 0.05rem;
}

.rpg-brief-clock .rpg-hourglass {
  position: relative;
  z-index: 1;
  width: 1.85rem;
  height: 2.45rem;
  color: rgba(201, 165, 116, 0.75);
  opacity: 0.9;
  transition:
    color 0.22s ease,
    opacity 0.22s ease,
    filter 0.22s ease,
    transform 0.22s ease;
}

.rpg-brief-clock:hover .rpg-hourglass,
.rpg-brief-clock:focus-visible .rpg-hourglass,
.rpg-brief-clock.is-open .rpg-hourglass {
  color: #f6e2a0;
  opacity: 1;
  filter: drop-shadow(0 0 7px rgba(201, 165, 116, 0.7))
    drop-shadow(0 0 16px rgba(201, 165, 116, 0.35));
  transform: translateY(-1px);
}

.rpg-brief-clock .rpg-session-label {
  position: relative;
  z-index: 1;
  color: rgba(232, 230, 210, 0.7);
  letter-spacing: 0.1em;
}

.rpg-brief-clock .rpg-clock-time {
  position: relative;
  z-index: 1;
  color: var(--accent-hot);
  font-size: 1rem;
  transition: text-shadow 0.22s ease, color 0.22s ease;
}

.rpg-brief-clock:hover .rpg-clock-time,
.rpg-brief-clock:focus-visible .rpg-clock-time,
.rpg-brief-clock.is-open .rpg-clock-time {
  color: #f2d98a;
  text-shadow: 0 0 12px rgba(201, 165, 116, 0.45);
}

/* Session time → accounting ledger popup (2rem viewport inset) */
.rpg-session-ledger {
  position: fixed;
  inset: 0;
  z-index: 85;
  display: grid;
  place-items: center;
  padding: 2rem;
  box-sizing: border-box;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.28s ease,
    visibility 0.28s ease;
}

.rpg-session-ledger.is-on {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
}

.rpg-session-ledger[hidden] {
  display: none !important;
}

.rpg-session-ledger-card {
  width: calc(100vw - 4rem);
  max-width: calc(100vw - 4rem);
  height: calc(100vh - 4rem);
  max-height: calc(100vh - 4rem);
  overflow: auto;
  box-sizing: border-box;
  padding: 1.45rem 1.55rem 1.35rem;
  border: 1px solid rgba(168, 134, 92, 0.55);
  background:
    linear-gradient(180deg, rgba(201, 165, 116, 0.07), transparent 24%),
    repeating-linear-gradient(
      180deg,
      rgba(255, 248, 220, 0.028) 0,
      rgba(255, 248, 220, 0.028) 1px,
      transparent 1px,
      transparent 1.95rem
    ),
    #100e0a;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.45),
    0 22px 56px rgba(0, 0, 0, 0.58),
    inset 0 1px 0 rgba(201, 165, 116, 0.18);
  transform: translateY(0.85rem) scale(0.96);
  opacity: 0;
  transition:
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.28s ease;
}

.rpg-session-ledger.is-on .rpg-session-ledger-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.rpg-session-ledger-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem;
  margin: 0 0 1.15rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(168, 134, 92, 0.35);
}

.rpg-session-ledger-brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.rpg-session-ledger-hourglass {
  flex: 0 0 auto;
  width: 2.35rem;
  height: 3.1rem;
  color: #f2d98a;
  filter: drop-shadow(0 0 8px rgba(201, 165, 116, 0.35));
}

.rpg-session-ledger-kicker {
  margin: 0 0 0.2rem;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(168, 134, 92, 0.85);
}

.rpg-session-ledger-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--paper);
  letter-spacing: -0.02em;
}

.rpg-session-ledger-close {
  flex: 0 0 auto;
}

.rpg-session-ledger-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-variant-numeric: tabular-nums;
}

.rpg-session-ledger-table th,
.rpg-session-ledger-table td {
  padding: 0.62rem 0.45rem;
  border-bottom: 1px solid rgba(168, 134, 92, 0.18);
  text-align: left;
  vertical-align: middle;
}

.rpg-session-ledger-table thead th {
  padding-top: 0;
  padding-bottom: 0.5rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(168, 134, 92, 0.78);
  border-bottom: 1px solid rgba(168, 134, 92, 0.42);
}

.rpg-session-ledger-table tbody td:first-child,
.rpg-session-ledger-table tfoot th {
  width: auto;
  overflow-wrap: anywhere;
}

.rpg-session-ledger-table tbody td:first-child {
  color: rgba(232, 230, 210, 0.92);
  font-size: 1rem;
}

.rpg-session-ledger-table tbody td:nth-child(2),
.rpg-session-ledger-table thead th:nth-child(2),
.rpg-session-ledger-table tfoot td:nth-child(2) {
  text-align: right;
  width: 5.5rem;
  font-family: ui-monospace, "SF Mono", "IBM Plex Mono", Menlo, monospace;
}

.rpg-session-ledger-table thead th:nth-child(3),
.rpg-session-ledger-table tbody td:nth-child(3),
.rpg-session-ledger-table tfoot td:nth-child(3) {
  text-align: right;
  width: 6.75rem;
  padding-right: 0.15rem;
}

.rpg-session-ledger-table .rpg-time-grade {
  max-width: 100%;
}

.rpg-session-ledger-table tbody td:nth-child(2) {
  color: #e8efe9;
  font-weight: 600;
  font-size: 1rem;
}

.rpg-session-ledger-table tbody tr:nth-child(even) td {
  background: rgba(201, 165, 116, 0.035);
}

.rpg-session-ledger-table tfoot th,
.rpg-session-ledger-table tfoot td {
  padding-top: 0.9rem;
  border-bottom: none;
  border-top: 2px double rgba(201, 165, 116, 0.55);
  color: #f2f7f3;
  font-size: 1.05rem;
  font-weight: 700;
}

.rpg-session-ledger-table tfoot th {
  font-family: var(--font-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.75rem;
}

.rpg-session-ledger-note {
  margin: 0.95rem 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: rgba(168, 134, 92, 0.72);
}

/* Time marks — red → green, muted for dark gold UI */
.rpg-time-grade {
  display: inline-grid;
  grid-template-columns: 1.05em 3.9em;
  align-items: baseline;
  column-gap: 0.32rem;
  box-sizing: border-box;
  width: 5.45rem;
  padding: 0.22rem 0.42rem;
  border: 1px solid rgba(168, 134, 92, 0.28);
  background: rgba(8, 10, 9, 0.55);
  vertical-align: middle;
}

.rpg-time-grade-letter {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: center;
  justify-self: center;
}

.rpg-time-grade-label {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.88;
  text-align: left;
  justify-self: start;
  white-space: nowrap;
}

.rpg-time-grade.is-total {
  padding: 0.28rem 0.42rem;
  box-shadow: inset 0 0 0 1px rgba(201, 165, 116, 0.12);
}

.rpg-time-grade.is-total .rpg-time-grade-letter {
  font-size: 1.2rem;
}

.rpg-time-grade-muted {
  grid-template-columns: 1fr;
  justify-items: center;
  color: rgba(168, 159, 140, 0.7);
  border-color: rgba(160, 150, 130, 0.22);
}

/* A = green (best) … D = red (rough) */
.rpg-time-grade-a {
  border-color: rgba(110, 168, 120, 0.55);
  background: rgba(28, 48, 34, 0.55);
  color: #9fd4a8;
  box-shadow: 0 0 12px rgba(90, 150, 100, 0.12);
}

.rpg-time-grade-a .rpg-time-grade-label {
  color: rgba(159, 212, 168, 0.78);
}

.rpg-time-grade-b {
  border-color: rgba(168, 178, 90, 0.5);
  background: rgba(42, 46, 24, 0.55);
  color: #d4d48a;
}

.rpg-time-grade-b .rpg-time-grade-label {
  color: rgba(212, 212, 138, 0.75);
}

.rpg-time-grade-c {
  border-color: rgba(196, 140, 78, 0.5);
  background: rgba(48, 34, 18, 0.55);
  color: #e0b078;
}

.rpg-time-grade-c .rpg-time-grade-label {
  color: rgba(224, 176, 120, 0.75);
}

.rpg-time-grade-d {
  border-color: rgba(176, 96, 88, 0.48);
  background: rgba(48, 24, 22, 0.55);
  color: #d48a82;
}

.rpg-time-grade-d .rpg-time-grade-label {
  color: rgba(212, 138, 130, 0.75);
}

@media (prefers-reduced-motion: reduce) {
  .rpg-brief-clock,
  .rpg-brief-clock .rpg-hourglass,
  .rpg-brief-clock .rpg-clock-time,
  .rpg-clock-scrim,
  .rpg-clock-glow,
  .rpg-session-ledger,
  .rpg-session-ledger-card {
    transition: none;
  }

  .rpg-brief-clock:hover .rpg-hourglass,
  .rpg-brief-clock:focus-visible .rpg-hourglass,
  .rpg-brief-clock.is-open .rpg-hourglass {
    transform: none;
  }

  .rpg-session-ledger-card,
  .rpg-session-ledger.is-on .rpg-session-ledger-card {
    transform: none;
  }
}

.rpg-brief-meta-row {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0.65rem;
  align-items: baseline;
}

.rpg-brief-meta-row dt {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(168, 134, 92, 0.78);
}

.rpg-brief-meta-row dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.88rem;
  line-height: 1.35;
  color: #efe6c8;
  letter-spacing: 0.01em;
}

.rpg-brief-block {
  margin: 0.75rem 0 0;
  padding: 0.85rem 0.75rem 0.75rem 0;
  border-top: none;
}

.rpg-brief-body > .rpg-brief-block:first-child,
.rpg-brief-body > .rpg-brief-meta-band-compact + .rpg-brief-block {
  margin-top: 0.35rem;
  padding-top: 0.35rem;
}

.rpg-brief-block-accent {
  background: rgba(168, 134, 92, 0.06);
  border: 1px solid rgba(168, 134, 92, 0.22);
  border-top-color: rgba(168, 134, 92, 0.22);
  padding: 0.85rem 0.75rem;
}

.rpg-brief-label {
  margin: 0 0 0.35rem;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.rpg-brief-copy {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-optical-sizing: auto;
  font-size: 1.08rem;
  line-height: 1.55;
  color: #efe6c8;
  letter-spacing: 0.015em;
}

.rpg-lore {
  margin: 0;
  color: var(--paper);
  line-height: 1.5;
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--accent);
  background: rgba(232, 239, 233, 0.04);
}

.rpg-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.rpg-panel {
  margin: 0;
  padding: 1rem 1.1rem 1.15rem;
  border: 1px solid var(--frame-edge);
  border-bottom: var(--frame-bevel) solid var(--frame-lip);
  border-radius: var(--frame-radius);
  background: var(--frame-face);
  box-shadow: var(--frame-shadow-3d);
}

.rpg-abilities {
  position: relative;
  width: 100%;
  overflow: visible;
}

.rpg-abilities-suggest-cube-anchor {
  position: absolute;
  left: 100%;
  bottom: 0.55rem;
  margin-left: 2rem;
  z-index: 10;
  pointer-events: none;
}

.rpg-abilities-suggest-cube-anchor .study-suggest-cube {
  pointer-events: auto;
}

.rpg-improve-head {
  display: grid;
  gap: 0.35rem;
  margin: 0 0 0.65rem;
}

.rpg-improve-kicker {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.rpg-improve-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--paper);
  line-height: 1.15;
}

.rpg-improve-lead {
  margin: 0;
  max-width: 42rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--paper-dim);
}

.rpg-improve-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem 0.75rem;
  margin: 0 0 0.35rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(168, 134, 92, 0.5);
  border-bottom: var(--frame-bevel) solid var(--frame-lip);
  border-radius: var(--frame-radius);
  background:
    linear-gradient(180deg, rgba(168, 134, 92, 0.16) 0%, rgba(0, 0, 0, 0.32) 100%);
  box-shadow:
    var(--frame-shadow-3d),
    inset 3px 0 0 rgba(168, 134, 92, 0.55);
}

.rpg-improve-banner-mark {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--accent-hot);
}

.rpg-improve-banner-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--paper);
}

.rpg-improve-banner-text strong {
  font-weight: 700;
  color: #efe6c8;
}

.rpg-ability-footnote {
  margin: 0.55rem 0 0;
  padding: 0.55rem 0 0.85rem 0.75rem;
  border-bottom: 1px solid rgba(168, 134, 92, 0.28);
  border-left: 2px solid rgba(201, 165, 116, 0.55);
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  font-size: 0.78rem;
  font-weight: 550;
  font-style: normal;
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: rgba(232, 214, 176, 0.88);
}

.rpg-ability-list {
  list-style: none;
  margin: 0.65rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.rpg-ability-dials {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  align-items: stretch;
}

.rpg-dial-cell {
  display: grid;
  justify-items: stretch;
  height: 100%;
}

.rpg-dial-open {
  appearance: none;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  height: 100%;
  min-height: 5.75rem;
  margin: 0;
  padding: 0.7rem 0.85rem 0.7rem 0.75rem;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto;
  align-items: center;
  justify-items: stretch;
  column-gap: 0.95rem;
  row-gap: 0;
  border: 1px solid rgba(232, 210, 160, 0.72);
  border-bottom: 4px solid #5a4520;
  border-radius: 3px;
  background: linear-gradient(
    105deg,
    rgba(243, 230, 207, 0.2) 0%,
    rgba(168, 134, 92, 0.14) 22%,
    rgba(10, 16, 14, 0.94) 48%,
    rgba(4, 8, 7, 0.98) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 230, 0.28),
    0 0 0 1px rgba(90, 69, 32, 0.35),
    0 var(--press-rise) 0 rgba(0, 0, 0, 0.55),
    0 10px 18px rgba(0, 0, 0, 0.34);
  transform: translateY(0);
  transition:
    transform 0.07s ease,
    box-shadow 0.07s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}

.rpg-dial-open:hover,
.rpg-dial-open:focus-visible {
  outline: none;
  border-color: rgba(246, 235, 207, 0.95);
  background: linear-gradient(
    105deg,
    rgba(248, 237, 216, 0.28) 0%,
    rgba(201, 165, 116, 0.22) 26%,
    rgba(12, 18, 16, 0.96) 52%,
    rgba(4, 8, 7, 0.99) 100%
  );
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 230, 0.38),
    0 0 0 1px rgba(90, 69, 32, 0.45),
    0 7px 0 rgba(0, 0, 0, 0.55),
    0 14px 22px rgba(0, 0, 0, 0.4);
}

.rpg-dial-open.is-active {
  border-color: rgba(201, 165, 116, 0.78);
  background: linear-gradient(
    180deg,
    rgba(168, 134, 92, 0.16) 0%,
    rgba(10, 16, 14, 0.96) 100%
  );
  box-shadow:
    inset 0 0 0 1px rgba(201, 165, 116, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 var(--press-rise) 0 rgba(0, 0, 0, 0.5),
    0 8px 14px rgba(0, 0, 0, 0.28);
}

.rpg-dial-open:active {
  transform: translateY(2px);
  border-bottom-width: 2px;
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.45),
    0 1px 0 rgba(0, 0, 0, 0.4);
}

/* Progress starts at 12:00 (CSS 0deg), clockwise. */
.rpg-dial-ring {
  --p: 0;
  position: relative;
  width: 4.75rem;
  flex: 0 0 auto;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, rgba(201, 165, 116, 0.1), transparent 42%),
    conic-gradient(
      from 0deg,
      var(--accent-hot) 0 calc(var(--p) * 1%),
      rgba(232, 239, 233, 0.08) calc(var(--p) * 1%) 100%
    );
  box-shadow:
    inset 0 0 0 1px rgba(168, 134, 92, 0.35),
    inset 0 0 0 7px rgba(8, 14, 12, 0.92),
    0 0 0 1px rgba(0, 0, 0, 0.45);
  display: grid;
  place-items: center;
  animation: rpg-dial-in 0.85s ease-out both;
}

.rpg-dial-ring::before {
  content: "";
  position: absolute;
  inset: 11%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 35%, rgba(28, 22, 12, 0.35), rgba(6, 10, 9, 0.98) 70%);
  box-shadow:
    inset 0 1px 0 rgba(201, 165, 116, 0.12),
    0 0 0 1px rgba(168, 134, 92, 0.18);
}

.rpg-dial-strong {
  background:
    radial-gradient(circle at 50% 42%, rgba(143, 212, 171, 0.14), transparent 42%),
    conic-gradient(
      from 0deg,
      #8fd4ab 0 calc(var(--p) * 1%),
      rgba(232, 239, 233, 0.08) calc(var(--p) * 1%) 100%
    );
}

.rpg-dial-strong .rpg-dial-core {
  color: #9ed4b4;
}

.rpg-dial-fair {
  background:
    radial-gradient(circle at 50% 42%, rgba(201, 165, 116, 0.12), transparent 42%),
    conic-gradient(
      from 0deg,
      #c9a574 0 calc(var(--p) * 1%),
      rgba(232, 239, 233, 0.08) calc(var(--p) * 1%) 100%
    );
}

.rpg-dial-fair .rpg-dial-core {
  color: #c9a574;
}

.rpg-dial-weak {
  background:
    radial-gradient(circle at 50% 42%, rgba(232, 160, 144, 0.12), transparent 42%),
    conic-gradient(
      from 0deg,
      #e8a090 0 calc(var(--p) * 1%),
      rgba(232, 239, 233, 0.08) calc(var(--p) * 1%) 100%
    );
}

.rpg-dial-weak .rpg-dial-core {
  color: #e8a090;
}

.rpg-dial-null {
  background: conic-gradient(from 0deg, rgba(232, 239, 233, 0.12) 0 100%);
}

/* Pace coaching mark — letter plaque (always green-gold elegant) */
.rpg-grade-mark {
  position: relative;
  width: 4.75rem;
  flex: 0 0 auto;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.28rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(168, 134, 92, 0.52);
  background:
    linear-gradient(165deg, rgba(201, 165, 116, 0.14) 0%, transparent 44%),
    linear-gradient(180deg, rgba(28, 38, 32, 0.98) 0%, rgba(10, 16, 13, 0.98) 100%);
  box-shadow:
    inset 0 1px 0 rgba(201, 165, 116, 0.12),
    inset 0 0 0 1px rgba(168, 134, 92, 0.14),
    0 0 18px rgba(168, 134, 92, 0.1),
    0 8px 18px rgba(0, 0, 0, 0.28);
}

.rpg-grade-letter {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.2vw, 2.55rem);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: #e8d6a0;
}

.rpg-grade-rule {
  width: 1.55rem;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(168, 134, 92, 0.78),
    transparent
  );
}

.rpg-grade-caption {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(214, 199, 160, 0.88);
}

/* Big dial plaque stays green-gold for every letter grade */
.rpg-grade-mark.rpg-grade-a,
.rpg-grade-mark.rpg-grade-b,
.rpg-grade-mark.rpg-grade-c,
.rpg-grade-mark.rpg-grade-d {
  border-color: rgba(168, 134, 92, 0.52);
  box-shadow:
    inset 0 1px 0 rgba(201, 165, 116, 0.12),
    inset 0 0 0 1px rgba(168, 134, 92, 0.14),
    0 0 18px rgba(168, 134, 92, 0.1),
    0 8px 18px rgba(0, 0, 0, 0.28);
}

.rpg-grade-mark.rpg-grade-a .rpg-grade-letter,
.rpg-grade-mark.rpg-grade-b .rpg-grade-letter,
.rpg-grade-mark.rpg-grade-c .rpg-grade-letter,
.rpg-grade-mark.rpg-grade-d .rpg-grade-letter {
  color: #e8d6a0;
}

.rpg-grade-mark.rpg-grade-a .rpg-grade-caption,
.rpg-grade-mark.rpg-grade-b .rpg-grade-caption,
.rpg-grade-mark.rpg-grade-c .rpg-grade-caption,
.rpg-grade-mark.rpg-grade-d .rpg-grade-caption {
  color: rgba(214, 199, 160, 0.88);
}

.rpg-grade-mark.rpg-grade-a .rpg-grade-rule,
.rpg-grade-mark.rpg-grade-b .rpg-grade-rule,
.rpg-grade-mark.rpg-grade-c .rpg-grade-rule,
.rpg-grade-mark.rpg-grade-d .rpg-grade-rule {
  background: linear-gradient(90deg, transparent, rgba(168, 134, 92, 0.78), transparent);
}

/* Shared A–D coaching mark palette (header chip + session ledger only) */
.rpg-grade-a:not(.rpg-grade-mark):not(.rpg-grade-chip) {
  border-color: rgba(110, 168, 120, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(159, 212, 168, 0.1),
    inset 0 0 0 1px rgba(110, 168, 120, 0.12),
    0 0 18px rgba(90, 150, 100, 0.12),
    0 8px 18px rgba(0, 0, 0, 0.28);
}

.rpg-grade-a:not(.rpg-grade-mark) .rpg-grade-letter {
  color: #9fd4a8;
}

.rpg-grade-a:not(.rpg-grade-mark) .rpg-grade-caption {
  color: rgba(159, 212, 168, 0.78);
}

.rpg-grade-a:not(.rpg-grade-mark) .rpg-grade-rule {
  background: linear-gradient(90deg, transparent, rgba(110, 168, 120, 0.7), transparent);
}

.rpg-grade-b:not(.rpg-grade-mark) .rpg-grade-letter {
  color: #d4d48a;
}

.rpg-grade-b:not(.rpg-grade-mark) .rpg-grade-caption {
  color: rgba(212, 212, 138, 0.75);
}

.rpg-grade-b:not(.rpg-grade-mark) .rpg-grade-rule {
  background: linear-gradient(90deg, transparent, rgba(168, 178, 90, 0.65), transparent);
}

.rpg-grade-c:not(.rpg-grade-mark) .rpg-grade-letter {
  color: #e0b078;
}

.rpg-grade-c:not(.rpg-grade-mark) .rpg-grade-caption {
  color: rgba(224, 176, 120, 0.75);
}

.rpg-grade-c:not(.rpg-grade-mark) .rpg-grade-rule {
  background: linear-gradient(90deg, transparent, rgba(196, 140, 78, 0.65), transparent);
}

.rpg-grade-d:not(.rpg-grade-mark) {
  border-color: rgba(176, 96, 88, 0.48);
}

.rpg-grade-d:not(.rpg-grade-mark) .rpg-grade-letter {
  color: #d48a82;
}

.rpg-grade-d:not(.rpg-grade-mark) .rpg-grade-caption {
  color: rgba(212, 138, 130, 0.75);
}

.rpg-grade-d:not(.rpg-grade-mark) .rpg-grade-rule {
  background: linear-gradient(90deg, transparent, rgba(176, 96, 88, 0.6), transparent);
}

.rpg-grade-chip {
  display: inline-grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: 0.55rem;
  row-gap: 0.05rem;
  align-items: center;
  padding: 0.4rem 0.7rem 0.42rem 0.65rem;
  border-radius: 0.35rem;
  border: 1px solid rgba(168, 134, 92, 0.28);
  background: rgba(8, 10, 9, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 2px 0 rgba(0, 0, 0, 0.35);
}

.rpg-grade-chip-kicker {
  grid-column: 1;
  grid-row: 1;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(214, 199, 160, 0.72);
}

.rpg-grade-chip-label {
  grid-column: 1;
  grid-row: 2;
  font-size: 0.72rem;
  color: var(--paper-dim);
  letter-spacing: 0.02em;
}

.rpg-grade-chip-letter {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #f0e6c8;
}

.rpg-grade-chip.rpg-grade-a {
  border-color: rgba(110, 168, 120, 0.55);
  background: rgba(28, 48, 34, 0.55);
  box-shadow: 0 0 12px rgba(90, 150, 100, 0.12);
}

.rpg-grade-chip.rpg-grade-a .rpg-grade-chip-letter {
  color: #9fd4a8;
}

.rpg-grade-chip.rpg-grade-a .rpg-grade-chip-kicker,
.rpg-grade-chip.rpg-grade-a .rpg-grade-chip-label {
  color: rgba(159, 212, 168, 0.78);
}

.rpg-grade-chip.rpg-grade-b {
  border-color: rgba(168, 178, 90, 0.5);
  background: rgba(42, 46, 24, 0.55);
}

.rpg-grade-chip.rpg-grade-b .rpg-grade-chip-letter {
  color: #d4d48a;
}

.rpg-grade-chip.rpg-grade-b .rpg-grade-chip-kicker,
.rpg-grade-chip.rpg-grade-b .rpg-grade-chip-label {
  color: rgba(212, 212, 138, 0.75);
}

.rpg-grade-chip.rpg-grade-c {
  border-color: rgba(196, 140, 78, 0.5);
  background: rgba(48, 34, 18, 0.55);
}

.rpg-grade-chip.rpg-grade-c .rpg-grade-chip-letter {
  color: #e0b078;
}

.rpg-grade-chip.rpg-grade-c .rpg-grade-chip-kicker,
.rpg-grade-chip.rpg-grade-c .rpg-grade-chip-label {
  color: rgba(224, 176, 120, 0.75);
}

.rpg-grade-chip.rpg-grade-d {
  border-color: rgba(176, 96, 88, 0.48);
  background: rgba(48, 24, 22, 0.55);
}

.rpg-grade-chip.rpg-grade-d .rpg-grade-chip-letter {
  color: #d48a82;
}

.rpg-grade-chip.rpg-grade-d .rpg-grade-chip-kicker,
.rpg-grade-chip.rpg-grade-d .rpg-grade-chip-label {
  color: rgba(212, 138, 130, 0.75);
}

.rpg-dial-core {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 0.05rem;
  font-family: var(--font-display);
  color: var(--accent-hot);
  line-height: 1;
}

.rpg-dial-val {
  font-size: 1.55rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.rpg-dial-unit {
  font-size: 0.72rem;
  font-weight: 600;
  opacity: 0.85;
}

.rpg-dial-copy {
  display: grid;
  gap: 0.2rem;
  justify-items: start;
  align-content: center;
  min-width: 0;
}

.rpg-dial-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: #efe6c8;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.rpg-dial-blurb {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  font-style: italic;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: rgba(239, 230, 200, 0.88);
  max-width: none;
  min-height: 0;
  text-align: left;
  white-space: pre-line;
}

.rpg-dial-affordance {
  margin-top: 0;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: auto;
  min-width: 6.5rem;
  box-sizing: border-box;
  padding: 0.7rem 0.85rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #14110c;
  background: linear-gradient(165deg, #f3e6cf 0%, #e4c896 48%, #d4b078 100%);
  border: 1px solid #f0e2c4;
  border-bottom: 3px solid #5a4520;
  border-radius: 2px;
  box-shadow:
    0 1px 0 rgba(255, 248, 230, 0.55) inset,
    0 3px 10px rgba(0, 0, 0, 0.28);
  transition: transform 0.12s ease, filter 0.12s ease;
}

.rpg-dial-affordance-label {
  line-height: 1;
}

.rpg-dial-affordance-arrow {
  display: block;
  width: 1.65rem;
  height: 1.1rem;
  flex: 0 0 auto;
  color: #1a140c;
  transition: transform 0.12s ease;
}

.rpg-dial-open:hover .rpg-dial-affordance,
.rpg-dial-open:focus-visible .rpg-dial-affordance {
  filter: brightness(1.05);
}

.rpg-dial-open:hover .rpg-dial-affordance-arrow,
.rpg-dial-open:focus-visible .rpg-dial-affordance-arrow {
  transform: translateX(3px);
}

@keyframes rpg-dial-in {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.rpg-ability-open {
  appearance: none;
  display: grid;
  gap: 0.2rem;
  width: 100%;
  margin: 0;
  padding: 0.55rem 0.6rem 0.5rem;
  border: 1px solid rgba(168, 134, 92, 0.28);
  border-radius: 3px;
  background: rgba(168, 134, 92, 0.06);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.rpg-ability-open:hover,
.rpg-ability-open:focus-visible,
.rpg-ability-open.is-active {
  outline: none;
  border-color: rgba(168, 134, 92, 0.65);
  background: rgba(168, 134, 92, 0.12);
}

.rpg-ability-cta {
  margin-top: 0.35rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.rpg-ability-head {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.rpg-ability-open .rpg-ability-head {
  margin-bottom: 0.15rem;
}

.rpg-ability-name {
  font-weight: 600;
  font-size: 0.92rem;
}

.rpg-ability-pct {
  font-variant-numeric: tabular-nums;
  color: var(--accent-hot);
  font-size: 0.85rem;
}

.rpg-delivery-breakdown .rpg-ability-pct {
  font-family: ui-monospace, "IBM Plex Mono", monospace;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.rpg-delivery-breakdown .rpg-ability-pct small {
  font-size: 0.7em;
  margin-left: 0.05em;
  font-weight: 600;
  opacity: 0.9;
}

.rpg-ability-blurb {
  display: block;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  font-style: italic;
  line-height: 1.4;
  letter-spacing: 0.015em;
  color: rgba(239, 230, 200, 0.92);
  white-space: pre-line;
}

.rpg-dossier-head-ability {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-bottom: 0.75rem;
}

.rpg-dossier-head-pace {
  min-height: 0;
  height: auto;
}

.rpg-dossier-head-copy {
  flex: 1 1 12rem;
  min-width: 0;
  padding-right: 0.5rem;
}

/* Pace title + Session time / Mark / Close — one top row */
.rpg-dossier-head-pace .rpg-dossier-head-copy {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
  padding-right: 0.5rem;
}

.rpg-dossier-head-copy h3 {
  margin: 0 0 0.28rem;
}

.rpg-dossier-head-pace .rpg-dossier-head-copy h3 {
  margin: 0 0 0.1rem;
  line-height: 1.1;
}

.rpg-dossier-head-ability .rpg-ability-blurb {
  flex: none;
  padding-right: 0;
}

.rpg-dossier-head-pace .rpg-ability-blurb {
  margin: 0;
  line-height: 1.2;
}

.rpg-dossier-head-ability .turn-head-right {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.55rem 0.65rem;
}

/* Content / Delivery header — same circled dial as How to improve. */
.rpg-dossier-score-ring {
  width: 3.55rem;
  flex: 0 0 auto;
  box-shadow:
    inset 0 0 0 1px rgba(168, 134, 92, 0.4),
    inset 0 0 0 6px rgba(8, 14, 12, 0.94),
    0 0 0 1px rgba(0, 0, 0, 0.5);
}

.rpg-dossier-score-ring::before {
  inset: 12%;
}

.rpg-dossier-score-ring .rpg-dial-val {
  font-size: 1.15rem;
}

.rpg-dossier-score-ring .rpg-dial-unit {
  font-size: 0.58rem;
}

.rpg-dossier-head-pace .turn-head-right {
  display: inline-flex;
  flex: 0 0 auto;
  width: auto;
  margin-left: auto;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-end;
  gap: 0.5rem 0.55rem;
  align-self: center;
  min-height: 2.75rem;
}

.rpg-dossier-head-pace .rpg-inspect-actions,
.rpg-dossier-head-pace .rpg-inspector-close,
.rpg-dossier-head-pace .rpg-grade-chip,
.rpg-dossier-head-pace .rpg-pace-session-clock {
  align-self: center;
}

/* Compact vertical plaque — matches grade-chip / Close row height. */
.rpg-session-clock.rpg-pace-session-clock {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.08rem;
  box-sizing: border-box;
  min-width: 0;
  width: auto;
  height: 2.75rem;
  padding: 0.22rem 0.55rem 0.2rem;
  color: var(--paper-dim);
  border: 1px solid var(--line);
  border-radius: 0.35rem;
  background: rgba(0, 0, 0, 0.28);
  text-align: center;
  flex-shrink: 0;
  overflow: hidden;
}

button.rpg-session-clock.rpg-pace-session-clock {
  font: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.rpg-session-clock.rpg-pace-session-clock .rpg-clock-glow {
  display: none;
}

.rpg-session-clock.rpg-pace-session-clock .rpg-clock-emblem,
.rpg-session-clock.rpg-pace-session-clock.is-ledger .rpg-clock-emblem {
  width: 0.95rem;
  height: 0.95rem;
  margin: 0 auto;
  display: grid;
  place-items: center;
}

.rpg-session-clock.rpg-pace-session-clock .rpg-hourglass,
.rpg-session-clock.rpg-pace-session-clock.is-ledger .rpg-hourglass {
  width: 0.72rem;
  height: 0.95rem;
  color: rgba(201, 165, 116, 0.8);
  opacity: 1;
}

.rpg-session-clock.rpg-pace-session-clock .rpg-session-label {
  font-size: 0.48rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1;
  color: var(--paper-dim);
  opacity: 0.9;
}

.rpg-session-clock.rpg-pace-session-clock .rpg-clock-time {
  font-family: ui-monospace, "IBM Plex Mono", monospace;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent-hot);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  line-height: 1;
}

.rpg-session-clock.rpg-pace-session-clock.is-ledger:hover .rpg-hourglass,
.rpg-session-clock.rpg-pace-session-clock.is-ledger:focus-visible .rpg-hourglass,
.rpg-session-clock.rpg-pace-session-clock.is-ledger.is-open .rpg-hourglass {
  color: #f6e2a0;
  filter: drop-shadow(0 0 5px rgba(201, 165, 116, 0.65));
}

.rpg-dossier-head-pace .rpg-grade-chip {
  height: 2.75rem;
  box-sizing: border-box;
  padding-top: 0.32rem;
  padding-bottom: 0.32rem;
}

.rpg-dossier-head-pace .rpg-inspector-close {
  height: 2.75rem;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
}

.rpg-inspect-actions {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.4rem;
}

.rpg-inspector-close {
  flex-shrink: 0;
  align-self: flex-start;
}

.rpg-ability-dossier {
  padding: 0.95rem 1rem 1.05rem;
  border: 1px solid rgba(168, 134, 92, 0.28);
  background: var(--sao-panel-face);
  box-shadow: inset 0 1px 0 rgba(201, 165, 116, 0.08);
}

.rpg-ability-dossier[data-ability="content"] {
  background: var(--sao-panel-face);
}

.rpg-ability-dossier[data-ability="delivery"] {
  background: var(--sao-panel-face-alt);
}

.rpg-ability-dossier[data-ability="pace"] {
  background: var(--sao-panel-face-soft);
}

.pace-shell {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 1.25rem;
  row-gap: 1.25rem;
  align-items: stretch;
  width: 100%;
}

.pace-shell > .rpg-ability-dossier {
  position: relative;
  z-index: 2;
  min-width: 0;
  height: 100%;
  overflow: visible;
  /* Tall side panels stretch this column — pack content to top (no 拉長). */
  align-content: start;
  align-items: stretch;
}

.pace-quest-rail,
.pace-improve-rail {
  display: none;
  position: relative;
  z-index: 1;
  min-width: 0;
}

.pace-shell.is-pace-open {
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr)
    minmax(0, 1fr);
  column-gap: 1.25rem;
  row-gap: 1.25rem;
}

.pace-shell.is-pace-open .pace-quest-rail,
.pace-shell.is-pace-open .pace-improve-rail {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  z-index: 1;
}

/* Keep Pace header (incl. Session time) above split rails after Question open. */
.pace-shell.is-pace-open > .rpg-ability-dossier {
  z-index: 4;
  isolation: isolate;
  align-content: start;
}

.pace-shell.is-pace-open > .rpg-ability-dossier > .rpg-dossier-head-pace {
  position: relative;
  z-index: 12;
  flex: 0 0 auto;
  height: auto;
  max-height: none;
  align-self: start;
}

.pace-shell.is-pace-open .rpg-session-clock.rpg-pace-session-clock {
  position: relative;
  z-index: 14;
}

.pace-shell.is-pace-open > .rpg-ability-dossier > .rpg-dossier-block,
.pace-shell.is-pace-open > .rpg-ability-dossier > .rpg-tempo {
  flex: 0 0 auto;
  align-self: start;
}

.pace-side-panel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0;
  padding: 0.95rem 1rem 1.05rem;
  padding-inline-end: calc(1rem + var(--scroll-clear));
  border: 1px solid var(--frame-edge);
  border-bottom: var(--frame-bevel) solid var(--frame-lip);
  border-radius: var(--frame-radius);
  background: var(--sao-panel-face-soft);
  box-shadow: var(--frame-shadow-3d);
  animation: delivery-peer-in 0.22s ease-out;
  min-height: 100%;
  box-sizing: border-box;
  overflow: auto;
  scrollbar-gutter: stable;
}

.pace-side-panel[hidden] {
  display: none !important;
  animation: none;
}

.pace-side-head {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem 0.75rem;
  margin: 0 0 0.25rem;
}

.pace-side-titles {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
  flex: 1 1 auto;
}

.pace-side-head .section-title {
  margin: 0;
  font-size: 0.72rem;
}

.pace-side-dim {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--paper);
  line-height: 1.2;
}

/* Score dial + Question time — RHS of Question / Question N */
.pace-side-head .pace-quest-meta {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.45rem 0.55rem;
  margin: 0;
  flex: 0 0 auto;
}

.pace-side-head .pace-quest-meta .rpg-dossier-score-ring {
  flex: 0 0 auto;
  align-self: center;
}

.pace-side-head .pace-quest-meta .turn-timer {
  flex: 0 0 auto;
  align-self: stretch;
  box-sizing: border-box;
  align-content: center;
}

.pace-quest-prompt {
  margin: 0;
}

.pace-quest-answer {
  margin-top: 0.65rem;
}

.pace-quest-answer .answer-text {
  margin: 0;
  max-height: 12rem;
  overflow: auto;
  padding-inline-end: var(--scroll-clear);
  scrollbar-gutter: stable;
}

/* Pace (closed + Question/Improve open): same 2rem viewport inset */
.rpg-inspector:has(.pace-shell),
.rpg-inspector:has(.pace-shell.is-pace-open),
.rpg-inspector.rpg-inspector-pace-split {
  width: calc(100vw - 4rem);
  max-width: calc(100vw - 4rem);
  height: calc(100vh - 4rem);
  max-height: calc(100vh - 4rem);
  min-height: calc(100vh - 4rem);
  margin: 2rem;
  box-sizing: border-box;
  transform: none;
}

/* Delivery: grow outward — 2rem inset on all sides of the viewport */
.rpg-inspector:has(.delivery-shell),
.rpg-inspector.rpg-inspector-delivery-split {
  width: calc(100vw - 4rem);
  max-width: calc(100vw - 4rem);
  height: calc(100vh - 4rem);
  max-height: calc(100vh - 4rem);
  min-height: calc(100vh - 4rem);
  margin: 2rem;
  box-sizing: border-box;
}

.rpg-inspector:has(.pace-shell) > .rpg-inspector-card,
.rpg-inspector:has(.pace-shell) .rpg-inspector-body,
.rpg-inspector:has(.delivery-shell) > .rpg-inspector-card,
.rpg-inspector:has(.delivery-shell) .rpg-inspector-body {
  height: 100%;
  max-height: none;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.rpg-inspector-body > .delivery-shell {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

.rpg-inspector-body > .pace-shell {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

@media (max-width: 900px) {
  .pace-shell.is-pace-open {
    grid-template-columns: 1fr;
  }

  .pace-shell.is-pace-open .pace-quest-rail,
  .pace-shell.is-pace-open .pace-improve-rail {
    min-height: 0;
  }

  .pace-side-panel {
    min-height: 0;
  }

  .pace-shell.is-pace-open .pace-quest-rail {
    order: 2;
  }

  .pace-shell.is-pace-open .rpg-ability-dossier {
    order: 1;
  }

  .pace-shell.is-pace-open .pace-improve-rail {
    order: 3;
  }
}

.delivery-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 1.35rem;
  row-gap: 1.25rem;
  align-items: stretch;
  width: 100%;
  min-height: 0;
  /* Colorless gutter so LHS / RHS read as two panels, not one slab */
  background:
    linear-gradient(
      to right,
      transparent calc(50% - 0.68rem),
      rgba(8, 14, 12, 0.55) calc(50% - 0.68rem),
      rgba(8, 14, 12, 0.55) calc(50% + 0.68rem),
      transparent calc(50% + 0.68rem)
    );
}

.delivery-shell > .rpg-ability-dossier {
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  border-radius: var(--frame-radius);
}

.delivery-shell > .rpg-ability-dossier > .rpg-dossier-head {
  flex-shrink: 0;
  /* Match Desk note rule width (full content width, not inset) */
  background-size: 100% 1px;
  background-position: left bottom;
}

.delivery-shell .rpg-delivery-main {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-top: 0.35rem;
}

.delivery-improve-rail {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  position: relative;
  margin: 0;
  padding: 1.05rem 1.15rem 1.15rem;
  border: 1px solid rgba(168, 134, 92, 0.28);
  border-bottom: var(--frame-bevel) solid var(--frame-lip);
  border-radius: var(--frame-radius);
  background: var(--sao-panel-face-alt);
  box-shadow: var(--frame-shadow-3d);
}

.delivery-shell:not(.is-improve-open) .delivery-improve-rail::before {
  content: none;
}

.delivery-coach-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  width: 100%;
  min-height: 12rem;
  height: 100%;
  margin: 0;
  padding: 1.4rem 1.2rem;
  box-sizing: border-box;
  text-align: center;
  border: 1px solid rgba(168, 134, 92, 0.48);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(201, 165, 116, 0.05) 0%, transparent 42%),
    rgba(0, 0, 0, 0.18);
  box-shadow: inset 0 0 0 1px rgba(168, 134, 92, 0.12);
}

.delivery-coach-empty-copy {
  margin: 0;
  max-width: 16rem;
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: rgba(239, 232, 214, 0.88);
}

.delivery-desk-brief {
  margin-top: 0.75rem;
  width: 100%;
  max-width: 100%;
  padding: 0.75rem 0 0.15rem;
  text-align: left;
  box-sizing: border-box;
  border-top: 1px solid rgba(168, 134, 92, 0.22);
  flex-shrink: 0;
}

.delivery-desk-brief .section-title {
  margin: 0 0 0.4rem;
}

.delivery-desk-copy {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(239, 232, 214, 0.9);
  text-wrap: pretty;
}

.delivery-shell.is-improve-open .delivery-coach-empty {
  display: none;
}

.delivery-shell.is-improve-open {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 1.35rem;
  row-gap: 1.25rem;
}

.delivery-shell.is-improve-open .delivery-improve-rail {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.delivery-shell.is-improve-open .delivery-improve-rail::before {
  content: none;
}

.delivery-shell.is-improve-open > .rpg-ability-dossier {
  height: 100%;
}

.rpg-delivery-main {
  min-width: 0;
}

.rpg-delivery-main > .section-title {
  margin: 0;
}

.rpg-delivery-breakdown {
  margin-top: 0.45rem;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.55rem;
  align-items: stretch;
  align-content: start;
  width: 100%;
}

.rpg-delivery-breakdown > li:nth-child(-n + 3) {
  grid-column: span 2;
}

.rpg-delivery-breakdown > li:nth-child(n + 4) {
  grid-column: span 3;
}

.rpg-delivery-breakdown > li {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  min-width: 0;
  height: auto;
  display: block;
}

.rpg-delivery-dim {
  appearance: none;
  position: relative;
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.35rem;
  margin: 0;
  padding: 0.55rem 0.65rem 0.55rem;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  border: 1px solid rgba(232, 210, 160, 0.72);
  border-bottom: 4px solid #5a4520;
  border-radius: 3px;
  background: linear-gradient(
    165deg,
    rgba(243, 230, 207, 0.18) 0%,
    rgba(168, 134, 92, 0.14) 28%,
    rgba(10, 16, 14, 0.94) 58%,
    rgba(4, 8, 7, 0.98) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 230, 0.28),
    0 0 0 1px rgba(90, 69, 32, 0.35),
    0 var(--press-rise) 0 rgba(0, 0, 0, 0.55),
    0 8px 14px rgba(0, 0, 0, 0.3);
  transform: translateY(0);
  transition:
    transform 0.07s ease,
    box-shadow 0.07s ease,
    border-bottom-width 0.07s ease,
    border-color 0.15s ease,
    background 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.rpg-delivery-dim-main {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 0.3rem;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
}

.rpg-delivery-breakdown .rpg-ability-head {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
  margin: 0;
}

.rpg-delivery-breakdown .rpg-ability-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.84rem;
  line-height: 1.15;
}

.rpg-delivery-breakdown .rpg-ability-pct {
  flex: 0 0 auto;
  font-size: clamp(0.95rem, 2vw, 1.15rem);
}

.rpg-delivery-breakdown .rpg-ability-track {
  width: 100%;
  margin: 0;
}

.rpg-delivery-breakdown .rpg-ability-blurb {
  align-self: end;
  margin-top: 0;
  line-height: 1.25;
  font-size: 0.72rem;
}

/* Breakdown cards — same traffic-light bands as rpg-xp header / drawer */
.rpg-delivery-breakdown .rpg-delivery-band-strong .rpg-ability-pct {
  color: #9ed4b4;
}

.rpg-delivery-breakdown .rpg-delivery-band-strong .rpg-ability-track {
  border-color: rgba(90, 158, 122, 0.45);
}

.rpg-delivery-breakdown .rpg-delivery-band-strong .rpg-ability-fill {
  background: linear-gradient(90deg, #2f6b4f, #8fd4ab);
}

.rpg-delivery-breakdown .rpg-delivery-band-fair .rpg-ability-pct {
  color: #c9a574;
}

.rpg-delivery-breakdown .rpg-delivery-band-fair .rpg-ability-track {
  border-color: rgba(168, 134, 92, 0.5);
}

.rpg-delivery-breakdown .rpg-delivery-band-fair .rpg-ability-fill {
  background: linear-gradient(90deg, #7a6340, #c9a574);
}

.rpg-delivery-breakdown .rpg-delivery-band-weak .rpg-ability-pct {
  color: #e8a090;
}

.rpg-delivery-breakdown .rpg-delivery-band-weak .rpg-ability-track {
  border-color: rgba(184, 92, 74, 0.4);
}

.rpg-delivery-breakdown .rpg-delivery-band-weak .rpg-ability-fill {
  background: linear-gradient(90deg, #8a4538, #e8a090);
}

.rpg-delivery-breakdown .rpg-delivery-band-null .rpg-ability-pct {
  color: var(--paper-dim);
}

.rpg-delivery-dim:hover {
  outline: none;
  border-color: rgba(246, 235, 207, 0.95);
  background: linear-gradient(
    165deg,
    rgba(248, 237, 216, 0.26) 0%,
    rgba(201, 165, 116, 0.22) 30%,
    rgba(12, 18, 16, 0.96) 58%,
    rgba(4, 8, 7, 0.99) 100%
  );
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 230, 0.35),
    0 0 0 1px rgba(90, 69, 32, 0.45),
    0 7px 0 rgba(0, 0, 0, 0.55),
    0 14px 20px rgba(0, 0, 0, 0.38);
}

.rpg-delivery-dim:hover .rpg-delivery-open-arrow {
  transform: translateX(3px);
}

.rpg-delivery-dim:focus-visible {
  outline: none;
  border-color: rgba(201, 165, 116, 0.85);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 var(--press-rise) 0 rgba(0, 0, 0, 0.5),
    0 8px 14px rgba(0, 0, 0, 0.28),
    0 0 0 2px rgba(8, 14, 12, 0.95),
    0 0 0 4px rgba(201, 165, 116, 0.55);
}

.rpg-delivery-dim:active {
  transform: translateY(3px);
  border-bottom-width: 1px;
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(0, 0, 0, 0.55);
}

.rpg-delivery-dim.is-active {
  border-color: var(--accent-hot);
  background: linear-gradient(180deg, rgba(168, 134, 92, 0.18) 0%, rgba(0, 0, 0, 0.34) 100%);
  transform: translateY(0);
  border-bottom-width: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(201, 165, 116, 0.4),
    0 var(--press-rise) 0 rgba(0, 0, 0, 0.5),
    0 8px 14px rgba(0, 0, 0, 0.28);
}

.rpg-delivery-dim.is-active:focus-visible {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(201, 165, 116, 0.45),
    0 var(--press-rise) 0 rgba(0, 0, 0, 0.5),
    0 8px 14px rgba(0, 0, 0, 0.28),
    0 0 0 2px rgba(8, 14, 12, 0.95),
    0 0 0 4px rgba(201, 165, 116, 0.55);
}

.rpg-delivery-dim.is-confirm {
  animation: ledger-confirm 0.55s ease-out 1;
}

.rpg-delivery-dim.is-active .rpg-ability-track,
.rpg-delivery-dim.is-active .rpg-ability-blurb,
.rpg-delivery-dim.is-active .rpg-ability-pct,
.rpg-delivery-dim.is-active .rpg-delivery-open {
  visibility: hidden;
}

.rpg-delivery-dim.is-active .rpg-delivery-hide {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  border-color: rgba(201, 165, 116, 0.45);
}

.rpg-delivery-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  align-self: stretch;
  margin-top: 0.15rem;
  padding: 0.42rem 0.55rem 0.38rem;
  box-sizing: border-box;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #14110c;
  background: linear-gradient(165deg, #f3e6cf 0%, #e4c896 48%, #d4b078 100%);
  border: 1px solid #f0e2c4;
  border-bottom: 3px solid #5a4520;
  border-radius: 2px;
  box-shadow:
    0 1px 0 rgba(255, 248, 230, 0.55) inset,
    0 3px 8px rgba(0, 0, 0, 0.28);
}

.rpg-delivery-open-label {
  line-height: 1;
}

.rpg-delivery-open-arrow {
  display: block;
  width: 1.25rem;
  height: 0.85rem;
  color: #1a140c;
  transition: transform 0.12s ease;
}

.rpg-delivery-hide {
  display: none;
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  z-index: 2;
  margin: 0;
  padding: 0.2rem 0.55rem;
  border: 1px solid rgba(232, 239, 233, 0.22);
  border-bottom: 2px solid rgba(0, 0, 0, 0.45);
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(232, 239, 233, 0.1) 0%, rgba(0, 0, 0, 0.28) 100%);
  color: var(--paper-dim);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  pointer-events: none;
}

.rpg-delivery-breakdown .rpg-ability-blurb {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--paper-dim);
  margin-top: 0.05rem;
}

.rpg-delivery-row {
  display: block;
}

.delivery-side-panel,
.rpg-delivery-drawer {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin: 0;
  padding: 1.05rem 1.15rem 1.15rem;
  padding-inline-end: calc(1.15rem + var(--scroll-clear));
  border: 1px solid var(--frame-edge);
  border-bottom: var(--frame-bevel) solid var(--frame-lip);
  border-radius: var(--frame-radius);
  background: var(--sao-panel-face-alt);
  box-shadow: var(--frame-shadow-3d);
  animation: delivery-peer-in 0.22s ease-out;
  min-height: 100%;
  box-sizing: border-box;
  overflow: auto;
  scrollbar-gutter: stable;
}

.delivery-side-panel[hidden],
.rpg-delivery-drawer[hidden] {
  display: none !important;
  animation: none;
}

.rpg-delivery-drawer-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.55rem 1rem;
  margin: 0 0 0.15rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid rgba(168, 134, 92, 0.22);
}

.rpg-delivery-drawer-titles {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
  flex: 1 1 10rem;
}

.rpg-delivery-drawer-titles .section-title {
  margin: 0;
  font-size: 0.72rem;
}

.rpg-delivery-drawer-dim {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--paper);
  line-height: 1.15;
}

.rpg-delivery-drawer-blurb {
  margin: 0.1rem 0 0;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.01em;
  color: rgba(239, 230, 200, 0.88);
  line-height: 1.35;
}

.rpg-delivery-drawer-head .rpg-xp,
.rpg-delivery-drawer-head .rpg-dossier-score-ring {
  flex: 0 0 auto;
  align-self: center;
}

.rpg-delivery-drawer-list {
  margin: 0;
  gap: 0.5rem;
  flex: 1 1 auto;
  min-height: 0;
}

.rpg-delivery-drawer .rpg-train-card {
  padding: 0.95rem 1rem 1rem;
  gap: 0.6rem;
  background: rgba(0, 0, 0, 0.22);
}

.rpg-delivery-drawer .rpg-train-card-fold {
  padding: 0;
  gap: 0;
}

.rpg-delivery-drawer .rpg-train-label {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #f2ead0;
  line-height: 1.35;
}

.rpg-delivery-drawer .rpg-train-scope {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-style: italic;
  letter-spacing: 0.01em;
  color: rgba(201, 165, 116, 0.92);
}

.rpg-delivery-drawer .rpg-train-habit,
.rpg-delivery-drawer .rpg-train-contrast {
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.55;
  color: rgba(232, 239, 233, 0.94);
}

.rpg-delivery-drawer .rpg-train-habit-body {
  display: block;
  margin-top: 0.12rem;
  font-weight: 400;
  color: rgba(232, 239, 233, 0.92);
}

.rpg-delivery-drawer .rpg-train-habit {
  font-weight: inherit;
}

.rpg-delivery-drawer .rpg-train-contrast {
  font-size: 0.92rem;
  color: rgba(232, 239, 233, 0.88);
}

.rpg-delivery-drawer .rpg-train-contrast .rpg-train-kicker,
.rpg-delivery-drawer .rpg-train-habit .rpg-train-kicker {
  display: block;
  margin: 0 0 0.22rem;
}

.rpg-delivery-drawer .rpg-train-examples li {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.55;
  padding: 0.9rem 1rem;
  min-height: 4.25rem;
  color: rgba(214, 222, 216, 0.9);
}

.rpg-delivery-drawer .rpg-train-why {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(214, 222, 216, 0.88);
}

.rpg-delivery-drawer .rpg-train-kicker {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
}

.rpg-delivery-improve-empty {
  margin: 0.15rem 0 0;
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--paper-dim);
}

@keyframes delivery-peer-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes ledger-stagger-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.is-stagger-in .rpg-delivery-drawer-head,
.is-stagger-in .pace-side-head,
.is-stagger-in .pace-quest-meta,
.is-stagger-in .pace-quest-prompt,
.is-stagger-in .pace-quest-answer,
.is-stagger-in .rpg-train-card,
.is-stagger-in .rpg-delivery-improve-empty,
.is-stagger-in .rpg-dossier-train .rpg-train-card,
.is-stagger-in .rpg-delivery-breakdown > li,
.is-stagger-in .rpg-tempo-list > li,
.is-stagger-in .guide-split-panel-head,
.is-stagger-in .rpg-run-body > .speech,
.is-stagger-in .rpg-run-body > .candidate-speech {
  animation: ledger-stagger-in 0.22s ease-out both;
  animation-delay: calc(min(var(--stagger-i, 0), 4) * 0.03s);
}

@media (prefers-reduced-motion: reduce) {
  .is-stagger-in .rpg-delivery-drawer-head,
  .is-stagger-in .pace-side-head,
  .is-stagger-in .pace-quest-meta,
  .is-stagger-in .pace-quest-prompt,
  .is-stagger-in .pace-quest-answer,
  .is-stagger-in .rpg-train-card,
  .is-stagger-in .rpg-delivery-improve-empty,
  .is-stagger-in .rpg-dossier-train .rpg-train-card,
  .is-stagger-in .rpg-delivery-breakdown > li,
  .is-stagger-in .rpg-tempo-list > li,
  .is-stagger-in .guide-split-panel-head,
  .is-stagger-in .rpg-run-body > .speech,
  .is-stagger-in .rpg-run-body > .candidate-speech {
    animation: none;
  }
}

.rpg-inspector-body:has(.delivery-shell.is-improve-open),
.rpg-inspector-body:has(.pace-shell.is-pace-open) {
  overflow: auto;
}

@media (max-width: 720px) {
  .delivery-shell.is-improve-open {
    grid-template-columns: 1fr;
  }

  .delivery-shell.is-improve-open .delivery-improve-rail {
    min-height: 0;
  }

  .delivery-side-panel,
  .rpg-delivery-drawer {
    min-height: 0;
  }

  .delivery-shell.is-improve-open > .rpg-ability-dossier {
    order: 1;
  }

  .delivery-shell.is-improve-open .delivery-improve-rail {
    order: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .delivery-side-panel,
  .rpg-delivery-drawer {
    animation: none;
  }
}

.rpg-quest-map-compact {
  margin-top: 0.45rem;
  grid-template-columns: 1fr;
  gap: 0.55rem;
}

.rpg-quest-map-compact .rpg-quest {
  width: 100%;
  min-width: 0;
}

.rpg-tempo {
  margin-top: 0.35rem;
  padding-top: 0;
  border-top: 0;
}

.rpg-tempo .section-title {
  margin: 0;
}

.rpg-tempo-list {
  list-style: none;
  margin: 0.55rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.rpg-tempo-list li {
  display: block;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

.rpg-tempo-open {
  appearance: none;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem 0.75rem;
  margin: 0;
  padding: 0.55rem 0.65rem 0.5rem;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  border: 1px solid rgba(168, 134, 92, 0.28);
  border-bottom: 4px solid rgba(0, 0, 0, 0.55);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(232, 239, 233, 0.08) 0%, rgba(0, 0, 0, 0.32) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 var(--press-rise) 0 rgba(0, 0, 0, 0.5),
    0 8px 14px rgba(0, 0, 0, 0.28);
  transform: translateY(0);
  transition:
    transform 0.07s ease,
    box-shadow 0.07s ease,
    border-bottom-width 0.07s ease,
    border-color 0.15s ease,
    background 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.rpg-tempo-open-main {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.4rem 0.55rem;
  min-width: 0;
  flex: 1 1 auto;
}

.rpg-tempo-review {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.28rem;
  margin-left: auto;
  padding: 0.28rem 0.55rem 0.26rem 0.6rem;
  border: 1px solid rgba(201, 165, 116, 0.55);
  border-bottom: 3px solid rgba(90, 69, 32, 0.85);
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(243, 230, 207, 0.18) 0%, rgba(168, 134, 92, 0.12) 42%, rgba(8, 10, 9, 0.92) 100%);
  color: #f0e6c8;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.1;
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 230, 0.22),
    0 2px 8px rgba(0, 0, 0, 0.28);
  transition:
    color 0.14s ease,
    border-color 0.14s ease,
    background 0.14s ease,
    transform 0.12s ease;
}

.rpg-tempo-review-arrow {
  display: block;
  flex: 0 0 auto;
  opacity: 0.9;
}

.rpg-tempo-hide {
  display: none;
  flex: 0 0 auto;
  margin-left: auto;
  padding: 0.2rem 0.55rem;
  border: 1px solid rgba(232, 239, 233, 0.22);
  border-bottom: 2px solid rgba(0, 0, 0, 0.45);
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(232, 239, 233, 0.1) 0%, rgba(0, 0, 0, 0.28) 100%);
  color: var(--paper-dim);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
}

.rpg-tempo-open:hover {
  outline: none;
  border-color: rgba(201, 165, 116, 0.75);
  background: linear-gradient(180deg, rgba(168, 134, 92, 0.2) 0%, rgba(0, 0, 0, 0.35) 100%);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 6px 0 rgba(0, 0, 0, 0.5),
    0 12px 18px rgba(0, 0, 0, 0.32),
    0 0 16px rgba(201, 165, 116, 0.12);
}

.rpg-tempo-open:hover .rpg-tempo-review {
  color: #fff6df;
  border-color: rgba(246, 235, 207, 0.85);
  background:
    linear-gradient(180deg, rgba(246, 235, 207, 0.28) 0%, rgba(201, 165, 116, 0.18) 42%, rgba(12, 14, 12, 0.94) 100%);
  transform: translateX(2px);
}

.rpg-tempo-open:hover .rpg-tempo-text {
  color: rgba(239, 230, 200, 0.92);
}

.rpg-tempo-open:focus-visible {
  outline: none;
  border-color: rgba(201, 165, 116, 0.85);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 var(--press-rise) 0 rgba(0, 0, 0, 0.5),
    0 8px 14px rgba(0, 0, 0, 0.28),
    0 0 0 2px rgba(8, 14, 12, 0.95),
    0 0 0 4px rgba(201, 165, 116, 0.55);
}

.rpg-tempo-open:active {
  transform: translateY(3px);
  border-bottom-width: 1px;
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(0, 0, 0, 0.55);
}

.rpg-tempo-open.is-active {
  border-color: var(--accent-hot);
  transform: translateY(2px);
  border-bottom-width: 2px;
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(201, 165, 116, 0.4),
    0 2px 0 rgba(0, 0, 0, 0.5),
    0 6px 12px rgba(0, 0, 0, 0.28);
}

.rpg-tempo-open.is-active:hover {
  transform: translateY(2px);
  border-bottom-width: 2px;
}

.rpg-tempo-open.is-active:focus-visible {
  transform: translateY(2px);
  border-bottom-width: 2px;
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(201, 165, 116, 0.45),
    0 2px 0 rgba(0, 0, 0, 0.5),
    0 6px 12px rgba(0, 0, 0, 0.28),
    0 0 0 2px rgba(8, 14, 12, 0.95),
    0 0 0 4px rgba(201, 165, 116, 0.55);
}

.rpg-tempo-open.is-confirm {
  animation: ledger-confirm 0.55s ease-out 1;
}

.rpg-tempo-open.is-active .rpg-tempo-review {
  display: none;
}

.rpg-tempo-open.is-active .rpg-tempo-hide {
  display: inline-flex;
  align-items: center;
  color: var(--paper);
  border-color: rgba(201, 165, 116, 0.45);
}

.rpg-tempo-open.is-active .rpg-tempo-text {
  display: none;
}

.rpg-tempo-open .tag-time {
  margin-left: 0;
  flex: 0 0 auto;
}

.rpg-tempo-text {
  flex: 1 1 10rem;
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--paper-dim);
}

.rpg-hint {
  margin: 0.35rem 0 0.75rem;
  color: var(--paper-dim);
  font-size: 0.88rem;
}

.rpg-quest-map {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.65rem;
}

.rpg-quest {
  appearance: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.35rem;
  justify-items: stretch;
  text-align: left;
  padding: 0.7rem 0.8rem 0.65rem;
  border: 1px solid var(--line);
  border-bottom: 4px solid rgba(0, 0, 0, 0.55);
  background: linear-gradient(180deg, rgba(232, 239, 233, 0.1) 0%, rgba(0, 0, 0, 0.32) 100%);
  color: var(--paper);
  font: inherit;
  border-radius: 3px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 var(--press-rise) 0 rgba(0, 0, 0, 0.5),
    0 8px 14px rgba(0, 0, 0, 0.28);
  transform: translateY(0);
  transition:
    transform 0.07s ease,
    box-shadow 0.07s ease,
    border-bottom-width 0.07s ease,
    border-color 0.15s ease,
    background 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.rpg-quest:hover {
  border-color: rgba(168, 134, 92, 0.65);
  background: linear-gradient(180deg, rgba(168, 134, 92, 0.18) 0%, rgba(0, 0, 0, 0.35) 100%);
  outline: none;
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 6px 0 rgba(0, 0, 0, 0.5),
    0 12px 18px rgba(0, 0, 0, 0.32);
}

.rpg-quest:focus-visible {
  outline: none;
  border-color: rgba(201, 165, 116, 0.85);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 var(--press-rise) 0 rgba(0, 0, 0, 0.5),
    0 8px 14px rgba(0, 0, 0, 0.28),
    0 0 0 2px rgba(8, 14, 12, 0.95),
    0 0 0 4px rgba(201, 165, 116, 0.55);
}

.rpg-quest:active {
  transform: translateY(3px);
  border-bottom-width: 1px;
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(0, 0, 0, 0.55);
}

.rpg-quest.is-active {
  border-color: var(--accent-hot);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(201, 165, 116, 0.35),
    0 var(--press-rise) 0 rgba(0, 0, 0, 0.5),
    0 8px 14px rgba(0, 0, 0, 0.28);
}

.rpg-quest-num {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.15;
  min-width: 0;
}

.rpg-quest-kind {
  grid-column: 1 / -1;
  font-size: 0.72rem;
  color: var(--paper-dim);
  line-height: 1.25;
}

.rpg-quest-meta-tags,
.rpg-quest-bar {
  grid-column: 1 / -1;
}

.rpg-quest-guard-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.rpg-quest-guard-tags .tag {
  margin-left: 0;
  font-size: 0.58rem;
  padding: 0.08rem 0.3rem;
  line-height: 1.15;
}

.rpg-quest-meta-tags {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.22rem;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.rpg-quest-langs {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: start;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.28rem;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.rpg-quest-langs .tag,
.rpg-quest-langs .tag-coding-lang {
  margin-left: 0;
  font-size: 0.58rem;
  padding: 0.1rem 0.34rem 0.1rem 0.28rem;
  line-height: 1.15;
}

.rpg-result-log .rpg-quest-langs,
.rpg-result-log .rpg-quest-guard-tags {
  padding: 0;
}

.rpg-result-log .rpg-quest-langs .tag-coding-lang {
  font-size: 0.56rem;
}

.rpg-result-log {
  margin-top: 0.55rem;
}

.rpg-result-log .rpg-quest-map {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
}

/* Slight proportional shrink of each quest tile */
.rpg-result-log .rpg-quest {
  padding: 0.42rem 0.48rem 0.4rem;
  gap: 0.26rem;
  min-width: 0;
  border-bottom-width: 3px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 calc(var(--press-rise) * 0.85) 0 rgba(0, 0, 0, 0.5),
    0 6px 11px rgba(0, 0, 0, 0.26);
}

.rpg-result-log .rpg-quest-num {
  font-size: 0.8rem;
}

.rpg-result-log .rpg-quest-kind {
  font-size: 0.62rem;
}

.rpg-result-log .rpg-tier-row {
  padding: 0.22rem 0.36rem 0.22rem 0.4rem;
  font-size: 0.66rem;
}

.rpg-result-log .rpg-quest-bar {
  gap: 0.18rem;
  margin-top: 0.08rem;
}

.rpg-result-log .rpg-quest-bar-label {
  font-size: 0.58rem;
}

.rpg-result-log .rpg-quest-bar-val {
  font-size: 0.7rem;
}

.rpg-result-log .rpg-quest-bar-track {
  height: 0.48rem;
}

@media (max-width: 900px) {
  .rpg-result-log .rpg-quest-map {
    grid-template-columns: repeat(auto-fill, minmax(7.75rem, 1fr));
  }
}

.rpg-quest-state {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--paper-dim);
}

.rpg-tier-tag {
  margin-left: 0;
  width: fit-content;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  padding: 0.22rem 0.5rem;
}

/* Tier chip — full card width, label left-aligned */
.rpg-tier-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0.32rem 0.55rem 0.32rem 0.65rem;
  border: 1px solid var(--line);
  background: rgba(232, 239, 233, 0.04);
  color: var(--paper);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.25;
}

.rpg-tier-row::before {
  content: "→ ";
  color: var(--accent);
  font-weight: 700;
}

.rpg-tier-building {
  color: #e0b48a;
  border-color: rgba(180, 120, 70, 0.55);
  background: rgba(140, 90, 45, 0.22);
}

.rpg-tier-developing {
  color: #e4eaf2;
  border-color: rgba(170, 180, 195, 0.55);
  background: rgba(120, 130, 145, 0.22);
}

.rpg-tier-solid {
  color: var(--accent-hot);
  border-color: rgba(168, 134, 92, 0.65);
  background: rgba(168, 134, 92, 0.16);
}

.rpg-tier-strong {
  color: #c5eef4;
  border-color: rgba(120, 190, 200, 0.6);
  background: rgba(70, 140, 155, 0.22);
}

.rpg-tier-ace {
  color: #d4caff;
  border-color: rgba(150, 130, 230, 0.65);
  background: rgba(100, 80, 190, 0.22);
}

.rpg-tier-skipped,
.rpg-tier-quit {
  color: #e8a89c;
  border-color: rgba(184, 92, 74, 0.55);
  background: rgba(184, 92, 74, 0.14);
}

.rpg-tier-empty {
  color: var(--paper-dim);
  border-color: rgba(232, 239, 233, 0.22);
  background: rgba(28, 46, 40, 0.65);
}

.rpg-tier-pending {
  color: #e8d6a0;
  border-color: rgba(168, 134, 92, 0.5);
  background: rgba(80, 140, 180, 0.16);
}

.rpg-quest-bar {
  display: grid;
  gap: 0.28rem;
  margin-top: 0.15rem;
  width: 100%;
}

.rpg-quest-bar-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.35rem;
}

.rpg-quest-bar-label {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
}

.rpg-quest-bar-val {
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent-hot);
}

.rpg-quest-bar-track {
  display: block;
  height: 0.62rem;
  border: 1px solid rgba(168, 134, 92, 0.35);
  background:
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.35) 0,
      rgba(0, 0, 0, 0.35) 2px,
      transparent 2px,
      transparent 7px
    ),
    rgba(20, 28, 24, 0.9);
  overflow: hidden;
}

.rpg-quest-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #3e6e5c, var(--accent-hot));
  box-shadow: inset 0 1px 0 rgba(255, 220, 180, 0.25);
  transform-origin: left center;
  animation: rpg-fill 0.45s ease-out both;
}

.rpg-quest-bar-strong .rpg-quest-bar-label,
.rpg-quest-bar-strong .rpg-quest-bar-val {
  color: #9ed4b4;
}

.rpg-quest-bar-strong .rpg-quest-bar-track {
  border-color: rgba(90, 158, 122, 0.45);
}

.rpg-quest-bar-strong .rpg-quest-bar-fill {
  background: linear-gradient(90deg, #2f6b4f, #8fd4ab);
}

.rpg-quest-bar-fair .rpg-quest-bar-label,
.rpg-quest-bar-fair .rpg-quest-bar-val {
  color: #c9a574;
}

.rpg-quest-bar-fair .rpg-quest-bar-track {
  border-color: rgba(168, 134, 92, 0.5);
}

.rpg-quest-bar-fair .rpg-quest-bar-fill {
  background: linear-gradient(90deg, #7a6340, #c9a574);
}

.rpg-quest-bar-weak .rpg-quest-bar-label,
.rpg-quest-bar-weak .rpg-quest-bar-val {
  color: #e8a090;
}

.rpg-quest-bar-weak .rpg-quest-bar-track {
  border-color: rgba(184, 92, 74, 0.4);
}

.rpg-quest-bar-weak .rpg-quest-bar-fill {
  background: linear-gradient(90deg, #8a4538, #e8a090);
}

.rpg-quest-bar-empty .rpg-quest-bar-fill {
  width: 0 !important;
}

.rpg-quest-score {
  font-variant-numeric: tabular-nums;
  color: var(--accent-hot);
  font-weight: 600;
  font-size: 0.9rem;
}

.rpg-quest-cleared {
  border-left: 3px solid #5a9e7a;
}

.rpg-quest-weak {
  border-left: 3px solid var(--danger);
}

.rpg-quest-skipped,
.rpg-quest-empty,
.rpg-quest-quit {
  border-left: 3px solid rgba(184, 92, 74, 0.55);
  opacity: 0.88;
}

.rpg-quest-pending {
  border-left: 3px solid rgba(168, 134, 92, 0.62);
}

.rpg-jump {
  cursor: pointer;
  appearance: none;
  font: inherit;
  border-bottom-width: 3px;
  border-bottom-style: solid;
  border-bottom-color: rgba(0, 0, 0, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 2px 0 rgba(0, 0, 0, 0.4);
  transform: translateY(0);
  transition:
    transform 0.07s ease,
    box-shadow 0.07s ease,
    border-bottom-width 0.07s ease;
  user-select: none;
}

.rpg-jump:hover {
  transform: translateY(-1px);
}

.rpg-jump:active {
  transform: translateY(2px);
  border-bottom-width: 1px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .cta,
  button.cta,
  a.cta,
  .ghost,
  button.ghost,
  a.ghost,
  .ref-toggle summary,
  .rpg-quest,
  .rpg-jump,
  .rpg-tempo-open,
  .rpg-delivery-dim {
    transition: none;
  }

  .cta:hover,
  button.cta:hover,
  a.cta:hover,
  .ghost:hover,
  .ref-toggle summary:hover,
  .rpg-quest:hover,
  .rpg-quest:focus-visible,
  .rpg-jump:hover,
  .rpg-tempo-open:hover,
  .rpg-tempo-open:focus-visible,
  .rpg-delivery-dim:hover,
  .rpg-delivery-dim:focus-visible {
    transform: none;
  }
}

.rpg-inspector {
  border: 1px solid rgba(168, 134, 92, 0.32);
  padding: 0;
  background: var(--sao-panel);
  max-width: min(52rem, calc(100vw - 3rem));
  width: 100%;
  max-height: min(72vh, calc(100vh - 4.5rem));
  height: fit-content;
  margin: auto;
  color: var(--paper);
}

/* Quest dossier / run / guidance: same 2rem viewport inset as Delivery & Content */
.rpg-inspector:has(.guide-shell),
.rpg-inspector:has(.guide-shell.is-open),
.rpg-inspector:has(.guide-shell.is-run-open) {
  width: calc(100vw - 4rem);
  max-width: calc(100vw - 4rem);
  height: calc(100vh - 4rem);
  max-height: calc(100vh - 4rem);
  min-height: calc(100vh - 4rem);
  margin: 2rem;
  box-sizing: border-box;
  transform: none;
}

/* Content / question log: same 2rem viewport inset as Delivery */
.rpg-inspector:has(.rpg-result-log):not(:has(.guide-shell)) {
  width: calc(100vw - 4rem);
  max-width: calc(100vw - 4rem);
  height: calc(100vh - 4rem);
  max-height: calc(100vh - 4rem);
  min-height: calc(100vh - 4rem);
  margin: 2rem;
  box-sizing: border-box;
}

.rpg-inspector::backdrop {
  background: rgba(6, 6, 8, 0.92);
  pointer-events: none;
}

.rpg-inspector-card {
  border: none;
  background: var(--sao-panel);
  max-height: inherit;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.rpg-inspector:has(.guide-shell) > .rpg-inspector-card {
  height: 100%;
  max-height: none;
  flex: 1 1 auto;
  min-height: 0;
}

.rpg-inspector:has(.rpg-result-log):not(:has(.guide-shell)) > .rpg-inspector-card {
  height: 100%;
  max-height: none;
  flex: 1 1 auto;
  min-height: 0;
}

.rpg-inspector-body {
  overflow: auto;
  padding: 0;
  max-height: min(70vh, calc(100vh - 4.5rem));
  background: var(--sao-panel);
}

.rpg-inspector:has(.guide-shell) .rpg-inspector-body {
  height: 100%;
  max-height: none;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.rpg-inspector:has(.rpg-result-log):not(:has(.guide-shell)) .rpg-inspector-body {
  height: 100%;
  max-height: none;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Content fills the tall frame but packs like Delivery — no stretched header rule. */
.rpg-inspector-body > .rpg-ability-dossier[data-ability="content"] {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-content: start;
  gap: 0.35rem;
}

.rpg-inspector-body > .rpg-ability-dossier[data-ability="content"] > .rpg-dossier-head {
  flex: 0 0 auto;
  height: auto;
  align-self: stretch;
  /* Full-width rule — same as Delivery dossier head */
  background-size: 100% 1px;
  background-position: left bottom;
}

.rpg-inspector-body > .rpg-ability-dossier[data-ability="content"] > .rpg-dossier-block,
.rpg-inspector-body > .rpg-ability-dossier[data-ability="content"] > .rpg-result-log {
  flex: 0 0 auto;
}

/* Quest dossier: pin chrome; scroll tips inside so top/bottom frame stay visible */
.rpg-inspector-body:has(> .guide-shell) {
  overflow: hidden;
  background: transparent;
}

.rpg-inspector-body > .guide-shell {
  width: 100%;
  height: 100%;
  max-height: none;
  min-height: 0;
  align-self: stretch;
  flex: 1 1 auto;
}

/* Pin Training Tips cube bottom-right so orbit motion is not clipped at top */
.rpg-inspector-body > .guide-shell:has(> .study-suggest-cube) {
  grid-template-rows: minmax(0, 1fr);
}

.rpg-inspector-body > .guide-shell:has(> .study-suggest-cube) > .study-suggest-cube {
  margin-bottom: 0.75rem;
}

.rpg-inspector-body > .guide-shell > .rpg-dossier {
  border: 1px solid var(--frame-edge);
  border-bottom: 1px solid var(--frame-edge);
  border-radius: var(--frame-radius);
  background: var(--sao-panel-face);
  box-shadow: var(--frame-shadow-3d);
  min-width: 0;
  height: 100%;
  max-height: none;
}

/* Quest dossier head sits in the frame — match Guidance inset gold under title/tags */
.rpg-inspector-body > .guide-shell > .rpg-dossier > .rpg-dossier-head {
  margin: 0;
  padding: 1rem 1.1rem 0.55rem;
  background-size: calc(100% - 2.2rem) 1px;
}

/* Single framed panel — dossier is the dialog surface (no outer chrome) */
.rpg-inspector-body > .rpg-dossier:not(.rpg-ability-dossier) {
  border: none;
  background: var(--sao-panel-face);
  padding: 1rem 1.1rem 1.2rem;
  box-shadow: none;
}

.rpg-inspector:has(.guide-shell),
.rpg-inspector-body:has(.guide-shell),
.rpg-inspector-card:has(.guide-shell),
.rpg-inspector:has(.pace-shell.is-pace-open),
.rpg-inspector-body:has(.pace-shell.is-pace-open),
.rpg-inspector-card:has(.pace-shell.is-pace-open),
.rpg-inspector:has(.delivery-shell),
.rpg-inspector-body:has(.delivery-shell),
.rpg-inspector-card:has(.delivery-shell) {
  background: transparent;
  border: none;
  box-shadow: none;
}

.rpg-inspector-body > .rpg-ability-dossier {
  border: none;
  box-shadow: none;
  height: auto;
  min-height: 0;
}

.rpg-dossier {
  display: grid;
  gap: 0.35rem;
}

.rpg-dossier-head {
  position: relative;
  z-index: 5;
  display: grid;
  gap: 0.35rem;
  margin: 0 0 0.65rem;
  padding: 0.15rem 0 0.55rem;
  border-bottom: none;
  /* Inset gold rule — same language as Guidance head (not edge-to-edge) */
  background-image: linear-gradient(rgba(168, 134, 92, 0.35), rgba(168, 134, 92, 0.35));
  background-size: calc(100% - 2.2rem) 1px;
  background-position: center bottom;
  background-repeat: no-repeat;
}

/* Ability heads are a single flex row — must beat display:grid above. */
.rpg-dossier-head.rpg-dossier-head-ability {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.65rem 0.85rem;
  /* More air above the gold rule under Delivery / Content / Pace titles. */
  padding-bottom: 0.95rem;
}

/* Pace: title left, Session time / Mark / Close right — one top row */
.rpg-dossier-head.rpg-dossier-head-pace {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.65rem 0.85rem;
  height: auto;
  overflow: visible;
  z-index: 8;
}

.rpg-dossier-head.rpg-dossier-head-pace .rpg-dossier-head-copy {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

.rpg-dossier-head.rpg-dossier-head-pace .turn-head-right {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  margin-left: auto;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-end;
}

.rpg-dossier:has(> .rpg-dossier-body) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  box-sizing: border-box;
  height: 100%;
  min-height: 0;
}

.rpg-dossier:has(> .rpg-dossier-body) > .rpg-dossier-head {
  flex: 0 0 auto;
  margin: 0;
  padding: 1rem 1.1rem 0.55rem;
  border-bottom: none;
  background-color: rgba(16, 28, 24, 0.98);
  background-image: linear-gradient(rgba(168, 134, 92, 0.35), rgba(168, 134, 92, 0.35));
  background-size: calc(100% - 2.2rem) 1px;
  background-position: center bottom;
  background-repeat: no-repeat;
}

.rpg-dossier-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 0.75rem 1.1rem 1.75rem;
  padding-inline-end: calc(1.1rem + var(--scroll-clear));
  scrollbar-gutter: stable;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-content: stretch;
}

.rpg-dossier-hits {
  flex: 0 0 auto;
  margin: 0 0 0.65rem;
  padding: 0.15rem 0 0.7rem;
  border-bottom: 1px solid rgba(232, 239, 233, 0.1);
}

.rpg-dossier-hits > .section-title {
  margin: 0 0 0.35rem;
}

.rpg-hit-lede {
  margin: 0 0 0.7rem;
  max-width: none;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--paper-dim);
}

.rpg-hit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem 1.25rem;
  column-gap: 1.35rem;
}

.rpg-hit-row {
  display: grid;
  grid-template-columns: 0.55rem auto 1fr;
  gap: 0.35rem 0.5rem;
  align-items: start;
  padding: 0.2rem 0;
  min-width: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  break-inside: avoid;
}

.rpg-hit-mark {
  width: 0.4rem;
  height: 0.4rem;
  margin-top: 0.4rem;
  border-radius: 50%;
  background: #e8a090;
  box-shadow: 0 0 0 3px rgba(232, 160, 144, 0.12);
}

.rpg-hit-soft .rpg-hit-mark,
.rpg-hit-below .rpg-hit-mark {
  background: #c9a574;
  box-shadow: 0 0 0 3px rgba(201, 165, 116, 0.12);
}

.rpg-hit-tag {
  margin-top: 0.12rem;
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #e8a090;
  white-space: nowrap;
}

.rpg-hit-soft .rpg-hit-tag,
.rpg-hit-below .rpg-hit-tag {
  color: #c9a574;
}

.rpg-hit-text {
  color: var(--paper);
  min-width: 0;
}

@media (max-width: 720px) {
  .rpg-hit-list {
    grid-template-columns: 1fr;
  }
}

/* Tip list sizes to content so the dossier body can scroll;
   only an opened tip fills the remaining pane. */
.rpg-dossier-body > .rpg-dossier-train {
  flex: 0 0 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.rpg-dossier-body > .rpg-dossier-train > .rpg-train-list {
  flex: 0 0 auto;
  min-height: 0;
}

.rpg-dossier-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  min-width: 0;
}

.rpg-dossier-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
}

.rpg-dossier-head .turn-head-right {
  margin-left: auto;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.5rem 0.65rem;
}

/* Question timer + Close match Score plaque height */
.rpg-dossier-head .turn-timer {
  box-sizing: border-box;
  align-content: center;
  align-self: stretch;
}

.rpg-dossier-head .rpg-inspect-actions {
  align-self: stretch;
  align-items: stretch;
  display: inline-flex;
}

.rpg-dossier-head .rpg-inspector-close {
  align-self: stretch;
  height: auto;
  min-height: 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
}

.rpg-dossier-flags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.28rem;
  min-height: 1.15rem;
}

.rpg-dossier-flags .tag {
  margin-left: 0;
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1.15;
  padding: 0.1rem 0.34rem;
  letter-spacing: 0.05em;
  border-radius: 2px;
}

.rpg-dossier .speech {
  margin-top: 0.85rem;
}

.rpg-dossier .interviewer-speech .question-box {
  background:
    linear-gradient(180deg, rgba(196, 210, 198, 0.16) 0%, rgba(0, 0, 0, 0.28) 100%);
  border: 1px solid rgba(168, 134, 92, 0.36);
  border-left: 3px solid rgba(168, 134, 92, 0.7);
  border-bottom: var(--frame-bevel) solid var(--frame-lip);
  box-shadow: var(--frame-shadow-3d);
}

.rpg-dossier .candidate-speech .answer-box {
  background:
    linear-gradient(180deg, rgba(168, 134, 92, 0.12) 0%, rgba(0, 0, 0, 0.36) 100%);
  border: 1px solid rgba(168, 134, 92, 0.32);
  border-left: 3px solid rgba(168, 134, 92, 0.65);
  border-bottom: var(--frame-bevel) solid var(--frame-lip);
  box-shadow: var(--frame-shadow-3d);
}

.rpg-dossier-block {
  margin-top: 0.85rem;
}

.rpg-dossier-train {
  margin-top: 0.35rem;
}

.rpg-dossier-body:has(.rpg-train-list.is-one-open) {
  display: flex;
  flex-direction: column;
  /* Keep body scrollable so practice details are never clipped when the run panel is open. */
  overflow: auto;
  padding-top: 0.55rem;
  padding-bottom: 0.85rem;
}

/* Focus practice: free vertical space while a tip is open */
.rpg-dossier-body:has(.rpg-train-list.is-one-open) > .rpg-dossier-hits {
  display: none;
}

.rpg-dossier-train:has(.rpg-train-list.is-one-open) {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-top: 0;
}

.rpg-dossier-body:has(.rpg-train-list.is-one-open) > .rpg-dossier-train {
  flex: 1 1 auto;
  min-height: 0;
}

.rpg-dossier-train:has(.rpg-train-list.is-one-open) > .section-title {
  display: none;
}

.rpg-train-list {
  list-style: none;
  margin: 0.45rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.rpg-train-list.is-one-open {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  gap: 0;
}

/* Open tip fills the dossier; other tips hide until closed */
.rpg-train-list.is-one-open > .rpg-train-card:not(.is-open) {
  display: none;
}

.rpg-train-card {
  margin: 0;
  padding: 0.9rem 1rem 0.95rem;
  border: 1px solid var(--frame-edge);
  border-bottom: var(--frame-bevel) solid var(--frame-lip);
  border-radius: var(--frame-radius);
  background: var(--frame-face);
  display: grid;
  gap: 0.55rem;
  box-shadow: var(--frame-shadow-3d);
}

.rpg-train-card-plain {
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--paper-dim);
}

.rpg-train-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.65rem;
}

.rpg-train-label {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: #efe6c8;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
  max-width: 100%;
}

.rpg-train-scope {
  font-size: 0.78rem;
  color: var(--accent);
  letter-spacing: 0.02em;
}

.rpg-train-contrast {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(232, 239, 233, 0.9);
}

.rpg-train-habit {
  margin: 0;
  max-width: none;
}

.rpg-train-habit-body {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(232, 239, 233, 0.92);
  letter-spacing: 0;
}

.rpg-train-concepts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.12rem 0 0.38rem;
}

.rpg-train-concept {
  display: inline-block;
  margin: 0;
  padding: 0.22rem 0.55rem;
  border: 1px solid rgba(168, 134, 92, 0.55);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(168, 134, 92, 0.28) 0%, rgba(168, 134, 92, 0.14) 100%);
  color: #f3ebcf;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.35;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.rpg-train-card-fold {
  padding: 0;
  gap: 0;
  flex: 0 0 auto;
  overflow: hidden;
}

.rpg-train-card-fold.is-open {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* Lift the open tip off the dossier so collapse affordance is obvious */
  border-color: rgba(168, 134, 92, 0.55);
  background:
    linear-gradient(180deg, rgba(46, 72, 58, 0.92) 0%, rgba(18, 32, 26, 0.96) 100%);
  box-shadow:
    0 0 0 1px rgba(168, 134, 92, 0.18),
    var(--frame-shadow-3d);
}

.rpg-train-fold {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}

.rpg-train-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  margin: 0;
  padding: 0.8rem 1rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  list-style: none;
  user-select: none;
  flex: 0 0 auto;
}

.rpg-train-summary::-webkit-details-marker,
.rpg-train-summary::marker {
  display: none;
  content: "";
}

.rpg-train-summary:hover {
  background: rgba(232, 239, 233, 0.04);
}

.rpg-train-card-fold.is-open > .rpg-train-fold > .rpg-train-summary {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0.85rem 1rem;
  background:
    linear-gradient(180deg, rgba(62, 92, 74, 0.98) 0%, rgba(36, 56, 46, 0.98) 100%);
  border-bottom: 1px solid rgba(168, 134, 92, 0.38);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}

.rpg-train-card-fold.is-open > .rpg-train-fold > .rpg-train-summary:hover {
  background:
    linear-gradient(180deg, rgba(74, 108, 86, 1) 0%, rgba(42, 66, 52, 1) 100%);
}

.rpg-train-card-fold.is-open > .rpg-train-fold > .rpg-train-summary::after {
  content: "Close";
  flex: none;
  align-self: center;
  margin-left: 0.15rem;
  padding: 0.18rem 0.55rem;
  border: 1px solid rgba(168, 134, 92, 0.55);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-hot);
  background: rgba(0, 0, 0, 0.28);
}

.rpg-train-summary:focus-visible {
  outline: 2px solid rgba(201, 165, 116, 0.65);
  outline-offset: -2px;
}

.rpg-train-summary-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.rpg-train-summary .rpg-train-kicker {
  display: block;
  margin: 0 0 0.28rem;
}

.rpg-train-summary .rpg-train-habit-body {
  margin-top: 0;
}

.rpg-train-summary-mark {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.42rem;
  border-right: 1.8px solid var(--accent);
  border-bottom: 1.8px solid var(--accent);
  transform: rotate(45deg);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.rpg-train-card-fold.is-open .rpg-train-summary-mark {
  margin-top: 0.55rem;
  transform: rotate(225deg);
}

.rpg-train-fold-panel {
  display: grid;
  grid-template-rows: 0fr;
  min-height: 0;
  transition: none;
}

.rpg-train-card-fold.is-open .rpg-train-fold-panel {
  flex: 1 1 auto;
  grid-template-rows: 1fr;
}

.rpg-train-fold-body {
  display: grid;
  align-content: start;
  gap: 0.85rem;
  min-height: 0;
  overflow: hidden;
  padding: 0 1rem;
  border-top: 0 solid transparent;
  opacity: 1;
  transform: none;
  transition: none;
}

.rpg-train-card-fold.is-open .rpg-train-fold-body {
  overflow: auto;
  padding: 0.9rem 1rem 1.1rem;
  padding-inline-end: calc(1rem + var(--scroll-clear));
  scrollbar-gutter: stable;
  border-top: 0;
  opacity: 1;
  transform: none;
  background:
    linear-gradient(180deg, rgba(8, 16, 12, 0.55) 0%, rgba(4, 10, 8, 0.72) 100%);
}

.rpg-train-contrast .rpg-train-kicker,
.rpg-train-habit .rpg-train-kicker {
  display: block;
  margin: 0 0 0.35rem;
  font-size: 0.62rem;
}

.rpg-train-kicker {
  display: inline-block;
  margin-right: 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.rpg-train-examples {
  display: grid;
  gap: 0.4rem;
  width: 100%;
  min-height: 5.5rem;
}

.rpg-train-examples ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
  width: 100%;
  min-height: 4.25rem;
}

.rpg-train-examples li {
  margin: 0;
  padding: 0.9rem 1rem;
  border-left: 2px solid rgba(168, 134, 92, 0.45);
  background: rgba(168, 134, 92, 0.06);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--paper-dim);
  font-style: italic;
  width: 100%;
  min-height: 4.25rem;
  box-sizing: border-box;
  white-space: normal;
  overflow-wrap: anywhere;
}

.rpg-tip-point {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.45rem 0.55rem;
  justify-self: stretch;
  width: 100%;
  min-height: 2.85rem;
  box-sizing: border-box;
  margin-top: 0.15rem;
  padding: 0.8rem 1rem 0.75rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  color: var(--paper);
  border-color: rgba(168, 134, 92, 0.45);
}

.rpg-tip-coding-tag {
  margin: 0;
  gap: 0.28rem;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  color: #e8c49a;
  border-color: rgba(196, 130, 80, 0.55);
  background: rgba(72, 42, 22, 0.45);
  padding: 0.18rem 0.45rem 0.18rem 0.36rem;
  line-height: 1.2;
}

.rpg-tip-coding-with {
  opacity: 0.78;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  margin-right: 0.2rem;
}

.rpg-tip-coding-tag .tag-coding-icon,
.rpg-dossier-tip .tag-coding-icon {
  width: 0.78rem;
  height: 0.78rem;
}

.rpg-train-card.is-pointing {
  border-color: rgba(201, 165, 116, 0.7);
  box-shadow:
    inset 0 0 0 1px rgba(201, 165, 116, 0.28),
    0 0 18px rgba(168, 134, 92, 0.18);
}

.answer-box.is-tip-target,
.guide-shell.is-run-open .run-split-panel .answer-box.is-tip-target,
.guide-shell.is-run-open .run-split-panel [data-code-fold].is-tip-target {
  border-color: rgba(201, 165, 116, 0.9);
  background:
    linear-gradient(165deg, rgba(201, 165, 116, 0.28), rgba(168, 134, 92, 0.12) 42%, rgba(40, 32, 18, 0.55) 100%),
    rgba(72, 56, 28, 0.72);
  box-shadow:
    inset 0 0 0 1px rgba(201, 165, 116, 0.45),
    0 0 0 1px rgba(168, 134, 92, 0.4),
    0 0 28px rgba(201, 165, 116, 0.22),
    0 var(--press-rise) 0 rgba(0, 0, 0, 0.45),
    0 8px 16px rgba(0, 0, 0, 0.2);
  animation: tip-target-pulse 0.55s ease-out 1;
}

.answer-box.is-tip-locked,
.guide-shell.is-run-open .run-split-panel .answer-box.is-tip-locked,
.guide-shell.is-run-open .run-split-panel [data-code-fold].is-tip-locked {
  animation: tip-target-pulse 0.55s ease-out 1;
}

@keyframes tip-target-pulse {
  0% {
    box-shadow:
      inset 0 0 0 1px rgba(201, 165, 116, 0.5),
      0 0 0 2px rgba(201, 165, 116, 0.28);
  }
  100% {
    box-shadow:
      inset 0 0 0 1px rgba(201, 165, 116, 0.35),
      0 0 0 1px rgba(168, 134, 92, 0.35);
  }
}

@keyframes ledger-confirm {
  0% {
    border-color: rgba(201, 165, 116, 0.75);
  }
  100% {
    border-color: var(--accent-hot);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rpg-train-fold-panel,
  .rpg-train-fold-body,
  .rpg-train-summary-mark {
    transition: none;
  }

  .rpg-train-fold-body {
    transform: none;
  }

  .answer-box.is-tip-target,
  .answer-box.is-tip-locked,
  .rpg-delivery-dim.is-confirm,
  .rpg-tempo-open.is-confirm {
    animation: none;
  }
}

.rpg-train-why {
  margin: 0.2rem 0 0;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(168, 134, 92, 0.18);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--paper-dim);
  max-width: none;
  width: 100%;
  overflow-wrap: anywhere;
}

.rpg-dossier-block .section-title {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.rpg-run-toggle {
  margin-top: 0.85rem;
}

.rpg-run-toggle > summary {
  display: inline-flex;
  align-items: center;
  font: inherit;
  font-weight: 500;
  color: var(--paper-dim);
  background: linear-gradient(180deg, rgba(232, 239, 233, 0.1) 0%, rgba(0, 0, 0, 0.28) 100%);
  border: 1px solid rgba(232, 239, 233, 0.22);
  border-bottom: 4px solid rgba(0, 0, 0, 0.55);
  border-radius: 3px;
  padding: 0.5rem 0.9rem 0.45rem;
  cursor: pointer;
  list-style: none;
  width: fit-content;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 var(--press-rise) 0 rgba(0, 0, 0, 0.5),
    0 8px 14px rgba(0, 0, 0, 0.28);
  user-select: none;
}

.rpg-run-toggle > summary::-webkit-details-marker {
  display: none;
}

.rpg-run-toggle[open] > summary {
  margin-bottom: 0.65rem;
  color: var(--accent-hot);
  border-color: rgba(168, 134, 92, 0.45);
  border-bottom-color: #5c4a22;
}

.rpg-run-body {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  align-items: start;
  min-height: 0;
  overflow: auto;
  padding-inline-end: var(--scroll-clear);
  scrollbar-gutter: stable;
  box-sizing: border-box;
}

/* Guidance / run: sticky rail(s) on LHS outside the gold box */
.guide-shell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "rail main";
  gap: 0.65rem;
  align-items: start;
  width: 100%;
  min-width: 0;
}

.guide-shell[data-guide-none]:not([data-run-split]) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "main";
}

/* Training Tips: RHS rail outside the dossier frame (does not shrink head) */
.guide-shell:has(> .study-suggest-cube) {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "rail main suggest";
}

.guide-shell[data-guide-none]:not([data-run-split]):has(> .study-suggest-cube) {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "main suggest";
}

.guide-shell > .study-suggest-cube {
  grid-area: suggest;
  align-self: end;
  justify-self: end;
  margin: 0 0.1rem 0.65rem 0;
}

.guide-shell > .rpg-dossier {
  grid-area: main;
  min-width: 0;
}

.guide-split-main {
  min-width: 0;
  display: grid;
  gap: 0.75rem;
  align-content: start;
  align-items: start;
  --run-qa-box-height: 9.75rem;
}

.guide-split-main > .interviewer-speech,
.guide-split-main > .candidate-speech {
  align-self: start;
  min-height: 0;
}

.guide-split-main > .interviewer-speech .question-box,
.guide-split-main > .candidate-speech > .answer-box:not([data-code-fold]) {
  height: var(--run-qa-box-height);
  min-height: var(--run-qa-box-height);
  max-height: var(--run-qa-box-height);
  overflow: auto;
  box-sizing: border-box;
}

.guide-side-stack {
  grid-area: rail;
  display: grid;
  grid-template-columns: minmax(13.5rem, max-content);
  justify-items: stretch;
  gap: 0.55rem;
  position: sticky;
  top: 0;
  align-self: start;
  z-index: 4;
  min-width: 0;
}

/* Both open: two separate navy panels (gap, no shared middle seam) */
.guide-shell.is-run-open.is-open .guide-side-stack {
  gap: 0.65rem;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.guide-rail,
.run-rail {
  position: sticky;
  top: 0;
  align-self: start;
  z-index: 4;
  min-width: 0;
  display: grid;
  justify-items: stretch;
}

.guide-shell > .guide-rail {
  grid-area: rail;
}

.guide-side-stack .guide-rail,
.guide-side-stack .run-rail {
  position: static;
}

.guide-split-open {
  writing-mode: horizontal-tb;
  transform: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.75rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.08rem;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: #14110c;
  background: linear-gradient(165deg, #f3e6cf 0%, #e4c896 48%, #d4b078 100%);
  border: 1px solid #f0e2c4;
  border-bottom: 3px solid #5a4520;
  border-radius: 3px;
  padding: 0.85rem 0.95rem 0.8rem 1.05rem;
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255, 248, 230, 0.65) inset,
    0 0 0 1px rgba(90, 69, 32, 0.35),
    0 6px 16px rgba(0, 0, 0, 0.42);
  user-select: none;
  white-space: nowrap;
  width: 100%;
  box-sizing: border-box;
  min-height: 3.35rem;
  transition:
    filter 0.12s ease,
    transform 0.12s ease,
    box-shadow 0.12s ease,
    border-color 0.15s ease;
}

.guide-split-open-label {
  min-width: 0;
  text-align: left;
  justify-self: start;
}

.guide-split-open-arrow {
  display: block;
  width: 1.15rem;
  height: 1.7rem;
  color: #1a140c;
  justify-self: end;
  transition: transform 0.12s ease;
}

.guide-split-open:hover {
  color: #14110c;
  filter: brightness(1.05);
  border-color: #f6ebcf;
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 248, 230, 0.8) inset,
    0 0 0 1px rgba(90, 69, 32, 0.4),
    0 8px 20px rgba(0, 0, 0, 0.48);
}

.guide-split-open:hover .guide-split-open-arrow {
  transform: translateY(3px);
}

.guide-split-open:active {
  transform: translateY(1px);
  filter: brightness(0.97);
  border-bottom-width: 2px;
}

.guide-split-open:focus-visible {
  outline: none;
  color: #14110c;
  border-color: #f6ebcf;
  box-shadow:
    0 1px 0 rgba(255, 248, 230, 0.65) inset,
    0 0 0 1px rgba(90, 69, 32, 0.4),
    0 6px 16px rgba(0, 0, 0, 0.42),
    0 0 0 2px rgba(8, 14, 12, 0.95),
    0 0 0 4px rgba(201, 165, 116, 0.65);
}

.ghost:focus-visible,
button.ghost:focus-visible,
a.ghost:focus-visible {
  outline: none;
  border-color: rgba(201, 165, 116, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 var(--press-rise) 0 rgba(0, 0, 0, 0.5),
    0 8px 14px rgba(0, 0, 0, 0.28),
    0 0 0 2px rgba(8, 14, 12, 0.95),
    0 0 0 4px rgba(201, 165, 116, 0.55);
}

.guide-split-panel {
  display: none;
}

/* Open: equal-height columns so gold + green top edges stay parallel.
   Guidance rail slightly wider; Question (main) takes the right-side growth. */
.guide-shell.is-open,
.guide-shell.is-run-open {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.25fr);
  grid-template-areas: "rail main";
  gap: 1rem 1.25rem;
  align-items: stretch;
  height: 100%;
  min-height: 0;
}

.guide-shell.is-open:has(> .study-suggest-cube),
.guide-shell.is-run-open:has(> .study-suggest-cube) {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.25fr) auto;
  grid-template-areas: "rail main suggest";
}

.guide-shell.is-open > .study-suggest-cube,
.guide-shell.is-run-open > .study-suggest-cube {
  align-self: end;
}

.guide-shell.is-open > .guide-rail,
.guide-shell.is-run-open > .run-rail,
.guide-shell.is-open .guide-side-stack,
.guide-shell.is-run-open .guide-side-stack {
  position: sticky;
  top: 0;
  align-self: stretch;
  max-height: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.guide-shell.is-open > .guide-rail,
.guide-shell.is-run-open > .run-rail {
  display: grid;
}

/* Run open alone: Your run fills the left column; Show guidance pinned under it.
   Use flex (not 1fr + height:100%) so the navy panel cannot stretch under the
   Show guidance chip and look cut short / overlapped. */
.guide-shell.is-run-open:not(.is-open) .guide-side-stack {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  align-self: stretch;
  align-items: stretch;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.guide-shell.is-run-open:not(.is-open) .run-rail {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: none;
  overflow: hidden;
  align-self: stretch;
  width: 100%;
}

.guide-shell.is-run-open:not(.is-open) .run-rail > .guide-split-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.75rem;
  flex: 1 1 auto;
  height: auto;
  max-height: none;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.guide-shell.is-run-open:not(.is-open) .run-rail > .guide-split-panel .rpg-run-body {
  overflow: auto;
  min-height: 0;
  flex: 1 1 auto;
  scrollbar-gutter: stable;
  padding-inline-end: var(--scroll-clear);
}

.guide-shell.is-run-open:not(.is-open) .guide-rail {
  margin: 0;
  padding: 0;
  border: none;
  flex: 0 0 auto;
  align-self: stretch;
  width: 100%;
  min-height: 0;
}

/* Run + guidance both open: fill dossier height; both panels scroll inside */
.guide-shell.is-run-open.is-open .guide-side-stack {
  display: grid;
  /* Prefer run enough room for fixed Q + gap + A; guidance takes the rest */
  grid-template-rows: minmax(22rem, 1.15fr) minmax(0, 1fr);
  gap: 0.65rem;
  align-content: stretch;
  align-self: stretch;
  height: 100%;
  max-height: 100%;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
  min-height: 0;
  box-sizing: border-box;
}

.guide-shell.is-run-open.is-open .run-rail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.guide-shell.is-run-open.is-open .run-rail > .guide-split-panel .rpg-run-body {
  overflow: auto;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  align-self: stretch;
}

/* Guidance open first: Show your run stays on top; guidance panel fills below */
.guide-shell.is-open:not(.is-run-open) .guide-side-stack {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.55rem;
}

.guide-shell.is-open:not(.is-run-open) .guide-rail {
  order: unset;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
}

.guide-shell.is-open:not(.is-run-open) .run-rail {
  order: unset;
  margin: 0;
  padding: 0;
  border: none;
  align-self: stretch;
  width: 100%;
}

.guide-shell.is-open:not(.is-run-open) .run-rail > .guide-split-open,
.guide-shell.is-run-open:not(.is-open) .guide-rail > .guide-split-open {
  width: 100%;
  box-sizing: border-box;
}

/* Both open: run + guidance share full column height; both scroll inside */
.guide-shell.is-run-open.is-open .guide-rail,
.guide-shell.is-run-open.is-open .run-rail {
  order: unset;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: none;
}

.guide-shell.is-run-open.is-open .run-rail {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.guide-shell.is-run-open.is-open .run-rail > .guide-split-panel {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
}

.guide-shell.is-run-open.is-open .guide-rail {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  align-self: stretch;
  min-height: 0;
}

.guide-shell.is-run-open.is-open .guide-rail > .guide-split-panel {
  flex: 1 1 auto;
  height: 100%;
  max-height: none;
  overflow: hidden;
  min-height: 0;
}

.guide-shell.is-run-open.is-open .guide-split-panel .guide-answer-box {
  height: 100%;
  min-height: 0;
  overflow: auto;
}

.guide-shell.is-open .guide-rail > .guide-split-open,
.guide-shell.is-run-open .run-rail > .guide-split-open {
  display: none;
}

/* Pin dossier chrome; tips scroll inside .rpg-dossier-body */
.guide-shell.is-open .rpg-dossier,
.guide-shell.is-run-open .rpg-dossier {
  max-height: none;
  height: 100%;
  overflow: hidden;
  min-height: 0;
}

.guide-shell.is-open .guide-rail > .guide-split-panel,
.guide-shell.is-run-open.is-open .run-rail > .guide-split-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.75rem;
  padding: 1.15rem 1.25rem 1.3rem;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
}

/* Run alone: head in flow; body scrolls; Show guidance stays below the panel */
.guide-shell.is-run-open:not(.is-open) .run-rail > .guide-split-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.75rem;
  padding: 1.15rem 1.25rem 1.3rem;
  flex: 1 1 auto;
  height: auto;
  max-height: none;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
}

/* Solo or both open: each panel is its own navy frame */
.guide-shell.is-open .guide-rail > .guide-split-panel,
.guide-shell.is-run-open .run-rail > .guide-split-panel {
  border: 1px solid var(--sao-code-border);
  border-radius: var(--frame-radius);
  background:
    linear-gradient(180deg, #1e2a3c 0%, #162033 48%, #121a28 100%);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

/* Run + Guidance: shared warm gold left spine */
.guide-shell.is-run-open .run-rail > .guide-split-panel,
.guide-shell.is-open .guide-rail > .guide-split-panel {
  box-shadow:
    inset 3px 0 0 rgba(168, 134, 92, 0.55),
    0 12px 28px rgba(0, 0, 0, 0.4);
}

/* Guidance / run: sticky head (title + Hide); no band / hairline cut */
.guide-shell.is-open .guide-rail > .guide-split-panel:has(.guide-answer-box) {
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.75rem;
  overflow: hidden;
}

.guide-shell.is-open .guide-rail > .guide-split-panel::before,
.guide-shell.is-run-open .run-rail > .guide-split-panel::before {
  content: none;
}

.guide-split-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
  padding-top: 0.1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(168, 134, 92, 0.35);
  position: sticky;
  top: 0;
  z-index: 2;
  background: #1e2a3c;
}

.guide-split-panel-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.45rem;
}

.guide-split-panel-head .guide-photos-toggle.is-open,
button.ghost.guide-photos-toggle.is-open {
  color: var(--accent-hot);
  border-color: rgba(168, 134, 92, 0.55);
  background: rgba(168, 134, 92, 0.14);
}

.photos-dialog {
  max-width: min(52rem, calc(100vw - 2rem));
  width: min(52rem, calc(100vw - 2rem));
  background: #121612;
  border-color: rgba(215, 199, 160, 0.22);
}

.photos-dialog-card {
  gap: 1rem;
  padding: 1.15rem 1.3rem 1.25rem;
  max-height: min(82vh, 44rem);
}

.photos-dialog-head {
  align-items: center;
}

.photos-dialog-body {
  min-height: 12rem;
  max-height: min(62vh, 34rem);
  overflow: auto;
  padding-right: 0.15rem;
  scrollbar-gutter: stable;
}

.photos-dialog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.85rem;
}

.photos-dialog-item {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  color: inherit;
  text-decoration: none;
}

.photos-dialog-item img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid rgba(215, 199, 160, 0.28);
  background: rgba(0, 0, 0, 0.35);
}

.photos-dialog-item:hover img {
  border-color: rgba(168, 134, 92, 0.65);
}

.photos-dialog-caption {
  display: block;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--paper-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guide-shell.is-run-open .run-split-panel > .guide-split-panel-head,
.guide-shell.is-open .guide-rail > .guide-split-panel > .guide-split-panel-head {
  background: #1e2a3c;
}

/* Run alone: head stays in normal flow (no sticky overlap) */
.guide-shell.is-run-open:not(.is-open) .run-split-panel > .guide-split-panel-head {
  position: relative;
  top: auto;
}

/* Same weight/color language as dossier "Question N" */
.guide-split-panel-head .section-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  font-style: normal;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--paper);
  line-height: 1.2;
}

.guide-shell.is-run-open .guide-split-panel .rpg-run-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  min-height: 0;
  overflow: auto;
  align-items: stretch;
  /* Identical Q/A spacing with guidance open or closed */
  gap: 0.85rem;
}

.guide-shell.is-open .guide-rail .guide-split-panel .judge-block,
.guide-shell.is-open .guide-rail .guide-split-panel .latex-body,
.guide-shell.is-open .guide-rail .guide-split-panel .guide-answer-box,
.guide-shell.is-run-open .guide-rail .guide-split-panel .judge-block {
  position: relative;
  z-index: 1;
  min-height: 0;
  overflow: auto;
  align-content: start;
  align-items: start;
  gap: 0.75rem;
}

/* Never shrink speech rows when the run panel is half-height */
.guide-shell.is-run-open .run-split-panel .rpg-run-body > .speech,
.guide-shell.is-run-open .run-split-panel .rpg-run-body > .interviewer-speech,
.guide-shell.is-run-open .run-split-panel .rpg-run-body > .candidate-speech,
.guide-shell.is-run-open .run-split-panel .rpg-run-body > .probe-speech {
  flex: 0 0 auto;
  align-self: stretch;
  min-height: min-content;
  height: auto;
  margin: 0;
}

.guide-shell.is-run-open.is-open .run-split-panel .rpg-run-body {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-items: stretch;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: auto;
}

.guide-shell.is-run-open .run-split-panel .candidate-speech {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: stretch;
}

.guide-shell.is-run-open .run-split-panel .candidate-speech > * {
  flex: 0 0 auto;
  margin-top: 0;
  margin-bottom: 0;
}

.guide-shell.is-run-open .run-split-panel .speech-who {
  margin-bottom: 0.35rem;
  background: transparent;
}

.guide-shell.is-run-open .run-split-panel {
  --run-qa-box-height: 9.75rem;
}

.guide-shell.is-run-open .run-split-panel .question-box {
  padding: 1.05rem 1.15rem 1.15rem;
  gap: 0.55rem;
  height: var(--run-qa-box-height) !important;
  min-height: var(--run-qa-box-height) !important;
  max-height: var(--run-qa-box-height) !important;
  overflow: auto;
  box-sizing: border-box;
  margin: 0 !important;
  flex: 0 0 auto;
  /* Cool slate frame — distinct from Your answer */
  background:
    linear-gradient(180deg, rgba(120, 158, 186, 0.18) 0%, rgba(8, 14, 24, 0.82) 100%);
  border: 1px solid rgba(140, 175, 205, 0.38);
  border-left: 3px solid rgba(150, 185, 215, 0.78);
  border-bottom: var(--frame-bevel) solid rgba(0, 0, 0, 0.55);
  border-radius: var(--frame-radius);
  box-shadow: var(--frame-shadow-3d);
}

.guide-shell.is-run-open .run-split-panel .question-box .latex-body,
.guide-shell.is-run-open .run-split-panel .question-box .latex-body .katex {
  font-size: 1rem;
  line-height: 1.6;
}

/* Only the written answer box — never Your code / Test cases fold shells */
.guide-shell.is-run-open .run-split-panel .answer-box:not([data-code-fold]) {
  padding: 0.95rem 1.05rem 1.05rem;
  margin: 0 !important;
  height: var(--run-qa-box-height) !important;
  min-height: var(--run-qa-box-height) !important;
  max-height: var(--run-qa-box-height) !important;
  overflow: auto;
  box-sizing: border-box;
  flex: 0 0 auto;
  /* Warm gold-ink frame — distinct from Question */
  background:
    linear-gradient(180deg, rgba(168, 134, 92, 0.14) 0%, rgba(10, 14, 12, 0.86) 100%);
  border: 1px solid rgba(168, 134, 92, 0.42);
  border-left: 3px solid rgba(168, 134, 92, 0.72);
  border-bottom: var(--frame-bevel) solid rgba(0, 0, 0, 0.55);
  border-radius: var(--frame-radius);
  box-shadow: var(--frame-shadow-3d);
}

.guide-shell.is-run-open .run-split-panel .code-box,
.guide-shell.is-run-open .run-split-panel .code-box-readonly {
  background: transparent;
}

.guide-shell.is-run-open .run-split-panel .code-box[data-code-fold],
.guide-shell.is-run-open .run-split-panel .coding-review[data-code-fold] {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0;
  margin: 0 !important;
  gap: 0.55rem;
  align-content: start;
  background: transparent;
  border: none;
  box-shadow: none;
  flex: 0 0 auto;
}

.guide-shell.is-run-open .run-split-panel .answer-text {
  font-size: 0.95rem;
  line-height: 1.55;
}

/* Guidance body scrolls under sticky head; Hide lives in panel head */
.guide-split-panel .guide-answer-box {
  margin: 0;
  padding: 0.15rem var(--scroll-clear) 0.35rem 0.15rem;
  border: none;
  border-radius: 0;
  background: transparent;
  display: grid;
  gap: 0.55rem;
  box-shadow: none;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  align-content: start;
  overflow: auto;
  scrollbar-gutter: stable;
  position: relative;
  z-index: 1;
}

.guide-split-panel .guide-answer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
}

.guide-split-panel .guide-answer-box > .section-title,
.guide-split-panel .guide-answer-head .section-title {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.3;
}

.guide-split-panel .guide-answer-box .latex-body,
.guide-split-panel .guide-answer-box .katex {
  margin: 0;
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.guide-split-panel .guide-answer-box .latex-body .katex-display {
  display: block;
  margin: 0.85rem auto;
  text-align: center;
  overflow: visible;
  max-width: 100%;
}

.guide-split-panel .guide-answer-box .latex-body .katex-display.is-scaled > .katex {
  display: inline-block;
  transform-origin: center top;
}

/* Collapsible code bars (Your code / Suggested Code) — button-like + border glow */
.code-box[data-code-fold],
.latex-suggested[data-code-fold],
.latex-suggested {
  margin: 1.15rem 0;
  width: 100%;
  max-width: 100%;
  padding: 0;
  gap: 0.55rem;
  align-content: start;
  box-sizing: border-box;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  display: grid;
  grid-auto-rows: auto;
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
}

/* In Your run, folds rely on candidate-speech gap only — no extra margins */
.guide-shell.is-run-open .run-split-panel .code-box[data-code-fold],
.guide-shell.is-run-open .run-split-panel .coding-review.code-box[data-code-fold] {
  margin: 0;
}

.code-box[data-code-fold] {
  margin-top: 0;
  margin-bottom: 0;
}

.coding-review.code-box[data-code-fold] {
  margin-top: 0;
  margin-bottom: 0;
}

[data-code-fold] > .code-fold-toggle,
[data-code-fold] > .code-fold-head > .code-fold-toggle {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  align-self: start;
}

[data-code-fold] > .code-fold-panel,
[data-code-fold] > .code-fold-head + .code-fold-panel {
  position: relative;
  z-index: 1;
  margin: 0;
  align-self: start;
}

[data-code-fold]:not(.is-open) > .code-fold-panel[hidden] {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden !important;
}

.code-fold-toggle,
.latex-suggested-toggle {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  margin: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--paper);
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.72rem 2.35rem 0.66rem 0.9rem;
  border: 1px solid rgba(168, 134, 92, 0.4);
  border-bottom: 4px solid rgba(0, 0, 0, 0.58);
  border-radius: 3px;
  background-color: var(--sao-code-face);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%23e8c56a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1.5 1.8L6 6.2 10.5 1.8'/></svg>"),
    linear-gradient(
      180deg,
      rgba(232, 239, 233, 0.12) 0%,
      rgba(18, 18, 20, 0.96) 48%,
      rgba(8, 8, 10, 0.98) 100%
    );
  background-repeat: no-repeat, no-repeat;
  background-position: right 0.85rem center, 0 0;
  background-size: 0.72rem 0.48rem, auto;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 var(--press-rise) 0 rgba(0, 0, 0, 0.5),
    0 8px 14px rgba(0, 0, 0, 0.28);
  transform: translateY(0);
  transition:
    transform 0.07s ease,
    box-shadow 0.07s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}

.code-fold-toggle .section-title,
.latex-suggested-toggle .section-title {
  margin: 0;
  color: var(--paper);
  letter-spacing: 0.06em;
}

.code-box[data-code-fold] .code-box-bar,
.latex-suggested .code-box-bar {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%23e8c56a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1.5 1.8L6 6.2 10.5 1.8'/></svg>"),
    linear-gradient(
      180deg,
      rgba(232, 239, 233, 0.12) 0%,
      rgba(18, 18, 20, 0.96) 48%,
      rgba(8, 8, 10, 0.98) 100%
    );
  background-repeat: no-repeat, no-repeat;
  background-position: right 0.85rem center, 0 0;
  background-size: 0.72rem 0.48rem, auto;
  border-bottom-color: rgba(0, 0, 0, 0.58);
}

.code-fold-toggle:hover,
.code-fold-toggle:focus-visible,
.latex-suggested-toggle:hover,
.latex-suggested-toggle:focus-visible {
  outline: none;
  border-color: rgba(201, 165, 116, 0.7);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%23e8c56a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1.5 1.8L6 6.2 10.5 1.8'/></svg>"),
    linear-gradient(
      180deg,
      rgba(168, 134, 92, 0.2) 0%,
      rgba(18, 28, 44, 0.98) 55%,
      rgba(8, 12, 20, 0.98) 100%
    );
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 5px 0 rgba(0, 0, 0, 0.5),
    0 12px 18px rgba(0, 0, 0, 0.32);
}

.code-fold-toggle:active,
.latex-suggested-toggle:active {
  transform: translateY(2px);
  border-bottom-width: 2px;
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.45),
    0 1px 0 rgba(0, 0, 0, 0.4);
}

[data-code-fold].is-open > .code-fold-toggle,
[data-code-fold].is-open > .code-fold-head > .code-fold-toggle,
.latex-suggested.is-open .latex-suggested-toggle,
.latex-suggested.is-open .code-fold-toggle {
  border-color: rgba(168, 134, 92, 0.55);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%23e8c56a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1.5 6.2L6 1.8 10.5 6.2'/></svg>"),
    linear-gradient(
      180deg,
      rgba(168, 134, 92, 0.16) 0%,
      rgba(18, 18, 20, 0.98) 100%
    );
}

/* Fullscreen fold: always expanded — collapse only exists in the docked state */
[data-code-fold][data-fold-focus-locked] > .code-fold-toggle,
[data-code-fold][data-fold-focus-locked] > .code-fold-head > .code-fold-toggle {
  pointer-events: none;
  cursor: default;
}

.code-fold-panel {
  min-width: 0;
  background: var(--sao-code-face);
  border: 1px solid var(--sao-code-border);
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(201, 165, 116, 0.06);
  padding: 0.55rem;
  padding-inline-end: calc(0.55rem + var(--scroll-clear));
  scrollbar-gutter: stable;
}

.code-fold-panel[hidden] {
  display: none !important;
}

.code-box[data-code-fold] .code-text,
.latex-suggested .latex-code-box,
.latex-suggested .code-text,
.latex-suggested .code-fold-panel .latex-code-box {
  margin: 0;
  border: none;
  background: var(--sao-code-face);
  color: var(--sao-code-text);
}

.guide-split-panel .guide-answer-box .latex-suggested {
  margin: 1.25rem 0;
}

/* Nested run / dossier: keep toggle button chrome, not flat navy shell */
.guide-shell.is-run-open .run-split-panel .code-box[data-code-fold],
.guide-shell.is-run-open .run-split-panel .code-box-readonly[data-code-fold],
.guide-shell.is-run-open .run-split-panel .coding-review[data-code-fold],
.rpg-dossier .code-box[data-code-fold],
.rpg-dossier .code-box-readonly[data-code-fold] {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
}

/* Legacy judge-block inside guidance (if any) → same treatment */
.guide-split-panel .judge-block,
.guide-shell.is-open .guide-split-panel .judge-block {
  margin: 0;
  padding: 0.85rem 1rem 1rem;
  border: 1px solid var(--frame-edge);
  border-bottom: var(--frame-bevel) solid var(--frame-lip);
  border-radius: var(--frame-radius);
  background: var(--frame-face);
  gap: 0.55rem;
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  box-shadow: var(--frame-shadow-3d);
}

.guide-split-panel .judge-block .section-title,
.guide-shell.is-open .guide-split-panel .judge-block .section-title {
  color: var(--accent);
}

.guide-split-panel .judge-block .latex-body,
.guide-split-panel .judge-block.latex-body,
.guide-split-panel .judge-block .katex,
.guide-shell.is-open .guide-split-panel .judge-block .latex-body,
.guide-shell.is-open .guide-split-panel .judge-block .katex {
  color: var(--paper);
  font-family: inherit;
}

.guide-split-panel-head .guide-split-hide,
button.ghost.guide-split-hide {
  flex-shrink: 0;
  align-self: center;
}

.rpg-inspector.rpg-inspector-split,
.rpg-inspector.rpg-inspector-split:has(.study-suggest-cube),
.rpg-inspector:has(.guide-shell):has(.study-suggest-cube):not(.rpg-inspector-split) {
  width: calc(100vw - 4rem);
  max-width: calc(100vw - 4rem);
}

.rpg-inspector.rpg-inspector-split:has(.rpg-result-log) {
  width: calc(100vw - 4rem);
  max-width: calc(100vw - 4rem);
}

@media (max-width: 720px) {
  .guide-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "main"
      "rail";
  }

  .guide-shell:has(> .study-suggest-cube) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "main"
      "suggest"
      "rail";
  }

  .guide-shell > .study-suggest-cube {
    justify-self: end;
    align-self: end;
    margin: 0 0.35rem 0.25rem 0;
  }

  .guide-rail,
  .run-rail,
  .guide-side-stack {
    position: sticky;
    bottom: 0.5rem;
    top: auto;
    justify-self: start;
  }

  .guide-split-open {
    writing-mode: horizontal-tb;
    transform: none;
    padding: 0.5rem 0.9rem 0.45rem;
  }

  .guide-shell.is-open,
  .guide-shell.is-run-open {
    grid-template-columns: 1fr;
    grid-template-areas:
      "rail"
      "main";
    align-items: stretch;
  }

  .guide-shell.is-open:has(> .study-suggest-cube),
  .guide-shell.is-run-open:has(> .study-suggest-cube) {
    grid-template-columns: 1fr;
    grid-template-areas:
      "rail"
      "main"
      "suggest";
  }

  .guide-shell.is-open > .guide-rail,
  .guide-shell.is-run-open > .run-rail,
  .guide-shell.is-open .guide-side-stack,
  .guide-shell.is-run-open .guide-side-stack {
    position: static;
    max-height: none;
  }

  .guide-shell.is-run-open .guide-side-stack {
    grid-template-rows: auto auto;
  }

  .guide-shell.is-open .guide-rail > .guide-split-panel,
  .guide-shell.is-run-open .run-rail > .guide-split-panel {
    max-height: none;
    height: auto;
    min-height: 12rem;
    overflow: hidden;
  }

  .guide-shell.is-open,
  .guide-shell.is-run-open {
    grid-template-columns: 1fr;
  }

  .guide-shell.is-open .rpg-dossier,
  .guide-shell.is-run-open .rpg-dossier {
    max-height: none;
    height: 100%;
    overflow: hidden;
  }

  .rpg-inspector:has(.guide-shell) {
    width: calc(100vw - 4rem);
    max-width: calc(100vw - 4rem);
    height: calc(100vh - 4rem);
    max-height: calc(100vh - 4rem);
    min-height: calc(100vh - 4rem);
    margin: 2rem;
  }
}

.rpg-improve .improve-list li,
.rpg-panel .improve-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.35rem 0.5rem;
}

@media (max-width: 720px) {
  .rpg-brief-meta-row {
    grid-template-columns: 1fr;
    gap: 0.12rem;
  }

  .rpg-brief-head {
    align-items: flex-end;
    flex-wrap: wrap;
  }

  .rpg-brief-back.ghost,
  a.rpg-brief-back {
    margin-left: auto;
  }

  .rpg-brief-meta-band {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .rpg-brief-clock {
    justify-self: start;
  }

  .rpg-brief-power {
    grid-template-columns: 1fr auto;
  }

  .rpg-brief-power-label {
    grid-column: 1 / -1;
  }

  .rpg-grid {
    grid-template-columns: 1fr;
  }

  .rpg-ability-dials {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.65rem;
  }

  .rpg-dial-open {
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 5.25rem;
    column-gap: 0.75rem;
    padding: 0.65rem 0.7rem;
  }

  .rpg-dial-ring,
  .rpg-grade-mark {
    width: 4.25rem;
  }

  .rpg-dial-val {
    font-size: 1.15rem;
  }

  .rpg-dial-affordance {
    min-width: 5.5rem;
    padding: 0.6rem 0.7rem 0.55rem;
  }
}

/* Mouse-tracing border glow (border-glow.js) */
[data-border-glow] {
  position: relative;
  isolation: isolate;
}

[data-border-glow]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: radial-gradient(
    520px circle at var(--glow-x, 50%) var(--glow-y, 50%),
    var(--border-glow-hot) 0%,
    var(--border-glow-mid) 18%,
    var(--border-glow-soft) 32%,
    transparent 48%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.22s ease;
}

[data-border-glow]::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(
    360px circle at var(--glow-x, 50%) var(--glow-y, 50%),
    var(--border-glow-halo) 0%,
    rgba(168, 134, 92, 0.12) 30%,
    transparent 58%
  );
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  filter: blur(10px);
  transition: opacity 0.22s ease;
}

@media (hover: hover) {
  [data-border-glow]:is(:hover, :focus-visible)::after,
  [data-border-glow][data-border-glow-active]::after {
    opacity: 1;
  }

  [data-border-glow]:is(:hover, :focus-visible)::before,
  [data-border-glow][data-border-glow-active]::before {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-border-glow]::before,
  [data-border-glow]::after {
    display: none;
  }
}

.rpg-dial-open[data-border-glow] {
  z-index: 1;
}

.rpg-dial-open[data-border-glow]::after {
  padding: 2px;
  border-radius: inherit;
}

.rpg-quest[data-border-glow]::after {
  padding: 2px;
  border-radius: inherit;
}

.code-fold-toggle[data-border-glow]::after,
.latex-suggested-toggle[data-border-glow]::after {
  border-radius: 3px;
  padding: 2px;
}

.cta[data-border-glow]::after,
button.cta[data-border-glow]::after,
a.cta[data-border-glow]::after {
  padding: 2px;
  border-radius: inherit;
}

button.rpg-session-clock[data-border-glow]::after,
button.rpg-session-clock[data-border-glow]::before {
  border-radius: 0;
}

button.rpg-session-clock[data-border-glow]::after {
  padding: 1px;
  z-index: 4;
}

/* Start page — Terms of Service */
.terms-agree-row {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.15rem;
}

.terms-agree-label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  color: var(--muted, #a8afb8);
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
}

.terms-agree-label > span {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: none;
  color: inherit;
}

.terms-agree-label input[type="checkbox"] {
  margin: 0;
  width: 0.92rem;
  height: 0.92rem;
  accent-color: #a8865c;
  flex-shrink: 0;
  vertical-align: middle;
}

.terms-link {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #e8c49a;
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: none;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

.terms-link:hover {
  color: #f0d4ae;
}

.terms-agree-hint {
  margin: 0;
  color: #e0a090;
  font-size: 0.86rem;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: normal;
}

.terms-agree-row.is-invalid .terms-agree-label {
  color: #e8c4b8;
}

.terms-agree-row.is-agreed .terms-agree-label {
  color: rgba(232, 239, 233, 0.78);
}

.terms-agreed-note {
  color: var(--accent, #a8865c);
  font-size: 0.85em;
  font-weight: 600;
}

.terms-dialog {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 0;
  background: #141820;
  color: #e8eaed;
  max-width: min(36rem, calc(100vw - 1.5rem));
  width: min(36rem, calc(100vw - 1.5rem));
  max-height: min(88vh, 40rem);
  box-shadow: 0 22px 64px rgba(0, 0, 0, 0.62);
}

.terms-dialog::backdrop {
  background: rgba(5, 7, 10, 0.78);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.terms-dialog-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: min(88vh, 40rem);
  min-height: min(70vh, 32rem);
}

.terms-dialog-head {
  padding: 1.2rem 1.35rem 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.terms-dialog-title {
  margin: 0;
  font-family: var(--font-display), Fraunces, Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: #f2f4f7;
}

.terms-dialog-sub {
  margin: 0.4rem 0 0;
  color: #9aa3ad;
  font-size: 0.9rem;
  line-height: 1.4;
}

.terms-dialog-body {
  overflow: auto;
  padding: 1rem 1.35rem 1.25rem;
  color: #c5ccd4;
  font-size: 0.92rem;
  line-height: 1.55;
  scrollbar-gutter: stable;
}

.terms-dialog-body h3 {
  margin: 1.15rem 0 0.4rem;
  font-family: var(--font-display), Fraunces, Georgia, serif;
  font-size: 1rem;
  font-weight: 600;
  color: #e8c49a;
}

.terms-dialog-body h3:first-of-type {
  margin-top: 0.65rem;
}

.terms-dialog-body p,
.terms-dialog-body ul {
  margin: 0 0 0.65rem;
}

.terms-dialog-body ul {
  padding-left: 1.2rem;
}

.terms-dialog-body li {
  margin-bottom: 0.35rem;
}

.terms-end-mark {
  margin-top: 1.5rem !important;
  text-align: center;
  color: #8b949e;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}

.terms-dialog-foot {
  display: grid;
  gap: 0.55rem;
  padding: 0.85rem 1.35rem 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: #10151d;
}

.terms-scroll-hint {
  margin: 0;
  color: #a8afb8;
  font-size: 0.84rem;
}

.terms-dialog-actions {
  display: flex;
  justify-content: flex-end;
}

.terms-dialog-actions .cta:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

/* Live interview / meet: discourage copying problem text */
[data-no-clipboard] .question-panel,
[data-no-clipboard] .talk-thread,
[data-no-clipboard] .problem,
[data-no-clipboard] .fb-thread,
[data-no-clipboard] .fb-target,
[data-no-clipboard] .fb-bubble:not(.fb-bubble-me) {
  -webkit-user-select: none;
  user-select: none;
}

/* Report, interview end, and end detail: question and solution text stay on the page. */
[data-no-clipboard="bank"],
[data-no-clipboard="bank"] * {
  -webkit-user-select: none;
  user-select: none;
}

.no-clipboard-toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  z-index: 12000;
  max-width: min(28rem, calc(100vw - 2rem));
  padding: 0.7rem 1rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(232, 196, 154, 0.35);
  background: #121a28;
  color: #e8c49a;
  font-size: 0.88rem;
  line-height: 1.35;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  transform: translate(-50%, 0.6rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.no-clipboard-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}


/* Focus stage — soft fullscreen for Q / answer / code / guidance / run */
.focus-stage-host,
[data-focus-stage] {
  position: relative;
}

.focus-stage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem 0.75rem;
  margin: 0 0 0.55rem;
}

.focus-stage-head .section-title {
  margin: 0;
}

.talk-panel-head.has-focus-btn,
.answer-panel-head.has-focus-btn,
.talk-panel-head:has(.focus-stage-btn),
.answer-panel-head:has(.focus-stage-btn) {
  align-items: center;
  justify-content: space-between;
}

.answer-box-head .focus-stage-btn {
  margin-left: auto;
}

.focus-stage-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(168, 134, 92, 0.28);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.28);
  color: rgba(201, 165, 116, 0.78);
  cursor: pointer;
  opacity: 0.62;
  transition:
    opacity 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}

.focus-stage-icon {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
  flex: 0 0 auto;
}

/* One glyph at a time — display:block on icons was overriding [hidden]. */
.focus-stage-btn .focus-stage-icon--exit,
.focus-stage-btn.is-expanded .focus-stage-icon--expand,
.focus-stage-btn[aria-pressed="true"] .focus-stage-icon--expand,
.focus-stage-icon[hidden] {
  display: none !important;
}

.focus-stage-btn.is-expanded .focus-stage-icon--exit,
.focus-stage-btn[aria-pressed="true"] .focus-stage-icon--exit {
  display: block !important;
}

.focus-stage-btn:hover,
.focus-stage-btn:focus-visible,
[data-focus-stage]:hover > .focus-stage-btn,
[data-focus-stage]:focus-within > .focus-stage-btn,
[data-focus-stage]:hover .talk-panel-head .focus-stage-btn,
[data-focus-stage]:hover .answer-panel-head .focus-stage-btn,
[data-focus-stage]:hover .guide-split-panel-actions .focus-stage-btn,
[data-focus-stage]:hover .code-box-tools .focus-stage-btn,
[data-focus-stage]:hover .answer-box-head .focus-stage-btn,
[data-focus-stage]:hover .focus-stage-head .focus-stage-btn,
[data-focus-stage]:hover .study-reader-plate-head .focus-stage-btn,
[data-focus-stage]:hover .study-reader-plate-head .guide-split-panel-actions .focus-stage-btn {
  opacity: 1;
  color: var(--accent-hot);
  border-color: rgba(201, 165, 116, 0.55);
  background: rgba(201, 165, 116, 0.1);
  outline: none;
}

.focus-stage-btn:active {
  transform: translateY(1px);
}

.focus-stage-btn[aria-pressed="true"] {
  opacity: 1;
  color: var(--accent-hot);
  border-color: rgba(201, 165, 116, 0.65);
  background: rgba(201, 165, 116, 0.14);
}

.focus-stage-btn--corner {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  z-index: 6;
}

/* Your code / Suggested Code: focus sits outside as a sibling; toggle keeps full 3D chrome */
.code-fold-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.45rem;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.code-fold-head > .code-fold-toggle,
.code-fold-head > [data-code-fold-toggle] {
  width: 100%;
  min-width: 0;
}

.code-fold-head > .focus-stage-btn {
  position: relative;
  top: auto;
  right: auto;
  z-index: 2;
  align-self: stretch;
  width: 2.65rem;
  height: auto;
  min-height: 2.55rem;
  margin: 0;
  opacity: 1;
  border: 1px solid rgba(168, 134, 92, 0.4);
  border-bottom: 4px solid rgba(0, 0, 0, 0.58);
  border-radius: 3px;
  color: rgba(201, 165, 116, 0.92);
  background:
    linear-gradient(
      180deg,
      rgba(232, 239, 233, 0.12) 0%,
      rgba(18, 18, 20, 0.96) 48%,
      rgba(8, 8, 10, 0.98) 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 var(--press-rise) 0 rgba(0, 0, 0, 0.5),
    0 8px 14px rgba(0, 0, 0, 0.28);
  transform: translateY(0);
  transition:
    transform 0.07s ease,
    box-shadow 0.07s ease,
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease;
}

.code-fold-head > .focus-stage-btn:hover,
.code-fold-head > .focus-stage-btn:focus-visible {
  opacity: 1;
  color: var(--accent-hot);
  border-color: rgba(201, 165, 116, 0.62);
  background:
    linear-gradient(
      180deg,
      rgba(168, 134, 92, 0.18) 0%,
      rgba(18, 18, 20, 0.98) 100%
    );
  outline: none;
}

.code-fold-head > .focus-stage-btn:active {
  transform: translateY(2px);
  border-bottom-width: 1px;
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.45),
    0 1px 0 rgba(0, 0, 0, 0.4);
}

[data-code-fold].is-open > .code-fold-head > .focus-stage-btn,
.code-fold-head > .focus-stage-btn.is-expanded,
.code-fold-head > .focus-stage-btn[aria-pressed="true"] {
  border-color: rgba(168, 134, 92, 0.55);
  color: var(--accent-hot);
  background:
    linear-gradient(
      180deg,
      rgba(168, 134, 92, 0.16) 0%,
      rgba(18, 18, 20, 0.98) 100%
    );
}

.code-box-tools .focus-stage-btn {
  width: 2rem;
  height: 2rem;
  border-bottom-width: 1px;
  box-shadow: none;
}

.focus-stage-veil {
  position: fixed;
  inset: 0;
  z-index: 12040;
  background: rgba(4, 6, 8, 0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

dialog.has-focus-stage {
  overflow: hidden;
}

dialog.has-focus-stage > .rpg-inspector-card,
dialog.has-focus-stage > .rpg-inspector-close {
  visibility: hidden;
}

dialog.has-focus-stage > .focus-stage-veil,
dialog.has-focus-stage > [data-focus-stage].is-focus-on,
dialog.has-focus-stage > [data-focus-stage].is-focus-parked {
  visibility: visible;
}

dialog.has-focus-stage > [data-focus-stage].is-focus-parked {
  visibility: hidden;
}

.focus-stage-veil.is-on {
  opacity: 1;
  pointer-events: auto;
}

[data-focus-stage].is-focus-on {
  position: fixed !important;
  inset: 3.25vh 3.5vw;
  z-index: 12050;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  max-height: 93.5vh !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Neutral shell — each stage restores its own pre-focus colors below */
  border: 1px solid var(--frame-edge);
  border-radius: var(--frame-radius);
  background: var(--sao-panel);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.45),
    0 18px 48px rgba(0, 0, 0, 0.45);
  animation: focus-stage-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
  color: var(--paper);
}

[data-focus-stage].is-focus-parked {
  position: fixed !important;
  inset: 3.25vh 3.5vw;
  z-index: 12046;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

[data-focus-stage].is-focus-on .talk-thread,
[data-focus-stage].is-focus-on .answer-panel-body,
[data-focus-stage].is-focus-on .code-editor-wrap,
[data-focus-stage].is-focus-on .rpg-run-body,
[data-focus-stage].is-focus-on .guide-answer-box,
[data-focus-stage].is-focus-on .answer-text {
  min-height: 0;
}

[data-focus-stage].is-focus-on .talk-thread,
[data-focus-stage].is-focus-on .rpg-run-body,
[data-focus-stage].is-focus-on .guide-answer-box {
  flex: 1 1 auto;
  overflow: auto;
}

/* Only the focused fold panel grows — Your / Suggested / Test cases */
[data-focus-stage="code"].is-focus-on > .code-fold-panel:not([hidden]),
[data-focus-stage="code"].is-focus-on > .code-fold-head + .code-fold-panel:not([hidden]),
[data-focus-stage="suggested"].is-focus-on > .code-fold-panel:not([hidden]),
[data-focus-stage="suggested"].is-focus-on > .code-fold-head + .code-fold-panel:not([hidden]),
[data-focus-stage="tests"].is-focus-on > .code-fold-panel:not([hidden]),
[data-focus-stage="tests"].is-focus-on > .code-fold-head + .code-fold-panel:not([hidden]) {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

[data-focus-stage].is-focus-on.answer-panel .answer-panel-body {
  flex: 1 1 auto;
  overflow: auto;
}

[data-focus-stage].is-focus-on.answer-panel .answer-panel-input {
  min-height: min(58vh, 28rem);
}

/* Live editor focus — fill the stage so the bottom does not look cut off */
[data-focus-stage].is-focus-on.code-box:not([data-code-fold]),
[data-focus-stage].is-focus-on#code-box-root:not([data-code-fold]) {
  display: flex !important;
  flex-direction: column;
  height: calc(100vh - 6.5vh) !important;
  max-height: calc(100vh - 6.5vh) !important;
  background: rgba(12, 14, 16, 0.96) !important;
  border: 1px solid rgba(232, 239, 233, 0.18) !important;
  border-radius: var(--frame-radius) !important;
  color: var(--paper);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45) !important;
  overflow: hidden;
}

[data-focus-stage].is-focus-on.code-box:not([data-code-fold]) > .code-box-bar,
[data-focus-stage].is-focus-on#code-box-root:not([data-code-fold]) > .code-box-bar,
[data-focus-stage].is-focus-on.code-box:not([data-code-fold]) > .code-packages-note,
[data-focus-stage].is-focus-on#code-box-root:not([data-code-fold]) > .code-packages-note {
  flex: 0 0 auto;
}

[data-focus-stage].is-focus-on.code-box:not([data-code-fold]) > .code-editor-wrap,
[data-focus-stage].is-focus-on#code-box-root:not([data-code-fold]) > .code-editor-wrap {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #0c0e10;
  border-top: 1px solid rgba(232, 239, 233, 0.1);
}

[data-focus-stage].is-focus-on.code-box:not([data-code-fold]) > .code-run-panel:not([hidden]),
[data-focus-stage].is-focus-on#code-box-root:not([data-code-fold]) > .code-run-panel:not([hidden]) {
  flex: 0 1 auto;
  max-height: min(36vh, 18rem);
  overflow: auto;
  border-top: 1px solid rgba(232, 239, 233, 0.14);
}

[data-focus-stage].is-focus-on .code-editor-wrap .CodeMirror,
[data-focus-stage].is-focus-on#code-box-root .CodeMirror {
  flex: 1 1 auto;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  border: none;
  border-radius: 0;
}

[data-focus-stage].is-focus-on .code-editor-wrap .CodeMirror-scroll {
  min-height: 100%;
}

[data-focus-stage].is-focus-on .code-editor-wrap .CodeMirror-gutters {
  min-height: 100%;
}

/*
 * Focused Your / Suggested / Test-cases folds: outer stage uses code panel colors;
 * inside keeps original 3D toggle + sao code plate.
 */
[data-focus-stage="code"].is-focus-on[data-code-fold],
[data-focus-stage="suggested"].is-focus-on[data-code-fold],
[data-focus-stage="tests"].is-focus-on[data-code-fold] {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.55rem !important;
  padding: clamp(0.7rem, 1.7vh, 1.05rem) clamp(0.75rem, 1.6vw, 1.15rem)
    clamp(0.75rem, 1.8vh, 1.15rem) !important;
  background: var(--sao-panel-face);
  border: 1px solid var(--sao-code-border) !important;
  color: var(--sao-code-text);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.45),
    0 18px 48px rgba(0, 0, 0, 0.45) !important;
}

[data-focus-stage="code"].is-focus-on[data-code-fold] > .code-fold-head,
[data-focus-stage="suggested"].is-focus-on[data-code-fold] > .code-fold-head,
[data-focus-stage="tests"].is-focus-on[data-code-fold] > .code-fold-head {
  gap: 0.45rem;
}

[data-focus-stage="code"].is-focus-on[data-code-fold] > .code-fold-head > .code-fold-toggle,
[data-focus-stage="suggested"].is-focus-on[data-code-fold] > .code-fold-head > .code-fold-toggle,
[data-focus-stage="tests"].is-focus-on[data-code-fold] > .code-fold-head > .code-fold-toggle {
  width: 100%;
  border-radius: 3px;
}

[data-focus-stage="code"].is-focus-on[data-code-fold] > .code-fold-panel,
[data-focus-stage="suggested"].is-focus-on[data-code-fold] > .code-fold-panel,
[data-focus-stage="tests"].is-focus-on[data-code-fold] > .code-fold-panel {
  margin: 0;
  min-height: 0;
  height: 100%;
  max-height: none;
  overflow: auto;
  border: 1px solid var(--sao-code-border);
  border-radius: 3px;
  background: var(--sao-code-face);
  color: var(--sao-code-text);
  box-shadow: inset 0 1px 0 rgba(201, 165, 116, 0.06);
  padding: 0.75rem 0.85rem;
  padding-inline-end: calc(0.85rem + var(--scroll-clear));
}

[data-focus-stage="code"].is-focus-on[data-code-fold] .code-text,
[data-focus-stage="code"].is-focus-on[data-code-fold] pre,
[data-focus-stage="suggested"].is-focus-on[data-code-fold] .code-text,
[data-focus-stage="suggested"].is-focus-on[data-code-fold] pre,
[data-focus-stage="suggested"].is-focus-on[data-code-fold] .latex-code-box,
[data-focus-stage="tests"].is-focus-on[data-code-fold] .code-text,
[data-focus-stage="tests"].is-focus-on[data-code-fold] pre {
  margin: 0;
  border: none;
  background: transparent;
  color: var(--sao-code-text);
  font-size: clamp(0.98rem, 1.35vw, 1.12rem);
  line-height: 1.55;
}

[data-focus-stage="tests"].is-focus-on[data-code-fold] .coding-review-list {
  margin: 0;
  padding: 0.15rem 0 0.35rem;
  gap: 0.85rem;
}

[data-focus-stage="tests"].is-focus-on[data-code-fold] .coding-review-card,
[data-focus-stage="tests"].is-focus-on[data-code-fold] .code-sample-card {
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
}

/* Guidance / Your run — navy panel colors from docked rail */
[data-focus-stage].is-focus-on.guide-split-panel,
[data-focus-stage="guidance"].is-focus-on,
[data-focus-stage="run"].is-focus-on {
  padding: 0 !important;
  background: linear-gradient(180deg, #1e2a3c 0%, #162033 48%, #121a28 100%) !important;
  border: 1px solid rgba(168, 134, 92, 0.35) !important;
  box-shadow:
    inset 3px 0 0 rgba(168, 134, 92, 0.55),
    0 12px 28px rgba(0, 0, 0, 0.45) !important;
  color: var(--paper);
}

[data-focus-stage].is-focus-on .guide-split-panel-head,
[data-focus-stage="guidance"].is-focus-on > .guide-split-panel-head,
[data-focus-stage="run"].is-focus-on > .guide-split-panel-head {
  position: static;
  margin: 0;
  padding: 1.05rem 1.35rem 0.95rem;
  border-bottom: 1px solid rgba(168, 134, 92, 0.35);
  background: #1e2a3c;
}

[data-focus-stage].is-focus-on .guide-split-panel-head .section-title,
[data-focus-stage="guidance"].is-focus-on > .guide-split-panel-head .section-title,
[data-focus-stage="run"].is-focus-on > .guide-split-panel-head .section-title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--paper);
}

/* Fullscreen = focus mode only — Hide belongs to the docked rail, not the reading stage */
[data-focus-stage].is-focus-on .guide-split-hide,
[data-focus-stage].is-focus-on [data-guide-toggle].guide-split-hide,
[data-focus-stage].is-focus-on [data-run-toggle].guide-split-hide {
  display: none !important;
}

/* Question / answer / guidance — layout shared; colors match 未放大前 */
[data-focus-stage="guidance"].is-focus-on,
[data-focus-stage="question"].is-focus-on,
[data-focus-stage="answer"].is-focus-on {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 0 !important;
  gap: 0 !important;
}

/* Answer focus includes translucent question peek row */
[data-focus-stage="answer"].is-focus-on:has(> .focus-question-peek) {
  grid-template-rows: auto auto minmax(0, 1fr);
}

/* Question — green-tint frame face from .question-box (dossier / done) */
[data-focus-stage="question"].is-focus-on {
  background:
    linear-gradient(180deg, rgba(196, 210, 198, 0.14) 0%, rgba(0, 0, 0, 0.32) 100%) !important;
  border: 1px solid var(--frame-edge) !important;
  border-bottom: var(--frame-bevel) solid var(--frame-lip) !important;
  border-radius: var(--frame-radius) !important;
  box-shadow: var(--frame-shadow-3d), 0 18px 48px rgba(0, 0, 0, 0.45) !important;
  color: var(--paper-dim);
}

/* Answer — frame-face from .answer-box (dossier / done) */
[data-focus-stage="answer"].is-focus-on {
  background: var(--frame-face) !important;
  border: 1px solid var(--frame-edge) !important;
  border-bottom: var(--frame-bevel) solid var(--frame-lip) !important;
  border-radius: var(--frame-radius) !important;
  box-shadow: var(--frame-shadow-3d), 0 18px 48px rgba(0, 0, 0, 0.45) !important;
  color: var(--paper);
}

/* Your run Q/A — cool slate / warm gold from .run-split-panel (stamped before reparent) */
[data-focus-stage="question"].is-focus-on[data-focus-chrome="run-qa"] {
  background:
    linear-gradient(180deg, rgba(120, 158, 186, 0.18) 0%, rgba(8, 14, 24, 0.82) 100%) !important;
  border: 1px solid rgba(140, 175, 205, 0.38) !important;
  border-left: 3px solid rgba(150, 185, 215, 0.78) !important;
  border-bottom: var(--frame-bevel) solid rgba(0, 0, 0, 0.55) !important;
  box-shadow: var(--frame-shadow-3d), 0 18px 48px rgba(0, 0, 0, 0.45) !important;
  color: var(--paper);
}

[data-focus-stage="answer"].is-focus-on[data-focus-chrome="run-qa"] {
  background:
    linear-gradient(180deg, rgba(168, 134, 92, 0.14) 0%, rgba(10, 14, 12, 0.86) 100%) !important;
  border: 1px solid rgba(168, 134, 92, 0.42) !important;
  border-left: 3px solid rgba(168, 134, 92, 0.72) !important;
  border-bottom: var(--frame-bevel) solid rgba(0, 0, 0, 0.55) !important;
  box-shadow: var(--frame-shadow-3d), 0 18px 48px rgba(0, 0, 0, 0.45) !important;
  color: var(--paper);
}

[data-focus-stage="question"].is-focus-on > .focus-stage-head,
[data-focus-stage="answer"].is-focus-on > .answer-box-head,
[data-focus-stage="question"].is-focus-on > .talk-panel-head,
[data-focus-stage="answer"].is-focus-on > .talk-panel-head,
[data-focus-stage="answer"].is-focus-on > .answer-panel-head {
  margin: 0;
  padding: 1.05rem 1.35rem 0.95rem;
  border-bottom: 1px solid rgba(232, 239, 233, 0.14);
  background: transparent;
  border-radius: 0;
}

[data-focus-stage="question"].is-focus-on > .focus-stage-head .section-title,
[data-focus-stage="answer"].is-focus-on > .answer-box-head .section-title,
[data-focus-stage="question"].is-focus-on .speech-role,
[data-focus-stage="answer"].is-focus-on .answer-panel-label {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(168, 134, 92, 0.85);
}

/* Live interview — same surfaces as docked .talk-panel / .answer-panel */
[data-focus-stage="question"].is-focus-on.question-panel {
  background: rgba(0, 0, 0, 0.22) !important;
  border: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45) !important;
  color: var(--paper);
}

[data-focus-stage="answer"].is-focus-on.answer-panel {
  background: rgba(8, 10, 12, 0.72) !important;
  border: 1px solid rgba(232, 239, 233, 0.2) !important;
  border-bottom: 1px solid rgba(232, 239, 233, 0.2) !important;
  border-radius: 0 !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45) !important;
  color: var(--paper);
}

[data-focus-stage="question"].is-focus-on.question-panel > .talk-panel-head {
  background: rgba(28, 30, 34, 0.55);
  border-bottom: 1px solid var(--line);
}

[data-focus-stage="question"].is-focus-on .question-lang-tags .tag-coding-lang {
  font-size: 0.68rem;
}

[data-focus-stage="answer"].is-focus-on.answer-panel > .answer-panel-head {
  background: linear-gradient(180deg, rgba(36, 40, 44, 0.95), rgba(22, 24, 28, 0.92));
  border-bottom: 1px solid rgba(168, 134, 92, 0.35);
}

[data-focus-stage="answer"].is-focus-on.answer-panel .answer-panel-label {
  color: #f2f4f6;
  letter-spacing: 0.16em;
}

/* Gutter between outer 框 and inner 框 */
[data-focus-stage="guidance"].is-focus-on > .guide-answer-box {
  display: grid;
  align-content: stretch;
  justify-items: stretch;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: clamp(0.65rem, 1.6vh, 1rem) clamp(0.7rem, 1.5vw, 1.15rem)
    clamp(0.75rem, 1.8vh, 1.15rem);
  overflow: auto;
  background: transparent;
  border: none;
  box-shadow: none;
  scrollbar-gutter: stable;
  box-sizing: border-box;
}

/* Inner plates — same face colors as docked content */
[data-focus-stage="guidance"].is-focus-on > .guide-answer-box > .latex-body {
  flex: unset;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 100%;
  margin: 0;
  padding: clamp(1.5rem, 3.6vh, 2.4rem) clamp(1.55rem, 3.6vw, 2.85rem)
    clamp(1.7rem, 3.8vh, 2.55rem);
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(168, 134, 92, 0.28);
  border-radius: 3px;
  background: rgba(12, 18, 28, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  box-sizing: border-box;
  color: var(--paper);
  font-family: var(--font-body);
  font-size: clamp(1.28rem, 2.15vw, 1.72rem);
  font-weight: 400;
  line-height: 1.78;
  letter-spacing: 0.01em;
  overflow-wrap: break-word;
  white-space: normal;
}

[data-focus-stage="question"].is-focus-on > .latex-body {
  flex: unset;
  display: block;
  width: auto;
  max-width: none;
  min-height: calc(
    100% - clamp(0.65rem, 1.6vh, 1rem) - clamp(0.75rem, 1.8vh, 1.15rem)
  );
  margin: clamp(0.65rem, 1.6vh, 1rem) clamp(0.7rem, 1.5vw, 1.15rem)
    clamp(0.75rem, 1.8vh, 1.15rem);
  padding: clamp(1.35rem, 3.2vh, 2.15rem) clamp(1.4rem, 3.4vw, 2.6rem)
    clamp(1.5rem, 3.5vh, 2.35rem);
  overflow: auto;
  border: 1px solid rgba(232, 239, 233, 0.14);
  border-radius: var(--frame-radius);
  background: rgba(0, 0, 0, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  box-sizing: border-box;
  color: var(--paper);
  font-family: var(--font-body);
  font-size: clamp(1.28rem, 2.15vw, 1.72rem);
  font-weight: 400;
  line-height: 1.78;
  letter-spacing: 0.01em;
  overflow-wrap: break-word;
  white-space: normal;
}

[data-focus-stage="answer"].is-focus-on > .answer-text {
  flex: unset;
  display: block;
  width: auto;
  max-width: none;
  min-height: calc(
    100% - clamp(0.65rem, 1.6vh, 1rem) - clamp(0.75rem, 1.8vh, 1.15rem)
  );
  margin: clamp(0.65rem, 1.6vh, 1rem) clamp(0.7rem, 1.5vw, 1.15rem)
    clamp(0.75rem, 1.8vh, 1.15rem);
  padding: clamp(1.35rem, 3.2vh, 2.15rem) clamp(1.4rem, 3.4vw, 2.6rem)
    clamp(1.5rem, 3.5vh, 2.35rem);
  overflow: auto;
  border: 1px solid rgba(232, 239, 233, 0.14);
  border-radius: var(--frame-radius);
  background: rgba(0, 0, 0, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  box-sizing: border-box;
  color: var(--paper);
  font-family: var(--font-body);
  font-size: clamp(1.28rem, 2.15vw, 1.72rem);
  font-weight: 400;
  line-height: 1.72;
  letter-spacing: 0.01em;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}

[data-focus-stage="question"].is-focus-on[data-focus-chrome="run-qa"] > .latex-body {
  border-color: rgba(140, 175, 205, 0.32);
  background: rgba(8, 14, 24, 0.42);
}

[data-focus-stage="answer"].is-focus-on[data-focus-chrome="run-qa"] > .answer-text {
  border-color: rgba(168, 134, 92, 0.3);
  background: rgba(10, 14, 12, 0.4);
}

/* Keep Suggested Code inside the reading plate — open fold must not split the 框 */
[data-focus-stage="guidance"].is-focus-on .latex-suggested,
[data-focus-stage="guidance"].is-focus-on .latex-body [data-code-fold],
[data-focus-stage="question"].is-focus-on .latex-body [data-code-fold] {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-top: 1rem;
  margin-bottom: 1rem;
  overflow: visible;
  flex: none;
}

[data-focus-stage="guidance"].is-focus-on .latex-suggested > .code-fold-panel,
[data-focus-stage="guidance"].is-focus-on .latex-body [data-code-fold] > .code-fold-panel,
[data-focus-stage="question"].is-focus-on .latex-body [data-code-fold] > .code-fold-panel {
  flex: 0 1 auto !important;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  box-sizing: border-box;
}

[data-focus-stage="guidance"].is-focus-on .latex-suggested .latex-code-box,
[data-focus-stage="guidance"].is-focus-on .latex-suggested .code-text,
[data-focus-stage="guidance"].is-focus-on .latex-body pre,
[data-focus-stage="question"].is-focus-on .latex-body pre {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: auto;
  white-space: pre;
}

[data-focus-stage="guidance"].is-focus-on > .guide-answer-box > .latex-body p,
[data-focus-stage="guidance"].is-focus-on > .guide-answer-box > .latex-body .latex-para,
[data-focus-stage="question"].is-focus-on > .latex-body p,
[data-focus-stage="question"].is-focus-on > .latex-body .latex-para {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

[data-focus-stage="question"].is-focus-on > .latex-body {
  white-space: normal;
  line-height: 1.78;
}

[data-focus-stage="guidance"].is-focus-on > .guide-answer-box > .latex-body p,
[data-focus-stage="guidance"].is-focus-on > .guide-answer-box > .latex-body .latex-para,
[data-focus-stage="question"].is-focus-on > .latex-body p,
[data-focus-stage="question"].is-focus-on > .latex-body .latex-para {
  margin: 0 0 1.2em;
}

[data-focus-stage="guidance"].is-focus-on > .guide-answer-box > .latex-body p:last-child,
[data-focus-stage="guidance"].is-focus-on > .guide-answer-box > .latex-body .latex-para:last-child,
[data-focus-stage="question"].is-focus-on > .latex-body p:last-child,
[data-focus-stage="question"].is-focus-on > .latex-body .latex-para:last-child {
  margin-bottom: 0;
}

[data-focus-stage="guidance"].is-focus-on .latex-suggested,
[data-focus-stage="guidance"].is-focus-on .latex-body .latex-suggested,
[data-focus-stage="guidance"].is-focus-on .latex-body [data-code-fold].latex-suggested {
  margin: 1.35rem 0;
}

[data-focus-stage="guidance"].is-focus-on > .guide-answer-box .katex,
[data-focus-stage="question"].is-focus-on .katex {
  font-size: 1.08em;
  color: var(--paper);
}

[data-focus-stage="guidance"].is-focus-on > .guide-answer-box > .latex-body .katex-display,
[data-focus-stage="question"].is-focus-on > .latex-body .katex-display {
  display: block;
  margin: 1.55em auto;
  padding: 0.15em 0;
  text-align: center;
  overflow: visible;
  max-width: 100%;
  line-height: 1.55;
}

/* Live interview Q/A — inner plate fills the stage with a slim gap */
[data-focus-stage="question"].is-focus-on > .talk-thread,
[data-focus-stage="answer"].is-focus-on > .answer-panel-body {
  flex: unset;
  display: grid;
  align-content: stretch;
  height: auto;
  min-height: 0;
  margin: clamp(0.65rem, 1.6vh, 1rem) clamp(0.7rem, 1.5vw, 1.15rem)
    clamp(0.75rem, 1.8vh, 1.15rem);
  padding: clamp(1.1rem, 2.6vh, 1.75rem) clamp(1.15rem, 2.8vw, 2rem);
  overflow: auto;
  border: 1px solid rgba(232, 239, 233, 0.14);
  border-radius: var(--frame-radius);
  background: rgba(0, 0, 0, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  box-sizing: border-box;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1.7;
  color: var(--paper);
  scrollbar-gutter: stable;
}

[data-focus-stage="answer"].is-focus-on > .answer-panel-body {
  padding: clamp(0.85rem, 2vh, 1.25rem);
  background: transparent;
  border: none;
  box-shadow: none;
}

[data-focus-stage="answer"].is-focus-on .answer-panel-input {
  min-height: min(62vh, 32rem);
  font-size: clamp(1.18rem, 1.95vw, 1.48rem);
  line-height: 1.65;
  color: #e8eaed;
  background: #2a2d34;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  resize: none;
}

[data-focus-stage="answer"].is-focus-on .compose-save-note {
  font-size: 0.9rem;
  color: var(--paper-dim);
}

[data-focus-stage="question"].is-focus-on > .talk-thread .talk-msg-body,
[data-focus-stage="question"].is-focus-on > .talk-thread .latex-body {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

[data-focus-stage="run"].is-focus-on > .rpg-run-body {
  padding: 1rem clamp(1rem, 3vw, 1.75rem) 1.4rem;
  background: transparent;
  color: var(--paper);
}

/*
 * Focused Your run is reparented out of .guide-shell.is-run-open — nested Q/A
 * would fall back to dossier greens. Re-apply the docked run-rail chrome.
 */
[data-focus-stage="run"].is-focus-on .question-box:not(.is-focus-on) {
  background:
    linear-gradient(180deg, rgba(120, 158, 186, 0.18) 0%, rgba(8, 14, 24, 0.82) 100%) !important;
  border: 1px solid rgba(140, 175, 205, 0.38) !important;
  border-left: 3px solid rgba(150, 185, 215, 0.78) !important;
  border-bottom: var(--frame-bevel) solid rgba(0, 0, 0, 0.55) !important;
  border-radius: var(--frame-radius) !important;
  box-shadow: var(--frame-shadow-3d) !important;
  color: var(--paper);
}

[data-focus-stage="run"].is-focus-on .answer-box:not([data-code-fold]):not(.is-focus-on) {
  background:
    linear-gradient(180deg, rgba(168, 134, 92, 0.14) 0%, rgba(10, 14, 12, 0.86) 100%) !important;
  border: 1px solid rgba(168, 134, 92, 0.42) !important;
  border-left: 3px solid rgba(168, 134, 92, 0.72) !important;
  border-bottom: var(--frame-bevel) solid rgba(0, 0, 0, 0.55) !important;
  border-radius: var(--frame-radius) !important;
  box-shadow: var(--frame-shadow-3d) !important;
  color: var(--paper);
}

[data-focus-stage="run"].is-focus-on .code-box,
[data-focus-stage="run"].is-focus-on .code-box-readonly {
  background: transparent;
}

[data-focus-stage="run"].is-focus-on .code-box[data-code-fold],
[data-focus-stage="run"].is-focus-on .coding-review[data-code-fold] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.focus-stage-placeholder {
  visibility: hidden;
  pointer-events: none;
}

/* Translucent question strip while Answer / Code is focused */
.focus-question-peek {
  flex: 0 0 auto;
  position: relative;
  z-index: 4;
  margin: 0;
  padding: 0.55rem 0.85rem 0.65rem;
  max-height: min(26vh, 11.5rem);
  overflow: auto;
  border: none;
  border-bottom: 1px solid rgba(232, 239, 233, 0.12);
  background: rgba(10, 14, 20, 0.52);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: rgba(232, 239, 233, 0.82);
  scrollbar-gutter: stable;
}

.focus-question-peek-label {
  margin: 0 0 0.28rem;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(168, 134, 92, 0.78);
}

.focus-question-peek-body {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(0.88rem, 1.35vw, 1.02rem);
  font-weight: 400;
  line-height: 1.5;
  color: rgba(232, 239, 233, 0.78);
  overflow-wrap: anywhere;
}

.focus-question-peek-body .problem {
  margin: 0;
}

.focus-question-peek--with-hint {
  max-height: min(38vh, 16.5rem);
}

.focus-hint-peek-block {
  margin-top: 0.55rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(94, 168, 148, 0.28);
}

.focus-hint-peek-label {
  color: rgba(154, 212, 188, 0.92);
}

.focus-hint-peek-body {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(0.86rem, 1.3vw, 0.98rem);
  font-weight: 400;
  line-height: 1.5;
  color: rgba(200, 232, 216, 0.9);
  overflow-wrap: anywhere;
}

[data-focus-stage="answer"].is-focus-on > .focus-question-peek,
[data-focus-stage="code"].is-focus-on > .focus-question-peek {
  display: block;
}

/* Session / question clocks while Question, Answer, or Code is focused */
.focus-stage-timers {
  display: inline-flex;
  align-items: stretch;
  gap: 0.4rem;
  flex: 0 0 auto;
  margin-left: auto;
  margin-right: 0.35rem;
}

.code-box-tools > .focus-stage-timers {
  margin-left: 0;
  margin-right: 0.25rem;
}

.focus-stage-timer {
  display: grid;
  gap: 0.05rem;
  min-width: 3.6rem;
  padding: 0.22rem 0.45rem;
  border: 1px solid rgba(232, 239, 233, 0.16);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.38);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.focus-stage-timer-label {
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(232, 239, 233, 0.55);
  line-height: 1.1;
}

.focus-stage-timer-value {
  font-family: ui-monospace, "IBM Plex Mono", monospace;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--accent-hot);
  line-height: 1.15;
}

.focus-stage-timer-period {
  font-family: var(--font-body);
  font-size: 0.52rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(201, 165, 116, 0.78);
  line-height: 1.1;
  white-space: nowrap;
}

.focus-stage-timer--booking.is-urgent {
  border-color: rgba(232, 168, 156, 0.55);
}

.focus-stage-timer--booking.is-urgent .focus-stage-timer-value {
  color: #e8a89c;
}

.focus-stage-timer--booking.is-urgent .focus-stage-timer-period {
  color: rgba(232, 168, 156, 0.85);
}

.talk-panel-head:has(.focus-stage-timers),
.answer-panel-head:has(.focus-stage-timers) {
  gap: 0.45rem 0.65rem;
}

/* When Answer / Code is focused, keep compose body below the peek */
[data-focus-stage="answer"].is-focus-on > .answer-panel-body,
[data-focus-stage="code"].is-focus-on > .code-editor-wrap {
  position: relative;
  z-index: 1;
}

/* Bottom-right interviewer speech notices — chat-bubble toast */
.desk-notice-host {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  z-index: 12120;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.65rem;
  max-width: min(22rem, calc(100vw - 2rem));
  pointer-events: none;
}

.desk-notice.desk-notice--chat {
  position: relative;
  pointer-events: auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  gap: 0.55rem 0.65rem;
  width: min(22rem, calc(100vw - 2rem));
  padding: 0.55rem 2rem 0.55rem 0.55rem;
  border: 1px solid rgba(168, 134, 92, 0.18);
  border-radius: 14px;
  background: rgba(18, 20, 24, 0.94);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 28px rgba(0, 0, 0, 0.42);
  opacity: 0;
  transform: translateY(0.85rem) scale(0.98);
  transition:
    opacity 0.26s ease,
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.desk-notice.desk-notice--chat.is-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.desk-notice.desk-notice--chat.is-leaving {
  opacity: 0;
  transform: translateY(0.55rem) scale(0.98);
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
}

.desk-notice-avatar-wrap {
  position: relative;
  width: 2.55rem;
  height: 2.55rem;
  flex-shrink: 0;
  margin-bottom: 0.15rem;
}

.desk-notice-avatar {
  width: 2.55rem;
  height: 2.55rem;
  border-radius: 999px;
  display: block;
  object-fit: cover;
  object-position: center 18%;
  background: #2a2d34;
  border: 1px solid rgba(168, 134, 92, 0.32);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.desk-notice-avatar--letter {
  display: grid;
  place-items: center;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  color: #0e0f12;
  background: linear-gradient(145deg, #a8865c, #6e5840);
  border-color: rgba(168, 134, 92, 0.45);
}

.desk-notice-main {
  min-width: 0;
  display: grid;
  gap: 0.28rem;
}

.desk-notice-title {
  margin: 0;
  padding: 0 0.15rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.25;
  color: rgba(210, 200, 170, 0.72);
}

.desk-notice-title strong {
  font-weight: 600;
  color: rgba(232, 220, 186, 0.92);
}

.desk-notice-bubble {
  margin: 0;
  padding: 0.65rem 0.85rem;
  border-radius: 14px 14px 14px 5px;
  background: #2a2d34;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.28);
}

.desk-notice-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.18rem;
  font-weight: 500;
  line-height: 1.35;
  color: #e8eaed;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.desk-notice-time {
  margin: 0;
  padding: 0 0.15rem;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  color: rgba(168, 174, 182, 0.72);
}

.desk-notice.desk-notice--chat .desk-notice-close {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  width: 1.45rem;
  height: 1.45rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(58, 62, 70, 0.85);
  color: rgba(176, 182, 190, 0.9);
  font: inherit;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}

.desk-notice.desk-notice--chat .desk-notice-close:hover,
.desk-notice.desk-notice--chat .desk-notice-close:focus-visible {
  background: rgba(78, 84, 94, 0.95);
  color: #e8eaed;
  outline: none;
}

@keyframes focus-stage-in {
  from {
    opacity: 0.72;
    transform: translateY(10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes focus-stage-study-in {
  from {
    opacity: 0.72;
    transform: translate(-50%, -50%) translateY(10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .focus-stage-veil,
  [data-focus-stage].is-focus-on {
    animation: none;
    transition: none;
  }

  [data-focus-stage="study_body"].is-focus-on,
  [data-focus-stage="study_recall"].is-focus-on {
    transform: translate(-50%, -50%) !important;
  }
}

@media (max-width: 720px) {
  [data-focus-stage].is-focus-on {
    inset: 1.5vh 2.5vw;
    max-height: 97vh !important;
  }

  [data-focus-stage="study_body"].is-focus-on,
  [data-focus-stage="study_recall"].is-focus-on {
    inset: auto !important;
    top: 50% !important;
    left: 50% !important;
    width: calc(100vw - 1.25rem) !important;
    max-width: calc(100vw - 1.25rem) !important;
    transform: translate(-50%, -50%) !important;
  }

  [data-focus-stage="study_body"].is-focus-on,
  [data-focus-stage="study_recall"].is-focus-on {
    height: min(88vh, calc(100vh - 1.5rem)) !important;
    max-height: min(88vh, calc(100vh - 1.5rem)) !important;
  }
}

/* ── Study library (cube atlas) ──────────────────────────────────────────── */

.study-page main.portal-main,
.study-page main.study-main {
  max-width: none;
  width: 100%;
  /* Undo Main/Admin asymmetric 72→80rem frame — Study Hall is full-bleed centered */
  margin-left: 0;
  margin-right: 0;
  height: 100dvh;
  max-height: 100dvh;
  padding: 0 !important;
  overflow: hidden;
}

.study-page .sao-fx {
  opacity: 0.52;
}

/* Study Hall — night atmosphere with moonlight (replaces warm gold portal wash) */
.atmosphere--study-night {
  background: #010208;
  --scene-gradient:
    radial-gradient(ellipse 38% 32% at 76% 10%, rgba(185, 205, 255, 0.18), transparent 62%),
    radial-gradient(ellipse 22% 18% at 80% 7%, rgba(235, 242, 255, 0.1), transparent 58%),
    radial-gradient(ellipse 55% 42% at 50% 92%, rgba(18, 28, 52, 0.55), transparent 58%),
    radial-gradient(ellipse 38% 30% at 10% 75%, rgba(12, 18, 36, 0.45), transparent 55%),
    linear-gradient(180deg, #03050e 0%, #020308 46%, #010205 100%);
}

.atmosphere--study-night::after {
  opacity: 0.03;
}

.study-page .study-atlas::before {
  content: "";
  position: fixed;
  top: clamp(3.5rem, 8vh, 5.5rem);
  right: clamp(2.5rem, 9vw, 7rem);
  width: clamp(3.2rem, 6.5vw, 5.2rem);
  height: clamp(3.2rem, 6.5vw, 5.2rem);
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 38% 36%,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(228, 236, 255, 0.62) 22%,
      rgba(170, 190, 235, 0.16) 48%,
      transparent 72%
    );
  box-shadow:
    0 0 28px rgba(200, 215, 255, 0.28),
    0 0 72px rgba(140, 165, 230, 0.16),
    0 0 180px rgba(90, 115, 190, 0.1);
  pointer-events: none;
  z-index: 0;
  opacity: 0.82;
}

.study-page .study-atlas::after {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 85% 55% at 72% 6%, rgba(130, 155, 215, 0.14), transparent 58%),
    radial-gradient(ellipse 65% 45% at 50% 100%, rgba(16, 24, 46, 0.42), transparent 62%),
    linear-gradient(180deg, transparent 55%, rgba(4, 8, 18, 0.55) 100%);
  pointer-events: none;
  z-index: 0;
}

/* SAO HUD lines — cool moonlit silver instead of gold */
.study-page .sao-fx-ring {
  border-color: rgba(130, 155, 210, 0.2);
  box-shadow: 0 0 20px rgba(100, 130, 200, 0.08);
}

.study-page .sao-fx-ring--b {
  border-color: rgba(110, 135, 190, 0.16);
}

.study-page .sao-fx-ring--c {
  border-color: rgba(130, 155, 210, 0.12);
}

.study-page .sao-fx-ring--d {
  border-color: rgba(120, 145, 200, 0.1);
}

.study-page .sao-fx-cross::before,
.study-page .sao-fx-cross::after {
  background: rgba(140, 165, 215, 0.22);
}

.study-page .sao-fx-cross {
  opacity: 0.28;
}

.study-page .sao-fx-beam {
  background: linear-gradient(
    90deg,
    rgba(180, 200, 255, 0.35),
    rgba(130, 155, 210, 0.1),
    transparent
  );
  opacity: 0.18;
}

.study-page .sao-fx-beam--2 {
  opacity: 0.12;
}

.study-page .sao-fx-grid {
  background-image:
    linear-gradient(rgba(90, 115, 170, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90, 115, 170, 0.1) 1px, transparent 1px);
  opacity: 0.45;
}

.study-page .sao-fx-bracket {
  border-color: rgba(150, 175, 225, 0.32);
  opacity: 0.42;
}

.study-page .sao-fx-line {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(150, 175, 225, 0.45),
    transparent
  );
}

.study-page .sao-fx-hex {
  border-color: rgba(120, 145, 200, 0.28);
  background: rgba(80, 100, 160, 0.06);
}

.study-page .sao-fx-mote {
  background: rgba(160, 185, 235, 0.45);
  box-shadow: 0 0 10px rgba(130, 155, 210, 0.28);
}

.study-page .sao-fx-mote--bright {
  background: rgba(210, 225, 255, 0.75);
  box-shadow: 0 0 14px rgba(160, 185, 235, 0.4);
}

.study-page .sao-fx-core {
  background: radial-gradient(
    circle,
    rgba(180, 200, 255, 0.28) 0%,
    rgba(100, 130, 190, 0.1) 35%,
    transparent 70%
  );
}

.study-page main.study-main {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  min-height: 100dvh;
  height: 100dvh;
  box-sizing: border-box;
  padding: 0 !important;
}

/* Hide atlas until study.js applies URL state — prevents home-cube flash on refresh */
.study-page.study-boot .study-atlas,
.study-page.study-direct-boot .study-atlas {
  visibility: hidden;
}

.study-page.study-direct-boot .study-reader-overlay {
  visibility: hidden;
}

body.study-direct-boot.study-reader-open .study-reader-overlay {
  visibility: visible;
}

.study-library {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  max-height: 100%;
}

.study-atlas {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.study-home-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.1rem, 2.8vh, 1.85rem);
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  box-sizing: border-box;
  padding:
    clamp(4rem, 9vh, 6rem)
    clamp(1.5rem, 4vw, 3rem)
    clamp(3.5rem, 10vh, 6rem);
}

.study-home-stage[hidden] {
  display: none !important;
}

.study-home-head {
  display: grid;
  justify-items: center;
  flex: 0 0 auto;
  width: 100%;
  max-width: 42rem;
}

.study-home-copy {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 0.35rem;
  justify-items: center;
  width: 100%;
  max-width: 42rem;
}

.study-home-kicker,
.study-drill-kicker {
  position: relative;
  padding: 0 1.35rem;
}

.study-home-kicker::before,
.study-home-kicker::after,
.study-drill-kicker::before,
.study-drill-kicker::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 1.6rem;
  height: 1px;
  background: currentColor;
  opacity: 0.42;
  transform: translateY(-50%);
}

.study-home-kicker::before,
.study-drill-kicker::before {
  right: 100%;
}

.study-home-kicker::after,
.study-drill-kicker::after {
  left: 100%;
}

.study-home-kicker {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-herald);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(185, 205, 255, 0.88);
}

.study-home-title {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  line-height: 1.2;
  color: var(--paper);
  text-align: center;
}

.study-home-lede {
  margin: 0;
  max-width: 38rem;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--paper-dim);
  text-align: center;
}

.study-cube-field {
  flex: 0 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(2.2rem, 7vw, 5.5rem);
  width: 100%;
  min-height: 0;
  /* Symmetric inset — cubes sit at viewport center between TL / BR SAO brackets */
  padding:
    clamp(4.5rem, 11vh, 7rem)
    clamp(3.5rem, 8vw, 7rem)
    clamp(5rem, 13vh, 7.5rem);
  box-sizing: border-box;
}

.study-home-stage .study-cube-field {
  padding: 0.35rem clamp(2rem, 6vw, 5rem) 0;
}

.study-cube-field[hidden] {
  display: none !important;
}

.study-cube-pod {
  max-width: min(18rem, 42vw);
  padding: 0.5rem 0.35rem 0.2rem;
  transform-style: preserve-3d;
}

.study-cube-pod .study-cube-gem,
.study-cube-pod .study-cube-float,
.study-cube-pod .study-cube-perspect,
.study-cube-pod .study-cube-scene,
.study-cube-pod .study-cube-spin-stage,
.study-cube-pod .study-cube-box {
  transform-style: preserve-3d;
}

/* Study Hall labels — tome plaque (not crystal pedestal clip) */
.study-cube-label {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  width: 100%;
  min-height: 4.1rem;
  padding: 0.72rem 0.9rem 0.62rem;
  isolation: isolate;
}

.study-cube-label-frame {
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid color-mix(in srgb, var(--ach-pod-ink, #42fff0) 48%, transparent);
  border-radius: 0;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--ach-pod-ink, #42fff0) 16%, transparent) 0,
      transparent 0.55rem
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--ach-pod-ink, #42fff0) 10%, transparent),
      rgba(4, 8, 14, 0.55) 42%,
      rgba(0, 0, 0, 0.72)
    ),
    var(--ach-pod-base, rgba(6, 68, 62, 0.55));
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.35),
    0 0 18px color-mix(in srgb, var(--ach-pod-glow, rgba(0, 255, 220, 0.4)) 28%, transparent),
    0 10px 22px rgba(0, 0, 0, 0.4);
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 0.7rem),
    calc(100% - 0.7rem) 100%,
    0 100%
  );
}

.study-cube-label-frame::before,
.study-cube-label-frame::after {
  content: "";
  position: absolute;
  width: 0.55rem;
  height: 0.55rem;
  border-color: color-mix(in srgb, var(--ach-pod-ink, #42fff0) 85%, #fff);
  border-style: solid;
  pointer-events: none;
}

.study-cube-label-frame::before {
  top: -1px;
  left: -1px;
  border-width: 2px 0 0 2px;
}

.study-cube-label-frame::after {
  top: -1px;
  right: -1px;
  border-width: 2px 2px 0 0;
}

.study-cube-label-name {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--font-herald);
  font-size: clamp(0.88rem, 1.35vw, 1.02rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
  color: color-mix(in srgb, var(--ach-pod-ink, #42fff0) 72%, #fff);
}

.study-cube-label-rule {
  position: relative;
  z-index: 1;
  display: block;
  width: min(78%, 9.5rem);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--ach-pod-ink, #42fff0) 70%, transparent) 18%,
    color-mix(in srgb, var(--ach-pod-ink, #42fff0) 70%, transparent) 82%,
    transparent
  );
  opacity: 0.85;
}

.study-cube-label-kicker {
  position: relative;
  z-index: 1;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  color: color-mix(in srgb, var(--ach-pod-ink, #42fff0) 55%, transparent);
}

.study-cube-pod:hover .study-cube-label-frame,
.study-cube-pod.is-hot .study-cube-label-frame,
.study-cube-pod.is-on .study-cube-label-frame {
  border-color: color-mix(in srgb, var(--ach-pod-ink, #42fff0) 78%, #fff);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.3),
    0 0 24px color-mix(in srgb, var(--ach-pod-glow, rgba(0, 255, 220, 0.4)) 45%, transparent),
    0 10px 22px rgba(0, 0, 0, 0.4);
}

.study-cube-gem {
  --study-cube-size: clamp(5.6rem, 9.5vw, 7.4rem);
  --study-cube-half: 3rem;
  position: relative;
  display: block;
  width: clamp(9.5rem, 16vw, 12.5rem);
  height: clamp(9.5rem, 16vw, 12.5rem);
}

.study-cube-gem.ach-jarvis-gem {
  display: block;
  width: clamp(9.5rem, 16vw, 12.5rem);
  height: clamp(9.5rem, 16vw, 12.5rem);
}

.study-cube-float {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.study-cube-perspect {
  position: absolute;
  left: 50%;
  top: 46%;
  z-index: 2;
  width: var(--study-cube-size);
  height: var(--study-cube-size);
  margin-left: calc(var(--study-cube-size) / -2);
  margin-top: calc(var(--study-cube-size) / -2);
  perspective: 820px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
}

.study-cube-scene {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.study-cube-spin-stage {
  position: absolute;
  inset: 0;
  display: block;
  transform-style: preserve-3d;
  transform-origin: center center;
  transform: rotateX(-22deg) rotateY(32deg);
}

.study-cube-box {
  position: absolute;
  inset: 0;
  display: block;
  transform-style: preserve-3d;
}

.study-cube-panel {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 1px solid color-mix(in srgb, var(--ach-pod-ink, #42fff0) 78%, #fff);
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--ach-pod-ink, #42fff0) 28%, transparent),
      color-mix(in srgb, var(--ach-pod-ink, #42fff0) 8%, transparent) 55%,
      rgba(0, 0, 0, 0.35)
    ),
    rgba(4, 8, 14, 0.42);
  box-shadow:
    inset 0 0 18px color-mix(in srgb, var(--ach-pod-glow, rgba(0, 255, 220, 0.4)) 35%, transparent),
    0 0 12px color-mix(in srgb, var(--ach-pod-glow, rgba(0, 255, 220, 0.4)) 40%, transparent);
  backface-visibility: visible;
}

.study-cube-panel::before {
  content: "";
  position: absolute;
  inset: 12%;
  border: 1px solid color-mix(in srgb, var(--ach-pod-ink, #42fff0) 35%, transparent);
  opacity: 0.55;
  pointer-events: none;
}

.study-cube-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      color-mix(in srgb, var(--ach-pod-ink, #42fff0) 18%, transparent) 48%,
      transparent 100%
    );
  opacity: 0.35;
  pointer-events: none;
  mix-blend-mode: screen;
}

.study-cube-panel--front  { transform: rotateY(0deg) translateZ(var(--study-cube-half)); }
.study-cube-panel--back   { transform: rotateY(180deg) translateZ(var(--study-cube-half)); }
.study-cube-panel--right  { transform: rotateY(90deg) translateZ(var(--study-cube-half)); }
.study-cube-panel--left   { transform: rotateY(-90deg) translateZ(var(--study-cube-half)); }
.study-cube-panel--top    { transform: rotateX(90deg) translateZ(var(--study-cube-half)); }
.study-cube-panel--bottom { transform: rotateX(-90deg) translateZ(var(--study-cube-half)); }

.study-cube-panel--top {
  background:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--ach-pod-ink, #42fff0) 42%, #fff),
      color-mix(in srgb, var(--ach-pod-ink, #42fff0) 12%, transparent)
    ),
    rgba(8, 10, 16, 0.5);
}

.study-cube-panel--bottom {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--ach-pod-ink, #42fff0) 10%, transparent),
      rgba(0, 0, 0, 0.55)
    );
}

.study-cube-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22%;
  height: 22%;
  margin: -11% 0 0 -11%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--ach-pod-ink, #42fff0) 95%, #fff) 0%,
    color-mix(in srgb, var(--ach-pod-glow, rgba(0, 255, 220, 0.6)) 55%, transparent) 55%,
    transparent 72%
  );
  box-shadow:
    0 0 16px var(--ach-pod-glow, rgba(0, 255, 220, 0.55)),
    0 0 28px var(--ach-pod-glow, rgba(0, 255, 220, 0.35));
  transform: translateZ(0);
  pointer-events: none;
}

.study-cube-gem .ach-jarvis-orbit {
  z-index: 1;
}

.study-cube-gem .ach-jarvis-gem-glow {
  z-index: 0;
  opacity: 0.78;
  height: 38%;
  filter: blur(8px);
}

.study-cube-gem .ach-jarvis-orbit--a {
  width: clamp(9.5rem, 16vw, 12.5rem);
  height: clamp(2.4rem, 4vw, 3.2rem);
  margin-left: calc(clamp(9.5rem, 16vw, 12.5rem) / -2);
  margin-top: calc(clamp(2.4rem, 4vw, 3.2rem) / -2);
}

.study-cube-gem .ach-jarvis-orbit--b {
  width: clamp(7rem, 12vw, 9.2rem);
  height: clamp(1.85rem, 3vw, 2.45rem);
  margin-left: calc(clamp(7rem, 12vw, 9.2rem) / -2);
  margin-top: calc(clamp(1.85rem, 3vw, 2.45rem) / -2);
}

.study-cube-gem .ach-jarvis-orbit--c {
  width: clamp(10.5rem, 17vw, 13.5rem);
  height: clamp(2.75rem, 4.5vw, 3.6rem);
  margin-left: calc(clamp(10.5rem, 17vw, 13.5rem) / -2);
  margin-top: calc(clamp(2.75rem, 4.5vw, 3.6rem) / -2);
}

/* Home realm only (Common / Technical) — larger cubes; drill grids unchanged */
.study-cube-field:not(.study-cube-field--drill) .study-cube-pod {
  max-width: min(22rem, 48vw);
}

.study-cube-field:not(.study-cube-field--drill) .study-cube-gem,
.study-cube-field:not(.study-cube-field--drill) .study-cube-gem.ach-jarvis-gem {
  --study-cube-size: clamp(7.4rem, 13.5vw, 10.2rem);
  --study-cube-half: clamp(3.4rem, 6.2vw, 4.7rem);
  width: clamp(12.5rem, 22vw, 17rem);
  height: clamp(12.5rem, 22vw, 17rem);
}

.study-cube-field:not(.study-cube-field--drill) .study-cube-gem .ach-jarvis-orbit--a {
  width: clamp(12.5rem, 22vw, 17rem);
  height: clamp(3.1rem, 5.2vw, 4.2rem);
  margin-left: calc(clamp(12.5rem, 22vw, 17rem) / -2);
  margin-top: calc(clamp(3.1rem, 5.2vw, 4.2rem) / -2);
}

.study-cube-field:not(.study-cube-field--drill) .study-cube-gem .ach-jarvis-orbit--b {
  width: clamp(9.2rem, 16vw, 12.5rem);
  height: clamp(2.4rem, 4vw, 3.2rem);
  margin-left: calc(clamp(9.2rem, 16vw, 12.5rem) / -2);
  margin-top: calc(clamp(2.4rem, 4vw, 3.2rem) / -2);
}

.study-cube-field:not(.study-cube-field--drill) .study-cube-gem .ach-jarvis-orbit--c {
  width: clamp(13.5rem, 23vw, 18.5rem);
  height: clamp(3.5rem, 5.8vw, 4.7rem);
  margin-left: calc(clamp(13.5rem, 23vw, 18.5rem) / -2);
  margin-top: calc(clamp(3.5rem, 5.8vw, 4.7rem) / -2);
}

.study-cube-pod--common {
  --ach-pod-ink: #ff4de8;
  --ach-pod-glow: rgba(255, 0, 200, 0.62);
  --ach-pod-base: rgba(72, 8, 64, 0.58);
}

.study-cube-pod--common .study-cube-label-name {
  color: #ffc2f5;
  text-shadow: 0 0 14px rgba(255, 60, 220, 0.4);
}

.study-cube-pod--common .study-cube-label-kicker {
  color: rgba(255, 160, 240, 0.7);
}

.study-cube-pod--technical {
  --ach-pod-ink: #42fff0;
  --ach-pod-glow: rgba(0, 255, 220, 0.58);
  --ach-pod-base: rgba(6, 68, 62, 0.55);
}

.study-cube-pod--technical .study-cube-label-name {
  color: #b8fff8;
  text-shadow: 0 0 14px rgba(0, 255, 220, 0.38);
}

.study-cube-pod--technical .study-cube-label-kicker {
  color: rgba(120, 255, 240, 0.7);
}

.study-cube-field:not(.study-cube-field--drill) .study-cube-pod--suggest {
  --ach-pod-ink: #f4f7fc;
  --ach-pod-glow: rgba(230, 238, 255, 0.62);
  --ach-pod-base: rgba(160, 175, 200, 0.28);
}

.study-cube-pod--suggest .study-cube-label-name {
  color: #f4f7fc;
  text-shadow: 0 0 14px rgba(230, 238, 255, 0.45);
}

.study-cube-pod--suggest .study-cube-label-kicker {
  color: rgba(220, 228, 240, 0.72);
}

.study-cube-pod--suggest,
a.study-suggest-cube,
button.study-suggest-cube {
  --ach-pod-ink: #f4f7fc;
  --ach-pod-glow: rgba(230, 238, 255, 0.62);
  --ach-pod-base: rgba(160, 175, 200, 0.28);
  text-decoration: none;
  color: inherit;
}

.study-cube-pod--suggest .study-cube-label-name,
a.study-suggest-cube .study-cube-label-name,
button.study-suggest-cube .study-cube-label-name {
  color: #f4f7fc;
  text-shadow: 0 0 14px rgba(230, 238, 255, 0.45);
}

.study-cube-pod--suggest .study-cube-label-kicker,
a.study-suggest-cube .study-cube-label-kicker,
button.study-suggest-cube .study-cube-label-kicker {
  color: rgba(220, 228, 240, 0.72);
}

a.study-suggest-cube,
button.study-suggest-cube {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  max-width: 11rem;
  padding: 0.15rem 0.2rem 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
}

.study-suggest-cube--sm {
  max-width: 6.4rem;
}

.study-suggest-cube--sm .study-cube-gem,
.study-suggest-cube--sm .study-cube-gem.ach-jarvis-gem {
  --study-cube-size: 3.35rem;
  --study-cube-half: 1.55rem;
  width: 5.35rem;
  height: 5.1rem;
}

.study-suggest-cube--sm .study-cube-perspect {
  top: 44%;
}

.study-suggest-cube--sm .study-cube-gem .ach-jarvis-orbit--a {
  width: 5.35rem;
  height: 1.35rem;
  margin-left: calc(5.35rem / -2);
  margin-top: calc(1.35rem / -2);
}

.study-suggest-cube--sm .study-cube-gem .ach-jarvis-orbit--b {
  width: 3.9rem;
  height: 1rem;
  margin-left: calc(3.9rem / -2);
  margin-top: calc(1rem / -2);
}

.study-suggest-cube--sm .study-cube-gem .ach-jarvis-orbit--c {
  width: 5.9rem;
  height: 1.55rem;
  margin-left: calc(5.9rem / -2);
  margin-top: calc(1.55rem / -2);
}

.study-suggest-cube--sm .study-cube-label {
  min-height: 2.85rem;
  padding: 0.4rem 0.42rem 0.35rem;
  gap: 0.18rem;
}

.study-suggest-cube--sm .study-cube-label-name {
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  line-height: 1.15;
}

.study-suggest-cube--sm .study-cube-label-kicker {
  font-size: 0.5rem;
  letter-spacing: 0.1em;
}

.study-suggest-cube--sm .study-cube-label-rule {
  width: min(86%, 5rem);
}

/* Training Tips picker — Study Hall night drill (done / details popup) */
.study-picker-panel {
  border: none;
  padding: 0;
  margin: 0;
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  color: var(--paper);
  background: transparent;
}

.study-picker-panel::backdrop {
  background: rgba(1, 2, 8, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.study-picker-atlas {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: #010208;
}

.study-picker-atlas::before {
  content: "";
  position: absolute;
  top: clamp(3.5rem, 8vh, 5.5rem);
  right: clamp(2.5rem, 9vw, 7rem);
  width: clamp(3.2rem, 6.5vw, 5.2rem);
  height: clamp(3.2rem, 6.5vw, 5.2rem);
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 38% 36%,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(228, 236, 255, 0.62) 22%,
      rgba(170, 190, 235, 0.16) 48%,
      transparent 72%
    );
  box-shadow:
    0 0 28px rgba(200, 215, 255, 0.28),
    0 0 72px rgba(140, 165, 230, 0.16),
    0 0 180px rgba(90, 115, 190, 0.1);
  pointer-events: none;
  z-index: 0;
  opacity: 0.82;
}

.study-picker-atlas::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 38% 32% at 76% 10%, rgba(185, 205, 255, 0.18), transparent 62%),
    radial-gradient(ellipse 55% 42% at 50% 92%, rgba(18, 28, 52, 0.55), transparent 58%),
    linear-gradient(180deg, #03050e 0%, #020308 46%, #010205 100%);
  pointer-events: none;
  z-index: 0;
}

.study-picker-panel .suggest-picker-drill {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  --study-drill-content-top: clamp(4.25rem, 10vh, 5.75rem);
}

.study-picker-panel .study-picker-close {
  --study-bracket-top: 8%;
  --study-bracket-left: 3%;
  --study-bracket-size: 4.5rem;
  --study-bracket-back-inset: 0.95rem;
  --study-bracket-back-gap: 0.05rem;
  --study-bracket-back-lift: 4rem;
  position: fixed;
  top: calc(
    var(--study-bracket-top) + var(--study-bracket-size) +
      var(--study-bracket-back-gap) - var(--study-bracket-back-lift)
  );
  left: calc(var(--study-bracket-left) + var(--study-bracket-back-inset));
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  margin: 0;
  padding: 0.38rem 0.72rem 0.38rem 0.48rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(235, 240, 250, 0.78);
  font-family: Inter, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: -0.011em;
  line-height: 1;
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
  transition:
    color 0.14s ease,
    background 0.14s ease,
    border-color 0.14s ease,
    box-shadow 0.14s ease;
}

.study-picker-panel .study-picker-close:hover,
.study-picker-panel .study-picker-close:focus-visible {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04);
  outline: none;
}

.study-picker-panel .study-picker-close:hover .study-drill-back-ico,
.study-picker-panel .study-picker-close:focus-visible .study-drill-back-ico {
  opacity: 1;
}

.study-picker-status {
  position: relative;
  z-index: 1;
  margin: 0.5rem auto 0;
  max-width: 38rem;
  padding: 0 1.25rem;
  color: rgba(210, 218, 232, 0.78);
  font-size: 0.92rem;
  text-align: center;
}

.study-picker-panel .suggest-picker-stage {
  margin-top: 0.15rem;
}

.study-picker-panel .study-columns--drill .study-tome-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-bottom: 0.15rem;
  min-height: 2.6rem;
}

.study-picker-panel .study-suggest-focus-qs {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.22rem;
  max-width: 72%;
  pointer-events: none;
}

.study-picker-panel .study-suggest-focus-q {
  padding: 0.08rem 0.38rem;
  border: 1px solid rgba(201, 165, 116, 0.38);
  border-radius: 2px;
  background: rgba(8, 10, 14, 0.72);
  color: rgba(201, 165, 116, 0.88);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .study-picker-panel .study-drill-stage {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .study-picker-panel .study-drill-cube {
    margin-top: 0;
    height: auto;
    min-height: 0;
  }

  .study-picker-panel .study-columns.study-columns--drill {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    height: auto;
    min-height: min(52vh, 28rem);
    max-height: min(62vh, 36rem);
  }
}

.rpg-result-log-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.rpg-result-log-head .section-title,
.rpg-result-log-head .rpg-hint {
  margin-bottom: 0;
}

.rpg-result-log-copy {
  min-width: 0;
  flex: 1;
}

/* Suggest mode: white chapter / focus rails (mixed source types) */
.study-drill--suggest {
  --ach-pod-ink: #f4f7fc;
  --ach-pod-glow: rgba(230, 238, 255, 0.62);
  --ach-pod-base: rgba(160, 175, 200, 0.28);
}

.study-drill--suggest .study-tome {
  --study-tome-ink: #f4f7fc;
  border-color: rgba(230, 238, 255, 0.22);
  color: rgba(236, 242, 250, 0.92);
}

.study-drill--suggest .study-tome.is-active {
  color: rgba(243, 223, 154, 0.98);
  border-color: rgba(201, 165, 116, 0.72);
  background:
    linear-gradient(180deg, rgba(201, 165, 116, 0.2), transparent 58%),
    rgba(201, 165, 116, 0.12);
  box-shadow:
    inset 0 0 0 1px rgba(201, 165, 116, 0.28),
    0 0 22px rgba(201, 165, 116, 0.16);
}

.study-drill--suggest .study-tome:hover,
.study-drill--suggest .study-tome:focus-visible {
  color: rgba(248, 250, 255, 0.96);
  border-color: rgba(255, 255, 255, 0.52);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 55%),
    rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 18px rgba(255, 255, 255, 0.08);
}

.study-drill--suggest .study-tome-title {
  color: #f4f7fc;
}

.study-drill--suggest .study-column--primary .study-tome-title {
  font-size: 1.12rem;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

.study-drill--suggest .study-column--primary .study-tome-sub {
  font-size: 0.8rem;
  line-height: 1.35;
  letter-spacing: 0.03em;
  color: rgba(220, 228, 240, 0.78);
}

.study-drill--suggest .study-column--primary .study-tome {
  padding: 0.72rem 0.75rem 0.68rem 0.55rem;
  gap: 0.55rem;
}

.study-drill--suggest .study-tome-sub,
.study-drill--suggest .study-column-kicker {
  color: rgba(210, 220, 235, 0.7);
}

.study-drill--suggest .study-tome-rail {
  background: linear-gradient(
    180deg,
    rgba(243, 223, 154, 0.98),
    rgba(168, 134, 92, 0.5) 90%
  );
  opacity: 1;
  box-shadow: 0 0 6px rgba(201, 165, 116, 0.28);
}

.study-drill--suggest .study-tome.is-active .study-tome-rail,
.study-drill--suggest .study-tome:hover .study-tome-rail,
.study-drill--suggest .study-tome:focus-visible .study-tome-rail {
  background: linear-gradient(
    180deg,
    #f3df9a,
    rgba(201, 165, 116, 0.72)
  );
  box-shadow: 0 0 10px rgba(201, 165, 116, 0.45);
}

.study-drill--suggest .study-tome:hover .study-tome-rail,
.study-drill--suggest .study-tome:focus-visible .study-tome-rail {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.62),
    rgba(255, 255, 255, 0.18) 92%
  );
  box-shadow: none;
}

.study-drill--suggest .study-tome.is-active .study-tome-title {
  color: rgba(243, 223, 154, 0.98);
}

.study-drill--suggest .study-tome.is-active .study-tome-sub {
  color: rgba(201, 165, 116, 0.78);
}

@media (prefers-reduced-motion: no-preference) {
  .study-cube-float {
    animation: study-cube-float 4.2s ease-in-out infinite;
  }

  .study-cube-spin-stage {
    animation: study-cube-rotate 12s linear infinite;
  }

  .study-cube-core {
    animation: ach-jarvis-core 2.2s ease-in-out infinite;
  }

  .study-cube-pod:nth-child(1) .study-cube-float {
    animation-delay: -0.6s;
  }

  .study-cube-pod:nth-child(2) .study-cube-float {
    animation-delay: -2.1s;
  }

  .study-cube-pod:nth-child(1) .study-cube-spin-stage {
    animation-duration: 12s;
    animation-delay: -1.2s;
  }

  .study-cube-pod:nth-child(2) .study-cube-spin-stage {
    animation-duration: 15s;
    animation-delay: -5.4s;
    animation-direction: reverse;
  }

  .study-cube-pod:hover .study-cube-spin-stage,
  .study-cube-pod.is-hot .study-cube-spin-stage,
  .study-cube-pod.is-on .study-cube-spin-stage {
    animation-duration: 6.5s;
  }

  .study-cube-pod:hover .ach-jarvis-orbit--a,
  .study-cube-pod.is-hot .ach-jarvis-orbit--a,
  .study-cube-pod.is-on .ach-jarvis-orbit--a {
    animation-duration: 4.5s;
  }
}

@keyframes study-cube-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.55rem); }
}

@keyframes study-cube-rotate {
  0% {
    transform: rotateX(-24deg) rotateY(0deg) rotateZ(0deg);
  }
  25% {
    transform: rotateX(-12deg) rotateY(90deg) rotateZ(4deg);
  }
  50% {
    transform: rotateX(-28deg) rotateY(180deg) rotateZ(0deg);
  }
  75% {
    transform: rotateX(-14deg) rotateY(270deg) rotateZ(-4deg);
  }
  100% {
    transform: rotateX(-24deg) rotateY(360deg) rotateZ(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .study-cube-float,
  .study-cube-spin-stage,
  .study-cube-core,
  .study-cube-gem .ach-jarvis-orbit--a,
  .study-cube-gem .ach-jarvis-orbit--b,
  .study-cube-gem .ach-jarvis-orbit--c {
    animation: none !important;
  }

  .study-cube-spin-stage {
    transform: rotateX(-24deg) rotateY(32deg);
  }
}

.study-drill {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1.15rem;
  min-height: 0;
  overflow: auto;
  --study-drill-content-top: clamp(5.75rem, 12vh, 7.25rem);
  --study-drill-head-kicker-h: 1.15rem;
  --study-drill-head-title-h: 2rem;
  --study-drill-head-lede-h: 2.65rem;
  --study-drill-head-gap: 0.35rem;
  /* Cube select pages — pull family grid closer to header */
  --study-drill-cubes-gap: 0.55rem;
  --study-drill-cubes-raise: 0.85rem;
  --study-drill-cubes-pad-top: 0.45rem;
  padding:
    var(--study-drill-content-top)
    clamp(1.25rem, 4vw, 2.5rem)
    clamp(2rem, 5vh, 3rem);
  text-align: center;
  --study-drill-ink: rgba(150, 175, 225, 0.85);
  --study-drill-hot: rgba(200, 215, 255, 0.95);
  --study-drill-line: rgba(130, 155, 210, 0.28);
  --study-drill-glow: rgba(120, 150, 220, 0.18);
}

.study-drill--common {
  --study-drill-ink: rgba(255, 140, 220, 0.85);
  --study-drill-hot: rgba(255, 190, 240, 0.95);
  --study-drill-line: rgba(255, 80, 200, 0.28);
  --study-drill-glow: rgba(255, 60, 200, 0.16);
}

.study-drill--technical {
  --study-drill-ink: rgba(100, 220, 210, 0.85);
  --study-drill-hot: rgba(170, 255, 245, 0.95);
  --study-drill-line: rgba(0, 220, 200, 0.28);
  --study-drill-glow: rgba(0, 220, 200, 0.14);
}

.study-drill:not(.study-drill--lists) {
  gap: var(--study-drill-cubes-gap);
  overflow: hidden;
  padding-bottom: 0;
}

.study-drill:not(.study-drill--lists) .study-drill-head {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}

.study-drill:not(.study-drill--lists) .study-cube-field--drill {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: clamp(2rem, 5vh, 3rem);
}

.study-drill[hidden] {
  display: none !important;
}

.study-drill-head {
  display: grid;
  gap: 0;
  justify-items: center;
  max-width: 42rem;
  flex: 0 0 auto;
  width: 100%;
  min-height: calc(
    var(--study-drill-head-kicker-h) + var(--study-drill-head-title-h) +
      var(--study-drill-head-lede-h) + 2 * var(--study-drill-head-gap)
  );
}

.study-drill-copy {
  display: grid;
  grid-template-rows:
    var(--study-drill-head-kicker-h)
    var(--study-drill-head-title-h)
    var(--study-drill-head-lede-h);
  gap: var(--study-drill-head-gap);
  justify-items: center;
  align-content: start;
  width: 100%;
  max-width: 42rem;
}

/* FAANG-style ghost control — below TL bracket, slightly inset right */
.study-page .study-drill-back {
  --study-bracket-top: 8%;
  --study-bracket-left: 3%;
  --study-bracket-size: 4.5rem;
  --study-bracket-back-inset: 0.95rem;
  --study-bracket-back-gap: 0.05rem;
  --study-bracket-back-lift: 4rem;
  position: fixed;
  top: calc(
    var(--study-bracket-top) + var(--study-bracket-size) +
      var(--study-bracket-back-gap) - var(--study-bracket-back-lift)
  );
  left: calc(var(--study-bracket-left) + var(--study-bracket-back-inset));
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  margin: 0;
  padding: 0.38rem 0.72rem 0.38rem 0.48rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(235, 240, 250, 0.78);
  font-family: Inter, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: -0.011em;
  line-height: 1;
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
  transition:
    color 0.14s ease,
    background 0.14s ease,
    border-color 0.14s ease,
    box-shadow 0.14s ease;
}

.study-drill-back-ico {
  width: 0.95rem;
  height: 0.95rem;
  flex: 0 0 auto;
  display: block;
  opacity: 0.72;
}

.study-drill-back-label {
  transform: translateY(0.5px);
}

.study-drill-back:hover,
.study-drill-back:focus-visible {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04);
  outline: none;
}

.study-drill-back:hover .study-drill-back-ico,
.study-drill-back:focus-visible .study-drill-back-ico {
  opacity: 1;
}

.study-drill-back:active {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

.study-drill-kicker {
  margin: 0;
  min-height: var(--study-drill-head-kicker-h);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-herald);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--study-drill-ink);
}

.study-drill-title {
  margin: 0;
  min-height: var(--study-drill-head-title-h);
  max-height: var(--study-drill-head-title-h);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  line-height: 1.2;
  color: var(--paper);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.study-drill-lede {
  margin: 0;
  min-height: var(--study-drill-head-lede-h);
  max-height: var(--study-drill-head-lede-h);
  max-width: 38rem;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--paper-dim);
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.study-cube-field--drill {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  width: 100%;
  max-width: min(72rem, 100%);
  margin-top: calc(0.35rem - var(--study-drill-cubes-raise));
  padding: var(--study-drill-cubes-pad-top) 1rem 1.25rem;
  box-sizing: border-box;
}

/* Position families — fixed 3×2 grid (six families), original cube size */
.study-cube-field--drill[aria-label="Position families"] {
  display: grid;
  grid-template-columns: repeat(3, 13.5rem);
  justify-content: center;
  justify-items: stretch;
  align-items: start;
  column-gap: clamp(1.75rem, 4vw, 3.5rem);
  row-gap: clamp(1.75rem, 4vh, 2.75rem);
  max-width: min(52rem, 100%);
}

.study-cube-field--drill .study-cube-pod {
  width: 13.5rem;
  flex: 0 0 13.5rem;
  max-width: 13.5rem;
}

/* Common tracks (Career / Behavioral) — larger cubes only here */
.study-cube-field--drill[aria-label="Common tracks"] .study-cube-pod {
  width: 16rem;
  flex: 0 0 16rem;
  max-width: 16rem;
}

.study-cube-field--drill[aria-label="Position families"] .study-cube-pod {
  width: 100%;
  max-width: none;
  flex: unset;
}

.study-cube-field--drill .study-cube-label {
  width: 100%;
  box-sizing: border-box;
  height: 4.55rem;
  min-height: 4.55rem;
  max-height: 4.55rem;
  padding: 0.62rem 0.55rem 0.55rem;
  align-content: center;
  gap: 0.28rem;
}

.study-cube-field--drill .study-cube-label-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  width: 100%;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  line-height: 1.15;
  max-height: 2.3em;
}

.study-cube-field--drill .study-cube-label-kicker {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.52rem;
  letter-spacing: 0.1em;
}

/* Tech family grid — original gem size */
.study-cube-field--drill .study-cube-gem,
.study-cube-field--drill .study-cube-gem.ach-jarvis-gem {
  --study-cube-size: clamp(4.4rem, 7.5vw, 5.8rem);
  --study-cube-half: 2.4rem;
  width: clamp(7.5rem, 12vw, 9.5rem);
  height: clamp(7.5rem, 12vw, 9.5rem);
}

/* Common tracks only — larger gems */
.study-cube-field--drill[aria-label="Common tracks"] .study-cube-gem,
.study-cube-field--drill[aria-label="Common tracks"] .study-cube-gem.ach-jarvis-gem {
  --study-cube-size: clamp(6.6rem, 12vw, 9rem);
  --study-cube-half: clamp(3rem, 5.5vw, 4.2rem);
  width: clamp(11rem, 18vw, 14.5rem);
  height: clamp(11rem, 18vw, 14.5rem);
}

.study-cube-field--drill .study-cube-perspect {
  width: var(--study-cube-size);
  height: var(--study-cube-size);
  margin-left: calc(var(--study-cube-size) / -2);
  margin-top: calc(var(--study-cube-size) / -2);
}

.study-cube-pod--dyn .study-cube-label-name {
  color: color-mix(in srgb, var(--ach-pod-ink) 70%, #fff);
  text-shadow: 0 0 12px color-mix(in srgb, var(--ach-pod-glow) 70%, transparent);
}

.study-cube-pod--dyn .study-cube-label-kicker {
  color: color-mix(in srgb, var(--ach-pod-ink) 58%, transparent);
}

.study-drill--lists {
  align-items: stretch;
  text-align: center;
  gap: 0.85rem;
  padding-top: var(--study-drill-content-top);
  padding-left: clamp(0.25rem, 1vw, 0.65rem);
  padding-right: clamp(1rem, 3vw, 2rem);
  /* Risk Management reference column width @ 1512px viewport → 26rem each */
  --study-list-col-w: clamp(22rem, 28vw, 26rem);
  --study-list-gap: clamp(0.85rem, 2vw, 1.35rem);
}

.study-drill--lists.study-drill--common,
.study-drill--lists.study-drill--technical {
  --study-drill-ink: color-mix(in srgb, var(--ach-pod-ink) 90%, #fff);
  --study-drill-hot: color-mix(in srgb, var(--ach-pod-ink) 72%, #fff);
  --study-drill-line: color-mix(in srgb, var(--ach-pod-ink) 44%, transparent);
  --study-drill-glow: var(--ach-pod-glow);
}

.study-drill--lists .study-drill-head {
  width: 100%;
  max-width: 42rem;
  margin-inline: auto;
}

.study-drill-stage {
  display: grid;
  grid-template-columns: clamp(13rem, 18vw, 17rem) minmax(0, 1fr);
  gap: clamp(0.85rem, 2vw, 1.75rem);
  width: 100%;
  max-width: min(96rem, 99vw);
  margin: 0.35rem 0 0;
  margin-right: auto;
  min-height: min(62vh, 36rem);
  align-items: stretch;
  flex: 1 1 auto;
  min-width: 0;
}

.study-columns.study-columns--drill.study-columns--history-only {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 1fr !important;
  width: 100% !important;
  max-width: 100% !important;
}

.study-columns--history-only > .study-column--primary {
  width: 100% !important;
  max-width: none !important;
  min-height: 0;
  height: 100%;
}

.study-drill-cube-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  min-width: 0;
  min-height: 0;
  height: 100%;
  align-self: stretch;
  margin-top: 5rem;
}

.study-drill-cube-stack:has(.study-history-star-filters:not([hidden])) {
  justify-content: flex-start;
}

.study-drill-cube-stack .study-drill-cube {
  flex: 0 0 auto;
  width: 100%;
}

.study-drill-cube-stack:has(.study-history-star-filters:not([hidden])) .study-drill-cube {
  height: auto;
  min-height: 0;
}

.study-history-star-filters {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.35rem;
  width: min(100%, 16.5rem);
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
}

.study-history-star-filters[hidden] {
  display: none !important;
}

.study-history-star-filter {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.35rem 0.7rem;
  border: 1px solid rgba(168, 134, 92, 0.32);
  border-radius: 3px;
  background: rgba(8, 9, 10, 0.72);
  color: rgba(232, 239, 233, 0.62);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  cursor: pointer;
  transition:
    color 0.12s ease,
    border-color 0.12s ease,
    background 0.12s ease;
}

.study-history-star-filter-ico {
  flex: 0 0 auto;
  font-size: 0.95rem;
  line-height: 1;
  color: rgba(201, 165, 116, 0.72);
}

.study-history-star-filter.is-active .study-history-star-filter-ico,
.study-history-star-filter:hover .study-history-star-filter-ico {
  color: #e8c06a;
}

.study-history-star-filter:hover,
.study-history-star-filter:focus-visible {
  color: rgba(232, 239, 233, 0.92);
  border-color: rgba(201, 165, 116, 0.55);
  outline: none;
}

.study-history-star-filter.is-active {
  color: #efe6c8;
  border-color: rgba(201, 165, 116, 0.72);
  background: rgba(201, 165, 116, 0.12);
}

.study-drill-stage[hidden] {
  display: none !important;
}

.study-drill-cube {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  height: 100%;
  padding-top: 0;
  margin-top: clamp(-3.5rem, -7vh, -2rem);
  margin-left: clamp(-0.35rem, -1vw, 0);
}

/* Common / Technical select-focus only — raise cube + 牌 (Suggested stays default). */
.study-drill--lists.study-drill--common .study-drill-cube,
.study-drill--lists.study-drill--technical .study-drill-cube {
  margin-top: calc(clamp(-3.5rem, -7vh, -2rem) - 15rem);
}

.study-drill-cube-anchor {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.75rem;
  width: min(100%, 16.5rem);
  pointer-events: none;
}

.study-drill-cube-anchor .study-cube-gem,
.study-drill-cube-anchor .study-cube-gem.ach-jarvis-gem {
  --study-cube-size: clamp(7.2rem, 13vw, 10rem);
  --study-cube-half: clamp(3.2rem, 5.8vw, 4.6rem);
  width: clamp(13rem, 22vw, 16.5rem);
  height: clamp(13rem, 22vw, 16.5rem);
}

.study-drill-cube-anchor .study-cube-perspect {
  width: var(--study-cube-size);
  height: var(--study-cube-size);
  margin-left: calc(var(--study-cube-size) / -2);
  margin-top: calc(var(--study-cube-size) / -2);
}

.study-drill-cube-anchor .ach-jarvis-orbit--a {
  width: clamp(13rem, 22vw, 16.5rem);
  height: clamp(3.2rem, 5.5vw, 4.6rem);
  margin-left: calc(clamp(13rem, 22vw, 16.5rem) / -2);
  margin-top: calc(clamp(3.2rem, 5.5vw, 4.6rem) / -2);
}

.study-drill-cube-anchor .ach-jarvis-orbit--b {
  width: clamp(9.5rem, 16vw, 12.5rem);
  height: clamp(2.4rem, 4vw, 3.4rem);
  margin-left: calc(clamp(9.5rem, 16vw, 12.5rem) / -2);
  margin-top: calc(clamp(2.4rem, 4vw, 3.4rem) / -2);
}

.study-drill-cube-anchor .ach-jarvis-orbit--c {
  width: clamp(14.5rem, 24vw, 18rem);
  height: clamp(3.6rem, 6vw, 5rem);
  margin-left: calc(clamp(14.5rem, 24vw, 18rem) / -2);
  margin-top: calc(clamp(3.6rem, 6vw, 5rem) / -2);
}

.study-drill-cube-anchor .study-cube-label {
  width: 100%;
  box-sizing: border-box;
  height: 4.55rem;
  min-height: 4.55rem;
  max-height: 4.55rem;
  padding: 0.62rem 0.55rem 0.55rem;
  align-content: center;
  gap: 0.28rem;
}

.study-drill-cube-anchor .study-cube-label-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  width: 100%;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  line-height: 1.15;
  max-height: 2.3em;
  color: color-mix(in srgb, var(--ach-pod-ink) 72%, #fff);
  text-shadow: 0 0 12px color-mix(in srgb, var(--ach-pod-glow) 55%, transparent);
}

.study-drill-cube-anchor .study-cube-label-kicker {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.52rem;
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--ach-pod-ink) 58%, transparent);
}

.study-column--idle .study-column-list {
  display: flex;
  align-items: center;
  justify-content: center;
}

.study-column-empty {
  margin: 0;
  padding: 1.25rem 0.85rem;
  font-size: 0.82rem;
  line-height: 1.45;
  text-align: center;
  color: color-mix(in srgb, var(--study-drill-ink) 55%, transparent);
}

.study-column-kicker,
.study-catalog-kicker,
.study-reader-kicker {
  margin: 0;
  font-family: var(--font-herald);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
}

.study-shelf-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--accent-hot);
  letter-spacing: 0.04em;
}

.study-shelf-user {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  color: var(--paper-dim);
  word-break: break-all;
}

.study-shelf-nav {
  display: grid;
  gap: 0.35rem;
}

.study-shelf-btn {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.5rem;
  align-items: center;
  width: 100%;
  padding: 0.68rem 0.65rem;
  border: 1px solid rgba(168, 134, 92, 0.2);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.28);
  color: var(--paper-dim);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease;
}

.study-shelf-btn:hover {
  color: var(--paper);
  border-color: rgba(201, 165, 116, 0.42);
  background: rgba(201, 165, 116, 0.08);
}

.study-shelf-btn.is-active {
  color: var(--accent-hot);
  border-color: rgba(201, 165, 116, 0.65);
  background: linear-gradient(90deg, rgba(201, 165, 116, 0.16), rgba(0, 0, 0, 0.2));
  box-shadow: inset 3px 0 0 var(--accent-hot);
}

.study-shelf-idx {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.68rem;
  color: var(--accent);
}

.study-shelf-label {
  font-weight: 600;
  font-size: 0.88rem;
}

.study-columns {
  display: flex;
  gap: 0.75rem;
  flex: 0 1 auto;
  width: max-content;
  max-width: 100%;
  height: min(52vh, 28rem);
  min-height: 14rem;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 0.25rem;
  scroll-snap-type: x proximity;
}

/* Drill list stage — fixed equal 框 (Risk Management reference width for every family / track) */
.study-columns.study-columns--drill {
  display: grid !important;
  grid-template-columns: var(--study-list-col-w) var(--study-list-col-w) !important;
  grid-template-rows: 1fr;
  gap: var(--study-list-gap);
  flex: 0 0 auto;
  width: calc(2 * var(--study-list-col-w) + var(--study-list-gap)) !important;
  max-width: 100%;
  min-width: 0;
  height: min(62vh, 36rem);
  min-height: min(62vh, 36rem);
  max-height: min(62vh, 36rem);
  margin: 0;
  padding: 0;
  overflow: hidden;
  align-items: stretch;
  justify-content: start;
  box-sizing: border-box;
  scroll-snap-type: none;
}

.study-drill-stage > .study-columns.study-columns--drill {
  min-width: 0;
  max-width: 100%;
  align-self: stretch;
  justify-self: start;
}

.study-column {
  flex: 0 0 clamp(13.5rem, 16vw, 17.5rem);
  min-width: 13rem;
  min-height: 0;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(168, 134, 92, 0.24);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 28%),
    rgba(0, 0, 0, 0.16);
  scroll-snap-align: start;
}

.study-columns.study-columns--drill > .study-column {
  flex: unset !important;
  flex-basis: unset !important;
  width: var(--study-list-col-w) !important;
  min-width: 0 !important;
  max-width: var(--study-list-col-w) !important;
  height: 100%;
  min-height: 0;
  max-height: none;
  align-self: stretch;
  box-sizing: border-box;
  overflow: hidden;
}

.study-columns.study-columns--drill .study-column-kicker {
  box-sizing: border-box;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}

.study-columns.study-columns--drill .study-column-list {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
}

.study-column-kicker {
  margin: 0;
  padding: 0.55rem 0.65rem 0.45rem;
  font-family: var(--font-herald);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(168, 134, 92, 0.85);
  border-bottom: 1px solid rgba(168, 134, 92, 0.16);
}

.study-column-list {
  list-style: none;
  margin: 0;
  padding: 0.45rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1 1 auto;
  display: grid;
  gap: 0.35rem;
  align-content: start;
}

.study-tome {
  position: relative;
  display: grid;
  grid-template-columns: 0.35rem 1fr;
  gap: 0.55rem;
  width: 100%;
  padding: 0.62rem 0.55rem 0.62rem 0.45rem;
  border: 1px solid rgba(168, 134, 92, 0.18);
  border-radius: 4px;
  background: rgba(8, 8, 10, 0.38);
  color: var(--paper-dim);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    transform 0.08s ease,
    box-shadow 0.15s ease;
}

.study-tome:hover {
  color: var(--paper);
  border-color: rgba(201, 165, 116, 0.45);
  background: rgba(201, 165, 116, 0.07);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}

.study-tome.is-active {
  color: var(--accent-hot);
  border-color: rgba(201, 165, 116, 0.72);
  background:
    linear-gradient(90deg, rgba(201, 165, 116, 0.14), rgba(0, 0, 0, 0.25));
  box-shadow:
    inset 0 0 0 1px rgba(201, 165, 116, 0.12),
    0 10px 22px rgba(0, 0, 0, 0.32);
}

.study-tome-spine,
.study-tome-rail {
  display: block;
  width: 0.28rem;
  border-radius: 2px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--study-drill-ink, rgba(168, 134, 92, 0.85)) 70%, transparent),
    transparent 90%
  );
  opacity: 0.75;
}

.study-drill .study-column {
  border-color: var(--study-drill-line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 28%),
    rgba(2, 6, 14, 0.55);
}

.study-drill .study-column-kicker {
  color: var(--study-drill-ink);
  border-bottom-color: var(--study-drill-line);
}

.study-drill .study-tome,
.study-columns.study-columns--drill .study-tome {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box;
  grid-template-columns: 0.35rem minmax(0, 1fr);
  border-color: color-mix(in srgb, var(--study-drill-line) 80%, transparent);
  background: rgba(4, 8, 16, 0.55);
}

.study-columns--history-only .study-tome-row {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
}

.study-columns--history-only .study-tome-row > .study-tome {
  width: 100% !important;
  min-width: 0;
  padding-right: 2rem;
}

.study-columns--history-only .study-tome-star {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  z-index: 2;
  margin: 0;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.35);
}

.study-drill .study-tome:hover {
  border-color: var(--study-drill-ink);
  background: var(--study-drill-glow);
  color: var(--paper);
  transform: none;
  box-shadow: none;
}

.study-drill .study-tome.is-active {
  color: var(--study-drill-hot);
  border-color: var(--study-drill-ink);
  background:
    linear-gradient(90deg, var(--study-drill-glow), rgba(0, 0, 0, 0.28));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--study-drill-line) 60%, transparent);
  transform: none;
}

.study-drill .study-tome-title,
.study-columns.study-columns--drill .study-tome-title {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
  white-space: normal !important;
}

.study-drill .study-tome-sub,
.study-columns.study-columns--drill .study-tome-sub {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal !important;
}

.study-columns.study-columns--drill .study-column-empty {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}

.study-tome-copy {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.study-tome-title {
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.35;
  color: inherit;
  overflow-wrap: anywhere;
}

.study-tome-sub {
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  color: rgba(200, 206, 198, 0.62);
  word-break: break-word;
}

.study-reader-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: start center;
  --study-reader-stage-raise: -1.3rem;
  padding:
    calc(var(--desk-chrome-clear) + 0.35rem - var(--study-reader-stage-raise))
    clamp(0.75rem, 2vw, 1.25rem)
    clamp(1rem, 2.5vh, 1.75rem);
  box-sizing: border-box;
}

.study-reader-overlay[hidden] {
  display: none !important;
}

body.study-reader-open {
  overflow: hidden;
}

/* Atlas drill (cube + list columns) must not bleed through the reader overlay */
body.study-reader-open .study-atlas {
  visibility: hidden;
  pointer-events: none;
}

.study-reader-backdrop {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(2, 3, 8, 0.78);
  backdrop-filter: blur(10px) saturate(1.1);
  cursor: pointer;
}

.study-reader-layout {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.7rem;
  width: min(96rem, 100%);
  margin: 0 auto;
  flex: 0 0 auto;
}

.study-reader-question-dock {
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
  padding: 0.72rem 0.95rem 0.78rem;
  --study-rail-ink: color-mix(in srgb, var(--ach-pod-ink, #9eb0d0) 48%, #c5cddc);
  --study-rail-line: color-mix(in srgb, var(--ach-pod-ink, #9eb0d0) 18%, transparent);
  --study-rail-soft: color-mix(in srgb, var(--ach-pod-glow, rgba(140, 160, 200, 0.35)) 22%, transparent);
  --study-rail-wash: color-mix(in srgb, var(--ach-pod-base, rgba(24, 32, 48, 0.4)) 32%, rgba(6, 10, 18, 0.78));
  border: 1px solid var(--study-rail-line);
  border-radius: 12px;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--ach-pod-ink, #9eb0d0) 6%, transparent),
      transparent 30%
    ),
    var(--study-rail-wash);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--ach-pod-ink, #9eb0d0) 8%, transparent),
    0 0 28px var(--study-rail-soft);
}

.study-reader-question-dock[hidden] {
  display: none !important;
}

.study-reader-question-dock-kicker {
  display: none;
}

.study-reader-stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-areas: "chapters sheet points";
  grid-template-columns:
    minmax(12rem, 16rem)
    minmax(0, 1fr)
    minmax(12rem, 16rem);
  gap: clamp(0.65rem, 1.5vw, 1.1rem);
  align-items: stretch;
  flex: 0 0 auto;
  width: min(96rem, 100%);
  height: min(76vh, calc(100vh - var(--desk-chrome-clear) - 2rem + var(--study-reader-stage-raise)));
  max-height: min(76vh, calc(100vh - var(--desk-chrome-clear) - 2rem + var(--study-reader-stage-raise)));
  margin: 0 auto;
  min-height: 0;
}

.study-reader-rail--chapters {
  grid-area: chapters;
}

.study-reader-sheet {
  grid-area: sheet;
}

.study-reader-rail--points {
  grid-area: points;
}

.study-reader-stage--no-chapters {
  grid-template-areas: "sheet points";
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 16rem);
}

.study-reader-stage--no-points {
  grid-template-areas: "chapters sheet";
  grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
}

.study-reader-stage--no-chapters.study-reader-stage--no-points,
.study-reader-stage--sheet-only {
  grid-template-areas: "sheet";
  grid-template-columns: minmax(0, 1fr);
}

.study-reader-rail {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  opacity: 0.62;
  filter: saturate(0.85) brightness(0.9);
  transition:
    opacity 0.16s ease,
    filter 0.16s ease;
  /* Low-key tint from selected cube (--ach-pod-* set on overlay) */
  --study-rail-ink: color-mix(in srgb, var(--ach-pod-ink, #9eb0d0) 48%, #c5cddc);
  --study-rail-line: color-mix(in srgb, var(--ach-pod-ink, #9eb0d0) 18%, transparent);
  --study-rail-soft: color-mix(in srgb, var(--ach-pod-glow, rgba(140, 160, 200, 0.35)) 22%, transparent);
  --study-rail-wash: color-mix(in srgb, var(--ach-pod-base, rgba(24, 32, 48, 0.4)) 32%, rgba(6, 10, 18, 0.78));
}

.study-reader-rail:hover,
.study-reader-rail:focus-within {
  opacity: 0.88;
  filter: saturate(0.95) brightness(0.98);
}

.study-reader-rail .study-column {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  border-color: var(--study-rail-line);
  border-radius: 12px;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--ach-pod-ink, #9eb0d0) 6%, transparent),
      transparent 30%
    ),
    var(--study-rail-wash);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--ach-pod-ink, #9eb0d0) 8%, transparent),
    0 0 28px var(--study-rail-soft);
}

.study-reader-rail .study-column-kicker {
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--study-rail-ink) 72%, transparent);
  border-bottom-color: var(--study-rail-line);
  text-align: center;
}

.study-reader-rail .study-column-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.study-reader-rail .study-tome {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  grid-template-columns: 0.28rem minmax(0, 1fr);
  border-color: color-mix(in srgb, var(--ach-pod-ink, #9eb0d0) 14%, transparent);
  background: color-mix(
    in srgb,
    var(--ach-pod-base, rgba(24, 32, 48, 0.4)) 24%,
    rgba(6, 10, 18, 0.7)
  );
  color: color-mix(in srgb, var(--ach-pod-ink, #c8d4f0) 28%, rgba(230, 236, 248, 0.9));
}

.study-reader-overlay--suggest .study-reader-rail .study-tome {
  border-color: rgba(255, 255, 255, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 55%),
    rgba(255, 255, 255, 0.07);
  color: rgba(228, 234, 244, 0.88);
}

.study-reader-rail .study-tome .study-tome-rail {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ach-pod-ink, #9eb0d0) 42%, transparent),
    transparent 92%
  );
  opacity: 0.7;
}

.study-reader-overlay--suggest .study-reader-rail .study-tome .study-tome-rail {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.62),
    rgba(255, 255, 255, 0.18) 92%
  );
  opacity: 0.85;
}

.study-reader-rail .study-tome:hover,
.study-reader-rail .study-tome:focus-visible {
  transform: none;
  color: color-mix(in srgb, var(--ach-pod-ink, #fff) 42%, #fff);
  border-color: color-mix(in srgb, var(--ach-pod-ink, #9eb0d0) 38%, transparent);
  background: color-mix(
    in srgb,
    var(--ach-pod-glow, rgba(140, 160, 200, 0.35)) 20%,
    rgba(8, 10, 16, 0.78)
  );
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--ach-pod-ink, #9eb0d0) 10%, transparent),
    0 0 16px color-mix(in srgb, var(--ach-pod-glow, rgba(140, 160, 200, 0.35)) 16%, transparent);
}

.study-reader-overlay--suggest .study-reader-rail .study-tome:hover,
.study-reader-overlay--suggest .study-reader-rail .study-tome:focus-visible {
  color: rgba(248, 250, 255, 0.96);
  border-color: rgba(255, 255, 255, 0.52);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 55%),
    rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 18px rgba(255, 255, 255, 0.08);
}

.study-reader-overlay--suggest .study-reader-rail .study-tome:hover .study-tome-rail,
.study-reader-overlay--suggest .study-reader-rail .study-tome:focus-visible .study-tome-rail {
  opacity: 1;
}

.study-reader-rail .study-tome.is-active {
  transform: none;
  color: rgba(243, 223, 154, 0.98);
  border-color: rgba(201, 165, 116, 0.72);
  background:
    linear-gradient(180deg, rgba(201, 165, 116, 0.2), transparent 58%),
    rgba(201, 165, 116, 0.12);
  box-shadow:
    inset 0 0 0 1px rgba(201, 165, 116, 0.28),
    0 0 22px rgba(201, 165, 116, 0.16);
}

.study-reader-rail .study-tome.is-active .study-tome-rail {
  background: linear-gradient(
    180deg,
    rgba(243, 223, 154, 0.98),
    rgba(201, 165, 116, 0.55) 92%
  );
  opacity: 1;
}

.study-reader-rail .study-tome.is-active .study-tome-title {
  color: rgba(243, 223, 154, 0.98);
}

.study-reader-rail .study-tome.is-active .study-tome-sub {
  color: rgba(201, 165, 116, 0.78);
}

.study-reader-rail .study-tome.is-active:hover,
.study-reader-rail .study-tome.is-active:focus-visible {
  color: #fff6d6;
  border-color: rgba(243, 223, 154, 0.82);
  background:
    linear-gradient(180deg, rgba(201, 165, 116, 0.26), transparent 58%),
    rgba(201, 165, 116, 0.16);
  box-shadow:
    inset 0 0 0 1px rgba(201, 165, 116, 0.34),
    0 0 24px rgba(201, 165, 116, 0.2);
}

.study-reader-rail .study-tome-title,
.study-reader-rail .study-tome-sub {
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.study-reader-rail .study-tome-sub {
  color: color-mix(in srgb, var(--ach-pod-ink, #9eb0d0) 36%, rgba(180, 195, 220, 0.55));
}

.study-reader-overlay--suggest .study-reader-rail .study-tome-sub {
  color: rgba(220, 228, 240, 0.72);
}

.study-reader-rail .study-column-empty {
  color: color-mix(in srgb, var(--ach-pod-ink, #9eb0d0) 30%, rgba(190, 205, 230, 0.5));
}

.study-reader-sheet {
  --study-reader-ink: #c5ccd8;
  --study-reader-muted: rgba(168, 180, 200, 0.52);
  --study-reader-line: rgba(255, 255, 255, 0.06);
  --study-reader-line-strong: rgba(255, 255, 255, 0.1);
  --study-reader-surface: #101218;
  --study-reader-surface-2: #151822;
  --study-reader-accent: #7a96c9;
  --study-reader-gold: rgba(196, 170, 110, 0.72);
  --study-reader-plate-dock-min: 0;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: min(52rem, 100%);
  height: 100%;
  max-height: 100%;
  margin: 0 auto;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 0;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(90, 115, 165, 0.06), transparent 52%),
    linear-gradient(180deg, #0a0c11 0%, #07080c 100%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.45),
    0 28px 90px rgba(0, 0, 0, 0.72);
  overflow: hidden;
  color: var(--study-reader-ink);
}

/* With chapter/focus rails — sheet fills the middle column (no side gutters). */
.study-reader-stage:not(.study-reader-stage--sheet-only) .study-reader-sheet {
  max-width: none;
  width: 100%;
  margin: 0;
}

.study-reader-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin: 0;
  padding: 1.05rem 1.2rem 0.95rem;
  border-bottom: 1px solid var(--study-reader-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent);
}

.study-reader-head-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.study-reader-question-filters {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.study-reader-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  flex: 0 0 auto;
}

.study-reader-session-star {
  flex: 0 0 auto;
  align-self: center;
  width: 2.2rem;
  height: 2.2rem;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(180, 155, 95, 0.28);
  border-radius: 8px;
  background: rgba(180, 155, 95, 0.06);
  font-size: 1.05rem;
  line-height: 1;
}

.study-reader-session-star:hover,
.study-reader-session-star:focus-visible {
  border-color: rgba(201, 165, 116, 0.42);
  background: rgba(180, 155, 95, 0.12);
}

.study-reader-session-star.is-on {
  color: #e8c06a;
}

.study-reader-session-star[hidden] {
  display: none !important;
}

.study-reader-session-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.2rem;
  margin: 0;
  padding: 0.35rem 0.75rem;
  border: 1px solid rgba(180, 155, 95, 0.28);
  border-radius: 8px;
  background: rgba(180, 155, 95, 0.06);
  color: rgba(201, 165, 116, 0.88);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease;
}

.study-reader-session-back:hover,
.study-reader-session-back:focus-visible {
  color: rgba(243, 223, 154, 0.96);
  border-color: rgba(201, 165, 116, 0.42);
  background: rgba(180, 155, 95, 0.12);
  outline: none;
}

.study-reader-session-back[hidden] {
  display: none !important;
}

.study-reader-question-filters[hidden] {
  display: none !important;
}

.study-reader-question-filters-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.3rem 0.35rem;
  width: 100%;
  --study-qtag-ink: rgba(248, 250, 255, 0.96);
  --study-qtag-ink-dim: rgba(228, 234, 244, 0.88);
  --study-qtag-line: rgba(255, 255, 255, 0.24);
  --study-qtag-line-hot: rgba(255, 255, 255, 0.52);
  --study-qtag-bg: rgba(255, 255, 255, 0.07);
  --study-qtag-bg-hot: rgba(255, 255, 255, 0.14);
  --study-qtag-rail: rgba(255, 255, 255, 0.62);
}

.study-reader-question-filter {
  display: inline-grid;
  grid-template-columns: 0.2rem minmax(0, 1fr);
  gap: 0.3rem;
  align-items: center;
  min-height: 0;
  margin: 0;
  padding: 0.28rem 0.58rem 0.28rem 0.32rem;
  border: 1px solid var(--study-qtag-line);
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 55%),
    var(--study-qtag-bg);
  color: var(--study-qtag-ink-dim);
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

.study-reader-question-filter::before {
  content: "";
  align-self: stretch;
  min-height: 100%;
  border-radius: 2px;
  background: linear-gradient(
    180deg,
    var(--study-qtag-rail),
    rgba(255, 255, 255, 0.18) 92%
  );
  opacity: 0.85;
}

.study-reader-question-filter:hover,
.study-reader-question-filter:focus-visible {
  color: var(--study-qtag-ink);
  border-color: var(--study-qtag-line-hot);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 55%),
    var(--study-qtag-bg-hot);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 18px rgba(255, 255, 255, 0.08);
  outline: none;
}

.study-reader-question-filter.is-active {
  color: rgba(243, 223, 154, 0.98);
  border-color: rgba(201, 165, 116, 0.72);
  background:
    linear-gradient(180deg, rgba(201, 165, 116, 0.2), transparent 58%),
    rgba(201, 165, 116, 0.12);
  box-shadow:
    inset 0 0 0 1px rgba(201, 165, 116, 0.28),
    0 0 22px rgba(201, 165, 116, 0.16);
}

.study-reader-question-filter.is-active::before {
  opacity: 1;
  background: linear-gradient(
    180deg,
    rgba(243, 223, 154, 0.98),
    rgba(201, 165, 116, 0.55) 92%
  );
}

.study-reader-question-filter.is-active:hover,
.study-reader-question-filter.is-active:focus-visible {
  color: #fff6d6;
  border-color: rgba(243, 223, 154, 0.82);
  background:
    linear-gradient(180deg, rgba(201, 165, 116, 0.26), transparent 58%),
    rgba(201, 165, 116, 0.16);
  box-shadow:
    inset 0 0 0 1px rgba(201, 165, 116, 0.34),
    0 0 24px rgba(201, 165, 116, 0.2);
}

.study-reader-kicker {
  margin: 0;
  font-family: var(--font-herald);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--study-reader-gold);
}

.study-reader-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--study-reader-line-strong);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(200, 186, 140, 0.78);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease;
}

.study-reader-close:hover,
.study-reader-close:focus-visible {
  color: rgba(220, 210, 190, 0.92);
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  outline: none;
}

.study-reader-title {
  margin: 0.35rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  font-weight: 650;
  color: var(--study-reader-ink);
  letter-spacing: -0.02em;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.study-reader-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 1rem 0.85rem;
}

.study-reader-section {
  min-height: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
}

/* Study body grows; recall cue stays compact at the bottom */
.study-reader-body > .study-reader-section:has([data-focus-stage="study_body"]) {
  flex: 1 1 0;
  min-height: 0;
}

.study-reader-body > .study-reader-section:has([data-focus-stage="study_recall"]) {
  flex: 0 0 auto;
  min-height: calc(10rem + 2.75rem);
}

/* Recall cue section uses the same plate chrome as study body. */

.study-reader-section-head {
  display: grid;
  gap: 0.2rem;
}

.study-reader-section-title {
  margin: 0;
  font-family: var(--font-herald);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(150, 165, 190, 0.48);
}

.study-reader-section-lede {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--study-reader-muted);
}

.study-reader-blocks {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}

/* Fixed-height study plates: split sheet body; scroll inside each plate */
.study-reader-plate {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  align-self: stretch;
  border: 1px solid var(--study-reader-line);
  border-radius: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0.01));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
  overflow: hidden;
}

.study-reader-plate--body {
  box-shadow:
    inset 3px 0 0 rgba(168, 134, 92, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

/* Card stacks carry their own left accent — drop plate gold spine so colors show when docked */
.study-reader-plate--body:has(.study-reader-card) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.study-reader-plate--body:has(.study-reader-card) .study-reader-plate-scroll {
  padding-left: 0.85rem;
}

/* Recall cue plate: drop plate-edge gold; reserve height for one rehearse line */
.study-reader-plate--body:not(:has(.study-reader-card)) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

[data-focus-stage="study_recall"]:not(.is-focus-on) {
  flex: 0 0 auto;
  grid-template-rows: auto auto;
  min-height: 0;
}

[data-focus-stage="study_body"]:not(.is-focus-on) {
  flex: 1 1 auto;
  min-height: 0;
}

[data-focus-stage="study_recall"] .study-reader-hint.study-reader-plate-scroll {
  position: relative;
  box-sizing: border-box;
  flex: 1 1 auto;
  min-height: 10rem;
  max-height: min(32vh, 21rem);
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0.65rem 0.75rem 0.65rem;
}

.study-reader-hint-copy {
  position: relative;
  display: block;
  padding-left: calc(0.85rem + 1rem);
}

.study-reader-hint-copy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.12rem;
  bottom: 0.12rem;
  width: 3px;
  border-radius: 0;
  background: linear-gradient(
    180deg,
    rgba(243, 223, 154, 0.92),
    rgba(168, 134, 92, 0.52)
  );
  pointer-events: none;
}

.study-reader-plate .study-reader-card::before {
  width: 3px;
  border-radius: 0;
}

.study-reader-plate-head.guide-split-panel-head {
  position: relative;
  top: auto;
  padding: 0.45rem 0.65rem 0.5rem;
}

.study-reader-plate-head {
  position: relative;
  top: auto;
  right: auto;
  flex-shrink: 0;
  padding: 0.45rem 0.65rem 0.5rem;
  border-bottom: 1px solid rgba(168, 134, 92, 0.35);
  background: #1e2a3c;
}

.study-reader-plate-head .section-title {
  margin: 0;
  min-width: 0;
  font-family: var(--font-herald);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
  color: rgba(196, 208, 224, 0.78);
}

.study-reader-plate-head .guide-split-panel-actions {
  flex-shrink: 0;
}

.study-reader-plate-head .focus-stage-btn {
  opacity: 0.62;
}

.study-reader-plate:hover .study-reader-plate-head .focus-stage-btn,
.study-reader-plate:focus-within .study-reader-plate-head .focus-stage-btn {
  opacity: 1;
}

.study-reader-plate-scroll {
  min-width: 0;
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0.45rem 0.65rem 0.45rem 0.65rem;
}

.study-reader-plate-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* Idle reader: body fills sheet; recall stays content-height at bottom */
.study-reader-sheet--idle [data-focus-stage="study_body"] .study-reader-plate,
.study-reader-sheet--idle [data-focus-stage="study_recall"] .study-reader-plate {
  grid-template-rows: auto minmax(0, 1fr);
}

.study-reader-sheet--idle [data-focus-stage="study_recall"] .study-reader-plate {
  grid-template-rows: auto auto;
  flex: 0 0 auto;
}

.study-reader-sheet--idle [data-focus-stage="study_body"] .study-reader-plate {
  flex: 1 1 auto;
  min-height: 0;
}

.study-reader-sheet--idle [data-focus-stage="study_body"] .study-reader-plate-scroll {
  min-height: 0;
  display: block;
  box-sizing: border-box;
}

.study-reader-sheet--idle [data-focus-stage="study_body"] .study-reader-plate-scroll:has(> .study-reader-empty:only-child),
[data-focus-stage="study_body"] .study-reader-plate-scroll:has(> .study-reader-empty:only-child) {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.study-reader-sheet--idle [data-focus-stage="study_recall"] .study-reader-hint.study-reader-plate-scroll {
  min-height: 10rem;
  display: block;
  box-sizing: border-box;
}

.study-reader-sheet--idle [data-focus-stage="study_recall"] .study-reader-hint-copy:empty::before {
  display: none;
}

.study-reader-sheet--idle .study-reader-empty {
  padding: 0;
}

.study-reader-plate .study-reader-card {
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0.35rem 0.3rem 0.45rem 0.55rem;
}

.study-reader-plate .study-reader-card--solo {
  padding-left: 0.35rem;
}

.study-reader-card {
  position: relative;
  display: grid;
  gap: 0.45rem;
  padding: 0.9rem 0.95rem 0.95rem 1rem;
  border: 1px solid var(--study-reader-line);
  border-radius: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0.01));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.study-reader-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7rem;
  bottom: 0.7rem;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(
    180deg,
    rgba(243, 223, 154, 0.92),
    rgba(168, 134, 92, 0.52)
  );
  box-shadow: 0 0 6px rgba(201, 165, 116, 0.18);
}

.study-reader-card--intuition::before {
  background: linear-gradient(180deg, rgba(130, 185, 230, 0.72), rgba(90, 145, 200, 0.42));
  box-shadow: none;
}

.study-reader-card--methods::before {
  background: linear-gradient(180deg, rgba(120, 205, 170, 0.72), rgba(80, 165, 130, 0.42));
  box-shadow: none;
}

.study-reader-card--pitfalls::before {
  background: linear-gradient(180deg, rgba(220, 165, 120, 0.72), rgba(185, 125, 85, 0.42));
  box-shadow: none;
}

.study-reader-card--focus::before {
  background: linear-gradient(180deg, rgba(130, 185, 230, 0.72), rgba(90, 145, 200, 0.42));
  box-shadow: none;
}

.study-reader-card--how-to-answer::before {
  background: linear-gradient(180deg, rgba(120, 205, 170, 0.72), rgba(80, 165, 130, 0.42));
  box-shadow: none;
}

.study-reader-card--avoid::before {
  background: linear-gradient(180deg, rgba(220, 165, 120, 0.72), rgba(185, 125, 85, 0.42));
  box-shadow: none;
}

.study-reader-card--solo {
  padding-left: 0.95rem;
}

.study-reader-card--solo::before {
  display: none;
}

.study-reader-card-label {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin: 0;
  min-width: 0;
}

.study-reader-card-idx {
  flex: 0 0 auto;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: rgba(150, 165, 190, 0.38);
}

.study-reader-card-name {
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--study-reader-accent);
}

.study-reader-card--intuition .study-reader-card-name {
  color: #8ab4e8;
}

.study-reader-card--methods .study-reader-card-name {
  color: #6fad96;
}

.study-reader-card--pitfalls .study-reader-card-name {
  color: #c49272;
}

.study-reader-card--focus .study-reader-card-name {
  color: #8ab4e8;
}

.study-reader-card--how-to-answer .study-reader-card-name {
  color: #6fad96;
}

.study-reader-card--avoid .study-reader-card-name {
  color: #c49272;
}

.study-reader-overlay--suggest .study-reader-sheet {
  border-color: rgba(201, 165, 116, 0.22);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.45),
    0 28px 90px rgba(0, 0, 0, 0.72),
    inset 0 1px 0 rgba(243, 223, 154, 0.06);
}

.study-reader-overlay--suggest .study-reader-kicker,
.study-reader-overlay--suggest .study-reader-section-title {
  color: rgba(201, 165, 116, 0.82);
}

.study-reader-overlay--suggest .study-reader-plate--body {
  border-color: rgba(201, 165, 116, 0.16);
  box-shadow:
    inset 3px 0 0 rgba(201, 165, 116, 0.62),
    inset 0 1px 0 rgba(243, 223, 154, 0.05);
}

.study-reader-overlay--suggest .study-reader-plate--body:has(.study-reader-card) {
  box-shadow: inset 0 1px 0 rgba(243, 223, 154, 0.05);
}

.study-reader-overlay--suggest .study-reader-plate--body:not(:has(.study-reader-card)) {
  box-shadow: inset 0 1px 0 rgba(243, 223, 154, 0.05);
}

.study-reader-overlay--suggest
  [data-focus-stage="study_recall"]
  .study-reader-hint-copy::before {
  background: linear-gradient(
    180deg,
    rgba(243, 223, 154, 0.98),
    rgba(201, 165, 116, 0.62)
  );
}

.study-reader-overlay--suggest .study-reader-card-name {
  color: rgba(243, 223, 154, 0.9);
}

.study-reader-overlay--suggest .study-reader-card--intuition .study-reader-card-name {
  color: #8ec8e8;
}

.study-reader-overlay--suggest .study-reader-card--methods .study-reader-card-name {
  color: #7fd4b0;
}

.study-reader-overlay--suggest .study-reader-card--pitfalls .study-reader-card-name {
  color: #ddb08a;
}

.study-reader-overlay--suggest .study-reader-card--focus .study-reader-card-name {
  color: #8ec8e8;
}

.study-reader-overlay--suggest .study-reader-card--how-to-answer .study-reader-card-name {
  color: #7fd4b0;
}

.study-reader-overlay--suggest .study-reader-card--avoid .study-reader-card-name {
  color: #ddb08a;
}

.study-reader-card-body,
.study-reader-hint,
.study-reader-hint-copy {
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.65;
  color: rgba(232, 238, 248, 0.94);
  white-space: normal;
}

.study-reader-card-body > .latex-para,
.study-reader-card-body > p,
.study-reader-hint > .latex-para,
.study-reader-hint > p,
.study-reader-hint-copy > .latex-para,
.study-reader-hint-copy > p {
  margin: 0 0 0.7em;
}

.study-reader-card-body > .latex-para:last-child,
.study-reader-card-body > p:last-child,
.study-reader-hint > .latex-para:last-child,
.study-reader-hint > p:last-child,
.study-reader-hint-copy > .latex-para:last-child,
.study-reader-hint-copy > p:last-child {
  margin-bottom: 0;
}

.study-reader-card-body .latex-strong,
.study-reader-hint .latex-strong,
.study-reader-hint-copy .latex-strong {
  color: rgba(248, 250, 255, 0.98);
  font-weight: 700;
}

.study-reader-card-body .katex,
.study-reader-hint .katex,
.study-reader-hint-copy .katex {
  color: rgba(228, 236, 248, 0.96);
}

.study-reader-hint:not(.study-reader-plate-scroll) {
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Study Hall plates in focus stage */
[data-focus-stage="study_body"].is-focus-on,
[data-focus-stage="study_recall"].is-focus-on {
  display: flex !important;
  flex-direction: column;
  inset: auto !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  width: min(920px, calc(100vw - 2.5rem)) !important;
  max-width: calc(100vw - 2.5rem) !important;
  height: min(82vh, calc(100vh - 3rem)) !important;
  max-height: min(82vh, calc(100vh - 3rem)) !important;
  padding: 0;
  border-radius: 0;
  background: linear-gradient(180deg, #12151c 0%, #0a0c11 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--study-reader-ink, #c5ccd8);
  animation: focus-stage-study-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

[data-focus-stage="study_body"].is-focus-on > .study-reader-plate-head,
[data-focus-stage="study_recall"].is-focus-on > .study-reader-plate-head {
  position: static;
  margin: 0;
  padding: 1.05rem 1.35rem 0.95rem;
  border-bottom: 1px solid rgba(168, 134, 92, 0.35);
  background: #1e2a3c;
}

[data-focus-stage="study_body"].is-focus-on > .study-reader-plate-head .section-title,
[data-focus-stage="study_recall"].is-focus-on > .study-reader-plate-head .section-title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--paper);
}

[data-focus-stage="study_body"].is-focus-on .study-reader-plate-scroll,
[data-focus-stage="study_recall"].is-focus-on .study-reader-plate-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  display: block;
  margin: clamp(0.65rem, 1.6vh, 1rem) clamp(0.7rem, 1.5vw, 1.15rem)
    clamp(0.75rem, 1.8vh, 1.15rem);
  padding: clamp(1.35rem, 3.2vh, 2.15rem) clamp(1.4rem, 3.4vw, 2.6rem)
    clamp(1.5rem, 3.5vh, 2.35rem);
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(232, 239, 233, 0.14);
  border-radius: var(--frame-radius);
  background: rgba(0, 0, 0, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: clamp(1.28rem, 2.15vw, 1.72rem);
  font-weight: 400;
  line-height: 1.78;
  letter-spacing: 0.01em;
}

[data-focus-stage="study_recall"].is-focus-on .study-reader-hint {
  margin: 0;
}

[data-focus-stage="study_recall"].is-focus-on .study-reader-hint-copy {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

[data-focus-stage="study_body"].is-focus-on .study-reader-card-body,
[data-focus-stage="study_body"].is-focus-on .study-reader-card-body--solo {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

[data-focus-stage="study_body"].is-focus-on .study-reader-card,
[data-focus-stage="study_recall"].is-focus-on .study-reader-card {
  height: fit-content;
  align-self: start;
  padding: 0.95rem 0.75rem 0.95rem 0.95rem;
  gap: 0.65rem;
}

[data-focus-stage="study_body"].is-focus-on .study-reader-card-idx {
  font-size: 0.82em;
}

[data-focus-stage="study_body"].is-focus-on .study-reader-card-name {
  font-size: 0.92em;
}

[data-focus-stage="study_body"].is-focus-on .study-reader-card-body > .latex-para,
[data-focus-stage="study_body"].is-focus-on .study-reader-card-body > p,
[data-focus-stage="study_body"].is-focus-on .study-reader-card-body--solo > .latex-para,
[data-focus-stage="study_body"].is-focus-on .study-reader-card-body--solo > p,
[data-focus-stage="study_recall"].is-focus-on .study-reader-hint-copy > .latex-para,
[data-focus-stage="study_recall"].is-focus-on .study-reader-hint-copy > p {
  margin: 0 0 1.2em;
}

[data-focus-stage="study_body"].is-focus-on .study-reader-card-body > .latex-para:last-child,
[data-focus-stage="study_body"].is-focus-on .study-reader-card-body > p:last-child,
[data-focus-stage="study_body"].is-focus-on .study-reader-card-body--solo > .latex-para:last-child,
[data-focus-stage="study_body"].is-focus-on .study-reader-card-body--solo > p:last-child,
[data-focus-stage="study_recall"].is-focus-on .study-reader-hint-copy > .latex-para:last-child,
[data-focus-stage="study_recall"].is-focus-on .study-reader-hint-copy > p:last-child {
  margin-bottom: 0;
}

[data-focus-stage="study_body"].is-focus-on .study-reader-card-body .katex,
[data-focus-stage="study_recall"].is-focus-on .study-reader-hint-copy .katex {
  font-size: 1.08em;
  color: var(--paper);
}

[data-focus-stage="study_body"].is-focus-on .study-reader-card-body .katex-display,
[data-focus-stage="study_recall"].is-focus-on .study-reader-hint-copy .katex-display {
  display: block;
  margin: 1.55em auto;
  padding: 0.15em 0;
  text-align: center;
  overflow-x: auto;
  max-width: 100%;
}

.study-reader-content {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.65;
  color: rgba(232, 238, 248, 0.94);
  white-space: normal;
}

.study-reader-empty {
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(190, 205, 230, 0.55);
}

@media (max-width: 760px) {
  .study-cube-field:not(.study-cube-field--drill) {
    flex-direction: column;
    gap: 2.5rem;
    padding:
      clamp(4rem, 10vh, 5.5rem)
      clamp(1.25rem, 5vw, 2rem)
      clamp(4rem, 12vh, 6rem);
  }

  .study-cube-field--drill {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.75rem 2.25rem;
  }

  .study-cube-field--drill[aria-label="Position families"] {
    grid-template-columns: repeat(3, minmax(0, 11.2rem));
    column-gap: 1.1rem;
    row-gap: 1.5rem;
  }

  .study-cube-field--drill .study-cube-pod {
    width: min(12.5rem, 44vw);
    flex-basis: min(12.5rem, 44vw);
    max-width: min(12.5rem, 44vw);
  }

  .study-cube-field--drill[aria-label="Common tracks"] .study-cube-pod {
    width: min(15rem, 46vw);
    flex-basis: min(15rem, 46vw);
    max-width: min(15rem, 46vw);
  }

  .study-cube-field--drill[aria-label="Position families"] .study-cube-pod {
    width: 100%;
    max-width: none;
    flex: unset;
  }

  .study-cube-field--drill .study-cube-label {
    height: 4.35rem;
    min-height: 4.35rem;
    max-height: 4.35rem;
  }

  .study-cube-field--drill .study-cube-label-name {
    font-size: 0.7rem;
  }

  .study-cube-pod {
    max-width: min(16rem, 88vw);
  }

  .study-reader-stage {
    grid-template-areas: "sheet";
    grid-template-columns: 1fr;
    max-height: calc(100vh - 1.5rem);
  }

  .study-reader-rail {
    display: none;
  }

  .study-reader-sheet {
    width: 100%;
    max-height: calc(100vh - 1.5rem);
    border-radius: 0;
  }

  .study-column {
    flex-basis: min(78vw, 16rem);
    min-width: 11.5rem;
  }

  .study-columns.study-columns--drill {
    --study-list-col-w: min(26rem, calc((100vw - 5rem - var(--study-list-gap, 1rem)) / 2));
  }

  .study-columns.study-columns--drill > .study-column {
    min-width: 0 !important;
    flex-basis: unset !important;
  }
}

/* —— Admin 06 · Statistics palette (shared with 02 Roster / 03 Ledger / 04 Grant / Main Settings) —— */
#panel-stats.admin-panel,
#panel-users.admin-panel,
#panel-sessions.admin-panel,
#panel-history.admin-panel,
#panel-grant-rsv.admin-panel,
#panel-blacklist.admin-panel,
#panel-investigation.admin-panel,
#panel-settings.hub-panel {
  --stats-ink: rgba(6, 7, 9, 0.72);
  --stats-panel: rgba(10, 11, 14, 0.78);
  --stats-panel-deep: rgba(4, 5, 7, 0.88);
  --stats-detail: #0c0d10;
  --stats-line: rgba(168, 134, 92, 0.28);
  --stats-line-soft: rgba(168, 134, 92, 0.14);
  --stats-gold: var(--accent-hot, #c9a574);
  --stats-gold-dim: rgba(168, 134, 92, 0.78);
  --stats-green: #6fbf8a;
  --stats-red: #c97868;
  --stats-series: #c9a574;
  --stats-series-deep: #a8865c;
  --stats-bbg: #c9a574;
  --stats-bbg-deep: #a8865c;
  --stats-muted: rgba(197, 212, 200, 0.58);
  --stats-paper: rgba(232, 239, 233, 0.92);
  --stats-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

#panel-stats.admin-panel {
  width: 100%;
}

#panel-stats .admin-stats-page-head {
  margin-bottom: 0.75rem;
}

#panel-stats .admin-stats-page-head .admin-panel-kicker {
  margin-bottom: 0;
}

#panel-stats .admin-stats-terminal {
  width: 100%;
}

#panel-stats .admin-stats-mandate-head,
#panel-stats .admin-stats-board,
#panel-stats .admin-stats-holdings-launch {
  width: 100%;
}

#panel-stats .admin-stats-mandate-head {
  flex-wrap: nowrap;
  align-items: end;
  gap: 0.5rem 0.75rem;
}

#panel-stats .admin-stats-mandate-core {
  flex: 1 1 0;
  min-width: 0;
  flex-wrap: nowrap;
}

#panel-stats .admin-stats-mandate-core .admin-stats-field {
  flex: 1 1 0;
  min-width: 0;
}

#panel-stats .admin-stats-search {
  flex: 0 0 auto;
  margin-left: 0;
  align-self: end;
}

@media (max-width: 860px) {
  #panel-stats .admin-stats-mandate-head {
    flex-wrap: wrap;
  }

  #panel-stats .admin-stats-mandate-core {
    flex-wrap: wrap;
    flex-basis: 100%;
  }

  #panel-stats .admin-stats-search {
    margin-left: auto;
  }
}

#panel-stats .admin-stats-mandate-core .admin-stats-field {
  flex: 1 1 0;
  min-width: 5.75rem;
}

#panel-stats .admin-stats-mandate-core .admin-stats-field--narrow {
  flex: 0.85 1 0;
  min-width: 5rem;
}

#panel-stats .admin-stats-advanced-grid .admin-stats-field,
#panel-stats .admin-stats-advanced-grid .admin-stats-field--metric {
  flex: 1 1 0;
  min-width: 7rem;
}

/* Holdings + instrument records filters keep default field sizing. */
#panel-stats .admin-stats-holdings-filters .admin-stats-field,
#panel-stats .admin-stats-brief-filters .admin-stats-field {
  flex: 1 1 7.5rem;
  min-width: 7.5rem;
}

#panel-stats .admin-stats-holdings-filters .admin-stats-field--narrow,
#panel-stats .admin-stats-brief-filters .admin-stats-field--narrow {
  flex: 0 1 5.5rem;
  min-width: 5rem;
}

#panel-stats .admin-stats-holdings-filters .admin-stats-field--metric,
#panel-stats .admin-stats-brief-filters .admin-stats-field--metric {
  flex: 1 1 9.5rem;
  min-width: 8.5rem;
}

#panel-stats .admin-stats-holdings-filters .admin-stats-field--time,
#panel-stats .admin-stats-brief-filters .admin-stats-field--time {
  flex: 0 1 11rem;
  min-width: 9.5rem;
  max-width: 12rem;
}

#panel-stats .admin-stats-holdings-filters .admin-stats-field--holdings-q {
  flex: 1.4 1 12rem;
  min-width: 11rem;
}

#panel-stats .admin-stats-holdings-filters .admin-stats-field--sort,
#panel-stats .admin-stats-holdings-filters .admin-stats-field--order {
  flex: 0 1 7rem;
  min-width: 6rem;
  max-width: 8.5rem;
}

#panel-stats .admin-stats-holdings-filters-grid--secondary {
  flex-wrap: nowrap;
}


#panel-stats .admin-stats-holdings-filters-rows,
#panel-stats .admin-stats-brief-filters .admin-stats-holdings-filters-rows {
  flex: 0 0 auto;
  width: auto;
  min-width: 5rem;
}

#panel-stats .admin-stats-brief-filters-q {
  flex: 1 1 14rem;
  min-width: 12rem;
}

.admin-stats-terminal {
  margin: 0;
  padding: 0.7rem 0.8rem 1.15rem;
  border: 1px solid var(--stats-line);
  border-bottom-width: var(--frame-bevel, 3px);
  border-radius: var(--frame-radius, 3px);
  background:
    radial-gradient(120% 80% at 12% 0%, rgba(168, 134, 92, 0.08), transparent 52%),
    linear-gradient(180deg, rgba(28, 26, 22, 0.55) 0%, var(--stats-ink) 100%);
  box-shadow: var(--frame-shadow-3d, none);
  color: var(--stats-paper);
  font-family: var(--stats-mono);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
}

.admin-stats-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 1rem;
  margin: 0 0 0.75rem;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--stats-line-soft);
  background: rgba(0, 0, 0, 0.28);
}

.admin-stats-topbar-left,
.admin-stats-topbar-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  min-width: 0;
}

.admin-stats-fn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  padding: 0.1rem 0.35rem;
  border: 1px solid var(--stats-gold);
  color: #0c0c0e;
  background: var(--stats-gold);
  font-weight: 700;
  font-size: 0.68rem;
}

.admin-stats-fn-name {
  color: var(--stats-gold);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-stats-sep {
  color: var(--stats-gold-dim);
  opacity: 0.55;
}

.admin-stats-path {
  color: var(--stats-paper);
  font-size: 0.72rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: min(42rem, 70vw);
}

.admin-stats-chip {
  padding: 0.05rem 0.35rem;
  border: 1px solid var(--stats-line);
  color: var(--stats-gold);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.admin-stats-asof {
  color: var(--stats-muted);
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-stats-block {
  margin: 0 0 0.85rem;
}

.admin-stats-section-title {
  margin: 0 0 0.4rem;
  font-family: var(--font-herald);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stats-gold);
}

.admin-stats-mandate {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.6rem;
  align-items: end;
  margin: 0;
  padding: 0.65rem 0.7rem 0.7rem;
  border: 1px solid var(--stats-line-soft);
  border-radius: var(--frame-radius, 3px);
  background: var(--stats-panel);
}

.admin-stats-field {
  display: grid;
  gap: 0.22rem;
  min-width: 7.5rem;
  flex: 1 1 7.5rem;
  align-content: end;
}

.admin-stats-field--narrow {
  flex: 0 1 5.5rem;
  min-width: 5rem;
}

.admin-stats-field--date {
  flex: 1 1 8.5rem;
}

.admin-stats-field--daterange {
  flex: 1 1 14rem;
  min-width: 12rem;
}

.admin-stats-field--metric {
  flex: 1 1 9.5rem;
  min-width: 8.5rem;
}

.admin-stats-metric {
  display: grid;
  grid-template-columns: 3.1rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.25rem;
  min-height: 2.05rem;
  padding: 0 0.35rem 0 0;
  border: 1px solid rgba(168, 134, 92, 0.38);
  border-radius: 2px;
  background: var(--stats-panel-deep);
}

.admin-stats-metric:focus-within {
  border-color: rgba(201, 165, 116, 0.72);
  box-shadow: 0 0 0 1px rgba(201, 165, 116, 0.28);
}

.admin-stats-metric select {
  min-height: 1.9rem;
  padding: 0.2rem 0.15rem;
  border: 0;
  border-right: 1px solid rgba(168, 134, 92, 0.28);
  border-radius: 0;
  background: transparent;
  color: var(--stats-paper);
  font: inherit;
  font-size: 0.72rem;
  text-align: center;
  appearance: none;
  -webkit-appearance: none;
}

.admin-stats-metric-pct {
  width: 100%;
  min-height: 1.9rem;
  padding: 0.25rem 0.2rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--stats-paper);
  font: inherit;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  box-shadow: none;
}

.admin-stats-metric-pct:focus {
  outline: none;
  box-shadow: none;
}

.admin-stats-metric-unit {
  padding-right: 0.3rem;
  color: var(--stats-gold-dim);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
}

.admin-stats-holdings-filters .admin-stats-metric-unit,
.admin-stats-brief-filters .admin-stats-metric-unit {
  color: #f0d9a8;
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-stats-metric--count {
  grid-template-columns: 3.1rem minmax(0, 1fr);
  padding-right: 0.35rem;
}

.admin-stats-daterange {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.25rem;
  min-height: 2.05rem;
  padding: 0 0.35rem;
  border: 1px solid rgba(168, 134, 92, 0.38);
  border-radius: 2px;
  background: var(--stats-panel-deep);
}

.admin-stats-daterange:focus-within {
  border-color: rgba(201, 165, 116, 0.72);
  box-shadow: 0 0 0 1px rgba(201, 165, 116, 0.28);
}

.admin-stats-daterange .admin-stats-date {
  width: 100%;
  min-height: 1.9rem;
  padding: 0.25rem 0.3rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.admin-stats-daterange .admin-stats-date:focus {
  outline: none;
  border: 0;
  box-shadow: none;
}

.admin-stats-daterange-sep {
  color: var(--stats-gold-dim);
  font-size: 0.72rem;
  line-height: 1;
}

.admin-stats-field span {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stats-gold-dim);
}

.admin-stats-field select,
.admin-stats-field input {
  box-sizing: border-box;
  width: 100%;
  min-height: 2.05rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid rgba(168, 134, 92, 0.38);
  border-radius: 2px;
  background: var(--stats-panel-deep);
  color: var(--stats-paper);
  font: inherit;
  font-size: 0.74rem;
  appearance: none;
  -webkit-appearance: none;
}

.admin-stats-field select {
  padding-right: 1.75rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23c9a574' d='M1.2 1.4L6 6.2 10.8 1.4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.55rem center;
  background-size: 0.7rem 0.45rem;
  cursor: pointer;
}

.admin-stats-field select:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.admin-stats-field select:focus,
.admin-stats-field input:focus {
  outline: none;
  border-color: rgba(201, 165, 116, 0.72);
  box-shadow: 0 0 0 1px rgba(201, 165, 116, 0.28);
}

.admin-stats-field input::placeholder {
  color: rgba(197, 212, 200, 0.35);
}

.admin-stats-stepper {
  position: relative;
  display: grid;
}

.admin-stats-stepper-input {
  -moz-appearance: textfield;
  padding-right: 1.7rem !important;
}

.admin-stats-stepper-input::-webkit-outer-spin-button,
.admin-stats-stepper-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.admin-stats-stepper-btns {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  display: grid;
  grid-template-rows: 1fr 1fr;
  width: 1.35rem;
  border-left: 1px solid rgba(168, 134, 92, 0.28);
  background: rgba(168, 134, 92, 0.08);
}

.admin-stats-stepper-btn {
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--stats-gold);
  font-size: 0.55rem;
  line-height: 1;
  cursor: pointer;
}

.admin-stats-stepper-btn + .admin-stats-stepper-btn {
  border-top: 1px solid rgba(168, 134, 92, 0.22);
}

.admin-stats-stepper-btn:hover {
  background: rgba(168, 134, 92, 0.22);
  color: var(--stats-paper);
}

.admin-stats-stepper-btn:active {
  background: rgba(168, 134, 92, 0.35);
}

.admin-stats-go {
  flex: 0 0 auto;
  align-self: end;
  min-height: 2.05rem;
  min-width: 3.4rem;
  padding: 0 0.9rem;
  border: 1px solid rgba(201, 165, 116, 0.65);
  border-radius: 2px;
  background: #0c0d10;
  color: var(--accent-hot, #c9a574);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  cursor: pointer;
}

.admin-stats-go:hover {
  filter: brightness(1.08);
  border-color: rgba(201, 165, 116, 0.85);
  color: #e8d4b0;
}

/*
 * Admin desk — action buttons: dark fill (#0c0d10), gold rim/text
 * (was solid gold fill). Excludes sidebar tabs, combo toggles,
 * password eye toggles, and large section-launch cards.
 */
.admin-page .admin-stats-go,
.admin-page .admin-create-submit,
.admin-page .admin-submit,
.admin-page button.cta,
.admin-page a.cta,
.admin-page .admin-blacklist-submit,
.admin-page .admin-blacklist-open,
.admin-page .admin-stats-pager-btn,
.admin-page .admin-investigation-filter-btn,
.admin-page .admin-investigation-btn,
.admin-page .admin-investigation-link-btn,
.admin-page .admin-stats-holdings-close,
.admin-page .admin-stats-drawer-close,
.admin-page .admin-back-link--btn,
.admin-page .admin-pw-copy,
.admin-page .admin-blacklist-dialog-x,
.admin-page .admin-user-section-dialog-x,
.admin-page .admin-pw-dialog-x,
.admin-page button.ghost:not(.pw-toggle):not(.user-combo-toggle):not([data-user-combo-toggle]):not([data-grant-tag-toggle]):not([data-ledger-combo-toggle]):not(.hist-admin-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 2.05rem;
  padding: 0.35rem 0.9rem;
  border: 1px solid rgba(201, 165, 116, 0.65) !important;
  border-radius: 2px !important;
  background: #0c0d10 !important;
  color: var(--accent-hot, #c9a574) !important;
  font-family: inherit !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
  filter: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.admin-page .admin-stats-go:hover,
.admin-page .admin-create-submit:hover,
.admin-page .admin-submit:hover,
.admin-page button.cta:hover,
.admin-page a.cta:hover,
.admin-page .admin-blacklist-submit:hover,
.admin-page .admin-blacklist-open:hover,
.admin-page .admin-stats-pager-btn:hover,
.admin-page .admin-investigation-filter-btn:hover,
.admin-page .admin-investigation-btn:hover,
.admin-page .admin-investigation-link-btn:hover,
.admin-page .admin-stats-holdings-close:hover,
.admin-page .admin-stats-drawer-close:hover,
.admin-page .admin-back-link--btn:hover,
.admin-page .admin-pw-copy:hover,
.admin-page .admin-blacklist-dialog-x:hover,
.admin-page .admin-user-section-dialog-x:hover,
.admin-page .admin-pw-dialog-x:hover,
.admin-page button.ghost:not(.pw-toggle):not(.user-combo-toggle):not([data-user-combo-toggle]):not([data-grant-tag-toggle]):not([data-ledger-combo-toggle]):not(.hist-admin-btn):hover,
.admin-page .admin-stats-go:focus-visible,
.admin-page .admin-create-submit:focus-visible,
.admin-page .admin-submit:focus-visible,
.admin-page button.cta:focus-visible,
.admin-page .admin-blacklist-submit:focus-visible,
.admin-page .admin-blacklist-open:focus-visible,
.admin-page .admin-stats-pager-btn:focus-visible,
.admin-page .admin-investigation-filter-btn:focus-visible,
.admin-page .admin-investigation-btn:focus-visible,
.admin-page .admin-investigation-link-btn:focus-visible,
.admin-page .admin-stats-holdings-close:focus-visible,
.admin-page .admin-stats-drawer-close:focus-visible,
.admin-page .admin-back-link--btn:focus-visible,
.admin-page button.ghost:not(.pw-toggle):not(.user-combo-toggle):not([data-user-combo-toggle]):not([data-grant-tag-toggle]):not([data-ledger-combo-toggle]):not(.hist-admin-btn):focus-visible {
  filter: brightness(1.08) !important;
  color: #e8d4b0 !important;
  border-color: rgba(201, 165, 116, 0.85) !important;
  background: #0c0d10 !important;
  outline: none;
}

.admin-page .admin-stats-pager-btn.is-disabled,
.admin-page .admin-stats-pager-btn:disabled,
.admin-page .admin-create-submit:disabled,
.admin-page .admin-submit:disabled,
.admin-page button.cta:disabled {
  opacity: 0.42 !important;
  filter: none !important;
  cursor: default !important;
  pointer-events: none;
  color: var(--accent-hot, #c9a574) !important;
  background: #0c0d10 !important;
}

/* Regrade — flat Bloomberg terminal chip (no ghost 3D edge; avoids row clip) */
.admin-page .hist-admin-btn,
#panel-sessions .hist-admin-btn,
.admin-page #panel-sessions .hist-admin-btn,
#admin-user-hist-dialog .hist-admin-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  align-self: center;
  margin: 0;
  min-height: 1.35rem !important;
  height: 1.35rem;
  padding: 0 0.45rem !important;
  border: 1px solid rgba(201, 165, 116, 0.55) !important;
  border-radius: 1px !important;
  background: #0c0d10 !important;
  color: var(--stats-bbg, #c9a574) !important;
  font-family: var(--stats-mono, "IBM Plex Mono", ui-monospace, monospace) !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  cursor: pointer;
}

.admin-page .hist-admin-btn:hover,
.admin-page .hist-admin-btn:focus-visible,
#panel-sessions .hist-admin-btn:hover,
#panel-sessions .hist-admin-btn:focus-visible,
.admin-page #panel-sessions .hist-admin-btn:hover,
.admin-page #panel-sessions .hist-admin-btn:focus-visible,
#admin-user-hist-dialog .hist-admin-btn:hover,
#admin-user-hist-dialog .hist-admin-btn:focus-visible {
  background: rgba(201, 165, 116, 0.14) !important;
  border-color: rgba(232, 205, 150, 0.85) !important;
  color: #ffe2b0 !important;
  outline: none;
  filter: none !important;
  transform: none !important;
  box-shadow: none !important;
}

.admin-page .hist-admin-btn:active,
#panel-sessions .hist-admin-btn:active,
#admin-user-hist-dialog .hist-admin-btn:active {
  background: rgba(201, 165, 116, 0.22) !important;
  transform: none !important;
  box-shadow: none !important;
}

.admin-page .admin-stats-pager-btn {
  min-height: 1.7rem;
  padding: 0.2rem 0.65rem;
  font-size: 0.66rem !important;
}

.admin-page .admin-investigation-link-btn {
  min-height: 1.55rem;
  padding: 0.2rem 0.65rem;
  font-size: 0.66rem !important;
  background: transparent !important;
  border: 0 !important;
  color: #e8d4b0 !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-decoration: underline !important;
  text-underline-offset: 0.15em;
}

.admin-page .admin-investigation-link-btn:hover,
.admin-page .admin-investigation-link-btn:focus-visible {
  filter: none !important;
  color: #f2e2c4 !important;
  background: transparent !important;
}

.admin-stats-empty {
  margin: 1.5rem 0;
  padding: 1.25rem;
  text-align: center;
  border: 1px dashed var(--stats-line);
  color: var(--stats-muted);
}

.admin-stats-empty kbd {
  padding: 0.05rem 0.35rem;
  border: 1px solid var(--stats-line);
  color: var(--stats-gold);
  font: inherit;
  font-size: 0.72rem;
}

.admin-stats-board {
  margin-bottom: 0;
  border: 1px solid var(--stats-line-soft);
  background: var(--stats-line-soft);
}

.admin-stats-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  border: 0;
  background: var(--stats-line-soft);
}

.admin-stats-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--stats-line-soft);
  background: var(--stats-line-soft);
}

.admin-stats-kpi {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.28rem;
  align-content: start;
  padding: 0.7rem 0.75rem 0.8rem;
  border: 0;
  border-radius: 0;
  background: var(--stats-panel);
  outline: none;
  cursor: default;
}

.admin-stats-kpi.is-explainable {
  cursor: pointer;
}

.admin-stats-kpi.is-explainable:hover,
.admin-stats-kpi.is-explainable:focus-visible,
.admin-stats-kpi.is-open {
  z-index: 8;
  box-shadow: inset 0 0 0 1px rgba(168, 134, 92, 0.45);
}

.admin-stats-kpi-detail {
  display: grid;
  gap: 0.28rem;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - 1px);
  bottom: auto;
  z-index: 9;
  padding: 0.55rem 0.75rem 0.7rem;
  border: 1px solid rgba(168, 134, 92, 0.35);
  border-top-color: rgba(168, 134, 92, 0.2);
  background: var(--stats-detail);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-0.2rem);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
}

.admin-stats-kpi.is-open .admin-stats-kpi-detail {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

@media (hover: none) {
  .admin-stats-kpi.is-open .admin-stats-kpi-detail {
    position: static;
    border: 0;
    box-shadow: none;
    padding: 0.15rem 0 0;
    transform: none;
  }
}

.admin-stats-kpi-kicker {
  margin: 0;
  font-family: var(--font-herald);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stats-gold-dim);
}

.admin-stats-kpi-value {
  margin: 0;
  font-family: var(--stats-mono);
  font-size: clamp(1.02rem, 1.75vw, 1.28rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--stats-gold);
  font-variant-numeric: tabular-nums;
}

.admin-stats-kpi-note {
  margin: 0;
  font-size: 0.66rem;
  line-height: 1.35;
  color: var(--stats-muted);
}

.admin-stats-kpi-notes {
  display: grid;
  gap: 0.12rem;
}

.admin-stats-meter {
  display: block;
  height: 0.2rem;
  margin-top: 0.15rem;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.admin-stats-meter > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, rgba(168, 134, 92, 0.55), var(--stats-gold));
}

.admin-stats-meter.is-amber > i {
  background: linear-gradient(90deg, rgba(168, 134, 92, 0.4), rgba(201, 165, 116, 0.85));
}

.admin-stats-twin {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.1rem;
}

.admin-stats-meter-row {
  display: grid;
  gap: 0.12rem;
}

.admin-stats-meter-label {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stats-muted);
}

.admin-stats-meter-label em {
  margin-left: 0.35rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--stats-gold-dim);
  font-variant-numeric: tabular-nums;
}

.admin-stats-meter-row .admin-stats-meter {
  margin-top: 0;
}

.admin-stats-card {
  padding: 0.75rem 0.85rem;
  border: 0;
  border-radius: 0;
  background: var(--stats-panel);
}

.admin-stats-card-title {
  margin: 0 0 0.55rem;
  font-family: var(--font-herald);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stats-gold);
}

.admin-stats-card-empty {
  margin: 0.45rem 0 0;
  font-size: 0.74rem;
  color: var(--stats-muted);
}

.admin-stats-stack {
  display: flex;
  height: 0.7rem;
  overflow: hidden;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.06);
}

.admin-stats-stack-seg {
  display: block;
  min-width: 0;
  height: 100%;
}

.admin-stats-stack-seg.is-pass,
.admin-stats-legend i.is-pass,
.admin-stats-legend-chip i.is-pass,
.admin-stats-legend-defs i.is-pass {
  background: var(--stats-green);
}

.admin-stats-stack-seg.is-borderline,
.admin-stats-legend i.is-borderline,
.admin-stats-legend-chip i.is-borderline,
.admin-stats-legend-defs i.is-borderline {
  background: var(--stats-gold);
}

.admin-stats-stack-seg.is-fail,
.admin-stats-legend i.is-fail,
.admin-stats-legend-chip i.is-fail,
.admin-stats-legend-defs i.is-fail {
  background: var(--stats-red);
}

.admin-stats-stack-seg.is-ungraded,
.admin-stats-legend i.is-ungraded,
.admin-stats-legend-chip i.is-ungraded,
.admin-stats-legend-defs i.is-ungraded {
  background: rgba(140, 150, 160, 0.45);
}

.admin-stats-stack-seg.is-band0,
.admin-stats-legend i.is-band0 {
  background: #b05c52;
}

.admin-stats-stack-seg.is-band1,
.admin-stats-legend i.is-band1 {
  background: #ba7c48;
}

.admin-stats-stack-seg.is-band2,
.admin-stats-legend i.is-band2 {
  background: #bc9c58;
}

.admin-stats-stack-seg.is-band3,
.admin-stats-legend i.is-band3 {
  background: #709470;
}

.admin-stats-stack-seg.is-band4,
.admin-stats-legend i.is-band4 {
  background: #488c80;
}

.admin-stats-hist-gaps {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
  margin: 0 0 0.55rem;
}

.admin-stats-hist-gap-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.22rem;
}

.admin-stats-hist-gap-tag {
  appearance: none;
  margin: 0;
  padding: 0.16rem 0.38rem;
  border: 1px solid rgba(168, 134, 92, 0.32);
  border-radius: 1px;
  background: rgba(0, 0, 0, 0.35);
  color: rgba(197, 186, 160, 0.78);
  font: inherit;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-transform: uppercase;
  cursor: pointer;
}

.admin-stats-hist-gap-tag:hover,
.admin-stats-hist-gap-tag:focus-visible {
  border-color: rgba(168, 134, 92, 0.55);
  color: var(--stats-gold);
  outline: none;
}

.admin-stats-hist-gap-tag.is-on {
  border-color: rgba(168, 134, 92, 0.65);
  background: rgba(168, 134, 92, 0.14);
  color: var(--stats-gold);
  box-shadow: inset 0 0 0 1px rgba(168, 134, 92, 0.18);
}

.admin-stats-hist-smooth-tag {
  appearance: none;
  margin: 0 0 0 auto;
  padding: 0.2rem 0.55rem;
  border: 1px solid rgba(111, 191, 138, 0.55);
  border-radius: 999px;
  background: transparent;
  color: rgba(150, 200, 170, 0.78);
  font: inherit;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: none;
}

.admin-stats-hist-smooth-tag:hover,
.admin-stats-hist-smooth-tag:focus-visible {
  border-color: rgba(111, 191, 138, 0.85);
  color: #9fd9b2;
  background: rgba(111, 191, 138, 0.06);
  outline: none;
}

.admin-stats-hist-smooth-tag.is-on {
  border-color: rgba(111, 191, 138, 0.95);
  background: linear-gradient(180deg, rgba(111, 191, 138, 0.55), rgba(48, 120, 78, 0.72));
  color: #e8fff0;
  box-shadow:
    inset 0 1px 0 rgba(220, 255, 230, 0.18),
    0 0 0 1px rgba(111, 191, 138, 0.28);
}

.admin-stats-outcome-rules {
  margin: 0 0 0.55rem;
  padding: 0.4rem 0.5rem;
  border-left: 2px solid var(--stats-gold);
  background: rgba(168, 134, 92, 0.08);
  font-size: 0.64rem;
  line-height: 1.45;
  color: var(--stats-paper);
}

.admin-stats-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem;
  margin: 0.55rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.66rem;
  color: var(--stats-muted);
}

.admin-stats-legend li,
.admin-stats-legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  cursor: default;
  border-radius: 1px;
  outline: none;
}

.admin-stats-stack-block {
  display: grid;
  gap: 0.35rem;
  margin: 0 0 0.35rem;
}

.admin-stats-stack-axis {
  position: relative;
  height: 1.35rem;
  margin: 0.12rem 0.05rem 0;
}

.admin-stats-stack-mark {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  max-width: 5.5rem;
  font-family: var(--stats-mono);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.03em;
  color: rgba(245, 248, 246, 0.92);
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}

.admin-stats-stack-mark.is-lead {
  transform: translateX(0);
  text-align: left;
}

.admin-stats-stack-mark.is-trail {
  transform: translateX(-100%);
  text-align: right;
}

.admin-stats-perf-legend {
  display: grid;
  gap: 0.35rem 0.55rem;
  margin-top: 0.55rem;
}

.admin-stats-perf-legend[data-gap="25"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-stats-perf-legend[data-gap="20"] {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.admin-stats-perf-legend[data-gap="10"] {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.admin-stats-perf-legend .admin-stats-legend-chip {
  min-width: 0;
}

.admin-stats-legend-defs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
  font-size: 0.62rem;
  line-height: 1.4;
  color: var(--stats-muted);
}

.admin-stats-legend strong,
.admin-stats-legend-chip strong {
  color: var(--stats-paper);
  font-variant-numeric: tabular-nums;
}

.admin-stats-legend i,
.admin-stats-legend-chip i {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 0;
  flex: 0 0 auto;
}

.admin-stats-mix.is-explainable {
  cursor: pointer;
  position: relative;
  z-index: 1;
}

.admin-stats-mix.is-explainable:hover,
.admin-stats-mix.is-explainable:focus-visible,
.admin-stats-mix.is-open {
  z-index: 8;
  box-shadow: inset 0 0 0 1px rgba(168, 134, 92, 0.45);
}

.admin-stats-mix-detail {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - 1px);
  z-index: 9;
  padding: 0.55rem 0.75rem 0.7rem;
  border: 1px solid rgba(168, 134, 92, 0.35);
  border-top-color: rgba(168, 134, 92, 0.2);
  background: var(--stats-detail);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-0.2rem);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
}

.admin-stats-mix.is-open .admin-stats-mix-detail {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.admin-stats-mix-rule {
  margin: 0 0 0.55rem;
}

.admin-stats-mix-total {
  margin: 0.4rem 0 0;
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.35;
  color: var(--stats-muted);
}

.admin-stats-mix .admin-stats-hist-caption.admin-stats-mix-total,
.admin-stats-perf .admin-stats-hist-caption.admin-stats-mix-total {
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--stats-muted);
}

.admin-stats-mix-total-n {
  font-weight: 700;
  font-size: inherit;
  color: rgba(245, 248, 246, 0.96);
}

.admin-stats-mix-total-rest {
  font-weight: 400;
  font-size: inherit;
  color: var(--stats-muted);
}

.admin-stats-perf.is-explainable {
  cursor: pointer;
  position: relative;
  z-index: 1;
}

.admin-stats-perf.is-explainable:hover,
.admin-stats-perf.is-explainable:focus-visible,
.admin-stats-perf.is-open {
  z-index: 8;
  box-shadow: inset 0 0 0 1px rgba(168, 134, 92, 0.45);
}

.admin-stats-perf-detail {
  grid-column: 1 / -1;
  display: none;
  padding: 0.55rem 0.85rem 0.85rem;
  border: 1px solid rgba(168, 134, 92, 0.35);
  border-top: 1px solid rgba(168, 134, 92, 0.2);
  background: var(--stats-detail);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
}

.admin-stats-perf-detail[hidden] {
  display: none !important;
}

.admin-stats-perf-detail.is-open,
.admin-stats-perf.is-open + .admin-stats-perf-detail {
  display: block;
}

.admin-stats-perf.is-open + .admin-stats-perf-detail .admin-stats-hist-chart,
.admin-stats-perf.is-open + .admin-stats-perf-detail .admin-stats-hist-chart.is-curve-pane {
  min-height: 9.5rem;
}

.admin-stats-band,
.admin-stats-board {
  overflow: visible;
}

.admin-stats-legend-defs li {
  display: grid;
  gap: 0.1rem;
}

.admin-stats-legend-def-name {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(210, 218, 212, 0.72);
}

.admin-stats-legend-defs i {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 0;
  flex: 0 0 auto;
}

.admin-stats-legend-def-count {
  font-family: var(--stats-mono);
  font-size: 0.62rem;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: rgba(245, 248, 246, 0.78);
}

.admin-stats-legend-def-count strong {
  font-weight: 700;
  color: rgba(245, 248, 246, 0.96);
}

.admin-stats-legend-def-blurb {
  color: var(--stats-muted);
}

.admin-stats-hist-wrap {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  gap: 0.35rem 0.45rem;
  align-items: stretch;
  margin-top: 0.35rem;
}

.admin-stats-hist-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.7rem;
  min-width: 0;
}

.admin-stats-hist-wrap.is-smooth-split .admin-stats-hist-duo {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}

.admin-stats-hist-wrap.is-smooth-split {
  --hist-stage-h: 9.5rem;
}

.admin-stats-hist-wrap.is-smooth-split .admin-stats-hist-smooth-pane,
.admin-stats-hist-wrap.is-smooth-split .admin-stats-hist-bars-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.admin-stats-hist-wrap.is-smooth-split .admin-stats-hist-plot {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 0;
  min-height: 0;
}

.admin-stats-hist-wrap.is-smooth-split .admin-stats-hist-chart.is-curve-pane,
.admin-stats-hist-wrap.is-smooth-split .admin-stats-hist-bars-pane > .admin-stats-hist-plot > .admin-stats-hist-chart {
  flex: 0 0 var(--hist-stage-h);
  height: var(--hist-stage-h);
  min-height: var(--hist-stage-h);
  max-height: var(--hist-stage-h);
}

.admin-stats-hist-wrap.is-smooth-split .admin-stats-hist-bars-pane .admin-stats-hist-chart {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.admin-stats-hist-wrap.is-smooth-split .admin-stats-hist-bars {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  padding: 0.35rem 0.25rem 0;
  box-sizing: border-box;
}

.admin-stats-hist-wrap.is-smooth-split .admin-stats-hist-bars.is-dense,
.admin-stats-hist-wrap.is-smooth-split .admin-stats-hist-bars.is-ultra {
  min-height: 0;
}

.admin-stats-hist-wrap.is-smooth-split .admin-stats-hist-chart.is-curve-pane .admin-stats-hist-curve.is-pane {
  top: 0.35rem;
  height: calc(100% - 0.35rem);
}

.admin-stats-hist-wrap.is-smooth-split .admin-stats-hist-marks {
  flex: 0 0 1.2rem;
  height: 1.2rem;
  margin: 0.18rem 0 0.1rem;
}

.admin-stats-hist-wrap.is-smooth-split .admin-stats-hist-axis {
  flex: 0 0 auto;
  min-height: 0.85rem;
}

@media (max-width: 720px) {
  .admin-stats-hist-wrap.is-smooth-split .admin-stats-hist-duo {
    grid-template-columns: minmax(0, 1fr);
  }
}

.admin-stats-hist-smooth-pane[hidden] {
  display: none !important;
}

.admin-stats-hist-smooth-pane,
.admin-stats-hist-bars-pane {
  min-width: 0;
}

.admin-stats-hist-toolbar {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 0.45rem;
}

.admin-stats-hist-gap {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stats-gold-dim);
}

.admin-stats-hist-gap select {
  min-width: 6.5rem;
  padding: 0.22rem 0.4rem;
  border: 1px solid var(--stats-line);
  border-radius: 1px;
  background: #0c0d10;
  color: var(--stats-bbg);
  font: inherit;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: none;
  cursor: pointer;
}

.admin-stats-hist-y {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  align-self: center;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stats-gold-dim);
}

.admin-stats-hist-plot {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.admin-stats-hist-chart {
  position: relative;
  min-width: 0;
  min-height: 7.5rem;
  overflow: hidden;
}

.admin-stats-hist-curve {
  position: absolute;
  left: 0;
  right: 0;
  top: 1.1rem;
  bottom: 0;
  z-index: 2;
  width: 100%;
  height: calc(100% - 1.1rem);
  min-height: 0;
  max-height: none;
  overflow: hidden;
  pointer-events: none;
}

.admin-stats-hist-curve.is-pane {
  position: absolute;
  inset: 0;
  top: 0;
  height: 100%;
  z-index: 2;
}

.admin-stats-hist-chart.is-curve-pane {
  min-height: 7.5rem;
  overflow: visible;
  border-bottom: 1px solid rgba(168, 134, 92, 0.28);
  background:
    repeating-linear-gradient(
      to top,
      rgba(168, 134, 92, 0.07) 0,
      rgba(168, 134, 92, 0.07) 1px,
      transparent 1px,
      transparent 25%
    );
}

.admin-stats-hist-chart.is-curve-pane .admin-stats-hist-curve.is-pane {
  top: 0.35rem;
  height: calc(100% - 0.35rem);
  overflow: visible;
}

.admin-stats-hist-curve-anchor {
  opacity: 0.95;
}

.admin-stats-hist-curve-fill {
  opacity: 0.28;
}

.admin-stats-hist-curve-stroke {
  fill: none;
  stroke-width: 2.25;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: 0.95;
}

.admin-stats-hist-guides {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.admin-stats-hist-guide {
  position: absolute;
  top: 0.2rem;
  bottom: 0;
  width: 0;
  border-left: 1px dashed rgba(232, 239, 233, 0.28);
  transform: translateX(-50%);
}

.admin-stats-hist-guide.is-lead {
  transform: translateX(0);
  border-left-color: rgba(232, 239, 233, 0.38);
}

.admin-stats-hist-guide.is-trail {
  transform: translateX(-100%);
  border-left-color: rgba(232, 239, 233, 0.38);
}

.admin-stats-hist-guide.is-minor {
  border-left-color: rgba(232, 239, 233, 0.12);
}

.admin-stats-hist-bars {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(var(--hist-bins, 5), minmax(0, 1fr));
  gap: 0.35rem;
  align-items: end;
  min-height: 7.5rem;
  padding: 0.35rem 0.25rem 0;
  border-bottom: 1px solid rgba(168, 134, 92, 0.28);
  background:
    repeating-linear-gradient(
      to top,
      rgba(168, 134, 92, 0.07) 0,
      rgba(168, 134, 92, 0.07) 1px,
      transparent 1px,
      transparent 25%
    );
}

.admin-stats-hist-bars.is-dense {
  gap: 0.12rem;
  min-height: 8.5rem;
}

.admin-stats-hist-bars.is-ultra {
  gap: 0;
  min-height: 9.5rem;
}

.admin-stats-hist-bars.is-ultra .admin-stats-hist-count {
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  height: 0;
  margin: 0;
  padding: 0;
}

.admin-stats-hist-bars.is-ultra .admin-stats-hist-col {
  gap: 0;
}

.admin-stats-hist-bars.is-ultra .admin-stats-hist-bar,
.admin-stats-hist-chart:has(.admin-stats-hist-bars.is-ultra) .admin-stats-hist-bar {
  width: 100%;
  max-width: none;
  border-radius: 0;
}

.admin-stats-hist-col {
  display: grid;
  grid-template-rows: auto 1fr;
  justify-items: center;
  align-items: end;
  min-width: 0;
  height: 100%;
  gap: 0.2rem;
}

.admin-stats-hist-count {
  font-size: 0.56rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--stats-bbg);
  line-height: 1;
}

.admin-stats-hist-bars.is-dense .admin-stats-hist-count {
  font-size: 0.46rem;
}

.admin-stats-hist-bar {
  display: block;
  width: 78%;
  max-width: none;
  min-height: 0;
  align-self: end;
  justify-self: center;
  background: linear-gradient(180deg, var(--stats-bbg), var(--stats-bbg-deep));
  box-shadow: 0 0 0 1px rgba(168, 134, 92, 0.22);
  border-radius: 1px 1px 0 0;
}

.admin-stats-hist-bar.is-empty {
  height: 0 !important;
  min-height: 0;
  background: transparent;
  box-shadow: none;
}

.admin-stats-hist-bars.is-dense .admin-stats-hist-bar {
  width: 70%;
  max-width: 0.85rem;
}

.admin-stats-hist-chart:has(.admin-stats-hist-bars.is-dense) ~ .admin-stats-hist-marks .admin-stats-hist-mark,
.admin-stats-hist-chart:has(.admin-stats-hist-bars.is-ultra) ~ .admin-stats-hist-marks .admin-stats-hist-mark {
  font-size: 0.52rem;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.admin-stats-hist-marks {
  position: relative;
  height: 1.2rem;
  margin: 0.18rem 0 0.1rem;
}

.admin-stats-hist-mark {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  max-width: 5.5rem;
  font-family: var(--stats-mono);
  font-size: 0.54rem;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: rgba(232, 239, 233, 0.82);
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}

.admin-stats-hist-mark.is-lead {
  transform: translateX(0);
  text-align: left;
}

.admin-stats-hist-mark.is-trail {
  transform: translateX(-100%);
  text-align: right;
}

.admin-stats-hist-axis {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.56rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--stats-gold-dim);
  white-space: nowrap;
}

.admin-stats-hist-axis > span:nth-child(2) {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-stats-hist-caption {
  margin: 0.45rem 0 0;
  font-size: 0.62rem;
  color: var(--stats-muted);
}

.admin-stats-perf .admin-stats-hist-caption:not(.admin-stats-mix-total) {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--stats-muted);
}

.admin-stats-drawer-code-pass {
  margin: 0.85rem 0 0;
  padding-top: 0.65rem;
  border-top: 1px dashed rgba(168, 134, 92, 0.28);
}

.admin-stats-drawer-code-pass .admin-stats-drawer-label {
  margin-bottom: 0.2rem;
}

.admin-stats-drawer-hint-line {
  margin: 0.35rem 0 0;
  font-size: 0.62rem;
  line-height: 1.4;
  color: var(--stats-muted);
}

.admin-stats-holdings-filters-fold {
  margin: 0 0 0.55rem;
  border: 1px solid var(--stats-line);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.28);
}

.admin-stats-holdings-filters-fold > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
  list-style: none;
  padding: 0.45rem 0.65rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stats-gold-dim);
  user-select: none;
}

.admin-stats-holdings-filters-fold > summary::-webkit-details-marker {
  display: none;
}

.admin-stats-holdings-filters-fold[open] > summary {
  border-bottom: 1px solid var(--stats-line-soft);
  color: var(--stats-gold);
}

.admin-stats-holdings-filters {
  display: block;
  margin: 0;
  padding: 0.55rem 0.6rem 0.65rem;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.admin-stats-holdings-filters-stack {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.admin-stats-holdings-filters-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: end;
  gap: 0.5rem 0.65rem;
}

.admin-stats-holdings-filters-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.55rem;
  align-items: end;
  flex: 1 1 0;
  min-width: 0;
}

.admin-stats-holdings-filters-rows {
  flex: 0 0 auto;
  width: auto;
  min-width: 5rem;
}

.admin-stats-holdings-filters-row .admin-stats-holdings-search {
  flex: 0 0 auto;
  margin-left: 0;
  min-width: 5rem;
}

.admin-stats-holdings-search {
  margin-left: auto;
}

.admin-stats-field--time {
  flex: 2 1 14rem;
  min-width: 12rem;
}

.admin-stats-metric--time {
  grid-template-columns: 3.1rem minmax(2.2rem, 1fr) auto minmax(2.2rem, 1fr) auto;
  padding-right: 0.3rem;
}

.admin-stats-holdings-open {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 1rem;
  width: 100%;
  margin: 0;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--stats-line-soft);
  border-radius: 2px;
  background: var(--stats-panel);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.admin-stats-holdings-open:hover,
.admin-stats-holdings-open:focus-visible {
  border-color: rgba(168, 134, 92, 0.55);
  box-shadow: inset 0 0 0 1px rgba(168, 134, 92, 0.28);
  outline: none;
}

.admin-stats-holdings-open-title {
  font-family: var(--font-herald);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stats-gold);
}

.admin-stats-holdings-open-meta {
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--stats-muted);
}

.admin-stats-holdings-dialog,
.admin-stats-brief-dialog {
  width: min(96vw, 88rem);
  max-width: 96vw;
  height: min(calc(100dvh - var(--desk-chrome-clear) - 2.25rem), 48rem);
  max-height: calc(100dvh - var(--desk-chrome-clear) - 2.25rem);
  margin-top: calc(var(--desk-chrome-clear) + 0.35rem);
  margin-bottom: 1rem;
  margin-left: max(2vw, calc((100vw - min(96vw, 68rem)) / 2 - 10rem));
  margin-right: max(2vw, calc((100vw - min(96vw, 68rem)) / 2 - 10rem));
  padding: 0;
}

.admin-stats-holdings-dialog {
  border: 1px solid rgba(168, 134, 92, 0.45);
  border-radius: 3px;
  background: #0c0c0e;
  color: inherit;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65);
}

.admin-stats-holdings-dialog::backdrop {
  background: rgba(4, 4, 6, 0.72);
}

.admin-stats-holdings-dialog[open] {
  display: flex;
  flex-direction: column;
}

.admin-stats-holdings-dialog .admin-stats-holdings {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0.75rem 0.85rem 0.9rem;
  border: 0;
  overflow: hidden;
}

.admin-stats-holdings-dialog .admin-stats-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.admin-stats-holdings-close {
  flex: 0 0 auto;
  min-height: 1.85rem;
  padding: 0 0.75rem;
  border: 1px solid rgba(168, 134, 92, 0.45);
  border-radius: 2px;
  background: rgba(168, 134, 92, 0.12);
  color: var(--stats-gold);
  font: inherit;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.admin-stats-holdings-close:hover {
  background: rgba(168, 134, 92, 0.22);
}

.admin-stats-holdings {
  border: 1px solid var(--stats-line-soft);
  border-top: 0;
  background: var(--stats-panel);
  padding: 0.65rem 0.7rem 0.75rem;
}

.admin-stats-holdings-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.3rem 1rem;
  margin-bottom: 0.45rem;
}

.admin-stats-holdings-note {
  margin: 0;
  font-size: 0.62rem;
  color: var(--stats-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-stats-table-wrap {
  overflow: auto;
  border: 1px solid var(--stats-line-soft);
  border-radius: 2px;
}

.admin-stats-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
}

.admin-stats-table th,
.admin-stats-table td {
  padding: 0.55rem 0.55rem;
  border-bottom: 1px solid rgba(168, 134, 92, 0.1);
  text-align: left;
  vertical-align: middle;
}

.admin-stats-table th + th,
.admin-stats-table td + td {
  border-left: 1px dashed rgba(168, 134, 92, 0.32);
}

.admin-stats-table th {
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stats-gold-dim);
  background: #121214;
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: inset 0 -1px 0 rgba(168, 134, 92, 0.35);
}

.admin-stats-num {
  font-variant-numeric: tabular-nums;
  color: var(--stats-paper);
  white-space: nowrap;
}

.admin-stats-row {
  cursor: pointer;
}

.admin-stats-row:nth-child(even) {
  background: rgba(168, 134, 92, 0.035);
}

.admin-stats-row:hover {
  background: rgba(61, 184, 201, 0.12);
  box-shadow: inset 0 0 0 1px rgba(61, 184, 201, 0.28);
}

.admin-stats-row.is-focus {
  box-shadow: inset 3px 0 0 var(--stats-gold);
  background: rgba(168, 134, 92, 0.1);
}

.admin-stats-row.is-focus:hover {
  background: rgba(61, 184, 201, 0.14);
  box-shadow: inset 3px 0 0 var(--stats-gold), inset 0 0 0 1px rgba(61, 184, 201, 0.28);
}

.admin-stats-instrument {
  display: grid;
  gap: 0.1rem;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.admin-stats-instrument-stem.latex-body,
.admin-stats-drawer-title.latex-body,
.admin-stats-kpi-formula.latex-body,
.admin-stats-kpi-defs.latex-body,
.admin-stats-drawer-note.latex-body,
.admin-stats-math.latex-body {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  white-space: normal;
}

.admin-stats-instrument-stem.latex-body > .latex-para,
.admin-stats-drawer-title.latex-body > .latex-para,
.admin-stats-kpi-formula.latex-body > .latex-para,
.admin-stats-kpi-defs.latex-body > .latex-para,
.admin-stats-drawer-note.latex-body > .latex-para {
  margin: 0;
}

.admin-stats-math.latex-body {
  display: inline;
}

.admin-stats-math.latex-body > .latex-para {
  display: inline;
  margin: 0;
}

.admin-stats-instrument-stem {
  font-weight: 600;
  color: var(--stats-paper);
}

.admin-stats-instrument:hover .admin-stats-instrument-stem {
  color: var(--stats-gold);
}

.admin-stats-instrument-stem .katex {
  font-size: 1em;
}

.admin-stats-instrument code,
.admin-stats-drawer code {
  font-family: var(--stats-mono);
  font-size: 0.62rem;
  color: var(--stats-gold-dim);
}

.admin-stats-c {
  display: block;
  min-width: 2.4rem;
  color: var(--stats-gold);
  font-weight: 700;
  line-height: 1.2;
}

.admin-stats-spark {
  display: block;
  width: 3rem;
  height: 0.2rem;
  margin-top: 0.22rem;
  vertical-align: middle;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.admin-stats-spark > i {
  display: block;
  height: 100%;
  background: var(--stats-gold);
}

.admin-stats-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.08rem 0.38rem;
  border: 1px solid rgba(168, 134, 92, 0.4);
  border-radius: 2px;
  background: transparent;
  font: inherit;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stats-gold);
  cursor: pointer;
}

button.admin-stats-pill:hover,
button.admin-stats-pill:focus-visible {
  border-color: rgba(201, 165, 116, 0.75);
  outline: none;
  box-shadow: 0 0 0 1px rgba(201, 165, 116, 0.18);
}

.admin-stats-pill.is-healthy {
  border-color: rgba(111, 191, 138, 0.5);
  color: var(--stats-green);
}

.admin-stats-pill.is-watch {
  border-color: rgba(201, 120, 104, 0.5);
  color: var(--stats-red);
}

.admin-stats-pill.is-thin {
  opacity: 0.7;
}

.admin-stats-pill.is-soft {
  border-color: rgba(168, 134, 92, 0.55);
  color: #e0c48a;
}

.admin-stats-th-signal-cell {
  white-space: nowrap;
}

.admin-stats-th-signal {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.08rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  text-align: left;
}

.admin-stats-th-signal:hover,
.admin-stats-th-signal:focus-visible {
  color: var(--stats-gold);
  outline: none;
}

.admin-stats-th-signal-hint {
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stats-muted);
}

.admin-stats-th-signal:hover .admin-stats-th-signal-hint,
.admin-stats-th-signal:focus-visible .admin-stats-th-signal-hint {
  color: var(--stats-gold-dim);
}

.admin-stats-signal-dialog {
  width: min(36rem, 94vw);
  height: min(92vh, 48rem);
  max-height: 92vh;
  margin: auto auto auto 0;
  padding: 0;
  border: 1px solid rgba(201, 165, 116, 0.55);
  border-left: 0;
  border-radius: 0 3px 3px 0;
  background: #141210;
  color: #ece4d6;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}

.admin-stats-signal-dialog::backdrop {
  background: rgba(4, 4, 6, 0.72);
}

.admin-stats-signal-dialog[open] {
  display: flex;
  flex-direction: column;
}

.admin-stats-signal-dialog .admin-stats-signal-drawer {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 1rem 1.1rem 1.05rem;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(168, 134, 92, 0.12), transparent 48%),
    #171410;
  overflow: auto;
}

.admin-stats-signal-dialog .admin-stats-kpi-kicker {
  color: #d4b483;
}

.admin-stats-signal-dialog .admin-stats-drawer-title {
  margin: 0.12rem 0 0;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  color: #f0d9a8;
}

.admin-stats-signal-dialog .admin-stats-drawer-note {
  color: #cbb89a;
  font-size: 0.76rem;
  line-height: 1.5;
  padding: 0.55rem 0.65rem;
  border-left: 2px solid rgba(201, 165, 116, 0.55);
  background: rgba(201, 165, 116, 0.08);
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.admin-stats-signal-formula {
  margin: 0.55rem 0 0.85rem;
  font-size: 0.72rem;
  line-height: 1.45;
  color: #b8a88a;
}

.admin-stats-signal-defs {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-stats-signal-def {
  display: grid;
  gap: 0.28rem;
  padding: 0.55rem 0.65rem 0.6rem;
  border: 1px solid rgba(168, 134, 92, 0.28);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.28);
}

.admin-stats-signal-def.is-watch {
  border-color: rgba(201, 120, 104, 0.4);
}

.admin-stats-signal-def.is-healthy {
  border-color: rgba(111, 191, 138, 0.4);
}

.admin-stats-signal-def .admin-stats-pill {
  justify-self: start;
  cursor: default;
  pointer-events: none;
}

.admin-stats-signal-def-rule {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: #f0e6d4;
}

.admin-stats-signal-def-when {
  margin: 0;
  font-size: 0.7rem;
  line-height: 1.4;
  color: #b8a88a;
}

.admin-stats-signal-dialog .admin-stats-drawer-close {
  border-color: rgba(201, 165, 116, 0.55);
  color: #f0d9a8;
  background: rgba(201, 165, 116, 0.12);
}

.admin-stats-signal-dialog .admin-stats-drawer-close:hover {
  background: rgba(201, 165, 116, 0.22);
}

.admin-stats-signal-dialog .admin-stats-drawer-foot {
  margin-top: 0.85rem;
  color: #a89678;
}

.admin-stats-drawer {
  margin-top: 1px;
  padding: 0.85rem 0.9rem 1rem;
  border: 1px solid var(--stats-line);
  border-radius: var(--frame-radius, 3px);
  background:
    linear-gradient(90deg, rgba(168, 134, 92, 0.1), transparent 42%),
    var(--stats-panel);
}

.admin-stats-brief-dialog {
  border: 1px solid rgba(168, 134, 92, 0.55);
  border-radius: 2px;
  background: #101116;
  color: #ece6da;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.72);
  overflow: hidden;
}

.admin-stats-brief-dialog::backdrop {
  background: rgba(4, 4, 6, 0.78);
}

.admin-stats-brief-dialog[open] {
  display: flex;
  flex-direction: column;
}

.admin-stats-brief {
  --brief-ink: #f4efe6;
  --brief-muted: #c4b8a4;
  --brief-label: #e6d0a8;
  --brief-panel: #16181f;
  --brief-panel-soft: #1b1e27;
  --brief-line: rgba(201, 165, 116, 0.42);
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: 1rem;
  padding: 1.15rem 1.25rem 1.2rem;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background:
    linear-gradient(180deg, rgba(168, 134, 92, 0.08), transparent 8rem),
    #12141a;
  color: var(--brief-ink);
  font-family: var(--font-body, "IBM Plex Sans", system-ui, sans-serif);
  font-size: 0.95rem;
  line-height: 1.45;
  pointer-events: auto;
}

.admin-stats-brief::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.admin-stats-brief.is-records-open,
.admin-stats-brief.is-detail-open {
  overflow: hidden;
}

.admin-stats-brief-launches {
  display: grid;
  gap: 0.55rem;
}

.admin-stats-brief-detail-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 0.15rem 0.1rem 0.85rem;
}

.admin-stats-brief-detail-id {
  margin: 0;
}

.admin-stats-brief-detail-id code {
  font-size: 0.78rem;
  color: var(--brief-muted, rgba(197, 212, 200, 0.62));
  word-break: break-all;
}

.admin-stats-brief-detail-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.85rem;
  align-items: stretch;
  min-height: 0;
}

.admin-stats-brief-detail-block {
  margin: 0;
  padding: 0.85rem 0.9rem;
  border: 1px solid rgba(168, 134, 92, 0.28);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.28);
  min-width: 0;
}

.admin-stats-brief-detail-block--solution,
.admin-stats-brief-detail-block--question {
  display: flex;
  flex-direction: column;
  min-height: 12rem;
  max-height: min(52vh, 28rem);
  overflow: auto;
}

.admin-stats-brief-detail-block--hint {
  flex: 0 0 auto;
}

@media (max-width: 52rem) {
  .admin-stats-brief-detail-split {
    grid-template-columns: 1fr;
  }

  .admin-stats-brief-detail-block--solution,
  .admin-stats-brief-detail-block--question {
    max-height: min(40vh, 22rem);
  }
}

.admin-stats-brief-detail-kicker {
  margin: 0 0 0.55rem;
  font-family: var(--font-herald, Cinzel, Georgia, serif);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c9a574;
}

.admin-stats-brief-detail-copy {
  color: #f2e8d8;
  font-size: 0.92rem;
  line-height: 1.55;
}

.admin-stats-brief-detail-copy :where(p, ul, ol) {
  margin: 0 0 0.65rem;
}

.admin-stats-brief-detail-copy :where(p:last-child, ul:last-child, ol:last-child) {
  margin-bottom: 0;
}

.admin-stats-brief-detail-copy [data-code-fold] {
  margin: 0.55rem 0 0;
}

.admin-stats-brief-detail-copy .code-fold-toggle,
.admin-stats-brief-detail-copy [data-code-fold-toggle] {
  pointer-events: auto;
  cursor: pointer;
}

.admin-stats-brief-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--brief-line);
}

.admin-stats-brief-top-main {
  min-width: 0;
  flex: 1 1 auto;
}

.admin-stats-brief .admin-stats-kpi-kicker {
  margin: 0 0 0.4rem;
  font-family: var(--font-herald, Cinzel, Georgia, serif);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #efd5a6;
}

.admin-stats-brief-title {
  margin: 0 0 0.55rem;
  font-family: var(--font-display, Fraunces, Georgia, serif);
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  font-weight: 700;
  line-height: 1.28;
  color: #fff8ec;
}

.admin-stats-brief-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.5rem;
}

.admin-stats-brief-meta code {
  padding: 0.2rem 0.45rem;
  border: 1px solid rgba(201, 165, 116, 0.4);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.28);
  color: #f0e2c8;
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  font-size: 0.78rem;
}

.admin-stats-brief-chip {
  padding: 0.18rem 0.45rem;
  border: 1px solid rgba(201, 165, 116, 0.35);
  border-radius: 2px;
  background: rgba(201, 165, 116, 0.08);
  color: #e8d7b4;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.admin-stats-brief .admin-stats-drawer-close,
.admin-stats-brief-records-sheet .admin-stats-drawer-close {
  position: static;
  flex-shrink: 0;
  align-self: flex-start;
  margin: 0;
  padding: 0.4rem 0.85rem;
  border: 1px solid rgba(201, 165, 116, 0.65);
  border-radius: 2px;
  background: rgba(201, 165, 116, 0.16);
  color: #fff1d4;
  text-decoration: none;
  font-family: var(--font-herald, Cinzel, Georgia, serif);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  cursor: pointer;
}

.admin-stats-brief .admin-stats-drawer-close:hover,
.admin-stats-brief-records-sheet .admin-stats-drawer-close:hover {
  background: rgba(201, 165, 116, 0.28);
}

.admin-stats-brief-search {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.65rem 0.9rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--brief-line);
  border-radius: 2px;
  background: var(--brief-panel);
}

.admin-stats-brief-filters-fold {
  margin: 0 0 0.65rem;
  flex-shrink: 0;
}

.admin-stats-brief-filters {
  width: 100%;
}

.admin-stats-brief-filters-q {
  flex: 1 1 14rem;
  min-width: 12rem;
}

.admin-stats-brief-filters-q input[type="search"] {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0.42rem 0.55rem;
  border: 1px solid rgba(168, 134, 92, 0.45);
  border-radius: 2px;
  background: #0a0b0e;
  color: #fff8ec;
  font: inherit;
}

.admin-stats-brief-filters-q input[type="search"]:focus {
  outline: none;
  border-color: rgba(232, 205, 150, 0.9);
  box-shadow: 0 0 0 2px rgba(201, 165, 116, 0.18);
}

.admin-stats-brief-filters-fold > summary .admin-stats-brief-search-count {
  flex-shrink: 0;
  margin-left: auto;
  white-space: nowrap;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}

.admin-stats-brief-search-field {
  display: grid;
  gap: 0.3rem;
  flex: 1 1 16rem;
  min-width: 0;
  margin: 0;
}

.admin-stats-brief-search-field > span {
  font-family: var(--font-herald, Cinzel, Georgia, serif);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #efd5a6;
}

.admin-stats-brief-search-field input {
  width: 100%;
  margin: 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(201, 165, 116, 0.45);
  border-radius: 2px;
  background: #0d0f14;
  color: #fff8ec;
  font-family: var(--font-body, "IBM Plex Sans", system-ui, sans-serif);
  font-size: 0.95rem;
}

.admin-stats-brief-search-field input::placeholder {
  color: #9f9482;
}

.admin-stats-brief-search-field input:focus {
  outline: none;
  border-color: rgba(232, 205, 150, 0.9);
  box-shadow: 0 0 0 2px rgba(201, 165, 116, 0.22);
}


.admin-stats-brief-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}

.admin-stats-brief-tile,
.admin-stats-brief-code {
  padding: 0.8rem 0.9rem 0.85rem;
  border: 1px solid var(--brief-line);
  border-radius: 2px;
  background: var(--brief-panel);
}

.admin-stats-brief-tile-label {
  margin: 0 0 0.35rem;
  font-family: var(--font-herald, Cinzel, Georgia, serif);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brief-label);
}

.admin-stats-brief-tile-hint {
  margin-left: 0.2rem;
  font-family: var(--font-body, "IBM Plex Sans", system-ui, sans-serif);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--brief-muted);
}

.admin-stats-brief-tile-value {
  margin: 0 0 0.45rem;
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.15;
  color: #fffaf0;
  font-variant-numeric: tabular-nums;
}

.admin-stats-brief-tile-note {
  margin: 0.4rem 0 0;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--brief-muted);
}

.admin-stats-brief-formula {
  margin: 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--brief-line);
  border-left: 3px solid #d4b07a;
  border-radius: 2px;
  background: var(--brief-panel-soft);
}

.admin-stats-brief-formula-eq {
  margin: 0 0 0.55rem;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
  color: #fff6e4;
}

.admin-stats-brief-formula-defs {
  margin: 0 0 0.55rem;
  padding: 0 0 0 1.1rem;
  color: #efe4d0;
  font-size: 0.95rem;
  line-height: 1.55;
}

.admin-stats-brief-formula-defs li + li {
  margin-top: 0.15rem;
}

.admin-stats-brief-formula-note {
  margin: 0;
  color: var(--brief-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.admin-stats-brief-dist,
.admin-stats-brief-panel {
  padding: 0.85rem 0.95rem 0.9rem;
  border: 1px solid var(--brief-line);
  border-radius: 2px;
  background: var(--brief-panel);
}

.admin-stats-brief-dist-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}

.admin-stats-brief .admin-stats-section-title,
.admin-stats-brief-dist-head .admin-stats-section-title,
.admin-stats-brief-panel .admin-stats-section-title {
  margin: 0 0 0.55rem;
  font-family: var(--font-herald, Cinzel, Georgia, serif);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #efd5a6;
}

.admin-stats-brief-dist-head .admin-stats-section-title {
  margin-bottom: 0;
}

.admin-stats-brief .admin-stats-seat-mix,
.admin-stats-brief .admin-stats-reasons {
  margin: 0;
}

.admin-stats-brief .admin-stats-seat-mix li,
.admin-stats-brief .admin-stats-reasons li {
  margin-bottom: 0.45rem;
  font-size: 0.95rem;
  color: #f0e7d8;
}

.admin-stats-brief .admin-stats-seat-mix li {
  grid-template-columns: minmax(7rem, 11rem) 1fr auto;
  gap: 0.55rem;
}

.admin-stats-brief .admin-stats-reasons code {
  padding: 0.12rem 0.35rem;
  border: 1px solid rgba(201, 165, 116, 0.35);
  border-radius: 2px;
  color: #ffe9c2;
  font-size: 0.88rem;
}

.admin-stats-brief .admin-stats-card-empty {
  margin: 0;
  color: var(--brief-muted);
  font-size: 0.92rem;
}

.admin-stats-brief .admin-stats-drawer-foot {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: #b6a890;
}

.admin-stats-brief .admin-stats-meter {
  background: rgba(255, 255, 255, 0.12);
}

.admin-stats-brief .admin-stats-spark {
  display: block;
  height: 0.38rem;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.admin-stats-brief .admin-stats-spark > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #b89258, #e2c48a);
}

.admin-stats-brief-board {
  margin: 0;
  border: 1px solid rgba(201, 165, 116, 0.35);
  background: transparent;
}

.admin-stats-brief-board .admin-stats-kpis,
.admin-stats-brief-board .admin-stats-band {
  background: rgba(201, 165, 116, 0.18);
}

.admin-stats-brief-score-avgs {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  border-top: 1px solid rgba(201, 165, 116, 0.18);
}

.admin-stats-brief-reason-value code {
  font-size: 0.82rem;
  color: #ffe9c2;
  word-break: break-word;
}

.admin-stats-brief-board .admin-stats-kpi-kicker {
  color: #efd5a6;
}

.admin-stats-brief-board .admin-stats-kpi-value {
  color: #fffaf0;
  font-size: 1.2rem;
}

.admin-stats-brief-board .admin-stats-kpi-note {
  color: #c9bca8;
}

.admin-stats-brief-board .admin-stats-card-title {
  color: #efd5a6;
}

.admin-stats-brief .admin-stats-reasons {
  margin: 0.35rem 0 0;
  padding: 0;
  list-style: none;
}

.admin-stats-brief .admin-stats-reasons li {
  margin: 0 0 0.25rem;
  color: #e6d8c0;
  font-size: 0.88rem;
}

.admin-stats-brief-records-pager {
  margin-top: 0.65rem;
  flex-shrink: 0;
}

.admin-stats-holdings-row.is-clickable {
  cursor: pointer;
}

.admin-stats-holdings-row.is-clickable:hover td {
  background: rgba(201, 165, 116, 0.06);
}

.admin-stats-pager-btn:disabled,
.admin-stats-pager-btn.is-disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

.admin-stats-brief-records-open {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  margin: 0;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(201, 165, 116, 0.55);
  border-radius: 2px;
  background: var(--brief-panel);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.admin-stats-brief-records-open:hover,
.admin-stats-brief-records-open:focus-visible {
  border-color: rgba(232, 205, 150, 0.9);
  background: #1d212c;
  outline: none;
  box-shadow: 0 0 0 2px rgba(201, 165, 116, 0.18);
}

.admin-stats-brief-records-open-title {
  font-family: var(--font-herald, Cinzel, Georgia, serif);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff1d4;
}

.admin-stats-brief-records-open-meta {
  font-size: 0.85rem;
  color: var(--brief-muted);
}

.admin-stats-brief-records-sheet {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1.1rem 1.05rem;
  background:
    linear-gradient(180deg, rgba(168, 134, 92, 0.1), transparent 5rem),
    #12141a;
  border: 0;
  color: var(--brief-ink);
  font-family: var(--font-body, "IBM Plex Sans", system-ui, sans-serif);
  pointer-events: auto;
}

.admin-stats-brief-records-sheet[hidden] {
  display: none !important;
}

.admin-stats-brief-records-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--brief-line);
}

.admin-stats-brief-records-sheet-title {
  margin: 0;
  font-family: var(--font-display, Fraunces, Georgia, serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff8ec;
}

.admin-stats-brief-records-sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.admin-stats-brief-records-sheet-body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.admin-stats-brief-table-wrap {
  margin-top: 0;
  max-height: none;
  overflow: visible;
  border: 1px solid var(--brief-line);
  background: var(--brief-panel);
}

.admin-stats-brief-table {
  font-size: 0.88rem;
}

.admin-stats-brief-table th {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: #efd5a6;
}

.admin-stats-brief-table td {
  color: #f2e8d8;
}

.admin-stats-brief-sid,
.admin-stats-brief-uid,
.admin-stats-brief-qid {
  font-size: 0.78rem;
  color: #ffe7b8;
  word-break: break-all;
}

.admin-stats-brief-uid,
.admin-stats-brief-qid {
  color: rgba(232, 239, 233, 0.72);
}

.admin-stats-brief-qnum {
  font-size: 0.8rem;
  font-weight: 600;
  color: #f2e8d8;
  white-space: nowrap;
}

.admin-stats-brief-record-row.is-clickable {
  cursor: pointer;
}

.admin-stats-brief-record-row.is-clickable:hover td {
  background: rgba(201, 165, 116, 0.06);
}

.admin-stats-brief-record-link {
  color: #ffe7b8;
  text-decoration: none;
}

.admin-stats-brief-record-link:hover,
.admin-stats-brief-record-link:focus-visible {
  color: #fff6dd;
  text-decoration: underline;
  outline: none;
}

.admin-stats-brief-account-btn {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin: 0;
  padding: 0.35rem 0.55rem;
  border: 1px solid rgba(201, 165, 116, 0.55);
  border-radius: 2px;
  background: rgba(201, 165, 116, 0.12);
  color: #fff1d4;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.admin-stats-brief-account-btn:hover,
.admin-stats-brief-account-btn:focus-visible {
  border-color: rgba(232, 205, 150, 0.9);
  background: rgba(201, 165, 116, 0.24);
  color: #fffaf0;
  outline: none;
  box-shadow: 0 0 0 2px rgba(201, 165, 116, 0.18);
}

.admin-stats-brief-account-muted {
  color: #b8ab96;
  font-size: 0.78rem;
  font-style: italic;
}

.admin-stats-brief-status {
  display: inline-block;
  padding: 0.12rem 0.4rem;
  border: 1px solid rgba(201, 165, 116, 0.4);
  border-radius: 2px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffe9c2;
}

.admin-stats-brief-status.is-pass {
  border-color: rgba(111, 191, 138, 0.65);
  color: #b6ecc8;
}

.admin-stats-brief-status.is-fail,
.admin-stats-brief-status.is-skipped,
.admin-stats-brief-status.is-quit {
  border-color: rgba(201, 120, 104, 0.65);
  color: #f0b4a8;
}

.admin-stats-brief-status.is-borderline {
  border-color: rgba(226, 201, 128, 0.65);
  color: #f0dfa0;
}

.admin-stats-brief-reason {
  max-width: 14rem;
  color: #e6d8c0;
  word-break: break-word;
}

.admin-stats-brief-hist {
  display: grid;
  grid-template-columns: repeat(var(--hist-bins, 4), minmax(0, 1fr));
  gap: 0.28rem;
  align-items: end;
  min-height: 4.8rem;
  padding: 0.25rem 0.1rem 0;
  border-bottom: 1px solid var(--brief-line);
}

.admin-stats-brief-hist-col {
  display: grid;
  grid-template-rows: auto 1fr;
  justify-items: center;
  align-items: end;
  min-width: 0;
  height: 100%;
  gap: 0.15rem;
}

.admin-stats-brief-hist-n {
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  font-size: 0.72rem;
  line-height: 1;
}

.admin-stats-brief-hist-bar {
  display: block;
  width: 72%;
  min-height: 0;
  align-self: end;
  border-radius: 1px 1px 0 0;
  box-shadow: 0 0 0 1px rgba(168, 134, 92, 0.18);
}

.admin-stats-brief-hist-bar.is-empty {
  height: 0 !important;
  background: transparent;
  box-shadow: none;
}

.admin-stats-brief-hist-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 0.35rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: #d8c4a0;
}

.admin-stats-brief-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

@media (max-width: 720px) {
  .admin-stats-brief-kpis,
  .admin-stats-brief-split {
    grid-template-columns: 1fr;
  }
}

/* Legacy drawer chrome still used by Signal guide */
.admin-stats-drawer-head {
  display: grid;
  gap: 0.2rem;
  margin-bottom: 0.75rem;
  position: relative;
  padding-right: 5rem;
}

.admin-stats-drawer-title {
  margin: 0;
  font-family: var(--stats-mono);
  font-size: 1rem;
  color: var(--stats-gold);
}

.admin-stats-drawer-close {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0.2rem 0.45rem;
  border: 1px solid var(--stats-line);
  border-radius: 2px;
  background: transparent;
  color: var(--stats-gold);
  text-decoration: none;
  font: inherit;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
}

.admin-stats-drawer-close:hover {
  background: rgba(168, 134, 92, 0.12);
}

.admin-stats-drawer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin-bottom: 0.75rem;
}

.admin-stats-drawer-label {
  margin: 0 0 0.15rem;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stats-gold-dim);
}

.admin-stats-drawer-val {
  margin: 0 0 0.2rem;
  font-family: var(--stats-mono);
  font-size: 1rem;
  color: var(--stats-gold);
  font-variant-numeric: tabular-nums;
}

.admin-stats-seat-mix,
.admin-stats-reasons {
  margin: 0 0 0.65rem;
  padding: 0;
  list-style: none;
}

.admin-stats-seat-mix li {
  display: grid;
  grid-template-columns: minmax(5rem, 8rem) 1fr auto;
  gap: 0.4rem;
  align-items: center;
  margin-bottom: 0.3rem;
  font-size: 0.72rem;
}

.admin-stats-reasons li {
  margin-bottom: 0.2rem;
  font-size: 0.72rem;
  color: var(--stats-muted);
}

.admin-stats-drawer-foot {
  margin: 0.4rem 0 0;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(197, 212, 200, 0.4);
}

@media (max-width: 980px) {
  .admin-stats-kpis,
  .admin-stats-band,
  .admin-stats-drawer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .admin-stats-kpis,
  .admin-stats-band,
  .admin-stats-drawer-grid {
    grid-template-columns: 1fr;
  }

  .admin-stats-path {
    white-space: normal;
    max-width: none;
  }
}


.admin-stats-mandate-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: end;
  justify-content: space-between;
  width: 100%;
}

.admin-stats-mandate-core {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.6rem;
  align-items: end;
  flex: 1 1 18rem;
  min-width: 0;
}

.admin-stats-search {
  margin-left: auto;
}

.admin-stats-advanced {
  width: 100%;
  margin-top: 0.65rem;
  border: 1px solid var(--stats-line-soft);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.22);
}

.admin-stats-advanced > summary {
  cursor: pointer;
  list-style: none;
  padding: 0.45rem 0.65rem;
  font-family: var(--font-herald);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stats-gold-dim);
  user-select: none;
}

.admin-stats-advanced > summary::-webkit-details-marker {
  display: none;
}

.admin-stats-advanced-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.6rem;
  align-items: end;
  margin: 0 0.65rem 0.7rem;
  padding: 0.65rem 0 0;
  border-top: 1px solid rgba(168, 134, 92, 0.28);
}

.admin-stats-advanced-grid--metrics {
  margin-top: -0.25rem;
  padding-top: 0.55rem;
}

.admin-stats-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
  margin-top: 0.65rem;
}

.admin-stats-pager[hidden] {
  display: none !important;
}

.admin-stats-pager-status {
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stats-muted);
}

.admin-stats-pager-jump {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0 0.35rem;
  padding-left: 0.55rem;
  border-left: 1px solid var(--stats-line);
}

.admin-stats-pager-jump-input {
  width: 2.6rem;
  min-height: 1.7rem;
  margin: 0;
  padding: 0.15rem 0.3rem;
  border: 1px solid rgba(168, 134, 92, 0.38);
  border-radius: 2px;
  background: var(--stats-panel-deep);
  color: var(--stats-paper);
  font: inherit;
  font-size: 0.66rem;
  font-weight: 700;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
  box-shadow: none;
}

.admin-stats-pager-jump-input::-webkit-outer-spin-button,
.admin-stats-pager-jump-input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.admin-stats-pager-jump-input:focus {
  outline: none;
  border-color: rgba(201, 165, 116, 0.72);
  box-shadow: 0 0 0 1px rgba(201, 165, 116, 0.28);
}

.admin-stats-pager-jump-go {
  cursor: pointer;
  background: transparent;
}

.admin-stats-pager-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.7rem;
  padding: 0.2rem 0.65rem;
  border: 1px solid rgba(168, 134, 92, 0.42);
  border-radius: 2px;
  background: rgba(8, 9, 10, 0.88);
  color: #e8d4b0;
  text-decoration: none;
  font: inherit;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.admin-stats-pager-btn:hover {
  background: rgba(168, 134, 92, 0.16);
  border-color: rgba(201, 165, 116, 0.65);
  color: #f2e2c4;
}

.admin-stats-pager-btn.is-disabled,
.admin-stats-pager-btn:disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: default;
  background: rgba(8, 9, 10, 0.55);
  color: rgba(182, 168, 144, 0.72);
}

.admin-stats-card-note,
.admin-stats-drawer-note {
  margin: 0 0 0.55rem;
  font-size: 0.66rem;
  line-height: 1.4;
  color: var(--stats-muted);
}

.admin-stats-drawer-note {
  margin: 0 0 0.75rem;
}

.admin-stats-drawer-hint {
  margin-left: 0.25rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--stats-muted);
}

.admin-stats-kpi-formula {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--stats-gold);
  font-variant-numeric: tabular-nums;
}

.admin-stats-kpi-defs {
  margin: 0;
  font-size: 0.6rem;
  line-height: 1.35;
  color: var(--stats-muted);
}

.admin-stats-kpi-defs-list {
  display: grid;
  gap: 0.18rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.6rem;
  line-height: 1.35;
  color: var(--stats-muted);
}

.admin-stats-kpi-defs-list li {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  gap: 0.35rem;
  align-items: baseline;
}

.admin-stats-kpi-defs-list .admin-stats-math {
  color: var(--stats-gold-dim);
  font-weight: 600;
}

.admin-stats-kpi-defs-list.is-wide-labels li {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.12rem;
}

.admin-stats-kpi-defs-list.is-wide-labels li > span:first-child {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--stats-paper);
}

.admin-stats-kpi-defs-list.is-wide-labels li > span:last-child {
  display: block;
  max-width: 100%;
  line-height: 1.4;
}

/* —— Admin 07 · Investigation —— */
#panel-investigation.admin-panel,
#panel-special-invite.admin-panel,
#panel-special-invite-details.admin-panel {
  --inv-gold: #c9a574;
  --inv-gold-dim: #8f7350;
  --inv-ink: #ece6da;
  --inv-muted: #b6a890;
  --inv-row-h: 3.35rem;
  --inv-thead-h: 2.15rem;
  color: var(--inv-ink);
}

.admin-investigation-head .admin-panel-kicker {
  margin-bottom: 0.75rem;
}

#panel-investigation .admin-investigation-holdings {
  margin-top: 0.35rem;
}

#panel-investigation .admin-investigation-toolbar-actions,
#panel-investigation .admin-investigation-dialog-actions,
#panel-investigation .admin-investigation-filter-select-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  padding-top: 0.1rem;
  margin-left: auto;
  flex: 0 0 auto;
  align-self: end;
}

#panel-investigation .admin-investigation-tool-btn {
  min-height: 1.85rem;
  padding: 0.28rem 0.85rem;
  border-radius: 2px;
  border: 1px solid rgba(201, 165, 116, 0.42);
  font: inherit;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

#panel-investigation .admin-investigation-tool-btn--select {
  background: rgba(201, 165, 116, 0.2);
  color: var(--inv-gold);
}

#panel-investigation .admin-investigation-tool-btn--clear {
  background: rgba(255, 255, 255, 0.05);
  color: var(--inv-ink);
  border-color: rgba(255, 255, 255, 0.18);
}

#panel-investigation .admin-investigation-tool-btn:hover,
#panel-investigation .admin-investigation-tool-btn:focus-visible {
  filter: brightness(1.1);
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(201, 165, 116, 0.28);
}

/* Search and filter — 06 more-filters line design (boxed fields + row rules) */
#panel-investigation .admin-stats-holdings-filters-fold {
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid var(--stats-line-soft, rgba(168, 134, 92, 0.14));
  border-radius: 2px;
  box-shadow: none;
  color: var(--stats-paper, rgba(232, 239, 233, 0.92));
  font-family: var(--stats-mono, ui-monospace, Menlo, Consolas, monospace);
}

#panel-investigation .admin-stats-holdings-filters-fold > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  color: var(--stats-gold-dim, rgba(168, 134, 92, 0.78));
  background: rgba(0, 0, 0, 0.28);
  border-bottom: 1px solid rgba(168, 134, 92, 0.28);
  font-family: var(--stats-mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#panel-investigation .admin-investigation-filters-label {
  flex: 0 0 auto;
  color: inherit;
}

#panel-investigation .admin-stats-holdings-filters-fold[open] > summary {
  color: var(--stats-gold, #c9a574);
  border-bottom-color: rgba(168, 134, 92, 0.28);
}

#panel-investigation .admin-stats-holdings-filters {
  display: block;
  margin: 0;
  padding: 0 0.65rem 0.7rem;
  background: transparent;
}

#panel-investigation .admin-stats-holdings-filters-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

#panel-investigation .admin-stats-holdings-filters-row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.5rem 0.6rem;
  margin: 0;
  padding: 0.65rem 0 0.55rem;
  border: 0;
  border-top: 1px solid rgba(168, 134, 92, 0.28);
  background: transparent;
}

#panel-investigation .admin-stats-holdings-filters-row:last-child {
  padding-bottom: 0.15rem;
  border-bottom: 1px solid rgba(168, 134, 92, 0.28);
}

#panel-investigation .admin-stats-holdings-filters-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.6rem;
  flex: 1 1 auto;
  min-width: 0;
  align-items: end;
}

#panel-investigation .admin-stats-holdings-filters .admin-stats-field,
#panel-investigation .admin-stats-holdings-filters-rows {
  display: grid;
  gap: 0.22rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  flex: 1 1 7.5rem;
  min-width: 6.75rem;
  align-content: end;
  box-sizing: border-box;
}

#panel-investigation .admin-stats-field--wide {
  flex: 1.8 1 14rem;
  min-width: 12rem;
}

#panel-investigation .admin-stats-field--sort {
  flex: 0 1 7.5rem;
  min-width: 6.5rem;
  max-width: 9rem;
}

#panel-investigation .admin-stats-holdings-filters-grid--sort {
  flex: 1 1 auto;
}

#panel-investigation .admin-stats-holdings-filters-rows {
  flex: 0 0 5rem;
  min-width: 5rem;
  width: auto;
  margin-left: 0;
}

#panel-investigation .admin-stats-holdings-filters .admin-stats-field > span,
#panel-investigation .admin-stats-holdings-filters-rows > span {
  margin: 0;
  color: var(--stats-gold-dim, rgba(168, 134, 92, 0.78));
  font-family: var(--stats-mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

#panel-investigation .admin-stats-holdings-filters select,
#panel-investigation .admin-stats-holdings-filters input {
  box-sizing: border-box;
  width: 100%;
  min-height: 2.05rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid rgba(168, 134, 92, 0.38);
  border-radius: 2px;
  background: var(--stats-panel-deep, rgba(4, 5, 7, 0.88));
  color: var(--stats-paper, rgba(232, 239, 233, 0.92));
  font-family: var(--stats-mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: 0.74rem;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
}

#panel-investigation .admin-stats-holdings-filters select {
  padding-right: 1.75rem;
  color-scheme: dark;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23c9a574' d='M1.2 1.4L6 6.2 10.8 1.4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.55rem center;
  background-size: 0.7rem 0.45rem;
  cursor: pointer;
}

#panel-investigation .admin-stats-holdings-filters select:focus,
#panel-investigation .admin-stats-holdings-filters input:focus {
  outline: none;
  border-color: rgba(201, 165, 116, 0.72);
  box-shadow: 0 0 0 1px rgba(201, 165, 116, 0.28);
}

#panel-investigation .admin-stats-holdings-filters input::placeholder {
  color: rgba(197, 212, 200, 0.35);
}

#panel-investigation .admin-stats-holdings-filters-row .admin-stats-holdings-search {
  flex: 0 0 auto;
  align-self: end;
  width: auto;
  min-width: 5.25rem;
  height: 2.05rem;
  min-height: 2.05rem;
  max-height: 2.05rem;
  margin: 0 0 0 auto;
  padding: 0 0.9rem;
  border: 1px solid rgba(168, 134, 92, 0.65);
  border-radius: 2px;
  background: #0c0d10;
  color: var(--stats-gold, #c9a574);
  box-sizing: border-box;
  line-height: 1;
}

#panel-investigation .admin-investigation-table .admin-investigation-th-check,
#panel-investigation .admin-investigation-table .admin-investigation-td-check,
#panel-special-invite .admin-investigation-table .admin-investigation-th-check, #panel-special-invite-details .admin-investigation-table .admin-investigation-th-check,
#panel-special-invite .admin-investigation-table .admin-investigation-td-check, #panel-special-invite-details .admin-investigation-table .admin-investigation-td-check{
  width: 2.25rem;
  text-align: center;
}

/* Full dialog: catalog + selected columns fill remaining height. */
#panel-investigation .admin-investigation-dialog .admin-investigation-launch {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
}

#panel-investigation .admin-investigation-split {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(15rem, 0.9fr);
  gap: 0.75rem;
  flex: 1 1 auto;
  min-height: 0;
  align-items: stretch;
}

#panel-investigation .admin-investigation-catalog {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

#panel-investigation .admin-investigation-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
}

#panel-investigation .admin-investigation-picked,
#panel-special-invite .admin-investigation-picked, #panel-special-invite-details .admin-investigation-picked {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--stats-line-soft, rgba(168, 134, 92, 0.22));
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.34);
  overflow: hidden;
}

#panel-investigation .admin-investigation-picked-head,
#panel-special-invite .admin-investigation-picked-head, #panel-special-invite-details .admin-investigation-picked-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid rgba(168, 134, 92, 0.28);
  background: rgba(0, 0, 0, 0.28);
}

#panel-investigation .admin-investigation-picked-title,
#panel-special-invite .admin-investigation-picked-title, #panel-special-invite-details .admin-investigation-picked-title {
  margin: 0;
  font-family: var(--stats-mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stats-gold, #c9a574);
}

#panel-investigation .admin-investigation-picked-count,
#panel-special-invite .admin-investigation-picked-count, #panel-special-invite-details .admin-investigation-picked-count {
  margin: 0;
  font-family: var(--stats-mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--stats-muted, rgba(197, 212, 200, 0.72));
}

#panel-investigation .admin-investigation-picked-list,
#panel-special-invite .admin-investigation-picked-list, #panel-special-invite-details .admin-investigation-picked-list {
  list-style: none;
  margin: 0;
  padding: 0.45rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

#panel-investigation .admin-investigation-picked-empty,
#panel-special-invite .admin-investigation-picked-empty, #panel-special-invite-details .admin-investigation-picked-empty {
  margin: 0;
  padding: 0.85rem 0.75rem;
  color: var(--stats-muted, rgba(197, 212, 200, 0.55));
  font-size: 0.78rem;
}

#panel-investigation .admin-investigation-picked-empty[hidden],
#panel-special-invite .admin-investigation-picked-empty[hidden], #panel-special-invite-details .admin-investigation-picked-empty[hidden]{
  display: none !important;
}

#panel-investigation .admin-investigation-picked-item,
#panel-special-invite .admin-investigation-picked-item, #panel-special-invite-details .admin-investigation-picked-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.45rem;
  align-items: start;
  margin: 0;
  padding: 0.45rem 0.5rem;
  border: 1px solid rgba(168, 134, 92, 0.28);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.28);
}

#panel-investigation .admin-investigation-picked-main,
#panel-special-invite .admin-investigation-picked-main, #panel-special-invite-details .admin-investigation-picked-main {
  min-width: 0;
  display: grid;
  gap: 0.2rem;
}

#panel-investigation .admin-investigation-picked-stem,
#panel-special-invite .admin-investigation-picked-stem, #panel-special-invite-details .admin-investigation-picked-stem {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.3;
  max-height: 2.6em;
  font-size: 0.78rem;
  color: var(--inv-ink);
}

#panel-investigation .admin-investigation-picked-meta,
#panel-special-invite .admin-investigation-picked-meta, #panel-special-invite-details .admin-investigation-picked-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

#panel-investigation .admin-investigation-picked-meta code,
#panel-special-invite .admin-investigation-picked-meta code, #panel-special-invite-details .admin-investigation-picked-meta code{
  font-size: 0.68rem;
  color: var(--stats-muted, rgba(197, 212, 200, 0.68));
  word-break: break-all;
}

#panel-investigation .admin-investigation-picked-remove,
#panel-special-invite .admin-investigation-picked-remove, #panel-special-invite-details .admin-investigation-picked-remove {
  appearance: none;
  flex: 0 0 auto;
  width: 1.55rem;
  height: 1.55rem;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--inv-ink);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

#panel-investigation .admin-investigation-picked-remove:hover,
#panel-investigation .admin-investigation-picked-remove:focus-visible,
#panel-special-invite .admin-investigation-picked-remove:hover, #panel-special-invite-details .admin-investigation-picked-remove:hover,
#panel-special-invite .admin-investigation-picked-remove:focus-visible, #panel-special-invite-details .admin-investigation-picked-remove:focus-visible {
  border-color: rgba(201, 165, 116, 0.55);
  color: var(--inv-gold);
  outline: none;
}

#panel-investigation .admin-investigation-table thead th,
#panel-special-invite .admin-investigation-table thead th, #panel-special-invite-details .admin-investigation-table thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: #121014;
  box-shadow: 0 1px 0 rgba(201, 165, 116, 0.22);
}

#panel-investigation .admin-investigation-table tbody tr,
#panel-special-invite .admin-investigation-table tbody tr, #panel-special-invite-details .admin-investigation-table tbody tr{
  height: var(--inv-row-h);
}

#panel-investigation .admin-investigation-table .admin-stats-instrument-stem,
#panel-special-invite .admin-investigation-table .admin-stats-instrument-stem, #panel-special-invite-details .admin-investigation-table .admin-stats-instrument-stem{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.3;
  max-height: 2.6em;
}

#panel-investigation .admin-investigation-pager {
  margin-top: 0.65rem;
  flex: 0 0 auto;
}

#panel-investigation .admin-investigation-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 0.55rem 0.65rem;
  margin-top: auto;
  padding: 0.65rem 0.7rem 0.75rem;
  border-top: 1px solid rgba(168, 134, 92, 0.22);
}

#panel-investigation .admin-investigation-action {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  max-width: min(18rem, 100%);
}

@media (max-width: 980px) {
  #panel-investigation .admin-investigation-split,
  .admin-page #panel-investigation .admin-investigation-split {
    grid-template-columns: 1fr;
  }

  #panel-investigation .admin-investigation-picked {
    min-height: 14rem;
  }
}

#panel-investigation .admin-investigation-btn {
  padding: 0.7rem 1.15rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(201, 165, 116, 0.35);
  cursor: pointer;
  font-weight: 600;
}

#panel-investigation .admin-investigation-btn--live {
  background: rgba(201, 165, 116, 0.18);
  color: var(--inv-gold);
}

#panel-investigation .admin-investigation-btn--ban {
  background: rgba(180, 60, 60, 0.18);
  border-color: rgba(220, 110, 110, 0.45);
  color: #f0a0a0;
}

#panel-investigation .admin-investigation-btn--unban {
  background: rgba(80, 140, 100, 0.16);
  border-color: rgba(120, 180, 140, 0.4);
  color: #b6e0c4;
}

#panel-investigation .admin-investigation-btn--quick {
  background: rgba(255, 255, 255, 0.06);
  color: var(--inv-ink);
}

#panel-investigation .admin-investigation-id-row {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
  max-width: 100%;
}

#panel-investigation .admin-investigation-id-row .admin-investigation-id-banned,
#panel-investigation .admin-investigation-picked-meta .admin-investigation-id-banned {
  font-family: var(--stats-mono);
  font-size: 0.62rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: normal;
  color: #e08a8a;
  white-space: nowrap;
}

#panel-investigation .admin-investigation-row-tr.is-banned .admin-stats-instrument-stem {
  opacity: 0.78;
}

#panel-investigation .admin-investigation-btn:hover,
#panel-investigation .admin-investigation-action:focus-within .admin-investigation-btn {
  filter: brightness(1.08);
}

#panel-investigation .admin-investigation-action-tip {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.35rem);
  z-index: 5;
  margin: 0;
  padding: 0.45rem 0.55rem;
  border: 1px solid rgba(168, 134, 92, 0.35);
  border-radius: 3px;
  background: rgba(12, 13, 16, 0.96);
  color: var(--stats-muted, rgba(197, 212, 200, 0.72));
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.01em;
  text-transform: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.15rem);
  pointer-events: none;
  transition:
    opacity 0.14s ease,
    transform 0.14s ease,
    visibility 0.14s ease;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}

#panel-investigation .admin-investigation-action:hover .admin-investigation-action-tip,
#panel-investigation .admin-investigation-action:focus-within .admin-investigation-action-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Clickable rows + custom tick */
#panel-investigation .admin-investigation-row-tr,
#panel-special-invite .admin-investigation-row-tr, #panel-special-invite-details .admin-investigation-row-tr {
  cursor: pointer;
  transition: background 0.12s ease;
}

#panel-investigation .admin-investigation-row-tr:hover,
#panel-special-invite .admin-investigation-row-tr:hover, #panel-special-invite-details .admin-investigation-row-tr:hover {
  background: rgba(201, 165, 116, 0.07);
}

#panel-investigation .admin-investigation-row-tr.is-selected,
#panel-special-invite .admin-investigation-row-tr.is-selected, #panel-special-invite-details .admin-investigation-row-tr.is-selected{
  background: rgba(201, 165, 116, 0.12);
  box-shadow: inset 2px 0 0 rgba(201, 165, 116, 0.75);
}

#panel-investigation .admin-investigation-check,
#panel-special-invite .admin-investigation-check, #panel-special-invite-details .admin-investigation-check {
  position: relative;
  display: inline-flex;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  cursor: pointer;
}

#panel-investigation .admin-investigation-check input,
#panel-special-invite .admin-investigation-check input, #panel-special-invite-details .admin-investigation-check input{
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

#panel-investigation .admin-investigation-tick,
#panel-special-invite .admin-investigation-tick, #panel-special-invite-details .admin-investigation-tick {
  position: relative;
  display: block;
  width: 1.15rem;
  height: 1.15rem;
  border: 1px solid rgba(201, 165, 116, 0.45);
  border-radius: 3px;
  background:
    linear-gradient(165deg, rgba(42, 36, 28, 0.9) 0%, rgba(12, 11, 10, 0.95) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    border-color 0.12s ease,
    background 0.12s ease,
    box-shadow 0.12s ease;
}

#panel-investigation .admin-investigation-tick::after,
#panel-special-invite .admin-investigation-tick::after, #panel-special-invite-details .admin-investigation-tick::after {
  content: "";
  position: absolute;
  left: 0.34rem;
  top: 0.18rem;
  width: 0.32rem;
  height: 0.58rem;
  border: solid transparent;
  border-width: 0 2px 2px 0;
  transform: rotate(40deg) scale(0.4);
  opacity: 0;
  transition:
    opacity 0.12s ease,
    transform 0.12s ease;
}

#panel-investigation .admin-investigation-check input:checked + .admin-investigation-tick,
#panel-investigation .admin-investigation-row-tr.is-selected .admin-investigation-tick,
#panel-special-invite .admin-investigation-check input:checked + .admin-investigation-tick, #panel-special-invite-details .admin-investigation-check input:checked + .admin-investigation-tick,
#panel-special-invite .admin-investigation-row-tr.is-selected .admin-investigation-tick, #panel-special-invite-details .admin-investigation-row-tr.is-selected .admin-investigation-tick{
  border-color: rgba(232, 198, 140, 0.95);
  background:
    linear-gradient(165deg, rgba(201, 165, 116, 0.55) 0%, rgba(120, 88, 42, 0.85) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 230, 180, 0.18),
    0 0 0 1px rgba(201, 165, 116, 0.2);
}

#panel-investigation .admin-investigation-check input:checked + .admin-investigation-tick::after,
#panel-investigation .admin-investigation-row-tr.is-selected .admin-investigation-tick::after,
#panel-special-invite .admin-investigation-check input:checked + .admin-investigation-tick::after, #panel-special-invite-details .admin-investigation-check input:checked + .admin-investigation-tick::after,
#panel-special-invite .admin-investigation-row-tr.is-selected .admin-investigation-tick::after, #panel-special-invite-details .admin-investigation-row-tr.is-selected .admin-investigation-tick::after{
  border-color: #1a140e;
  opacity: 1;
  transform: rotate(40deg) scale(1);
}

#panel-investigation .admin-investigation-check:focus-within .admin-investigation-tick,
#panel-special-invite .admin-investigation-check:focus, #panel-special-invite-details .admin-investigation-check:focus-within .admin-investigation-tick {
  box-shadow: 0 0 0 2px rgba(201, 165, 116, 0.28);
}

/* Kind / coding tags */
#panel-investigation .admin-investigation-kind,
#panel-special-invite .admin-investigation-kind, #panel-special-invite-details .admin-investigation-kind {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
}

#panel-investigation .admin-investigation-kind.is-tech,
#panel-special-invite .admin-investigation-kind.is-tech, #panel-special-invite-details .admin-investigation-kind.is-tech{
  color: #9fd6c8;
  border-color: rgba(110, 180, 160, 0.42);
  background: rgba(70, 130, 115, 0.22);
}

#panel-investigation .admin-investigation-kind.is-behavioral,
#panel-special-invite .admin-investigation-kind.is-behavioral, #panel-special-invite-details .admin-investigation-kind.is-behavioral{
  color: #e8c49a;
  border-color: rgba(201, 165, 116, 0.48);
  background: rgba(168, 120, 70, 0.22);
}

#panel-investigation .admin-investigation-kind.is-cv,
#panel-special-invite .admin-investigation-kind.is-cv, #panel-special-invite-details .admin-investigation-kind.is-cv{
  color: #d4b8ef;
  border-color: rgba(170, 130, 210, 0.48);
  background: rgba(120, 80, 170, 0.24);
}

#panel-investigation .admin-investigation-kind.is-coding,
#panel-special-invite .admin-investigation-kind.is-coding, #panel-special-invite-details .admin-investigation-kind.is-coding{
  color: #b7c8ef;
  border-color: rgba(130, 150, 210, 0.45);
  background: rgba(80, 100, 170, 0.24);
}

#panel-investigation .admin-investigation-kind.is-coding-yes,
#panel-special-invite .admin-investigation-kind.is-coding-yes, #panel-special-invite-details .admin-investigation-kind.is-coding-yes{
  color: #c6b4ef;
  border-color: rgba(160, 130, 210, 0.42);
  background: rgba(110, 80, 160, 0.22);
}

#panel-investigation .admin-investigation-kind.is-coding-python,
#panel-special-invite .admin-investigation-kind.is-coding-python, #panel-special-invite-details .admin-investigation-kind.is-coding-python{
  color: #e8c49a;
  border-color: rgba(201, 165, 116, 0.5);
  background: rgba(168, 120, 70, 0.22);
  text-transform: none;
  letter-spacing: 0.04em;
}

#panel-investigation .admin-investigation-kind.is-coding-sql,
#panel-special-invite .admin-investigation-kind.is-coding-sql, #panel-special-invite-details .admin-investigation-kind.is-coding-sql{
  color: #9fd4c8;
  border-color: rgba(90, 170, 150, 0.48);
  background: rgba(40, 110, 95, 0.28);
}

#panel-investigation .admin-investigation-kind.is-coding-no,
#panel-investigation .admin-investigation-kind.is-unknown,
#panel-special-invite .admin-investigation-kind.is-coding-no, #panel-special-invite-details .admin-investigation-kind.is-coding-no,
#panel-special-invite .admin-investigation-kind.is-unknown, #panel-special-invite-details .admin-investigation-kind.is-unknown{
  color: rgba(182, 168, 144, 0.72);
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  text-transform: none;
  letter-spacing: 0.04em;
}

/* —— 05 Blacklist · Create-user (01) visual language —— */
.admin-stage:has(#panel-blacklist.is-active:not([hidden])) {
  overflow: auto;
}

#panel-blacklist.admin-panel.is-active {
  display: block;
  height: fit-content;
  max-height: none;
  min-height: 0;
  overflow: visible;
  padding-bottom: 1.25rem;
  color: var(--paper);
  font-family: inherit;
}

#panel-blacklist .admin-blacklist-head {
  margin-bottom: 0;
}

#panel-blacklist .admin-blacklist-head .admin-panel-kicker {
  margin-bottom: 0;
  color: var(--accent);
  font-family: var(--font-herald);
}

#panel-blacklist .admin-blacklist-create {
  display: grid;
  gap: 0.85rem;
  width: 100%;
  max-width: none;
  margin: 0.65rem 0 0;
}

#panel-blacklist .admin-blacklist-scope-pick {
  margin: 0;
}

#panel-blacklist .admin-blacklist-scope-pane[hidden] {
  display: none !important;
}

#panel-blacklist .admin-blacklist-ban-inline.admin-create-form {
  max-width: none;
  width: 100%;
  margin: 0;
  gap: 0;
}

#panel-blacklist .admin-blacklist-creds {
  gap: 0.75rem;
}

#panel-blacklist .admin-blacklist-ban-account {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  position: relative;
  z-index: 8;
}

#panel-blacklist .admin-blacklist-ban-account-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
  margin: 0;
}

#panel-blacklist .admin-blacklist-ban-account-head .login-label {
  margin: 0;
}

#panel-blacklist .admin-ban-tag-hint {
  margin: 0;
  margin-left: auto;
  text-align: right;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--paper-dim);
  white-space: normal;
}

#panel-blacklist .admin-blacklist-ban-inline .user-combo-shell {
  min-height: 2.45rem;
  border: 1px solid rgba(168, 134, 92, 0.38);
  border-bottom-width: 3px;
  border-bottom-color: rgba(0, 0, 0, 0.62);
  border-radius: 4px;
  background: rgba(8, 9, 10, 0.92);
}

#panel-blacklist .admin-blacklist-ban-inline .user-combo-input {
  min-height: 2.45rem;
  padding: 0.55rem 0.75rem;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--paper);
  background: transparent;
}

#panel-blacklist .admin-blacklist-ban-inline .user-combo-menu {
  z-index: 40;
  max-height: min(18rem, 42vh);
  border: 1px solid rgba(168, 134, 92, 0.38);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(28, 24, 18, 0.98) 0%, rgba(10, 10, 12, 0.98) 100%);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

#panel-blacklist .admin-blacklist-ban-reason textarea {
  min-height: 5.5rem;
  border: 1px solid rgba(168, 134, 92, 0.38);
  border-bottom-width: 3px;
  border-bottom-color: rgba(0, 0, 0, 0.62);
  border-radius: 4px;
  background: rgba(8, 9, 10, 0.92);
  color: var(--paper);
  font: inherit;
  resize: vertical;
}

#panel-blacklist .admin-blacklist-ban-reason textarea:focus {
  outline: none;
  border-color: rgba(201, 165, 116, 0.75);
  box-shadow: 0 0 0 2px rgba(201, 165, 116, 0.18);
}

#panel-blacklist .admin-blacklist-submit.admin-create-submit {
  min-width: 12rem;
  background: linear-gradient(180deg, rgba(201, 165, 116, 0.92), rgba(168, 134, 92, 0.88));
  color: #1a140e;
  border: 1px solid rgba(232, 210, 170, 0.55);
}

#panel-blacklist .admin-blacklist-record-launch {
  max-width: none;
  width: 100%;
  margin: 1.1rem 0 0;
  padding: 0.85rem 0 0;
  border-top: 1px solid rgba(201, 165, 116, 0.14);
}

#panel-blacklist .admin-blacklist-record-launch .admin-stats-holdings-open {
  padding: 0.75rem 0.9rem;
  min-height: 0;
  align-items: center;
  border: 1px solid rgba(168, 134, 92, 0.32);
  border-bottom-width: 3px;
  border-bottom-color: rgba(0, 0, 0, 0.55);
  border-radius: 4px;
  background:
    linear-gradient(165deg, rgba(48, 40, 28, 0.55) 0%, rgba(12, 11, 10, 0.92) 100%);
  font-family: inherit;
}

#panel-blacklist .admin-blacklist-record-launch .admin-stats-holdings-open-title {
  font-family: var(--font-display, var(--font-herald));
  font-size: 0.98rem;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--paper);
}

#panel-blacklist .admin-blacklist-record-launch .admin-stats-holdings-open-meta,
#panel-blacklist .admin-blacklist-record-count {
  font-family: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--paper-dim);
}

#panel-blacklist .admin-blacklist-record-count-n {
  font-size: 1.05rem;
  color: inherit;
}

#panel-blacklist .admin-blacklist-record-launch .admin-stats-holdings-open.is-alert {
  border-color: rgba(201, 120, 104, 0.55);
  background:
    linear-gradient(165deg, rgba(90, 40, 32, 0.55) 0%, rgba(18, 12, 10, 0.95) 100%);
  box-shadow: inset 0 0 0 1px rgba(201, 120, 104, 0.18);
}

#panel-blacklist .admin-blacklist-record-launch .admin-stats-holdings-open.is-alert .admin-stats-holdings-open-title {
  color: #f0b4a6;
}

#panel-blacklist .admin-blacklist-record-launch .admin-stats-holdings-open.is-clear {
  border-color: rgba(110, 168, 130, 0.5);
  background:
    linear-gradient(165deg, rgba(32, 60, 42, 0.5) 0%, rgba(12, 14, 12, 0.95) 100%);
  box-shadow: inset 0 0 0 1px rgba(110, 168, 130, 0.16);
}

#panel-blacklist .admin-blacklist-record-launch .admin-stats-holdings-open.is-clear .admin-stats-holdings-open-title {
  color: #b6dcc4;
}

#panel-blacklist .ban-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.45rem 0 0;
  min-height: 0;
}

/* Selected ban targets — original red chips */
#panel-blacklist .ban-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.28rem 0.5rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid rgba(201, 88, 88, 0.7);
  border-radius: 1px;
  background: rgba(48, 14, 14, 0.96);
  color: #f0c0c0;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

#panel-blacklist .ban-tag:hover,
#panel-blacklist .ban-tag:focus-visible {
  border-color: rgba(232, 120, 120, 0.9);
  background: rgba(64, 18, 18, 0.98);
  outline: none;
}

#panel-blacklist .ban-tag-email {
  color: #f5d0d0;
}

#panel-blacklist .ban-tag-x {
  color: rgba(240, 176, 176, 0.75);
  font-size: 0.85rem;
  line-height: 1;
}



.hub-special-invite-form {
  margin: 0;
  width: 100%;
}
.hub-special-invite-form .hub-special-invite-btn {
  width: 100%;
  text-align: left;
}
/* Dim = unavailable — block hover/focus/click (including pass-through). */
.hub-special-invite-btn.is-dim,
.hub-special-invite-btn.is-dim:hover,
.hub-special-invite-btn.is-dim:focus,
.hub-special-invite-btn.is-dim:focus-visible,
.admin-menu-item.hub-special-invite-btn:disabled,
.admin-menu-item.hub-special-invite-btn:disabled:hover,
.admin-menu-item.hub-special-invite-btn:disabled:focus,
.admin-menu-item.hub-special-invite-btn:disabled:focus-visible {
  opacity: 0.38 !important;
  filter: saturate(0.55);
  pointer-events: none !important;
  cursor: not-allowed !important;
  color: var(--paper-dim);
  border-color: rgba(168, 134, 92, 0.18);
  background: rgba(0, 0, 0, 0.28);
  box-shadow: none;
  transform: none;
  outline: none;
}
.hub-special-invite-btn.is-live {
  opacity: 1;
}
.admin-special-invite-meta {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 0.75rem;
  margin: 0 0 0.9rem;
}
.admin-special-invite-cand-list {
  display: grid;
  gap: 0.35rem;
  max-height: 12rem;
  overflow: auto;
  margin-top: 0.55rem;
  padding: 0.35rem 0.15rem;
}
.admin-special-invite-cand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  font-size: 0.78rem;
  color: rgba(232, 226, 216, 0.9);
}
.inbox-special-invite-begin {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0.85rem 0 1rem;
}



/* —— Admin 08 Special Invitation (04-style dual boards) —— */
#panel-special-invite .sinv-panel-head, #panel-special-invite-details .sinv-panel-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 1rem;
  row-gap: 0;
  margin: 0 0 0.55rem;
  flex: 0 0 auto;
}
#panel-special-invite .sinv-panel-head-copy, #panel-special-invite-details .sinv-panel-head-copy {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}
#panel-special-invite .sinv-panel-head .admin-panel-kicker, #panel-special-invite-details .sinv-panel-head .admin-panel-kicker{
  margin: 0;
  flex: 0 0 auto;
  /* Match 07 title row height so Back lines up with the kicker. */
  min-height: 1.85rem;
  display: flex;
  align-items: center;
}
#panel-special-invite .sinv-lede, #panel-special-invite-details .sinv-lede {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.82rem;
  line-height: 1.4;
  color: rgba(220, 214, 204, 0.88);
}
/* Same Back chrome/size as 07 Investigation (shared .admin-command-dialog-close). */
#panel-special-invite .sinv-panel-head-actions, #panel-special-invite-details .sinv-panel-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex: 0 0 auto;
}
#panel-special-invite .sinv-panel-head-actions > .admin-command-dialog-close, #panel-special-invite-details .sinv-panel-head-actions > .admin-command-dialog-close{
  align-self: center;
  box-sizing: border-box;
  min-width: 7.5rem;
  min-height: 1.85rem;
  height: 1.85rem;
  margin: 0;
  padding: 0 1.6rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}
#panel-special-invite .sinv-send-btn, #panel-special-invite-details .sinv-send-btn {
  box-sizing: border-box;
  min-height: 1.85rem;
  height: 1.85rem;
  margin: 0;
  padding: 0 0.95rem;
  border-radius: 2px;
  border: 1px solid rgba(201, 165, 116, 0.45);
  background: rgba(201, 165, 116, 0.18);
  color: var(--inv-gold, #c9a574);
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
#panel-special-invite .sinv-send-btn:hover, #panel-special-invite-details .sinv-send-btn:hover,
#panel-special-invite .sinv-send-btn:focus-visible, #panel-special-invite-details .sinv-send-btn:focus-visible {
  filter: brightness(1.08);
  outline: none;
}
#panel-special-invite .sinv-details-btn, #panel-special-invite-details .sinv-details-btn {
  box-sizing: border-box;
  min-height: 1.85rem;
  height: 1.85rem;
  margin: 0;
  padding: 0 0.95rem;
  border-radius: 2px;
  white-space: nowrap;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.admin-page #panel-special-invite.admin-panel.is-active:not([hidden]),
.admin-page #panel-special-invite-details.admin-panel.is-active:not([hidden]) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  height: 100%;
}
#panel-special-invite-details .sinv-details-frame {
  display: grid;
  grid-template-rows: minmax(0, 1.2fr) minmax(0, 1fr);
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  border: 1px solid rgba(168, 134, 92, 0.32);
  border-radius: 4px;
  background: rgba(10, 10, 12, 0.72);
  overflow: hidden;
}
#panel-special-invite-details .sinv-details-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  padding: 0.55rem 0.65rem 0.65rem;
}
#panel-special-invite-details .sinv-details-pane--instruments {
  border-bottom: 1px solid rgba(168, 134, 92, 0.32);
}
#panel-special-invite-details .sinv-details-pane .sinv-q-table-wrap,
#panel-special-invite-details .sinv-details-pane .sinv-details-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
  border: 0;
  background: transparent;
}
#panel-special-invite-details .sinv-details-table {
  width: 100%;
  min-width: 22rem;
  table-layout: auto;
}
#panel-special-invite-details .sinv-details-table th,
#panel-special-invite-details .sinv-details-table td {
  white-space: nowrap;
  vertical-align: top;
}
#panel-special-invite-details .sinv-details-table th:first-child,
#panel-special-invite-details .sinv-details-table td:first-child {
  white-space: normal;
  min-width: 9.5rem;
}
#panel-special-invite-details .sinv-details-split {
  display: grid;
  grid-template-columns: minmax(11.5rem, 0.4fr) minmax(0, 1.6fr);
  gap: 0.85rem;
  flex: 1 1 auto;
  min-height: 0;
  align-items: stretch;
}
#panel-special-invite-details .sinv-details-rounds {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  border: 1px solid rgba(168, 134, 92, 0.32);
  border-radius: 4px;
  background: rgba(10, 10, 12, 0.72);
  overflow: hidden;
}
#panel-special-invite-details .sinv-details-rounds > .sinv-board-head {
  flex: 0 0 auto;
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid rgba(168, 134, 92, 0.22);
}
#panel-special-invite-details .sinv-details-rounds-count {
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  font-size: 0.7rem;
  color: rgba(201, 165, 116, 0.82);
}
#panel-special-invite-details .sinv-details-rounds-list {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.4rem;
  overflow: auto;
  min-height: 0;
  flex: 1 1 auto;
}
#panel-special-invite-details .sinv-details-round-row {
  display: grid;
  gap: 0.15rem;
  padding: 0.55rem 0.6rem;
  border: 1px solid transparent;
  border-radius: 2px;
  text-decoration: none;
  color: inherit;
  background: rgba(8, 9, 12, 0.45);
}
#panel-special-invite-details .sinv-details-round-row:hover,
#panel-special-invite-details .sinv-details-round-row:focus-visible {
  border-color: rgba(168, 134, 92, 0.35);
  background: rgba(201, 165, 116, 0.08);
  outline: none;
}
#panel-special-invite-details .sinv-details-round-row.is-active {
  border-color: rgba(201, 165, 116, 0.55);
  background: rgba(201, 165, 116, 0.14);
}
#panel-special-invite-details .sinv-details-round-title {
  font-size: 0.82rem;
  color: rgba(232, 208, 160, 0.96);
}
#panel-special-invite-details .sinv-details-round-meta,
#panel-special-invite-details .sinv-details-round-stats {
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  font-size: 0.62rem;
  color: rgba(201, 165, 116, 0.75);
  letter-spacing: 0.02em;
}
#panel-special-invite-details .sinv-details-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
#panel-special-invite-details .sinv-details-review {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
#panel-special-invite-details .sinv-details-progress-cand {
  gap: 0.2rem;
}
#panel-special-invite-details .sinv-details-progress-row.is-clickable {
  cursor: pointer;
}
#panel-special-invite-details .sinv-details-progress-row.is-clickable:hover td,
#panel-special-invite-details .sinv-details-progress-row.is-clickable:focus-visible td {
  background: rgba(201, 165, 116, 0.07);
}
#panel-special-invite-details .sinv-details-progress-row.is-clickable:focus-visible {
  outline: 1px solid rgba(201, 165, 116, 0.55);
  outline-offset: -1px;
}
#panel-special-invite-details .sinv-details-result {
  color: rgba(140, 175, 220, 0.95);
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  font-size: 0.78rem;
}
#panel-special-invite-details .sinv-details-cand-row {
  cursor: default;
}
#panel-special-invite-details .sinv-pool-mark.is-on {
  background: rgba(201, 165, 116, 0.55);
  border-color: rgba(201, 165, 116, 0.7);
}
#panel-special-invite-details .sinv-meta input[readonly] {
  opacity: 0.95;
  cursor: default;
}
#panel-special-invite-details .sinv-details-table-wrap {
  max-height: none;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
#panel-special-invite-details .sinv-details-email {
  display: block;
  word-break: break-word;
}
#panel-special-invite-details .sinv-details-session {
  display: inline-block;
  margin-top: 0.15rem;
  font-size: 0.68rem;
  color: rgba(201, 165, 116, 0.9);
}
#panel-special-invite-details .sinv-details-flag {
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
#panel-special-invite-details .sinv-details-flag.is-yes {
  color: rgba(140, 190, 150, 0.95);
}
#panel-special-invite-details .sinv-details-flag.is-no {
  color: rgba(170, 150, 130, 0.72);
}
@media (max-width: 960px) {
  #panel-special-invite-details .sinv-details-split {
    grid-template-columns: 1fr;
    overflow: auto;
  }
}
#panel-special-invite .sinv-form, #panel-special-invite-details .sinv-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-height: 0;
  flex: 1 1 auto;
}
#panel-special-invite .sinv-meta, #panel-special-invite-details .sinv-meta {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.65rem;
}
#panel-special-invite .sinv-wall-hint, #panel-special-invite-details .sinv-wall-hint {
  margin: -0.35rem 0 0;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: rgba(201, 165, 116, 0.72);
}
#panel-special-invite .sinv-dual, #panel-special-invite-details .sinv-dual {
  display: grid;
  grid-template-columns: minmax(12.5rem, 0.58fr) minmax(0, 1.72fr);
  gap: 0.85rem;
  min-height: 0;
  flex: 1 1 auto;
}
#panel-special-invite .sinv-board, #panel-special-invite-details .sinv-board {
  display: grid;
  grid-template-rows: minmax(0, 1.2fr) minmax(9rem, 0.68fr);
  gap: 0;
  min-height: 0;
  border: 1px solid rgba(168, 134, 92, 0.32);
  border-radius: 4px;
  background: rgba(10, 10, 12, 0.72);
  overflow: hidden;
}
#panel-special-invite .sinv-board-top, #panel-special-invite-details .sinv-board-top,
#panel-special-invite .sinv-board-bot, #panel-special-invite-details .sinv-board-bot {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-height: 0;
  padding: 0.7rem 0.75rem 0.8rem;
}
#panel-special-invite .sinv-board-top, #panel-special-invite-details .sinv-board-top {
  border-bottom: 1px solid rgba(168, 134, 92, 0.28);
}
#panel-special-invite .sinv-board-bot, #panel-special-invite-details .sinv-board-bot {
  background: linear-gradient(180deg, rgba(28, 22, 16, 0.35), transparent 40%);
  min-height: 9rem;
}
#panel-special-invite .sinv-board-head, #panel-special-invite-details .sinv-board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
#panel-special-invite .sinv-board-kicker, #panel-special-invite-details .sinv-board-kicker {
  margin: 0;
  font-family: var(--font-display, "Fraunces", serif);
  font-size: 1.05rem;
  font-weight: 650;
  color: rgba(232, 214, 180, 0.95);
}
#panel-special-invite .sinv-board-actions, #panel-special-invite-details .sinv-board-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
#panel-special-invite .sinv-board-actions .rsv-btn, #panel-special-invite-details .sinv-board-actions .rsv-btn{
  min-height: 1.55rem;
  padding: 0.2rem 0.55rem;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
}
#panel-special-invite .sinv-search input, #panel-special-invite-details .sinv-search input,
#panel-special-invite .sinv-q-filters input, #panel-special-invite-details .sinv-q-filters input,
#panel-special-invite .sinv-q-filters select, #panel-special-invite-details .sinv-q-filters select,
#panel-special-invite .sinv-meta input, #panel-special-invite-details .sinv-meta input{
  width: 100%;
  box-sizing: border-box;
}
#panel-special-invite .sinv-search input, #panel-special-invite-details .sinv-search input{
  min-height: 2.1rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid rgba(168, 134, 92, 0.28);
  border-radius: 1px;
  background: rgba(8, 9, 12, 0.92);
  color: rgba(232, 239, 233, 0.92);
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  font-size: 0.78rem;
}
#panel-special-invite .sinv-q-filters, #panel-special-invite-details .sinv-q-filters {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  flex: 0 0 auto;
}
#panel-special-invite .sinv-q-filters-row, #panel-special-invite-details .sinv-q-filters-row {
  display: grid;
  grid-template-columns:
    minmax(7.5rem, 1.55fr)
    minmax(5.2rem, 0.85fr)
    minmax(5.2rem, 0.85fr)
    minmax(3.6rem, 0.45fr)
    minmax(4.8rem, 0.7fr)
    minmax(5.2rem, 0.75fr)
    auto;
  gap: 0.35rem 0.4rem;
  align-items: end;
}

#panel-special-invite .sinv-q-foot, #panel-special-invite-details .sinv-q-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 0.45rem 0.75rem;
  flex: 0 0 auto;
  margin-top: 0.35rem;
}

#panel-special-invite .sinv-q-seat-filters, #panel-special-invite-details .sinv-q-seat-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(5.5rem, 8.5rem));
  gap: 0.35rem 0.4rem;
  align-items: end;
  min-width: 0;
  flex: 1 1 auto;
}

#panel-special-invite .sinv-q-seat-filters .admin-stats-field, #panel-special-invite-details .sinv-q-seat-filters .admin-stats-field{
  margin: 0;
  min-width: 0;
}

#panel-special-invite .sinv-q-seat-filters .admin-stats-field > span, #panel-special-invite-details .sinv-q-seat-filters .admin-stats-field > span{
  display: block;
  margin: 0 0 0.22rem;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(201, 165, 116, 0.82);
}

#panel-special-invite .sinv-q-seat-filters select, #panel-special-invite-details .sinv-q-seat-filters select{
  width: 100%;
  box-sizing: border-box;
  min-height: 2.05rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid rgba(168, 134, 92, 0.28);
  border-radius: 1px;
  background: rgba(8, 9, 12, 0.92);
  color: rgba(232, 239, 233, 0.92);
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  font-size: 0.76rem;
}

#panel-special-invite .sinv-q-foot .sinv-pager, #panel-special-invite-details .sinv-q-foot .sinv-pager{
  margin-top: 0;
  margin-left: auto;
}

#panel-investigation .admin-investigation-catalog-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 0.45rem 0.75rem;
  margin-top: 0.45rem;
}

#panel-investigation .admin-investigation-seat-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(5.5rem, 8.5rem));
  gap: 0.35rem 0.45rem;
  align-items: end;
  min-width: 0;
  flex: 1 1 auto;
}

#panel-investigation .admin-investigation-seat-filters .admin-stats-field {
  margin: 0;
  min-width: 0;
}

#panel-investigation .admin-investigation-catalog-foot .admin-investigation-pager {
  margin-left: auto;
}
#panel-special-invite .sinv-q-filters .admin-stats-field, #panel-special-invite-details .sinv-q-filters .admin-stats-field{
  margin: 0;
  min-width: 0;
}
#panel-special-invite .sinv-q-filters .admin-stats-field > span, #panel-special-invite-details .sinv-q-filters .admin-stats-field > span{
  display: block;
  margin: 0 0 0.22rem;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(201, 165, 116, 0.82);
}
#panel-special-invite .sinv-q-filters input, #panel-special-invite-details .sinv-q-filters input,
#panel-special-invite .sinv-q-filters select, #panel-special-invite-details .sinv-q-filters select{
  min-height: 2.05rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid rgba(168, 134, 92, 0.28);
  border-radius: 1px;
  background: rgba(8, 9, 12, 0.92);
  color: rgba(232, 239, 233, 0.92);
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  font-size: 0.76rem;
}
#panel-special-invite .sinv-q-search-go, #panel-special-invite-details .sinv-q-search-go {
  align-self: end;
  min-height: 2.05rem;
  padding: 0 0.85rem;
  white-space: nowrap;
}
#panel-special-invite .sinv-pool, #panel-special-invite-details .sinv-pool {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  padding-right: 0.15rem;
}
#panel-special-invite .sinv-pool-row, #panel-special-invite-details .sinv-pool-row {
  appearance: none;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
  margin: 0;
  padding: 0.45rem 0.5rem;
  border: 1px solid rgba(168, 134, 92, 0.22);
  border-radius: 2px;
  background: rgba(14, 12, 11, 0.9);
  color: rgba(220, 214, 204, 0.92);
  text-align: left;
  cursor: pointer;
}
/* display:flex above beats UA [hidden]{display:none} — search filter must win. */
#panel-special-invite .sinv-pool-row[hidden], #panel-special-invite-details .sinv-pool-row[hidden],
#panel-special-invite .sinv-empty[hidden], #panel-special-invite-details .sinv-empty[hidden]{
  display: none !important;
}
#panel-special-invite .sinv-board--questions, #panel-special-invite-details .sinv-board--questions {
  grid-template-rows: minmax(0, 1.7fr) minmax(8rem, 0.48fr);
}
#panel-special-invite .sinv-board--questions > .sinv-board-bot,
#panel-special-invite-details .sinv-board--questions > .sinv-board-bot {
  min-height: 8rem;
}
#panel-special-invite .sinv-q-catalog, #panel-special-invite-details .sinv-q-catalog {
  gap: 0.55rem;
  min-height: 0;
  overflow: hidden;
}
#panel-special-invite .sinv-q-table-wrap, #panel-special-invite-details .sinv-q-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  border: 1px solid rgba(168, 134, 92, 0.28);
  border-radius: 2px;
  background: rgba(8, 8, 10, 0.72);
}
#panel-special-invite .sinv-q-table, #panel-special-invite-details .sinv-q-table {
  width: 100%;
}
#panel-special-invite .sinv-q-table .admin-investigation-th-check, #panel-special-invite-details .sinv-q-table .admin-investigation-th-check,
#panel-special-invite .sinv-q-table .admin-investigation-td-check, #panel-special-invite-details .sinv-q-table .admin-investigation-td-check{
  width: 2.25rem;
  text-align: center;
}
#panel-special-invite .sinv-q-table .admin-investigation-kind.is-coding-no, #panel-special-invite-details .sinv-q-table .admin-investigation-kind.is-coding-no{
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  justify-content: center;
  border-radius: 999px;
  font-size: 0.85rem;
  line-height: 1;
}

#panel-special-invite .admin-investigation-row-tr.is-selected .admin-stats-instrument-stem, #panel-special-invite-details .admin-investigation-row-tr.is-selected .admin-stats-instrument-stem{
  color: var(--inv-gold, #c9a574);
}
/* 08 Selected panels reuse 07 picked chrome; fill the board bottom. */
#panel-special-invite .sinv-board-bot.admin-investigation-picked, #panel-special-invite-details .sinv-board-bot.admin-investigation-picked{
  padding: 0;
  gap: 0;
  background: rgba(0, 0, 0, 0.34);
  border: 0;
  border-radius: 0;
  border-top: 1px solid rgba(168, 134, 92, 0.28);
}
#panel-special-invite .sinv-c-selected .sinv-selected-email, #panel-special-invite-details .sinv-c-selected .sinv-selected-email,
#panel-special-invite .sinv-c-selected .admin-investigation-picked-stem, #panel-special-invite-details .sinv-c-selected .admin-investigation-picked-stem{
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  font-size: 0.78rem;
  -webkit-line-clamp: 2;
}

#panel-special-invite .sinv-c-selected-head, #panel-special-invite-details .sinv-c-selected-head,
#panel-special-invite .sinv-q-selected-head, #panel-special-invite-details .sinv-q-selected-head {
  align-items: center;
  gap: 0.45rem;
}

#panel-special-invite .sinv-c-selected-label, #panel-special-invite-details .sinv-c-selected-label,
#panel-special-invite .sinv-q-selected-label, #panel-special-invite-details .sinv-q-selected-label {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  min-width: 0;
}

#panel-special-invite .sinv-c-selected-label .admin-investigation-picked-count, #panel-special-invite-details .sinv-c-selected-label .admin-investigation-picked-count,
#panel-special-invite .sinv-q-selected-label .admin-investigation-picked-count, #panel-special-invite-details .sinv-q-selected-label .admin-investigation-picked-count{
  flex: 0 0 auto;
}

#panel-special-invite .sinv-c-selected-actions, #panel-special-invite-details .sinv-c-selected-actions,
#panel-special-invite .sinv-q-selected-actions, #panel-special-invite-details .sinv-q-selected-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 0.28rem;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 11.5rem;
}

#panel-special-invite .sinv-c-sel-btn.rsv-btn, #panel-special-invite-details .sinv-c-sel-btn.rsv-btn,
#panel-special-invite .sinv-q-sel-btn.rsv-btn, #panel-special-invite-details .sinv-q-sel-btn.rsv-btn{
  min-height: 2rem;
  height: 2rem;
  width: 100%;
  min-width: 0;
  padding: 0 0.28rem;
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#panel-special-invite .sinv-c-sel-btn--select-all.rsv-btn, #panel-special-invite-details .sinv-c-sel-btn--select-all.rsv-btn,
#panel-special-invite .sinv-q-sel-btn--select-all.rsv-btn, #panel-special-invite-details .sinv-q-sel-btn--select-all.rsv-btn{
  white-space: normal;
  font-size: 0.48rem;
  letter-spacing: 0.02em;
  line-height: 1.05;
  padding: 0.12rem 0.15rem;
  text-overflow: clip;
}

#panel-special-invite .sinv-c-sel-btn-stack, #panel-special-invite-details .sinv-c-sel-btn-stack,
#panel-special-invite .sinv-q-sel-btn-stack, #panel-special-invite-details .sinv-q-sel-btn-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.02rem;
  line-height: 1.05;
}

#panel-special-invite .sinv-c-picked-item, #panel-special-invite-details .sinv-c-picked-item,
#panel-special-invite .sinv-q-picked-item, #panel-special-invite-details .sinv-q-picked-item {
  grid-template-columns: minmax(0, 1fr);
  cursor: pointer;
}

#panel-special-invite .sinv-q-picked-item, #panel-special-invite-details .sinv-q-picked-item {
  grid-template-columns: 3.1rem minmax(0, 1fr);
  align-items: start;
  gap: 0.4rem;
}

#panel-special-invite .sinv-c-picked-item.is-picked, #panel-special-invite-details .sinv-c-picked-item.is-picked,
#panel-special-invite .sinv-q-picked-item.is-picked, #panel-special-invite-details .sinv-q-picked-item.is-picked{
  border-color: rgba(90, 150, 255, 0.75);
  box-shadow: inset 0 0 0 1px rgba(90, 150, 255, 0.35);
  background:
    linear-gradient(180deg, rgba(36, 56, 96, 0.42) 0%, rgba(12, 14, 22, 0.96) 100%);
}

#panel-special-invite .sinv-q-pos, #panel-special-invite-details .sinv-q-pos {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin: 0;
  padding-top: 0.1rem;
  cursor: default;
}

#panel-special-invite .sinv-q-pos-input, #panel-special-invite-details .sinv-q-pos-input {
  box-sizing: border-box;
  width: 2.55rem;
  min-height: 1.65rem;
  margin: 0;
  padding: 0.12rem 0.15rem;
  border: 1px solid rgba(201, 165, 116, 0.45);
  border-radius: 1px;
  background: rgba(8, 8, 10, 0.92);
  color: var(--stats-paper, #f4eee3);
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  font-size: 0.72rem;
  font-weight: 600;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}

#panel-special-invite .sinv-q-pos-input::-webkit-outer-spin-button, #panel-special-invite-details .sinv-q-pos-input::-webkit-outer-spin-button,
#panel-special-invite .sinv-q-pos-input::-webkit-inner-spin-button, #panel-special-invite-details .sinv-q-pos-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#panel-special-invite .sinv-q-pos-input:focus, #panel-special-invite-details .sinv-q-pos-input:focus {
  outline: none;
  border-color: rgba(201, 165, 116, 0.9);
  box-shadow: 0 0 0 1px rgba(201, 165, 116, 0.28);
}

#panel-special-invite .sinv-cand-tag, #panel-special-invite-details .sinv-cand-tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  justify-self: start;
  padding: 0.12rem 0.4rem;
  border: 1px solid rgba(201, 165, 116, 0.55);
  border-radius: 1px;
  background:
    linear-gradient(180deg, rgba(78, 62, 42, 0.5) 0%, rgba(16, 14, 12, 0.96) 100%);
  color: var(--stats-gold, #c9a574);
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-special-invite .sinv-cand-tag:hover, #panel-special-invite-details .sinv-cand-tag:hover,
#panel-special-invite .sinv-cand-tag:focus-visible, #panel-special-invite-details .sinv-cand-tag:focus-visible {
  border-color: rgba(201, 165, 116, 0.9);
  color: #e8d4b0;
  outline: none;
}

#panel-special-invite .sinv-pager, #panel-special-invite-details .sinv-pager {
  flex: 0 0 auto;
  margin-top: 0.15rem;
}

#panel-special-invite .sinv-pool-row:hover, #panel-special-invite-details .sinv-pool-row:hover,
#panel-special-invite .sinv-pool-row.is-selected, #panel-special-invite-details .sinv-pool-row.is-selected{
  border-color: rgba(201, 165, 116, 0.55);
  background: rgba(42, 32, 22, 0.95);
}
#panel-special-invite .sinv-pool-mark, #panel-special-invite-details .sinv-pool-mark {
  flex: 0 0 auto;
  width: 0.7rem;
  height: 0.7rem;
  margin-top: 0.2rem;
  border: 1px solid rgba(201, 165, 116, 0.55);
  background: transparent;
}
#panel-special-invite .sinv-pool-row.is-selected .sinv-pool-mark, #panel-special-invite-details .sinv-pool-row.is-selected .sinv-pool-mark{
  background: rgba(201, 165, 116, 0.85);
}
#panel-special-invite .sinv-pool-label, #panel-special-invite-details .sinv-pool-label,
#panel-special-invite .sinv-selected-email, #panel-special-invite-details .sinv-selected-email {
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  font-size: 0.78rem;
}
#panel-special-invite .sinv-pool-q, #panel-special-invite-details .sinv-pool-q {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}
#panel-special-invite .sinv-pool-stem, #panel-special-invite-details .sinv-pool-stem {
  font-size: 0.82rem;
  line-height: 1.35;
}
#panel-special-invite .sinv-selected, #panel-special-invite-details .sinv-selected {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
}
#panel-special-invite .sinv-selected--q, #panel-special-invite-details .sinv-selected--q {
  list-style: none;
  margin: 0;
  padding: 0;
}
#panel-special-invite .sinv-selected-item, #panel-special-invite-details .sinv-selected-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.45rem;
  border-left: 2px solid rgba(201, 165, 116, 0.55);
  background: rgba(0, 0, 0, 0.22);
}
#panel-special-invite .sinv-selected-main, #panel-special-invite-details .sinv-selected-main {
  min-width: 0;
  display: grid;
  gap: 0.12rem;
}
#panel-special-invite .sinv-empty, #panel-special-invite-details .sinv-empty {
  margin: 0.35rem 0;
  font-family: var(--stats-mono, "IBM Plex Mono", monospace);
  font-size: 0.74rem;
  color: rgba(168, 160, 148, 0.72);
}
@media (max-width: 980px) {
  #panel-special-invite .sinv-dual, #panel-special-invite-details .sinv-dual {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  #panel-special-invite .sinv-meta, #panel-special-invite-details .sinv-meta {
    grid-template-columns: 1fr;
  }
}

/* Details review: one frame — instruments above, candidates below. */
#panel-special-invite-details .sinv-details-frame {
  display: grid;
  grid-template-rows: minmax(0, 1.2fr) minmax(0, 1fr);
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  border: 1px solid rgba(168, 134, 92, 0.32);
  border-radius: 4px;
  background: rgba(10, 10, 12, 0.72);
  overflow: hidden;
}
#panel-special-invite-details .sinv-details-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  padding: 0.55rem 0.65rem 0.65rem;
}
#panel-special-invite-details .sinv-details-pane--instruments {
  border-bottom: 1px solid rgba(168, 134, 92, 0.32);
}
#panel-special-invite-details .sinv-details-pane .sinv-q-table-wrap,
#panel-special-invite-details .sinv-details-pane .sinv-details-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
  border: 0;
  background: transparent;
}
#panel-special-invite-details.admin-panel {
  position: relative;
  --brief-ink: #f4efe6;
  --brief-muted: #c4b8a4;
  --brief-label: #e6d0a8;
  --brief-panel: #16181f;
  --brief-panel-soft: #1b1e27;
  --brief-line: rgba(201, 165, 116, 0.42);
}
#panel-special-invite-details .sinv-details-main {
  position: relative;
}
#panel-special-invite-details.is-detail-open .sinv-details-review {
  visibility: hidden;
  pointer-events: none;
}
#panel-special-invite-details.is-detail-open .sinv-panel-head-actions {
  display: none;
}
#panel-special-invite-details .sinv-details-q-sheet {
  position: absolute;
  inset: 0;
  z-index: 40;
  overflow: auto;
}
#panel-special-invite-details .sinv-details-q-row.is-clickable {
  cursor: pointer;
}
#panel-special-invite-details .sinv-details-q-row.is-clickable:hover td,
#panel-special-invite-details .sinv-details-q-row.is-focus td {
  background: rgba(201, 165, 116, 0.07);
}
#panel-special-invite-details .sinv-details-q-sheet .admin-stats-drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 2.05rem;
  padding: 0.35rem 0.9rem;
  border: 1px solid rgba(201, 165, 116, 0.65);
  border-radius: 2px;
  background: #0c0d10;
  color: #c9a574;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}
#panel-special-invite-details .sinv-details-q-sheet .admin-stats-drawer-close:hover,
#panel-special-invite-details .sinv-details-q-sheet .admin-stats-drawer-close:focus-visible {
  filter: brightness(1.08);
  color: #e8d4b0;
  outline: none;
}

.admin-detail-experience-meta {
  margin: 0 0 0.75rem;
  font-size: 0.88rem;
  color: var(--paper-dim, #a8a297);
}
.admin-detail-experience-text {
  white-space: pre-wrap;
  margin: 0;
  padding: 0.75rem 0.85rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.25);
  font-size: 0.88rem;
  line-height: 1.45;
  max-height: min(50vh, 22rem);
  overflow: auto;
}

/* —— Interview Work Scan (Main 01) —— */
.work-scan {
  --ws-ink: #e8f0f4;
  --ws-muted: #9eb0bc;
  --ws-line: rgba(120, 180, 200, 0.35);
  --ws-accent: #3d9ead;
  --ws-deep: #0c1418;
  position: relative;
  margin: 1.25rem 0 1.75rem;
  border-radius: 0;
  overflow: hidden;
}
.work-scan--entry-only {
  margin: 0;
  overflow: visible;
  height: 0;
  border: 0;
}
.hub-ach-open.is-locked {
  opacity: 0.72;
}
.hub-ach-open.is-locked:hover {
  opacity: 0.88;
}
.work-scan-hero {
  position: relative;
  padding: 1.5rem 1.35rem 1.65rem;
  background:
    radial-gradient(120% 80% at 10% 0%, rgba(61, 158, 173, 0.22), transparent 55%),
    linear-gradient(165deg, #121c22 0%, #0a1014 55%, #0e181c 100%);
  color: var(--ws-ink);
  border: 1px solid var(--ws-line);
}
.work-scan-hero-signal {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 18px,
    rgba(61, 158, 173, 0.04) 18px,
    rgba(61, 158, 173, 0.04) 19px
  );
  pointer-events: none;
  animation: ws-scan 4.5s ease-in-out infinite;
}
@keyframes ws-scan {
  0%, 100% { opacity: 0.35; transform: translateY(0); }
  50% { opacity: 0.7; transform: translateY(2px); }
}
.work-scan-kicker {
  position: relative;
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ws-accent);
}
.work-scan-title {
  position: relative;
  margin: 0 0 0.65rem;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.work-scan-lede {
  position: relative;
  margin: 0;
  max-width: 36rem;
  color: var(--ws-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}
.work-scan-primary {
  position: relative;
  margin: 0.75rem 0 0;
  font-size: 1.05rem;
  font-weight: 600;
}
.work-scan-cta {
  position: relative;
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 1.1rem;
  border: 1px solid rgba(61, 158, 173, 0.55);
  background: rgba(61, 158, 173, 0.15);
  color: var(--ws-ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.work-scan-cta:hover {
  background: rgba(61, 158, 173, 0.28);
}
.work-scan-bar {
  position: relative;
  margin-top: 0.85rem;
  height: 0.35rem;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.work-scan-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #2a7a88, #5ec4d4);
  transition: width 0.4s ease;
}
.work-scan-updating {
  margin-left: 0.5rem;
  font-size: 0.8rem;
  color: var(--ws-accent);
}
.work-scan--sealed .work-scan-hero {
  opacity: 0.92;
}
.work-scan-dialog,
.work-scan-evidence-dialog {
  border: none;
  padding: 0;
  max-width: min(42rem, calc(100vw - 1.5rem));
  width: min(42rem, calc(100vw - 1.5rem));
  background: transparent;
}
.work-scan-evidence-dialog {
  max-width: min(56rem, calc(100vw - 1.25rem));
  width: min(56rem, calc(100vw - 1.25rem));
}
.work-scan-dialog::backdrop,
.work-scan-evidence-dialog::backdrop {
  background: rgba(6, 10, 12, 0.78);
}
.work-scan-dialog-card {
  background:
    radial-gradient(90% 60% at 0% 0%, rgba(61, 158, 173, 0.14), transparent 50%),
    #10181c;
  color: var(--ws-ink);
  border: 1px solid var(--ws-line);
  padding: 1.15rem 1.25rem 1.35rem;
}
.work-scan-dialog-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1rem;
}
.work-scan-dialog-kicker {
  margin: 0 0 0.25rem;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ws-accent);
}
.work-scan-dialog-head h3 {
  margin: 0;
  font-size: 1.2rem;
}
.work-scan-dialog-x {
  border: 1px solid var(--ws-line);
  background: transparent;
  color: var(--ws-muted);
  padding: 0.35rem 0.65rem;
  cursor: pointer;
  font: inherit;
}
.work-scan-section-label {
  margin: 0 0 0.45rem;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ws-muted);
}
.work-scan-stat-block + .work-scan-stat-block {
  margin-top: 1rem;
}
.work-scan-trait-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
}
.work-scan-trait {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "tag title hint"
    "gap gap gap";
  align-items: center;
  gap: 0.35rem 0.55rem;
  text-align: left;
  border: 1px solid rgba(120, 180, 200, 0.28);
  background: rgba(255, 255, 255, 0.03);
  color: inherit;
  padding: 0.7rem 0.8rem;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.work-scan-trait:hover {
  border-color: rgba(94, 196, 212, 0.65);
  background: rgba(61, 158, 173, 0.1);
  transform: translateY(-1px);
}
.work-scan-trait--core {
  grid-template-columns: auto 1fr auto;
}
.work-scan-trait--buff {
  border-color: rgba(94, 196, 140, 0.35);
}
.work-scan-trait--debuff {
  border-color: rgba(212, 165, 116, 0.4);
}
.work-scan-trait--other {
  border-color: rgba(160, 170, 190, 0.35);
}
.work-scan-trait-tag {
  grid-area: tag;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  font-weight: 700;
  text-transform: none;
  color: var(--ws-accent);
}
.work-scan-trait--buff .work-scan-trait-tag {
  color: #7dcea0;
}
.work-scan-trait--debuff .work-scan-trait-tag {
  color: #d4a574;
}
.work-scan-trait--other .work-scan-trait-tag {
  color: #a8b0c0;
}
.work-scan-trait-title {
  grid-area: title;
  font-size: 0.98rem;
  font-weight: 650;
  line-height: 1.25;
}
.work-scan-trait-hint {
  grid-area: hint;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ws-muted);
}
.work-scan-trait-gap {
  grid-area: gap;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #d4a574;
}
.work-scan-disclaimer {
  margin: 1.25rem 0 0;
  font-size: 0.72rem;
  color: var(--ws-muted);
  opacity: 0.8;
}
.work-scan-evidence-sheet {
  max-height: min(85vh, 44rem);
  display: flex;
  flex-direction: column;
}
.work-scan-evidence-split {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(14rem, 0.9fr);
  gap: 0.85rem;
  min-height: 0;
  flex: 1;
}
.work-scan-evidence-lhs {
  min-width: 0;
  max-height: min(62vh, 32rem);
  overflow: auto;
  display: grid;
  gap: 0.7rem;
  padding-right: 0.15rem;
}
.work-scan-evidence-rhs {
  min-width: 0;
  border-left: 1px solid rgba(120, 180, 200, 0.22);
  padding-left: 0.85rem;
}
.work-scan-evidence-empty {
  margin: 0;
  color: var(--ws-muted);
  font-size: 0.9rem;
}
.work-scan-qa {
  border: 1px solid rgba(120, 180, 200, 0.22);
  background: rgba(0, 0, 0, 0.18);
  padding: 0.75rem 0.8rem;
}
.work-scan-qa-head {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ws-muted);
}
.work-scan-qa-score {
  color: var(--ws-accent);
}
.work-scan-qa-history {
  display: inline-flex;
  align-items: center;
  margin-top: 0.75rem;
  padding: 0.42rem 0.85rem;
  border: 1px solid rgba(201, 165, 116, 0.55);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(18, 14, 10, 0.96), rgba(8, 6, 4, 0.98));
  color: #e8d4b0;
  font-family: var(--font-herald, Georgia, serif);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  box-shadow:
    inset 0 0 0 1px rgba(201, 165, 116, 0.08),
    0 6px 16px rgba(0, 0, 0, 0.28);
}
.work-scan-qa-history:hover,
.work-scan-qa-history:focus-visible {
  border-color: rgba(201, 165, 116, 0.85);
  color: #f3e6cf;
  outline: none;
}
.work-scan-qa-kicker {
  margin: 0 0 0.25rem;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ws-muted);
}
.work-scan-qa-text {
  margin: 0 0 0.7rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--ws-ink);
}
.work-scan-qa-code {
  margin: 0;
  padding: 0.45rem 0.55rem;
  white-space: pre-wrap;
  overflow-x: auto;
  font-size: 0.78rem;
  line-height: 1.4;
  border: 1px solid rgba(120, 180, 200, 0.28);
  background: rgba(0, 0, 0, 0.28);
  color: var(--sao-code-text, #e8efe9);
}
.work-scan-qa-tests {
  margin: 0.35rem 0 0;
  font-size: 0.72rem;
  color: var(--ws-muted);
}
.work-scan-catch {
  position: relative;
  border: 1px dashed rgba(94, 196, 212, 0.55);
  background: rgba(61, 158, 173, 0.08);
  padding: 0.65rem 0.7rem 0.7rem;
}
.work-scan-catch--empty {
  border-style: solid;
  border-color: rgba(120, 180, 200, 0.2);
  background: rgba(255, 255, 255, 0.02);
}
.work-scan-catch-label {
  display: inline-block;
  margin-bottom: 0.35rem;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ws-accent);
}
.work-scan-catch-line {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
}
.work-scan-catch-mark {
  display: inline;
  padding: 0.08em 0.28em;
  background: rgba(94, 196, 212, 0.28);
  color: inherit;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(94, 196, 212, 0.55);
  font-weight: 600;
}
.work-scan-catch-rest {
  color: var(--ws-muted);
}
.work-scan-catch-empty {
  margin: 0;
  color: var(--ws-muted);
  font-size: 0.88rem;
}
.work-scan-callout {
  position: sticky;
  top: 0;
  border: 1px solid rgba(120, 180, 200, 0.28);
  background: rgba(255, 255, 255, 0.03);
  padding: 0.85rem 0.9rem;
}
.work-scan-callout--strength {
  border-color: rgba(94, 196, 140, 0.45);
}
.work-scan-callout--watch {
  border-color: rgba(212, 165, 116, 0.5);
}
.work-scan-callout-tag {
  margin: 0 0 0.35rem;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--ws-accent);
}
.work-scan-callout--strength .work-scan-callout-tag {
  color: #7dcea0;
}
.work-scan-callout--watch .work-scan-callout-tag {
  color: #d4a574;
}
.work-scan-callout-title {
  margin: 0 0 0.45rem;
  font-size: 1.05rem;
  line-height: 1.25;
}
.work-scan-callout-gap {
  margin: 0 0 0.4rem;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #d4a574;
}
.work-scan-callout-body {
  margin: 0;
  color: var(--ws-muted);
  font-size: 0.9rem;
  line-height: 1.45;
}
.work-scan-callout-next {
  margin: 0.65rem 0 0;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--ws-ink);
}
.work-scan-callout-next span {
  color: var(--ws-accent);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.72rem;
  margin-right: 0.25rem;
}
.work-scan-callout-pointer {
  margin: 0.85rem 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ws-muted);
}
@media (max-width: 720px) {
  .work-scan-evidence-split {
    grid-template-columns: 1fr;
  }
  .work-scan-evidence-rhs {
    border-left: none;
    border-top: 1px solid rgba(120, 180, 200, 0.22);
    padding-left: 0;
    padding-top: 0.75rem;
  }
  .work-scan-evidence-lhs {
    max-height: min(42vh, 20rem);
  }
  .work-scan-callout {
    position: static;
  }
}

/* Dedicated Customized Report page — annotated Q&A (not History). */
/* portal-main is overflow:hidden elsewhere; this page must scroll the Q&A stack. */
body.work-scan-page main.portal-main {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.ws-report {
  --ws-ink: #e8eef2;
  --ws-muted: rgba(180, 190, 200, 0.78);
  max-width: 78rem;
  padding-bottom: 2.5rem;
}
.ws-finding-evidence {
  min-height: 0;
}
.ws-report-head {
  position: relative;
  margin-bottom: 1.25rem;
  /* Reserve top-right for the back control without shifting title/lede. */
  padding-right: 14.5rem;
}
/* Super Intelligence on Customized Report: original cool lavender mono (hub brand),
   not the bronze game-stage accent used by Character Status / History kickers. */
body.work-scan-page .ws-report .ws-report-head .game-stage-kicker,
.portal-page .ws-report .ws-report-head .game-stage-kicker,
.ws-report .ws-report-head .game-stage-kicker {
  font-family: "IBM Plex Mono", ui-monospace, monospace !important;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(210, 185, 220, 0.72);
  text-shadow: 0 0 10px rgba(160, 190, 255, 0.2);
}
.ws-report-back {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0.55rem 1.1rem;
  border: 1px solid rgba(201, 165, 116, 0.55);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(18, 14, 10, 0.96), rgba(8, 6, 4, 0.98));
  color: #e8d4b0;
  font-family: var(--font-herald, Georgia, serif);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.ws-report-back:hover,
.ws-report-back:focus-visible {
  border-color: rgba(201, 165, 116, 0.85);
  color: #f3e6cf;
  cursor: pointer;
}
@media (max-width: 720px) {
  .ws-report-head {
    padding-right: 0;
    padding-top: 3.1rem;
  }
  .ws-report-back {
    top: 0;
    right: 0;
  }
  .admin-page .ws-report-head.admin-ws-report-head {
    padding-right: 0;
    padding-top: 5.2rem;
  }
  .admin-ws-report-toolbar {
    left: auto;
    right: 0;
    max-width: min(100%, 28rem);
  }
}
.ws-report-updating {
  margin: 0 0 0.85rem auto;
  width: max-content;
  max-width: 100%;
  text-align: right;
  white-space: nowrap;
  color: #f0e2b8;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  line-height: 1.45;
}
.ws-report-gate {
  border: 1px solid rgba(160, 175, 190, 0.28);
  background: rgba(0, 0, 0, 0.28);
  padding: 1.25rem 1.35rem;
}
.ws-report-gate-title {
  margin: 0 0 0.35rem;
  font-family: var(--font-herald, Georgia, serif);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f0e2b8;
}
.ws-report-gate-body {
  margin: 0;
  color: var(--ws-muted);
  max-width: 36rem;
  line-height: 1.45;
}
.ws-report-gate-hint {
  margin: 0.85rem 0 0;
}
.ws-report-gate-hint a {
  color: #f0e2b8;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.ws-report-gate-hint a:hover,
.ws-report-gate-hint a:focus-visible {
  color: #fff6d8;
}
.ws-report-mix {
  /* Coral for the skipped count. Lane colors match the Control Panel. */
  --ws-mix-skip: #e85d4a;
  --ws-mix-skip-muted: rgba(232, 93, 74, 0.78);
  margin: 0 0 1.1rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(160, 175, 190, 0.28);
  background: rgba(0, 0, 0, 0.22);
}
.ws-report-mix-kicker {
  margin: 0 0 0.55rem;
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f0e2b8;
}
.ws-report-mix-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.55rem 0.75rem;
}
.ws-report-mix-note {
  margin: 0.65rem 0 0;
  padding: 0.45rem 0.55rem;
  border: 1px solid rgba(201, 165, 116, 0.28);
  background: rgba(201, 165, 116, 0.06);
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  font-size: 0.78rem;
  line-height: 1.4;
  color: rgba(232, 214, 180, 0.88);
}
.ws-report-mix-item {
  display: grid;
  gap: 0.18rem;
}
.ws-report-mix-item strong {
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.ws-report-mix-item span {
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ws-report-mix-time {
  display: block;
  margin: 0.12rem 0 0;
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 550;
  letter-spacing: 0.04em;
  text-transform: none;
  color: rgba(200, 208, 216, 0.62);
}
/* Avoid Buff / Debuff / Key collision with mix labels. */
.ws-report-mix-item--total {
  border-right: 1px solid rgba(210, 218, 228, 0.55);
  padding-right: 0.95rem;
  margin-right: 0.2rem;
}
.ws-report-mix-item--beh {
  border-right: 1px solid rgba(210, 218, 228, 0.55);
  padding-right: 0.95rem;
  margin-right: 0.2rem;
}
.ws-report-mix-paren {
  display: inline;
  margin-left: 0.22em;
  font-size: 0.52em;
  font-weight: 550;
  letter-spacing: 0.02em;
  vertical-align: 0.18em;
  opacity: 1;
  text-transform: none;
  color: var(--ws-mix-skip);
}
.ws-report-mix-item--total strong { color: #d5dae0; }
.ws-report-mix-item--total span { color: rgba(213, 218, 224, 0.72); }
/* Same triad as the Control Panel: Tech rose, Code blue, Non-tech gold. */
.ws-report-mix-item--tech strong { color: #e08a90; }
.ws-report-mix-item--tech span { color: rgba(224, 138, 144, 0.86); }
.ws-report-mix-item--tech .ws-report-mix-time { color: rgba(224, 138, 144, 0.62); }
.ws-report-mix-item--code strong { color: #7eb6d6; }
.ws-report-mix-item--code span { color: rgba(126, 182, 214, 0.88); }
.ws-report-mix-item--code .ws-report-mix-time { color: rgba(126, 182, 214, 0.62); }
.ws-report-mix-item--exp strong { color: #e0c46a; }
.ws-report-mix-item--exp span { color: rgba(224, 196, 106, 0.88); }
.ws-report-mix-item--exp .ws-report-mix-time { color: rgba(224, 196, 106, 0.62); }
.ws-report-mix-item--beh strong { color: #f0e2b8; }
.ws-report-mix-item--beh span { color: rgba(240, 226, 184, 0.88); }
.ws-report-mix-item--beh .ws-report-mix-time { color: rgba(240, 226, 184, 0.62); }
.ws-report-mix-item--skip strong { color: var(--ws-mix-skip); }
.ws-report-mix-item--skip span { color: var(--ws-mix-skip-muted); }
.ws-report-mix-item--tech span,
.ws-report-mix-item--code span {
  letter-spacing: 0.06em;
}
@media (max-width: 720px) {
  .ws-report-mix-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ws-report-mix-item--beh {
    border-right: none;
    padding-right: 0;
    margin-right: 0;
  }
}
@media (max-width: 480px) {
  .ws-report-mix-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.ws-score-dist {
  margin: 0 0 1.1rem;
  border: 1px solid rgba(160, 175, 190, 0.28);
  background: rgba(0, 0, 0, 0.22);
}
.ws-score-dist[open] {
  cursor: pointer;
}
.ws-score-dist-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
  padding: 0.72rem 1rem;
  cursor: pointer;
  list-style: none;
  background: transparent;
}
.ws-score-dist-summary::-webkit-details-marker {
  display: none;
}
.ws-score-dist-summary:hover,
.ws-score-dist-summary:focus,
.ws-score-dist-summary:focus-visible {
  background: transparent;
  outline: none;
  box-shadow: none;
}
.ws-score-dist[open] > .ws-score-dist-summary {
  padding-bottom: 0.2rem;
}
.ws-score-dist-kicker {
  margin: 0;
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(240, 226, 184, 0.62);
}
.ws-score-dist-chevron {
  flex: 0 0 auto;
  width: 0.42rem;
  height: 0.42rem;
  margin-right: 0.2rem;
  border-right: 2px solid rgba(240, 226, 184, 0.88);
  border-bottom: 2px solid rgba(240, 226, 184, 0.88);
  transform: rotate(-45deg);
}
.ws-score-dist[open] > .ws-score-dist-summary .ws-score-dist-chevron {
  transform: rotate(45deg);
}
.ws-score-dist-panel {
  padding: 0 0.85rem 0.8rem;
}
.ws-score-dist-sub {
  margin: 0 0 0.35rem;
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: rgba(200, 208, 216, 0.5);
}
.ws-score-dist-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.45rem;
}
.ws-score-dist-filters button {
  appearance: none;
  margin: 0;
  padding: 0.28rem 0.48rem;
  border: 1px solid rgba(160, 175, 190, 0.32);
  background: transparent;
  color: rgba(213, 218, 224, 0.62);
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.ws-score-dist-filters button.is-on {
  font-weight: 700;
}
.ws-score-dist-filters button:focus-visible {
  outline: 1px solid rgba(213, 218, 224, 0.45);
  outline-offset: 1px;
}
.ws-score-dist-svg {
  display: block;
  width: 100%;
  height: auto;
}
.ws-score-dist-empty {
  margin: 0.2rem 0 0.35rem;
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  font-size: 0.78rem;
  color: rgba(200, 208, 216, 0.72);
}
.ws-report-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.1rem;
  margin: 0 0 1.1rem;
  font-size: 0.8rem;
  color: var(--ws-muted);
}
.ws-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.ws-mark {
  display: inline;
  padding: 0.06em 0.22em;
  border-radius: 2px;
  font-weight: 650;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* Designed triad: green=good, red=bad, amber=neutral key (not browser defaults). */
.ws-mark--buff {
  background: rgba(68, 158, 112, 0.32);
  box-shadow: 0 0 0 1.5px rgba(92, 186, 132, 0.82);
  color: inherit;
}
.ws-mark--debuff {
  background: rgba(188, 72, 82, 0.30);
  box-shadow: 0 0 0 1.5px rgba(210, 94, 102, 0.86);
  color: inherit;
}
.ws-mark--key {
  background: rgba(210, 168, 64, 0.30);
  box-shadow:
    0 0 0 1.5px rgba(222, 184, 78, 0.88),
    inset 0 0 0 1px rgba(255, 230, 150, 0.22);
  color: inherit;
}
.ws-mark--trial {
  background: rgba(90, 150, 196, 0.32);
  box-shadow: 0 0 0 1.5px rgba(126, 182, 214, 0.88);
  color: inherit;
}
/* Harness lane aliases → same designed triad (never browser <mark> yellow). */
.ws-mark--technical {
  background: rgba(188, 72, 82, 0.30);
  box-shadow: 0 0 0 1.5px rgba(210, 94, 102, 0.86);
  color: inherit;
}
.ws-mark--coding {
  background: rgba(90, 150, 196, 0.32);
  box-shadow: 0 0 0 1.5px rgba(126, 182, 214, 0.88);
  color: inherit;
}
.ws-mark--non_technical {
  background: rgba(210, 168, 64, 0.30);
  box-shadow:
    0 0 0 1.5px rgba(222, 184, 78, 0.88),
    inset 0 0 0 1px rgba(255, 230, 150, 0.22);
  color: inherit;
}
.ws-mark.is-wired,
.ws-margin-note.is-wired {
  filter: brightness(1.08);
}
/* Highlight stays off until the pointer is on the note, or the note is ticked. */
body.work-scan-page .ws-mark.ws-mark--reveal:not(.is-near):not(.is-pinned),
.ws-mark.ws-mark--reveal:not(.is-near):not(.is-pinned) {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  font-weight: inherit !important;
  color: inherit !important;
  filter: none !important;
}
/* Code words keep the dark chip. Stay on the normal line so the highlight does not stack into tall bars. */
.ws-mark .latex-inline-code {
  background: #0c0e10 !important;
  border-color: rgba(232, 239, 233, 0.22) !important;
  box-shadow: none !important;
  color: var(--sao-code-text);
  padding: 0 0.32em;
  line-height: 1;
  vertical-align: baseline;
}
.ws-wire-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  overflow: visible;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.ws-wire-layer.is-on {
  opacity: 1;
}
.ws-wire-layer .ws-wire-line {
  fill: none;
  stroke-linecap: butt;
  stroke-width: 1.25;
  stroke-dasharray: 7 6;
}
.ws-wire-layer .ws-wire-line--outer {
  stroke: rgba(222, 184, 78, 0.9);
}
.ws-wire-layer .ws-wire-line--outer.ws-wire-line--buff {
  stroke: rgba(92, 186, 132, 0.95);
}
.ws-wire-layer .ws-wire-line--outer.ws-wire-line--debuff {
  stroke: rgba(220, 100, 108, 0.95);
}
.ws-wire-layer .ws-wire-line--outer.ws-wire-line--key {
  stroke: rgba(222, 184, 78, 0.9);
}
.ws-wire-layer .ws-wire-line--outer.ws-wire-line--trial {
  stroke: rgba(126, 182, 214, 0.95);
}
.ws-report-layout {
  display: grid;
  grid-template-columns: minmax(12rem, 14.25rem) minmax(0, 1fr);
  gap: 0.85rem 1.15rem;
  align-items: stretch;
  /* Shared viewport band so LHS findings + RHS content scroll independently. */
  height: min(72vh, 46rem);
  max-height: calc(100dvh - 12.5rem);
  min-height: 22rem;
}
.ws-report-layout > .ws-findings-panel {
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
.ws-report-layout > .ws-findings-panel .ws-report-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}
.ws-report-nav {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 0;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0.45rem;
  border: 1px solid #3a3428;
  background: #0c0a08;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #8a7348 #0c0a08;
}
.ws-report-nav::-webkit-scrollbar {
  width: 0.4rem;
}
.ws-report-nav::-webkit-scrollbar-thumb {
  background: #8a7348;
  border-radius: 999px;
}
.ws-report-main {
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 0.15rem 0.5rem 0;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(160, 175, 190, 0.4) transparent;
}
.ws-nav-btn {
  display: grid;
  gap: 0.15rem;
  flex: 0 0 auto;
  width: 100%;
  margin: 0;
  padding: 0.55rem 0.65rem;
  border: 1px solid #2e2a22;
  border-radius: 8px; /* match report .game-stage frame */
  background: #12100c;
  color: var(--ws-ink);
  text-align: left;
  cursor: pointer;
  font: inherit;
}
/* display:grid above beats UA [hidden] in some engines — force filter hide. */
.ws-findings-panel [data-ws-group][hidden],
.ws-findings-panel [data-ws-group].is-filtered-out {
  display: none !important;
}
.ws-nav-btn:hover {
  border-color: #c9a574;
  background: #1a1510;
}
.ws-nav-btn.is-active {
  border-width: 2px;
  border-color: #f0e0b8;
  background: #2c2618;
  box-shadow: inset 4px 0 0 #f0e0b8;
}
.ws-nav-btn--buff:hover {
  border-color: #5a9a72;
  background: #101612;
}
.ws-nav-btn--buff.is-active {
  border-width: 2px;
  border-color: #9dffc8;
  background: #1a3a28;
  box-shadow: inset 4px 0 0 #9dffc8;
}
.ws-nav-btn--debuff:hover {
  border-color: #a65a60;
  background: #161012;
}
.ws-nav-btn--debuff.is-active {
  border-width: 2px;
  border-color: #ffb4ba;
  background: #3a1c22;
  box-shadow: inset 4px 0 0 #ffb4ba;
}
.ws-nav-tag {
  /* Finding title as the lead tag — same role as RHS comment titles. */
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-herald, Cinzel, Georgia, serif);
  font-size: 0.88rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: none;
  line-height: 1.25;
  color: #f0e6d2;
}
.ws-nav-tag--buff { color: #a8e6c4; }
.ws-nav-tag--debuff { color: #f0b0b6; }
.ws-nav-tag--key { color: #f0e2b8; }
.ws-nav-tag--other { color: #a8b0c0; }
.ws-nav-tag--all { color: #e0c46a; }
[data-ws-all-btn] .ws-nav-tag {
  text-transform: uppercase;
}
.ws-nav-btn strong.ws-nav-kind {
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #9aa3ad;
}
.ws-nav-btn--debuff strong.ws-nav-kind { color: #c08088; }
.ws-nav-btn--buff strong.ws-nav-kind { color: #6aaa86; }
.ws-nav-btn--trial strong.ws-nav-kind { color: #7eb6d6; }
/* Polarity lives on the finding article; the head box inherits (do not
   re-declare --ws-find-* on .ws-finding-head or Gaps stays tan). */
.ws-finding[hidden],
[data-ws-report].ws-one-finding .ws-finding:not(.is-ws-open) {
  display: none !important;
}
.ws-finding {
  /* High-contrast copy on tinted tag boxes (body ≠ muted grey). */
  --ws-find-ink: #f7f1e4;
  --ws-find-tag: #e8d4a8;
  --ws-find-label: #dcc89a;
  --ws-find-body: rgba(245, 240, 230, 0.96);
  --ws-find-next: #f0d878;
  --ws-find-edge: #c8b896;
  --ws-find-head-bg: rgba(28, 30, 34, 0.55);
  --ws-find-head-border: rgba(160, 175, 190, 0.28);
}
.ws-finding-head {
  margin-bottom: 0.9rem;
  padding: 0.95rem 1.1rem 1.05rem;
  border-radius: 6px;
  border: 1px solid var(--ws-find-head-border);
  border-left: 5px solid var(--ws-find-edge);
  background: var(--ws-find-head-bg);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
/* Technical / Gaps = red tag box — bright ink on dark red */
.ws-finding[data-ws-pol="debuff"],
.ws-finding[data-ws-pol="technical"] {
  --ws-find-ink: #fff0f0;
  --ws-find-tag: #ffc4c8;
  --ws-find-label: #ffb0b4;
  --ws-find-body: rgba(255, 246, 246, 0.96);
  --ws-find-next: #ffd0a8;
  --ws-find-edge: #e04040;
  --ws-find-head-border: rgba(224, 64, 64, 0.55);
  --ws-find-head-bg: linear-gradient(
    180deg,
    rgba(150, 24, 32, 0.5),
    rgba(40, 8, 12, 0.62)
  );
}
.ws-finding[data-ws-pol="debuff"][data-ws-shade="1"],
.ws-finding[data-ws-pol="technical"][data-ws-shade="1"] {
  --ws-find-ink: #fff4ee;
  --ws-find-tag: #ffc8b0;
  --ws-find-label: #ffb898;
  --ws-find-next: #ffd0b0;
  --ws-find-edge: #e05830;
  --ws-find-head-border: rgba(224, 88, 48, 0.55);
  --ws-find-head-bg: linear-gradient(
    180deg,
    rgba(140, 36, 20, 0.48),
    rgba(40, 12, 8, 0.62)
  );
}
.ws-finding[data-ws-pol="debuff"][data-ws-shade="2"],
.ws-finding[data-ws-pol="technical"][data-ws-shade="2"] {
  --ws-find-ink: #fff0f4;
  --ws-find-tag: #ffc0d0;
  --ws-find-label: #f8a8c0;
  --ws-find-next: #ffd0e0;
  --ws-find-edge: #d04070;
  --ws-find-head-border: rgba(208, 64, 112, 0.55);
  --ws-find-head-bg: linear-gradient(
    180deg,
    rgba(130, 20, 56, 0.48),
    rgba(40, 8, 22, 0.62)
  );
}
.ws-finding[data-ws-pol="debuff"][data-ws-shade="3"],
.ws-finding[data-ws-pol="technical"][data-ws-shade="3"] {
  --ws-find-ink: #fff0f0;
  --ws-find-tag: #ffc0c0;
  --ws-find-label: #ffaaaa;
  --ws-find-next: #ffd0c8;
  --ws-find-edge: #d02828;
  --ws-find-head-border: rgba(208, 40, 40, 0.55);
  --ws-find-head-bg: linear-gradient(
    180deg,
    rgba(160, 16, 16, 0.52),
    rgba(48, 6, 6, 0.65)
  );
}
/* Strengths = green tag box */
.ws-finding[data-ws-pol="buff"] {
  --ws-find-ink: #eefaf2;
  --ws-find-tag: #b8ecc8;
  --ws-find-label: #9edcb4;
  --ws-find-body: rgba(240, 252, 244, 0.96);
  --ws-find-next: #c8f0d0;
  --ws-find-edge: #3aaa68;
  --ws-find-head-border: rgba(58, 170, 104, 0.5);
  --ws-find-head-bg: linear-gradient(
    180deg,
    rgba(20, 88, 52, 0.48),
    rgba(6, 28, 16, 0.6)
  );
}
.ws-finding[data-ws-pol="buff"][data-ws-shade="1"] {
  --ws-find-ink: #eefaf8;
  --ws-find-tag: #b0ece4;
  --ws-find-label: #8edcd0;
  --ws-find-next: #b8f0e8;
  --ws-find-edge: #2a9a88;
  --ws-find-head-border: rgba(42, 154, 136, 0.5);
}
.ws-finding[data-ws-pol="buff"][data-ws-shade="2"] {
  --ws-find-ink: #f2faf0;
  --ws-find-tag: #c0ecb8;
  --ws-find-label: #a0d898;
  --ws-find-next: #c8f0c0;
  --ws-find-edge: #4aaa48;
  --ws-find-head-border: rgba(74, 170, 72, 0.5);
}
.ws-finding[data-ws-pol="buff"][data-ws-shade="3"] {
  --ws-find-ink: #eefaf6;
  --ws-find-tag: #b0e8d8;
  --ws-find-label: #8ed8c0;
  --ws-find-next: #b8f0e0;
  --ws-find-edge: #2a8870;
  --ws-find-head-border: rgba(42, 136, 112, 0.5);
}
/* Non-Technical / Other = designed amber (not browser yellow) */
.ws-finding[data-ws-pol="key"],
.ws-finding[data-ws-pol="non_technical"] {
  --ws-find-ink: #fff8e0;
  --ws-find-tag: #ffe08a;
  --ws-find-label: #f0d060;
  --ws-find-body: rgba(255, 250, 230, 0.96);
  --ws-find-next: #ffe8a0;
  --ws-find-edge: #d4a818;
  --ws-find-head-border: rgba(212, 168, 24, 0.55);
  --ws-find-head-bg: linear-gradient(
    180deg,
    rgba(100, 76, 12, 0.5),
    rgba(36, 28, 6, 0.62)
  );
}
.ws-finding[data-ws-pol="key"][data-ws-shade="1"],
.ws-finding[data-ws-pol="non_technical"][data-ws-shade="1"] {
  --ws-find-ink: #fff8e0;
  --ws-find-tag: #ffe08a;
  --ws-find-label: #f0d060;
  --ws-find-next: #ffe8a0;
  --ws-find-edge: #d0a818;
}
.ws-finding[data-ws-pol="key"][data-ws-shade="2"],
.ws-finding[data-ws-pol="non_technical"][data-ws-shade="2"] {
  --ws-find-ink: #fff6d8;
  --ws-find-tag: #f0d878;
  --ws-find-label: #e0c050;
  --ws-find-next: #f8e090;
  --ws-find-edge: #c09820;
}
.ws-finding[data-ws-pol="key"][data-ws-shade="3"],
.ws-finding[data-ws-pol="non_technical"][data-ws-shade="3"] {
  --ws-find-ink: #fffaf0;
  --ws-find-tag: #f0e0a0;
  --ws-find-label: #e0d070;
  --ws-find-next: #f8ecc0;
  --ws-find-edge: #d8b840;
}
/* Coding = blue tag box (same family as trial marks) */
.ws-finding[data-ws-pol="coding"],
.ws-finding[data-ws-pol="trial"] {
  --ws-find-ink: #eef6fc;
  --ws-find-tag: #b8d8f0;
  --ws-find-label: #9ec8e4;
  --ws-find-body: rgba(240, 248, 255, 0.96);
  --ws-find-next: #c8e0f4;
  --ws-find-edge: #4a90c0;
  --ws-find-head-border: rgba(74, 144, 192, 0.55);
  --ws-find-head-bg: linear-gradient(
    180deg,
    rgba(28, 72, 110, 0.5),
    rgba(8, 24, 40, 0.62)
  );
}
.ws-finding[data-ws-pol="coding"][data-ws-shade="1"],
.ws-finding[data-ws-pol="trial"][data-ws-shade="1"] {
  --ws-find-ink: #eef8fc;
  --ws-find-tag: #b0dcec;
  --ws-find-label: #8eccdc;
  --ws-find-next: #b8e4f0;
  --ws-find-edge: #3a98b0;
  --ws-find-head-border: rgba(58, 152, 176, 0.55);
}
.ws-finding[data-ws-pol="coding"][data-ws-shade="2"],
.ws-finding[data-ws-pol="trial"][data-ws-shade="2"] {
  --ws-find-ink: #f0f4fc;
  --ws-find-tag: #c0d0f0;
  --ws-find-label: #a0b8e0;
  --ws-find-next: #c8d8f4;
  --ws-find-edge: #5878c8;
  --ws-find-head-border: rgba(88, 120, 200, 0.55);
}
.ws-finding[data-ws-pol="coding"][data-ws-shade="3"],
.ws-finding[data-ws-pol="trial"][data-ws-shade="3"] {
  --ws-find-ink: #eef6fa;
  --ws-find-tag: #b0d8e4;
  --ws-find-label: #8ec8d4;
  --ws-find-next: #b8e0ec;
  --ws-find-edge: #3a88a8;
  --ws-find-head-border: rgba(58, 136, 168, 0.55);
}
/* All comments = neutral */
.ws-finding[data-ws-pol="core"] {
  --ws-find-ink: #f7f1e4;
  --ws-find-tag: #e8d4a8;
  --ws-find-label: #dcc89a;
  --ws-find-body: rgba(245, 240, 230, 0.96);
  --ws-find-next: #f0d878;
  --ws-find-edge: #c8b070;
  --ws-find-head-border: rgba(160, 175, 190, 0.28);
  --ws-find-head-bg: rgba(28, 30, 34, 0.55);
}
.ws-finding-tag {
  display: inline-block;
  margin: 0 0 0.4rem;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--ws-find-tag);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}
.ws-finding-tag--buff,
.ws-finding-tag--debuff,
.ws-finding-tag--technical,
.ws-finding-tag--coding,
.ws-finding-tag--trial,
.ws-finding-tag--non_technical,
.ws-finding-tag--core,
.ws-finding-tag--key,
.ws-finding-tag--other {
  color: var(--ws-find-tag);
}
.ws-finding-title {
  margin: 0 0 0.4rem;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.5rem, 2.2vw, 1.75rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: var(--ws-find-ink);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.ws-finding-gap {
  margin: 0 0 0.45rem;
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ws-find-label);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}
.ws-finding-gap[hidden] {
  display: none !important;
}
.ws-finding-body[hidden] {
  display: none !important;
}
/* Title card repeats the control panel and the note on each question. */
.ws-finding > .ws-finding-head,
.ws-finding--all-host > .ws-finding-head,
#finding-all > .ws-finding-head {
  display: none !important;
}
.ws-finding--all-host {
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
}
.ws-finding-body {
  margin: 0;
  font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  font-size: 0.98rem;
  font-weight: 450;
  letter-spacing: 0.01em;
  line-height: 1.6;
  color: var(--ws-find-body);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
.ws-finding-next {
  margin: 0.7rem 0 0;
  font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ws-find-body);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
.ws-finding-next span {
  display: inline-block;
  margin-right: 0.4rem;
  color: var(--ws-find-next);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}
/* Lane color bounds the question card: red technical, blue coding, gold non-technical. */
.ws-qa {
  border: 1px solid rgba(160, 175, 190, 0.28);
  background: rgba(0, 0, 0, 0.22);
  padding: 0.85rem 0.95rem 1rem;
  margin-bottom: 0.75rem;
}
.ws-qa-head {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ws-muted);
}
.ws-qa-history {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 1.7rem;
  margin: 0;
  padding: 0 0.75rem;
  border: 1px solid rgba(201, 165, 116, 0.55);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(18, 14, 10, 0.96), rgba(8, 6, 4, 0.98));
  color: #e8d4b0;
  font-family: var(--font-herald, Georgia, serif);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.ws-qa-history:hover,
.ws-qa-history:focus-visible {
  border-color: rgba(201, 165, 116, 0.85);
  color: #f3e6cf;
}
.ws-back-report {
  display: inline-flex;
  align-items: center;
  margin: 0 0.75rem 0 0;
  padding: 0.55rem 1.1rem;
  border: 1px solid rgba(201, 165, 116, 0.55);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(18, 14, 10, 0.96), rgba(8, 6, 4, 0.98));
  color: #e8d4b0;
  font-family: var(--font-herald, Georgia, serif);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.ws-back-report:hover,
.ws-back-report:focus-visible {
  border-color: rgba(201, 165, 116, 0.85);
  color: #f3e6cf;
}
.ws-qa-code-empty {
  display: inline-block;
  padding: 0.35rem 0.5rem;
  font-style: italic;
}
.ws-margin-note.latex-body,
.ws-finding-body.latex-body,
.ws-finding-next.latex-body {
  white-space: normal;
}
.ws-qa-scores {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem 0.75rem;
  text-align: right;
}
.ws-qa-score { color: #f0e2b8; }
.ws-qa-score--sub {
  color: rgba(200, 208, 216, 0.78);
  font-weight: 550;
}
.ws-qa-bucket {
  color: var(--ws-muted);
  font-weight: 500;
  letter-spacing: 0.03em;
}
.ws-qa-trial {
  color: #e0c46a;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.ws-trial-toggle {
  margin-left: 0.35rem;
  padding: 0.12rem 0.4rem;
  border: 1px solid rgba(224, 196, 106, 0.55);
  border-radius: 3px;
  background: transparent;
  color: #e0c46a;
  font: inherit;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.ws-trial-toggle:hover,
.ws-trial-toggle:focus-visible {
  border-color: rgba(224, 196, 106, 0.9);
  color: #f3e6cf;
}
.ws-qa--earlier[hidden] {
  display: none !important;
}
.ws-qa--multi-trial {
  border-color: rgba(222, 184, 78, 0.38);
}
/* Same question · different trials — unbroken LHS rail. */
.ws-trial-stack {
  position: relative;
  margin: 0 0 1rem;
  padding-left: 1.45rem;
}
.ws-trial-stack.is-collapsed {
  padding-left: 0;
}
.ws-trial-rail {
  position: absolute;
  left: 0.2rem;
  top: 0;
  bottom: 0;
  width: 0.9rem;
  pointer-events: none;
  z-index: 2;
}
.ws-trial-rail-line {
  position: absolute;
  left: 50%;
  width: 3px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(224, 196, 106, 0.25) 0%,
    rgba(224, 196, 106, 0.95) 12%,
    rgba(224, 196, 106, 0.95) 88%,
    rgba(224, 196, 106, 0.25) 100%
  );
  box-shadow:
    0 0 0 1px rgba(224, 196, 106, 0.35),
    0 0 10px rgba(224, 196, 106, 0.45);
}
.ws-trial-rail-node {
  position: absolute;
  left: 50%;
  width: 0.78rem;
  height: 0.78rem;
  margin-top: -0.39rem;
  margin-left: -0.39rem;
  border-radius: 50%;
  border: 2px solid #e8d08a;
  background: radial-gradient(circle at 35% 30%, #3a2e18 0%, #14100c 70%);
  box-shadow:
    0 0 0 2px rgba(8, 8, 10, 0.85),
    0 0 0 3px rgba(224, 196, 106, 0.35),
    0 0 12px rgba(224, 196, 106, 0.55);
}
.ws-trial-stack-cards {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
}
.ws-qa--in-stack {
  margin-bottom: 0;
}
.ws-qa--stack-first {
  border-top-color: rgba(222, 184, 78, 0.5);
}
.ws-qa--stack-last {
  border-bottom-color: rgba(222, 184, 78, 0.5);
}
/* Test cases / legacy Time marks: keep m/s lowercase even though .ws-qa-head is uppercase. */
.ws-qa-time-mark,
.ws-qa-tests-chip {
  margin-left: 0.35rem;
  font-weight: 550;
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: inherit;
  /* Grey label text even when mark bound is red/green. */
  color: rgba(200, 208, 216, 0.88) !important;
}
.ws-qa-tests-chip.is-wired,
.ws-qa-time-mark.is-wired {
  filter: brightness(1.08);
}
/* Time is a quiet duration stat only — stay translucent so wired marks stand out. */
.ws-qa-time,
.ws-qa-hint {
  margin-left: 0.35rem;
  display: inline-block;
  padding: 0.08rem 0.35rem;
  border: 1px solid rgba(120, 118, 112, 0.28);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: none;
  font-weight: 450;
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: inherit;
  color: rgba(180, 176, 168, 0.55) !important;
  opacity: 0.72;
}
.ws-qa-hint.is-used {
  border-color: rgba(224, 196, 106, 0.55);
  color: #e0c46a !important;
  opacity: 1;
}
/* Wired score and hint stay quiet until the note is hovered or locked. */
body.work-scan-page .ws-qa-score.ws-mark.ws-mark--reveal:not(.is-near):not(.is-pinned),
.ws-qa-score.ws-mark.ws-mark--reveal:not(.is-near):not(.is-pinned) {
  background: transparent !important;
  box-shadow: none !important;
  color: #f0e2b8 !important;
  font-weight: inherit !important;
}
.ws-qa-hint.ws-mark.ws-mark--reveal:not(.is-near):not(.is-pinned) {
  background: rgba(255, 255, 255, 0.03) !important;
  box-shadow: none !important;
  color: rgba(180, 176, 168, 0.55) !important;
  font-weight: 450 !important;
}
.ws-qa-hint.is-used.ws-mark.ws-mark--reveal:not(.is-near):not(.is-pinned) {
  background: rgba(255, 255, 255, 0.03) !important;
  box-shadow: none !important;
  color: #e0c46a !important;
}
.ws-qa-score.ws-mark {
  padding: 0.16em 0.95em;
  border-radius: 3px;
}
body.work-scan-page .ws-qa-score.ws-mark.is-near,
body.work-scan-page .ws-qa-score.ws-mark.is-pinned,
.ws-qa-score.ws-mark.is-near,
.ws-qa-score.ws-mark.is-pinned {
  color: #f0e2b8 !important;
  font-weight: inherit !important;
  opacity: 1;
}
.ws-qa-hint.ws-mark.is-near,
.ws-qa-hint.ws-mark.is-pinned {
  color: inherit !important;
  font-weight: 650 !important;
  opacity: 1;
}
.ws-qa-score.ws-mark--technical.is-near,
.ws-qa-score.ws-mark--technical.is-pinned,
.ws-qa-score.ws-mark--debuff.is-near,
.ws-qa-score.ws-mark--debuff.is-pinned,
.ws-qa-hint.ws-mark--technical.is-near,
.ws-qa-hint.ws-mark--technical.is-pinned,
.ws-qa-hint.ws-mark--debuff.is-near,
.ws-qa-hint.ws-mark--debuff.is-pinned {
  background: rgba(188, 72, 82, 0.3) !important;
  box-shadow: 0 0 0 1.5px rgba(210, 94, 102, 0.86) !important;
}
.ws-qa-score.ws-mark--trial.is-near,
.ws-qa-score.ws-mark--trial.is-pinned,
.ws-qa-score.ws-mark--coding.is-near,
.ws-qa-score.ws-mark--coding.is-pinned,
.ws-qa-hint.ws-mark--trial.is-near,
.ws-qa-hint.ws-mark--trial.is-pinned,
.ws-qa-hint.ws-mark--coding.is-near,
.ws-qa-hint.ws-mark--coding.is-pinned {
  background: rgba(90, 150, 196, 0.32) !important;
  box-shadow: 0 0 0 1.5px rgba(126, 182, 214, 0.88) !important;
}
.ws-qa-score.ws-mark--key.is-near,
.ws-qa-score.ws-mark--key.is-pinned,
.ws-qa-hint.ws-mark--key.is-near,
.ws-qa-hint.ws-mark--key.is-pinned {
  background: rgba(210, 168, 64, 0.3) !important;
  box-shadow: 0 0 0 1.5px rgba(222, 184, 78, 0.88) !important;
}
.ws-qa-grid {
  position: relative;
  display: grid;
  /* Comments + dashed rail: fixed width so the rail lines up under
     the left edge of the header "Question score" cluster (~20rem). */
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: 0.75rem 0.65rem;
}
.ws-qa-main {
  min-width: 0;
  /* Keep prose off the dashed rail so a trailing token wraps instead of sitting on it. */
  padding-right: 1.35rem;
}
.ws-qa-kicker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0 0 0.25rem;
}
.ws-qa-kicker-lead {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}
.ws-qa-kicker-row .ws-qa-kicker {
  margin: 0;
}
.ws-qa-kicker-row .ws-qa-hint {
  margin-left: 0;
  height: auto;
  padding: 0 0.4rem;
  font-size: 0.68rem;
  line-height: 1;
  letter-spacing: 0.08em;
}
.ws-qa-kicker {
  margin: 0 0 0.25rem;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ws-muted);
}
.ws-qa-kicker.ws-cat-mark,
.section-title.ws-cat-mark {
  display: inline-block;
  padding: 0 0.2rem;
}
.ws-qa-main > .ws-qa-kicker:not(:first-child) {
  margin-top: 0.95rem;
}
.ws-qa-text {
  margin: 0 0 0.75rem;
  line-height: 1.45;
  color: var(--ws-ink);
  overflow-wrap: break-word;
}
.ws-qa-text .katex {
  font-size: 1.05em;
}
.ws-qa-text .katex-display {
  margin: 0.55rem 0;
  overflow-x: auto;
  overflow-y: hidden;
}
.ws-qa-answer {
  margin: 0 0 0.75rem;
  line-height: 1.55;
  color: var(--ws-ink);
  white-space: pre-wrap;
}
/* Compact answer / follow-up: show …context around marks, expand for full. */
.ws-prose-fold {
  margin: 0 0 0.75rem;
  display: grid;
  gap: 0.35rem;
}
.ws-prose-fold .ws-qa-answer,
.ws-prose-fold .ws-qa-text {
  margin: 0;
}
.ws-prose-fold-preview {
  max-width: 100%;
}
/* Author styles must not keep fold panes in layout when [hidden] — wires use geometry. */
.ws-prose-fold-preview[hidden],
.ws-prose-fold-full[hidden] {
  display: none !important;
}
.ws-fold-ellipsis {
  color: #9aa3ad;
  padding: 0 0.12em;
  user-select: none;
}
.ws-prose-fold-btn {
  justify-self: start;
  margin: 0;
  padding: 0.18rem 0.45rem;
  border: 1px solid #3a3428;
  background: #12100c;
  color: #c9a574;
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  cursor: pointer;
}
.ws-prose-fold-btn:hover,
.ws-prose-fold-btn:focus-visible {
  border-color: #c9a574;
  color: #f3e6cf;
}
.ws-prose-fold.is-open .ws-prose-fold-btn {
  border-color: #5a4e38;
  color: #d8c8a0;
}
.ws-qa-code {
  margin: 0 0 0.75rem;
}
/* Keep Answer / empty-answer copy clear of the Your code shell. */
.ws-qa-main > .ws-empty {
  margin: 0 0 0.35rem;
}
.ws-qa-main > .ws-qa-answer + .ws-qa-code,
.ws-qa-main > .ws-prose-fold + .ws-qa-code,
.ws-qa-main > .ws-empty + .ws-qa-code {
  margin-top: 1.1rem;
}
.ws-qa-code-pre {
  margin: 0;
  white-space: pre-wrap;
  overflow-x: auto;
}
.ws-qa-code-pre .ws-mark {
  white-space: pre-wrap;
}
.ws-qa-tests {
  margin: 0 0 0.85rem;
}
.ws-qa-tests-sep {
  margin: 0 0.35rem;
  opacity: 0.45;
}
.ws-qa-tests-count.is-pass,
.ws-qa-score--tests.is-pass { color: #7fcfa0; }
.ws-qa-tests-count.is-fail,
.ws-qa-score--tests.is-fail { color: #e85d4a; }
.ws-qa-tests-count.is-partial,
.ws-qa-score--tests.is-partial { color: #e0c46a; }
.ws-qa-score--tests.is-pending { color: rgba(200, 208, 216, 0.55); }
.ws-qa-tests-miss {
  margin: 0 0 0.75rem;
  font-size: 0.78rem;
  color: var(--ws-muted);
}
.ws-qa-case-list {
  list-style: none;
  margin: 0;
  padding: 0.55rem 0.65rem 0.7rem;
  display: grid;
  gap: 0.45rem;
}
.ws-qa-case {
  border: 1px solid rgba(160, 175, 190, 0.22);
  padding: 0.45rem 0.55rem;
  background: rgba(0, 0, 0, 0.18);
}
.ws-qa-case.is-pass { border-color: rgba(92, 186, 132, 0.45); }
.ws-qa-case.is-fail { border-color: rgba(232, 93, 74, 0.5); }
.ws-qa-case-head {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
  font-size: 0.72rem;
  color: var(--ws-muted);
}
.ws-qa-case.is-pass .ws-qa-case-status { color: #7fcfa0; }
.ws-qa-case.is-fail .ws-qa-case-status { color: #e85d4a; }
.ws-qa-case-line {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--ws-ink);
  overflow-wrap: anywhere;
}
.ws-qa-case-line span {
  color: var(--ws-muted);
  margin-right: 0.3rem;
}
.ws-margin {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  border-left: 1px dashed rgba(180, 170, 210, 0.4);
  padding-left: 0.75rem;
  min-width: 0;
}
.ws-qa-wire-host {
  position: relative;
}
.ws-margin-note.ws-margin-note--clear {
  grid-template-columns: minmax(0, 1fr);
  cursor: default;
  border-color: rgba(150, 176, 150, 0.45);
}
.ws-margin-note--clear .ws-margin-note-chip {
  color: #d5e4d2;
  border-bottom-color: rgba(150, 176, 150, 0.45);
}
.ws-margin-note {
  position: relative;
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: 0.35rem 0.45rem;
  align-items: start;
  margin: 0;
  padding: 0.5rem 0.55rem;
  border: 1px solid rgba(160, 175, 190, 0.28);
  border-radius: 6px;
  background: rgba(18, 16, 14, 0.92);
  box-shadow: inset 0 0 0 1px rgba(28, 24, 18, 0.85);
  cursor: pointer;
  color: #e8e0d2;
}
/* One Uncompleted box. Parts keep their own lock and wire, split by a dotted rule. */
.ws-margin-stack {
  padding: 0.5rem 0.55rem 0.28rem;
  border: 1px solid rgba(160, 175, 190, 0.28);
  border-radius: 6px;
  background: rgba(18, 16, 14, 0.92);
  box-shadow: inset 0 0 0 1px rgba(28, 24, 18, 0.85);
  color: #e8e0d2;
}
.ws-margin-stack > .ws-margin-note-chip {
  margin: 0 0 0.15rem 1.7rem;
}
.ws-margin-stack > .ws-margin-note {
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0.32rem 0 0.28rem;
}
.ws-margin-stack > .ws-margin-note + .ws-margin-note {
  border-top: 1px dotted rgba(224, 138, 144, 0.85);
  margin-top: 0.12rem;
}
.ws-margin-stack.ws-margin-note--trial > .ws-margin-note + .ws-margin-note,
.ws-margin-stack.ws-margin-note--coding > .ws-margin-note + .ws-margin-note {
  border-top-color: rgba(126, 182, 214, 0.85);
}
.ws-margin-stack.ws-margin-note--key > .ws-margin-note + .ws-margin-note,
.ws-margin-stack.ws-margin-note--non_technical > .ws-margin-note + .ws-margin-note {
  border-top-color: rgba(224, 196, 106, 0.85);
}
.ws-margin-copy {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}
/* Finding title on the note — tracked heading, not body copy. */
.ws-margin-note-chip {
  display: block;
  margin: 0;
  padding: 0.08rem 0 0.32rem;
  border-bottom: 1px solid rgba(201, 165, 116, 0.42);
  font-family: var(--font-herald, "Cinzel", Georgia, serif);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.25;
  color: #e8d4a8;
  text-decoration: none;
}
.ws-margin-note--debuff .ws-margin-note-chip,
.ws-margin-note--technical .ws-margin-note-chip {
  color: #f3c2c2;
  border-bottom-color: rgba(210, 94, 102, 0.55);
}
.ws-margin-note--trial .ws-margin-note-chip,
.ws-margin-note--coding .ws-margin-note-chip {
  color: #d4e8f6;
  border-bottom-color: rgba(126, 182, 214, 0.55);
}
.ws-margin-note--key .ws-margin-note-chip,
.ws-margin-note--non_technical .ws-margin-note-chip {
  color: #f6e7bc;
  border-bottom-color: rgba(224, 196, 106, 0.55);
}
/* Evidence body: plain prose + KaTeX; no Label: title chrome. */
.ws-margin-body {
  min-width: 0;
  font-family: var(--font-display, Georgia, serif);
  font-size: 0.78rem;
  font-weight: 450;
  letter-spacing: 0.01em;
  line-height: 1.45;
  color: #ebe4d8;
  text-decoration: none;
}
.ws-margin-body .katex {
  font-size: 1.05em;
}
.ws-margin-note-title {
  /* Legacy class — never style a separate colored/underlined lead. */
  font: inherit;
  color: inherit;
  text-decoration: none;
  letter-spacing: inherit;
  text-transform: none;
}
.ws-margin-note[data-ws-wire]:hover,
.ws-mark[data-ws-wire]:hover {
  filter: brightness(1.06);
}
/* Your-code color stays off until the related note is hovered or ticked. */
.ws-qa-code--flagged {
  border-radius: 2px;
}
.ws-qa-code--flagged.is-near > .code-fold-toggle,
.ws-qa-code--flagged.is-near > .code-box-bar,
.ws-qa-code--flagged.is-pinned > .code-fold-toggle,
.ws-qa-code--flagged.is-pinned > .code-box-bar {
  position: relative;
  z-index: 1;
  border-color: rgba(210, 94, 102, 0.95) !important;
  box-shadow:
    0 0 0 2px rgba(210, 94, 102, 0.85),
    inset 0 0 0 1px rgba(232, 120, 120, 0.35) !important;
  background: rgba(188, 72, 82, 0.12) !important;
}
.ws-qa-code--flagged-buff.is-near > .code-fold-toggle,
.ws-qa-code--flagged-buff.is-near > .code-box-bar,
.ws-qa-code--flagged-buff.is-pinned > .code-fold-toggle,
.ws-qa-code--flagged-buff.is-pinned > .code-box-bar {
  border-color: rgba(92, 186, 132, 0.9) !important;
  box-shadow:
    0 0 0 2px rgba(92, 186, 132, 0.8),
    inset 0 0 0 1px rgba(127, 207, 160, 0.3) !important;
  background: rgba(68, 158, 112, 0.12) !important;
}
.ws-qa-code--flagged-key.is-near > .code-fold-toggle,
.ws-qa-code--flagged-key.is-near > .code-box-bar,
.ws-qa-code--flagged-key.is-pinned > .code-fold-toggle,
.ws-qa-code--flagged-key.is-pinned > .code-box-bar,
.ws-qa-code--flagged-non_technical.is-near > .code-fold-toggle,
.ws-qa-code--flagged-non_technical.is-near > .code-box-bar,
.ws-qa-code--flagged-non_technical.is-pinned > .code-fold-toggle,
.ws-qa-code--flagged-non_technical.is-pinned > .code-box-bar {
  border-color: rgba(222, 184, 78, 0.9) !important;
  box-shadow:
    0 0 0 2px rgba(222, 184, 78, 0.8),
    inset 0 0 0 1px rgba(240, 220, 150, 0.28) !important;
  background: rgba(210, 168, 64, 0.12) !important;
}
.ws-qa-code--flagged-trial.is-near > .code-fold-toggle,
.ws-qa-code--flagged-trial.is-near > .code-box-bar,
.ws-qa-code--flagged-trial.is-pinned > .code-fold-toggle,
.ws-qa-code--flagged-trial.is-pinned > .code-box-bar,
.ws-qa-code--flagged-coding.is-near > .code-fold-toggle,
.ws-qa-code--flagged-coding.is-near > .code-box-bar,
.ws-qa-code--flagged-coding.is-pinned > .code-fold-toggle,
.ws-qa-code--flagged-coding.is-pinned > .code-box-bar {
  border-color: rgba(126, 182, 214, 0.9) !important;
  box-shadow:
    0 0 0 2px rgba(126, 182, 214, 0.8),
    inset 0 0 0 1px rgba(160, 200, 230, 0.28) !important;
  background: rgba(90, 150, 196, 0.12) !important;
}
.ws-qa-code--flagged-technical.is-near > .code-fold-toggle,
.ws-qa-code--flagged-technical.is-near > .code-box-bar,
.ws-qa-code--flagged-technical.is-pinned > .code-fold-toggle,
.ws-qa-code--flagged-technical.is-pinned > .code-box-bar {
  border-color: rgba(210, 94, 102, 0.95) !important;
  box-shadow:
    0 0 0 2px rgba(210, 94, 102, 0.85),
    inset 0 0 0 1px rgba(232, 120, 120, 0.35) !important;
  background: rgba(188, 72, 82, 0.12) !important;
}
.ws-qa-code--flagged.is-wired > .code-fold-toggle,
.ws-qa-code--flagged.is-wired > .code-box-bar {
  filter: brightness(1.1);
}
.ws-margin-note--buff { border-color: rgba(92, 186, 132, 0.55); }
.ws-margin-note--buff[data-ws-shade="1"] { border-color: rgba(80, 180, 160, 0.58); }
.ws-margin-note--buff[data-ws-shade="2"] { border-color: rgba(110, 186, 100, 0.55); }
.ws-margin-note--buff[data-ws-shade="3"] { border-color: rgba(70, 170, 140, 0.58); }
.ws-margin-note--debuff { border-color: rgba(210, 94, 102, 0.6); }
.ws-margin-note--debuff[data-ws-shade="1"] { border-color: rgba(210, 120, 90, 0.62); }
.ws-margin-note--debuff[data-ws-shade="2"] { border-color: rgba(200, 90, 130, 0.6); }
.ws-margin-note--debuff[data-ws-shade="3"] { border-color: rgba(200, 80, 80, 0.65); }
.ws-margin-note--trial,
.ws-margin-note--coding { border-color: rgba(126, 182, 214, 0.7); }
.ws-margin-note--technical { border-color: rgba(210, 94, 102, 0.6); }
.ws-margin-note--key,
.ws-margin-note--non_technical { border-color: rgba(222, 184, 78, 0.6); }
.ws-margin-note--key[data-ws-shade="1"],
.ws-margin-note--non_technical[data-ws-shade="1"] { border-color: rgba(230, 190, 70, 0.62); }
.ws-margin-note--key[data-ws-shade="2"] { border-color: rgba(210, 170, 70, 0.6); }
.ws-margin-note--key[data-ws-shade="3"] { border-color: rgba(230, 200, 110, 0.58); }
.ws-margin-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  margin: 0.05rem 0 0;
  padding: 0;
  background: none;
  border: none;
}
.ws-note-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 3px;
  background: rgba(40, 34, 24, 0.95);
  border: 1px solid rgba(201, 165, 116, 0.45);
  color: #f0e2b8;
  pointer-events: none;
}
.ws-note-lock {
  display: block;
  width: 0.72rem;
  height: 0.72rem;
}
.ws-note-lock--shut { display: none; }
.ws-margin-note.is-pinned .ws-note-lock--open { display: none; }
.ws-margin-note.is-pinned .ws-note-lock--shut { display: block; }
.ws-margin-note.is-pinned .ws-note-pin {
  color: #14110e;
  background: #e0c46a;
  border-color: #e0c46a;
}
.ws-margin-note--debuff.is-pinned .ws-note-pin,
.ws-margin-note--technical.is-pinned .ws-note-pin {
  background: #e08a90;
  border-color: #e08a90;
}
.ws-margin-note--trial.is-pinned .ws-note-pin,
.ws-margin-note--coding.is-pinned .ws-note-pin {
  background: #7eb6d6;
  border-color: #7eb6d6;
}
.ws-margin-note--buff.is-pinned .ws-note-pin {
  background: #7ecf9a;
  border-color: #7ecf9a;
}
.ws-empty {
  margin: 0;
  color: var(--ws-muted);
  font-size: 0.9rem;
}
.ws-report-disclaimer {
  margin: 1.25rem 0 0;
  font-size: 0.72rem;
  color: var(--ws-muted);
}
@media (max-width: 900px) {
  .ws-report-layout {
    grid-template-columns: 1fr;
    height: auto;
    max-height: none;
    min-height: 0;
    gap: 0.75rem;
  }
  .ws-report-nav {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(9.5rem, 1fr);
    height: auto;
    max-height: 9.5rem;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .ws-report-main {
    height: auto;
    max-height: none;
    overflow: visible;
    padding: 0;
  }
  .ws-qa-grid {
    grid-template-columns: 1fr;
  }
  .ws-margin {
    border-left: none;
    border-top: 1px dashed rgba(180, 170, 210, 0.4);
    padding-left: 0;
    padding-top: 0.65rem;
  }
}

.hist-explore-slot {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.28rem;
  width: auto !important;
  max-width: 100%;
}

/* Admin · Customized Report empty / private notes (not candidate gates) */
.admin-ws-report-empty {
  margin: 0.5rem 0 0;
  color: var(--ws-muted, #cfc3ae);
  font-size: 0.92rem;
  line-height: 1.45;
}
.admin-ws-report-private {
  margin: 0 0 0.85rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(232, 160, 144, 0.9);
}

/*
 * Admin Customized Report:
 * - Page / main: no scroll
 * - LHS Control Panel + RHS report share the same shell height (stretch)
 * - List scrolls inside Control Panel; report pane scrolls its own content
 */
body.work-scan-page.admin-page main.portal-main {
  /* Match Admin Desk (.desk-nav--admin) left edge at --desk-chrome-side. */
  margin-left: var(--desk-chrome-side, 1rem);
  margin-right: clamp(1rem, 3vw, 2rem);
  /* Drop default portal-main left pad so Control Panel is not inset further. */
  padding-left: 0;
  padding-right: clamp(1rem, 3vw, 2rem);
  max-width: none;
  width: auto;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.ws-page-shell {
  display: grid;
  grid-template-columns: minmax(13.25rem, 15.25rem) minmax(0, 1fr);
  gap: 0.85rem 1.15rem;
  align-items: stretch;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}
.ws-findings-dock {
  /* Same column height as Customized Report; nav list scrolls inside. */
  position: relative;
  align-self: stretch;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  /* Flush with Admin Desk left; sit left of the report box. */
  padding: 0.15rem 0.1rem 0.35rem 0;
  overflow: hidden;
}
body.work-scan-page.admin-page .ws-findings-dock {
  /* Explicit left flush under Admin Desk chrome. */
  margin-left: 0;
  padding-left: 0;
}
.ws-findings-panel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  overflow: hidden;
  padding: 0.55rem 0.5rem 0.45rem;
  border: 1px solid #c9a574;
  border-radius: 8px; /* match report .game-stage frame */
  /* Slight glass so the moving page background shows through. */
  background: rgba(12, 10, 8, 0.52);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
  backdrop-filter: blur(10px) saturate(1.08);
  box-shadow: inset 0 0 0 1px rgba(28, 24, 18, 0.55);
}
.ws-findings-panel-head {
  flex: 0 0 auto;
  padding: 0.05rem 0.15rem 0.35rem;
  border-bottom: 1px solid #2e2a22;
  text-align: center;
}
.ws-findings-panel-title {
  margin: 0;
  font-family: var(--font-display, Fraunces, Georgia, serif);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #f3e6cf;
  text-align: center;
}
.ws-findings-filters {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.2rem 0 0.15rem;
}
.ws-findings-filters-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: space-between;
  gap: 0.4rem;
  width: 100%;
}
.ws-findings-filters-row--lanes {
  justify-content: flex-start;
  gap: 0.28rem;
}
.ws-findings-filters-row--lanes .ws-findings-check {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  justify-content: flex-start;
  padding: 0.34rem 0.4rem;
}
.ws-findings-filters-row--lanes .ws-findings-check-label {
  font-size: 0.5rem;
  letter-spacing: 0.03em;
}
.ws-report-search {
  display: block;
  margin: 0;
}
.ws-report-search input {
  width: 100%;
  margin: 0;
  padding: 0.42rem 0.55rem;
  border: 1px solid #3a3428;
  border-radius: 8px;
  background: #0c0a08;
  color: #f3e6cf;
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  font-size: 0.78rem;
  line-height: 1.3;
}
.ws-report-search input::placeholder {
  color: #8a8070;
}
.ws-report-search input:focus {
  outline: none;
  border-color: #c9a574;
}
[data-no-clipboard="bank"] .ws-report-search,
[data-no-clipboard="bank"] .ws-report-search input {
  -webkit-user-select: text;
  user-select: text;
}
.ws-findings-check {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.3rem;
  min-width: 0;
  margin: 0;
  padding: 0.34rem 0.42rem;
  cursor: pointer;
  user-select: none;
  border: 1px solid #3a3428;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(28, 24, 18, 0.95) 0%, rgba(12, 10, 8, 0.98) 100%);
  box-shadow:
    inset 0 0 0 1px #1c1812,
    0 1px 0 rgba(0, 0, 0, 0.35);
  font-family: var(--font-herald, Cinzel, Georgia, serif);
  font-size: 0.52rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.15;
  color: #b8b0a0;
  transition:
    border-color 0.14s ease,
    background 0.14s ease,
    box-shadow 0.14s ease,
    color 0.14s ease,
    transform 0.12s ease;
}
.ws-findings-check input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  /* Keep in the a11y tree; label click toggles via native association. */
  pointer-events: none;
}
.ws-findings-check:not(.is-disabled) {
  cursor: pointer;
}
.ws-findings-check-box {
  flex: 0 0 auto;
  width: 0.78rem;
  height: 0.78rem;
  border: 1px solid #5a4e38;
  border-radius: 3px;
  background: #0c0a08;
  box-shadow: inset 0 0 0 1px #1c1812;
  position: relative;
  transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}
.ws-findings-check-box::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 1px;
  background: #f3e6cf;
  transform: scale(0);
  opacity: 0;
  transition: transform 0.12s ease, opacity 0.12s ease;
}
.ws-findings-check.is-checked .ws-findings-check-box::after,
.ws-findings-check input:checked + .ws-findings-check-box::after {
  transform: scale(1);
  opacity: 1;
}
.ws-findings-check--debuff {
  flex: 0 0 auto;
  padding-left: 0.42rem;
  padding-right: 0.48rem;
  color: #e08a90;
  border-color: #4a3034;
}
.ws-findings-check--debuff .ws-findings-check-box {
  border-color: #5a3a3e;
}
.ws-findings-check--debuff.is-checked {
  color: #f0b0b6;
  border-color: #e08a90;
  background:
    linear-gradient(180deg, rgba(42, 18, 22, 0.98) 0%, rgba(18, 10, 12, 0.98) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(224, 138, 144, 0.22),
    0 0 0 1px rgba(224, 138, 144, 0.12);
}
.ws-findings-check--debuff.is-checked .ws-findings-check-box {
  border-color: #e08a90;
  background: #161012;
  box-shadow: inset 0 0 0 1px rgba(240, 176, 182, 0.18);
}
.ws-findings-check--debuff.is-checked .ws-findings-check-box::after {
  background: #f0b0b6;
}
.ws-findings-check--buff {
  flex: 1 1 0;
  min-width: 0;
  color: #7fcfa0;
  border-color: #2e4638;
}
.ws-findings-check--buff .ws-findings-check-box {
  border-color: #3a5a46;
}
.ws-findings-check--buff.is-checked {
  color: #a8e6c4;
  border-color: #7fcfa0;
  background:
    linear-gradient(180deg, rgba(16, 36, 26, 0.98) 0%, rgba(10, 16, 12, 0.98) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(127, 207, 160, 0.22),
    0 0 0 1px rgba(127, 207, 160, 0.12);
}
.ws-findings-check--buff.is-checked .ws-findings-check-box {
  border-color: #7fcfa0;
  background: #101612;
  box-shadow: inset 0 0 0 1px rgba(168, 230, 196, 0.18);
}
.ws-findings-check--buff.is-checked .ws-findings-check-box::after {
  background: #a8e6c4;
}
.ws-findings-check--trial {
  border-color: rgba(126, 182, 214, 0.45);
}
.ws-findings-check--trial .ws-findings-check-box {
  border-color: rgba(126, 182, 214, 0.7);
}
.ws-findings-check--trial.is-checked {
  border-color: rgba(126, 182, 214, 0.85);
  background: rgba(90, 150, 196, 0.16);
}
.ws-findings-check--trial.is-checked .ws-findings-check-box {
  background: rgba(126, 182, 214, 0.85);
  border-color: rgba(126, 182, 214, 0.95);
}
.ws-nav-tag--trial { color: #c5dded; }
.ws-nav-btn--trial.is-active {
  border-color: rgba(126, 182, 214, 0.9);
  box-shadow: inset 3px 0 0 #7eb6d6;
}
.ws-findings-check--key {
  flex: 0 0 auto;
  padding-left: 0.42rem;
  padding-right: 0.48rem;
  color: #e0c46a;
  border-color: #4a4030;
}
.ws-findings-check--key .ws-findings-check-box {
  border-color: #5a4e38;
}
.ws-findings-check--key.is-checked {
  color: #f0e2b8;
  border-color: #e0c46a;
  background:
    linear-gradient(180deg, rgba(42, 34, 18, 0.98) 0%, rgba(18, 14, 10, 0.98) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(224, 196, 106, 0.22),
    0 0 0 1px rgba(224, 196, 106, 0.12);
}
.ws-findings-check--key.is-checked .ws-findings-check-box {
  border-color: #e0c46a;
  background: #16120c;
  box-shadow: inset 0 0 0 1px rgba(240, 226, 184, 0.18);
}
.ws-findings-check--key.is-checked .ws-findings-check-box::after {
  background: #f0e2b8;
}
.ws-findings-check--top5 {
  color: #c9a574;
  border-color: #4a4030;
  margin-left: 0;
}
.ws-findings-check--top5 .ws-findings-check-box {
  border-color: #5a4e38;
}
.ws-findings-check--top5.is-checked {
  color: #f0e2b8;
  border-color: #e0c46a;
  background:
    linear-gradient(180deg, rgba(42, 34, 18, 0.98) 0%, rgba(18, 14, 10, 0.98) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(224, 196, 106, 0.22),
    0 0 0 1px rgba(224, 196, 106, 0.12);
}
.ws-findings-check--top5.is-checked .ws-findings-check-box {
  border-color: #e0c46a;
  background: #1a1510;
  box-shadow: inset 0 0 0 1px rgba(240, 226, 184, 0.18);
}
.ws-findings-check--top5.is-checked .ws-findings-check-box::after {
  background: #f0e2b8;
}
.ws-findings-check--none {
  color: #c4b8a4;
  border-color: #3a3428;
}
.ws-findings-check--none .ws-findings-check-box {
  border-color: #5a4e38;
}
.ws-findings-check--none.is-checked {
  color: #f3e6cf;
  border-color: #c9a574;
  background:
    linear-gradient(180deg, rgba(36, 30, 22, 0.98) 0%, rgba(14, 12, 10, 0.98) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(201, 165, 116, 0.28),
    0 0 0 1px rgba(201, 165, 116, 0.14);
}
.ws-findings-check--none.is-checked .ws-findings-check-box {
  border-color: #e8d4b0;
  background: #161410;
  box-shadow: inset 0 0 0 1px rgba(243, 230, 207, 0.16);
}
.ws-findings-check--none.is-checked .ws-findings-check-box::after {
  background: #f3e6cf;
}
.ws-findings-section--all.is-all-active {
  border-bottom-color: #8a7348;
}
.ws-findings-section--all.is-all-active .ws-findings-section-label--all {
  color: #f3e6cf;
}
.ws-findings-section--all.is-all-active .ws-findings-all-count-n {
  color: #f3e6cf;
}
.ws-findings-section--all.is-all-active .ws-findings-all-count-u {
  color: #e0c46a;
}
.ws-findings-check:hover:not(.is-disabled),
.ws-findings-check:focus-within:not(.is-disabled) {
  transform: translateY(-1px);
  filter: brightness(1.08);
}
.ws-findings-check:hover:not(.is-disabled) .ws-findings-check-box,
.ws-findings-check:focus-within:not(.is-disabled) .ws-findings-check-box {
  filter: none;
}
.ws-findings-check.is-disabled {
  opacity: 0.38;
  cursor: default;
  pointer-events: none;
  filter: grayscale(0.25);
}
.ws-findings-check-label {
  min-width: 0;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  font-size: 0.52rem;
  letter-spacing: 0.04em;
}
.ws-nav-btn--all {
  position: relative;
  margin-bottom: 1.65rem;
}
.ws-report-nav > .ws-nav-btn--all::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1.05rem;
  height: 1.5px;
  background-image: linear-gradient(to right, #c9a574 7px, transparent 7px);
  background-size: 13px 1.5px;
  background-repeat: repeat-x;
  pointer-events: none;
}
.ws-nav-btn--all:hover {
  border-color: #c9a574;
  background: #1a1510;
}
.ws-nav-btn--all.is-active {
  border-width: 2px;
  border-color: #f0e0b8;
  background: #2c2618;
  box-shadow: inset 4px 0 0 #f0e0b8;
}
.ws-nav-btn--all strong {
  font-family: var(--font-display, Fraunces, Georgia, serif);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.25;
  color: #f0e6d2;
}
.ws-findings-section {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  width: 100%;
  margin: 0.45rem 0 0.15rem;
  padding: 0.15rem 0.1rem 0.2rem;
  border: 0;
  border-bottom: 1px solid #2e2a22;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
/* Extra separator above the next lane when that lane has no Other row. */
.ws-findings-top + .ws-findings-section {
  margin-top: 0.85rem;
}
.ws-findings-top + .ws-findings-section::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.48rem;
  height: 1.5px;
  background-image: linear-gradient(to right, currentColor 7px, transparent 7px);
  background-size: 13px 1.5px;
  background-repeat: repeat-x;
  pointer-events: none;
}
.ws-findings-section[data-ws-group="technical"] { color: #e08a90; }
.ws-findings-section[data-ws-group="coding"] { color: #7eb6d6; }
.ws-findings-section[data-ws-group="non_technical"] { color: #e0c46a; }
.ws-findings-section:hover,
.ws-findings-section:focus-visible {
  background: rgba(255, 255, 255, 0.04);
  outline: none;
}
.ws-findings-section-aside {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-left: auto;
  min-width: 0;
}
.ws-findings-section--all {
  margin-top: 0.2rem;
}
.ws-findings-section-label {
  font-family: var(--font-herald, Cinzel, Georgia, serif);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c9a574;
}
.ws-findings-section-label--all {
  color: #e8d4b0;
}
/* Total readout — not a Top 5 / More tier pill. */
.ws-findings-all-count {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 0.28rem;
  padding: 0.05rem 0 0.05rem 0.55rem;
  border: none;
  border-radius: 0;
  border-left: 1px solid #5a4e38;
  background: transparent;
  box-shadow: none;
  line-height: 1.1;
  color: #e8d4b0;
}
.ws-findings-all-count-n {
  font-family: var(--font-display, Fraunces, Georgia, serif);
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: #f3e6cf;
  font-variant-numeric: tabular-nums;
}
.ws-findings-all-count-u {
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: #9a9080;
}
.ws-findings-section-label--buff {
  color: #7fcfa0;
}
.ws-findings-section-label--debuff {
  color: #e08a90;
}
.ws-findings-section-label--trial {
  color: #7eb6d6;
}
.ws-findings-section-label--key {
  color: #e0c46a;
}
.ws-nav-btn--key:hover {
  border-color: #c9a574;
  background: #1a1510;
}
.ws-nav-btn--key.is-active {
  border-width: 2px;
  border-color: #ffe08a;
  background: #3a3014;
  box-shadow: inset 4px 0 0 #ffe08a;
}
.ws-nav-btn--trial.is-active {
  border-width: 2px;
  border-color: #7eb6d6;
  background: #163044;
  box-shadow: inset 4px 0 0 #7eb6d6;
}
.ws-findings-top5,
.ws-findings-more {
  flex: 0 0 auto;
  padding: 0.14rem 0.4rem;
  border: 1px solid #8a7348;
  border-radius: 4px;
  background: #1a1510;
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #e0c46a;
}
.ws-findings-other-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  width: 100%;
  margin: 0.7rem 0 0.55rem;
  padding: 0.28rem 0.15rem 0.32rem;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ws-findings-other-row::before,
.ws-findings-other-row::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background-image: linear-gradient(to right, currentColor 7px, transparent 7px);
  background-size: 13px 1.5px;
  background-repeat: repeat-x;
  pointer-events: none;
}
.ws-findings-other-row::before { top: -0.32rem; }
.ws-findings-other-row::after { bottom: -0.32rem; }
.ws-findings-other-row[data-ws-group="technical"] { color: #e08a90; }
.ws-findings-other-row[data-ws-group="coding"] { color: #7eb6d6; }
.ws-findings-other-row[data-ws-group="non_technical"] { color: #e0c46a; }
.ws-findings-other-row:hover,
.ws-findings-other-row:focus-visible {
  background: rgba(255, 255, 255, 0.04);
  outline: none;
}
.ws-findings-chevron {
  flex: 0 0 auto;
  width: 0.72rem;
  height: 0.48rem;
  transition: transform 0.15s ease;
}
.ws-findings-other-row[aria-expanded="true"] .ws-findings-chevron,
.ws-findings-section[aria-expanded="true"] .ws-findings-chevron {
  transform: rotate(180deg);
}
.ws-findings-top.is-collapsed,
.ws-findings-rest.is-collapsed {
  display: none;
}
.ws-nav-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
}
.ws-nav-count {
  flex: 0 0 auto;
  max-width: 46%;
  padding: 0.1rem 0.35rem;
  border: 1px solid #3a3428;
  border-radius: 4px;
  background: #0c0a08;
  text-align: center;
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  font-size: 0.58rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
  color: #e8d4b0;
}
.ws-nav-btn--buff .ws-nav-count {
  border-color: #3a5a46;
  color: #8fd6b0;
}
.ws-nav-btn--debuff .ws-nav-count {
  border-color: #5a3a3e;
  color: #e8a0a6;
}
.ws-nav-btn--trial .ws-nav-count {
  border-color: rgba(126, 182, 214, 0.45);
  color: #9ecae6;
}
.ws-nav-btn--trial:hover {
  border-color: rgba(126, 182, 214, 0.7);
  background: #12202c;
}
.ws-nav-rank {
  /* legacy rank mark — unused; keep for older cached markup */
  flex: 0 0 auto;
  min-width: 1.1rem;
  text-align: center;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #e0c46a;
}
.ws-findings-panel .ws-report-nav {
  border: none;
  background: #0c0a08;
  /* Keep card text clear of the vertical scrollbar. */
  padding: 0.15rem 0.35rem 0 0;
  box-shadow: none;
  scrollbar-gutter: stable;
}
.ws-findings-dock .ws-findings-panel,
.ws-findings-dock .ws-report-nav,
.ws-findings-dock-nav {
  flex: 1 1 auto;
  min-height: 0;
}
.ws-findings-dock .ws-report-nav,
.ws-findings-dock-nav {
  height: auto !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.ws-page-shell > .ws-report {
  min-width: 0;
  max-width: none;
  align-self: stretch;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 1.5rem;
  /* Always-on bar, sitting on the report frame. */
  scrollbar-width: thin;
  scrollbar-color: #c9a574 #120e0a;
  -ms-overflow-style: auto;
}
body.work-scan-page .ws-page-shell > .ws-report::-webkit-scrollbar {
  display: block !important;
  width: 10px !important;
  height: 10px !important;
  background: transparent;
}
body.work-scan-page .ws-page-shell > .ws-report::-webkit-scrollbar-track {
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: -14px 0;
  background: #120e0a !important;
  border-left: 1px solid rgba(201, 165, 116, 0.55);
  box-shadow: inset -1px 0 0 rgba(201, 165, 116, 0.28) !important;
}
body.work-scan-page .ws-page-shell > .ws-report::-webkit-scrollbar-thumb {
  display: block !important;
  width: auto !important;
  min-height: 3.4rem;
  background: linear-gradient(180deg, #e0c46a, #8a7348) !important;
  border: 2px solid #120e0a !important;
  border-radius: 999px;
}
body.work-scan-page .ws-page-shell > .ws-report::-webkit-scrollbar-thumb:hover {
  display: block !important;
  background: #f0e2b8 !important;
}
body.work-scan-page .ws-page-shell > .ws-report::-webkit-scrollbar-corner {
  display: none !important;
  background: transparent !important;
}
/* Customized Report + Control Panel: translucent shells over the animated scene. */
body.work-scan-page .ws-report.game-stage {
  background: rgba(12, 13, 16, 0.48);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
  box-shadow:
    var(--frame-shadow-3d, 0 10px 28px rgba(0, 0, 0, 0.35)),
    inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}
body.work-scan-page .ws-findings-dock .ws-report-nav,
body.work-scan-page .ws-findings-dock-nav {
  background: rgba(12, 10, 8, 0.35);
  border-color: rgba(58, 52, 40, 0.65);
  scrollbar-color: rgba(138, 115, 72, 0.75) transparent;
}
body.work-scan-page .ws-nav-btn {
  background: rgba(18, 16, 12, 0.55);
  border-color: rgba(46, 42, 34, 0.7);
}
body.work-scan-page .ws-nav-btn.is-active {
  background: rgba(48, 40, 24, 0.94);
}
body.work-scan-page .ws-nav-btn.is-active .ws-nav-tag {
  font-size: 1.02rem;
  font-weight: 700;
  color: #fff8ea;
}
body.work-scan-page .ws-nav-btn--buff.is-active {
  background: rgba(22, 64, 42, 0.94);
  border-color: #9dffc8;
}
body.work-scan-page .ws-nav-btn--buff.is-active .ws-nav-tag,
body.work-scan-page .ws-nav-btn--buff.is-active .ws-nav-count {
  color: #f3fff8;
}
body.work-scan-page .ws-nav-btn--debuff.is-active {
  background: rgba(72, 24, 30, 0.94);
  border-color: #ffb4ba;
}
body.work-scan-page .ws-nav-btn--debuff.is-active .ws-nav-tag,
body.work-scan-page .ws-nav-btn--debuff.is-active .ws-nav-count {
  color: #fff5f6;
}
body.work-scan-page .ws-nav-btn--key.is-active {
  background: rgba(72, 56, 16, 0.94);
  border-color: #ffe08a;
}
body.work-scan-page .ws-nav-btn--trial.is-active {
  background: rgba(18, 48, 72, 0.94);
  border-color: #7eb6d6;
}
body.work-scan-page .ws-nav-btn--trial.is-active .ws-nav-tag,
body.work-scan-page .ws-nav-btn--trial.is-active .ws-nav-count {
  color: #d7ecf8;
}
body.work-scan-page .ws-nav-btn--key.is-active .ws-nav-tag,
body.work-scan-page .ws-nav-btn--key.is-active .ws-nav-count {
  color: #fff8e4;
}
body.work-scan-page .ws-nav-btn.is-active .ws-nav-count {
  border-color: currentColor;
  background: rgba(0, 0, 0, 0.28);
}
body.work-scan-page .ws-qa {
  background: rgba(0, 0, 0, 0.28);
  border-color: rgba(160, 175, 190, 0.22);
}
body.work-scan-page .ws-qa.ws-qa--lane-technical {
  border-color: rgba(224, 64, 64, 0.78);
  box-shadow: inset 3px 0 0 #e04040;
}
body.work-scan-page .ws-qa.ws-qa--lane-coding {
  border-color: rgba(126, 182, 214, 0.85);
  box-shadow: inset 3px 0 0 #7eb6d6;
}
body.work-scan-page .ws-qa.ws-qa--lane-non_technical {
  border-color: rgba(224, 196, 106, 0.85);
  box-shadow: inset 3px 0 0 #e0c46a;
}
body.work-scan-page .ws-finding-head {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
@media (prefers-reduced-transparency: reduce) {
  body.work-scan-page .ws-report.game-stage,
  body.work-scan-page .ws-findings-panel,
  body.work-scan-page .ws-findings-dock .ws-report-nav,
  body.work-scan-page .ws-findings-dock-nav {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  body.work-scan-page .ws-report.game-stage {
    background: rgba(12, 13, 16, 0.92);
  }
  body.work-scan-page .ws-findings-panel {
    background: rgba(12, 10, 8, 0.94);
  }
}
.admin-page .ws-report-head.admin-ws-report-head {
  /* Room for Unlock/Lock + Back column on the right. */
  padding-right: min(28rem, 48%);
  margin-bottom: 0.85rem;
}
.admin-ws-report-toolbar {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas:
    "actions back"
    ". meta";
  column-gap: 1rem;
  row-gap: 0.35rem;
  align-items: center;
  justify-items: end;
  max-width: min(100%, 28rem);
}
.admin-page .ws-report-head.admin-ws-report-head .ws-report-back {
  position: static;
  grid-area: back;
  justify-self: end;
}
.admin-ws-report-actions {
  grid-area: actions;
  position: static;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
}
.admin-ws-report-toolbar .admin-ws-report-desk-meta {
  grid-area: meta;
  position: static;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.4rem;
  margin: 0;
  text-align: right;
  white-space: nowrap;
  justify-self: end;
}
.admin-page .ws-report-layout--admin-full {
  grid-template-columns: minmax(0, 1fr);
  height: auto;
  max-height: none;
  min-height: 0;
}
.admin-page .ws-report-layout--admin-full .ws-report-main {
  height: auto;
  max-height: none;
  overflow: visible;
  padding: 0;
}
/* Report pane owns scroll — don't nest another scroll inside layout. */
.ws-page-shell > .ws-report .ws-report-layout {
  height: auto;
  max-height: none;
  min-height: 0;
}
.ws-page-shell > .ws-report .ws-report-main {
  height: auto;
  max-height: none;
  overflow: visible;
}
.admin-ws-report-desk-n {
  font-family: var(--font-herald, Georgia, serif);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e8d4b0;
}
.admin-ws-report-desk-sep {
  color: rgba(201, 165, 116, 0.55);
  font-weight: 700;
}
.admin-ws-report-desk-state {
  font-family: var(--font-herald, Georgia, serif);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.admin-ws-report-desk-state.is-locked {
  color: #e8a090;
}
.admin-ws-report-desk-state.is-unlocked {
  color: #8fd4a8;
}
.admin-ws-report-toggle {
  margin: 0;
  display: inline-flex;
}
.admin-ws-report-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 0;
  height: auto;
  margin: 0;
  /* Match .ws-report-back footprint */
  padding: 0.55rem 0.85rem;
  border-radius: 4px;
  font-family: var(--font-herald, Georgia, serif);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}
.admin-ws-report-toggle-btn--unlock {
  border: 1px solid rgba(90, 190, 140, 0.75);
  background: linear-gradient(180deg, rgba(28, 52, 40, 0.95), rgba(12, 28, 18, 0.98));
  color: #b8efc8;
  box-shadow: inset 0 0 0 1px rgba(90, 190, 140, 0.18);
}
.admin-ws-report-toggle-btn--unlock:hover,
.admin-ws-report-toggle-btn--unlock:focus-visible {
  border-color: rgba(120, 220, 160, 0.95);
  color: #e6ffef;
  background: linear-gradient(180deg, rgba(36, 72, 52, 0.98), rgba(14, 36, 22, 0.98));
  box-shadow:
    inset 0 0 0 1px rgba(120, 220, 160, 0.28),
    0 0 0 1px rgba(90, 190, 140, 0.2);
}
.admin-ws-report-toggle-btn--lock {
  border: 1px solid rgba(210, 110, 90, 0.75);
  background: linear-gradient(180deg, rgba(52, 24, 18, 0.95), rgba(28, 12, 10, 0.98));
  color: #f0b8ae;
  box-shadow: inset 0 0 0 1px rgba(210, 110, 90, 0.18);
}
.admin-ws-report-toggle-btn--lock:hover,
.admin-ws-report-toggle-btn--lock:focus-visible {
  border-color: rgba(230, 140, 120, 0.95);
  color: #ffe4de;
  background: linear-gradient(180deg, rgba(68, 30, 22, 0.98), rgba(34, 14, 12, 0.98));
  box-shadow:
    inset 0 0 0 1px rgba(230, 140, 120, 0.28),
    0 0 0 1px rgba(210, 110, 90, 0.2);
}
.admin-ws-report-toggle-btn.is-current,
.admin-ws-report-toggle-btn:disabled {
  opacity: 0.38;
  cursor: default;
  box-shadow: none;
}
.admin-ws-report-toggle-btn.is-current:hover,
.admin-ws-report-toggle-btn:disabled:hover,
.admin-ws-report-toggle-btn.is-current:focus-visible,
.admin-ws-report-toggle-btn:disabled:focus-visible {
  border-color: inherit;
  color: inherit;
  background: inherit;
  box-shadow: none;
}
@media (max-width: 900px) {
  body.work-scan-page.admin-page main.portal-main {
    margin-left: var(--desk-chrome-side, 1rem);
    padding-left: 0;
    overflow-y: auto !important;
  }
  .ws-page-shell {
    grid-template-columns: 1fr;
    height: auto;
    max-height: none;
    overflow: visible;
    align-items: stretch;
  }
  .ws-findings-dock {
    height: auto;
    max-height: 14rem;
    order: -1;
  }
  .ws-page-shell > .ws-report {
    height: auto;
    max-height: none;
    overflow: visible;
  }
}

.score-expect {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  margin: 0 0 0.35rem;
  padding: 0.55rem 0.75rem 0.5rem;
  border: 1px solid rgba(180, 170, 210, 0.42);
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(201, 165, 116, 0.08), transparent 70%),
    rgba(0, 0, 0, 0.4);
  color: rgba(236, 228, 214, 0.92);
  animation: hub-ach-prism 7.5s ease-in-out infinite;
}

.score-expect-aura {
  pointer-events: none;
  position: absolute;
  inset: -40%;
  z-index: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(255, 140, 170, 0.28),
    rgba(255, 200, 120, 0.22),
    rgba(160, 230, 170, 0.26),
    rgba(120, 190, 255, 0.28),
    rgba(180, 140, 255, 0.26),
    rgba(255, 140, 170, 0.28)
  );
  filter: blur(16px);
  opacity: 0.38;
  animation: hub-ach-spin 14s linear infinite;
  mix-blend-mode: soft-light;
}

.score-expect-sheen {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.1) 48%,
    rgba(200, 230, 255, 0.08) 52%,
    transparent 70%
  );
  background-size: 220% 100%;
  animation: hub-ach-sheen 5.8s ease-in-out infinite;
  mix-blend-mode: soft-light;
  opacity: 0.7;
}

.score-expect::before,
.score-expect::after {
  content: "";
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  border-color: rgba(220, 200, 240, 0.55);
  border-style: solid;
  pointer-events: none;
  z-index: 3;
}

.score-expect::before {
  top: 0;
  left: 0;
  border-width: 1px 0 0 1px;
}

.score-expect::after {
  right: 0;
  bottom: 0;
  border-width: 0 1px 1px 0;
}

.score-expect-sentence,
.score-expect-lead,
.score-expect-select,
.score-expect-is,
.score-expect-readout,
.score-expect-note {
  position: relative;
  z-index: 2;
}

.score-expect-sentence {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4rem 0.45rem;
  margin: 0;
  white-space: nowrap;
}

.score-expect-lead,
.score-expect-is {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.25;
  color: rgba(236, 228, 214, 0.92);
}

.score-expect-select {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  margin: 0;
  padding: 0;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.25;
  color: #f6e7b8;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
}

.score-expect-select-value {
  line-height: 1.25;
}

.score-expect-select:hover,
.score-expect-select:focus,
.score-expect-select[aria-expanded="true"] {
  color: #fff;
  outline: none;
}

.score-expect-select:disabled {
  color: rgba(246, 231, 184, 0.55);
  cursor: default;
}

/* Locked: warm personal accent (SI orange) — ownership / “yours”, not readout gold. */
.score-expect.is-locked {
  border-color: rgba(240, 160, 90, 0.72);
  background:
    linear-gradient(180deg, rgba(240, 160, 90, 0.16), transparent 68%),
    rgba(0, 0, 0, 0.48);
  box-shadow:
    0 0 0 1px rgba(240, 160, 90, 0.16),
    0 0 32px rgba(240, 160, 90, 0.2),
    inset 0 1px 0 rgba(255, 200, 140, 0.12);
}

.score-expect.is-locked .score-expect-aura {
  opacity: 0.5;
}

.score-expect.is-locked .score-expect-note {
  opacity: 0.48;
  color: rgba(236, 228, 214, 0.72);
}

.score-expect.is-locked .score-expect-sentence {
  white-space: nowrap;
}

.score-expect.is-locked .score-expect-lead {
  display: inline-block;
  color: #ffc28a;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-shadow:
    0 0 10px rgba(240, 160, 90, 0.48),
    0 0 22px rgba(240, 160, 90, 0.32),
    0 1px 0 rgba(0, 0, 0, 0.5);
}

.score-expect.is-locked .score-expect-lead::after {
  content: "";
  display: block;
  margin-top: 0.32rem;
  height: 2px;
  width: 100%;
  border-radius: 1px;
  background: linear-gradient(
    90deg,
    rgba(240, 160, 90, 0.05),
    rgba(255, 194, 138, 0.95) 28%,
    rgba(240, 160, 90, 0.95) 50%,
    rgba(255, 194, 138, 0.95) 72%,
    rgba(240, 160, 90, 0.05)
  );
  box-shadow: 0 0 12px rgba(240, 160, 90, 0.45);
}

@media (prefers-reduced-motion: no-preference) {
  .score-expect.is-locked .score-expect-lead {
    animation: score-expect-lock-pulse 2.8s ease-in-out infinite;
  }

  .score-expect.is-locked .score-expect-lead::after {
    background-size: 200% 100%;
    animation: score-expect-lock-bar 2.8s ease-in-out infinite;
  }
}

@keyframes score-expect-lock-pulse {
  0%,
  100% {
    text-shadow:
      0 0 8px rgba(240, 160, 90, 0.3),
      0 0 18px rgba(240, 160, 90, 0.2),
      0 1px 0 rgba(0, 0, 0, 0.5);
  }
  50% {
    text-shadow:
      0 0 14px rgba(255, 194, 138, 0.65),
      0 0 28px rgba(240, 160, 90, 0.45),
      0 0 40px rgba(240, 160, 90, 0.28),
      0 1px 0 rgba(0, 0, 0, 0.5);
  }
}

@keyframes score-expect-lock-bar {
  0%,
  100% {
    background-position: 0% 50%;
    opacity: 0.75;
  }
  50% {
    background-position: 100% 50%;
    opacity: 1;
  }
}

.score-expect-chevron {
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  margin-left: 0.05rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.05em) rotate(45deg);
  flex: 0 0 auto;
}

.score-expect-select[aria-expanded="true"] .score-expect-chevron {
  transform: translateY(0.05em) rotate(225deg);
}

.score-expect-menu {
  position: fixed;
  z-index: 80;
  margin: 0;
  padding: 0.2rem 0;
  list-style: none;
  background: #050505;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 0;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.score-expect-menu[hidden] {
  display: none;
}

.score-expect-menu [role="option"] {
  padding: 0.42rem 0.85rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  white-space: nowrap;
}

.score-expect-menu [role="option"]:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.score-expect-menu [role="option"][aria-selected="true"] {
  color: #f6e7b8;
  background: rgba(201, 165, 116, 0.16);
  box-shadow: inset 2px 0 0 #c9a574;
}

.score-expect-readout {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1.25;
  color: #f3df9a;
  text-shadow:
    0 0 12px rgba(243, 223, 154, 0.38),
    0 0 22px rgba(201, 165, 116, 0.24);
}

.score-expect-readout.is-pending {
  color: rgba(243, 223, 154, 0.62);
  text-shadow: none;
}

/* Soft breathing glow on the % (unlocked). Middle-aligned sentence unchanged. */
@media (prefers-reduced-motion: no-preference) {
  .score-expect:not(.is-locked) .score-expect-readout:not(.is-pending) {
    animation: score-expect-readout-breathe 2.8s ease-in-out infinite;
  }
}

@keyframes score-expect-readout-breathe {
  0%,
  100% {
    text-shadow:
      0 0 8px rgba(243, 223, 154, 0.28),
      0 0 16px rgba(201, 165, 116, 0.16);
  }
  50% {
    text-shadow:
      0 0 16px rgba(243, 223, 154, 0.62),
      0 0 28px rgba(201, 165, 116, 0.36),
      0 0 36px rgba(240, 200, 120, 0.16);
  }
}

.score-expect-note {
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  margin: 0;
  max-width: none;
  width: auto;
  font-family: "Exo 2", var(--font-body), sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.04em;
  line-height: 1.35;
  text-transform: none;
  text-align: left;
  color: rgba(196, 186, 214, 0.8);
}

.score-expect-note-top {
  top: 0.38rem;
}

.score-expect-note-foot {
  bottom: 0.38rem;
  text-align: right;
}

.score-expect-stack {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

.score-expect-stack .score-expect {
  margin: 0;
}

.score-expect-mark {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #f3df9a;
  text-shadow:
    0 0 12px rgba(200, 180, 255, 0.18),
    0 0 18px rgba(140, 200, 230, 0.12);
}

.score-expect-mark-si {
  color: #f0a05a;
  text-shadow:
    0 0 12px rgba(230, 140, 60, 0.28),
    0 0 18px rgba(200, 110, 40, 0.16);
}

.start-begin-row {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
}

.start-begin-side {
  margin-left: 0;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  /* Warn is position:fixed — keep this column button-only so height stays locked. */
  gap: 0;
}

body.start-page .start-begin-row > .score-expect-stack .score-expect,
body.start-page .start-begin-row #start-submit.cta {
  box-sizing: border-box;
  height: 5.4rem;
  min-height: 5.4rem;
}

body.start-page .start-begin-row #start-submit.cta {
  flex: 0 0 auto;
  align-self: flex-start;
  min-width: 11.5rem;
  padding: 0.85rem 1.85rem 0.8rem;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
  line-height: 1.15;
  letter-spacing: 0.16em;
  text-align: center;
}

body.start-page .start-begin-row #start-submit.cta span {
  position: relative;
  z-index: 1;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .score-expect,
  .score-expect-aura,
  .score-expect-sheen {
    animation: none;
  }
  .score-expect-aura {
    opacity: 0.28;
  }
}

@media (max-width: 720px) {
  .start-begin-row {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  body.start-page #start-submit.cta {
    width: 100%;
  }
}