/*
 * Volaire Oracle — Dark Imperial HUD × Ariadnian Empire
 *
 * Design directive: The interface is the administrative face of the Empire.
 * Black as authority, gold as power, red as blood and dominion.
 *
 * Color System — "Void & Empire":
 *   --clr-void        #09090b        Deepest black
 *   --clr-void-2      #121214        Charcoal surface
 *   --clr-surface     rgba(9,9,11,.82)  Glassmorphism panel fill
 *   --clr-cyan        #c9a227        Primary imperial gold (replaces arcane teal)
 *   --clr-crimson     #b91c1c        Imperial crimson (danger / emphasis)
 *   --clr-text        #f8fafc        Primary text (stark white)
 *   --clr-muted       #94a3b8        Secondary text (cool slate)
 *
 * Font System:
 *   --ff-ui     Orbitron       Navigation, labels, buttons, badges
 *   --ff-lore   Cinzel         Fantasy headings, character names, lore
 *   --ff-body   Lora           Descriptions, articles, prose
 *   --ff-mono   Roboto Mono    IDs, timestamps, data readouts
 */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Lora:wght@400;700&family=Orbitron:wght@400;500;700;900&family=Roboto+Mono:wght@400;500&display=swap');

/* ── CSS custom properties ─────────────────────────────────────────────── */
:root {
  /* Void palette */
  --clr-void:         #09090b;
  --clr-void-2:       #121214;
  --clr-surface:      rgba(9, 9, 11, 0.82);
  --clr-surface-hi:   rgba(18, 18, 20, 0.92);

  /* Imperial gold (primary accent) */
  --clr-cyan:         #c9a227;
  --clr-cyan-dim:     rgba(201, 162, 39, 0.10);
  --clr-cyan-mid:     rgba(201, 162, 39, 0.18);
  --clr-cyan-glow:    rgba(201, 162, 39, 0.28);

  /* Imperial crimson (danger/warning/emphasis) */
  --clr-crimson:      #b91c1c;
  --clr-crimson-dim:  rgba(185, 28, 28, 0.14);
  --clr-crimson-glow: rgba(185, 28, 28, 0.32);

  /* Emerald (success) */
  --clr-emerald:      #22c55e;
  --clr-emerald-dim:  rgba(34, 197, 94, 0.12);

  /* Amber (warning) */
  --clr-amber:        #f59e0b;
  --clr-amber-dim:    rgba(245, 158, 11, 0.12);

  /* Sky → remapped to amber-gold for empire palette (used by Bootstrap text-info/btn-info) */
  --clr-sky:          #c9a227;
  --clr-sky-dim:      rgba(201, 162, 39, 0.12);

  /* Bootstrap info override — redirect teal → imperial gold */
  --bs-info:          #c9a227;
  --bs-info-rgb:      201, 162, 39;
  --bs-info-text-emphasis: #f8d77a;
  --bs-info-bg-subtle: rgba(201, 162, 39, 0.10);
  --bs-info-border-subtle: rgba(201, 162, 39, 0.25);

  /* Text */
  --clr-text:         #f8fafc;
  --clr-muted:        #94a3b8;
  --clr-muted-dim:    #64748b;

  /* Borders */
  --clr-border:       rgba(201, 162, 39, 0.20);
  --clr-border-dim:   rgba(255, 255, 255, 0.06);
  --clr-border-mid:   rgba(255, 255, 255, 0.12);

  /* Inputs */
  --clr-input-bg:     rgba(0, 0, 0, 0.50);

  /* Font stacks */
  --ff-ui:   'Orbitron', sans-serif;
  --ff-lore: 'Cinzel', serif;
  --ff-body: 'Lora', serif;
  --ff-mono: 'Roboto Mono', monospace;
}

/* ── Animations ──────────────────────────────────────────────────────────── */
@keyframes pulse-glow {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(201, 162, 39, 0.55)) drop-shadow(0 0 12px rgba(201, 162, 39, 0.20)) drop-shadow(0 0 3px rgba(185, 28, 28, 0.30)); }
  50%       { filter: drop-shadow(0 0 10px rgba(201, 162, 39, 0.85)) drop-shadow(0 0 22px rgba(201, 162, 39, 0.38)) drop-shadow(0 0 8px rgba(185, 28, 28, 0.50)); }
}
@keyframes shield-glow {
  /* ── dim (rest state) ── */
  0%   { filter: drop-shadow(0 0 4px rgba(201,162,39,.15)); }
  /* ── Gold bloom: full symmetric ── */
  9%   { filter: drop-shadow(0 0 10px rgba(201,162,39,1.0)) drop-shadow(0 0 24px rgba(201,162,39,.70)) drop-shadow(0 0 50px rgba(201,162,39,.35)) drop-shadow(0 0 80px rgba(201,162,39,.15)); }
  18%  { filter: drop-shadow(0 0 4px rgba(201,162,39,.15)); }
  /* ── Void 1: gold from bottom-right only ── */
  26%  { filter: drop-shadow(20px 20px 36px rgba(201,162,39,.90)) drop-shadow(40px 40px 60px rgba(201,162,39,.40)); }
  34%  { filter: drop-shadow(0 0 4px rgba(201,162,39,.15)); }
  /* ── Gold bloom: full symmetric ── */
  44%  { filter: drop-shadow(0 0 10px rgba(201,162,39,1.0)) drop-shadow(0 0 24px rgba(201,162,39,.70)) drop-shadow(0 0 50px rgba(201,162,39,.35)) drop-shadow(0 0 80px rgba(201,162,39,.15)); }
  54%  { filter: drop-shadow(0 0 4px rgba(201,162,39,.15)); }
  /* ── Void 2: gold from top-left only ── */
  62%  { filter: drop-shadow(-20px -20px 36px rgba(201,162,39,.90)) drop-shadow(-40px -40px 60px rgba(201,162,39,.40)); }
  70%  { filter: drop-shadow(0 0 4px rgba(201,162,39,.15)); }
  /* ── Gold bloom: full symmetric ── */
  78%  { filter: drop-shadow(0 0 10px rgba(201,162,39,1.0)) drop-shadow(0 0 24px rgba(201,162,39,.70)) drop-shadow(0 0 50px rgba(201,162,39,.35)) drop-shadow(0 0 80px rgba(201,162,39,.15)); }
  85%  { filter: drop-shadow(0 0 4px rgba(201,162,39,.15)); }
  /* ── Void 3: gold from top only ── */
  92%  { filter: drop-shadow(0px -22px 36px rgba(201,162,39,.90)) drop-shadow(0px -44px 60px rgba(201,162,39,.40)); }
  97%  { filter: drop-shadow(0 0 4px rgba(201,162,39,.15)); }
  100% { filter: drop-shadow(0 0 4px rgba(201,162,39,.15)); }
}
@keyframes scanner-sweep {
  from { left: -100%; }
  to   { left:  100%; }
}
@keyframes blink-cursor {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes hud-fadein {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Body & background vignette ────────────────────────────────────────── */
body {
  font-family: var(--ff-body);
  background-color: var(--clr-void);
  background-image: url("../images/background.59d84b98afd7.jpg");
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  color: var(--clr-text);
  position: relative;
}
/* Heavy vignette overlay to push bg further back */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 30%, rgba(9, 9, 11, 0.75) 100%),
    linear-gradient(180deg, rgba(9, 9, 11, 0.35) 0%, rgba(9, 9, 11, 0.55) 100%);
  pointer-events: none;
  z-index: 0;
}
body > * { position: relative; z-index: 1; }

/* ── Typography ─────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-lore);
  color: var(--clr-text);
}

.text-muted,
.list-group-item.text-muted {
  color: var(--clr-muted) !important;
}

/* ── Scrollbar ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--clr-void); }
::-webkit-scrollbar-thumb { background: rgba(201, 162, 39, 0.22); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: rgba(201, 162, 39, 0.45); }

/* ── Navbar ─────────────────────────────────────────────────────────────── */
.navbar {
  background-color: rgba(9, 9, 11, 0.96) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--clr-border) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

@media (min-width: 992px) {
  .navbar {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
  }
  body {
    padding-top: 58px;
  }
}

/* ── Quick-access sidebar ────────────────────────────────────────────────── */
.quick-sidebar { display: none; }

@media (min-width: 992px) {
  body[data-has-sidebar] {
    padding-left: 52px;
    transition: padding-left .22s ease;
  }
  body[data-has-sidebar].sidebar-expanded {
    padding-left: 210px;
  }

  .quick-sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 58px;
    width: 52px;
    height: calc(100vh - 58px);
    background: rgba(9, 9, 11, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-right: 1px solid var(--clr-border);
    z-index: 1020;
    overflow: visible; /* let items overflow so we can control visibility properly */
    transition: width .22s ease;
  }
  /* Clip only the scrollable item area, not the whole sidebar */
  .quick-sidebar__items {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
    min-height: 0;
  }
  body.sidebar-expanded .quick-sidebar {
    width: 210px;
  }

  .quick-sidebar__item {
    display: flex;
    align-items: center;
    gap: 0;
    padding: .6rem 0;
    color: var(--clr-muted);
    text-decoration: none !important;
    white-space: nowrap;
    font-size: .78rem;
    font-family: var(--ff-ui);
    border-left: 2px solid transparent;
    transition: color .15s, background .15s, border-color .15s;
    position: relative;
    flex-shrink: 0;
  }
  .quick-sidebar__item:hover {
    color: var(--clr-text);
    background: rgba(201, 162, 39, 0.06);
    border-left-color: rgba(201, 162, 39, 0.5);
  }
  .quick-sidebar__item.qs-active {
    color: var(--clr-gold, #c9a227);
    border-left-color: var(--clr-gold, #c9a227);
  }
  /* Icon: always centered in the 52px collapsed width */
  .quick-sidebar__icon {
    font-size: 1.05rem;
    flex-shrink: 0;
    width: 52px;         /* full collapsed sidebar width */
    text-align: center;
    transition: width .22s ease;
  }
  body.sidebar-expanded .quick-sidebar__icon {
    width: 44px;         /* slightly smaller in expanded state to give label room */
  }
  /* Label: invisible by default, fades in when expanded */
  .quick-sidebar__label {
    flex: 1;
    min-width: 0;
    opacity: 0;
    transition: opacity .15s ease;
    pointer-events: none;
  }
  body.sidebar-expanded .quick-sidebar__label {
    opacity: 1;
    pointer-events: auto;
  }
  /* Badge: invisible in collapsed state, visible when expanded */
  .quick-sidebar__badge {
    font-size: .6rem;
    padding: .15em .45em;
    margin-right: .65rem;
    opacity: 0;
    transition: opacity .15s;
    flex-shrink: 0;
  }
  body.sidebar-expanded .quick-sidebar__badge {
    opacity: 1;
  }
  /* Red dot in collapsed state when a badge exists */
  .quick-sidebar__item[data-badge]::after {
    content: '';
    position: absolute;
    top: .38rem;
    left: 30px;
    width: 7px;
    height: 7px;
    background: #dc3545;
    border-radius: 50%;
    transition: opacity .15s;
  }
  body.sidebar-expanded .quick-sidebar__item[data-badge]::after {
    opacity: 0;
  }
  .quick-sidebar__divider {
    border: none;
    border-top: 1px solid var(--clr-border-dim);
    margin: .3rem 0;
    flex-shrink: 0;
  }
  .quick-sidebar__toggle {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .7rem;
    background: none;
    border: none;
    border-top: 1px solid var(--clr-border-dim);
    color: var(--clr-muted);
    cursor: pointer;
    width: 100%;
    flex-shrink: 0;
    transition: color .15s, background .15s;
  }
  .quick-sidebar__toggle:hover {
    color: var(--clr-text);
    background: rgba(201, 162, 39, 0.05);
  }
}

.navbar-brand {
  display: flex !important;
  align-items: center;
  gap: .5rem;
  font-family: var(--ff-lore);
  font-size: 1.5rem !important;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--clr-text) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  text-decoration: none !important;
}
.home-shield {
  width: 210px;
  height: 210px;
  object-fit: contain;
  animation: shield-glow 18s ease-in-out infinite;
}
.navbar-brand__icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  object-fit: contain;
  animation: pulse-glow 3.5s ease-in-out infinite;
}
.nav-link {
  color: var(--clr-muted) !important;
}
.nav-link:hover,
.nav-link:focus {
  color: var(--clr-text) !important;
}
.navbar-text {
  color: var(--clr-muted) !important;
}

/* ── HUD nav links ──────────────────────────────────────────────────────── */
.navbar-nav { gap: .15rem; }

.nav-pill {
  display: inline-flex !important;
  align-items: center;
  gap: .35rem;
  padding: .45rem .85rem !important;
  border-radius: 2px !important;
  border: 1px solid var(--clr-border-dim) !important;
  background: transparent !important;
  font-family: var(--ff-ui) !important;
  font-size: .65rem !important;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--clr-muted) !important;
  transition: border-color .12s linear, background .12s linear, color .12s linear, box-shadow .12s linear;
  white-space: nowrap;
  line-height: 1.4;
  text-decoration: none !important;
}
.nav-pill:hover,
.nav-pill:focus,
.nav-pill.show {
  border-color: var(--clr-cyan) !important;
  background: var(--clr-cyan-dim) !important;
  color: var(--clr-cyan) !important;
  box-shadow: 0 0 12px var(--clr-cyan-glow) !important;
  text-decoration: none !important;
}
.nav-pill.hud-active {
  border-color: var(--clr-cyan) !important;
  color: var(--clr-cyan) !important;
  box-shadow: 0 2px 0 var(--clr-cyan), 0 0 10px var(--clr-cyan-glow) !important;
  background: var(--clr-cyan-dim) !important;
}
.nav-pill.dropdown-toggle::after { margin-left: .3rem; }

/* ── Staff mega-menu ─────────────────────────────────────────────────────── */
/* Remove the trigger button as positioning context so the menu
   can anchor to the full navbar width instead */
.staff-dropdown-wrap {
  position: static !important;
}

.staff-megamenu {
  /* Span edge-to-edge under the navbar */
  left: 0 !important;
  right: 0 !important;
  top: 100% !important;
  width: auto !important;
  max-width: 100% !important;
  padding: 0;
  background: rgba(5, 7, 14, 0.98) !important;
  border: 1px solid var(--clr-border) !important;
  border-top: 2px solid var(--clr-cyan) !important;
  border-radius: 0 0 2px 2px !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.75), 0 0 0 1px var(--clr-cyan-dim);
  overflow: hidden;
  animation: hud-fadein .15s linear;
}

/* Cap content width and centre it so columns don't stretch on ultrawide */
.staff-megamenu__inner {
  max-width: 1400px;
  margin: 0 auto;
}

.staff-megamenu__banner {
  background: linear-gradient(90deg, rgba(185,28,28,.12) 0%, rgba(9,9,11,.55) 50%, rgba(201,162,39,.08) 100%);
  border-bottom: 1px solid rgba(201, 162, 39, 0.15);
  padding: .45rem 1.1rem .4rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.staff-megamenu__banner-title {
  font-family: var(--ff-ui);
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--clr-cyan);
  font-weight: 500;
  line-height: 1;
}
.staff-megamenu__banner-icon {
  font-size: .85rem;
  color: var(--clr-cyan);
  opacity: .75;
}

.staff-megamenu__inner {
  display: flex;
  padding: .8rem .9rem .85rem;
  gap: 0;
}

.staff-megamenu__col {
  flex: 1;
  padding: 0 .85rem;
  min-width: 0;
}
.staff-megamenu__col:first-child { padding-left: 0; }
.staff-megamenu__col:last-child  { padding-right: 0; }
.staff-megamenu__col + .staff-megamenu__col {
  border-left: 1px solid var(--clr-border-dim);
}

.staff-megamenu__heading {
  font-family: var(--ff-ui);
  font-size: .58rem;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--clr-cyan);
  font-weight: 500;
  margin: 0 0 .5rem;
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--clr-border);
  display: flex;
  align-items: center;
  gap: .3rem;
  opacity: .85;
}

.staff-megamenu__item {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .35rem .4rem;
  border-radius: 2px;
  color: var(--clr-muted) !important;
  text-decoration: none !important;
  transition: background .1s linear, color .1s linear;
  margin-bottom: .08rem;
  line-height: 1;
  position: relative;
  overflow: hidden;
}
.staff-megamenu__item:hover,
.staff-megamenu__item:focus {
  background: var(--clr-cyan-dim);
  color: var(--clr-cyan) !important;
  outline: none;
}
.staff-megamenu__item:hover .staff-megamenu__icon,
.staff-megamenu__item:focus .staff-megamenu__icon {
  opacity: 1;
  color: var(--clr-cyan);
}

.staff-megamenu__icon {
  font-size: 1rem;
  width: 1.2rem;
  flex-shrink: 0;
  text-align: center;
  color: var(--clr-cyan);
  opacity: .65;
  transition: color .1s, opacity .1s;
}

.staff-megamenu__item-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.staff-megamenu__label {
  font-size: .78rem;
  font-weight: 500;
  font-family: var(--ff-body);
  color: inherit;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.staff-megamenu__sub {
  font-size: .67rem;
  color: var(--clr-muted-dim);
  font-family: var(--ff-mono);
  line-height: 1.3;
  margin-top: .05rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.staff-megamenu__item:hover .staff-megamenu__sub,
.staff-megamenu__item:focus .staff-megamenu__sub {
  color: var(--clr-muted);
}

.staff-megamenu__item .staff-item-badge {
  margin-left: auto;
  flex-shrink: 0;
  font-size: .62rem;
}

/* ── Superuser admin footer strip ──────────────────────────────── */
.staff-megamenu__footer {
  border-top: 1px solid var(--clr-border-dim);
  background: rgba(0, 0, 0, .3);
  padding: .4rem 1rem;
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
}
.staff-megamenu__footer-label {
  font-family: var(--ff-ui);
  font-size: .52rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--clr-muted-dim);
  flex-shrink: 0;
  padding-right: .6rem;
  border-right: 1px solid var(--clr-border-dim);
  margin-right: .15rem;
  display: flex;
  align-items: center;
  gap: .3rem;
}
.staff-megamenu__footer-item {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .18rem .65rem;
  border-radius: 2px;
  border: 1px solid transparent;
  color: var(--clr-muted) !important;
  text-decoration: none !important;
  font-family: var(--ff-ui);
  font-size: .63rem;
  letter-spacing: .06em;
  transition: background .12s, color .12s, border-color .12s;
}
.staff-megamenu__footer-item:hover {
  background: var(--clr-cyan-dim);
  border-color: var(--clr-border);
  color: var(--clr-cyan) !important;
}
.staff-megamenu__footer-item .bi { font-size: .78rem; opacity: .7; }
.staff-megamenu__footer-item:hover .bi { opacity: 1; }

@media (max-width: 991.98px) {
  .staff-megamenu {
    border-top: none !important;
    border-radius: 2px !important;
    box-shadow: none;
  }
  .staff-megamenu__banner { display: none; }
  .staff-megamenu__inner {
    flex-direction: column;
    padding: .5rem .6rem;
    gap: .25rem;
  }
  .staff-megamenu__col {
    padding: 0;
    border-left: none !important;
  }
  .staff-megamenu__col + .staff-megamenu__col {
    border-top: 1px solid var(--clr-border-dim);
    padding-top: .35rem;
    margin-top: .25rem;
  }
  .staff-megamenu__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: .2rem;
    padding: .4rem .6rem;
  }
  .staff-megamenu__footer-label { border-right: none; padding-right: 0; }
}

/* ── Staff simple dropdown ──────────────────────────────────────────────── */
.nav-dropdown-menu {
  background: rgba(5, 7, 14, 0.98) !important;
  border: 1px solid var(--clr-border) !important;
  border-radius: 2px !important;
  backdrop-filter: blur(14px);
  padding: .4rem;
  min-width: 160px;
  animation: hud-fadein .12s linear;
}
.nav-dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--clr-muted) !important;
  border-radius: 2px;
  padding: .42rem .7rem;
  font-family: var(--ff-ui);
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background .1s linear, color .1s linear;
}
.nav-dropdown-menu .dropdown-item:hover,
.nav-dropdown-menu .dropdown-item:focus {
  background: var(--clr-cyan-dim) !important;
  color: var(--clr-cyan) !important;
}

/* ── Logout / action button ─────────────────────────────────────────────── */
.nav-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem .85rem;
  border-radius: 2px;
  border: 1px solid var(--clr-border-dim);
  background: transparent;
  font-family: var(--ff-ui);
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--clr-muted);
  cursor: pointer;
  transition: border-color .12s linear, background .12s linear, color .12s linear, box-shadow .12s linear;
  white-space: nowrap;
  line-height: 1.4;
}
.nav-pill-btn:hover,
.nav-pill-btn:focus {
  border-color: var(--clr-crimson);
  background: var(--clr-crimson-dim);
  color: var(--clr-crimson);
  box-shadow: 0 0 12px var(--clr-crimson-glow);
  outline: none;
}

/* ── Operator identity ──────────────────────────────────────────────────── */
.navbar-username {
  font-family: var(--ff-mono);
  font-size: .7rem;
  color: var(--clr-muted-dim) !important;
  white-space: nowrap;
  letter-spacing: .04em;
}
.hud-operator {
  font-family: var(--ff-ui);
  font-size: .65rem;
  font-weight: 500;
  color: var(--clr-muted-dim);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.hud-operator::before {
  content: '';
}

/* ── Cards & panels (glassmorphism) ─────────────────────────────────────── */
.card {
  background: var(--clr-surface) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--clr-border) !important;
  border-radius: 2px !important;
  color: var(--clr-text);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.55),
              inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.list-group-item {
  background-color: rgba(9, 9, 11, 0.75);
  border: 1px solid var(--clr-border);
  color: var(--clr-text);
}
.card-header {
  background: rgba(201, 162, 39, 0.05) !important;
  border-bottom: 1px solid var(--clr-border) !important;
  color: var(--clr-cyan) !important;
  font-family: var(--ff-ui) !important;
  font-size: .72rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  padding: .65rem 1rem !important;
}
.card.bg-light,
.card-body.bg-light,
.bg-light {
  background-color: rgba(18, 18, 20, 0.85) !important;
  color: var(--clr-text) !important;
}

/* ── Tables (data grid) ─────────────────────────────────────────────────── */
.table > :not(caption) > * > *,
.table-sm > :not(caption) > * > * {
  padding: 0.5rem 0.75rem;
}
.table {
  color: var(--clr-text);
  --bs-table-color: var(--clr-text);
  --bs-table-bg: rgba(5, 7, 14, 0.80);
  --bs-table-striped-color: var(--clr-text);
  --bs-table-striped-bg: rgba(201, 162, 39, 0.02);
  --bs-table-hover-color: var(--clr-text);
  --bs-table-hover-bg: rgba(201, 162, 39, 0.05);
  --bs-table-border-color: var(--clr-border-dim);
}
.table thead th {
  font-family: var(--ff-ui);
  font-size: .65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--clr-cyan);
  border-bottom: 1px solid rgba(201, 162, 39, 0.28) !important;
  padding-block: .7rem;
}
.table tbody tr {
  font-family: var(--ff-mono);
  font-size: .82rem;
  transition: background .1s linear, border-left-color .1s linear;
}
.table tbody tr:hover > * {
  background-color: rgba(201, 162, 39, 0.05) !important;
}
.table-dark {
  --bs-table-bg: #0a0c18;
  --bs-table-border-color: rgba(255, 255, 255, 0.10);
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(201, 162, 39, 0.02);
  color: var(--clr-text);
}
.table-bordered > :not(caption) > * > * {
  border-color: var(--clr-border-dim);
}
.table-success > * > *,
tr.table-success > * {
  --bs-table-bg: rgba(34, 197, 94, 0.15) !important;
  color: #bbf7d0 !important;
  border-color: rgba(34, 197, 94, 0.15) !important;
}

/* ── Buttons (tactical) ─────────────────────────────────────────────────── */
.btn {
  border-radius: 2px !important;
  font-family: var(--ff-ui) !important;
  font-size: .68rem !important;
  font-weight: 500 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  transition: all .12s linear !important;
  position: relative;
  overflow: hidden;
}
/* Scanner sweep effect */
.btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  transition: left .35s linear;
  pointer-events: none;
}
.btn:hover::after {
  left: 150%;
}

.btn-primary {
  background: var(--clr-cyan-dim) !important;
  border: 1px solid var(--clr-cyan) !important;
  color: var(--clr-cyan) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: var(--clr-cyan-mid) !important;
  border-color: var(--clr-cyan) !important;
  color: var(--clr-text) !important;
  box-shadow: 0 0 16px var(--clr-cyan-glow) !important;
}

.btn-secondary {
  background: rgba(100, 116, 139, 0.12) !important;
  border: 1px solid rgba(100, 116, 139, 0.40) !important;
  color: var(--clr-muted) !important;
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
  background: rgba(100, 116, 139, 0.22) !important;
  border-color: var(--clr-muted) !important;
  color: var(--clr-text) !important;
  box-shadow: 0 0 10px rgba(100, 116, 139, 0.20) !important;
}

.btn-outline-secondary {
  background: transparent !important;
  border: 1px solid rgba(100, 116, 139, 0.35) !important;
  color: var(--clr-muted) !important;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background: rgba(100, 116, 139, 0.12) !important;
  border-color: var(--clr-muted) !important;
  color: var(--clr-text) !important;
}

.btn-danger {
  background: var(--clr-crimson-dim) !important;
  border: 1px solid var(--clr-crimson) !important;
  color: var(--clr-crimson) !important;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
  background: rgba(185, 28, 28, 0.28) !important;
  border-color: var(--clr-crimson) !important;
  color: var(--clr-text) !important;
  box-shadow: 0 0 16px var(--clr-crimson-glow) !important;
}

.btn-outline-danger {
  background: transparent !important;
  border: 1px solid rgba(185, 28, 28, 0.45) !important;
  color: var(--clr-crimson) !important;
}
.btn-outline-danger:hover,
.btn-outline-danger:focus {
  background: var(--clr-crimson-dim) !important;
  border-color: var(--clr-crimson) !important;
  box-shadow: 0 0 12px var(--clr-crimson-glow) !important;
}

.btn-success {
  background: var(--clr-emerald-dim) !important;
  border: 1px solid rgba(34, 197, 94, 0.55) !important;
  color: var(--clr-emerald) !important;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active {
  background: rgba(34, 197, 94, 0.20) !important;
  border-color: var(--clr-emerald) !important;
  color: var(--clr-text) !important;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.25) !important;
}

.btn-outline-success {
  background: transparent !important;
  border: 1px solid rgba(34, 197, 94, 0.40) !important;
  color: var(--clr-emerald) !important;
}
.btn-outline-success:hover,
.btn-outline-success:focus {
  background: var(--clr-emerald-dim) !important;
  border-color: var(--clr-emerald) !important;
}

