/* IELTS Guru — UX fix prototype.
   Colour tokens lifted verbatim from the real product's IeltsTheme.CLASSIC_BLACK_LIGHT
   (gitea flyer/webs-ielts, src/theme/tokens.ts) so this prototype is a like-for-like
   redesign, not a re-brand. */
:root{
  --bg:#FCFCFC; --surface:#FFFFFF; --fg:#0F0F0F; --fg2:#515159; --muted:#69707D;
  --line:#EDEDED; --line2:#E0E0E0;
  --ok:#337C4A; --ok-bg:#E8F5E9; --err:#C21111; --err-bg:#FFEBEE; --info:#2563EB;
  --warn-bg:#FFF8E1; --warn-line:#E9C46A;
  --brand:#0F0F0F; --on-brand:#FFFFFF;
  --r:12px; --r-sm:8px; --control-r:100px;
  --shell:1220px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--fg);
  font:15px/1.55 "Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
h1,h2,h3,h4{margin:0; font-weight:700; letter-spacing:-.01em}
h1{font-size:26px} h2{font-size:19px} h3{font-size:16px}
p{margin:0}
small{font-size:12.5px; color:var(--muted)}

/* ---------- proto chrome (not part of the product) ---------- */
.proto{
  position:sticky; top:0; z-index:80; display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  padding:10px 16px; background:#111; color:#fff; font-size:13px;
}
.proto b{font-weight:700}
.proto .sp{flex:1}
.proto select,.proto button{
  font:inherit; border-radius:var(--control-r); border:1px solid #3a3a3a;
  background:#1d1d1d; color:#fff; padding:6px 12px; cursor:pointer;
}
.proto button.on{background:#fff; color:#111; border-color:#fff}
.proto a{color:#9ec1ff; text-decoration:none}

/* ---------- app shell ---------- */
#app{container-type:inline-size; container-name:app; max-width:var(--shell); margin:0 auto; padding:0 0 60px}
.layout{display:grid; grid-template-columns:248px 1fr; gap:24px; align-items:start}

.side{position:sticky; top:56px; padding:16px 8px; border-right:1px solid var(--line); min-height:70vh}
.brandrow{display:flex; align-items:center; gap:9px; padding:6px 10px 16px}
.brandrow .mk{width:28px;height:28px;border-radius:8px;background:var(--fg);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:13px}
.navgrp{margin:14px 0 6px; padding:0 12px; font-size:11.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); font-weight:700}
.nav{display:flex; flex-direction:column; gap:2px}
.nav a{display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--r-sm);
  text-decoration:none; color:var(--fg2); font-size:14.5px}
.nav a:hover{background:#f4f4f5}
.nav a.on{background:#f4f4f5; color:var(--fg); font-weight:600; box-shadow:inset 2px 0 0 var(--fg)}
.nav a .ic{width:18px; text-align:center; opacity:.75}
.side .upg{margin:16px 10px 0; display:block; text-align:center; text-decoration:none;
  border:1.5px solid var(--fg); border-radius:var(--control-r); padding:10px 12px; font-weight:700; font-size:14px}

.main{padding:20px 16px 0; min-width:0}

/* ---------- trial bar (fixed: one line, Vietnamese, dismissible) ---------- */
.trial{display:flex; align-items:center; gap:12px; background:var(--warn-bg);
  border:1px solid var(--warn-line); border-radius:var(--r-sm); padding:9px 12px; margin-bottom:18px; font-size:13.5px}
.trial .t{flex:1; min-width:0}
.trial b{font-weight:700}
.trial .x{border:0;background:transparent;cursor:pointer;font-size:16px;color:var(--muted);line-height:1}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  border-radius:var(--control-r); padding:11px 20px; font:inherit; font-weight:600; font-size:14.5px;
  border:1px solid var(--line2); background:var(--surface); color:var(--fg); text-decoration:none; min-height:44px}
.btn.pri{background:var(--fg); color:var(--on-brand); border-color:var(--fg)}
.btn.sm{padding:8px 14px; min-height:38px; font-size:13.5px}
.btn.block{width:100%}
.btn{white-space:nowrap; flex:0 0 auto}

/* ---------- cards ---------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px}
.grid{display:grid; gap:14px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}

/* start-here block */
.start{display:flex; gap:18px; align-items:center; background:var(--surface);
  border:1px solid var(--line2); border-radius:var(--r); padding:18px 20px}
.start .txt{flex:1; min-width:0}
.start .est{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); margin-top:6px}

