/* 小泉反馈助手 - 全局样式 */

/* 2026-10-16 用户列表里管理员写的备注（真实姓名），小字灰字跟在用户名下面 */
.u-remark {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
}
:root {
  --primary: #4a6cf7;
  --primary-dark: #3a55d9;
  --primary-light: #eef1fe;
  --success: #16a34a;
  --danger: #dc2626;
  --warning: #d97706;
  --text: #1f2937;
  --text-2: #6b7280;
  --text-3: #9ca3af;
  --bg: #f3f5f9;
  --card: #ffffff;
  --border: #e5e7eb;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.04);

  /* ⚠️ 2026-10-15 深色模式：原来这些「浅色辅助底」散落在各规则里写死
     （#fef2f2 / #fef3c7 / #f3e8ff …），深色下会非常刺眼。统一提成变量，
     深色模式只改变量即可，不用逐个规则覆盖。 */
  --bg-1: #ffffff;          /* app.js 内联样式在用（原先变量不存在，白写） */
  --bg-2: #f8fafc;
  --bg-3: #f1f3f5;
  --text-1: #1f2937;        /* 同上 */
  --primary-br: #d6ddfc;    /* 淡蓝边框 */
  --tint-amber: #fef3c7;
  --tint-amber-1: #fff7ed;
  --tint-amber-br: #fde68a;
  --tint-red: #fef2f2;
  --tint-red-br: #fecaca;
  --tint-purple: #f3e8ff;
  --tint-purple-fg: #7c3aed;
  --tint-green: #e7f7ec;
  --tint-green-fg: #15803d;
  --tint-blue-br: #c7d2fe;
  --tint-blue-bg: #f8faff;
  --tint-neutral: #f1f5f9;
}

/* ================= 深色模式 =================
   切换方式：给 <html> 加 data-theme="dark"（app.js 的 setTheme()）。
   🔴 2026-10-15 老师要求「默认浅色、深色要黑底」：
     - 不再跟随手机/电脑系统的深浅色，一律默认浅色，用户自己切；
     - 配色改成**中性黑**（参考 GitHub Dark / Tailwind zinc）而不是原来的深蓝。
   选择存 localStorage。 */