.btn-warning {
  background: var(--clr-amber-dim) !important;
  border: 1px solid rgba(245, 158, 11, 0.50) !important;
  color: var(--clr-amber) !important;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
  background: rgba(245, 158, 11, 0.20) !important;
  border-color: var(--clr-amber) !important;
  color: var(--clr-text) !important;
}

.btn-outline-warning {
  background: transparent !important;
  border: 1px solid rgba(245, 158, 11, 0.40) !important;
  color: var(--clr-amber) !important;
}
.btn-outline-warning:hover,
.btn-outline-warning:focus {
  background: var(--clr-amber-dim) !important;
  border-color: var(--clr-amber) !important;
}

.btn-outline-info {
  background: transparent !important;
  border: 1px solid rgba(201, 162, 39, 0.40) !important;
  color: var(--clr-sky) !important;
}
.btn-outline-info:hover,
.btn-outline-info:focus {
  background: var(--clr-sky-dim) !important;
  border-color: var(--clr-sky) !important;
}

.btn-outline-light {
  background: transparent !important;
  border: 1px solid var(--clr-border-mid) !important;
  color: var(--clr-muted) !important;
}
.btn-outline-light:hover,
.btn-outline-light:focus {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: var(--clr-muted) !important;
  color: var(--clr-text) !important;
}

/* ── btn-check selected state ───────────────────────────────────────────── */
/* Driven by JS (see base.html) which toggles .btn-on on the label.
   CSS :checked + sibling selectors cannot win against the !important rules
   above, so we use a toggled class instead.
   ON  = filled background + solid full-opacity border + glow
   OFF = dimmed opacity so the unselected state is clearly inactive           */

.btn-on.btn-outline-primary {
  background:   rgba(201,162,39,.22)          !important;
  border-color: var(--clr-cyan)               !important;
  color:        var(--clr-text)               !important;
  box-shadow:   0 0 18px var(--clr-cyan-glow) !important;
  opacity:      1                             !important;
}

.btn-on.btn-outline-warning {
  background:   rgba(245,158,11,.20)          !important;
  border-color: var(--clr-amber)              !important;
  color:        var(--clr-text)               !important;
  box-shadow:   0 0 18px rgba(245,158,11,.35) !important;
  opacity:      1                             !important;
}

.btn-on.btn-outline-info {
  background:   rgba(201,162,39,.22)          !important;
  border-color: var(--clr-cyan)               !important;
  color:        var(--clr-text)               !important;
  box-shadow:   0 0 18px var(--clr-cyan-glow) !important;
  opacity:      1                             !important;
}

.btn-on.btn-outline-success {
  background:   rgba(34,197,94,.18)           !important;
  border-color: var(--clr-emerald)            !important;
  color:        var(--clr-text)               !important;
  box-shadow:   0 0 18px rgba(34,197,94,.30)  !important;
  opacity:      1                             !important;
}

.btn-on.btn-outline-secondary {
  background:   rgba(100,116,139,.22)          !important;
  border-color: var(--clr-muted)               !important;
  color:        var(--clr-text)                !important;
  box-shadow:   0 0 14px rgba(100,116,139,.25) !important;
  opacity:      1                              !important;
}

/* Unselected btn-check labels — dimmed so the active one stands out clearly */
input.btn-check:not(:checked) + label.btn {
  opacity: 0.45;
}

/* ── Bootstrap info → imperial gold override ────────────────────────────── */
.text-info  { color: #c9a227 !important; }
.bg-info    { background-color: rgba(201, 162, 39, 0.15) !important; }
.border-info { border-color: rgba(201, 162, 39, 0.40) !important; }
.badge.bg-info { background-color: #c9a227 !important; color: #09090b !important; }
.btn-info {
  background: rgba(201, 162, 39, 0.12) !important;
  border: 1px solid #c9a227 !important;
  color: #c9a227 !important;
}
.btn-info:hover,
.btn-info:focus {
  background: rgba(201, 162, 39, 0.22) !important;
  color: var(--clr-text) !important;
  box-shadow: 0 0 14px rgba(201, 162, 39, 0.28) !important;
}

/* ── Form controls (terminal input) ────────────────────────────────────── */
.form-control,
.form-select,
textarea.form-control {
  background-color: var(--clr-input-bg) !important;
  border: 1px solid var(--clr-border-mid) !important;
  color: var(--clr-text) !important;
  border-radius: 2px !important;
  font-family: var(--ff-mono) !important;
  font-size: .85rem !important;
  color-scheme: dark;
}
.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
  background-color: rgba(0, 0, 0, 0.65) !important;
  color: var(--clr-text) !important;
  border-color: var(--clr-cyan) !important;
  box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.18) !important;
}
.form-control:disabled,
.form-select:disabled {
  background-color: rgba(0, 0, 0, 0.35) !important;
  color: var(--clr-muted-dim) !important;
  border-color: var(--clr-border-dim) !important;
}
.form-control::placeholder,
textarea.form-control::placeholder {
  color: var(--clr-muted-dim);
  opacity: 1;
}

.form-select option,
select option {
  background-color: #0d0d14;
  color: var(--clr-text);
}
.form-select option:checked,
select option:checked {
  background-color: rgba(201, 162, 39, 0.15);
  color: var(--clr-text);
}
.form-select option:disabled,
select option:disabled {
  color: var(--clr-muted-dim);
}

.form-label {
  font-family: var(--ff-ui);
  font-size: .65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--clr-muted);
  margin-bottom: .35rem;
}
.form-check-label {
  color: var(--clr-text);
  font-family: var(--ff-body);
}
.form-text {
  font-family: var(--ff-mono);
  font-size: .75rem;
  color: var(--clr-muted-dim);
}

.input-group-text {
  background-color: rgba(9, 9, 11, 0.85);
  border-color: var(--clr-border-mid);
  color: var(--clr-muted);
  border-radius: 2px;
  font-family: var(--ff-mono);
  font-size: .82rem;
}

/* ── Badges (neon pills) ────────────────────────────────────────────────── */
.badge {
  border-radius: 2px !important;
  font-family: var(--ff-ui) !important;
  font-size: .58rem !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  padding: .2em .65em !important;
  border: 1px solid currentColor;
}
.badge.bg-primary {
  background: rgba(201, 162, 39, 0.08) !important;
  color: var(--clr-cyan) !important;
}
.badge.bg-secondary {
  background: rgba(100, 116, 139, 0.10) !important;
  color: var(--clr-muted) !important;
}
.badge.bg-success {
  background: rgba(34, 197, 94, 0.08) !important;
  color: var(--clr-emerald) !important;
}
.badge.bg-danger {
  background: rgba(185, 28, 28, 0.08) !important;
  color: var(--clr-crimson) !important;
}
.badge.bg-warning {
  background: rgba(245, 158, 11, 0.08) !important;
  color: var(--clr-amber) !important;
}
.badge.bg-warning.text-dark {
  background: rgba(245, 158, 11, 0.08) !important;
  color: var(--clr-amber) !important;
}
.badge.bg-info {
  background: rgba(201, 162, 39, 0.08) !important;
  color: var(--clr-sky) !important;
}
.badge.bg-light.text-dark {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--clr-muted) !important;
}
.badge.bg-dark {
  background: rgba(9, 9, 11, 0.50) !important;
  color: var(--clr-muted) !important;
  border-color: var(--clr-border-mid) !important;
}

/* ── Alerts (HUD notification banners) ─────────────────────────────────── */
.alert {
  border-radius: 2px !important;
  backdrop-filter: blur(8px);
  border-left-width: 3px !important;
  font-family: var(--ff-body);
}
.alert-success {
  background: rgba(34, 197, 94, 0.08) !important;
  border-color: var(--clr-emerald) !important;
  color: #bbf7d0 !important;
}
.alert-danger {
  background: rgba(185, 28, 28, 0.08) !important;
  border-color: var(--clr-crimson) !important;
  color: #fecaca !important;
}
.alert-warning {
  background: rgba(245, 158, 11, 0.08) !important;
  border-color: var(--clr-amber) !important;
  color: #fde68a !important;
}
.alert-info {
  background: rgba(201, 162, 39, 0.08) !important;
  border-color: var(--clr-sky) !important;
  color: #bae6fd !important;
}
.alert .btn-close {
  filter: invert(1) grayscale(1) brightness(1.5);
}

/* ── List groups ─────────────────────────────────────────────────────────── */
.list-group-item {
  border-color: var(--clr-border-dim) !important;
}
.list-group-item + .list-group-item {
  border-top-color: var(--clr-border-dim) !important;
}
.list-group-item-action:hover,
.list-group-item-action:focus {
  background-color: rgba(201, 162, 39, 0.06);
  color: var(--clr-text);
}

/* ── Pagination ──────────────────────────────────────────────────────────── */
.page-link {
  background-color: rgba(9, 9, 11, 0.80);
  border-color: var(--clr-border-dim);
  color: var(--clr-muted);
  font-family: var(--ff-ui);
  font-size: .65rem;
  letter-spacing: .08em;
  border-radius: 2px !important;
}
.page-link:hover,
.page-link:focus {
  background-color: var(--clr-cyan-dim);
  border-color: var(--clr-cyan);
  color: var(--clr-cyan);
}
.page-item.active .page-link {
  background-color: var(--clr-cyan-dim) !important;
  border-color: var(--clr-cyan) !important;
  color: var(--clr-cyan) !important;
  box-shadow: 0 0 10px var(--clr-cyan-glow);
}
.page-item.disabled .page-link {
  background-color: rgba(9, 9, 11, 0.50);
  border-color: var(--clr-border-dim);
  color: var(--clr-muted-dim);
}

/* ── Nav tabs ───────────────────────────────────────────────────────────── */
.nav-tabs {
  border-bottom-color: var(--clr-border) !important;
  gap: .15rem;
}
.nav-tabs .nav-link {
  color: var(--clr-muted);
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--clr-border-dim, rgba(255,255,255,0.08));
  border-bottom-color: transparent;
  border-radius: 2px 2px 0 0 !important;
  font-family: var(--ff-ui);
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .45rem .9rem;
  transition: color .1s linear, border-color .1s linear, background .1s linear;
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  color: var(--clr-text);
  background-color: var(--clr-cyan-dim);
  border-color: var(--clr-border);
  border-bottom-color: transparent;
}
.nav-tabs .nav-link.active {
  background-color: var(--clr-cyan-dim);
  border-color: var(--clr-border) var(--clr-border) transparent !important;
  border-bottom: 2px solid var(--clr-cyan) !important;
  color: var(--clr-cyan) !important;
  font-weight: 600;
  box-shadow: 0 0 12px var(--clr-cyan-glow);
}

/* ── TinyMCE ────────────────────────────────────────────────────────────── */
.tox-tinymce {
  border-color: var(--clr-border) !important;
  border-radius: 2px !important;
}

/* ── Accordion ──────────────────────────────────────────────────────────── */
.accordion-button {
  background-color: rgba(9, 9, 11, 0.70);
  color: var(--clr-text);
  font-family: var(--ff-lore);
  border-radius: 2px !important;
}
.accordion-button:not(.collapsed) {
  background-color: var(--clr-cyan-dim);
  color: var(--clr-cyan);
  box-shadow: inset 0 -1px 0 var(--clr-border);
}
.accordion-body {
  background-color: rgba(5, 7, 14, 0.55);
  color: var(--clr-text);
}

/* ── Modals ──────────────────────────────────────────────────────────────── */
.modal-content {
  background: rgba(9, 9, 11, 0.96) !important;
  backdrop-filter: blur(16px);
  border: 1px solid var(--clr-border) !important;
  border-radius: 2px !important;
  color: var(--clr-text);
}
.modal-header {
  border-bottom-color: var(--clr-border) !important;
  font-family: var(--ff-ui);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--clr-cyan);
}
.modal-footer {
  border-top-color: var(--clr-border) !important;
}
.modal-backdrop {
  backdrop-filter: blur(3px);
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
footer {
  padding: 1rem 0;
  text-align: center;
  font-family: var(--ff-ui);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-top: 1px solid var(--clr-border-dim);
  margin-top: 2rem;
}
footer p {
  display: inline-block;
  padding: .3rem .9rem;
  background: rgba(9,9,11,.85);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 3px;
  color: rgba(203,213,225,.70);
  margin: 0;
}

/* ── Utility overrides ───────────────────────────────────────────────────── */
hr {
  border-color: var(--clr-border-dim);
  opacity: 1;
}
code {
  color: var(--clr-cyan);
  background-color: var(--clr-cyan-dim);
  padding: .1em .35em;
  border-radius: 2px;
  font-family: var(--ff-mono);
  font-size: .85em;
  border: 1px solid rgba(201, 162, 39, 0.15);
}
.breadcrumb {
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  --bs-breadcrumb-bg: transparent;
}
.breadcrumb-item,
.breadcrumb-item a {
  color: var(--clr-muted);
  font-family: var(--ff-mono);
  font-size: .8rem;
}
.breadcrumb-item.active {
  color: var(--clr-text);
}
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--clr-muted-dim);
  content: '//';
  font-family: var(--ff-mono);
}

/* ── Bootstrap tooltips ─────────────────────────────────────────────────── */
.tooltip .tooltip-inner {
  font-family: var(--ff-body);
  font-size: .8rem;
  background-color: rgba(5, 7, 14, 0.98);
  color: var(--clr-text);
  border: 1px solid var(--clr-border);
  max-width: 280px;
  padding: .4rem .65rem;
  border-radius: 2px;
}
.tooltip.bs-tooltip-top    .tooltip-arrow::before { border-top-color:    rgba(5, 7, 14, 0.98); }
.tooltip.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: rgba(5, 7, 14, 0.98); }
.tooltip.bs-tooltip-start  .tooltip-arrow::before { border-left-color:   rgba(5, 7, 14, 0.98); }
.tooltip.bs-tooltip-end    .tooltip-arrow::before { border-right-color:  rgba(5, 7, 14, 0.98); }

/* ── Traffic-light toggle ───────────────────────────────────────────────── */
.toggle-traffic {
  background-color: var(--clr-crimson-dim);
  border-color: rgba(185, 28, 28, 0.40);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fecaca'/%3e%3c/svg%3e");
}
.toggle-traffic:checked {
  background-color: var(--clr-emerald-dim);
  border-color: rgba(34, 197, 94, 0.40);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23bbf7d0'/%3e%3c/svg%3e");
}
.toggle-traffic:focus {
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.22);
}
.toggle-traffic:focus:not(:checked) {
  box-shadow: 0 0 0 2px rgba(185, 28, 28, 0.22);
}

/* ── Progress bars (energy levels) ─────────────────────────────────────── */
.progress {
  height: 5px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: 0 !important;
  overflow: hidden;
}
.progress-bar {
  background: linear-gradient(90deg, #b91c1c, #c9a227) !important;
  box-shadow: 0 0 8px rgba(201, 162, 39, 0.28);
  border-radius: 0 !important;
}
.progress-bar.bg-danger {
  background: linear-gradient(90deg, #7f1d1d, var(--clr-crimson)) !important;
  box-shadow: 0 0 8px var(--clr-crimson-glow) !important;
}
.progress-bar.bg-warning {
  background: linear-gradient(90deg, var(--clr-amber), rgba(245, 158, 11, 0.55)) !important;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.25) !important;
}
.progress-bar.bg-success {
  background: linear-gradient(90deg, var(--clr-emerald), rgba(34, 197, 94, 0.55)) !important;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.25) !important;
}
/* Power-score stacked breakdown segments — each needs its own override */
.progress-bar.bg-primary {
  background: linear-gradient(90deg, #2563eb, #3b82f6) !important;
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.25) !important;
}
.progress-bar.ps-seg-indigo {
  background: linear-gradient(90deg, #4338ca, #6366f1) !important;
  box-shadow: 0 0 8px rgba(99, 102, 241, 0.25) !important;
}

/* ── Currency coin icons ─────────────────────────────────────────────────── */
.coin-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  font-size: .62rem;
  font-weight: 800;
  font-family: var(--ff-lore);
  letter-spacing: .04em;
  text-transform: uppercase;
  border-width: 2px;
  border-style: solid;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30),
    0 2px 8px rgba(0, 0, 0, 0.60);
  user-select: none;
}
.coin-icon.coin-sm {
  width: 1.3rem;
  height: 1.3rem;
  font-size: .46rem;
  border-width: 1px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 1px 3px rgba(0, 0, 0, 0.55);
}
.coin-cp {
  background: radial-gradient(circle at 35% 35%, #d4855a, #8b4513);
  border-color: #6b3410;
  color: #ffe8d8;
}
.coin-sp {
  background: radial-gradient(circle at 35% 35%, #d8d8e0, #8a8a96);
  border-color: #6a6a78;
  color: #1a1a22;
}
.coin-gp {
  background: radial-gradient(circle at 35% 35%, #ffe066, #c8940a);
  border-color: #9a7008;
  color: #2a1800;
}
.coin-mp {
  background: radial-gradient(circle at 35% 35%, #a8d8f0, #3a7ab0);
  border-color: #2a5a88;
  color: #f0f8ff;
}
.coin-pp {
  background: radial-gradient(circle at 35% 35%, #f0f0f8, #b0b0c8);
  border-color: #8888a8;
  color: #0a0a16;
}

/* ── GM Tool buttons ────────────────────────────────────────────────────── */
.gm-tool-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 160px;
  padding: .65rem 1rem;
  text-align: left;
  line-height: 1.2;
}
.gm-tool-icon {
  font-size: 1.3rem;
  margin-bottom: .3rem;
  opacity: .85;
  color: var(--clr-cyan);
}
.gm-tool-label {
  font-weight: 600;
  font-size: .72rem;
  font-family: var(--ff-ui);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.gm-tool-sub {
  font-size: .68rem;
  opacity: .7;
  margin-top: .1rem;
  font-weight: 400;
  font-family: var(--ff-mono);
  color: var(--clr-muted);
  text-transform: none;
  letter-spacing: 0;
}

/* ── Upgrade category section boxes ──────────────────────────────────── */
.upgrade-category-box {
  background: rgba(9, 9, 11, 0.70);
  border: 1px solid var(--clr-border);
  border-radius: 2px;
  padding: 1rem 1.25rem 1.25rem;
}
.upgrade-category-header {
  font-family: var(--ff-ui);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--clr-cyan);
  margin-bottom: .85rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* ── Upgrade card picker ──────────────────────────────────────────────── */
.upgrade-card {
  cursor: pointer;
  transition: border-color .12s linear, box-shadow .12s linear;
  user-select: none;
}
.upgrade-card:hover {
  border-color: var(--clr-cyan) !important;
  box-shadow: 0 0 12px var(--clr-cyan-glow);
}
.upgrade-card--selected {
  border-color: var(--clr-cyan) !important;
  box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.30);
}

/* ── Template description ─────────────────────────────────────────────── */
.template-desc { font-size: .875rem; }
.template-desc h1, .template-desc h2, .template-desc h3,
.template-desc h4, .template-desc h5, .template-desc h6 {
  font-size: .875rem;
  font-weight: 600;
  margin-bottom: .15rem;
}

/* ── Ticket thread ────────────────────────────────────────────────────── */
.ticket-thread {
  border: 1px solid var(--clr-border);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 1rem;
}

/* ═══════════════════════════════════════════════════════════
   TICKET POSTS — Ariadnian Kingdom Theme
   Primary: black  |  Secondary: red + gold
   ═══════════════════════════════════════════════════════════ */

.ticket-post {
  padding: 0;
  border-bottom: none;
  margin-bottom: 0.9rem;
  border-radius: 6px;
  overflow: hidden;
  backdrop-filter: blur(10px);
  position: relative;
}
.ticket-post:last-child { margin-bottom: 0; }

/* ── Card variant: Player ── */
.ticket-post--player {
  background: rgba(6, 5, 12, 0.82);
  border: 1px solid rgba(110, 20, 20, 0.30);
  border-left: 4px solid rgba(150, 25, 25, 0.70);
  box-shadow: 0 2px 12px rgba(0,0,0,0.40);
}

/* ── Card variant: Staff ── */
.ticket-post--staff {
  background: rgba(4, 3, 10, 0.88);
  border: 1px solid rgba(180, 140, 30, 0.38);
  border-left: 4px solid rgba(205, 160, 35, 0.90);
  box-shadow: 0 2px 18px rgba(0,0,0,0.50), 0 0 24px rgba(180,140,30,0.08);
}

/* ── Card variant: Oracle System Message ── */
.ticket-post--oracle {
  background: rgba(2, 4, 12, 0.90);
  border: 1px solid rgba(100, 160, 210, 0.28);
  border-left: 4px solid rgba(120, 180, 230, 0.70);
  box-shadow: 0 2px 18px rgba(0,0,0,0.45), 0 0 24px rgba(100,160,220,0.06);
}

/* ── Card variant: Internal Note ── */
.ticket-post--note {
  background: rgba(8, 7, 2, 0.85);
  border: 1px solid rgba(160, 115, 20, 0.35);
  border-left: 4px solid rgba(180, 130, 25, 0.75);
  box-shadow: 0 2px 12px rgba(0,0,0,0.40);
}

/* ══════════════════════════════════════════
   BANNER — textured kingdom header bar
   ══════════════════════════════════════════ */
.ticket-post__banner {
  display: flex;
  align-items: stretch;
  min-height: 72px;
  position: relative;
  overflow: hidden;
}

/* Subtle diagonal weave texture shared by all variants */
.ticket-post__banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -52deg,
    transparent 0px,
    transparent 4px,
    rgba(255,255,255,0.012) 4px,
    rgba(255,255,255,0.012) 5px
  );
  pointer-events: none;
  z-index: 0;
}

/* Player banner — dark with blood-red shimmer */
.ticket-post--player .ticket-post__banner {
  background:
    linear-gradient(108deg,
      rgba(140, 18, 18, 0.45) 0%,
      rgba(6, 4, 12, 0.98)   18%,
      rgba(8, 5, 14, 0.99)   78%,
      rgba(90, 10, 10, 0.22) 100%
    );
  border-bottom: 1px solid rgba(150, 25, 25, 0.45);
}

/* Staff banner — dark with gold shimmer, richer texture */
.ticket-post--staff .ticket-post__banner {
  background:
    linear-gradient(108deg,
      rgba(185, 145, 28, 0.38) 0%,
      rgba(5, 3, 12, 0.98)    18%,
      rgba(8, 5, 16, 0.99)    72%,
      rgba(130, 18, 18, 0.22) 100%
    );
  border-bottom: 2px solid rgba(205, 160, 35, 0.55);
}
/* Gold glint line at very top of staff banner */
.ticket-post--staff .ticket-post__banner::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(220, 175, 50, 0.60) 25%,
    rgba(240, 200, 80, 0.80) 50%,
    rgba(220, 175, 50, 0.60) 75%,
    transparent 100%
  );
  z-index: 1;
}

/* Oracle system message banner — cool steel blue */
.ticket-post--oracle .ticket-post__banner {
  background:
    linear-gradient(108deg,
      rgba(80, 140, 200, 0.32) 0%,
      rgba(4, 5, 14, 0.98)    18%,
      rgba(5, 6, 16, 0.99)    78%,
      rgba(40, 80, 140, 0.18) 100%
    );
  border-bottom: 1px solid rgba(100, 160, 220, 0.40);
}
.ticket-post--oracle .ticket-post__banner::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(100, 170, 230, 0.45) 25%,
    rgba(140, 195, 250, 0.65) 50%,
    rgba(100, 170, 230, 0.45) 75%,
    transparent 100%
  );
  z-index: 1;
}

/* Note banner — dark amber */
.ticket-post--note .ticket-post__banner {
  background:
    linear-gradient(108deg,
      rgba(160, 110, 18, 0.38) 0%,
      rgba(7, 6, 2, 0.98)     18%,
      rgba(9, 7, 3, 0.99)     78%,
      rgba(110, 75, 10, 0.22) 100%
    );
  border-bottom: 1px solid rgba(180, 130, 25, 0.45);
}

/* ── Crest / emblem area ── */
.ticket-post__banner-crest {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.65rem 0.35rem 0.9rem;
  position: relative;
  z-index: 1;
}

.ticket-post__crest-img {
  display: block;
  object-fit: contain;
}
.ticket-post__crest-img--staff {
  height: 64px;
  width: auto;
  filter:
    drop-shadow(0 0 6px rgba(205, 160, 35, 0.65))
    drop-shadow(0 1px 3px rgba(0,0,0,0.80));
  transition: filter 0.2s;
}
.ticket-post--staff:hover .ticket-post__crest-img--staff {
  filter:
    drop-shadow(0 0 10px rgba(220, 175, 55, 0.80))
    drop-shadow(0 1px 3px rgba(0,0,0,0.80));
}
.ticket-post__crest-img--director {
  height: 72px;
  filter:
    drop-shadow(0 0 8px rgba(228, 182, 55, 0.80))
    drop-shadow(0 0 18px rgba(220, 175, 50, 0.35))
    drop-shadow(0 1px 4px rgba(0,0,0,0.90));
  transition: filter 0.2s;
}
.ticket-post--staff:hover .ticket-post__crest-img--director {
  filter:
    drop-shadow(0 0 14px rgba(248, 205, 80, 0.95))
    drop-shadow(0 0 28px rgba(235, 190, 55, 0.50))
    drop-shadow(0 1px 4px rgba(0,0,0,0.90));
}
.ticket-post__crest-img--player {
  height: 48px;
  width: auto;
  opacity: 0.68;
  filter: drop-shadow(0 0 5px rgba(150, 25, 25, 0.50));
  transition: opacity 0.2s;
}
.ticket-post--player:hover .ticket-post__crest-img--player {
  opacity: 0.85;
}

/* Note: icon badge instead of image */
.ticket-post__banner-crest-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(180, 130, 20, 0.14);
  border: 1px solid rgba(180, 130, 20, 0.38);
  border-radius: 4px;
  font-size: 0.95rem;
  color: rgba(210, 160, 40, 0.88);
}
.ticket-post__banner-crest-icon--oracle {
  background: rgba(80, 140, 200, 0.14);
  border: 1px solid rgba(100, 160, 220, 0.38);
  color: rgba(140, 195, 245, 0.90);
  font-size: 1.1rem;
}

