/* ════════════════════════════════════════════════════════════════════
   JLEARN ONLINE 2.0 — TAILARK DUSK UNIVERSAL GLOBAL DESIGN SYSTEM
   Inspired by & faithful to: tailark.com/pages/dusk
   Obsidian dark canvas (#030712), frosted glassmorphic cards,
   monumental dual-tone display typography, solid white pill actions,
   and floating frosted capsule navbar across every single page.
   ════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,700;12..96,800&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* Tailark Dusk Core Tokens */
  --dusk-bg: #030712;
  --dusk-bg-subtle: #080a12;
  --dusk-surface: rgba(14, 17, 26, 0.75);
  --dusk-surface-hover: rgba(22, 27, 42, 0.88);
  --dusk-surface-solid: #0d111c;
  --dusk-border: rgba(255, 255, 255, 0.08);
  --dusk-border-strong: rgba(255, 255, 255, 0.16);
  --dusk-border-glow: rgba(99, 102, 241, 0.45);
  --dusk-text-primary: #ffffff;
  --dusk-text-secondary: #9ca3af;
  --dusk-text-muted: #6b7280;
  --dusk-indigo: #6366f1;
  --dusk-indigo-glow: rgba(99, 102, 241, 0.22);
  --dusk-purple: #a855f7;
  --dusk-cyan: #06b6d4;
  --dusk-green: #10b981;
  --dusk-gold: #f59e0b;
  --dusk-red: #ef4444;
  --dusk-font-display: "Bricolage Grotesque", "Inter", -apple-system, system-ui, sans-serif;
  --dusk-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --dusk-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dusk-r-pill: 9999px;
  --dusk-r-card: 22px;
  --dusk-r-window: 24px;

  /* Global Overrides mapping legacy system variables to Tailark Dusk */
  --bg-color: #030712;
  --bg: #030712;
  --bg-secondary: #080a12;
  --jl-bg: #030712;
  --jl-bg-subtle: #080a12;
  
  --surface-color: rgba(14, 17, 26, 0.78);
  --surface: rgba(14, 17, 26, 0.78);
  --surface-soft: rgba(255, 255, 255, 0.04);
  --surface-elevated: #0d111c;
  --jl-surface: rgba(14, 17, 26, 0.78);
  --jl-surface-raised: #0d111c;
  --jl-surface-glass: rgba(14, 17, 26, 0.85);

  --border-color: rgba(255, 255, 255, 0.08);
  --border: rgba(255, 255, 255, 0.08);
  --border-light: rgba(255, 255, 255, 0.04);
  --jl-border: rgba(255, 255, 255, 0.08);
  --jl-border-subtle: rgba(255, 255, 255, 0.04);
  --jl-border-strong: rgba(255, 255, 255, 0.16);
  --jl-border-highlight: rgba(99, 102, 241, 0.45);

  --text-color: #ffffff;
  --text: #ffffff;
  --text-main: #ffffff;
  --jl-text-primary: #ffffff;
  --text-secondary: #9ca3af;
  --text-muted: #9ca3af;
  --muted: #9ca3af;
  --jl-text-secondary: #9ca3af;
  --jl-text-muted: #9ca3af;

  --primary-color: #6366f1;
  --primary: #6366f1;
  --jl-primary: #6366f1;
  --primary-dark: #4f46e5;
  --primary-light: rgba(99, 102, 241, 0.15);
  --secondary: #06b6d4;
  --accent: #a855f7;

  --lp-bg: #030712;
  --lp-bg-2: #080a12;
  --lp-card: rgba(14, 17, 26, 0.75);
  --lp-card-2: rgba(20, 24, 38, 0.85);
  --lp-ink: #ffffff;
  --lp-ink-2: #9ca3af;
  --lp-muted: #6b7280;
  --lp-line: rgba(255, 255, 255, 0.08);
  --lp-line-2: rgba(255, 255, 255, 0.14);
  --lp-blue: #6366f1;
  --lp-blue-2: #818cf8;
  --lp-gold: #f59e0b;
  --lp-green: #10b981;
  --lp-display: var(--dusk-font-display);
  --lp-sans: var(--dusk-font-sans);
  --lp-ease: var(--dusk-ease);
}

/* ──────────────────────────────────────────────────────────────────────────
   1. UNIVERSAL CANVAS & TYPOGRAPHY
   ────────────────────────────────────────────────────────────────────────── */
html {
  background-color: var(--dusk-bg) !important;
  color-scheme: dark;
}

body {
  background-color: var(--dusk-bg) !important;
  color: var(--dusk-text-primary) !important;
  font-family: var(--dusk-font-sans) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

/* Headings in Dusk Monumental Display */
h1, h2, h3, h4, .font-display, .dusk-title,
.login-header h2, .modal-title, .section-title h2 {
  font-family: var(--dusk-font-display) !important;
  letter-spacing: -0.035em !important;
  color: #ffffff !important;
}

/* Global Loader in Dusk Theme */
#global-loader, .global-loader {
  background: #030712 !important;
  color: #ffffff !important;
}
.loader-spinner::before {
  border-top-color: #6366f1 !important;
  border-right-color: #6366f1 !important;
}
.loader-spinner::after {
  border-bottom-color: #a855f7 !important;
  border-left-color: #a855f7 !important;
}
.loader-text {
  color: #cbd5e1 !important;
  font-family: var(--dusk-font-sans) !important;
}

