/* ============================================================
   NAQS Padi — Design System v4 (single generation)
   Palette: NAQS quarantine green · gazette parchment · crest red
   Typography: Crimson Pro (display/headings) + Inter (body/UI)
   Replaces the v2 token layer and the appended v3 glass appendix:
   every rule below consumes these tokens; themes flip by re-pointing
   them under [data-theme="dark"] only.
   ============================================================ */

:root{
  /* ── Green scale (quarantine green) ───────────────────────── */
  --green-050: #F0F7F2;
  --green-100: #E4F0E7;
  --green-200: #C4E0CD;
  --green-300: #8FC2A1;
  --green-400: #3aad66;
  --green-500: #279652;
  --green-600: #1D7A41;
  --green-600-hover: #218B4A;
  --green-700: #166032;
  --green-700-real: #166032;
  --green-800: #124A26;
  --green-900: #0C331A;
  --green-950: #07210D;
  --green-glow: rgba(29, 122, 65, 0.22);
  --green-glow-strong: rgba(29, 122, 65, 0.40);

  /* ── Gold scale (gazette parchment) ───────────────────────── */
  --gold-050: #FBF9F1;
  --gold-100: #F3EEDD;
  --gold-200: #E8DFC2;
  --gold-300: #D4C99A;
  --gold-400: #B9A96A;
  --gold-500: #9C8B47;

  /* ── Surface system (page / cards / inputs / borders) ───────
     Light mode mirrors the parchment golds. Dark mode flips these
     to deep greens — NOT amber — so white text stays readable.
     Text/accent usages keep using the gold tokens, which stay
     luminous in dark mode. */
  --surface-1: #FBF9F1;
  --surface-2: #F3EEDD;
  --surface-3: #E8DFC2;
  --border-soft: #E8DFC2;

  /* ── Ink scale (text on light surfaces) ───────────────────── */
  --ink-050: #F6F5EF;
  --ink-100: #ECEAE0;
  --ink-300: #6F6D60;
  --ink-600: #4D4B43;
  --ink-800: #2A2921;
  --ink-900: #1A1A14;
  --ink-950: #12110C;

  /* ── Alert / crest red + semantic ─────────────────────────── */
  --red-700: #8E1B1B;
  --red-600: #A82424;
  --red-100: #F7E7E5;
  --success: #1D7A41;
  --success-soft: #E4F0E7;
  --warning: #9A6B08;
  --warning-soft: #FCF3DD;
  --error: #A82424;
  --error-soft: #F7E7E5;
  --info: #1F5E8C;
  --info-soft: #E3EFF6;

  /* ── Typography ───────────────────────────────────────────── */
  --font-heading: 'Crimson Pro', Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Legacy aliases (v2 rules keep working) */
  --serif: var(--font-heading);
  --sans: var(--font-ui);

  /* Fluid type scale — clamp()-based, no breakpoint re-declaration */
  --text-xs: 0.75rem;                          /* 12px */
  --text-sm: 0.875rem;                         /* 14px */
  --text-base: 1rem;                           /* 16px */
  --text-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);   /* 17-19px */
  --text-xl: clamp(1.1875rem, 1.05rem + 0.6vw, 1.375rem); /* 19-22px */
  --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);      /* 24-30px */
  --text-3xl: clamp(1.875rem, 1.5rem + 1.6vw, 2.5rem);    /* 30-40px */
  --text-display: clamp(2.125rem, 1.5rem + 2.6vw, 3.25rem);/* 34-52px */

  /* ── Spacing scale (4px base grid) ────────────────────────── */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px;

  /* ── Radii: buttons sm · cards lg · modals xl ─────────────── */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ── Elevation (neutral) + brand glow (reserved for 1-2 CTAs) ── */
  --shadow-xs: 0 1px 2px rgba(12, 51, 26, 0.06);
  --shadow-card: 0 1px 3px rgba(12,51,26,0.07), 0 4px 16px rgba(12,51,26,0.08);
  --shadow-elevated: 0 4px 12px rgba(12,51,26,0.12), 0 16px 40px rgba(12,51,26,0.12);
  --shadow-modal: 0 8px 24px rgba(7, 33, 13, 0.18), 0 24px 64px rgba(7, 33, 13, 0.24);
  --shadow-glow: 0 0 0 3px var(--green-glow);
  --shadow-glow-strong: 0 4px 20px var(--green-glow-strong), 0 0 0 3px var(--green-glow);
  --shadow-inner: inset 0 1px 3px rgba(0,0,0,0.08);

  /* ── Glass depth system (2 intensities used app-wide) ─────── */
  --glass-bg-l1: rgba(255, 255, 255, 0.72);
  --glass-bg-l2: rgba(255, 255, 255, 0.60);
  --glass-bg-l3: rgba(255, 255, 255, 0.42);
  --glass-border-l1: rgba(27, 41, 31, 0.10);
  --glass-border-l2: rgba(27, 41, 31, 0.08);
  --glass-border-l3: rgba(27, 41, 31, 0.06);
  --glass-blur: blur(16px) saturate(160%);
  /* v3 aliases retained for existing rules */
  --glass-bg: var(--glass-bg-l1);
  --glass-bg-hover: rgba(255, 255, 255, 0.82);
  --glass-border: var(--glass-border-l1);
  --glass-border-subtle: var(--glass-border-l3);
  --glass-shadow: var(--shadow-card);
  --glass-shadow-elevated: var(--shadow-elevated);
  --glass-shadow-3d: var(--shadow-modal);
  --glass-highlight: rgba(255, 255, 255, 0.55);

  /* ── Z-index scale ────────────────────────────────────────── */
  --z-nav: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;

  /* ── Motion: luxury ease, fast/slow ───────────────────────── */
  --ease-luxury: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --motion-fast: 180ms;
  --motion-slow: 480ms;
  /* v2 aliases retained */
  --transition-fast: var(--motion-fast) var(--ease-luxury);
  --transition-smooth: 220ms var(--ease-luxury);
  --transition-bounce: 300ms var(--ease-spring);

  --white: #FFFFFF;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; overflow-x:hidden; }