[data-theme="dark"] {
  --primary: #6366f1;
  --primary-dark: #4f46e5;
  --primary-light: #1e1b4e;   /* 深色下的"淡蓝底"，用深靛蓝而不是浅色 */
  --primary-br: #312e81;
  --success: #4ade80;
  --danger: #f87171;
  --warning: #fbbf24;
  --text: #f4f4f5;
  --text-1: #f4f4f5;
  --text-2: #a1a1aa;
  --text-3: #71717a;
  --bg: #000000;              /* 页面底：纯黑 */
  --bg-1: #18181b;            /* 卡片 */
  --bg-2: #1f1f23;
  --bg-3: #27272a;
  --card: #18181b;
  --border: #2e2e33;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 4px 14px rgba(0, 0, 0, 0.45);
  --tint-amber: #2a2000;
  --tint-amber-1: #241a00;
  --tint-amber-br: #5c4400;
  --tint-red: #2a0f0f;
  --tint-red-br: #5c2020;
  --tint-purple: #22113d;
  --tint-purple-fg: #c4b5fd;
  --tint-green: #0d2a18;
  --tint-green-fg: #6ee7b7;
  --tint-blue-br: #3f3f46;
  --tint-blue-bg: #1a1a1f;
  --tint-neutral: #232328;
}
/* 登录页：浅色是蓝紫渐变，深色换成近黑（否则登录框周围太亮） */
[data-theme="dark"] .login-view {
  background: linear-gradient(135deg, #09090b 0%, #131320 50%, #1c1024 100%);
}
[data-theme="dark"] .login-card { background: #18181b; }
/* 提示条的文字色在深色下要提亮，否则深底配深字看不清 */
[data-theme="dark"] .gen-tip { color: #a5b4fc; }
[data-theme="dark"] .key-hint { color: var(--text-2); }
/* Markdown 渲染出来的行内代码 / 预览区 */
[data-theme="dark"] .md-code,
[data-theme="dark"] pre,
[data-theme="dark"] .fb-practice-body code,
[data-theme="dark"] code { background: #000000; color: #d4d4d8; }
[data-theme="dark"] .usage-table th { background: #000000; }

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
}

.hidden { display: none !important; }

/* ---------- 登录页 ---------- */
.login-view {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #4a6cf7 0%, #6d5df1 50%, #9d50f1 100%);
  padding: 20px;
}
.login-card {
  background: var(--card);
  border-radius: 16px;
  padding: 40px 36px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.login-title { font-size: 24px; text-align: center; }
.login-sub { color: var(--text-2); text-align: center; margin: 6px 0 24px; font-size: 13px; }
.login-tip { color: var(--warning); font-size: 12.5px; text-align: center; margin-top: 16px; }
.login-error {
  display: block;
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--tint-red);
  border: 1px solid var(--tint-red-br);
  border-radius: 10px;
  color: var(--danger);
  font-size: 13px;
  line-height: 1.55;
  word-break: break-word;
}

/* ---------- 顶栏 ---------- */
.topbar {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}
.topbar-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 20px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { font-size: 17px; font-weight: 700; color: var(--text); text-decoration: none; }
.topnav { display: flex; gap: 4px; }
.topnav a {
  color: var(--text-2);
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 14px;
}
.topnav a:hover { background: var(--primary-light); color: var(--primary); }
.topnav a.active { background: var(--primary-light); color: var(--primary); font-weight: 600; }

/* 深色模式切换按钮（顶部导航 / 手机底部导航共用一个 class） */
.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 8px 10px;
  border-radius: 8px;
  color: inherit;
  font-family: inherit;
}
.theme-toggle:hover { background: var(--primary-light); }

/* 手机底部导航：默认（桌面）隐藏，窄屏才显示 */
.bottomnav { display: none; }

.container { max-width: 860px; margin: 0 auto; padding: 24px 20px 60px; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  border-radius: 10px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
  font-family: inherit;
}
.btn:hover { border-color: var(--primary); color: var(--primary); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 500; }
.btn.primary:hover { background: var(--primary-dark); color: #fff; }
.btn.danger { color: var(--danger); }
.btn.danger:hover { background: var(--tint-red); border-color: var(--danger); }
.btn.small { padding: 4px 12px; font-size: 13px; border-radius: 8px; }
.btn.block { width: 100%; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---------- 输入 ---------- */
input[type="text"], input[type="password"], input[type="date"], input[type="search"], textarea, select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 14px;
  font-family: inherit;
  background: var(--card);
  color: var(--text);
  outline: none;
  transition: border 0.15s;
}
input:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.12); }
textarea { resize: vertical; min-height: 90px; }
.form-item { margin-bottom: 14px; }
.form-item label { display: block; font-size: 13px; color: var(--text-2); margin-bottom: 5px; }
.form-row { display: flex; gap: 12px; }
.form-row .form-item { flex: 1; }

/* ---------- 页面头部 ---------- */
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; gap: 10px; }
.page-head h2 { font-size: 20px; }
/* 返回链接：改成明显的按钮样式，避免用户找不到 */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  padding: 9px 16px 9px 13px;
  background: var(--card);
  border: 1.5px solid var(--primary);
  border-radius: 999px;
  color: var(--primary);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(74, 108, 247, 0.12);
  transition: background 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.back-link:hover {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 4px 12px rgba(74, 108, 247, 0.28);
  transform: translateX(-2px);
}
.back-link .bl-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  flex: none;
}
.back-link:hover .bl-icon {
  background: var(--card);
  color: var(--primary);
}

/* ---------- 年级分组 ---------- */
.grade-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  padding: 6px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.chip:hover { border-color: var(--primary); color: var(--primary); }
.chip.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 600;
}

.grade-section { margin-bottom: 22px; }
.grade-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 11px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--primary-light);
}
.grade-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
}
.grade-count {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
}