/* Sleek Dusk Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #030712;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.5);
}

/* ──────────────────────────────────────────────────────────────────────────
   2. TAILARK DUSK BACKGROUND AMBIENCE & MESH GRID
   ────────────────────────────────────────────────────────────────────────── */
.lp-dusk-ambience, .dusk-ambience {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 900px;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.lp-dusk-glow-top, .dusk-glow-top {
  position: absolute;
  top: -160px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 600px;
  background: radial-gradient(ellipse at 50% 30%, rgba(99, 102, 241, 0.22) 0%, rgba(168, 85, 247, 0.14) 35%, rgba(6, 182, 212, 0.05) 55%, transparent 72%);
  filter: blur(80px);
  border-radius: 50%;
  opacity: 0.9;
}

.lp-dusk-grid, .dusk-grid {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 15%, #000 20%, transparent 80%);
  mask-image: radial-gradient(ellipse 70% 55% at 50% 15%, #000 20%, transparent 80%);
  pointer-events: none;
}

/* ──────────────────────────────────────────────────────────────────────────
   3. TAILARK DUSK FLOATING CAPSULE NAVBAR (Universal)
   ────────────────────────────────────────────────────────────────────────── */
.lp-dusk-header,
.dusk-header,
.qg-header-nav,
.gg-header-nav,
.ct-header-nav {
  position: sticky;
  top: 14px;
  z-index: 1000;
  /* iOS notch / Dynamic Island / Android cutout: keep the capsule below the
     status bar while still letting the page paint edge-to-edge underneath it. */
  padding-top: env(safe-area-inset-top, 0px);
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-bottom: 0;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  margin-bottom: 24px;
}

/* Edge-to-edge PWA: keep the footer clear of the iPhone home indicator and
   landscape notch insets (inline padding in the HTML is overridden here). */
#site-footer {
  padding-left: max(15px, env(safe-area-inset-left, 0px)) !important;
  padding-right: max(15px, env(safe-area-inset-right, 0px)) !important;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Docs (privacy/terms) + admin top bars use their own sticky elements with
   inline padding — keep their content below the iOS status bar too. */
.doc-topbar {
  top: 0 !important;
  padding-top: calc(0.75rem + env(safe-area-inset-top, 0px)) !important;
  padding-left: max(1.5rem, env(safe-area-inset-left, 0px)) !important;
  padding-right: max(1.5rem, env(safe-area-inset-right, 0px)) !important;
}

.appbar {
  top: 0 !important;
  padding-top: calc(0.85rem + env(safe-area-inset-top, 0px)) !important;
}

.lp-dusk-nav,
.dusk-nav,
.lp-top-bar,
.ppt-page-header,
.top-nav {
  max-width: 1140px;
  margin: 14px auto 24px !important;
  height: 60px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 14px 0 18px !important;
  border-radius: var(--dusk-r-pill) !important;
  background: rgba(8, 10, 18, 0.82) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.6), 0 0 1px 1px rgba(255, 255, 255, 0.05) !important;
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  z-index: 100;
}

.lp-dusk-nav:hover,
.dusk-nav:hover,
.lp-top-bar:hover,
.ppt-page-header:hover,
.top-nav:hover {
  border-color: rgba(255, 255, 255, 0.16) !important;
}

/* Brand */
.lp-dusk-brand,
.dusk-brand,
.lp-top-brand,
.nav-logo,
.ppt-page-header-left {
  display: inline-flex !important;
  align-items: center !important;
  gap: clamp(6px, 1.8vw, 10px) !important;
  font: 700 clamp(0.82rem, 1.2vw + 0.6rem, 1.05rem)/1 var(--dusk-font-sans) !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
  text-decoration: none !important;
  cursor: pointer;
  user-select: none;
  min-width: 0 !important;
}

/* Wordmark + status badge must never break mid-word ("Stude / nt") */
.lp-dusk-brand > span,
.dusk-brand > span {
  white-space: nowrap;
  font-size: clamp(0.82rem, 1.2vw + 0.6rem, 1.05rem) !important;
}

.lp-dusk-logo-mark,
.dusk-logo-mark,
.lp-brand-mark,
.nav-logo-icon,
.ppt-page-header-logo {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  background: #ffffff !important;
  color: #6366f1 !important;
  font-size: 0.9rem !important;
  line-height: 1 !important;
  box-shadow: 0 0 16px rgba(99, 102, 241, 0.28) !important;
  flex-shrink: 0;
}

/* The exact brand mark used in the teacher-dashboard navbar: a white
   circular chip with the indigo graduation cap. Inner glyphs inherit it. */
.lp-dusk-logo-mark > i,
.dusk-logo-mark > i,
.lp-brand-mark > i,
.nav-logo-icon > i,
.ppt-page-header-logo > i {
  color: #6366f1 !important;
  -webkit-text-fill-color: #6366f1 !important;
  font-size: 0.9rem !important;
  line-height: 1 !important;
}

/* Bare graduation-cap brand icons (SPA navbars, doc topbars) get the SAME
   canonical logo treatment so the mark is consistent on every page. */
.nav-brand > i.fa-graduation-cap,
.nav-brand > i.fas.fa-graduation-cap,
.doc-topbar a > i.fa-graduation-cap {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: #ffffff;
  color: #6366f1 !important;
  -webkit-text-fill-color: #6366f1 !important;
  font-size: 0.9rem !important;
  line-height: 1 !important;
  padding: 0.42rem;
  box-sizing: border-box;
  box-shadow: 0 0 16px rgba(99, 102, 241, 0.28);
  flex-shrink: 0;
}

.appbar h1 i.fa-graduation-cap {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff !important;
  color: #6366f1 !important;
  -webkit-text-fill-color: #6366f1 !important;
  font-size: 0.9rem !important;
  margin-right: 8px;
  vertical-align: -6px;
  box-shadow: 0 0 16px rgba(99, 102, 241, 0.28);
}

/* Reusable chip for tool-page headers and login cards. Same white circle +
   indigo cap as the teacher-dashboard navbar mark, at 32px / 64px. */
.brand-logo-chip {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: inline-grid !important;
  place-items: center !important;
  background: #ffffff !important;
  color: #6366f1 !important;
  font-size: 0.9rem !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  box-shadow: 0 0 16px rgba(99, 102, 241, 0.28) !important;
  flex-shrink: 0 !important;
}

.brand-logo-chip > i {
  color: #6366f1 !important;
  -webkit-text-fill-color: #6366f1 !important;
  font-size: inherit !important;
  line-height: 1 !important;
}

.brand-logo-chip--lg {
  width: 64px !important;
  height: 64px !important;
  font-size: 1.8rem !important;
}

.brand-logo-chip--md {
  width: 40px !important;
  height: 40px !important;
  font-size: 1.125rem !important;
}

.lp-dusk-badge,
.dusk-badge {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: var(--dusk-r-pill) !important;
  background: rgba(99, 102, 241, 0.15) !important;
  border: 1px solid rgba(99, 102, 241, 0.3) !important;
  color: #a5b4fc !important;
  letter-spacing: 0.04em !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* Actions in navbar */
.lp-dusk-actions,
.lp-top-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

/* ── Phones: keep the capsule on one line ─────────────────────────────
   The portal top bar (Student/Teacher badge + theme + Home) is too wide for
   narrow iPhones at 100% zoom and with Display Zoom enabled. Drop the
   wordmark first (logo + role badge still identify the page), then tighten
   spacing so nothing wraps or spills past the screen edge. */
@media (max-width: 480px) {
  .portal-page .lp-dusk-nav {
    gap: clamp(6px, 1.8vw, 8px) !important;
    padding: 0 10px 0 12px !important;
  }
  .portal-page .lp-dusk-brand {
    gap: 7px !important;
  }
  .portal-page .lp-dusk-brand > span {
    display: inline-block !important;
    font-size: clamp(0.82rem, 3.2vw, 0.96rem) !important;
  }
  .portal-page .lp-dusk-actions {
    gap: 6px !important;
  }
  .portal-page .lp-dusk-icon-btn,
  .portal-page .theme-toggle,
  .portal-page .lp-dusk-home-btn {
    width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    font-size: 0.88rem !important;
  }
}
@media (max-width: 360px) {
  .portal-page .lp-dusk-brand > span {
    display: inline-block !important;
    font-size: 0.8rem !important;
  }
  .portal-page .lp-dusk-icon-btn,
  .portal-page .theme-toggle,
  .portal-page .lp-dusk-home-btn {
    width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    font-size: 0.82rem !important;
  }
}

.lp-dusk-icon-btn,
.lp-icon-btn,
.theme-toggle {
  width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  border-radius: var(--dusk-r-pill) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #ffffff !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  font-size: 0.95rem !important;
  transition: transform 0.2s, background 0.2s, border-color 0.2s !important;
}

.lp-dusk-icon-btn:hover,
.lp-icon-btn:hover,
.theme-toggle:hover {
  transform: translateY(-1px) !important;
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.lp-dusk-home-btn {
  text-decoration: none !important;
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

.lp-dusk-home-btn:hover {
  background: rgba(99, 102, 241, 0.2) !important;
  border-color: rgba(99, 102, 241, 0.5) !important;
  color: #ffffff !important;
  box-shadow: 0 0 16px rgba(99, 102, 241, 0.35), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  transform: translateY(-1px) scale(1.04) !important;
}

.lp-dusk-home-btn:active {
  transform: translateY(0) scale(0.96) !important;
}

.lp-dusk-home-btn > i {
  font-size: 0.95rem !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.lp-dusk-home-btn:hover > i {
  transform: scale(1.1) !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   4. TAILARK DUSK SOLID WHITE PILL BUTTONS (The Iconic Dusk Signature)
   ────────────────────────────────────────────────────────────────────────── */
.lp-btn-dusk-white,
.btn-dusk-white,
.btn-primary,
.lp-btn-primary,
.qg-btn-primary,
.gg-btn-primary,
.ct-btn.primary,
.ppt-page-back-btn,
.pack-select-btn,
button.btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 42px !important;
  padding: 0 22px !important;
  border-radius: var(--dusk-r-pill) !important;
  background: #ffffff !important;
  color: #09090b !important;
  font-family: var(--dusk-font-sans) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  letter-spacing: -0.01em !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 4px 18px rgba(255, 255, 255, 0.18) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: transform 0.25s var(--dusk-ease), box-shadow 0.25s var(--dusk-ease), opacity 0.2s !important;
}

.lp-btn-dusk-white:hover,
.btn-dusk-white:hover,
.btn-primary:hover,
.lp-btn-primary:hover,
.qg-btn-primary:hover,
.gg-btn-primary:hover,
.ct-btn.primary:hover,
.ppt-page-back-btn:hover,
.pack-select-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.35) !important;
  color: #09090b !important;
  background: #ffffff !important;
}

.lp-btn-dusk-white:active,
.btn-dusk-white:active,
.btn-primary:active,
.lp-btn-primary:active {
  transform: translateY(0) scale(0.98) !important;
}

/* Secondary Frosted Pill Button */
.lp-btn-ghost,
.btn-secondary,
.btn-ghost,
.qg-btn-secondary,
.gg-btn-secondary,
.qg-back,
.gg-back,
.ct-back,
.nav-back {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 40px !important;
  padding: 0 18px !important;
  border-radius: var(--dusk-r-pill) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
  font-family: var(--dusk-font-sans) !important;
  font-weight: 500 !important;
  font-size: 0.88rem !important;
  letter-spacing: -0.01em !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: transform 0.25s var(--dusk-ease), background 0.2s, border-color 0.2s !important;
}

.lp-btn-ghost:hover,
.btn-secondary:hover,
.btn-ghost:hover,
.qg-btn-secondary:hover,
.gg-btn-secondary:hover,
.qg-back:hover,
.gg-back:hover,
.ct-back:hover,
.nav-back:hover {
  transform: translateY(-1px) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   5. TAILARK DUSK GLASSMORPHIC CARDS
   ────────────────────────────────────────────────────────────────────────── */
.dusk-card,
.card,
.login-card,
.qg-card,
.gg-card,
.ct-display-card,
.portal-notice-card,
.doc-section,
.terms-section,
.privacy-card,
.admin-card,
.balance-card,
.pack-card,
.purchase-form-wrap,
.rate-banner,
.lesson-card,
.assessment-section {
  background: rgba(14, 17, 26, 0.75) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: var(--dusk-r-card) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5) !important;
  transition: transform 0.3s var(--dusk-ease), border-color 0.3s, box-shadow 0.3s var(--dusk-ease) !important;
}

/* ── Student portal notice card (redesigned, was a flat glass card) ── */
.portal-notice-card.notice-warning {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.16) 0%, rgba(14, 17, 26, 0.78) 55%) !important;
  border: 1px solid rgba(245, 158, 11, 0.38) !important;
  box-shadow: 0 10px 30px -12px rgba(245, 158, 11, 0.45), inset 3px 0 0 0 #f59e0b !important;
  overflow: hidden !important;
}

.portal-notice-card.notice-warning .portal-notice-icon {
  flex-shrink: 0 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #ffffff !important;
  font-size: 1rem !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.5) !important;
}

