/* ============================================================
   翻书成课 · E书共读数字化教育平台 — 样式系统（浅色主题）
   主色：深蓝 #1E3A8A / 亮蓝 #2563EB / 点缀红 #E11D48
   ============================================================ */
:root {
  --navy: #1E3A8A;
  --blue: #2563EB;
  --blue-light: #DBEAFE;
  --red: #E11D48;
  --red-light: #FFE4E6;
  --bg: #F4F6FA;
  --card: #FFFFFF;
  --ink: #1F2937;
  --ink-2: #4B5563;
  --muted: #6B7280;
  --line: #E5E7EB;
  --line-2: #EEF0F4;
  --green: #059669;
  --green-light: #D1FAE5;
  --amber: #D97706;
  --amber-light: #FEF3C7;
  --purple: #7C3AED;
  --purple-light: #EDE9FE;
  --hl-yellow: #FDE68A;
  --hl-blue: #BFDBFE;
  --hl-green: #A7F3D0;
  --hl-pink: #FBCFE8;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, .12);
  --topbar-h: 56px;
  --sidebar-w: 216px;
  --font: "Microsoft YaHei", "微软雅黑", "PingFang SC", "Segoe UI", system-ui, sans-serif;

  /* ---------- 设计令牌（2026-10-23 一期补齐）----------
     字号阶梯：替代原先 15 档硬编码；间距 4px 基数列；
     动效令牌：全站过渡统一引用；阴影四级：卡片层级从 2 级扩到 4 级。 */
  --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 15px; --fs-lg: 16px;
  --fs-xl: 18px; --fs-2xl: 22px; --fs-3xl: 28px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --t-fast: 150ms; --t-normal: 260ms; --t-slow: 420ms;
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-md: 0 4px 10px -2px rgba(16, 24, 40, .10);
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }
button { font-family: var(--font); cursor: pointer; }
a { color: var(--blue); text-decoration: none; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- 登录页 ---------- */
.login-view {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1E3A8A 0%, #2563EB 55%, #3B82F6 100%);
  padding: 24px;
}
.login-box {
  width: 100%; max-width: 860px;
  background: var(--card); border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: 40px 44px 32px;
}
.login-head { text-align: center; margin-bottom: 28px; }
.login-head .logo-big {
  width: 64px; height: 64px;
  object-fit: contain;
  margin-bottom: 14px;
}
.login-head h1 { font-size: 26px; color: var(--navy); letter-spacing: 1px; }
.login-head p { color: var(--muted); margin-top: 8px; font-size: 13.5px; }
.login-head .book-ref {
  display: inline-block; margin-top: 12px; padding: 4px 14px;
  background: var(--blue-light); color: var(--navy);
  border-radius: 999px; font-size: 12.5px;
}
.role-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.role-card {
  border: 1.5px solid var(--line); border-radius: 12px;
  padding: 22px 18px; text-align: center;
  transition: all .18s ease; background: #fff;
}
.role-card:hover { border-color: var(--blue); box-shadow: var(--shadow); transform: translateY(-2px); }
.role-card .avatar {
  width: 52px; height: 52px; border-radius: 50%;
  margin: 0 auto 12px; display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; color: #fff;
}
.role-card h3 { font-size: 16px; margin-bottom: 4px; }
.role-card .role-tag { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.role-card ul { list-style: none; text-align: left; font-size: 12.5px; color: var(--ink-2); }
.role-card ul li { padding: 3px 0 3px 16px; position: relative; }
.role-card ul li::before { content: "·"; position: absolute; left: 4px; color: var(--blue); font-weight: 700; }
.login-tip {
  margin-top: 22px; padding: 12px 16px; border-radius: 8px;
  background: var(--amber-light); color: #92400E; font-size: 12.5px; line-height: 1.7;
}

/* ---------- 主框架 ---------- */
.shell { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.topbar {
  height: var(--topbar-h); flex: none;
  background: var(--card); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 14px; padding: 0 16px;
  position: relative; z-index: 30;
}
.nav-toggle {
  display: flex;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  border: none; background: transparent; border-radius: 8px;
  font-size: 20px; color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle:active { background: var(--bg); }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-logo {
  width: 34px; height: 34px; border-radius: 9px;
  object-fit: contain; flex: none;
}
.brand-text strong { display: block; font-size: 15px; color: var(--navy); line-height: 1.2; }
.brand-text small { font-size: 11px; color: var(--muted); }
.topbar-book { flex: 1; min-width: 0; }
.topbar-book .bk {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--ink-2);
  background: var(--bg); border: 1px solid var(--line);
  padding: 4px 12px; border-radius: 999px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.sync-dot { font-size: 9px; color: var(--green); animation: pulse 2s infinite; }
.sync-dot.off { color: #D1D5DB; animation: none; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.role-badge {
  font-size: 11.5px; padding: 3px 10px; border-radius: 999px; font-weight: 600;
}
.role-badge.teacher { background: var(--blue-light); color: var(--navy); }
.role-badge.student { background: var(--green-light); color: #065F46; }
.role-badge.admin { background: var(--purple-light); color: #5B21B6; }
.user-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 4px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; cursor: pointer;
}
.user-chip:hover { border-color: var(--blue); }
.user-chip .avatar {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 700;
}
.user-chip .un { font-size: 13px; font-weight: 600; }
.user-chip .ur { font-size: 11px; color: var(--muted); }

.shell-body { flex: 1; display: flex; min-height: 0; }
.sidebar {
  width: var(--sidebar-w); flex: none;
  background: var(--card); border-right: 1px solid var(--line);
  padding: 12px 10px; overflow-y: auto;
}
/* 宽屏：☰ 常驻，点击收起/展开侧边栏（内容区自动扩展） */
@media (min-width: 1025px) {
  .sidebar.collapsed { display: none; }
}
.nav-group { margin-bottom: 18px; }
.nav-group-title {
  font-size: 11px; color: var(--muted); padding: 4px 10px 6px;
  letter-spacing: 1px;
}
.nav-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 8px;
  font-size: 13.5px; color: var(--ink-2);
  cursor: pointer; margin-bottom: 2px; border: none; background: none; width: 100%;
  text-align: left; transition: all .15s;
}
.nav-item:hover { background: var(--bg); color: var(--navy); }
.nav-item.active { background: var(--blue-light); color: var(--navy); font-weight: 600; }
.nav-item .ni { font-size: 15px; width: 20px; text-align: center; }
.nav-item .lock { margin-left: auto; font-size: 11px; color: #D1D5DB; }
.main { flex: 1; min-width: 0; overflow-y: auto; padding: 20px 24px 60px; }
.page { max-width: 1180px; margin: 0 auto; animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.page-head { margin-bottom: 18px; }
.page-head h2 { font-size: 20px; color: var(--navy); }
.page-head .sub { color: var(--muted); font-size: 13px; margin-top: 4px; }
.page-head .acts { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- 通用组件 ---------- */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px; margin-bottom: 16px;
}
.card h3 { font-size: 15px; color: var(--navy); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.card h3 .tag { font-size: 11px; font-weight: 400; color: var(--muted); }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: #fff; color: var(--ink-2);
  padding: 7px 14px; border-radius: 8px; font-size: 13px;
  transition: all .15s; white-space: nowrap;
}
.btn:hover { border-color: var(--blue); color: var(--blue); }
.btn-primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn-primary:hover { background: #1D4ED8; color: #fff; }
.btn-navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-navy:hover { background: #1E40AF; color: #fff; }
.btn-danger { background: #fff; border-color: #FCA5A5; color: var(--red); }
.btn-danger:hover { background: var(--red); color: #fff; }
.btn-sm { padding: 4px 10px; font-size: 12px; border-radius: 6px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-block { width: 100%; justify-content: center; }

.kpi {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow);
}
.kpi .k-label { font-size: 12.5px; color: var(--muted); }
.kpi .k-value { font-size: 26px; font-weight: 700; color: var(--navy); margin: 6px 0 2px; font-family: var(--font); }
.kpi .k-sub { font-size: 11.5px; color: var(--muted); }
.kpi.accent-red .k-value { color: var(--red); }
.kpi.accent-green .k-value { color: var(--green); }

.pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; padding: 2px 9px; border-radius: 999px;
  background: var(--bg); color: var(--ink-2); border: 1px solid var(--line);
}
.pill.blue { background: var(--blue-light); color: var(--navy); border-color: transparent; }
.pill.green { background: var(--green-light); color: #065F46; border-color: transparent; }
.pill.red { background: var(--red-light); color: #9F1239; border-color: transparent; }
.pill.amber { background: var(--amber-light); color: #92400E; border-color: transparent; }
.pill.purple { background: var(--purple-light); color: #5B21B6; border-color: transparent; }

.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th {
  text-align: left; padding: 9px 10px; background: var(--bg);
  color: var(--ink-2); font-weight: 600; white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.tbl td { padding: 9px 10px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.tbl tr:hover td { background: #FAFBFF; }

.progress-track { height: 7px; background: var(--line); border-radius: 99px; overflow: hidden; }
.progress-track > div { height: 100%; background: linear-gradient(90deg, var(--blue), #60A5FA); border-radius: 99px; transition: width .4s; }

.empty {
  text-align: center; color: var(--muted); padding: 42px 20px; font-size: 13px;
}
.empty .ei { font-size: 34px; display: block; margin-bottom: 10px; opacity: .5; }

.toast-root { position: fixed; top: 68px; right: 18px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--blue);
  border-radius: 8px; box-shadow: var(--shadow-lg);
  padding: 10px 16px; font-size: 13px; color: var(--ink);
  animation: slideIn .25s ease; max-width: 320px;
}
.toast.ok { border-left-color: var(--green); }
.toast.warn { border-left-color: var(--amber); }
.toast.err { border-left-color: var(--red); }
@keyframes slideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

/* 弹窗 */
.modal-mask {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .45);
  z-index: 150; display: flex; align-items: center; justify-content: center;
  padding: 20px; animation: fadeIn .18s ease;
}
.modal {
  background: #fff; border-radius: 14px; box-shadow: var(--shadow-lg);
  width: 100%; max-width: 560px; max-height: 86vh; overflow-y: auto;
  padding: 22px 24px;
}
.modal.wide { max-width: 760px; }
.modal h3 { font-size: 16px; color: var(--navy); margin-bottom: 14px; }
.modal .m-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12.5px; color: var(--ink-2); margin-bottom: 5px; font-weight: 600; }
.field input[type=text], .field input[type=number], .field input[type=datetime-local], .field textarea, .field select {
  width: 100%; border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; font-size: 13px; font-family: var(--font);
  background: #fff; color: var(--ink);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--blue); }
.field textarea { min-height: 90px; resize: vertical; }

/* ---------- 阅读器 ---------- */
.reader { display: grid; grid-template-columns: 230px 1fr 300px; gap: 0; height: calc(100vh - var(--topbar-h)); margin: -20px -24px -60px; }
.reader-toc {
  border-right: 1px solid var(--line); background: var(--card);
  overflow-y: auto; padding: 14px 10px;
}
.reader-toc .rt-title { font-size: 12px; color: var(--muted); padding: 2px 8px 10px; }
.toc-item {
  display: block; width: 100%; text-align: left; border: none; background: none;
  font-size: 13px; color: var(--ink-2); padding: 6px 8px; border-radius: 6px;
  cursor: pointer; line-height: 1.45;
}
.toc-item:hover { background: var(--bg); }
.toc-item.active { background: var(--blue-light); color: var(--navy); font-weight: 600; }
.toc-item.lv2 { padding-left: 22px; font-size: 12.5px; }
.toc-item .pg { float: right; font-size: 10.5px; color: #9CA3AF; margin-top: 2px; }
.reader-body { overflow-y: auto; background: #fff; }
.reader-main { max-width: 720px; margin: 0 auto; padding: 34px 42px 80px; }
.reader-pagehead { position: sticky; top: 0; z-index: 7; background: #fff; padding: 12px 0 10px; border-bottom: 1px solid var(--line-2); }
.reader-pagehead h2 { font-size: 19px; color: var(--navy); margin: 0; line-height: 26px; }
.reader-pagehead .sub { color: var(--muted); font-size: 12.5px; margin-top: 3px; line-height: 18px; }
.chapter-head { margin-bottom: 26px; padding-bottom: 18px; border-bottom: 2px solid var(--line-2); }
.chapter-head .ch-no { font-size: 12.5px; color: var(--blue); font-weight: 700; letter-spacing: 2px; }
.chapter-head h1 { font-size: 26px; color: var(--navy); margin: 6px 0 4px; }
.chapter-head .ch-sub { color: var(--muted); font-size: 14px; }
.sec-title {
  font-size: 18px; color: var(--navy); margin: 34px 0 14px;
  padding-left: 12px; border-left: 4px solid var(--blue);
}
.para {
  font-size: 16.5px; line-height: 1.95; color: #26303B;
  margin-bottom: 1.1em; text-indent: 2em; text-align: justify;
  position: relative;
}
.para.type-quote {
  text-indent: 0; color: var(--ink-2); font-size: 15px;
  padding: 10px 18px; border-left: 3px solid #C7D2FE;
  background: #F8FAFF; border-radius: 0 8px 8px 0; margin: 14px 0;
}
.para.type-caption {
  text-indent: 0; text-align: center; font-size: 12.5px; color: var(--muted);
  margin: 10px 0 18px;
}
.para mark.hl { border-radius: 3px; padding: 1px 0; cursor: pointer; }
.para mark.hl.c0 { background: var(--hl-yellow); }
.para mark.hl.c1 { background: var(--hl-blue); }
.para mark.hl.c2 { background: var(--hl-green); }
.para mark.hl.c3 { background: var(--hl-pink); }
.para .remote-cursor {
  border-bottom: 2px solid var(--red); position: relative;
}
.para-note-flag {
  display: inline-flex; width: 16px; height: 16px; border-radius: 50%;
  background: var(--red); color: #fff; font-size: 10px;
  align-items: center; justify-content: center; vertical-align: super;
  margin-left: 2px; text-indent: 0;
}
.reader-progress {
  position: sticky; top: 70px; z-index: 5;
  background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
  padding: 8px 0; margin-bottom: 8px;
  display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted);
}
.reader-progress .progress-track { flex: 1; }
.reader-panel {
  border-left: 1px solid var(--line); background: var(--card);
  display: flex; flex-direction: column; min-height: 0;
}
.rp-tabs { display: flex; border-bottom: 1px solid var(--line); flex: none; }
.rp-tab {
  flex: 1; border: none; background: none; padding: 11px 4px;
  font-size: 12.5px; color: var(--muted); border-bottom: 2px solid transparent;
}
.rp-tab.active { color: var(--navy); font-weight: 600; border-bottom-color: var(--blue); }
.rp-tab .cnt {
  display: inline-block; min-width: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--red); color: #fff; font-size: 10px; margin-left: 3px; line-height: 15px;
}
.rp-body { flex: 1; overflow-y: auto; padding: 14px; }
.rp-sec { margin-bottom: 20px; }
.rp-sec-title { font-size: 12px; color: var(--muted); margin-bottom: 8px; letter-spacing: 1px; }
.online-user { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 12.5px; }
.online-user .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.online-user .ou-loc { color: var(--muted); font-size: 11px; margin-left: auto; }
.feed-item { padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: 12.5px; }
.feed-item .fi-head { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11.5px; margin-bottom: 4px; }
.feed-item .fi-head .who { font-weight: 600; color: var(--ink-2); }
.feed-item .fi-text { color: var(--ink-2); line-height: 1.55; }
.feed-item .fi-quote {
  background: var(--bg); border-radius: 6px; padding: 6px 9px; margin: 5px 0;
  font-size: 12px; color: var(--muted); border-left: 3px solid #D1D5DB;
}
.anno-item { padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: 12.5px; }
.anno-item .ai-quote { line-height: 1.5; padding: 2px 0; border-radius: 3px; }
.anno-item .ai-note { color: var(--ink-2); margin-top: 4px; line-height: 1.55; }
.anno-item .ai-meta { color: var(--muted); font-size: 11px; margin-top: 4px; display: flex; gap: 8px; }
.cmt-item { padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: 12.5px; }
.cmt-item .ci-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.cmt-item .ci-name { font-weight: 600; font-size: 12.5px; }
.cmt-item .ci-time { color: var(--muted); font-size: 11px; }
.cmt-item .ci-text { color: var(--ink-2); line-height: 1.55; }
.cmt-item .ci-reply { margin: 6px 0 0 14px; padding: 6px 10px; background: var(--bg); border-radius: 8px; font-size: 12px; }
.rp-input { flex: none; border-top: 1px solid var(--line); padding: 10px; display: flex; gap: 8px; }
.rp-input input {
  flex: 1; border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 10px; font-size: 12.5px; font-family: var(--font);
}
.rp-input input:focus { outline: none; border-color: var(--blue); }

/* 选区浮动工具栏 */
.sel-toolbar {
  position: fixed; z-index: 120;
  background: #1E293B; color: #fff; border-radius: 10px;
  box-shadow: var(--shadow-lg); padding: 6px;
  display: flex; gap: 4px; align-items: center;
  animation: fadeIn .12s ease;
}
.sel-toolbar button {
  border: none; background: none; color: #E2E8F0;
  font-size: 12px; padding: 5px 8px; border-radius: 6px;
  display: flex; align-items: center; gap: 4px;
}
.sel-toolbar button:hover { background: #334155; color: #fff; }
.sel-toolbar .sw { width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgba(255,255,255,.3); }
.sel-toolbar .sep { width: 1px; height: 18px; background: #475569; margin: 0 3px; }

/* ---------- 社区动态：活动通知 / 活动报道 + 关注镇好遇见 ---------- */
.nt-pin { font-size: 11px; font-weight: 600; color: #92400E; background: var(--amber-light); border-radius: 6px; padding: 2px 8px; margin-right: 4px; }
.channel-block {
  margin-top: 26px; border-radius: 14px; padding: 20px 22px 16px;
  background: linear-gradient(135deg, #EEF2FF 0%, #F0FDF4 100%);
  border: 1px solid var(--line);
}
.channel-block .cb-head h3 { font-size: 16px; color: var(--navy); margin-bottom: 4px; }
.channel-block .cb-head p { font-size: 12.5px; color: var(--muted); }
.channel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 16px; }
.channel-card {
  position: relative; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 20px 14px 14px; text-align: center; cursor: zoom-in;
  transition: box-shadow .2s ease, transform .2s ease;
}
.channel-card:hover { box-shadow: 0 8px 22px rgba(30, 58, 138, .12); transform: translateY(-2px); }
.channel-card .cc-badge {
  position: absolute; top: 10px; left: 10px; font-size: 11px; font-weight: 600;
  color: #065F46; background: var(--green-light); border-radius: 6px; padding: 2px 8px;
}
.channel-card .cc-badge.mp { color: #5B21B6; background: var(--purple-light); }
.channel-card .qr-img { width: 148px; height: 148px; object-fit: contain; border-radius: 10px; background: #fff; }
.channel-card .cc-name { font-size: 14px; font-weight: 700; color: var(--navy); margin-top: 10px; }
.channel-card .cc-desc { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.7; }
.channel-block .cb-tip {
  margin-top: 14px; font-size: 12px; color: var(--ink-2); line-height: 1.8;
  background: rgba(255, 255, 255, .75); border-radius: 8px; padding: 9px 12px;
}

/* ---------- 智课工坊（PPT / 短视频在线生成 + 作品库） ---------- */
.studio-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; align-items: start; }
.cover-preview { background: linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%); color: #fff; border-radius: 10px; padding: 18px 20px; }
.cover-preview .cp-kicker { font-size: 11px; color: #BFDBFE; letter-spacing: 3px; }
.cover-preview .cp-title { font-size: 19px; font-weight: 700; margin-top: 8px; line-height: 1.45; }
.cover-preview .cp-sub { font-size: 13px; color: #BFDBFE; margin-top: 6px; line-height: 1.6; }
.cover-preview .cp-meta { font-size: 12px; color: #93C5FD; margin-top: 14px; }
.slide-row { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; background: #fff; }
.slide-row .sr-head { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.slide-row .sr-idx { min-width: 22px; height: 22px; border-radius: 6px; background: var(--blue-light); color: var(--navy); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.slide-row .sr-title { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; font-size: 13px; font-family: var(--font); }
.slide-row .sr-title:focus, .slide-row .sr-bullets:focus { outline: none; border-color: var(--blue); }
.slide-row .sr-bullets { width: 100%; border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; font-size: 13px; font-family: var(--font); min-height: 62px; resize: vertical; line-height: 1.7; }
.slide-row .sr-img { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.slide-row .sr-thumb { width: 64px; height: 44px; object-fit: cover; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.slide-row .sr-img-hint { font-size: 11px; color: var(--muted); }
.gen-block { border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin-bottom: 14px; background: #fff; }
.gen-block h4 { font-size: 14px; color: var(--navy); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.gen-block .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.gen-block select { border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font-size: 12.5px; font-family: var(--font); background: #fff; max-width: 100%; }
.gen-block .row-check { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); margin-bottom: 8px; }
.gen-block .ghint { font-size: 11.5px; color: var(--muted); line-height: 1.75; margin-top: 4px; }
.gen-block .ghint.err { color: var(--red); }
.gen-block input[type=file] { font-size: 12px; width: 100%; }
.gen-block .bgm-name { font-size: 12px; color: var(--ink-2); max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gen-block .bgm-vol { font-size: 12px; color: var(--muted); min-width: 38px; }
.gen-block input[type=range] { width: 110px; accent-color: var(--blue); }
.prog-bar { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; margin-top: 8px; }
.prog-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--blue), var(--navy)); transition: width .2s; }
.works-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.work-card { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.work-card .wc-head { display: flex; gap: 8px; align-items: center; min-width: 0; }
.work-card .wc-ico { font-size: 20px; }
.work-card .wc-name { font-size: 13px; font-weight: 600; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-card .wc-meta { font-size: 11.5px; color: var(--muted); margin: 6px 0 8px; }
.work-card .wc-acts { display: flex; gap: 6px; }
@media (max-width: 1024px) { .studio-grid { grid-template-columns: 1fr; } }

/* ---------- 底部导航（移动端） ---------- */
.bottomnav { display: none; }

/* ---------- 响应式 ---------- */
/* 阅读器行宽分级（2026-10-23 M16）：
   ≥1400 三栏满血（230 + 正文 max720 + 300）；1240-1399 目录收抽屉、正文行宽优先；
   1025-1239 正文 + 280 窄面板；≤1024 单栏 + 共读面板 bottom-sheet（见 M1 规则）。 */
@media (max-width: 1399px) {
  .reader { grid-template-columns: 1fr 300px; }
  .reader-toc { display: none; }
  .reader-toc.mobile-open {
    display: block; position: fixed; top: var(--topbar-h); bottom: 0; left: 0;
    width: 260px; z-index: 45; box-shadow: var(--shadow-lg); background: #fff;
  }
}
@media (max-width: 1239px) {
  .reader { grid-template-columns: 1fr 280px; }
}
@media (max-width: 1024px) {
  .sidebar {
    position: fixed; top: var(--topbar-h); bottom: 0; left: 0; z-index: 40;
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: var(--shadow-lg); width: 230px;
  }
  .sidebar.open { transform: translateX(0); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  /* 阅读器单栏化但保持「容器内滚动」模型（与桌面一致）：
     原 height:auto 会使 readerBody 失去内部滚动、scrollTop 恒 0，
     桌面↔手机切换时进度被布局重排的 scroll 事件写成 0%（已实测复现）。
     固定高度 = 视口 - 顶栏；≤768 再减底导航 60px。 */
  .reader { grid-template-columns: 1fr; height: calc(100vh - var(--topbar-h)); margin: 0; }
  .reader-toc { display: none; }
  .reader-toc.mobile-open { display: block; position: fixed; top: var(--topbar-h); bottom: 0; left: 0; width: 260px; z-index: 45; box-shadow: var(--shadow-lg); }
  /* M1：共读面板 → 底部抽屉（默认藏于屏外；浮动入口「💬 共读」/遮罩/手柄控制开合） */
  .reader-panel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 46;
    height: 62vh; padding-bottom: env(safe-area-inset-bottom);
    border-left: none; border-top: 1px solid var(--line);
    border-radius: 16px 16px 0 0; box-shadow: var(--shadow-lg);
    transform: translateY(102%); transition: transform var(--t-normal) var(--ease-out);
    display: flex; flex-direction: column; background: #fff;
  }
  .reader-panel.open { transform: translateY(0); }
  .reader-panel .rp-body { flex: 1; overflow-y: auto; }
  .panel-mask { display: block; position: fixed; inset: 0; z-index: 45;
    background: rgba(15, 23, 42, .4); opacity: 0; pointer-events: none;
    transition: opacity var(--t-normal) var(--ease-out); }
  .panel-mask.open { opacity: 1; pointer-events: auto; }
  .panel-grip { display: flex; align-items: center; justify-content: center;
    padding: 8px 0 4px; flex: none; cursor: grab; touch-action: none; }
  .panel-grip span { width: 36px; height: 4px; border-radius: 2px; background: #CBD5E1; }
  .reader-main { padding: 22px 18px 60px; }
}
@media (max-width: 768px) {
  .main { padding: 14px 14px 76px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  /* M3：KPI 四卡在手机保持 2 列（原为 1 列堆叠占满首屏），480 以下再收 1 列 */
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .channel-grid { grid-template-columns: 1fr; }
  .channel-block { padding: 16px 14px 12px; }
  .role-cards { grid-template-columns: 1fr; }
  .login-box { padding: 26px 20px; }
  .brand-text small { display: none; }
  .user-chip .ur { display: none; }
  .bottomnav {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
    background: #fff; border-top: 1px solid var(--line);
    padding: 4px 0 calc(4px + env(safe-area-inset-bottom));
  }
  .bottomnav button {
    flex: 1; border: none; background: none; font-family: var(--font);
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    font-size: 10.5px; color: var(--muted); padding: 5px 2px;
  }
  .bottomnav button .bi { font-size: 18px; }
  .bottomnav button.active { color: var(--blue); font-weight: 600; }
  .para { font-size: 15.5px; }
  .reader { margin: 0; height: calc(100vh - var(--topbar-h) - 60px); }
  .kpi .k-value { font-size: 22px; }
}
@media (max-width: 480px) {
  .topbar { padding: 0 10px; gap: 8px; }
  .topbar-book { display: none; }
  .page-head h2 { font-size: 18px; }
  /* M3 微调（2026-10-23 验收后）：主流手机（390-430px）KPI 保持 2 列——
     原 480 档收 1 列使首屏被四张全宽卡占满；2 列每卡约 185px 足以显示「2/7 章」 */
}

/* 课程构建 */
.unit-card { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 16px; margin-bottom: 12px; }
.unit-card .uc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.unit-card .uc-order {
  width: 26px; height: 26px; border-radius: 8px; background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex: none;
}
.unit-card .uc-title { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.unit-card .uc-meta { font-size: 12px; color: var(--muted); margin-left: auto; display: flex; gap: 6px; align-items: center; }
.kp-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.kp-chip {
  font-size: 12px; padding: 3px 10px; border-radius: 999px;
  background: var(--blue-light); color: var(--navy);
  display: inline-flex; align-items: center; gap: 5px;
}
.kp-chip .kx { cursor: pointer; color: #93C5FD; font-weight: 700; }
.kp-chip .kx:hover { color: var(--red); }
.kp-chip.t-概念 { background: var(--blue-light); color: var(--navy); }
.kp-chip.t-方法 { background: var(--green-light); color: #065F46; }
.kp-chip.t-案例 { background: var(--amber-light); color: #92400E; }
.kp-chip.t-讨论 { background: var(--purple-light); color: #5B21B6; }
.path-flow { display: flex; align-items: center; gap: 0; flex-wrap: wrap; padding: 10px 0; }
.path-node {
  border: 1.5px solid var(--blue); background: var(--blue-light); color: var(--navy);
  border-radius: 10px; padding: 8px 14px; font-size: 12.5px; font-weight: 600;
  max-width: 180px;
}
.path-arrow { color: var(--blue); font-size: 16px; padding: 0 6px; }

/* 测验 */
.q-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 14px; }
.q-card .q-stem { font-size: 14.5px; font-weight: 600; line-height: 1.7; margin-bottom: 12px; }
.q-card .q-stem .q-no { color: var(--blue); margin-right: 6px; }
.q-opt {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; margin-bottom: 8px; cursor: pointer;
  font-size: 13.5px; line-height: 1.6; transition: all .12s;
}
.q-opt:hover { border-color: var(--blue); background: #F8FAFF; }
.q-opt.selected { border-color: var(--blue); background: var(--blue-light); }
.q-opt.correct { border-color: var(--green); background: var(--green-light); }
.q-opt.wrong { border-color: var(--red); background: var(--red-light); }
.q-opt .opt-key {
  width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #CBD5E1;
  display: flex; align-items: center; justify-content: center; font-size: 11px;
  flex: none; margin-top: 1px; color: var(--muted);
}
.q-opt.selected .opt-key { border-color: var(--blue); color: var(--blue); font-weight: 700; }
.q-opt.correct .opt-key { border-color: var(--green); color: var(--green); }
.q-opt.wrong .opt-key { border-color: var(--red); color: var(--red); }
.q-analysis {
  background: #F8FAFF; border-left: 3px solid var(--blue);
  border-radius: 0 8px 8px 0; padding: 10px 14px; font-size: 12.5px;
  color: var(--ink-2); line-height: 1.7; margin-top: 10px;
}
.q-analysis b { color: var(--navy); }

/* 学情分析图表 */
.chart-box { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.chart-box .cb-title { font-size: 13.5px; font-weight: 600; color: var(--navy); margin-bottom: 4px; }
.chart-box .cb-sub { font-size: 11.5px; color: var(--muted); margin-bottom: 10px; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-2); margin-top: 8px; }
.legend .lg { display: inline-flex; align-items: center; gap: 5px; }
.legend .sw { width: 10px; height: 10px; border-radius: 3px; }

/* 帮助页 */
.help-sec h4 { font-size: 14.5px; color: var(--navy); margin: 18px 0 8px; }
.help-sec p, .help-sec li { font-size: 13px; color: var(--ink-2); line-height: 1.85; }
.help-sec ol, .help-sec ul { padding-left: 22px; margin: 6px 0; }
.help-sec code {
  background: var(--bg); border: 1px solid var(--line); border-radius: 4px;
  padding: 1px 6px; font-size: 12px; color: var(--red);
}
.perm-matrix td.ok { color: var(--green); font-weight: 700; }
.perm-matrix td.no { color: #D1D5DB; }

/* 上传解析演示 */
.upload-zone {
  border: 2px dashed #C7D2FE; border-radius: 12px;
  padding: 34px 20px; text-align: center; color: var(--muted);
  background: #F8FAFF; cursor: pointer; transition: all .15s;
}
.upload-zone:hover, .upload-zone.drag { border-color: var(--blue); background: var(--blue-light); color: var(--navy); }
.upload-zone .uz-icon { font-size: 30px; margin-bottom: 8px; }
/* 学生受限态：置灰 + 禁光标 + 无悬停效果 */
.upload-zone.disabled { cursor: not-allowed; opacity: .6; background: #F1F5F9; border-color: var(--line); }
.upload-zone.disabled:hover { border-color: var(--line); background: #F1F5F9; color: var(--muted); }
.card h3 .tag-lock { color: var(--amber); font-weight: 500; }

/* ===== 学生上传申请（req） ===== */
.req-apply {
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.my-req-title { font-size: 12.5px; font-weight: 700; color: var(--navy); width: 100%; margin-top: 4px; }
.req-item {
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 8px;
}
.req-item.mine { background: var(--card); border-left: 3px solid var(--blue); }
.req-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 13.5px; color: var(--navy); }
.req-meta { font-size: 12px; color: var(--muted); margin-top: 3px; }
.req-reason { font-size: 12.5px; color: var(--ink-2); line-height: 1.6; margin-top: 5px; background: var(--bg); border-radius: 7px; padding: 6px 9px; }
.req-acts { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.req-st { border-radius: 99px; padding: 2px 10px; font-size: 11.5px; font-weight: 600; margin-left: auto; flex: none; }
.req-st.pending { background: #FEF3C7; color: #B45309; }
.req-st.done { background: var(--green-light, #ECFDF5); color: #065F46; }
.req-st.ignored { background: #F1F5F9; color: var(--ink-3, #8a94a6); }
/* ===== 工坊申请 · 批量授权（大班开放） ===== */
.sq-batch {
  border: 1px dashed #C7D2FE; border-radius: 10px; background: #F8FAFF;
  padding: 10px 12px; margin: 10px 0 12px;
}
.sq-batch-t { font-size: 12.5px; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.sq-batch-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sq-batch-open {
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line);
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12.5px; color: var(--ink-2);
}
.sq-batch-open .req-st { margin-left: 0; }
/* 社区动态页顶部待处理提示条 */
.req-alert {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  background: #FEF3C7; border: 1px solid #FDE68A; color: #92400E;
  border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; font-size: 13px;
}
.req-alert .ra-txt { flex: 1; min-width: 180px; line-height: 1.6; }
.req-alert .btn { flex: none; }
/* 侧边栏待处理徽标 */
.nav-item .nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: auto;
  background: var(--red, #E11D48); color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 99px; line-height: 1;
}

/* ============================================================
   共读社区 · 互动增强（点赞 / 评论 / 打卡 / 共读小组）
   ============================================================ */
/* 读书共同体横幅 */
.comm-banner {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg, var(--blue-light), #fff);
  border: 1px solid var(--line); border-left: 4px solid var(--blue);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px;
}
.comm-banner .cb-logo {
  width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto;
  background: var(--navy); color: #fff; font-size: 22px;
  display: flex; align-items: center; justify-content: center;
}
.comm-banner h3 { font-size: 15.5px; color: var(--navy); margin: 0 0 3px; }
.comm-banner p { font-size: 12.5px; color: var(--ink-2); line-height: 1.6; margin: 0; }
.comm-banner strong { color: var(--blue); }

/* 点赞 / 评论 操作条 */
.cmt-foot { display: flex; gap: 10px; margin-top: 12px; }
.act-like, .act-cmt {
  border: 1px solid var(--line); background: #fff; color: var(--ink-2);
  border-radius: 99px; padding: 5px 13px; font-size: 12.5px; cursor: pointer;
  transition: all .15s; display: inline-flex; align-items: center; gap: 4px;
}
.act-like:hover, .act-cmt:hover { border-color: var(--blue); color: var(--blue); }
.act-like.liked { background: var(--red-light); border-color: var(--red); color: var(--red); font-weight: 600; }

/* 评论区 */
.cmt-zone { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 12px; }
.cmt-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.cmt-empty { font-size: 12.5px; color: var(--muted); padding: 6px 2px; }
.cmt-item { background: var(--bg); border-radius: 8px; padding: 8px 11px; }
.cmt-item .ci-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 3px; }
.cmt-item .ci-name { font-size: 12.5px; font-weight: 600; color: var(--navy); }
.cmt-item .ci-time { font-size: 11px; color: var(--muted); }
.cmt-item .ci-text { font-size: 13px; color: var(--ink-2); line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
.cmt-item .cmt-del {
  margin-top: 4px; background: none; border: none; color: var(--muted);
  font-size: 11.5px; cursor: pointer; padding: 0;
}
.cmt-item .cmt-del:hover { color: var(--red); }
.cmt-form { display: flex; gap: 8px; align-items: flex-end; }
.cmt-input {
  flex: 1; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
  font-size: 13px; resize: vertical; min-height: 38px; font-family: var(--font);
  background: #fff; color: var(--ink-2);
}
.cmt-input:focus { outline: none; border-color: var(--blue); }

/* 共读打卡 KPI */
.comm-kpi-row { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.comm-kpi {
  flex: 1 1 120px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow);
}
.comm-kpi .k-label { font-size: 12.5px; color: var(--muted); }
.comm-kpi .k-value { font-size: 22px; font-weight: 700; color: var(--navy); margin-top: 4px; font-family: var(--font); }

/* 打卡墙 */
.checkin-wall { display: flex; flex-direction: column; gap: 12px; }
.checkin-card { display: flex; gap: 12px; align-items: flex-start; }
.ci-avatar {
  width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto;
  color: #fff; font-weight: 700; font-size: 17px;
  display: flex; align-items: center; justify-content: center;
}
.ci-body { flex: 1; min-width: 0; }
.ci-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.ci-name { font-size: 14px; font-weight: 700; color: var(--navy); }
.ci-meta { font-size: 11.5px; color: var(--muted); }
.ci-min { font-size: 12.5px; color: var(--blue); margin-top: 4px; font-weight: 600; }
.ci-note {
  font-size: 13.5px; color: var(--ink-2); line-height: 1.8; margin-top: 6px;
  background: var(--bg); border-radius: 8px; padding: 8px 11px;
}

/* 共读小组 */
.group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 22px; }
.group-card { padding: 0; overflow: hidden; }
.group-card h3 { padding: 14px 16px 0; margin-bottom: 6px; }
.gc-bar { height: 6px; }
.gc-theme { padding: 0 16px; font-size: 12.5px; color: var(--blue); font-weight: 600; margin-bottom: 8px; }
.gc-desc { padding: 0 16px; font-size: 13px; color: var(--ink-2); line-height: 1.7; margin-bottom: 12px; }
.gc-meta { padding: 0 16px; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); margin-bottom: 12px; }
.gc-meta span { display: inline-block; }
.gc-members { padding: 0 16px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.gm-avs { display: flex; }
.gm-av {
  width: 30px; height: 30px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center; margin-left: -8px;
  border: 2px solid #fff;
}
.gm-av:first-child { margin-left: 0; }
.gm-count { font-size: 12.5px; color: var(--muted); }
.gc-actions { padding: 0 16px 16px; display: flex; gap: 8px; align-items: center; }
.joined-badge {
  background: var(--green-light); color: #065F46; border: 1px solid transparent;
  border-radius: 99px; padding: 4px 13px; font-size: 12.5px; font-weight: 600;
}

/* 成员风采 */
.ms-wrap { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.ms-title { font-size: 16px; color: var(--navy); margin-bottom: 2px; }
.ms-sub { font-size: 12.5px; color: var(--muted); margin: 0 0 12px; }
.ms-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-2); }
.ms-row:last-child { border-bottom: none; }
.ms-av {
  width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto; color: #fff;
  font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center;
}
.ms-info { flex: 1; min-width: 0; }
.ms-name { font-size: 13.5px; font-weight: 600; color: var(--navy); margin-bottom: 5px; }
.ms-stat { text-align: right; flex: 0 0 auto; }
.ms-pct { font-size: 15px; font-weight: 700; color: var(--blue); }
.ms-min { font-size: 11.5px; color: var(--muted); }

/* ===== 登录 v2：师生分入口 + 微信认证 + 邀请码激活 ===== */
.login-view { display: block; }
.login-box { max-width: 880px; margin: 0 auto; padding: 40px 20px 60px; }
.login-v2 .login-head { text-align: center; margin-bottom: 26px; }
.login-v2 .login-head .logo-big { height: 64px; margin-bottom: 10px; }
.login-v2 .login-head h1 { font-size: 22px; color: var(--navy); margin: 6px 0; }
.login-v2 .login-head p { color: var(--muted); font-size: 13.5px; }
.login-v2 .book-ref { display: inline-block; margin-top: 10px; background: var(--blue-light); color: var(--navy); font-size: 12.5px; padding: 5px 12px; border-radius: 99px; }
.login-alert { max-width: 560px; margin: 0 auto 16px; background: #ECFDF5; border: 1px solid #A7F3D0; color: #065F46; padding: 10px 14px; border-radius: 10px; font-size: 13.5px; }
.login-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 640px; margin: 0 auto; }
.login-col { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 20px; text-align: center; box-shadow: var(--shadow); }
.login-col .lc-icon { font-size: 40px; }
.login-col h2 { font-size: 18px; color: var(--navy); margin: 8px 0 6px; }
.login-col p { color: var(--muted); font-size: 13px; min-height: 56px; margin-bottom: 14px; }
.login-col.teacher { border-top: 3px solid var(--blue); }
.login-col.student { border-top: 3px solid var(--green, #059669); }
.login-col .btn-block + .btn-block { margin-top: 8px; }
.btn-block { display: block; width: 100%; text-align: center; text-decoration: none; box-sizing: border-box; }
.login-admin { max-width: 640px; margin: 18px auto 0; text-align: center; }
.login-admin details { background: var(--card); border: 1px dashed var(--line); border-radius: var(--radius); padding: 10px 14px; }
.login-admin summary { cursor: pointer; color: var(--ink-2); font-size: 13.5px; }
.login-admin p { color: var(--muted); font-size: 12.5px; margin: 8px 0; }
.login-admin .ipt { width: 220px; margin-right: 8px; }
.login-tip { max-width: 640px; margin: 18px auto 0; background: #ECFDF5; border: 1px solid #A7F3D0; color: #065F46; padding: 10px 14px; border-radius: 10px; font-size: 12.5px; line-height: 1.7; }
.pending-box { max-width: 420px; margin: 22px auto 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); text-align: center; }
.pending-box h2 { font-size: 17px; color: var(--navy); margin-bottom: 8px; }
.pending-box p { color: var(--muted); font-size: 13px; margin-bottom: 12px; }
.pending-box .ipt { width: 100%; margin-bottom: 12px; text-align: center; letter-spacing: 2px; text-transform: uppercase; }
.reg-msg { color: var(--red); font-size: 12.5px; margin-top: 8px; min-height: 16px; }
.ipt { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 14px; outline: none; }
.ipt:focus { border-color: var(--blue); }

/* ===== 用户管理 ===== */
.um-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 16px; box-shadow: var(--shadow); }
.um-card h3 { font-size: 15px; color: var(--navy); margin: 0 0 12px; }
.um-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.um-row label { font-size: 13px; color: var(--ink-2); }
.um-out { margin-top: 12px; font-size: 13px; color: var(--ink-2); line-height: 1.8; }
.um-hint { font-size: 12px; color: var(--ink-3, #8a94a6); margin: 8px 0 0; line-height: 1.6; }
/* 书籍库卡片封面 */
.bk-head { display: flex; align-items: flex-start; gap: 14px; }
.bk-cover { width: 78px; height: auto; aspect-ratio: 600 / 845; object-fit: cover; border-radius: 6px; box-shadow: 0 3px 12px rgba(30, 58, 138, .18); flex: none; background: #eef1f6; }
.bk-cover-ph { display: flex; align-items: center; justify-content: center; font-size: 30px; }
.bk-head-txt { flex: 1 1 auto; min-width: 0; }
.bk-head-txt h3 { margin: 2px 0 4px; }
.bk-author { font-size: 12.5px; color: var(--muted); }
/* 阅读页封面小图 */
.reader-cover { width: 30px; height: auto; aspect-ratio: 600 / 845; object-fit: cover; border-radius: 3px; vertical-align: middle; margin-right: 8px; box-shadow: 0 1px 4px rgba(0, 0, 0, .18); }
@media (max-width: 560px) {
  .bk-cover { width: 60px; }
}
.um-code { display: inline-block; background: var(--blue-light); color: var(--navy); font-weight: 700; letter-spacing: 1px; padding: 4px 10px; border-radius: 6px; margin: 4px 6px 0 0; }
.um-list { overflow-x: auto; }
.um-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.um-table th, .um-table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line-2); }
.um-table th { color: var(--muted); font-weight: 600; }
.um-table code { background: var(--bg); padding: 2px 6px; border-radius: 5px; font-size: 12px; }
.um-empty { color: var(--muted); font-size: 13px; padding: 14px 0; }

@media (max-width: 560px) {
  .login-cols { grid-template-columns: 1fr; }
}

/* ============ 云端同步（cloud.js 接入层） ============ */
.login-cloud { max-width: 640px; margin: 18px auto 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; box-shadow: var(--shadow); }
.login-cloud h3 { font-size: 15px; color: var(--navy); margin: 0 0 6px; }
.login-cloud > p { color: var(--muted); font-size: 12.5px; line-height: 1.7; margin: 0 0 12px; }
.login-cloud .lc-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.login-cloud .lc-status { margin-top: 10px; font-size: 12.5px; text-align: center; min-height: 18px; }
.login-cloud .lc-ok { color: var(--green, #059669); }
.login-cloud .lc-warn { color: #B45309; }
.login-cloud .lc-muted { color: var(--muted); }

/* ============ 升级为云端账号（三通道晋升） ============ */
.login-upgrade { max-width: 640px; margin: 18px auto 0; background: linear-gradient(180deg, #EFF6FF 0%, var(--card) 100%); border: 1px solid #BFDBFE; border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); }
.login-upgrade h3 { font-size: 15px; color: var(--navy); margin: 0 0 6px; }
.login-upgrade > p { color: var(--ink-2); font-size: 12.5px; line-height: 1.7; margin: 0 0 12px; }
.login-upgrade .lu-btns { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.login-upgrade .lu-btns .ipt { flex: 1; min-width: 180px; }

/* 学情看板：演示/实时角标 + 班级切换器 */
.tag.demo-tag { background: #FEF3C7; color: #B45309; border: 1px solid #FDE68A; }
.tag.live-tag { background: #DCFCE7; color: #15803D; border: 1px solid #BBF7D0; }
.cls-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 4px; }
.cls-tab { padding: 6px 16px; border: 1px solid var(--line); background: var(--card); border-radius: 999px; font-size: 13px; color: var(--ink-2); cursor: pointer; transition: all .15s; }
.cls-tab:hover { border-color: #93C5FD; color: var(--navy); }
.cls-tab.active { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }

/* 顶栏同步点云端状态：off=未开启/不可用 on=已同步 sync=同步中 err=失败
   （:not(.off) 保留既有的跨标签在位闪烁——闪烁期间短暂变灰） */
.sync-dot.cloud-off { color: #D1D5DB; animation: none; cursor: pointer; }
.sync-dot.cloud-on:not(.off) { color: var(--green, #059669); animation: none; cursor: pointer; }
.sync-dot.cloud-sync:not(.off) { color: var(--blue, #2563EB); animation: pulse 1s infinite; cursor: progress; }
.sync-dot.cloud-err:not(.off) { color: #DC2626; animation: pulse 1.2s infinite; cursor: pointer; }

/* ============ 帮助页 · 代码结构文档（.hd-*，helpdoc.js 渲染作用域） ============ */
.hd-doc { font-size: 13px; line-height: 1.8; color: #334155; max-width: 960px; }
.hd-doc .hd-h { margin: 20px 0 8px; line-height: 1.4; color: var(--ink, #0F172A); font-weight: 700; }
.hd-doc h3.hd-h { font-size: 17px; border-bottom: 2px solid var(--line, #E2E8F0); padding-bottom: 6px; }
.hd-doc h4.hd-h { font-size: 14.5px; color: var(--blue, #2563EB); }
.hd-doc h5.hd-h, .hd-doc h6.hd-h { font-size: 13.5px; }
.hd-doc .hd-p { margin: 6px 0; }
.hd-doc .hd-list { margin: 6px 0; padding-left: 22px; }
.hd-doc .hd-list li { margin: 3px 0; }
.hd-doc .hd-hr { border: none; border-top: 1px solid var(--line, #E2E8F0); margin: 16px 0; }
.hd-doc .hd-pre { background: #F8FAFC; border: 1px solid var(--line, #E2E8F0); border-radius: 8px;
  padding: 10px 12px; overflow-x: auto; font-size: 12px; line-height: 1.6; margin: 8px 0; }
.hd-doc .hd-tbl { font-size: 12px; margin: 8px 0; }
.hd-doc .hd-tbl th { white-space: nowrap; }
.hd-doc code { font-size: 12px; }

/* ============ 一期优化 · M3 工作台首屏（2026-10-23） ============ */
/* 零值 KPI 弱化：浅底虚线框 + 灰值，把首屏注意力让给「继续共读」 */
.kpi.k-zero { background: #F8FAFC; border-style: dashed; }
.kpi.k-zero .k-value { color: var(--muted); font-size: 20px; }
/* 首屏第一焦点卡：渐变强调边框 */
.dash-focus { border: 1.5px solid var(--blue-light); background: linear-gradient(180deg, #F8FBFF 0%, #FFFFFF 65%); }
.dc-row { display: flex; gap: 16px; align-items: center; }
.dc-ring { position: relative; width: 72px; height: 72px; flex: none; }
.dc-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dc-ring .rb { fill: none; stroke: var(--line); stroke-width: 3; }
.dc-ring .rf { fill: none; stroke: var(--blue); stroke-width: 3; stroke-linecap: round;
  transition: stroke-dasharray var(--t-slow) var(--ease-out); }
.dc-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: var(--navy); }
.dc-go { margin-top: 8px; font-size: var(--fs-md); padding: 10px 22px; border-radius: 8px; }
/* 动态流空态折叠为单行入口（M3） */
.feed-empty { padding: 16px; font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.feed-empty .fe-ico { font-size: 18px; }
.feed-empty a { font-weight: 600; }

/* ============ 一期优化 · M1 共读面板抽屉基座规则（桌面端 inert） ============ */
/* 注意：必须用 min-width 域限定——若在文件尾写无条件 .panel-mask{display:none}，
   会因同特异性后置胜出而覆盖 ≤1024 块内的抽屉规则。 */
@media (min-width: 1025px) {
  .panel-mask { display: none; }
  .panel-grip { display: none; }
}
/* 阅读进度行：小节名省略号 + 移动端两个入口按钮不收缩 */
#rpSec { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 30%; flex: none; }
#tocBtnMobile, #panelBtnMobile { flex: none; display: none; }
/* 入口显隐纯 CSS 控制（跨断点缩放自动响应）：目录 ≤1399 收抽屉；共读面板 ≤1024 */
@media (max-width: 1399px) { #tocBtnMobile { display: inline-flex; } }
@media (max-width: 1024px) { #panelBtnMobile { display: inline-flex; } }

/* ============ 二期优化 · M6 动效体系 + M17 断点中间态（2026-10-23） ============ */
/* M6：动效全部引用令牌；prefers-reduced-motion 已在文件头全局禁用 */
#main .page { animation: pageIn var(--t-normal) var(--ease-out); }
@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.modal { animation: modalIn var(--t-normal) var(--ease-spring); }
@keyframes modalIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
.toast { animation: toastIn var(--t-normal) var(--ease-out); }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.progress-track > div { transition: width var(--t-slow) var(--ease-out); }
.rp-tab { transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out); }
.btn { transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); }
.btn:active { transform: scale(.97); }
.nav-item { transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); }

/* M17：断点中间态——grid-3 在 ≤900 先收 2 列，≤600 再收 1 列（原 768 一步到 1 列） */
@media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-3 { grid-template-columns: 1fr; } }

/* ============ 二期优化 · M5 高亮色块无障碍（2026-10-23） ============ */
/* 色名默认隐藏；悬停/键盘聚焦时在色块下方浮现（颜色不再是唯一传达手段） */
.sel-toolbar .sw-name { display: none; font-size: 10.5px; color: #CBD5E1; }
.sel-toolbar button[data-hl] { position: relative; }
.sel-toolbar button[data-hl]:hover .sw-name,
.sel-toolbar button[data-hl]:focus-visible .sw-name { display: inline; }
.sel-toolbar button[data-hl]:focus-visible { outline: 2px solid #60A5FA; outline-offset: 1px; }

/* ============ 二期优化 · M10 共读提醒中心（2026-10-23） ============ */
.bell-btn { position: relative; font-size: 15px; }
.bell-badge { position: absolute; top: -3px; right: -5px; min-width: 16px; height: 16px;
  border-radius: 99px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; padding: 0 4px; line-height: 1; }
.bell-panel { position: fixed; top: calc(var(--topbar-h) + 6px); right: 12px; z-index: 130;
  width: 300px; max-width: calc(100vw - 24px); background: #fff; border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow-lg); padding: 12px;
  animation: modalIn var(--t-normal) var(--ease-spring); }
.bell-panel h4 { font-size: 13px; color: var(--navy); margin: 2px 4px 8px; }
.bell-item { display: flex; gap: 8px; align-items: flex-start; padding: 8px 8px; border-radius: 8px;
  font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.bell-item:hover { background: #F8FAFC; }
.bell-item .bi-ico { flex: none; }
.bell-empty { padding: 16px 8px; text-align: center; font-size: 12.5px; color: var(--muted); }
@media (max-width: 480px) { .bell-panel { left: 12px; width: auto; } }

/* ============ 二期优化 · M11 划线→批注一步流（2026-10-23） ============ */
.hl-bubble { position: fixed; z-index: 121; animation: toastIn var(--t-normal) var(--ease-out); }
.hl-bubble .btn { box-shadow: var(--shadow-lg); border-radius: 99px; font-size: 12px; padding: 6px 14px; }

/* ============ 二期优化 · M12 共读信号前置（2026-10-23） ============ */
.online-float { position: fixed; right: 14px; bottom: 84px; z-index: 44;
  border: 1px solid var(--line); background: #fff; border-radius: 99px;
  box-shadow: var(--shadow-md); font-size: 11.5px; color: var(--ink-2);
  padding: 5px 12px; display: flex; align-items: center; gap: 5px; font-family: var(--font); }
.online-float b { color: var(--blue); }
@media (min-width: 1025px) { .online-float { display: none !important; } }
.reader-live { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 12.5px; }
.reader-live .dot { width: 8px; height: 8px; border-radius: 99px; flex: none; }
.reader-live .rl-name { font-weight: 600; color: var(--ink); flex: none; }
.reader-live .rl-where { color: var(--muted); font-size: 11.5px; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader-live .btn { flex: none; }

/* ============ 二期优化 · M7 图标 SVG 化（2026-10-23） ============ */
/* SVG symbol 公共外观：stroke 继承 currentColor，尺寸由容器类控制 */
.ni-ic, .bi-ic, .tb-ic { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ni-ic { width: 16px; height: 16px; color: var(--muted); }
.nav-item { display: flex; align-items: center; gap: 9px; }
.nav-item.active .ni-ic { color: var(--blue); }
.bi-ic { width: 19px; height: 19px; }
.bottomnav button.active .bi-ic { color: var(--blue); }
.sel-toolbar .tb-ic { width: 13px; height: 13px; }

/* ============ 三期 · M8 语义色纪律 + M9 阴影四级（2026-10-23） ============ */
/* M8 纪律（经核查：全站 btn-danger 均为真 destructive、待办条 req-alert 已是琥珀系、
   批量授权区已是蓝系，现状合规；立此注释防止未来滥用）：
   --red/#E11D48 仅限 destructive（删除/解散/重置/危险确认）；
   --amber 限「待处理」类；中性批量操作用 primary；不得用红色表达「重要」。 */

/* M9 阴影四级落地：KPI/统计卡 xs；可交互悬浮卡（单元/工作/小组/答题卡）md + hover 提升 */
.kpi { box-shadow: var(--shadow-xs); }
.unit-card, .work-card, .group-card, .q-card, .quiz-sheet { box-shadow: var(--shadow-md); }
.unit-card:hover, .work-card:hover, .group-card:hover, .q-card:hover {
  box-shadow: var(--shadow-lg); transform: translateY(-1px);
  transition: box-shadow var(--t-normal) var(--ease-out), transform var(--t-normal) var(--ease-out);
}

/* ============ 三期 · M18 沉浸/专注阅读 + M19 顶栏去重（2026-10-23） ============ */
/* 沉浸模式（自动）：阅读器内向下滚动，底导航滑出让出可视区；上滑恢复 */
.bottomnav { transition: transform var(--t-normal) var(--ease-out); }
.bottomnav.nav-hide { transform: translateY(100%); }
/* 专注模式（手动开关，持久化 fanshu_focus_mode_v1）：
   侧栏/目录/共读面板收起，正文收窄至 640px，暖灰纯净背景，Esc 或再点按钮退出 */
body.focus-mode .sidebar { display: none; }
body.focus-mode .topbar-book { display: none; }
body.focus-mode .reader { grid-template-columns: 1fr; }
body.focus-mode .reader-toc,
body.focus-mode .reader-panel { display: none !important; }
body.focus-mode .panel-mask,
body.focus-mode .online-float { display: none !important; }
body.focus-mode .reader-body { background: #FAFAF8; }
body.focus-mode .reader-main { max-width: 640px; }
body.focus-mode .reader-pagehead { background: #FAFAF8; }
#focusBtn.active { color: var(--blue); background: var(--blue-light); }
/* M19：身份信息已合并进 userChip（头像+姓名+角色小字），roleBadge 退场 */
.role-badge { display: none; }

/* ============ 三期 · 深色模式预留（2026-10-23） ============ */
/* 不默认开启。入口未接入 UI（避免过度设计）；未来接入方式：
   localStorage fanshu_theme_v1 = "dark" → document.documentElement.dataset.theme = "dark"。
   注意：本集只覆盖设计令牌；组件内少量硬编码浅色（如 .hd-pre 背景）需后续逐组件核查。 */
[data-theme="dark"] {
  --navy: #BFDBFE; --blue: #60A5FA; --blue-light: #1E3A8A;
  --red: #FB7185; --red-light: #4C1D24;
  --bg: #0F172A; --card: #1E293B;
  --ink: #E2E8F0; --ink-2: #CBD5E1; --muted: #94A3B8;
  --line: #334155; --line-2: #1E293B;
  --green: #34D399; --green-light: #064E3B;
  --amber: #FBBF24; --amber-light: #451A03;
  --purple: #A78BFA; --purple-light: #2E1065;
  --hl-yellow: rgba(253, 230, 138, .26); --hl-blue: rgba(147, 197, 253, .26);
  --hl-green: rgba(167, 243, 208, .26); --hl-pink: rgba(251, 207, 232, .26);
  --shadow: 0 1px 3px rgba(0, 0, 0, .4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, .5);
}
[data-theme="dark"] body { background: var(--bg); color: var(--ink); }
[data-theme="dark"] .sel-toolbar { background: #0F172A; }