/* ============================================================
   JNU QBank Navigator — Shared Design System
   Single source of truth: design tokens + reusable components.
   Zero dependencies. Light theme. Adopted by all pages.
   ============================================================ */

/* ---------- Design Tokens ---------- */
:root{
  /* Brand palette */
  --primary:#1a56db;
  --primary-dark:#1e40af;
  --primary-light:#dbeafe;
  --primary-bg:#eff6ff;
  --primary-bg-2:#f5f9ff;
  --accent:#f59e0b;
  --accent-light:#fef3c7;
  --purple:#7c3aed;
  --purple-light:#ede9fe;
  --teal:#0d9488;
  --teal-light:#ccfbf1;
  --success:#059669;
  --success-light:#d1fae5;
  --danger:#dc2626;
  --danger-light:#fee2e2;

  /* Neutrals */
  --text:#1e293b;
  --text-muted:#64748b;
  --text-faint:#94a3b8;
  --border:#e2e8f0;
  --border-strong:#cbd5e1;
  --card:#ffffff;
  --surface:#f8fafc;
  --surface-2:#f1f5f9;

  /* Spacing scale (8pt base) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;

  /* Radius */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-pill:999px;

  /* Shadows */
  --sh-sm:0 1px 2px rgba(15,23,42,.05),0 1px 3px rgba(15,23,42,.06);
  --sh-md:0 4px 12px rgba(15,23,42,.08),0 2px 6px rgba(15,23,42,.04);
  --sh-lg:0 12px 32px rgba(15,23,42,.12),0 4px 12px rgba(15,23,42,.06);
  --sh-primary:0 8px 24px rgba(26,86,219,.25);

  /* Type scale (fluid) */
  --fs-xs:11px; --fs-sm:13px; --fs-base:15px; --fs-md:17px;
  --fs-lg:clamp(20px,4vw,24px); --fs-xl:clamp(24px,5vw,32px); --fs-2xl:clamp(32px,7vw,44px);
  --lh-tight:1.2; --lh-snug:1.35; --lh-normal:1.55;

  /* Layout */
  --container:960px;
  --container-narrow:620px;
  --transition:.18s cubic-bezier(.4,0,.2,1);
}

/* ---------- Reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--primary-bg);
  color:var(--text);
  min-height:100vh;
  line-height:var(--lh-normal);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:var(--r-sm)}

/* ---------- Layout ---------- */
.container{max-width:var(--container);margin:0 auto;padding:var(--sp-4)}
.container-narrow{max-width:var(--container-narrow);margin:0 auto;padding:var(--sp-4)}

/* ---------- Sticky top bar (glass) ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.72);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--border);
}
.topbar-inner{max-width:var(--container);margin:0 auto;padding:var(--sp-2) var(--sp-4);display:flex;align-items:center;gap:var(--sp-3)}
.topbar .brand{display:flex;align-items:center;gap:var(--sp-2);font-weight:700;font-size:var(--fs-md);color:var(--primary)}
.topbar .brand img{width:30px;height:30px;border-radius:var(--r-sm)}
.topbar .nav{display:flex;gap:var(--sp-2);margin-left:auto;flex-wrap:wrap}
.topbar .nav a{padding:var(--sp-1) var(--sp-3);border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:600;color:var(--text-muted);transition:var(--transition)}
.topbar .nav a:hover{background:var(--primary-light);color:var(--primary)}

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(135deg,#1a56db 0%,#1e40af 50%,#1e3a8a 100%);
  border-radius:var(--r-xl);
  padding:var(--sp-6) var(--sp-5);
  margin-bottom:var(--sp-5);
  box-shadow:var(--sh-primary);
  position:relative;overflow:hidden;
  color:#fff;
}
.hero .hero-logo{width:56px;height:56px;border-radius:var(--r-md);box-shadow:0 2px 12px rgba(0,0,0,.25);margin-bottom:var(--sp-3)}
.hero h1{font-size:var(--fs-xl);font-weight:800;letter-spacing:-.5px}
.hero p{font-size:var(--fs-sm);color:rgba(255,255,255,.82);margin-top:var(--sp-1);line-height:var(--lh-snug)}
.hero .hero-deco{position:absolute;right:-30px;top:-30px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.08)}

/* ---------- Section ---------- */
.section{margin:var(--sp-5) 0 var(--sp-3)}
.section-label{
  font-size:var(--fs-xs);font-weight:700;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.6px;
  margin-bottom:var(--sp-3);display:flex;align-items:center;gap:var(--sp-2);
}