.portal-notice-card.notice-warning .portal-notice-body {
  color: #fde68a !important;
  font-size: 0.92rem !important;
  line-height: 1.55 !important;
}

.portal-notice-card.notice-warning .portal-notice-body strong {
  color: #fbbf24 !important;
  font-weight: 700 !important;
}

.dusk-card:hover,
.card:hover,
.qg-card:hover,
.gg-card:hover,
.pack-card:hover {
  border-color: rgba(99, 102, 241, 0.35) !important;
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.7), 0 0 25px rgba(99, 102, 241, 0.12) !important;
}

/* Segmented tabs */
.portal-segmented-tabs, .ct-modes, .tab-group {
  display: flex !important;
  width: fit-content;
  margin: 0 auto !important;
  padding: 4px !important;
  border-radius: var(--dusk-r-pill) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  gap: 4px !important;
}

.portal-tab-btn, .ct-mode {
  padding: 8px 18px !important;
  border-radius: var(--dusk-r-pill) !important;
  border: none !important;
  background: transparent !important;
  color: var(--dusk-text-secondary) !important;
  font: 600 0.85rem/1 var(--dusk-font-sans) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.portal-tab-btn.active, .ct-mode.active {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   6. OVERRIDE OLD GARISH TOOL HEADERS WITH TAILARK DUSK
   ────────────────────────────────────────────────────────────────────────── */
.qg-header,
.gg-header,
.ct-header,
header.page-header,
header.bg-gradient {
  background: radial-gradient(ellipse at 50% -20%, rgba(99, 102, 241, 0.25) 0%, rgba(14, 17, 26, 0.92) 75%) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--dusk-r-window) !important;
  padding: 2.25rem 2rem !important;
  color: #ffffff !important;
  margin-bottom: 2rem !important;
  box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.8), 0 0 30px rgba(99, 102, 241, 0.1) !important;
  position: relative !important;
}