body{
  font-family:var(--sans);
  background:var(--green-950);
  color:var(--ink-900);
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
img{ max-width:100%; display:block; }

/* ---------- Responsive App Container ---------- */
.device{
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  margin: 0 auto;
  background: var(--surface-1);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
@media (min-width: 640px){
  body{
    padding: 24px 16px;
    background: radial-gradient(circle at 50% 10%, #0d381c 0%, var(--green-950) 100%);
  }
  .device{
    max-width: 880px;
    min-height: calc(100vh - 48px);
    border-radius: 24px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(255, 255, 255, 0.08);
    overflow: hidden;
  }
}
@media (min-width: 1024px){
  .device{
    max-width: 960px;
  }
}

/* ---------- App header — premium gradient ---------- */
.app-header{
  background: linear-gradient(135deg, var(--green-950) 0%, var(--green-900) 60%, var(--green-800) 100%);
  color:var(--gold-050);
  padding:0 16px;
  height: 56px;
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
  border-bottom:2px solid var(--green-600);
  box-shadow: 0 2px 12px rgba(7,33,13,0.35);
  position:relative;
  z-index:100;
  /* Guarantee nothing overflows the header bar */
  overflow:visible;
}
.app-header .crest{
  width:36px; height:36px; border-radius:50%;
  background:#ffffff;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25), 0 0 0 2px rgba(255,255,255,0.12);
  overflow:hidden;
  padding:2px;
}
/* Official NAQS crest */
.app-header .crest img,
.seal img{
  width:100%; height:100%; object-fit:contain; display:block;
}
/* Titles area takes all remaining space — truncates if needed */
.app-header .titles{
  flex:1;
  min-width:0;
  overflow:hidden;
}
.app-header .titles .org{
  font-family:var(--serif);
  font-size:15px;
  line-height:1.2;
  letter-spacing:.3px;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.app-header .titles .page-label{
  font-size:11px;
  color:#9FC9A6;
  margin-top:1px;
  font-weight:500;
  letter-spacing:0.1px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* Settings back button — kept in settings.html only */
.settings-back-btn{
  width:36px; height:36px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,0.2);
  background:rgba(255,255,255,0.08);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold-100);
  font-size:16px;
  flex-shrink:0;
  transition: background var(--transition-fast);
}
.settings-back-btn:hover{ background:rgba(255,255,255,0.16); }

/* ---------- Scroll content area ---------- */
.app-content{
  flex:1;
  overflow-y:auto;
  padding:16px 16px 90px;
}

/* ---------- Bottom nav — frosted glass ---------- */
.bottom-nav{
  position:sticky;
  bottom:0;
  background: rgba(12,51,26,0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top:1px solid rgba(29,122,65,0.25);
  display:flex;
  flex-shrink:0;
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  box-shadow: 0 -2px 16px rgba(7,33,13,0.28);
  z-index:10;
}
.bottom-nav a{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  padding:7px 2px;
  color:#7AA882;
  font-size:10.5px;
  border-radius:10px;
  font-weight:500;
  transition: color var(--transition-fast), background var(--transition-fast);
  position:relative;
}
.bottom-nav a.active{ color:#FEF08A; font-weight:700; }
.bottom-nav a.active svg{ stroke:#FEF08A; transform:scale(1.08); }
[data-theme="dark"] .bottom-nav a{ color:#94A3B8; }
[data-theme="dark"] .bottom-nav a.active{ color:#4ADE80 !important; font-weight:700; }
[data-theme="dark"] .bottom-nav a.active svg{ stroke:#4ADE80 !important; }
/* Active glow underline */
.bottom-nav a.active::after{
  content:'';
  position:absolute;
  bottom:2px;
  left:50%;
  transform:translateX(-50%);
  width:20px;
  height:2.5px;
  border-radius:2px;
  background: #4ADE80;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.85);
}
.bottom-nav a:active svg{ transform:scale(0.92); }

/* ---------- Section basics ---------- */
.section-label{
  font-size:11px;
  font-weight:600;
  color:var(--green-700-real);
  margin:22px 0 10px;
}
.section-label:first-child{ margin-top:2px; }

h1.page-title{
  font-family:var(--serif);
  font-size:22px;
  line-height:1.25;
  margin:2px 0 4px;
  color:var(--ink-900);
}
.page-sub{
  font-size:13px;
  color:var(--ink-600);
  margin:0 0 4px;
}

/* ---------- Card — glassmorphism elevation ---------- */
.card{
  background: rgba(255,255,255,0.92);
  border:1px solid var(--gold-200);
  border-radius:var(--radius-md);
  padding:16px;
  box-shadow:var(--shadow-card);
  transition: box-shadow var(--transition-smooth), transform var(--transition-smooth);
}
.card:hover { box-shadow: var(--shadow-elevated); }
.card + .card{ margin-top:12px; }

/* ---------- Buttons — premium gradient + hover lift ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; border-radius:var(--radius-md); padding:12px 18px;
  font-size:14px; font-weight:600;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
  cursor:pointer;
  letter-spacing:0.1px;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0) scale(0.98); }
.btn-primary{
  background: linear-gradient(135deg, var(--green-600) 0%, var(--green-700-real) 100%);
  color:#fff;
  box-shadow: 0 2px 8px var(--green-glow), 0 1px 3px rgba(0,0,0,0.12);
}
.btn-primary:hover{
  background: linear-gradient(135deg, var(--green-600-hover) 0%, var(--green-600) 100%);
  box-shadow: 0 4px 16px var(--green-glow-strong), 0 1px 4px rgba(0,0,0,0.16);
}
.btn-outline{ background:transparent; border:1.5px solid var(--gold-200); color:var(--ink-900); }
.btn-outline:hover{ border-color:var(--green-500); background: rgba(29,122,65,0.05); }
.btn-trivia{
  background: linear-gradient(135deg, #b45309 0%, #92400e 100%);
  color: #fff;
  border: 1px solid rgba(245, 158, 11, 0.4);
  box-shadow: 0 2px 8px rgba(180, 83, 9, 0.35);
  font-weight: 700;
  text-decoration: none;
}
.btn-trivia:hover,
.btn-trivia:focus-visible{
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  box-shadow: 0 4px 16px rgba(217, 119, 6, 0.45);
  transform: translateY(-1px);
  outline: none;
}
.btn-block{ width:100%; }

/* ---------- Role badge ---------- */
.badge{
  display:inline-block;
  font-size:10px;
  font-weight:700;
  letter-spacing:.3px;
  padding:3px 8px;
  border-radius:20px;
}
.badge-staff{ background:var(--red-100); color:var(--red-700); }
.badge-client{ background:var(--green-100); color:var(--green-700-real); }
.badge-stakeholder{ background: var(--surface-3); color:var(--ink-600); }

/* ---------- Utility ---------- */
.row{ display:flex; align-items:center; }
.between{ justify-content:space-between; }
.gap-8{ gap:8px; } .gap-12{ gap:12px; }
.muted{ color:var(--ink-600); font-size:12.5px; }
.divider{ height:1px; background: var(--surface-3); margin:12px 0; }
.icon-btn{
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--gold-200); background:var(--white);
  display:flex; align-items:center; justify-content:center;
}

/* ============================================================
   PAGE-SPECIFIC: index.html — Splash Screen
   ============================================================ */
body{ background:var(--green-950); }
.splash{
  max-width:430px; min-height:100vh; margin:0 auto;
  background:radial-gradient(circle at 50% 18%, #163B22 0%, #0C331A 55%, #08260F 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:var(--gold-050); text-align:center; padding:32px;
}
@media (min-width:431px){
  body{ padding:28px 0; }
  .splash{ min-height:844px; height:844px; border-radius:34px; box-shadow:0 30px 60px rgba(0,0,0,0.45), 0 0 0 8px #05130a; }
}
.seal{
  width:112px; height:112px; border-radius:50%;
  background:#ffffff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,0.4), 0 0 0 6px rgba(255,255,255,0.08);
  margin-bottom:22px;
  padding:8px;
  overflow:hidden;
  font-size:46px;
  padding:4px;
  overflow:hidden;
}
.seal img{ width:100%; height:100%; object-fit:contain; }
.org-name{
  font-family:var(--serif);
  font-size:21px;
  line-height:1.35;
  letter-spacing:.2px;
  max-width:300px;
}
.org-sub{
  font-size:12px;
  color:#9FBCA4;
  letter-spacing:1.5px;
  text-transform:uppercase;
  margin-top:8px;
}
.load-wrap{
  width:300px;
  max-width:92%;
  margin-top:36px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
}
.load-track{
  height:6px; width:100%; background:#163F22; border-radius:6px; overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(0,0,0,0.3);
}
.load-fill{
  height:100%; width:0%; background:linear-gradient(90deg, #D4AF37 0%, var(--gold-050) 100%);
  border-radius:6px;
  transition:width .16s cubic-bezier(0.4, 0, 0.2, 1);
}
.load-meta{
  display:flex; justify-content:space-between; align-items:center;
  font-size:12px; color:#A8C5AE; margin-top:10px; font-weight:500;
}
.load-countdown-wrap{
  margin-top:8px;
  text-align:center;
  font-size:12px;
  color:var(--gold-050);
  font-weight:600;
  letter-spacing:0.3px;
  background:rgba(255,255,255,0.06);
  padding:4px 10px;
  border-radius:12px;
  border:1px solid rgba(230,216,181,0.2);
}

/* User-friendly error notice if navigation encounters issues */
.splash-error-notice{
  margin-top:14px;
  padding:10px 14px;
  background:rgba(142, 27, 27, 0.35);
  border:1px solid rgba(232, 223, 194, 0.3);
  border-radius:var(--radius-md);
  color:var(--gold-050);
  font-size:12.5px;
  line-height:1.5;
  text-align:center;
  animation:fadeIn 200ms ease;
}
.splash-error-notice[hidden]{ display:none; }

/* CTA button — hidden until loading completes (at 100%), then fades+scales in */
.splash-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:48px;
  margin-top:18px;
  padding:12px 20px;
  background:linear-gradient(135deg, var(--green-600) 0%, var(--green-500) 100%);
  color:var(--gold-050);
  font-family:var(--sans);
  font-size:14px;
  font-weight:700;
  letter-spacing:0.6px;
  text-transform:uppercase;
  text-align:center;
  text-decoration:none;
  border-radius:var(--radius-lg);
  border:1px solid rgba(212, 175, 55, 0.35);
  cursor:pointer;
  box-shadow:0 4px 20px rgba(29,122,65,0.45), 0 0 0 0 rgba(39,150,82,0);
  opacity:0;
  transform:translateY(12px) scale(0.96);
  transition:
    opacity 400ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 200ms ease,
    background 200ms ease,
    border-color 200ms ease;
  pointer-events:none;
}
/* [hidden] attribute hides the button before JS removes it */
.splash-cta[hidden]{ display:none; }

/* When JS adds the --visible modifier after reaching 100% */
.splash-cta.splash-cta--visible{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.splash-cta:hover,
.splash-cta:focus-visible{
  background:linear-gradient(135deg, var(--green-500) 0%, var(--green-400) 100%);
  border-color:var(--gold-300);
  box-shadow:0 6px 28px rgba(29,122,65,0.55), 0 0 0 3px rgba(212, 201, 154, 0.40);
  transform:translateY(-2px) scale(1.01);
  outline:none;
}
.splash-cta:active{
  transform:translateY(0) scale(0.98);
  box-shadow:0 2px 10px rgba(29,122,65,0.35);
}
.splash-cta.navigating{
  opacity:0.85;
  cursor:wait;
  pointer-events:none;
}

.tagline{
  position:absolute; bottom:26px; left:0; right:0; text-align:center;
  font-size:11px; color:#6E8D75; padding:0 32px;
}

/* ============================================================
   PAGE-SPECIFIC: chat.html — Chat Interface
   ============================================================ */
.app-content.chat-content{ padding:12px 12px 8px; display:flex; flex-direction:column; }
.lang-row{ display:flex; gap:6px; overflow-x:auto; padding:4px 4px 10px; flex-shrink:0; }
.lang-chip{
  font-size:11.5px; padding:5px 11px; border-radius:20px; white-space:nowrap;
  background:var(--white); border:1px solid var(--gold-200); color:var(--ink-600);
}
.lang-chip.active{ background:var(--green-600); color:#fff; border-color:var(--green-600); }
/* ---------- Chat bubbles — animated, rich formatting ---------- */
#chatLog{ flex:1; overflow-y:auto; padding:4px 2px; display:flex; flex-direction:column; gap:2px; }
.msg{ display:flex; margin:4px 0; opacity:0; transform:translateY(8px); transition: opacity 200ms ease, transform 200ms ease; }
.msg.msg-visible{ opacity:1; transform:translateY(0); }
.msg.user{ justify-content:flex-end; }
.bubble{
  max-width:82%; padding:11px 14px; border-radius:16px; font-size:13.5px; line-height:1.6;
}
.msg.bot .bubble{
  background:var(--white);
  border:1px solid var(--gold-200);
  border-bottom-left-radius:4px;
  box-shadow: 0 2px 8px rgba(12,51,26,0.07);
}
.msg.user .bubble{
  background: linear-gradient(135deg, var(--green-600) 0%, var(--green-700-real) 100%);
  color:#fff;
  border-bottom-right-radius:4px;
  box-shadow: 0 2px 8px var(--green-glow);
}

/* ---------- Agent Badge & Message Meta ---------- */
.agent-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:11px;
  font-weight:600;
  color:var(--green-700-real);
  background:var(--green-100);
  border:1px solid rgba(29,122,65,0.2);
  border-radius:12px;
  padding:2px 8px;
  margin-bottom:8px;
  letter-spacing:0.2px;
}
.msg-meta{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  font-size:11px;
  color:var(--ink-300);
  margin-top:6px;
  padding-top:4px;
  border-top:1px solid rgba(0,0,0,0.05);
}
.copy-btn{
  background:transparent;
  border:none;
  color:var(--ink-600);
  font-size:13px;
  cursor:pointer;
  padding:2px 5px;
  border-radius:4px;
  transition:color var(--transition-fast), background var(--transition-fast);
  line-height:1;
}
.copy-btn:hover{
  background: var(--surface-2);
  color:var(--green-700-real);
}
.copy-btn.copied{
  color:var(--green-600);
  font-weight:bold;
}
.chat-warn-strip{
  background:#FFFBEB;
  border:1px solid #FCD34D;
  color:#92400E;
  font-size:12px;
  padding:8px 12px;
  border-radius:var(--radius-sm);
  margin:6px 0;
  line-height:1.4;
}

/* ---------- Rich Markdown Typography in Bot Bubbles ---------- */
.bubble .naqs-p{ margin:0 0 8px; }
.bubble .naqs-p:last-child{ margin-bottom:0; }
.bubble .naqs-h2{
  font-family:var(--serif);
  font-size:15px;
  font-weight:700;
  color:var(--green-900);
  margin:10px 0 6px;
  line-height:1.3;
}
.bubble .naqs-h3{
  font-size:13.5px;
  font-weight:600;
  color:var(--green-800);
  margin:8px 0 4px;
}
.bubble .naqs-ul, .bubble .naqs-ol{
  margin:6px 0 8px;
  padding-left:20px;
  line-height:1.55;
}
.bubble .naqs-ul li, .bubble .naqs-ol li{
  margin-bottom:3px;
}
.bubble .naqs-code{
  background: var(--surface-2);
  border:1px solid var(--gold-200);
  padding:1px 5px;
  border-radius:4px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size:12px;
  color:var(--green-900);
}
.bubble .naqs-refs-divider{
  border:none;
  height:1px;
  background: var(--surface-3);
  margin:12px 0 8px;
}
.bubble .naqs-refs-heading{
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.5px;
  color:var(--green-700-real);
  margin-bottom:4px;
}
.bubble .naqs-refs-list{
  margin:4px 0 0;
  padding-left:18px;
  font-size:12px;
  color:var(--ink-600);
  line-height:1.5;
}
.bubble .naqs-ref-item{
  margin-bottom:3px;
}

.quick-prompts{ display:flex; gap:6px; flex-wrap:wrap; padding:6px 4px 10px; flex-shrink:0; }
.qp{
  font-size:11.5px; padding:7px 12px; border-radius:20px;
  background: linear-gradient(135deg, var(--green-100), rgba(228,240,231,0.6));
  color:var(--green-700-real);
  border:1px solid rgba(29,122,65,0.15);
  font-weight:500;
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.qp:hover{
  background: var(--green-100);
  border-color: var(--green-500);
  transform:translateY(-1px);
  box-shadow: 0 2px 6px var(--green-glow);
}
.qp:active{ transform:translateY(0) scale(0.97); }
#typingRow{ display:none; align-items:center; gap:6px; padding:0 4px 6px; }
.dot-typing{ width:6px; height:6px; border-radius:50%; background:var(--ink-300); animation:blink 1.2s infinite; }
.dot-typing:nth-child(2){ animation-delay:.2s; } .dot-typing:nth-child(3){ animation-delay:.4s; }
@keyframes blink{ 0%,80%,100%{opacity:.3;} 40%{opacity:1;} }
.composer{
  display:flex; gap:8px; padding:10px 4px 6px;
  border-top:1px solid var(--gold-200);
  flex-shrink:0;
  background: rgba(251,249,241,0.8);
  backdrop-filter: blur(8px);
}
.composer input{
  flex:1; border:1.5px solid var(--gold-200); border-radius:24px; padding:11px 16px; font-size:13.5px;
  background:var(--white);
  font-family:var(--sans);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  color:var(--ink-900);
}
.composer input::placeholder{ color:var(--ink-300); }
.composer input:focus{
  outline:none;
  border-color:var(--green-500);
  box-shadow: 0 0 0 3px var(--green-glow);
}
.send-btn{
  width:44px; height:44px; border-radius:50%;
  background: linear-gradient(135deg, var(--green-600), var(--green-700-real));
  color:#fff; border:none; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 2px 8px var(--green-glow);
  transition: transform var(--transition-bounce), box-shadow var(--transition-fast), background var(--transition-fast);
  font-size:18px;
}
.send-btn:hover{ box-shadow: 0 4px 14px var(--green-glow-strong); transform:scale(1.06); }
.send-btn:active{ transform:scale(0.94); }
.send-btn.sending{ background: var(--ink-300); box-shadow:none; }
.send-btn:disabled{ opacity:0.6; pointer-events:none; }
.mic-mini{
  width:44px; height:44px; border-radius:50%;
  background: rgba(255,255,255,0.9); border:1.5px solid var(--gold-200); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:18px;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.mic-mini:hover{ background: var(--green-100); border-color: var(--green-500); }
/* Live hands-free capture state (chat composer mic) */
.mic-mini.mic-live{
  background: var(--red-100);
  border-color: var(--red-700);
  animation: mic-pulse 1.4s ease-in-out infinite;
}
@keyframes mic-pulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(142,27,27,0.35); }
  50%{ box-shadow: 0 0 0 6px rgba(142,27,27,0.12); }
}
@media (prefers-reduced-motion: reduce){
  .mic-mini.mic-live{ animation: none; }
}

/* ============================================================
   PAGE-SPECIFIC: voice.html — Voice Interface
   ============================================================ */
.voice-stage{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding-top:10px; text-align:center; min-height:100%;
}
.lang-row{ display:flex; gap:6px; margin-bottom:28px; }
.lang-chip{
  font-size:11.5px; padding:5px 11px; border-radius:20px;
  background:var(--white); border:1px solid var(--gold-200); color:var(--ink-600);
}
.lang-chip.active{ background:var(--green-600); color:#fff; border-color:var(--green-600); }

.mic-ring{
  width:150px; height:150px; border-radius:50%;
  background:radial-gradient(circle, var(--green-600), var(--green-700-real));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(22,96,50,0.35);
  position:relative; margin:10px 0 18px;
  border:none;
}
.mic-ring svg{ width:52px; height:52px; }
.mic-ring.listening{ animation:pulse 1.4s infinite; }
@keyframes pulse{
  0%{ box-shadow:0 10px 30px rgba(22,96,50,0.35), 0 0 0 0 rgba(22,96,50,.45); }
  70%{ box-shadow:0 10px 30px rgba(22,96,50,0.35), 0 0 0 22px rgba(22,96,50,0); }
  100%{ box-shadow:0 10px 30px rgba(22,96,50,0.35), 0 0 0 0 rgba(22,96,50,0); }
}
#voiceStatus{ font-size:14px; font-weight:600; color:var(--ink-900); }
.hint{ font-size:12px; color:var(--ink-600); margin-top:4px; }

.waveform{ display:flex; align-items:center; gap:3px; height:26px; margin:18px 0; opacity:.25; }
.waveform span{ width:3px; background:var(--green-600); border-radius:2px; height:8px; }
.waveform.active{ opacity:1; }
.waveform.active span{ animation:wave 1s ease-in-out infinite; }
.waveform span:nth-child(2n){ animation-delay:.15s; }
.waveform span:nth-child(3n){ animation-delay:.3s; }
@keyframes wave{ 0%,100%{ height:8px; } 50%{ height:24px; } }

.transcript-card{
  width:100%;
  background:var(--white);
  border:1.5px solid var(--gold-200);
  border-radius:var(--radius-md);
  padding:14px;
  margin-top:8px;
  text-align:left;
  font-size:13.5px;
  line-height:1.5;
  color:var(--ink-600);
  min-height:54px;
  box-shadow:var(--shadow-card);
  outline:none;
  transition:border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.transcript-card:focus{
  border-color:var(--green-500);
  box-shadow:0 0 0 3px var(--green-glow);
}
.transcript-card.recording{
  border-color:var(--green-500);
  box-shadow:0 0 0 3px var(--green-glow-strong);
  background:rgba(228,240,231,0.3);
}
.transcript-card.has-text{
  border-color:var(--green-600);
  color:var(--ink-900);
}
.transcript-card.submitting{
  opacity:0.7;
  pointer-events:none;
}

.voice-actions{
  display:flex;
  gap:10px;
  width:100%;
  margin-top:12px;
}
.voice-submit-btn{
  flex:1;
  padding:12px 18px;
  font-size:14px;
  font-weight:600;
  border-radius:var(--radius-md);
  box-shadow:0 3px 10px var(--green-glow);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.voice-submit-btn:disabled{
  opacity:0.45;
  cursor:not-allowed;
  transform:none !important;
  box-shadow:none;
}
.voice-clear-btn{
  padding:12px 16px;
  font-size:13.5px;
  border-radius:var(--radius-md);
  border:1.5px solid var(--gold-200);
  background:var(--white);
  color:var(--ink-600);
}
.voice-clear-btn:hover{
  background: var(--surface-2);
  border-color:var(--gold-300);
  color:var(--ink-900);
}

#voiceReply{
  display:none;
  width:100%;
  background:var(--white);
  border:1px solid var(--gold-200);
  border-radius:var(--radius-md);
  padding:16px;
  margin-top:14px;
  text-align:left;
  font-size:13.5px;
  line-height:1.6;
  color:var(--ink-900);
  box-shadow:var(--shadow-card);
}
#voiceReply.voice-reply-visible{
  display:block;
}
.voice-agent-badge-hidden{
  display:none !important;
}
.voice-reply-body .naqs-p{ margin:0 0 8px; }
.voice-reply-body .naqs-p:last-child{ margin-bottom:0; }
.voice-reply-body .naqs-h2{
  font-family:var(--serif);
  font-size:15px;
  font-weight:700;
  color:var(--green-900);
  margin:10px 0 6px;
}
.voice-reply-body .naqs-h3{
  font-size:13.5px;
  font-weight:600;
  color:var(--green-800);
  margin:8px 0 4px;
}
.voice-reply-body .naqs-ul, .voice-reply-body .naqs-ol{
  margin:6px 0 8px;
  padding-left:20px;
  line-height:1.55;
}
.voice-reply-body .naqs-code{
  background: var(--surface-2);
  border:1px solid var(--gold-200);
  padding:1px 5px;
  border-radius:4px;
  font-size:12px;
}
.voice-reply-body .naqs-refs-divider{
  border:none;
  height:1px;
  background: var(--surface-3);
  margin:12px 0 8px;
}
.voice-reply-body .naqs-refs-heading{
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.5px;
  color:var(--green-700-real);
  margin-bottom:4px;
}
.voice-reply-body .naqs-refs-list{
  margin:4px 0 0;
  padding-left:18px;
  font-size:12px;
  color:var(--ink-600);
}
.voice-reply-body .naqs-ref-item{
  margin-bottom:3px;
}
.tts-controls{
  display:flex;
  gap:8px;
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid var(--gold-200);
  flex-wrap:wrap;
}
.tts-controls button{
  font-size:12px;
  font-weight:500;
  padding:7px 12px;
  border-radius:18px;
  border:1px solid var(--gold-200);
  background:var(--white);
  color:var(--ink-600);
  cursor:pointer;
  transition:all var(--transition-fast);
}
.tts-controls button:hover{
  background: var(--surface-2);
  border-color:var(--green-500);
  color:var(--green-700-real);
}
.tts-controls button.copied{
  color:var(--green-600);
  font-weight:bold;
}

/* ---------- Hero Section — enterprise brand gradient with high contrast ---------- */
.hero{
  background: linear-gradient(135deg, #093318 0%, #11572c 50%, #072612 100%) !important;
  color: #FFFFFF !important;
  border-radius: var(--radius-lg);
  padding: 22px 20px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-elevated), 0 10px 30px rgba(7, 33, 13, 0.28);
  border: 1px solid rgba(74, 222, 128, 0.25) !important;
  position: relative;
  overflow: hidden;
}
.hero::before{
  content:'';
  position:absolute;
  top:-30px; right:-30px;
  width:140px; height:140px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(74, 222, 128, 0.3) 0%, transparent 70%);
  pointer-events:none;
}
.hero .eyebrow{ 
  font-size:11px !important; 
  color:#86EFAC !important; 
  text-transform:uppercase; 
  letter-spacing:1.2px; 
  font-weight:700; 
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  margin-bottom:4px;
}
.hero h1{ 
  font-family:var(--serif); 
  font-size:21px !important; 
  color:#FFFFFF !important;
  margin:4px 0 14px; 
  line-height:1.35; 
  text-shadow:0 2px 4px rgba(0,0,0,0.45); 
  font-weight:700;
}
.hero .actions{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.hero .btn-primary{
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}
.hero .btn-outline,
.home-hero-outbtn{
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
}
.hero .btn-outline:hover,
.home-hero-outbtn:hover{
  background: rgba(255, 255, 255, 0.3) !important;
  border-color: #FFFFFF !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
}
.hero .btn-trivia,
.home-hero-trivia{
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}
[data-theme="dark"] .hero{
  background: linear-gradient(135deg, #051a0c 0%, #0c331a 50%, #041208 100%) !important;
  border-color: rgba(74, 222, 128, 0.35) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6) !important;
}
/* ---------- Quick Action Grid tiles — hover lift ---------- */
.quick-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:6px;
}
.quick-tile{
  background:var(--white);
  border:1px solid var(--gold-200);
  border-radius:var(--radius-md);
  padding:16px 14px;
  text-align:left;
  box-shadow:var(--shadow-card);
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth);
  position:relative;
  overflow:hidden;
}
.quick-tile::after{
  content:'';
  position:absolute;
  bottom:0; left:0; right:0;
  height:3px;
  background: linear-gradient(90deg, var(--green-600), var(--green-400));
  opacity:0;
  transition: opacity var(--transition-smooth);
}
.quick-tile:hover{ transform:translateY(-3px); box-shadow:var(--shadow-elevated); border-color:var(--green-100); }
.quick-tile:hover::after{ opacity:1; }
.quick-tile:active{ transform:translateY(-1px); }
.quick-tile .ic{ font-size:22px; }
.quick-tile .lbl{ font-size:13px; font-weight:700; margin-top:10px; color:var(--ink-900); }
.quick-tile .sub{ font-size:11px; color:var(--ink-600); margin-top:3px; }
.news-item{ display:flex; gap:10px; padding:10px 0; }
.news-item .dot{
  width:7px; height:7px; border-radius:50%;
  background: linear-gradient(135deg, var(--red-700), #C44040);
  margin-top:5px; flex-shrink:0;
  box-shadow: 0 0 4px rgba(142,27,27,0.3);
}
.news-item .txt{ font-size:12.5px; line-height:1.5; color:var(--ink-900); }
.news-item .date{ font-size:10.5px; color:var(--ink-300); margin-top:3px; font-weight:500; }
.staff-panel{
  background: linear-gradient(135deg, var(--red-100), #f9ece9);
  border:1px solid #E3C3C1;
  border-left:3px solid var(--red-700);
  border-radius:var(--radius-md);
  padding:12px 14px;
  font-size:12.5px;
  color:#5E1414;
  margin-top:10px;
}

/* ============================================================
   PAGE-SPECIFIC: brain bank search
   ============================================================ */
.search-box{
  display:flex; align-items:center; gap:10px;
  background:var(--white);
  border:1.5px solid var(--gold-200);
  border-radius:26px; padding:10px 16px; margin-bottom:12px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.search-box:focus-within{ border-color:var(--green-500); box-shadow:0 0 0 3px var(--green-glow); }
.search-box input{ border:none; outline:none; flex:1; font-size:13.5px; background:transparent; color:var(--ink-900); font-family:var(--sans); }
.search-box input::placeholder{ color:var(--ink-300); }
.chip-row{ display:flex; gap:6px; overflow-x:auto; padding-bottom:12px; scrollbar-width:none; }
.chip-row::-webkit-scrollbar{ display:none; }
.dept-chip{
  font-size:11.5px; white-space:nowrap; padding:7px 13px; border-radius:20px;
  background:var(--white); border:1.5px solid var(--gold-200); color:var(--ink-600);
  font-weight:500;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.dept-chip.active{ background:var(--green-600); color:#fff; border-color:var(--green-600); box-shadow:0 2px 8px var(--green-glow); }
.dept-chip:hover:not(.active){ background:var(--green-100); border-color:var(--green-500); color:var(--green-700-real); transform:translateY(-1px); }
.doc-row{
  display:flex; gap:12px; align-items:flex-start; padding:13px 6px;
  border-bottom:1px solid var(--gold-200);
  border-radius:var(--radius-sm);
  transition: background var(--transition-fast);
}
.doc-row:hover{ background: rgba(228,240,231,0.4); }
.doc-row[onclick], .doc-row-link { cursor:pointer; }
.doc-row:last-child{ border-bottom:none; }
.doc-ic{ font-size:20px; flex-shrink:0; width:30px; text-align:center; }
.doc-title{ font-size:13.5px; font-weight:600; line-height:1.35; color:var(--ink-900); }
.doc-meta{ font-size:11px; color:var(--ink-300); margin-top:3px; }
.doc-tag{
  font-size:10px; padding:2px 7px; border-radius:10px; background: var(--surface-2); color:var(--ink-600); margin-left:6px;
}
.staff-only-doc{ opacity:.45; }
.lock-note{ font-size:10.5px; color:var(--red-700); margin-top:3px; }

/* ============================================================
   PAGE-SPECIFIC: departments.html
   ============================================================ */
.dept-card{ display:flex; gap:14px; align-items:flex-start; }
.dept-ic{
  width:46px; height:46px; border-radius:12px;
  background: linear-gradient(135deg, var(--green-100), rgba(228,240,231,0.5));
  border:1px solid rgba(29,122,65,0.15);
  display:flex; align-items:center; justify-content:center; font-size:21px; flex-shrink:0;
  box-shadow: 0 2px 6px var(--green-glow);
}
.dept-title{ font-size:15px; font-weight:700; color:var(--ink-900); }
.dept-desc{ font-size:12.5px; color:var(--ink-600); margin-top:4px; line-height:1.55; }
.dept-link{ font-size:12px; color:var(--green-700-real); font-weight:700; margin-top:8px; display:inline-block; }

/* ============================================================
   PAGE-SPECIFIC: profile.html
   ============================================================ */
.avatar{
  width:68px; height:68px; border-radius:50%;
  background: linear-gradient(135deg, var(--green-100), rgba(228,240,231,0.6));
  border:3px solid rgba(29,122,65,0.2);
  display:flex; align-items:center; justify-content:center; font-size:28px; margin:0 auto 12px;
  box-shadow: 0 4px 16px var(--green-glow);
}
.role-opt{
  display:flex; align-items:center; justify-content:space-between; padding:13px 4px;
  border-bottom:1px solid var(--gold-200); font-size:13.5px;
  cursor:pointer;
  border-radius:var(--radius-sm);
  transition: background var(--transition-fast);
}
.role-opt:hover{ background: rgba(228,240,231,0.4); }
.role-opt:last-child{ border-bottom:none; }
.role-opt .desc{ font-size:11.5px; color:var(--ink-600); margin-top:2px; }
.radio{
  width:22px; height:22px; border-radius:50%;
  border:2px solid var(--gold-200); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition: border-color var(--transition-fast);
}
.radio.checked{ border-color:var(--green-600); }
.radio.checked::after{ content:''; width:11px; height:11px; border-radius:50%; background:var(--green-600); }
.setting-row{
  display:flex; align-items:center; justify-content:space-between; padding:14px 2px;
  border-bottom:1px solid var(--gold-200); font-size:13.5px;
}
.setting-row:last-child{ border-bottom:none; }
.toggle{
  width:44px; height:26px; border-radius:20px; background: var(--surface-3); position:relative; border:none;
  transition: background var(--transition-smooth);
}
.toggle.on{ background: linear-gradient(135deg, var(--green-600), var(--green-500)); box-shadow:0 2px 6px var(--green-glow); }
.toggle .knob{
  width:20px; height:20px; border-radius:50%; background:#fff; position:absolute; top:3px; left:3px;
  transition:left var(--transition-smooth);
  box-shadow:0 1px 3px rgba(0,0,0,0.2);
}
.toggle.on .knob{ left:21px; }
.sync-pill{
  display:inline-flex; align-items:center; gap:6px; font-size:11px; padding:5px 10px;
  border-radius:20px;
  background: linear-gradient(135deg, var(--green-100), rgba(228,240,231,0.6));
  color:var(--green-700-real);
  font-weight:600;
}
.sync-dot{
  width:7px; height:7px; border-radius:50%;
  background: var(--green-600);
  box-shadow: 0 0 4px var(--green-glow-strong);
  animation: syncPulse 2s ease infinite;
}
@keyframes syncPulse{
  0%,100%{ box-shadow: 0 0 4px var(--green-glow); }
  50%{ box-shadow: 0 0 10px var(--green-glow-strong); }
}
.profile-header{ text-align:center; margin-bottom:8px; padding:8px 0; }
.profile-name{ font-weight:700; font-size:16px; color:var(--ink-900); }
.profile-badge-wrap{ margin-top:10px; }
.setting-row-last{ border-bottom:none !important; }
.about-link{ color:var(--green-700-real); font-weight:700; }
.home-signedin-row{ margin-bottom:14px; }

/* ── Profile Hero Card ───────────────────────────────────────────────────── */
.profile-hero-card{
  background: linear-gradient(145deg, var(--green-900, #0C331A) 0%, var(--green-800, #164226) 100%);
  border-radius: var(--radius-lg, 14px);
  padding: 20px 16px 16px;
  margin-bottom: 14px;
  box-shadow: 0 4px 20px rgba(12,51,26,0.22);
  color: #fff;
}
.profile-hero-inner{
  display: flex;
  align-items: center;
  gap: 14px;
}
.profile-avatar-wrap{
  position: relative;
  flex-shrink: 0;
}
.profile-avatar-circle{
  width: 60px; height: 60px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  border: 2px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(6px);
}
.profile-avatar-ring{
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--gold-400, #C9A84C);
  opacity: 0.45;
  pointer-events: none;
}
.profile-hero-info{ flex: 1; min-width: 0; }
.profile-display-name{
  font-size: 17px; font-weight: 700;
  color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.profile-email-line{
  font-size: 12px; color: rgba(255,255,255,0.65);
  margin-top: 2px; margin-bottom: 8px;
}
/* Trivia stats row inside hero card */
.profile-stats-row{
  display: flex; gap: 0;
  margin-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 14px;
}
.profile-stat-box{
  flex: 1; text-align: center;
  border-right: 1px solid rgba(255,255,255,0.12);
}
.profile-stat-box:last-child{ border-right: none; }
.profile-stat-val{
  font-size: 20px; font-weight: 800;
  color: #fff;
  line-height: 1.1;
}
.profile-stat-val.text-green{ color: #5DD479; }
.profile-stat-val.text-amber{ color: var(--gold-400, #C9A84C); }
.profile-stat-lbl{
  font-size: 10px; color: rgba(255,255,255,0.55);
  margin-top: 2px; text-transform: uppercase; letter-spacing: 0.4px;
}

/* ── Section label with icon ─────────────────────────────────────────────── */
.section-label-with-icon{
  display: flex; align-items: center; gap: 6px;
}

/* ── Role Card & Tile Grid ───────────────────────────────────────────────── */
.profile-role-card{
  padding: 18px 16px;
  border-radius: var(--radius-lg, 16px);
  border: 1.5px solid var(--gold-200);
  background: var(--surface);
  box-shadow: 0 2px 10px rgba(12, 51, 26, 0.05);
}
.profile-role-intro{
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-700);
  margin-bottom: 14px;
  line-height: 1.5;
}
.profile-role-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}
.profile-role-tile{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1.5px solid var(--gold-200);
  background: var(--surface);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  box-shadow: 0 2px 6px rgba(12, 51, 26, 0.04);
  -webkit-tap-highlight-color: transparent;
}
.profile-role-tile:hover{
  border-color: var(--green-500);
  background: linear-gradient(135deg, rgba(29,122,65,0.04), var(--surface));
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(12, 51, 26, 0.08);
}
.profile-role-tile--active{
  border-color: var(--green-600) !important;
  background: linear-gradient(135deg, rgba(29,122,65,0.08), rgba(212,201,154,0.12)) !important;
  box-shadow: 0 0 0 3px rgba(29, 122, 65, 0.18), 0 4px 16px rgba(12, 51, 26, 0.10) !important;
}
.profile-role-tile--staff{
  border-style: dashed;
}
.profile-role-tile--staff.profile-role-tile--active{
  border-style: solid;
}
.profile-role-tile__icon{
  font-size: 24px;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(29, 122, 65, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-role-tile__content{ flex: 1; min-width: 0; }
.profile-role-tile__name{ font-size: 14px; font-weight: 700; color: var(--ink-900); }
.profile-role-tile__desc{ font-size: 11.5px; color: var(--ink-600); margin-top: 3px; line-height: 1.35; }
.profile-role-tile__radio{
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--gold-300);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.profile-role-tile__radio.checked{
  border-color: var(--green-600);
  background: var(--green-600);
  box-shadow: 0 0 0 2px #ffffff;
}
.profile-role-tile__radio.checked::after{
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
}

/* ── Staff Profile Form grid ─────────────────────────────────────────────── */
.profile-form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
  margin-bottom: 20px;
}
.form-field{
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.form-field--wide{ grid-column: 1 / -1; }
@media (max-width: 580px){
  .profile-form-grid{ grid-template-columns: 1fr; }
  .form-field--wide{ grid-column: 1; }
}
.form-label{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-800);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.form-label svg{
  stroke: var(--green-700);
  flex-shrink: 0;
}
.form-input{
  display: block !important;
  width: 100% !important;
  height: 44px !important;
  box-sizing: border-box !important;
  padding: 10px 14px !important;
  font-size: 13.5px !important;
  font-family: var(--sans) !important;
  font-weight: 500 !important;
  color: var(--ink-900) !important;
  background: var(--surface) !important;
  border: 1.5px solid var(--gold-300, #d4c99a) !important;
  border-radius: 10px !important;
  outline: none !important;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}
.form-input:focus{
  border-color: var(--green-600) !important;
  box-shadow: 0 0 0 3px rgba(29, 122, 65, 0.18), inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
  background: #ffffff !important;
}
.form-input::placeholder{
  color: var(--ink-300);
  opacity: 0.8;
}
select.form-input{
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23166032' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 14px 14px !important;
  padding-right: 38px !important;
  cursor: pointer !important;
}
.staff-profile-notice{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  color: var(--green-950);
  background: rgba(29,122,65,0.08);
  border: 1px solid rgba(29,122,65,0.20);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 18px;
  line-height: 1.5;
}
.save-staff-btn{
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--green-800) 0%, var(--green-600) 100%);
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 14px rgba(22, 96, 50, 0.25);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.save-staff-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(22, 96, 50, 0.35);
  background: linear-gradient(135deg, var(--green-700) 0%, var(--green-500) 100%);
}

/* ── Quick Links (Responsive Grid & Interactive Cards) ──────────────────── */
.profile-quicklinks-grid,
.profile-quicklinks-card{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 12px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 24px !important;
}
.profile-quicklink,
.profile-quicklink-card{
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px 14px !important;
  background: var(--surface) !important;
  border: 1.5px solid var(--gold-200) !important;
  border-radius: 14px !important;
  text-decoration: none !important;
  color: var(--ink-900) !important;
  box-shadow: 0 2px 8px rgba(12, 51, 26, 0.05) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  -webkit-tap-highlight-color: transparent !important;
}
.profile-quicklink:hover,
.profile-quicklink-card:hover{
  transform: translateY(-2px) !important;
  border-color: var(--green-600) !important;
  background: linear-gradient(135deg, rgba(29, 122, 65, 0.05), var(--surface)) !important;
  box-shadow: 0 8px 22px rgba(12, 51, 26, 0.12) !important;
}
.profile-quicklink--last{ border-bottom: none; }
.profile-quicklink__icon,
.profile-quicklink__icon-badge{
  font-size: 22px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(29, 122, 65, 0.12), rgba(76, 175, 114, 0.06)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 6px rgba(12, 51, 26, 0.08) !important;
}
.profile-quicklink__text,
.profile-quicklink__content{ flex: 1 !important; min-width: 0 !important; }
.profile-quicklink__name,
.profile-quicklink__title{
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--ink-900) !important;
  letter-spacing: -0.2px !important;
}
.profile-quicklink__desc,
.profile-quicklink__subtitle{
  font-size: 12px !important;
  color: var(--ink-600) !important;
  margin-top: 3px !important;
  line-height: 1.4 !important;
}
.profile-quicklink__arrow,
.profile-quicklink__arrow-badge{
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: var(--surface-2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--green-800) !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}
.profile-quicklink:hover .profile-quicklink__arrow,
.profile-quicklink:hover .profile-quicklink__arrow-badge,
.profile-quicklink-card:hover .profile-quicklink__arrow,
.profile-quicklink-card:hover .profile-quicklink__arrow-badge{
  background: var(--green-600) !important;
  color: #ffffff !important;
  transform: translateX(3px) !important;
}

/* Dark mode overrides for profile & form components */
[data-theme="dark"] .profile-hero-card{
  background: linear-gradient(145deg, #081F10 0%, #102B1A 100%);
}
[data-theme="dark"] .profile-role-card{
  background: #0d2716;
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
[data-theme="dark"] .profile-role-intro{
  color: #a1b8a7;
}
[data-theme="dark"] .profile-role-tile{
  border-color: rgba(255,255,255,0.12);
  background: #0a2113;
}
[data-theme="dark"] .profile-role-tile:hover{
  background: rgba(76,175,114,0.12);
  border-color: var(--green-400);
}
[data-theme="dark"] .profile-role-tile--active{
  border-color: var(--green-400) !important;
  background: linear-gradient(135deg, rgba(58,173,102,0.16), rgba(12,51,26,0.30)) !important;
}
[data-theme="dark"] .profile-role-tile__name{
  color: #f0fdf4;
}
[data-theme="dark"] .profile-role-tile__desc{
  color: #9ab4a3;
}
[data-theme="dark"] .profile-role-tile__radio{
  border-color: rgba(255,255,255,0.25);
}
[data-theme="dark"] .profile-role-tile__radio.checked{
  border-color: var(--green-400);
  background: var(--green-500);
  box-shadow: 0 0 0 2px #0a2113;
}
[data-theme="dark"] .profile-role-tile__icon{
  background: rgba(255,255,255,0.08);
}
[data-theme="dark"] .form-label{
  color: #a1b8a7;
}
[data-theme="dark"] .form-label svg{
  stroke: var(--green-400);
}
[data-theme="dark"] .form-input{
  background: #092113 !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #f0fdf4 !important;
}
[data-theme="dark"] .form-input:focus{
  border-color: var(--green-400) !important;
  box-shadow: 0 0 0 3px rgba(58, 173, 102, 0.25), inset 0 1px 2px rgba(0, 0, 0, 0.2) !important;
  background: #0d2c1a !important;
}
[data-theme="dark"] select.form-input{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233aad66' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
}
[data-theme="dark"] .staff-profile-notice{
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
  color: #a7f3d0;
}
[data-theme="dark"] .profile-quicklink,
[data-theme="dark"] .profile-quicklink-card{
  background: #0d2716 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}
[data-theme="dark"] .profile-quicklink:hover,
[data-theme="dark"] .profile-quicklink-card:hover{
  border-color: var(--green-400) !important;
  background: #11341d !important;
}
[data-theme="dark"] .profile-quicklink__icon,
[data-theme="dark"] .profile-quicklink__icon-badge{
  background: rgba(255, 255, 255, 0.08) !important;
}
[data-theme="dark"] .profile-quicklink__name,
[data-theme="dark"] .profile-quicklink__title{
  color: #f0fdf4 !important;
}
[data-theme="dark"] .profile-quicklink__desc,
[data-theme="dark"] .profile-quicklink__subtitle{
  color: #9ab4a3 !important;
}
[data-theme="dark"] .profile-quicklink__arrow,
[data-theme="dark"] .profile-quicklink__arrow-badge{
  background: rgba(255, 255, 255, 0.10) !important;
  color: #a7f3d0 !important;
}
[data-theme="dark"] .profile-quicklink:hover .profile-quicklink__arrow,
[data-theme="dark"] .profile-quicklink:hover .profile-quicklink__arrow-badge,
[data-theme="dark"] .profile-quicklink-card:hover .profile-quicklink__arrow,
[data-theme="dark"] .profile-quicklink-card:hover .profile-quicklink__arrow-badge{
  background: var(--green-500) !important;
  color: #ffffff !important;
}

.home-hero-outbtn{
  border-color:rgba(255,255,255,.30);
  color:#fff;
  backdrop-filter:blur(4px);
}
.home-divider-thin{ margin:2px 0; }
.chat-typing-muted{ font-size:11px; color:var(--ink-300); }
.chat-role-badge-sm{ font-size:10px; }
.staff-panel-hidden{ display:none; }
.voice-toast{
  position:fixed; bottom:90px; left:50%; transform:translateX(-50%);
  background: linear-gradient(135deg, #1A1A14, #333);
  color:#fff; padding:9px 18px; border-radius:20px;
  font-size:12px; z-index:1000;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  backdrop-filter:blur(8px);
}
.bb-staff-unlocked{ color:var(--green-700-real) !important; font-weight:600; }
.chat-warn-inline{ padding:4px 8px; font-size:11px; }

/* Agent badge in chat bubbles */
.agent-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:10.5px;
  font-weight:600;
  color:var(--green-700-real);
  background: linear-gradient(135deg, var(--green-100), rgba(228,240,231,0.6));
  border:1px solid rgba(29,122,65,0.2);
  border-radius:20px;
  padding:3px 9px;
  margin-bottom:8px;
}

/* Message metadata row */
.msg-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:8px;
  padding-top:6px;
  border-top:1px solid var(--gold-200);
  font-size:10.5px;
  color:var(--ink-300);
}

/* Copy button */
.copy-btn{
  background:none;
  border:1px solid var(--gold-200);
  border-radius:6px;
  color:var(--ink-300);
  font-size:12px;
  padding:2px 7px;
  cursor:pointer;
  min-height:auto;
  min-width:auto;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.copy-btn:hover{ color:var(--green-700-real); border-color:var(--green-500); background:var(--green-100); }
.copy-btn.copied{ color:var(--green-600); border-color:var(--green-600); background:var(--green-100); }

/* Chat warning strip */
.chat-warn-strip{
  display:flex;
  align-items:center;
  gap:6px;
  background: rgba(247,231,229,0.8);
  border:1px solid #E3C3C1;
  border-radius:var(--radius-sm);
  padding:7px 12px;
  font-size:11.5px;
  color:#5E1414;
  margin:4px 0;
}

/* ── Markdown Rendered Response Styles ─────────────────────── */
.bubble .naqs-p{
  margin:0 0 10px;
  line-height:1.65;
}
.bubble .naqs-p:last-child{ margin-bottom:0; }
.bubble .naqs-h2{
  font-family:var(--serif);
  font-size:14px;
  font-weight:700;
  color:var(--ink-900);
  margin:12px 0 6px;
  padding-bottom:4px;
  border-bottom:1px solid var(--gold-200);
}
.bubble .naqs-h3{
  font-size:13px;
  font-weight:700;
  color:var(--ink-900);
  margin:10px 0 5px;
}
.bubble .naqs-list,
.bubble .naqs-ul,
.bubble .naqs-ol{
  margin:6px 0 10px;
  padding-left:18px;
}
.bubble .naqs-list li,
.bubble .naqs-ul li,
.bubble .naqs-ol li{
  margin-bottom:5px;
  line-height:1.55;
}
.bubble .naqs-ol,
.bubble ol.naqs-list{
  list-style-type:decimal;
}
.bubble .naqs-code{
  background: rgba(12,51,26,0.08);
  border-radius:4px;
  padding:1px 5px;
  font-family:monospace;
  font-size:12px;
  color:var(--green-800);
}
.bubble .naqs-line{ display:inline; }

/* References section footer */
.bubble hr.naqs-refs-divider{
  border:none;
  border-top:1px solid var(--gold-200);
  margin:12px 0 10px;
}
.bubble .naqs-refs-heading{
  font-size:11.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.5px;
  color:var(--green-700-real);
  margin-bottom:6px;
}
.bubble .naqs-ref-item{
  font-size:11.5px;
  color:var(--ink-600);
  margin-bottom:3px;
}

/* ── Mic ring (voice) — premium layered pulse ──────────────── */
.mic-ring{
  width:150px; height:150px; border-radius:50%;
  background: radial-gradient(circle at 40% 40%, var(--green-500), var(--green-700-real));
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 28px rgba(22,96,50,0.40), 0 0 0 6px rgba(29,122,65,0.12);
  position:relative; margin:10px 0 18px;
  border:none;
  transition: box-shadow var(--transition-smooth);
}
.mic-ring svg{ width:52px; height:52px; filter:drop-shadow(0 1px 3px rgba(0,0,0,0.2)); }
.mic-ring.listening{ animation:micPulse 1.6s ease-in-out infinite; }
@keyframes micPulse{
  0%{ box-shadow:0 8px 28px rgba(22,96,50,0.40), 0 0 0 0 rgba(22,96,50,.5); }
  70%{ box-shadow:0 8px 28px rgba(22,96,50,0.40), 0 0 0 28px rgba(22,96,50,0); }
  100%{ box-shadow:0 8px 28px rgba(22,96,50,0.40), 0 0 0 0 rgba(22,96,50,0); }
}

/* ============================================================
   A. WCAG 2.2 AA — Focus & Keyboard
   ============================================================ */
:focus-visible { outline: 3px solid #279652; outline-offset: 2px; border-radius: 4px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #279652;
  outline-offset: 2px;
  border-radius: 4px;
}
.skip-link {
  position:absolute; top:-40px; left:8px;
  background:#0C331A; color:#FBF9F1;
  padding:8px 14px; border-radius:6px;
  z-index:1000; font-weight:600;
}
.skip-link:focus { top: 8px; }
input, button, select, textarea {
  min-height: 44px;
  min-width: 44px;
}

/* ============================================================
   B. Offline Banner + Reduced Motion
   ============================================================ */
.offline-banner {
  display:none; background:#8E1B1B; color:#fff; text-align:center;
  padding:10px 14px; font-size:13px; font-weight:600;
  position:sticky; top:0; z-index:100;
}
.offline-banner.visible { display:block; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ============================================================
   D. Color & Contrast — Screen Reader Only
   ============================================================ */
.sr-only {
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* ============================================================
   C. Responsive Breakpoints (320px → 2560px)
   ============================================================ */

/* 320px — Tiny Phone */
@media (max-width: 320px) {
  .app-header { padding: 10px 10px 8px; gap: 6px; }
  .app-header .crest { width: 28px; height: 28px; font-size: 13px; }
  .app-header .titles .org { font-size: 12.5px; }
  .app-header .titles .page-label { font-size: 10px; }
  .app-header .site-btn { font-size: 10px; padding: 4px 7px; }
  .app-content { padding: 12px 10px 70px; }
  h1.page-title { font-size: 18px; }
  .page-sub { font-size: 12px; }
  .section-label { font-size: 10px; margin: 16px 0 8px; }
  .card { padding: 10px; }
  .btn { padding: 10px 12px; font-size: 13px; }
  .hero { padding: 14px; }
  .hero h1 { font-size: 16px; }
  .quick-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .quick-tile { padding: 10px 8px; }
  .quick-tile .lbl { font-size: 12px; }
  .quick-tile .sub { font-size: 10px; }
  .seal { width: 88px; height: 88px; font-size: 36px; margin-bottom: 16px; }
  .org-name { font-size: 17px; max-width: 260px; }
  .org-sub { font-size: 10.5px; letter-spacing: 1.2px; }
  .load-wrap { width: 180px; margin-top: 32px; }
  .tagline { font-size: 10px; bottom: 18px; }
  .bottom-nav a { font-size: 9.5px; padding: 5px 2px; }
  .bottom-nav a svg { width: 18px; height: 18px; }
  .mic-ring { width: 120px; height: 120px; }
  .mic-ring svg { width: 42px; height: 42px; }
  .avatar { width: 52px; height: 52px; font-size: 22px; }
  .dept-ic { width: 38px; height: 38px; font-size: 17px; border-radius: 8px; }
}

/* 430px–767px — Large Phone / Small Tablet
   (inner @media flattened — nested media queries are invalid outside CSS
   nesting and were silently dropped by parsers) */
@media (min-width: 430px) and (max-width: 767px) {
  .device { max-width: 540px; }
  body { padding: 20px 0; }
  .device { min-height: 880px; height: auto; min-height: 88vh; }
  .quick-grid { grid-template-columns: 1fr 1fr; }
}

/* 768px–1023px — Tablets */
@media (min-width: 768px) and (max-width: 1023px) {
  .device { max-width: 720px; }
  body { padding: 24px 0; }
  .device {
    min-height: 900px;
    height: auto;
    min-height: 86vh;
  }
  .quick-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .card + .card { margin-top: 14px; }
  .dept-card { padding: 6px 0; }
  .app-header { padding: 18px 22px 15px; }
  .app-content { padding: 22px 22px 100px; }
  .bottom-nav { padding: 10px 8px calc(10px + env(safe-area-inset-bottom)); }
  .bottom-nav a { font-size: 12px; gap: 5px; padding: 8px 4px; }
  .bottom-nav a svg { width: 24px; height: 24px; }
}

/* 1024px–1439px — Laptops */
@media (min-width: 1024px) and (max-width: 1439px) {
  .device { max-width: 960px; }
  body { padding: 30px 0; }
  .device {
    min-height: 920px;
    height: auto;
    min-height: 88vh;
    border-radius: 38px;
  }
  .quick-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .app-header { padding: 20px 28px 16px; }
  .app-header .crest { width: 40px; height: 40px; font-size: 18px; }
  .app-header .titles .org { font-size: 16px; }
  .app-header .titles .page-label { font-size: 12px; }
  .app-content { padding: 28px 28px 110px; }
  .page-title { font-size: 26px; }
  .card { padding: 18px; }
  .card + .card { margin-top: 14px; }
  .bottom-nav { padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); }
  .bottom-nav a { font-size: 12.5px; gap: 5px; padding: 10px 6px; }
  .bottom-nav a svg { width: 26px; height: 26px; }
  .hero { padding: 24px; }
  .hero h1 { font-size: 22px; }
  .dept-ic { width: 52px; height: 52px; font-size: 24px; }
  .dept-title { font-size: 16px; }
  .dept-desc { font-size: 13.5px; }
}

/* 1440px–2560px — 4K Desktop */
@media (min-width: 1440px) {
  .device { max-width: 1280px; }
  body { padding: 40px 0; }
  .device {
    min-height: 960px;
    height: auto;
    min-height: 90vh;
    border-radius: 44px;
  }
  .quick-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .app-header { padding: 24px 36px 20px; gap: 14px; }
  .app-header .crest { width: 48px; height: 48px; font-size: 22px; }
  .app-header .titles .org { font-size: 18px; }
  .app-header .titles .page-label { font-size: 13px; }
  .app-header .site-btn { font-size: 12px; padding: 8px 12px; }
  .app-content { padding: 36px 36px 130px; }
  .page-title { font-size: 30px; }
  .page-sub { font-size: 14.5px; }
  .section-label { font-size: 12px; margin: 28px 0 14px; }
  .card { padding: 22px; }
  .card + .card { margin-top: 16px; }
  .btn { padding: 14px 20px; font-size: 15px; border-radius: 12px; }
  .bottom-nav { padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); }
  .bottom-nav a { font-size: 13px; gap: 6px; padding: 12px 8px; }
  .bottom-nav a svg { width: 28px; height: 28px; }
  .hero { padding: 32px; border-radius: 14px; }
  .hero h1 { font-size: 26px; }
  .hero .eyebrow { font-size: 12px; }
  .quick-tile { padding: 20px 18px; border-radius: 12px; }
  .quick-tile .ic { font-size: 26px; }
  .quick-tile .lbl { font-size: 15px; }
  .quick-tile .sub { font-size: 12px; }
  .news-item { padding: 14px 0; gap: 14px; }
  .news-item .txt { font-size: 14px; }
  .news-item .date { font-size: 11.5px; }
  .dept-ic { width: 60px; height: 60px; font-size: 28px; border-radius: 14px; }
  .dept-title { font-size: 17px; }
  .dept-desc { font-size: 14px; }
  .dept-link { font-size: 13px; }
  .search-box { padding: 14px 18px; border-radius: 26px; gap: 12px; }
  .search-box input { font-size: 15px; }
  .doc-title { font-size: 15px; }
  .doc-meta { font-size: 12px; }
  .mic-ring { width: 180px; height: 180px; }
  .mic-ring svg { width: 64px; height: 64px; }
  #voiceStatus { font-size: 16px; }
  .hint { font-size: 13px; }
  .transcript-card { padding: 18px; font-size: 14px; }
  #voiceReply { padding: 18px; font-size: 15px; }
  .avatar { width: 84px; height: 84px; font-size: 34px; }
  .role-opt { padding: 16px 6px; font-size: 15px; }
  .role-opt .desc { font-size: 12.5px; }
  .setting-row { padding: 16px 4px; font-size: 15px; }
  .toggle { width: 48px; height: 28px; }
  .toggle .knob { width: 22px; height: 22px; }
  .toggle.on .knob { left: 24px; }
  .bubble { font-size: 14.5px; padding: 12px 16px; }
  .composer input { font-size: 14.5px; padding: 13px 18px; }
  .send-btn, .mic-mini { width: 48px; height: 48px; }
}

/* ============================================================
   NAQS ACADEMY & STAFF REGULATORY REPOSITORY STYLES
   ============================================================ */

.academy-hero {
  background: linear-gradient(135deg, var(--green-900) 0%, var(--green-800) 100%);
  color: var(--gold-050);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin-bottom: 16px;
  border-left: 4px solid var(--green-500);
  box-shadow: var(--shadow-card);
}

.academy-hero h1 {
  font-family: var(--serif);
  font-size: 20px;
  margin: 0 0 6px;
  letter-spacing: -0.2px;
  color: var(--gold-050);
}

.academy-hero p {
  font-size: 13px;
  margin: 0 0 12px;
  line-height: 1.4;
  color: var(--green-100);
}

.academy-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.stat-pill {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 11.5px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--gold-050);
  font-weight: 500;
}

.stat-pill strong {
  color: var(--gold-100);
  font-weight: 700;
}

/* Folder Tabs */
.folder-tab-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 10px;
  margin-bottom: 12px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.folder-tab-row::-webkit-scrollbar { display: none; }

.folder-tab {
  background: var(--surface-2);
  border: 1px solid var(--gold-200);
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-600);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.folder-tab:hover {
  background: var(--green-100);
  color: var(--green-900);
  border-color: var(--green-600);
}

.folder-tab.active {
  background: var(--green-800);
  color: var(--gold-050);
  border-color: var(--green-800);
  box-shadow: 0 2px 6px rgba(18, 74, 38, 0.3);
}

.folder-tab__badge {
  background: rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  padding: 1px 6px;
  font-size: 11px;
}
.folder-tab.active .folder-tab__badge {
  background: rgba(255, 255, 255, 0.22);
  color: var(--gold-050);
}

/* Academy Search & Filter Bar */
.academy-search-bar {
  display: flex;
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--gold-200);
  border-radius: 24px;
  padding: 8px 14px;
  gap: 10px;
  margin-bottom: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.academy-search-bar:focus-within {
  border-color: var(--green-600);
  box-shadow: 0 0 0 3px rgba(39, 150, 82, 0.15);
}

.academy-search-bar input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 13.5px;
  color: var(--ink-900);
  outline: none;
}

.academy-search-bar input::placeholder {
  color: var(--ink-300);
}

.academy-search-bar .clear-btn {
  background: none;
  border: none;
  color: var(--ink-300);
  font-size: 16px;
  padding: 0 4px;
  display: none;
}

.academy-filter-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  font-size: 12px;
  color: var(--ink-600);
}

.academy-filter-row select {
  background: var(--surface-2);
  border: 1px solid var(--gold-200);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12px;
  color: var(--ink-900);
  outline: none;
}

/* Bookmark Strip */
.bookmark-strip {
  background: var(--surface-2);
  border: 1px solid var(--gold-200);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin-bottom: 16px;
  display: none;
}

.bookmark-strip.has-bookmarks {
  display: block;
}

.bookmark-strip__header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--green-800);
  margin-bottom: 8px;
}

.bookmark-pills {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.bookmark-pills::-webkit-scrollbar { display: none; }

.bookmark-pill {
  background: var(--white);
  border: 1px solid var(--gold-200);
  border-radius: 16px;
  padding: 5px 10px;
  font-size: 12px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-900);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.bookmark-pill:hover {
  border-color: var(--green-600);
  background: var(--green-100);
}

/* Document Grid & Cards */
.academy-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.academy-card {
  background: var(--surface-2);
  border: 1px solid var(--gold-200);
  border-radius: var(--radius-md);
  padding: 14px;
  box-shadow: var(--shadow-card);
  transition: transform 0.15s ease, border-color 0.15s ease;
  position: relative;
  border-left: 4px solid var(--green-600);
}

.academy-card:hover {
  border-color: var(--green-600);
}

.academy-card.dept-plant { border-left-color: #2e7d32; }
.academy-card.dept-animal { border-left-color: #c67d0a; }
.academy-card.dept-aquatic { border-left-color: #0288d1; }
.academy-card.dept-legal { border-left-color: #7b1fa2; }
.academy-card.dept-general { border-left-color: #546e7a; }
.academy-card.dept-sop { border-left-color: #00796b; }

.academy-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 6px;
}

.academy-card__badge {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 12px;
  background: var(--green-100);
  color: var(--green-900);
  letter-spacing: 0.3px;
  display: inline-block;
}

.academy-card__code {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-600);
  font-family: monospace;
}

.academy-card__title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink-900);
  line-height: 1.3;
  margin-bottom: 5px;
}

.academy-card__summary {
  font-size: 12.5px;
  color: var(--ink-600);
  line-height: 1.4;
  margin-bottom: 10px;
}

.academy-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  color: var(--ink-600);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--gold-200);
}

.academy-card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.academy-btn-open {
  background: var(--green-800);
  color: var(--gold-050);
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s ease;
  flex: 1;
  justify-content: center;
}

.academy-btn-open:hover {
  background: var(--green-700-real);
}

.academy-btn-secondary {
  background: var(--white);
  color: var(--ink-900);
  border: 1px solid var(--gold-200);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}

.academy-btn-secondary:hover {
  background: var(--surface-1);
  border-color: var(--green-600);
}

.academy-btn-bookmark.bookmarked {
  color: #c67d0a;
  border-color: #c67d0a;
  background: #fff8e1;
}

/* Progress Ring Component */
.doc-progress-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--ink-600);
}

/* Native PDF Viewer Modal */
.pdf-modal {
  position: fixed;
  inset: 0;
  background: rgba(8, 38, 15, 0.85);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 12px;
}

.pdf-modal.open {
  display: flex;
}

.pdf-modal__container {
  width: 100%;
  max-width: 900px;
  height: 92vh;
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.pdf-modal__header {
  background: var(--green-900);
  color: var(--gold-050);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 2px solid var(--green-600);
}

.pdf-modal__title {
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.pdf-modal__toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pdf-modal__toolbar-btn {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #FFFFFF !important;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.pdf-modal__toolbar-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.pdf-modal__close {
  background: var(--red-700);
  border: none;
  color: #FFFFFF !important;
  border-radius: 6px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}

.pdf-modal__body {
  flex: 1;
  position: relative;
  background: #525659;
}

.pdf-modal__frame {
  width: 100%;
  height: 100%;
  border: none;
}

/* Staff Only SOC Lock Screen Pattern */
.staff-soc-overlay {
  position: absolute;
  inset: 0;
  background: rgba(12, 51, 26, 0.95);
  color: var(--gold-050);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  z-index: 100;
  backdrop-filter: blur(8px);
}

.staff-soc-overlay.active {
  display: flex;
}

.staff-soc-shield {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(142, 27, 27, 0.2);
  border: 2px solid var(--red-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin-bottom: 16px;
}

.staff-soc-title {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--gold-050);
  margin: 0 0 8px;
}

.staff-soc-desc {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--green-100);
  max-width: 320px;
  margin: 0 0 20px;
}

.staff-soc-btn {
  background: var(--green-600);
  color: var(--white);
  border: none;
  border-radius: 8px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.staff-soc-btn:hover {
  background: var(--green-500);
}

.nav-hidden {
  display: none !important;
}

.doc-row-link {
  cursor: pointer;
}

.academy-empty-state {
  text-align: center;
  padding: 40px 20px;
  background: var(--surface-2);
  border-radius: var(--radius-md);
  border: 1px dashed var(--gold-200);
}

.academy-empty-state__icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.academy-empty-state__title {
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: 4px;
}

.academy-empty-state__desc {
  font-size: 13px;
  color: var(--ink-600);
}

.academy-loading-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--ink-600);
}

.academy-loading-state__icon {
  font-size: 28px;
  margin-bottom: 8px;
}

.topic-tag {
  background: var(--surface-1);
  border: 1px solid var(--gold-200);
  border-radius: 10px;
  padding: 2px 7px;
  font-size: 10.5px;
  color: var(--ink-600);
}

.topics-container {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: 100%;
  margin-top: 4px;
}

.card-top-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brainbank-callout {
  margin-top: 24px;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--gold-200);
  border-radius: var(--radius-md);
  font-size: 12.5px;
  color: var(--ink-600);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brainbank-callout__title {
  color: var(--ink-900);
  font-weight: 700;
}

.brainbank-callout__btn {
  background: var(--white);
  border: 1px solid var(--gold-200);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-weight: 600;
  color: var(--green-900);
  white-space: nowrap;
}

.soc-return-link {
  margin-top: 14px;
}

.soc-return-link a {
  font-size: 12.5px;
  color: var(--gold-100);
  text-decoration: underline;
}

.academy-filter-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

.academy-doc-count {
  font-weight: 600;
}



/* ================================================================
   LANGUAGE PICKER (button + listbox) — shared with the SvelteKit app
   ================================================================ */
.lang-row-tools{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:10px;
}
.lang-row-label{
  font-size:11px; font-weight:600; letter-spacing:0.4px; text-transform:uppercase;
  color:var(--ink-600);
}
.lang-picker{ position:relative; display:inline-block; }
/* Compact header variant — sits on the dark green app-header gradient */
.app-header .lang-picker .lang-trigger{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.22);
  color: var(--gold-050);
  min-height:38px; padding:4px 10px; font-size:12px;
}
.app-header .lang-picker .lang-trigger:hover{
  background: rgba(255,255,255,0.16);
  border-color: var(--gold-300);
}
.app-header .lang-picker .lang-panel{
  color: var(--ink-900); /* panel itself stays light for readability */
}
.lang-trigger{
  display:inline-flex; align-items:center; gap:6px;
  min-height:44px; padding:6px 12px;
  border-radius:9999px; border:1.5px solid var(--gold-200);
  background:var(--white); color:var(--ink-900);
  font-family:var(--sans); font-size:13px; font-weight:600;
  cursor:pointer; transition:border-color var(--transition-fast), background var(--transition-fast);
}
.lang-trigger:hover{ border-color:var(--green-500); background:var(--green-100); }
.lang-trigger[aria-expanded="true"]{ border-color:var(--green-500); box-shadow:var(--shadow-glow); }
.lang-flag{ font-size:15px; line-height:1; }
.lang-chevron{ transition:transform var(--transition-fast); color:var(--ink-600); flex-shrink:0; }
.lang-chevron.open{ transform:rotate(180deg); }
.lang-backdrop{
  position:fixed; inset:0; background:rgba(7,33,13,0.28);
  z-index:calc(var(--z-overlay, 300) + 1);
}
.lang-panel{
  position:absolute; top:calc(100% + 8px); right:0;
  min-width:246px; max-height:60vh; overflow-y:auto;
  background:var(--white); border:1px solid var(--gold-200);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-elevated);
  padding:8px; z-index:calc(var(--z-overlay, 300) + 2);
  animation:lang-pop 200ms cubic-bezier(0, 0, 0.2, 1);
}
@keyframes lang-pop{
  from{ opacity:0; transform:translateY(-6px) scale(0.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
.lang-panel-head{ padding:8px 10px 10px; border-bottom:1px solid var(--gold-100); margin-bottom:6px; }
.lang-panel-title{ display:block; font-size:12.5px; font-weight:700; color:var(--ink-900); }
.lang-panel-sub{ display:block; font-size:11px; color:var(--ink-600); margin-top:2px; }
.lang-option{
  display:flex; align-items:center; gap:10px; width:100%;
  min-height:48px; padding:8px 10px;
  border-radius:var(--radius-md); border:1px solid transparent;
  background:transparent; text-align:left; cursor:pointer;
  color:var(--ink-900); font-family:var(--sans);
}
.lang-option:hover{ background:var(--green-100); border-color:var(--green-500); }
.lang-option.active{ background:var(--green-100); border-color:var(--green-500); }
.lang-flag-lg{ font-size:19px; line-height:1; flex-shrink:0; }
.lang-labels{ display:flex; flex-direction:column; flex:1; min-width:0; }
.lang-native{ font-size:14px; font-weight:600; line-height:1.25; }
.lang-english{ font-size:11px; color:var(--ink-600); line-height:1.3; }
.lang-check{ color:var(--green-600); flex-shrink:0; visibility:hidden; }
.lang-option.active .lang-check{ visibility:visible; }
@media (prefers-reduced-motion: reduce){
  .lang-panel{ animation:none; }
  .lang-chevron{ transition:none; }
}

/* ================================================================
   INLINE LANGUAGE LIST — hamburger drawer variant
   Full list rendered in-place (no dropdown → nothing clipped by the
   drawer's overflow). Same selection flow as the dropdown picker.
   ================================================================ */
.lang-inline-list{
  display:flex; flex-direction:column; gap:4px;
  padding:2px 0 6px;
}
.lang-inline-option{
  display:flex; align-items:center; gap:10px; width:100%;
  min-height:46px; padding:8px 10px;
  border-radius:var(--radius-md, 10px); border:1px solid transparent;
  background:transparent; text-align:left; cursor:pointer;
  color:var(--ink-900, #1a2b20); font-family:var(--sans, system-ui);
  transition:background var(--transition-fast, 120ms), border-color var(--transition-fast, 120ms);
}
.lang-inline-option:hover{ background:rgba(12,51,26,0.06); border-color:var(--green-500, #2F7A44); }
.lang-inline-option.active{ background:rgba(47,122,68,0.12); border-color:var(--green-500, #2F7A44); }
.lang-inline-option .lang-check{ color:var(--green-600, #256B38); flex-shrink:0; visibility:hidden; }
.lang-inline-option.active .lang-check{ visibility:visible; }
[data-theme="dark"] .lang-inline-option{ color:#E8EFE9; }
[data-theme="dark"] .lang-inline-option:hover{ background:rgba(255,255,255,0.08); border-color:rgba(143,175,149,0.55); }
[data-theme="dark"] .lang-inline-option.active{ background:rgba(143,175,149,0.18); border-color:rgba(143,175,149,0.65); }
[data-theme="dark"] .lang-inline-option .lang-check{ color:#8FAF95; }

/* ================================================================
   RTL (Arabic) — static shell. Mirrors the SvelteKit app.css rules:
   applied when the <html> element carries dir="rtl" (set by the picker).
   ================================================================ */
[dir="rtl"] .app-header{ flex-direction:row-reverse; }
[dir="rtl"] .app-header .titles{ text-align:right; }
[dir="rtl"] .bottom-nav{ flex-direction:row-reverse; }
[dir="rtl"] .skip-link{ left:auto; right:16px; }
[dir="rtl"] .section-label,
[dir="rtl"] .page-title,
[dir="rtl"] .page-sub,
[dir="rtl"] .card,
[dir="rtl"] .hero,
[dir="rtl"] .staff-panel{ text-align:right; }
[dir="rtl"] .hero .actions{ flex-direction:row-reverse; }
[dir="rtl"] .quick-tile{ text-align:right; }
[dir="rtl"] .news-item{ flex-direction:row-reverse; }
[dir="rtl"] .dept-card{ flex-direction:row-reverse; text-align:right; }
[dir="rtl"] .msg.user{ justify-content:flex-start; }
[dir="rtl"] .msg.bot{ justify-content:flex-end; }
[dir="rtl"] .composer{ flex-direction:row-reverse; }
[dir="rtl"] .composer input,
[dir="rtl"] .search-box input{ text-align:right; }
[dir="rtl"] .doc-row{ flex-direction:row-reverse; text-align:right; }
[dir="rtl"] .role-opt{ flex-direction:row-reverse; text-align:right; }
[dir="rtl"] .setting-row{ flex-direction:row-reverse; }
[dir="rtl"] .lang-row-tools{ flex-direction:row-reverse; }
[dir="rtl"] .lang-panel{ right:auto; left:0; }
[dir="rtl"] .lang-option{ text-align:right; }
[dir="rtl"] .voice-stage{ direction:rtl; }

/* ================= Brain Bank doc→PDF links ================= */
.doc-row-linked {
  cursor: pointer;
  transition: background var(--transition-fast, 120ms), border-color var(--transition-fast, 120ms), transform var(--transition-fast, 120ms);
}
.doc-row-linked:hover {
  background: rgba(47, 122, 68, 0.06);
}
.doc-row-linked:focus-visible {
  outline: 2px solid var(--green-500, #2F7A44);
  outline-offset: 2px;
}
.doc-preview-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  color: #2F7A44;
  background: rgba(47, 122, 68, 0.10);
  border: 1px solid rgba(47, 122, 68, 0.30);
  border-radius: 10px;
  padding: 1px 8px;
  margin-left: 6px;
  white-space: nowrap;
}
[data-theme="dark"] .doc-preview-chip {
  color: #8FAF95;
  background: rgba(143, 175, 149, 0.14);
  border-color: rgba(143, 175, 149, 0.40);
}

/* ================= Academy progress ring ================= */
.academy-hero__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.academy-hero__copy {
  flex: 1;
  min-width: 220px;
}
.progress-ring-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(243, 238, 221, 0.18);
  border-radius: var(--radius-md);
  padding: 10px 14px;
}
.progress-ring {
  position: relative;
  width: 92px;
  height: 92px;
  flex-shrink: 0;
}
.progress-ring svg {
  transform: rotate(-90deg);
}
.progress-ring__track {
  fill: none;
  stroke: rgba(243, 238, 221, 0.22);
  stroke-width: 9;
}
.progress-ring__arc {
  fill: none;
  stroke: var(--gold-300, #E5C56A);
  stroke-width: 9;
  stroke-linecap: round;
}
.progress-ring__center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.progress-ring__value {
  font-size: 17px;
  font-weight: 800;
  color: #F3EEDD;
}
.progress-ring-meta__title {
  font-size: 12px;
  font-weight: 700;
  color: #F3EEDD;
}
.progress-ring-meta__sub {
  font-size: 11px;
  color: rgba(243, 238, 221, 0.75);
  margin-top: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .progress-ring__arc {
    transition: none !important;
  }
}

/* ============================================================
   DARK MODE — token flip under [data-theme="dark"]
   Auto via prefers-color-scheme; manual override via js/theme.js
   ============================================================ */
[data-theme="dark"]{
  --gold-050: #FEF9C3; /* luminous warm gold/cream for text, badges & highlights */
  --gold-100: #FDE68A;
  --gold-200: #F59E0B;
  --gold-300: #D97706;
  --ink-900: #F8FAFC;  /* ultra-high contrast light text */
  --ink-600: #CBD5E1;  /* crisp secondary text */
  --ink-300: #94A3B8;  /* legible muted text */
  --ink-800: #E2E8F0;
  --ink-950: #F1F5F9;
  --ink-100: #243328;
  --ink-050: #1B291F;
  --white: #17231B;

  --success: #4ADE80;
  --success-soft: rgba(74, 222, 128, 0.14);
  --warning: #FBBF24;
  --warning-soft: rgba(251, 191, 36, 0.14);
  --error: #F87171;
  --error-soft: rgba(248, 113, 113, 0.14);
  --info: #7DD3FC;
  --info-soft: rgba(125, 211, 252, 0.14);

  --glass-bg-l1: rgba(23, 35, 27, 0.78);
  --glass-bg-l2: rgba(23, 35, 27, 0.62);
  --glass-bg-l3: rgba(23, 35, 27, 0.46);
  --glass-border-l1: rgba(148, 163, 184, 0.14);
  --glass-border-l2: rgba(148, 163, 184, 0.10);
  --glass-border-l3: rgba(148, 163, 184, 0.07);
  --glass-highlight: rgba(255, 255, 255, 0.10);

  /* Deep green surfaces (NOT amber) — white text is readable on these */
  --surface-1: #0D1A12;
  --surface-2: #14231A;
  --surface-3: #223528;
  --border-soft: #2E4536;

  --shadow-card: 0 1px 3px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.4);
  --shadow-elevated: 0 4px 12px rgba(0,0,0,0.6), 0 16px 40px rgba(0,0,0,0.6);
  --shadow-modal: 0 8px 24px rgba(0,0,0,0.5), 0 24px 64px rgba(0,0,0,0.65);
  --shadow-inner: inset 0 1px 3px rgba(0,0,0,0.45);
}
/* Autofill + form controls need explicit dark treatment */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
[data-theme="dark"] textarea,
[data-theme="dark"] select{
  background:#1B291F;
  color:#F8FAFC;
  border-color:#2E4536;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder{
  color: #94A3B8;
}
[data-theme="dark"] .card{
  background: rgba(23, 35, 27, 0.94);
  border-color: #24352A;
  color: #F8FAFC;
}
[data-theme="dark"] .quick-tile{
  background: rgba(23, 35, 27, 0.95);
  border-color: #2E4536;
}
[data-theme="dark"] .quick-tile .lbl{
  color: #F8FAFC;
}
[data-theme="dark"] .quick-tile .sub{
  color: #94A3B8;
}
[data-theme="dark"] .badge-client{
  background: rgba(34, 197, 94, 0.18);
  color: #86EFAC !important;
  border: 1px solid rgba(74, 222, 128, 0.3);
}
[data-theme="dark"] .badge-staff{
  background: rgba(239, 68, 68, 0.18);
  color: #FCA5A5 !important;
  border: 1px solid rgba(248, 113, 113, 0.3);
}
[data-theme="dark"] .badge-stakeholder{
  background: rgba(245, 158, 11, 0.18);
  color: #FDE047 !important;
  border: 1px solid rgba(251, 191, 36, 0.3);
}
[data-theme="dark"] .icon-btn{
  background: #1B291F;
  border-color: #2E4536;
  color: #EAF2EC;
}
/* Keep the NAQS crest header & hero on-brand in dark mode */
[data-theme="dark"] .app-header{
  background: linear-gradient(135deg, #0A2A15 0%, #0C331A 60%);
}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]){
    --gold-050: #FEF9C3;
    --gold-100: #FDE68A;
    --gold-200: #F59E0B;
    --gold-300: #D97706;
    --ink-900: #F8FAFC;
    --ink-600: #CBD5E1;
    --ink-300: #94A3B8;
    --white: #17231B;
    --shadow-card: 0 1px 3px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.4);
    --shadow-elevated: 0 4px 12px rgba(0,0,0,0.6), 0 16px 40px rgba(0,0,0,0.6);
    --shadow-inner: inset 0 1px 3px rgba(0,0,0,0.45);
  }
  html:not([data-theme="light"]) body{
    background:var(--green-950);
  }
  html:not([data-theme="light"]) input:not([type="checkbox"]):not([type="radio"]),
  html:not([data-theme="light"]) textarea,
  html:not([data-theme="light"]) select{
    background:#1B291F;
    color:#F8FAFC;
    border-color:#2E4536;
  }
  html:not([data-theme="light"]) .card{
    background: rgba(23, 35, 27, 0.94);
    border-color: #24352A;
    color: #F8FAFC;
  }
  html:not([data-theme="light"]) .quick-tile{
    background: rgba(23, 35, 27, 0.95);
    border-color: #2E4536;
  }
  html:not([data-theme="light"]) .quick-tile .lbl{
    color: #F8FAFC;
  }
  html:not([data-theme="light"]) .quick-tile .sub{
    color: #94A3B8;
  }
}

/* ---------- Theme toggle button (header) ---------- */
.theme-btn{
  display:inline-flex; align-items:center; gap:5px;
  min-height:36px; padding:6px 12px;
  border-radius:var(--radius-full);
  border:1px solid var(--gold-200);
  background:rgba(255,255,255,0.7);
  color:var(--ink-900);
  font-size:11.5px; font-weight:700;
  transition:background var(--transition-fast, 120ms), border-color var(--transition-fast, 120ms);
}
.theme-btn:hover{ border-color:var(--green-500); }
.theme-btn:focus-visible{ outline:2px solid var(--green-500); outline-offset:2px; }
[data-theme="dark"] .theme-btn{
  background:#1B291F; border-color:#2E4536; color:#EAF2EC;
}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .theme-btn{
    background:#1B291F; border-color:#2E4536; color:#EAF2EC;
  }
}

/* ============================================================
   PAGE-SPECIFIC: trivia.html — Brain Bank Trivia Challenge
   ============================================================ */
.quick-tile-trivia {
  border-color: rgba(217, 119, 6, 0.3);
  background: linear-gradient(135deg, rgba(254, 243, 199, 0.5) 0%, rgba(255, 255, 255, 0.95) 100%);
}
.quick-tile-trivia:hover {
  border-color: #d97706;
  box-shadow: 0 6px 20px rgba(217, 119, 6, 0.2);
}
.home-hero-trivia {
  padding: 10px 14px;
}
.trivia-hud-card {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--gold-200);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  box-shadow: var(--shadow-card);
  margin-bottom: 12px;
}
.trivia-exit-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-600);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.trivia-exit-link:hover {
  color: var(--green-700-real);
  background: rgba(29, 122, 65, 0.08);
}
.trivia-progress-badge {
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-900);
}
.trivia-streak-pill {
  font-size: 11px;
  font-weight: 700;
  color: #b45309;
  background: rgba(254, 243, 199, 0.9);
  border: 1px solid rgba(245, 158, 11, 0.4);
  padding: 2px 8px;
  border-radius: 20px;
}
.trivia-score-pill {
  font-size: 11px;
  font-weight: 700;
  color: var(--green-700-real);
  background: var(--green-100);
  padding: 2px 8px;
  border-radius: 20px;
}
.trivia-progress-track {
  width: 100%;
  height: 6px;
  background: var(--surface-3);
  border-radius: var(--radius-full);
  margin-top: 10px;
  overflow: hidden;
}
.trivia-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--green-600), #f59e0b);
  border-radius: var(--radius-full);
  transition: width 0.3s ease-out;
}
.trivia-category-tabs {
  margin-bottom: 12px;
}
.trivia-question-card {
  padding: 18px 16px;
}
.trivia-card-meta {
  margin-bottom: 8px;
}
.trivia-timer-wrap {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-600);
}
.trivia-timer-bar-track {
  width: 100%;
  height: 4px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-full);
  margin-bottom: 14px;
  overflow: hidden;
}
.trivia-timer-bar-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #10b981, #f59e0b, #ef4444);
  transition: width 0.1s linear;
}
.trivia-question-text {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink-900);
  margin: 0 0 16px;
}
.trivia-options-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.trivia-option-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--gold-200);
  background: var(--white);
  color: var(--ink-900);
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.trivia-option-btn:hover:not(:disabled) {
  border-color: var(--green-500);
  background: rgba(29, 122, 65, 0.05);
  transform: translateX(2px);
}
.trivia-option-btn:focus-visible {
  outline: 2px solid var(--green-500);
  outline-offset: 2px;
}
.trivia-option-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--gold-200);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-900);
  flex-shrink: 0;
}
.trivia-option-text {
  flex: 1;
  line-height: 1.35;
}
.trivia-option-correct {
  border-color: #10b981 !important;
  background: rgba(16, 185, 129, 0.12) !important;
  color: #065f46 !important;
  font-weight: 700;
}
.trivia-option-correct .trivia-option-letter {
  /* Deep emerald instead of #10b981: white letter passes AA (7.7:1 vs 2.5:1) */
  background: #065f46;
  color: #fff;
  border-color: #065f46;
}
.trivia-option-wrong {
  border-color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.1) !important;
  color: #991b1b !important;
  font-weight: 700;
}
.trivia-option-wrong .trivia-option-letter {
  /* Deep red instead of #ef4444: white letter passes AA (8.3:1 vs 3.8:1) */
  background: #991b1b;
  color: #fff;
  border-color: #991b1b;
}
.trivia-feedback-card {
  padding: 12px 14px;
  border-radius: var(--radius-md);
  margin-bottom: 14px;
  animation: fadeIn 200ms ease;
}
.trivia-feedback-correct {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #065f46;
}
.trivia-feedback-wrong {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #991b1b;
}
.trivia-feedback-title {
  font-weight: 700;
  font-size: 13.5px;
  margin-bottom: 4px;
}
.trivia-feedback-desc {
  font-size: 12px;
  line-height: 1.45;
  margin: 0;
}
.trivia-next-btn {
  margin-top: 4px;
}
.trivia-gameover-card {
  text-align: center;
  padding: 28px 18px;
}

/* ═══════════════════════════════════════════════════════════════
   TRIVIA SMART DASHBOARD — question bank statistics panel
   ═══════════════════════════════════════════════════════════════ */
.trivia-dashboard {
  padding: 16px 14px 12px;
  margin-bottom: 14px;
}
.trivia-dash-head {
  margin-bottom: 10px;
}
.trivia-dash-title {
  margin: 0;
}
.trivia-dash-toggle {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-700);
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid var(--gold-200);
  border-radius: 14px;
  padding: 3px 12px;
  cursor: pointer;
}
.trivia-dash-toggle:hover {
  background: rgba(0, 0, 0, 0.09);
}
.trivia-dash-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.trivia-dash-stat {
  border-radius: var(--radius-sm);
  border: 1px solid var(--gold-200);
  padding: 10px 6px;
  text-align: center;
  background: rgba(0, 0, 0, 0.03);
}
.trivia-dash-stat--total { background: rgba(12, 51, 26, 0.08); }
.trivia-dash-stat--answered { background: rgba(22, 163, 74, 0.10); }
.trivia-dash-stat--unanswered { background: rgba(245, 158, 11, 0.12); }
.trivia-dash-stat--accuracy { background: rgba(59, 130, 246, 0.10); }
.trivia-dash-val {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink-900);
  line-height: 1.1;
}
.trivia-dash-lbl {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-600);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.trivia-dash-meta {
  border: 1px dashed var(--gold-200);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-bottom: 12px;
}
.trivia-dash-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  color: var(--ink-700);
  padding: 4px 0;
}
.trivia-dash-meta-row strong {
  font-variant-numeric: tabular-nums;
}
.trivia-dash-meta-row-last {
  border-bottom: none;
}
.trivia-dash-cats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px;
}
.trivia-dash-cat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  padding: 5px 10px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid transparent;
  color: var(--ink-700);
}
.trivia-dash-cat--partial {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.35);
}
.trivia-dash-cat--done {
  background: rgba(22, 163, 74, 0.12);
  border-color: rgba(22, 163, 74, 0.35);
}
.trivia-dash-cat-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trivia-dash-cat-nums {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  flex-shrink: 0;
}
/* ── Live leaderboard (real-time standings) ─────────────────── */
.trivia-leaderboard {
  border: 1px solid var(--gold-200);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: rgba(12, 51, 26, 0.04);
}
.trivia-lb-head {
  margin-bottom: 8px;
}
.trivia-lb-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-900);
}
.trivia-lb-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  color: #166534;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.trivia-lb-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #16a34a;
  animation: trivia-lb-pulse 2s ease-in-out infinite;
}
@keyframes trivia-lb-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5); }
  50% { opacity: 0.55; box-shadow: 0 0 0 4px rgba(22, 163, 74, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .trivia-lb-dot { animation: none; }
}
.trivia-lb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.trivia-lb-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  padding: 6px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid transparent;
  color: var(--ink-800, var(--ink-700));
}
.trivia-lb-row--me {
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.45);
  font-weight: 700;
}
.trivia-lb-rank {
  flex-shrink: 0;
  width: 28px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.trivia-lb-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trivia-lb-xp {
  flex-shrink: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-900);
}
.trivia-lb-empty {
  font-size: 12px;
  color: var(--ink-600);
  padding: 6px 2px;
}
/* Dark mode — WCAG AA compliant contrast */
[data-theme="dark"] .trivia-leaderboard {
  background: rgba(12, 51, 26, 0.45);
  border-color: rgba(243, 238, 221, 0.14);
}
[data-theme="dark"] .trivia-lb-title { color: #F3EEDD; }
[data-theme="dark"] .trivia-lb-live { color: #4ADE80; }
[data-theme="dark"] .trivia-lb-row {
  background: rgba(255, 255, 255, 0.05);
  color: #D7E2DA;
}
[data-theme="dark"] .trivia-lb-row--me {
  background: rgba(251, 191, 36, 0.16);
  border-color: rgba(251, 191, 36, 0.45);
  color: #FDF6E3;
}
[data-theme="dark"] .trivia-lb-xp { color: #F3EEDD; }
[data-theme="dark"] .trivia-lb-empty { color: #B7C9BB; }
/* Dark mode — WCAG AA compliant contrast */
[data-theme="dark"] .trivia-dashboard {
  background: rgba(12, 51, 26, 0.45);
}
[data-theme="dark"] .trivia-dash-stat {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(243, 238, 221, 0.14);
}
[data-theme="dark"] .trivia-dash-stat--total { background: rgba(143, 175, 149, 0.16); }
[data-theme="dark"] .trivia-dash-stat--answered { background: rgba(74, 222, 128, 0.14); }
[data-theme="dark"] .trivia-dash-stat--unanswered { background: rgba(251, 191, 36, 0.14); }
[data-theme="dark"] .trivia-dash-stat--accuracy { background: rgba(96, 165, 250, 0.14); }
[data-theme="dark"] .trivia-dash-val { color: #F3EEDD; }
[data-theme="dark"] .trivia-dash-lbl { color: #B7C9BB; }
[data-theme="dark"] .trivia-dash-meta { border-color: rgba(243, 238, 221, 0.18); }
[data-theme="dark"] .trivia-dash-meta-row { color: #D7E2DA; }
[data-theme="dark"] .trivia-dash-toggle {
  color: #E8EFE9;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(243, 238, 221, 0.22);
}
[data-theme="dark"] .trivia-dash-cat {
  background: rgba(255, 255, 255, 0.06);
  color: #D7E2DA;
}
[data-theme="dark"] .trivia-dash-cat--partial { background: rgba(251, 191, 36, 0.16); }
[data-theme="dark"] .trivia-dash-cat--done { background: rgba(74, 222, 128, 0.16); }
@media (max-width: 520px) {
  .trivia-dash-grid { grid-template-columns: repeat(2, 1fr); }
}
.trivia-trophy-display {
  font-size: 48px;
  margin-bottom: 10px;
  filter: drop-shadow(0 4px 12px rgba(245, 158, 11, 0.4));
}
.trivia-gameover-title {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--ink-900);
  margin: 0 0 8px;
}
.trivia-rank-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: #b45309;
  background: rgba(254, 243, 199, 0.95);
  border: 1px solid rgba(245, 158, 11, 0.4);
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 8px;
}
.trivia-gameover-sub {
  font-size: 12.5px;
  color: var(--ink-600);
  margin: 0 0 20px;
}
.trivia-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 24px;
}
.trivia-stat-box {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid var(--gold-200);
  border-radius: var(--radius-sm);
  padding: 10px 4px;
}
.trivia-stat-val {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-900);
}
.trivia-stat-lbl {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-600);
  text-transform: uppercase;
  margin-top: 2px;
}
.trivia-gameover-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.text-green { color: #10b981 !important; }
.text-red { color: #ef4444 !important; }

/* Dark mode overrides for trivia */
[data-theme="dark"] .trivia-hud-card,
[data-theme="dark"] .trivia-option-btn,
[data-theme="dark"] .trivia-stat-box {
  background: #1B291F;
  border-color: #2E4536;
  color: #EAF2EC;
}
[data-theme="dark"] .trivia-question-text,
[data-theme="dark"] .trivia-progress-badge,
[data-theme="dark"] .trivia-gameover-title,
[data-theme="dark"] .trivia-stat-val {
  color: #EAF2EC;
}
[data-theme="dark"] .trivia-exit-link,
[data-theme="dark"] .trivia-timer-wrap,
[data-theme="dark"] .trivia-gameover-sub,
[data-theme="dark"] .trivia-stat-lbl {
  color: #A1B8A7;
}
[data-theme="dark"] .trivia-option-letter {
  background: #24352A;
  border-color: #2E4536;
  color: #EAF2EC;
}
[data-theme="dark"] .quick-tile-trivia {
  background: linear-gradient(135deg, rgba(180, 83, 9, 0.25) 0%, #1B291F 100%);
  border-color: rgba(217, 119, 6, 0.4);
}
[data-theme="dark"] .trivia-option-correct {
  background: rgba(16, 185, 129, 0.25) !important;
  color: #6ee7b7 !important;
}
[data-theme="dark"] .trivia-option-wrong {
  background: rgba(239, 68, 68, 0.25) !important;
  color: #fca5a5 !important;
}
/* Amber pills keep their light parchment chip in dark mode — recolor to dark
   surfaces with bright amber text for theme cohesion + AA contrast (7.9:1). */
[data-theme="dark"] .trivia-streak-pill,
[data-theme="dark"] .trivia-rank-badge {
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.45);
  color: #FCD34D;
}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .trivia-streak-pill,
  html:not([data-theme="light"]) .trivia-rank-badge {
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.45);
    color: #FCD34D;
  }
}

/* Settings and Nav Link Utilities (Zero inline style compliance) */
.settings-nav-btn {
  font-size: 16px;
  text-decoration: none;
  margin-right: 4px;
}
.settings-nav-btn-lg {
  font-size: 18px;
  text-decoration: none;
}
.academy-promo-banner {
  background: rgba(218, 165, 32, 0.12);
  border: 1px solid rgba(218, 165, 32, 0.3);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.academy-promo-text {
  font-size: 12.5px;
  color: var(--ink-900);
}
.academy-promo-btn {
  font-size: 11.5px;
  padding: 4px 10px;
  text-decoration: none;
  white-space: nowrap;
}
.staff-section-hidden {
  display: none;
}
.save-staff-btn {
  margin-top: 12px;
}
.staff-save-msg-hidden {
  display: none;
}

/* ── Global header hamburger menu — full-screen drawer ─────────── */

/* Hamburger button — lives at right edge of header, never overflows */
.header-menu-btn {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 10px 8px;
  border: 1.5px solid rgba(255,255,255,0.22);
  border-radius: var(--radius-sm, 8px);
  background: rgba(255,255,255,0.08);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.header-menu-btn:hover {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.35);
}
.header-menu-btn:focus-visible {
  outline: 2px solid var(--green-400, #3aad66);
  outline-offset: 2px;
}
.header-menu-bar {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--gold-100, #F3EEDD);
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.header-menu-btn.open .header-menu-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header-menu-btn.open .header-menu-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.header-menu-btn.open .header-menu-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Overlay deleted completely — no backdrop pseudo-element or overlay element exists.
   The screen remains completely clear, unblurred, and unblocked when the menu is open. */

/* Drawer panel — fixed, slides in from the right */
.header-menu-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 90vw);
  z-index: 300;
  background: var(--surface-1);
  border-left: 1.5px solid var(--border-soft);
  box-shadow: -8px 0 32px rgba(12, 51, 26, 0.20);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: env(safe-area-inset-bottom, 16px);
}
.header-menu-panel[hidden] { display: none; }

/* Drawer children must never flex-shrink: with overflow-y:auto the panel
   should SCROLL, not squash items (squashing makes the inline language
   list overflow under the nav links, which then intercept its taps). */
.header-menu-panel > * { flex-shrink: 0; }

/* Drawer header row — matches app header height exactly */
.header-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: 56px;
  border-bottom: 1px solid var(--gold-200, #e3d9b8);
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--green-950) 0%, var(--green-900) 100%);
}
.header-menu-title {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--gold-100, #F3EEDD);
  letter-spacing: 0.3px;
}
.header-menu-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.08);
  color: var(--gold-100, #F3EEDD);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition-fast);
  flex-shrink: 0;
}
.header-menu-close:hover { background: rgba(255,255,255,0.18); }