/* ── Decorative divider between crest and text ── */
.ticket-post__banner-divider {
  flex-shrink: 0;
  width: 1px;
  align-self: stretch;
  margin: 0.6rem 0.65rem 0.6rem 0.25rem;
  position: relative;
  z-index: 1;
}
.ticket-post--staff .ticket-post__banner-divider {
  background: linear-gradient(180deg,
    transparent,
    rgba(205, 160, 35, 0.55) 30%,
    rgba(220, 175, 55, 0.70) 50%,
    rgba(205, 160, 35, 0.55) 70%,
    transparent
  );
}
.ticket-post--player .ticket-post__banner-divider {
  background: linear-gradient(180deg,
    transparent,
    rgba(150, 25, 25, 0.50) 30%,
    rgba(170, 35, 35, 0.65) 50%,
    rgba(150, 25, 25, 0.50) 70%,
    transparent
  );
}
.ticket-post--note .ticket-post__banner-divider {
  background: linear-gradient(180deg,
    transparent,
    rgba(180, 130, 25, 0.50) 30%,
    rgba(200, 150, 35, 0.65) 50%,
    rgba(180, 130, 25, 0.50) 70%,
    transparent
  );
}
.ticket-post--oracle .ticket-post__banner-divider {
  background: linear-gradient(180deg,
    transparent,
    rgba(100, 160, 220, 0.45) 30%,
    rgba(120, 180, 240, 0.60) 50%,
    rgba(100, 160, 220, 0.45) 70%,
    transparent
  );
}

/* ── Author name + role badge ── */
.ticket-post__banner-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.5rem 0;
  position: relative;
  z-index: 1;
}

.ticket-post__author {
  font-family: var(--ff-lore);
  font-size: 0.87rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ticket-post--staff .ticket-post__author {
  color: rgba(225, 178, 65, 0.96);
  text-shadow: 0 0 14px rgba(200, 155, 35, 0.45);
}
.ticket-post--player .ticket-post__author {
  color: rgba(220, 185, 185, 0.90);
}
.ticket-post--oracle .ticket-post__author {
  color: rgba(140, 195, 245, 0.96);
  text-shadow: 0 0 12px rgba(100, 160, 220, 0.35);
}
.ticket-post--note .ticket-post__author {
  color: rgba(210, 165, 55, 0.90);
}

/* Role badges */
.ticket-post__role-badge {
  font-family: var(--ff-ui);
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 0.14rem 0.48rem;
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
}
.ticket-post__role-badge--oracle {
  background: rgba(100, 160, 220, 0.15);
  color: rgba(140, 195, 245, 0.96);
  border: 1px solid rgba(100, 160, 220, 0.40);
}
.ticket-post__role-badge--staff {
  background: rgba(200, 155, 35, 0.18);
  color: rgba(225, 178, 65, 0.96);
  border: 1px solid rgba(200, 155, 35, 0.45);
}
.ticket-post__role-badge--note {
  background: rgba(180, 130, 20, 0.16);
  color: rgba(210, 165, 50, 0.92);
  border: 1px solid rgba(180, 130, 20, 0.40);
}
.ticket-post__role-badge--director {
  background: linear-gradient(135deg, rgba(215, 170, 40, 0.28), rgba(185, 140, 25, 0.16));
  color: rgba(252, 210, 82, 1.0);
  border: 1px solid rgba(228, 182, 55, 0.70);
  font-size: 0.60rem;
  padding: 0.17rem 0.52rem;
  box-shadow:
    0 0 8px rgba(220, 175, 50, 0.30),
    inset 0 1px 0 rgba(255, 225, 110, 0.22),
    inset 0 -1px 0 rgba(155, 115, 15, 0.22);
  text-shadow: 0 0 10px rgba(240, 195, 68, 0.55);
  letter-spacing: 0.11em;
}

/* ── Timestamp ── */
.ticket-post__banner-meta {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0.5rem 0.9rem 0.5rem 0.3rem;
  position: relative;
  z-index: 1;
}
.ticket-post__time {
  white-space: nowrap;
  font-family: var(--ff-mono);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
}
.ticket-post--staff .ticket-post__time {
  color: rgba(200, 155, 35, 0.48);
}
.ticket-post--player .ticket-post__time {
  color: rgba(170, 120, 120, 0.55);
}
.ticket-post--note .ticket-post__time {
  color: rgba(180, 130, 25, 0.50);
}
.ticket-post--oracle .ticket-post__time {
  color: rgba(100, 160, 220, 0.45);
}

.ticket-post__body {
  padding: 0.95rem 1.2rem 1rem;
  font-size: .93rem;
  line-height: 1.65;
  overflow-wrap: break-word;
  word-break: break-word;
  font-family: var(--ff-body);
}
.ticket-post__body img {
  max-width: 100%;
  height: auto;
  border-radius: 2px;
  margin: .25rem 0;
}

.ticket-post__body h1,
.ticket-post__body h2,
.ticket-post__body h3,
.ticket-post__body h4 {
  font-family: var(--ff-lore);
  margin-top: 1.25rem;
  margin-bottom: .45rem;
  font-weight: 700;
}
.ticket-post__body h1:first-child,
.ticket-post__body h2:first-child,
.ticket-post__body h3:first-child { margin-top: 0; }
.ticket-post__body h1 {
  font-size: 1.25rem;
  border-bottom: 1px solid var(--clr-border-dim);
  padding-bottom: .3rem;
}
.ticket-post__body h2 {
  font-size: 1.05rem;
  border-left: 2px solid var(--clr-cyan);
  padding-left: .7rem;
  color: var(--clr-muted);
}
.ticket-post__body h3,
.ticket-post__body h4 {
  font-size: .9rem;
  color: var(--clr-muted);
  font-style: italic;
}
.ticket-post__body p   { margin-bottom: .75rem; }
.ticket-post__body ul,
.ticket-post__body ol  { padding-left: 1.4rem; margin-bottom: .75rem; }
.ticket-post__body li  { margin-bottom: .2rem; }
.ticket-post__body hr  {
  border-color: var(--clr-border-dim);
  margin: 1rem 0;
}
.ticket-post__body blockquote {
  border-left: 2px solid var(--clr-border-mid);
  margin: .5rem 0 1rem;
  padding: .35rem .9rem;
  color: var(--clr-muted);
  font-style: italic;
}
.ticket-post__body code {
  background: var(--clr-cyan-dim);
  border: 1px solid rgba(201, 162, 39, 0.15);
  padding: .1rem .3rem;
  border-radius: 2px;
  font-size: .85em;
}
.ticket-post__body table {
  border-collapse: collapse;
  margin-bottom: 1rem;
  font-size: .875rem;
}
.ticket-post__body table th,
.ticket-post__body table td {
  padding: .4rem .75rem;
  border: 1px solid var(--clr-border-dim);
  vertical-align: top;
}
.ticket-post__body table th {
  white-space: nowrap;
  background: rgba(9, 9, 11, 0.55);
  font-family: var(--ff-ui);
  font-size: .65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--clr-cyan);
  border-bottom: 1px solid var(--clr-border);
}
.ticket-post__body table tr:nth-child(even) td {
  background: rgba(201, 162, 39, 0.02);
}

/* ── Ticket header card ───────────────────────────────────────────────── */
.ticket-header-card {
  border-top: 2px solid rgba(201, 162, 39, 0.25);
}
.ticket-header-card__title {
  font-family: var(--ff-lore);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--clr-text);
  line-height: 1.3;
}

/* ── Status / Priority badges (shared ticket list + detail) ───────────── */
.ticket-status-badge {
  font-size: .68rem;
  font-family: var(--ff-mono);
  letter-spacing: .04em;
  padding: .3em .65em;
  border-radius: 3px;
}
.ticket-status-badge--new            { background: rgba(99,102,241,.18); color: #a5b4fc; border: 1px solid rgba(99,102,241,.3); }
.ticket-status-badge--open           { background: rgba(201,162,39,.12); color: var(--clr-cyan);  border: 1px solid rgba(201,162,39,.25); }
.ticket-status-badge--awaiting_staff { background: rgba(185,28,28,.14);  color: #fda4af; border: 1px solid rgba(185,28,28,.3); }
.ticket-status-badge--awaiting_player{ background: rgba(245,158,11,.12); color: #fcd34d; border: 1px solid rgba(245,158,11,.3); }
.ticket-status-badge--resolved       { background: rgba(34,197,94,.10);  color: #86efac; border: 1px solid rgba(34,197,94,.25); }
.ticket-status-badge--closed         { background: rgba(100,116,139,.12);color: var(--clr-muted); border: 1px solid rgba(100,116,139,.2); }
.ticket-status-badge--merged         { background: rgba(99,102,241,.18); color: #a5b4fc; border: 1px solid rgba(99,102,241,.3); }

.ticket-priority-badge {
  font-size: .65rem;
  font-family: var(--ff-mono);
  letter-spacing: .04em;
  padding: .25em .6em;
  border-radius: 3px;
}
.ticket-priority-badge--low      { background: rgba(100,116,139,.12); color: var(--clr-muted-dim); border: 1px solid rgba(100,116,139,.18); }
.ticket-priority-badge--medium   { background: rgba(99,102,241,.14);  color: #a5b4fc; border: 1px solid rgba(99,102,241,.25); }
.ticket-priority-badge--high     { background: rgba(245,158,11,.14);  color: #fcd34d; border: 1px solid rgba(245,158,11,.25); }
.ticket-priority-badge--critical { background: rgba(185,28,28,.16);   color: #fda4af; border: 1px solid rgba(185,28,28,.3); animation: pulse-critical 2.5s ease-in-out infinite; }

@keyframes pulse-critical {
  0%, 100% { box-shadow: 0 0 0 0 rgba(185,28,28,0); }
  50%       { box-shadow: 0 0 0 3px rgba(185,28,28,.18); }
}

/* ── Ticket row states ────────────────────────────────────────────────── */
.ticket-row--mine td:first-child {
  box-shadow: inset 2px 0 0 rgba(201,162,39,.4);
}
.ticket-row--selected {
  background: rgba(201,162,39,.04) !important;
  outline: 1px solid rgba(201,162,39,.15);
  outline-offset: -1px;
}

/* ── Ticket post attachments ──────────────────────────────────────────── */
.ticket-post__attachments {
  border-top: 1px solid var(--clr-border-dim);
  padding: .6rem 1.25rem .75rem;
}
.ticket-post__attachments-label {
  font-family: var(--ff-mono);
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--clr-muted-dim);
  margin-bottom: .4rem;
}
.ticket-post__attachments-list {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.ticket-attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: rgba(9,9,11,.55);
  border: 1px solid rgba(201,162,39,.18);
  border-radius: 4px;
  padding: .25rem .6rem;
  max-width: 300px;
}
.ticket-attachment-chip__link {
  display: flex;
  align-items: center;
  gap: .3rem;
  color: var(--clr-cyan);
  text-decoration: none;
  font-family: var(--ff-mono);
  font-size: .72rem;
  overflow: hidden;
}
.ticket-attachment-chip__link:hover { color: #fff; }
.ticket-attachment-chip__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}
.ticket-attachment-chip__size {
  color: var(--clr-muted-dim);
  font-size: .65rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.ticket-attachment-chip__del {
  margin-left: .1rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* ── Collapsible panel (canned responses / variable panel) ────────────── */
.ticket-panel {
  border: 1px solid var(--clr-border-dim);
  border-radius: 4px;
  overflow: hidden;
  background: rgba(9,9,11,.45);
}
.ticket-panel__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: .65rem 1rem;
  background: rgba(201,162,39,.04);
  border: none;
  color: var(--clr-text);
  font-family: var(--ff-ui);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  cursor: pointer;
  text-align: left;
  transition: background .15s;
}
.ticket-panel__toggle:hover { background: rgba(201,162,39,.07); }
.ticket-panel__chevron {
  font-size: .7rem;
  color: var(--clr-muted-dim);
  transition: transform .2s ease;
  flex-shrink: 0;
}
.ticket-panel__body {
  padding: .75rem 1rem;
  border-top: 1px solid var(--clr-border-dim);
}

/* ── Canned responses grid ────────────────────────────────────────────── */
.ticket-canned-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .4rem;
}
.ticket-canned-btn {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .75rem;
  background: rgba(201,162,39,.05);
  border: 1px solid rgba(201,162,39,.15);
  border-radius: 4px;
  color: var(--clr-text);
  font-family: var(--ff-body);
  font-size: .78rem;
  text-align: left;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.ticket-canned-btn:hover {
  background: rgba(201,162,39,.10);
  border-color: rgba(201,162,39,.30);
  color: var(--clr-cyan);
}
.ticket-canned-btn__icon { color: var(--clr-muted-dim); flex-shrink: 0; font-size: .7rem; }

/* ── Variable panel ───────────────────────────────────────────────────── */
.ticket-var-list {
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(201,162,39,.2) transparent;
}
.ticket-var-list::-webkit-scrollbar { width: 4px; }
.ticket-var-list::-webkit-scrollbar-thumb { background: rgba(201,162,39,.2); border-radius: 2px; }

.ticket-var-group {
  margin-bottom: .5rem;
}
.ticket-var-group__label {
  font-family: var(--ff-mono);
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--clr-muted-dim);
  padding: .2rem .25rem;
  margin-bottom: .2rem;
}
.ticket-var-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .3rem .5rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  text-align: left;
  transition: background .12s, border-color .12s;
  margin-bottom: 2px;
}
.ticket-var-row:hover {
  background: rgba(201,162,39,.06);
  border-color: rgba(201,162,39,.2);
}
.ticket-var-row--unavailable { opacity: .45; }
.ticket-var-row__token {
  font-family: var(--ff-mono);
  font-size: .68rem;
  color: var(--clr-cyan);
  background: rgba(201,162,39,.08);
  padding: .1em .35em;
  border-radius: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.ticket-var-row__label {
  font-family: var(--ff-ui);
  font-size: .72rem;
  color: var(--clr-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ticket-var-row__preview {
  font-family: var(--ff-mono);
  font-size: .68rem;
  color: var(--clr-muted-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}

/* ── Attachment drop zone ─────────────────────────────────────────────── */
.ticket-attach-zone {
  position: relative;
  border: 1px dashed rgba(201,162,39,.25);
  border-radius: 6px;
  background: rgba(201,162,39,.02);
  transition: background .15s, border-color .15s;
  overflow: hidden;
}
.ticket-attach-zone--drag,
.ticket-attach-zone:focus-within {
  background: rgba(201,162,39,.06);
  border-color: rgba(201,162,39,.45);
}
.ticket-attach-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.ticket-attach-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  padding: 1.1rem;
  cursor: pointer;
  pointer-events: none;
  text-align: center;
}
.ticket-attach-label__icon {
  font-size: 1.4rem;
  color: var(--clr-muted-dim);
  margin-bottom: .15rem;
}
.ticket-attach-label__text {
  font-family: var(--ff-body);
  font-size: .83rem;
  color: var(--clr-muted);
}
.ticket-attach-label__hint {
  font-family: var(--ff-mono);
  font-size: .65rem;
  color: var(--clr-muted-dim);
  letter-spacing: .04em;
}
.ticket-attach-preview {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  padding: .5rem .75rem .6rem;
  border-top: 1px solid rgba(201,162,39,.1);
  background: rgba(9,9,11,.4);
}
.ticket-attach-chip-new {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-family: var(--ff-mono);
  font-size: .68rem;
  color: var(--clr-muted);
  background: rgba(201,162,39,.06);
  border: 1px solid rgba(201,162,39,.15);
  border-radius: 3px;
  padding: .2rem .5rem;
}

/* ── Character info grid (sidebar) ───────────────────────────────────── */
.ticket-char-info-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .15rem .75rem;
  font-family: var(--ff-mono);
  font-size: .72rem;
}
.ticket-char-info-grid span:nth-child(even) {
  color: var(--clr-text);
  font-weight: 600;
}

/* ── Ticket history ───────────────────────────────────────────────────── */
.ticket-history-list {
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(201,162,39,.15) transparent;
}
.ticket-history-list::-webkit-scrollbar { width: 3px; }
.ticket-history-list::-webkit-scrollbar-thumb { background: rgba(201,162,39,.15); border-radius: 2px; }

.ticket-history-item {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .55rem 1rem;
  border-bottom: 1px solid var(--clr-border-dim);
  position: relative;
}
.ticket-history-item:last-child { border-bottom: none; }
.ticket-history-item__icon {
  flex-shrink: 0;
  width: 1.4rem;
  height: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(201,162,39,.08);
  border: 1px solid rgba(201,162,39,.15);
  color: var(--clr-cyan);
  font-size: .65rem;
  margin-top: .05rem;
}
.ticket-history-item__detail {
  font-family: var(--ff-body);
  font-size: .78rem;
  color: var(--clr-text);
  line-height: 1.4;
}
.ticket-history-item__meta {
  font-family: var(--ff-mono);
  font-size: .65rem;
  color: var(--clr-muted-dim);
  margin-top: .1rem;
}

/* ── Bulk action bar ──────────────────────────────────────────────────── */
.bulk-action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1040;
  background: rgba(9, 9, 11, 0.96);
  border-top: 1px solid rgba(201, 162, 39, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 -4px 30px rgba(0,0,0,.5);
  padding: .6rem 1.25rem;
  transform: translateY(100%);
  transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.bulk-action-bar--visible {
  transform: translateY(0);
}
.bulk-action-bar__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
  max-width: 1400px;
  margin: 0 auto;
}
.bulk-action-bar__count {
  font-family: var(--ff-mono);
  font-size: .8rem;
  color: var(--clr-cyan);
  font-weight: 700;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-shrink: 0;
}
.bulk-action-bar__clear {
  background: none;
  border: none;
  color: var(--clr-muted-dim);
  font-size: .75rem;
  cursor: pointer;
  padding: 0 .1rem;
  line-height: 1;
}
.bulk-action-bar__clear:hover { color: var(--clr-text); }
.bulk-action-bar__sep {
  width: 1px;
  height: 1.5rem;
  background: rgba(201,162,39,.15);
  flex-shrink: 0;
}
.bulk-action-bar__group {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-shrink: 0;
}
.bulk-action-bar__label {
  font-family: var(--ff-mono);
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--clr-muted-dim);
  white-space: nowrap;
}
.bulk-action-bar__select {
  min-width: 130px;
  max-width: 180px;
  background-color: rgba(9,9,11,.8) !important;
  border-color: rgba(201,162,39,.2) !important;
}
.bulk-action-bar__btn {
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Sticky confirmation bar ──────────────────────────────────────────── */
.confirm-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1040;
  background: rgba(9, 9, 11, 0.97);
  border-top: 1px solid var(--clr-border);
  padding: .85rem 1.5rem;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
}

/* ── Homepage intro block ──────────────────────────────────────────────── */
.homepage-intro {
  position: relative;
  background: rgba(6, 4, 8, 0.82);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(201, 162, 39, 0.22);
  border-top: 2px solid transparent;
  border-radius: 2px;
  padding: 1.75rem 2rem;
  margin-bottom: 0;
  box-shadow:
    0 0 0 1px rgba(185, 28, 28, 0.12),
    0 8px 32px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(201, 162, 39, 0.08);
}
/* Red-to-gold gradient top bar */
.homepage-intro::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #7f1d1d 0%, #b91c1c 25%, #c9a227 50%, #b91c1c 75%, #7f1d1d 100%);
  border-radius: 2px 2px 0 0;
}
/* Left gold accent stripe */
.homepage-intro::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #c9a227 0%, #b91c1c 50%, rgba(127,29,29,0.3) 100%);
  border-radius: 2px 0 0 2px;
}
.homepage-intro__body {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--clr-text);
  font-family: var(--ff-body);
}
.homepage-intro__body h1,
.homepage-intro__body h2,
.homepage-intro__body h3 {
  font-family: var(--ff-lore);
  color: var(--clr-text);
  margin-top: 1rem;
}
.homepage-intro__body a {
  color: var(--clr-cyan);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.homepage-intro__body a:hover { color: var(--clr-text); }
.homepage-intro__empty {
  font-size: .875rem;
  color: var(--clr-muted);
  font-style: italic;
  font-family: var(--ff-mono);
  padding: .5rem 0;
}
.homepage-intro__edit-bar {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
  padding-top: .75rem;
  border-top: 1px solid var(--clr-border-dim);
}

/* ── Homepage / KB divider ─────────────────────────────────────────────── */
.homepage-kb-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 2rem 0;
  color: var(--clr-border-mid);
}
.homepage-kb-divider::before,
.homepage-kb-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--clr-border);
}
.homepage-kb-divider__gem {
  font-size: .78rem;
  color: var(--clr-cyan);
  opacity: .65;
  line-height: 1;
}

/* ── Knowledge Base ───────────────────────────────────────────────────── */

/* Hero / archive terminal */
.kb-hero {
  background: linear-gradient(135deg, rgba(5,7,14,0.92) 0%, rgba(9,9,11,0.88) 100%);
  border: 1px solid var(--clr-border);
  border-radius: 2px;
  padding: 3rem 2rem;
  margin-bottom: 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(12px);
}
.kb-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 120%, rgba(201,162,39,0.06) 0%, transparent 70%);
  pointer-events: none;
}
.kb-hero__title {
  font-family: var(--ff-lore);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--clr-text);
  margin-bottom: .4rem;
  position: relative;
  text-shadow: 0 0 30px rgba(201, 162, 39, 0.15);
}
.kb-hero__subtitle {
  color: var(--clr-muted);
  font-family: var(--ff-mono);
  font-size: .82rem;
  letter-spacing: .06em;
  margin-bottom: 1.75rem;
  position: relative;
}

/* Terminal search bar */
.kb-search-bar {
  max-width: 600px;
  margin: 0 auto;
  position: relative;
}
.hud-terminal-search {
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--clr-border);
  border-radius: 2px;
  overflow: hidden;
  transition: border-color .12s linear, box-shadow .12s linear;
}
.hud-terminal-search:focus-within {
  border-color: var(--clr-cyan);
  box-shadow: 0 0 16px var(--clr-cyan-glow);
}
.hud-prompt {
  padding: .65rem 1rem;
  font-family: var(--ff-mono);
  font-size: .8rem;
  color: var(--clr-cyan);
  white-space: nowrap;
  flex-shrink: 0;
  border-right: 1px solid var(--clr-border);
  letter-spacing: .04em;
}
.hud-prompt::after {
  content: '▌';
  display: inline-block;
  animation: blink-cursor 1s step-end infinite;
  margin-left: .15em;
  opacity: .7;
}
.hud-search-input {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--ff-mono) !important;
  font-size: .88rem !important;
  color: var(--clr-text) !important;
  padding: .65rem 1rem !important;
}
.hud-search-input:focus {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.hud-search-input::placeholder {
  color: var(--clr-muted-dim) !important;
  font-style: italic;
}
.hud-search-submit {
  padding: .65rem 1.2rem !important;
  border-radius: 0 !important;
  border-left: 1px solid var(--clr-border) !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  background: var(--clr-cyan-dim) !important;
  color: var(--clr-cyan) !important;
  font-family: var(--ff-ui) !important;
  font-size: .65rem !important;
  letter-spacing: .12em !important;
}
.hud-search-submit:hover {
  background: var(--clr-cyan-mid) !important;
  box-shadow: none !important;
}

/* KB section headings */
.kb-section-heading {
  font-family: var(--ff-ui);
  font-size: .65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--clr-cyan);
  margin-bottom: 1rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--clr-border);
}

/* Two-column home layout */
.kb-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 767px) {
  .kb-two-col { grid-template-columns: 1fr; }
}

/* Category grid */
.kb-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .85rem;
  margin-bottom: 2rem;
}
.kb-two-col .kb-category-grid {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  margin-bottom: 0;
}
.kb-category-card {
  display: flex;
  flex-direction: column;
  background: rgba(9, 9, 11, 0.75);
  backdrop-filter: blur(8px);
  border: 1px solid var(--clr-border);
  border-radius: 2px;
  padding: 1.15rem 1rem;
  text-decoration: none;
  color: var(--clr-text);
  transition: border-color .12s linear, background .12s linear, box-shadow .12s linear;
  position: relative;
  overflow: hidden;
}
.kb-category-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(201,162,39,0.06), transparent);
  transition: left .4s linear;
}
.kb-category-card:hover::after {
  left: 150%;
}
.kb-category-card:hover {
  border-color: var(--clr-cyan);
  background: var(--clr-cyan-dim);
  color: var(--clr-text);
  box-shadow: 0 4px 18px rgba(0,0,0,0.45), 0 0 12px var(--clr-cyan-glow);
}
.kb-category-card__icon {
  font-size: 1.4rem;
  margin-bottom: .55rem;
  color: var(--clr-cyan);
  opacity: .75;
}
.kb-category-card__name {
  font-family: var(--ff-lore);
  font-size: .88rem;
  font-weight: 700;
  margin-bottom: .3rem;
  line-height: 1.3;
}
.kb-category-card__meta {
  font-family: var(--ff-mono);
  font-size: .72rem;
  color: var(--clr-muted);
  margin-top: auto;
  padding-top: .45rem;
}
.kb-category-card__children { margin-top: .4rem; }
.kb-category-card__child-link {
  display: block;
  font-family: var(--ff-mono);
  font-size: .72rem;
  color: var(--clr-muted);
  text-decoration: none;
  padding: .1rem 0;
}
.kb-category-card__child-link:hover { color: var(--clr-cyan); }

/* Recent articles list */
.kb-articles-list {
  background: rgba(9, 9, 11, 0.70);
  backdrop-filter: blur(8px);
  border: 1px solid var(--clr-border);
  border-radius: 2px;
  overflow: hidden;
}
.kb-articles-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 1.1rem;
  text-decoration: none;
  color: var(--clr-text);
  border-bottom: 1px solid var(--clr-border-dim);
  transition: background .1s linear;
}
.kb-articles-list__item:last-child { border-bottom: none; }
.kb-articles-list__item:hover {
  background: var(--clr-cyan-dim);
  color: var(--clr-text);
}
.kb-articles-list__title {
  font-size: .9rem;
  font-weight: 600;
  font-family: var(--ff-body);
  margin-bottom: .12rem;
}
.kb-articles-list__cat {
  font-family: var(--ff-mono);
  font-size: .72rem;
  color: var(--clr-muted);
}
.kb-articles-list__date {
  font-family: var(--ff-mono);
  font-size: .72rem;
  color: var(--clr-muted-dim);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── KB Article page ──────────────────────────────────────────────────── */
.kb-article-layout {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}

.kb-toc-sidebar {
  width: 250px;
  flex-shrink: 0;
  position: sticky;
  top: 68px;
  max-height: calc(100vh - 88px);
  overflow-y: auto;
  background: rgba(9, 9, 11, 0.80);
  backdrop-filter: blur(10px);
  border: 1px solid var(--clr-border);
  border-radius: 2px;
  padding: 1rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(201,162,39,0.15) transparent;
}
.kb-toc-sidebar::-webkit-scrollbar { width: 4px; }
.kb-toc-sidebar::-webkit-scrollbar-thumb {
  background: rgba(201,162,39,0.15);
  border-radius: 0;
}
.kb-toc-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .75rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--clr-border);
}
.kb-toc-sidebar__title {
  font-family: var(--ff-ui);
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--clr-cyan);
  margin: 0;
}
.kb-toc-toggle {
  background: none;
  border: none;
  color: var(--clr-muted);
  cursor: pointer;
  padding: 0;
  font-size: .85rem;
  line-height: 1;
  transition: color .1s linear;
}
.kb-toc-toggle:hover { color: var(--clr-cyan); }
.kb-toc {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--ff-mono);
  font-size: .78rem;
}
.kb-toc li { margin-bottom: .04rem; }
.kb-toc a {
  display: block;
  padding: .22rem .4rem;
  color: var(--clr-muted);
  text-decoration: none;
  border-radius: 1px;
  border-left: 2px solid transparent;
  transition: color .1s linear, border-color .1s linear, background .1s linear;
  line-height: 1.4;
}
.kb-toc a:hover {
  color: var(--clr-text);
  background: rgba(201, 162, 39, 0.05);
}
.kb-toc a.kb-toc--active {
  color: var(--clr-cyan);
  border-left-color: var(--clr-cyan);
  background: var(--clr-cyan-dim);
}
.kb-toc--h2 > a { padding-left: 1rem; font-size: .75rem; color: var(--clr-muted-dim); }
.kb-toc--h2 > a:hover { color: var(--clr-muted); }
.kb-toc--h3 > a { padding-left: 1.8rem; font-size: .72rem; color: var(--clr-muted-dim); }
.kb-toc--h3 > a:hover { color: var(--clr-muted); }
.kb-toc-empty {
  color: var(--clr-muted);
  font-size: .75rem;
  font-style: italic;
  font-family: var(--ff-mono);
}