/* ---------- 卡片 ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}

/* ---------- 学生列表 ---------- */
.student-toolbar { display: flex; gap: 10px; margin-bottom: 16px; }
.student-toolbar input { flex: 1; }
.student-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.student-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: var(--shadow);
}
.student-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.student-card .s-name { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.student-card .s-meta { color: var(--text-2); font-size: 13px; }
.student-card .s-stat { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); color: var(--text-3); font-size: 12.5px; display: flex; justify-content: space-between; }
.empty-tip { text-align: center; color: var(--text-3); padding: 60px 0; }
.empty-tip .big { font-size: 40px; margin-bottom: 10px; }

/* ---------- 学生档案 ---------- */
.profile-grid { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.profile-grid .p-item { font-size: 14px; }
.profile-grid .p-item b { color: var(--text-2); font-weight: 500; margin-right: 6px; }
.profile-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

/* ---------- 时间线 ---------- */
.timeline { position: relative; padding-left: 22px; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--border); }
.fb-item { position: relative; margin-bottom: 18px; }
.fb-item::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 22px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--primary-light);
}
.fb-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fb-head .fb-date { font-weight: 600; }
.fb-head .fb-topic { color: var(--text-2); font-size: 13.5px; }

/* ---------- 时间线折叠 ---------- */
.fb-collapsible { padding: 0; overflow: hidden; }
.fb-toggle {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 15px 18px;
  font: inherit;
  color: inherit;
  position: relative;
  transition: background 0.15s;
}
.fb-toggle:hover { background: var(--primary-light); }
.fb-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.fb-toggle .fb-head { padding-right: 26px; }
.fb-snippet {
  display: block;
  margin-top: 5px;
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fb-arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--primary);
  transition: transform 0.2s;
}
.fb-collapsible.collapsed .fb-arrow { transform: translateY(-50%) rotate(-90deg); }
.fb-collapsible:not(.collapsed) .fb-toggle { border-bottom: 1px solid var(--border); }
.fb-body { padding: 16px 18px 18px; }
/* 折叠时圆点对齐卡片顶部，观感更整齐 */
.fb-collapsible.collapsed::before { top: 24px; }

/* 后台「平台 AI 配置」折叠卡标题（放在 button 里，用 span 模仿 setting-section h3） */
.ad-cfg-title { font-size: 15px; font-weight: 600; padding-left: 8px; border-left: 3px solid var(--primary); }

/* ---------- 托管随手拍流水（v58） ---------- */
.tl-day-head { font-size: 12.5px; color: var(--text-3); margin: 12px 2px 8px; }
.tl-row {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--card);
}
.tl-row-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tl-time { font-variant-numeric: tabular-nums; color: var(--text-2); font-size: 13px; }
.tl-tag {
  font-size: 11.5px;
  padding: 1px 8px;
  border-radius: 20px;
  background: var(--primary-light);
  color: var(--primary-dark);
}
.tl-ops { margin-left: auto; display: flex; gap: 6px; }
.tl-text { margin-top: 6px; font-size: 13.5px; line-height: 1.65; white-space: pre-wrap; }
.tl-thumb {
  width: 64px; height: 64px; object-fit: cover;
  border-radius: 8px; margin-top: 8px; border: 1px solid var(--border);
  cursor: zoom-in;
}
.cap-drop {
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 18px;
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
  cursor: pointer;
}
.cap-drop:hover { border-color: var(--primary); color: var(--primary); }

.tl-rollup-card {
  border: 1.5px solid var(--primary);
  background: var(--primary-light);
  border-radius: 12px;
  padding: 14px;
}
.tl-rollup-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.tl-rollup-text {
  white-space: pre-wrap;
  line-height: 1.7;
  font-size: 14px;
  color: var(--text-1);
  background: var(--bg-2);
  border-radius: 8px;
  padding: 10px 12px;
}

