/* ===== Cambridge Practice Hub – site styles =====
   Palette: trustworthy blue + teal accents, green call-to-action, light neutral surfaces. */
:root{
  /* exam sheet (paper.css) */
  --ink:#444; --ok:#13903f; --bad:#d62d2d;
  /* site */
  --bg:#F4F7FB; --surface:#fff; --line:#E2E8F0; --text:#0F172A; --muted:#475569;
  --brand:#0B5FA5; --brand-d:#084B84; --brand-bg:#E8F1FB;
  --teal:#0F766E; --teal-bg:#E3F6F3;
  --cta:#15803D; --cta-d:#116530;
  --good:#166534; --good-bg:#DCFCE7; --amber:#92400E; --amber-bg:#FEF3C7; --red:#B91C1C; --red-bg:#FEE2E2;
  --radius:14px; --shadow:0 1px 2px rgba(15,23,42,.06),0 6px 18px rgba(15,23,42,.07);
  --font:"Inter","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-padding-top:90px}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--brand)}
.hidden{display:none!important}
.ic{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-.18em}
:focus-visible{outline:3px solid #1D4ED8;outline-offset:2px;border-radius:6px}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px;top:8px;background:#fff;padding:8px 14px;border-radius:8px;z-index:100}
.skip:focus{left:8px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border:2px solid transparent;border-radius:10px;
  font:600 15.5px/1 var(--font);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s,transform .1s,box-shadow .15s}
.btn:active{transform:translateY(1px)}
.btn-cta{background:var(--cta);color:#fff;box-shadow:0 2px 0 var(--cta-d)} .btn-cta:hover{background:#166F3A}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 2px 0 var(--brand-d)} .btn-primary:hover{background:#0A5393}
.btn-outline{background:#fff;color:var(--brand-d);border-color:#BBD3EC} .btn-outline:hover{background:var(--brand-bg);border-color:var(--brand)}
.btn-ghost{background:transparent;color:var(--muted)} .btn-ghost:hover{background:#E8EDF4}
.btn-sm{min-height:36px;padding:0 12px;font-size:14px;border-radius:8px}
.btn-lg{min-height:52px;padding:0 28px;font-size:17px;border-radius:12px}
.btn[aria-disabled=true]{opacity:.55;pointer-events:none}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;gap:18px;min-height:66px}
.brand-link{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font-weight:800;font-size:18px;line-height:1.1}
.logo-mark{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--teal));color:#fff;display:grid;place-items:center}
.brand-link small{display:block;font-weight:500;font-size:12px;color:var(--muted)}
.nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.nav a{padding:9px 14px;border-radius:9px;text-decoration:none;color:var(--muted);font-weight:600;font-size:15px}
.nav a:hover{background:var(--brand-bg);color:var(--brand-d)}
.nav a[aria-current=page]{background:var(--brand);color:#fff}
.nav .btn{margin-left:8px}
.menu-btn{display:none;margin-left:auto;background:#fff;border:1px solid var(--line);border-radius:10px;width:44px;height:44px;cursor:pointer;color:var(--text)}

/* ---------- hero ---------- */
.hero{background:linear-gradient(180deg,#E3EEFB 0%,var(--bg) 100%);padding:54px 0 34px}
.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:34px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #CFE0F3;color:var(--brand-d);border-radius:999px;padding:5px 14px;font-weight:600;font-size:14px}
.hero h1{font-size:clamp(30px,4.4vw,46px);line-height:1.1;margin:16px 0 14px;letter-spacing:-.02em}
.lead{font-size:18px;color:var(--muted);max-width:60ch;margin:0 0 22px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.trust{list-style:none;margin:22px 0 0;padding:0;display:flex;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:14.5px}
.trust li{display:flex;align-items:center;gap:6px} .trust .ic{color:var(--teal)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
.card h3{margin:0 0 4px;font-size:18px}
.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
.mini-stats div{background:var(--brand-bg);border-radius:12px;padding:10px 6px;text-align:center}
.mini-stats b{display:block;font-size:24px;line-height:1.1;color:var(--brand-d)} .mini-stats span{font-size:12.5px;color:var(--muted)}

/* ---------- sections ---------- */
.section{padding:34px 0 8px}
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.sec-head h2{margin:0;font-size:26px;letter-spacing:-.01em}
.sec-head p{margin:2px 0 0;color:var(--muted)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.step .num{width:34px;height:34px;border-radius:50%;background:var(--teal-bg);color:var(--teal);display:grid;place-items:center;font-weight:800;margin-bottom:10px}
.step h3{font-size:17px} .step p{margin:0;color:var(--muted);font-size:14.5px}
.levels{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.level{display:flex;flex-direction:column;gap:6px;position:relative}
.level .ico{width:44px;height:44px;border-radius:12px;background:var(--brand-bg);color:var(--brand);display:grid;place-items:center;margin-bottom:6px}
.level.soon{background:#FAFBFD} .level.soon .ico{background:#EEF1F5;color:#7B8798}
.level p{margin:0;color:var(--muted);font-size:14.5px}
.tag{display:inline-block;align-self:flex-start;font-size:12.5px;font-weight:700;border-radius:999px;padding:2px 10px;background:var(--teal-bg);color:var(--teal)}
.tag.soon{background:#EEF1F5;color:#5B6678}
.level .acts{margin-top:auto;padding-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.cta-band{margin:34px 0 10px;background:linear-gradient(135deg,var(--brand),#0A7C86);color:#fff;border-radius:18px;padding:28px 30px;display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cta-band h2{margin:0 0 4px;font-size:24px} .cta-band p{margin:0;color:#DCEBFA}

/* ---------- page header / breadcrumbs ---------- */
.page-head{padding:26px 0 8px}
.crumbs{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--muted);flex-wrap:wrap}
.crumbs a{text-decoration:none;color:var(--brand)} .crumbs a:hover{text-decoration:underline}
.crumbs .ic{width:.9em;height:.9em}
.page-title{font-size:34px;margin:8px 0 4px;letter-spacing:-.02em}

/* ---------- filters ---------- */
.filters{display:flex;gap:12px;flex-wrap:wrap;align-items:end;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin:16px 0;box-shadow:var(--shadow)}
.filters label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600;color:var(--muted)}
.filters select,.filters input{font:500 15px var(--font);color:var(--text);min-height:42px;border:1.5px solid #CBD5E1;border-radius:9px;padding:0 12px;background:#fff;min-width:170px}
.filters .grow{flex:1;min-width:200px} .filters .grow input{width:100%}
.count{color:var(--muted);font-size:14px;margin:0 0 10px}

/* ---------- paper rows & cards ---------- */
.row-card{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-left:5px solid var(--brand);border-radius:var(--radius);padding:16px 20px;margin-bottom:12px;box-shadow:var(--shadow)}
.row-card h3{margin:4px 0 2px;font-size:19px}
.row-card p{margin:0;color:var(--muted);font-size:14.5px}
.row-act{display:flex;gap:8px;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;border-radius:6px;padding:2px 9px;background:var(--brand-bg);color:var(--brand-d)}
.badge.mock{background:var(--teal-bg);color:var(--teal)}
.chip{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:2px 11px;font-weight:700;font-size:13.5px;background:#EEF1F5;color:#475569}
.chip.good{background:var(--good-bg);color:var(--good)} .chip.ok{background:var(--amber-bg);color:var(--amber)} .chip.low{background:var(--red-bg);color:var(--red)}
.chip .ic{width:.95em;height:.95em}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.pcard{display:flex;flex-direction:column;gap:6px;transition:transform .15s,box-shadow .15s}
.pcard:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(15,23,42,.06),0 14px 28px rgba(15,23,42,.12)}
.pcard .top{display:flex;justify-content:space-between;align-items:center}
.pcard h3{font-size:20px;margin:6px 0 0} .pcard p{margin:0;color:var(--muted);font-size:14.5px}
.pcard .pfoot{margin-top:auto;padding-top:12px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.empty{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--muted);padding:34px 0;text-align:center}
.empty .ic{width:42px;height:42px;color:#B6C2D2}

/* ---------- results page ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:14px 0 22px}
.stat b{display:block;font-size:30px;line-height:1.1;color:var(--brand-d)} .stat span{color:var(--muted);font-size:14px}
.table-wrap{overflow-x:auto}
table.h{width:100%;border-collapse:collapse;font-size:15px}
table.h th{text-align:left;font-size:13px;color:var(--muted);font-weight:700;padding:10px 12px;border-bottom:2px solid var(--line);white-space:nowrap}
table.h td{padding:11px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
tr.hrow{cursor:pointer} tr.hrow:hover td{background:var(--brand-bg)}
td.act{text-align:right}

/* ---------- test view: sticky bar + result ---------- */
#bar{position:sticky;top:76px;z-index:40;width:850px;max-width:calc(100% - 24px);margin:12px auto;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 16px 12px;box-shadow:0 8px 24px rgba(15,23,42,.14)}
.bar-top{display:flex;align-items:center;gap:14px;justify-content:space-between;flex-wrap:wrap}
.who{display:flex;align-items:center;gap:10px;min-width:0}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font-weight:800;flex:none}
.who b{display:block;line-height:1.15} .who small{color:var(--muted);font-size:13.5px}
.timer-pill{display:inline-flex;align-items:center;gap:8px;background:var(--brand-bg);color:var(--brand-d);border-radius:999px;padding:4px 18px;font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.3}
.timer-pill .ic{width:.9em;height:.9em}
.bar-prog{display:flex;align-items:center;gap:12px;margin-top:8px}
.track{flex:1;height:10px;border-radius:999px;background:#E5ECF4;overflow:hidden}
.track i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#14B8A6,var(--cta));transition:width .3s ease-out}
#progress{font-size:14px;font-weight:600;color:var(--muted);white-space:nowrap}
.qnav{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.qd{min-width:44px;height:34px;padding:0 6px;border:1.5px solid #CBD5E1;border-radius:8px;background:#fff;color:var(--muted);font:600 14px var(--font);cursor:pointer}
.qd:hover{background:var(--brand-bg)}
.qd.done{background:var(--brand);border-color:var(--brand-d);color:#fff}

.result{width:850px;max-width:calc(100% - 24px);margin:16px auto;text-align:center}
.ring{position:relative;width:170px;height:170px;margin:0 auto 6px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:11;stroke-linecap:round}
.ring .trk{stroke:#E5ECF4} .ring .arc{stroke:currentColor;transition:stroke-dasharray .8s ease-out}
.ring-txt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.ring-txt b{font-size:34px;font-weight:800} .ring-txt small{font-size:13px;color:var(--muted);margin-top:4px}
.result.r-good{--rc:var(--cta)} .result.r-ok{--rc:#B45309} .result.r-low{--rc:#DC2626}
.result .ring,.result #resMsg{color:var(--rc)}
.result #resMsg{font-size:26px;margin:4px 0 2px}
#resDetail{color:var(--muted)}
.result .acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.test-intro{max-width:850px;margin:0 auto;padding:0 12px}

/* ---------- footer ---------- */
.site-footer{margin-top:50px;background:#0F2A44;color:#C9D8E8;padding:34px 0 26px;font-size:14.5px}
.site-footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:26px}
.site-footer h4{color:#fff;margin:0 0 8px;font-size:15px}
.site-footer a{color:#C9D8E8;display:block;padding:3px 0;text-decoration:none} .site-footer a:hover{color:#fff;text-decoration:underline}
.site-footer .legal{border-top:1px solid #2A4764;margin-top:22px;padding-top:14px;font-size:13px;color:#9FB6CD}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr} .steps,.levels,.stat-grid{grid-template-columns:repeat(2,1fr)}
  .site-footer .cols{grid-template-columns:1fr}
}
@media (max-width:880px){
  .menu-btn{display:grid;place-items:center}
  .nav{display:none;position:absolute;left:0;right:0;top:66px;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;padding:10px 16px 16px;box-shadow:0 12px 20px rgba(15,23,42,.1)}
  .nav.open{display:flex} .nav .btn{margin:8px 0 0}
  #bar{top:70px}
}
@media (max-width:520px){ .steps,.levels,.stat-grid{grid-template-columns:1fr} .row-card{border-left-width:1px;border-top:5px solid var(--brand)} }
@media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important;scroll-behavior:auto!important} }

/* ---------- grouped past-paper list ---------- */
.group-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin:28px 0 12px;font-size:21px;letter-spacing:-.01em}
.group-h span{color:var(--muted);font-size:14px;font-weight:500}
.row-card.dim{border-left-color:#CBD5E1}
.note{color:var(--muted);font-size:13.5px;max-width:30ch;line-height:1.35;align-self:center}

/* ---------- online mode (PDF + answer sheet) ---------- */
.oIntro{max-width:760px;margin:18px auto}
.intro-list{margin:8px 0 16px;padding-left:20px;color:var(--muted)} .intro-list li{margin:4px 0}
.intro-form{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.intro-form input{font:500 17px var(--font);height:52px;min-width:240px;flex:1;border:1.5px solid #CBD5E1;border-radius:12px;padding:0 14px}
.obar{position:sticky;top:76px;z-index:40;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 16px 12px;margin:12px 0;box-shadow:0 8px 24px rgba(15,23,42,.14)}
.timer-pill.over{background:var(--amber-bg);color:var(--amber)}
#oFill{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#14B8A6,var(--cta));transition:width .3s ease-out}
#oProgress{font-size:14px;font-weight:600;color:var(--muted);white-space:nowrap}
#oResult{max-width:none;width:auto}
.owork{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(350px,.7fr);gap:16px;align-items:start;margin-top:12px}
.opdf-col{position:sticky;top:158px;height:calc(100vh - 176px);min-height:460px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.opdf-col iframe{flex:1;border:0;width:100%;background:#EEF1F6}
.pdf-tools{display:flex;justify-content:space-between;gap:10px;padding:8px 14px;border-bottom:1px solid var(--line);font-weight:600;font-size:14px}
.spart{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px 8px;margin-bottom:12px;box-shadow:var(--shadow)}
.spart h3{margin:0 0 8px;font-size:16px;display:grid;grid-template-columns:1fr auto;gap:0 8px}
.spart h3 .ph small{font-weight:500;color:var(--muted);font-size:13.5px;margin-left:6px}
.spart h3 .pd{grid-column:1;color:var(--muted);font-weight:500;font-size:13.5px}
.pscore{grid-row:1/3;grid-column:2;align-self:center;font-weight:800;color:var(--brand-d)}
.arow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 8px;margin-bottom:4px;border-radius:10px;border:1.5px solid transparent}
.arow .qn{width:32px;height:32px;border-radius:50%;background:var(--brand-bg);color:var(--brand-d);display:grid;place-items:center;font-weight:700;font-size:14px;flex:none}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.ch{min-width:40px;height:40px;border:1.5px solid #CBD5E1;border-radius:9px;background:#fff;color:var(--text);font:700 15px var(--font);cursor:pointer;transition:background .12s}
.ch:hover:not(:disabled){background:var(--brand-bg)}
.ch[aria-checked=true]{background:var(--brand);border-color:var(--brand-d);color:#fff}
.atext{height:42px;min-width:150px;flex:1;max-width:230px;border:1.5px solid #CBD5E1;border-radius:9px;padding:0 12px;font:500 16px var(--font)}
.arow.ok{background:var(--good-bg);border-color:#86EFAC} .arow.no{background:var(--red-bg);border-color:#FCA5A5}
.arow.wd{background:#F1F5F9} .wdt{color:var(--muted);font-size:14px;font-style:italic}
.mk{font-size:14px;font-weight:600;margin-left:auto;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.arow.ok .mk{color:var(--good)} .arow.no .mk{color:var(--red)}
.ch.right{background:var(--good-bg);border-color:var(--cta);color:var(--good)}
.ch.wrong{background:var(--red-bg);border-color:#DC2626;color:var(--red);text-decoration:line-through}
.ch:disabled,.atext:disabled{opacity:1;cursor:default} .atext:disabled{background:#fff;color:var(--text)}
.print-head{display:none}
@media (max-width:980px){ .owork{grid-template-columns:1fr} .opdf-col{position:relative;top:0;height:72vh} .obar{top:70px} }
@media print{
  .opdf-col,.obar,.oIntro,#oResult{display:none!important}
  .owork{display:block} .wrap{max-width:none;padding:0 14mm}
  .print-head{display:block;margin:14mm 0 6mm} .print-head h1{font-size:18pt;margin:0 0 4px} .print-head p{margin:2px 0;font-size:11pt;color:#333} .print-head .big{font-size:16pt;font-weight:800;color:#b91c1c}
  .spart{break-inside:avoid;box-shadow:none;border:1px solid #999;margin-bottom:8px;padding:8px 10px}
  .arow{padding:3px 6px;margin:0} .arow.ok{background:#e8f8ee!important} .arow.no{background:#fdeaea!important}
}

/* ================= structure borrowed from the reference site (colours unchanged) ================= */
.btn-dash{background:#fff;color:var(--cta);border:2px dashed #86C99B} .btn-dash:hover{background:#F0FAF3}
.nav a.btn-dash{color:var(--cta)}
.cta-row.center{justify-content:center}

/* ---- home hero ---- */
.hero2{padding:64px 0 28px;text-align:center;background-color:#F7F9FC;background-image:radial-gradient(#CBD5E1 1px,transparent 1px);background-size:22px 22px;border-bottom:1px solid var(--line)}
.hero2 h1{font-size:clamp(28px,4.4vw,46px);line-height:1.15;letter-spacing:-.02em;max-width:900px;margin:0 auto 14px}
.hero2 .lead{margin:0 auto 24px;max-width:660px}
.hsearch{max-width:720px;margin:30px auto 0;padding:16px 18px 14px;text-align:left}
.searchbox{display:flex;align-items:center;gap:8px;background:#F3F6FA;border:1.5px solid var(--line);border-radius:12px;padding:0 12px;min-height:46px;flex:1}
.searchbox:focus-within{border-color:var(--brand);background:#fff}
.searchbox input{flex:1;min-width:0;border:0;background:transparent;font:500 15.5px var(--font);color:var(--text);height:44px;outline:none}
.searchbox .ic{color:var(--muted)} .searchbox button{border:0;background:transparent;cursor:pointer;color:var(--muted);display:grid;place-items:center;min-width:36px;min-height:36px}
.searchbox.big{min-height:54px;border-radius:14px} .searchbox.big input{height:52px;font-size:16.5px}
.sugg{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.sugg a{font-size:13.5px;font-weight:600;color:var(--text);text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px}
.sugg a:hover{border-color:var(--brand);color:var(--brand-d);background:var(--brand-bg)}
.trustline{color:var(--muted);font-size:14px;margin:18px 0 0}
.progress-card{max-width:520px;margin:18px auto 0;text-align:left}

/* ---- page header row ---- */
.head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.sub{margin:0;color:var(--muted)}
.pstats{display:flex;gap:10px}
.pstat{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 16px}
.pstat .ic{color:var(--brand);width:1.3em;height:1.3em} .pstat b{display:block;line-height:1.1;font-size:18px} .pstat span{font-size:12px;color:var(--muted)}

/* ---- browse layout: sidebar + main ---- */
.browse{display:grid;grid-template-columns:268px minmax(0,1fr);gap:20px;align-items:start;margin-top:14px}
.sidebar{padding:6px 16px 14px;position:sticky;top:84px;max-height:calc(100vh - 100px);overflow:auto}
.s-head{display:flex;justify-content:space-between;align-items:center;padding:12px 0 8px;font-weight:700}
.s-head .ic{margin-right:6px;color:var(--muted)}
.s-clear{border:0;background:transparent;color:var(--brand);font:600 14px var(--font);cursor:pointer;padding:4px 6px;border-radius:6px} .s-clear:hover{text-decoration:underline}
.fsec{border-top:1px solid var(--line);padding:4px 0}
.fsec summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:10px 0;font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.fsec summary::-webkit-details-marker{display:none}
.fsec summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .15s}
.fsec[open] summary::after{transform:rotate(225deg)}
.fcount{background:var(--brand);color:#fff;border-radius:999px;min-width:20px;height:20px;padding:0 6px;font-size:11.5px;display:inline-grid;place-items:center;letter-spacing:0} .fcount:empty{display:none}
.flist{max-height:210px;overflow:auto;display:flex;flex-direction:column;gap:2px;padding-bottom:6px}
.fck{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:8px;cursor:pointer;font-size:14.5px}
.fck:hover{background:var(--brand-bg)} .fck input{width:17px;height:17px;accent-color:var(--brand);flex:none}
.fck span{flex:1} .fck em{font-style:normal;font-size:12px;color:var(--muted)}
.fck input:disabled+span{color:var(--muted)}
.fsearch{width:100%;height:38px;border:1.5px solid #CBD5E1;border-radius:9px;padding:0 10px;font:500 14px var(--font);margin-bottom:6px}
.ychips{display:flex;flex-wrap:wrap;gap:6px;padding-bottom:8px}
.ychip{min-width:56px;height:36px;border:1.5px solid var(--line);border-radius:9px;background:#fff;color:var(--text);font:600 14px var(--font);cursor:pointer}
.ychip:hover{background:var(--brand-bg)} .ychip[aria-pressed=true]{background:var(--brand);border-color:var(--brand-d);color:#fff}

.main-top{display:flex;gap:10px;align-items:center}
.vt{display:flex;border:1.5px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.vt button{border:0;background:#fff;width:42px;height:42px;cursor:pointer;color:var(--muted);display:grid;place-items:center} .vt button[aria-pressed=true]{background:var(--brand-bg);color:var(--brand-d)}
.tabrow{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0 4px}
.tabs{display:flex;gap:4px;background:#EAEFF5;border-radius:10px;padding:3px}
.tabs button{border:0;background:transparent;border-radius:8px;padding:0 14px;min-height:36px;font:600 14px var(--font);color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.tabs button[aria-pressed=true]{background:#fff;color:var(--brand-d);box-shadow:0 1px 3px rgba(15,23,42,.12)}
.sort{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--muted)}
.sort select{font:600 14px var(--font);height:38px;border:1.5px solid var(--line);border-radius:9px;padding:0 10px;background:#fff;color:var(--text)}
.achips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0 2px} .achips:empty{display:none}
.achip{display:inline-flex;align-items:center;gap:6px;border:1px solid #BBD3EC;background:var(--brand-bg);color:var(--brand-d);border-radius:999px;padding:3px 6px 3px 12px;font:600 13.5px var(--font);cursor:pointer}
.achip .ic{width:.9em;height:.9em} .achip:hover{background:#D7E6F6}
.achips .clear-all{border:0;background:transparent;color:var(--brand);font:700 13.5px var(--font);cursor:pointer;padding:4px 6px}

/* ---- groups & rows ---- */
.grp{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:14px;box-shadow:var(--shadow);overflow:hidden}
.grp>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 16px}
.grp>summary::-webkit-details-marker{display:none}
.gcode{background:var(--brand-bg);color:var(--brand-d);font-weight:800;font-size:13px;border-radius:8px;padding:6px 8px}
.ghead b{display:block;font-size:17px;line-height:1.2} .ghead small{color:var(--muted);font-size:13px}
.grp>summary::after{content:"";margin-left:auto;width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .15s}
.grp[open]>summary::after{transform:rotate(225deg)}
.ygrp>summary{list-style:none;cursor:pointer;display:flex;gap:8px;align-items:baseline;padding:8px 16px;border-top:1px solid var(--line);background:#F8FAFC;font-size:14px}
.ygrp>summary::-webkit-details-marker{display:none} .ygrp>summary b{font-size:15px} .ygrp>summary small{color:var(--muted)}
.ygrp>summary::before{content:"";width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);transition:transform .15s;margin-right:4px;align-self:center}
.ygrp[open]>summary::before{transform:rotate(45deg)}
.prow{display:flex;align-items:center;gap:12px;padding:10px 16px;border-top:1px solid var(--line);flex-wrap:wrap}
.prow:hover{background:#F8FBFF}
.ftile{width:38px;height:38px;border-radius:10px;background:var(--teal-bg);color:var(--teal);display:grid;place-items:center;flex:none}
.pmain{flex:1;min-width:230px}
.ptitle{font-weight:700;font-size:15px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pbadge{font-size:11.5px;font-weight:800;background:var(--teal-bg);color:var(--teal);border-radius:6px;padding:1px 7px}
.pmeta{font-size:13px;color:var(--muted)} .pmeta i{font-style:normal;color:#8A94A6}
.pact{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
.tg{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);background:#fff;border-radius:9px;min-height:36px;padding:0 12px;font:600 13.5px var(--font);color:var(--muted);cursor:pointer}
.tg:hover{background:var(--brand-bg)} .tg.on{background:var(--good-bg);border-color:#86EFAC;color:var(--good)}
.star{border:1.5px solid var(--line);background:#fff;border-radius:9px;width:36px;height:36px;cursor:pointer;color:var(--muted);display:grid;place-items:center}
.star:hover{background:var(--brand-bg)} .star.on{color:#D97706;border-color:#FCD34D;background:#FFFBEB} .star.on .ic{fill:#F59E0B}
.btn.dis{opacity:.45;pointer-events:none}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;padding:12px 16px 16px;border-top:1px solid var(--line)}
.pcell{border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px}
.pcell .pact{margin-left:0}


.pmain{flex:1 1 300px;min-width:0}
.pact{flex:0 0 auto}

.audio-box{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--line);background:#F8FAFC}
.audio-box audio{flex:1;min-width:240px;height:40px}

/* ---- auto / self marked chips, self-marking workspace ---- */
.mode{font-size:11.5px;font-weight:700;border-radius:6px;padding:1px 7px;white-space:nowrap}
.mode.auto{background:var(--good-bg);color:var(--good)} .mode.self{background:#EEF1F5;color:#475569}
.lbl{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:14.5px;margin:4px 0 8px} .lbl small{font-weight:500;color:var(--muted)}
.lbl textarea{width:100%;font:500 15px/1.5 var(--font);border:1.5px solid #CBD5E1;border-radius:10px;padding:10px 12px;resize:vertical;min-height:110px;color:var(--text)}
.lbl textarea[readonly]{background:#F8FAFC}
.selfrow{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:6px 0 4px}
.selfrow label{display:flex;flex-direction:column;gap:4px;font-weight:600;font-size:14px}
.selfrow input{width:110px;height:48px;font:700 22px var(--font);text-align:center;border:1.5px solid #CBD5E1;border-radius:10px;color:var(--text)}
.selfrow .of{padding-bottom:12px;color:var(--muted);font-weight:600}
.selfmsg{color:var(--red);font-weight:600;font-size:14px;margin:6px 0 2px;min-height:1.2em}
.selfsum{font-size:28px;color:var(--brand-d);padding:4px 0 8px}

/* ---- online view: give the paper more room (wider page, taller viewer) ---- */
#view-online .wrap{max-width:1560px}
#view-online .owork{grid-template-columns:minmax(0,1.9fr) minmax(340px,.62fr)}
#view-online .opdf-col{top:150px;height:calc(100vh - 160px);min-height:560px}
@media (max-width:1100px){ #view-online .owork{grid-template-columns:1fr} #view-online .opdf-col{position:relative;top:0;height:80vh} }

/* ---- shared browse pages: books strip, no-sidebar layout, mobile ---- */
.books{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 16px;margin-bottom:14px}
.books b{font-size:15px} .books span{color:var(--muted);font-size:13px} .books div{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.browse.nosb{grid-template-columns:1fr}
.filter-toggle{display:none}
#oResult{scroll-margin-top:190px}
tr.hrow.stale{opacity:.55;cursor:default}
tr.hrow:focus-visible{outline:3px solid var(--brand);outline-offset:-3px}
@media (max-width:900px){
  .browse{grid-template-columns:1fr}
  .filter-toggle{display:inline-flex;align-items:center;gap:8px;justify-self:start}
  .sidebar:not(.open){display:none}
  .sidebar.open{position:static;max-height:none}
  .nav a{padding:9px 9px;font-size:14px} .nav .btn{margin-left:4px}
}
@media (max-width:640px){
  .prow .pmain{flex:1 1 100%} .prow .pact{flex:1 1 100%;margin-left:0}
  .pcell .pact{flex-wrap:wrap}
  .searchbox input{font-size:14px} .tabs{flex-wrap:wrap}
  .tabs button{padding:0 10px}
  table.h th:nth-child(3),table.h td:nth-child(3),table.h th:nth-child(5),table.h td:nth-child(5){display:none}
  table.h td,table.h th{white-space:normal}
}

/* ---- level cards: header, bullet list, aligned buttons ---- */
.levels{grid-template-columns:repeat(auto-fit,minmax(188px,1fr))}
.level{gap:12px;padding:20px 18px}
.level .lhead{display:flex;align-items:center;gap:12px} .level .lhead .ico{margin-bottom:0}
.level .lhead h3{margin:0;font-size:19px;line-height:1.15}
.level .lmeta{margin:-4px 0 0;color:var(--teal);font-weight:700;font-size:13px}
.lbul{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:9px;color:var(--text);font-size:14px;line-height:1.4}
.lbul li{position:relative;padding-left:24px}
.lbul li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;background:var(--teal-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.3 2.3 4.7-4.9' fill='none' stroke='%230F766E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.level .acts{display:grid;grid-template-columns:1fr;gap:8px;margin-top:auto;padding-top:14px}
.level .acts .btn{justify-content:center;width:100%}
/* level cards: every card reserves room for three buttons, so "Past papers" sits on the same line in all of them */
.level .acts{grid-auto-rows:36px;align-content:start;min-height:calc(36px * 3 + 8px * 2 + 14px)}
.level .acts .btn{min-height:36px;height:36px;padding-top:0;padding-bottom:0}

/* ---- language switch (EN / VI) ---- */
.lang{display:inline-flex;background:#EAEFF5;border-radius:999px;padding:3px;gap:2px;margin-left:8px}
.lang button{border:0;background:transparent;border-radius:999px;min-width:40px;min-height:30px;padding:0 10px;font:700 13px var(--font);color:var(--muted);cursor:pointer}
.lang button[aria-pressed=true]{background:var(--brand);color:#fff;box-shadow:0 1px 3px rgba(15,23,42,.18)}
.lang button:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
@media (max-width:880px){ .lang{align-self:flex-start;margin:8px 0 0} }

.nav a{white-space:nowrap}
@media (max-width:1180px){          /* Vietnamese labels are longer: switch to the menu button earlier */
  html[lang=vi] .menu-btn{display:grid;place-items:center}
  html[lang=vi] .nav{display:none;position:absolute;left:0;right:0;top:66px;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;padding:10px 16px 16px;box-shadow:0 12px 20px rgba(15,23,42,.1)}
  html[lang=vi] .nav.open{display:flex} html[lang=vi] .nav .btn{margin:8px 0 0}
  html[lang=vi] #bar{top:70px}
  html[lang=vi] .lang{align-self:flex-start;margin:8px 0 0}
}

.brand-link,.brand-link span,.brand-link small{white-space:nowrap}

/* sign-in dialog */
.auth-dlg{border:1px solid var(--line);border-radius:14px;padding:22px 24px;max-width:380px;width:calc(100% - 32px);box-shadow:0 20px 50px rgba(0,0,0,.2)}
.auth-dlg::backdrop{background:rgba(0,0,0,.4)}
.auth-dlg form{position:relative;display:flex;flex-direction:column;gap:12px}
.auth-dlg h2{margin:0;font-size:20px}
.auth-dlg label{display:flex;flex-direction:column;gap:4px;font-weight:600;font-size:14px}
.auth-dlg input{padding:10px 12px;border:1px solid var(--line);border-radius:9px;font:inherit}
.auth-dlg .auth-note{margin:0;color:var(--muted);font-size:14px}
.auth-dlg .auth-actions{display:flex;gap:8px}
.auth-dlg .auth-actions .btn{flex:1}
.auth-dlg .auth-close{position:absolute;top:-8px;right:-8px;border:0;background:none;font-size:24px;line-height:1;cursor:pointer;color:var(--muted)}
#authMsg{margin:0;min-height:18px;font-size:14px;color:#c0262d}
#authMsg[data-ok="1"]{color:#1a7f37}