@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --bg:#FFFBEB; --surface:#FFFFFF; --ink:#1C1917; --ink-dim:#57534E;
  --line:#E7E0CC; --accent:#B45309; --accent-ink:#FFFFFF;
  --gold:#92400E; --good:#15803D; --danger:#B91C1C; --chip:#F5EFD8; --warn:#A16207;
  --font-display:'Fraunces',Georgia,serif; --font-body:'IBM Plex Sans',system-ui,sans-serif; --font-mono:'IBM Plex Mono',monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#1A1612; --surface:#241F19; --ink:#F5F0E6; --ink-dim:#BDB3A1;
    --line:#3A3228; --accent:#F0A63A; --accent-ink:#1A1612;
    --gold:#E7B86A; --good:#5BC27D; --danger:#F08A7A; --chip:#2E271F; --warn:#E3B341;
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); line-height:1.55}
h1,h2,h3{font-family:var(--font-display); margin:0}
a{color:var(--accent)}
h1,h2,h3,h4{letter-spacing:-0.01em}
.wrap{max-width:960px; margin:0 auto; padding:0 16px}
button{font-family:var(--font-body); cursor:pointer}
:focus-visible{outline:3px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset:2px}
.btn{min-height:44px}
input{font-family:var(--font-body)}

/* ---- Auth screen ---- */
.auth-screen{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px}
.auth-card{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:32px; max-width:380px; width:100%}
.auth-card h1{font-size:24px; margin-bottom:6px}
.auth-card .sub{color:var(--ink-dim); font-size:14px; margin-bottom:22px}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
.field label{font-size:12.5px; font-weight:600; color:var(--ink-dim)}
.field input{padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--ink); font-size:14px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; background:var(--accent); color:var(--accent-ink); border:none; border-radius:8px; padding:10px 16px; font-size:14px; font-weight:600; width:100%}
.btn.ghost{background:transparent; color:var(--accent); border:1px solid var(--line)}
.switch-link{text-align:center; margin-top:14px; font-size:13px; color:var(--ink-dim)}
.switch-link button{background:none; border:none; color:var(--accent); font-weight:600; font-size:13px; padding:0}
.error-msg{background:color-mix(in srgb, var(--danger) 15%, transparent); color:var(--danger); border-radius:8px; padding:8px 10px; font-size:13px; margin-bottom:12px}

/* ---- App shell ---- */
header.topbar{border-bottom:1px solid var(--line); padding:14px 0}
.topbar-row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.brand{font-family:var(--font-display); font-size:18px; font-weight:600}
.who{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-dim)}
.who button{background:transparent; border:1px solid var(--line); border-radius:8px; padding:6px 10px; font-size:12.5px; color:var(--ink)}
nav.tabs{display:flex; gap:4px; overflow-x:auto; padding:10px 0; border-bottom:1px solid var(--line)}
nav.tabs button{font-size:14px; font-weight:600; color:var(--ink-dim); background:transparent; border:none; padding:8px 14px; border-radius:8px; white-space:nowrap}
nav.tabs button.active{background:var(--accent); color:var(--accent-ink)}
nav.tabs button{min-height:44px}
main{padding:24px 0 60px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px; margin-bottom:16px}
.section-title{font-size:20px; font-weight:600; margin-bottom:4px}
.section-desc{color:var(--ink-dim); font-size:14px; margin-bottom:16px}

/* ---- Roadmap ---- */
.phase{display:grid; grid-template-columns:36px 1fr; gap:14px; margin-bottom:4px}
.phase .rail{display:flex; flex-direction:column; align-items:center}
.phase .dot{width:30px; height:30px; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:600; font-size:12px; flex:none}
.phase .stem{width:2px; flex:1; background:var(--line); margin-top:4px}
.phase:last-child .stem{display:none}
.phase-body{padding-bottom:26px}
.phase-month{font-family:var(--font-mono); font-size:12px; color:var(--ink-dim)}
.phase-title{font-size:16px; font-weight:600; margin:2px 0 8px}
.chip{background:var(--chip); border-radius:999px; padding:4px 10px; font-size:12px; color:var(--ink-dim); margin-right:6px; display:inline-block}
.phase-detail{font-size:13.5px; color:var(--ink-dim)}