/* v74：生成结果卡下方的「重新生成」独立小框（和结果卡分开，避免误点） */
.tl-cap-regen-box {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: var(--bg-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.badge {
  font-size: 11.5px;
  padding: 1px 8px;
  border-radius: 20px;
  background: var(--tint-amber);
  color: var(--warning);
  white-space: nowrap;
}
.badge.blue { background: var(--primary-light); color: var(--primary); }
.fb-notes {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-2);
  background: var(--bg);
  border-radius: 8px;
  padding: 8px 12px;
  white-space: pre-wrap;
  word-break: break-word;
}
.fb-notes summary { cursor: pointer; color: var(--text-3); font-size: 12.5px; user-select: none; }
.fb-content {
  margin-top: 10px;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 14.5px;
}
/* Markdown 渲染后的元素（2026-10-10 新增，之前 **加粗** 会裸露符号） */
/* 批量管理：复选框默认隐藏，点「批量管理」后才显示（2026-10-11） */
.fb-select-row { display: none; }
.timeline.selecting .fb-select-row,
#banke-fb-list.selecting .fb-select-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 0;
}
.timeline.selecting .fb-check,
#banke-fb-list.selecting .fb-check {
  display: inline-block;
  width: 16px; height: 16px;
  cursor: pointer;
  accent-color: var(--danger);
  flex: none;
}
.timeline.selecting .fb-select-row label,
#banke-fb-list.selecting .fb-select-row label {
  font-size: 13px; color: var(--text-3); cursor: pointer; user-select: none;
}
/* 勾选高亮：用 JS 加 class，比 :has() 兼容性更好 */
.timeline.selecting .fb-item.is-checked,
#banke-fb-list.selecting .fb-item.is-checked {
  outline: 2px solid var(--danger);
  outline-offset: -2px;
}
.selecting .fb-toggle { cursor: default; }
.fb-toolbar .sel-all {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; cursor: pointer; white-space: nowrap;
}
.fb-toolbar .sel-all input { width: 15px; height: 15px; accent-color: var(--danger); }

.fb-content strong,
.fb-practice-body strong { font-weight: 700; color: var(--text-1); }
.fb-content em,
.fb-practice-body em { font-style: normal; color: var(--primary); }
.fb-content code,
.fb-practice-body code {
  background: var(--bg-3);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 13px;
  font-family: ui-monospace, Consolas, monospace;
}
.md-code {
  background: var(--bg-3);
  padding: 10px 12px;
  border-radius: 8px;
  overflow-x: auto;
  white-space: pre-wrap;
  margin: 8px 0;
  font-size: 13px;
}
.fb-content textarea,
.fb-practice-body textarea { min-height: 220px; width: 100%; }
.fb-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

/* ---------- 生成页 ---------- */
.gen-tip {
  background: var(--primary-light);
  border: 1px solid var(--primary-br);
  color: var(--primary-dark);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13.5px;
  margin-bottom: 16px;
}
.gen-result-head { display: flex; align-items: center; justify-content: space-between; margin: 20px 0 10px; }
.gen-result-head h3 { font-size: 16px; }
.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-box { text-align: center; padding: 40px 0; color: var(--text-2); }
.loading-box .spinner { width: 28px; height: 28px; border-width: 3px; border-color: var(--primary-light); border-top-color: var(--primary); margin-bottom: 12px; }

/* ---------- 设置页 ---------- */
.setting-section h3 { font-size: 15px; margin-bottom: 12px; padding-left: 8px; border-left: 3px solid var(--primary); }
.key-hint { font-size: 12.5px; color: var(--text-3); margin-top: 5px; }
.key-hint a { color: var(--primary); text-decoration: none; }

/* ---------- 弹层 ---------- */
.modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}
.modal {
  background: var(--card);
  border-radius: 14px;
  padding: 24px;
  width: 100%;
  max-width: 460px;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.modal h3 { margin-bottom: 16px; font-size: 17px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

/* ---------- Toast ---------- */
#toast-wrap { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast {
  background: rgba(15, 23, 42, 0.88);
  color: #fff;
  padding: 9px 18px;
  border-radius: 10px;
  font-size: 14px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  animation: toast-in 0.25s ease;
  max-width: 86vw;
}
.toast.success { background: rgba(22, 163, 74, 0.92); }
.toast.error { background: rgba(220, 38, 38, 0.92); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- 生成页 v2：类型 tab / 图片 / chips / 询问条 ---------- */
.gen-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.gen-tab {
  flex: 1;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text-2);
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.gen-tab.active { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }
.img-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.img-thumb { position: relative; width: 86px; height: 86px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.img-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: 14px;
  line-height: 19px;
  text-align: center;
  cursor: pointer;
  user-select: none;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--primary-light);
  color: var(--primary-dark);
  border: 1px solid var(--primary-br);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 13.5px;
}
.chip b { cursor: pointer; font-weight: 700; opacity: 0.65; }
.chip b:hover { opacity: 1; }
.ask-practice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, var(--tint-amber-1), var(--tint-amber));
  border: 1px solid var(--tint-amber-br);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-top: 14px;
  font-size: 14.5px;
}
.badge.purple { background: var(--tint-purple); color: var(--tint-purple-fg); }