.kb-article-content {
  flex: 1;
  min-width: 0;
}
.kb-article-card {
  background: rgba(9, 9, 11, 0.80);
  backdrop-filter: blur(12px);
  border: 1px solid var(--clr-border);
  border-radius: 2px;
  overflow: hidden;
}
.kb-article-header {
  padding: 1.5rem 1.75rem 1.25rem;
  border-bottom: 1px solid var(--clr-border);
}
.kb-article-header h1 {
  font-size: 1.75rem;
  margin-bottom: .4rem;
  font-family: var(--ff-lore);
}
.kb-article-meta {
  color: var(--clr-muted);
  font-family: var(--ff-mono);
  font-size: .78rem;
}
.kb-article-prose {
  padding: 1.75rem;
  font-size: .96rem;
  line-height: 1.8;
  color: var(--clr-text);
  font-family: var(--ff-body);
}
.kb-article-prose h1,
.kb-article-prose h2,
.kb-article-prose h3,
.kb-article-prose h4 {
  margin-top: 1.75rem;
  margin-bottom: .65rem;
  scroll-margin-top: 76px;
}
.kb-article-prose h1:first-child,
.kb-article-prose h2:first-child,
.kb-article-prose h3:first-child { margin-top: 0; }
.kb-article-prose h1 {
  font-size: 1.45rem;
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--clr-border-dim);
}
.kb-article-prose h2 {
  font-size: 1.15rem;
  padding-left: 1rem;
  border-left: 2px solid var(--clr-cyan);
  color: var(--clr-muted);
}
.kb-article-prose h3 {
  font-size: 1rem;
  padding-left: 1.75rem;
  color: var(--clr-muted-dim);
  font-style: italic;
}
.kb-article-prose p { margin-bottom: 1rem; }
.kb-article-prose ul,
.kb-article-prose ol { padding-left: 1.6rem; margin-bottom: 1rem; }
.kb-article-prose li { margin-bottom: .3rem; }
.kb-article-prose table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
  font-family: var(--ff-mono);
  font-size: .85rem;
}
.kb-article-prose table th,
.kb-article-prose table td {
  padding: .4rem .7rem;
  border: 1px solid var(--clr-border-dim);
}
.kb-article-prose table th {
  background: rgba(9, 9, 11, 0.55);
  font-family: var(--ff-ui);
  font-size: .62rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--clr-cyan);
  border-bottom: 1px solid var(--clr-border);
}
.kb-article-prose table tr:nth-child(even) td {
  background: rgba(201, 162, 39, 0.02);
}
.kb-article-prose img {
  max-width: 100%;
  height: auto;
  border-radius: 2px;
  margin: .5rem 0;
}
.kb-article-prose a {
  color: var(--clr-cyan);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.kb-article-prose a:hover { color: var(--clr-text); }
.kb-article-prose blockquote {
  border-left: 2px solid var(--clr-cyan);
  margin: 1rem 0;
  padding: .5rem 1rem;
  background: var(--clr-cyan-dim);
  color: var(--clr-muted);
  font-style: italic;
}
.kb-article-prose pre {
  background: rgba(0, 0, 0, 0.60);
  border: 1px solid var(--clr-border);
  border-radius: 2px;
  padding: .75rem 1rem;
  overflow-x: auto;
  font-family: var(--ff-mono);
  font-size: .82rem;
  margin-bottom: 1rem;
}
.kb-article-prose code { font-size: .85em; }

.kb-toc-sidebar.kb-toc--collapsed .kb-toc,
.kb-toc-sidebar.kb-toc--collapsed .kb-toc-empty { display: none; }
.kb-toc-sidebar.kb-toc--collapsed { padding-bottom: .75rem; }

@media (max-width: 991.98px) {
  .kb-article-layout { flex-direction: column; }
  .kb-toc-sidebar {
    width: 100%;
    position: static;
    max-height: 280px;
  }
}

/* KB Search results */
.kb-search-result {
  background: rgba(9, 9, 11, 0.75);
  backdrop-filter: blur(8px);
  border: 1px solid var(--clr-border);
  border-radius: 2px;
  padding: 1.1rem 1.4rem;
  margin-bottom: .8rem;
  transition: border-color .12s linear, box-shadow .12s linear;
}
.kb-search-result:hover {
  border-color: var(--clr-cyan);
  box-shadow: 0 0 12px var(--clr-cyan-glow);
}
.kb-search-result__title {
  font-family: var(--ff-lore);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: .3rem;
}
.kb-search-result__title a {
  color: var(--clr-text);
  text-decoration: none;
}
.kb-search-result__title a:hover { color: var(--clr-cyan); }
.kb-search-result__meta {
  font-family: var(--ff-mono);
  font-size: .72rem;
  color: var(--clr-muted);
  margin-bottom: .5rem;
}
.kb-search-result__excerpt {
  font-size: .87rem;
  color: var(--clr-muted);
  line-height: 1.6;
  font-family: var(--ff-body);
}
.kb-search-no-results {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--clr-muted);
  font-family: var(--ff-ui);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ── Character Simulator ──────────────────────────────────────────────────
 * Two-panel live build tool.
 */
.sim-right-sticky {
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  scrollbar-width: thin;
}
.sim-stat-pill {
  background: rgba(9, 9, 11, 0.75);
  border: 1px solid var(--clr-border);
  border-radius: 2px;
  padding: .5rem .25rem;
}
.sim-stat-label {
  font-family: var(--ff-ui);
  font-size: .58rem;
  color: var(--clr-muted);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: .12rem;
}
.sim-stat-value {
  font-family: var(--ff-lore);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--clr-text);
  line-height: 1;
}
.sim-output-textarea {
  background: var(--clr-input-bg);
  color: var(--clr-muted);
  font-family: var(--ff-mono);
  font-size: .78rem;
  resize: vertical;
  border-color: var(--clr-border);
  border-radius: 2px;
}
.sim-output-textarea:focus {
  box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.12);
  border-color: var(--clr-cyan);
}
.sim-selected-list {
  max-height: 180px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.sim-sel-group { padding: .25rem 0; }
.sim-sel-cat-label {
  font-family: var(--ff-ui);
  font-size: .58rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--clr-muted);
  padding: .3rem .75rem .1rem;
  opacity: .7;
}
.sim-sel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .2rem .75rem;
  font-family: var(--ff-mono);
  font-size: .82rem;
}
.sim-sel-name { flex: 1; color: var(--clr-text); }
.sim-sel-qty  { font-size: .65rem; margin-left: .35rem; vertical-align: middle; }
.sim-sel-cost { color: var(--clr-muted); font-size: .75rem; white-space: nowrap; margin-left: .5rem; }
.sim-upgrade-group {
  border-bottom: 1px solid var(--clr-border-dim);
}
.sim-upgrade-group:last-child { border-bottom: none; }
.sim-upgrade-group-header {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .75rem;
  font-family: var(--ff-ui);
  font-size: .58rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--clr-cyan);
  background: rgba(201, 162, 39, 0.03);
  border-bottom: 1px solid var(--clr-border-dim);
  cursor: default;
}
.sim-upgrade-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  transition: background .1s linear;
}
.sim-upgrade-row:last-child { border-bottom: none; }
.sim-upgrade-row:hover { background: rgba(201, 162, 39, 0.04); }
.sim-upgrade-row--selected { background: rgba(201, 162, 39, 0.06); }
.sim-upgrade-row--selected:hover { background: rgba(201, 162, 39, 0.09); }
.sim-upgrade-controls {
  display: flex;
  align-items: center;
  gap: .2rem;
  flex-shrink: 0;
}
.sim-btn-add,
.sim-btn-remove {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  border-radius: 2px;
  line-height: 1;
}
.sim-btn-add    { border-color: rgba(34, 197, 94, 0.30); color: var(--clr-emerald); }
.sim-btn-add:hover { background: rgba(34, 197, 94, 0.12); border-color: var(--clr-emerald); }
.sim-btn-remove { border-color: var(--clr-border-dim); color: var(--clr-muted); }
.sim-btn-remove:hover { background: rgba(185, 28, 28, 0.10); border-color: rgba(185, 28, 28, 0.40); color: var(--clr-crimson); }
.sim-upgrade-qty {
  min-width: 1.5rem;
  text-align: center;
  font-family: var(--ff-mono);
  font-size: .78rem;
  font-weight: 700;
  color: var(--clr-text);
}
.sim-btn-placeholder {
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  flex-shrink: 0;
}
.sim-upgrade-info {
  flex: 1;
  min-width: 0;
}
.sim-upgrade-name {
  font-family: var(--ff-body);
  font-size: .85rem;
  color: var(--clr-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.sim-upgrade-meta {
  font-family: var(--ff-mono);
  font-size: .68rem;
  color: var(--clr-muted-dim);
}
.sim-upgrade-cost { flex-shrink: 0; }
.sim-cost-badge {
  background: rgba(201, 162, 39, 0.06);
  color: var(--clr-muted);
  font-size: .65rem;
  font-weight: 400;
  border: 1px solid var(--clr-border);
  font-family: var(--ff-mono);
  border-radius: 2px;
}

@media (max-width: 991.98px) {
  .sim-right-sticky {
    position: static;
    max-height: none;
  }
}

/* ── Changelog ───────────────────────────────────────────────────────────── */

/* Dark backdrop for the whole content column */
.changelog-column {
  background: rgba(6, 5, 8, 0.72);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(201, 162, 39, 0.10);
  border-radius: 3px;
  padding: 1.75rem 1.5rem 2rem;
}

/* Title wrapper */
.changelog-title-wrap {
  text-align: center;
  padding: .25rem 0 .15rem;
  position: relative;
}

/* Ornamental bar above the title: flanking lines + central diamond */
.changelog-title-ornament-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin-bottom: .65rem;
}
.changelog-title-ornament-bar::before,
.changelog-title-ornament-bar::after {
  content: '';
  flex: 1;
  max-width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #b91c1c 40%, #c9a227 100%);
}
.changelog-title-ornament-bar::after {
  background: linear-gradient(270deg, transparent, #b91c1c 40%, #c9a227 100%);
}
.changelog-title-diamond {
  order: 2;
  font-size: .6rem;
  background: linear-gradient(135deg, #c9a227, #f8d77a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 5px rgba(201, 162, 39, 0.7));
  flex-shrink: 0;
}
.changelog-title-ornament-bar::before { order: 1; }
.changelog-title-ornament-bar::after  { order: 3; }

/* Page title */
.changelog-page-title {
  font-family: var(--ff-lore);
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-align: center;
  background: linear-gradient(135deg, #7f1d1d 0%, #b91c1c 18%, #c9a227 42%, #f8d77a 55%, #c9a227 68%, #b91c1c 85%, #7f1d1d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 22px rgba(201, 162, 39, 0.45)) drop-shadow(0 0 6px rgba(185, 28, 28, 0.5));
  margin-bottom: .3rem;
  position: relative;
}
/* Flanking ornamental glyphs */
.changelog-page-title::before,
.changelog-page-title::after {
  content: '⸸';
  display: inline-block;
  font-size: .55em;
  vertical-align: middle;
  -webkit-text-fill-color: #c9a227;
  background: none;
  filter: drop-shadow(0 0 6px rgba(201, 162, 39, 0.6));
  margin: 0 .55em;
}

/* Subtitle tagline */
.changelog-title-sub {
  font-family: var(--ff-ui);
  font-size: .52rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(201, 162, 39, 0.45);
  margin-top: .15rem;
}

/* Version badge — sits below the page title */
.changelog-version-badge {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: rgba(9, 9, 11, 0.90);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(201, 162, 39, 0.5);
  border-radius: 2px;
  padding: .4rem 1.1rem;
  box-shadow: 0 0 14px rgba(201, 162, 39, 0.18);
}
.changelog-version-label {
  font-family: var(--ff-ui);
  font-size: .55rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--clr-muted);
}
.changelog-version-number {
  font-family: var(--ff-mono);
  font-size: 1.25rem;
  font-weight: 500;
  background: linear-gradient(90deg, #c9a227 0%, #f8d77a 50%, #c9a227 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 8px rgba(201, 162, 39, 0.4));
  letter-spacing: .08em;
}

/* Divider under the header block */
.changelog-header-divider {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #b91c1c 20%, #c9a227 50%, #b91c1c 80%, transparent 100%);
  margin: 1.4rem 0 2rem;
  opacity: .7;
}

/* Timeline: no vertical line — full-width date bars instead */
.changelog-timeline {
  position: relative;
}
.changelog-date-group {
  margin-bottom: 1.8rem;
}

/* Full-width date bar */
.changelog-date-marker {
  display: flex;
  align-items: center;
  gap: .8rem;
  background: linear-gradient(90deg, rgba(127,29,29,0.85) 0%, rgba(20,8,8,0.95) 55%, rgba(12,8,10,0.7) 100%);
  border-left: 3px solid #c9a227;
  border-top: 1px solid rgba(201, 162, 39, 0.25);
  border-bottom: 1px solid rgba(185, 28, 28, 0.25);
  border-right: none;
  padding: .45rem .9rem;
  margin-bottom: .7rem;
  box-shadow: inset 0 0 24px rgba(185, 28, 28, 0.08), 0 0 12px rgba(201, 162, 39, 0.06);
}
.changelog-date-text {
  font-family: var(--ff-lore);
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #f8d77a 0%, #c9a227 60%, #e87040 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.changelog-date-marker::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(201,162,39,0.3) 0%, transparent 100%);
  margin-left: .4rem;
}

/* Entry cards */
.changelog-entry {
  background: rgba(12, 8, 10, 0.88);
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 2px solid rgba(185, 28, 28, 0.55);
  border-radius: 0 2px 2px 0;
  padding: .85rem 1.1rem;
  margin-bottom: .55rem;
  transition: border-left-color .15s, box-shadow .15s;
}
.changelog-entry:hover {
  border-left-color: #c9a227;
  box-shadow: 0 0 12px rgba(201, 162, 39, 0.09);
}
.changelog-entry-title {
  font-family: var(--ff-lore);
  font-size: .95rem;
  font-weight: 700;
  margin-bottom: .35rem;
  color: #f8d77a;
  letter-spacing: .04em;
}
.changelog-entry-details {
  font-family: var(--ff-body);
  font-size: .85rem;
  color: var(--clr-muted);
  line-height: 1.65;
}
.changelog-entry-details ul,
.changelog-entry-details ol {
  padding-left: 1.3rem;
  margin-bottom: 0;
}
.changelog-entry-details li {
  margin-bottom: .28rem;
}
.changelog-entry-details li:last-child {
  margin-bottom: 0;
}
.changelog-entry-details strong {
  color: #e8c96a;
  font-weight: 600;
}

/* ── Character sheet specific styles (.csh-*) ───────────────────────────── */
.csh-name {
  font-family: var(--ff-lore) !important;
  font-size: 1.7rem !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  color: var(--clr-text) !important;
  text-shadow: 0 0 20px rgba(201, 162, 39, 0.15) !important;
  margin: 0 !important;
}
.csh-player {
  font-family: var(--ff-mono) !important;
  font-size: .68rem !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  color: var(--clr-muted-dim) !important;
}
.csh-player strong { color: var(--clr-muted) !important; }

/* Identity badges */
.csh-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: .3rem !important;
  font-family: var(--ff-ui) !important;
  font-size: .6rem !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  border-radius: 2px !important;
  padding: .22em .75em !important;
  white-space: nowrap !important;
}
.csh-badge-race  {
  background: var(--clr-crimson-dim) !important;
  border: 1px solid rgba(185, 28, 28, 0.35) !important;
  color: var(--clr-crimson) !important;
}
.csh-badge-class {
  background: var(--clr-cyan-dim) !important;
  border: 1px solid rgba(201, 162, 39, 0.30) !important;
  color: var(--clr-cyan) !important;
}
.csh-badge-spec {
  background: rgba(100, 116, 139, 0.10) !important;
  border: 1px solid rgba(100, 116, 139, 0.25) !important;
  color: var(--clr-muted) !important;
}

/* Ornamental divider */
.csh-divider {
  display: flex !important;
  align-items: center !important;
  gap: .6rem !important;
  margin: .7rem 0 .8rem !important;
}
.csh-divider-line {
  flex: 1 !important;
  height: 1px !important;
}
.csh-divider-line-l { background: linear-gradient(to right, transparent, var(--clr-border)) !important; }
.csh-divider-line-r { background: linear-gradient(to left,  transparent, var(--clr-border)) !important; }
.csh-divider-gem {
  font-size: .55rem !important;
  color: var(--clr-cyan) !important;
  opacity: .55 !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

/* Section labels */
.csh-section-lbl {
  display: block !important;
  font-family: var(--ff-ui) !important;
  font-size: .58rem !important;
  text-transform: uppercase !important;
  letter-spacing: .14em !important;
  color: var(--clr-muted-dim) !important;
  margin-bottom: .35rem !important;
}

/* Telemetry stat boxes */
.csh-stat {
  background: rgba(9, 9, 11, 0.78) !important;
  border: 1px solid var(--clr-border) !important;
  border-radius: 2px !important;
  padding: .5rem .85rem !important;
  display: flex !important;
  align-items: center !important;
  gap: .75rem !important;
  backdrop-filter: blur(8px);
  transition: border-color .12s linear, box-shadow .12s linear;
}
.csh-stat:hover {
  border-color: rgba(201, 162, 39, 0.30);
  box-shadow: 0 0 10px rgba(201, 162, 39, 0.07);
}
/* Stat icon */
.csh-stat-icon {
  font-size: 1.75rem !important;
  display: block !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  opacity: .75 !important;
}
/* Stat body — value + label grouped to the right of the icon */
.csh-stat-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
/* Stat value */
.csh-stat-val {
  font-family: var(--ff-mono) !important;
  font-size: 1.45rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  color: var(--clr-text) !important;
}
/* Colored value overrides — retain semantic color hints */
.csh-stat-val.text-success { color: var(--clr-emerald) !important; }
.csh-stat-val.text-info    { color: var(--clr-sky) !important; }
.csh-stat-val.text-warning { color: var(--clr-amber) !important; }
/* Stat label */
.csh-stat-lbl {
  font-family: var(--ff-ui) !important;
  font-size: .55rem !important;
  text-transform: uppercase !important;
  letter-spacing: .09em !important;
  color: var(--clr-muted) !important;
  margin-top: .12rem !important;
}
/* Stat sub (regen etc.) */
.csh-stat-sub {
  font-family: var(--ff-mono) !important;
  font-size: .55rem !important;
  color: var(--clr-muted-dim) !important;
  margin-top: .06rem !important;
}

/* Card top border */
#csh-card { border-top: 2px solid var(--clr-cyan) !important; }

/* ── Spellcasting tab ───────────────────────────────────────────────────── */
.sc-column {
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--clr-border);
  border-radius: 2px;
  padding: .75rem .9rem;
  height: 100%;
}
.sc-col-header {
  border-bottom: 1px solid rgba(201, 162, 39, 0.25);
  padding-bottom: .5rem;
  margin-bottom: .65rem;
}
.sc-col-name {
  font-family: var(--ff-lore);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--clr-text);
  display: block;
}
.sc-col-school {
  display: inline-block;
  margin-top: .35rem;
  font-size: .65rem;
  font-weight: 700;
  font-family: var(--ff-ui);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--clr-cyan);
  background: var(--clr-cyan-dim);
  border: 1px solid rgba(201, 162, 39, 0.35);
  border-radius: 999px;
  padding: .14rem .65rem;
  box-shadow: 0 0 6px var(--clr-cyan-glow);
}
.sc-level-row {
  display: flex;
  align-items: center;
  padding: .18rem 0;
  gap: .45rem;
}
.sc-level-label {
  font-family: var(--ff-mono);
  font-size: .68rem;
  color: var(--clr-muted);
  min-width: 2.6rem;
  text-align: right;
  flex-shrink: 0;
}
.sc-pips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.sc-edit-panel {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--clr-border);
  border-radius: 2px;
  padding: .9rem 1rem;
}

/* ── Spellcasting gem pips ──────────────────────────────────────────────── */
.slot-gem {
  display: inline-block;
  width: .65rem;
  height: .65rem;
  background: var(--clr-cyan) !important;
  box-shadow: 0 0 6px var(--clr-cyan-glow) !important;
  transform: rotate(45deg);
  border-radius: 1px;
  opacity: .85;
}

/* ── Skill tree node states ─────────────────────────────────────────────── */
.st-node-available {
  border-color: rgba(201, 162, 39, 0.40) !important;
  background: var(--clr-cyan-dim) !important;
}
.st-node-owned {
  border-color: rgba(201, 162, 39, 0.25) !important;
  background: rgba(201, 162, 39, 0.06) !important;
}
.st-node-maxed {
  border-color: rgba(34, 197, 94, 0.30) !important;
  background: rgba(34, 197, 94, 0.06) !important;
}
.st-node-locked {
  border-color: var(--clr-border-dim) !important;
  background: rgba(9, 9, 11, 0.50) !important;
  opacity: .65;
}
.st-node-pending {
  border-color: rgba(245, 158, 11, 0.40) !important;
  background: rgba(245, 158, 11, 0.06) !important;
}
.st-node-sold-back {
  border-color: var(--clr-border-dim) !important;
  background: rgba(9, 9, 11, 0.40) !important;
  opacity: .5;
}

/* ── Skill tree tab pane ────────────────────────────────────────────────── */
#tab-skilltree {
  background: rgba(6, 6, 16, 0.90);
  border-radius: 0 0 2px 2px;
  margin: -1rem;
  padding: 1rem;
}
#tab-skilltree .skill-tree-node.card {
  background-color: rgba(9, 9, 16, 0.97) !important;
}
#tab-skilltree .skill-tree-path .text-center {
  background: rgba(0, 0, 0, 0.40);
  border-radius: 2px;
  padding: .4rem .5rem;
  margin-bottom: .5rem !important;
}

