/* ==========================================================================
   错题本 - 家长端  共享设计系统 (素雅 · 企业精英风格)
   深蓝(navy) + 金铜(gold) 主色，暖白纸感背景，克制的边框与阴影
   ========================================================================== */

:root{
  /* 品牌色：深蓝 */
  --navy-900:#0F1B30;
  --navy-800:#15243D;
  --navy-700:#1D3357;
  --navy-600:#264776;
  --navy-500:#335C99;

  /* 强调色：金铜（用于 AI / 精选 / 重点） */
  --gold-700:#8C6A2E;
  --gold-600:#A67C3D;
  --gold-500:#BC935A;
  --gold-100:#F2E6D0;
  --gold-50:#F8F1E3;

  /* 中性 / 背景 */
  --bg:#F5F4EF;
  --surface:#FFFFFF;
  --surface-2:#FBFAF6;
  --border:#E4E0D6;
  --border-strong:#D2CCBC;
  --border-accent:var(--gold-500);

  /* 文字 */
  --text-primary:#20242C;
  --text-secondary:#5B616C;
  --text-muted:#98A0AC;
  --text-accent:var(--gold-700);
  --text-on-navy:#F2F4F8;
  --text-on-navy-dim:#AEBBD1;

  /* 语义色 */
  --success:#2E7D5B;
  --warning:#B4802B;
  --danger:#B23B33;
  --bg-accent:var(--gold-50);
  --fill-accent:var(--navy-700);

  --font-sans:"Microsoft YaHei","PingFang SC","Helvetica Neue",Arial,sans-serif;
  --radius:8px;
  --radius-lg:12px;
  --shadow-sm:0 1px 2px rgba(15,27,48,.06), 0 1px 1px rgba(15,27,48,.04);
  --shadow-md:0 8px 24px rgba(15,27,48,.08);
}

*{ margin:0; padding:0; box-sizing:border-box; font-family:var(--font-sans); }
html,body{ background:var(--bg); color:var(--text-primary); }
body{ min-width:1200px; -webkit-font-smoothing:antialiased; }
a{ color:inherit; }

/* ---------- 顶部导航（素雅企业风：浅底 + 细分隔线） ---------- */
.site-hdr{
  height:64px; display:flex; align-items:center; padding:0 32px;
  background:var(--surface); border-bottom:1px solid var(--border);
}
.site-hdr .brand{ display:flex; align-items:baseline; gap:10px; text-decoration:none; }
.site-hdr .logo{ color:var(--navy-800); font-size:19px; font-weight:700; letter-spacing:.3px; }
.site-hdr .logo .mark{ color:var(--gold-600); }
.site-hdr .sub{ color:var(--text-muted); font-size:13px; padding-left:10px; border-left:1px solid var(--border-strong); }
.site-hdr .user{ margin-left:auto; color:var(--text-secondary); font-size:13.5px; display:flex; align-items:center; gap:10px; }
.site-hdr .user a{ color:var(--text-muted); font-size:12px; text-decoration:none; padding:3px 8px; border-radius:5px; transition:background .15s, color .15s; }
.site-hdr .user a:hover{ background:var(--surface-2); color:var(--navy-700); }
.site-hdr .avatar{
  width:32px; height:32px; border-radius:50%;
  background:linear-gradient(135deg,var(--gold-500),var(--gold-700));
  display:flex; align-items:center; justify-content:center;
  color:var(--navy-900); font-size:13px; font-weight:600;
  border:1px solid rgba(15,27,48,.08);
}

/* ---------- 学科 Tab（素雅企业风：浅底 + 细下划线） ---------- */
.site-tabs{ height:48px; background:var(--surface-2); border-bottom:1px solid var(--border); display:flex; padding:0 32px; gap:4px; }
.site-tabs a{
  display:flex; align-items:center; justify-content:center; padding:0 20px;
  color:var(--text-secondary); font-size:14px; text-decoration:none;
  border-bottom:2px solid transparent; transition:color .15s, border-color .15s;
}
.site-tabs a:hover{ color:var(--navy-700); }
.site-tabs a.on{ color:var(--navy-800); font-weight:700; border-bottom-color:var(--navy-700); }

/* ---------- 次级导航条（AI 页返回） ---------- */
.subnav{
  height:46px; background:var(--surface); border-bottom:1px solid var(--border);
  display:flex; align-items:center; padding:0 32px; gap:8px;
}
.subnav .back{
  display:flex; align-items:center; gap:6px; font-size:13.5px; color:var(--text-secondary);
  text-decoration:none; padding:5px 10px; border-radius:6px; transition:background .15s,color .15s;
}
.subnav .back:hover{ background:var(--surface-2); color:var(--text-primary); }
.subnav .crumb-sep{ color:var(--border-strong); font-size:13px; }
.subnav .crumb-cur{ font-size:13.5px; color:var(--text-primary); font-weight:600; }