/* skill tiles */
.skill{display:block; text-decoration:none; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:16px; min-width:0}
.skill .nm{font-weight:700; font-size:16px; margin-bottom:2px}
.skill .meta{font-size:12.5px; color:var(--muted)}
.skill .bar{height:5px; background:#f1f1f2; border-radius:99px; margin-top:12px; overflow:hidden}
.skill .bar i{display:block; height:100%; background:var(--fg); border-radius:99px}

/* test cards (fixed: real metadata, no dead thumbnail) */
.tcard{display:flex; flex-direction:column; gap:10px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); padding:14px; min-width:0}
.tcard .top{display:flex; align-items:flex-start; gap:10px}
.tcard .ttl{font-weight:700; font-size:15px; line-height:1.35; flex:1; min-width:0}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{font-size:12px; padding:3px 9px; border-radius:var(--control-r); border:1px solid var(--line2); color:var(--fg2); white-space:nowrap}
.chip.band{border-color:var(--fg); color:var(--fg); font-weight:700}
.chip.done{background:var(--ok-bg); border-color:#bfe0c6; color:var(--ok); font-weight:700}
.chip.pro{background:#f4f4f5; border-color:var(--line2)}
.tcard .foot{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:2px}
.tcard .foot small{flex:1 1 auto; min-width:0; color:var(--muted); font-size:12.5px; line-height:1.4}

/* stat tiles + empty states */
.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px}
.stat .k{font-size:12.5px; color:var(--muted)}
.stat .v{font-size:24px; font-weight:800; margin-top:4px; letter-spacing:-.02em}
.empty{background:var(--surface); border:1px dashed var(--line2); border-radius:var(--r);
  padding:28px 22px; text-align:center}
.empty h3{margin-bottom:6px}
.empty p{color:var(--muted); font-size:14px; max-width:52ch; margin:0 auto 16px}

/* band ladder */
.ladder{display:flex; flex-direction:column; gap:0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface)}
.rung{display:flex; gap:14px; padding:13px 16px; border-bottom:1px solid var(--line)}
.rung:last-child{border-bottom:0}
.rung .b{width:46px; font-weight:800; font-size:17px}
.rung .d{flex:1; min-width:0}
.rung.you{background:#f4f4f5; box-shadow:inset 3px 0 0 var(--fg)}
.rung.target{background:var(--ok-bg); box-shadow:inset 3px 0 0 var(--ok)}
.rung .tag{font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em}
.youbar{display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line2);
  border-radius:var(--r); padding:14px 16px; margin-bottom:14px; position:sticky; top:56px; z-index:5}

