/* ============================================================
   IELTS Studio · 设计系统（浅色主题）
   类名策略：语义化 + 少量工具类。不依赖任何外部 CSS 框架。
   ============================================================ */
:root {
  --bg: #f5f6fa;
  --surface: #ffffff;
  --surface-2: #fafbfd;
  --ink: #171a24;
  --ink-2: #3d4354;
  --muted: #737a8c;
  --faint: #9aa1b1;
  --line: #e7e9f0;
  --line-strong: #d6dae6;

  --brand: #4f46e5;
  --brand-2: #6d5ef0;
  --brand-ink: #ffffff;
  --brand-soft: #eef0ff;
  --brand-line: #d5d9ff;

  --good: #0f9d76;
  --good-soft: #e6f7f1;
  --warn: #c2751a;
  --warn-soft: #fdf3e3;
  --bad: #d64550;
  --bad-soft: #fdecee;
  --info: #2f7fd4;
  --info-soft: #eaf3fd;

  --r-sm: 7px;
  --r: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --shadow-1: 0 1px 2px rgba(23,26,36,.05), 0 1px 3px rgba(23,26,36,.04);
  --shadow-2: 0 2px 6px rgba(23,26,36,.06), 0 8px 24px rgba(23,26,36,.06);
  --shadow-3: 0 12px 40px rgba(23,26,36,.14);
  --sidebar-w: 232px;
  --maxw: 1180px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0; font-weight: 650; line-height: 1.3; letter-spacing: -.01em; }
h1 { font-size: 25px; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }
h4 { font-size: 14px; }
p { margin: 0 0 10px; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; font-size: inherit; }
code, pre, .mono { font-family: var(--mono); }
hr { border: none; border-top: 1px solid var(--line); margin: 18px 0; }
::selection { background: var(--brand-soft); }

/* ---------- 启动占位 ---------- */
.boot { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; background: var(--bg); z-index: 999; }
.boot-mark { font-size: 40px; animation: bob 1.4s ease-in-out infinite; }
.boot-text { color: var(--muted); font-size: 13.5px; }
@keyframes bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-7px) } }

/* ---------- 骨架 ---------- */
#app { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  background: var(--surface); border-right: 1px solid var(--line);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; padding: 16px 12px 14px;
}
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.view { padding: 22px 26px 90px; max-width: var(--maxw); width: 100%; margin: 0 auto; flex: 1; }

/* ---------- 品牌 ---------- */
.brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 14px; }
.brand-logo { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); display: grid; place-items: center; font-size: 18px; box-shadow: var(--shadow-1); }
.brand-name { font-weight: 700; font-size: 15px; letter-spacing: -.02em; }
.brand-sub { font-size: 11px; color: var(--faint); letter-spacing: .04em; text-transform: uppercase; }

/* ---------- 侧栏导航 ---------- */
.nav-group { margin-bottom: 14px; }
.nav-label { font-size: 11px; font-weight: 650; color: var(--faint); letter-spacing: .07em; text-transform: uppercase; padding: 0 10px 6px; }
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm);
  color: var(--ink-2); font-weight: 500; cursor: pointer; border: none; background: none;
  width: 100%; text-align: left; transition: background .13s, color .13s;
}
.nav-item:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.nav-item.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.nav-icon { font-size: 15px; width: 20px; text-align: center; flex: none; }
.nav-badge { margin-left: auto; background: var(--bad); color: #fff; font-size: 10.5px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center; padding: 0 5px; }
.nav-spacer { flex: 1; }

/* ---------- 顶栏 ---------- */
.topbar { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.86); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line); padding: 11px 26px; display: flex; align-items: center; gap: 14px; }
.topbar-title { font-weight: 650; font-size: 15.5px; }
.topbar-sub { color: var(--faint); font-size: 12px; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* 移动端底栏 */
.tabbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 45; background: rgba(255,255,255,.94); backdrop-filter: blur(12px); border-top: 1px solid var(--line); display: flex; padding: 5px 4px calc(5px + env(safe-area-inset-bottom)); }
.tab { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border: none; background: none; color: var(--muted); font-size: 10.5px; cursor: pointer; border-radius: var(--r-sm); }
.tab > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab.active { color: var(--brand); }
.tab-icon { font-size: 18px; }

