/* =========================================================================
 * 知源 · 学情智诊平台 —— 样式（全部走主题变量，换壳不改 CSS）
 * ========================================================================= */
:root{
  --bg:#141019; --bg-2:#1c1622; --panel:#221b2b; --panel-2:#2b2336; --line:#3a2f47;
  --ink:#efe7f5; --ink-2:#c3b6d2; --ink-3:#8b7f99;
  --brand:#c9a55c; --brand-2:#e0c17f; --brand-dim:rgba(201,165,92,.35);
  --ok:#6aa84f; --bad:#d9534f; --warn:#d4a017; --info:#7c9cf5; --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink); font:15px/1.65 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased; padding-bottom:60px;
}
a{color:var(--brand)}
.wrap{max-width:1080px;margin:0 auto;padding:0 14px}

/* ---------- 顶栏 ---------- */
.topbar{
  position:sticky;top:0;z-index:50;background:var(--bg-2);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 14px;backdrop-filter:blur(8px);
}
.brand{font-weight:700;font-size:16px;display:flex;align-items:center;gap:6px;color:var(--ink)}
.brand small{color:var(--ink-3);font-weight:400;font-size:12px}
.cust-chip{
  font-size:12px;color:var(--ink-2);background:var(--panel);border:1px solid var(--line);
  border-radius:999px;padding:4px 10px;white-space:nowrap;max-width:52vw;overflow:hidden;text-overflow:ellipsis;
}
.cust-chip b{color:var(--brand)}

/* ---------- 导航 ---------- */
.nav{
  position:sticky;top:53px;z-index:49;background:var(--bg-2);border-bottom:1px solid var(--line);
  display:flex;gap:4px;overflow-x:auto;padding:6px 10px;scrollbar-width:none;
}
.nav::-webkit-scrollbar{display:none}
.nav button{
  flex:0 0 auto;background:transparent;border:1px solid transparent;color:var(--ink-3);
  border-radius:999px;padding:7px 14px;font-size:14px;cursor:pointer;white-space:nowrap;
}
.nav button.active{background:var(--brand-dim);color:var(--brand-2);border-color:var(--brand-dim);font-weight:600}
.nav button:hover:not(.active){color:var(--ink-2)}

/* ---------- 屏幕 ---------- */
.screen{display:none;padding:16px 0 30px}
.screen.active{display:block}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;margin-bottom:14px;
}
.card-title{font-size:16px;font-weight:700;margin:0 0 4px;display:flex;align-items:center;gap:7px}
.card-sub{color:var(--ink-3);font-size:12.5px;margin:0 0 12px;line-height:1.6}
.hint{color:var(--ink-3);font-size:12px;line-height:1.6}

/* ---------- 按钮 ---------- */
.btn{
  background:var(--brand);color:#141019;border:none;border-radius:10px;
  padding:10px 18px;font-size:14.5px;font-weight:700;cursor:pointer;
}
.btn:hover{background:var(--brand-2)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-line{background:transparent;color:var(--brand);border:1px solid var(--brand-dim);
  border-radius:10px;padding:9px 16px;font-size:14px;cursor:pointer}
.btn-line:hover{background:var(--brand-dim)}
.btn-sm{padding:6px 12px;font-size:13px}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}

/* ---------- 指标 ---------- */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.metric{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:11px 13px}
.metric .label{color:var(--ink-3);font-size:11.5px;margin-bottom:3px}
.metric .value{font-size:19px;font-weight:700;color:var(--brand-2)}
.metric .value.sm{font-size:15px}

/* ---------- 掌握度条 ---------- */
.bar{height:7px;background:var(--panel-2);border-radius:99px;overflow:hidden;margin-top:5px}
.bar i{display:block;height:100%;border-radius:99px;background:var(--brand);transition:width .4s}
.bar i.ok{background:var(--ok)} .bar i.bad{background:var(--bad)} .bar i.warn{background:var(--warn)}

/* ---------- 溯源链 ---------- */
.chain{display:flex;flex-direction:column;gap:0;margin:10px 0}
.chain-node{
  display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--panel-2);
  border:1px solid var(--line);border-radius:10px;
}
.chain-node.root{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,var(--panel-2))}
.chain-node.sym{border-color:var(--warn)}
.chain-arrow{text-align:center;color:var(--ink-3);font-size:15px;line-height:1;padding:3px 0}
.chain-name{flex:1;font-weight:600}
.chain-meta{font-size:12px;color:var(--ink-3);white-space:nowrap}
.chain-tag{font-size:11px;padding:1px 7px;border-radius:99px;border:1px solid var(--line);color:var(--ink-3)}