/* ── Settings page ──────────────────────────────────────────────────────── */
.settings-active-section {
  border-left: 3px solid var(--clr-cyan) !important;
  box-shadow: 0 0 18px rgba(201, 162, 39, 0.12) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   HOME PAGE — Tabs (Dashboard / Rulebook)
   ════════════════════════════════════════════════════════════════════════════ */
.hp-tab-nav {
  display: flex;
  gap: .25rem;
  border-bottom: 1px solid var(--clr-border);
  padding-bottom: 0;
  margin-bottom: 1.25rem !important;
}
.hp-tab-btn {
  font-family: var(--ff-ui);
  font-size: .78rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--clr-muted) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 3px 3px 0 0 !important;
  padding: .4rem .85rem !important;
  transition: color .15s, border-color .15s, background .15s;
  margin-bottom: -1px;
}
.hp-tab-btn:hover {
  color: var(--clr-text) !important;
  border-color: var(--clr-border) var(--clr-border) transparent !important;
  background: rgba(255,255,255,.03) !important;
}
.hp-tab-btn.active {
  color: var(--clr-cyan) !important;
  border-color: var(--clr-border) var(--clr-border) var(--clr-bg) !important;
  background: var(--clr-bg) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   HOME PAGE — Quick-access grid
   ════════════════════════════════════════════════════════════════════════════ */
.hp-quickaccess-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: .6rem;
  margin-bottom: 1.25rem;
}
.hp-quickaccess-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: .75rem .5rem;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: 3px;
  text-decoration: none !important;
  color: var(--clr-text) !important;
  transition: border-color .15s, box-shadow .15s, background .15s;
  cursor: pointer;
}
.hp-quickaccess-card:hover {
  border-color: var(--clr-cyan);
  box-shadow: 0 0 10px var(--clr-cyan-glow);
  background: var(--clr-cyan-dim);
  color: var(--clr-cyan) !important;
}
.hp-quickaccess-card__icon {
  font-size: 1.45rem;
  line-height: 1;
  opacity: .75;
}
.hp-quickaccess-card:hover .hp-quickaccess-card__icon { opacity: 1; }
.hp-quickaccess-card__label {
  font-family: var(--ff-ui);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--clr-muted);
}
.hp-quickaccess-card:hover .hp-quickaccess-card__label { color: var(--clr-cyan); }
.hp-quickaccess-card--staff {
  border-color: rgba(255,193,7,.2);
}
.hp-quickaccess-card--staff:hover {
  border-color: rgba(255,193,7,.6);
  box-shadow: 0 0 10px rgba(255,193,7,.15);
  background: rgba(255,193,7,.06);
  color: #ffc107 !important;
}
.hp-quickaccess-card--staff:hover .hp-quickaccess-card__label { color: #ffc107; }

/* ════════════════════════════════════════════════════════════════════════════
   HOME PAGE — Character summary strip
   ════════════════════════════════════════════════════════════════════════════ */
.hp-char-summary {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem .9rem;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: 3px;
  text-decoration: none !important;
  color: var(--clr-text) !important;
  margin-bottom: 1rem;
  transition: border-color .15s, box-shadow .15s;
}
.hp-char-summary:hover {
  border-color: var(--clr-cyan);
  box-shadow: 0 0 10px var(--clr-cyan-glow);
}
.hp-char-summary__icon {
  font-size: 1.5rem;
  color: var(--clr-muted);
  flex-shrink: 0;
}
.hp-char-summary:hover .hp-char-summary__icon { color: var(--clr-cyan); }
.hp-char-summary__body {
  flex: 1;
  min-width: 0;
}
.hp-char-summary__name {
  font-family: var(--ff-lore);
  font-size: .95rem;
  color: var(--clr-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hp-char-summary__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin-top: .2rem;
}
.hp-char-summary__xp { flex-shrink: 0; }
.hp-char-summary__arrow {
  flex-shrink: 0;
  font-size: 1rem;
}

/* ════════════════════════════════════════════════════════════════════════════
   HOME PAGE — Rulebook chapter list (Table of Contents)
   ════════════════════════════════════════════════════════════════════════════ */
.kb-chapter-list {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.kb-chapter-row {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .6rem .8rem;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: 3px;
  text-decoration: none !important;
  color: var(--clr-text) !important;
  transition: border-color .15s, box-shadow .15s;
}
.kb-chapter-row:hover {
  border-color: var(--clr-cyan);
  box-shadow: 0 0 8px var(--clr-cyan-glow);
}
.kb-chapter-row__num {
  font-family: var(--ff-mono);
  font-size: .72rem;
  color: var(--clr-muted);
  min-width: 1.4rem;
  flex-shrink: 0;
  padding-top: .15rem;
  text-align: right;
}
.kb-chapter-row__body {
  flex: 1;
  min-width: 0;
}
.kb-chapter-row__name {
  font-family: var(--ff-lore);
  font-size: .95rem;
  color: var(--clr-text);
  display: block;
}
.kb-chapter-row:hover .kb-chapter-row__name { color: var(--clr-cyan); }
.kb-chapter-row__meta {
  font-family: var(--ff-mono);
  font-size: .68rem;
  color: var(--clr-muted);
  margin-top: .15rem;
  display: block;
}
.kb-chapter-row__children {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-top: .35rem;
}
.kb-chapter-row__child {
  font-family: var(--ff-mono);
  font-size: .65rem;
  color: var(--clr-muted);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--clr-border-dim);
  border-radius: 2px;
  padding: .1rem .45rem;
}
.kb-chapter-row__arrow {
  font-size: .85rem;
  color: var(--clr-muted);
  flex-shrink: 0;
  align-self: center;
}

/* ════════════════════════════════════════════════════════════════════════════
   ARTICLE PAGE — Chapter navigator sidebar
   ════════════════════════════════════════════════════════════════════════════ */
.kb-chapter-nav {
  /* inherits .kb-toc-sidebar positioning/scroll behaviour */
}
.kb-chapter-nav__cat-header {
  padding: .5rem .75rem .4rem;
  border-bottom: 1px solid var(--clr-border-dim);
  margin-bottom: .3rem;
}
.kb-chapter-nav__cat-label {
  display: block;
  font-family: var(--ff-mono);
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--clr-muted);
  margin-bottom: .15rem;
}
.kb-chapter-nav__cat-name {
  font-family: var(--ff-lore);
  font-size: .85rem;
  color: var(--clr-text) !important;
  text-decoration: none !important;
  line-height: 1.2;
  display: block;
}
.kb-chapter-nav__cat-name:hover { color: var(--clr-cyan) !important; }

.kb-chapter-nav__articles {
  list-style: none;
  padding: 0 .4rem;
  margin: 0 0 .25rem;
}
.kb-chapter-nav__articles li { margin: 0; }
.kb-chapter-nav__article {
  display: block;
  font-family: var(--ff-mono);
  font-size: .72rem;
  color: var(--clr-muted) !important;
  text-decoration: none !important;
  padding: .26rem .5rem;
  border-radius: 2px;
  border-left: 2px solid transparent;
  line-height: 1.4;
  transition: color .12s, border-color .12s, background .12s;
}
.kb-chapter-nav__article:hover {
  color: var(--clr-text) !important;
  background: rgba(255,255,255,.04);
}
.kb-chapter-nav__article--active {
  color: var(--clr-cyan) !important;
  border-left-color: var(--clr-cyan) !important;
  background: var(--clr-cyan-dim) !important;
  font-weight: 600;
}
.kb-chapter-nav__divider {
  margin: .5rem .75rem .35rem;
  border-top: 1px solid var(--clr-border-dim);
  padding-top: .45rem;
}
.kb-chapter-nav__toc-label {
  display: block;
  font-family: var(--ff-mono);
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--clr-muted);
  padding: 0 .15rem;
}

/* ════════════════════════════════════════════════════════════════════════════
   ARTICLE PAGE — See Also panel
   ════════════════════════════════════════════════════════════════════════════ */
.kb-see-also {
  border-top: 1px solid var(--clr-border-dim);
  margin-top: 1.75rem;
  padding-top: 1.1rem;
}
.kb-see-also__heading {
  font-family: var(--ff-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--clr-muted);
  margin-bottom: .6rem;
}
.kb-see-also__links {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.kb-see-also__item {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  text-decoration: none !important;
  color: var(--clr-text) !important;
  font-family: var(--ff-ui);
  font-size: .83rem;
  transition: color .12s;
}
.kb-see-also__item:hover { color: var(--clr-cyan) !important; }
.kb-see-also__item .bi-arrow-right-short {
  color: var(--clr-cyan);
  font-size: 1rem;
}
.kb-see-also__title { flex: 1; }
.kb-see-also__cat {
  font-family: var(--ff-mono);
  font-size: .65rem;
  color: var(--clr-muted);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--clr-border-dim);
  border-radius: 2px;
  padding: .1rem .4rem;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════════════════
   ARTICLE PAGE — Prev / next article navigation bar
   ════════════════════════════════════════════════════════════════════════════ */
.kb-article-nav {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  margin-top: 1rem;
}
.kb-article-nav__btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem .8rem;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: 3px;
  font-family: var(--ff-mono);
  font-size: .73rem;
  color: var(--clr-muted) !important;
  text-decoration: none !important;
  max-width: 48%;
  transition: border-color .15s, color .15s, box-shadow .15s;
}
.kb-article-nav__btn:hover {
  border-color: var(--clr-cyan);
  color: var(--clr-cyan) !important;
  box-shadow: 0 0 6px var(--clr-cyan-glow);
}
.kb-article-nav__btn span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kb-article-nav__btn--prev { margin-right: auto; }
.kb-article-nav__btn--next { margin-left: auto; text-align: right; }

/* ════════════════════════════════════════════════════════════════════════════
   ARTICLE PAGE — Callout blocks (Rule / Example / Staff Note / Warning)
   ════════════════════════════════════════════════════════════════════════════ */
.kb-callout {
  border-left: 3px solid;
  border-radius: 0 3px 3px 0;
  padding: .75rem 1rem .75rem 1.1rem;
  margin: 1rem 0;
  font-family: var(--ff-body);
  position: relative;
}
.kb-callout::before {
  display: block;
  font-family: var(--ff-mono);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: .35rem;
}
/* Rule / Mechanic */
.kb-callout--rule {
  border-color: var(--clr-cyan);
  background: rgba(201, 162, 39, 0.06);
}
.kb-callout--rule::before {
  content: 'Rule / Mechanic';
  color: var(--clr-cyan);
}
/* Example */
.kb-callout--example {
  border-color: #198754;
  background: rgba(25, 135, 84, 0.07);
}
.kb-callout--example::before {
  content: 'Example';
  color: #4caf50;
}
/* Staff Note */
.kb-callout--staff {
  border-color: #ffc107;
  background: rgba(255, 193, 7, 0.07);
}
.kb-callout--staff::before {
  content: 'Staff Note';
  color: #ffc107;
}
/* Warning / Exception */
.kb-callout--warning {
  border-color: #dc3545;
  background: rgba(220, 53, 69, 0.07);
}
.kb-callout--warning::before {
  content: 'Warning / Exception';
  color: #f87171;
}

/* ════════════════════════════════════════════════════════════════════════════
   RULEBOOK — Home tab header
   ════════════════════════════════════════════════════════════════════════════ */
.rl-home-header {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .8rem 1rem;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-left: 3px solid var(--clr-cyan);
  border-radius: 3px;
  margin-bottom: 1.1rem;
  box-shadow: 0 0 14px rgba(201, 162, 39, 0.06);
}
.rl-home-header__icon {
  font-size: 1.75rem;
  color: var(--clr-cyan);
  opacity: .75;
  flex-shrink: 0;
}
.rl-home-header__body { flex: 1; min-width: 0; }
.rl-home-header__title {
  font-family: var(--ff-lore);
  font-size: 1rem;
  color: var(--clr-text);
  line-height: 1.25;
}
.rl-home-header__meta {
  font-family: var(--ff-mono);
  font-size: .68rem;
  color: var(--clr-muted);
  margin-top: .15rem;
  letter-spacing: .04em;
}
.rl-home-header__btn {
  flex-shrink: 0;
  font-family: var(--ff-ui);
  font-size: .72rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--clr-cyan) !important;
  text-decoration: none !important;
  border: 1px solid rgba(201, 162, 39, 0.4);
  border-radius: 2px;
  padding: .32rem .75rem;
  background: var(--clr-cyan-dim);
  transition: background .15s, box-shadow .15s;
  white-space: nowrap;
}
.rl-home-header__btn:hover {
  background: rgba(201, 162, 39, 0.18);
  box-shadow: 0 0 10px var(--clr-cyan-glow);
}

/* ════════════════════════════════════════════════════════════════════════════
   RULEBOOK — ToC page (root category / landing)
   ════════════════════════════════════════════════════════════════════════════ */
.rl-toc-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--clr-border-dim);
}
.rl-toc-header__gem {
  font-size: 2.2rem;
  color: var(--clr-cyan);
  opacity: .7;
  flex-shrink: 0;
  padding-top: .1rem;
}
.rl-toc-header__body { flex: 1; }
.rl-toc-header__eyebrow {
  font-family: var(--ff-mono);
  font-size: .65rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--clr-muted);
  margin-bottom: .25rem;
}
.rl-toc-header__title {
  font-family: var(--ff-lore);
  font-size: 1.8rem;
  color: var(--clr-text);
  line-height: 1.1;
  margin: 0 0 .3rem;
}
.rl-toc-header__meta {
  font-family: var(--ff-mono);
  font-size: .7rem;
  color: var(--clr-muted);
  letter-spacing: .04em;
}

/* ToC list rows */
.rl-toc-list {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin-bottom: 1.5rem;
}
.rl-toc-row {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .7rem 1rem;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: 3px;
  text-decoration: none !important;
  color: var(--clr-text) !important;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.rl-toc-row:hover {
  border-color: var(--clr-cyan);
  box-shadow: 0 0 10px var(--clr-cyan-glow);
  background: var(--clr-cyan-dim);
}
.rl-toc-row__num {
  font-family: var(--ff-mono);
  font-size: .85rem;
  font-weight: 700;
  color: var(--clr-cyan);
  min-width: 1.6rem;
  text-align: center;
  flex-shrink: 0;
}
.rl-toc-row__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .12rem;
}
.rl-toc-row__name {
  font-family: var(--ff-lore);
  font-size: 1rem;
  color: var(--clr-text);
  line-height: 1.3;
}
.rl-toc-row:hover .rl-toc-row__name { color: var(--clr-cyan); }
.rl-toc-row__meta {
  font-family: var(--ff-mono);
  font-size: .66rem;
  color: var(--clr-muted);
  letter-spacing: .03em;
}
.rl-toc-row__arrow {
  color: var(--clr-muted);
  font-size: .85rem;
  flex-shrink: 0;
}
.rl-toc-row:hover .rl-toc-row__arrow { color: var(--clr-cyan); }

/* ════════════════════════════════════════════════════════════════════════════
   RULEBOOK — Chapter page
   ════════════════════════════════════════════════════════════════════════════ */

/* Top prev/next nav bar */
.rl-chapter-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: 1.25rem;
  padding: .45rem .6rem;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: 3px;
}
.rl-chapter-nav-bar__btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-family: var(--ff-mono);
  font-size: .7rem;
  color: var(--clr-muted) !important;
  text-decoration: none !important;
  padding: .2rem .4rem;
  border-radius: 2px;
  max-width: 35%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .12s;
}
.rl-chapter-nav-bar__btn:hover { color: var(--clr-cyan) !important; }
.rl-chapter-nav-bar__btn--next { text-align: right; }
.rl-chapter-nav-bar__toc {
  font-family: var(--ff-ui);
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--clr-muted) !important;
  text-decoration: none !important;
  padding: .2rem .5rem;
  border: 1px solid var(--clr-border-dim);
  border-radius: 2px;
  transition: color .12s, border-color .12s;
  white-space: nowrap;
}
.rl-chapter-nav-bar__toc:hover {
  color: var(--clr-cyan) !important;
  border-color: var(--clr-cyan);
}

/* Chapter header block */
.rl-chapter-header {
  margin-bottom: 1.5rem;
}
.rl-chapter-header__eyebrow {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .35rem;
}
.rl-chapter-header__num {
  font-family: var(--ff-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--clr-cyan);
}
.rl-chapter-header__title {
  font-family: var(--ff-lore);
  font-size: 1.75rem;
  color: var(--clr-text);
  margin: 0 0 .75rem;
  line-height: 1.15;
}
.rl-chapter-header__divider {
  height: 1px;
  background: linear-gradient(to right, var(--clr-cyan), transparent 70%);
  opacity: .4;
}

/* Sub-section rows */
.rl-section-list {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.rl-section-row {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .5rem .8rem;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: 3px;
  text-decoration: none !important;
  color: var(--clr-text) !important;
  transition: border-color .15s, box-shadow .15s;
}
.rl-section-row:hover {
  border-color: var(--clr-cyan);
  box-shadow: 0 0 8px var(--clr-cyan-glow);
}
.rl-section-row__icon {
  color: var(--clr-muted);
  font-size: .95rem;
  flex-shrink: 0;
}
.rl-section-row:hover .rl-section-row__icon { color: var(--clr-cyan); }
.rl-section-row__name {
  font-family: var(--ff-lore);
  font-size: .9rem;
  flex: 1;
}
.rl-section-row:hover .rl-section-row__name { color: var(--clr-cyan); }
.rl-section-row__meta {
  font-family: var(--ff-mono);
  font-size: .65rem;
  color: var(--clr-muted);
}
.rl-section-row__arrow {
  color: var(--clr-muted);
  font-size: .8rem;
  flex-shrink: 0;
}

/* Article list rows */
.rl-article-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--clr-border);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 1.25rem;
}
.rl-article-row {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .7rem 1rem;
  background: var(--clr-surface);
  border-bottom: 1px solid var(--clr-border-dim);
  transition: background .12s;
}
.rl-article-row:last-child { border-bottom: none; }
.rl-article-row:hover { background: rgba(201, 162, 39, 0.04); }
.rl-article-row__num {
  font-family: var(--ff-mono);
  font-size: .72rem;
  color: var(--clr-cyan);
  opacity: .7;
  min-width: 2rem;
  flex-shrink: 0;
  white-space: nowrap;
}
.rl-article-row__link {
  flex: 1;
  min-width: 0;
  text-decoration: none !important;
  color: inherit !important;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.rl-article-row__title {
  font-family: var(--ff-body);
  font-size: .92rem;
  color: var(--clr-text);
  line-height: 1.3;
}
.rl-article-row:hover .rl-article-row__title { color: var(--clr-cyan); }
.rl-article-row__meta {
  font-family: var(--ff-mono);
  font-size: .65rem;
  color: var(--clr-muted);
  letter-spacing: .02em;
}
.rl-article-row__edit {
  flex-shrink: 0;
  font-size: .75rem;
  color: var(--clr-muted) !important;
  text-decoration: none !important;
  padding: .1rem .3rem;
  border: 1px solid var(--clr-border-dim);
  border-radius: 2px;
  transition: color .12s, border-color .12s;
  opacity: .5;
}
.rl-article-row:hover .rl-article-row__edit { opacity: 1; }
.rl-article-row__edit:hover {
  color: var(--clr-cyan) !important;
  border-color: var(--clr-cyan);
}
.rl-article-row__arrow {
  flex-shrink: 0;
  font-size: .8rem;
  color: var(--clr-muted);
  text-decoration: none !important;
  transition: color .12s;
}
.rl-article-row:hover .rl-article-row__arrow { color: var(--clr-cyan); }

/* Bottom prev/next nav */
.rl-chapter-footer-nav {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--clr-border-dim);
}
.rl-chapter-footer-nav__btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--ff-mono);
  font-size: .72rem;
  color: var(--clr-muted) !important;
  text-decoration: none !important;
  padding: .45rem .8rem;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: 3px;
  max-width: 48%;
  transition: border-color .15s, color .15s, box-shadow .15s;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rl-chapter-footer-nav__btn:hover {
  border-color: var(--clr-cyan);
  color: var(--clr-cyan) !important;
  box-shadow: 0 0 8px var(--clr-cyan-glow);
}
.rl-chapter-footer-nav__btn--next { margin-left: auto; }

/* ════════════════════════════════════════════════════════════════════════════
   GLOSSARY — Highlighted terms in article prose
   ════════════════════════════════════════════════════════════════════════════ */
.gt {
  background: rgba(201, 162, 39, 0.10);
  border-bottom: 1px dashed rgba(201, 162, 39, 0.55);
  border-radius: 2px;
  cursor: help;
  padding: 0 1px;
  transition: background .12s;
}
.gt:hover {
  background: rgba(201, 162, 39, 0.22);
}

/* Tooltip popup */
.gt-popup {
  position: absolute;
  z-index: 1080;
  max-width: 300px;
  min-width: 180px;
  background: var(--clr-surface);
  border: 1px solid rgba(201, 162, 39, 0.4);
  border-radius: 3px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .55), 0 0 10px var(--clr-cyan-glow);
  padding: .6rem .8rem;
  pointer-events: auto;
  display: none;
}
.gt-popup__head {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .3rem;
}
.gt-popup__gem {
  color: var(--clr-cyan);
  font-size: .7rem;
  flex-shrink: 0;
}
.gt-popup__name {
  flex: 1;
  font-family: var(--ff-lore);
  font-size: .88rem;
  color: var(--clr-cyan);
}
.gt-popup__link {
  font-family: var(--ff-mono);
  font-size: .62rem;
  color: var(--clr-muted) !important;
  text-decoration: none !important;
  white-space: nowrap;
}
.gt-popup__link:hover { color: var(--clr-cyan) !important; }
.gt-popup__def {
  font-family: var(--ff-body);
  font-size: .8rem;
  color: var(--clr-text);
  line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════════════════════
   GLOSSARY — A–Z page layout (/kb/50/)
   ════════════════════════════════════════════════════════════════════════════ */
.gloss-page {
  padding: .5rem 0 1rem;
}
.gloss-search {
  width: 100%;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: 3px;
  color: var(--clr-text);
  font-family: var(--ff-mono);
  font-size: .82rem;
  padding: .4rem .75rem;
}
.gloss-search:focus {
  outline: none;
  border-color: var(--clr-cyan);
  box-shadow: 0 0 6px var(--clr-cyan-glow);
}
.gloss-alpha-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin-bottom: 1.25rem;
}
.gloss-alpha-nav__letter {
  font-family: var(--ff-mono);
  font-size: .72rem;
  font-weight: 700;
  color: var(--clr-cyan) !important;
  text-decoration: none !important;
  background: var(--clr-cyan-dim);
  border: 1px solid rgba(201, 162, 39, .3);
  border-radius: 2px;
  padding: .15rem .45rem;
  transition: background .12s, box-shadow .12s;
}
.gloss-alpha-nav__letter:hover {
  background: rgba(201, 162, 39, .2);
  box-shadow: 0 0 6px var(--clr-cyan-glow);
}
.gloss-alpha-nav__letter--empty {
  font-family: var(--ff-mono);
  font-size: .72rem;
  color: var(--clr-muted);
  opacity: .3;
  padding: .15rem .45rem;
}
.gloss-section {
  margin-bottom: 1.75rem;
  scroll-margin-top: 5rem;
}
.gloss-section__heading {
  font-family: var(--ff-mono);
  font-size: .65rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--clr-cyan);
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--clr-border-dim);
  margin-bottom: .65rem;
}
.gloss-entry {
  padding: .55rem 0;
  border-bottom: 1px solid var(--clr-border-dim);
}
.gloss-entry:last-child { border-bottom: none; }
.gloss-entry__name {
  font-family: var(--ff-body);
  font-size: .92rem;
  font-weight: 600;
  color: var(--clr-text);
  margin-bottom: .2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
}
.gloss-entry__aliases {
  font-family: var(--ff-mono);
  font-size: .65rem;
  color: var(--clr-muted);
  font-weight: 400;
}
.gloss-entry__def {
  font-family: var(--ff-body);
  font-size: .85rem;
  color: var(--clr-muted);
  line-height: 1.6;
}

/* ── Inline race/class badges (inserted via TinyMCE) ─────────────────── */
.oracle-badge {
  display: inline-block;
  padding: .15em .45em;
  font-size: .7em;
  font-weight: 700;
  border-radius: .3rem;
  white-space: nowrap;
  vertical-align: middle;
  letter-spacing: .06em;
  line-height: 1;
  font-family: var(--ff-ui, sans-serif);
}
.oracle-badge-limited    { background: #fd7e14; color: #000; }
.oracle-badge-restricted { background: #dc3545; color: #fff; }

/* ── Out Of Play section ─────────────────────────────────────────────────── */
.oop-section {
  margin: 1rem 0;
  border: 1px solid #374151;
  border-left: 4px solid #6b7280;
  border-radius: 4px;
  background: rgba(0,0,0,.35);
  overflow: hidden;
}
.oop-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .85rem;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid #2d3748;
}
.oop-header-badge {
  display: inline-block;
  padding: .15em .5em;
  font-size: .65em;
  font-weight: 700;
  letter-spacing: .1em;
  border-radius: .25rem;
  background: #6c757d;
  color: #fff;
  white-space: nowrap;
  font-family: var(--ff-ui, sans-serif);
}
.oop-header-label {
  font-size: .7em;
  color: #9ca3af;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  font-family: var(--ff-ui, sans-serif);
}
.oop-body {
  padding: .65rem .85rem;
  color: #9ca3af;
  font-size: .9em;
  line-height: 1.65;
}

/* ── Building level tiles (faction detail) ───────────────────────────── */
.bld-tile {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  padding: 5px 10px;
  height: 48px;
  background: var(--clr-amber-dim);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 2px;
  font-family: var(--ff-ui);
  letter-spacing: .06em;
  transition: background .12s, border-color .12s;
  cursor: default;
  gap: 2px;
}
.bld-tile:hover {
  background: rgba(245, 158, 11, 0.22);
  border-color: var(--clr-amber);
}
.bld-tile-lv {
  font-size: .72rem;
  font-weight: 700;
  color: var(--clr-amber);
  line-height: 1;
}
.bld-tile-count {
  font-size: .65rem;
  font-weight: 600;
  color: var(--clr-text);
  line-height: 1;
}

/* ── Faction action buttons ──────────────────────────────────────────────── */
.faction-action-btn {
  background: rgba(185, 28, 28, 0.12);
  border: 1px solid rgba(185, 28, 28, 0.55);
  color: #f87171;
  font-family: var(--ff-ui);
  font-size: .75rem;
  letter-spacing: .04em;
  transition: background .15s, border-color .15s, color .15s;
}
.faction-action-btn:hover,
.faction-action-btn:focus {
  background: rgba(185, 28, 28, 0.28);
  border-color: #b91c1c;
  color: #fca5a5;
}
.faction-action-btn--gold {
  background: rgba(201, 162, 39, 0.12);
  border-color: rgba(201, 162, 39, 0.55);
  color: var(--clr-cyan);
}
.faction-action-btn--gold:hover,
.faction-action-btn--gold:focus {
  background: rgba(201, 162, 39, 0.24);
  border-color: var(--clr-cyan);
  color: #f8d77a;
}
.faction-action-btn--dim {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--clr-muted);
}
.faction-action-btn--dim:hover,
.faction-action-btn--dim:focus {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.32);
  color: var(--clr-text);
}


/* ── Spell Pyramid Builder ─────────────────────────────────────────────── */
.spell-slot-pips { font-size: .75rem; letter-spacing: .1em; line-height: 1; }
.pip-owned  { color: #a78bfa; }
.pip-empty  { color: rgba(255,255,255,.2); }
.spell-level-row.pyramid-invalid td { background: rgba(248,113,113,.07); }
.spell-level-row.pyramid-invalid .spell-qty-group .btn,
.spell-level-row.pyramid-invalid .spell-qty-input { border-color: rgba(248,113,113,.5); }
#spell-submit-btn:not([disabled]) { box-shadow: 0 0 0 .15rem rgba(13,110,253,.35); }


/* ══════════════════════════════════════════════════════════════════════════
   Homepage — Dashboard tab redesign
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Staff Dispatch hero ─────────────────────────────────────────────────── */
.hp-dispatch {
  position: relative;
  background: linear-gradient(145deg, rgba(9,9,11,.72) 0%, rgba(9,9,11,.60) 100%);
  border: 1px solid rgba(201, 162, 39, .22);
  border-radius: .75rem;
  padding: 2rem 2.25rem 1.75rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 0 48px rgba(201,162,39,.05), inset 0 1px 0 rgba(201,162,39,.12);
  backdrop-filter: blur(6px);
}
.hp-dispatch__crown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(201, 162, 39, .15);
}
.hp-dispatch__eyebrow {
  font-family: var(--ff-ui);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--clr-cyan);
  opacity: .85;
}
.hp-dispatch__eyebrow .bi {
  font-size: .75rem;
  opacity: .7;
}
.homepage-intro__body {
  font-family: var(--ff-body);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--clr-text);
}
.homepage-intro__body h1,
.homepage-intro__body h2,
.homepage-intro__body h3 {
  font-family: var(--ff-lore);
  color: var(--clr-cyan);
  margin-top: 1.25rem;
}
.homepage-intro__body a { color: var(--clr-cyan); }
.homepage-intro__body img {
  filter:
    drop-shadow(0 0  8px rgba(201, 162, 39, 0.70))
    drop-shadow(0 0 24px rgba(201, 162, 39, 0.35))
    drop-shadow(0 0 48px rgba(201, 162, 39, 0.15));
}
.homepage-intro__body ul,
.homepage-intro__body ol { padding-left: 1.5rem; }
.homepage-intro__empty {
  font-family: var(--ff-ui);
  font-size: .75rem;
  color: var(--clr-muted);
  letter-spacing: .06em;
  padding: .5rem 0;
}

/* ── Ornament divider ────────────────────────────────────────────────────── */
.hp-ornament {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1.75rem 0;
  opacity: .35;
}
.hp-ornament__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,162,39,.6), transparent);
}
.hp-ornament__gem {
  font-size: .9rem;
  color: var(--clr-cyan);
}

