/* ===== android-prep — theme "Android Studio at home" =====
   Palette: IntelliJ New UI (nền IDE) + Android green #3DDC84 chính hãng.
   Type:    JetBrains Mono (font mặc định của Android Studio, self-host, có glyph VN)
            cho heading/nav/số liệu; body = Roboto-first sans.
   Signature: "ngôn ngữ Logcat" — grade I/W/E, toast là dòng log, h2 là // comment. */

/* --- JetBrains Mono (OFL, vendored — CSP self) --- */
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(/static/vendor/fonts/jetbrains-mono-vietnamese-400-normal.woff2) format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(/static/vendor/fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(/static/vendor/fonts/jetbrains-mono-vietnamese-500-normal.woff2) format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(/static/vendor/fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;
  src:url(/static/vendor/fonts/jetbrains-mono-vietnamese-700-normal.woff2) format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;
  src:url(/static/vendor/fonts/jetbrains-mono-latin-700-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* --- tokens: MẶC ĐỊNH = dark (IntelliJ New UI Dark); [data-theme=light] = IntelliJ Light --- */
:root{
  --bg:#1e1f22; --fg:#dfe1e5; --muted:#9da0a8; --line:#393b40; --card:#2b2d30;
  --accent:#3ddc84; --accent-fill:#3ddc84; --on-accent:#073042; --info:#56a8f5;
  --ok:#3ddc84; --warn:#f2c55c; --bad:#ff7b72;
  --okbg:#16281e; --warnbg:#2a2517; --badbg:#2c1b1a;
  --shadow:0 1px 3px rgba(0,0,0,.45);
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  color-scheme:dark;
}
:root[data-theme=light]{
  --bg:#ffffff; --fg:#1d2126; --muted:#6c707e; --line:#ebecf0; --card:#f7f8fa;
  --accent:#12874c;            /* Android green, đậm lại cho đủ contrast trên nền sáng */
  --accent-fill:#3ddc84;       /* green chính hãng cho nút filled */
  --on-accent:#073042;         /* navy Android brand — chữ trên nền green */
  --info:#3574f0;
  --ok:#12874c; --warn:#a56a00; --bad:#d5423e;
  --okbg:#e6f6ec; --warnbg:#fff3dc; --badbg:#fde9e8;
  --shadow:0 1px 3px rgba(0,0,0,.08);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.65 var(--sans)}
::selection{background:color-mix(in srgb,var(--accent-fill) 30%,transparent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* scrollbar kiểu IDE */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--muted) 38%,transparent);border-radius:5px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--muted) 60%,transparent)}
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--muted) 45%,transparent) transparent}

/* nav — thanh tab editor của IDE */
.nav{position:sticky;top:0;z-index:20;display:flex;gap:2px;align-items:stretch;
  padding:0 16px;background:var(--bg);border-bottom:1px solid var(--line);flex-wrap:wrap}
.nav .brand{display:flex;align-items:center;gap:7px;font:700 14px/1 var(--mono);margin-right:14px;
  padding:12px 0;color:var(--fg);text-decoration:none;white-space:nowrap}
.nav .brand svg{flex:0 0 auto}
.nav .brand::after{content:"▊";color:var(--accent);font-weight:400;animation:caret 1.1s steps(2,start) infinite}
@keyframes caret{to{visibility:hidden}}
.nav a.tab{display:flex;align-items:center;color:var(--muted);text-decoration:none;padding:12px 13px;
  font:500 13px/1 var(--mono);white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px}
.nav a.tab:hover{background:var(--card);color:var(--fg)}
.nav a.tab.active{color:var(--fg);border-bottom-color:var(--accent-fill)}
.nav .sp{flex:1}
.nav .themebtn{cursor:pointer;border:1px solid var(--line);background:var(--card);color:var(--muted);
  border-radius:6px;padding:5px 10px;font:12px var(--mono);align-self:center}