/* ---- Progress / checklist ---- */
.progress-row{display:flex; align-items:center; gap:10px; margin-bottom:12px}
.progress-row .plabel{font-size:13px; font-weight:600; min-width:120px}
.progress-track{flex:1; height:8px; background:var(--chip); border-radius:999px; overflow:hidden}
.progress-fill{height:100%; background:var(--good); border-radius:999px}
.progress-pct{font-family:var(--font-mono); font-size:12.5px; color:var(--ink-dim); min-width:36px; text-align:right}
.check-list{display:grid; gap:8px; margin-top:8px}
.check-item{display:flex; align-items:flex-start; gap:10px; font-size:13.5px}
.check-item input{margin-top:3px; width:16px; height:16px; accent-color:var(--good)}
.check-item.done span{color:var(--ink-dim); text-decoration:line-through}
details{margin-bottom:8px}
details summary{cursor:pointer; font-weight:600; font-size:14px; padding:4px 0}

/* ---- Resources ---- */
.res-group{margin-bottom:20px}
.res-group h3{font-size:15px; margin-bottom:10px}
.res-group h3 .tag{font-size:11px; font-weight:600; background:var(--chip); color:var(--ink-dim); padding:2px 8px; border-radius:999px; margin-left:8px}
.res-item{padding:10px 12px; background:var(--chip); border-radius:10px; margin-bottom:8px}
.res-item .name{font-weight:600; font-size:14px}
.res-item .cost{font-family:var(--font-mono); font-size:11.5px; color:var(--ink-dim); float:right}
.res-item .desc{font-size:12.5px; color:var(--ink-dim); display:block; margin-top:3px}

/* ---- Study log ---- */
.log-form{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin-bottom:16px}
.log-form .field{margin-bottom:0}
.log-form select{padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--ink); font-size:14px; font-family:var(--font-body)}
table{width:100%; border-collapse:collapse; font-size:13px}
th,td{text-align:left; padding:8px 10px; border-bottom:1px solid var(--line)}
th{color:var(--ink-dim); font-size:11.5px; text-transform:uppercase}
.del-btn{background:none; border:none; color:var(--danger); font-size:12px; font-weight:600}
.bars{display:grid; gap:8px; margin-top:4px}
.bar-row{display:flex; align-items:center; gap:10px; font-size:12.5px}
.bar-row .blabel{min-width:70px; color:var(--ink-dim)}
.bar-track{flex:1; height:10px; background:var(--chip); border-radius:999px; overflow:hidden}
.bar-fill{height:100%; background:var(--accent); border-radius:999px}

/* ---- Leaderboard ---- */
.lead-row{display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line)}
.lead-row:last-child{border-bottom:none}
.lead-name{font-weight:600; font-size:14px; min-width:140px}
.lead-track{flex:1; height:8px; background:var(--chip); border-radius:999px; overflow:hidden}
.lead-fill{height:100%; background:var(--gold); border-radius:999px}
.lead-pct{font-family:var(--font-mono); font-size:12.5px; min-width:40px; text-align:right}
.lead-minutes{font-size:11.5px; color:var(--ink-dim); min-width:70px; text-align:right}