/* Section label dividers */
.header-menu-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-300, #6F6D60);
  padding: 14px 16px 4px;
  flex-shrink: 0;
}

/* Language picker slot */
.header-menu-lang-wrap {
  padding: 4px 12px 8px;
  min-height: 40px;
}

/* Navigation / action items — 44px minimum tap target */
.header-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-900, #1A1A14);
  text-decoration: none;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  cursor: pointer;
  min-height: 44px;
  font-family: var(--sans);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.header-menu-item:hover,
.header-menu-item:focus-visible {
  background: var(--green-100, #E4F0E7);
  color: var(--green-800, #124A26);
  outline: none;
}
.header-menu-item--active {
  background: var(--green-100, #E4F0E7);
  color: var(--green-700-real, #166032);
  font-weight: 700;
}
.header-menu-ic {
  font-size: 18px;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}
.header-menu-ext {
  margin-left: auto;
  font-size: 12px;
  color: var(--ink-300, #6F6D60);
}
.header-menu-theme-btn { justify-content: flex-start; }
.header-menu-theme-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--surface-3);
  color: var(--ink-600);
  letter-spacing: 0.05em;
}

/* Anchor the header for z-index stacking */
.app-header { position: relative; z-index: 100; }
header { position: relative; }

/* ── Saved profile data review panel ────────────────────────────── */
.staff-profile-review {
  margin: 12px 0;
  border: 1px solid var(--green-200, #d8e5d8);
  border-radius: var(--radius-md, 10px);
  background: var(--green-50, #f4f9f4);
  padding: 10px 12px;
}
.staff-review-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.staff-review-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--green-900, #0C331A);
}
.staff-review-ts {
  font-size: 11px;
  color: var(--ink-700, #5a6b5a);
}
.staff-review-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 5px 0;
  border-top: 1px dashed var(--green-200, #d8e5d8);
}
.staff-review-label {
  font-size: 12px;
  color: var(--ink-700, #5a6b5a);
  flex: 0 0 44%;
}
.staff-review-value {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-900, #1a241a);
  text-align: right;
  word-break: break-word;
}
.staff-review-missing {
  font-weight: 400;
  font-style: italic;
  color: var(--ink-500, #8a998a);
}
.staff-review-empty,
.staff-profile-empty {
  font-size: 12.5px;
  color: var(--ink-700, #5a6b5a);
  font-style: italic;
}
.staff-info-banner {
  display: none;
  margin: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--green-100);
  border: 1px solid var(--green-400);
  color: var(--green-900);
  padding: 10px 14px;
  font-size: 13px;
  align-items: center;
  gap: 8px;
}
.staff-soc-overlay-hidden {
  display: none !important;
}

/* =========================================================================
   STAFF AUTHENTICATION CARD (profile page) — login / signup / session
   ========================================================================= */
.staff-auth-card {
  padding: 16px;
}
.staff-auth-intro {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-700);
  margin-bottom: 12px;
}
.staff-auth-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.staff-auth-btn {
  min-height: 44px;
}
.staff-auth-actions .staff-auth-btn {
  flex: 1 1 140px;
}
.staff-auth-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.staff-auth-form[hidden] {
  display: none;
}
.staff-auth-form-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-900);
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Standardized auth forms reuse the profile-form-grid + form-field system;
   tighten the grid gap slightly inside the compact auth card. */
.staff-auth-form .profile-form-grid {
  gap: 10px;
}
.staff-auth-form-note {
  font-size: 11.5px;
  color: var(--ink-600);
  line-height: 1.4;
}
.staff-auth-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.staff-auth-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-800, var(--ink-900));
}
.staff-auth-field .muted {
  font-weight: 400;
  font-size: 11px;
}
.staff-auth-field input {
  min-height: 44px;
  padding: 8px 12px;
  border-radius: var(--radius-md, 10px);
  border: 1.5px solid var(--gold-200);
  background: var(--white);
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-900);
}
.staff-auth-field input:focus-visible {
  outline: 2px solid var(--green-500);
  outline-offset: 1px;
  border-color: var(--green-500);
}
.staff-auth-error {
  background: rgba(178, 34, 34, 0.08);
  border: 1px solid rgba(178, 34, 34, 0.4);
  color: #8b1a1a;
  border-radius: var(--radius-md, 10px);
  padding: 8px 12px;
  font-size: 12.5px;
  line-height: 1.45;
}
.staff-auth-error[hidden] {
  display: none;
}
.staff-auth-cancel {
  background: none;
  border: none;
  color: var(--ink-600);
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  min-height: 36px;
  text-decoration: underline;
}
.staff-auth-cancel:hover {
  color: var(--ink-900);
}
.staff-auth-session {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.staff-auth-session[hidden] {
  display: none;
}
.staff-auth-session-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.staff-auth-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(29, 122, 65, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.staff-auth-session-info {
  flex: 1;
  min-width: 0;
}
.staff-auth-session-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-900);
}
.staff-auth-session-meta {
  font-size: 11.5px;
  color: var(--ink-600);
  margin-top: 2px;
}
[data-theme="dark"] .staff-auth-field input {
  background: rgba(16, 40, 24, 0.7);
  border-color: rgba(74, 222, 128, 0.18);
  color: var(--ink-050, #f3eedd);
}
[data-theme="dark"] .staff-auth-error {
  background: rgba(178, 34, 34, 0.2);
  color: #ffb4b4;
}
@media (prefers-reduced-motion: no-preference) {
  .staff-auth-form,
  .staff-auth-session {
    animation: staff-auth-fade 200ms ease-out;
  }
  @keyframes staff-auth-fade {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

/* =========================================================================
   ACADEMY ADVANCED SEARCH, FILTERING, PAGINATION & PDF PREVIEW ENGINE
   ========================================================================= */

/* Saved Searches Strip */
.saved-searches-strip {
  background: var(--surface-1);
  border: 1px solid var(--gold-200);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.saved-searches-strip[hidden] {
  display: none !important;
}
.saved-searches-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--green-900);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.clear-saved-searches-btn {
  background: none;
  border: none;
  color: var(--ink-500);
  font-size: 11px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color var(--transition-fast);
}
.clear-saved-searches-btn:hover {
  color: var(--red-600, #dc2626);
}
.saved-searches-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.saved-search-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--gold-300, #d4b152);
  border-radius: 16px;
  padding: 4px 10px;
  font-size: 11.5px;
  color: var(--ink-800);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.saved-search-pill:hover {
  border-color: var(--green-700);
  background: var(--surface-2);
}
.saved-search-pill.active {
  background: var(--green-800);
  color: #FFFFFF;
  border-color: var(--green-900);
}
.saved-search-pill__delete {
  background: none;
  border: none;
  color: inherit;
  font-size: 11px;
  padding: 0 2px;
  cursor: pointer;
  opacity: 0.7;
}
.saved-search-pill__delete:hover {
  opacity: 1;
}

/* Advanced Filter Section */
.academy-filter-section {
  background: var(--surface);
  border: 1.5px solid var(--gold-200);
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(12, 51, 26, 0.05);
}
.academy-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  align-items: flex-end;
}
.filter-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.filter-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-800);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.academy-select {
  display: block;
  width: 100%;
  height: 42px;
  box-sizing: border-box;
  padding: 8px 36px 8px 12px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--sans);
  color: var(--ink-900);
  background: var(--surface);
  border: 1.5px solid var(--gold-200);
  border-radius: 10px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23166032' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px 14px;
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.academy-select:hover {
  border-color: var(--green-500);
}
.academy-select:focus {
  border-color: var(--green-600);
  box-shadow: 0 0 0 3px rgba(29, 122, 65, 0.18);
}
.filter-actions-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.filter-actions-buttons {
  display: flex;
  gap: 8px;
  width: 100%;
}
.academy-filter-action-btn {
  flex: 1;
  height: 42px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 10px;
  border: 1.5px solid var(--gold-300);
  background: var(--surface);
  color: var(--green-900);
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.18s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.academy-filter-action-btn:hover {
  background: var(--surface-2);
  border-color: var(--green-600);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(12, 51, 26, 0.08);
}
.academy-filter-action-btn.active {
  background: var(--green-800);
  border-color: var(--green-900);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(22,96,50,0.25);
}
.academy-filter-save-btn {
  background: var(--surface-2);
  border-color: var(--gold-300);
  color: var(--green-950);
}
.academy-filter-save-btn:hover {
  background: var(--surface-3);
  border-color: var(--green-600);
}

/* Status & Page Size Row */
.academy-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--gold-300);
  flex-wrap: wrap;
  gap: 10px;
}
.academy-doc-count {
  font-size: 13px;
  font-weight: 700;
  color: var(--green-900);
  background: rgba(29, 122, 65, 0.08);
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid rgba(29, 122, 65, 0.18);
}
.academy-page-size-picker {
  display: flex;
  align-items: center;
  gap: 8px;
}
.page-size-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-700);
}
.page-size-select {
  height: 34px;
  padding: 4px 28px 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border: 1.5px solid var(--gold-200);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink-900);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23166032' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px 12px;
  cursor: pointer;
}