.qg-header h1,
.gg-header h1,
.ct-header h1 {
  font: 800 clamp(1.6rem, 3.5vw, 2.4rem)/1.15 var(--dusk-font-display) !important;
  color: #ffffff !important;
  letter-spacing: -0.035em !important;
  margin-bottom: 6px !important;
}

.qg-header p,
.gg-header p,
.ct-header p {
  color: var(--dusk-text-secondary) !important;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
}

/* Tool-page header marks use the shared .brand-logo-chip--lg geometry.
   No per-tool sizes: one logo design and one size scale site-wide. */

/* ──────────────────────────────────────────────────────────────────────────
   7. TAILARK DUSK FORM INPUTS & DROPDOWNS
   ────────────────────────────────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea,
.form-control {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  padding: 0.75rem 1rem !important;
  font-family: var(--dusk-font-sans) !important;
  font-size: 0.92rem !important;
  outline: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
}

select option {
  background: #0d111c !important;
  color: #ffffff !important;
}

/* Question blocks inside quiz generator */
.qg-question {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  border-left: 4px solid #6366f1 !important;
  color: #ffffff !important;
}

.qg-options li {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #e2e8f0 !important;
  border-radius: 10px !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   8. TAILARK DUSK MODALS & OVERLAYS
   ────────────────────────────────────────────────────────────────────────── */
.modal,
.modal-content,
.modal-dialog,
.swal2-popup {
  background: rgba(13, 17, 28, 0.95) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 24px !important;
  color: #ffffff !important;
  box-shadow: 0 30px 80px -15px rgba(0, 0, 0, 0.9), 0 0 40px rgba(99, 102, 241, 0.18) !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   9. CLEANUP: SUPPRESS OBSOLETE AURORA & RAINBOW EFFECTS
   ────────────────────────────────────────────────────────────────────────── */
.lp-aurora,
.lp-sun,
.lp-particles {
  display: none !important;
}

/* ─── ENHANCED LOGIN ERROR ALERT (dark-first + light override) ───────────── */
.login-alert {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(248, 113, 113, 0.32);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.16), rgba(127, 29, 29, 0.12));
  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.14);
  text-align: left;
  animation: loginAlertIn 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes loginAlertIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.login-alert__icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(239, 68, 68, 0.22);
  color: #fca5a5;
  font-size: 0.95rem;
}