/* ---------- 布局容器 ---------- */
.wrap{ max-width:1180px; margin:26px auto; padding:0 32px; }
.wrap-wide{ max-width:1320px; margin:22px auto; padding:0 32px; }

.page-tit{ font-size:19px; font-weight:700; letter-spacing:.2px; color:var(--text-primary); }
.page-sub{ font-size:13px; color:var(--text-muted); margin-top:6px; }

/* ---------- 按钮 ---------- */
.btn{
  border:none; border-radius:6px; cursor:pointer; font-size:13.5px;
  padding:0 18px; height:34px; line-height:34px; font-weight:500;
  transition:background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn-outline{ background:var(--surface); border:1px solid var(--border-strong); color:var(--text-secondary); }
.btn-outline:hover{ border-color:var(--navy-600); color:var(--navy-700); }
.btn-primary{ background:var(--navy-700); color:#fff; }
.btn-primary:hover{ background:var(--navy-800); }
.btn-gold{ background:var(--gold-600); color:#fff; }
.btn-gold:hover{ background:var(--gold-700); }
.btn:disabled,.btn[disabled]{ opacity:.55; cursor:not-allowed; }

.btn-sm{ font-size:12.5px; height:28px; line-height:26px; padding:0 13px; border-radius:5px; }
.btn-ai{ background:var(--gold-50); border:1px solid var(--gold-500); color:var(--gold-700); }
.btn-ai:hover{ background:var(--gold-500); color:#fff; }
.btn-go{ background:#fff; border:1px solid var(--navy-500); color:var(--navy-600); }
.btn-go:hover{ background:var(--navy-600); color:#fff; }
.btn-go[disabled]{ color:var(--text-muted); border-color:var(--border); background:var(--surface-2); }

/* ---------- 卡片 / 面板 ---------- */
.panel{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }

.card{
  background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--navy-600);
  border-radius:var(--radius-lg); padding:16px 20px; display:flex; gap:20px;
  position:relative; box-shadow:var(--shadow-sm); transition:box-shadow .15s, transform .15s;
}
.card:hover{ box-shadow:var(--shadow-md); }
.thumb{
  width:100px; height:88px; background:var(--surface-2); border:1px solid var(--border);
  border-radius:8px; display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); font-size:12px; flex-shrink:0;
}
.cinfo{ flex:1; min-width:0; }
.ctit{ font-size:15px; font-weight:700; color:var(--text-primary); }
.cexc{ font-size:13px; color:var(--text-secondary); margin-top:6px; line-height:1.55; }
.cmeta{ font-size:12px; color:var(--text-muted); margin-top:9px; }
.cbtns{ display:flex; gap:8px; margin-top:12px; }

/* ---------- 标签 / 徽章 ---------- */
.tag{
  position:absolute; right:20px; top:16px; height:24px; padding:0 13px;
  border-radius:20px; color:#fff; font-size:12px; line-height:24px; font-weight:500;
}
.tag-g{ background:var(--success); }
.tag-o{ background:var(--warning); }
.tag-n{ background:var(--navy-500); }

.badge{ font-size:11px; padding:2px 9px; border-radius:20px; line-height:1.7; font-weight:500; }

.link{ color:var(--navy-600); cursor:pointer; text-decoration:none; }
.link:hover{ color:var(--navy-800); text-decoration:underline; }

/* ---------- 表单元素 ---------- */
.chips{ display:flex; gap:10px; }
.chip{
  min-width:80px; height:34px; line-height:32px; text-align:center; padding:0 14px;
  border:1px solid var(--border-strong); border-radius:6px; background:#fff;
  font-size:13px; color:var(--text-secondary); cursor:pointer; transition:all .15s;
}
.chip:hover{ border-color:var(--navy-500); color:var(--navy-700); }
.chip.on{ background:var(--navy-700); color:#fff; border-color:var(--navy-700); }

.inp{
  height:34px; border:1px solid var(--border-strong); border-radius:6px;
  background:var(--surface-2); padding:0 12px; font-size:13px; color:var(--text-primary); outline:none;
}
.inp:focus{ border-color:var(--navy-600); background:#fff; }

.tarea{
  width:100%; height:140px; border:1px solid var(--border-strong); border-radius:8px;
  background:var(--surface-2); padding:12px; font-size:13px; line-height:1.6; resize:none; outline:none; color:var(--text-primary);
}
.tarea:focus{ border-color:var(--navy-600); background:#fff; }

.upl{
  width:200px; height:170px; border:1px dashed var(--border-strong); border-radius:10px;
  background:var(--surface-2); display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer;
  transition:border-color .15s, background .15s;
}
.upl:hover{ border-color:var(--navy-500); background:#fff; }
.upl .plus{ font-size:30px; color:var(--text-muted); line-height:1; font-weight:300; }
.upl .txt{ font-size:12px; color:var(--text-muted); margin-top:10px; }
.hasimg{
  width:200px; height:170px; border:1px solid var(--border); border-radius:10px;
  background:var(--gold-50); display:flex; align-items:center; justify-content:center; color:var(--gold-700); font-size:13px;
}

/* ---------- 图标（内联 SVG，line 风格） ---------- */
.icon{ width:1em; height:1em; display:inline-block; vertical-align:-0.15em; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.icon-fill{ fill:currentColor; stroke:none; }

/* ---------- 拖拽分栏条 ---------- */
.col-resizer{
  width:6px; flex:0 0 6px; cursor:col-resize; position:relative; background:transparent;
}
.col-resizer::after{
  content:''; position:absolute; top:0; bottom:0; left:2px; width:2px; border-radius:2px;
  background:var(--border-strong); transition:background .15s;
}
.col-resizer:hover::after,
.col-resizer.dragging::after{ background:var(--gold-500); }

/* ---------- 模型选择下拉框 ---------- */
.model-select{
  height:32px; border:1px solid var(--border-strong); border-radius:6px;
  background:var(--surface-2); padding:0 10px; font-size:12.5px; color:var(--text-primary);
  outline:none; cursor:pointer;
}
.model-select:focus,.model-select:hover{ border-color:var(--navy-500); background:#fff; }

/* ---------- "已选题目" 卡片（assign.html 回填展示） ---------- */
.picked-item{
  display:flex; align-items:center; gap:10px; border:1px solid var(--gold-500);
  background:var(--gold-50); border-radius:8px; padding:8px 11px;
}
.picked-item .pi-tit{ flex:1; font-size:13px; color:var(--text-primary); line-height:1.45; }
.picked-item .pi-close{
  width:20px; height:20px; border-radius:50%; border:none; background:transparent;
  color:var(--text-muted); cursor:pointer; font-size:14px; line-height:1; flex-shrink:0;
}
.picked-item .pi-close:hover{ background:rgba(0,0,0,.06); color:var(--danger); }

/* ---------- AI 页当前学科指示徽章 ---------- */
.subject-pill{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--gold-700);
  background:var(--gold-50); border:1px solid var(--gold-500); border-radius:20px; padding:4px 12px;
}

/* ---------- 掌握度 / 薄弱点进度条（overview 与 AI 页共用） ---------- */
.mastery-row{ margin-bottom:2px; }
.mastery-bar{ height:6px; background:var(--surface-2); border-radius:20px; overflow:hidden; margin-top:5px; }
.mastery-fill{ height:100%; border-radius:20px; }

/* ---------- 总览 Dashboard：KPI 统计卡 ---------- */
.stat-tile{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px 18px; box-shadow:var(--shadow-sm); }
.stat-tile .st-label{ font-size:12px; color:var(--text-muted); }
.stat-tile .st-value{ font-size:26px; font-weight:700; color:var(--text-primary); margin-top:8px; line-height:1.2; }
.stat-tile .st-sub{ font-size:12px; color:var(--text-secondary); margin-top:8px; line-height:1.5; }

/* ---------- 总览 Dashboard：学科卡片（可点击进入详情） ---------- */
.subject-card{
  --sc-color: var(--navy-600);
  display:block; background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--sc-color);
  border-radius:var(--radius-lg); padding:18px 20px; box-shadow:var(--shadow-sm); cursor:pointer;
  text-decoration:none; transition:box-shadow .15s, transform .15s;
}
.subject-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-1px); }
.subject-card .sc-head{ display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.subject-card .sc-dot{ width:9px; height:9px; border-radius:50%; background:var(--sc-color); flex-shrink:0; }
.subject-card .sc-name{ font-size:15.5px; font-weight:700; color:var(--text-primary); }
.subject-card .sc-count{ margin-left:auto; font-size:12px; color:var(--text-muted); }
.subject-card .sc-weak-lb{ font-size:11px; color:var(--text-muted); margin-bottom:8px; }
.subject-card .sc-bars{ display:flex; flex-direction:column; gap:10px; }
.subject-card .sc-meta{ display:flex; justify-content:space-between; align-items:center; margin-top:16px; padding-top:13px; border-top:1px solid var(--border); font-size:12px; color:var(--text-secondary); }
.subject-card .sc-go{ color:var(--navy-600); font-weight:600; }