/* Pagination Bar (Floating Pill Bar — Zero Line Wrap Distortion) */
.academy-pagination {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 32px auto 20px !important;
  padding: 8px 18px !important;
  background: var(--surface) !important;
  border: 1.5px solid var(--gold-200) !important;
  border-radius: 30px !important;
  box-shadow: 0 4px 14px rgba(12, 51, 26, 0.06) !important;
  max-width: fit-content !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
}
.academy-pagination[hidden] {
  display: none !important;
}
.page-numbers-container {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}
.pagination-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 38px !important;
  height: 38px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--ink-800) !important;
  background: var(--surface) !important;
  border: 1.5px solid var(--gold-200) !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  flex-shrink: 0 !important;
}
.pagination-btn:hover:not(:disabled) {
  background: var(--green-100) !important;
  border-color: var(--green-600) !important;
  color: var(--green-950) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(29, 122, 65, 0.18) !important;
}
.pagination-btn.active {
  background: linear-gradient(135deg, var(--green-800) 0%, var(--green-600) 100%) !important;
  border-color: var(--green-900) !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 12px rgba(22, 96, 50, 0.30) !important;
}
.pagination-btn:disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  border-color: var(--border) !important;
  transform: none !important;
  box-shadow: none !important;
}
.pagination-ellipsis {
  padding: 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-500);
}
#prevPageBtn,
#nextPageBtn {
  padding: 0 16px !important;
  font-weight: 700 !important;
}

