:root{
  /* field = the dark "desk" the documents sit on */
  --field:#0e2135; --field2:#16324e; --glow:rgba(42,109,176,.30);
  --paper:#ffffff; --ink:#1a2330; --muted:#5b6777; --line:#e2e7ee;
  --brand:#1f4e79; --brand2:#2a6db0; --ok:#1f8a4c; --warn:#b45309;
  --brass:#c6972f; --brass2:#e3c06a; --brass-ink:#9c7420;
  --gatebg:#fff7ed; --gateline:#f1c38a; --gateink:#8a5a16;
  --serif:"Spectral",Georgia,"Times New Roman",serif;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 20px 44px -16px rgba(0,0,0,.6);
  --radius:14px; --maxw:820px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  min-height:100vh;
  background-color:var(--field);
  background-image:
    radial-gradient(1100px 520px at 50% -8%, var(--glow), transparent 70%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.016) 0 1.5px, transparent 1.5px 11px);
  background-attachment:fixed;
  color:var(--ink);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  padding:0 16px 72px;
}
a{color:var(--brand2)}

.demo-banner{
  max-width:var(--maxw); margin:0 auto; background:#fbf1d6; border:1px solid #e3c877;
  border-top:none; color:#6b5a16; border-radius:0 0 10px 10px; padding:8px 14px; font-size:13px;
  display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:space-between;
}
.demo-banner b{color:#5a4a10}
.demo-banner label{display:inline-flex; gap:6px; align-items:center; cursor:pointer}

/* ---- shared card shell ---- */
header.app, main, .card{
  max-width:var(--maxw); margin:16px auto 0; border-radius:var(--radius); box-shadow:var(--shadow);
}
main, .card{ background:var(--paper); border:1px solid var(--line); }
main{ overflow:hidden; }

/* ---- masthead (navy, brass seal) ---- */
header.app{
  position:relative; overflow:hidden; margin-top:18px; padding:18px 22px;
  background:linear-gradient(135deg,#0f2a44 0%, #1b456d 100%);
  color:#eef4fa; border:1px solid rgba(255,255,255,.10); border-top:3px solid var(--brass);
}
header.app::after{
  content:""; position:absolute; top:-26px; right:-18px; width:132px; height:132px; opacity:.16; pointer-events:none;
  background:no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='46' fill='none' stroke='%23e3c06a' stroke-width='2'/><circle cx='50' cy='50' r='38' fill='none' stroke='%23e3c06a' stroke-width='1'/><path d='M50 18 l8 20 22 2 -17 14 6 21 -19-12 -19 12 6-21 -17-14 22-2z' fill='%23e3c06a'/></svg>");
}
.eyebrow{font-size:12.5px; letter-spacing:.04em; color:var(--brand2); font-weight:700}
header.app .eyebrow{ color:var(--brass2); display:inline-flex; align-items:center; gap:8px; }
header.app .eyebrow::before{ content:""; width:16px; height:2px; background:var(--brass); display:inline-block; }
h1.module{font-family:var(--serif); font-size:22px; font-weight:700; color:#fff; margin:8px 0 14px; line-height:1.28}

.meter{display:flex; align-items:center; gap:12px; font-size:13px; color:var(--muted)}
.bar{flex:1; height:8px; background:#eef2f6; border-radius:99px; overflow:hidden}
.bar>span{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--brand2),var(--brass)); transition:width .4s}
.credit{font-weight:700; color:var(--ink); white-space:nowrap}
header.app .meter{color:rgba(238,244,250,.72)}
header.app .bar{background:rgba(255,255,255,.14)}
header.app .credit{color:#fff}

/* ---- reading pages ---- */
.page-head{padding:18px 24px 0}
.page-head .step{font-size:12px; color:var(--brass-ink); font-weight:700; letter-spacing:.03em}
.page-head h2{font-family:var(--serif); font-size:23px; font-weight:700; margin:6px 0 0; color:var(--brand)}
.content{padding:14px 24px 8px}
.content p{margin:0 0 14px}
.content h3{font-size:16px; margin:22px 0 8px; color:#20364e}
.content ul,.content ol{margin:0 0 14px; padding-left:22px}
.content li{margin:4px 0}
.content blockquote{margin:0 0 14px; padding:11px 15px; background:#f6f3e8; border-left:4px solid var(--brass); border-radius:0 8px 8px 0; color:#4a3f22}
.content code{background:#eef2f6; padding:1px 5px; border-radius:5px; font-size:.9em}
.end-marker{display:flex; align-items:center; gap:8px; margin:18px 0 6px; color:var(--ok); font-weight:600; font-size:14px}

/* ---- gate ---- */
.gate{ position:sticky; bottom:0; background:linear-gradient(180deg,rgba(255,255,255,0),var(--paper) 34%); padding:18px 24px 20px; border-top:1px solid var(--line); }
.gate .status{display:flex; gap:18px; flex-wrap:wrap; font-size:13px; color:var(--muted); margin-bottom:12px}
.chk{display:inline-flex; align-items:center; gap:7px}
.dot{width:16px; height:16px; border-radius:50%; border:2px solid #c6d0dc; display:inline-block; flex:none; position:relative}
.chk.done .dot{background:var(--ok); border-color:var(--ok)}
.chk.done .dot::after{content:"\2713"; color:#fff; font-size:10px; position:absolute; inset:0; display:flex; align-items:center; justify-content:center}
.chk.done{color:var(--ink); font-weight:600}
button.next, a.next{
  display:block; width:100%; text-align:center; text-decoration:none;
  padding:14px 18px; font-size:16px; font-weight:700; color:#fff;
  background:var(--brand); border:0; border-radius:10px; cursor:pointer; transition:background .2s, opacity .2s;
}
button.next:disabled{background:#b7c2cf; cursor:not-allowed}
button.next:not(:disabled):hover, a.next:hover{background:var(--brand2)}
.btn-ghost{ display:inline-block; text-align:center; text-decoration:none; margin-top:10px; padding:11px 18px; font-size:14px; font-weight:600; color:var(--brand); background:#fff; border:1px solid var(--line); border-radius:10px; cursor:pointer; }
.hint{text-align:center; font-size:12.5px; color:var(--muted); margin-top:9px}

/* ---- quiz ---- */
.quiz-q{margin:0 0 20px}
.quiz-q .q{font-weight:700; margin:0 0 10px}
.quiz-opt{display:block; width:100%; text-align:left; padding:11px 14px; margin:0 0 8px; border:1px solid var(--line); border-radius:10px; background:#fff; cursor:pointer; font:inherit; color:inherit}
.quiz-opt:hover{border-color:var(--brand2)}
.quiz-opt.correct{border-color:var(--ok); background:#eef8f1}
.quiz-opt.wrong{border-color:#d08a8a; background:#fbeeee}
.quiz-opt:disabled{cursor:default}
.quiz-explain{font-size:13.5px; color:#4a3f22; background:#f6f3e8; border-left:4px solid var(--brass); border-radius:0 8px 8px 0; padding:10px 14px; margin:4px 0 0; display:none}
.quiz-explain.show{display:block}

/* ---- video ---- */
.video-stage{margin:6px 24px 0; border-radius:12px; overflow:hidden; background:#0c1420; aspect-ratio:16/9; position:relative; display:flex; align-items:center; justify-content:center; color:#dfe8f3}
.video-stage video{width:100%; height:100%; display:block; background:#0c1420}
.video-stage .play{width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.14);border:2px solid rgba(255,255,255,.5); color:#fff; font-size:26px; cursor:pointer; display:flex;align-items:center;justify-content:center}
.video-stage .vlabel{position:absolute; bottom:12px; left:14px; font-size:13px; opacity:.85; pointer-events:none}
.video-stage .vtime{position:absolute; bottom:12px; right:14px; font-size:13px; font-variant-numeric:tabular-nums; opacity:.9; pointer-events:none}
.vprog{position:absolute; left:0; bottom:0; height:5px; background:var(--brass); width:0; pointer-events:none}

/* ---- certificate ---- */
.cert{margin:20px 24px; border:2px solid var(--brand); border-radius:12px; padding:28px; text-align:center; background:linear-gradient(180deg,#fbfdff,#f4f8fc); position:relative}
.cert::before{content:""; position:absolute; inset:7px; border:1px solid var(--brass); border-radius:8px; pointer-events:none; opacity:.5}
.cert.locked{opacity:.95}
.cert .seal{font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--brass-ink); font-weight:700}
.cert h3{font-family:var(--serif); font-size:25px; margin:10px 0 4px; color:var(--brand)}
.cert .name{font-family:var(--serif); font-size:23px; font-weight:700; margin:16px 0 4px}
.cert .rule{border:0; border-top:1px solid var(--line); margin:10px auto; max-width:320px}
.cert small{color:var(--muted)}
.cert .topics{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;text-align:left;max-width:560px;margin:12px auto;font-size:13px;color:#2c3a4d}
.lockpill{margin-top:14px;display:inline-block;background:#fbf1d6;border:1px solid #e3c877;color:#6b5a16;border-radius:8px;padding:6px 12px;font-size:12.5px;font-weight:600}
.donepill{margin-top:14px;display:inline-block;background:#eef8f1;border:1px solid #bfe3cc;color:#1f8a4c;border-radius:8px;padding:6px 12px;font-size:12.5px;font-weight:700}

.note{max-width:var(--maxw); margin:14px auto 0; font-size:12.5px; color:rgba(238,244,250,.6)}
.note a{color:var(--brass2)}

/* ---- dashboard (index) ---- */
.hero{padding:24px}
.hero h1{font-family:var(--serif); font-size:27px; font-weight:700; margin:8px 0 8px; color:#fff; line-height:1.14}
.hero p{margin:0 0 6px; color:rgba(238,244,250,.8); font-size:14.5px}
.enroll{padding:18px 24px; border-top:1px solid var(--line)}
.enroll .row{display:flex; gap:12px; flex-wrap:wrap; margin:0 0 12px}
.enroll label{display:block; font-size:13px; font-weight:600; margin:0 0 4px}
.enroll input[type=text]{width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:9px; font:inherit}
.enroll input[type=text]:focus{outline:2px solid var(--brand2); outline-offset:1px; border-color:var(--brand2)}
.enroll .col{flex:1; min-width:200px}
.attest{display:flex; gap:9px; align-items:flex-start; font-size:13.5px; color:#2c3a4d; margin:0 0 12px}
.modlist{padding:8px 16px 18px}
.modrow{display:flex; align-items:center; gap:14px; padding:14px 12px; border-radius:12px; text-decoration:none; color:inherit; border:1px solid transparent}
.modrow+.modrow{border-top:1px solid var(--line)}
.modrow:hover{background:#f7fafd}
.modrow.locked{opacity:.55; pointer-events:none}
.mnum{width:40px;height:40px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-weight:800;font-family:var(--serif);background:#eef2f6;color:var(--brand)}
.modrow.done .mnum{background:var(--ok);color:#fff}
.mbody{flex:1; min-width:0}
.mbody .mt{font-weight:700; line-height:1.25}
.mbody .ms{font-size:12.5px; color:var(--muted)}
.mstat{font-size:12.5px; font-weight:700; white-space:nowrap}
.mstat.done{color:var(--ok)}
.mstat.todo{color:var(--brand2)}
.mstat.lockedtxt{color:var(--muted)}
@media (max-width:520px){
  .content,.page-head,.gate,.hero,.enroll{padding-left:16px;padding-right:16px}
  .cert .topics{grid-template-columns:1fr}
  .hero h1{font-size:23px}
}
@media (prefers-reduced-motion:reduce){ *{transition:none !important} }