.login-alert__body { min-width: 0; flex: 1; }

.login-alert__title {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fecaca;
  margin-bottom: 4px;
  line-height: 1.35;
}

.login-alert__text {
  display: block;
  font-size: 0.85rem;
  line-height: 1.55;
  color: #e2e8f0;
  opacity: 0.92;
}

.login-alert__actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(248, 113, 113, 0.35);
}

.login-alert__actions a {
  color: #93c5fd;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px dotted rgba(147, 197, 253, 0.7);
  padding-bottom: 1px;
}

.login-alert__actions a:hover { color: #bfdbfe; border-bottom-color: #bfdbfe; }

.login-alert__actions span {
  font-size: 0.84rem;
  color: #cbd5e1;
  line-height: 1.5;
}

.login-alert__actions i { width: 16px; text-align: center; margin-right: 4px; color: #93c5fd; }

/* Light theme */
html[data-theme="light"] .login-alert {
  background: linear-gradient(135deg, #fef2f2, #fff1f2);
  border-color: rgba(239, 68, 68, 0.35);
  box-shadow: 0 6px 18px rgba(220, 38, 38, 0.1);
}
html[data-theme="light"] .login-alert__icon { background: rgba(239, 68, 68, 0.14); color: #dc2626; }
html[data-theme="light"] .login-alert__title { color: #991b1b; }
html[data-theme="light"] .login-alert__text { color: #475569; opacity: 1; }
html[data-theme="light"] .login-alert__actions { border-top-color: rgba(239, 68, 68, 0.3); }
html[data-theme="light"] .login-alert__actions a { color: #4f46e5; border-bottom-color: rgba(79, 70, 229, 0.55); }
html[data-theme="light"] .login-alert__actions span { color: #334155; }
html[data-theme="light"] .login-alert__actions i { color: #4f46e5; }

/* Mobile */
@media (max-width: 768px) {
  .login-alert { padding: 12px 13px; border-radius: 12px; }
  .login-alert__title { font-size: 0.9rem; }
  .login-alert__text { font-size: 0.83rem; }
  .login-alert__actions span { font-size: 0.82rem; }
}

/* ══════════════════════════════════════════════════════════════════
   8. ITEM ANALYSIS (#ia-content) — DARK THEME
   The table is generated by js/item-analysis.js with hardcoded
   LIGHT inline colors (h3 #1f2937, thead #f9fafb, th #374151,
   row borders #e5e7eb, remedial tint #fffbeb, action cells
   #fef2f2/#f0fdf4). These !important rules (author !important
   beats inline non-important) repaint every surface for dark.
   Light-mode values are already correct inline, so the light
   layer only needs the container fix (see light-theme.css).
   Covers #ia-content on index.html, teacher-dashboard.html
   and student-portal.html (all three hardcode a container bg).
   ══════════════════════════════════════════════════════════════════ */
[data-theme="dark"] #ia-content {
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
[data-theme="dark"] #ia-content h3 {
    color: #f1f5f9 !important;
}
[data-theme="dark"] #ia-content thead {
    background: rgba(255, 255, 255, 0.05) !important;
    border-bottom-color: rgba(255, 255, 255, 0.15) !important;
}
[data-theme="dark"] #ia-content th {
    color: #cbd5e1 !important;
}
[data-theme="dark"] #ia-content tbody tr {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
[data-theme="dark"] #ia-content tbody tr[style*="fffbeb"] {
    background: rgba(245, 158, 11, 0.09) !important;
}
[data-theme="dark"] #ia-content td[style*="fef2f2"] {
    background: rgba(239, 68, 68, 0.10) !important;
}
[data-theme="dark"] #ia-content td[style*="f0fdf4"] {
    background: rgba(16, 185, 129, 0.10) !important;
}
/* Semantic cell text stays bold; nudge greens up slightly for AA on #0d111c */
[data-theme="dark"] #ia-content td[style*="color: #059669"] {
    color: #34d399 !important;
}
[data-theme="dark"] #ia-content td[style*="#10b981"] {
    color: #34d399 !important;
}
[data-theme="dark"] #ia-content td[style*="#ef5350"] {
    color: #f87171 !important;
}