/* PDF Preview Cap Notice Banner */
.pdf-preview-notice {
  background: var(--surface-2);
  border-bottom: 1px solid var(--gold-300);
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--green-950);
}
.pdf-preview-notice--staff {
  background: var(--green-100);
  border-bottom: 1px solid var(--green-400);
  color: var(--green-950);
}
.pdf-preview-notice__icon {
  font-size: 14px;
  flex-shrink: 0;
}
.pdf-preview-notice__text {
  flex: 1;
}

/* Dark Mode Adaptations */
[data-theme="dark"] .saved-searches-strip {
  background: #1A291E;
  border-color: #2E4536;
}
[data-theme="dark"] .saved-searches-header {
  color: #A1B8A7;
}
[data-theme="dark"] .saved-search-pill {
  background: #24352A;
  border-color: #385542;
  color: #EAF2EC;
}
[data-theme="dark"] .saved-search-pill:hover {
  background: #2D4335;
}
[data-theme="dark"] .saved-search-pill.active {
  background: #1D7A41;
  color: #FFFFFF;
}
[data-theme="dark"] .academy-filter-section {
  background: #0c2516 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}
[data-theme="dark"] .filter-label {
  color: #a1b8a7 !important;
}
[data-theme="dark"] .academy-select {
  background: #092113 !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #f0fdf4 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233aad66' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
}
[data-theme="dark"] .academy-select:hover {
  border-color: var(--green-400) !important;
}
[data-theme="dark"] .academy-select:focus {
  border-color: var(--green-400) !important;
  box-shadow: 0 0 0 3px rgba(58, 173, 102, 0.25) !important;
}
[data-theme="dark"] .academy-filter-action-btn {
  background: #092113 !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #e4f0e7 !important;
}
[data-theme="dark"] .academy-filter-action-btn:hover {
  background: #123d21 !important;
  border-color: var(--green-400) !important;
}
[data-theme="dark"] .academy-filter-action-btn.active {
  background: var(--green-600) !important;
  border-color: var(--green-500) !important;
  color: #ffffff !important;
}
[data-theme="dark"] .academy-filter-save-btn {
  background: #11341d !important;
  border-color: #2e693d !important;
  color: #a7f3d0 !important;
}
[data-theme="dark"] .academy-status-bar {
  border-top-color: rgba(255, 255, 255, 0.10) !important;
}
[data-theme="dark"] .academy-doc-count {
  background: rgba(58, 173, 102, 0.14) !important;
  color: #a7f3d0 !important;
  border-color: rgba(58, 173, 102, 0.25) !important;
}
[data-theme="dark"] .page-size-label {
  color: #a1b8a7 !important;
}
[data-theme="dark"] .page-size-select {
  background: #092113 !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #f0fdf4 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233aad66' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
}
[data-theme="dark"] .academy-pagination {
  background: #0c2516 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}
[data-theme="dark"] .pagination-btn {
  background: #081d11 !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #e4f0e7 !important;
}
[data-theme="dark"] .pagination-btn:hover:not(:disabled) {
  background: #123d21 !important;
  border-color: var(--green-400) !important;
  color: #ffffff !important;
}
[data-theme="dark"] .pagination-btn.active {
  background: linear-gradient(135deg, var(--green-600) 0%, var(--green-500) 100%) !important;
  border-color: var(--green-400) !important;
  color: #ffffff !important;
}
[data-theme="dark"] .pagination-ellipsis {
  color: #7aa882 !important;
}
[data-theme="dark"] .pdf-preview-notice {
  background: #2A2F1F;
  border-color: #4A502D;
  color: #EAD98A;
}
[data-theme="dark"] .pdf-preview-notice--staff {
  background: #183321;
  border-color: #2A5638;
  color: #8FD8A8;
}

/* Academy Card Enhancements & Pure CSS Classes (No Inline Styles) */
.doc-topic-pill {
  background: var(--surface-1);
  border: 1px solid var(--gold-200);
  border-radius: 10px;
  padding: 2px 7px;
  font-size: 10.5px;
  color: var(--ink-600);
}
[data-theme="dark"] .doc-topic-pill {
  background: #24352A;
  border-color: #385542;
  color: #C8D6CD;
}
.academy-empty-state {
  text-align: center;
  padding: 40px 20px;
  background: var(--surface-2);
  border-radius: var(--radius-md);
  border: 1px dashed var(--gold-200);
}
[data-theme="dark"] .academy-empty-state {
  background: #1B291F;
  border-color: #2E4536;
}
.academy-empty-state__icon {
  font-size: 32px;
  margin-bottom: 8px;
}
.academy-empty-state__title {
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: 4px;
}
[data-theme="dark"] .academy-empty-state__title {
  color: #FFFFFF;
}
.academy-empty-state__desc {
  font-size: 13px;
  color: var(--ink-600);
}
[data-theme="dark"] .academy-empty-state__desc {
  color: #A1B8A7;
}
.academy-loading-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--ink-600);
}
[data-theme="dark"] .academy-loading-state {
  color: #A1B8A7;
}
.academy-loading-state__icon {
  font-size: 28px;
  margin-bottom: 8px;
}
.academy-card__topics-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: 100%;
  margin-top: 4px;
}
.academy-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.academy-card__header-badges {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pdf-modal__toolbar-btn.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
body.modal-open {
  overflow: hidden;
}

/* ============================================================
   NAQS Padi — 3D Visual Effects & Glassmorphism Design System v3
   Enterprise-grade 3D Depth · Frosted Glassmorphism · Ambient Lighting
   ============================================================ */

/* ── 3D & Glassmorphism CSS Variables ──────────────────────── */
:root {
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-bg-hover: rgba(255, 255, 255, 0.88);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-border-subtle: rgba(18, 74, 38, 0.12);
  --glass-shadow: 0 8px 32px 0 rgba(12, 51, 26, 0.10);
  --glass-shadow-elevated: 0 16px 48px 0 rgba(12, 51, 26, 0.16), 0 4px 12px 0 rgba(12, 51, 26, 0.08);
  --glass-shadow-3d: 0 20px 40px -15px rgba(12, 51, 26, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.8), inset 0 1px 1px rgba(255, 255, 255, 0.9);
  --glass-highlight: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.05) 100%);
  --glass-blur: blur(18px) saturate(180%);
  --orb-grad-base: radial-gradient(circle at 35% 35%, #3aad66 0%, #166032 55%, #07210d 100%);
  --orb-grad-active: radial-gradient(circle at 35% 35%, #58d888 0%, #1d7a41 45%, #0c331a 80%, #07210d 100%);
  --orb-glow: 0 0 35px rgba(58, 173, 102, 0.45);
  --orb-glow-active: 0 0 50px rgba(58, 173, 102, 0.75), 0 0 90px rgba(29, 122, 65, 0.40);
}

[data-theme="dark"] {
  --glass-bg: rgba(16, 40, 24, 0.70);
  --glass-bg-hover: rgba(22, 52, 32, 0.85);
  --glass-border: rgba(74, 222, 128, 0.18);
  --glass-border-subtle: rgba(74, 222, 128, 0.10);
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.35);
  --glass-shadow-elevated: 0 16px 48px 0 rgba(0, 0, 0, 0.50), 0 4px 16px 0 rgba(0, 0, 0, 0.30);
  --glass-shadow-3d: 0 20px 40px -15px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(74, 222, 128, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.12);
  --glass-highlight: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 100%);
  --orb-grad-base: radial-gradient(circle at 35% 35%, #4ade80 0%, #166032 55%, #051409 100%);
  --orb-grad-active: radial-gradient(circle at 35% 35%, #86efac 0%, #22c55e 45%, #15803d 75%, #052e16 100%);
  --orb-glow: 0 0 35px rgba(74, 222, 128, 0.35);
  --orb-glow-active: 0 0 55px rgba(74, 222, 128, 0.80), 0 0 100px rgba(34, 197, 94, 0.45);
}

/* ── App Mesh Gradient Background ──────────────────────────── */
body {
  background: radial-gradient(ellipse 80% 80% at 50% -20%, rgba(22, 96, 50, 0.35), transparent),
              radial-gradient(ellipse 60% 60% at 100% 100%, rgba(12, 51, 26, 0.5), transparent),
              var(--green-950);
  background-attachment: fixed;
}

[data-theme="dark"] body {
  background: radial-gradient(ellipse 80% 80% at 50% -20%, rgba(22, 96, 50, 0.25), transparent),
              radial-gradient(ellipse 60% 60% at 100% 100%, rgba(7, 33, 13, 0.7), transparent),
              #030d06;
  background-attachment: fixed;
}

.device {
  perspective: 1200px;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  background: linear-gradient(180deg, var(--gold-050) 0%, rgba(251, 249, 241, 0.96) 100%);
}

[data-theme="dark"] .device {
  background: linear-gradient(180deg, #0d1e13 0%, #07150c 100%);
}

/* ── Glassmorphic Header & Navigation ──────────────────────── */
.app-header {
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(255, 255, 255, 0.1);
  position: sticky;
  top: 0;
  z-index: 50;
}

.bottom-nav {
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  background: linear-gradient(180deg, rgba(7, 33, 13, 0.88) 0%, rgba(12, 51, 26, 0.95) 100%);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .bottom-nav {
  background: linear-gradient(180deg, rgba(5, 20, 9, 0.92) 0%, rgba(8, 28, 14, 0.98) 100%);
  border-top-color: rgba(74, 222, 128, 0.15);
}

/* ── 3D Interactive Cards & Surfaces ───────────────────────── */
.card,
.quick-tile,
.news-item {
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-3d);
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), background-color var(--transition-smooth), border-color var(--transition-smooth);
  transform-style: preserve-3d;
}

.card:hover,
.quick-tile:hover {
  transform: translateY(-3px) translateZ(8px);
  box-shadow: var(--glass-shadow-elevated), 0 0 0 1px var(--green-400);
  background: var(--glass-bg-hover);
}

.card:active,
.quick-tile:active {
  transform: translateY(1px) scale(0.99);
  transition-duration: 80ms;
}

/* ── 3D Tactile Buttons ────────────────────────────────────── */
.btn {
  transform-style: preserve-3d;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.btn-primary {
  background: linear-gradient(135deg, #1D7A41 0%, #166032 50%, #124A26 100%);
  box-shadow: 0 4px 14px rgba(22, 96, 50, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #279652 0%, #1D7A41 50%, #166032 100%);
  box-shadow: 0 6px 20px rgba(22, 96, 50, 0.45), 0 0 12px rgba(58, 173, 102, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  transform: translateY(-2px) translateZ(4px);
}

.btn-primary:active {
  transform: translateY(2px) scale(0.98);
  box-shadow: 0 2px 6px rgba(22, 96, 50, 0.3);
}

.btn-outline {
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.btn-outline:hover {
  background: var(--glass-bg-hover);
  border-color: var(--green-600);
  transform: translateY(-2px) translateZ(4px);
  box-shadow: 0 4px 16px rgba(22, 96, 50, 0.15);
}

/* ============================================================
   VOICE AGENT — 3D STAGE & ORB VISUALIZER SYSTEM
   ============================================================ */

.voice-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 16px 32px 16px;
  gap: 16px;
  perspective: 1000px;
  transform-style: preserve-3d;
  width: 100%;
}

/* ── 3D Voice Orb Button ───────────────────────────────────── */
.mic-ring {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: var(--radius-full);
  background: var(--orb-grad-base);
  border: 3px solid rgba(255, 255, 255, 0.35);
  box-shadow: var(--orb-glow), 0 15px 35px -8px rgba(12, 51, 26, 0.45), inset 0 -4px 8px rgba(0, 0, 0, 0.35), inset 0 4px 8px rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  transition: transform var(--transition-bounce), box-shadow var(--transition-smooth), border-color var(--transition-smooth), background var(--transition-smooth);
  margin: 12px 0 6px 0;
  z-index: 10;
  transform: translateZ(20px);
}

/* Specular 3D highlight reflection */
.mic-ring::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 18px;
  width: 32px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  transform: rotate(-25deg);
}

/* Ambient 3D orbital aura */
.mic-ring::after {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: var(--radius-full);
  border: 2px dashed rgba(58, 173, 102, 0.35);
  animation: orb-orbit 14s linear infinite;
  pointer-events: none;
  opacity: 0.7;
}

.mic-ring:hover {
  transform: translateY(-4px) scale(1.06) translateZ(30px);
  box-shadow: var(--orb-glow-active), 0 20px 40px -6px rgba(12, 51, 26, 0.55);
  border-color: rgba(255, 255, 255, 0.7);
}

.mic-ring:active {
  transform: translateY(2px) scale(0.96) translateZ(10px);
}

/* ── Active Speaking / Listening State ─────────────────────── */
.mic-ring.active,
.mic-ring.listening {
  background: var(--orb-grad-active);
  box-shadow: var(--orb-glow-active), 0 18px 45px -5px rgba(29, 122, 65, 0.6);
  border-color: rgba(255, 255, 255, 0.9);
  animation: orb-pulse-3d 1.8s ease-in-out infinite alternate;
}

.mic-ring.active::after,
.mic-ring.listening::after {
  border-color: rgba(74, 222, 128, 0.8);
  animation: orb-orbit 4s linear infinite, ripple-wave-3d 2s cubic-bezier(0.1, 0.7, 0.1, 1) infinite;
}

@keyframes orb-orbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes orb-pulse-3d {
  0% {
    transform: scale(1) translateZ(20px);
    box-shadow: var(--orb-glow), 0 12px 30px rgba(12, 51, 26, 0.4);
  }
  100% {
    transform: scale(1.08) translateZ(35px);
    box-shadow: var(--orb-glow-active), 0 22px 50px rgba(29, 122, 65, 0.7);
  }
}

@keyframes ripple-wave-3d {
  0% {
    transform: scale(0.95);
    opacity: 0.9;
  }
  100% {
    transform: scale(1.45);
    opacity: 0;
  }
}

/* ── Voice Status Indicator ────────────────────────────────── */
#voiceStatus {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--green-900);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  padding: 6px 16px;
  border-radius: var(--radius-full);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--transition-smooth);
}

[data-theme="dark"] #voiceStatus {
  color: #8FD8A8;
}

#voiceStatus.listening {
  color: #166032;
  border-color: var(--green-500);
  background: rgba(39, 150, 82, 0.15);
  box-shadow: 0 0 16px rgba(39, 150, 82, 0.35);
}