/* ---------- 根因卡 ---------- */
.root-card{
  background:var(--panel-2);border:1px solid var(--line);border-left:4px solid var(--bad);
  border-radius:10px;padding:13px 15px;margin-bottom:10px;
}
.root-card.top{border-left-color:var(--brand)}
.root-rank{font-size:11.5px;color:var(--ink-3);margin-bottom:3px}
.root-name{font-size:17px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.root-score{font-size:12px;color:var(--brand-2);font-weight:600}
.reasons{margin:8px 0 0;padding-left:16px;color:var(--ink-2);font-size:13px}
.reasons li{margin:2px 0}
.pill{display:inline-block;font-size:11px;padding:2px 8px;border-radius:99px;background:var(--brand-dim);color:var(--brand-2);margin-right:5px}
.pill.bad{background:color-mix(in srgb,var(--bad) 22%,transparent);color:#ffb3b0}
.pill.ok{background:color-mix(in srgb,var(--ok) 22%,transparent);color:#b6e6a1}

/* ---------- 通用列表 ---------- */
.row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:none}
.row .k{color:var(--ink-2)}
.row .v{color:var(--ink);font-weight:600;text-align:right}
.row .v small{color:var(--ink-3);font-weight:400}

/* ---------- 题目 ---------- */
.q{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:12px}
.q-text{font-size:15.5px;margin-bottom:11px;line-height:1.7}
.opt{display:block;width:100%;text-align:left;background:var(--panel);border:1px solid var(--line);
  color:var(--ink);border-radius:9px;padding:10px 13px;margin-bottom:7px;cursor:pointer;font-size:14.5px}
.opt:hover{border-color:var(--brand-dim)}
.opt.correct{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 16%,var(--panel))}
.opt.wrong{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 16%,var(--panel))}
.exp{display:none;margin-top:9px;padding:10px 12px;background:var(--panel);border-left:3px solid var(--brand);
  border-radius:6px;font-size:13px;color:var(--ink-2);line-height:1.7}

/* ---------- 图谱 ---------- */
.graph-box{overflow:auto;border:1px solid var(--line);border-radius:10px;background:var(--bg-2);max-height:70vh}
.graph-legend{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.legend-i{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--ink-3)}
.legend-dot{width:10px;height:10px;border-radius:3px}

/* ---------- 主题卡 ---------- */
.theme-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px}
.theme-card{border:1px solid var(--line);border-radius:12px;padding:14px;cursor:pointer;background:var(--panel-2);position:relative}
.theme-card:hover{border-color:var(--brand-dim)}
.theme-card.active{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-dim)}
.theme-card .tc-name{font-size:15.5px;font-weight:700;display:flex;align-items:center;gap:7px}
.theme-card .tc-tag{font-size:12px;color:var(--ink-3);margin:4px 0 9px}
.swatches{display:flex;gap:5px;margin:9px 0}
.sw{width:20px;height:20px;border-radius:6px;border:1px solid rgba(255,255,255,.14)}
.tc-terms{font-size:11.5px;color:var(--ink-3);line-height:1.6}
.tc-terms b{color:var(--ink-2);font-weight:600}
.tc-check{position:absolute;top:10px;right:12px;color:var(--brand);font-weight:700}

/* ---------- AI 解释 ---------- */
.ai-box{background:var(--panel-2);border:1px solid var(--brand-dim);border-radius:10px;padding:14px;margin-top:11px}
.ai-head{font-size:15px;font-weight:700;color:var(--brand-2);margin-bottom:7px}
.ai-line{margin:6px 0;font-size:13.5px;color:var(--ink-2);line-height:1.7}
.ai-line b{color:var(--ink)}
.ai-loading{color:var(--ink-3);font-size:13px}

/* ---------- 徽章 ---------- */
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.badge{border:1px solid var(--line);border-radius:10px;padding:8px 11px;font-size:12.5px;
  background:var(--panel-2);color:var(--ink-3);text-align:center;min-width:88px}
.badge.on{border-color:var(--brand);color:var(--brand-2);background:var(--brand-dim)}

/* ---------- 页脚 ---------- */
.footer{color:var(--ink-3);font-size:12px;text-align:center;padding:22px 14px 30px;line-height:1.9}
.footer a{color:var(--ink-2)}

@media (max-width:560px){
  .brand small{display:none}
  .cust-chip{max-width:46vw}
  .chain-meta{display:none}
}