/* 基础样式 - 在线学习平台 */
:root {
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --bg: #f1f5f9;
  --card: #ffffff;
  --border: #e2e8f0;
  --text: #1e293b;
  --muted: #64748b;
  --green: #16a34a;
  --red: #dc2626;
  --amber: #d97706;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
  background: var(--bg); color: var(--text); font-size: 14px;
}
a { color: var(--primary); text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: 14px; }

/* 布局 */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1e3a8a, #2563eb);
}
.login-card {
  background: #fff; border-radius: 14px; padding: 36px 32px; width: 360px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.login-card h1 { font-size: 20px; text-align: center; margin-bottom: 6px; color: var(--primary-dark); }
.login-card .sub { text-align: center; color: var(--muted); margin-bottom: 22px; font-size: 13px; }
.login-card .err { color: var(--red); font-size: 13px; min-height: 18px; margin-bottom: 8px; text-align: center; }
.login-card input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
  margin-bottom: 14px; outline: none;
}
.login-card input:focus { border-color: var(--primary); }
.login-card button {
  width: 100%; padding: 11px; background: var(--primary); color: #fff; border: none;
  border-radius: 8px; font-size: 15px;
}
.login-card button:hover { background: var(--primary-dark); }

.app { display: flex; height: 100vh; overflow: hidden; }
.sidebar {
  width: 200px; background: #0f172a; color: #cbd5e1; flex-shrink: 0;
  display: flex; flex-direction: column;
}
.sidebar .brand { padding: 18px 16px; font-size: 16px; color: #fff; border-bottom: 1px solid #1e293b; }
.sidebar .brand small { display: block; color: #64748b; font-size: 11px; margin-top: 4px; }
.sidebar nav { flex: 1; padding: 10px 0; }
.sidebar nav a {
  display: block; padding: 11px 18px; color: #cbd5e1; border-left: 3px solid transparent;
}
.sidebar nav a.active, .sidebar nav a:hover { background: #1e293b; color: #fff; border-left-color: var(--primary); }
.sidebar .userbox { padding: 14px 16px; border-top: 1px solid #1e293b; font-size: 13px; }
.sidebar .userbox .role { color: #94a3b8; margin-bottom: 8px; }
.sidebar .userbox a { color: #f87171; }

.main { flex: 1; padding: 24px 28px; min-width: 0; }
.page-title { font-size: 20px; font-weight: 600; margin-bottom: 6px; }
.page-desc { color: var(--muted); margin-bottom: 18px; }
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 18px; margin-bottom: 16px;
}
.card h3 { font-size: 15px; margin-bottom: 12px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* 表单 */
label.f { display: block; margin-bottom: 12px; }
label.f span { display: block; margin-bottom: 5px; color: var(--muted); }
input.t, textarea.t, select.t {
  width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; outline: none;
}
textarea.t { min-height: 80px; resize: vertical; }
input.t:focus, textarea.t:focus { border-color: var(--primary); }

.btn {
  padding: 8px 16px; border-radius: 8px; border: 1px solid var(--border);
  background: #fff; color: var(--text); font-size: 13px;
}
.btn:hover { background: #f8fafc; }
.btn-p { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-p:hover { background: var(--primary-dark); }
.btn-g { background: var(--green); border-color: var(--green); color: #fff; }
.btn-r { background: #fff; border-color: #fecaca; color: var(--red); }
.btn-r:hover { background: #fef2f2; }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* 表格 */
table.tb { width: 100%; border-collapse: collapse; background: var(--card); }
table.tb th, table.tb td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); font-size: 13px; }
table.tb th { background: #f8fafc; color: var(--muted); font-weight: 600; white-space: nowrap; }
table.tb tr:hover td { background: #f8fafc; }

.tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; }
.tag-g { background: #dcfce7; color: #15803d; }
.tag-b { background: #dbeafe; color: #1d4ed8; }
.tag-y { background: #fef3c7; color: #b45309; }
.tag-r { background: #fee2e2; color: #b91c1c; }
.tag-s { background: #e2e8f0; color: #475569; }

.progress-bar { height: 8px; background: #e2e8f0; border-radius: 999px; overflow: hidden; min-width: 90px; }
.progress-bar i { display: block; height: 100%; background: var(--primary); }
.progress-bar.done i { background: var(--green); }

/* 模态 */
.modal-mask {
  position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 50;
  display: flex; align-items: center; justify-content: center;
}
.modal {
  background: #fff; border-radius: 12px; width: 560px; max-width: 94vw;
  max-height: 90vh; overflow: auto; padding: 22px 24px;
}
.modal h3 { margin-bottom: 16px; }
.modal .m-foot { margin-top: 18px; display: flex; gap: 10px; justify-content: flex-end; }

/* 学习页 */
.learn-wrap { display: flex; gap: 18px; align-items: flex-start; }
.learn-main { flex: 1; min-width: 0; }
.learn-side { width: 280px; flex-shrink: 0; }
.video-box { position: relative; background: #000; border-radius: 10px; overflow: hidden; }
.video-box video { width: 100%; display: block; }
.video-cover-layer { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.video-cover-layer .cvrect { position: absolute; background: #000 !important; border: none !important; }
.text-content { white-space: pre-wrap; line-height: 1.9; font-size: 15px; }
.empty { color: var(--muted); text-align: center; padding: 40px 0; }

/* 自建播放器（学生端；全屏仅当资料被老师允许时提供） */
.vplayer { position: relative; background: #000; border-radius: 10px; overflow: hidden; }
.vplayer .video-box video { max-height: 62vh; }
.vrate-menu {
  position: absolute; bottom: 44px; right: 10px; z-index: 30;
  background: #0f172a; border: 1px solid #334155; border-radius: 8px;
  padding: 4px; box-shadow: 0 4px 16px rgba(0,0,0,.5);
}
.vrate-item { padding: 7px 16px; cursor: pointer; border-radius: 6px; font-size: 13px; white-space: nowrap; color: #e2e8f0; }
.vrate-item:hover { background: #1e293b; }
.vrate-item.on { color: #60a5fa; font-weight: 700; }
/* 声音增强弹层 */
.vvol-pop {
  position: absolute; bottom: 44px; right: 10px; z-index: 30;
  background: #0f172a; border: 1px solid #334155; border-radius: 8px;
  padding: 10px 12px; box-shadow: 0 4px 16px rgba(0,0,0,.5); width: 230px;
}
.vvol-head { font-size: 12px; color: #cbd5e1; margin-bottom: 8px; }
.vvol-row { display: flex; align-items: center; gap: 10px; }
.vvol-row input[type=range] { flex: 1; -webkit-appearance: none; appearance: none; height: 4px;
  background: #334155; border-radius: 2px; outline: none; cursor: pointer; }
.vvol-row input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fbbf24; border: none;
}
.vvol-row input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fbbf24; border: none; }
.vvol-val { font-size: 13px; color: #fbbf24; font-weight: 700; min-width: 34px; text-align: right; }
.vvol-note { font-size: 11px; color: #64748b; margin-top: 8px; }
.vc-btn.on { color: #fbbf24; }
.vplayer:fullscreen {
  background: #000; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.vplayer:fullscreen .video-box.fs { flex: none; }
.vplayer:fullscreen .video-box.fs video { width: 100%; height: 100%; object-fit: fill; max-height: none !important; }
.vplayer:fullscreen .vctrl { flex-shrink: 0; width: 100%; }
.vctrl {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  background: #0b0f19; color: #fff; user-select: none;
}
.vc-btn {
  background: none; border: none; color: #fff; font-size: 15px; cursor: pointer;
  padding: 4px 8px; border-radius: 6px; line-height: 1;
}
.vc-btn:hover { background: rgba(255,255,255,.15); }
.vc-time { font-size: 12px; color: #cbd5e1; font-variant-numeric: tabular-nums; min-width: 36px; }
.vctrl input[type=range] {
  flex: 1; min-width: 60px; height: 4px; -webkit-appearance: none; appearance: none;
  background: #334155; border-radius: 2px; outline: none; cursor: pointer;
}
.vctrl input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 12px; height: 12px;
  border-radius: 50%; background: #60a5fa; border: none;
}
.vctrl input[type=range]::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%; background: #60a5fa; border: none;
}

/* 遮盖编辑器 */
.cover-editor { position: relative; display: inline-block; max-width: 100%; }
.cover-editor video { width: 100%; display: block; }
.cover-canvas { position: absolute; inset: 0; cursor: crosshair; }
.cv-rect {
  position: absolute; border: 2px solid #f59e0b; background: rgba(245,158,11,.25);
  box-sizing: border-box;
}
.cv-rect.active { border-color: #ef4444; background: rgba(239,68,68,.3); }
.cv-rect .hint { position: absolute; top: -24px; left: 0; background: rgba(0,0,0,.75); color: #fff;
  font-size: 11px; padding: 2px 8px; border-radius: 4px; white-space: nowrap; }
.cv-handle { position: absolute; width: 10px; height: 10px; background: #fff; border: 2px solid #f59e0b;
  border-radius: 50%; }
.cv-handle.se { right: -6px; bottom: -6px; cursor: nwse-resize; }
.cv-handle.move { left: -14px; top: 50%; margin-top: -5px; cursor: move; display: none; }

/* 学生视角预览：遮盖区显示纯黑实况遮挡 */
.cover-canvas.preview { cursor: default; }
.cover-canvas.preview .cv-rect {
  border: none; background: #000 !important; opacity: 1 !important;
}
.cover-canvas.preview .cv-rect .hint,
.cover-canvas.preview .cv-rect .cv-handle { display: none; }

.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.stat-card .n { font-size: 22px; font-weight: 700; color: var(--primary-dark); }
.stat-card .l { color: var(--muted); font-size: 12px; margin-top: 4px; }
.timeline { list-style: none; }
.timeline li { padding: 8px 0; border-bottom: 1px dashed var(--border); font-size: 13px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.center { text-align: center; }
.mt8 { margin-top: 8px; } .mt16 { margin-top: 16px; }
.hidden { display: none !important; }
.flex1 { flex: 1; }

/* ===== 移动端适配 ===== */
.main { overflow-x: auto; }
@media (max-width: 860px) {
  body { font-size: 15px; }
  /* 窄屏：恢复为整页纵向滚动（侧栏变横向顶栏），覆盖桌面端的固定高度布局 */
  .app { flex-direction: column; height: auto; overflow: visible; }
  html, body { height: auto; overflow: auto; }
  .sidebar {
    width: 100%; height: auto; position: static; flex-direction: row; align-items: center;
    border-bottom: 1px solid #1e293b; overflow-x: auto;
  }
  .sidebar nav { min-height: 0; overflow-x: auto; overflow-y: hidden; }
  .main { overflow: visible; }
  .main > .pg-head { position: static; margin: 0 0 14px; padding: 0 0 12px; background: none; border-bottom: none; backdrop-filter: none; }
  .tb thead th { position: static; }
  .sidebar .brand { padding: 10px 12px; border-bottom: none; white-space: nowrap; font-size: 15px; }
  .sidebar .brand small { display: none; }
  .sidebar nav { display: flex; flex: 1; padding: 0; overflow-x: auto; }
  .sidebar nav a {
    padding: 12px 10px; white-space: nowrap; font-size: 14px;
    border-left: none; border-bottom: 3px solid transparent;
  }
  .sidebar nav a.active, .sidebar nav a:hover {
    background: #1e293b; border-bottom-color: var(--primary); border-left: none;
  }
  .sidebar .userbox {
    padding: 8px 10px; border-top: none; white-space: nowrap; flex-shrink: 0;
  }
  .sidebar .userbox .role { display: inline; margin-right: 8px; }
  .main { padding: 14px 10px; }
  .page-title { font-size: 18px; }
  .card { padding: 14px; }
  /* 表格窄屏横向滚动（外层 .main 已 overflow-x） */
  table.tb { min-width: 560px; }
  .stat-cards { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  /* 两列布局改单列 */
  .grid { grid-template-columns: 1fr !important; }
  .learn-wrap { flex-direction: column; }
  .learn-side { width: 100%; }
  .video-box video { max-height: 46vh; }
  .vplayer .video-box video { max-height: 46vh; }
  .cover-editor video { max-height: 40vh; }
  .modal { width: 96vw; padding: 16px; }
  .login-card { width: 92vw; }
  .row .btn { margin-bottom: 4px; }
  .cover-canvas { cursor: crosshair; }
}


/* ---- 点名工具 ---- */
.rc-big { text-align:center; padding:10px 0 4px; }
.rc-name { font-size:30px; font-weight:700; color:#1d4ed8; letter-spacing:2px; margin-bottom:10px; }
.rc-sub { display:flex; gap:18px; justify-content:center; font-size:14px; margin-bottom:8px; }
.rc-total { font-size:13px; color:#64748b; margin-bottom:4px; }


/* ---- AI 生成页 ---- */
.ai-wrap { display:grid; grid-template-columns:300px 1fr; gap:14px; align-items:start; }
@media (max-width: 900px) { .ai-wrap { grid-template-columns:1fr; } }
.ai-side { max-height:74vh; overflow:auto; }
.ai-matlist { margin-top:10px; border-top:1px solid var(--border); }
.ai-matitem { display:flex; gap:8px; align-items:flex-start; padding:7px 2px; border-bottom:1px solid var(--border); cursor:pointer; }
.ai-matitem:hover { background:#f8fafc; }
.ai-mt { font-size:13px; font-weight:600; line-height:1.35; }
.ai-main { display:flex; flex-direction:column; min-height:70vh; }
.ai-msgs { flex:1; overflow:auto; padding:12px 2px; max-height:52vh; }
.ai-msg { margin-bottom:14px; }
.ai-role { font-size:12px; color:#64748b; margin-bottom:4px; }
.ai-msg.user .ai-text { background:#eef2ff; border:1px solid #c7d2fe; }
.ai-msg.assistant .ai-text { background:#f8fafc; border:1px solid var(--border); }
.ai-text { white-space:pre-wrap; word-break:break-word; padding:10px 12px; border-radius:8px; font-size:14px; line-height:1.65; }
.ai-refs { margin-top:6px; font-size:12px; color:#475569; }
.ai-refs div { padding:4px 0; border-top:1px dashed var(--border); white-space:pre-wrap; }
.ai-genbar { display:flex; gap:8px; align-items:center; padding-top:10px; border-top:1px solid var(--border); }
.ai-genbar .t { flex:1; }
.ai-input { display:flex; gap:8px; align-items:flex-end; margin-top:10px; }
.ai-input textarea { flex:1; min-height:64px; padding:9px 10px; border:1px solid var(--border); border-radius:8px; font-size:14px; font-family:inherit; resize:vertical; }
.ai-input textarea:focus { outline:none; border-color:#1d4ed8; }


/* ---- 表格布局兜底（2026-09-16）---- */
/* 不要用 <td class="row">：display:flex 的 <td> 不再是表格单元，浏览器会插一层匿名
   表格单元，列数一多就会错位（操作列内容视觉上跑到相邻列）。统一写成 <td><div class="row">。
   下面两条规则是兜底：万一还有 td 被赋 row 类，强制恢复表格单元；单元格内不换行。 */
table.tb td.row { display: table-cell; }
table.tb td > .row, table.tb td.row { flex-wrap: nowrap; }
/* 宽表在窄窗口下横向滚动，避免列被挤压变形 */
.tb-scroll { width: 100%; overflow-x: auto; }
.tb-scroll > table.tb { min-width: 860px; }


/* ==================================================================
   设计系统 v2（2026-09-18）—— 统一视觉：专业 / 大气 / 易用
   仅新增或覆写既有同名类，不改任何 ID/结构契约，其他页面自动受益。
   ================================================================== */
:root{
  --bg:#f4f6fb; --card:#ffffff; --border:#e6eaf2; --border-2:#dbe1ea;
  --text:#0f172a; --muted:#64748b; --muted-2:#94a3b8;
  --primary:#2563eb; --primary-dark:#1d4ed8; --primary-soft:#eff4ff;
  --ring:0 0 0 3px rgba(37,99,235,.14);
  --green:#15a34a; --red:#dc2626; --amber:#d97706; --violet:#7c3aed;
  --radius:14px; --radius-sm:9px;
  --sh-1:0 1px 2px rgba(15,23,42,.05), 0 1px 3px rgba(15,23,42,.06);
  --sh-2:0 6px 20px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.04);
  --sidebar-w:214px;
}
html, body{ height:100%; }
body{
  background:linear-gradient(180deg,#f1f5fa 0,#eef2f8 260px,var(--bg) 100%);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  /* 桌面端：整页不滚动，滚动发生在侧栏导航区与主区（2026-09-19） */
  overflow:hidden;
}
/* 主区滚动条美化 */
.main::-webkit-scrollbar{ width:10px; height:10px; }
.main::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:5px; border:2px solid transparent; background-clip:content-box; }
.main::-webkit-scrollbar-thumb:hover{ background:#94a3b8; background-clip:content-box; }
.main::-webkit-scrollbar-track{ background:transparent; }

/* ---------- 侧边导航 ---------- */
.sidebar{
  width:var(--sidebar-w); flex-shrink:0;
  background:linear-gradient(180deg,#0b1220 0,#0f1c33 55%,#0b1220 100%);
  border-right:1px solid rgba(148,163,184,.12);
  /* 固定侧栏：品牌区与用户区始终可见，仅导航区内部滚动（2026-09-19 布局优化） */
  height:100vh; position:sticky; top:0;
  display:flex; flex-direction:column; overflow:hidden;
}
.sidebar .brand{
  flex:none;
  display:flex; align-items:center; gap:10px; padding:16px 14px 14px;
  font-size:15px; font-weight:700; letter-spacing:.2px; color:#fff;
  border-bottom:1px solid rgba(148,163,184,.12);
}
.sidebar .brand .logo{
  width:32px; height:32px; flex:none; border-radius:10px; font-size:16px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#2563eb,#7c3aed);
  box-shadow:0 4px 14px rgba(37,99,235,.45);
}
.sidebar .brand .btext{ line-height:1.25; }
.sidebar .brand small{ display:block; color:#7f93ad; font-size:11px; font-weight:500; margin-top:2px; }
.sidebar nav{ flex:1 1 auto; min-height:0; padding:8px 10px 14px; overflow-y:auto; overscroll-behavior:contain; }
.sidebar nav::-webkit-scrollbar{ width:6px; }
.sidebar nav::-webkit-scrollbar-thumb{ background:rgba(148,163,184,.28); border-radius:3px; }
.sidebar nav::-webkit-scrollbar-track{ background:transparent; }
.nav-title{
  color:#5d7391; font-size:11px; font-weight:700; letter-spacing:1.3px;
  padding:12px 10px 6px; text-transform:uppercase;
}
.sidebar nav a{
  display:flex; align-items:center; gap:9px; padding:9px 11px; margin:2px 0;
  border-radius:9px; border-left:none; color:#b7c5d8; font-size:13.5px;
  transition:background .15s,color .15s,box-shadow .15s;
}
.sidebar nav a:hover{ background:rgba(148,163,184,.12); color:#fff; }
.sidebar nav a.active{
  background:linear-gradient(90deg,rgba(37,99,235,.30),rgba(37,99,235,.10));
  color:#fff; font-weight:600; box-shadow:inset 0 0 0 1px rgba(96,165,250,.32);
}
.sidebar nav a.active::before{
  content:""; width:3px; height:15px; border-radius:2px; background:#7dd3fc; flex:none; margin-left:-5px;
}
.sidebar .userbox{
  flex:none; padding:12px 14px; border-top:1px solid rgba(148,163,184,.12);
  background:rgba(148,163,184,.07); backdrop-filter:blur(2px);
}
.sidebar .userbox .who{ display:flex; align-items:center; gap:9px; margin-bottom:9px; }
.sidebar .userbox .av{
  width:30px; height:30px; flex:none; border-radius:10px; font-size:14px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(96,165,250,.16); color:#bfdbfe;
}
.sidebar .userbox .role{ color:#cbd5e1; margin:0; font-size:13px; font-weight:600; line-height:1.3; }
.sidebar .userbox .acts{ font-size:12.5px; }
.sidebar .userbox a{ color:#93a9c4; }
.sidebar .userbox a:hover{ color:#fff; }

/* ---------- 主区与页头 ---------- */
.main{ padding:22px 26px 36px; overflow-y:auto; overflow-x:auto; }
/* 主区滚动时，页头与表头吸顶（公共内容固定，2026-09-19） */
.main > .pg-head{
  position:sticky; top:-22px; z-index:20;
  margin:-22px -26px 16px; padding:16px 26px 14px;
  background:linear-gradient(180deg,#f4f7fb 78%,rgba(244,247,251,.86));
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border-2,#e6eaf2);
}
.tb thead th{
  position:sticky; top:0; z-index:6;
  background:#f7f9fc;
  box-shadow:inset 0 -1px 0 var(--border-2,#e6eaf2);
}
/* 卡片内表头吸顶时，避免与卡片圆角冲突 */
.card .tb-scroll{ scrollbar-gutter:stable; }
.page-title{
  font-size:21px; font-weight:700; letter-spacing:.2px; margin-bottom:6px;
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
}
.page-title .muted.small{ font-size:12.5px; font-weight:500; }
.page-desc{ color:var(--muted); font-size:13px; line-height:1.7; margin-bottom:18px; max-width:1120px; }
.pg-head{
  display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
  flex-wrap:wrap; border-bottom:1px solid var(--border); padding-bottom:14px; margin-bottom:18px;
}
.pg-head .page-title{ margin-bottom:5px; }
.pg-head .page-desc{ margin-bottom:0; }
.pg-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* ---------- 卡片 ---------- */
.card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px; margin-bottom:16px; box-shadow:var(--sh-1);
}
.card-hd{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.card-hd h3{ font-size:15px; font-weight:650; margin:0; display:flex; align-items:center; gap:8px; }
.card-hd .sub{ color:var(--muted); font-size:12px; font-weight:400; }
.card-hd .pg-actions .btn{ height:32px; }

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:34px; padding:0 14px; border-radius:var(--radius-sm);
  border:1px solid var(--border-2); background:#fff; color:var(--text);
  font-size:13px; font-weight:500; box-shadow:var(--sh-1); white-space:nowrap;
  text-decoration:none; transition:background .15s,border-color .15s,box-shadow .15s,color .15s;
}
.btn:hover{ background:#f8fafc; border-color:#c7d2e0; }
.btn:focus-visible{ outline:none; box-shadow:var(--ring); }
.btn-p{ background:linear-gradient(180deg,#3170f7,#2563eb); border-color:#2563eb; color:#fff; box-shadow:0 2px 8px rgba(37,99,235,.26); }
.btn-p:hover{ background:linear-gradient(180deg,#2563eb,#1d4ed8); border-color:#1d4ed8; color:#fff; }
.btn-g{ background:linear-gradient(180deg,#22b25c,#16a34a); border-color:#16a34a; color:#fff; }
.btn-r{ background:#fff; border-color:#f6cccc; color:var(--red); }
.btn-r:hover{ background:#fef2f2; border-color:#f3b7b7; }
.btn-sm{ height:28px; padding:0 10px; font-size:12px; border-radius:8px; }
.btn-lg{ height:38px; padding:0 18px; font-size:13.5px; }
.btn-ghost{ background:transparent; border-color:transparent; box-shadow:none; color:var(--muted); }
.btn-ghost:hover{ background:#f1f5f9; color:var(--text); }
.btn[disabled]{ opacity:.55; box-shadow:none; cursor:not-allowed; }
.btn .ic{ font-size:14px; line-height:1; }

/* ---------- 表单 ---------- */
label.f{ margin-bottom:14px; }
label.f span{ font-size:12.5px; font-weight:500; color:var(--muted); margin-bottom:6px; }
input.t, textarea.t, select.t{
  border:1px solid var(--border-2); border-radius:var(--radius-sm); padding:9px 11px;
  background:#fff; color:var(--text); transition:border-color .15s,box-shadow .15s;
}
input.t::placeholder, textarea.t::placeholder{ color:#a9b5c6; }
input.t:focus, textarea.t:focus, select.t:focus{ border-color:var(--primary); box-shadow:var(--ring); }
input.t[readonly]{ background:#f8fafc; color:var(--muted); }
select.t{ cursor:pointer; }
.form-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:0 16px; align-items:start; }
.form-grid .full{ grid-column:1/-1; }
.form-sec{ font-size:12.5px; font-weight:700; color:#334155; letter-spacing:.3px; margin:2px 0 12px; padding-left:9px; border-left:3px solid var(--primary); }
.mt0{ margin-top:0; }

/* ---------- 表格 ---------- */
table.tb{ background:var(--card); }
table.tb th{
  background:#f8fafc; color:var(--muted); font-size:12px; font-weight:600; letter-spacing:.3px;
  padding:11px 12px; border-bottom:1px solid var(--border-2); white-space:nowrap;
}
table.tb td{ padding:12px; vertical-align:middle; border-bottom:1px solid #eef1f6; font-size:13px; }
table.tb tbody tr:last-child td{ border-bottom:none; }
table.tb tbody tr:hover td{ background:#f8fafc; }
.cell-t{ font-weight:600; line-height:1.4; }
.cell-s{ color:var(--muted); font-size:12px; margin-top:3px; }
.tb-card{ padding:0; overflow:hidden; }
.tb-card .card-hd{ padding:16px 18px 0; margin-bottom:12px; }

/* ---------- 标签 / 徽标 / 分段筛选 ---------- */
.tag{ padding:3px 9px; font-size:12px; font-weight:500; border:1px solid transparent; white-space:nowrap; }
.tag-g{ background:#e9f9ef; color:#15803d; border-color:#c7f0d5; }
.tag-b{ background:#eaf2ff; color:#1d4ed8; border-color:#d3e2fd; }
.tag-y{ background:#fff5e5; color:#b45309; border-color:#fbe3ba; }
.tag-r{ background:#fdecec; color:#b91c1c; border-color:#f9d4d4; }
.tag-s{ background:#f1f5f9; color:#475569; border-color:#e2e8f0; }
.tag-v{ background:#f4f0ff; color:#6d28d9; border-color:#e3d9ff; }
.chips{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.chip{
  padding:6px 12px; border-radius:999px; border:1px solid var(--border-2); background:#fff;
  font-size:12.5px; color:var(--muted); cursor:pointer; transition:all .15s; white-space:nowrap;
}
.chip:hover{ border-color:#bfdbfe; color:var(--primary); background:#f8fbff; }
.chip.on{ background:var(--primary-soft); border-color:#bfdbfe; color:var(--primary-dark); font-weight:600; }

/* ---------- 空态 / 提示条 ---------- */
.empty-state{ text-align:center; padding:40px 16px; color:var(--muted); }
.empty-state .ico{ font-size:34px; line-height:1; margin-bottom:12px; opacity:.9; }
.empty-state .t{ font-size:14px; font-weight:600; color:#475569; margin-bottom:6px; }
.empty-state .d{ font-size:12.5px; }
.hint{
  background:var(--primary-soft); border:1px solid #dbe7ff; color:#3c4a5f;
  border-radius:var(--radius-sm); padding:11px 13px; font-size:12.5px; line-height:1.75;
}
.hint.warn{ background:#fff8ec; border-color:#fae3bd; color:#8a5a14; }
.hint b{ color:#1e3a8a; }
.hint.warn b{ color:#92400e; }
/* 键值状态条 */
.kv{ display:flex; gap:10px; flex-wrap:wrap; }
.kv .item{ background:#f8fafc; border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 13px; min-width:148px; }
.kv .k{ font-size:11.5px; color:var(--muted); }
.kv .v{ font-size:13.5px; font-weight:600; margin-top:4px; word-break:break-all; }

/* ---------- 统计卡 ---------- */
.stat-card{ border-radius:var(--radius-sm); padding:14px 16px; box-shadow:var(--sh-1); }
.stat-card .n{ font-size:23px; letter-spacing:-.4px; }
.stat-card .l{ font-size:12px; }

/* ---------- 弹窗 ---------- */
.modal{ border-radius:16px; box-shadow:0 24px 60px rgba(15,23,42,.26); width:600px; padding:20px 22px; }
.modal h3{ font-size:16px; font-weight:700; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--border); }
.modal .m-foot{ margin-top:16px; padding-top:14px; border-top:1px solid var(--border); }
.modal .list-box{ max-height:320px; overflow:auto; border:1px solid var(--border); border-radius:var(--radius-sm); }
.modal .list-row{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:10px 12px; border-bottom:1px solid #eef1f6;
}
.modal .list-row:last-child{ border-bottom:none; }
.modal .list-row:hover{ background:#f8fafc; }

/* ---------- AI 生成页 ---------- */
.ai-wrap{ display:grid; grid-template-columns:308px minmax(0,1fr); gap:16px; align-items:start; }
.ai-side{
  padding:0; overflow:hidden; position:sticky; top:16px;
  max-height:calc(100vh - 120px); display:flex; flex-direction:column; margin-bottom:0;
}
.ai-side-hd{ padding:14px 16px 12px; border-bottom:1px solid var(--border); background:#fbfcfe; }
.ai-side-hd .ttl{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:14px; font-weight:650; }
.ai-side-bd{ padding:12px 14px; display:flex; flex-direction:column; gap:8px; border-bottom:1px solid var(--border); }
.ai-matlist{ flex:1; overflow:auto; padding:8px; }
.ai-matitem{
  display:flex; gap:10px; align-items:flex-start; padding:9px 10px; border-radius:10px;
  border:1px solid transparent; cursor:pointer; transition:background .15s,border-color .15s;
}
.ai-matitem:hover{ background:#f6f8fc; }
.ai-matitem.on{ background:var(--primary-soft); border-color:#d7e4ff; }
.ai-matitem input[type=checkbox]{ width:15px; height:15px; margin-top:2px; accent-color:var(--primary); cursor:pointer; flex:none; }
.ai-mt{ font-size:13px; font-weight:600; line-height:1.4; margin-bottom:4px; }
.ai-meta{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; color:var(--muted-2); font-size:11.5px; }
.ai-main{ padding:0; overflow:hidden; display:flex; flex-direction:column; min-height:74vh; margin-bottom:0; }
.ai-chat-hd{
  display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px 16px; border-bottom:1px solid var(--border); background:#fbfcfe;
}
.ai-chat-hd .grp{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ai-msgs{ flex:1; overflow:auto; padding:18px 18px 6px; max-height:56vh; }
.ai-msg{ display:flex; gap:10px; align-items:flex-start; margin-bottom:16px; }
.ai-msg .av{
  width:30px; height:30px; flex:none; border-radius:10px; font-size:14px;
  display:flex; align-items:center; justify-content:center;
  background:#eef2f7; color:#475569;
}
.ai-msg.user{ flex-direction:row-reverse; }
.ai-msg.user .av{ background:var(--primary-soft); color:var(--primary-dark); }
.ai-msg .bub{ max-width:min(820px,88%); min-width:0; }
.ai-role{ font-size:11.5px; color:var(--muted-2); margin-bottom:5px; }
.ai-msg.user .ai-role{ text-align:right; }
.ai-text{
  padding:11px 13px; border-radius:12px; font-size:13.5px; line-height:1.78;
  white-space:pre-wrap; word-break:break-word; background:#fff;
  border:1px solid var(--border); box-shadow:var(--sh-1);
}
.ai-msg.user .ai-text{ background:linear-gradient(180deg,#f4f8ff,#eef4ff); border-color:#dbe7ff; }
.ai-refs{
  margin-top:7px; font-size:12px; color:#475569; background:#f8fafc;
  border:1px dashed var(--border-2); border-radius:10px; padding:8px 11px;
}
.ai-refs summary{ cursor:pointer; font-weight:600; color:#475569; }
.ai-refs div{ padding:7px 0 0; border-top:1px dashed var(--border); margin-top:6px; white-space:pre-wrap; line-height:1.6; }
.ai-compose{ border-top:1px solid var(--border); padding:12px 16px 14px; background:#fbfcfe; }
.ai-gen{ background:linear-gradient(180deg,#f7faff,#f1f6ff); border:1px solid #dbe7ff; border-radius:12px; padding:12px 13px; margin-bottom:11px; }
.ai-gen-hd{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:#1e40af; margin-bottom:9px; }
.ai-gen-hd .sub{ font-weight:400; color:#5b7bb5; }
.ai-gen-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.ai-gen-row .t{ flex:1; min-width:240px; }
.ai-input{ display:flex; gap:8px; align-items:flex-end; }
.ai-input textarea{
  flex:1; min-height:66px; padding:10px 11px; border:1px solid var(--border-2);
  border-radius:var(--radius-sm); font-size:13.5px; font-family:inherit; resize:vertical;
  transition:border-color .15s,box-shadow .15s;
}
.ai-input textarea:focus{ outline:none; border-color:var(--primary); box-shadow:var(--ring); }
.ai-tip{ color:var(--muted-2); font-size:11.5px; margin-top:7px; }
.ai-empty{ text-align:center; padding:34px 12px; color:var(--muted); }

/* ---------- 移动端 ---------- */
@media (max-width: 900px){
  .ai-wrap{ grid-template-columns:1fr; }
  .ai-side{ position:static; max-height:none; }
  .ai-main{ min-height:auto; }
  .ai-msgs{ max-height:none; }
  .ai-msg .bub{ max-width:100%; }
}
@media (max-width: 860px){
  :root{ --sidebar-w:100%; }
  .main{ padding:14px 12px 28px; }
  .sidebar nav{ display:flex; flex-wrap:nowrap; overflow-x:auto; padding:6px 8px; }
  .nav-title{ display:none; }
  .sidebar nav a{ display:inline-flex; padding:10px 12px; font-size:13px; }
  .sidebar nav a.active::before{ display:none; }
  .sidebar .userbox{ display:flex; align-items:center; gap:10px; }
  .sidebar .userbox .who{ margin-bottom:0; }
  .pg-head{ gap:10px; }
  .btn{ height:32px; padding:0 12px; }
}

/* 登录页：与整体深色侧栏同一色系，观感更统一 */
.login-wrap{
  background:radial-gradient(900px 520px at 12% -5%,rgba(37,99,235,.48),transparent 62%),
             radial-gradient(760px 520px at 105% 105%,rgba(124,58,237,.38),transparent 60%),
             linear-gradient(150deg,#070d18,#0f1c33 60%,#0b1220);
}
.login-card{
  width:376px; border-radius:18px; border:1px solid rgba(255,255,255,.09);
  box-shadow:0 30px 70px rgba(3,7,18,.55); padding:34px 30px 30px;
}
.login-card h1{ font-size:19px; letter-spacing:.3px; }
.login-card .sub{ margin-bottom:24px; }
.login-card input{ padding:11px 13px; border-radius:10px; }
.login-card input:focus{ box-shadow:var(--ring); }
.login-card button{ padding:12px; border-radius:10px; font-weight:600; box-shadow:0 6px 18px rgba(37,99,235,.35); }

/* 需求大厅：资料多选器（2026-09-19） */
.pick-box { border: 1px solid var(--border, #e6eaf2); border-radius: 10px; overflow: hidden; }
.pick-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: #f8fafc; border-bottom: 1px solid var(--border, #e6eaf2); }
.pick-list { max-height: 232px; overflow-y: auto; padding: 4px; }
.pick-item { display: flex; align-items: flex-start; gap: 9px; padding: 7px 9px;
  border-radius: 8px; cursor: pointer; }
.pick-item:hover { background: #f1f5f9; }
.pick-item input { margin-top: 3px; }