[data-theme="dark"] #voiceStatus.listening {
  color: #4ADE80;
  background: rgba(74, 222, 128, 0.15);
  border-color: #4ADE80;
}

#voiceStatus::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green-600);
  display: inline-block;
  box-shadow: 0 0 8px var(--green-500);
}

#voiceStatus.listening::before {
  background: #22C55E;
  box-shadow: 0 0 12px #22C55E;
  animation: beacon-pulse 1s infinite alternate;
}

@keyframes beacon-pulse {
  from { transform: scale(0.85); opacity: 0.6; }
  to { transform: scale(1.35); opacity: 1; }
}

.hint {
  font-size: 12.5px;
  color: var(--ink-600);
  text-align: center;
}

[data-theme="dark"] .hint {
  color: #A1B8A7;
}

/* ── 3D Equalizer Waveform ─────────────────────────────────── */
.waveform {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 48px;
  padding: 4px 16px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-xl);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-3d);
  width: 100%;
  max-width: 280px;
}

.waveform span {
  display: inline-block;
  width: 4px;
  height: 8px;
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, var(--green-500) 0%, var(--green-800) 100%);
  box-shadow: 0 2px 6px rgba(22, 96, 50, 0.25);
  transition: height var(--transition-fast), background var(--transition-fast);
}