/* ---------- 反馈卡：配套练习折叠区 ---------- */
.fb-practice {
  margin-top: 10px;
  border: 1px dashed var(--tint-blue-br);
  border-radius: 10px;
  background: var(--tint-blue-bg);
  padding: 8px 12px;
}
.fb-practice summary { cursor: pointer; color: var(--primary-dark); font-size: 13.5px; user-select: none; font-weight: 500; }
.fb-practice-body { margin-top: 8px; white-space: pre-wrap; word-break: break-word; font-size: 14px; }
.fb-practice-body textarea { min-height: 180px; }
.fb-practice-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* ---------- 设置页：板块编辑行 / 模板开关 ---------- */
.sec-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.sec-row .sec-input { flex: 1; }
.tpl-toggle { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); cursor: pointer; }
.tpl-toggle input { width: auto; }

/* ---------- 生成页 v3：素材拖拽区 / 文档 chips / 计数 ---------- */
.drop-zone {
  border: 2px dashed var(--border);
  border-radius: 12px;
  background: var(--bg);
  padding: 18px 16px;
  text-align: center;
  transition: all 0.15s;
  margin-bottom: 12px;
}
.drop-zone.drag-over {
  border-color: var(--primary);
  background: var(--primary-light);
  transform: scale(1.005);
}
.drop-text { color: var(--text-2); font-size: 14px; line-height: 1.6; }
.drop-actions { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.doc-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.doc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--tint-neutral);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 13px;
  color: var(--text);
  max-width: 100%;
}
.doc-chip em { color: var(--text-3); font-style: normal; font-size: 12px; }
.doc-chip b { cursor: pointer; font-weight: 700; opacity: 0.6; }
.doc-chip b:hover { opacity: 1; }
.doc-chip.parsing { color: var(--text-3); }
.doc-chip.parsing .spinner { width: 12px; height: 12px; border-width: 2px; }
.count-hint { font-size: 12.5px; color: var(--text-3); margin-bottom: 6px; min-height: 16px; }

/* ---------- v4：登录切换 / 余额徽标 / 用量页 / 管理页 ---------- */
.login-switch { text-align: center; margin-top: 18px; font-size: 13.5px; color: var(--text-2); }
.login-switch a { color: var(--primary); text-decoration: none; }
.login-switch a:hover { text-decoration: underline; }

.balance-badge {
  align-self: center;
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 20px;
  background: var(--primary-light);
  color: var(--primary-dark);
  white-space: nowrap;
}
.balance-badge.low { background: var(--tint-red); color: var(--danger); }

.usage-summary { display: flex; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.usage-stat {
  flex: 1;
  min-width: 130px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  box-shadow: var(--shadow);
}
.usage-stat .u-label { font-size: 12.5px; color: var(--text-2); }
.usage-stat .u-value { font-size: 22px; font-weight: 700; margin-top: 4px; }
.usage-stat .u-value.danger-text { color: var(--danger); }

.notice-warn {
  background: var(--tint-red);
  border: 1px solid var(--tint-red-br);
  color: var(--danger);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13.5px;
  margin-bottom: 16px;
}

.usage-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.usage-table th, .usage-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); }
.usage-table th { background: var(--bg); font-weight: 600; color: var(--text-2); font-size: 12.5px; white-space: nowrap; }
.usage-table td.num, .usage-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.usage-table td.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: var(--text-2); }
.usage-table td.strong { font-weight: 600; }
.usage-table tr:last-child td { border-bottom: none; }
.admin-users { overflow-x: auto; }
/* 限高滚动（由 limitTableRows() 加 .scroll-5 + 精确 max-height）：
   最多显示 5 行，表头吸顶固定。 */
