/* ============================================================
   深圳中考物理在线学习系统
   第一部分：原手册设计系统（从单文件手册原样迁移）
   第二部分：应用框架层（顶栏/登录/测试/错题本/进度等）
   ============================================================ */

/* ============ 原手册设计系统 ============ */
:root{
  --primary:#2563eb; --primary-deep:#1e40af; --ink:#1e293b; --muted:#64748b;
  --bg:#f1f5f9; --card:#ffffff; --line:#e2e8f0;
  --dark:#0f172a; --dark2:#1e293b;
  --c-sel:#0d9488; --c-fill:#d97706; --c-draw:#e11d48; --c-exp:#7c3aed; --c-calc:#ea580c; --c-zh:#0891b2;
  --ok:#16a34a; --bad:#dc2626;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--ink);line-height:1.7;font-size:15px}
/* Chapter header */
.ch-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.ch-num{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,var(--primary),#0ea5e9);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;flex-shrink:0}
.ch-head h2{font-size:22px}
.ch-head .book{background:#eef2ff;color:#4338ca;border-radius:999px;font-size:12px;padding:2px 10px}
.freq{margin:4px 0 18px;color:var(--muted);font-size:13.5px;border-bottom:1px dashed var(--line);padding-bottom:12px}
.freq b{color:var(--c-calc)}
/* Knowledge cards */
.kp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-bottom:8px}
.kp{background:#f8fafc;border:1px solid var(--line);border-left:4px solid var(--primary);border-radius:12px;padding:14px 16px;position:relative}
.kp h4{font-size:15px;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.kp h4 .dot{width:8px;height:8px;border-radius:50%;background:var(--primary);flex-shrink:0}
.kp ul{padding-left:18px;font-size:13.8px}
.kp li{margin:4px 0}
.kp .fml{display:inline-block;background:#eef2ff;color:#3730a3;border-radius:6px;padding:1px 8px;font-size:13px;margin:2px 2px;font-family:ui-monospace,Menlo,monospace}
.kp .warn{color:#dc2626}
.kp .tip{color:#0d9488}
.kp.g{border-left-color:var(--c-sel)}.kp.g h4 .dot{background:var(--c-sel)}
.kp.r{border-left-color:var(--c-draw)}.kp.r h4 .dot{background:var(--c-draw)}
.kp.v{border-left-color:var(--c-exp)}.kp.v h4 .dot{background:var(--c-exp)}
.kp.o{border-left-color:var(--c-calc)}.kp.o h4 .dot{background:var(--c-calc)}
/* Demo panel */
.demo{background:var(--dark);border-radius:16px;padding:16px 18px 14px;margin:18px 0 8px;color:#e2e8f0}
.demo .d-title{font-size:14.5px;font-weight:700;color:#7dd3fc;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.demo .d-title::before{content:"▶";font-size:10px;color:#38bdf8}
.demo canvas,.demo svg{width:100%;height:auto;display:block;border-radius:10px;background:#0b1220}
.ctl{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:12px;font-size:13px}
.ctl label{display:flex;align-items:center;gap:8px;color:#cbd5e1}
.ctl input[type=range]{accent-color:#38bdf8;width:150px}
.ctl .val{font-family:ui-monospace,Menlo,monospace;color:#7dd3fc;min-width:64px}
.btn{background:#1e3a5f;border:1px solid #38bdf8;color:#e0f2fe;border-radius:8px;padding:5px 13px;cursor:pointer;font-size:13px;transition:.15s}
.btn:hover{background:#2563eb}
.btn.on{background:#0284c7;border-color:#7dd3fc;color:#fff}
.d-note{margin-top:10px;font-size:12.8px;color:#94a3b8;border-top:1px dashed #334155;padding-top:8px}
.d-note b{color:#fbbf24}
/* Questions */
h3.sec-t{font-size:16px;margin:22px 0 12px;display:flex;align-items:center;gap:8px}
h3.sec-t::before{content:"";width:5px;height:18px;border-radius:3px;background:var(--primary)}
.q{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:12px 0;background:#fff;position:relative}
.q-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:8px}
.tag{font-size:11.5px;border-radius:6px;padding:1px 8px;font-weight:600}
.tag.y{background:#eef2ff;color:#4338ca}
.tag.y2{background:#fdf2f8;color:#be185d}
.tag.t-sel{background:#ccfbf1;color:#0f766e}
.tag.t-fill{background:#fef3c7;color:#b45309}
.tag.t-draw{background:#ffe4e6;color:#be123c}
.tag.t-exp{background:#ede9fe;color:#6d28d9}
.tag.t-calc{background:#ffedd5;color:#c2410c}
.tag.t-zh{background:#cffafe;color:#0e7490}
.q-text{font-size:14.2px}
.q-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:4px 16px;font-size:14px;margin:8px 0 0;padding-left:4px}
details.ans{margin-top:10px;border-top:1px dashed var(--line);padding-top:8px}
details.ans summary{cursor:pointer;color:var(--primary);font-size:13.5px;font-weight:600;user-select:none;list-style:none;display:flex;align-items:center;gap:6px}
details.ans summary::before{content:"▸"}
details.ans[open] summary::before{content:"▾"}
details.ans .ans-b{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:10px;padding:10px 14px;margin-top:8px;font-size:13.8px}
details.ans .ans-b .ba{color:#15803d;font-weight:800;font-size:14.5px}
details.ans .ans-b p{margin:4px 0}
/* Tables */
table.tb{width:100%;border-collapse:collapse;font-size:13.5px;margin:12px 0}
table.tb th{background:#f1f5f9;padding:8px 10px;border:1px solid var(--line);text-align:left}
table.tb td{padding:7px 10px;border:1px solid var(--line);vertical-align:top}
table.tb tr:nth-child(even) td{background:#fafcfe}
.heat{overflow-x:auto}
.heat table{border-collapse:collapse;font-size:12px;min-width:900px}
.heat th,.heat td{border:1px solid var(--line);padding:5px 6px;text-align:center;white-space:nowrap}
.heat td:first-child,.heat th:first-child{text-align:left;font-size:12.5px;position:sticky;left:0;background:#f8fafc}
.heat .h22{background:#4338ca;color:#fff!important}
.heat .h1{background:#bfdbfe}.heat .h0{background:#f1f5f9;color:#94a3b8}
.legend{display:flex;gap:18px;font-size:12.5px;color:var(--muted);margin-top:8px;flex-wrap:wrap}
.legend i{display:inline-block;width:13px;height:13px;border-radius:3px;vertical-align:-2px;margin-right:5px}
/* misc */
.callout{background:#fffbeb;border:1px solid #fde68a;border-radius:12px;padding:12px 16px;font-size:13.5px;margin:14px 0}
.callout b{color:#b45309}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.pill-row{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.pill{background:#f1f5f9;border:1px solid var(--line);border-radius:999px;padding:3px 12px;font-size:12.5px;color:var(--muted)}

/* ============ 应用框架层 ============ */
/* 顶栏 */
.topbar{position:fixed;top:0;left:0;right:0;z-index:100;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 1px 8px rgba(15,23,42,.05)}
.topbar-in{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:22px;padding:0 20px;height:56px}
.brand{font-weight:800;font-size:16.5px;color:var(--primary);text-decoration:none;letter-spacing:.5px;white-space:nowrap}
.topnav{display:flex;gap:4px}
.topnav a{color:var(--ink);text-decoration:none;font-size:14px;padding:5px 13px;border-radius:8px}
.topnav a:hover{background:#eff6ff;color:var(--primary)}
.topnav a.on{background:var(--primary);color:#fff}
.topsearch{flex:1;max-width:360px;margin-left:auto;position:relative}
.topsearch input{width:100%;border:1px solid var(--line);border-radius:999px;padding:6px 16px;font-size:13.5px;background:#f8fafc;outline:none}
.topsearch input:focus{border-color:var(--primary);background:#fff}
.topuser{display:flex;align-items:center;gap:10px;font-size:13.5px;white-space:nowrap}
.topuser b{color:var(--primary)}
.topuser button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:4px 12px;cursor:pointer;font-size:12.5px;color:var(--muted)}
.topuser button:hover{border-color:var(--bad);color:var(--bad)}
main#view{padding-top:56px;min-height:100vh}
.view-wrap{max-width:1020px;margin:0 auto;padding:26px 20px 90px}
.view-wide{max-width:1240px;margin:0 auto;padding:26px 20px 90px}
/* 通用页面元素 */
.page-title{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:800;margin-bottom:4px}
.page-sub{color:var(--muted);font-size:13.5px;margin-bottom:22px}
.card-box{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 24px;margin-bottom:20px}
.stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:16px 0}
.stat-cards .sc{background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.stat-cards .sc b{display:block;font-size:23px;font-weight:800;color:var(--primary)}
.stat-cards .sc span{font-size:12.5px;color:var(--muted)}
.big-btn{display:flex;flex-direction:column;align-items:flex-start;gap:6px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;text-decoration:none;color:var(--ink);transition:.15s}
.big-btn:hover{border-color:var(--primary);box-shadow:0 4px 14px rgba(37,99,235,.12);transform:translateY(-1px)}
.big-btn .t{font-weight:700;font-size:15.5px}
.big-btn .d{font-size:12.8px;color:var(--muted)}
.big-btn .ic{font-size:24px}
/* 登录页 */
.login-box{max-width:400px;margin:9vh auto 0;background:#fff;border:1px solid var(--line);border-radius:18px;padding:32px 30px}
.login-box h1{font-size:20px;margin-bottom:4px}
.login-box .sub{color:var(--muted);font-size:13px;margin-bottom:20px}
.login-box label{display:block;font-size:13px;color:var(--muted);margin:12px 0 4px}
.login-box input{width:100%;border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:14px;outline:none}
.login-box input:focus{border-color:var(--primary)}
.login-box .err{color:var(--bad);font-size:12.5px;margin-top:8px;min-height:18px}
.btn-main{width:100%;background:var(--primary);color:#fff;border:none;border-radius:10px;padding:10px;font-size:15px;font-weight:700;cursor:pointer;margin-top:16px}
.btn-main:hover{background:var(--primary-deep)}
.btn-ghost{width:100%;background:#fff;color:var(--primary);border:1px solid var(--primary);border-radius:10px;padding:10px;font-size:15px;cursor:pointer;margin-top:10px}
.btn-ghost:hover{background:#eff6ff}
/* 学习目录 */
.dir-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:12px}
.dir-item{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;text-decoration:none;color:var(--ink);transition:.15s;position:relative;overflow:hidden}
.dir-item:hover{border-color:var(--primary);box-shadow:0 3px 10px rgba(37,99,235,.10)}
.dir-item .n{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--primary),#0ea5e9);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;flex-shrink:0}
.dir-item .tt{font-size:14px;font-weight:600;line-height:1.35}
.dir-item .mm{font-size:11.5px;color:var(--muted)}
.dir-item .ring{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:11px;color:var(--muted)}
.dir-item.tool .n{background:linear-gradient(135deg,#7c3aed,#a78bfa)}
/* 章节工具条 */
.ch-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.ch-toolbar .crumb{font-size:14px;color:var(--muted)}
.ch-toolbar .crumb a{color:var(--primary);text-decoration:none}
.ch-nav-btns{margin-left:auto;display:flex;gap:8px}
.ch-nav-btns button{border:1px solid var(--line);background:#fff;border-radius:9px;padding:6px 14px;cursor:pointer;font-size:13.5px;color:var(--ink)}
.ch-nav-btns button:hover{border-color:var(--primary);color:var(--primary)}
/* 知识卡掌握勾选 */
.kp .kp-check{position:absolute;top:10px;right:10px;display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);cursor:pointer;user-select:none;background:#fff;border:1px solid var(--line);border-radius:999px;padding:2px 10px;z-index:2}
.kp .kp-check:hover{border-color:var(--ok);color:var(--ok)}
.kp.mastered{border-color:#bbf7d0;background:#f0fdf4}
.kp.mastered .kp-check{background:var(--ok);border-color:var(--ok);color:#fff}
.kp h4{padding-right:96px}
/* 题目收藏星标 */
.q .fav-btn{position:absolute;top:10px;right:10px;border:none;background:none;cursor:pointer;font-size:17px;color:#cbd5e1;line-height:1;padding:2px}
.q .fav-btn:hover{color:#f59e0b}
.q .fav-btn.on{color:#f59e0b}
.q{padding-right:44px}
/* 测试模式 */
.quiz-head{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.quiz-head .qt{font-size:17px;font-weight:800}
.quiz-head .qp{margin-left:auto;font-size:13px;color:var(--muted)}
.qbar{height:8px;background:#e2e8f0;border-radius:99px;overflow:hidden;margin-bottom:20px}
.qbar i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),#0ea5e9);border-radius:99px;transition:width .25s}
.opt-btn{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:11px;padding:11px 14px;font-size:14px;cursor:pointer;margin:7px 0;font-family:inherit;line-height:1.55;transition:.13s}
.opt-btn:hover:not(:disabled){border-color:var(--primary);background:#eff6ff}
.opt-btn .ol{width:24px;height:24px;border-radius:50%;border:1.5px solid #cbd5e1;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;flex-shrink:0;color:var(--muted)}
.opt-btn:disabled{cursor:default}
.opt-btn.correct{border-color:var(--ok);background:#f0fdf4}
.opt-btn.correct .ol{background:var(--ok);border-color:var(--ok);color:#fff}
.opt-btn.wrong{border-color:var(--bad);background:#fef2f2}
.opt-btn.wrong .ol{background:var(--bad);border-color:var(--bad);color:#fff}
.opt-btn.dim{opacity:.55}
.judge-flag{font-size:14px;font-weight:800;margin:10px 0 2px}
.judge-flag.ok{color:var(--ok)}
.judge-flag.no{color:var(--bad)}
.ans-reveal{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:10px;padding:10px 14px;margin-top:10px;font-size:13.8px}
.ans-reveal .ba{color:#15803d;font-weight:800;font-size:14.5px}
.ans-reveal p{margin:4px 0}
.self-eval{display:flex;gap:10px;margin-top:12px}
.self-eval button{flex:1;border-radius:10px;padding:10px;font-size:14.5px;font-weight:700;cursor:pointer;font-family:inherit}
.self-eval .se-ok{background:#f0fdf4;border:1.5px solid var(--ok);color:var(--ok)}
.self-eval .se-no{background:#fef2f2;border:1.5px solid var(--bad);color:var(--bad)}
.self-eval button:hover{filter:brightness(.96)}
.quiz-foot{display:flex;gap:12px;margin-top:18px}
.quiz-foot button{border:none;border-radius:10px;padding:10px 26px;font-size:14.5px;font-weight:700;cursor:pointer;font-family:inherit}
.quiz-foot .next{background:var(--primary);color:#fff}
.quiz-foot .next:hover{background:var(--primary-deep)}
.quiz-foot .next:disabled{background:#94a3b8;cursor:default}
.quiz-foot .quit{background:#fff;border:1px solid var(--line);color:var(--muted)}
/* 组卷设置 */
.setup-row{display:flex;align-items:center;gap:12px;margin:14px 0;flex-wrap:wrap}
.setup-row select,.setup-row input[type=number]{border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:14px;background:#fff;outline:none}
.setup-row label{font-size:14px;color:var(--muted)}
.mode-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:6px 0 20px}
.mode-card{border:1.5px solid var(--line);border-radius:14px;padding:16px 18px;cursor:pointer;background:#fff;transition:.13s}
.mode-card:hover{border-color:var(--primary)}
.mode-card.on{border-color:var(--primary);background:#eff6ff;box-shadow:0 0 0 1px var(--primary)}
.mode-card .t{font-weight:800;font-size:15px;margin-bottom:3px}
.mode-card .d{font-size:12.8px;color:var(--muted)}
/* 成绩单 */
.score-hero{text-align:center;padding:26px 0 10px}
.score-hero .big{font-size:46px;font-weight:800;color:var(--primary)}
.score-hero .sub{color:var(--muted);font-size:13.5px}
/* 错题本 */
.wb-tabs{display:flex;gap:8px;margin-bottom:16px}
.wb-tabs button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 16px;font-size:13.5px;cursor:pointer;color:var(--muted)}
.wb-tabs button.on{background:var(--primary);border-color:var(--primary);color:#fff}
.wb-item{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:10px 0}
.wb-item .wb-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.wb-item .wc{font-size:12px;color:var(--bad);font-weight:700}
.wb-item .wb-stem{font-size:14px}
.wb-item .wb-ops{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.wb-item .wb-ops button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:4px 13px;font-size:12.5px;cursor:pointer;color:var(--ink)}
.wb-item .wb-ops button:hover{border-color:var(--primary);color:var(--primary)}
.wb-item .wb-ops button.del:hover{border-color:var(--bad);color:var(--bad)}
.empty-tip{text-align:center;color:var(--muted);padding:48px 0;font-size:14px}
/* 进度页 */
.prog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
.ch-prog{background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 16px}
.ch-prog .row1{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.ch-prog .row1 .pct{margin-left:auto;font-size:13px;color:var(--primary);font-weight:700}
.ch-prog .bar{height:7px;background:#e2e8f0;border-radius:99px;overflow:hidden;margin-top:8px}
.ch-prog .bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--primary),#0ea5e9)}
.ch-prog .meta{font-size:11.5px;color:var(--muted);margin-top:6px}
.cal-grid{display:grid;grid-template-columns:repeat(15,1fr);gap:5px;margin-top:10px}
.cal-cell{aspect-ratio:1;border-radius:4px;background:#eef2f6;font-size:9.5px;display:flex;align-items:center;justify-content:center;color:#94a3b8}
.cal-cell.act1{background:#bfdbfe;color:#1e40af}
.cal-cell.act2{background:#60a5fa;color:#fff}
.cal-cell.act3{background:#2563eb;color:#fff}
.cal-cell.today{outline:2px solid var(--primary);outline-offset:1px}
/* 搜索结果 */
.sr-group{margin-bottom:22px}
.sr-group h3{font-size:15px;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.sr-group h3::before{content:"";width:4px;height:16px;border-radius:2px;background:var(--primary)}
.sr-item{display:block;background:#fff;border:1px solid var(--line);border-radius:11px;padding:12px 15px;margin:8px 0;text-decoration:none;color:var(--ink)}
.sr-item:hover{border-color:var(--primary)}
.sr-item .where{font-size:11.5px;color:var(--muted);margin-bottom:2px}
.sr-item .txt{font-size:13.8px}
.sr-item mark{background:#fef08a;border-radius:3px;padding:0 2px}
/* toast */
#toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--dark);color:#fff;border-radius:10px;padding:9px 20px;font-size:13.5px;opacity:0;pointer-events:none;transition:.25s;z-index:200}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media print{.topbar{display:none}main#view{padding-top:0}}