[data-theme="dark"] .waveform span {
  background: linear-gradient(180deg, #4ADE80 0%, #166032 100%);
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.35);
}

/* Animated active state */
.waveform.active span:nth-child(1)  { animation: wave-bar 1.1s ease-in-out infinite 0.1s; }
.waveform.active span:nth-child(2)  { animation: wave-bar 0.9s ease-in-out infinite 0.3s; }
.waveform.active span:nth-child(3)  { animation: wave-bar 1.3s ease-in-out infinite 0.15s; }
.waveform.active span:nth-child(4)  { animation: wave-bar 0.8s ease-in-out infinite 0.4s; }
.waveform.active span:nth-child(5)  { animation: wave-bar 1.4s ease-in-out infinite 0.2s; }
.waveform.active span:nth-child(6)  { animation: wave-bar 1.0s ease-in-out infinite 0.5s; }
.waveform.active span:nth-child(7)  { animation: wave-bar 1.2s ease-in-out infinite 0.25s; }
.waveform.active span:nth-child(8)  { animation: wave-bar 0.9s ease-in-out infinite 0.35s; }
.waveform.active span:nth-child(9)  { animation: wave-bar 1.1s ease-in-out infinite 0.05s; }
.waveform.active span:nth-child(10) { animation: wave-bar 1.0s ease-in-out infinite 0.45s; }

@keyframes wave-bar {
  0%   { height: 6px;  opacity: 0.45; }
  50%  { height: 38px; opacity: 1; transform: scaleY(1.1); }
  100% { height: 6px;  opacity: 0.45; }
}

/* ── 3D Glass Transcript Card ──────────────────────────────── */
.transcript-card {
  width: 100%;
  min-height: 84px;
  max-height: 160px;
  overflow-y: auto;
  padding: 14px 18px;
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1.5px solid var(--glass-border);
  box-shadow: var(--glass-shadow-3d);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-600);
  outline: none;
  transition: all var(--transition-smooth);
}

.transcript-card:focus {
  border-color: var(--green-600);
  box-shadow: 0 0 0 3px var(--green-glow-strong), var(--glass-shadow-elevated);
  transform: translateY(-2px) translateZ(10px);
}

.transcript-card.has-text {
  color: var(--ink-900);
  font-weight: 500;
}

[data-theme="dark"] .transcript-card {
  color: #8EA895;
}

[data-theme="dark"] .transcript-card.has-text {
  color: #F1F6F3;
}

[data-theme="dark"] .transcript-card:focus {
  border-color: #4ADE80;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.25), var(--glass-shadow-elevated);
}

/* ── Voice Action Controls ─────────────────────────────────── */
.voice-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.voice-submit-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14.5px;
  padding: 12px 20px;
  border-radius: var(--radius-md);
}

.voice-clear-btn {
  padding: 12px 18px;
  border-radius: var(--radius-md);
  font-size: 13.5px;
  font-weight: 600;
}

/* ── 3D Voice Reply Card ───────────────────────────────────── */
.voice-reply-card {
  width: 100%;
  padding: 20px;
  border-radius: var(--radius-xl);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1.5px solid var(--glass-border);
  box-shadow: var(--glass-shadow-3d);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transform-style: preserve-3d;
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.voice-reply-card:hover {
  transform: translateY(-2px) translateZ(6px);
  box-shadow: var(--glass-shadow-elevated);
}

.voice-reply-body {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-900);
}

[data-theme="dark"] .voice-reply-body {
  color: #E2ECE5;
}

/* ── Micro-Animated TTS Controls ───────────────────────────── */
.tts-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid var(--glass-border-subtle);
}

.tts-controls button {
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--green-900);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: all var(--transition-fast);
}

[data-theme="dark"] .tts-controls button {
  color: #A1D4B1;
  border-color: rgba(74, 222, 128, 0.2);
}

.tts-controls button:hover {
  background: var(--glass-bg-hover);
  border-color: var(--green-500);
  transform: translateY(-2px) translateZ(4px);
  box-shadow: 0 4px 12px rgba(22, 96, 50, 0.18);
}

.tts-controls button:active {
  transform: translateY(1px) scale(0.97);
}

/* ── 3D Voice Toast ────────────────────────────────────────── */
.voice-toast {
  position: fixed;
  bottom: 84px;
  left: 50%;
  transform: translateX(-50%) translateZ(40px);
  background: rgba(12, 51, 26, 0.92);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: #FFFFFF;
  padding: 10px 20px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 15px rgba(58, 173, 102, 0.35);
  font-size: 13.5px;
  font-weight: 600;
  z-index: 100;
  animation: toast-slide-up 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes toast-slide-up {
  from { transform: translate(-50%, 20px) scale(0.9); opacity: 0; }
  to   { transform: translate(-50%, 0) scale(1); opacity: 1; }
}

/* ============================================================
   Collaborative Multi-Agent Workflow Visual Tray
   ============================================================ */
.agent-collab-tray {
  margin: 10px 14px 14px;
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(29, 122, 65, 0.22);
  box-shadow: 0 8px 24px rgba(12, 51, 26, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: none;
}

.agent-collab-tray.active {
  display: block;
  animation: tray-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes tray-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

[data-theme="dark"] .agent-collab-tray {
  background: rgba(12, 51, 26, 0.65);
  border-color: rgba(74, 222, 128, 0.25);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.agent-tray-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--green-800);
}

[data-theme="dark"] .agent-tray-header {
  color: #A1D4B1;
}

.agent-tray-title {
  display: flex;
  align-items: center;
  gap: 6px;
}

.agent-tray-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 8px #22C55E;
  animation: dot-pulse 1.4s infinite ease-in-out;
}

@keyframes dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

.agent-steps-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.agent-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: rgba(243, 238, 221, 0.5);
  border: 1px solid rgba(212, 201, 154, 0.35);
  transition: all 0.25s ease;
}

[data-theme="dark"] .agent-step {
  background: rgba(7, 33, 13, 0.6);
  border-color: rgba(45, 120, 70, 0.3);
}

.agent-step.step-running {
  background: rgba(228, 240, 231, 0.85);
  border-color: var(--green-500);
  box-shadow: 0 2px 8px rgba(39, 150, 82, 0.18);
}

[data-theme="dark"] .agent-step.step-running {
  background: rgba(22, 96, 50, 0.4);
  border-color: #4ADE80;
}

.agent-step.step-done {
  opacity: 0.85;
}

.agent-step-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .agent-step-icon {
  background: var(--green-900);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.step-running .agent-step-icon {
  animation: agent-rotate 2s infinite linear;
}

@keyframes agent-rotate {
  0% { transform: scale(1.05); }
  50% { transform: scale(1.18); }
  100% { transform: scale(1.05); }
}

.agent-step-info {
  flex: 1;
  min-width: 0;
}

.agent-step-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-900);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

[data-theme="dark"] .agent-step-name {
  color: #FFFFFF;
}

.agent-step-status {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.06);
  color: var(--ink-600);
}

[data-theme="dark"] .agent-step-status {
  background: rgba(255, 255, 255, 0.1);
  color: #D4C99A;
}

.step-running .agent-step-status {
  background: rgba(39, 150, 82, 0.18);
  color: var(--green-700);
}

[data-theme="dark"] .step-running .agent-step-status {
  background: rgba(74, 222, 128, 0.2);
  color: #4ADE80;
}

.step-done .agent-step-status {
  background: rgba(34, 197, 94, 0.15);
  color: #15803D;
}

[data-theme="dark"] .step-done .agent-step-status {
  background: rgba(34, 197, 94, 0.25);
  color: #86EFAC;
}

.agent-step-summary {
  font-size: 11px;
  color: var(--ink-600);
  margin-top: 2px;
  line-height: 1.35;
}

[data-theme="dark"] .agent-step-summary {
  color: #C2D5C8;
}

.agent-doc-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.agent-doc-pill {
  font-size: 9.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(18, 74, 38, 0.1);
  color: var(--green-800);
  border: 1px solid rgba(29, 122, 65, 0.2);
}

[data-theme="dark"] .agent-doc-pill {
  background: rgba(74, 222, 128, 0.12);
  color: #A1D4B1;
  border-color: rgba(74, 222, 128, 0.2);
}

/* ============================================================
   PAGE-SPECIFIC: settings.html — Accessible classes (CSP-safe,
   replaces all inline style= attributes; WCAG 2.1 AA contrast)
   ============================================================ */
.settings-back-btn{
  font-size:18px;
  text-decoration:none;
  /* High-contrast on light header gradient AND dark theme via token flip */
  color:var(--ink-900);
  background:rgba(255,255,255,0.75);
  border-radius:var(--radius-full);
  min-width:38px; min-height:38px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--gold-200);
}
[data-theme="dark"] .settings-back-btn{
  background:rgba(23,35,27,0.85);
  color:var(--ink-900);
  border-color:#2E4536;
}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .settings-back-btn{
    background:rgba(23,35,27,0.85);
    color:var(--ink-900);
    border-color:#2E4536;
  }
}
.settings-lang-label{
  font-size:14px;
  font-weight:500;
  color:var(--ink-900);
}
.settings-lang-select{
  width:auto; min-width:120px; font-size:13px; padding:6px 10px;
}
.btn-sm-settings{
  font-size:12px; padding:6px 12px;
}
.btn-danger-settings{
  border-color:var(--red-700);
  color:var(--red-700);
}
.btn-danger-settings:hover{
  background:var(--red-100);
}
.settings-save-msg{
  text-align:center; padding:12px; font-size:13px;
  /* WCAG AA: #166032 on #FBF9F1 ≈ 7.4:1 — replaces var(--green-700) */
  color:var(--green-700-real);
  background:var(--green-100);
  border-radius:var(--radius-sm);
  font-weight:600;
}
[data-theme="dark"] .settings-save-msg{
  color:#A1D4B1;
  background:rgba(22,96,50,0.25);
}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .settings-save-msg{
    color:#A1D4B1;
    background:rgba(22,96,50,0.25);
  }
}


