:root{
  --bg:#f4f6fb;--panel:#fff;--ink:#111827;--muted:#667085;--line:#e6e9ef;
  --navy:#0f172a;--blue:#2956d7;--blue2:#eaf0ff;--red:#c9342f;--red2:#fff1f0;
  --green:#18794e;--green2:#edf9f3;--amber:#9a6700;--amber2:#fff7df;
  --text:var(--ink);--accent:var(--blue);--soft:var(--blue2);
  --shadow:0 14px 38px rgba(15,23,42,.08);--radius:20px
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.5}
button,input,textarea,select{font:inherit}
button{touch-action:manipulation}
.app-shell{min-height:100vh;display:grid;grid-template-columns:265px 1fr}
.sidebar{background:var(--navy);color:white;padding:26px 18px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:20px;overflow:auto}
.brand{display:flex;gap:12px;align-items:center;padding:0 8px}.brand-mark{width:42px;height:42px;border-radius:13px;background:white;color:var(--navy);display:grid;place-items:center;font-weight:900}.brand-title{font-weight:800;font-size:18px}.brand-subtitle{font-size:12px;color:#aeb8cc}
.nav{display:flex;flex-direction:column;gap:5px}.nav-item{border:0;background:transparent;color:#c7d0e0;text-align:left;padding:11px 12px;border-radius:12px;cursor:pointer}.nav-item:hover,.nav-item.active{background:#1c2942;color:white}.nav-item.danger-nav{color:#ffc7c2}.nav-item.danger-nav.active{background:#431d24;color:white}
.sidebar-card{margin-top:auto;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);border-radius:16px;padding:16px}.sidebar-card p{margin:6px 0 0;color:#d5dbea;font-size:13px}.sidebar-tools{display:grid;gap:8px}.side-btn{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#e7ebf2;padding:9px 11px;border-radius:10px;text-align:center;cursor:pointer;font-size:12px;font-weight:700}.file-btn{display:block}
.main{padding:24px 30px 50px;max-width:1500px;width:100%;margin:auto}.topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:28px}.topbar h1{font-size:28px;margin:2px 0 0}.top-actions,.head-actions{display:flex;gap:10px;align-items:center}.eyebrow{text-transform:uppercase;letter-spacing:.11em;font-size:11px;font-weight:800;color:#7b8496}
.primary-btn,.ghost-btn,.text-btn,.menu-btn{border:0;border-radius:12px;padding:10px 14px;font-weight:700;cursor:pointer}.primary-btn{background:var(--blue);color:white}.primary-btn:hover{filter:brightness(.96)}.ghost-btn{background:white;border:1px solid var(--line);color:var(--ink)}.text-btn{background:transparent;color:var(--blue);padding:6px}.danger-text{color:var(--red)}.menu-btn{display:none;background:white;border:1px solid var(--line);font-size:18px}.select,.input{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff;color:var(--ink)}
.view{display:none}.view.active{display:block}
.hero-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:18px}.hero-card,.status-card,.panel,.stat,.sprint,.quiz-card,.next-action-card,.map-section,.error-card,.empty-state{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.hero-card{padding:34px;background:linear-gradient(135deg,#fff 0%,#eef3ff 100%)}.hero-card h2{font-size:36px;line-height:1.1;margin:8px 0 14px;max-width:760px}.hero-card p{color:var(--muted);max-width:700px}.hero-actions{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}.status-card{padding:24px}.status-dot-row{display:flex;gap:9px;align-items:center;margin:10px 0}.status-dot{width:10px;height:10px;background:#d5902f;border-radius:50%;box-shadow:0 0 0 5px #fff0cf}.field-label{display:block;font-size:12px;font-weight:700;margin:18px 0 6px}.status-card .input{width:100%;background:#fafbfc}.countdown{margin-top:10px;font-weight:800;color:var(--blue)}.phase-box{margin-top:12px;padding:10px 12px;border-radius:12px;background:#f5f7fb;font-size:12px;font-weight:700;color:#4c566a}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0 30px}.stat{padding:18px}.stat span,.stat small{display:block;color:var(--muted);font-size:12px}.stat strong{display:block;font-size:24px;margin:4px 0}.section-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:24px 0 14px}.section-head h2,.section-head h3{margin:3px 0 0}.section-head.compact{margin-top:0}.section-intro{color:var(--muted);max-width:900px;margin-top:-3px}.three-col{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.dashboard-panels{margin-top:18px}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}.panel{padding:22px}.panel.slim{padding:14px 18px;margin-top:14px}.panel h3{margin-top:0}.danger-panel{background:var(--red2);border-color:#ffd0cd}.clean-list{padding-left:20px;margin-bottom:0}.clean-list li{margin:9px 0}.compact-list li{margin:7px 0}.muted{color:var(--muted)}
.next-action-card{padding:22px;display:flex;align-items:center;justify-content:space-between;gap:18px;border-color:#bfd0ff;background:linear-gradient(135deg,#fff,#f5f8ff)}.next-action-card h3{font-size:24px;margin:3px 0 6px}.next-action-card p{margin:0;color:var(--muted);max-width:850px}
.today-banner{padding:16px 18px;border-radius:16px;background:#eaf0ff;color:#1f3f9a;margin-bottom:16px}.timeline{display:grid;gap:12px}.time-block{display:grid;grid-template-columns:125px 1fr auto;gap:16px;align-items:center;padding:18px;background:white;border:1px solid var(--line);border-radius:16px}.time-block .time{font-weight:800}.time-block small{color:var(--muted)}.time-block.is-done{background:#f4fbf7;border-color:#cdebdc;opacity:.85}.time-block.is-done b{text-decoration:line-through;text-decoration-thickness:1px}.practical-note{background:#fffaf0;border-color:#f2dfb5}
.study-map{display:grid;gap:16px}.map-section{padding:22px}.map-section-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}.map-section-head h3{margin:3px 0 5px;font-size:23px}.map-section-head p{margin:0;color:var(--muted)}.map-score{min-width:72px;text-align:center;font-size:20px;font-weight:900;background:#f2f5fb;border-radius:14px;padding:10px}.map-score small{display:block;font-size:11px;color:var(--muted)}.topic-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:18px}.topic-item{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1px solid var(--line);border-radius:12px;cursor:pointer;background:#fff}.topic-item:has(input:checked){background:var(--green2);border-color:#b9dec9}.topic-item input{margin-top:4px;accent-color:var(--green)}
.quiz-card{padding:28px;min-height:280px}.quiz-meta{display:flex;justify-content:space-between;gap:12px;align-items:center;color:var(--muted);font-size:12px}.quiz-category{display:inline-flex;background:#eef3ff;color:#3658b9;border-radius:999px;padding:5px 8px;font-size:11px;font-weight:800}.quiz-q{font-size:22px;font-weight:800;margin:16px 0 20px}.options{display:grid;gap:10px}.option{padding:13px 14px;border:1px solid var(--line);border-radius:12px;cursor:pointer;text-align:left;background:white;color:var(--ink)}.option:hover{background:#f8faff}.option.selected{border-color:#9fb7f7;background:#eff4ff}.option.correct{border-color:#81c7a7;background:#edf9f3}.option.wrong{border-color:#e7a5a1;background:#fff1f0}.option:disabled{cursor:default;opacity:1}.answer-box{margin-top:18px;padding:14px;border-radius:12px;background:#f6f7f9;color:#394150}.answer-box.good{background:var(--green2);color:#145c3d}.answer-box.warn{background:var(--amber2);color:var(--amber)}.quiz-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:12px}.score-pill{background:#101828;color:#fff;border-radius:999px;padding:7px 11px;font-size:12px;font-weight:800}.mcq-streak-row{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:13px;margin:-4px 0 12px}
.error-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}.error-summary>div{background:white;border:1px solid var(--line);border-radius:16px;padding:16px}.error-summary b,.error-summary span{display:block}.error-summary b{font-size:24px}.error-summary span{color:var(--muted);font-size:12px}.error-list{display:grid;gap:12px}.error-card{padding:20px}.error-card.fixed{opacity:.62;background:#f8faf9}.error-top{display:flex;justify-content:space-between;gap:12px;align-items:center}.error-top>div{display:flex;gap:7px;align-items:center}.error-status{font-size:11px;font-weight:800;padding:5px 8px;border-radius:999px;background:#fff2e8;color:#9a4d00}.error-card.fixed .error-status{background:var(--green2);color:var(--green)}.error-card h3{margin:12px 0 8px}.error-card p{margin:6px 0}.error-actions{display:flex;gap:8px;margin-top:14px}.empty-state{padding:34px;text-align:center}.empty-state h3{margin-top:0}.empty-state p{color:var(--muted);margin-bottom:0}
.tag-row{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}.tag-row span{font-size:11px;background:#f1f4f8;padding:6px 8px;border-radius:999px;font-weight:700}.check-line{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}.check-line:last-child{border-bottom:0}.check-line input{accent-color:var(--blue)}.writing-workspace{margin-top:16px}.writing-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.writing-toolbar span{font-size:12px;color:var(--muted)}#writingPad{width:100%;min-height:280px;border:1px solid var(--line);border-radius:14px;padding:14px;resize:vertical;background:#fbfcfe;line-height:1.7}.idiom{font-size:20px;font-weight:800}.idiom small{display:block;color:var(--muted);font-weight:500;margin-top:6px}
.revision-summary{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}.revision-chip{background:white;border:1px solid var(--line);border-radius:999px;padding:7px 11px;font-size:12px}.revision-chip b{margin-right:4px}.revision-chip.due{background:#fff6e6;border-color:#efd4a0;color:#8b5a00}.revision-table-wrap{overflow:auto;background:white;border:1px solid var(--line);border-radius:18px}.revision-table{width:100%;border-collapse:collapse;min-width:780px}.revision-table th,.revision-table td{padding:14px;border-bottom:1px solid var(--line);text-align:left}.revision-table th{font-size:12px;color:var(--muted);background:#fafbfc}.row-due{background:#fffdf8}.due-text{color:#9a6700;font-weight:800}.delete-btn{border:0;background:transparent;color:var(--red);cursor:pointer}.mini-btn{padding:7px 10px;font-size:12px}
.current-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.current-grid textarea{width:100%;min-height:180px;border:1px solid var(--line);border-radius:12px;padding:12px;resize:vertical;background:#fafbfc;line-height:1.6}
.emergency-hero{padding:30px;border-radius:22px;background:linear-gradient(135deg,#171717,#3f1010);color:#fff}.emergency-hero .eyebrow{color:#f0b9b4}.emergency-hero h2{font-size:34px;margin:7px 0}.emergency-hero p{color:#f1d7d4;max-width:850px}.phase-selector{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}.phase-btn{border:1px solid var(--line);background:#fff;padding:8px 12px;border-radius:999px;font-weight:800;cursor:pointer}.phase-btn.active{background:#171717;color:#fff;border-color:#171717}.sprint-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0}.sprint{padding:20px}.sprint span{font-size:12px;font-weight:900;color:var(--red)}.sprint h3{margin:5px 0}.sprint p{color:var(--muted);font-size:14px}
.focus-modal{position:fixed;inset:0;background:rgba(15,23,42,.72);display:none;align-items:center;justify-content:center;padding:20px;z-index:100}.focus-modal.show{display:flex}.focus-box{width:min(440px,100%);background:white;border-radius:24px;padding:30px;text-align:center}.timer{font-size:64px;font-weight:900;letter-spacing:-.04em;margin:18px 0}.focus-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
@media(max-width:1100px){.stats-grid{grid-template-columns:repeat(2,1fr)}.three-col{grid-template-columns:1fr 1fr}.sprint-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){.app-shell{display:block}.sidebar{position:fixed;left:-285px;z-index:80;width:265px;transition:.22s;box-shadow:20px 0 50px rgba(0,0,0,.18)}.sidebar.open{left:0}.main{padding:18px 16px 42px}.menu-btn{display:inline-flex}.topbar{align-items:flex-start;position:sticky;top:0;z-index:30;background:rgba(244,246,251,.94);backdrop-filter:blur(10px);padding:8px 0 12px}.top-actions .ghost-btn{display:none}.topbar h1{font-size:22px}.hero-grid,.two-col,.three-col,.current-grid{grid-template-columns:1fr}.hero-card{padding:24px}.hero-card h2{font-size:30px}.stats-grid{grid-template-columns:repeat(2,1fr)}.topic-grid{grid-template-columns:1fr}.time-block{grid-template-columns:92px 1fr}.time-block button{grid-column:2}.next-action-card{align-items:flex-start;flex-direction:column}.sprint-grid{grid-template-columns:1fr}.head-actions{flex-wrap:wrap;justify-content:flex-end}.map-section-head{align-items:flex-start}.error-summary{grid-template-columns:repeat(3,1fr)}.timer{font-size:54px}}
@media(max-width:520px){.main{padding-left:12px;padding-right:12px}.top-actions .primary-btn{padding:9px 11px}.title-wrap .eyebrow{display:none}.hero-card h2{font-size:27px}.hero-card p{font-size:14px}.stats-grid{grid-template-columns:1fr 1fr;gap:9px}.stat{padding:14px}.stat strong{font-size:21px}.section-head{align-items:flex-start}.section-head h2{font-size:22px}.head-actions{width:100%}.head-actions .select{flex:1;min-width:0}.time-block{grid-template-columns:1fr;gap:8px}.time-block button{grid-column:1;justify-self:start}.time-block .time{font-size:13px;color:var(--blue)}.quiz-card{padding:20px}.quiz-q{font-size:19px}.error-summary{grid-template-columns:1fr 1fr 1fr;gap:7px}.error-summary>div{padding:12px}.error-summary b{font-size:20px}.map-section{padding:18px}.map-section-head{gap:10px}.map-score{min-width:62px}.current-grid textarea{min-height:150px}.emergency-hero{padding:23px}.emergency-hero h2{font-size:27px}.focus-box{padding:24px 18px}.timer{font-size:48px}.phase-selector{gap:6px}.phase-btn{font-size:12px;padding:7px 10px}}

/* ---------- v3: official blueprint, teaching, mocks, resources ---------- */
.source-strip{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.source-strip span{font-size:.78rem;padding:7px 10px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.04);color:var(--muted)}
.blueprint-alert{padding:16px 18px;border:1px solid rgba(245,158,11,.35);background:rgba(245,158,11,.08);border-radius:16px;margin:0 0 18px;line-height:1.55}
.paper-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:18px}.paper-card{border:1px solid var(--line);background:var(--panel);border-radius:18px;padding:18px}.paper-card-top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.paper-card-top span{font-size:.76rem;text-transform:uppercase;letter-spacing:.12em;color:var(--accent)}.paper-card-top h3{margin:6px 0 0}.paper-card-top strong{font-size:2.1rem}.paper-meta{display:flex;flex-wrap:wrap;gap:8px;margin:13px 0}.paper-meta span{font-size:.78rem;background:var(--soft);padding:6px 9px;border-radius:999px}.paper-parts{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.paper-parts div{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:.88rem}.paper-parts div:last-child{border-bottom:0}.paper-parts b{white-space:nowrap}.paper-floor{margin-top:12px;font-size:.86rem;color:var(--muted)}
.target-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.target-grid label{display:grid;grid-template-columns:1fr 72px auto;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:12px}.target-input{width:100%;padding:8px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--text)}.target-total{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-radius:12px;background:var(--soft)}
.paper-divider{display:flex;justify-content:space-between;align-items:center;margin:26px 0 10px;padding:0 4px}.paper-divider span{font-weight:800;font-size:1.15rem}.paper-divider b{font-size:.8rem;color:var(--muted)}
.teach-layout{display:grid;grid-template-columns:290px minmax(0,1fr);gap:18px;align-items:start}.lesson-list{display:flex;flex-direction:column;gap:7px;max-height:68vh;overflow:auto;padding-right:4px;position:sticky;top:86px}.lesson-nav{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:12px;padding:11px 12px;text-align:left;cursor:pointer;line-height:1.35}.lesson-nav.active{border-color:var(--accent);background:var(--soft);font-weight:700}.lesson-card{border:1px solid var(--line);background:var(--panel);border-radius:18px;padding:22px;min-height:420px}.lesson-card h2{margin-top:6px}.memory-line{padding:14px;border-radius:14px;background:var(--soft);margin:16px 0}.memory-line span,.recall-box span{display:block;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;color:var(--accent);margin-bottom:5px}.memory-line b{font-size:1.05rem}.article-line{font-weight:700;color:var(--muted);margin:0 0 14px}.lesson-bullets{margin:16px 0}.lesson-bullets li{margin-bottom:10px;line-height:1.55}.recall-box{border-left:3px solid var(--accent);padding:12px 14px;background:rgba(255,255,255,.025);margin:18px 0}.recall-box p{margin:0;line-height:1.55}
.confidence-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0 14px;font-size:.86rem;color:var(--muted)}.confidence-btn,.tiny-btn{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:999px;padding:7px 10px;cursor:pointer}.confidence-btn.active{border-color:var(--accent);background:var(--soft);font-weight:700}.mcq-mode-row{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.session-complete{margin-top:10px;padding:10px 12px;border-radius:10px;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.25);font-weight:700}
.compact-stats{margin-bottom:16px}.small-strong{font-size:1rem!important;line-height:1.25}.resource-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.resource-card{display:block;text-decoration:none;color:var(--text);border:1px solid var(--line);background:var(--panel);border-radius:18px;padding:18px;transition:.2s ease}.resource-card:hover{transform:translateY(-2px);border-color:var(--accent)}.resource-card span{font-size:.75rem;text-transform:uppercase;letter-spacing:.11em;color:var(--accent)}.resource-card h3{margin:7px 0}.resource-card p{color:var(--muted);line-height:1.5}.resource-card b{font-size:.88rem}.source-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px}.source-cards small{color:var(--muted)}
.muted{color:var(--muted)}

@media(max-width:900px){.paper-grid,.resource-grid,.source-cards{grid-template-columns:1fr}.teach-layout{grid-template-columns:1fr}.lesson-list{position:static;max-height:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.target-grid{grid-template-columns:1fr}}
@media(max-width:560px){.lesson-list{grid-template-columns:1fr}.paper-card{padding:15px}.paper-card-top strong{font-size:1.6rem}.target-grid label{grid-template-columns:1fr 64px auto}.confidence-row{align-items:flex-start}.mcq-mode-row{width:100%}}

/* ---------- v4: iPad-first all-in-one Study Reader ---------- */
:root{--reader-font:18px}
.reader-controls{flex-wrap:wrap}.reader-head{align-items:flex-start}.reader-progress-wrap{margin:0 0 16px}.reader-progress-meta{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:12px;margin-bottom:6px}.reader-progress{height:8px;background:#e8ebf1;border-radius:999px;overflow:hidden}.reader-progress span{display:block;height:100%;width:0;background:var(--blue);border-radius:inherit;transition:width .25s ease}
.reader-surface{font-size:var(--reader-font);line-height:1.72}.reader-surface h2{font-size:clamp(1.6rem,3vw,2.25rem);line-height:1.18}.reader-surface .memory-line b{font-size:1.08em}.reader-surface .article-line{font-size:.92em}.reader-nav{display:flex;gap:10px;justify-content:center;align-items:center;margin:16px 0 4px;flex-wrap:wrap}.reader-nav button:disabled{opacity:.4;cursor:not-allowed}
.lesson-nav{display:flex;align-items:center;justify-content:space-between;gap:10px}.lesson-nav.learned{border-color:#b9dec9;background:var(--green2)}.lesson-nav.learned b{color:var(--green)}
body.reader-night{--bg:#121722;--panel:#1b2230;--ink:#eef2f7;--muted:#aeb7c5;--line:#30394a;--blue2:#253352;--soft:#253352;--red2:#3a2023;--green2:#19372b;--amber2:#3c3218;color-scheme:dark}body.reader-night .topbar{background:rgba(18,23,34,.94)}body.reader-night .hero-card{background:linear-gradient(135deg,#1b2230,#202c44)}body.reader-night .ghost-btn,body.reader-night .select,body.reader-night .input,body.reader-night .option,body.reader-night .topic-item,body.reader-night .side-btn{background:var(--panel);color:var(--ink)}body.reader-night #writingPad,body.reader-night .current-grid textarea,body.reader-night .target-input{background:#151c28;color:var(--ink)}body.reader-night .time-block{background:var(--panel)}body.reader-night .time-block.is-done{background:#183126}body.reader-night .phase-btn{background:var(--panel);color:var(--ink)}body.reader-night .phase-btn.active{background:#e6eaf0;color:#111}body.reader-night .focus-box{background:var(--panel);color:var(--ink)}

@media(max-width:860px){.reader-controls{width:100%;justify-content:flex-start}.reader-controls .select{min-width:230px;flex:1}.reader-surface{padding:22px}.lesson-list{display:flex;flex-direction:row;overflow:auto;max-width:100%;gap:8px;padding-bottom:4px;scroll-snap-type:x proximity}.lesson-nav{min-width:220px;scroll-snap-align:start}.reader-progress-meta{font-size:11px}}
@media(max-width:520px){.reader-controls .select{width:100%;min-width:100%;flex-basis:100%}.reader-surface{font-size:var(--reader-font);padding:18px}.reader-nav{position:sticky;bottom:8px;z-index:22;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);padding:8px;border-radius:14px;border:1px solid var(--line)}.reader-nav .primary-btn{flex:1}.reader-progress-meta{align-items:flex-start;flex-direction:column;gap:2px}}


/* ---------- v5: hosted cross-device Cloud Sync ---------- */
.nav-item.sync-nav{color:#bfe0ff}.nav-item.sync-nav.active{background:#17385a;color:#fff}
.sync-pill{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--panel);padding:8px 11px;border-radius:999px;font-size:12px;font-weight:800;color:var(--muted)}.sync-pill.ok{background:var(--green2);border-color:#b9dec9;color:var(--green)}
.sync-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.sync-card{padding:20px}.sync-card h3{margin:7px 0}.sync-card p{color:var(--muted);max-width:66ch}.sync-key-row{display:grid;grid-template-columns:1fr auto;gap:8px}.sync-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}.sync-help{display:block;margin-top:10px;color:var(--muted)}
.sync-message{margin-top:14px;padding:11px 12px;border-radius:12px;background:var(--soft);color:var(--muted);font-size:13px}.sync-message.ok{background:var(--green2);color:var(--green)}.sync-message.error{background:var(--red2);color:var(--red)}
.toggle-row{display:flex;gap:10px;align-items:center;margin:14px 0;font-weight:700}.toggle-row input{width:18px;height:18px}
.sync-status-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}.sync-status-grid>div{border:1px solid var(--line);border-radius:12px;padding:11px}.sync-status-grid span{display:block;color:var(--muted);font-size:11px}.sync-status-grid b{display:block;margin-top:4px;font-size:13px;overflow-wrap:anywhere}
.practical-note code{font-size:.88em;background:var(--soft);padding:2px 5px;border-radius:6px}
@media(max-width:860px){.sync-grid{grid-template-columns:1fr}}
@media(max-width:520px){.sync-key-row{grid-template-columns:1fr}.sync-status-grid{grid-template-columns:1fr}.sync-actions>*{flex:1}.sync-card{padding:17px}}