/* ── Character card ──────────────────────────────────────────────────────── */
.hp-charcard {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: .6rem;
  padding: 1rem 1.25rem;
  text-decoration: none;
  color: var(--clr-text);
  margin-bottom: 1.5rem;
  transition: background .18s, border-color .18s, box-shadow .18s;
}
.hp-charcard:hover {
  background: rgba(201,162,39,.07);
  border-color: rgba(201,162,39,.35);
  box-shadow: 0 0 20px rgba(201,162,39,.06);
  color: var(--clr-text);
}
.hp-charcard__sigil {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(201,162,39,.1);
  border: 1px solid rgba(201,162,39,.25);
  border-radius: .4rem;
  color: var(--clr-cyan);
  font-size: 1.1rem;
}
.hp-charcard__body { flex: 1; min-width: 0; }
.hp-charcard__name {
  font-family: var(--ff-lore);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--clr-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hp-charcard__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .3rem;
  margin-top: .2rem;
}
.hp-charcard__tag {
  font-family: var(--ff-ui);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--clr-muted);
}
.hp-charcard__sep { color: rgba(255,255,255,.2); font-size: .7rem; }
.hp-charcard__xp {
  flex-shrink: 0;
  text-align: right;
}
.hp-charcard__xp-val {
  font-family: var(--ff-mono);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--clr-cyan);
  line-height: 1;
}
.hp-charcard__xp-lbl {
  font-family: var(--ff-ui);
  font-size: .58rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--clr-muted);
  margin-top: .2rem;
}
.hp-charcard__arrow {
  flex-shrink: 0;
  font-size: 1.1rem;
  color: rgba(255,255,255,.2);
  transition: color .18s, transform .18s;
}
.hp-charcard:hover .hp-charcard__arrow {
  color: var(--clr-cyan);
  transform: translateX(3px);
}

/* ── Unauthenticated gate card ───────────────────────────────────────────── */
.hp-gate {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  background: rgba(185,28,28,.06);
  border: 1px solid rgba(185,28,28,.22);
  border-radius: .6rem;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.5rem;
}
.hp-gate__icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(185,28,28,.12);
  border: 1px solid rgba(185,28,28,.3);
  border-radius: .4rem;
  color: #f87171;
  font-size: 1.1rem;
}
.hp-gate__body { flex: 1; min-width: 0; }
.hp-gate__title {
  font-family: var(--ff-ui);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fca5a5;
  margin-bottom: .2rem;
}
.hp-gate__sub {
  font-family: var(--ff-body);
  font-size: .85rem;
  color: var(--clr-muted);
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════
   Forge Workshop — Fantasy RPG Aesthetic
   Uses existing design tokens: --clr-cyan (imperial gold),
   --clr-void/void-2, --ff-lore (Cinzel), --ff-ui (Orbitron),
   --ff-body (Lora), --ff-mono (Roboto Mono).
   ═══════════════════════════════════════════════════════════════ */

/* ── Sub-navigation (Workshops | Log) ─────────────────────────── */
.forge-subnav {
  gap: .4rem;
}
.forge-subnav .nav-link {
  font-family: var(--ff-ui);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--clr-muted);
  border: 1px solid var(--clr-border-dim);
  background: transparent;
  border-radius: 3px;
  padding: .3rem 1.1rem;
  transition: color .2s, border-color .2s, background .2s;
}
.forge-subnav .nav-link:hover {
  color: var(--clr-cyan);
  border-color: var(--clr-border);
  background: var(--clr-cyan-dim);
}
.forge-subnav .nav-link.active {
  background: var(--clr-cyan-mid);
  border-color: var(--clr-cyan);
  color: var(--clr-cyan);
}

/* ── Forge stat boxes (rank & kit display) ─────────────────────── */
.forge-stat {
  min-width: 76px;
  text-align: center;
  padding: .55rem .8rem;
  border: 1px solid var(--clr-border);
  border-radius: 3px;
  background: var(--clr-void);
  flex-shrink: 0;
}
.forge-stat-value {
  font-family: var(--ff-lore);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--clr-cyan);
}
.forge-stat-label {
  font-family: var(--ff-ui);
  font-size: .52rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--clr-muted);
  margin-top: .2rem;
}
/* Effective kit gets a subtle gold glow */
.forge-stat-kit {
  border-color: var(--clr-cyan);
  background: var(--clr-cyan-dim);
  box-shadow: 0 0 8px var(--clr-cyan-dim);
}
.forge-stat-kit .forge-stat-value {
  font-size: 1rem;
  padding-top: .35rem;
  letter-spacing: .05em;
}
/* Absent rank / no kit */
.forge-stat-none .forge-stat-value {
  color: var(--clr-muted-dim);
  font-size: 1.25rem;
}

/* ── Workshop section container ────────────────────────────────── */
.forge-section {
  border: 1px solid var(--clr-cyan);
  /* double-border illusion */
  box-shadow: 0 0 0 3px var(--clr-cyan-dim),
              inset 0 0 40px rgba(0, 0, 0, .25);
  border-radius: 4px;
  background: var(--clr-void-2);
  overflow: hidden;
  margin-bottom: 1.5rem;
}

/* ── Workshop section header bar ───────────────────────────────── */
.forge-section-hdr {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .55rem 1.1rem;
  font-family: var(--ff-lore);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--clr-cyan);
  background: linear-gradient(90deg, transparent, var(--clr-cyan-dim), transparent);
  border-bottom: 1px solid var(--clr-cyan);
}
/* Decorative rule lines flanking the title */
.forge-section-hdr::before,
.forge-section-hdr::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--clr-cyan-mid));
}
.forge-section-hdr::after {
  background: linear-gradient(270deg, transparent, var(--clr-cyan-mid));
}
.forge-section-hdr .bi {
  font-size: .85rem;
  flex-shrink: 0;
}

.forge-section-body {
  padding: .9rem 1rem;
}

/* ── Recipe card (blueprint workshop) ──────────────────────────── */
.forge-recipe {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--clr-border-dim);
  border-radius: 3px;
  background: var(--clr-void);
  overflow: hidden;
  height: 100%;
  transition: border-color .2s, box-shadow .2s;
}
.forge-recipe:hover {
  border-color: var(--clr-border-mid);
  box-shadow: 0 3px 16px rgba(0, 0, 0, .5);
}
/* Tier-colored left accent bar */
.forge-recipe[data-tier="D"] { border-left: 3px solid #22c55e; }
.forge-recipe[data-tier="C"] { border-left: 3px solid #0dcaf0; }
.forge-recipe[data-tier="B"] { border-left: 3px solid #f59e0b; }
.forge-recipe[data-tier="A"] { border-left: 3px solid var(--clr-crimson); }

.forge-recipe-hdr {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .5rem;
  padding: .5rem .75rem;
  border-bottom: 1px solid var(--clr-border-dim);
}
.forge-recipe-name {
  font-family: var(--ff-lore);
  font-size: .85rem;
  color: var(--clr-text);
  line-height: 1.3;
}
.forge-recipe-school {
  font-family: var(--ff-ui);
  font-size: .58rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--clr-muted);
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: .15rem;
}

.forge-recipe-body {
  padding: .5rem .75rem;
  flex: 1;
}
/* Ingredient list */
.forge-ingredient-list {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.forge-ingredient {
  font-family: var(--ff-body);
  font-size: .76rem;
  color: var(--clr-muted);
}
.forge-ingredient::before {
  content: '✦ ';
  color: var(--clr-cyan-mid);
  font-size: .65rem;
}
/* Thin separator between ingredients */
.forge-ingredient + .forge-ingredient {
  padding-left: .4rem;
  border-left: 1px solid var(--clr-border-dim);
}

.forge-recipe-ftr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .35rem .75rem;
  border-top: 1px solid var(--clr-border-dim);
  font-family: var(--ff-ui);
  font-size: .62rem;
  letter-spacing: .06em;
  color: var(--clr-muted);
  gap: .5rem;
}

/* ── Gem workshop ───────────────────────────────────────────────── */
.forge-gem-label {
  font-family: var(--ff-ui);
  font-size: .62rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--clr-muted);
  margin-bottom: .3rem;
  display: block;
}
.forge-gem-cost {
  font-family: var(--ff-mono);
  font-size: .8rem;
  color: var(--clr-cyan);
  background: var(--clr-cyan-dim);
  border: 1px solid var(--clr-border);
  border-radius: 3px;
  padding: .3rem .6rem;
  text-align: center;
  min-height: 2.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Craft log ─────────────────────────────────────────────────── */
.forge-log-entry {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .6rem 1rem;
  border-bottom: 1px solid var(--clr-border-dim);
  transition: background .15s;
}
.forge-log-entry:last-child { border-bottom: none; }
.forge-log-entry:hover { background: rgba(255,255,255,.02); }

.forge-log-icon { font-size: .95rem; flex-shrink: 0; margin-top: .1rem; }
.forge-log-body  { flex: 1; min-width: 0; }

.forge-log-name {
  font-family: var(--ff-lore);
  font-size: .82rem;
  color: var(--clr-text);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.forge-log-meta {
  font-family: var(--ff-mono);
  font-size: .67rem;
  color: var(--clr-muted);
  margin-top: .12rem;
}
.forge-log-note {
  font-family: var(--ff-body);
  font-size: .75rem;
  color: var(--clr-muted);
  font-style: italic;
  margin-top: .18rem;
}
.forge-log-status { flex-shrink: 0; text-align: right; }

/* ═══════════════════════════════════════════════════════════════
   Production Tab — Alchemical / Botanical Aesthetic
   School colours: Alchemy = emerald · Poisons = amethyst · Potions = teal
   ═══════════════════════════════════════════════════════════════ */

/* Colour tokens for the three alchemy schools */
:root {
  --clr-poison:       #a855f7;
  --clr-poison-dim:   rgba(168, 85, 247, 0.12);
  --clr-poison-mid:   rgba(168, 85, 247, 0.22);
  --clr-potion:       #06b6d4;
  --clr-potion-dim:   rgba(6, 182, 212, 0.12);
  --clr-potion-mid:   rgba(6, 182, 212, 0.22);
}

/* ── Lab section container (mirrors forge-section, green accent) ── */
.lab-section {
  border: 1px solid var(--clr-emerald);
  box-shadow: 0 0 0 3px var(--clr-emerald-dim),
              inset 0 0 40px rgba(0, 0, 0, .25);
  border-radius: 4px;
  background: var(--clr-void-2);
  overflow: hidden;
  margin-bottom: 1.5rem;
}

/* ── Lab section header bar ─────────────────────────────────── */
.lab-section-hdr {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem 1.1rem;
  font-family: var(--ff-lore);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--clr-emerald);
  background: linear-gradient(90deg, transparent, var(--clr-emerald-dim), transparent);
  border-bottom: 1px solid var(--clr-emerald);
}
.lab-section-hdr::before,
.lab-section-hdr::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34, 197, 94, .3));
}
.lab-section-hdr::after {
  background: linear-gradient(270deg, transparent, rgba(34, 197, 94, .3));
}
.lab-section-hdr .bi { font-size: .85rem; flex-shrink: 0; }

/* ── PP result display ─────────────────────────────────────── */
.lab-pp-result {
  border: 1px solid var(--clr-emerald-dim);
  border-radius: 3px;
  background: rgba(0, 0, 0, .3);
  padding: 1rem;
  text-align: center;
}
.lab-pp-label {
  font-family: var(--ff-ui);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--clr-muted);
  margin-bottom: .4rem;
}
.lab-pp-value {
  font-family: var(--ff-lore);
  font-size: 3rem;
  line-height: 1;
  color: var(--clr-emerald);
  text-shadow: 0 0 20px rgba(34, 197, 94, .25);
}

/* ── School filter pills ───────────────────────────────────── */
.lab-school-pill {
  font-family: var(--ff-ui);
  font-size: .63rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--clr-border-dim);
  color: var(--clr-muted);
  border-radius: 3px;
  padding: .28rem .9rem;
  transition: color .2s, border-color .2s, background .2s;
  cursor: pointer;
  white-space: nowrap;
}
.lab-school-pill:hover {
  background: var(--clr-emerald-dim);
  border-color: rgba(34, 197, 94, .35);
  color: var(--clr-emerald);
}
/* All / Alchemy = emerald */
.lab-school-pill.active,
.lab-school-pill[data-school="ALCHEMY"].active {
  background: rgba(34, 197, 94, .15);
  border-color: var(--clr-emerald);
  color: var(--clr-emerald);
}
/* Poisons = amethyst */
.lab-school-pill[data-school="POISONS"].active {
  background: var(--clr-poison-dim);
  border-color: var(--clr-poison);
  color: var(--clr-poison);
}
/* Potions = teal */
.lab-school-pill[data-school="POTIONS"].active {
  background: var(--clr-potion-dim);
  border-color: var(--clr-potion);
  color: var(--clr-potion);
}

/* ── Lab item table ────────────────────────────────────────── */
#labTable thead tr {
  border-bottom: 1px solid var(--clr-border);
}
#labTable thead th {
  font-family: var(--ff-ui);
  font-size: .62rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--clr-muted);
  padding: .4rem 1rem;
  font-weight: 400;
  background: transparent;
  border: none;
}
.lab-item-row td {
  border-bottom: 1px solid var(--clr-border-dim);
  vertical-align: middle;
  font-family: var(--ff-body);
  font-size: .82rem;
  padding: .45rem 1rem;
}
/* School-coloured left accent stripe */
.lab-item-row[data-school="ALCHEMY"] { border-left: 3px solid var(--clr-emerald); }
.lab-item-row[data-school="POISONS"] { border-left: 3px solid var(--clr-poison); }
.lab-item-row[data-school="POTIONS"] { border-left: 3px solid var(--clr-potion); }

.lab-item-row:hover td { background: rgba(255, 255, 255, .02); }

/* Item name */
.lab-item-name {
  font-family: var(--ff-lore);
  font-size: .82rem;
  color: var(--clr-text);
}
/* School badge */
.lab-badge {
  font-family: var(--ff-ui);
  font-size: .58rem;
  letter-spacing: .07em;
  padding: .18rem .55rem;
  border-radius: 3px;
  border: 1px solid transparent;
}
.lab-badge-alchemy {
  background: var(--clr-emerald-dim);
  color: var(--clr-emerald);
  border-color: rgba(34, 197, 94, .25);
}
.lab-badge-poisons {
  background: var(--clr-poison-dim);
  color: var(--clr-poison);
  border-color: rgba(168, 85, 247, .25);
}
.lab-badge-potions {
  background: var(--clr-potion-dim);
  color: var(--clr-potion);
  border-color: rgba(6, 182, 212, .25);
}
/* Qty input */
.lab-qty-input {
  background: var(--clr-void) !important;
  border-color: var(--clr-border-dim) !important;
  color: var(--clr-text) !important;
  text-align: center;
  width: 72px;
  font-family: var(--ff-mono);
  font-size: .8rem;
}
.lab-qty-input:focus {
  border-color: var(--clr-emerald) !important;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, .15) !important;
}
/* PP total cell */
.item-pp-total {
  font-family: var(--ff-mono);
  font-size: .8rem;
  color: var(--clr-emerald);
}
/* Details row */
.lab-detail-row td {
  font-family: var(--ff-body);
  font-size: .78rem;
  color: var(--clr-muted);
  background: rgba(0,0,0,.2);
  border-left: 3px solid var(--clr-border-dim);
  padding: .5rem 1rem .5rem 1.5rem;
}

/* ── Production Catalog page: PP chip + lab tier badge ─────────── */
.catalog-pp-chip {
  display: inline-block;
  font-family: var(--ff-lore);
  font-size: .95rem;
  color: var(--clr-emerald);
  background: var(--clr-emerald-dim);
  border: 1px solid rgba(34, 197, 94, .25);
  border-radius: 3px;
  padding: .1rem .55rem;
  min-width: 32px;
  text-align: center;
}
.catalog-count {
  font-family: var(--ff-mono);
  font-size: .62rem;
  color: var(--clr-muted);
  opacity: .7;
}
/* Lab tier badge variants */
.catalog-lab-badge {
  font-family: var(--ff-ui);
  font-size: .62rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .18rem .55rem;
  border-radius: 3px;
  border: 1px solid transparent;
}
.catalog-lab-none     { color: var(--clr-muted); border-color: var(--clr-border-dim); }
.catalog-lab-novice   { color: #86efac; background: rgba(134,239,172,.08); border-color: rgba(134,239,172,.2); }
.catalog-lab-apprentice { color: #67e8f9; background: rgba(103,232,249,.08); border-color: rgba(103,232,249,.2); }
.catalog-lab-adept    { color: var(--clr-amber); background: var(--clr-amber-dim); border-color: rgba(245,158,11,.25); }
.catalog-lab-master   { color: var(--clr-cyan); background: var(--clr-cyan-dim); border-color: var(--clr-cyan-mid); }

/* ── Lab stat pills (mirrors forge-stat, school-coloured variants) ── */
.lab-stat {
  min-width: 76px;
  text-align: center;
  padding: .55rem .8rem;
  border: 1px solid var(--clr-border);
  border-radius: 3px;
  background: var(--clr-void);
  flex-shrink: 0;
}
.lab-stat-value {
  font-family: var(--ff-lore);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--clr-emerald);
}
.lab-stat-label {
  font-family: var(--ff-ui);
  font-size: .52rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--clr-muted);
  margin-top: .2rem;
}
/* Alchemy = emerald */
.lab-stat-alchemy {
  border-color: var(--clr-emerald);
  background: var(--clr-emerald-dim);
  box-shadow: 0 0 8px var(--clr-emerald-dim);
}
.lab-stat-alchemy .lab-stat-value { color: var(--clr-emerald); }
/* Poisons = purple */
.lab-stat-poisons {
  border-color: var(--clr-poison);
  background: var(--clr-poison-dim);
  box-shadow: 0 0 8px var(--clr-poison-dim);
}
.lab-stat-poisons .lab-stat-value { color: var(--clr-poison); }
/* Potions = teal */
.lab-stat-potions {
  border-color: var(--clr-potion);
  background: var(--clr-potion-dim);
  box-shadow: 0 0 8px var(--clr-potion-dim);
}
.lab-stat-potions .lab-stat-value { color: var(--clr-potion); }
/* Lab tier = amber/gold */
.lab-stat-tier {
  border-color: var(--clr-amber);
  background: var(--clr-amber-dim);
  box-shadow: 0 0 8px var(--clr-amber-dim);
  min-width: 100px;
}
.lab-stat-tier .lab-stat-value {
  font-size: .95rem;
  padding-top: .3rem;
  letter-spacing: .04em;
  color: var(--clr-amber);
}
/* No skills */
.lab-stat-none .lab-stat-value {
  color: var(--clr-muted-dim);
  font-size: 1.25rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MERCHANT LIST PAGE — shop cards
   ═══════════════════════════════════════════════════════════════════════════ */

.merchant-card {
  border: 1px solid var(--clr-border);
  border-radius: 4px;
  background: var(--clr-void-2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .2s, box-shadow .2s;
}
.merchant-card:hover {
  border-color: var(--clr-cyan);
  box-shadow: 0 0 0 2px var(--clr-cyan-dim), 0 4px 20px rgba(0,0,0,.4);
}

/* Header bar */
.merchant-card-hdr {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem 1rem;
  background: linear-gradient(90deg, transparent, var(--clr-cyan-dim), transparent);
  border-bottom: 1px solid var(--clr-border);
}
.merchant-card-icon {
  font-size: .9rem;
  color: var(--clr-cyan);
  flex-shrink: 0;
}
.merchant-card-title {
  font-family: var(--ff-lore);
  font-size: .9rem;
  letter-spacing: .05em;
  color: var(--clr-cyan);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.merchant-card-count {
  font-family: var(--ff-mono);
  font-size: .62rem;
  color: var(--clr-muted);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--clr-border-dim);
  border-radius: 3px;
  padding: .1rem .45rem;
  white-space: nowrap;
}

/* Body */
.merchant-card-body {
  padding: .85rem 1rem;
  flex: 1;
}
.merchant-card-desc {
  font-family: var(--ff-body);
  font-size: .82rem;
  color: #9ca3af;
  margin-bottom: .75rem;
  line-height: 1.5;
}
.merchant-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
}
.merchant-card-meta-item {
  font-family: var(--ff-ui);
  font-size: .62rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--clr-muted);
}

/* Footer */
.merchant-card-footer {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1rem;
  border-top: 1px solid var(--clr-border-dim);
  background: rgba(0,0,0,.15);
}
.merchant-card-open-btn {
  flex: 1;
  font-family: var(--ff-ui);
  font-size: .65rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  background: var(--clr-cyan-dim);
  border: 1px solid var(--clr-cyan-mid);
  color: var(--clr-cyan);
  padding: .32rem .8rem;
  text-align: center;
  text-decoration: none;
  border-radius: 3px;
  transition: background .2s, box-shadow .2s;
}
.merchant-card-open-btn:hover {
  background: rgba(201,162,39,.22);
  box-shadow: 0 0 8px var(--clr-cyan-dim);
  color: var(--clr-cyan);
}
.merchant-card-del-btn {
  font-size: .75rem;
  background: transparent;
  border: 1px solid rgba(239,68,68,.2);
  color: rgba(239,68,68,.5);
  padding: .3rem .5rem;
  border-radius: 3px;
  transition: border-color .2s, color .2s;
}
.merchant-card-del-btn:hover {
  border-color: #ef4444;
  color: #ef4444;
  background: rgba(239,68,68,.08);
}