/* ---- Lessons ---- */
.alphabet-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:8px; margin-top:8px}
.alpha-cell{background:var(--chip); border-radius:10px; padding:10px; text-align:center; position:relative}
.alpha-letter{font-family:var(--font-display); font-size:20px; font-weight:600}
.alpha-name{font-size:12px; font-weight:600; color:var(--accent); margin-top:2px}
.alpha-vi{font-size:11px; color:var(--ink-dim); margin-top:1px}
.alpha-example{font-size:10.5px; color:var(--ink-dim); margin-top:6px; border-top:1px solid var(--line); padding-top:5px}
.alpha-cell .spk-btn{margin:6px auto 0; display:flex}
.spk-btn{display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--accent); font-size:12px; margin-left:6px; flex:none}
.spk-btn:hover{background:var(--accent); color:var(--accent-ink)}
.spk-btn.speaking{background:var(--good); color:var(--accent-ink); border-color:var(--good)}
.dialogue{display:grid; gap:8px; margin-top:6px}
.dia-line{display:flex; align-items:flex-start; gap:8px; max-width:88%}
.dia-line.b{margin-left:auto; flex-direction:row-reverse}
.dia-bubble{background:var(--chip); border-radius:12px; padding:8px 12px; font-size:13px}
.dia-line.b .dia-bubble{background:var(--accent); color:var(--accent-ink)}
.dia-bubble .vi{display:block; font-size:11.5px; color:var(--ink-dim); margin-top:2px}
.dia-line.b .dia-bubble .vi{color:color-mix(in srgb, var(--accent-ink) 70%, transparent)}
.skill-checklist{margin:8px 0 0; padding-left:18px; font-size:13px; color:var(--ink-dim)}
.skill-checklist li{margin-bottom:4px}
.skill-tips{font-size:12.5px; color:var(--ink-dim); margin-top:8px; font-style:italic}
.reading-passage{font-size:13.5px; line-height:1.65}
.reading-passage p{margin:0 0 6px}
.reading-vi{font-size:12.5px; color:var(--ink-dim); background:var(--chip); border-radius:8px; padding:8px 10px; margin-top:8px}
.vocab-table{width:100%; border-collapse:collapse; font-size:13px; margin-top:6px}
.vocab-table td{padding:5px 8px; border-bottom:1px solid var(--line)}
.vocab-table td:first-child{font-weight:600; white-space:nowrap}
.vocab-table td:last-child{color:var(--ink-dim)}
.example-line{font-size:13.5px; margin-bottom:6px}
.example-line .fr{font-weight:600}
.example-line .vi{display:block; color:var(--ink-dim); font-size:12.5px}