/* ---------- Grids ---------- */
.grid{display:grid;gap:var(--sp-3)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(2,1fr)}
.grid-auto{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
@media(max-width:560px){.grid-3{grid-template-columns:repeat(2,1fr)}.grid-2{grid-template-columns:1fr}}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-4);border:1px solid var(--border);border-radius:var(--r-md);
  background:var(--card);color:var(--text);font-size:var(--fs-sm);font-weight:600;
  box-shadow:var(--sh-sm);transition:var(--transition);text-decoration:none;
}
.btn:hover{border-color:var(--primary);box-shadow:var(--sh-md);transform:translateY(-1px)}
.btn .ic{font-size:16px;line-height:1}
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:var(--sh-primary)}
.btn-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark)}
.btn-accent{border-color:var(--accent);color:var(--accent)}
.btn-accent:hover{background:var(--accent-light);border-color:var(--accent)}
.btn-ghost{background:transparent;border-color:transparent;box-shadow:none}
.btn-ghost:hover{background:var(--primary-light);border-color:transparent;box-shadow:none}
.btn.sel{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:var(--sh-primary)}
.btn.sel:hover{background:var(--primary-dark)}

/* ---------- Choice / path cards ---------- */
.card{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-4);border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--card);box-shadow:var(--sh-sm);transition:var(--transition);text-decoration:none;color:var(--text);
}
.card:hover{border-color:var(--primary);box-shadow:var(--sh-lg);transform:translateY(-2px)}
.card .ci{
  width:44px;height:44px;border-radius:var(--r-md);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:18px;
}
.card .cn{font-size:var(--fs-base);font-weight:700}
.card .cs{font-size:var(--fs-xs);color:var(--text-muted);margin-top:2px;line-height:var(--lh-snug)}

/* ---------- Quick-access tile (bento) ---------- */
.tile{
  display:flex;flex-direction:column;gap:var(--sp-2);
  padding:var(--sp-4);border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--card);box-shadow:var(--sh-sm);transition:var(--transition);text-decoration:none;color:var(--text);
  position:relative;overflow:hidden;
}
.tile:hover{border-color:var(--primary);box-shadow:var(--sh-lg);transform:translateY(-2px)}
.tile .tile-ic{width:40px;height:40px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:20px}
.tile .tile-title{font-size:var(--fs-md);font-weight:700}
.tile .tile-sub{font-size:var(--fs-xs);color:var(--text-muted);line-height:var(--lh-snug)}

/* ---------- Stat chips ---------- */
.chips{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.chip{
  display:inline-flex;align-items:center;gap:var(--sp-1);
  padding:var(--sp-1) var(--sp-3);border-radius:var(--r-pill);
  background:var(--card);border:1px solid var(--border);font-size:var(--fs-xs);font-weight:600;color:var(--text-muted);
}
.chip .dot{width:7px;height:7px;border-radius:50%}

/* ---------- Footer ---------- */
.site-footer{
  text-align:center;margin-top:var(--sp-6);padding:var(--sp-4) 0;
  border-top:1px solid var(--border);
}
.site-footer p{font-size:var(--fs-xs);color:var(--text-muted);line-height:var(--lh-snug);max-width:440px;margin:0 auto}

/* ---------- Watermark (logo) ---------- */
.bg-watermark{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  width:60vmin;height:60vmin;pointer-events:none;z-index:0;opacity:.06;
}
.bg-watermark img{width:100%;height:100%;object-fit:contain}

/* ---------- Utilities ---------- */
.hidden{display:none!important}
.fade{animation:fadeIn .18s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.text-center{text-align:center}
.mt-2{margin-top:var(--sp-2)}.mt-3{margin-top:var(--sp-3)}.mt-4{margin-top:var(--sp-4)}