/* Total badge in header */
.merchant-log-total-badge {
  font-family: var(--ff-mono);
  font-size: .72rem;
  color: var(--clr-muted);
  background: var(--clr-void-2);
  border: 1px solid var(--clr-border-dim);
  border-radius: 3px;
  padding: .3rem .8rem;
  white-space: nowrap;
  align-self: flex-end;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MERCHANT TRANSACTION LOG
   ═══════════════════════════════════════════════════════════════════════════ */

#txnTable thead th {
  font-family: var(--ff-ui);
  font-size: .62rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--clr-muted);
  padding: .4rem 1rem;
  font-weight: 400;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--clr-border);
}
.merchant-log-row td {
  border-bottom: 1px solid var(--clr-border-dim);
  vertical-align: top;
  padding: .55rem 1rem;
}
.merchant-log-row:hover td { background: rgba(255,255,255,.02); }
.merchant-log-row-override { border-left: 3px solid #f59e0b; }
.merchant-log-row-override td { background: rgba(245,158,11,.04) !important; }

/* Transaction type badges */
.merchant-log-badge {
  display: inline-block;
  font-family: var(--ff-ui);
  font-size: .58rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .18rem .55rem;
  border-radius: 3px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.merchant-log-badge-sell {
  background: var(--clr-cyan-dim);
  border-color: var(--clr-cyan-mid);
  color: var(--clr-cyan);
}
.merchant-log-badge-buy {
  background: var(--clr-emerald-dim);
  border-color: rgba(34,197,94,.25);
  color: var(--clr-emerald);
}
.merchant-log-override-badge {
  display: inline-block;
  font-family: var(--ff-ui);
  font-size: .58rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .18rem .5rem;
  border-radius: 3px;
  background: rgba(245,158,11,.12);
  border: 1px solid rgba(245,158,11,.3);
  color: #f59e0b;
  white-space: nowrap;
}

/* Pagination */
.merchant-log-page-link {
  font-family: var(--ff-mono);
  font-size: .72rem;
  background: var(--clr-void-2) !important;
  border: 1px solid var(--clr-border-dim) !important;
  color: var(--clr-muted) !important;
  padding: .3rem .65rem;
  border-radius: 3px !important;
  transition: border-color .2s, color .2s;
}
.merchant-log-page-link:hover {
  border-color: var(--clr-cyan) !important;
  color: var(--clr-cyan) !important;
}
.merchant-log-page-active {
  background: var(--clr-cyan-dim) !important;
  border-color: var(--clr-cyan-mid) !important;
  color: var(--clr-cyan) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MERCHANT SHOP PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Shop page header ───────────────────────────────────────────────────── */
.shop-page-title {
  font-family: var(--ff-lore);
  font-size: 1.6rem;
  color: var(--clr-cyan);
  letter-spacing: .05em;
  line-height: 1.2;
}
.shop-page-desc {
  font-family: var(--ff-body);
  font-size: .85rem;
  color: #6b7280;
  font-style: italic;
}
.shop-breadcrumb {
  font-family: var(--ff-ui);
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #4b5563;
}
.shop-breadcrumb a { color: #6b7280; text-decoration: none; }
.shop-breadcrumb a:hover { color: var(--clr-cyan); }

/* ── Inventory editor table ─────────────────────────────────────────────── */
.shop-editor-table {
  width: 100%;
  border-collapse: collapse;
}
.shop-editor-table thead th {
  font-family: var(--ff-ui);
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #6b7280;
  padding: .5rem .75rem;
  border-bottom: 1px solid var(--clr-border);
  white-space: nowrap;
}
.shop-editor-table tbody tr {
  border-bottom: 1px solid var(--clr-border-dim);
  transition: background .12s;
}
.shop-editor-table tbody tr:hover { background: rgba(255,255,255,.025); }
.shop-editor-table tbody tr.marked-delete {
  opacity: .55;
  background: rgba(239, 68, 68, .08);
}
.shop-editor-table td { padding: .45rem .75rem; vertical-align: middle; }
.shop-editor-name-input {
  font-family: var(--ff-lore) !important;
  font-size: .82rem !important;
  background: rgba(255,255,255,.04) !important;
  border-color: var(--clr-border) !important;
  color: #e8e0cc !important;
}
.shop-editor-name-input:focus {
  border-color: var(--clr-cyan) !important;
  box-shadow: 0 0 0 2px var(--clr-cyan-dim) !important;
}

/* ── Transfer / Buyback item rows ───────────────────────────────────────── */
.shop-item-row {
  border-bottom: 1px solid var(--clr-border-dim);
  border-left: 3px solid var(--clr-border);
  transition: background .12s;
}
.shop-item-row:last-child { border-bottom: none; }
.shop-item-row:hover { background: rgba(255,255,255,.025); }

/* Classification accent borders */
.shop-item-row[data-cls="Herb"]      { border-left-color: #4ade80; }
.shop-item-row[data-cls="Component"] { border-left-color: #a78bfa; }
.shop-item-row[data-cls="Gemstone"]  { border-left-color: #38bdf8; }
.shop-item-row[data-cls="Material"]  { border-left-color: #fb923c; }

.shop-item-name-cell {
  font-family: var(--ff-lore);
  font-size: .85rem;
  color: #e8e0cc;
}
.shop-item-desc-cell {
  font-family: var(--ff-body);
  font-size: .75rem;
  color: #4b5563;
}
.shop-price-pill {
  display: inline-block;
  font-family: var(--ff-ui);
  font-size: .72rem;
  color: var(--clr-cyan);
  background: var(--clr-cyan-dim);
  border: 1px solid rgba(201,162,39,.2);
  padding: .2rem .55rem;
  border-radius: 3px;
  white-space: nowrap;
}
.shop-stock-chip {
  font-family: var(--ff-ui);
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  white-space: nowrap;
}
.shop-stock-chip.unlimited    { color: #4b5563; }
.shop-stock-chip.in-stock     { color: #4ade80; }
.shop-stock-chip.low-stock    { color: #fb923c; }
.shop-stock-chip.out-of-stock { color: #f87171; }

/* ── Transfer table header/footer ───────────────────────────────────────── */
.shop-table-head th {
  font-family: var(--ff-ui);
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #4b5563;
  padding: .4rem .75rem;
  border-bottom: 1px solid var(--clr-border);
  white-space: nowrap;
  font-weight: 600;
  background: rgba(0,0,0,.2);
}
.shop-grand-total-row td {
  font-family: var(--ff-ui);
  font-size: .85rem;
  color: var(--clr-cyan);
  border-top: 1px solid var(--clr-border);
  padding: .6rem .75rem;
}
.shop-grand-total-value {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--clr-cyan);
}

/* ── Character currency display ─────────────────────────────────────────── */
.shop-currency-box {
  background: rgba(0,0,0,.3);
  border: 1px solid var(--clr-border);
  border-radius: 4px;
  padding: .75rem 1rem;
}
.shop-currency-label {
  font-family: var(--ff-ui);
  font-size: .58rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #4b5563;
  margin-bottom: .3rem;
}
.shop-currency-value {
  font-family: var(--ff-ui);
  font-size: 1rem;
  color: var(--clr-cyan);
  font-weight: 600;
}
.shop-currency-sub {
  font-family: var(--ff-ui);
  font-size: .65rem;
  color: #4b5563;
  margin-top: .15rem;
}

/* ── Rapport chip ────────────────────────────────────────────────────────── */
.shop-rapport-box {
  background: rgba(0,0,0,.3);
  border: 1px solid var(--clr-border);
  border-radius: 4px;
  padding: .75rem 1rem;
  height: 100%;
}
.shop-rapport-label {
  font-family: var(--ff-ui);
  font-size: .58rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #4b5563;
  margin-bottom: .3rem;
}
.shop-rapport-value {
  font-family: var(--ff-ui);
  font-size: .95rem;
  color: #38bdf8;
  font-weight: 600;
}

/* ── Override warning ───────────────────────────────────────────────────── */
.shop-override-banner {
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.5);
  border-left: 4px solid #ef4444;
  border-radius: 4px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}
.shop-override-title {
  font-family: var(--ff-lore);
  font-size: 1.1rem;
  color: #f87171;
  margin-bottom: .75rem;
}
.shop-override-stat-label {
  font-family: var(--ff-ui);
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #6b7280;
}
.shop-override-stat-value {
  font-family: var(--ff-ui);
  font-size: 1rem;
  font-weight: 600;
  color: #f8f8f8;
  margin-top: .2rem;
}
.shop-override-stat-value.danger { color: #f87171; }
.shop-override-shortfall {
  font-family: var(--ff-ui);
  font-size: .8rem;
  color: #fbbf24;
  background: rgba(251,191,36,.08);
  border: 1px solid rgba(251,191,36,.2);
  border-radius: 3px;
  padding: .4rem .8rem;
  display: inline-block;
  margin: .5rem 0;
}

/* ── Library modal ───────────────────────────────────────────────────────── */
.shop-modal-content {
  background: var(--clr-void-2) !important;
  border: 1px solid var(--clr-border) !important;
  border-top: 2px solid var(--clr-cyan) !important;
}
.shop-modal-header {
  background: rgba(0,0,0,.4);
  border-bottom: 1px solid var(--clr-border);
  padding: 1rem 1.25rem;
}
.shop-modal-title {
  font-family: var(--ff-lore);
  font-size: 1rem;
  color: var(--clr-cyan);
  letter-spacing: .04em;
}
.shop-lib-table th {
  font-family: var(--ff-ui);
  font-size: .58rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #4b5563;
  padding: .4rem .75rem;
  border-bottom: 1px solid var(--clr-border);
  background: rgba(0,0,0,.3);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}
.shop-lib-table tbody tr {
  border-bottom: 1px solid var(--clr-border-dim);
  cursor: pointer;
  transition: background .1s;
}
.shop-lib-table tbody tr:hover { background: var(--clr-cyan-dim); }
.shop-lib-table td { padding: .4rem .75rem; font-size: .82rem; }

/* ── Qty inputs in transfer table ───────────────────────────────────────── */
.shop-qty-input {
  width: 70px !important;
  background: rgba(255,255,255,.05) !important;
  border-color: var(--clr-border) !important;
  color: #e8e0cc !important;
  font-family: var(--ff-ui) !important;
  font-size: .75rem !important;
  text-align: center;
}
.shop-qty-input:focus {
  border-color: var(--clr-cyan) !important;
  box-shadow: 0 0 0 2px var(--clr-cyan-dim) !important;
}

/* ── Sell-tab item name trigger ─────────────────────────────────────────── */
.shop-item-trigger {
  cursor: help;
  border-bottom: 1px dashed rgba(201, 162, 39, .4);
  transition: border-color .15s, color .15s;
}
.shop-item-trigger:hover {
  border-bottom-color: var(--clr-cyan);
  color: #e8e0cc;
}

/* ── Item info popup ────────────────────────────────────────────────────── */
.shop-item-popup {
  position: absolute;
  z-index: 1090;
  width: 280px;
  background: var(--clr-surface);
  border: 1px solid var(--clr-cyan-mid);
  border-radius: 4px;
  box-shadow: 0 6px 28px rgba(0, 0, 0, .65), 0 0 0 3px var(--clr-cyan-dim);
  padding: .7rem .9rem;
  pointer-events: auto;
  display: none;
}
.shop-item-popup-hdr {
  margin-bottom: .4rem;
}
.shop-item-popup-name {
  font-family: var(--ff-lore);
  font-size: .92rem;
  letter-spacing: .03em;
  color: var(--clr-cyan);
  display: block;
  line-height: 1.3;
}
.shop-item-popup-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-bottom: .4rem;
}
.shop-item-popup-meta {
  font-family: var(--ff-ui);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--clr-muted);
  margin-bottom: .35rem;
}
.shop-item-popup-desc {
  font-family: var(--ff-body);
  font-size: .79rem;
  color: #9ca3af;
  line-height: 1.55;
  border-top: 1px solid var(--clr-border-dim);
  padding-top: .4rem;
  margin-top: .1rem;
}

/* ── Item group headers (inventory editor + sell tab) ───────────────────────── */
.shop-group-hdr {
  background: rgba(0,0,0,.35);
  cursor: pointer;
  user-select: none;
}
.shop-group-hdr td {
  padding: .28rem .75rem !important;
  border-bottom: 1px solid var(--clr-border);
  border-top: 2px solid var(--clr-border);
}
.shop-group-hdr:first-child td { border-top: none; }
.shop-grp-inner {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--ff-ui);
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #6b7280;
}
.shop-grp-chevron {
  font-size: .65rem;
  transition: transform .18s;
  color: #4b5563;
}
.shop-group-hdr.collapsed .shop-grp-chevron { transform: rotate(-90deg); }
.shop-group-hdr:hover .shop-grp-inner { color: #9ca3af; }
.shop-grp-label[data-cls="Herb"]      { color: #4ade80; }
.shop-grp-label[data-cls="Component"] { color: #a78bfa; }
.shop-grp-label[data-cls="Gemstone"]  { color: #38bdf8; }
.shop-grp-label[data-cls="Material"]  { color: #fb923c; }

/* ════════════════════════════════════════════════════════════════════════════
   THE RESTRICTED SECTION
   ════════════════════════════════════════════════════════════════════════════ */

/* Candle-flicker glow for the seal icon */
@keyframes candle-flicker {
  0%   { opacity: .80; filter: drop-shadow(0 0  6px rgba(185,28,28,.55)) drop-shadow(0 0 20px rgba(185,28,28,.22)); }
  20%  { opacity: .65; filter: drop-shadow(0 0  3px rgba(185,28,28,.35)) drop-shadow(0 0  8px rgba(185,28,28,.14)); }
  45%  { opacity: .90; filter: drop-shadow(0 0 14px rgba(185,28,28,.80)) drop-shadow(0 0 36px rgba(185,28,28,.35)); }
  70%  { opacity: .72; filter: drop-shadow(0 0  4px rgba(185,28,28,.45)) drop-shadow(0 0 12px rgba(185,28,28,.18)); }
  100% { opacity: .80; filter: drop-shadow(0 0  6px rgba(185,28,28,.55)) drop-shadow(0 0 20px rgba(185,28,28,.22)); }
}

/* Slow ambient crimson pulse on the page border glow */
@keyframes rs-ambient {
  0%, 100% { box-shadow: inset 0 0 60px rgba(185,28,28,.06), inset 0 0 120px rgba(185,28,28,.03); }
  50%       { box-shadow: inset 0 0 60px rgba(185,28,28,.13), inset 0 0 120px rgba(185,28,28,.07); }
}

/* Fade-in for the tome rows */
@keyframes rs-tome-in {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Page wrapper ─────────────────────────────────────────────────────────── */
.rs-page {
  animation: rs-ambient 6s ease-in-out infinite;
  border: 1px solid rgba(185,28,28,.18);
  border-radius: 4px;
  padding: 2rem 2rem 2.5rem;
  margin-bottom: 2rem;
  background: linear-gradient(160deg, rgba(9,9,11,.97) 0%, rgba(22,4,4,.95) 100%);
}

/* ── Seal (header) ───────────────────────────────────────────────────────── */
.rs-seal {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1rem 1.75rem;
  margin-bottom: 0;
}
.rs-seal__icon {
  font-size: 3.4rem;
  color: var(--clr-crimson);
  animation: candle-flicker 4.2s ease-in-out infinite;
  margin-bottom: 1rem;
}
.rs-seal__eyebrow {
  font-family: var(--ff-mono);
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(185,28,28,.70);
  margin-bottom: .6rem;
}
.rs-seal__title {
  font-family: var(--ff-lore);
  font-size: 2.2rem;
  color: var(--clr-text);
  line-height: 1.1;
  margin: 0 0 .75rem;
  text-shadow: 0 0 28px rgba(185,28,28,.40);
}
.rs-seal__ruling {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  max-width: 520px;
  margin: 0 auto .9rem;
}
.rs-seal__ruling-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(185,28,28,.45), transparent);
}
.rs-seal__ruling-glyph {
  font-size: .8rem;
  color: rgba(185,28,28,.60);
}
.rs-seal__warning {
  font-family: var(--ff-body);
  font-style: italic;
  font-size: .82rem;
  color: var(--clr-muted);
  max-width: 480px;
  line-height: 1.6;
}

/* ── Chain divider ───────────────────────────────────────────────────────── */
.rs-chain {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 1.75rem 0;
  color: rgba(185,28,28,.35);
  font-size: .7rem;
  letter-spacing: .4em;
  user-select: none;
}
.rs-chain::before,
.rs-chain::after {
  content: '';
  flex: 1;
  height: 1px;
  background: repeating-linear-gradient(
    90deg,
    rgba(185,28,28,.35) 0px,
    rgba(185,28,28,.35) 6px,
    transparent 6px,
    transparent 10px
  );
}

/* ── Access notice ───────────────────────────────────────────────────────── */
.rs-notice {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .8rem 1rem;
  border: 1px solid rgba(185,28,28,.30);
  border-left: 3px solid var(--clr-crimson);
  background: rgba(185,28,28,.07);
  border-radius: 2px;
  margin-bottom: 1.5rem;
  font-family: var(--ff-mono);
  font-size: .68rem;
  letter-spacing: .04em;
  color: var(--clr-muted);
}
.rs-notice__icon {
  color: var(--clr-crimson);
  font-size: .9rem;
  flex-shrink: 0;
  margin-top: .05rem;
}
.rs-notice a { color: rgba(185,28,28,.80); text-decoration: underline; }

/* ── Tome list (article shelf) ───────────────────────────────────────────── */
.rs-tome-list {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.rs-tome {
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(185,28,28,.20);
  border-radius: 4px;
  background: linear-gradient(100deg, rgba(22,4,4,.85) 0%, rgba(9,9,11,.80) 100%);
  overflow: hidden;
  text-decoration: none !important;
  color: var(--clr-text) !important;
  transition: border-color .18s, box-shadow .18s, background .18s, transform .12s;
  animation: rs-tome-in .35s ease both;
}
.rs-tome:hover {
  border-color: rgba(185,28,28,.60);
  box-shadow: 0 2px 20px rgba(185,28,28,.18), inset 0 0 40px rgba(185,28,28,.05);
  background: linear-gradient(100deg, rgba(40,8,8,.90) 0%, rgba(14,9,11,.88) 100%);
  transform: translateY(-1px);
}
/* Staggered animation for rows */
.rs-tome:nth-child(1)  { animation-delay: .04s; }
.rs-tome:nth-child(2)  { animation-delay: .08s; }
.rs-tome:nth-child(3)  { animation-delay: .12s; }
.rs-tome:nth-child(4)  { animation-delay: .16s; }
.rs-tome:nth-child(5)  { animation-delay: .20s; }
.rs-tome:nth-child(6)  { animation-delay: .24s; }
.rs-tome:nth-child(7)  { animation-delay: .28s; }
.rs-tome:nth-child(8)  { animation-delay: .32s; }
.rs-tome:nth-child(9)  { animation-delay: .36s; }
.rs-tome:nth-child(10) { animation-delay: .40s; }

/* Left spine — thicker, richer gradient */
.rs-tome__spine {
  width: 8px;
  background: linear-gradient(180deg,
    rgba(127,29,29,.6) 0%,
    rgba(185,28,28,1) 40%,
    rgba(185,28,28,1) 60%,
    rgba(127,29,29,.6) 100%
  );
  flex-shrink: 0;
  opacity: .6;
  transition: opacity .18s, width .18s;
}
.rs-tome:hover .rs-tome__spine { opacity: 1; width: 10px; }

/* Body */
.rs-tome__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: 1rem 1.1rem;
}
.rs-tome__title {
  font-family: var(--ff-lore);
  font-size: 1.05rem;
  color: var(--clr-text);
  line-height: 1.3;
  transition: color .12s;
}
.rs-tome:hover .rs-tome__title { color: #fca5a5; }
.rs-tome__meta {
  font-family: var(--ff-mono);
  font-size: .63rem;
  color: var(--clr-muted-dim);
  letter-spacing: .04em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  margin-top: .1rem;
}
.rs-tome__group-badge {
  display: inline-block;
  padding: .06rem .4rem;
  border: 1px solid rgba(185,28,28,.40);
  border-radius: 2px;
  color: rgba(220,100,100,.85);
  font-size: .58rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.rs-tome__draft-badge {
  display: inline-block;
  padding: .06rem .4rem;
  border: 1px solid rgba(245,158,11,.35);
  border-radius: 2px;
  color: rgba(245,158,11,.85);
  font-size: .58rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.rs-tome__staff-badge {
  display: inline-block;
  padding: .06rem .4rem;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 2px;
  color: var(--clr-muted-dim);
  font-size: .58rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* Right clasp */
.rs-tome__clasp {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 1.1rem;
  font-size: .9rem;
  color: rgba(185,28,28,.30);
  transition: color .18s, transform .18s;
}
.rs-tome:hover .rs-tome__clasp {
  color: rgba(185,28,28,.85);
  transform: translateX(2px);
}

/* Edit button overlay (staff) */
.rs-tome__edit {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 .75rem;
  font-size: .72rem;
  color: var(--clr-muted) !important;
  text-decoration: none !important;
  opacity: .35;
  border-left: 1px solid rgba(185,28,28,.12);
  transition: opacity .12s, color .12s;
}
.rs-tome:hover .rs-tome__edit { opacity: 1; }
.rs-tome__edit:hover { color: #fca5a5 !important; }

/* ── Empty state ──────────────────────────────────────────────────────────── */
.rs-empty {
  text-align: center;
  padding: 3rem 1rem;
  font-family: var(--ff-lore);
  font-style: italic;
  color: var(--clr-muted-dim);
  font-size: .9rem;
}
.rs-empty i { display: block; font-size: 2rem; margin-bottom: .75rem; opacity: .3; }

/* ── Crimson nav pill variant ─────────────────────────────────────────────── */
.nav-pill--restricted {
  border-color: rgba(185,28,28,.35) !important;
  color: rgba(185,28,28,.75) !important;
}
.nav-pill--restricted:hover,
.nav-pill--restricted:focus {
  border-color: var(--clr-crimson) !important;
  background: rgba(185,28,28,.10) !important;
  color: #fca5a5 !important;
  box-shadow: 0 0 12px rgba(185,28,28,.30) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   LANGUAGE TRANSLATOR WIDGET
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Jump-to-Translator button ──────────────────────────────────────────── */
.lx-jump-bar {
  display: flex;
  justify-content: flex-start;
  margin: 1.25rem 0 .5rem;
}

.lx-jump-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem 1.25rem;
  font-size: .92rem;
  font-weight: 600;
  border-radius: 4px;
  text-decoration: none;
  color: #f8d7da;
  background: linear-gradient(135deg, rgba(139,0,0,.55) 0%, rgba(80,0,0,.65) 100%);
  border: 1px solid rgba(185,28,28,.45);
  box-shadow: 0 2px 8px rgba(139,0,0,.25);
  transition: background .2s, box-shadow .2s, color .15s;
  letter-spacing: .02em;
  scroll-behavior: smooth;
}

.lx-jump-btn:hover,
.lx-jump-btn:focus {
  background: linear-gradient(135deg, rgba(185,28,28,.75) 0%, rgba(120,0,0,.80) 100%);
  box-shadow: 0 3px 12px rgba(185,28,28,.45);
  color: #fff;
  text-decoration: none;
}

.lx-widget {
  border: 1px solid rgba(185,28,28,.28);
  border-radius: 4px;
  background: linear-gradient(160deg, rgba(9,9,11,.97) 0%, rgba(22,4,4,.90) 100%);
  margin: 2rem 0 1.5rem;
  overflow: hidden;
}

/* ── Header bar ──────────────────────────────────────────────────────────── */
.lx-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .55rem 1rem;
  background: rgba(185,28,28,.10);
  border-bottom: 1px solid rgba(185,28,28,.22);
}
.lx-header__title {
  font-family: var(--ff-mono);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(185,28,28,.80);
  display: flex;
  align-items: center;
  gap: .4rem;
}
.lx-header__title i { font-size: .8rem; }
.lx-direction {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--ff-mono);
  font-size: .65rem;
  color: var(--clr-muted);
}
.lx-direction__label {
  padding: .2rem .5rem;
  border: 1px solid rgba(185,28,28,.30);
  border-radius: 2px;
  color: rgba(185,28,28,.75);
  white-space: nowrap;
}
.lx-direction__sep { opacity: .4; }
.lx-swap-btn {
  background: none;
  border: 1px solid rgba(185,28,28,.30);
  border-radius: 2px;
  color: rgba(185,28,28,.70);
  font-size: .8rem;
  padding: .2rem .45rem;
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
  line-height: 1;
}
.lx-swap-btn:hover {
  border-color: var(--clr-crimson);
  color: #fca5a5;
  background: rgba(185,28,28,.12);
}

/* ── Panel pair ──────────────────────────────────────────────────────────── */
.lx-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 140px;
}
@media (max-width: 640px) {
  .lx-panels { grid-template-columns: 1fr; }
}
.lx-panel {
  display: flex;
  flex-direction: column;
}
.lx-panel + .lx-panel {
  border-left: 1px solid rgba(185,28,28,.18);
}
@media (max-width: 640px) {
  .lx-panel + .lx-panel {
    border-left: none;
    border-top: 1px solid rgba(185,28,28,.18);
  }
}
.lx-panel__label {
  font-family: var(--ff-mono);
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--clr-muted-dim);
  padding: .35rem .75rem .2rem;
}
.lx-panel__input,
.lx-panel__output {
  flex: 1;
  padding: .5rem .75rem .75rem;
  font-family: var(--ff-body);
  font-size: .88rem;
  line-height: 1.6;
  color: var(--clr-text);
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  min-height: 100px;
}
.lx-panel__input::placeholder { color: var(--clr-muted-dim); }
.lx-panel__output {
  color: var(--clr-text);
  cursor: default;
  user-select: text;
}
/* Unknown word highlight */
.lx-unknown {
  color: rgba(185,28,28,.70);
  border-bottom: 1px dashed rgba(185,28,28,.45);
}

/* ── Footer toolbar ──────────────────────────────────────────────────────── */
.lx-footer {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .75rem;
  border-top: 1px solid rgba(185,28,28,.18);
  background: rgba(0,0,0,.25);
}
.lx-btn {
  font-family: var(--ff-mono);
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .25rem .6rem;
  border: 1px solid var(--clr-border-dim);
  border-radius: 2px;
  background: none;
  color: var(--clr-muted);
  cursor: pointer;
  transition: border-color .12s, color .12s;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.lx-btn:hover {
  border-color: rgba(185,28,28,.50);
  color: #fca5a5;
}
.lx-status {
  margin-left: auto;
  font-family: var(--ff-mono);
  font-size: .6rem;
  color: var(--clr-muted-dim);
  letter-spacing: .05em;
  transition: color .2s;
}
.lx-status--active { color: rgba(185,28,28,.65); }

/* ── Vocabulary table ────────────────────────────────────────────────────── */
.lx-vocab {
  margin-top: 2rem;
}
.lx-vocab__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .75rem;
}
.lx-vocab__title {
  font-family: var(--ff-mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(185,28,28,.70);
  display: flex;
  align-items: center;
  gap: .4rem;
}
.lx-vocab__controls {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.lx-vocab__search {
  font-family: var(--ff-mono);
  font-size: .7rem;
  padding: .3rem .6rem;
  border: 1px solid var(--clr-border-dim);
  border-radius: 2px;
  background: var(--clr-input-bg);
  color: var(--clr-text);
  outline: none;
  transition: border-color .12s;
  width: 160px;
}
.lx-vocab__search:focus { border-color: rgba(185,28,28,.45); }
.lx-vocab__pos-filter {
  font-family: var(--ff-mono);
  font-size: .7rem;
  padding: .3rem .5rem;
  border: 1px solid var(--clr-border-dim);
  border-radius: 2px;
  background: var(--clr-input-bg);
  color: var(--clr-text);
  outline: none;
}
.lx-vocab__table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
}
.lx-vocab__table thead tr {
  border-bottom: 1px solid rgba(185,28,28,.25);
}
.lx-vocab__table th {
  font-family: var(--ff-mono);
  font-size: .6rem;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(185,28,28,.65);
  padding: .4rem .6rem;
  text-align: left;
  font-weight: 500;
}
.lx-vocab__table td {
  padding: .35rem .6rem;
  border-bottom: 1px solid var(--clr-border-dim);
  color: var(--clr-text);
  vertical-align: top;
}
.lx-vocab__table tbody tr:hover { background: rgba(185,28,28,.04); }
.lx-vocab__table td:first-child {
  font-family: var(--ff-lore);
  font-size: .88rem;
}
.lx-vocab__table td:nth-child(2) {
  font-family: var(--ff-mono);
  font-size: .68rem;
  color: var(--clr-muted);
}
.lx-pos-badge {
  display: inline-block;
  padding: .05rem .3rem;
  border: 1px solid rgba(185,28,28,.25);
  border-radius: 2px;
  font-family: var(--ff-mono);
  font-size: .58rem;
  letter-spacing: .05em;
  color: rgba(185,28,28,.65);
  text-transform: lowercase;
}
.lx-vocab__count {
  font-family: var(--ff-mono);
  font-size: .62rem;
  color: var(--clr-muted-dim);
  margin-top: .5rem;
  text-align: right;
}

/* ── Language grammar tables (rendered from wiki markup) ─────────────────── */
.lx-grammar-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
  margin: .75rem 0 1rem;
}
.lx-grammar-table th,
.lx-grammar-table td {
  padding: .35rem .65rem;
  border: 1px solid var(--clr-border-dim);
  vertical-align: top;
  line-height: 1.5;
}
.lx-grammar-table th {
  background: rgba(185,28,28,.07);
  font-family: var(--ff-mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(185,28,28,.75);
  text-align: left;
}
.lx-grammar-table tr:hover td { background: rgba(255,255,255,.02); }

/* Sample sentence callout */
.lx-sample-native {
  font-family: var(--ff-lore);
  font-size: 1.05rem;
  letter-spacing: .02em;
  color: var(--clr-text);
  margin: .35rem 0 .25rem;
}
.lx-sample-pron {
  font-family: var(--ff-mono);
  font-size: .78rem;
  color: var(--clr-muted);
  margin: 0 0 .25rem;
}
.lx-sample-order {
  font-family: var(--ff-mono);
  font-size: .7rem;
  color: var(--clr-muted-dim);
  margin: 0;
}

/* ============================================================
   Grammar Quick Reference  (.gr-*)
   ============================================================ */

.gr-section {
  margin: 2rem 0 1.5rem;
  border: 1px solid rgba(185,28,28,.22);
  border-radius: 4px;
  background: linear-gradient(160deg, rgba(9,9,11,.97) 0%, rgba(14,3,3,.93) 100%);
  overflow: hidden;
}

/* ── Header / toggle ─────────────────────────────────────────────────────── */
.gr-header {
  border-bottom: 1px solid rgba(185,28,28,.18);
}

.gr-toggle {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  padding: .75rem 1rem;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--clr-text);
}

.gr-toggle__icon { color: rgba(220,38,38,.7); font-size: .8rem; transition: transform .25s; }
.gr-toggle[aria-expanded="false"] .gr-toggle__icon { transform: rotate(-90deg); }
.gr-toggle__title {
  font-size: .95rem;
  font-weight: 600;
  color: #f8d7da;
  letter-spacing: .02em;
}
.gr-toggle__hint {
  margin-left: auto;
  font-size: .7rem;
  color: var(--clr-muted-dim);
  font-style: italic;
}

/* ── Body ────────────────────────────────────────────────────────────────── */
.gr-body {
  padding: 1rem 1.1rem 1.2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 1.5rem;
}

@media (max-width: 900px) {
  .gr-body { grid-template-columns: 1fr; }
}

/* ── Block (verb / noun / deriv) ─────────────────────────────────────────── */
.gr-block {
  min-width: 0;   /* prevent grid blowout */
}

.gr-block--deriv {
  grid-column: 1 / -1; /* always full width */
}

.gr-block__heading {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(220,38,38,.8);
  margin: 0 0 .6rem;
  display: flex;
  align-items: center;
}

.gr-art-label {
  font-size: .75rem;
  font-style: italic;
  color: var(--clr-muted-dim);
  margin: .4rem 0 .25rem;
}

/* ── Table ───────────────────────────────────────────────────────────────── */
.gr-table-wrap {
  overflow-x: auto;
  border-radius: 3px;
  border: 1px solid rgba(185,28,28,.15);
}

.gr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .78rem;
  white-space: nowrap;
}

.gr-th {
  padding: .3rem .55rem;
  background: rgba(139,0,0,.18);
  color: rgba(248,215,218,.85);
  font-weight: 600;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  border: 1px solid rgba(185,28,28,.15);
  text-align: left;
}

.gr-th--person,
.gr-th--case {
  min-width: 6rem;
  background: rgba(139,0,0,.12);
}

.gr-td {
  padding: .3rem .55rem;
  border: 1px solid rgba(255,255,255,.05);
  vertical-align: top;
  color: var(--clr-text);
  line-height: 1.45;
}

.gr-td:hover { background: rgba(185,28,28,.08); }

/* ── Affix chips ─────────────────────────────────────────────────────────── */
.gr-affix {
  display: inline-flex;
  align-items: center;
  gap: .1rem;
  font-family: var(--ff-mono);
  font-size: .78rem;
  font-weight: 600;
  color: #f8d7da;
  background: rgba(139,0,0,.28);
  border: 1px solid rgba(185,28,28,.3);
  border-radius: 3px;
  padding: .05rem .3rem;
  white-space: nowrap;
}

.gr-affix--none { opacity: .5; font-style: italic; }
.gr-affix--particle { background: rgba(30,58,138,.3); border-color: rgba(59,130,246,.3); color: #bfdbfe; }

.gr-dash { opacity: .45; font-weight: 300; }

.gr-example {
  display: block;
  font-size: .7rem;
  color: var(--clr-muted-dim);
  font-family: var(--ff-mono);
  margin-top: .15rem;
  cursor: help;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 10rem;
}

.gr-empty { opacity: .3; }

.gr-gloss {
  display: block;
  font-size: .68rem;
  color: var(--clr-muted-dim);
  font-style: italic;
  margin-top: .1rem;
}

/* ── Aspect rows ─────────────────────────────────────────────────────────── */
.gr-aspect-rows {
  margin-top: .6rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.gr-aspect-row {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  font-size: .8rem;
  padding: .25rem .5rem;
  background: rgba(255,255,255,.03);
  border-radius: 3px;
  border: 1px solid rgba(185,28,28,.1);
}

.gr-aspect-label {
  min-width: 7rem;
  font-weight: 600;
  font-size: .75rem;
  color: rgba(220,38,38,.7);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── Derivational rules ──────────────────────────────────────────────────── */
.gr-deriv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
  gap: .3rem .75rem;
}

.gr-deriv-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  padding: .2rem .4rem;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,.04);
}

.gr-deriv-row:hover { background: rgba(185,28,28,.07); }

.gr-deriv-pos {
  display: flex;
  align-items: center;
  gap: .3rem;
  flex-shrink: 0;
}

.gr-deriv-arrow { font-size: .65rem; opacity: .5; }

.gr-deriv-desc {
  flex: 1;
  color: var(--clr-muted);
  font-size: .75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* POS badges */
.gr-pos-badge {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .05rem .3rem;
  border-radius: 2px;
  white-space: nowrap;
}

.gr-pos-badge--noun  { background: rgba(5,150,105,.25); color: #6ee7b7; border: 1px solid rgba(5,150,105,.3); }
.gr-pos-badge--verb  { background: rgba(37,99,235,.25); color: #93c5fd; border: 1px solid rgba(37,99,235,.3); }
.gr-pos-badge--adj   { background: rgba(124,58,237,.25); color: #c4b5fd; border: 1px solid rgba(124,58,237,.3); }
.gr-pos-badge--adv   { background: rgba(217,119,6,.25); color: #fcd34d; border: 1px solid rgba(217,119,6,.3); }
.gr-pos-badge--      { background: rgba(100,100,100,.2); color: var(--clr-muted); border: 1px solid rgba(100,100,100,.2); }

/* ── Language Access Portal (restricted section) ─────────────────────────── */
.lx-portal {
  margin: 2rem 0;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  overflow: hidden;
}
.lx-portal__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .85rem 1.25rem;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.lx-portal__icon {
  font-size: 1.4rem;
  color: var(--clr-accent);
  flex-shrink: 0;
}
.lx-portal__title {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--clr-accent);
}
.lx-portal__sub {
  font-size: .75rem;
  color: var(--clr-muted);
  margin-top: .1rem;
}
.lx-portal__grid {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  padding: .75rem;
}
.lx-portal__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 1rem 2.2rem 1rem 1.1rem;
  min-width: 155px;
  flex: 1 1 155px;
  background: linear-gradient(135deg, rgba(185,28,28,.10) 0%, rgba(9,9,11,.70) 100%);
  border: 1px solid rgba(185,28,28,.18);
  border-left: 3px solid rgba(185,28,28,.55);
  border-radius: 6px;
  color: var(--clr-text);
  text-decoration: none;
  transition: background .18s, border-color .18s, box-shadow .18s, transform .12s;
  cursor: pointer;
}
/* Decorative translate-icon watermark */
.lx-portal__card::after {
  content: '\F52E';  /* bi-translate codepoint */
  font-family: 'bootstrap-icons';
  position: absolute;
  right: -.1rem;
  bottom: -.4rem;
  font-size: 3rem;
  color: rgba(185,28,28,.10);
  pointer-events: none;
  transition: opacity .18s, transform .18s;
  line-height: 1;
}
.lx-portal__card:hover {
  background: linear-gradient(135deg, rgba(185,28,28,.18) 0%, rgba(14,5,5,.85) 100%);
  border-color: rgba(185,28,28,.55);
  border-left-color: rgba(185,28,28,.90);
  box-shadow: 0 4px 20px rgba(185,28,28,.18), inset 0 0 16px rgba(185,28,28,.04);
  color: var(--clr-text);
  text-decoration: none;
  transform: translateY(-2px);
}
.lx-portal__card:hover::after {
  color: rgba(185,28,28,.18);
  transform: scale(1.06) rotate(-8deg);
}
.lx-portal__card--draft {
  opacity: .65;
  border-style: dashed;
  border-left-style: solid;
}
.lx-portal__card-name {
  font-family: var(--ff-lore);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--clr-text);
  line-height: 1.2;
  transition: color .12s;
}
.lx-portal__card:hover .lx-portal__card-name { color: #fca5a5; }
.lx-portal__card-short {
  font-family: var(--ff-mono);
  font-size: .68rem;
  color: var(--clr-muted);
  margin-top: .2rem;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.lx-portal__card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin-top: .4rem;
}
.lx-portal__badge {
  font-size: .58rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .08rem .4rem;
  border-radius: 2px;
  background: rgba(185,28,28,.14);
  color: rgba(220,100,100,.85);
  border: 1px solid rgba(185,28,28,.28);
}
.lx-portal__badge--draft {
  background: rgba(234,179,8,.12);
  color: #fbbf24;
  border-color: rgba(234,179,8,.28);
}
.lx-portal__badge--staff {
  background: rgba(255,255,255,.06);
  color: var(--clr-muted);
  border-color: rgba(255,255,255,.12);
}
.lx-portal__arrow {
  position: absolute;
  right: .7rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: .8rem;
  color: rgba(185,28,28,.35);
  transition: color .15s, right .15s;
}
.lx-portal__card:hover .lx-portal__arrow {
  color: rgba(185,28,28,.85);
  right: .5rem;
}
.lx-portal__edit-btn {
  position: absolute;
  top: .35rem;
  right: .35rem;
  font-size: .65rem;
  color: var(--clr-muted);
  padding: .2rem .3rem;
  border-radius: 3px;
  background: rgba(0,0,0,.3);
  z-index: 2;
  transition: color .15s;
}
.lx-portal__edit-btn:hover { color: var(--clr-accent); }

/* ── Language portal two-column layout ──────────────────────────────────── */
.lx-portal-row {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  margin: 2rem 0;
}
.lx-portal-row .lx-portal {
  flex: 0 0 48%;
  margin: 0;
}
.lx-portal-flavor {
  flex: 1 1 0;
  padding: 1.5rem 1.25rem;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  font-size: .88rem;
  line-height: 1.75;
  color: var(--clr-muted);
}
.lx-portal-flavor p {
  margin: 0 0 .9rem;
}
.lx-portal-flavor p:last-of-type {
  margin-bottom: 0;
}
.lx-portal-flavor__heading {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--clr-accent);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .45rem;
}
.lx-portal-flavor__sig {
  margin-top: 1.1rem;
  font-size: .78rem;
  color: rgba(255,255,255,.3);
  font-style: italic;
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: .75rem;
}
@media (max-width: 768px) {
  .lx-portal-row { flex-direction: column; }
  .lx-portal-row .lx-portal { flex: none; width: 100%; }
}

/* ── Race Packets section (restricted section) ─────────────────────────── */
.rp-section {
  margin: 2rem 0;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  overflow: hidden;
}
.rp-section__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .85rem 1.25rem;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.rp-section__icon {
  font-size: 1.4rem;
  color: var(--clr-accent);
  flex-shrink: 0;
}
.rp-section__title {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--clr-accent);
}
.rp-section__sub {
  font-size: .75rem;
  color: var(--clr-muted);
  margin-top: .1rem;
}
.rp-section__grid {
  display: flex;
  flex-wrap: wrap;
  padding: .75rem;
  gap: .5rem;
}

/* ── Base card ──────────────────────────────────────────────────────────── */
.rp-card {
  --rp-clr: rgba(185,28,28,.80);
  --rp-glow: rgba(185,28,28,.20);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 1.1rem .85rem .95rem;
  flex: 1 1 130px;
  min-width: 130px;
  max-width: 175px;
  background: linear-gradient(160deg, rgba(15,5,5,.92) 0%, rgba(9,9,11,.88) 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-top: 2px solid var(--rp-clr);
  border-radius: 6px;
  color: var(--clr-text);
  text-decoration: none;
  text-align: center;
  transition: background .18s, border-color .18s, box-shadow .18s, transform .12s;
}

/* Decorative watermark icon */
.rp-card__watermark {
  position: absolute;
  right: -10px;
  bottom: -8px;
  font-size: 4rem;
  color: var(--rp-clr);
  opacity: .07;
  pointer-events: none;
  line-height: 1;
  transition: opacity .18s, transform .18s;
}

.rp-card--available { cursor: pointer; }
.rp-card--available:hover {
  background: linear-gradient(160deg, rgba(25,8,8,.96) 0%, rgba(14,9,11,.94) 100%);
  border-color: var(--rp-clr);
  box-shadow: 0 4px 24px var(--rp-glow), inset 0 0 20px rgba(0,0,0,.3);
  transform: translateY(-2px);
  text-decoration: none;
  color: var(--clr-text);
}
.rp-card--available:hover .rp-card__watermark {
  opacity: .14;
  transform: scale(1.08) rotate(-5deg);
}

.rp-card--pending {
  opacity: .60;
  cursor: default;
  border-top-color: rgba(185,28,28,.35);
}
.rp-card--locked {
  opacity: .22;
  cursor: default;
  filter: grayscale(.7);
  border-top-color: rgba(255,255,255,.08);
}

/* Icon */
.rp-card__icon {
  font-size: 1.45rem;
  margin-bottom: .45rem;
  color: var(--rp-clr);
  transition: transform .15s;
}
.rp-card--available:hover .rp-card__icon { transform: scale(1.12); }
.rp-card--locked .rp-card__icon { color: var(--clr-muted); }

.rp-card__name {
  font-family: var(--ff-lore);
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .01em;
}
.rp-card__status {
  font-family: var(--ff-mono);
  font-size: .62rem;
  margin-top: .35rem;
  color: var(--clr-muted-dim);
  text-transform: uppercase;
  letter-spacing: .08em;
  display: flex;
  align-items: center;
  gap: .25rem;
}
.rp-card__arrow {
  position: absolute;
  bottom: .55rem;
  right: .6rem;
  font-size: .7rem;
  color: var(--rp-clr);
  opacity: .4;
  transition: opacity .15s, transform .15s;
}
.rp-card--available:hover .rp-card__arrow { opacity: 1; transform: translateX(2px); }

/* ── Per-race faction accent colours ─────────────────────────────────────── */
/* Derived from kingdom/faction colours in Tala lore */
.rp-card--beastkin      { --rp-clr: #d97706; --rp-glow: rgba(217,119,6,.22); }
.rp-card--chaos-faerie  { --rp-clr: #9333ea; --rp-glow: rgba(147,51,234,.22); }
.rp-card--draconian     { --rp-clr: #7c3aed; --rp-glow: rgba(124,58,237,.22); }
.rp-card--drow          { --rp-clr: #6366f1; --rp-glow: rgba(99,102,241,.22); }
.rp-card--dwarf         { --rp-clr: #ca8a04; --rp-glow: rgba(202,138,4,.22); }   /* Forsetidale gold */
.rp-card--faerie        { --rp-clr: #16a34a; --rp-glow: rgba(22,163,74,.22); }   /* Tuatha green */
.rp-card--half-celestial{ --rp-clr: #f59e0b; --rp-glow: rgba(245,158,11,.22); }  /* divine gold */
.rp-card--half-fiend    { --rp-clr: #dc2626; --rp-glow: rgba(220,38,38,.22); }   /* Seshtau crimson */
.rp-card--half-ogre     { --rp-clr: #78716c; --rp-glow: rgba(120,113,108,.18); }
.rp-card--half-orc      { --rp-clr: #65a30d; --rp-glow: rgba(101,163,13,.22); }
.rp-card--haltija       { --rp-clr: #a855f7; --rp-glow: rgba(168,85,247,.22); }  /* Seshtau shadow/undeath */
.rp-card--high-elf      { --rp-clr: #e5c46a; --rp-glow: rgba(229,196,106,.22); } /* Leib-Olmai gold */
.rp-card--pixie         { --rp-clr: #ec4899; --rp-glow: rgba(236,72,153,.22); }
.rp-card--ramtovi       { --rp-clr: #0ea5e9; --rp-glow: rgba(14,165,233,.22); }  /* arctic blue */
.rp-card--wild-elf      { --rp-clr: #22c55e; --rp-glow: rgba(34,197,94,.22); }   /* Tuatha forest */

@media (max-width: 768px) {
  .rp-section__grid { gap: .35rem; }
  .rp-card { flex: 1 1 100px; min-width: 100px; max-width: calc(50% - .35rem); }
}

/* ══════════════════════════════════════════════════════════════════════════ */
/* ── Restricted Article template (ra-*) ─────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════════════ */

/* ── Page layout (sidebar + content) ────────────────────────────────────── */
.ra-layout {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.ra-sidebar {
  /* inherits kb-toc-sidebar dimensions/sticky behaviour */
  border-color: rgba(185,28,28,.22) !important;
  scrollbar-color: rgba(185,28,28,.18) transparent;
}
.ra-sidebar::-webkit-scrollbar-thumb { background: rgba(185,28,28,.18); }

.ra-sidebar__back {
  margin-bottom: .9rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid rgba(185,28,28,.18);
}
.ra-sidebar__back-link {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--ff-mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(185,28,28,.75);
  text-decoration: none;
  transition: color .12s;
}
.ra-sidebar__back-link:hover { color: #fca5a5; text-decoration: none; }
.ra-sidebar__back-link .bi { font-size: .75rem; }

.ra-sidebar__section-label {
  font-family: var(--ff-mono);
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: rgba(185,28,28,.55);
  margin-bottom: .4rem;
}
.ra-sidebar__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}
.ra-sidebar__item {
  display: block;
  padding: .22rem .45rem;
  font-family: var(--ff-ui);
  font-size: .8rem;
  color: var(--clr-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  border-radius: 1px;
  transition: color .1s, border-color .1s, background .1s;
  line-height: 1.4;
}
.ra-sidebar__item:hover {
  color: #fca5a5;
  background: rgba(185,28,28,.06);
  text-decoration: none;
}
.ra-sidebar__item--active {
  color: #fca5a5;
  border-left-color: rgba(185,28,28,.70);
  background: rgba(185,28,28,.08);
}
.ra-sidebar__toc-divider {
  margin: .7rem 0 .4rem;
  padding-top: .7rem;
  border-top: 1px solid rgba(185,28,28,.14);
}
.ra-sidebar__toc-label {
  font-family: var(--ff-mono);
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: rgba(185,28,28,.55);
}
/* Override the gold ToC active colour with crimson for restricted articles */
.ra-toc a.kb-toc--active {
  color: #fca5a5;
  border-left-color: rgba(185,28,28,.70);
  background: rgba(185,28,28,.08);
}

/* ── Main content column ─────────────────────────────────────────────────── */
.ra-content {
  flex: 1;
  min-width: 0;
}

/* ── Tome cover / header ─────────────────────────────────────────────────── */
.ra-cover {
  position: relative;
  background: linear-gradient(160deg, rgba(22,4,4,.98) 0%, rgba(9,9,11,.97) 100%);
  border: 1px solid rgba(185,28,28,.30);
  border-radius: 4px;
  padding: 2rem 2rem 1.5rem;
  margin-bottom: 1.25rem;
  text-align: center;
  overflow: hidden;
}
/* Subtle corner ornament */
.ra-cover::before,
.ra-cover::after {
  content: '';
  position: absolute;
  width: 60px;
  height: 60px;
  border: 1px solid rgba(185,28,28,.18);
}
.ra-cover::before { top: 8px; left: 8px; border-right: none; border-bottom: none; }
.ra-cover::after  { bottom: 8px; right: 8px; border-left: none; border-top: none; }

.ra-cover__ornament {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .85rem;
}
.ra-cover__ornament--bottom { margin-top: .85rem; margin-bottom: .6rem; }
.ra-cover__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(185,28,28,.45), transparent);
}
.ra-cover__seal {
  font-size: 1.1rem;
  color: rgba(185,28,28,.75);
  flex-shrink: 0;
}
.ra-cover__glyph {
  font-size: .55rem;
  color: rgba(185,28,28,.45);
  flex-shrink: 0;
}
.ra-cover__eyebrow {
  font-family: var(--ff-mono);
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: rgba(185,28,28,.60);
  margin-bottom: .6rem;
}
.ra-cover__title {
  font-family: var(--ff-lore);
  font-size: 2rem;
  font-weight: 700;
  color: var(--clr-text);
  line-height: 1.2;
  margin: 0;
  text-shadow: 0 2px 20px rgba(185,28,28,.25);
}
.ra-cover__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  font-family: var(--ff-mono);
  font-size: .67rem;
  color: var(--clr-muted-dim);
  margin-top: .65rem;
}
.ra-cover__meta-sep { opacity: .4; }
.ra-badge {
  display: inline-block;
  padding: .07rem .45rem;
  border: 1px solid rgba(185,28,28,.38);
  border-radius: 2px;
  color: rgba(220,100,100,.85);
  font-size: .58rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ra-badge--staff {
  border-color: rgba(255,255,255,.14);
  color: var(--clr-muted-dim);
}
.ra-badge--draft {
  border-color: rgba(245,158,11,.35);
  color: rgba(245,158,11,.85);
}
.ra-cover__back {
  display: inline-flex;
  align-items: center;
  margin-top: 1rem;
  padding: .35rem .9rem;
  border: 1px solid rgba(185,28,28,.30);
  border-radius: 3px;
  font-family: var(--ff-mono);
  font-size: .72rem;
  color: rgba(185,28,28,.70);
  text-decoration: none;
  transition: border-color .15s, color .15s, background .15s;
}
.ra-cover__back:hover {
  border-color: rgba(185,28,28,.70);
  color: #fca5a5;
  background: rgba(185,28,28,.08);
  text-decoration: none;
}

/* ── Body / prose ────────────────────────────────────────────────────────── */
.ra-body {
  background: linear-gradient(180deg, rgba(14,5,5,.80) 0%, rgba(9,9,11,.75) 100%);
  border: 1px solid rgba(185,28,28,.15);
  border-radius: 4px;
  padding: 1.75rem 2rem;
  margin-bottom: 1.25rem;
}
.ra-prose { color: var(--clr-text); line-height: 1.75; }
.ra-prose p { margin-bottom: 1rem; }
.ra-prose ul,
.ra-prose ol { padding-left: 1.6rem; margin-bottom: 1rem; }
.ra-prose li { margin-bottom: .3rem; }
.ra-prose h1,
.ra-prose h2,
.ra-prose h3,
.ra-prose h4 {
  font-family: var(--ff-lore);
  color: #fca5a5;
  margin: 1.8rem 0 .7rem;
  line-height: 1.25;
}
.ra-prose h2 {
  font-size: 1.15rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid rgba(185,28,28,.22);
}
.ra-prose h3 { font-size: 1rem; }
.ra-prose h1:first-child,
.ra-prose h2:first-child,
.ra-prose h3:first-child { margin-top: 0; }
.ra-prose a { color: #fca5a5; }
.ra-prose a:hover { color: var(--clr-text); }
.ra-prose blockquote {
  border-left: 3px solid rgba(185,28,28,.45);
  margin: 1rem 0;
  padding: .5rem 1rem;
  color: var(--clr-muted);
  font-style: italic;
}
.ra-prose table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
  font-size: .88rem;
}
.ra-prose table th,
.ra-prose table td {
  padding: .5rem .75rem;
  border: 1px solid rgba(185,28,28,.18);
}
.ra-prose table th {
  background: rgba(185,28,28,.12);
  color: #fca5a5;
  font-weight: 600;
  text-transform: uppercase;
  font-size: .75rem;
  letter-spacing: .05em;
}
.ra-prose table tr:nth-child(even) td { background: rgba(185,28,28,.04); }
.ra-prose em { color: rgba(252,165,165,.70); font-style: italic; }

/* ── See Also ────────────────────────────────────────────────────────────── */
.ra-see-also {
  background: rgba(14,5,5,.70);
  border: 1px solid rgba(185,28,28,.15);
  border-radius: 4px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}
.ra-see-also__heading {
  font-family: var(--ff-mono);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(185,28,28,.60);
  margin: 0 0 .6rem;
}
.ra-see-also__links { display: flex; flex-direction: column; gap: .3rem; }
.ra-see-also__item {
  display: flex;
  align-items: baseline;
  gap: .3rem;
  color: #fca5a5;
  text-decoration: none;
  font-size: .88rem;
  transition: color .1s;
}
.ra-see-also__item:hover { color: var(--clr-text); text-decoration: none; }
.ra-see-also__cat {
  font-size: .72rem;
  color: var(--clr-muted-dim);
  margin-left: .25rem;
}

/* ── Footer seal ─────────────────────────────────────────────────────────── */
.ra-footer {
  text-align: center;
  padding: 1.25rem 1rem 1rem;
  margin-bottom: .5rem;
}
.ra-footer__inner {
  display: inline-block;
  padding: .65rem 1.4rem;
  background: rgba(9,9,11,.85);
  border: 1px solid rgba(185,28,28,.18);
  border-radius: 4px;
}
.ra-footer__chain {
  font-size: 1.5rem;
  color: rgba(185,28,28,.50);
  margin-bottom: .4rem;
  letter-spacing: .3em;
}
.ra-footer__text {
  font-family: var(--ff-mono);
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(185,28,28,.55);
  line-height: 1.7;
}

/* ── Prev / next nav ─────────────────────────────────────────────────────── */
.ra-prevnext {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .5rem;
}
.ra-prevnext__btn {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1rem;
  border: 1px solid rgba(185,28,28,.22);
  border-radius: 3px;
  background: rgba(9,9,11,.70);
  color: var(--clr-muted) !important;
  text-decoration: none !important;
  font-size: .82rem;
  transition: border-color .15s, color .15s, background .15s;
  max-width: 45%;
}
.ra-prevnext__btn:hover {
  border-color: rgba(185,28,28,.55);
  color: #fca5a5 !important;
  background: rgba(185,28,28,.06);
}
.ra-prevnext__btn--next { margin-left: auto; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .ra-layout { flex-direction: column; }
  .ra-sidebar { width: 100%; position: static; max-height: none; }
  .ra-cover__title { font-size: 1.5rem; }
  .ra-body { padding: 1.25rem 1.1rem; }
}

/* ── AI & Policy Tab ─────────────────────────────────────────────────────── */
.ai-artist-callout {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  background: rgba(201,162,39,.07);
  border: 1.5px solid rgba(201,162,39,.45);
  border-left: 4px solid var(--clr-cyan);
  border-radius: 3px;
  padding: 1.2rem 1.4rem;
  margin-bottom: 1.75rem;
  box-shadow: 0 0 18px rgba(201,162,39,.10), inset 0 0 30px rgba(201,162,39,.03);
  animation: pulse-glow 3.5s ease-in-out infinite;
}
.ai-artist-callout__icon {
  font-size: 1.9rem;
  color: var(--clr-cyan);
  flex-shrink: 0;
  margin-top: .1rem;
  filter: drop-shadow(0 0 6px rgba(201,162,39,.55));
}
.ai-artist-callout__title {
  font-family: var(--ff-lore);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--clr-cyan);
  letter-spacing: .03em;
  margin-bottom: .5rem;
}
.ai-artist-callout__text {
  font-family: var(--ff-body);
  font-size: .96rem;
  color: var(--clr-text);
  margin: 0;
  line-height: 1.65;
}
.ai-policy-list {
  list-style: none;
  padding: 0;
  margin: 0 0 .75rem;
}
.ai-policy-list li {
  font-family: var(--ff-body);
  font-size: .93rem;
  color: var(--clr-muted);
  padding: .45rem 0;
  border-bottom: 1px solid rgba(201,162,39,.08);
  line-height: 1.5;
}
.ai-policy-list li:last-child { border-bottom: none; }
.ai-policy-label {
  font-family: var(--ff-ui);
  font-size: .75rem;
  font-weight: 700;
  color: var(--clr-text);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-right: .25rem;
}
.ai-policy-note {
  font-family: var(--ff-mono);
  font-size: .75rem;
  color: var(--clr-muted);
  margin: .5rem 0 0;
  opacity: .75;
}
.ai-attribution-row {
  padding: .7rem 0;
  border-bottom: 1px solid var(--clr-border);
}
.ai-attribution-row:last-child { border-bottom: none; }
.ai-attribution-row__system {
  display: flex;
  align-items: center;
  font-family: var(--ff-ui);
  font-size: .82rem;
  font-weight: 700;
  color: var(--clr-text);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .3rem;
}
.ai-attribution-row__use {
  font-family: var(--ff-body);
  font-size: .88rem;
  color: var(--clr-muted);
  padding-left: 1.6rem;
}
.ai-oracle-tool {
  padding: .75rem 0;
  border-bottom: 1px solid var(--clr-border);
}
.ai-oracle-tool:last-child { border-bottom: none; }
.ai-oracle-tool__name {
  font-family: var(--ff-ui);
  font-size: .8rem;
  font-weight: 700;
  color: var(--clr-cyan);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .3rem;
}
.ai-oracle-tool__desc {
  font-family: var(--ff-body);
  font-size: .9rem;
  color: var(--clr-muted);
  line-height: 1.55;
}