/* ============================================================
   解决问题训练站（多页静态站）
   ============================================================ */
:root{
  --ink:#1a2233;
  --ink-2:#4a5568;
  --ink-3:#718096;
  --brand:#1e40af;
  --brand-2:#3b82f6;
  --brand-soft:#eff6ff;
  --bg:#f6f8fc;
  --card:#ffffff;
  --line:#e2e8f0;
  --line-2:#cbd5e1;
  --ok:#047857;
  --ok-soft:#ecfdf5;
  --warn:#b45309;
  --warn-soft:#fffbeb;
  --danger:#b91c1c;
  --danger-soft:#fef2f2;
  --radius:12px;
  --shadow:0 1px 2px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.06);
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  font-size:16px;
  line-height:1.78;
  -webkit-font-smoothing:antialiased;
}

/* ---------- 导航 ---------- */
.nav{
  position:sticky; top:0; z-index:60;
  background:#0f172a; color:#e2e8f0;
  box-shadow:0 1px 0 rgba(255,255,255,.06);
}
.nav-inner{
  max-width:1140px; margin:0 auto; padding:10px 20px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.brand{
  font-weight:800; font-size:16px; letter-spacing:.3px; color:#fff;
  text-decoration:none; margin-right:6px; white-space:nowrap;
}
.brand small{display:block; font-weight:500; font-size:11px; color:#94a3b8; letter-spacing:1px;}
.nav-links{display:flex; gap:2px; flex-wrap:wrap; margin-left:auto;}
.nav a.navlink{
  color:#cbd5e1; text-decoration:none; font-size:13.5px;
  padding:6px 10px; border-radius:7px; white-space:nowrap; transition:.15s;
}
.nav a.navlink:hover{background:#1e293b; color:#fff;}
.nav a.navlink.active{background:var(--brand); color:#fff;}

/* 下拉菜单 */
.nav-item{position:relative;}
.nav-item > a.navlink::after{content:" ▾"; font-size:10px; opacity:.7;}
.dropdown{
  display:none; position:absolute; top:100%; left:0; z-index:80; min-width:210px;
  background:#1e293b; border:1px solid #334155; border-radius:10px; padding:6px;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
}
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown{display:block;}
.dropdown a{
  display:block; color:#cbd5e1; text-decoration:none; font-size:13.5px;
  padding:7px 11px; border-radius:6px; white-space:nowrap;
}
.dropdown a:hover{background:var(--brand); color:#fff;}
.dropdown a.active{background:#334155; color:#fff;}
.nav-progress{
  font-size:12px; color:#94a3b8; padding:4px 10px; border:1px solid #334155; border-radius:999px;
}

/* ---------- 容器 ---------- */
.wrap{max-width:1140px; margin:0 auto; padding:26px 20px 90px;}
.wrap.narrow{max-width:900px;}

/* ---------- 标题 ---------- */
h1{font-size:30px; line-height:1.35; margin:0 0 8px; font-weight:800; letter-spacing:-.2px;}
h2{font-size:22px; margin:38px 0 12px; padding-bottom:8px; border-bottom:2px solid var(--line); font-weight:750;}
h3{font-size:18px; margin:26px 0 10px; font-weight:700;}
h4{font-size:15.5px; margin:18px 0 8px; font-weight:700; color:var(--ink-2);}
p{margin:10px 0;}
a{color:var(--brand);}
a:hover{color:var(--brand-2);}
.lead{font-size:17px; color:var(--ink-2);}
.muted{color:var(--ink-3); font-size:14px;}
small{font-size:13px;}

/* ---------- breadcrumb ---------- */
.crumb{font-size:13px; color:var(--ink-3); margin-bottom:14px;}
.crumb a{color:var(--ink-3); text-decoration:none;}
.crumb a:hover{color:var(--brand);}
.crumb span{margin:0 6px; color:var(--line-2);}

/* ---------- 卡片 ---------- */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 22px; box-shadow:var(--shadow); margin:16px 0;
}
.grid{display:grid; gap:16px;}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.g4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}

.chapter-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px; text-decoration:none; color:inherit; display:block;
  box-shadow:var(--shadow); transition:.16s; position:relative; overflow:hidden;
}
.chapter-card:hover{transform:translateY(-2px); border-color:var(--brand-2); color:inherit;}
.chapter-card .no{
  font-size:12px; font-weight:800; color:var(--brand); letter-spacing:1.5px;
}
.chapter-card h3{margin:4px 0 6px; font-size:18px;}
.chapter-card p{margin:0; font-size:13.5px; color:var(--ink-3); line-height:1.65;}
.badge{
  display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px;
  background:var(--brand-soft); color:var(--brand); margin-left:6px; vertical-align:middle;
}
.badge.hot{background:#fef3c7; color:var(--warn);}
.badge.todo{background:#f1f5f9; color:var(--ink-3);}

/* ---------- 表格 ---------- */
table{width:100%; border-collapse:collapse; margin:14px 0; font-size:14.5px; background:#fff;}
th,td{border:1px solid var(--line); padding:9px 12px; text-align:left; vertical-align:top;}
th{background:#f1f5f9; font-weight:700; font-size:13.5px; color:var(--ink-2);}
tbody tr:nth-child(even){background:#fafbfd;}
td .k{font-weight:700;}
.table-scroll{overflow-x:auto;}

/* ---------- 提示塊 ---------- */
.note{
  border-left:4px solid var(--brand); background:var(--brand-soft);
  padding:12px 16px; border-radius:0 8px 8px 0; margin:14px 0; font-size:14.5px;
}
.note.warn{border-color:var(--warn); background:var(--warn-soft);}
.note.ok{border-color:var(--ok); background:var(--ok-soft);}
.note.danger{border-color:var(--danger); background:var(--danger-soft);}
.note p:first-child{margin-top:0;}
.note p:last-child{margin-bottom:0;}
.note .t{font-weight:800; display:block; margin-bottom:2px;}

/* ---------- 列表 ---------- */
ul,ol{padding-left:22px; margin:10px 0;}
li{margin:5px 0;}
ul.tight li{margin:2px 0;}

/* ---------- 按鈕 ---------- */
.btn{
  display:inline-block; background:var(--brand); color:#fff; border:none; cursor:pointer;
  padding:9px 16px; border-radius:8px; font-size:14px; font-weight:600;
  text-decoration:none; font-family:inherit; transition:.15s;
}
.btn:hover{background:#1a3a9d; color:#fff;}
.btn.ghost{background:#fff; color:var(--brand); border:1px solid var(--line-2);}
.btn.ghost:hover{background:var(--brand-soft); color:var(--brand);}
.btn.gray{background:#64748b;}
.btn.gray:hover{background:#475569;}
.btn.sm{padding:6px 12px; font-size:13px;}
.btn-row{display:flex; gap:10px; flex-wrap:wrap; margin:14px 0;}

/* ---------- 表单 ---------- */
label.f{display:block; font-size:13.5px; font-weight:700; color:var(--ink-2); margin:12px 0 4px;}
input[type=text],input[type=number],textarea,select{
  width:100%; font-family:inherit; font-size:14.5px; color:var(--ink);
  border:1px solid var(--line-2); border-radius:8px; padding:8px 11px; background:#fff;
}
textarea{min-height:76px; resize:vertical; line-height:1.7;}
input:focus,textarea:focus,select:focus{outline:2px solid #bfdbfe; border-color:var(--brand-2);}
fieldset{border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; margin:16px 0; background:#fff;}
legend{font-weight:800; font-size:15px; padding:0 8px; color:var(--brand);}
.checkline{display:flex; align-items:flex-start; gap:9px; margin:8px 0; font-size:14.5px; cursor:pointer;}
.checkline input{margin-top:5px; width:16px; height:16px; flex:0 0 auto;}

/* ---------- 掌握度自評元件 ---------- */
.progress-box{
  background:#fff; border:1px solid var(--line); border-left:4px solid var(--brand);
  border-radius:var(--radius); padding:16px 18px; margin:22px 0; box-shadow:var(--shadow);
}
.progress-box h4{margin:0 0 4px; color:var(--brand);}
.progress-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-top:12px;}
.prog-item{
  border:1px solid var(--line); border-radius:9px; padding:10px 12px; background:#fafbfd;
  display:flex; align-items:center; gap:8px; font-size:14px; cursor:pointer; transition:.15s;
}
.prog-item:hover{border-color:var(--brand-2);}
.prog-item.on{background:var(--ok-soft); border-color:#6ee7b7; font-weight:700;}
.prog-item input{width:16px; height:16px;}
.prog-bar{height:8px; background:#e2e8f0; border-radius:999px; margin-top:12px; overflow:hidden;}
.prog-bar > i{display:block; height:100%; background:linear-gradient(90deg,#3b82f6,#1e40af); width:0; transition:width .3s;}

/* ---------- 测验 ---------- */
.q-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px; margin:16px 0; box-shadow:var(--shadow);
}
.q-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px;}
.q-no{
  background:var(--brand); color:#fff; font-size:12.5px; font-weight:800;
  width:26px; height:26px; border-radius:50%; display:inline-flex;
  align-items:center; justify-content:center; flex:0 0 auto;
}
.q-layer{font-size:11.5px; font-weight:700; padding:2px 9px; border-radius:999px;}
.q-layer.know{background:#dbeafe; color:#1e40af;}
.q-layer.do{background:#d1fae5; color:#047857;}
.q-layer.understand{background:#fef3c7; color:#b45309;}
.q-layer.transfer{background:#ede9fe; color:#6d28d9;}
.q-text{font-weight:600; margin:6px 0 10px;}
.opt{
  display:flex; align-items:flex-start; gap:9px; padding:8px 12px; margin:6px 0;
  border:1px solid var(--line); border-radius:8px; cursor:pointer; font-size:14.5px; transition:.12s;
}
.opt:hover{border-color:var(--brand-2); background:#f8fafc;}
.opt input{margin-top:5px;}
.opt.correct{border-color:#6ee7b7; background:var(--ok-soft);}
.opt.wrong{border-color:#fca5a5; background:var(--danger-soft);}
.explain{
  display:none; margin-top:10px; padding:10px 14px; border-radius:8px;
  background:#f8fafc; border-left:3px solid var(--line-2); font-size:14px; color:var(--ink-2);
}
.explain.show{display:block;}

.result-card{
  background:linear-gradient(135deg,#1e293b,#1e40af); color:#fff;
  border-radius:var(--radius); padding:24px; margin:20px 0; box-shadow:var(--shadow);
}
.result-card h3{margin:0 0 6px; font-size:20px; color:#fff;}
.result-level{font-size:34px; font-weight:800; margin:6px 0;}
.layer-row{display:flex; align-items:center; gap:10px; margin:9px 0; font-size:14px;}
.layer-row .nm{width:78px; flex:0 0 auto; color:#e2e8f0;}
.layer-row .bar{flex:1; height:10px; background:rgba(255,255,255,.18); border-radius:999px; overflow:hidden;}
.layer-row .bar > i{display:block; height:100%; background:#7dd3fc; width:0; transition:width .5s;}
.layer-row .pc{width:52px; text-align:right; font-variant-numeric:tabular-nums;}

/* ---------- TOC ---------- */
.toc{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 20px; margin:18px 0 26px;
}
.toc strong{font-size:13.5px; color:var(--ink-3); letter-spacing:.5px;}
.toc ol{margin:6px 0 0; padding-left:20px; columns:2; column-gap:30px; font-size:14.5px;}
@media(max-width:640px){.toc ol{columns:1;}}

/* ---------- 首頁 hero ---------- */
.hero{
  background:linear-gradient(135deg,#0f172a 0%,#1e3a8a 55%,#1e40af 100%);
  color:#fff; border-radius:16px; padding:34px 32px; margin-bottom:22px;
}
.hero h1{color:#fff; font-size:32px;}
.hero p{color:#c7d7f5; font-size:16px; max-width:760px;}
.hero .btn{background:#fff; color:var(--brand);}
.hero .btn.ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.45);}
.hero .btn.ghost:hover{background:rgba(255,255,255,.12); color:#fff;}
.stat-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-top:20px;}
.stat{background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); border-radius:10px; padding:12px 14px;}
.stat b{display:block; font-size:22px; line-height:1.3;}
.stat span{font-size:12.5px; color:#c7d7f5;}

/* ---------- 章節导航（上下頁） ---------- */
.pager{display:flex; gap:14px; margin-top:44px; flex-wrap:wrap;}
.pager a{
  flex:1 1 240px; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 18px; text-decoration:none; color:inherit; box-shadow:var(--shadow);
}
.pager a:hover{border-color:var(--brand-2); color:inherit;}
.pager .dir{font-size:12px; color:var(--ink-3); letter-spacing:1px;}
.pager .tt{font-weight:700; font-size:15.5px; margin-top:2px;}

/* ---------- 页尾 ---------- */
.footer{
  border-top:1px solid var(--line); margin-top:50px; padding:22px 0 10px;
  font-size:13px; color:var(--ink-3); text-align:center;
}

/* ---------- 选项卡 ---------- */
.tabs{display:flex; gap:6px; margin:18px 0 0; flex-wrap:wrap;}
.tab{
  background:#fff; border:1px solid var(--line); border-bottom:none; cursor:pointer;
  padding:10px 18px; font-size:14.5px; font-weight:600; border-radius:10px 10px 0 0;
  color:var(--ink-2); font-family:inherit; transition:.15s;
}
.tab:hover{background:#f8fafc;}
.tab.on{background:var(--brand); color:#fff; border-color:var(--brand);}
.panel{display:none; background:#fff; border:1px solid var(--line); border-radius:0 12px 12px 12px;
  padding:22px; box-shadow:var(--shadow);}
.panel.on{display:block;}

/* 步骤卡 */
.step-card{border:1px solid var(--line); border-left:4px solid var(--brand); border-radius:10px;
  padding:14px 18px; margin:14px 0; background:#fcfdff;}
.step-card h4{margin:0 0 2px; color:var(--brand); font-size:16px;}
.step-card .goal{font-size:13.5px; color:var(--ink-3); margin:0 0 8px;}
.act-list{font-size:13px; color:var(--ink-2); background:#f1f5f9; border-radius:7px; padding:8px 12px; margin:0 0 10px;}
.act-list b{color:var(--ink);}

/* 练习库条目 */
.lib-item{border:1px solid var(--line); border-radius:10px; padding:13px 16px; margin:11px 0; background:#fcfdff;}
.lib-item .hd{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.lib-item .tt{font-weight:700; font-size:15.5px; flex:1 1 auto;}
.lib-item .meta{font-size:12.5px; color:var(--ink-3);}
.chip{font-size:11.5px; font-weight:700; padding:2px 9px; border-radius:999px; background:#e0e7ff; color:#3730a3;}
.chip.full{background:#d1fae5; color:#047857;}
.chip.part{background:#fef3c7; color:#b45309;}
.lib-body{display:none; margin-top:10px; font-size:14px; white-space:pre-wrap;
  background:#f8fafc; border-radius:8px; padding:12px 14px; line-height:1.75;}
.lib-body.show{display:block;}

/* 迷你进度条 */
.bar-mini{display:inline-block; width:88px; height:8px; background:#e2e8f0; border-radius:999px; overflow:hidden; vertical-align:middle;}
.bar-mini > i{display:block; height:100%; background:linear-gradient(90deg,#3b82f6,#1e40af);}

/* 贡献者卡片 */
.contrib-card{border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px;
  margin:14px 0; background:#fff; box-shadow:var(--shadow); transition:.16s;}
.contrib-card:hover{border-color:var(--line-2);}
.c-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.c-avatar{width:42px; height:42px; flex:0 0 auto; border-radius:50%; background:linear-gradient(135deg,#1e40af,#3b82f6);
  color:#fff; font-weight:800; font-size:18px; display:inline-flex; align-items:center; justify-content:center;}
.c-id{flex:1 1 180px; min-width:0;}
.c-name{font-weight:700; font-size:16px;}
.c-meta{font-size:12.5px; color:var(--ink-3);}
.c-badges{display:flex; gap:6px; flex-wrap:wrap; margin-left:auto;}
.cbadge{display:inline-block; font-size:11.5px; font-weight:700; padding:2px 9px;
  border-radius:999px; border:1px solid transparent; white-space:nowrap;}
.c-items{margin:10px 0 0; padding-left:22px; font-size:14.5px;}
.c-items li{margin:4px 0;}
.legend-item{display:flex; align-items:center; gap:10px; margin:9px 0; font-size:14px; flex-wrap:wrap;}
.legend-item .cbadge{flex:0 0 auto; min-width:56px; text-align:center;}

/* 二维码 */
.qr-box{margin-top:14px; text-align:center;}
.qr-box img{width:200px; max-width:70%; height:auto; border:1px solid var(--line);
  border-radius:10px; padding:6px; background:#fff;}
@media(max-width:520px){ .qr-box img{width:170px;} }

/* ---------- 打印 ---------- */
@media print{
  .nav,.btn-row,.pager,.toc,.no-print{display:none !important;}
  body{background:#fff; font-size:11.5pt;}
  .wrap{max-width:100%; padding:0;}
  .card,.q-card,fieldset,.progress-box{box-shadow:none; break-inside:avoid; page-break-inside:avoid;}
  table{break-inside:auto;}
  tr{break-inside:avoid;}
  h2{break-after:avoid;}
  a{color:#000; text-decoration:none;}
  .result-card{background:#fff; color:#000; border:2px solid #000;}
  .result-card h3{color:#000;}
}