.admin-users.scroll-5 { overflow-y: auto; }
.admin-users.scroll-5 .usage-table thead th { position: sticky; top: 0; z-index: 1; }
.admin-ops { display: flex; gap: 6px; flex-wrap: wrap; }
.cost-note { color: var(--text-2); font-size: 12.5px; }

/* ---------- 移动端适配 ---------- */
@media (max-width: 640px) {
  /* 底部被 bottomnav 占了，内容区多留点空间 */
  .container { padding: 16px 14px 96px; }
  .form-row { flex-direction: column; gap: 0; }
  .student-grid { grid-template-columns: 1fr; }
  .topnav a { padding: 6px 10px; font-size: 13px; }
  .brand { font-size: 15px; }
  .img-thumb { width: 72px; height: 72px; }
  .ask-practice { flex-direction: column; align-items: flex-start; }

  /* 底部导航接管页面跳转 → 顶部那几个链接隐藏（品牌/余额/退出保留） */
  .topnav a[data-nav] { display: none; }

  /* 触摸友好：按钮整体放大一档 */
  .btn { padding: 11px 18px; font-size: 15px; }
  .btn.small { padding: 8px 14px; font-size: 13.5px; }

  /* 档案信息改单列，别挤在一行看不清 */
  .profile-grid { flex-direction: column; gap: 6px; }
  .profile-actions { flex-wrap: wrap; }
  .profile-actions .btn { flex: 1 1 auto; }
  /* 用量页三块统计也改单列 */
  .usage-stat { min-width: 100%; }

  /* ---- 手机底部导航 ---- */
  .bottomnav {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--card);
    border-top: 1px solid var(--border);
    /* iPhone 底部小黑条要避开 */
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.08);
  }
  .bottomnav a, .bottomnav .bn-btn {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px;
    padding: 6px 2px; min-height: 50px;
    font-size: 11px; line-height: 1.2;
    color: var(--text-2); text-decoration: none;
    border: none; background: none; border-radius: 10px;
    cursor: pointer; font-family: inherit;
  }
  .bottomnav a.active { color: var(--primary); background: var(--primary-light); font-weight: 600; }
  .bottomnav .bn-ico { font-size: 19px; line-height: 1; }
}

/* ---------- 充值兑换码 ---------- */
.redeem-list { display: flex; flex-direction: column; gap: 6px; }
.redeem-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 11px;
  background: var(--primary-light);
  border-radius: 8px;
  font-size: 13px;
}
.redeem-row .rr-code { font-family: monospace; font-weight: 600; color: var(--text); }
.redeem-row .rr-amt { color: var(--success); font-weight: 600; }
.redeem-row .rr-time { margin-left: auto; color: var(--text-3); font-size: 12px; }
.badge.green { background: var(--tint-green); color: var(--tint-green-fg); }

/* ---------- 页脚备案信息（ICP 备案后显示） ---------- */
#site-footer {
  text-align: center;
  padding: 18px 10px 26px;
  font-size: 12.5px;
  color: var(--text-3);
  line-height: 1.9;
}
#site-footer a { color: var(--text-3); text-decoration: none; }
#site-footer a:hover { color: var(--primary); }

/* ================= 密码框 + 显示密码眼睛按钮 ================= */
.pwd-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.pwd-wrap input {
  flex: 1;
  padding-right: 44px !important;
}
/* 灰色线框的眼睛图标（和常见网站一致），hover 才加深 */
.pwd-eye {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  border-radius: 6px;
  color: var(--text-3);
  opacity: .6;
  transition: color .15s, opacity .15s;
}
.pwd-eye:hover { color: var(--text-1); opacity: 1; }
.pwd-eye:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.pwd-eye.is-on { color: var(--text-1); opacity: .9; }
.pwd-eye svg { display: block; }
.pwd-eye .eye-off { display: none; }
.pwd-eye.is-on .eye-open { display: none; }
.pwd-eye.is-on .eye-off { display: block; }

