:root{
  --blue:#1d4f91;
  --navy:#1a3a6b;
  --text:#222;
  --muted:#666;
  --border:#e2e2e2;
  --head:#f4f4f4;
  --bg:#ffffff;
  --green:#2e7d32;
  --red:#c62828;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",Roboto,Arial,sans-serif;color:var(--text);background:var(--bg)}

/* ---------- Header ---------- */
header{background:var(--blue);color:#fff;padding:18px 32px 34px}
.hrow{display:flex;justify-content:space-between;align-items:center;gap:16px;max-width:1100px;margin:0 auto}
.brand{display:flex;align-items:center;gap:14px}
.logo{width:56px;height:56px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none}
.brand h1{font-size:20px;margin:0;font-weight:600}
.brand p{margin:3px 0 0;font-size:13px;opacity:.85}
.right{display:flex;align-items:center;gap:20px}
.timerbox{text-align:right}
.timer{font-size:28px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:1px}
.remain{font-size:13px;opacity:.9;margin-top:2px}
.photo{width:64px;height:76px;border-radius:4px;background:#e9eef6;overflow:hidden;cursor:pointer;display:grid;place-items:center;border:2px solid rgba(255,255,255,.75);flex:none}
.photo img{width:100%;height:100%;object-fit:cover}
.status{max-width:1100px;margin:16px auto 0;font-size:14px;background:rgba(255,255,255,.13);padding:8px 12px;border-radius:4px}
.planbadge{display:inline-block;font-size:12px;padding:3px 10px;border-radius:12px;background:rgba(255,255,255,.18);margin-top:6px}

/* ---------- Body ---------- */
main{max-width:1100px;margin:24px auto;padding:0 32px}
.q{padding:16px 0;border-bottom:1px solid var(--border)}
.q h3{font-size:15.5px;font-weight:500;margin:0 0 10px;line-height:1.5}
.q label{display:flex;gap:10px;align-items:flex-start;padding:6px 8px;border-radius:4px;cursor:pointer;font-size:15px;line-height:1.45}
.q label:hover{background:#f5f8fc}
.q input{margin-top:3px;flex:none}
.nav{display:flex;justify-content:space-between;align-items:center;margin:26px 0 30px}
button{font:inherit;padding:9px 22px;border-radius:4px;border:1px solid var(--blue);background:#fff;color:var(--blue);cursor:pointer}
button.primary{background:var(--blue);color:#fff}
button:disabled{opacity:.4;cursor:default}
.pageinfo{color:var(--muted);font-size:14px}

/* ---------- Dashboard ---------- */
.dash{max-width:900px;margin:30px auto}
.dash h2{color:var(--navy);font-size:22px;margin:0 0 6px}
.dash .sub{color:var(--muted);margin:0 0 22px;font-size:14.5px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.tile{border:1px solid var(--border);border-radius:6px;padding:16px;display:flex;flex-direction:column;gap:8px;min-height:130px}
.tile h4{margin:0;font-size:16px;color:var(--navy);display:flex;justify-content:space-between;align-items:center}
.tile .meta{font-size:13px;color:var(--muted);flex:1}
.tile.done{background:#f7faf7}
.tile.locked{background:#fafafa;cursor:pointer}
.tile.locked h4{color:#888}
.tile.locked:hover{border-color:var(--blue)}
.pill{font-size:11.5px;padding:2px 8px;border-radius:10px;background:#e8f0fb;color:var(--blue);font-weight:600}
.pill.free{background:#e8f5e9;color:var(--green)}
.rules{margin-top:26px;font-size:14px;color:#444;line-height:1.7;border-top:1px solid var(--border);padding-top:16px}
.rules ul{padding-left:20px;margin:6px 0}

/* ---------- Result ---------- */
.card{border:1px solid #e6e6e6;padding:28px 30px;max-width:640px;margin:30px auto;background:#fff}
.card h2{color:var(--navy);font-size:20px;margin:0 0 18px;font-weight:600}
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{border:1px solid #ddd;padding:12px 14px;text-align:left;vertical-align:top}
th{background:var(--head);color:#555;font-weight:600}
.mark{width:90px}
.meta-line{margin-top:16px;color:var(--muted);font-size:14px}
.actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}

.analysis{margin-top:26px}
.analysis h3{font-size:16px;color:var(--navy);margin:0 0 10px;display:flex;align-items:center;gap:8px}
.teaser{background:#fff8e6;border:1px solid #f3dfa7;padding:10px 12px;border-radius:4px;font-size:14px;margin-bottom:12px}
.lockwrap{position:relative}
.lockwrap .blur{filter:blur(4px);pointer-events:none;user-select:none}
.lockover{position:absolute;inset:0;display:grid;place-items:center}
.bar{height:8px;background:#eee;border-radius:4px;overflow:hidden;margin-top:4px}
.bar span{display:block;height:100%;background:var(--blue)}
.weak{color:var(--red);font-weight:600}

/* review */
.opt-correct{background:#e8f5e9}
.opt-wrong{background:#fdecea}
.explain{font-size:13.5px;color:#444;margin:8px 8px 0;padding:8px 10px;background:#f7f7f7;border-left:3px solid var(--blue)}
.tag{font-size:12px;color:var(--muted);margin-left:6px}

/* ---------- Modal ---------- */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:grid;place-items:center;padding:16px;z-index:10}
.modal{background:#fff;border-radius:8px;max-width:440px;width:100%;padding:24px 26px}
.modal h3{margin:0 0 4px;color:var(--navy);font-size:20px}
.price{font-size:26px;font-weight:700;color:var(--blue);margin:10px 0 2px}
.price small{font-size:13px;color:var(--muted);font-weight:400}
.modal ul{padding-left:20px;font-size:14.5px;line-height:1.75;margin:12px 0}
.paybox{background:#f6f8fb;border:1px dashed #c9d5e6;padding:12px;border-radius:6px;font-size:13.5px;line-height:1.6}
.coderow{display:flex;gap:8px;margin-top:14px}
.coderow input{flex:1;font:inherit;padding:8px 10px;border:1px solid #ccc;border-radius:4px}
.msg{font-size:13px;margin-top:8px;min-height:18px}
.modal .close{margin-top:14px;width:100%}

.disclaimer{text-align:center;font-size:12px;color:#999;margin:30px 16px}

@media (max-width:640px){
  header{padding:14px 16px 24px}
  .hrow{flex-wrap:wrap}
  main{padding:0 16px}
  .timer{font-size:22px}
  .card{padding:20px 16px}
}

/* ---------- Notices ---------- */
.loading{color:var(--muted);text-align:center;margin:40px 0}
.notice{background:#eef4fc;border:1px solid #cfdcf0;color:#2b4a75;padding:9px 12px;border-radius:4px;font-size:14px;margin:0 0 14px}
.notice.warn{background:#fff8e6;border-color:#f3dfa7;color:#6b5300}

/* ---------- Practice by chapter ---------- */
.dash h2.section{margin-top:34px}
.tile.soon{background:#fafafa}
.tile.soon h4{color:#888}
.practice{max-width:760px;margin:0 auto}
.practice .q{border-bottom:none}
.practice .q label.picked{cursor:default}
.feedback{font-size:14.5px;font-weight:600;margin:10px 8px 0}
.feedback.ok{color:var(--green)}
.feedback.no{color:var(--red)}

/* ---------- Subtopic rows in the analysis (Exam Pass) ---------- */
tr.subrow td{font-size:13px;color:#555;padding:7px 14px 7px 28px;background:#fcfcfc}
tr.subrow .bar{height:5px}

@media (max-width:640px){
  .nav{gap:8px}
  .nav button{padding:9px 16px}
  th,td{padding:10px}
  .mark{width:70px}
}

/* keep the paywall inside narrow screens (the code input must be allowed to shrink) */
.overlay{grid-template-columns:minmax(0,440px);justify-content:center;overflow-y:auto}
.coderow input{min-width:0}