/* ---------- 卡片 ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-1); min-width: 0; }
.card-pad { padding: 18px 20px; }
.card-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.card-head h3 { flex: 1; }
.card-body { padding: 16px 18px; }
.card-hover { transition: box-shadow .15s, transform .15s, border-color .15s; cursor: pointer; }
.card-hover:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); border-color: var(--line-strong); }

.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }
.row { display: flex; gap: 10px; align-items: center; }
.row-wrap { flex-wrap: wrap; }
.row-top { align-items: flex-start; }
.col { display: flex; flex-direction: column; gap: 10px; }
.between { justify-content: space-between; }
.center { text-align: center; }
.mt { margin-top: 14px; } .mt-sm { margin-top: 8px; } .mt-lg { margin-top: 24px; }
.mb { margin-bottom: 14px; } .mb-sm { margin-bottom: 8px; } .mb-lg { margin-bottom: 24px; }
.grow { flex: 1; min-width: 0; }
.wrap { flex-wrap: wrap; }

/* ---------- 排版工具 ---------- */
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 12.5px; }
.xsmall { font-size: 11.5px; }
.big { font-size: 17px; }
.strong { font-weight: 650; }
.semi { font-weight: 600; }
.nowrap { white-space: nowrap; }
.pre-wrap { white-space: pre-wrap; }
.clamp-1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lead { font-size: 15px; color: var(--ink-2); line-height: 1.7; }
.divider { height: 1px; background: var(--line); margin: 14px 0; }
.eyebrow { font-size: 11.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 15px; border-radius: var(--r-sm); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink); font-weight: 550; cursor: pointer;
  transition: background .13s, border-color .13s, box-shadow .13s, transform .08s; white-space: nowrap;
}
.btn:hover { background: var(--surface-2); border-color: var(--faint); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); box-shadow: 0 1px 2px rgba(79,70,229,.3); }
.btn-primary:hover { background: #4338ca; border-color: #4338ca; }
.btn-soft { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand); }
.btn-soft:hover { background: #e4e7ff; }
.btn-danger { color: var(--bad); border-color: #f3c9cd; background: var(--bad-soft); }
.btn-danger:hover { background: #fbdde0; }
.btn-ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-sm { padding: 5px 11px; font-size: 12.5px; border-radius: 6px; }
.btn-lg { padding: 11px 22px; font-size: 15px; }
.btn-block { width: 100%; }
.btn-icon { padding: 7px 9px; }

/* ---------- 标签 / 徽章 ---------- */
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 2.5px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; }
.chip-brand { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand); }
.chip-good { background: var(--good-soft); border-color: #bde9da; color: var(--good); }
.chip-warn { background: var(--warn-soft); border-color: #f3dcb4; color: var(--warn); }
.chip-bad { background: var(--bad-soft); border-color: #f4cdd1; color: var(--bad); }
.chip-info { background: var(--info-soft); border-color: #c5ddf6; color: var(--info); }
.chip-ghost { background: transparent; }
.chip-gold { background: #fdf3d7; border-color: #f0d489; color: #9a6b00; }

/* 收藏星标：金黄 + 放大，一眼能找到 */
.fav-btn { font-size: 19px; line-height: 1; padding: 2px 10px; color: var(--faint); }
.fav-btn.fav-on { color: #eab308; }
.fav-text-on { color: #9a6b00; font-weight: 700; }

/* 分数徽章 */
.band { display: inline-grid; place-items: center; font-weight: 700; font-variant-numeric: tabular-nums; border-radius: 8px; min-width: 38px; padding: 3px 7px; font-size: 14px; letter-spacing: -.02em; }
.band-sm { min-width: 30px; font-size: 12px; padding: 1px 6px; border-radius: 6px; }
.band-lg { min-width: 62px; font-size: 26px; padding: 7px 12px; border-radius: 12px; }
.band-b1 { background: var(--bad-soft); color: var(--bad); }
.band-b2 { background: var(--warn-soft); color: var(--warn); }
.band-b3 { background: #eef4fb; color: #3f6f9e; }
.band-b4 { background: var(--info-soft); color: var(--info); }
.band-b5 { background: var(--good-soft); color: var(--good); }
.band-b6 { background: #e3f4ec; color: #06795a; }

/* ---------- 表单 ---------- */
label.field { display: block; margin-bottom: 13px; }
.field-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 5px; }
.field-hint { font-size: 11.5px; color: var(--faint); margin-top: 4px; }
.input, .select, .textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); font-family: inherit; font-size: 14px;
  transition: border-color .13s, box-shadow .13s;
}
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.textarea { resize: vertical; line-height: 1.7; min-height: 120px; }
.input-lg { padding: 12px 15px; font-size: 15px; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23737a8c' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; padding-right: 32px; }
.check { display: flex; gap: 9px; align-items: flex-start; cursor: pointer; }
.check input { margin-top: 4px; accent-color: var(--brand); }
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 2.5px; gap: 2px; }
.seg button { border: none; background: none; padding: 5px 13px; border-radius: 6px; cursor: pointer; color: var(--muted); font-weight: 550; font-size: 13px; }
.seg button.active { background: var(--surface); color: var(--brand); box-shadow: var(--shadow-1); font-weight: 650; }

/* ---------- 表格 ---------- */
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); font-weight: 650; padding: 8px 11px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 10px 11px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover { background: var(--surface-2); }

/* ---------- 空状态 / 加载 ---------- */
.empty { text-align: center; padding: 46px 20px; color: var(--muted); }
.empty-icon { font-size: 36px; margin-bottom: 10px; opacity: .6; }
.skel { background: linear-gradient(90deg, #eef0f5 25%, #f6f7fb 50%, #eef0f5 75%); background-size: 200% 100%; animation: shim 1.3s infinite; border-radius: 6px; }
@keyframes shim { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }
.spinner { width: 17px; height: 17px; border: 2px solid var(--brand-line); border-top-color: var(--brand); border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg) } }

/* ---------- Toast / Modal ---------- */
.toasts { position: fixed; top: 16px; left: 0; right: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; gap: 9px; max-width: 100%; padding: 0 16px; pointer-events: none; }
.toast { pointer-events: auto; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: var(--r-sm); box-shadow: var(--shadow-3); padding: 11px 15px; font-size: 13.5px; animation: slide-in .2s ease; max-width: 440px; }
.toast-good { border-left-color: var(--good); }
.toast-bad { border-left-color: var(--bad); }
.toast-warn { border-left-color: var(--warn); }
@keyframes slide-in { from { opacity: 0; transform: translateY(-12px) } }
.modal-mask { position: fixed; inset: 0; background: rgba(23,26,36,.42); z-index: 150; display: grid; place-items: center; padding: 20px; animation: fade .15s; }
@keyframes fade { from { opacity: 0 } }
.modal { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-3); width: 100%; max-width: 520px; max-height: 88vh; display: flex; flex-direction: column; animation: pop .18s ease; }
.modal-wide { max-width: 760px; }
@keyframes pop { from { opacity: 0; transform: scale(.96) translateY(8px) } }
.modal-head { padding: 17px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.modal-body { padding: 18px 20px; overflow-y: auto; }
.modal-foot { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; gap: 9px; justify-content: flex-end; }

/* ---------- 备考考试切换弹层：考试族卡片（app.js openExamSwitcher） ----------
   交互约定（2026-10-07 用户拍板的最终版）：
   · 点族方块空白处 = 只**凸显**（.exam-hl 聚焦态），不选定任何考试；
   · 点族内具体考试 chip = 选定，且先弹确认层。
   exam-cur（当前族，内联主色描边+柔和底）是被动指示；exam-hl 是用户点出来的
   主动聚焦：描边更醒目 + 族色光环 + 微抬 + 提示行，各族互斥、再点一次收起。
   族色从卡片内联的 --fam / --fam-soft 取（exam-theme.js 每族一块）。 */
.exam-family { transition: box-shadow .16s, transform .16s, border-color .16s, background .16s, color .16s; }
.exam-family.exam-hl {
  border-color: var(--fam) !important;
  background: var(--fam-soft) !important;
  box-shadow: inset 0 0 0 1px var(--fam), 0 0 0 4px var(--fam-soft), 0 12px 28px rgba(15, 23, 42, .13);
  transform: translateY(-2px);
}
.exam-family .exam-hl-tip { display: none; margin-top: 10px; font-weight: 600; }
.exam-family.exam-hl .exam-hl-tip { display: block; }

/* ---------- 评分标准弹层/页：多变体考试族顶部的「按具体考试」选择卡片 ----------
   （views/bands.js mountBandsContent）点卡片只切换下方展示的评分标准，
   不写备考目标 —— 与切换器的选定确认是两条路。族色从卡片内联 --fam 取。 */
.band-var-card {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 7px 12px; border-radius: 10px; cursor: pointer; text-align: left;
  background: #fff; border: 1.5px solid var(--line);
  transition: border-color .15s, background .15s, box-shadow .15s;
  font: inherit;
}
.band-var-card:hover { border-color: var(--fam, var(--brand)); }
.band-var-card.on {
  border-color: var(--fam, var(--brand));
  background: var(--fam-soft, var(--brand-soft));
  box-shadow: 0 1px 4px rgba(15, 23, 42, .07);
}

/* ---------- 头像 ---------- */
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); font-size: 17px; flex: none; border: 1px solid var(--brand-line); }
.avatar-sm { width: 26px; height: 26px; font-size: 13px; }
.avatar-xs { width: 18px; height: 18px; font-size: 10px; flex: none; }
.avatar-lg { width: 56px; height: 56px; font-size: 26px; }
.avatar-mine { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }

/* ---------- 进度条 ---------- */
.bar { height: 7px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-2)); border-radius: 999px; transition: width .5s ease; }
.bar-good > i { background: linear-gradient(90deg, #12a67c, #2bc79b); }
.bar-warn > i { background: linear-gradient(90deg, #d98c22, #edb154); }

/* ---------- 关键数字 ---------- */
.stat { padding: 15px 17px; }
.stat-v { font-size: 26px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.stat-l { font-size: 11.5px; color: var(--muted); font-weight: 600; letter-spacing: .03em; margin-top: 3px; }

/* ---------- 提示块 ---------- */
.note { border-radius: var(--r-sm); padding: 11px 14px; font-size: 13px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); display: flex; gap: 9px; align-items: flex-start; }
.note-info { background: var(--info-soft); border-color: #cfe2f7; color: #20598f; }
.note-warn { background: var(--warn-soft); border-color: #f3dcb4; color: #8a5411; }
.note-bad { background: var(--bad-soft); border-color: #f4cdd1; color: #9c2a33; }
.note-good { background: var(--good-soft); border-color: #bde9da; color: #0a6b50; }
.note-icon { flex: none; }

/* ---------- 列表项 ---------- */
.item { padding: 13px 16px; border-bottom: 1px solid var(--line); }
.item:last-child { border-bottom: none; }
.item-click { cursor: pointer; transition: background .12s; }
.item-click:hover { background: var(--surface-2); }

/* ---------- 真题 / 作文卡 ---------- */
.q-card { padding: 16px 18px; display: flex; flex-direction: column; gap: 9px; }
.q-prompt { font-size: 13.8px; line-height: 1.66; color: var(--ink); }
/* 题图（Task 1 图表题）：详情页与写作页共用，宽度自适应、不撑破移动端 */
.q-fig { margin: 10px 0 0; }
.q-img { display: block; max-width: 100%; height: auto; max-height: 420px;
  margin: 0 auto; background: #fff; border: 1px solid var(--line, #e3e7ec);
  border-radius: 8px; padding: 6px; box-sizing: border-box; }
.q-meta { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.q-foot { display: flex; gap: 12px; align-items: center; color: var(--faint); font-size: 11.5px; margin-top: auto; }

/* ---------- 头脑风暴 7 维度 ---------- */
.dim { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.dim-head { display: flex; align-items: center; gap: 9px; padding: 11px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.dim-head .dim-icon { font-size: 16px; }
.dim-title { font-weight: 650; font-size: 13.5px; }
.dim-hint { font-size: 11.5px; color: var(--faint); }
.dim-count { margin-left: auto; font-size: 11.5px; color: var(--muted); font-weight: 650; }
.dim-body { padding: 10px 14px 13px; }
.dim.done { border-color: #bde9da; }
.dim.done .dim-head { background: var(--good-soft); border-color: #bde9da; }
.bs-item { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.bs-item:last-child { border-bottom: none; }
.bs-item-text { flex: 1; font-size: 13px; }
.bs-child { margin-left: 22px; padding-left: 11px; border-left: 2px solid var(--brand-line); }
.bs-child .bs-item-text { font-size: 12.5px; color: var(--ink-2); }

/* ---------- 头脑风暴思维导图（Xmind 风格） ---------- */
/* 结构：.mm = [根节点][.mm-tree = 列(分支行)]；每个 .mm-row = [节点][.mm-kids = 列(子行)]。
   连接线三段式：主干（父节点右缘 → 中轴线）、中轴（首行到末行）、弧线（中轴 → 子节点）。
   颜色走 --bc / --bc-soft / --bc-bg，由 JS 按分支算好注入，不依赖 color-mix。 */
.mm-card { overflow: auto; }
.mm { display: flex; align-items: center; padding: 24px 28px; min-width: max-content; }
.mm-root {
  flex: none; background: var(--surface); border: 2px solid #454c5c; border-radius: 14px;
  padding: 12px 18px; max-width: 320px; min-width: 170px;
  font-weight: 700; font-size: 14px; line-height: 1.55;
  box-shadow: 0 3px 14px rgba(20, 30, 60, .07);
}
.mm-clamp { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.mm-tree, .mm-kids { display: flex; flex-direction: column; padding-left: 32px; position: relative; flex: none; }
/* 主干：父节点右缘 → 中轴 */
.mm-tree::before, .mm-kids::before {
  content: ''; position: absolute; left: 0; top: 50%; width: 16px; height: 2px; margin-top: -1px;
  background: var(--mm-trunk, #c3cad6); border-radius: 1px;
}
.mm-tree > .mm-row, .mm-kids > .mm-row { position: relative; padding: 7px 0; display: flex; align-items: center; }
/* 中轴：贯穿首行到末行（末行截到 50%，弧线从中轴分出） */
.mm-tree > .mm-row::after, .mm-kids > .mm-row::after {
  content: ''; position: absolute; left: -16px; top: 0; bottom: 0; width: 2px;
  background: var(--bc, #c3cad6); opacity: .8;
}
.mm-tree > .mm-row:last-child::after, .mm-kids > .mm-row:last-child::after { bottom: 50%; }
/* 弧线：从中轴拐进子节点左缘中点（圆角边框画弧） */
.mm-tree > .mm-row::before, .mm-kids > .mm-row::before {
  content: ''; position: absolute; left: -16px; top: calc(50% - 14px); width: 16px; height: 15px;
  border-left: 2px solid var(--bc, #c3cad6); border-bottom: 2px solid var(--bc, #c3cad6);
  border-bottom-left-radius: 14px 14px; opacity: .9;
}
.mm-node { flex: none; background: var(--surface); border-radius: 10px; position: relative; }
.mm-head {
  display: flex; align-items: center; gap: 7px; min-width: 128px;
  border: 2px solid var(--bc, var(--line)); padding: 8px 13px;
  font-weight: 700; font-size: 13.5px; cursor: default;
}
.mm-head.done { background: var(--bc-bg, transparent); }
.mm-head .mm-hint { font-size: 11px; color: var(--faint); font-weight: 500; display: block; }
.mm-count { margin-left: auto; font-size: 11px; color: var(--faint); font-weight: 650; padding-left: 8px; white-space: nowrap; }
.mm-leaf {
  border: 1.5px solid var(--bc-soft, var(--line)); padding: 1px 8px;
  display: flex; align-items: center; gap: 4px; max-width: 380px;
}
.mm-leaf:hover { border-color: var(--bc, var(--line-strong)); box-shadow: 0 1px 8px rgba(20,30,60,.06); }
.mm-leaf input {
  border: none; outline: none; background: transparent; font: inherit; font-size: 13px;
  color: var(--ink); width: 200px; min-width: 90px; max-width: 340px; padding: 6px 2px;
  field-sizing: content;
}
.mm-leaf input::placeholder { color: var(--faint); }
.mm-ro { border: 1.5px solid var(--bc-soft, var(--line)); padding: 6px 12px; font-size: 13px; max-width: 360px; }
.mm-ro .xsmall { margin-top: 1px; }
.mm-ghost { border: 1.5px dashed var(--line); color: var(--faint); font-size: 12px; padding: 6px 12px; }
.mm-add { border: 1.5px dashed var(--bc-soft, var(--line)); background: transparent; }
.mm-add:hover { border-style: solid; }
.mm-add .btn { font-size: 12px; padding: 4px 10px; }
.mm-del {
  border: none; background: transparent; cursor: pointer; color: var(--faint);
  font-size: 12px; padding: 2px 4px; opacity: 0; transition: opacity .12s;
}
.mm-row:hover .mm-del { opacity: 1; }
.mm-del:hover { color: var(--bad); }
.mm-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 10px 14px 0; font-size: 11.5px; color: var(--faint); }
.mm-legend span i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

/* ---------- 导图缩放平移 ---------- */
/* 挂了 pan/zoom 的容器：滚动交给拖拽，overflow 收掉；transform 原点固定左上 */
.mm-pz-card { overflow: hidden !important; position: relative; cursor: grab; }
.mm-pz-card.panning { cursor: grabbing; user-select: none; }
.mm-pz-card.panning .mm { pointer-events: none; } /* 拖动时别让节点偷鼠标事件 */
.mm-pz-card .mm { transform-origin: 0 0; }
.mm-pz {
  position: absolute; top: 10px; right: 10px; z-index: 5;
  display: flex; align-items: center; gap: 2px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 9px;
  padding: 3px 6px; box-shadow: 0 2px 10px rgba(20, 30, 60, .08);
}
.mm-pz button {
  border: none; background: transparent; cursor: pointer; color: var(--ink-2);
  font-size: 14px; line-height: 1; padding: 4px 7px; border-radius: 6px; font-weight: 700;
}
.mm-pz button:hover { background: var(--surface-2); color: var(--ink); }
.mm-pz-label { font-size: 11px; color: var(--faint); min-width: 34px; text-align: center; font-variant-numeric: tabular-nums; }

/* 写作页右栏迷你导图 / 放大弹层 */
.bs-mini-map { height: 360px; border: none; border-top: 1px solid var(--line); border-radius: 0; }
.bs-modal-map { height: min(66vh, 640px); }
/* 迷你容器里把节点收紧一档：右栏只有 ~280px，节点瘦下来初始适配比例才够看 */
.bs-mini-map .mm { padding: 14px 16px; }
.bs-mini-map .mm-root { max-width: 180px; min-width: 110px; font-size: 12px; padding: 8px 12px; border-radius: 11px; }
.bs-mini-map .mm-tree, .bs-mini-map .mm-kids { padding-left: 20px; }
.bs-mini-map .mm-tree::before, .bs-mini-map .mm-kids::before { width: 12px; }
.bs-mini-map .mm-tree > .mm-row::after, .bs-mini-map .mm-kids > .mm-row::after { left: -12px; }
.bs-mini-map .mm-tree > .mm-row::before, .bs-mini-map .mm-kids > .mm-row::before { left: -12px; width: 12px; }
.bs-mini-map .mm-head { min-width: 88px; padding: 5px 9px; font-size: 12px; }
.bs-mini-map .mm-leaf { max-width: 190px; }
.bs-mini-map .mm-leaf input { width: 110px; min-width: 70px; max-width: 170px; font-size: 12px; }
.bs-mini-map .mm-ro { max-width: 190px; font-size: 12px; padding: 4px 9px; }
.bs-mini-map .mm-ghost { padding: 4px 9px; }

/* 对比列 */
.cmp { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.cmp-heads { display: grid; }
.cmp-head { padding: 12px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.cmp-head:last-child { border-right: none; }
.cmp-head.mine { background: var(--brand-soft); }
.cmp-row-label { padding: 9px 13px; background: #fbfbfe; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); font-size: 12px; font-weight: 650; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.cmp-cell { padding: 10px 13px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); font-size: 12.5px; vertical-align: top; }
.cmp-cell:last-child { border-right: none; }
.cmp-cell.no { color: var(--faint); font-style: italic; }
.cmp-mine { background: rgba(238,240,255,.5); }

/* ---------- 批改报告 ---------- */
.report-hero { background: linear-gradient(135deg, #4f46e5, #7c6bf5); color: #fff; border-radius: var(--r-lg); padding: 26px 28px; display: flex; gap: 26px; align-items: center; flex-wrap: wrap; box-shadow: 0 8px 28px rgba(79,70,229,.24); }
.report-hero .rh-band { font-size: 58px; font-weight: 750; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.report-hero .rh-label { opacity: .85; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; font-weight: 650; }
.crit { display: grid; grid-template-columns: 84px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.crit:last-child { border-bottom: none; }
.crit-name { font-weight: 650; font-size: 13.5px; }
.crit-en { font-size: 11px; color: var(--faint); font-weight: 500; }
/* 档位边界说明归位到四项里的具体项（2026-10-07 用户要求「分列于四项里」） */
.crit-margin { border-left: 2px solid var(--line); padding-left: 10px; margin-top: 4px; }
/* 引擎判定依据：四项评分卡底部，保持可展开/收缩 */
.crit-basis { border-top: 1px solid var(--line); padding: 12px 16px; }
.crit-basis summary { color: var(--faint-strong, #64748b); }
.crit-basis[open] summary { margin-bottom: 2px; }
.faint-strong { color: var(--strong); font-weight: 650; }
/* 题干分析·建议结构：段落框架 + 句型模版 */
.struc-step { border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; background: var(--surface); }
.struc-idx { flex: none; width: 22px; height: 22px; border-radius: 6px; background: var(--brand-soft); color: var(--brand); font-weight: 700; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.struc-tpl { margin: 0 0 2px 26px; font-size: 12.5px; }
.struc-tpl code { background: var(--surface-2); padding: 2px 6px; border-radius: 5px; font-size: 12px; }
/* 范文段落 */
.essay-para { margin: 0 0 12px; line-height: 1.85; font-family: Georgia, 'Songti SC', serif; }
.essay-para:last-child { margin-bottom: 0; }
.diff { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.diff > div { background: var(--surface); padding: 11px 13px; font-size: 12.8px; line-height: 1.62; }
.diff-before { color: var(--bad); }
.diff-after { color: var(--good); }
/* 词级 diff（可达到版本）：正文黑字，只有被修改的片段标色 —— 原文红 / 修正后绿 */
.wdiff .diff-before { color: inherit; }
.wdiff .diff-after { color: inherit; }
.wdiff .diff-del { color: var(--bad); }
.wdiff .diff-add { color: var(--good); }
.diff-label { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; opacity: .65; margin-bottom: 4px; }
mark.err { background: #fdd; color: #a01a26; border-radius: 3px; padding: 0 3px; font-weight: 600; }
mark.fix { background: #d7f5e7; color: #06654a; border-radius: 3px; padding: 0 3px; font-weight: 600; }

/* ---------- 热力图 ---------- */
.heat { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 11px); gap: 2.5px; overflow-x: auto; padding-bottom: 5px; max-width: 100%; min-width: 0; }
.heat i { width: 11px; height: 11px; border-radius: 2.5px; background: #eceef4; display: block; }
.heat i.l1 { background: #cfd6f7; } .heat i.l2 { background: #a9b4f0; } .heat i.l3 { background: #7d8ce8; } .heat i.l4 { background: var(--brand); }

/* ---------- 编辑器 ---------- */
.editor-wrap { display: grid; grid-template-columns: 1fr 268px; gap: 18px; align-items: start; }
.editor { min-height: 460px; font-size: 15.5px; line-height: 1.78; padding: 18px 20px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); width: 100%; font-family: Georgia, "Songti SC", serif; resize: vertical; }
.editor:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.side-panel { position: sticky; top: 74px; }
.prompt-box { background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: var(--r); padding: 14px 16px; font-size: 13.5px; line-height: 1.66; }

/* ---------- 老师卡 ---------- */
.t-card { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.t-head { display: flex; gap: 11px; align-items: flex-start; }
.t-name { font-weight: 650; font-size: 15px; }
.trust-ring { width: 42px; height: 42px; flex: none; position: relative; }
/* data-ring 小环 canvas：属性宽默认 300×150，若未被绘制会撑破 42px 容器 → 横向溢出。
   强制贴合容器（2026-10-09 布局审查） */
.trust-ring canvas { width: 100% !important; height: 100% !important; }
.offer { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; display: flex; gap: 10px; align-items: center; }
.offer:hover { border-color: var(--brand-line); background: var(--brand-soft); }

/* ---------- 时间线 ---------- */
.tl { position: relative; padding-left: 22px; }
.tl::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.tl-item { position: relative; padding: 0 0 15px; }
.tl-item::before { content: ''; position: absolute; left: -21px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--brand); border: 2px solid var(--surface); box-shadow: 0 0 0 1.5px var(--brand-line); }
.tl-item.dim::before { background: var(--line-strong); box-shadow: 0 0 0 1.5px var(--line); }

/* ---------- 排行 ---------- */
.rank-row { display: flex; align-items: center; gap: 11px; padding: 8px 12px; border-radius: var(--r-sm); }
.rank-row.me { background: var(--brand-soft); }
.rank-no { width: 24px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); text-align: center; }
.rank-no.top { color: var(--brand); }

/* ---------- 勋章 ---------- */
.medal { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); text-align: center; }
.medal.locked { opacity: .42; filter: grayscale(1); }
.medal-icon { font-size: 25px; }
.medal-name { font-size: 11.5px; font-weight: 650; }

/* ---------- 图表 ---------- */
.chart-wrap { position: relative; width: 100%; }
.chart-wrap canvas { width: 100% !important; display: block; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }

/* ---------- 评论 ---------- */
.cmt { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.cmt:last-child { border-bottom: none; }

/* ---------- 首页热力 hero（2026-10-05：通栏置顶，面积拉大） ---------- */
.hero-heat {
  border: 1px solid var(--brand-line);
  background:
    radial-gradient(900px 320px at 88% -30%, rgba(79, 70, 229, .09), transparent 62%),
    radial-gradient(700px 280px at 6% -40%, rgba(15, 157, 118, .08), transparent 60%),
    var(--surface);
  box-shadow: var(--shadow-1);
}
.hero-heat .card-head h3 { font-size: 17px; letter-spacing: .2px; }
.hero-heat .card-head { padding-bottom: 10px; border-bottom: 1px dashed var(--line); }
.heat-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.heat-dot-me { background: var(--brand); }
.heat-dot-site { background: var(--ink-2); opacity: .55; }
.heat-cell { transition: opacity .12s ease; }
.heat-cell:hover { opacity: .86; }

/* ---------- 我的写作：统计块 + 题型模块网格（2026-10-05 视觉重做） ---------- */
.mw-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.mw-stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 13px 16px;
  box-shadow: var(--shadow-1);
}
.mw-stat-num { font-size: 24px; font-weight: 760; line-height: 1.15; color: var(--ink); }
.mw-stat.accent .mw-stat-num { color: var(--brand); }
.mw-stat-label { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

.mw-module {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px 18px 14px;
  box-shadow: var(--shadow-1);
}
.mw-mod-head { display: flex; align-items: center; gap: 12px; margin-bottom: 13px; }
.mw-mod-head h3 { margin: 0; font-size: 15px; }
.mw-mod-icon {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  background: var(--brand-soft); border: 1px solid var(--brand-line);
  display: flex; align-items: center; justify-content: center; font-size: 19px;
}
.mw-bar {
  width: 130px; height: 6px; border-radius: 3px; flex: none;
  background: var(--line); overflow: hidden;
}
.mw-bar i {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
}
.mw-more { margin-top: 12px; }

/* 第一级：左右分栏（左大作文 / 右小作文）+ 雷达图导航 */
.mw-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.mw-panel { padding: 14px 16px 16px; }
.mw-task-banner {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 16px;
  border-radius: var(--r-lg);
  border: 1px solid var(--brand-line);
  background: linear-gradient(90deg, var(--brand-soft), rgba(255, 255, 255, 0) 72%);
  margin-bottom: 12px;
}
.mw-task-banner.t1 {
  border-color: #bfe3d4;
  background: linear-gradient(90deg, var(--good-soft), rgba(255, 255, 255, 0) 72%);
}
.mw-task-icon {
  width: 42px; height: 42px; border-radius: 12px; flex: none;
  background: var(--surface); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 21px; box-shadow: var(--shadow-1);
}
.mw-task-title { font-size: 17px; font-weight: 760; letter-spacing: .3px; }

/* 第二级：雷达图 + 题型胶囊切换 */
.mw-vertex circle { transition: r .12s ease; }
.mw-vertex:hover text { fill: var(--ink); }
.mw-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.mw-type-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface-2); color: var(--ink-2);
  font-size: 12px; padding: 4px 11px; cursor: pointer;
  font-family: inherit;
}
.mw-type-chip b { font-weight: 650; color: var(--muted); }
.mw-type-chip.active {
  border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand);
}
.mw-type-chip.active b { color: var(--brand); }
.mw-panel.t1 .mw-type-chip.active {
  border-color: #bfe3d4; background: var(--good-soft); color: var(--good);
}
.mw-panel.t1 .mw-type-chip.active b { color: var(--good); }

/* ---------- 真题库：按考试分栏，各自筛选（2026-10-05；2026-10-06 加考试范围条） ---------- */
/* auto-fit 而不是写死 1fr 1fr：分栏数由考试版本决定（雅思/高考 2 栏、
   托福 3 栏），写死两列时三栏会挤成两行且第一行只剩一半宽。 */
.q-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px;
  align-items: start;
}
.q-panel { padding: 14px 16px 16px; border-top: 3px solid var(--brand); }
.q-panel.t1 { border-top-color: var(--good); }
.q-panel.gen { border-top-color: var(--brand-2); }
.q-panel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.q-panel-title { font-size: 16px; font-weight: 760; }
/* 考试范围条：两个下拉 + 两个动作按钮，窄屏自动换行 */
.q-scope .field-label { font-size: 11.5px; }
.q-scope .select { height: 36px; }
.q-scope optgroup { font-style: normal; font-weight: 700; }
.q-scope option:disabled { color: var(--faint); }
.q-panel-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.q-panel-filters .select, .q-panel-filters .input {
  flex: 1 1 128px; min-width: 0; width: auto; height: 34px;
}
.q-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: 12px;
}
.q-panel .q-card { margin-bottom: 0; }
.q-panel-page { margin-top: 12px; }
.q-panel-page .row { gap: 10px; }

.mw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(262px, 1fr));
  gap: 12px;
}
.mw-tile {
  display: flex; flex-direction: column;
  transition: transform .14s ease, box-shadow .14s ease;
}
.mw-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.mw-tile-foot {
  margin-top: auto; padding-top: 10px;
  border-top: 1px dashed var(--line);
  display: flex; gap: 8px;
}
.mw-score { font-size: 21px; font-weight: 760; color: var(--brand); text-align: center; line-height: 1.05; }
.mw-score small { display: block; font-size: 10px; font-weight: 500; color: var(--faint); margin-top: 1px; }
.mw-score-none { color: var(--faint); font-weight: 500; }
.mw-ghost {
  border: 1.5px dashed var(--line-strong);
  background: transparent; box-shadow: none;
  display: flex; flex-direction: column;
}

/* ---------- 社区：信息流 + 热榜（2026-10-05） ---------- */
.cm-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: start;
}
/* X 式单列时间线：一行一张卡，动作栏直接躺在卡上 */
.cm-timeline { display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.cm-card {
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 9px;
}
.cm-tweet.is-new { animation: cmNew 2s ease; }
@keyframes cmNew {
  0% { background: var(--brand-soft); box-shadow: 0 0 0 2px var(--brand); transform: translateY(-4px); opacity: 0; }
  35% { opacity: 1; transform: none; }
  100% { background: var(--surface); box-shadow: var(--shadow, none); }
}
/* 卡上的动作栏：回复 / 点赞 / 分享 / 浏览 */
.cm-acts {
  display: flex; align-items: center; gap: 2px;
  border-top: 1px dashed var(--line);
  padding-top: 7px; margin-top: 1px;
}
.cm-act {
  border: none; background: transparent; cursor: pointer;
  color: var(--muted); font-size: 12.5px; font-weight: 500;
  padding: 4px 9px; border-radius: 8px;
  display: inline-flex; align-items: center; gap: 5px;
  font-family: inherit;
}
.cm-act:hover { background: var(--brand-soft); color: var(--brand); }
.cm-act.on { color: #e0245e; font-weight: 700; }
.cm-act.cm-act-primary { color: var(--brand); font-weight: 700; }
.cm-act.cm-views { cursor: default; }
.cm-act.cm-views:hover { background: transparent; color: var(--muted); }
/* 卡上的关注按钮：小药丸，未关注描边 / 已关注置灰 */
.cm-follow {
  flex: none; font-size: 12px; font-weight: 700; font-family: inherit;
  padding: 3px 11px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--brand); color: var(--brand); background: transparent;
}
.cm-follow:hover { background: var(--brand-soft); }
.cm-follow.on { border-color: var(--line-strong); color: var(--muted); }
.cm-follow.on:hover { background: transparent; }
/* 内联回复区 */
.cm-replies {
  border-top: 1px dashed var(--line);
  padding-top: 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.cm-replies[hidden] { display: none; }
.cm-reply-row { display: flex; gap: 8px; align-items: flex-start; }
.cm-reply-row .textarea { flex: 1; min-width: 0; }
.cm-reply { display: flex; gap: 8px; align-items: flex-start; }
.cm-reply .grow { min-width: 0; }
.cm-note { line-height: 1.6; }
/* 转发引用卡（X 式 quote）：内嵌在转发卡 / 弹层里，点击进原帖 */
.cm-quoted {
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface-2);
  padding: 10px 12px; margin-top: 8px;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.cm-quoted:hover { border-color: var(--brand); background: var(--brand-soft); }
.cm-quoted.is-dead { cursor: default; color: var(--muted); font-size: 12.5px; }
.cm-quoted.is-dead:hover { border-color: var(--line); background: var(--surface-2); }
.cm-band { margin-left: 8px; font-weight: 800; color: var(--brand); }
.cm-quoted .cm-band { margin-left: 0; display: inline-block; margin-top: 6px; }

/* ---------- 评论线程（根评论向下线形排列，回复缩进挂父评论下） ---------- */
#cmt-list { display: flex; flex-direction: column; gap: 16px; }
.cmt { display: flex; flex-direction: column; gap: 6px; }
.cmt-thread {
  /* 缩进 = 头像宽(26) + 间距(9)，左侧连接线把回复串在父评论下面 */
  margin: 2px 0 0 35px;
  padding-left: 14px;
  border-left: 2px solid var(--line);
  display: flex; flex-direction: column; gap: 12px;
}
.cmt-replybox { margin-top: 8px; }
.cmt-replybox[hidden] { display: none; }
.cmt-replybox .textarea { width: 100%; }
.cm-attach {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 11px;
  font-size: 12.5px; color: var(--ink-2); line-height: 1.5;
}
.cm-composer .textarea { width: 100%; }
/* 右侧热榜 */
.cm-side { position: sticky; top: 74px; }
.cm-hot-seg { margin: 0 14px 4px; }
.cm-hot-item {
  display: flex; gap: 10px; align-items: center;
  padding: 10px 14px; border-top: 1px dashed var(--line);
  cursor: pointer;
}
.cm-hot-item:hover { background: var(--brand-soft); }
.cm-rank {
  width: 22px; height: 22px; border-radius: 7px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
  background: var(--surface-2); color: var(--muted);
}
.cm-rank.r1 { background: linear-gradient(135deg, #ff9a3d, #ff5e3a); color: #fff; }
.cm-rank.r2 { background: linear-gradient(135deg, #ffb75e, #ed8f03); color: #fff; }
.cm-rank.r3 { background: linear-gradient(135deg, #ffd194, #d1913c); color: #fff; }

/* ---------- 响应式 ---------- */
@media (max-width: 1080px) {
  .editor-wrap { grid-template-columns: 1fr; }
  .side-panel { position: static; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mw-stats { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .mw-split { grid-template-columns: 1fr; }
  .q-split { grid-template-columns: 1fr; }
  .cm-grid { grid-template-columns: 1fr; }
  .cm-side { position: static; }
}
@media (max-width: 860px) {
  .sidebar { display: none; }
  .tabbar { display: flex; }
  .view { padding: 16px 14px 96px; }
  /* 顶栏移动端（2026-10-09 手机修复）：原 flex 不换行，右侧动作区（按钮+chip+铃铛）
     min-content 很宽，把「标题+副标题」的 wrapper 压到 min-content → CJK 逐字断行变竖排。
     现在允许整行换行：标题块可收缩（min-width:0），动作区内部也能换行。 */
  .topbar { padding: 10px 14px; flex-wrap: wrap; row-gap: 4px; }
  .topbar > div:not(.topbar-right) { min-width: 0; }
  .topbar-title { white-space: nowrap; }
  .topbar-sub { white-space: normal; }
  .topbar-right { flex: none; flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  /* 侧栏型 grid（内联 1fr 320px / 340px 1fr 等）在手机端折叠成单列。
     内联 grid-template-columns 优先级高于 class，必须 !important 才能覆盖；
     否则 320px 侧栏 + 被压到 ~11px 的主栏 → 整页横向溢出（2026-10-09 布局审查） */
  .grid-side { grid-template-columns: 1fr !important; }
  .diff { grid-template-columns: 1fr; }
  h1 { font-size: 21px; }
  .crit { grid-template-columns: 1fr; gap: 6px; }
  .mw-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mw-bar { display: none; }
  .hero-cols { grid-template-columns: 1fr !important; }
  /* 热力图卡头：标题 + 我的/全站 chips + 按话题/按题型 seg + 放大按钮，一行塞不下，
     手机端允许换行，避免把 h3 挤成逐字竖排（2026-10-09 手机修复） */
  .hero-heat .card-head { flex-wrap: wrap; row-gap: 6px; }
  .hero-heat .card-head h3 { flex: 1 1 100%; }
  /* 通用卡头：chip/按钮较多时（如「记灵感」卡头 3 chip + 2 按钮），窄屏允许换行，
     避免 nowrap 按钮/chip 把整卡撑破 → 横向溢出（2026-10-09 布局审查） */
  .card-head { flex-wrap: wrap; row-gap: 6px; }
  .card-head .grow { display: none; }
  /* 行内 chip 组（题型/话题/年份/下次复习等）窄屏换行，避免 nowrap chip 溢出（2026-10-09） */
  .row { flex-wrap: wrap; row-gap: 6px; }
  .hero-heat .card-head .seg { flex: 1 1 auto; }
}
@media (min-width: 861px) { .tabbar { display: none !important; } }
@media print {
  /* 导出 PDF：只留报告正文，隐藏一切界面壳；卡片拆掉阴影圆角，用边框分节，
     避免浅色底在打印里糊成灰块。文字全黑保证清晰。 */
  @page { size: A4; margin: 14mm 12mm; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { background: #fff !important; }
  .sidebar, .topbar, .tabbar, .btn, .nav-badge, .grow { display: none !important; }
  .view { padding: 0 !important; max-width: none !important; }
  .card { box-shadow: none !important; border: 1px solid #d8dce4; break-inside: avoid; }
  .card-head { border-bottom: 1px solid #e5e8ee; }
  .report-hero { background: #fff !important; color: #111 !important; box-shadow: none !important; border: 1px solid #d8dce4; }
  .report-hero .rh-band { color: #111; }
  .report-hero .rh-label { color: #666; }
  .band, .chip { color: #111 !important; background: #f1f3f7 !important; border: 1px solid #d8dce4 !important; }
  .diff { border: 1px solid #e5e8ee; }
  .diff-before, .diff-after { background: #fafbfc !important; }
  .struc-step, .struc-tpl code { background: #fafbfc !important; }
  h1, h2, h3, .rh-band, .crit-name, .lead, p, li, td, th, code { color: #111 !important; }
  .small.muted, .xsmall.faint, .faint, .crit-en, .muted { color: #444 !important; }
  a { color: #111; text-decoration: none; }
  details > summary { list-style: none; }
  details > summary::marker, details > summary::-webkit-details-marker { display: none; }
  .pre-wrap, .essay-para { white-space: pre-wrap; }
}

/* ============================================================
   复习板块（/revision）
   ============================================================ */
.rv-overview .card-head { flex-wrap: wrap; }
.rv-overview-body { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: 20px; }
.rv-spark { min-width: 0; }
.rv-bars { display: flex; align-items: flex-end; gap: 4px; height: 108px; padding-top: 6px; }
.rv-bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 4px; }
.rv-bar > i { display: block; width: 100%; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, var(--brand-2), var(--brand)); min-height: 2px; }
.rv-bar > span { font-size: 9.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.rv-dims { border-left: 1px solid var(--line); padding-left: 20px; min-width: 0; }
.rv-topq { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-sm); cursor: pointer; }
.rv-topq:hover { background: var(--surface-2); }

.rv-dimtabs { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.rv-dimtab { display: flex; align-items: center; gap: 10px; text-align: left; padding: 11px 13px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.rv-dimtab:hover { border-color: var(--line-strong); box-shadow: var(--shadow-1); }
.rv-dimtab.active { border-color: var(--brand); background: var(--brand-soft); box-shadow: var(--shadow-1); }
.rv-dimtab-icon { font-size: 20px; flex: none; }
.rv-dimtab-text { display: flex; flex-direction: column; min-width: 0; }
.rv-dimtab-text b { font-size: 13px; }
.rv-dimtab-text i { font-style: normal; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rv-split { grid-template-columns: 330px minmax(0,1fr); align-items: start; gap: 14px; }
.rv-list { position: sticky; top: 12px; max-height: calc(100vh - 130px); display: flex; flex-direction: column; overflow: hidden; }
.rv-filter { padding: 12px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.rv-seg { width: 100%; }
.rv-seg button { flex: 1; }
.rv-search { width: 100%; }
.rv-chips { gap: 8px; }
.rv-chips .input { flex: 1; min-width: 0; }
.rv-items { overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 7px; }
.rv-item { text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-sm); padding: 10px 11px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; transition: border-color .15s, background .15s; }
.rv-item:hover { border-color: var(--line-strong); background: var(--surface-2); }
.rv-item.active { border-color: var(--brand); background: var(--brand-soft); }
.rv-item-tags { gap: 5px; flex-wrap: wrap; }
.rv-item-prompt { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.rv-item-foot { gap: 6px; }
.rv-detail { min-width: 0; }
.rv-prompt { font-size: 14px; line-height: 1.7; color: var(--ink); }

.rv-map, .bs-mini-map { height: 330px; }
.rv-versions { gap: 6px; flex-wrap: wrap; }

.rv-wordgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 10px; }
.rv-word { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 11px; background: var(--surface-2); }
.rv-word-w { font-weight: 700; font-size: 14.5px; letter-spacing: -.01em; }
.rv-phon { font-family: var(--mono, monospace); }
.rv-ex { color: var(--ink-2); line-height: 1.55; margin-top: 4px; }
.rv-meaning { font-size: 13px; margin-top: 2px; }
.rv-coll { color: var(--muted); margin-top: 3px; }
.rv-exbox { margin-top: 8px; padding: 8px 10px; background: var(--brand-soft); border-left: 3px solid var(--brand-line); border-radius: 6px; line-height: 1.6; }
.rv-say { padding: 2px 6px; font-size: 12px; }
.rv-tags { gap: 6px; flex-wrap: wrap; }
.rv-tags .chip { cursor: pointer; }
.rv-tags .chip:not([data-act]) { cursor: default; }

.rv-vocabgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px,1fr)); gap: 12px; }
.rv-vcard { padding: 13px 14px; display: flex; flex-direction: column; }

.rv-tpl, .rv-gram { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; background: var(--surface-2); }
.rv-struct { font-family: var(--mono, monospace); font-size: 12px; color: var(--brand); background: var(--brand-soft); border-radius: 5px; padding: 5px 8px; margin: 6px 0; display: inline-block; }

.rv-matcard .rv-matcn { font-size: 12.5px; color: var(--ink-2); background: var(--warn-soft); border-radius: 6px; padding: 8px 10px; margin-bottom: 10px; line-height: 1.6; }
.rv-matbody { font-size: 13.5px; line-height: 1.85; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rv-matbody.open { display: block; -webkit-line-clamp: unset; }
.rv-matrow { padding: 6px 0; border-bottom: 1px dashed var(--line); }
.rv-matrow:last-child { border-bottom: none; }
.rv-reader-body { font-size: 15px; line-height: 1.95; }

/* 记忆模式（闪卡拼写）：一屏一张卡，字要大 —— 拼写是「写出来」不是「认出来」 */
.rv-flash { max-width: 620px; margin: 0 auto; width: 100%; }
.rv-flash-zone { min-height: 240px; }
.rv-flash-meaning { font-size: 19px; font-weight: 680; line-height: 1.5; }
.rv-flash-word { font-size: 30px; font-weight: 750; letter-spacing: .01em; }
.rv-flash-word.is-ok { color: var(--good); }
.rv-flash-word.is-miss { color: var(--bad); }
.rv-flash-input { font-size: 16px; font-family: var(--mono, monospace); }
.rv-flash-input.is-ok { border-color: var(--good); background: var(--good-soft); }
.rv-flash-input.is-miss { border-color: var(--bad); background: var(--bad-soft); }

/* 跟读练习：例句是主角，字号拉大；录音状态按钮换警示色 */
.rv-shadow { max-width: 720px; margin: 0 auto; width: 100%; }
.rv-shadow-zone { min-height: 260px; }
.rv-shadow-sentence { font-size: 19px; line-height: 1.7; color: var(--ink); }
.rv-shadow-audio { width: 100%; }
.rv-shadow-ctrl .btn-danger { background: var(--bad); border-color: var(--bad); color: #fff; }

@media (max-width: 980px) {
  .rv-split { grid-template-columns: 1fr; }
  .rv-list { position: static; max-height: 460px; }
  .rv-overview-body { grid-template-columns: 1fr; }
  .rv-dims { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 14px; }
  .rv-dimtabs { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* 首页复习提醒卡：有到期题目时整卡轻描一层警示色，扫一眼就能看到 */
.rv-due-card { border-color: #f0d489; background: #fffdf6; }

/* ============================================================
   灵感碎片（2026-10-06）
   卡片要同时容下「我的原文」和「AI 扩写」两种内容 ——
   原文用引号样式标注归属，扩写用浅底块区分，两者一眼分得清。
   ============================================================ */
.spk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: 12px; align-items: start; }
.spk-card { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.spk-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); }
.spk-compact { padding: 10px 12px; gap: 6px; }
.spk-title { font-size: 14px; font-weight: 650; color: var(--ink); }
.spk-raw { font-size: 12.5px; color: var(--ink-2); background: var(--surface-2); border-left: 3px solid var(--brand-line); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 7px 10px; white-space: pre-wrap; }
.spk-exp { background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: var(--r-sm); padding: 8px 10px; }
.spk-exp-body { font-size: 12px; color: var(--ink-2); white-space: pre-wrap; line-height: 1.6; }

/* ---- PEEL 结构卡（2026-10-07）：字母居左、内容居中、同色关联 ----
   P 观点=蓝 · E 解释=紫 · E 例证=橙 · L 回扣=绿；字母块实色、内容块同色浅底，
   一眼看出「哪个字母管哪段话」。颜色写死不接主题变量 —— 这四个色就是教学记号。 */
.spk-peel { display: flex; flex-direction: column; gap: 6px; }
.spk-peel-row { display: flex; align-items: stretch; gap: 8px; }
.spk-peel-tag { flex: none; width: 26px; min-height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12.5px; color: #fff; }
.spk-peel-txt { flex: 1; min-width: 0; text-align: center; border-radius: 8px; padding: 4px 10px 5px; font-size: 12px; line-height: 1.65; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.spk-peel-name { display: block; font-size: 10px; font-weight: 750; letter-spacing: .5px; opacity: .68; margin-bottom: 1px; }
.spk-peel-row.p  .spk-peel-tag { background: #3b82f6; }
.spk-peel-row.p  .spk-peel-txt { background: rgba(59,130,246,.10); border: 1px solid rgba(59,130,246,.32); }
.spk-peel-row.e1 .spk-peel-tag { background: #8b5cf6; }
.spk-peel-row.e1 .spk-peel-txt { background: rgba(139,92,246,.10); border: 1px solid rgba(139,92,246,.32); }
.spk-peel-row.e2 .spk-peel-tag { background: #d97706; }
.spk-peel-row.e2 .spk-peel-txt { background: rgba(217,119,6,.12); border: 1px solid rgba(217,119,6,.34); }
.spk-peel-row.l  .spk-peel-tag { background: #059669; }
.spk-peel-row.l  .spk-peel-txt { background: rgba(5,150,105,.10); border: 1px solid rgba(5,150,105,.32); }

/* ---- 首页双列交错布局（2026-10-07）：左右均匀、板块各占一色 ----
   每个板块一道专属顶边 + 同色浅底：正在练习中=靛蓝 · 摸摸底=紫 · 记灵感=琥珀 ·
   复习提醒=绿 · 写作任务=天蓝 · 词汇任务=青 · 语法任务=红。
   （评分标准卡 2026-10-07 迁去备考目标弹窗，hc-bands 随之删除。）
   复习提醒到期时仍走 .rv-due-card 的琥珀警示（home.js 里二选一，不叠打）。 */
.home-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 980px) { .home-cols { grid-template-columns: 1fr; } }
.hc-doing  { border-top: 3px solid #4f46e5; background: #fcfcff; }
.hc-assess { border-top: 3px solid #7c3aed; background: #fdfcff; }
.hc-spark  { border-top: 3px solid #d97706; background: #fffdf8; }
.hc-review { border-top: 3px solid #059669; background: #f9fcfb; }
.hc-writ   { border-top: 3px solid #0284c7; background: #f9fcff; }
.hc-vocab  { border-top: 3px solid #0d9488; background: #f8fcfb; }
.hc-gram   { border-top: 3px solid #dc2626; background: #fffafa; }
.hc-plan   { border-top: 3px solid #0891b2; background: #f6fcfd; }
.spk-claim { color: var(--brand); font-weight: 550; }
.spk-acts { border-top: 1px solid var(--line); padding-top: 8px; }
.spk-del:hover { color: var(--bad); border-color: var(--bad); }
.spk-num { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.spk-unit { margin-left: 4px; }

.spk-composer .spk-input { min-height: 52px; }
.spk-kind { cursor: pointer; }

.spk-mini { display: flex; align-items: center; gap: 7px; padding: 6px 9px; border-radius: var(--r-sm); cursor: pointer; border: 1px solid var(--line); background: var(--surface); }
.spk-mini:hover { background: var(--surface-2); border-color: var(--line-strong); }

.spk-bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; min-width: 40px; }
.spk-bar > i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--brand-2), var(--brand)); }

.spk-rel-item { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; }
.spk-rel-item:hover { background: var(--surface-2); border-color: var(--line-strong); }

.spk-month .rv-bar > i { background: linear-gradient(180deg, #f0b429, #c2751a); }

.rv-srcseg { flex: none; }
.rv-srchead { display: flex; align-items: center; gap: 8px; padding: 2px 2px 0; }
.spk-matcard .rv-matcn { color: var(--brand); }
.spk-edit .field { display: block; }
.spk-edit .field-label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 3px; }

/* ============================================================
   站外社交分享弹层（2026-10-07）
   零资质零 SDK：canvas 卡片图 + 复制文案 + 各平台手动指引。
   ============================================================ */
.social-share { display: flex; flex-direction: column; gap: 12px; }
.social-card-wrap { text-align: center; }
.social-card-img {
  width: 100%; max-width: 420px; border-radius: var(--r);
  border: 1px solid var(--line); box-shadow: var(--shadow-2);
  display: block; margin: 0 auto; background: var(--surface);
}
.social-card-hint { margin-top: 6px; }
.social-platforms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.social-platform {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 10px 12px; background: var(--surface);
}
.social-platform:hover { border-color: var(--line-strong); background: var(--surface-2); }
.social-platform-icon { font-size: 22px; flex: none; }
@media (max-width: 720px) {
  .social-platforms { grid-template-columns: 1fr; }
}

/* ============================================================
   备考计划左栏（2026-10-07 晚·七）：目录右侧、主页左侧
   ============================================================ */
.home-plan-layout { display: grid; grid-template-columns: 356px minmax(0, 1fr); gap: 16px; align-items: start; }
.plan-rail {
  position: sticky; top: 76px;
  max-height: calc(100vh - 92px); overflow: auto;
  scrollbar-width: thin;
}
.plan-item { border-radius: var(--r-sm, 8px); }
.plan-item:hover { background: rgba(8, 145, 178, .06); }
.plan-check {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--line, #cbd5e1); background: var(--surface, #fff);
  cursor: pointer; font-size: 13px; line-height: 1; color: #fff; padding: 0;
}
.plan-check:hover:not(:disabled) { border-color: #1f8f52; }
.plan-check.on { background: #1f8f52; border-color: #1f8f52; }
.plan-check:disabled { cursor: default; }
/* 月历 */
.cal-head { display: flex; align-items: center; gap: 6px; }
.cal-title { font-weight: 700; font-size: 13.5px; }
.cal-nav {
  width: 24px; height: 24px; border-radius: 6px; flex: none;
  border: 1px solid var(--line, #cbd5e1); background: var(--surface, #fff);
  cursor: pointer; line-height: 1; font-size: 14px;
}
.cal-nav:hover { border-color: #0891b2; color: #0891b2; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-dow { text-align: center; font-size: 10.5px; color: #94a3b8; padding: 2px 0; }
.cal-cell {
  border: 1px solid transparent; border-radius: 8px; background: transparent;
  padding: 3px 0 2px; min-height: 40px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.cal-cell:hover { background: rgba(8, 145, 178, .10); }
.cal-cell.cal-pad { cursor: default; min-height: 0; }
.cal-cell.cal-pad:hover { background: transparent; }
.cal-cell.cal-has { background: rgba(8, 145, 178, .07); }
.cal-cell.cal-today { border-color: #0891b2; }
.cal-cell.cal-sel, .cal-cell.cal-sel:hover { background: #0891b2; }
.cal-cell.cal-sel .cal-d { color: #fff; font-weight: 700; }
.cal-d { font-size: 12px; line-height: 1; color: var(--ink, #1e293b); }
.cal-marks { display: flex; gap: 2px; align-items: center; min-height: 6px; }
.cal-marks i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.cal-marks b { font-size: 8.5px; color: #64748b; font-weight: 600; }
@media (max-width: 1150px) {
  .home-plan-layout { grid-template-columns: 1fr; }
  .plan-rail { position: static; max-height: none; overflow: visible; }
}