/* ══════════════════════════════════════════════════════════════════
   9. ENHANCED DASHBOARD SECTION HEADINGS — ALL themes / ALL widths
   Applies to the 7 dashboard h2s (Dashboard Overview, Student
   Management, Lesson Management, Students In Progress, Student
   Results, Not Yet Taken Assessment, Diagnostic Item Analysis)
   on index.html + teacher-dashboard.html:
     • gradient indigo→violet accent bar (rounded, soft glow)
     • heavier 800 weight, tighter tracking, responsive size
     • explicit dark/light text colors
   ══════════════════════════════════════════════════════════════════ */
#overview-section > h2,
.dashboard-section .section-header h2 {
    position: relative;
    padding-left: 17px !important;
    font-size: clamp(1.25rem, 4.8vw, 1.55rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.3 !important;
    color: #f1f5f9 !important;
}
#overview-section > h2::before,
.dashboard-section .section-header h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 1.05em;
    min-height: 20px;
    border-radius: 99px;
    background: linear-gradient(180deg, #6366f1 0%, #a855f7 100%);
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.55);
}
html[data-theme="light"] #overview-section > h2,
html[data-theme="light"] .dashboard-section .section-header h2 {
    color: #0f172a !important;
}
html[data-theme="light"] #overview-section > h2::before,
html[data-theme="light"] .dashboard-section .section-header h2::before {
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.30);
}

/* ══════════════════════════════════════════════════════════════════
   10. ITEM ANALYSIS — REMEDIAL ALERT (#ia-remedial) DARK THEME
   Generated by js/item-analysis.js displayRemedialRecommendations()
   with hardcoded LIGHT inline styles (amber box #fffbeb / green box
   #f0fdf4, brown h4 #92400e, thead #fef3c7, borders #fde68a, white
   recommendations card). These !important rules repaint both box
   variants for dark; the light layer only restores AA text accents
   flattened by the global light `td` rule (see light-theme.css).
   ══════════════════════════════════════════════════════════════════ */
