/* =====================================================================
 * PixelAlgo · 组件层 components.css
 * 继承 IncomeResearch 组件 + 教学项目扩展（badge / 代码卡 / KaTeX 容器 /
 * lesson 布局 / TOC / callout）。所有页面共享。
 * 依赖：tokens.css + base.css。
 * =================================================================== */

/* ── 玻璃面板（核心容器）── */
.panel {
  background: linear-gradient(180deg, var(--s2), var(--s1));
  border: 1px solid var(--bd);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
}
.panel::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  border-radius: var(--r-lg) var(--r-lg) 0 0; pointer-events: none;
}
.panel-tight { padding: var(--sp-4); }
.panel-pad   { padding: var(--sp-6); }

/* ── 统计卡片（KPI）── */
.stat {
  background: var(--s1); border: 1px solid var(--bd); border-radius: var(--r-md);
  padding: 13px 14px 11px; transition: transform var(--dur-2), border-color var(--dur-2), background var(--dur-2);
}
.stat:hover { transform: translateY(-2px); border-color: var(--bd2); background: var(--s2); }
.stat .label {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600; margin-bottom: 7px; display: flex; align-items: center; gap: 6px;
}
.stat .value {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 23px; font-weight: 700; letter-spacing: -.02em; line-height: 1.05;
}
.stat .sub { font-size: 10.5px; color: var(--ink-4); margin-top: 4px; letter-spacing: .02em; }

/* 小圆点（状态/图例）*/
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; box-shadow: 0 0 8px currentColor; }

/* ── 表单字段 ── */
.field label { display: block; font-size: 11.5px; color: var(--ink-2); margin-bottom: 6px; font-weight: 500; }
.input, select.input {
  width: 100%; background: rgba(0,0,0,.28); border: 1px solid var(--bd); color: var(--ink);
  border-radius: var(--r-sm); padding: 10px 12px; font-family: var(--font-mono); font-size: 14px;
  transition: border-color var(--dur-1), box-shadow var(--dur-1), background var(--dur-1); outline: none;
}
.input::placeholder { color: var(--ink-4); font-family: var(--font-ui); }
.input:focus, select.input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(94,234,212,.16); background: rgba(0,0,0,.38); }
.input.err { border-color: var(--bad) !important; box-shadow: 0 0 0 3px rgba(248,113,113,.16) !important; }
.input:disabled { opacity: .55; cursor: not-allowed; }
select.input { font-family: var(--font-ui); }
[data-theme="light"] .input, [data-theme="light"] select.input { background: rgba(0,0,0,.04); }
[data-theme="light"] .input:focus, [data-theme="light"] select.input:focus { background: #fff; }
.err-msg { color: var(--bad); font-size: 11px; margin-top: 5px; display: none; letter-spacing: .01em; }
.err-msg.show { display: block; }

/* ── 滑块（teal→coral 渐变轨道，教学项目标志性控件）── */
input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 4px;
  background: linear-gradient(90deg, var(--teal), var(--coral));
  border-radius: 4px; outline: none; opacity: .85;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--bg-1); cursor: pointer; border: 3px solid var(--teal);
  box-shadow: 0 0 12px rgba(94,234,212,.7); transition: transform var(--dur-1);
}
input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.16); }
input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: var(--bg-1);
  cursor: pointer; border: 3px solid var(--teal);
}
input[type=range]:disabled { opacity: .4; }

/* ── 按钮 ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: var(--r-sm); padding: 9px 15px; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all var(--dur-1); border: 1px solid transparent; font-family: inherit;
}
.btn-ghost { background: var(--s2); border-color: var(--bd); color: var(--ink-2); }
.btn-ghost:hover { border-color: var(--bd2); color: var(--ink); background: var(--s3); }
.btn-primary { background: var(--teal); color: #06231f; border-color: var(--teal); }
.btn-primary:hover { background: var(--teal-d); border-color: var(--teal-d); box-shadow: var(--glow-teal); }

/* ── 语言/主题切换组 ── */
.lang-group { display: inline-flex; border-radius: 9px; overflow: hidden; border: 1px solid var(--bd); }
.lang-btn { padding: 7px 10px; font-size: 12px; font-weight: 700; color: var(--ink-3); background: transparent; border: none; cursor: pointer; font-family: inherit; transition: all var(--dur-1); }
.lang-btn.active { background: var(--s3); color: var(--teal); }
.lang-btn:hover:not(.active) { color: var(--ink-2); background: var(--s2); }

/* ── 标签 chip / 选项卡 tab ── */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--r-pill); background: var(--s2); border: 1px solid var(--bd); font-size: 11.5px; color: var(--ink-2); cursor: pointer; transition: all var(--dur-1); font-family: inherit; }
.chip:hover { border-color: var(--teal); color: var(--ink); background: var(--s3); }
.chip.active { border-color: var(--teal); color: var(--teal); background: rgba(94,234,212,.10); }
.tab { padding: 8px 13px; font-size: 13px; color: var(--ink-3); cursor: pointer; border-bottom: 2px solid transparent; transition: all var(--dur-1); font-weight: 500; white-space: nowrap; background: none; border-top: none; border-left: none; border-right: none; font-family: inherit; }
.tab:hover { color: var(--ink-2); }
.tab.active { color: var(--teal); border-bottom-color: var(--teal); }