/* ================= 用户名可用性提示 ================= */
.name-tip {
  font-size: 13px;
  line-height: 1.6;
}
.name-tip.ok { color: var(--success); }
.name-tip.bad { color: var(--danger); }

/* ================= 新版本提醒横幅 ================= */
.update-banner {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 16px;
  background: var(--primary);
  color: #fff;
  font-size: 13px;
  line-height: 1.5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
.update-banner .btn {
  background: #fff;
  color: var(--primary);
  border: none;
  font-weight: 500;
}

/* ================= 学生页双板块切换（K12单科反馈 / 托管多科反馈） =================
   tab 直接放在 .page-head 里（原来标题「我的学生」的位置），
   所以这里要撑满左侧、并且不再自带下边距（间距由 page-head 统一管）。 */
.subtabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.page-head > .subtabs { flex: 1; margin-bottom: 0; }
.subtab {
  padding: 9px 18px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-2);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  transition: all .15s;
}
.subtab:hover { border-color: var(--primary); }
.subtab .cnt {
  display: inline-block;
  min-width: 18px;
  padding: 0 6px;
  margin-left: 4px;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  border-radius: 9px;
  background: rgba(0, 0, 0, .06);
}
.subtab.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.subtab.active .cnt { background: rgba(255, 255, 255, .25); }

/* ================= 多选清单（托管科目 / 标签） ================= */
.chk-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.chk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  cursor: pointer;
  color: var(--text);
}
.chk input { width: 16px; height: 16px; accent-color: var(--primary); }

.tag-chips .chip {
  /*🔴 2026-10-13 老师要求：未选中的标签用灰色，选中才高亮。
     原来未选中也是淡蓝底，和"选中"的蓝色不够好区分，容易看错。 */
  background: var(--bg-3);
  color: var(--text-3, #8b929b);
  border-color: var(--border);
}
.tag-chips .chip:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--bg-3);
}
.tag-chips .chip.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.badge.green { background: var(--tint-green); color: var(--tint-green-fg); }

/* ================= 托管：按科目分区上传图片 =================
   老师要求「勾了科目后图片分区上传」，所以每科一个独立的框，
   框里带科目名 + 自己的选择按钮 + 自己的粘贴/拖拽热区。 */
.tut-zone {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  margin-bottom: 12px;
  overflow: hidden;
}
.tut-zone .zone-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-3);
  border-bottom: 1px solid var(--border);
}
.tut-zone .zone-head b { font-size: 14.5px; }
.tut-zone .zone-count {
  font-size: 12.5px;
  color: var(--text-3);
  margin-left: auto;
}
.tut-zone .zone-drop {
  padding: 14px 12px;
  text-align: center;
  font-size: 13px;
  color: var(--text-2);
  border-bottom: 1px solid var(--border);
  transition: background .15s, box-shadow .15s;
}
.tut-zone .zone-drop.drag-over {
  background: var(--primary-light);
  box-shadow: inset 0 0 0 2px var(--primary);
}
.tut-zone .img-grid { padding: 10px 12px; }
.tut-zone .img-grid:empty { padding: 0; }