/* pricing */
.ptable{width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.ptable th,.ptable td{padding:12px 14px; border-bottom:1px solid var(--line); text-align:left; font-size:14px}
.ptable th{background:#fafafa; font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted)}
.ptable td.c{text-align:center; width:120px}
.plan{border:1px solid var(--line2); border-radius:var(--r); padding:16px; background:var(--surface); position:relative}
.plan.best{border-color:var(--fg); border-width:2px}
.plan .tagbest{position:absolute; top:-11px; left:16px; background:var(--fg); color:#fff;
  font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:var(--control-r)}
.plan .price{font-size:23px; font-weight:800; letter-spacing:-.02em}
.plan .per{font-size:13px; color:var(--muted)}

/* login */
.loginwrap{display:grid; grid-template-columns:1fr 1fr; gap:0; min-height:560px;
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface)}
.loginform{padding:44px 40px; display:flex; flex-direction:column; justify-content:center}
.loginaside{background:#f4f4f5; padding:40px; display:flex; flex-direction:column; justify-content:center; gap:14px; border-left:1px solid var(--line)}
.field{margin-bottom:14px}
.field label{display:block; font-size:13px; font-weight:600; margin-bottom:6px}
.field input{width:100%; padding:12px 16px; border:1px solid var(--line2); border-radius:var(--control-r);
  font:inherit; min-height:46px; background:var(--surface)}
.legal{font-size:12px; color:var(--muted); margin-top:14px; line-height:1.5}
.legal a{text-decoration:underline}

/* filters */
.filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px}
.fbtn{border:1px solid var(--line2); background:var(--surface); border-radius:var(--control-r);
  padding:8px 14px; font:inherit; font-size:13.5px; cursor:pointer; min-height:40px; white-space:nowrap}
.filterbar-m{display:none}

/* annotation of what changed */
.note{border-left:3px solid var(--fg); background:#fafafa; padding:12px 14px; border-radius:0 var(--r-sm) var(--r-sm) 0;
  margin:0 0 18px; font-size:13.5px; color:var(--fg2)}
.note b{color:var(--fg)}
.note ul{margin:6px 0 0; padding-left:18px}
.note li{margin:3px 0}

.sectitle{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:22px 0 12px}
.sectitle .more{font-size:13.5px; color:var(--muted); text-decoration:none}
.tabs{display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom:16px}
.tabs button{border:0; background:transparent; font:inherit; font-size:14.5px; padding:10px 14px;
  cursor:pointer; color:var(--muted); border-bottom:2px solid transparent; min-height:44px}
.tabs button.on{color:var(--fg); font-weight:700; border-bottom-color:var(--fg)}

/* bottom tab bar — mobile only */
.tabbar{display:none}

/* ============ MOBILE: the fix ============ */
@container app (max-width:860px){
  .layout{grid-template-columns:1fr; gap:0}
  .side{display:none}
  .main{padding:14px 16px 88px}
  .g4,.g3,.g2{grid-template-columns:1fr}
  .cardgrid{grid-template-columns:1fr}
  .loginwrap{grid-template-columns:1fr; min-height:0}
  .loginaside{display:none}
  .loginform{padding:26px 20px}
  h1{font-size:21px}
  .filters{display:none}
  .filterbar-m{display:flex; gap:8px; margin-bottom:14px}
  .filterbar-m .fbtn{flex:1}
  .mobhead{display:flex !important}
  .tabbar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:var(--surface); border-top:1px solid var(--line2);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .tabbar a{flex:1; text-decoration:none; color:var(--muted); display:flex; flex-direction:column;
    align-items:center; gap:3px; font-size:11px; padding:6px 2px; min-height:52px; justify-content:center}
  .tabbar a.on{color:var(--fg); font-weight:700}
  .tabbar .ic{font-size:17px; line-height:1}
  .start{flex-direction:column; align-items:stretch; gap:12px}
  .start .btn{width:100%}
  .tcard .foot{flex-wrap:wrap}
  .tcard .foot .btn{width:100%}
  .youbar{position:static}
  .ptable th,.ptable td{padding:10px; font-size:13px}
  .ptable td.c{width:74px}
}
.mobhead{display:none; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line);
  position:sticky; top:0; background:var(--bg); z-index:40}
.mobhead .mk{width:26px;height:26px;border-radius:7px;background:var(--fg);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:12px}
.mobhead .sp{flex:1}
.mobhead button{border:1px solid var(--line2); background:var(--surface); border-radius:var(--control-r);
  min-width:44px; min-height:40px; cursor:pointer; font-size:16px}

/* phone frame */
body.phone #app{width:392px; max-width:392px; margin:22px auto; border:10px solid #111;
  border-radius:38px; overflow:hidden; background:var(--bg); height:820px; overflow-y:auto}
body.phone .tabbar{position:sticky}