/* ── 徽章 ── */
.shape-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 9px; font-size: 13px; font-weight: 600; border: 1px solid; }
.spotlight { background: radial-gradient(130% 120% at 0% 0%, rgba(232,176,75,.14), rgba(232,176,75,.02)); border-color: rgba(232,176,75,.28); }

/* 难度徽章（1–5）*/
.badge-diff { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: var(--r-pill); border: 1px solid var(--bd); color: var(--ink-2); }
.badge-diff[data-d="1"], .badge-diff[data-d="2"] { color: var(--good); border-color: rgba(52,211,153,.3); }
.badge-diff[data-d="3"] { color: var(--gold); border-color: rgba(232,176,75,.3); }
.badge-diff[data-d="4"] { color: var(--coral); border-color: rgba(251,113,133,.3); }
.badge-diff[data-d="5"] { color: var(--violet); border-color: rgba(167,139,250,.3); }

/* 类别色点（与难度独立，按类别着色）*/
.cat-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* ── Toast ── */
#toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(18px); background: var(--bg-1); border: 1px solid var(--bd2); color: var(--ink); padding: 11px 18px; border-radius: 11px; font-size: 13px; opacity: 0; transition: all var(--dur-2); z-index: 100; box-shadow: 0 14px 34px rgba(0,0,0,.55); pointer-events: none; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.hint { font-size: 11px; color: var(--ink-4); margin-top: 5px; line-height: 1.45; }

/* ── 折叠区 ── */
details summary { cursor: pointer; list-style: none; }
details summary::-webkit-details-marker { display: none; }
details[open] .summary-arrow { transform: rotate(180deg); }
.summary-arrow { transition: transform var(--dur-2); display: inline-block; }

/* ===================================================================
 * 教学项目扩展组件
 * =================================================================== */

/* ── 课程页布局：左 TOC + 主内容 ── */
.lesson-layout { display: grid; grid-template-columns: var(--lesson-toc-w) minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
@media (max-width: 980px) { .lesson-layout { grid-template-columns: 1fr; } .lesson-toc { display: none; } }
.lesson-toc { position: sticky; top: calc(var(--nav-h) + var(--sp-4)); max-height: calc(100vh - var(--nav-h) - var(--sp-8)); overflow: auto; }
.lesson-toc a { display: block; padding: 6px 10px; font-size: 13px; color: var(--ink-3); border-left: 2px solid var(--bd); border-radius: 0; transition: all var(--dur-1); }
.lesson-toc a:hover { color: var(--ink); border-left-color: var(--bd2); text-decoration: none; }
.lesson-toc a.active { color: var(--teal); border-left-color: var(--teal); background: rgba(94,234,212,.06); }

/* ── 代码卡（带语言标签的代码块容器）── */
.code-card { background: var(--bg-2); border: 1px solid var(--bd); border-radius: var(--r-md); overflow: hidden; }
.code-card__bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: var(--s2); border-bottom: 1px solid var(--bd); font-size: 11px; color: var(--ink-3); font-family: var(--font-mono); }
.code-card pre { padding: var(--sp-4); }

/* ── KaTeX 容器 ── */
.katex-inline { display: inline; }
.katex-block, .formula-card { display: block; margin: var(--sp-4) 0; padding: var(--sp-4) var(--sp-5); background: var(--s1); border: 1px solid var(--bd); border-left: 3px solid var(--teal); border-radius: var(--r-sm); overflow-x: auto; text-align: center; }
.katex { color: var(--katex-color); font-size: 1.05em; }

/* ── Callout（提示/警告/注意）── */
.callout { display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); border: 1px solid var(--bd); background: var(--s1); margin: var(--sp-4) 0; font-size: 14px; }
.callout__icon { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.callout--tip  { border-left: 3px solid var(--teal); }
.callout--note { border-left: 3px solid var(--azure); }
.callout--warn { border-left: 3px solid var(--gold); }
.callout--bad  { border-left: 3px solid var(--coral); }

/* ── KPI 行（多 stat 横排）── */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-3); }

/* ── 顶栏（模型页/门户通用）── */
.topbar { position: sticky; top: 0; z-index: 50; height: var(--nav-h); display: flex; align-items: center; gap: var(--sp-4); padding: 0 var(--sp-5); background: rgba(8,12,23,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--bd); }
[data-theme="light"] .topbar { background: rgba(244,246,251,.78); }
.topbar__brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--ink); }
.topbar__spacer { flex: 1; }

/* ── 演示画布容器 ── */
.canvas-surface, .chart-surface { width: 100%; border-radius: var(--r-md); border: 1px solid var(--bd); background: var(--bg-2); }