main{max-width:940px;margin:0 auto;padding:22px 18px 90px}
h1{font:700 1.5em/1.3 var(--mono);letter-spacing:-.02em;margin:.2em 0 .5em}
h2{font:700 1.22em/1.35 var(--mono);letter-spacing:-.01em;border-bottom:1px solid var(--line);padding-bottom:.25em;margin:1.6em 0 .7em}
h2::before{content:"// ";color:var(--muted);font-weight:400}
h3{font:700 1.05em/1.4 var(--mono);margin:1.3em 0 .5em}
a{color:var(--accent)}
code{background:var(--card);border-radius:6px;padding:.12em .4em;font:.86em var(--mono);overflow-wrap:anywhere}
/* ===== Code blocks — OneDark "editor panel" (Chroma classes, self-hosted) ===== */
.codeblock{margin:1.15em 0;border-radius:10px;overflow:hidden;border:1px solid #14161a;
  box-shadow:0 3px 14px rgba(0,0,0,.28)}
.codeblock-lang{display:flex;align-items:center;gap:7px;
  font:600 .66rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:#8b93a3;background:#21252b;padding:8px 14px;border-bottom:1px solid #14161a}
.codeblock-lang::before{content:"";width:7px;height:7px;border-radius:2px;background:#3DDC84;flex:none}
pre.chroma{margin:0;padding:15px 18px;overflow-x:auto;border:0;border-radius:0;
  background:#282c34;color:#abb2bf;font:.85rem/1.65 var(--mono);tab-size:4;-moz-tab-size:4}
pre.chroma code{background:none;padding:0;font-size:1em;color:inherit;overflow-wrap:normal}
.chroma .line{display:inline}
/* comments */
.chroma .c,.chroma .ch,.chroma .cm,.chroma .c1,.chroma .cs{color:#7f848e;font-style:italic}
.chroma .cp,.chroma .cpf{color:#7f848e}
/* keywords */
.chroma .k,.chroma .kn,.chroma .kp,.chroma .kr,.chroma .kd{color:#c678dd}
.chroma .kc{color:#d19a66}                        /* true/false/null */
.chroma .kt{color:#e5c07b}                        /* built-in types */
/* names */
.chroma .n,.chroma .nn,.chroma .nx,.chroma .py,.chroma .nl{color:#abb2bf}
.chroma .nf,.chroma .fm{color:#61afef}            /* function */
.chroma .nc{color:#e5c07b}                        /* class / type */
.chroma .nd{color:#61afef}                        /* annotation @Composable */
.chroma .nb,.chroma .bp{color:#56b6c2}            /* builtin */
.chroma .na,.chroma .no{color:#d19a66}            /* attribute / constant */
.chroma .nt{color:#e06c75}                        /* tag */
.chroma .nv,.chroma .vc,.chroma .vg,.chroma .vi{color:#e06c75}
.chroma .ne,.chroma .err{color:#e06c75}
/* strings */
.chroma .s,.chroma .sa,.chroma .sb,.chroma .sc,.chroma .dl,.chroma .sd,.chroma .s2,.chroma .sh,.chroma .sx,.chroma .s1,.chroma .ss,.chroma .sp{color:#98c379}
.chroma .se,.chroma .si,.chroma .sr{color:#56b6c2} /* escape / interpolation / regex */
/* numbers */
.chroma .m,.chroma .mb,.chroma .mf,.chroma .mh,.chroma .mi,.chroma .il,.chroma .mo{color:#d19a66}
/* operators / punctuation */
.chroma .o,.chroma .ow{color:#56b6c2}
.chroma .p{color:#abb2bf}
/* generic / diff */
.chroma .gd{color:#e06c75}.chroma .gi{color:#98c379}
.chroma .gh{color:#61afef;font-weight:700}.chroma .gu{color:#56b6c2}
.chroma .ge{font-style:italic}.chroma .gs{font-weight:700}
/* fallback: fenced block Chroma couldn't lex → same panel look */
pre:not(.chroma){background:#282c34;color:#abb2bf;border:1px solid #14161a;border-radius:10px;
  padding:15px 18px;overflow-x:auto;font:.85rem/1.65 var(--mono);margin:1.15em 0}
pre:not(.chroma) code{background:none;padding:0;font-size:1em;color:inherit;overflow-wrap:normal}
blockquote{margin:1em 0;padding:.55em 1em;border-left:4px solid var(--accent);background:var(--card);border-radius:0 8px 8px 0}
blockquote p{margin:.35em 0}
.table-wrap{overflow-x:auto;margin:1em 0}
table{border-collapse:collapse;width:100%;font-size:.95em}
th,td{border:1px solid var(--line);padding:8px 12px;text-align:left;vertical-align:top}
th{background:var(--card)}
hr{border:none;border-top:2px solid var(--line);margin:2em 0}
input[type=checkbox]{transform:scale(1.25);margin-right:8px;accent-color:var(--accent);cursor:pointer}
li:has(>input[type=checkbox]){list-style:none;margin-left:-1.2em}

/* cards / grid */
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));margin:18px 0}
.card{display:block;border:1px solid var(--line);border-radius:10px;padding:16px;background:var(--bg);
  text-decoration:none;color:var(--fg);box-shadow:var(--shadow);transition:border-color .15s}
.card:hover{border-color:var(--accent)}
.card .t{font-weight:700;margin-bottom:4px}
.card .d{color:var(--muted);font-size:13px}
.card .tag{display:inline-block;font:10.5px var(--mono);padding:1px 8px;border-radius:20px;background:var(--card);color:var(--muted);margin-top:8px;margin-right:4px}

.stat-row{display:flex;gap:14px;flex-wrap:wrap;margin:16px 0}
.stat{flex:1;min-width:130px;border:1px solid var(--line);border-radius:10px;padding:14px 16px;background:var(--card)}
.stat .n{font:800 1.8em/1 var(--mono)}
.stat .l{color:var(--muted);font:12px var(--mono);margin-top:5px}
.bar{height:8px;border-radius:6px;background:var(--line);overflow:hidden;margin-top:8px}
.bar>i{display:block;height:100%;background:var(--ok)}

/* controls — nút kiểu Material, chữ mono */
.btn{cursor:pointer;border:1px solid var(--line);background:var(--card);color:var(--fg);
  border-radius:6px;padding:10px 16px;font:600 14px var(--mono);position:relative;overflow:hidden;
  transition:border-color .12s,filter .12s}
.btn:hover{border-color:var(--accent)}
.btn:active{filter:brightness(.92)}
.btn.primary{background:var(--accent-fill);color:var(--on-accent);border-color:transparent}
.btn.primary:hover{filter:brightness(1.06)}
.btn.ghost{background:transparent}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.pill{cursor:pointer;user-select:none;border:1px solid var(--line);background:var(--bg);border-radius:20px;
  padding:6px 14px;font:12.5px var(--mono);color:var(--fg)}
.pill.on{background:var(--accent-fill);color:var(--on-accent);border-color:transparent;font-weight:600}
.pills{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
select,input[type=number]{background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:14px;max-width:100%}
label.fld{display:block;margin:14px 0 6px;font-weight:600;font-size:14px}

/* flashcard / question */
.qcard{border:1px solid var(--line);border-radius:12px;padding:22px 22px 18px;background:var(--bg);box-shadow:var(--shadow);margin:16px 0}
.qmeta{display:flex;gap:8px;flex-wrap:wrap;font:11.5px var(--mono);color:var(--muted);margin-bottom:10px}
.qmeta .b{background:var(--card);padding:2px 9px;border-radius:20px}
.qtext{font-size:1.22em;font-weight:600;line-height:1.5}
.answer{margin-top:16px;padding-top:16px;border-top:1px dashed var(--line);line-height:1.7}
.answer.hidden{display:none}
.progresshint{color:var(--muted);font-size:13px;text-align:center;margin:8px 0}
.grade-row{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.grade{flex:1;min-width:90px;cursor:pointer;border-radius:6px;padding:10px;text-align:center;
  font:700 14px var(--mono);border:1px solid var(--line);background:var(--card)}
/* signature: tự chấm = mức độ Logcat — I(nfo)/W(arn)/E(rror) */
.grade::before{font-weight:700;opacity:.85;margin-right:6px}
.grade.g::before{content:"I/"} .grade.y::before{content:"W/"} .grade.r::before{content:"E/"}
.grade.g{color:var(--ok)} .grade.y{color:var(--warn)} .grade.r{color:var(--bad)}
.grade:hover{border-color:currentColor;background:color-mix(in srgb,currentColor 8%,var(--card))}
.result-item{border-left:4px solid var(--line);padding:8px 12px;margin:8px 0;background:var(--card);border-radius:0 8px 8px 0}
.result-item.y{border-color:var(--warn)} .result-item.r{border-color:var(--bad)}
.empty{color:var(--muted);text-align:center;padding:40px 0}
.foot{margin-top:50px;padding-top:14px;border-top:1px solid var(--line);color:var(--muted);font-size:.85em}
.kbd{font:12px var(--mono);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 6px;background:var(--card)}
mark{background:var(--warnbg)}

/* ===== gamification / polish ===== */
.today-panel{display:flex;gap:20px;align-items:center;border:1px solid var(--line);border-radius:16px;
  padding:18px 22px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 8%,transparent),transparent);margin:18px 0}
.ring{flex:0 0 auto;width:104px;height:104px;position:relative}
.ring svg{transform:rotate(-90deg)}
.ring .rlabel{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.ring .rnum{font:800 1.45em var(--mono)}
.ring .rof{font:.68em var(--mono);color:var(--muted)}
.today-info{flex:1;min-width:0}
.today-title{font-weight:700;font-size:1.05em}
.today-sub{color:var(--muted);font-size:.92em;margin:2px 0 8px}
.today-chip{display:inline-block;font:12px var(--mono);background:var(--card);border:1px solid var(--line);border-radius:20px;padding:3px 12px;margin-bottom:10px}
.today-chip.hot{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,var(--line))}
.today-panel .btn{padding:8px 14px;font-size:14px}
.today-panel.done{border-color:color-mix(in srgb,var(--ok) 55%,var(--line))}

/* heatmap */
.heat{display:flex;gap:3px;overflow-x:auto;padding:6px 0}
.heat-col{display:flex;flex-direction:column;gap:3px}
.heat-cell{width:13px;height:13px;border-radius:3px;background:var(--line);opacity:.55}
.heat-cell.l1{background:color-mix(in srgb,var(--ok) 30%,var(--card));opacity:1}
.heat-cell.l2{background:color-mix(in srgb,var(--ok) 55%,transparent);opacity:1}
.heat-cell.l3{background:color-mix(in srgb,var(--ok) 78%,transparent);opacity:1}
.heat-cell.l4{background:var(--ok);opacity:1}
.heat-cell.today{outline:2px solid var(--accent);outline-offset:1px}
.heat-legend{display:flex;align-items:center;gap:6px;color:var(--muted);font:11.5px var(--mono);margin-top:6px}
.heat-legend .heat-cell{width:11px;height:11px}

/* mastery bars */
.mrow{margin:9px 0}
.mrow .mhead{display:flex;justify-content:space-between;font-size:.9em;margin-bottom:4px;gap:8px}
.mrow .mhead a{text-decoration:none;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrow .mhead a:hover{color:var(--accent)}
.mrow .mpct{color:var(--muted);white-space:nowrap}
.mbar{display:flex;height:12px;border-radius:6px;overflow:hidden;background:var(--line)}
.mbar>span{display:block;height:100%}
.mbar .sg{background:var(--ok)} .mbar .sy{background:var(--warn)} .mbar .sr{background:var(--bad)}
.mbar .su{background:color-mix(in srgb,var(--muted) 22%,transparent)}

/* flashcard reveal animation */
.answer{overflow:hidden;max-height:0;opacity:0;transform:translateY(-6px);
  transition:max-height .35s ease,opacity .3s ease,transform .3s ease;border-top:0 dashed var(--line);padding-top:0;margin-top:0}
.answer.show{max-height:3000px;opacity:1;transform:none;border-top:1px dashed var(--line);padding-top:16px;margin-top:16px}
.qcard.revealed{animation:pulse .32s ease}
@keyframes pulse{0%{transform:scale(1)}45%{transform:scale(1.012)}100%{transform:scale(1)}}
.grade{transition:transform .1s ease,border-color .15s ease}
.grade:active{transform:scale(.96)}

/* toast — một dòng Logcat */
#toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);opacity:0;
  background:#1b1c1f;color:#dfe1e5;border:1px solid #393b40;border-left:3px solid var(--accent-fill);
  padding:11px 18px;border-radius:8px;font:600 13px var(--mono);
  box-shadow:0 6px 24px rgba(0,0,0,.35);z-index:60;transition:opacity .25s,transform .25s;pointer-events:none;max-width:88vw;text-align:left}
#toast::before{content:"I/AndroidPrep: ";color:var(--accent-fill);font-weight:700}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* confetti canvas */
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:55}
@media (prefers-reduced-motion: reduce){
  .answer,.qcard.revealed,.grade,#toast,.nav .brand::after{transition:none;animation:none}
}

/* ===== CV manager ===== */
.cv-hint{color:var(--muted);font-size:.92em}
.cv-list{display:flex;flex-direction:column;gap:10px;margin:16px 0}
.cv-item{border:1px solid var(--line);border-radius:12px;padding:12px 16px;background:var(--card);
  display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cv-name{flex:1;min-width:170px;font-weight:700}
.cv-name a{color:var(--fg);text-decoration:none}
.cv-name a:hover{color:var(--accent)}
.cv-meta{color:var(--muted);font:12px var(--mono);margin-top:2px}
.cv-actions{display:flex;gap:8px;flex-wrap:wrap}
.cv-actions .btn{padding:6px 12px;font-size:13px;text-decoration:none}
.cv-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 10px}
.cv-toolbar input{flex:1;min-width:150px;max-width:420px;background:var(--bg);color:var(--fg);border:1px solid var(--line);
  border-radius:8px;padding:8px 12px;font-size:15px;font-weight:600}
.cv-toolbar .btn{text-decoration:none;padding:8px 14px;font-size:14px}
.cv-fs{display:inline-flex;align-items:center;gap:3px}
.cv-fs .btn{padding:8px 10px;min-width:38px;text-align:center;font:600 14px var(--mono)}
#cv-fs-val{min-width:56px;font-variant-numeric:tabular-nums}

/* Form logout là flex-child của .nav (align-items:stretch nên cao hết nav). Nút bên
   trong phải tự căn giữa dọc, nếu không sẽ dính lên đỉnh → lệch lên so với nút Giao diện. */
.logout-form{display:flex;align-items:center;margin:0}
/* ===== Trang đăng nhập (form login thay Basic Auth) ===== */
.login-wrap{min-height:100dvh;display:grid;place-items:center;padding:24px;max-width:none;margin:0}
.login-card{width:100%;max-width:380px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:30px 28px;box-shadow:0 12px 44px rgba(0,0,0,.35);display:flex;flex-direction:column}
.login-brand{display:flex;align-items:center;gap:9px;font:700 19px var(--mono);color:var(--fg)}
.login-caret{color:var(--accent);animation:caret 1.1s steps(2,start) infinite}
.login-sub{color:var(--muted);font:13px var(--mono);margin:6px 0 22px}
.login-label{font:600 12.5px var(--mono);color:var(--muted);letter-spacing:.03em;margin:14px 0 6px}
.login-input{width:100%;box-sizing:border-box;background:var(--bg);color:var(--fg);
  border:1px solid var(--line);border-radius:9px;padding:11px 13px;font:15px var(--mono)}
.login-input:focus{outline:2px solid var(--accent-fill);outline-offset:1px;border-color:transparent}
.login-btn{margin-top:22px;padding:12px;border:0;border-radius:9px;background:var(--accent-fill);
  color:var(--on-accent);font:700 15px var(--mono);cursor:pointer;transition:filter .12s}
.login-btn:hover{filter:brightness(1.06)}
.login-err{margin:14px 0 0;padding:9px 12px;border-radius:8px;border-left:3px solid var(--bad);
  background:color-mix(in srgb,var(--bad) 12%,transparent);color:var(--bad);font:12.5px var(--mono)}
.login-err::before{content:"E/ ";font-weight:700}
@media (prefers-reduced-motion:reduce){.login-caret{animation:none}}
.cv-status{color:var(--muted);font:12.5px var(--mono);min-width:70px}
.cv-status.dirty{color:var(--warn)}
.cv-tip{color:var(--muted);font-size:12.5px;margin-left:auto}
.cv-split{display:grid;grid-template-columns:minmax(380px,46%) 1fr;gap:12px;min-height:0}
/* chế độ mặc định: chỉ preview (sửa thẳng WYSIWYG), source bật qua nút </>  */
.cv-split.nosrc{grid-template-columns:1fr}
.cv-split.nosrc .CodeMirror,.cv-split.nosrc #cv-src{display:none}
#cv-togglesrc.on{background:var(--accent);color:#fff;border-color:var(--accent)}
#cv-src{width:100%;height:100%;resize:none;background:var(--card);color:var(--fg);border:1px solid var(--line);
  border-radius:10px;padding:12px;font:12.5px/1.5 var(--mono);
  white-space:pre;overflow:auto;-webkit-text-size-adjust:100%}
.cv-split .CodeMirror{height:100%;min-height:0;border:1px solid var(--line);border-radius:10px;
  font:12.5px/1.5 var(--mono)}
#cv-preview{width:100%;height:100%;border:1px solid var(--line);border-radius:10px;background:#e9e9ec}
/* trang editor = full viewport, KHÔNG scroll ngoài — chỉ scroll trong từng pane (desktop) */
@media (min-width:901px){
  body:has(.cv-split){height:100vh;overflow:hidden;display:flex;flex-direction:column}
  body:has(.cv-split) .nav{flex:0 0 auto}
  body:has(.cv-split) main{flex:1;min-height:0;max-width:none;width:100%;margin:0;
    padding:12px 14px 14px;display:flex;flex-direction:column}
  body:has(.cv-split) .cv-split{flex:1}
  body:has(.cv-split) .foot{display:none}
}
body[data-page=cv]:not(:has(.cv-split)) main{max-width:1500px} /* CHỈ trang danh sách CV — editor phải full màn (không thì đè max-width:none của rule trên do cùng specificity) */
@media (max-width:900px){
  .cv-split{grid-template-columns:1fr;height:auto}
  #cv-src,.cv-split .CodeMirror{height:44vh;font-size:16px} /* 16px chống iOS zoom */
  #cv-preview{height:74vh}
  .cv-tip{display:none}
}

/* ===== mobile / iPhone ===== */
.btn,.pill,.grade,.tab,.themebtn,.card{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
@media (max-width:600px){
  main{padding:16px 12px 70px}
  h1{font-size:1.42em}
  h2{font-size:1.22em}
  /* Header gọn 2 dòng: bỏ spacer đẩy-phải + thu 2 nút tiện ích thành icon */
  .nav{padding:6px 10px;gap:1px 4px}
  .nav .brand{margin-right:6px;font-size:13px}
  .nav a.tab{padding:6px 7px;font-size:12px}
  .nav .sp{display:none}                 /* bỏ khoảng đẩy-phải → icon theo sát tab */
  .nav .lbl{display:none}                 /* 'Giao diện'/'Thoát' → chỉ còn ◐ / ⎋ */
  .nav .themebtn{padding:6px 9px;font-size:14px;line-height:1}
  .qcard{padding:16px 14px 14px}
  .qtext{font-size:1.12em}
  .today-panel{flex-wrap:wrap;gap:14px;padding:14px 16px}
  .today-panel .ring{width:88px;height:88px}
  .today-panel .ring svg{width:88px;height:88px}
  th,td{padding:6px 8px}
  table{font-size:.88em}
  /* iOS auto-zoom khi focus input font < 16px — ép 16px trên mobile */
  select,input[type=number]{font-size:16px}
  .stat .n{font-size:1.55em}
}
/* iPhone tai thỏ: né safe area (cần viewport-fit=cover) */
@supports (padding: max(0px)){
  .nav{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
  main{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
  #toast{bottom:max(28px,calc(env(safe-area-inset-bottom) + 14px))}
}

/* --- tab "Ôn nhanh": mục lục dính bên trái + nội dung một trang dài --- */
body[data-page="quickref"] main,
body[data-page="roadmap"] main,
body[data-page="hri"] main{max-width:1400px}
/* Lộ trình: mục lục ngắn hơn Ôn nhanh -> thu hẹp cột trái, nhường chỗ cho chữ */
body[data-page="roadmap"] .qr,
body[data-page="hri"] .qr{grid-template-columns:260px minmax(0,1fr);gap:22px}
.qr{display:grid;grid-template-columns:266px minmax(0,1fr);gap:30px;align-items:start}
.qr-toc{position:sticky;top:56px;max-height:calc(100vh - 74px);display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:10px;background:var(--card);overflow:hidden}
.qr-search{padding:8px;border-bottom:1px solid var(--line)}
.qr-search input{width:100%;box-sizing:border-box;background:var(--bg);color:var(--fg);
  border:1px solid var(--line);border-radius:7px;padding:6px 9px;font:12px var(--mono)}
.qr-toc nav{overflow-y:auto;padding:6px 4px 10px}
.qr-toc a{display:block;color:var(--muted);text-decoration:none;font:12px/1.4 var(--mono);
  padding:4px 9px;border-left:2px solid transparent;overflow-wrap:anywhere}
.qr-toc a:hover{color:var(--fg);background:var(--bg)}
.qr-toc a.lv3{padding-left:22px;font-size:11.5px;opacity:.85}
.qr-toc a.on{color:var(--fg);border-left-color:var(--accent-fill);background:var(--bg)}
.qr-toc a.hide{display:none}
/* Ẩn mục lục: lưới thu về một cột, phần chữ chiếm trọn bề ngang.
   Trang HRI hơn trăm đầu mục nên mặc định đóng (xử lý ở app.js). */
body[data-page="roadmap"] .qr.toc-off,
body[data-page="hri"] .qr.toc-off,
.qr.toc-off{grid-template-columns:minmax(0,1fr)}
.qr.toc-off .qr-toc{display:none}
.toc-toggle{position:fixed;right:20px;bottom:66px;z-index:15;
  padding:7px 12px;border-radius:16px;cursor:pointer;
  background:var(--card);color:var(--muted);border:1px solid var(--line);
  font:12px/1 var(--mono)}
.toc-toggle:hover{color:var(--fg);border-color:var(--accent-fill)}
.qr-body{min-width:0}
.qr-body h2{scroll-margin-top:64px;margin-top:2.1em}
.qr-body h3{scroll-margin-top:64px}
.qr-top{position:fixed;right:20px;bottom:20px;z-index:15;width:38px;height:38px;border-radius:50%;
  display:none;align-items:center;justify-content:center;text-decoration:none;
  background:var(--card);border:1px solid var(--line);color:var(--fg);font:16px var(--mono)}
.qr-top.on{display:flex}
@media(max-width:900px){
  .qr,
  body[data-page="roadmap"] .qr,
  body[data-page="hri"] .qr{grid-template-columns:1fr;gap:14px}
  .qr-toc{position:static;max-height:300px}
}

/* ===== Sơ đồ mermaid: bấm để phóng to ===== */
pre.mermaid{position:relative;cursor:zoom-in}
pre.mermaid::after{content:"⤢ phóng to";position:absolute;top:8px;right:8px;
  font:600 .68rem/1 var(--mono);letter-spacing:.04em;padding:5px 9px;border-radius:7px;
  background:var(--card);color:var(--muted);border:1px solid var(--line);
  opacity:0;transition:opacity .15s;pointer-events:none}
pre.mermaid:hover::after,pre.mermaid:focus-visible::after{opacity:.95}

.mmd-box{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.9);display:none}
.mmd-box.open{display:flex;flex-direction:column}
.mmd-bar{display:flex;gap:8px;align-items:center;padding:10px 14px;
  background:rgba(0,0,0,.55);border-bottom:1px solid rgba(255,255,255,.12)}
.mmd-bar button{font:600 .8rem/1 var(--mono);padding:7px 12px;border-radius:8px;cursor:pointer;
  background:rgba(255,255,255,.1);color:#e8edf4;border:1px solid rgba(255,255,255,.18)}
.mmd-bar button:hover{background:rgba(255,255,255,.2)}
.mmd-bar .mmd-hint{margin-left:auto;color:#9aa4b2;font:.72rem/1 var(--mono)}
.mmd-stage{flex:1;overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:grab}
.mmd-stage.drag{cursor:grabbing}
.mmd-stage svg{max-width:none!important;max-height:none!important;
  width:auto!important;height:auto!important;transform-origin:center center}
@media (max-width:640px){.mmd-bar .mmd-hint{display:none}}


/* ===== Lộ trình học ===== */
.road-progress{position:sticky;top:56px;z-index:5;margin:0 0 14px;padding:9px 14px;
  border:1px solid var(--line);border-radius:9px;background:var(--card);
  font:600 .88rem/1 var(--mono);color:var(--accent)}
.road-done{opacity:.5;text-decoration:line-through}