/* Remedial (amber) outer box */
[data-theme="dark"] #ia-remedial > div[style*="#fffbeb"] {
    background: rgba(245, 158, 11, 0.08) !important;
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.18);
}
[data-theme="dark"] #ia-remedial h4[style*="#92400e"] {
    color: #fbbf24 !important;
}
[data-theme="dark"] #ia-remedial > div > p[style*="#78350f"] {
    color: #fcd34d !important;
}
[data-theme="dark"] #ia-remedial thead tr[style*="#fef3c7"] {
    background: rgba(245, 158, 11, 0.13) !important;
}
[data-theme="dark"] #ia-remedial th[style*="#92400e"] {
    color: #fcd34d !important;
}
[data-theme="dark"] #ia-remedial tbody tr[style*="#fde68a"] {
    border-bottom-color: rgba(245, 158, 11, 0.20) !important;
}
[data-theme="dark"] #ia-remedial td[style*="#92400e"] {
    color: #fde68a !important;
}
[data-theme="dark"] #ia-remedial td[style*="#78350f"] {
    color: #e3d7bd !important;
}
[data-theme="dark"] #ia-remedial td[style*="#059669"] {
    color: #34d399 !important;
}
[data-theme="dark"] #ia-remedial td[style*="#ef5350"] {
    color: #f87171 !important;
}
[data-theme="dark"] #ia-remedial td[style*="#b45309"] {
    color: #fbbf24 !important;
}
/* Inner "Remedial Teaching Recommendations" card (inline background: white) */
[data-theme="dark"] #ia-remedial div[style*="background: white"] {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(245, 158, 11, 0.28) !important;
}
[data-theme="dark"] #ia-remedial div[style*="background: white"] > strong {
    color: #fde68a !important;
}
[data-theme="dark"] #ia-remedial div[style*="background: white"] ul {
    color: #e2e8f0 !important;
}
/* Empty state ("No Remedial Teaching Needed" — green box #f0fdf4) */
[data-theme="dark"] #ia-remedial > div[style*="#f0fdf4"] {
    background: rgba(16, 185, 129, 0.08) !important;
    box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.20);
}
[data-theme="dark"] #ia-remedial h4[style*="#065f46"] {
    color: #6ee7b7 !important;
}
[data-theme="dark"] #ia-remedial p[style*="#047857"] {
    color: #a7f3d0 !important;
}

/* ══════════════════════════════════════════════════════════════════
   11. DASHBOARD SEARCH BARS — DARK THEME (all views)
   Covers every dashboard filter input incl. #not-taken-search-input
   (which the older flawless block missed → it stayed a white UA
   input in dark). Explicit bg/border/text/placeholder for dark.
   ══════════════════════════════════════════════════════════════════ */
[data-theme="dark"] #student-search-input,
[data-theme="dark"] #lesson-search-input,
[data-theme="dark"] #progress-search-input,
[data-theme="dark"] #results-search-input,
[data-theme="dark"] #not-taken-search-input {
    background: #0d111c !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: #e2e8f0 !important;
    -webkit-text-fill-color: #e2e8f0;
    caret-color: #e2e8f0;
}
[data-theme="dark"] #student-search-input::placeholder,
[data-theme="dark"] #lesson-search-input::placeholder,
[data-theme="dark"] #progress-search-input::placeholder,
[data-theme="dark"] #results-search-input::placeholder,
[data-theme="dark"] #not-taken-search-input::placeholder {
    color: #64748b !important;
    -webkit-text-fill-color: #64748b;
    opacity: 1;
}

/* ══════════════════════════════════════════════════════════════════
   Graduation cap (nav brand): blue cap on a white circle, both themes.
   Same/higher specificity than the canonical gradient-mark rule so this
   wins in dark (default), [data-theme="dark"], and light.
   ══════════════════════════════════════════════════════════════════ */