/* ════════════════════════════════════════════════════════════════════
   HAMBURGER MENU — COMPREHENSIVE FIXES (v2)
   1. Header right-alignment (burger always on right)
   2. Dark-mode drawer contrast (WCAG 2.1 AA ≥ 4.5:1, actual ≥ 10:1)
   3. Dual Light/Dark theme selector styles
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. Header layout — burger always on the right ─────────────── */
.app-header {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}
.app-header > .crest {
  order: 1;
  flex-shrink: 0;
}
.app-header > .titles {
  order: 2;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden;
}
/* The hidden lang-wrap in header stays invisible */
.app-header > .header-menu-lang-wrap {
  order: 3;
  display: none !important;
}
.header-menu-btn {
  order: 10 !important;
  margin-left: auto !important;
  margin-inline-start: auto !important;
  flex-shrink: 0 !important;
}

/* ── 2. Light-mode drawer — high-contrast overrides ──────────────*/
.header-menu-section-label {
  color: #4A5240;
}
.header-menu-item {
  color: #1A1A14;
}
.header-menu-item:hover,
.header-menu-item:focus-visible {
  background: #E4F0E7;
  color: #124A26;
  outline: none;
}
.header-menu-item--active {
  background: #D1E8D6;
  color: #0C331A;
  font-weight: 700;
  border-left: 4px solid #166032;
}
.header-menu-ext {
  color: #4A5240;
}

/* ── 3. Dark-mode drawer panel ─────────────────────────────────── */
[data-theme="dark"] .header-menu-panel {
  background: #0B1E12 !important;
  border-left: 1.5px solid rgba(74,222,128,0.25) !important;
  color: #F8FAFC !important;
}
[data-theme="dark"] .header-menu-header {
  border-bottom-color: rgba(74,222,128,0.15) !important;
}
[data-theme="dark"] .header-menu-section-label {
  color: #86EFAC !important;
}
[data-theme="dark"] .header-menu-item {
  color: #F8FAFC !important;
}
[data-theme="dark"] .header-menu-item:hover,
[data-theme="dark"] .header-menu-item:focus-visible {
  background: rgba(74,222,128,0.12) !important;
  color: #4ADE80 !important;
  outline: none;
}
[data-theme="dark"] .header-menu-item--active {
  background: rgba(34,197,94,0.18) !important;
  color: #4ADE80 !important;
  border-left: 4px solid #4ADE80 !important;
  font-weight: 700;
}
[data-theme="dark"] .header-menu-ext {
  color: #86EFAC !important;
}

/* ── 4. Dual Light/Dark theme selector — base ──────────────────── */
.header-menu-theme-dual {
  display: flex;
  gap: 8px;
  padding: 8px 16px 12px;
  flex-shrink: 0;
}
.header-menu-theme-btn-opt {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 8px;
  border: 2px solid rgba(22,96,50,0.30);
  border-radius: 10px;
  background: rgba(22,96,50,0.06);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: #1A1A14;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.12s ease;
  position: relative;
}
.header-menu-theme-btn-opt:hover {
  background: rgba(22,96,50,0.12);
  border-color: rgba(22,96,50,0.50);
  transform: translateY(-1px);
}
.header-menu-theme-btn-opt:focus-visible {
  outline: 2px solid #166032;
  outline-offset: 2px;
}
.header-menu-theme-opt-icon {
  font-size: 22px;
  line-height: 1;
  display: block;
}
.header-menu-theme-opt-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  display: block;
}
.header-menu-theme-check {
  position: absolute;
  top: 5px;
  right: 7px;
  font-size: 11px;
  font-weight: 800;
  color: #166032;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
/* Active light-mode state */
.header-menu-theme-btn-opt--active {
  background: #166032 !important;
  border-color: #166032 !important;
  color: #FFFFFF !important;
}
.header-menu-theme-btn-opt--active .header-menu-theme-check {
  color: #A1D4B1;
  opacity: 1;
}

/* ── 5. Dark-mode overrides for theme selector ─────────────────── */
[data-theme="dark"] .header-menu-theme-btn-opt {
  border-color: rgba(74,222,128,0.30);
  background: rgba(74,222,128,0.06);
  color: #F8FAFC;
}
[data-theme="dark"] .header-menu-theme-btn-opt:hover {
  background: rgba(74,222,128,0.14);
  border-color: rgba(74,222,128,0.55);
}
[data-theme="dark"] .header-menu-theme-btn-opt--active {
  background: #22c55e !important;
  border-color: #22c55e !important;
  color: #052C0E !important;
}
[data-theme="dark"] .header-menu-theme-btn-opt--active .header-menu-theme-check {
  color: #052C0E;
  opacity: 1;
}
[data-theme="dark"] .header-menu-theme-check {
  color: #4ADE80;
}

/* ── 6. prefers-color-scheme fallback when no explicit data-theme ─*/
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .header-menu-panel {
    background: #0B1E12 !important;
    border-left: 1.5px solid rgba(74,222,128,0.25) !important;
    color: #F8FAFC !important;
  }
  html:not([data-theme="light"]) .header-menu-section-label {
    color: #86EFAC !important;
  }
  html:not([data-theme="light"]) .header-menu-item {
    color: #F8FAFC !important;
  }
  html:not([data-theme="light"]) .header-menu-item:hover,
  html:not([data-theme="light"]) .header-menu-item:focus-visible {
    background: rgba(74,222,128,0.12) !important;
    color: #4ADE80 !important;
  }
  html:not([data-theme="light"]) .header-menu-item--active {
    background: rgba(34,197,94,0.18) !important;
    color: #4ADE80 !important;
    border-left: 4px solid #4ADE80 !important;
  }
  html:not([data-theme="light"]) .header-menu-ext {
    color: #86EFAC !important;
  }
  html:not([data-theme="light"]) .header-menu-theme-btn-opt {
    border-color: rgba(74,222,128,0.30);
    background: rgba(74,222,128,0.06);
    color: #F8FAFC;
  }
  html:not([data-theme="light"]) .header-menu-theme-btn-opt--active {
    background: #22c55e !important;
    border-color: #22c55e !important;
    color: #052C0E !important;
  }
}

/* ── Streaming assistant bubble (live token rendering) ── */
.bubble.streaming{
  color: var(--ink-600, #4D4B43);
  font-size: 14.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  animation: bubble-in 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes bubble-in{
  from{ opacity: 0; transform: translateY(4px); }
  to{ opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .bubble.streaming{ animation: none; }
}

/* ── Header live-presence dot ── */
.header-presence{
  order: 9;
  margin-left: auto;
  margin-right: 2px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--sans);
  color: rgba(243, 238, 221, 0.75);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.header-presence::before{
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7AA882;
  margin-right: 4px;
  opacity: 0.55;
}
.header-presence.has-online{
  color: #FEF08A;
  background: rgba(39, 150, 82, 0.25);
  border-color: rgba(74, 222, 128, 0.45);
}
.header-presence.has-online::before{
  background: #4ADE80;
  opacity: 1;
  box-shadow: 0 0 6px rgba(74, 222, 128, 0.8);
  animation: presence-blink 2.4s ease-in-out infinite;
}
@keyframes presence-blink{
  0%, 100%{ opacity: 1; }
  50%{ opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce){
  .header-presence.has-online::before{ animation: none; }
}

/* ── Scroll reveal states (js/lib/reveal.js) ──────────────── */
.reveal-armed{
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--motion-slow) var(--ease-luxury),
    transform var(--motion-slow) var(--ease-luxury);
  will-change: opacity, transform;
}
.reveal-armed.reveal-in{
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal-armed{ opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============================================================
   MOBILE PASS — touch targets, iOS zoom, phone layout fixes
   Touch-device-only where sensible so desktop stays untouched.
   ============================================================ */

/* iOS focus-zoom: entry fields must be ≥16px on touch devices */
@media (pointer: coarse){
  input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="range"]),
  select, textarea, [contenteditable="true"],
  .composer input, .search-box input, .academy-search-bar input, .form-input,
  .transcript-card, .settings-lang-select, .academy-select, .page-size-select{
    font-size: 16px !important;
  }

  /* 44×44 minimum tap targets for link-buttons that escape the button floor */
  .icon-btn, .settings-back-btn{
    min-width: 44px;
    min-height: 44px;
  }
  .dept-link{
    display: inline-block;
    min-height: 44px;
    padding: 12px 8px 0;
  }
  .pdf-modal__toolbar-btn{
    min-width: 44px;
    min-height: 44px;
  }
  .bottom-nav a{
    min-height: 44px;
  }
}

/* Profile forms: single column on phones (was hard-coded 1fr 1fr everywhere) */
@media (max-width: 520px){
  .profile-form-grid{ grid-template-columns: 1fr; }
  .trivia-summary-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* Settings toggle: 44×44 hit area; the 44×26 track is drawn by ::before so
   the global 44px min-height rule no longer stretches the old design */
.toggle{
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  background: transparent;
  border: none;
  box-shadow: none;
  position: relative;
  padding: 0;
}
.toggle::before{
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 44px;
  height: 26px;
  transform: translateY(-50%);
  border-radius: 20px;
  background: var(--surface-3);
  transition: background var(--transition-smooth);
}
.toggle.on::before{
  background: linear-gradient(135deg, var(--green-600), var(--green-500));
  box-shadow: 0 2px 6px var(--green-glow);
}
.toggle .knob{
  top: 12px;
  left: 2px;
  z-index: 1;
}
.toggle.on .knob{ left: 22px; }

/* Voice actions wrap on narrow screens */
.voice-actions{
  flex-wrap: wrap;
  gap: var(--space-2);
}
.voice-actions .btn{ flex: 1 1 140px; }

/* PDF viewer: bottom-sheet on phones, centered dialog preserved ≥768px */
@media (max-width: 767px){
  .pdf-modal{
    align-items: flex-end;
    padding: 0;
  }
  .pdf-modal-container{
    width: 100%;
    max-width: none;
    height: 92vh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: var(--space-3) var(--space-3) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  }
}

/* Chat composer: keep visible above the keyboard (visualViewport handler
   sets --naqs-keyboard-inset; fallback is the safe-area-aware default) */
.composer{
  padding-bottom: max(env(safe-area-inset-bottom, 0px), var(--naqs-keyboard-inset, 0px));
  transition: padding-bottom 120ms var(--ease-luxury);
}

/* ── Hero 3D canvas (home) ────────────────────────────────── */
.hero{
  position: relative;
  overflow: hidden;
}
.hero-canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 900ms var(--ease-luxury);
  pointer-events: none;
}
.hero-canvas.hero-canvas-live{ opacity: 0.5; }
.hero > *:not(.hero-canvas){ position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce){
  .hero-canvas{ display: none; }
}

/* ============================================================
   DESIGN SYSTEM v4 — PRIMITIVES & COMPOSITE PATTERNS
   Typography · glass · buttons · chips · forms · states
   Loaded last so it composes over (and retunes) every page.
   ============================================================ */

/* ── Fluid heading typography: Crimson Pro display face ───── */
h1, h2, h3, .hero h1{
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.015em;
}
h1, .hero h1{ font-size: var(--text-3xl); line-height: 1.12; }
h2{ font-size: var(--text-2xl); line-height: 1.16; }
h3{ font-size: var(--text-xl); line-height: 1.22; }
.section-label{
  font-family: var(--font-ui);
  letter-spacing: 0.14em;
}
.org-name{
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* ── Glass depth system ───────────────────────────────────── */
.glass-l1{
  background: var(--glass-bg-l1);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border-l1);
  box-shadow: var(--shadow-card), inset 0 1px 0 var(--glass-highlight);
}
.glass-l2{
  background: var(--glass-bg-l2);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border-l2);
  box-shadow: var(--shadow-elevated), inset 0 1px 0 var(--glass-highlight);
}
.glass-l3{
  background: var(--glass-bg-l3);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border-l3);
}

/* Retune the shared surfaces onto the depth system */
.card{
  transition: transform var(--motion-fast) var(--ease-luxury),
              box-shadow var(--motion-fast) var(--ease-luxury);
}
.card:hover{ box-shadow: var(--shadow-elevated); }
.card.card-elevated{ box-shadow: var(--shadow-modal); }
.bottom-nav{
  background: var(--glass-bg-l1);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--glass-border-l1);
}
.app-header::after{
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--green-600), var(--green-400) 50%, var(--gold-300));
  opacity: 0.85;
  pointer-events: none;
}

/* ── Button recipes: press · hover · focus ────────────────── */
.btn{
  border-radius: var(--radius-sm);
  transition:
    transform var(--motion-fast) var(--ease-luxury),
    box-shadow var(--motion-fast) var(--ease-luxury),
    background-color var(--motion-fast) var(--ease-luxury),
    border-color var(--motion-fast) var(--ease-luxury),
    color var(--motion-fast) var(--ease-luxury);
}
.btn:active{ transform: scale(0.97); }
.btn-primary{
  background: linear-gradient(135deg, var(--green-600) 0%, var(--green-700) 100%);
  box-shadow: var(--shadow-xs);
}
.btn-primary:hover{
  background: linear-gradient(135deg, var(--green-600-hover) 0%, var(--green-700-real) 100%);
  box-shadow: var(--shadow-glow-strong);
  transform: translateY(-1px);
}
.btn-primary:active{
  transform: translateY(0) scale(0.97);
  box-shadow: var(--shadow-glow);
}
.btn-outline:hover{
  border-color: var(--green-600);
  color: var(--green-700);
  background: var(--green-050);
}
[data-theme="dark"] .btn-outline:hover{
  color: var(--gold-100);
  background: rgba(74, 222, 128, 0.08);
}
.btn-trivia{
  background: linear-gradient(135deg, #B45309 0%, #92400E 100%);
  transition: inherit;
}
.btn-trivia:hover{ box-shadow: 0 4px 20px rgba(180, 83, 9, 0.35); transform: translateY(-1px); }
.btn-trivia:active{ transform: scale(0.97); }

/* ── Button icon alignment (inline SVGs inside .btn) ──────── */
.btn .btn-ic{
  vertical-align: -3px;
  margin-right: 7px;
}

/* ── Drawer language dropdown (grouped picker inside hamburger) ── */
.header-menu-lang-wrap{
  position: relative;
  padding: 0 4px;
}
.lang-dd-trigger{
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-900);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease-luxury),
              box-shadow var(--motion-fast) var(--ease-luxury);
}
.lang-dd-trigger:hover,
.lang-dd-trigger[aria-expanded="true"]{
  border-color: var(--green-500);
  box-shadow: var(--shadow-glow);
}
.lang-dd-flag{ font-size: 17px; line-height: 1; }
.lang-dd-label{
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lang-dd-chevron{
  color: var(--ink-300);
  font-size: 13px;
  transition: transform var(--motion-fast) var(--ease-luxury);
}
.lang-dd-trigger[aria-expanded="true"] .lang-dd-chevron{ transform: rotate(180deg); }
.lang-dd-panel{
  position: absolute;
  top: calc(100% + 6px);
  left: 4px;
  right: 4px;
  z-index: 50;
  max-height: 264px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px;
  border-radius: var(--radius-md);
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-elevated);
  animation: lang-pop 200ms var(--ease-luxury);
}
.lang-dd-panel .lang-inline-option{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  font-family: var(--font-ui);
  font-size: 14.5px;
  color: var(--ink-900);
  cursor: pointer;
  text-align: left;
  transition: background var(--motion-fast) var(--ease-luxury);
}
.lang-dd-panel .lang-inline-option:hover{ background: var(--surface-2); }
.lang-dd-panel .lang-inline-option.active{
  background: var(--green-050);
}
.lang-dd-panel .lang-inline-option .lang-check{
  margin-left: auto;
  color: var(--green-600);
  visibility: hidden;
}
.lang-dd-panel .lang-inline-option.active .lang-check{ visibility: visible; }
.lang-dd-panel .lang-english{
  font-size: 12px;
  color: var(--ink-300);
}

/* Focus visibility — WCAG AA, consistent everywhere */
:is(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline: 2px solid var(--green-500);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ── Chips: single family ─────────────────────────────────── */
.chip{
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  min-height: 44px;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-600);
  background: var(--glass-bg-l2);
  border: 1px solid var(--glass-border-l2);
  transition: all var(--motion-fast) var(--ease-luxury);
}
.chip:hover{ border-color: var(--green-500); color: var(--green-700); }
.chip.active{
  background: var(--green-600);
  border-color: var(--green-600);
  color: #fff;
  box-shadow: var(--shadow-glow);
}

/* ── Inputs: focus ring + border morph ────────────────────── */
.form-input, input[type="text"], input[type="search"], input[type="tel"],
input[type="email"], input[type="password"], select, textarea{
  transition:
    border-color var(--motion-fast) var(--ease-luxury),
    box-shadow var(--motion-fast) var(--ease-luxury),
    background-color var(--motion-fast) var(--ease-luxury);
}
.form-input:focus, input[type="text"]:focus, input[type="search"]:focus,
select:focus, textarea:focus{
  border-color: var(--green-500);
  box-shadow: var(--shadow-glow);
  outline: none;
}

/* ── Badges: refined semantic surfaces ────────────────────── */
.badge{
  border-radius: var(--radius-full);
  letter-spacing: 0.02em;
}

/* ── Loading primitives (did not exist before v4) ─────────── */
.skeleton{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--ink-100);
}
.skeleton::after{
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.45),
    transparent
  );
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer{
  100%{ transform: translateX(100%); }
}
.skeleton-text{ height: 12px; margin: var(--space-2) 0; }
.skeleton-text:last-child{ width: 60%; }

.spinner{
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2.5px solid var(--green-200);
  border-top-color: var(--green-600);
  animation: spinner-rotate 0.8s linear infinite;
}
.spinner-lg{ width: 34px; height: 34px; border-width: 3.5px; }
@keyframes spinner-rotate{
  to{ transform: rotate(360deg); }
}

/* ── Empty states ─────────────────────────────────────────── */
.empty-state{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-10) var(--space-6);
  text-align: center;
  color: var(--ink-300);
}
.empty-state .empty-ic{
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-lg);
  background: var(--green-050);
  color: var(--green-600);
}
[data-theme="dark"] .empty-state .empty-ic{
  background: rgba(74, 222, 128, 0.10);
  color: var(--green-400);
}
.empty-state .empty-title{
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--ink-600);
}
.empty-state .empty-desc{
  font-size: var(--text-sm);
  max-width: 34ch;
  line-height: 1.55;
}

/* ── Toast ────────────────────────────────────────────────── */
.toast{
  position: fixed;
  left: 50%;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-600);
  background: var(--glass-bg-l1);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border-l1);
  box-shadow: var(--shadow-elevated);
  animation: toast-slide-up var(--motion-slow) var(--ease-luxury);
}

/* ── Nav link underline slide-in ──────────────────────────── */
.bottom-nav a .nav-label{
  position: relative;
}
.bottom-nav a.active{
  color: var(--green-600);
}
[data-theme="dark"] .bottom-nav a.active{ color: var(--green-400); }
.bottom-nav a::after{
  content: '';
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--green-500);
  transform: translateX(-50%);
  transition: width var(--motion-fast) var(--ease-luxury);
}
.bottom-nav a:hover::after,
.bottom-nav a.active::after{ width: 18px; }

/* ── Scrollbars (webkit) ──────────────────────────────────── */
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{
  background: var(--green-200);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover{ background-color: var(--green-300); }

::selection{
  background: var(--green-glow-strong);
  color: var(--green-950);
}
[data-theme="dark"] ::selection{
  background: rgba(74, 222, 128, 0.35);
  color: var(--gold-050);
}

/* ── Reduced motion: global kill switch for v4 recipes ────── */
@media (prefers-reduced-motion: reduce){
  .btn, .btn-primary:hover, .card, .card:hover, .toast, .chip{
    transition: none !important;
    transform: none !important;
  }
  .skeleton::after{ animation: none !important; }
  .bottom-nav a::after{ transition: none !important; }
}