/* StudyCDL.org — Light corporate theme */
:root{
  --bg:#f8fafc;          /* page background */
  --panel:#ffffff;       /* cards, header */
  --ink:#111827;         /* primary text (slate-900) */
  --muted:#6b7280;       /* secondary text (slate-500/600) */
  --line:#e5e7eb;        /* borders (slate-200) */
  --accent:#0b3d91;      /* navy primary */
  --accent-2:#c1121f;    /* transport red (sparingly) */
  --ok:#16a34a; --err:#dc2626; --warn:#f59e0b;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,Arial,sans-serif}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
.container{max-width:1120px;margin:0 auto;padding:0 20px}

/* Header */
header{position:sticky;top:0;background:var(--panel);border-bottom:1px solid var(--line);z-index:30}
header .bar{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--ink)}
.brand img{height:38px}
nav a{margin:0 12px;color:var(--ink)}
nav a.btn{color:#fff}

/* Buttons */
.btn{border:1px solid var(--line);padding:10px 16px;border-radius:6px;display:inline-block;font-weight:600;background:#fff;color:var(--ink)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.ghost{background:transparent}

/* Hero */
.hero{border-bottom:1px solid var(--line);background:#f3f4f6}
.hero .wrap{display:grid;grid-template-columns:1.3fr .7fr;gap:30px;padding:72px 0}
h1{font-size:42px;line-height:1.12;margin:0 0 10px}
.lead{color:#374151;font-size:18px;max-width:60ch}

/* Sections & cards */
.section{padding:64px 0;border-top:1px solid var(--line);background:var(--bg)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:18px;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.grid{display:grid;gap:18px}
.grid.two{grid-template-columns:1fr 1fr}
.grid.three{grid-template-columns:repeat(3,1fr)}

/* KPIs */
.kpis{display:flex;gap:12px;flex-wrap:wrap}
.kpi{border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:#fff;color:#1f2937}

/* Quiz */
.quiz-wrap{display:grid;gap:18px;grid-template-columns:1.2fr .8fr}
.answers label{display:block;border:1px solid var(--line);border-radius:8px;padding:10px;margin:8px 0;background:#fff;cursor:pointer;color:#111827}
.answers input{margin-right:8px}
.meta{display:flex;justify-content:space-between;align-items:center;margin:8px 0 0 0;color:#374151}
.badge{padding:2px 8px;border-radius:999px;border:1px solid var(--line);font-size:12px;color:#374151;background:#fff}
.badge.pass{border-color:#c7f6d6;background:#ecfdf5;color:var(--ok)}
.badge.fail{border-color:#fbd5d5;background:#fef2f2;color:var(--err)}
.progress{height:8px;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.progress > div{height:100%;background:var(--accent);width:0%}
.notice{border-left:3px solid var(--warn);padding:12px;background:#fff8e1;border:1px solid #fde68a;border-radius:8px;color:#78350f}

/* Footer */
footer{border-top:1px solid var(--line);padding:28px 0;background:var(--panel)}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;align-items:center;gap:18px}
.footer-links{display:flex;gap:14px;justify-content:center}
.footer-right{text-align:right}
small.muted{color:var(--muted)}

/* Responsive */
@media (max-width:980px){
  .hero .wrap{grid-template-columns:1fr}
  .grid.two{grid-template-columns:1fr}
  .grid.three{grid-template-columns:1fr}
  .quiz-wrap{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .footer-right{text-align:left}
}