.nav-brand > i.fa-graduation-cap,
.nav-brand > i.fas.fa-graduation-cap {
    color: #6366f1 !important;
    -webkit-text-fill-color: #6366f1 !important;
    background: #ffffff !important;
    border-radius: 50% !important;
    padding: 0.42rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
[data-theme="dark"] .nav-brand > i.fa-graduation-cap,
[data-theme="dark"] .nav-brand > i.fas.fa-graduation-cap {
    color: #6366f1 !important;
    -webkit-text-fill-color: #6366f1 !important;
    background: #ffffff !important;
    border-radius: 50% !important;
    padding: 0.42rem !important;
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE PROFILE BUTTON (nav) — opens the account modal.
   Hidden on desktop; shown ≤768px from mobile-responsive.css.
   ══════════════════════════════════════════════════════════════════ */
.nav-profile-btn {
    display: none;
    align-items: center;
    justify-content: center;
    /* Perfect circle: square dims + hard clamp (mobile `button{min-height:44px}`
       used to stretch it into a 34×44 oval) */
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    flex: 0 0 38px;
    aspect-ratio: 1 / 1;
    padding: 0 !important;
    border: 2px solid rgba(129, 140, 248, 0.5);
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #ffffff;
    font-weight: 800;
    font-size: 0.92rem;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}
.nav-profile-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(99, 102, 241, 0.45); }
.nav-profile-btn:active { transform: translateY(0); }

/* ══════════════════════════════════════════════════════════════════
   ACCOUNT MODAL — AI credits card + logout (dark default)
   ══════════════════════════════════════════════════════════════════ */
.acct-credits-card {
    background: #161b2a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    margin-bottom: 1.25rem;
}
.acct-credits-title {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    color: #f1f5f9;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid rgba(255, 255, 255, 0.08);
}
.acct-credits-title i { color: #f59e0b; font-size: 0.95rem; }
.acct-credits-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.acct-credits-amount { display: flex; flex-direction: column; }
.acct-credits-amount span { font-size: 2rem; font-weight: 800; color: #a5b4fc; line-height: 1.15; letter-spacing: -0.02em; }
.acct-credits-amount small { color: #94a3b8; font-size: 0.78rem; font-weight: 500; }
.acct-credits-buy { padding: 0.65rem 1.1rem !important; font-size: 0.85rem !important; font-weight: 700 !important; border-radius: 10px !important; }
.acct-logout-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.8rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.acct-logout-btn:hover { background: rgba(239, 68, 68, 0.2); border-color: rgba(239, 68, 68, 0.55); color: #fca5a5; transform: translateY(-1px); }

/* ══════════════════════════════════════════════════════════════════
   DASHBOARD SIDEBAR MENU — enhanced: icon tiles, gradient active
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
    .dashboard-sidebar {
        padding: 1.1rem 1rem !important;
        border-radius: 18px !important;
    }
    .sidebar-menu::before {
        content: "MENU";
        display: block;
        font-size: 0.66rem;
        font-weight: 800;
        letter-spacing: 0.16em;
        color: #6b7280;
        padding: 0.15rem 0.4rem 0.35rem;
    }
}
.sidebar-menu .menu-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.7rem !important;
    padding: 0.55rem 0.7rem !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    color: #94a3b8 !important;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease !important;
}
.sidebar-menu .menu-item i {
    width: 32px;
    height: 32px;
    min-width: 32px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: rgba(129, 140, 248, 0.14);
    color: #a5b4fc;
    font-size: 0.85rem;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.sidebar-menu .menu-item:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #e2e8f0 !important;
    transform: translateX(2px);
}
.sidebar-menu .menu-item:hover i {
    background: rgba(129, 140, 248, 0.24);
    color: #c7d2fe;
    transform: scale(1.06);
}
.sidebar-menu .menu-item.active {
    background: linear-gradient(135deg, #6366f1, #7c3aed) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(99, 102, 241, 0.35) !important;
}
.sidebar-menu .menu-item.active i {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff !important;
}
[data-theme="dark"] .sidebar-menu .menu-item { color: #94a3b8 !important; }
[data-theme="dark"] .sidebar-menu .menu-item:hover { color: #e2e8f0 !important; }
[data-theme="dark"] .sidebar-menu .menu-item.active {
    background: linear-gradient(135deg, #6366f1, #7c3aed) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(99, 102, 241, 0.35) !important;
}
[data-theme="dark"] .sidebar-menu .menu-item.active i {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff !important;
}

/* ══════════════════════════════════════════════════════════════════
   FOOTER LAYOUT — always at the bottom of the viewport on short pages,
   normal document flow (never fixed/sticky) on tall pages.
   ══════════════════════════════════════════════════════════════════ */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh !important;
    min-height: 100dvh !important;
}
.page {
    flex: 1 0 auto;
    min-height: 0;
}
#site-footer {
    margin-top: auto;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE DRAWER — VIEWPORT ANCHORING, OVERLAY & HEADER FIXES (≤768px)
   Entry animations (fadeInUp / lp-page-enter / modern-enh .page) leave
   identity transforms on the page shell → those elements become containing
   blocks for position:fixed, so the drawer started 61px down and the
   overlay was offset/broken. Neutralize (same trick as landing-v3.css).
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Chromium keeps an ancestor as containing block for position:fixed while
       a transform animation is IN EFFECT (fill:both) — even when the computed
       transform is overridden to none. Kill the animation itself, then the
       transform, along the whole page-shell chain. */
    .container:not(.navbar .container):not(.jl-navbar-inner),
    .dashboard-container,
    .dashboard-container .container,
    .page.active > * {
        animation: none !important;
    }
    .page,
    .page.active,
    .dashboard-container,
    .dashboard-container .container {
        transform: none !important;
    }

    /* Inner stacking contexts (position:relative + z-index:1 on both wrappers)
       trapped the fixed drawer below the overlay — flatten them on mobile */
    .dashboard-container,
    .dashboard-container .container {
        z-index: auto !important;
    }

    /* Lift the page above body-level chrome while the drawer is open: the
       footer (z1 + later DOM order) and the AI FAB (z 100020) would otherwise
       paint over / block the drawer's bottom */
    body.mobile-drawer-open .page.active {
        z-index: 100100 !important;
    }

    /* Desktop-only `display:none !important` rules (styles.css) also hid the
       overlay + drawer header on mobile — re-enable them while open */
    #mobile-menu-overlay.active {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 10001 !important;
    }
    .dashboard-sidebar.active #sidebar-drawer-header {
        display: flex !important;
        visibility: visible !important;
        height: auto !important;
        width: auto !important;
        overflow: visible !important;
    }
    /* keep the drawer ✕ a tidy 32px target (global `button{min-height:44px}`) */
    .dashboard-sidebar.active .sidebar-drawer-close {
        min-height: 32px !important;
        max-height: 32px !important;
    }
}

/* Short viewports (e.g. 505×655 phones / landscape): compact drawer items so
   all 10 fit without scrolling and clear of the footer band + AI FAB */
@media (max-width: 768px) and (max-height: 700px) {
    .dashboard-sidebar.active .sidebar-menu {
        gap: 0.3rem !important;
    }
    .dashboard-sidebar.active .sidebar-menu .menu-item {
        min-height: 44px !important;
        padding-top: 0.42rem !important;
        padding-bottom: 0.42rem !important;
    }
}