/* ================= Khung học: bản đồ trình độ ================= */
.lh-hero{display:flex; gap:20px; align-items:center; justify-content:space-between; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:26px 28px; margin-bottom:16px}
.lh-eyebrow{font-size:12px; letter-spacing:.08em; color:var(--gold); font-weight:600}
.lh-hero h2{font-family:var(--font-display); font-size:30px; line-height:1.15; margin:6px 0 8px}
.lh-hero p{margin:0 0 14px; color:var(--ink-dim); max-width:56ch}
.lh-prog{display:flex; align-items:center; gap:12px; font-size:13px; color:var(--ink-dim)}
.lh-prog .progress-track{flex:1; max-width:320px}
.lh-cta{width:auto; padding-inline:26px; flex:none}
.lh-method{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:12px 18px; margin-bottom:16px; font-size:13.5px}
.lh-method p{margin:8px 0; color:var(--ink-dim)}
.lh-dim,.pl-dim{color:var(--ink-dim); font-size:12.5px}
.lh-level{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:22px 24px; margin-bottom:16px}
.lh-level-head{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap}
.lh-level-head h3{font-family:var(--font-display); font-size:22px}
.lh-summary{margin:2px 0 0; color:var(--ink-dim); font-size:14px}
.lh-level-prog{min-width:160px}
.lh-count{font-size:12.5px; color:var(--ink-dim); text-align:right; margin-bottom:4px; font-family:var(--font-mono)}
.lh-cando{margin:12px 0 4px; padding-left:18px; font-size:13.5px; color:var(--ink-dim)}
.lh-std{font-size:12.5px; color:var(--ink-dim); background:var(--chip); border-radius:10px; padding:8px 12px; margin:8px 0 14px}
.lh-rows{display:grid; gap:10px}
.cp-wrap{margin-top:10px; padding-top:10px; border-top:1px dashed var(--line)}
.lh-row{display:grid; grid-template-columns:44px 1fr auto; gap:14px; align-items:center; padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--bg)}
.lh-row.next{border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent)}
.lh-status{width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:600; border:2px solid var(--line); color:var(--ink-dim); background:var(--surface)}
.lh-status.done{background:var(--good); border-color:var(--good); color:#fff}
.lh-status.doing{border-color:var(--accent); color:var(--accent)}
.lh-title{font-weight:600; font-size:15px; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.lh-tag{font-size:11px; background:var(--accent); color:var(--accent-ink); border-radius:999px; padding:2px 8px; font-weight:600}
.lh-goal{font-size:13px; color:var(--ink-dim); margin:2px 0 8px}
.lh-chips{display:flex; flex-wrap:wrap; gap:6px}
.lh-chip{font-size:11.5px; border-radius:999px; padding:3px 9px; border:1px solid var(--line); color:var(--ink-dim); background:var(--surface)}
.lh-chip.pass{border-color:color-mix(in srgb, var(--good) 55%, var(--line)); color:var(--good); background:color-mix(in srgb, var(--good) 10%, var(--surface))}
.lh-chip.fail{border-color:color-mix(in srgb, var(--danger) 55%, var(--line)); color:var(--danger); background:color-mix(in srgb, var(--danger) 8%, var(--surface))}
.lh-side{display:flex; flex-direction:column; align-items:flex-end; gap:8px}
.lh-state{font-size:12px; font-weight:600; color:var(--ink-dim)}
.lh-state.done{color:var(--good)} .lh-state.doing{color:var(--accent)}
.lh-open{width:auto; padding-inline:18px}

/* ================= Trình phát bài học ================= */
.pl-head{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:6px}
.pl-back{background:transparent; border:1px solid var(--line); border-radius:10px; padding:8px 14px; min-height:44px; color:var(--ink); font-size:14px}
.pl-crumb{font-size:13px; color:var(--ink-dim)}
.pl-count{margin-left:auto; font-size:13px; color:var(--ink-dim); font-family:var(--font-mono)}
.pl-title{font-family:var(--font-display); font-size:34px; line-height:1.1; margin:8px 0 14px; letter-spacing:-0.02em}
.pl-progress{height:6px; background:var(--chip); border-radius:999px; overflow:hidden; margin-bottom:20px}
.pl-bar{height:100%; width:0; background:var(--accent); transition:width .3s ease}
.pl-grid{display:grid; grid-template-columns:230px minmax(0,1fr); gap:28px; align-items:start}
.pl-side{position:sticky; top:12px}
.pl-side ol{list-style:none; margin:0; padding:0; display:grid; gap:4px}
.pl-step{width:100%; text-align:left; display:flex; align-items:center; gap:10px; background:transparent; border:0; border-radius:10px; padding:10px; min-height:44px; font-size:14px; color:var(--ink-dim)}
.pl-step:hover{background:var(--chip)}
.pl-step.current{background:var(--chip); color:var(--ink); font-weight:600}
.pl-dot{width:24px; height:24px; border-radius:50%; border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:11.5px; font-family:var(--font-mono); flex:none; background:var(--surface)}
.pl-step.current .pl-dot{border-color:var(--ink)}
.pl-step.done .pl-dot{background:var(--good); border-color:var(--good); color:#fff}
.pl-content{min-width:0}
.pl-main{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:26px 30px}
.pl-step-title{font-family:var(--font-display); font-size:24px; margin-bottom:14px}
.pl-block{margin-bottom:22px}
.pl-block h4{font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--gold); margin:0 0 8px; font-family:var(--font-body); font-weight:600}
.pl-block p{margin:0 0 8px; font-size:15px; line-height:1.65}
.pl-prose{white-space:pre-line}
.pl-recall{margin:10px 0; font-size:14px}
.pl-recall p{margin:4px 0 0; color:var(--ink-dim); font-size:13.5px}
.pl-small{width:auto; padding:8px 14px; font-size:13px; min-height:44px}
.pl-foot{position:sticky; bottom:0; display:flex; justify-content:space-between; gap:10px; background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(6px); padding:12px 0; margin-top:14px}
.pl-foot .btn{width:auto; padding-inline:24px}
.pl-transcript{margin-top:12px; background:var(--chip); border-radius:12px; padding:10px 14px}
.pl-transcript summary{cursor:pointer; font-weight:600; font-size:14px}
.pl-results{width:100%; border-collapse:collapse; font-size:14px; margin-bottom:12px}
.pl-results td.ok{color:var(--good); font-weight:600} .pl-results td.no{color:var(--danger); font-weight:600}

/* ================= Công cụ luyện tập ================= */
.pr-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:8px 0}
.pr-row .btn{width:auto; padding-inline:18px}
.pr-q{background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin-bottom:12px}
.pr-q.ok{border-color:color-mix(in srgb, var(--good) 60%, var(--line))}
.pr-q.no{border-color:color-mix(in srgb, var(--danger) 60%, var(--line))}
.pr-q.almost{border-color:color-mix(in srgb, var(--warn) 60%, var(--line))}
.pr-qtext{font-weight:600; font-size:15px; margin-bottom:10px; line-height:1.5}
.pr-opt{display:block; width:100%; text-align:left; min-height:44px; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:10px 14px; margin-bottom:8px; font-size:14.5px; color:var(--ink)}
.pr-opt:hover:not(:disabled){border-color:var(--accent)}
.pr-opt.selected{border-color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, var(--surface)); font-weight:600}
.pr-opt.correct{border-color:var(--good); background:color-mix(in srgb, var(--good) 14%, var(--surface))}
.pr-opt.wrong{border-color:var(--danger); background:color-mix(in srgb, var(--danger) 12%, var(--surface))}
.pr-opt:disabled{cursor:default}
.pr-explain{font-size:13.5px; color:var(--ink-dim); margin-top:6px; line-height:1.5}
.pr-bar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:10px}
.pr-bar .btn,.pr-out .btn{width:auto; padding-inline:20px}
.pr-submit:disabled{opacity:.55; cursor:not-allowed}
.pr-badge{display:inline-block; font-size:13.5px; font-weight:600; border-radius:999px; padding:6px 14px; margin:6px 0}
.pr-badge.good{background:color-mix(in srgb, var(--good) 15%, var(--surface)); color:var(--good)}
.pr-badge.warn{background:color-mix(in srgb, var(--warn) 15%, var(--surface)); color:var(--warn)}
.pr-badge.bad{background:color-mix(in srgb, var(--danger) 12%, var(--surface)); color:var(--danger)}
.pr-error{background:color-mix(in srgb, var(--danger) 12%, transparent); color:var(--danger); border-radius:10px; padding:8px 12px; font-size:13.5px; margin:8px 0}
.pr-note{font-size:13px; color:var(--ink-dim); line-height:1.5; margin:6px 0}
.pr-fill,.pr-textarea{width:100%; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:10px; padding:10px 12px; font-size:15px; font-family:var(--font-body); min-height:44px}
.pr-fill{max-width:320px}
.pr-textarea{resize:vertical; line-height:1.6}
.pr-textarea.short{min-height:64px}
.pr-chip{background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:8px 14px; min-height:44px; font-size:14.5px; color:var(--ink)}
.pr-chip.placed{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.pr-order-line{min-height:52px; border:1.5px dashed var(--line); border-radius:12px; padding:6px; display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; background:var(--surface)}
.pr-order-pool{display:flex; gap:6px; flex-wrap:wrap}
.pr-diff{display:flex; flex-wrap:wrap; gap:4px; margin:8px 0; font-size:16px; line-height:1.8}
.pr-w{padding:1px 7px; border-radius:6px; font-family:var(--font-display)}
.pr-w.ok{background:color-mix(in srgb, var(--good) 16%, var(--surface)); color:var(--good)}
.pr-w.accent{background:color-mix(in srgb, var(--warn) 18%, var(--surface)); color:var(--warn); text-decoration:underline wavy}
.pr-w.missing{background:color-mix(in srgb, var(--danger) 14%, var(--surface)); color:var(--danger); text-decoration:line-through}
.pr-legend{font-size:12px; color:var(--ink-dim); margin-top:4px}
.pr-extra,.pr-heard{font-size:13px; color:var(--ink-dim); margin-top:4px}
.pr-shadow,.pr-dict{border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin-bottom:12px; background:var(--bg)}
.pr-shadow-line .pr-fr,.pr-fr{font-family:var(--font-display); font-size:20px; line-height:1.4}
.pr-shadow-line .pr-vi{font-size:13.5px; color:var(--ink-dim); margin-top:2px}
.pr-rec{background:var(--danger); color:#fff}
.pr-rec.recording{animation:pr-pulse 1.2s ease-in-out infinite}
@keyframes pr-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--danger) 45%, transparent)}50%{box-shadow:0 0 0 8px transparent}}
@media (prefers-reduced-motion: reduce){.pr-rec.recording{animation:none} .pl-bar{transition:none}}
.pr-live{min-height:22px; font-size:14px; color:var(--ink-dim); font-style:italic}
.pr-timer{font-family:var(--font-mono); font-size:13px; color:var(--ink-dim)}
.pr-audio{width:100%; max-width:360px; margin:6px 0}
.pr-prompt{font-size:16px; line-height:1.6; margin-bottom:8px}
.pr-checklist{margin:6px 0 10px; padding-left:20px; font-size:14px; color:var(--ink-dim)}
.pr-feedback{list-style:none; padding:0; margin:10px 0; display:grid; gap:6px}
.pr-feedback li{display:flex; gap:10px; font-size:14px; line-height:1.5}
.pr-feedback .pr-mark{width:22px; height:22px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700}
.pr-feedback .ok .pr-mark{background:var(--good); color:#fff}
.pr-feedback .no .pr-mark{background:var(--chip); color:var(--ink-dim); border:1px solid var(--line)}
.pr-feedback .err .pr-mark{background:var(--danger); color:#fff}
.pr-feedback em{color:var(--ink-dim)}
.pr-accents{display:flex; gap:4px; flex-wrap:wrap; margin-bottom:6px}
.pr-key{min-width:40px; min-height:40px; background:var(--chip); border:1px solid var(--line); border-radius:8px; font-size:16px; color:var(--ink)}
.pr-count{font-size:13px; color:var(--ink-dim); font-family:var(--font-mono)}
.pr-count.ok{color:var(--good)}
.pr-model{background:var(--chip); border-radius:12px; padding:10px 14px; margin:10px 0}
.pr-model summary{cursor:pointer; font-weight:600; font-size:14px}
.pr-hist-title{font-size:13px; font-weight:600; margin:14px 0 6px; color:var(--ink-dim)}
.pr-hist-row{border-top:1px solid var(--line); padding:8px 0; font-size:13.5px}
.pr-hist-row .pr-fr{font-size:15px}
.pr-rating{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:14px}

@media (max-width:820px){
  .pl-grid{grid-template-columns:minmax(0,1fr)}
  .pl-side{position:static; overflow-x:auto}
  .pl-side ol{display:flex; gap:6px}
  .pl-step{white-space:nowrap; width:auto; border:1px solid var(--line)}
  .pl-main{padding:18px 16px}
  .pl-title{font-size:28px}
  .lh-hero{flex-direction:column; align-items:flex-start}
  .lh-row{grid-template-columns:40px 1fr}
  .lh-side{grid-column:1/-1; flex-direction:row; justify-content:space-between; align-items:center}
}

[hidden]{display:none !important}
@media (max-width:480px){ .phase{grid-template-columns:28px 1fr} .phase .dot{width:24px; height:24px; font-size:10px} }