/* ---------- 班课反馈（v51） ---------- */
.muted { color: var(--text-3); font-size: 13px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.tag-list .chip { margin: 0; }

/* 考勤网格 */
.att-grid { display: flex; flex-direction: column; gap: 8px; }
.att-row { display: flex; align-items: center; gap: 12px; border-left: 3px solid var(--border); padding-left: 10px; border-radius: 0 8px 8px 0; transition: border-color 0.15s; }
.att-row.st-present { border-left-color: var(--success); }
.att-row.st-late { border-left-color: var(--warning); }
.att-row.st-absent { border-left-color: var(--danger); }
.att-name { flex: 0 0 90px; font-size: 14px; font-weight: 500; color: var(--text); }
.seg {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.seg button {
  border: 0;
  background: var(--card);
  color: var(--text-2);
  padding: 5px 14px;
  font-size: 13px;
  cursor: pointer;
  border-right: 1px solid var(--border);
  transition: all 0.12s;
}
.seg button:last-child { border-right: 0; }
.seg button:hover { background: var(--primary-light); }
.seg button.active { background: var(--primary); color: #fff; }
/* 选中态按出勤/迟到/请假上色（覆盖上面的蓝色） */
.seg button.active[data-s="present"] { background: var(--success); color: #fff; }
.seg button.active[data-s="late"] { background: var(--warning); color: #fff; }
.seg button.active[data-s="absent"] { background: var(--danger); color: #fff; }

/* 逐人备注网格
   🔴 2026-10-15 老师要求：① 学生名字要加粗/加框，一眼能看出是谁
      ② 学生与学生之间要有区分（整个「课堂表现→手打补充」用框圈起来）
      ③ 课堂表现/掌握能力/课后建议 三个小标题别再灰糊糊的，加粗加深
      —— 所以每个 .bn-row 做成带左侧色条的卡片，名字做成名牌式徽章。 */
.bn-grid { display: flex; flex-direction: column; gap: 12px; }
.bn-row {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: 10px;
  background: var(--bg-2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.bn-name {
  flex: 0 0 108px;
  font-size: 15.5px; font-weight: 700; color: var(--text);
  text-align: center; line-height: 1.35;
  padding: 7px 8px;
  background: var(--primary-light);
  border: 1px solid var(--primary-br);
  border-radius: 8px;
}
.bn-input { flex: 1; }
.bn-tags { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.bn-tag-group { display: flex; align-items: flex-start; gap: 8px; }
.bn-tag-group > label {
  flex: 0 0 108px; font-size: 13px; font-weight: 700; color: var(--text); padding-top: 6px;
}
.bn-tag-group .chips { flex: 1; }
.bn-tags .chip { font-size: 12px; padding: 3px 10px; }
.bn-note { margin-top: 2px; }

/* 手机窄屏：名字改成整行横条（仍然是框），标签栏收窄，让 chips 能并排多放几个 */
@media (max-width: 640px) {
  .bn-row { flex-direction: column; gap: 10px; }
  .bn-name { flex: none; width: 100%; text-align: left; padding: 6px 12px; }
  .bn-tag-group > label { flex: 0 0 76px; font-size: 12.5px; }
}

/* 反馈图片缩略图 + 点击放大（lightbox） */
.fb-imgs { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.fb-img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); cursor: zoom-in; background: var(--bg-3); }
.fb-img:hover { border-color: var(--primary); }
.lightbox { position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,0.88); display: flex; align-items: center; justify-content: center; padding: 24px; }
.lightbox.hidden { display: none; }
.lightbox-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.lightbox-close { position: absolute; top: 14px; right: 20px; font-size: 28px; color: #fff; cursor: pointer; opacity: 0.8; user-select: none; }
.lightbox-close:hover { opacity: 1; }

/* 名单标签输入（建/改班级弹窗） */
.roster-box { display: flex; flex-wrap: wrap; gap: 6px; min-height: 44px; padding: 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); margin-bottom: 8px; }
.roster-box .chip { margin: 0; }
.roster-box .chip b { cursor: pointer; margin-left: 6px; color: var(--text-3); font-weight: 700; }
.roster-box .chip b:hover { color: var(--danger); }
.roster-add { display: flex; gap: 8px; }
.roster-add input { flex: 1; }

/* 课件缩略图 */
.thumb-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.thumb {
  position: relative;
  width: 96px; height: 96px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-x {
  position: absolute; top: 2px; right: 2px;
  width: 20px; height: 20px;
  border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  color: #fff; font-size: 14px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.thumb-x:hover { background: var(--danger); }

/* 反馈完整内容预览（查看/结果） */
.md-preview {
  white-space: pre-wrap;
  line-height: 1.7;
  font-size: 14.5px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  max-height: 60vh;
  overflow: auto;
}

/* 班课反馈列表批量管理（复选框默认隐藏，点「批量管理」后显示） */
#banke-fb-list .fb-check { display: none; }
#banke-fb-list.selecting .fb-check {
  display: inline-block;
  width: 16px; height: 16px;
  cursor: pointer;
  accent-color: var(--danger);
  flex: none;
}
#banke-fb-list.selecting .feedback-card.is-checked { outline: 2px solid var(--danger); outline-offset: -2px; }