/* ==========================================================
   FleetFixer Academy, Pine & Citrus app shell
   Self-contained dark pine sidebar shell + brand primitives for the
   three signed-in learn dashboards: student, teaching, achievements.

   This stylesheet is a superset transformation of the inline <style>
   blocks those three pages used to carry. Linking this file and deleting
   the inline blocks loses nothing: every class the page JS injects is
   re-skinned here, every state class is preserved, and the themable
   variable names theme.js writes at runtime keep their exact names
   (only their default values move to the brand palette).

   No JavaScript is required. The sidebar collapses to a horizontal
   scroll strip under 860px using CSS alone (no toggle hooks the pages
   would need to wire up).
   ========================================================== */

:root{
  /* Deep pine and bark neutrals (was the navy ink ramp) */
  --ink-950:#070F0C;--ink-900:#0E1714;--ink-800:#14201B;--ink-700:#26382F;--ink-600:#3A423A;--ink-500:#5A6B61;--ink-400:#7C8A80;--ink-300:#9DB0A6;--ink-200:#CDD8C6;--ink-150:#DCE6DC;--ink-100:#E1E9DD;--ink-50:#F1F5EF;
  /* Sea-green and pine accent ramp (the one vivid signal colour) */
  --accent-50:#EDF8F2;--accent-100:#D6F1E3;--accent-200:#A9E3C9;--accent-300:#6FD0A8;--accent-400:#3FB680;--accent-500:#2FA06E;--accent-600:#15614A;--accent-700:#0F4D3A;--accent-800:#0A3A2B;--accent-900:#06281D;
  /* Brass (premium / upgrade only) */
  --brass-600:#B5852F;--brass-100:#F3E7C8;--brass-50:#F9F2E0;
  /* Brand semantic aliases (legacy names kept so existing markup + theme.js keep working) */
  --accent:#15614A;--accent-strong:#0F4D3A;--accent-2:#1C7A5C;--accent-light:#3FB680;--accent-weak:#EDF8F2;
  --brand-gradient:linear-gradient(135deg,#0F4D3A 0%,#1C7A5C 55%,#3FB680 100%);
  --brand-gradient-soft:linear-gradient(135deg,#1C7A5C 0%,#6FD0A8 110%);
  --accent-glow:#6FD0A8;--hero-dark:#0A1410;
  /* Surfaces + neutrals */
  --bg:#F1F5EF;--panel:#FFFFFF;--surface-2:#E8F0E6;--stroke:#E1E9DD;--stroke-strong:#CDD8C6;
  --text:#14201B;--text-strong:#0A1410;--muted:#5A6B61;--muted-2:#7C8A80;--text-subtle:#9AA095;
  /* Dark chrome (Pine-native premium app shell) */
  --chrome-bg:#0E1714;--chrome-elevated:#16241C;--chrome-border:rgba(180,212,196,.14);--chrome-text:#EAF3EC;--chrome-text-muted:#9DB0A6;--chrome-active-bg:rgba(63,182,128,.16);--chrome-active-text:#6FD0A8;
  /* Radii (tight, precise) */
  --radius-sm:6px;--radius:8px;--radius-lg:12px;--radius2:12px;--radius-pill:999px;
  /* Elevation (restrained, bark-tinted) */
  --shadow-xs:0 1px 2px rgba(20,32,27,.06);--shadow-sm:0 1px 3px rgba(20,32,27,.08),0 1px 2px rgba(20,32,27,.04);--shadow:0 6px 16px rgba(20,32,27,.10);--shadow-lg:0 18px 40px rgba(20,32,27,.18);
  /* Focus ring (accent-tinted) */
  --focus-ring:0 0 0 3px rgba(46,155,121,.34);
  /* Status */
  --danger:#E5544B;--danger-50:#FBEAE9;--warning:#E8A33D;--warning-50:#FBF3E2;--success:#1FA971;--success-50:#E7F5EE;--info:#3FA6B8;--info-50:#EAF2FB;
  /* Game tokens (themable at runtime by theme.js; brand defaults here) */
  --game-gradient:linear-gradient(135deg,#0F4D3A 0%,#1C7A5C 55%,#3FB680 100%);--game-accent:#15614A;--game-accent-2:#1C7A5C;--game-bg:#F1F5EF;--game-correct:#1FA971;--game-wrong:#E5544B;
  /* Motion + spacing (4/8 rhythm) */
  --ease:cubic-bezier(.2,.6,.2,1);--dur-1:.12s;--dur-2:.18s;--dur-3:.28s;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;
}

/* ==========================================================
   BASE
   ========================================================== */
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;line-height:1.5;
}

/* ==========================================================
   APP SHELL, navy sidebar + main column
   .ff-shell wraps the whole signed-in view (the old #portal).
   The fixed sidebar sits left; .ff-main is offset by its width.
   ========================================================== */
.ff-shell{ min-height:100vh; min-height:100dvh; }

/* ── Sidebar (premium navy chrome) ── */
.ff-sidebar{
  position:fixed; left:0; top:0; bottom:0;
  width:230px;
  background:var(--chrome-bg);
  color:var(--chrome-text);
  border-right:1px solid var(--chrome-border);
  display:flex; flex-direction:column;
  z-index:60; overflow:hidden;
}

/* Brand mark: gradient tile + anchor icon + wordmark */
.ff-brand{
  display:flex; align-items:center; gap:10px;
  padding:18px 16px 14px; min-height:64px;
  text-decoration:none; color:#fff;
}
.ff-brand-mark{
  width:30px; height:30px; border-radius:7px; flex-shrink:0;
  display:grid; place-items:center; color:#fff; font-size:14px;
  background:linear-gradient(135deg,var(--accent-400),var(--accent-700));
}
.ff-brand-word{ font-size:16px; font-weight:800; letter-spacing:-.01em; color:#fff; white-space:nowrap; }

/* Vertical nav */
.ff-nav{
  display:flex; flex-direction:column; gap:2px;
  padding:8px 12px;
  flex:1; overflow-y:auto; overflow-x:hidden;
}
.ff-nav a{
  display:flex; align-items:center; gap:12px;
  padding:9px 11px; border-radius:8px;
  color:var(--chrome-text-muted);
  font-size:13.5px; font-weight:600; text-decoration:none;
  white-space:nowrap;
  transition:background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.ff-nav a i{ width:18px; text-align:center; font-size:15px; color:inherit; flex-shrink:0; }
.ff-nav a:hover{ background:rgba(255,255,255,.05); color:#fff; }
.ff-nav a.active{ background:var(--chrome-active-bg); color:#fff; }
.ff-nav a.active i{ color:var(--chrome-active-text); }
.ff-nav a:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--chrome-active-text); }

/* Flex spacer pushes the footer down */
.ff-nav-spacer{ flex:1; }

/* Profile / tier footer, hairline bordered */
.ff-side-footer{
  padding:12px; border-top:1px solid var(--chrome-border);
  display:flex; flex-direction:column; gap:8px;
}
.ff-tier{
  display:flex; align-items:center; gap:8px;
  padding:10px 11px; border:1px solid var(--chrome-border); border-radius:8px;
  font-size:12px; font-weight:600; color:var(--chrome-text-muted);
  background:rgba(255,255,255,.04);
}
.ff-tier i{ color:var(--brass-600); }
.ff-side-profile{
  display:flex; align-items:center; gap:10px;
  padding:6px 4px; min-width:0;
}
.ff-side-profile .ff-side-name{
  font-size:13px; font-weight:700; color:var(--chrome-text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}

/* ── Main column ── */
.ff-main{
  margin-left:230px;
  min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column;
}

/* Slim white topbar */
.ff-topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:16px;
  min-height:60px; padding:10px 24px;
  background:var(--panel);
  border-bottom:1px solid var(--stroke);
}
.ff-topbar-title{
  font-size:17px; font-weight:800; letter-spacing:-.01em;
  color:var(--text-strong); margin:0; white-space:nowrap;
}
.ff-topbar-right{ margin-left:auto; display:flex; align-items:center; gap:10px; }

/* Scrolling content area */
.ff-content{ flex:1; min-width:0; padding:24px; }

/* ── Responsive: collapse under 860px (CSS-only, no JS hooks) ──
   The sidebar drops to a horizontal scroll strip pinned to the top,
   the brand mark and nav sit on one scrollable row, and .ff-main
   loses its left offset. The footer is hidden on this strip. ── */
@media (max-width:860px){
  .ff-sidebar{
    position:sticky; top:0; bottom:auto;
    width:auto; height:auto;
    flex-direction:row; align-items:center; gap:6px;
    padding:8px 12px;
    border-right:none; border-bottom:1px solid var(--chrome-border);
    overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
  }
  .ff-brand{ padding:0 8px 0 4px; min-height:0; flex-shrink:0; }
  .ff-brand-word{ display:none; }
  .ff-nav{
    flex-direction:row; gap:4px; padding:0;
    flex:0 1 auto; overflow:visible;
  }
  .ff-nav a{ padding:8px 12px; flex-shrink:0; }
  .ff-nav-spacer{ display:none; }
  .ff-side-footer{ display:none; }
  .ff-main{ margin-left:0; }
  .ff-topbar{ padding:10px 16px; }
  .ff-content{ padding:16px; }
}

/* ==========================================================
   PAGE HEADER, replaces the centered .hero h1/p
   ========================================================== */
.page-header{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--space-4); flex-wrap:wrap;
  margin-bottom:var(--space-5);
}
.page-title{ font-size:20px; font-weight:800; letter-spacing:-.01em; color:var(--text-strong); margin:0; }
.page-subtitle{ font-size:13px; color:var(--muted); margin:4px 0 0; line-height:1.5; }
.page-actions{ display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; }

/* ==========================================================
   LEGACY HERO, kept working but reflowed left inside .ff-main
   (pages may still ship .hero markup; it no longer centres)
   ========================================================== */
.hero{ padding:0 0 8px; }
.hero h1{ font-size:clamp(20px,3vw,24px); font-weight:800; letter-spacing:-.01em; margin-bottom:6px; color:var(--text-strong); }
.hero p{ font-size:13px; color:var(--muted); line-height:1.5; }
.hero-inner{ max-width:100%; }
.hero-top{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:24px; flex-wrap:wrap; }
.hero-top h1{ font-size:clamp(20px,3vw,24px); font-weight:800; letter-spacing:-.01em; line-height:1.2; color:var(--text-strong); }
.hero-top p{ font-size:13px; color:var(--muted); max-width:400px; line-height:1.5; }

/* ==========================================================
   CONTAINER, neutralised (the shell handles width + padding now)
   ========================================================== */
.container{ max-width:100%; margin:0; padding:0; }

/* ==========================================================
   TOPBAR PRIMITIVES, re-skinned to live inside .ff-topbar-right
   (the pages keep the old .topbar markup ids; these styles make the
   avatar / rank pill / logout button read correctly wherever they sit)
   ========================================================== */
.topbar{ /* legacy wrapper, now inert: real chrome is .ff-topbar */ }
.topbar-inner{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.topbar-left{ display:flex; align-items:center; gap:14px; }
.topbar-logo{ height:30px; border-radius:6px; }
.topbar-divider{ width:1px; height:22px; background:var(--stroke); }
.topbar-title{ font-size:14px; font-weight:700; color:var(--text); }
.topbar-right{ display:flex; align-items:center; gap:10px; }
.topbar-user{ font-size:13px; color:var(--muted); font-weight:600; }

.topbar-rank{
  font-size:12px; font-weight:700; color:var(--accent);
  display:flex; align-items:center; gap:4px;
  padding:5px 11px; border-radius:var(--radius-pill);
  background:var(--accent-50); border:1px solid var(--accent-100);
}

.topbar-btn{
  font-size:12px; font-weight:600; color:var(--muted); text-decoration:none;
  padding:8px 14px; border-radius:var(--radius);
  border:1px solid var(--stroke); background:var(--panel);
  cursor:pointer; font-family:inherit;
  display:inline-flex; align-items:center; gap:6px;
  transition:background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.topbar-btn:hover{ border-color:var(--stroke-strong); color:var(--text); background:var(--surface-2); }
.topbar-btn.primary{ background:var(--accent); color:#fff; border-color:transparent; }
.topbar-btn.primary:hover{ background:var(--accent-strong); color:#fff; }
.topbar-btn:focus-visible{ outline:none; box-shadow:var(--focus-ring); }

/* ── Avatar ── */
.avatar{
  width:34px; height:34px; border-radius:50%;
  background:var(--brand-gradient); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; cursor:pointer;
  overflow:hidden; flex-shrink:0; position:relative;
  transition:box-shadow var(--dur-1) var(--ease);
}
.avatar:hover{ box-shadow:var(--focus-ring); }
.avatar img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }

/* ==========================================================
   CARDS, brand surface: hairline + radius-lg + soft elevation
   ========================================================== */
.card{
  background:var(--panel);
  border:1px solid var(--stroke);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  padding:24px; margin-bottom:16px;
  color:inherit; text-decoration:none;
  transition:box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
/* Interactive cards (teaching grid, badge link) lift gently */
a.card:hover, button.card:hover, .card.is-interactive:hover{
  border-color:var(--stroke-strong);
  box-shadow:var(--shadow);
  transform:translateY(-2px);
}
.card-title{ font-size:15px; font-weight:800; margin-bottom:12px; display:flex; align-items:center; gap:8px; color:var(--text-strong); }
.card-title i{ color:var(--accent); }

/* Teaching cards (flex column, head + body + foot) */
.card-head{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.ci{ width:38px; height:38px; border-radius:var(--radius); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.ci-blue{ background:var(--accent-50); color:var(--accent); }
.ci-green{ background:var(--success-50); color:var(--success); }
.ci-amber{ background:var(--warning-50); color:var(--warning); }
.ci-purple{ background:#F1ECF9; color:#5b3aa0; }
.ci-red{ background:var(--danger-50); color:var(--danger); }
.ci-cyan{ background:var(--accent-50); color:var(--accent-500); }
.card h3{ font-size:14px; font-weight:700; line-height:1.3; color:var(--text-strong); }
.card p{ font-size:13px; color:var(--muted); line-height:1.55; flex:1; margin-bottom:10px; }
.card-foot{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--muted); }
.card-foot i{ font-size:10px; color:var(--accent); }

/* ==========================================================
   KPI / STAT TILES, lead with the number
   (.stat-card from gamification, .summary-card from achievements)
   ========================================================== */
.stats-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px; }
.stat-card{
  background:var(--panel);
  border:1px solid var(--stroke);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  padding:16px 14px; text-align:left;
}
.stat-card .sc-val{ font-size:24px; font-weight:800; letter-spacing:-.02em; color:var(--text-strong); line-height:1; }
.stat-card .sc-label{ font-size:11px; font-weight:600; color:var(--muted); margin-top:6px; text-transform:uppercase; letter-spacing:.5px; }

.summary-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; margin-bottom:32px; }
.summary-card{
  background:var(--panel);
  border:1px solid var(--stroke);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  padding:18px 16px; text-align:left;
}
.summary-val{ font-size:28px; font-weight:800; letter-spacing:-.02em; color:var(--text-strong); line-height:1; }
.summary-label{ font-size:11px; font-weight:600; color:var(--muted); margin-top:6px; text-transform:uppercase; letter-spacing:.5px; }

/* ==========================================================
   JOIN GAME WIDGET (student)
   ========================================================== */
.join-widget{ display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
.join-widget .field{ flex:1; min-width:140px; }
.join-widget .field label{ display:block; font-size:12px; font-weight:600; margin-bottom:5px; color:var(--muted); }
.join-widget .field input{
  width:100%; padding:12px 14px; border-radius:var(--radius); border:1px solid var(--stroke-strong);
  font-family:inherit; font-size:16px; font-weight:700; color:var(--text);
  text-transform:uppercase; letter-spacing:2px; text-align:center; background:var(--panel);
  transition:border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.join-widget .field input:focus{ outline:none; border-color:var(--accent); box-shadow:var(--focus-ring); }
.join-btn{
  padding:12px 24px; border:none; border-radius:var(--radius);
  background:var(--accent); color:#fff;
  font-weight:700; font-size:14px; cursor:pointer; font-family:inherit;
  display:flex; align-items:center; gap:6px; white-space:nowrap;
  transition:background-color var(--dur-2) var(--ease);
}
.join-btn:hover{ background:var(--accent-strong); }
.join-btn:focus-visible{ outline:none; box-shadow:var(--focus-ring); }

/* ==========================================================
   PRACTICE GRID (student)
   ========================================================== */
.practice-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.practice-card{
  background:var(--panel); border:1px solid var(--stroke); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  padding:18px; cursor:pointer; text-decoration:none; color:inherit;
  transition:box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.practice-card:hover{ border-color:var(--stroke-strong); transform:translateY(-2px); box-shadow:var(--shadow); }
.practice-card .pc-icon{ width:40px; height:40px; border-radius:var(--radius); display:flex; align-items:center; justify-content:center; font-size:18px; margin-bottom:10px; }
.pc-icon.blue{ background:var(--accent-50); color:var(--accent); }
.pc-icon.green{ background:var(--success-50); color:var(--success); }
.pc-icon.amber{ background:var(--warning-50); color:var(--warning); }
.pc-icon.red{ background:var(--danger-50); color:var(--danger); }
.pc-icon.purple{ background:#F1ECF9; color:#5b3aa0; }
.pc-icon.cyan{ background:var(--accent-50); color:var(--accent-500); }
.practice-card h3{ font-size:14px; font-weight:800; margin-bottom:4px; color:var(--text-strong); }
.practice-card p{ font-size:12px; color:var(--muted); line-height:1.5; }
.practice-card .pc-tag{ font-size:11px; font-weight:700; color:var(--accent); margin-top:8px; display:flex; align-items:center; gap:4px; }

/* ==========================================================
   LEADERBOARD (student) + empty state
   ========================================================== */
.lb-empty{ text-align:center; padding:24px; color:var(--muted); font-size:13px; font-weight:600; }

/* ==========================================================
   TEACHING, tabs, search, content sections, quick links
   ========================================================== */
.tabs{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-bottom:1px solid var(--stroke); }
.tab{
  padding:18px 24px; text-align:center; cursor:pointer; position:relative;
  font-size:14px; font-weight:600; color:var(--muted);
  border:none; border-bottom:2px solid transparent; margin-bottom:-1px; background:transparent;
  border-radius:var(--radius) var(--radius) 0 0; font-family:inherit;
  transition:color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.tab:hover{ color:var(--text); background:var(--surface-2); }
.tab.active{ color:var(--accent); border-bottom-color:var(--accent); background:var(--surface-2); }
.tab i{ display:block; font-size:20px; margin-bottom:6px; }
.tab span{ display:block; font-size:11px; font-weight:500; color:var(--muted); margin-top:2px; }
.tab.active span{ color:var(--accent); }

.search-bar{ padding:20px 0 0; }
.search-wrap{ position:relative; max-width:400px; }
.search-wrap i{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:14px; pointer-events:none; }
.search-input{
  width:100%; padding:12px 16px 12px 42px; border:1px solid var(--stroke-strong); border-radius:var(--radius);
  font-family:inherit; font-size:14px; color:var(--text); background:var(--panel);
  transition:border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.search-input:focus{ outline:none; border-color:var(--accent); box-shadow:var(--focus-ring); }
.search-no-results{ text-align:center; padding:40px 20px; color:var(--muted); font-size:14px; font-weight:600; display:none; }

.tab-content{ display:none; padding:32px 0 48px; }
.tab-content.active{ display:block; }
.tc-inner{ max-width:100%; margin:0 auto; }
.tc-label{
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1px;
  color:var(--accent); margin:28px 0 14px; display:flex; align-items:center; gap:8px;
}
.tc-label:first-child{ margin-top:0; }
.tc-label i{ font-size:10px; }
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }

/* Supporting sections + quick links */
.support{ background:var(--surface-2); border-top:1px solid var(--stroke); border-radius:var(--radius-lg); padding:32px 24px; margin-top:24px; }
.support-inner{ max-width:100%; margin:0 auto; }
.support-head{ font-size:20px; font-weight:800; letter-spacing:-.01em; margin-bottom:6px; color:var(--text-strong); }
.support-sub{ font-size:14px; color:var(--muted); margin-bottom:24px; }
.qbar{ background:var(--panel); border:1px solid var(--stroke); border-radius:var(--radius-lg); padding:12px 16px; margin-top:24px; }
.qbar-inner{ max-width:100%; margin:0 auto; display:flex; gap:8px; flex-wrap:wrap; }
.qlink{
  display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:var(--radius);
  text-decoration:none; font-size:13px; font-weight:600; color:var(--text);
  border:1px solid var(--stroke); background:var(--panel);
  transition:border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.qlink:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-50); }
.qlink i{ font-size:12px; color:var(--accent); }

/* Gamification panel (teaching) */
.gam-panel{ max-width:100%; margin:0; padding:0 0 24px; }
.gam-card{ background:var(--panel); border:1px solid var(--stroke); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:24px; margin-bottom:16px; }
.gam-header{ display:flex; align-items:center; gap:16px; margin-bottom:16px; flex-wrap:wrap; }
.gam-header h2{ font-size:18px; font-weight:800; flex:1; color:var(--text-strong); }
.gam-toggle{ font-size:12px; font-weight:700; color:var(--accent); cursor:pointer; background:none; border:none; font-family:inherit; display:flex; align-items:center; gap:4px; text-decoration:none; }
.gam-toggle:hover{ text-decoration:underline; }
.gam-section{ margin-bottom:20px; }
.gam-section:last-child{ margin-bottom:0; }
.gam-section-title{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); margin-bottom:10px; }

/* ==========================================================
   ACHIEVEMENTS, sections, rank ladder, badge categories
   ========================================================== */
.section{ margin-bottom:32px; }
.section-title{ font-size:16px; font-weight:800; margin-bottom:16px; display:flex; align-items:center; gap:10px; color:var(--text-strong); }
.section-title i{ color:var(--accent); font-size:18px; }

.rank-ladder{ display:flex; flex-direction:column; gap:0; }
.rank-row{
  display:flex; align-items:center; gap:16px; padding:14px 18px;
  background:var(--panel); border:1px solid var(--stroke); position:relative;
  transition:background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.rank-row:first-child{ border-radius:var(--radius-lg) var(--radius-lg) 0 0; }
.rank-row:last-child{ border-radius:0 0 var(--radius-lg) var(--radius-lg); }
.rank-row:not(:first-child){ border-top:none; }
.rank-row.current{ background:var(--accent-50); border-color:var(--accent); z-index:1; box-shadow:0 0 0 1px var(--accent); }
.rank-row.current + .rank-row{ border-top:1px solid var(--stroke); }
.rank-row.locked{ opacity:.5; }
.rank-emoji{ font-size:28px; width:40px; text-align:center; flex-shrink:0; }
.rank-info{ flex:1; min-width:0; }
.rank-name{ font-size:14px; font-weight:800; color:var(--text-strong); }
.rank-level{ font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
.rank-xp{ font-size:13px; font-weight:700; color:var(--accent); text-align:right; min-width:80px; }
.rank-check{ color:var(--success); font-size:16px; min-width:20px; text-align:center; }
.rank-current-tag{ font-size:10px; font-weight:800; color:#fff; background:var(--accent); padding:3px 8px; border-radius:var(--radius-sm); text-transform:uppercase; letter-spacing:.5px; }

.badge-category{ margin-bottom:24px; }
.badge-cat-title{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--accent); margin-bottom:10px; display:flex; align-items:center; gap:6px; }

/* ==========================================================
   GAMIFICATION COMPONENTS, formerly in gamification.css,
   restyled here as a superset so the dashboards read on-brand.
   ========================================================== */
/* Rank badge */
.rank-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 12px; border-radius:var(--radius-pill);
  background:var(--accent-50); border:1px solid var(--accent-100);
  font-size:13px; font-weight:700; color:var(--text);
}

/* XP bar */
.xp-bar-wrap{ width:100%; }
.xp-bar-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.xp-bar-rank{ font-size:14px; font-weight:800; display:flex; align-items:center; gap:6px; color:var(--text-strong); }
.xp-bar-xp{ font-size:13px; font-weight:700; color:var(--accent); }
.xp-bar-track{ height:10px; border-radius:var(--radius-pill); background:var(--stroke); overflow:hidden; }
.xp-bar-fill{
  height:100%; border-radius:var(--radius-pill);
  background:var(--game-gradient);
  transition:width .8s var(--ease); min-width:2px;
}
.xp-bar-footer{ margin-top:4px; font-size:11px; color:var(--muted); font-weight:600; }

/* Badge cards */
.badges-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; }
.badge-card{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:16px 10px; border-radius:var(--radius-lg);
  border:1px solid var(--stroke); background:var(--panel);
  box-shadow:var(--shadow-sm);
  transition:border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.badge-card.earned{ border-color:var(--accent); box-shadow:0 2px 8px rgba(21,97,74,.10); }
.badge-card.locked{ opacity:.5; filter:grayscale(.6); box-shadow:none; }
.badge-emoji{ font-size:28px; margin-bottom:6px; display:block; }
.badge-name{ font-size:12px; font-weight:800; margin-bottom:2px; color:var(--text-strong); }
.badge-desc{ font-size:11px; color:var(--muted); line-height:1.4; }

/* Leaderboard table, hairline rows + muted uppercase headers */
.lb-table{ width:100%; border-collapse:collapse; }
.lb-table th{
  text-align:left; padding:10px; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.5px; color:var(--muted);
  border-bottom:1px solid var(--stroke-strong);
}
.lb-table td{ padding:11px 10px; font-size:14px; font-weight:600; border-bottom:1px solid var(--stroke); }
.lb-table tr:last-child td{ border-bottom:none; }
.lb-table .lb-pos{ width:36px; text-align:center; font-weight:800; color:var(--muted); }
.lb-table .lb-pos.gold{ color:var(--brass-600); }
.lb-table .lb-pos.silver{ color:var(--ink-400); }
.lb-table .lb-pos.bronze{ color:#ea580c; }
.lb-table .lb-xp{ text-align:right; font-weight:800; color:var(--accent); }
.lb-table .lb-rank-cell{ font-size:12px; color:var(--muted); }

/* Badge toast (notification) */
.badge-toast{
  position:fixed; bottom:24px; right:24px; z-index:9999;
  background:var(--panel); border:1px solid var(--stroke);
  border-left:4px solid var(--accent); border-radius:var(--radius-lg);
  padding:14px 18px; box-shadow:var(--shadow-lg);
  display:flex; align-items:center; gap:12px; max-width:320px;
  animation:badgeSlideIn .4s var(--ease);
}
.badge-toast .bt-emoji{ font-size:32px; flex-shrink:0; }
.badge-toast .bt-text{ font-size:13px; font-weight:600; color:var(--text); }
.badge-toast .bt-text strong{ display:block; font-size:14px; font-weight:800; margin-bottom:2px; color:var(--text-strong); }
.badge-toast .bt-text span{ color:var(--muted); font-weight:500; }
@keyframes badgeSlideIn{ from{ opacity:0; transform:translateY(20px) scale(.95); } to{ opacity:1; transform:none; } }

/* ==========================================================
   MODALS, brand modal: radius-lg, soft scrim, lg elevation
   ========================================================== */
.modal-overlay{
  position:fixed; inset:0; z-index:200;
  background:rgba(14,23,20,.42);
  display:none; align-items:center; justify-content:center; padding:20px;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.modal-overlay.open{ display:flex; }
.modal{
  background:var(--panel); border:1px solid var(--stroke);
  border-radius:var(--radius-lg); padding:32px;
  max-width:440px; width:100%; position:relative;
  box-shadow:var(--shadow-lg);
  animation:modalIn var(--dur-2) var(--ease);
  max-height:80vh; overflow-y:auto;
}
@keyframes modalIn{ from{ opacity:0; transform:translateY(8px) scale(.98); } to{ opacity:1; transform:none; } }
.modal-close{
  position:absolute; top:10px; right:10px;
  background:none; border:none; font-size:16px; color:var(--muted); cursor:pointer;
  width:40px; height:40px; border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
  transition:background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.modal-close:hover{ background:var(--surface-2); color:var(--text); }
.modal h2{ font-size:18px; font-weight:800; margin-bottom:16px; color:var(--text-strong); }
.modal p{ font-size:14px; color:var(--muted); line-height:1.6; margin-bottom:16px; }
.modal-icon{ width:52px; height:52px; border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:16px; }
.modal-icon.wip{ background:var(--warning-50); color:var(--warning); }
.modal-icon.settings{ background:var(--accent-50); color:var(--accent); }

.modal-btn{
  display:inline-flex; align-items:center; gap:6px; padding:10px 20px;
  border-radius:var(--radius); font-size:13px; font-weight:600;
  cursor:pointer; border:1px solid transparent; font-family:inherit;
  transition:background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.modal-btn-primary{ background:var(--accent); color:#fff; }
.modal-btn-primary:hover{ background:var(--accent-strong); }
.modal-btn-secondary{ background:var(--panel); color:var(--text); border-color:var(--stroke); }
.modal-btn-secondary:hover{ border-color:var(--stroke-strong); background:var(--surface-2); }
.modal-btn:focus-visible{ outline:none; box-shadow:var(--focus-ring); }

/* ==========================================================
   SETTINGS FORM (inside modals)
   ========================================================== */
.settings-avatar{ display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.settings-avatar-img{
  width:64px; height:64px; border-radius:50%;
  background:var(--brand-gradient); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:700; overflow:hidden; flex-shrink:0; position:relative;
}
.settings-avatar-img img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.settings-avatar-info{ flex:1; }
.settings-avatar-info p{ font-size:12px; color:var(--muted); margin:0 0 6px; }
.settings-group{ margin-bottom:18px; }
.settings-group label{ display:block; font-size:12px; font-weight:600; color:var(--muted); margin-bottom:5px; text-transform:uppercase; letter-spacing:.5px; }
.settings-group input{
  width:100%; padding:10px 12px; border:1px solid var(--stroke-strong); border-radius:var(--radius);
  font-size:14px; font-family:inherit; color:var(--text); background:var(--panel);
  transition:border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.settings-group input:focus{ outline:none; border-color:var(--accent); box-shadow:var(--focus-ring); }
.settings-group input:disabled{ background:var(--surface-2); color:var(--muted); }
.settings-divider{ height:1px; background:var(--stroke); margin:20px 0; }
.settings-danger{ font-size:13px; color:var(--danger); cursor:pointer; font-weight:600; background:none; border:none; padding:0; font-family:inherit; }
.settings-danger:hover{ text-decoration:underline; }
.settings-saved{ font-size:12px; color:var(--success); font-weight:600; display:none; margin-left:8px; }

.avatar-upload-btn{ font-size:12px; font-weight:600; color:var(--accent); cursor:pointer; background:none; border:none; padding:0; font-family:inherit; }
.avatar-upload-btn:hover{ text-decoration:underline; }
.avatar-remove-btn{ font-size:12px; font-weight:600; color:var(--muted); cursor:pointer; background:none; border:none; padding:0; font-family:inherit; margin-left:10px; }
.avatar-remove-btn:hover{ color:var(--danger); }

/* Theme chips */
.theme-chip{
  padding:8px 10px; border-radius:var(--radius); border:2px solid var(--stroke); cursor:pointer;
  text-align:center; font-size:12px; font-weight:600; background:var(--panel);
  transition:border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.theme-chip:hover{ border-color:var(--stroke-strong); }
.theme-chip.active{ border-color:var(--accent); background:var(--accent-50); }
.theme-chip .tc-emoji{ font-size:18px; display:block; margin-bottom:2px; }

/* ==========================================================
   LOADING
   ========================================================== */
.loading{ text-align:center; padding:120px 24px; color:var(--muted); }
.loading i{ font-size:28px; margin-bottom:12px; opacity:.4; display:block; color:var(--accent); }

/* ==========================================================
   ACCESSIBILITY + MOTION
   ========================================================== */
*:focus-visible{ outline:none; box-shadow:var(--focus-ring); border-radius:4px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:none; box-shadow:var(--focus-ring);
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}