:root {
  /* 国风配色（视觉规范） */
  --yuebai: #F6F3EC;
  --yunshui: #BFE0E3;
  --qingbi: #79B8A0;
  --zhuyin: #A9D6B8;
  --tianqing: #93C4D6;
  --dailan: #3F5C6E;
  --oufen: #E8BBC8;
  --ehuang: #F3D79E;
  --momo: #36403B;
  --line: #E4E0D4;

  --bg-page: var(--yuebai);
  --bg-card: #FFFEFA;
  --bg-side: #F3F0E8;
  --bg-soft: #E8F2EE;
  --text-1: var(--momo);
  --text-2: #5A635C;
  --text-3: #9AA39B;
  --border: var(--line);
  --border-strong: #C9C3B4;
  --primary: var(--qingbi);
  --primary-light: #E6F4EE;
  --primary-dark: #5FA98C;
  --lake: var(--tianqing);
  --lake-light: #E4F2F7;
  --accent-warm: var(--oufen);
  --accent-sun: var(--ehuang);
  --ink: var(--dailan);

  --radius: 16px;
  --radius-sm: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-soft: 0 2px 14px rgba(63, 92, 110, 0.06);
  --shadow-hover: 0 6px 22px rgba(63, 92, 110, 0.10);
  --shadow-card: 0 2px 10px rgba(54, 64, 59, 0.05);
  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  /* 插画底纹 */
  --ill-mountains: url('/assets/guofeng/ills/mountains.svg');
  --ill-morning-mountains: url('/assets/guofeng/ills/morning-mountains.svg');
  --ill-sparse-plum: url('/assets/guofeng/ills/sparse-plum.svg');
  --ill-misty-pavilion: url('/assets/guofeng/ills/misty-pavilion.svg');
  --ill-bamboo: url('/assets/guofeng/ills/bamboo.svg');
  --ill-plum: url('/assets/guofeng/ills/plum.svg');
  --ill-cloud: url('/assets/guofeng/ills/cloud.svg');
  --ill-lotus: url('/assets/guofeng/ills/lotus.svg');
  --ill-tea: url('/assets/guofeng/ills/tea.svg');
  --ill-kite: url('/assets/guofeng/ills/kite.svg');
  --ill-lantern: url('/assets/guofeng/ills/lantern.svg');
  --ill-boat: url('/assets/guofeng/ills/boat.svg');
  /* 标签底纹 */
  --pattern-vine: url('/assets/guofeng/patterns/vine.svg?v=2');
  --pattern-cloud: url('/assets/guofeng/patterns/cloud.svg?v=1');
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background:
    radial-gradient(ellipse 80% 50% at 100% 0%, rgba(191, 224, 227, 0.35), transparent 55%),
    radial-gradient(ellipse 60% 40% at 0% 100%, rgba(169, 214, 184, 0.28), transparent 50%),
    var(--bg-page);
  color: var(--text-1);
  font-size: 14px;
  line-height: 1.6;
  -webkit-tap-highlight-color: transparent;
  scrollbar-width: thin;
  scrollbar-color: #A9D6B8 transparent;
}

/* 国风滚动条 */
* {
  scrollbar-width: thin;
  scrollbar-color: #A9D6B8 rgba(246, 243, 236, 0.6);
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track {
  background: rgba(246, 243, 236, 0.45);
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #BFE0E3 0%, #A9D6B8 55%, #79B8A0 100%);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
  min-height: 36px;
}
*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #93C4D6 0%, #79B8A0 100%);
  background-clip: padding-box;
  border: 2px solid transparent;
}
*::-webkit-scrollbar-corner {
  background: transparent;
}

.serif { font-family: "Songti SC", "STSong", "Noto Serif SC", "PingFang SC", serif; }

#app { display: flex; min-height: 100vh; }

/* 插画半透明底纹工具类 */
.gf-ill {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.gf-ill::before {
  content: '';
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: right -8px bottom -12px;
  background-size: 150px auto;
  opacity: 0.16;
  pointer-events: none;
  z-index: 0;
}
.gf-ill > * { position: relative; z-index: 1; }
.gf-ill-mountains::before { background-image: var(--ill-mountains); background-size: 200px auto; opacity: 0.2; }
.gf-ill-bamboo::before { background-image: var(--ill-bamboo); background-position: left -20px bottom -30px; background-size: 120px; opacity: 0.14; }
.gf-ill-plum::before { background-image: var(--ill-plum); background-size: 130px; opacity: 0.15; }
.gf-ill-cloud::before { background-image: var(--ill-cloud); background-position: right -20px top -10px; background-size: 160px; opacity: 0.22; }
.gf-ill-lotus::before { background-image: var(--ill-lotus); background-size: 160px; opacity: 0.18; }
.gf-ill-tea::before { background-image: var(--ill-tea); background-size: 120px; opacity: 0.14; }
.gf-ill-kite::before { background-image: var(--ill-kite); background-size: 130px; opacity: 0.16; }
.gf-ill-lantern::before { background-image: var(--ill-lantern); background-size: 110px; opacity: 0.14; }

.gf-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.gf-icon svg { width: 100%; height: 100%; display: block; }
.gf-icon-lg { width: 28px; height: 28px; }

/* 有底色版模块图标（软面板 + 藕粉印章） */
.gf-micon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(160deg, #EDF6F2 0%, #E1EEF4 100%);
  box-shadow: inset 0 0 0 1px rgba(63, 92, 110, 0.06);
  flex-shrink: 0;
}
.gf-micon-stamp {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 8px;
  height: 8px;
  border-radius: 2.5px;
  background: var(--oufen, #E8BBC8);
  z-index: 1;
}
.gf-micon-inner {
  display: inline-flex;
  width: 26px;
  height: 26px;
}
.gf-micon-inner svg {
  width: 100%;
  height: 100%;
  display: block;
}
.gf-micon-sm {
  width: 32px;
  height: 32px;
  border-radius: 10px;
}
.gf-micon-sm .gf-micon-stamp {
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
}
.gf-micon-sm .gf-micon-inner {
  width: 20px;
  height: 20px;
}

/* ===== Sidebar ===== */
.sidebar {
  width: 228px;
  flex-shrink: 0;
  background:
    linear-gradient(180deg, rgba(232, 242, 238, 0.9) 0%, rgba(243, 240, 232, 0.98) 40%, var(--bg-side) 100%);
  border-right: 1px solid var(--border);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  position: relative;
}
.sidebar::after {
  content: '';
  position: absolute;
  left: -10px;
  bottom: 24px;
  width: 110px;
  height: 160px;
  background: var(--ill-bamboo) no-repeat left bottom / contain;
  opacity: 0.12;
  pointer-events: none;
}

.brand {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  padding: 8px 10px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 1px;
}
.brand-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 70% 28%, rgba(243, 215, 158, 0.55), transparent 42%),
    linear-gradient(160deg, #E8F2EE 0%, #F6F3EC 55%, #E4F2F7 100%);
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(121, 184, 160, 0.28);
  border: 1px solid color-mix(in srgb, var(--yunshui) 55%, var(--border));
  overflow: hidden;
  padding: 0;
}
.brand-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.brand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--oufen);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  flex-shrink: 0;
  line-height: 1;
}

.nav-section {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  padding: 14px 12px 6px;
  letter-spacing: 0.12em;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  cursor: pointer;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  user-select: none;
  transition: var(--transition);
  border: 1px solid transparent;
}

.nav-item:hover {
  background: rgba(191, 224, 227, 0.35);
  color: var(--ink);
  border-color: rgba(191, 224, 227, 0.5);
}

.nav-item.active {
  background: linear-gradient(135deg, var(--qingbi) 0%, #6AAD95 100%);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 3px 12px rgba(121, 184, 160, 0.35);
  border-color: transparent;
}
.nav-item.active .gf-icon svg { stroke: #fff; }
.nav-item.active .gf-icon svg [fill="#3F5C6E"] { fill: #fff; }
.nav-item.active .gf-icon svg [fill="#F3D79E"] { fill: #F3D79E; }
/* 模块线性图标：选中时浅底保留，青碧填充改为白以在绿底上可见 */
.nav-item.active .gf-icon svg [fill="#EDF6F2"],
.nav-item.active .gf-icon svg [fill="#F2F7F5"],
.nav-item.active .gf-icon svg [fill="#FBFCFB"] { fill: rgba(255, 255, 255, 0.28); }
.nav-item.active .gf-icon svg [fill="#79B8A0"] { fill: #fff; }
.nav-item.active .gf-icon svg [fill="#E8BBC8"] { fill: #E8BBC8; }
.nav-item.active .gf-icon svg [stroke="#79B8A0"],
.nav-item.active .gf-icon svg [stroke="#93C4D6"] { stroke: #fff; }
.nav-item.active .nav-dot { background: #fff !important; }

.nav-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}


/* ===== Mobile bottom nav ===== */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  z-index: 200;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
}
.mobile-nav-scroll {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mobile-nav-scroll::-webkit-scrollbar { display: none; }
.mn-item {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-3);
  transition: var(--transition);
  min-width: 52px;
}
.mn-item.active { color: var(--primary); font-weight: 600; }
.mn-item:active { transform: scale(0.92); }
.mn-dot {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  background: var(--bg-soft);
}
.mn-dot.gf-mn-icon {
  background: rgba(232, 242, 238, 0.9);
  border: 1px solid var(--border);
}
.mn-item.active .mn-dot.gf-mn-icon {
  background: var(--primary-light);
  border-color: color-mix(in srgb, var(--qingbi) 40%, var(--border));
}
.mn-item.active .gf-icon svg { stroke: var(--primary-dark); }

/* ===== Content ===== */
.content {
  flex: 1;
  min-width: 0;
  padding: 24px 28px;
  overflow: auto;
  padding-bottom: 80px;
}

.page-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(255, 254, 250, 0.94) 0%, rgba(232, 242, 238, 0.78) 100%);
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
}
.page-head::before {
  content: '';
  position: absolute;
  right: -10px;
  top: -16px;
  width: 140px;
  height: 100px;
  background: var(--ill-cloud) no-repeat right top / contain;
  opacity: 0.22;
  pointer-events: none;
}
.page-head > * { position: relative; z-index: 1; }

.page-head h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 1px;
  font-family: "Songti SC", "STSong", "Noto Serif SC", "PingFang SC", serif;
}

.page-head .sub { color: var(--text-3); font-size: 13px; }

.badge {
  font-size: 11px;
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  border: 1px solid rgba(232, 187, 200, 0.45);
  background-color: rgba(248, 235, 239, 0.85);
  background-image: var(--ill-plum);
  background-repeat: no-repeat;
  background-position: right -8px center;
  background-size: 40px;
}

.muted { color: var(--text-3); }

/* ===== Calendar ===== */
.cal-card {
  background:
    linear-gradient(180deg, rgba(255, 254, 250, 0.88) 0%, rgba(251, 250, 245, 0.62) 48%, rgba(251, 250, 245, 0.38) 100%),
    var(--ill-morning-mountains) center bottom / cover no-repeat,
    #FBFAF5;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}
.cal-card::before {
  content: none;
}
.cal-card > * { position: relative; z-index: 1; }
.cal-card-biweek {
  padding-bottom: 36px;
  background:
    linear-gradient(180deg, rgba(255, 254, 250, 0.92) 0%, rgba(251, 250, 245, 0.78) 42%, rgba(251, 250, 245, 0.55) 100%),
    var(--ill-misty-pavilion) center bottom / cover no-repeat,
    #FBFAF5;
}
.cal-card-biweek.is-expanded {
  padding-bottom: 40px;
}

.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.cal-title { font-size: 17px; font-weight: 500; color: var(--ink); letter-spacing: 0.5px; }

.cal-nav {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: 50%;
  cursor: pointer;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: var(--shadow-soft);
  flex-shrink: 0;
}
.cal-nav:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: var(--shadow-hover);
}
.cal-nav-icon {
  display: block;
  font-size: 14px;
  line-height: 1;
  opacity: 0.9;
}
.cal-nav-prev { transform: rotate(-90deg); }
.cal-nav-next { transform: rotate(90deg); }

.cal-dow {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 4px;
}
.dow {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  padding: 4px 0;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
}

.cal-grid-biweek {
  grid-template-rows: repeat(2, minmax(0, auto));
}

.cal-cell {
  min-width: 0;
  min-height: 68px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 5px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--bg-card);
  cursor: pointer;
  transition: var(--transition);
  overflow: hidden;
}
.cal-cell:hover { border-color: var(--primary); box-shadow: var(--shadow-soft); transform: translateY(-1px); }
.cal-cell.empty { background: transparent; border: none; cursor: default; min-height: 0; }
.cal-cell.empty:hover { box-shadow: none; transform: none; }
.cal-cell.today { border: 2px solid var(--primary); }
.cal-cell.future {
  opacity: 0.55;
  background: #f7fafc;
}

.cal-date {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-2);
  align-self: flex-end;
  line-height: 1;
  margin-bottom: 1px;
}
.cal-date-wrap {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  flex-shrink: 1;
  min-width: 0;
  max-width: 100%;
}
.cal-lunar {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-3);
  line-height: 1;
  letter-spacing: 0.02em;
  opacity: 0.92;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.cal-cell.today .cal-lunar {
  color: color-mix(in srgb, var(--qingbi) 55%, var(--text-3));
}
.cal-cell.future .cal-lunar {
  opacity: 0.75;
}

.cal-cell-top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  min-height: 16px;
  margin-bottom: 1px;
  min-width: 0;
  max-width: 100%;
}
.cal-cell-top .cal-date {
  align-self: auto;
  margin-bottom: 0;
}
/* 饮食日历：日期前的当日热量合计（浅色） */
.diet-cal-kcal {
  font-size: 10px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: color-mix(in srgb, var(--qingbi) 42%, var(--text-3));
  letter-spacing: 0.02em;
}
.diet-cal-kcal-unit {
  font-size: 9px;
  font-weight: 400;
  margin-left: 1px;
  opacity: 0.85;
}
.cal-cell.today .diet-cal-kcal {
  color: color-mix(in srgb, var(--qingbi) 58%, var(--tianqing));
}
.cal-month-tag {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-3);
  line-height: 1;
  margin-right: auto;
}
.fit-album-mark {
  font-size: 12px;
  line-height: 1;
  flex-shrink: 0;
}

/* 右下角展开/收起角标（仅向下/向上箭头） */
.cal-expand-badge {
  position: absolute;
  right: 10px;
  bottom: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-2);
  border-radius: 50%;
  padding: 0;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: var(--transition);
  line-height: 1;
}
.cal-expand-badge:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
  box-shadow: var(--shadow-hover);
}
.cal-expand-badge-icon {
  display: block;
  font-size: 14px;
  line-height: 1;
  opacity: 0.9;
  /* 默认用向上箭头旋转 180° 得到向下，保证两种状态字形一致 */
  transform: rotate(180deg);
  transition: transform 0.2s ease;
}
.cal-expand-badge[aria-expanded="true"] .cal-expand-badge-icon {
  transform: rotate(0deg);
}

.chips { display: flex; flex-direction: column; gap: 2px; min-width: 0; max-width: 100%; }
.chip {
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--radius-pill);
  padding: 1px 8px;
  display: flex;
  justify-content: space-between;
  gap: 6px;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(228, 224, 212, 0.8);
  background-blend-mode: soft-light;
}
.chip > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.chip-link {
  cursor: pointer;
  transition: filter 0.15s, transform 0.15s;
}
.chip-link:hover {
  filter: brightness(0.96);
  transform: translateY(-0.5px);
}

/* ===== Modal ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(54, 64, 59, 0.32);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
  /* 阻止滚轮/触控滑动穿透到底层页面 */
  overscroll-behavior: contain;
  touch-action: none;
}

.modal {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  width: 460px;
  max-width: 92vw;
  max-height: 86vh;
  overflow: auto;
  box-shadow: 0 16px 48px rgba(63, 92, 110, 0.18);
  border: 1px solid var(--border);
  /* 覆盖 overlay 的 touch-action: none，允许弹层内滚动 */
  touch-action: auto;
  overscroll-behavior: contain;
}

/* 饮食当日编辑：合计/保存固定底部，中间滚动 */
.modal.diet-day-modal {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: min(86vh, 820px);
}
.modal.diet-day-modal .modal-head {
  flex-shrink: 0;
  position: relative;
  top: auto;
}
.modal.diet-day-modal .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.modal.diet-day-modal .diet-day-actions {
  flex-shrink: 0;
  margin: 0;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(255, 254, 250, 0.92), rgba(246, 243, 236, 0.98));
  box-shadow: 0 -4px 16px rgba(63, 92, 110, 0.06);
}

/* 运动当日明细：标题固定，仅内容区滚动 */
.modal.fit-day-modal {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: min(86vh, 820px);
}
.modal.fit-day-modal .modal-head {
  flex-shrink: 0;
  position: relative;
  top: auto;
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(255, 254, 250, 0.98), rgba(246, 243, 236, 0.94));
}
.modal.fit-day-modal .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #79B8A0 transparent;
  padding-right: 14px;
}
.modal.fit-day-modal .modal-body::-webkit-scrollbar {
  width: 6px;
}
.modal.fit-day-modal .modal-body::-webkit-scrollbar-track {
  background: transparent;
  margin: 8px 0;
}
.modal.fit-day-modal .modal-body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #BFE0E3 0%, #A9D6B8 45%, #79B8A0 100%);
  border-radius: 999px;
  border: 1px solid transparent;
  background-clip: padding-box;
  min-height: 40px;
}
.modal.fit-day-modal .modal-body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #93C4D6 0%, #79B8A0 100%);
  background-clip: padding-box;
  border: 1px solid transparent;
}
.modal.fit-day-modal .modal-body::-webkit-scrollbar-corner {
  background: transparent;
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg-card);
  z-index: 1;
}
.modal-head-titles {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.modal-head h3 { margin: 0; font-size: 17px; font-weight: 600; }
.modal-lunar {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: 0.04em;
  line-height: 1.3;
}
.modal-head .close {
  border: none;
  background: var(--bg-soft);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  color: var(--text-2);
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-head .close:hover { background: var(--primary-light); color: var(--primary); }
.modal-head-actions { display: flex; align-items: center; gap: 8px; }
.modal-body { padding: 16px 20px 20px; }

/* ===== 统一提示/确认/输入弹窗 ===== */
.ui-dialog-overlay { z-index: 220; }
.ui-dialog.modal {
  width: 380px;
  max-width: 92vw;
}
.ui-dialog-msg {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}
.ui-dialog-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  background: var(--bg);
  margin-bottom: 4px;
}
.ui-dialog-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.ui-dialog-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.btn-primary.ui-dialog-danger {
  background: #C81E4E;
}
.btn-primary.ui-dialog-danger:hover {
  background: #a41840;
  box-shadow: 0 4px 12px rgba(200, 30, 78, 0.28);
}

/* ===== Day Detail ===== */
.day-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.day-mod { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.day-mod-head {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
}
.day-mod-link {
  cursor: pointer;
  transition: filter 0.15s;
}
.day-mod-link:hover { filter: brightness(0.96); }
.day-score { font-weight: 600; }
.day-entries { display: flex; flex-direction: column; }
.day-todo-summary {
  font-size: 12px;
  color: var(--text-3);
  padding-bottom: 2px;
}
.day-todo-entry {
  align-items: flex-start;
  gap: 8px;
}
.day-todo-entry.is-done .day-todo-status {
  color: var(--qingbi);
}
.day-todo-mark {
  flex-shrink: 0;
  width: 1.1em;
  text-align: center;
  color: var(--qingbi);
  font-weight: 700;
  line-height: 1.4;
}
/* 未完成：藕粉偏红的 ×，贴合国风色系 */
.day-todo-entry:not(.is-done) .day-todo-mark {
  color: color-mix(in srgb, #C81E4E 55%, var(--oufen));
  font-weight: 700;
}
.day-todo-entry:not(.is-done) .day-todo-status {
  color: color-mix(in srgb, #C81E4E 45%, var(--oufen));
}
.day-todo-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.day-todo-title {
  font-size: 13px;
  color: var(--text-1);
  line-height: 1.4;
  word-break: break-word;
}
.day-todo-status {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--text-3);
}
.day-entry {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--text-2);
  border-top: 1px solid var(--border);
}
.day-entry .del {
  border: none;
  background: none;
  color: var(--text-3);
  font-size: 11px;
  cursor: pointer;
}
.day-entry .del:hover { color: #E53E3E; }

.add-form { border-top: 1px solid var(--border); padding-top: 16px; }
.add-form h4 { margin: 0 0 12px; font-size: 13px; font-weight: 600; }
.form-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.form-row label {
  flex: 0 0 auto;
  min-width: 4.5em;
  width: auto;
  white-space: nowrap;
  color: var(--text-2);
  font-size: 12px;
}
.form-row select, .form-row input {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  background: var(--bg-card);
  color: var(--text-1);
  font-family: inherit;
}
.btn-add {
  width: 100%;
  padding: 10px;
  margin-top: 4px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}
.btn-add:hover { background: var(--primary-dark); box-shadow: 0 4px 12px rgba(0,149,246,0.3); }

/* ===== Module Features ===== */
.mod-features h3 { font-size: 15px; font-weight: 600; margin: 0 0 12px; }
.mod-features ul { margin: 0; padding-left: 18px; color: var(--text-2); }
.mod-features li { margin-bottom: 6px; font-size: 13px; }

.hint-box {
  margin-top: 24px;
  padding: 16px 18px;
  background: var(--primary-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--primary-dark);
}

/* ===== Buttons ===== */
.btn-primary {
  padding: 8px 18px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: var(--transition);
}
.btn-primary:hover { background: var(--primary-dark); box-shadow: 0 4px 12px rgba(121, 184, 160, 0.35); }

.btn-secondary {
  padding: 8px 18px;
  background: var(--bg-card);
  color: var(--text-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: var(--transition);
}
.btn-secondary:hover { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }

.btn-large { padding: 12px 28px; font-size: 14px; }

.btn-text {
  border: none;
  background: none;
  color: var(--text-3);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
.btn-text:hover { color: var(--primary); background: var(--primary-light); }

.btn-wrong {
  padding: 7px 16px;
  background: #FFF0F3;
  color: #C81E4E;
  border: 1px solid #FFB3C6;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}
.btn-wrong:hover { background: #FFE0E8; }
.btn-correct {
  padding: 7px 16px;
  background: #E6FBF3;
  color: #088F5A;
  border: 1px solid #99E2C2;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}
.btn-correct:hover { background: #D0F5E5; }

/* ===== Exam Tabs ===== */
.exam-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 20px;
}
.exam-tab {
  padding: 10px 20px;
  border: none;
  background: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-3);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  font-family: inherit;
  transition: var(--transition);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.exam-tab:hover { color: var(--primary); background: var(--primary-light); }
.exam-tab.active {
  color: var(--primary-dark);
  font-weight: 600;
  border-bottom-color: var(--qingbi);
  background: var(--primary-light);
}

/* ===== Question Bank ===== */
.bank-stats {
  display: flex;
  gap: 20px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.bank-stats-sm { gap: 10px; }
.bank-stats-sm .bs-item { padding: 10px 14px; }
.bank-stats-sm .bs-item b { font-size: 16px; }
.bs-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
.bs-item:hover { background: var(--primary-light); }
.bs-item.active { background: var(--primary-light); }
.bs-item b { font-size: 20px; font-weight: 600; color: var(--primary); }
.bs-item span { font-size: 11px; color: var(--text-3); }

.bank-subject-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.bank-subject-card {
  text-align: left;
  padding: 18px 18px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(160deg, rgba(255, 254, 250, 0.96) 0%, rgba(232, 242, 238, 0.7) 100%);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  font-family: inherit;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
.bank-subject-card::after {
  content: '';
  position: absolute;
  right: -12px;
  bottom: -18px;
  width: 90px;
  height: 90px;
  background: var(--ill-lotus) no-repeat right bottom / contain;
  opacity: 0.14;
  pointer-events: none;
}
.bank-subject-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}
.bank-subject-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 10px;
}
.bank-subject-count {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 12px;
}
.bank-subject-count b {
  font-size: 28px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
}
.bank-subject-count span {
  font-size: 12px;
  color: var(--text-3);
}
.bank-subject-go {
  font-size: 12px;
  color: var(--text-3);
  font-weight: 500;
}
.bank-subject-card:hover .bank-subject-go { color: var(--primary); }

.bank-subject-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.bank-back-btn {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text-1);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  transition: var(--transition);
  box-shadow: var(--shadow-card);
}
.bank-back-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}
.bank-subject-head-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.bank-subject-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-1);
}
.bank-subject-total {
  font-size: 12px;
  color: var(--text-3);
}

.ef-subject-locked {
  flex: 1;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
}

.bank-toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  align-items: center;
}
.bank-toolbar input, .bank-toolbar select {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 13px;
  background: var(--bg-card);
  color: var(--text-1);
  font-family: inherit;
  transition: var(--transition);
}
.bank-toolbar input:focus, .bank-toolbar select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,149,246,0.1);
}
.bank-toolbar input { flex: 1; min-width: 160px; }

.bank-list { display: flex; flex-direction: column; gap: 8px; }

.qcard {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 254, 250, 0.98), rgba(246, 243, 236, 0.85));
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--shadow-card);
}
.qcard:hover { border-color: var(--primary); box-shadow: var(--shadow-hover); transform: translateY(-1px); }

.qcard-fav {
  font-size: 18px;
  color: var(--text-3);
  cursor: pointer;
  user-select: none;
  line-height: 1;
  flex-shrink: 0;
  transition: var(--transition);
}
.qcard-fav:hover { transform: scale(1.2); }
.qcard-fav.active { color: #FFB300; }

.qcard-body { flex: 1; min-width: 0; }
.qcard-tags { display: flex; gap: 4px; margin-bottom: 4px; flex-wrap: wrap; }
.qcard-tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-soft);
  color: var(--text-2);
  font-weight: 500;
}
.qcard-tag-type { background: #EEEDFE; color: #3C3489; }
.qcard-tag-new { background: var(--primary-light); color: var(--primary-dark); }
.qcard-tag-wrong { background: #FFF0F3; color: #C81E4E; }
.qcard-tag-grad { background: #E6FBF3; color: #088F5A; }
.qcard-tag-real { background: color-mix(in srgb, #F3D79E 55%, #FFFEFA); color: #7A5A2E; }

/* 录入表单：标记真题（与真题标签同色系） */
.ef-real-exam-row {
  align-items: stretch;
  margin-bottom: 14px;
}
.ef-real-exam-row > label,
.ef-real-exam-toggle {
  width: auto;
  flex: 1;
  min-width: 0;
  margin: 0;
  cursor: pointer;
  font-weight: 500;
  color: inherit;
}
.ef-real-exam-toggle input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.ef-real-exam-ui {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, #C9A86A 28%, var(--border, #d8e0e4));
  background:
    linear-gradient(180deg, color-mix(in srgb, #F3D79E 18%, #FFFEFA), #FFFEFA);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.ef-real-exam-toggle:hover .ef-real-exam-ui {
  border-color: color-mix(in srgb, #C9A86A 55%, var(--border, #d8e0e4));
  background:
    linear-gradient(180deg, color-mix(in srgb, #F3D79E 28%, #FFFEFA), #FFFEFA);
}
.ef-real-exam-toggle:focus-within .ef-real-exam-ui {
  box-shadow: 0 0 0 3px color-mix(in srgb, #F3D79E 45%, transparent);
  border-color: #C9A86A;
}
.ef-real-exam-mark {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid #C9A86A;
  background: #fff;
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ef-real-exam-mark::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  opacity: 0;
  transition: transform 0.12s ease, opacity 0.12s ease;
}
.ef-real-exam-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ef-real-exam-title {
  font-size: 13px;
  font-weight: 600;
  color: #7A5A2E;
  line-height: 1.3;
}
.ef-real-exam-desc {
  font-size: 11px;
  color: var(--text-3, #8a97a0);
  line-height: 1.3;
  font-weight: 400;
}
.ef-real-exam-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-pill, 999px);
  background: color-mix(in srgb, #F3D79E 55%, #FFFEFA);
  color: #7A5A2E;
  opacity: 0.45;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.ef-real-exam-toggle input:checked + .ef-real-exam-ui {
  border-color: #C9A86A;
  background:
    linear-gradient(180deg, color-mix(in srgb, #F3D79E 42%, #FFFEFA), color-mix(in srgb, #F3D79E 18%, #FFFEFA));
}
.ef-real-exam-toggle input:checked + .ef-real-exam-ui .ef-real-exam-mark {
  background: #B8893C;
  border-color: #B8893C;
}
.ef-real-exam-toggle input:checked + .ef-real-exam-ui .ef-real-exam-mark::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}
.ef-real-exam-toggle input:checked + .ef-real-exam-ui .ef-real-exam-badge {
  opacity: 1;
  transform: scale(1.02);
}

.ef-check-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-1);
  cursor: pointer;
  user-select: none;
}
.ef-check-label input { width: 16px; height: 16px; accent-color: #79B8A0; }

.qcard-stem {
  font-size: 13px;
  color: var(--text-1);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.qcard-stem .katex { font-size: 1.05em; }
.qcard-stem .katex-display { margin: 0.2em 0; overflow-x: auto; overflow-y: hidden; }
.qcard-meta { font-size: 11px; color: var(--text-3); margin-top: 4px; }
.qcard-del {
  border: none;
  background: none;
  color: var(--text-3);
  font-size: 11px;
  cursor: pointer;
  flex-shrink: 0;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
.qcard-del:hover { color: #E53E3E; background: #FFF0F3; }

.bank-empty { text-align: center; padding: 48px 0; color: var(--text-3); }
.bank-empty-icon { font-size: 40px; margin-bottom: 8px; }
/* ===== 国风空白页 / 空状态 ===== */
.gf-empty {
  text-align: center;
  padding: 36px 16px 40px;
  color: var(--text-3);
}
.gf-empty-ill {
  display: block;
  width: 120px;
  height: 120px;
  margin: 0 auto 12px;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  overflow: visible;
}
svg.gf-empty-ill {
  /* 内联 SVG 与 img 同尺寸 */
  max-width: 100%;
}
.gf-empty-title {
  font-family: "Songti SC", "STSong", "Noto Serif SC", serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--dailan, #3F5C6E);
  letter-spacing: 1px;
  margin: 0;
}
.gf-empty-desc {
  font-size: 12px;
  line-height: 1.7;
  margin: 6px auto 0;
  max-width: 280px;
}
.bank-empty .gf-empty-ill,
.wb-empty .gf-empty-ill {
  margin-bottom: 10px;
}
.gf-empty-sm {
  padding: 16px 8px 20px;
}
.gf-empty-sm .gf-empty-ill {
  width: 88px;
  height: 88px;
  margin-bottom: 8px;
}
.gf-empty-inline {
  padding: 12px 4px 8px;
}
.gf-empty-inline .gf-empty-ill {
  width: 72px;
  height: 72px;
  margin-bottom: 6px;
}

/* ===== Entry Form ===== */
.ef-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ef-row.ef-col { flex-direction: column; align-items: stretch; gap: 6px; }
.ef-row label { width: 60px; color: var(--text-2); font-size: 12px; flex-shrink: 0; font-weight: 500; }
.ef-row.ef-col label { width: auto; }
.ef-row select, .ef-row input[type="text"], .ef-row input[type="number"] {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  background: var(--bg-card);
  color: var(--text-1);
  font-family: inherit;
  transition: var(--transition);
}
.ef-row select:focus, .ef-row input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,149,246,0.1);
}
.ef-row textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  background: var(--bg-card);
  color: var(--text-1);
  font-family: inherit;
  resize: vertical;
  transition: var(--transition);
}
.ef-row textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,149,246,0.1);
}

.ef-opts { display: flex; flex-direction: column; gap: 6px; }
.ef-opt-row { display: flex; align-items: center; gap: 8px; }
.ef-opt-letter {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-light);
  border-radius: 50%;
  font-size: 12px; font-weight: 600;
  color: var(--primary-dark);
  flex-shrink: 0;
}
.ef-opt-input {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  transition: var(--transition);
}
.ef-opt-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,149,246,0.1); }
.ef-opt-check { flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--primary); }
.ef-hint { margin: 4px 0 0; font-size: 11px; }

.ef-radio-group { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; }
.ef-radio-group label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; font-weight: 500; width: auto; }
.ef-radio-group input { accent-color: var(--primary); width: 16px; height: 16px; margin: 0; flex-shrink: 0; }

.dup-box {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #FFB300;
  border-radius: var(--radius-sm);
  background: #FFFBE6;
}
.dup-head { font-size: 13px; font-weight: 600; color: #854F0B; margin-bottom: 8px; }
.dup-existing { padding: 8px 10px; background: #fff; border-radius: var(--radius-sm); margin-bottom: 10px; }
.dup-tag { font-size: 11px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--bg-soft); color: var(--text-2); }
.dup-existing p { margin: 4px 0 0; font-size: 12px; color: var(--text-2); }
.dup-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ===== Quiz Setup ===== */
.quiz-setup { max-width: 580px; }

.quiz-stats-bar {
  display: flex;
  gap: 24px;
  padding: 18px 22px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 20px;
  box-shadow: var(--shadow-card);
}
.qs-item { display: flex; flex-direction: column; gap: 2px; }
.qs-num { font-size: 22px; font-weight: 600; color: var(--primary); }
.qs-label { font-size: 11px; color: var(--text-3); }

.quiz-mode-card {
  padding: 22px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
  box-shadow: var(--shadow-card);
}
.quiz-mode-card h3 { margin: 0 0 14px; font-size: 15px; font-weight: 600; }
.mode-list { display: flex; flex-direction: column; gap: 8px; }
.mode-opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
}
.mode-opt:hover { border-color: var(--primary); background: var(--primary-light); }
.mode-opt:has(input:checked) { border-color: var(--primary); background: var(--primary-light); }
.mode-opt input { margin-top: 2px; accent-color: var(--primary); }
.mode-card-body { display: flex; flex-direction: column; gap: 2px; }
.mode-title { font-size: 14px; font-weight: 600; }
.mode-desc { font-size: 12px; color: var(--text-3); }

.quiz-preview { margin-bottom: 16px; }
.qp-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  padding: 12px 16px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.qp-detail { color: var(--text-3); font-size: 12px; }

/* ===== Quiz Active ===== */
.quiz-active { max-width: 640px; }
.qz-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.qz-progress { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-2); }
.qz-progress-bar { width: 120px; height: 6px; background: var(--border); border-radius: var(--radius-pill); overflow: hidden; }
.qz-progress-fill { height: 100%; background: var(--primary); border-radius: var(--radius-pill); transition: width 0.3s; }
.qz-meta { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--text-3); }
.qz-timer { font-variant-numeric: tabular-nums; }

.qz-question-card {
  padding: 26px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.qz-tags { display: flex; gap: 4px; margin-bottom: 14px; flex-wrap: wrap; }
.qz-tag { font-size: 11px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--bg-soft); color: var(--text-2); font-weight: 500; }
.qz-tag-type { background: #EEEDFE; color: #3C3489; }
.qz-tag-wrong { background: #FFF0F3; color: #C81E4E; }
.qz-tag-grad { background: #E6FBF3; color: #088F5A; }
.qz-stem { font-size: 15px; line-height: 1.7; color: var(--text-1); margin-bottom: 20px; }

.qz-options { display: flex; flex-direction: column; gap: 8px; }
.qz-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
}
.qz-opt:hover { border-color: var(--primary); background: var(--primary-light); }
.qz-opt.selected { border-color: var(--primary); background: var(--primary-light); }
.qz-opt-letter {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-soft);
  border-radius: 50%;
  font-size: 12px; font-weight: 600;
  flex-shrink: 0;
  transition: var(--transition);
}
.qz-opt.selected .qz-opt-letter { background: var(--primary); color: #fff; }
.qz-opt-text { font-size: 14px; }

.qz-judge { display: flex; gap: 16px; }
.qz-judge-btn {
  flex: 1;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: var(--transition);
}
.qz-judge-btn:hover { border-color: var(--primary); background: var(--primary-light); }

.qz-fill-blanks { display: flex; flex-direction: column; gap: 10px; }
.qz-fill-row { display: flex; align-items: center; gap: 10px; }
.qz-fill-label {
  flex-shrink: 0;
  width: 42px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
}
.qz-fill-input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  background: var(--bg-card);
  color: var(--text-1);
  transition: var(--transition);
}
.qz-fill-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,149,246,0.1);
}
.qz-fill-review { margin: 8px 0 4px; display: flex; flex-direction: column; gap: 6px; }
.qz-fill-review-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
}
.qz-fill-review-row.ok { background: #E6FBF3; color: #088F5A; }
.qz-fill-review-row.bad { background: #FFF0F3; color: #C81E4E; }

.qz-subjective-answer { margin-bottom: 16px; }
.qv-subjective-answer { margin-bottom: 16px; }
.qv-subjective-answer .qz-ref-text { white-space: pre-wrap; word-break: break-word; }
.qz-ref-label { font-size: 12px; font-weight: 600; color: var(--text-3); margin-bottom: 4px; }
.qz-ref-text {
  padding: 14px 16px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-1);
}
.qz-self-assess {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-2);
}

.qz-feedback {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: var(--radius);
  margin-top: 16px;
  font-size: 14px;
  font-weight: 500;
}
.qz-feedback.correct { background: #E6FBF3; color: #088F5A; }
.qz-feedback.wrong { background: #FFF0F3; color: #C81E4E; }
.qz-fb-icon { font-size: 20px; font-weight: 600; }
.qz-fb-answer { margin-left: auto; font-size: 13px; }
.qz-explanation {
  margin-top: 12px;
  padding: 14px 16px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-2);
}

/* ===== Quiz Summary ===== */
.quiz-summary { text-align: center; padding: 40px 0; }
.qs-icon { font-size: 48px; margin-bottom: 12px; }
.quiz-summary h2 { margin: 0 0 28px; font-size: 22px; font-weight: 600; }
.qs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 480px;
  margin: 0 auto 32px;
}
.qs-stat {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}
.qs-stat-num { display: block; font-size: 26px; font-weight: 600; color: var(--primary); }
.qs-stat-label { font-size: 12px; color: var(--text-3); }
.qs-actions { display: flex; gap: 12px; justify-content: center; }

/* ===== Wrong Question Book ===== */
.wb-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.wb-stats { display: flex; gap: 20px; }
.wb-stat { font-size: 13px; color: var(--text-2); }
.wb-stat b { font-size: 20px; font-weight: 600; color: var(--primary); }

.wb-group { margin-bottom: 24px; }
.wb-group-head {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--border);
}
.wb-count { font-size: 12px; color: var(--text-3); font-weight: 400; margin-left: 8px; }
.wb-sub-group { margin-bottom: 12px; }
.wb-sub-head { font-size: 13px; color: var(--text-3); margin-bottom: 8px; }

.wb-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  margin-bottom: 6px;
  transition: var(--transition);
  box-shadow: var(--shadow-card);
}
.wb-item:hover { border-color: var(--primary); }
.wb-item-main { flex: 1; min-width: 0; }
.wb-item-stem {
  font-size: 13px;
  color: var(--text-1);
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wb-item-meta { display: flex; gap: 12px; font-size: 11px; color: var(--text-3); }
.wb-progress { color: #C81E4E; }
.wb-item-actions { width: 80px; flex-shrink: 0; }
.wb-progress-bar { height: 6px; background: var(--border); border-radius: var(--radius-pill); overflow: hidden; }
.wb-progress-fill { height: 100%; background: var(--primary); border-radius: var(--radius-pill); transition: width 0.3s; }

.wb-empty {
  text-align: center;
  padding: 56px 20px 64px;
  color: var(--text-3);
}
.wb-empty .gf-empty-ill {
  width: 132px;
  height: 132px;
  margin-bottom: 14px;
}
.wb-empty .gf-empty-title {
  font-size: 16px;
  letter-spacing: 1.5px;
}
.wb-empty .gf-empty-desc {
  max-width: 300px;
  margin-top: 8px;
}
.wb-empty-icon { display: none; }

.wb-graduated { margin-top: 32px; }
.wb-grad-head {
  font-size: 15px; font-weight: 600;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--border);
  color: #088F5A;
}
.wb-grad-list { display: flex; flex-direction: column; gap: 6px; }
.wb-grad-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #F0FCF6;
  border: 1px solid #B7E8D2;
  border-radius: var(--radius-sm);
}
.wb-grad-tag { font-size: 11px; padding: 2px 8px; border-radius: var(--radius-pill); background: #E6FBF3; color: #088F5A; flex-shrink: 0; }
.wb-grad-stem { font-size: 12px; color: var(--text-2); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-grad-more { font-size: 12px; color: var(--text-3); padding: 4px 12px; }

/* ===== Question View Modal ===== */
.qv-tags { display: flex; gap: 4px; margin-bottom: 12px; }
.qv-stem { font-size: 15px; line-height: 1.7; color: var(--text-1); margin-bottom: 16px; }
.qv-opts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.qv-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.qv-opt.correct { border-color: var(--primary); background: var(--primary-light); }
.qv-opt-letter {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-soft);
  border-radius: 50%;
  font-size: 12px; font-weight: 600;
  flex-shrink: 0;
}
.qv-opt.correct .qv-opt-letter { background: var(--primary); color: #fff; }
.qv-answer {
  padding: 14px 16px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 16px;
}
.qv-explanation {
  padding: 14px 16px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-2);
  margin-bottom: 16px;
}
.qv-meta { display: flex; gap: 16px; font-size: 12px; color: var(--text-3); }

/* 题目详情 / 编辑：标题固定，内容区国风滚动条（不展示横向，纵向不贴满） */
.modal.qview-modal {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: min(86vh, 820px);
}
.modal.qview-modal .modal-head {
  flex-shrink: 0;
  position: relative;
  top: auto;
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(255, 254, 250, 0.98), rgba(246, 243, 236, 0.94));
}
.modal.qview-modal .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 12px 12px 12px 16px;
  display: flex;
  flex-direction: column;
}
.qview-body-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-right: 8px;
  scrollbar-width: thin;
  scrollbar-color: #79B8A0 transparent;
}
.qview-body-scroll::-webkit-scrollbar {
  width: 6px;
  height: 0;
}
.qview-body-scroll::-webkit-scrollbar:horizontal {
  display: none;
  height: 0;
}
.qview-body-scroll::-webkit-scrollbar-track {
  background: transparent;
  margin-block: 10px;
  border-radius: 999px;
}
.qview-body-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #BFE0E3 0%, #A9D6B8 45%, #79B8A0 100%);
  border-radius: 999px;
  border: 1px solid transparent;
  background-clip: padding-box;
  min-height: 36px;
}
.qview-body-scroll::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #93C4D6 0%, #79B8A0 100%);
  background-clip: padding-box;
  border: 1px solid transparent;
}
.qview-body-scroll::-webkit-scrollbar-corner {
  background: transparent;
  display: none;
}

/* ===== Edit Mode ===== */
.qv-edit-stem, .qv-edit-answer, .qv-edit-explanation { margin-bottom: 16px; }
.qv-edit-stem > label, .qv-edit-answer > label, .qv-edit-explanation > label {
  display: block; font-size: 12px; color: var(--text-3); margin-bottom: 4px; font-weight: 500;
}
.qv-edit-stem textarea, .qv-edit-answer input:not([type="radio"]):not([type="checkbox"]), .qv-edit-answer textarea, .qv-edit-explanation textarea {
  width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 13px; line-height: 1.6; background: var(--bg-card); color: var(--text-1); font-family: inherit; resize: vertical;
  box-sizing: border-box; transition: var(--transition);
}
.qv-edit-stem textarea:focus, .qv-edit-answer input:not([type="radio"]):not([type="checkbox"]):focus, .qv-edit-answer textarea:focus, .qv-edit-explanation textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,149,246,0.1);
}
/* 判断题正确答案：横向并排 */
.qv-edit-answer .ef-radio-group,
.ef-radio-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.qv-edit-answer .ef-radio-group label,
.ef-radio-group label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  transition: var(--transition);
  box-sizing: border-box;
}
.qv-edit-answer .ef-radio-group label:hover,
.ef-radio-group label:hover {
  border-color: var(--qingbi);
  background: var(--primary-light);
  color: var(--primary-dark);
}
.qv-edit-answer .ef-radio-group input,
.ef-radio-group input {
  width: 16px;
  height: 16px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--primary);
  padding: 0;
  border: none;
  box-shadow: none;
}
.qv-edit-answer .ef-radio-group label:has(input:checked),
.ef-radio-group label:has(input:checked) {
  border-color: color-mix(in srgb, var(--qingbi) 45%, var(--border));
  background: color-mix(in srgb, var(--qingbi) 16%, #FFFEFA);
  color: var(--dailan, #3F5C6E);
  font-weight: 600;
}
.qv-edit-opts { display: flex; flex-direction: column; gap: 8px; }
.qv-edit-opt {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 13px; cursor: pointer; background: var(--bg-card);
  transition: var(--transition);
}
.qv-edit-opt:hover { border-color: var(--primary); background: var(--primary-light); }
.qv-edit-opt-row {
  align-items: center;
  cursor: default;
}
.qv-edit-opt-row:hover { background: var(--bg-card); }
.qv-edit-opt input[type="radio"],
.qv-edit-opt input[type="checkbox"] {
  margin: 0; flex-shrink: 0; accent-color: var(--primary); width: 16px; height: 16px; cursor: pointer;
}
.qv-edit-opt-letter {
  width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
  background: var(--primary-light); border-radius: 50%; font-size: 11px; font-weight: 700; color: var(--primary-dark); flex-shrink: 0;
}
.qv-edit-opt-text { flex: 1; min-width: 0; word-break: break-word; line-height: 1.45; }
.qv-edit-opt-input {
  flex: 1;
  min-width: 0;
  width: auto !important;
  margin: 0;
  padding: 6px 10px !important;
}
.qv-edit-opt-block {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.qv-edit-preview {
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-soft) 72%, var(--bg-card));
  overflow: hidden;
}
.qv-edit-opt-preview {
  margin: 0 0 4px;
  border-radius: 0 0 8px 8px;
  border-top: none;
}
.qv-edit-preview-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px 0;
}
.qv-edit-preview-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
}
.qv-edit-preview-hint {
  font-size: 11px;
  color: var(--text-3);
}
.qv-edit-preview-body {
  padding: 8px 12px 12px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-1);
  min-height: 36px;
  word-break: break-word;
}
.qv-edit-preview-body .katex { font-size: 1.05em; }
.qv-edit-opt-preview .qv-edit-preview-body {
  font-size: 13px;
  min-height: 28px;
  padding: 6px 12px 10px;
}
.qv-del-btn {
  color: #C81E4E;
  border-color: color-mix(in srgb, #C81E4E 35%, var(--border));
}
.qv-del-btn:hover {
  color: #C81E4E;
  border-color: #C81E4E;
  background: #FFF0F3;
}

/* ===== Comments ===== */
.qv-comments-section, .qz-comments-section {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border);
}
.qv-comments-head, .qz-comments-head {
  font-size: 13px; font-weight: 600; color: var(--text-1); margin-bottom: 10px;
  display: flex; align-items: center; gap: 6px;
}
.qv-comments-count, .qz-comments-count {
  font-size: 11px; background: var(--primary-light); padding: 2px 8px; border-radius: var(--radius-pill); color: var(--primary-dark); font-weight: 500;
}
.qv-comment-input-row, .qz-comment-input-row { display: flex; gap: 8px; margin-bottom: 12px; }
.qv-comment-input-row input, .qz-comment-input-row input {
  flex: 1; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-pill);
  font-size: 13px; background: var(--bg-card); color: var(--text-1); font-family: inherit;
  transition: var(--transition);
}
.qv-comment-input-row input:focus, .qz-comment-input-row input:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,149,246,0.1);
}
.qv-comment-list, .qz-comment-list { display: flex; flex-direction: column; gap: 8px; }
.qz-comment {
  padding: 12px 14px; background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.qz-comment-text { font-size: 13px; line-height: 1.5; color: var(--text-1); margin-bottom: 4px; }
.qz-comment-meta { display: flex; align-items: center; gap: 12px; font-size: 11px; color: var(--text-3); }
.qz-comment-del { border: none; background: none; color: var(--text-3); font-size: 11px; cursor: pointer; padding: 0; margin-left: auto; border-radius: var(--radius-sm); }
.qz-comment-del:hover { color: #E53E3E; }

/* ===== Entry Tools / 题干录入区 ===== */
.ef-stem-field {
  margin: 4px 0 14px;
}
.ef-stem-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.ef-stem-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.ef-input-label {
  font-size: 13px;
  color: var(--text-1);
  font-weight: 600;
}
.ef-stem-hint {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 400;
}
.ef-stem-hint code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--bg-soft);
  color: var(--primary-dark);
}
.ef-input-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ef-tool-btn {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  color: var(--text-2);
  font-weight: 500;
  transition: var(--transition);
  white-space: nowrap;
}
.ef-tool-btn:hover,
.ef-tool-btn.active {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary);
}
.ef-stem-box {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card);
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.ef-stem-box:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}
.ef-stem-box textarea#ef-stem {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 148px;
  margin: 0;
  padding: 14px 14px 12px;
  border: none;
  outline: none;
  resize: vertical;
  background: transparent;
  font-size: 14px;
  line-height: 1.7;
  font-family: inherit;
  color: var(--text);
}
.ef-stem-box textarea#ef-stem::placeholder {
  color: var(--text-3);
  line-height: 1.6;
}
.ef-stem-math.math-toolbar {
  margin: 0;
  border: none;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: var(--bg-soft);
  max-height: 160px;
}
.ef-stem-preview {
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-soft) 72%, var(--bg-card));
}
.ef-stem-preview-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 14px 0;
}
.ef-stem-preview-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
}
.ef-stem-preview-hint {
  font-size: 11px;
  color: var(--text-3);
}
.ef-stem-preview-body {
  padding: 8px 14px 14px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-1);
  min-height: 44px;
  word-break: break-word;
}
.ef-stem-preview-body .katex {
  font-size: 1.05em;
}
.ef-stem-preview-empty {
  color: var(--text-3);
  font-size: 12px;
}
.ef-ocr-status { margin-bottom: 12px; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 12px; }
.ef-ocr-status.loading { background: var(--primary-light); color: var(--primary-dark); }
.ef-ocr-status.success { background: #E6FBF3; color: #088F5A; }
.ef-ocr-status.warn { background: #FFFBE6; color: #854F0B; }
.ef-ocr-status.error { background: #FFF0F3; color: #C81E4E; }
.ef-optional-hint { font-size: 11px; color: var(--text-3); }
.ef-submit-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 4px;
}
.ef-submit-actions .btn-primary,
.ef-submit-actions .btn-secondary {
  min-width: 96px;
}

/* 添加题目：标题固定，内容区国风滚动条 */
.modal.entry-modal {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: min(86vh, 820px);
}
.modal.entry-modal .modal-head {
  flex-shrink: 0;
  position: relative;
  top: auto;
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(255, 254, 250, 0.98), rgba(246, 243, 236, 0.94));
}
.modal.entry-modal .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 14px 12px 18px 18px;
  scrollbar-width: thin;
  scrollbar-color: #79B8A0 transparent;
}
.modal.entry-modal .modal-body::-webkit-scrollbar {
  width: 6px;
  height: 0;
}
.modal.entry-modal .modal-body::-webkit-scrollbar:horizontal {
  display: none;
  height: 0;
}
.modal.entry-modal .modal-body::-webkit-scrollbar-track {
  background: transparent;
  margin-block: 10px;
  border-radius: 999px;
}
.modal.entry-modal .modal-body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #BFE0E3 0%, #A9D6B8 45%, #79B8A0 100%);
  border-radius: 999px;
  border: 1px solid transparent;
  background-clip: padding-box;
  min-height: 36px;
}
.modal.entry-modal .modal-body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #93C4D6 0%, #79B8A0 100%);
  background-clip: padding-box;
  border: 1px solid transparent;
}
.modal.entry-modal .modal-body::-webkit-scrollbar-corner {
  background: transparent;
  display: none;
}

/* OCR 三栏内滚动区同步国风滚动条 */
.modal.entry-modal-ocr .ef-ocr-col-form,
.modal.entry-modal-ocr .ocr-results-panel,
.modal.entry-modal-ocr .ef-ocr-col-image > #ocr-upload-step,
.modal.entry-modal-ocr .ef-ocr-col-image > #ocr-canvas-step,
.modal.entry-modal .math-toolbar {
  scrollbar-width: thin;
  scrollbar-color: #79B8A0 transparent;
}
.modal.entry-modal-ocr .ef-ocr-col-form::-webkit-scrollbar,
.modal.entry-modal-ocr .ocr-results-panel::-webkit-scrollbar,
.modal.entry-modal-ocr .ef-ocr-col-image > #ocr-upload-step::-webkit-scrollbar,
.modal.entry-modal-ocr .ef-ocr-col-image > #ocr-canvas-step::-webkit-scrollbar,
.modal.entry-modal .math-toolbar::-webkit-scrollbar {
  width: 6px;
  height: 0;
}
.modal.entry-modal-ocr .ef-ocr-col-form::-webkit-scrollbar:horizontal,
.modal.entry-modal-ocr .ocr-results-panel::-webkit-scrollbar:horizontal,
.modal.entry-modal-ocr .ef-ocr-col-image > #ocr-upload-step::-webkit-scrollbar:horizontal,
.modal.entry-modal-ocr .ef-ocr-col-image > #ocr-canvas-step::-webkit-scrollbar:horizontal,
.modal.entry-modal .math-toolbar::-webkit-scrollbar:horizontal {
  display: none;
  height: 0;
}
.modal.entry-modal-ocr .ef-ocr-col-form::-webkit-scrollbar-track,
.modal.entry-modal-ocr .ocr-results-panel::-webkit-scrollbar-track,
.modal.entry-modal-ocr .ef-ocr-col-image > #ocr-upload-step::-webkit-scrollbar-track,
.modal.entry-modal-ocr .ef-ocr-col-image > #ocr-canvas-step::-webkit-scrollbar-track,
.modal.entry-modal .math-toolbar::-webkit-scrollbar-track {
  background: transparent;
  margin-block: 8px;
  border-radius: 999px;
}
.modal.entry-modal-ocr .ef-ocr-col-form::-webkit-scrollbar-thumb,
.modal.entry-modal-ocr .ocr-results-panel::-webkit-scrollbar-thumb,
.modal.entry-modal-ocr .ef-ocr-col-image > #ocr-upload-step::-webkit-scrollbar-thumb,
.modal.entry-modal-ocr .ef-ocr-col-image > #ocr-canvas-step::-webkit-scrollbar-thumb,
.modal.entry-modal .math-toolbar::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #BFE0E3 0%, #A9D6B8 45%, #79B8A0 100%);
  border-radius: 999px;
  border: 1px solid transparent;
  background-clip: padding-box;
  min-height: 36px;
}
.modal.entry-modal-ocr .ef-ocr-col-form::-webkit-scrollbar-thumb:hover,
.modal.entry-modal-ocr .ocr-results-panel::-webkit-scrollbar-thumb:hover,
.modal.entry-modal-ocr .ef-ocr-col-image > #ocr-upload-step::-webkit-scrollbar-thumb:hover,
.modal.entry-modal-ocr .ef-ocr-col-image > #ocr-canvas-step::-webkit-scrollbar-thumb:hover,
.modal.entry-modal .math-toolbar::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #93C4D6 0%, #79B8A0 100%);
  background-clip: padding-box;
  border: 1px solid transparent;
}
.modal.entry-modal-ocr .ef-ocr-col-form::-webkit-scrollbar-corner,
.modal.entry-modal-ocr .ocr-results-panel::-webkit-scrollbar-corner,
.modal.entry-modal-ocr .ef-ocr-col-image > #ocr-upload-step::-webkit-scrollbar-corner,
.modal.entry-modal-ocr .ef-ocr-col-image > #ocr-canvas-step::-webkit-scrollbar-corner,
.modal.entry-modal .math-toolbar::-webkit-scrollbar-corner {
  background: transparent;
  display: none;
}

/* ===== Quiz Count ===== */
.quiz-count-card {
  padding: 18px 22px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); margin-bottom: 16px; box-shadow: var(--shadow-card);
}
.qcc-label { font-size: 14px; font-weight: 600; display: block; margin-bottom: 10px; }
.qcc-options { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.qcc-opt { display: flex; align-items: center; gap: 4px; font-size: 13px; cursor: pointer; color: var(--text-2); font-weight: 500; }
.qcc-opt input { accent-color: var(--primary); }
#qcc-custom-num {
  padding: 5px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px;
  background: var(--bg-card); color: var(--text-1); font-family: inherit;
}

/* ===== No Answer ===== */
.qcard-tag-noans, .qz-tag-noans { background: #FFFBE6; color: #854F0B; }
.qcard-tag-comment { background: #EEEDFE; color: #3C3489; }
.qz-no-answer {
  padding: 20px; text-align: center; border: 2px dashed var(--border-strong);
  border-radius: var(--radius); background: #FFFBE6;
}
.qz-noans-icon { font-size: 32px; margin-bottom: 8px; }
.qz-noans-text { font-size: 14px; color: #854F0B; margin-bottom: 12px; }
.qz-noans-skip { display: inline-block; margin-left: 12px; font-size: 12px; color: var(--text-3); cursor: pointer; text-decoration: underline; }
.qz-noans-skip:hover { color: var(--primary); }

/* ===== Math Toolbar ===== */
.ef-math-toggle {
  display: inline-block;
  margin-top: 4px;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  font-size: 12px;
  color: var(--text-2);
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  transition: var(--transition);
}
.ef-math-toggle:hover { border-color: var(--primary); background: var(--primary-light); color: var(--primary); }

.math-toolbar {
  margin-top: 6px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  max-height: 180px;
  overflow-y: auto;
}
.mt-group { display: flex; align-items: center; flex-wrap: wrap; gap: 3px; margin-bottom: 4px; }
.mt-group-name { font-size: 11px; color: var(--text-3); width: 60px; flex-shrink: 0; }
.mt-sym {
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  color: var(--text-1);
  min-width: 30px;
  text-align: center;
  transition: var(--transition);
}
.mt-sym:hover { border-color: var(--primary); background: var(--primary-light); color: var(--primary); }

/* ===== OCR Modal / 三栏辅助录入 ===== */
.modal.entry-modal-ocr {
  width: min(1280px, 96vw) !important;
  max-width: 96vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal.entry-modal-ocr .modal-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 12px 14px 16px;
}
.ef-ocr-tri {
  display: grid;
  grid-template-columns: minmax(280px, 1.1fr) minmax(260px, 1fr) minmax(300px, 1.05fr);
  gap: 12px;
  flex: 1;
  min-height: 0;
  height: min(78vh, 720px);
}
.ef-ocr-col {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-soft);
  overflow: hidden;
}
.ef-ocr-col-head {
  flex-shrink: 0;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}
.ef-ocr-col-head .muted { font-weight: 400; font-size: 11px; }
.ef-ocr-col-image > #ocr-upload-step,
.ef-ocr-col-image > #ocr-canvas-step {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 10px;
}
.ef-ocr-col-text { background: var(--bg-card); }
.ef-ocr-col-form {
  background: var(--bg-card);
  overflow: auto;
  padding: 12px;
}
.ef-ocr-col-form .ef-stem-box textarea#ef-stem { min-height: 110px; }
.ocr-text-empty {
  margin: 16px;
  padding: 18px 14px;
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
  background: var(--bg-soft);
}
.ocr-results-panel {
  flex: 1;
  min-height: 0;
  overflow: auto;
  margin: 0;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ocr-result-field-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.ocr-result-field-head label {
  margin: 0;
  margin-right: auto;
}
.ocr-upload-area {
  text-align: center;
  padding: 40px 12px;
  border-radius: var(--radius-sm);
  outline: none;
  transition: box-shadow 0.15s ease, background 0.15s ease;
}
.ocr-upload-area:focus,
.ocr-upload-area:focus-visible {
  background: var(--primary-light, #eef8f4);
  box-shadow: inset 0 0 0 2px rgba(121, 184, 160, 0.55);
}
.ocr-upload-area p { margin-top: 8px; font-size: 12px; color: var(--text-3); line-height: 1.5; }
.ocr-upload-area kbd {
  display: inline-block;
  padding: 0 5px;
  margin: 0 1px;
  font-size: 11px;
  font-family: inherit;
  line-height: 1.5;
  color: var(--text-2);
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #d8e0e4);
  border-radius: 4px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}
.ocr-workspace { display: flex; gap: 12px; align-items: flex-start; }
.ocr-workspace-inline { flex-direction: column; gap: 10px; }
.ocr-canvas-wrap {
  flex: 1;
  min-width: 0;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  padding: 8px;
  max-height: 360px;
}
.ef-ocr-col-image .ocr-canvas-wrap { max-height: 420px; }
.ocr-zoom-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding: 4px 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  position: sticky;
  top: 0;
  z-index: 5;
}
.ocr-zoom-btn {
  height: 26px;
  min-width: 30px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  font-family: inherit;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
.ocr-zoom-btn:hover { border-color: var(--primary); background: var(--primary-light); color: var(--primary); }
.ocr-zoom-label { font-size: 12px; color: var(--text-2); min-width: 40px; text-align: center; font-weight: 500; }
.ocr-engine-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 8px 0 10px;
}
.ocr-engine-row label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-2);
}
.ocr-engine-row select {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  font-size: 12px;
  background: #fff;
}
.ocr-engine-row label.is-disabled {
  opacity: 0.55;
}
.ocr-batch-engine-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ocr-batch-engine-row label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-2);
  font-weight: 500;
}
/* OCR 页下拉：与题库 bank-toolbar / 录入 ef-row 一致 */
.ocr-batch-engine-row select,
.ocr-import-toolbar select,
.ocr-import-card select {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 13px;
  background: var(--bg-card);
  color: var(--text-1);
  font-family: inherit;
  transition: var(--transition);
  cursor: pointer;
  min-height: 36px;
}
.ocr-batch-engine-row select:focus,
.ocr-import-toolbar select:focus,
.ocr-import-card select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 149, 246, 0.1);
}
.ocr-batch-engine-row select:disabled,
.ocr-import-toolbar select:disabled,
.ocr-import-card select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--bg-soft);
}

.ocr-tip { font-size: 11px; color: var(--text-3); padding: 2px 0; }
#ocr-canvas { display: block; cursor: default; border-radius: var(--radius-sm); }

.ocr-panel {
  width: 100%; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.ocr-workspace:not(.ocr-workspace-inline) .ocr-panel { width: 220px; }
.ocr-panel-title { font-size: 14px; font-weight: 600; color: var(--text-1); margin-bottom: 4px; }
.ocr-mode-list { display: flex; flex-direction: column; gap: 6px; }
.ocr-mode-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  font-size: 13px; font-weight: 500;
  cursor: pointer; font-family: inherit; color: var(--text-1);
  text-align: left; transition: var(--transition);
}
.ocr-mode-btn:hover { border-color: var(--primary); background: var(--primary-light); }
.ocr-mode-btn.active {
  border-color: var(--primary);
  background: var(--primary-light);
  font-weight: 600;
  color: var(--primary);
}
.ocr-mode-icon { font-size: 16px; }

.ocr-regions {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  font-size: 12px;
}
.ocr-region-item {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; padding: 2px 0;
}
.ocr-region-item.none .ocr-region-status { color: var(--text-3); }
.ocr-region-item:not(.none) .ocr-region-status { color: #088F5A; font-weight: 600; }
.ocr-region-label { color: var(--text-2); font-weight: 500; }

.ocr-action-btn { width: 100%; }
.ocr-progress {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  text-align: center;
  font-weight: 500;
}
.ocr-progress.loading { background: var(--primary-light); color: var(--primary-dark); }
.ocr-progress.success { background: #E6FBF3; color: #088F5A; }
.ocr-progress.error { background: #FFF0F3; color: #C81E4E; }

.ocr-results { display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px; }
.ocr-result-field label {
  display: block; font-size: 13px; font-weight: 600; color: var(--text-1); margin-bottom: 4px;
}
.ocr-result-field textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 13px; line-height: 1.6; background: var(--bg-soft); color: var(--text-1); font-family: inherit; resize: vertical;
  box-sizing: border-box; transition: var(--transition);
}
.ocr-result-field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,149,246,0.1); background: var(--bg-card); }
.ocr-result-actions { display: flex; gap: 10px; justify-content: flex-start; margin-top: auto; }

/* ===== KaTeX ===== */
.qv-stem .katex, .qz-stem .katex { font-size: 1.05em; }
.qv-answer .katex, .qv-explanation .katex, .qz-ref-text .katex, .qz-explanation .katex { font-size: 1em; }
.qv-opts .katex, .qz-options .katex { font-size: 0.95em; }

/* ===== Platform Jump ===== */
.platform-jump {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.pj-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-1);
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  transition: var(--transition);
  box-shadow: var(--shadow-card);
}
.pj-btn:hover {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}
.pj-btn:active { transform: scale(0.96); }
.pj-icon { font-size: 18px; }

/* ===== 表单布局（运动等模块复用） ===== */
.cm-form { display: flex; flex-direction: column; gap: 12px; }
.cm-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .sidebar { width: 180px; }
  .content { padding: 20px 22px; }
  .ef-ocr-tri {
    grid-template-columns: 1fr;
    height: auto;
    max-height: none;
    overflow: auto;
  }
  .ef-ocr-col-image,
  .ef-ocr-col-text { max-height: 420px; }
}

@media (max-width: 768px) {
  .sidebar { display: none; }
  .mobile-nav { display: block; }
  .content {
    padding: 16px 14px 90px;
  }
  .page-head h1 { font-size: 19px; }
  .modal { width: 95vw; max-height: 88vh; }
  .modal.entry-modal-ocr { max-height: 92vh; }
  .ocr-workspace { flex-direction: column; }
  .ocr-panel { width: 100%; flex-direction: row; flex-wrap: wrap; }
  .ocr-mode-list { flex-direction: row; }
  .ocr-mode-btn { flex: 1; min-width: 120px; }
  .quiz-stats-bar { gap: 16px; padding: 14px 16px; }
  .qs-num { font-size: 18px; }
  .qz-question-card { padding: 18px; }
  .qz-stem { font-size: 14px; }
  /* 日历：列宽可收缩，避免右侧被裁切 */
  .cal-card {
    padding: 14px 10px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .cal-dow,
  .cal-grid { gap: 3px; }
  .cal-cell {
    min-height: 52px;
    padding: 3px 2px;
  }
  .dow { font-size: 11px; padding: 2px 0; }
  .chip {
    font-size: 9px;
    padding: 1px 4px;
    gap: 3px;
  }
  .cal-lunar { font-size: 9px; }
  .diet-cal-kcal { font-size: 9px; }
  .bank-stats { gap: 12px; }
  .bs-item b { font-size: 16px; }
  .qs-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .qs-stat { padding: 14px 10px; }
  .qs-stat-num { font-size: 22px; }

  /* 待办：手机端布局 */
  .home-todo-board { grid-template-columns: 1fr; }
  .todo-archive-tabs {
    width: 100%;
    box-sizing: border-box;
  }
  .todo-archive-tab {
    flex: 1;
    justify-content: center;
    min-height: 40px;
    padding: 8px 10px;
  }
  .todo-completed-search {
    max-width: none;
    font-size: 16px; /* 避免 iOS 聚焦放大 */
    min-height: 44px;
    padding: 10px 12px;
  }
  .todo-card {
    flex-direction: column;
    align-items: stretch;
    padding: 12px 14px;
  }
  .todo-card-main { min-width: 0; }
  .todo-card-acts {
    width: 100%;
    justify-content: stretch;
  }
  .todo-card-acts .btn-sm {
    flex: 1;
    min-height: 40px;
  }
  .todo-hint { font-size: 12px; line-height: 1.5; }
  .todo-weekday-picks { gap: 6px; }
  .todo-wd {
    min-height: 36px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--yuebai) 70%, #fff);
  }
  .todo-wd input { width: 16px; height: 16px; }

  /* 待办表单：横排字段改为纵向，便于点选 */
  #todo-form-modal .modal {
    width: min(520px, 96vw);
    max-height: min(90vh, 100dvh);
    display: flex;
    flex-direction: column;
  }
  #todo-form-modal .modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  #todo-form-modal .ef-row:not(.ef-col) {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  #todo-form-modal .ef-row:not(.ef-col) label { width: auto; }
  #todo-form-modal .ef-row input[type="number"],
  #todo-form-modal .ef-row input[type="text"],
  #todo-form-modal .ef-row textarea {
    font-size: 16px;
  }
  #todo-form-modal .modal-foot {
    flex-shrink: 0;
    gap: 10px;
  }
  #todo-form-modal .modal-foot .btn-secondary,
  #todo-form-modal .modal-foot .btn-primary {
    flex: 1;
    min-height: 44px;
  }
}

@media (max-width: 480px) {
  .content { padding: 12px 8px 80px; }
  .cal-card {
    padding: 12px 6px;
    border-radius: var(--radius);
  }
  .cal-card-biweek { padding-bottom: 32px; }
  .cal-dow,
  .cal-grid { gap: 2px; }
  .cal-cell {
    min-height: 46px;
    padding: 2px 1px;
    border-radius: 8px;
    gap: 2px;
  }
  .cal-cell.today { border-width: 1.5px; }
  .cal-date { font-size: 12px; }
  .cal-date-wrap {
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
  }
  .cal-lunar { font-size: 8px; max-width: 100%; }
  .cal-month-tag { font-size: 8px; }
  .cal-cell-top { gap: 2px; min-height: 14px; }
  .chip {
    font-size: 8px;
    padding: 0 3px;
    gap: 2px;
    border-radius: 999px;
  }
  .dow { font-size: 10px; }
  .diet-cal-kcal { font-size: 8px; }
  .diet-cal-kcal-unit { font-size: 7px; }
  .fit-album-mark { font-size: 10px; }
  .fit-cal-toolbar {
    flex-wrap: wrap;
    gap: 8px;
  }
  .fit-cal-toolbar .fit-cal-nav {
    width: 100%;
    justify-content: center;
  }
  .cal-title { font-size: 15px; }
  .page-head h1 { font-size: 17px; }
  .modal-body { padding: 14px 16px 18px; }
  .qcard { padding: 12px; }
  .qcard-stem { font-size: 12px; }
  .quiz-mode-card { padding: 16px; }
  .mode-opt { padding: 12px; }
  .exam-tab { padding: 8px 14px; font-size: 13px; }
  .bank-toolbar { gap: 8px; }
  .bank-toolbar input { min-width: 120px; }
  .pj-btn { padding: 8px 14px; font-size: 12px; }
  .mn-item { min-width: 46px; padding: 5px 8px; }
  .mn-dot { width: 22px; height: 22px; font-size: 12px; }
}

/* ===== 运动 / 饮食 模块 ===== */
.sub-tabs {
  display: flex;
  gap: 8px;
  margin: 14px 0 16px;
}
.sub-tab {
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s;
}
.sub-tab.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,149,246,0.25);
}

.fit-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.fit-cal-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}
.fit-cal-title {
  font-size: 14px;
  font-weight: 600;
  min-width: 96px;
  text-align: center;
}
.fit-cal-nav .cal-nav {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-2);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: var(--shadow-soft);
}
.fit-cal-nav .cal-nav:hover {
  background: var(--primary-light);
  color: var(--primary);
  border-color: var(--primary);
  box-shadow: var(--shadow-hover);
}

/* 紧凑月历 */
.mini-cal {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.mc-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 8px;
}
.mc-dow > div {
  text-align: center;
  font-size: 12px;
  color: var(--text-2);
  font-weight: 500;
}
.mc-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.mc-cell {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}
.mc-cell.empty { cursor: default; }
.mc-cell:not(.empty):hover { background: var(--primary-light); }
.mc-cell.has {
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 600;
}
.mc-cell.has::after {
  content: '';
  position: absolute;
  bottom: 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary);
}
.mc-cell.selected {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 3px 10px rgba(0,149,246,0.3);
}
.mc-cell.selected::after { background: #fff; }

/* 训练记录卡片 */
.fit-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.fit-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.fit-card-date {
  font-size: 13px;
  color: var(--text-2);
  font-weight: 500;
}
.fit-card-actions { display: flex; gap: 6px; }
.fit-card-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}
.fit-dur {
  font-size: 12px;
  font-weight: 500;
  color: #059669;
  background: #D1FAE5;
  padding: 1px 8px;
  border-radius: 999px;
  margin-left: 6px;
}
.fit-steps {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fit-steps.collapsed { display: none; }
.fit-step {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 4px 0;
  border-bottom: 1px dashed var(--border);
}
.fit-step-name { font-weight: 500; }
.fit-step-meta { color: var(--text-2); }
.fit-step-meta a { color: var(--primary); text-decoration: none; }
.fit-notes {
  font-size: 13px;
  color: var(--text-2);
  background: var(--bg-soft);
  border-radius: 10px;
  padding: 8px 10px;
}

/* 训练日历工具栏（左上角添加按钮 + 月份导航） */
.fit-cal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.fit-cal-toolbar .fit-cal-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}
.fit-cal-title { font-size: 15px; font-weight: 600; min-width: 120px; text-align: center; }

/* 当日明细（训练项目 + 体重 + 相册） */
.day-sec { margin-bottom: 18px; }
.day-sec-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 8px;
}
.fit-weight-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.fit-weight-input {
  width: 120px;
  max-width: 40vw;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 15px;
  background: var(--bg);
  color: var(--text);
}
.fit-weight-unit {
  font-size: 14px;
  color: var(--text-2);
}

/* 训练项目目录 */
.proj-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-bottom: 8px;
  align-items: stretch;
}
.proj-actions {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 14px;
}
.proj-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  background: var(--bg-card);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.proj-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  min-width: 0;
}
.proj-name {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.proj-card-head .fit-card-actions {
  flex-shrink: 0;
  flex-wrap: nowrap;
  padding-top: 1px;
}
.proj-card-head .fit-card-actions .btn-sm {
  white-space: nowrap;
}
.proj-link {
  display: inline-block;
  font-size: 13px;
  color: var(--primary);
  text-decoration: none;
  margin-bottom: 6px;
}
/* 共xx在上、展开按钮在下；整块贴卡片底部，保证各卡片按钮底对齐 */
.proj-steps-bar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: auto;
  margin-bottom: 0;
  padding-top: 10px;
}
.proj-meta {
  font-size: 12px;
  color: var(--text-2);
  margin: 0;
  line-height: 1.4;
}
.proj-steps-toggle {
  flex-shrink: 0;
  white-space: nowrap;
}
.proj-card .fit-steps {
  margin-top: 8px;
}

.proj-form-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  background: var(--bg-card);
  box-shadow: var(--shadow-soft);
  max-width: 560px;
}
.proj-form-title { font-size: 15px; font-weight: 600; margin-bottom: 14px; }

/* 训练步骤编辑行 */
.fit-step-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}
.fit-step-row input {
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
}
.fit-step-row .fs-name { flex: 2; min-width: 0; }
.fit-step-row .fs-sec { flex: 1; min-width: 0; }
.fit-step-row .fs-video { flex: 3; min-width: 0; }
.fs-del {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #fff;
  color: #C81E4E;
  cursor: pointer;
  flex-shrink: 0;
}

/* 相册 */
.al-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 500;
}
.al-upload {
  position: relative;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.al-upload input { cursor: pointer; }
.al-date-pick {
  font-size: 13px;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 6px;
}
.al-date-pick input {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
}
.al-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}
.al-item {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-soft);
}
.al-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.al-del {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.5);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.al-del:hover { background: #C81E4E; }
.al-img { cursor: zoom-in; }
.al-img:hover { filter: brightness(0.92); }

/* 相册大图查看 lightbox */
.img-lightbox {
  background: rgba(0,0,0,0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.lb-img {
  max-width: 92vw;
  max-height: 88vh;
  border-radius: 14px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.55);
  cursor: zoom-out;
  object-fit: contain;
}

/* 饮食备注 */
.dt-note {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.dt-note textarea, .cm-form textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
}

/* 饮食四餐编辑卡片 */
.diet-meal-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 12px;
  background: var(--bg-card);
}
.diet-meal-card:last-child { margin-bottom: 0; }
.diet-meal-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-pill);
  padding: 2px 10px;
}
.diet-meal-body {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  align-items: start;
}
.diet-meal-media {
  width: 120px;
  height: 120px;
}
.diet-meal-photo {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
}
.diet-meal-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
  display: block;
}
.diet-meal-photo .al-del {
  position: absolute;
  top: 4px;
  right: 4px;
}
.diet-meal-upload {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  color: var(--text-2);
  font-size: 12px;
  cursor: pointer;
  transition: var(--transition);
}
.diet-meal-upload:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}
.diet-meal-note {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.diet-meal-note textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
  min-height: 72px;
}
.diet-meal-note .btn-secondary {
  align-self: flex-start;
}
.diet-day-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.diet-day-kcal {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.3px;
}
.diet-meal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.diet-meal-kcal {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
}
.diet-kcal-block {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.diet-kcal-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 8px;
}
.diet-kcal-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.diet-kcal-empty {
  font-size: 12px;
  padding: 4px 0;
  margin: 0;
}
.diet-kcal-empty.gf-empty {
  padding: 6px 0 2px;
}
.diet-kcal-empty .gf-empty-ill {
  width: 56px;
  height: 56px;
  margin-bottom: 2px;
}
.diet-kcal-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 6px 8px;
  background: var(--bg-soft);
  border-radius: 10px;
}
.diet-kcal-name {
  font-weight: 500;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diet-kcal-meta {
  color: var(--text-2);
  flex-shrink: 0;
  font-size: 12px;
}
.diet-kcal-del {
  border: none;
  background: transparent;
  color: var(--text-3);
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
  padding: 0 2px;
}
.diet-kcal-del:hover { color: #C81E4E; }
.diet-kcal-add {
  display: grid;
  grid-template-columns: 1.4fr 0.7fr 0.9fr auto;
  gap: 6px;
  align-items: center;
}
.diet-kcal-add input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  font-family: inherit;
  box-sizing: border-box;
}

/* ===== 思维导图 ===== */
.mm-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
  align-items: start;
  min-height: 420px;
}
.mm-sidebar {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  padding: 12px;
  box-shadow: var(--shadow-soft);
}
.mm-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}
.mm-subject-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 52vh;
  overflow: auto;
}
.mm-subject {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
}
.mm-subject:hover { background: var(--primary-light); }
.mm-subject.active {
  background: var(--primary-light);
  border-color: color-mix(in srgb, var(--primary) 35%, transparent);
  color: var(--primary);
  font-weight: 600;
}
.mm-subject-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mm-subject-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.mm-subject.active .mm-subject-icon svg [stroke="#3F5C6E"] { stroke: var(--primary-dark, #5FA98C); }
.mm-subject.active .mm-subject-icon svg [stroke="#79B8A0"] { stroke: var(--primary-dark, #5FA98C); }
.mm-subject.active .mm-subject-icon svg [stroke="#93C4D6"] { stroke: var(--primary, #79B8A0); }
.mm-subject.active .mm-subject-icon svg [fill="#93C4D6"] { fill: var(--primary, #79B8A0); }
.mm-subject-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mm-subject-count {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--text-3);
  background: var(--bg);
  border-radius: 999px;
  padding: 1px 7px;
}
.mm-side-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.mm-main {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  padding: 14px;
  box-shadow: var(--shadow-soft);
  min-height: 420px;
}
.mm-main-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.mm-main-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  word-break: break-word;
}
.mm-upload { cursor: pointer; }
.mm-empty-hint {
  padding: 28px 12px;
  text-align: center;
  line-height: 1.7;
}
.mm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.mm-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.mm-card:hover {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  box-shadow: var(--shadow-soft);
}
.mm-thumb-wrap {
  aspect-ratio: 4 / 3;
  background: #f3f4f6;
  overflow: hidden;
  position: relative;
}
.mm-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mm-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #EEF6FF, #E8F3FB);
  color: #4A8FBF;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.04em;
}
.mm-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: rgba(42, 98, 160, 0.88);
  padding: 2px 8px;
  border-radius: 999px;
}
.mm-card-foot { padding: 8px 10px 10px; }
.mm-card-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  line-height: 1.35;
  word-break: break-word;
}
.mm-card-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.mm-viewer {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: rgba(10, 12, 16, 0.88);
}
.mm-viewer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  color: #fff;
  flex-shrink: 0;
}
.mm-viewer-title {
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mm-viewer-close {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
}
.mm-viewer-body {
  flex: 1;
  overflow: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8px 16px 24px;
  -webkit-overflow-scrolling: touch;
}
.mm-viewer-body-xmind {
  flex-direction: column;
  align-items: stretch;
  background: #fafbfc;
  margin: 0 12px 16px;
  border-radius: 14px;
  padding: 10px 12px 16px;
  max-height: calc(100vh - 88px);
  overflow: hidden;
}
.mm-viewer-img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
}
.mm-sheet-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mm-sheet-tab {
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-2);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}
.mm-sheet-tab.active {
  background: var(--primary-light);
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  color: var(--primary);
  font-weight: 600;
}

/* ===== XMind 横向思维导图 ===== */
.xmm-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  flex-shrink: 0;
}
.xmm-toolbar-acts {
  display: flex;
  gap: 6px;
  margin-left: auto;
}
.xmm-tool-btn {
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-2);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: var(--transition);
}
.xmm-tool-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}
.xmm-canvas {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 20px 24px 28px;
  background:
    radial-gradient(circle at 1px 1px, rgba(0,0,0,0.04) 1px, transparent 0) 0 0 / 18px 18px;
  border: 1px solid #e8edf3;
  border-radius: 12px;
  -webkit-overflow-scrolling: touch;
}
.xmm-map {
  display: inline-block;
  min-width: 100%;
}
.xmm-topic {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
}
.xmm-topic + .xmm-topic {
  margin-top: 0;
}
.xmm-node-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.xmm-node {
  max-width: 280px;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid #cfd8e3;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: #1f2937;
  word-break: break-word;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.xmm-root > .xmm-node-wrap > .xmm-node {
  background: #111827;
  border-color: #111827;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  border-radius: 10px;
  padding: 10px 16px;
  box-shadow: 0 4px 14px rgba(17, 24, 39, 0.22);
}
.xmm-toggle {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border: 1px solid #b6c4d4;
  border-radius: 50%;
  background: #fff;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: var(--transition);
}
.xmm-toggle:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}
.xmm-kids {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  padding-left: 28px;
  margin-left: 4px;
}
/* 垂直主干 */
.xmm-kids::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 14px;
  height: 2px;
  background: #334155;
  transform: translateY(-50%);
}
.xmm-kids > .xmm-topic {
  position: relative;
  padding: 6px 0;
}
/* 水平连接线到子节点 */
.xmm-kids > .xmm-topic::before {
  content: '';
  position: absolute;
  left: -28px;
  top: 50%;
  width: 28px;
  height: 2px;
  background: #334155;
  transform: translateY(-50%);
}
/* 垂直连线（首末裁切成分支效果） */
.xmm-kids > .xmm-topic::after {
  content: '';
  position: absolute;
  left: -28px;
  width: 2px;
  background: #334155;
}
.xmm-kids > .xmm-topic:not(:only-child)::after {
  top: 0;
  bottom: 0;
}
.xmm-kids > .xmm-topic:first-child:not(:only-child)::after {
  top: 50%;
  bottom: 0;
}
.xmm-kids > .xmm-topic:last-child:not(:only-child)::after {
  top: 0;
  bottom: 50%;
}
.xmm-kids > .xmm-topic:only-child::after {
  display: none;
}
.xmm-topic.collapsed > .xmm-kids {
  display: none;
}
.xmm-topic.collapsed > .xmm-node-wrap > .xmm-toggle {
  background: #111827;
  border-color: #111827;
  color: #fff;
  min-width: 22px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 11px;
}

/* 兼容旧类名（若有残留） */
.mm-tree-wrap { overflow: auto; padding: 4px 2px 8px; }

/* ===== 背诵卡片 ===== */
.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.rc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.rc-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}
.rc-select,
.rc-search {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  padding: 8px 12px;
  outline: none;
  transition: var(--transition);
}
.rc-select:focus,
.rc-search:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.rc-select { min-width: 220px; }
.rc-search { flex: 1; min-width: 160px; max-width: 320px; }
.rc-filters #rc-draw,
.rc-draw-btn {
  flex-shrink: 0;
}
/* 抽背：青碧浅底强调，与「添加」主按钮区分又更醒目 */
.rc-draw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 38px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--qingbi) 40%, var(--border));
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--qingbi) 18%, #FFFEFA) 0%, color-mix(in srgb, var(--zhuyin) 22%, #FFFEFA) 100%);
  color: var(--dailan);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 1px 4px rgba(63, 92, 110, 0.06);
  white-space: nowrap;
}
.rc-draw-btn:hover:not(:disabled) {
  border-color: var(--qingbi);
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--qingbi) 28%, #FFFEFA) 0%, color-mix(in srgb, var(--tianqing) 18%, #FFFEFA) 100%);
  color: var(--primary-dark);
  box-shadow: 0 3px 10px rgba(121, 184, 160, 0.22);
  transform: translateY(-1px);
}
.rc-draw-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: none;
}
.rc-draw-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}
.rc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.rc-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 14px 16px 12px;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 160px;
  outline: none;
}
.rc-card:hover,
.rc-card:focus-visible {
  border-color: var(--primary);
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
}
.rc-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.rc-card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
  word-break: break-word;
  flex: 1;
  min-width: 0;
}
.rc-card-acts {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}
.rc-act {
  border: none;
  background: none;
  color: var(--text-3);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  transition: var(--transition);
}
.rc-act:hover { color: var(--primary); background: var(--primary-light); }
.rc-act.rc-del:hover { color: #E53E3E; background: #FFF0F3; }
.rc-card-mnemonic {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-3);
  word-break: break-word;
  white-space: pre-wrap;
}
.rc-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 8px;
}
.rc-card-count {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: #7A5A2E;
  background: color-mix(in srgb, #F3D79E 45%, #FFFEFA);
  padding: 2px 8px;
  border-radius: 999px;
}
.rc-detail-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}
.rc-detail-count {
  font-size: 12px;
  font-weight: 600;
  color: #7A5A2E;
  background: color-mix(in srgb, #F3D79E 45%, #FFFEFA);
  padding: 3px 10px;
  border-radius: 999px;
}
.rc-card-subject {
  align-self: flex-start;
  font-size: 11px;
  color: var(--primary);
  background: var(--primary-light);
  border-radius: 999px;
  padding: 2px 8px;
  font-weight: 500;
}
.rc-card-content {
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-1);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: calc(1.55em * 5);
  overflow: hidden;
  flex: 1;
}
.rc-card-more {
  margin-top: auto;
  padding-top: 6px;
  font-size: 12px;
  color: var(--text-3);
}
.rc-card:hover .rc-card-more { color: var(--primary); }
.modal.rc-detail-modal {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: min(86vh, 720px);
  width: 640px;
  max-width: 94vw;
}
.modal.rc-detail-modal .modal-head,
.modal.rc-detail-modal .modal-foot {
  flex-shrink: 0;
}
.rc-detail-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.rc-detail-subject {
  display: inline-block;
  font-size: 12px;
  color: var(--primary);
  background: var(--primary-light);
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 0;
  font-weight: 500;
}
.rc-detail-sec { margin-bottom: 16px; }
.rc-detail-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 6px;
}
.rc-detail-mnemonic {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-3);
  white-space: pre-wrap;
  word-break: break-word;
  background: #f5f7fa;
  border-radius: var(--radius);
  padding: 10px 12px;
}
.rc-detail-text,
.rc-detail-content {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ===== 国风日期选择器 ===== */
.todo-date-mount,
.gf-date-mount {
  flex: 1;
  min-width: 0;
}
.gf-date {
  position: relative;
  width: 100%;
}
.gf-date-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(180deg, rgba(255, 254, 250, 0.98) 0%, rgba(246, 243, 236, 0.9) 100%);
  color: var(--text-1);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--shadow-soft);
}
.gf-date-trigger:hover {
  border-color: color-mix(in srgb, var(--qingbi) 45%, var(--border));
  box-shadow: var(--shadow-hover);
}
.gf-date-trigger[aria-expanded="true"] {
  border-color: var(--qingbi);
  box-shadow: 0 0 0 3px rgba(121, 184, 160, 0.16);
}
.gf-date-trigger.is-empty .gf-date-text {
  color: var(--text-3);
}
.gf-date-ico {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--primary-light);
  color: var(--qingbi);
  font-size: 11px;
  line-height: 1;
}
.gf-date-text {
  flex: 1;
  min-width: 0;
  letter-spacing: 0.3px;
}
.gf-date-caret {
  flex-shrink: 0;
  color: var(--text-3);
  font-size: 12px;
  transform: rotate(180deg);
  opacity: 0.75;
}
.gf-date-clear {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--text-3);
  font-size: 14px;
  line-height: 1;
}
.gf-date-clear:hover {
  background: rgba(200, 30, 78, 0.08);
  color: #C81E4E;
}

.gf-dp-panel {
  position: fixed;
  z-index: 12000;
  padding: 14px 14px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(165deg, rgba(255, 254, 250, 0.98) 0%, rgba(232, 242, 238, 0.92) 100%);
  box-shadow: 0 14px 40px rgba(63, 92, 110, 0.16);
  overflow: hidden;
}
.gf-dp-panel::before {
  content: '';
  position: absolute;
  right: -18px;
  bottom: -22px;
  width: 140px;
  height: 110px;
  background: var(--ill-cloud) no-repeat right bottom / contain;
  opacity: 0.16;
  pointer-events: none;
}
.gf-dp-panel > * { position: relative; z-index: 1; }
.gf-dp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.gf-dp-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.6px;
}
.gf-dp-nav {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: 50%;
  cursor: pointer;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: var(--shadow-soft);
  transition: var(--transition);
}
.gf-dp-nav:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}
.gf-dp-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 6px;
}
.gf-dp-dow span {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  padding: 2px 0;
}
.gf-dp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.gf-dp-cell {
  aspect-ratio: 1;
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: rgba(255, 254, 250, 0.55);
  color: var(--text-1);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.gf-dp-cell.is-empty {
  background: transparent;
  cursor: default;
  pointer-events: none;
}
.gf-dp-cell:not(.is-empty):hover {
  border-color: var(--yunshui);
  background: var(--lake-light);
  color: var(--ink);
}
.gf-dp-cell.is-today {
  border-color: var(--tianqing);
  color: var(--ink);
}
.gf-dp-cell.is-selected {
  background: linear-gradient(145deg, var(--qingbi) 0%, #6AAD95 100%);
  border-color: transparent;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(121, 184, 160, 0.35);
}
.gf-dp-cell.is-selected.is-today {
  box-shadow: 0 0 0 2px rgba(147, 196, 214, 0.55), 0 4px 12px rgba(121, 184, 160, 0.35);
}
.gf-dp-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.gf-dp-today,
.gf-dp-clear-btn {
  border: none;
  background: transparent;
  color: var(--qingbi);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 8px;
  transition: var(--transition);
}
.gf-dp-today:hover,
.gf-dp-clear-btn:hover {
  background: var(--primary-light);
}
.gf-dp-clear-btn {
  color: var(--text-3);
  margin-left: auto;
}
.gf-dp-clear-btn:hover {
  color: #C81E4E;
  background: rgba(200, 30, 78, 0.08);
}

/* ===== 待办模块 / 首页今日待办 ===== */

.todo-section { margin: 0 0 28px; }

.todo-archive-tabs {
  display: flex;
  gap: 6px;
  margin: 0 0 14px;
  padding: 3px;
  background: color-mix(in srgb, var(--yuebai) 80%, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  width: fit-content;
  max-width: 100%;
}
.todo-archive-tab {
  border: none;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.todo-archive-tab:hover { color: var(--dailan); }
.todo-archive-tab.active {
  background: color-mix(in srgb, var(--qingbi) 18%, #FFFEFA);
  color: var(--dailan);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(63, 92, 110, 0.08);
}
.todo-archive-tab-count {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
  min-width: 1.2em;
  text-align: center;
}
.todo-archive-tab[data-tab="expired"].active .todo-archive-tab-count {
  color: #9a3b2f;
}
.todo-archive-tab[data-tab="completed"].active .todo-archive-tab-count {
  color: #2d6a4f;
}
.todo-archive-panel { min-height: 40px; }

.todo-completed-toolbar {
  margin: 0 0 12px;
}
.todo-completed-search {
  width: 100%;
  max-width: 360px;
  box-sizing: border-box;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--yuebai) 70%, #fff);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  outline: none;
  transition: var(--transition);
}
.todo-completed-search:focus {
  border-color: color-mix(in srgb, var(--dailan) 45%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--qingbi) 22%, transparent);
}
.todo-completed-search::placeholder {
  color: var(--muted);
}

.todo-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(45, 74, 62, 0.12);
}
.todo-section-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.02em;
}
.todo-section-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  background: rgba(45, 74, 62, 0.06);
  padding: 2px 8px;
  border-radius: 999px;
}
.todo-section-add {
  flex-shrink: 0;
}
.todo-section-expired .todo-section-count {
  color: #9a3b2f;
  background: rgba(200, 30, 78, 0.08);
}
.todo-section-completed .todo-section-count {
  color: #2d6a4f;
  background: rgba(45, 106, 79, 0.1);
}
.todo-archive-empty {
  margin: 0;
  padding: 12px 4px;
  font-size: 13px;
}
.todo-card-expired {
  border-color: rgba(200, 30, 78, 0.18);
}
.todo-card-completed {
  opacity: 0.92;
}
.todo-meta-due { color: #9a3b2f; font-size: 13px; }
.todo-meta-done { color: #2d6a4f; font-size: 13px; }
.todo-meta-next {
  color: var(--dailan, #3F5C6E);
  font-size: 13px;
  font-weight: 500;
}
.todo-meta-next.is-ended {
  color: var(--muted);
  font-weight: 400;
}
.todo-archive-list .todo-card-acts {
  flex-wrap: wrap;
  justify-content: flex-end;
}


.todo-hint { margin: -4px 0 14px; font-size: 13px; }
.todo-list { display: flex; flex-direction: column; gap: 10px; }
.todo-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(135deg, rgba(255, 254, 250, 0.95) 0%, rgba(238, 242, 245, 0.88) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
}
.todo-card::before {
  content: '';
  position: absolute;
  right: -10px;
  bottom: -16px;
  width: 100px;
  height: 100px;
  background: var(--ill-lantern) no-repeat right bottom / contain;
  opacity: 0.12;
  pointer-events: none;
}
.todo-card > * { position: relative; z-index: 1; }
.todo-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
}
.todo-card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
}
.todo-card-head .todo-tag {
  flex-shrink: 0;
  transform: translateY(0.5px);
}
.todo-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.todo-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
  color: var(--dailan, #3F5C6E);
  border-radius: 999px;
  padding: 3px 12px;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.5px;
  border: 1px solid rgba(147, 196, 214, 0.55);
  /* 空白处由水色→月白自然过渡 */
  background:
    linear-gradient(115deg, #F6F3EC 0%, #F0F7F6 42%, #E4F2F5 100%);
  min-height: 22px;
}
/* 荷塘插画：不拉伸，落在右下角 */
.todo-tag-bg {
  position: absolute;
  right: -2px;
  bottom: -4px;
  width: 34px;
  height: 34px;
  z-index: 0;
  pointer-events: none;
  display: block;
  object-fit: contain;
  object-position: right bottom;
  opacity: 0.92;
}
/* 轻蒙版：左侧偏实、右侧略透，让荷塘透出且文字清晰 */
.todo-tag::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: linear-gradient(
    100deg,
    rgba(255, 254, 250, 0.55) 0%,
    rgba(255, 254, 250, 0.35) 55%,
    rgba(255, 254, 250, 0.12) 100%
  );
  pointer-events: none;
}
.todo-tag-text {
  position: relative;
  z-index: 2;
}
.todo-card-note {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--text-2);
  white-space: pre-wrap;
  word-break: break-word;
}
.todo-card-acts {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.todo-weekday-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.todo-wd {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
}

.home-todo-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}
.home-todo-col {
  background: linear-gradient(180deg, rgba(255, 254, 250, 0.95) 0%, rgba(246, 243, 236, 0.9) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 14px 16px 12px;
  min-height: 120px;
  position: relative;
  overflow: hidden;
}
.home-todo-today::before,
.home-todo-tomorrow::before {
  content: '';
  position: absolute;
  right: -8px;
  bottom: -12px;
  width: 110px;
  height: 110px;
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: contain;
  opacity: 0.14;
  pointer-events: none;
}
.home-todo-today::before { background-image: var(--ill-tea); }
.home-todo-tomorrow::before { background-image: var(--ill-kite); }
.home-todo-col > * { position: relative; z-index: 1; }
.home-todo-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.home-todo-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.5px;
  font-family: "Songti SC", "STSong", "Noto Serif SC", "PingFang SC", serif;
}
.home-todo-count {
  font-size: 12px;
  color: var(--text-3);
  font-weight: 600;
}
.home-todo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.home-todo-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.home-todo-item .home-todo-check {
  flex: 1;
  min-width: 0;
}
.home-todo-postpone {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.65;
  transition: var(--transition);
}
.home-todo-postpone:hover {
  opacity: 1;
  color: var(--accent, #2a6f7a);
  background: rgba(42, 111, 122, 0.08);
}
.home-todo-postpone:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.home-todo-check {
  display: inline-flex;
  align-items: flex-start;
  gap: 9px;
  max-width: 100%;
  width: max-content;
  cursor: pointer;
  user-select: none;
  position: relative;
  padding: 2px 0;
}
.home-todo-check input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.home-todo-box {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border: 1.5px solid color-mix(in srgb, var(--qingbi) 35%, var(--border-strong));
  border-radius: 6px;
  background:
    linear-gradient(160deg, rgba(255, 254, 250, 0.98) 0%, rgba(232, 242, 238, 0.7) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: var(--transition);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.home-todo-box::after {
  content: '';
  width: 5px;
  height: 9px;
  margin-top: -1px; /* 光学微调，勾形视觉居中 */
  border: solid #fff;
  border-width: 0 2px 2px 0;
  box-sizing: border-box;
  transform: rotate(45deg) scale(0.55);
  opacity: 0;
  transition: var(--transition);
  flex-shrink: 0;
}
.home-todo-check:hover .home-todo-box {
  border-color: var(--qingbi);
  background: var(--primary-light);
}
.home-todo-check input:focus-visible + .home-todo-box {
  outline: none;
  box-shadow: 0 0 0 3px rgba(121, 184, 160, 0.28);
  border-color: var(--qingbi);
}
.home-todo-check input:checked + .home-todo-box {
  background: linear-gradient(145deg, var(--qingbi) 0%, #6AAD95 100%);
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(121, 184, 160, 0.3);
}
.home-todo-check input:checked + .home-todo-box::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}
.home-todo-text {
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-1);
  letter-spacing: 0.02em;
  word-break: break-word;
  transition: color var(--transition);
}
.home-todo-check:hover .home-todo-text {
  color: var(--ink);
}
.home-todo-item.is-done .home-todo-text {
  color: var(--text-3);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--qingbi) 45%, var(--text-3));
}
.home-todo-item.is-done .home-todo-check:hover .home-todo-text {
  color: var(--text-3);
}

.home-todo-preview {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.home-todo-preview .home-todo-text {
  flex: 1;
  min-width: 0;
}
.home-todo-del {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.65;
  transition: var(--transition);
}
.home-todo-del:hover {
  opacity: 1;
  color: #9a3b2f;
  background: rgba(200, 30, 78, 0.08);
}
.home-todo-del:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.home-todo-preview .home-todo-text {
  color: var(--text-2);
  padding-left: 2px;
}
.home-todo-empty {
  margin: 0;
  font-size: 13px;
  padding: 4px 0 0;
}
.home-todo-empty.gf-empty {
  padding: 8px 4px 4px;
}
.home-todo-empty .gf-empty-ill {
  width: 64px;
  height: 64px;
}
.home-todo-empty .gf-empty-desc {
  margin-top: 2px;
}

/* ===== 工作台加载态 · 空白页 + 转动风车 ===== */
.wb-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 200px;
  padding: 40px 16px;
  box-sizing: border-box;
  background: transparent;
}
.wb-loading--page {
  min-height: 100vh;
  height: 100vh;
  padding: 0;
}
.wb-loading--inline {
  min-height: 56px;
  padding: 10px;
  gap: 8px;
}
.wb-loading-windmill {
  width: 48px;
  height: 48px;
  display: block;
  transform-origin: 50% 50%;
  animation: wb-spin 1.6s linear infinite;
}
.wb-loading--inline .wb-loading-windmill {
  width: 28px;
  height: 28px;
}
.wb-loading-text {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--text-3);
  line-height: 1.4;
}
.wb-loading--inline .wb-loading-text {
  font-size: 12px;
  letter-spacing: 0.06em;
}
@keyframes wb-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .wb-loading-windmill { animation: none; }
}

/* ===== 首页近七日折线图 ===== */
.home-charts-loading {
  margin-top: 16px;
  padding: 8px 0;
}
.home-charts-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}
.home-chart-card {
  background:
    linear-gradient(180deg, rgba(255, 254, 250, 0.82) 0%, rgba(251, 250, 245, 0.72) 55%, rgba(251, 250, 245, 0.68) 100%),
    var(--ill-morning-mountains) center bottom / cover no-repeat,
    #FBFAF5;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 14px 4px 10px 20px;
  position: relative;
  overflow: hidden;
  min-height: 320px;
}
.home-chart-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 254, 250, 0.28);
  pointer-events: none;
  z-index: 0;
}
.home-chart-fitness::before,
.home-chart-zhao::before {
  background-image: none;
  background: rgba(255, 254, 250, 0.28);
  opacity: 1;
  width: auto;
  height: auto;
  right: auto;
  bottom: auto;
}
.home-chart-card > * { position: relative; z-index: 1; }
.home-chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  padding: 0 2px 0 4px;
}
.home-chart-head h3 {
  margin: 0;
  font-family: "Songti SC", "STSong", "Noto Serif SC", "PingFang SC", serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 1px;
}
.home-chart-sub {
  margin: 4px 0 0;
  font-family: "Songti SC", "STSong", "Noto Serif SC", "PingFang SC", serif;
  font-size: 13px;
  color: var(--text-3);
  letter-spacing: 0.4px;
}
.home-chart-total {
  font-family: "Songti SC", "STSong", "Noto Serif SC", "PingFang SC", serif;
  font-size: 28px;
  font-weight: 600;
  color: var(--qingbi);
  line-height: 1;
  letter-spacing: 0.04em;
}
.home-chart-total small {
  font-size: 13px;
  font-weight: 500;
  margin-left: 3px;
  color: var(--text-3);
}
.home-chart-total-zhao {
  color: var(--dailan);
}
.home-chart-body {
  width: 100%;
  aspect-ratio: 560 / 260;
  height: auto;
  min-height: 200px;
  max-height: 280px;
  margin: 0;
  position: relative;
}
.home-chart-svg {
  width: 100%;
  height: 100%;
  display: block;
  margin-left: 0;
}
.home-chart-dot {
  cursor: pointer;
}
.home-chart-dot.is-active .home-chart-mark {
  transform: scale(1.35);
  transform-box: fill-box;
  transform-origin: center;
  stroke-width: 2;
}
.home-chart-tip {
  position: absolute;
  z-index: 5;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255, 254, 250, 0.96);
  color: var(--ink);
  font-family: "Songti SC", "STSong", "Noto Serif SC", "PingFang SC", serif;
  font-size: 12px;
  letter-spacing: 0.3px;
  box-shadow: var(--shadow-soft);
  pointer-events: none;
  white-space: nowrap;
}

/* ===== 国风下拉选择（展开在字段下方）===== */
.gf-select {
  position: relative;
  flex: 1;
  min-width: 0;
  width: 100%;
}
.gf-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.gf-select-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(180deg, rgba(255, 254, 250, 0.98) 0%, rgba(246, 243, 236, 0.9) 100%);
  color: var(--text-1);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--shadow-soft);
}
.gf-select-trigger:hover {
  border-color: color-mix(in srgb, var(--qingbi) 45%, var(--border));
  box-shadow: var(--shadow-hover);
}
.gf-select.is-open .gf-select-trigger,
.gf-select-trigger[aria-expanded="true"] {
  border-color: var(--qingbi);
  box-shadow: 0 0 0 3px rgba(121, 184, 160, 0.16);
}
.gf-select-trigger.is-placeholder .gf-select-text {
  color: var(--text-3);
}
/* 已选中具体筛选项时：浅青碧底，便于和「全部/未选」区分 */
.gf-select-trigger:not(.is-placeholder) {
  background: color-mix(in srgb, var(--qingbi) 14%, #FFFEFA);
  border-color: color-mix(in srgb, var(--qingbi) 32%, var(--border));
  color: var(--dailan);
}
.gf-select-trigger:not(.is-placeholder) .gf-select-text {
  color: var(--dailan);
  font-weight: 500;
}
.gf-select-trigger:not(.is-placeholder) .gf-select-caret {
  color: color-mix(in srgb, var(--qingbi) 70%, var(--text-3));
}
.gf-select.is-disabled .gf-select-trigger,
.gf-select-trigger:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}
.bank-toolbar .gf-select-trigger:not(.is-placeholder),
.rc-filters .gf-select-trigger:not(.is-placeholder),
.ocr-batch-engine-row .gf-select-trigger:not(.is-placeholder),
.ocr-import-toolbar .gf-select-trigger:not(.is-placeholder),
.ocr-import-card .gf-select-trigger:not(.is-placeholder) {
  background: color-mix(in srgb, var(--qingbi) 16%, #FFFEFA);
}
.gf-select-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.2px;
}
.gf-select-caret {
  flex-shrink: 0;
  color: var(--text-3);
  font-size: 12px;
  transform: rotate(180deg);
  opacity: 0.75;
  transition: transform var(--transition);
}
.gf-select.is-open .gf-select-caret {
  transform: rotate(0deg);
  color: var(--qingbi);
}

.gf-select-panel {
  position: fixed;
  z-index: 12050;
  padding: 10px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(165deg, rgba(255, 254, 250, 0.98) 0%, rgba(232, 242, 238, 0.94) 100%);
  box-shadow: 0 12px 36px rgba(63, 92, 110, 0.14);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.gf-select-panel::before {
  content: '';
  position: absolute;
  right: -14px;
  bottom: -16px;
  width: 100px;
  height: 80px;
  background: var(--ill-cloud) no-repeat right bottom / contain;
  opacity: 0.12;
  pointer-events: none;
}
/* 内层滚动：滚动条只在中间区域，上下不贴满面板边缘 */
.gf-select-panel-scroll {
  position: relative;
  z-index: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: #79B8A0 transparent;
}
.gf-select-panel-scroll::-webkit-scrollbar {
  width: 6px;
  height: 0;
}
.gf-select-panel-scroll::-webkit-scrollbar:horizontal {
  display: none;
  height: 0;
}
.gf-select-panel-scroll::-webkit-scrollbar-track {
  background: transparent;
  margin-block: 8px;
  border-radius: 999px;
}
.gf-select-panel-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #BFE0E3 0%, #A9D6B8 45%, #79B8A0 100%);
  border-radius: 999px;
  border: 1px solid transparent;
  background-clip: padding-box;
  min-height: 28px;
}
.gf-select-panel-scroll::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #93C4D6 0%, #79B8A0 100%);
  background-clip: padding-box;
  border: 1px solid transparent;
}
.gf-select-panel-scroll::-webkit-scrollbar-corner {
  background: transparent;
  display: none;
}
.gf-select-option {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text-1);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: var(--transition);
}
.gf-select-option:hover:not(.is-disabled) {
  background: var(--primary-light);
  border-color: color-mix(in srgb, var(--yunshui) 50%, transparent);
  color: var(--ink);
}
.gf-select-option.is-active {
  background: linear-gradient(145deg, rgba(121, 184, 160, 0.18) 0%, rgba(169, 214, 184, 0.22) 100%);
  border-color: color-mix(in srgb, var(--qingbi) 35%, var(--border));
  color: var(--ink);
  font-weight: 600;
}
.gf-select-option.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.gf-select-check {
  flex-shrink: 0;
  width: 16px;
  color: var(--qingbi);
  font-size: 12px;
  text-align: center;
}
.gf-select-check-space {
  flex-shrink: 0;
  width: 16px;
}
.gf-select-option-text {
  flex: 1;
  min-width: 0;
}
.gf-select-empty {
  padding: 12px;
  text-align: center;
  color: var(--text-3);
  font-size: 12px;
}

.ef-row .gf-select,
.form-row .gf-select,
.bank-toolbar .gf-select,
.rc-filters .gf-select {
  flex: 1;
}
.bank-toolbar .gf-select {
  max-width: 160px;
  flex: 0 1 160px;
}
.rc-filters .gf-select {
  width: auto;
  min-width: 220px;
  flex: 0 0 auto;
}
/* 背诵科目筛选：按最长科目完整显示，避免省略 */
.rc-filters .gf-select .gf-select-text {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}
.rc-filters #rc-subject + .gf-select-trigger,
.rc-filters .gf-select:has(#rc-subject) .gf-select-trigger {
  min-width: 220px;
}

@media (max-width: 480px) {
  .al-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
  .fit-card { padding: 13px; }
  .fit-step-row { flex-wrap: wrap; }
  .fit-step-row .fs-name, .fit-step-row .fs-sec, .fit-step-row .fs-video { flex: 1 1 100%; }
  .diet-meal-body { grid-template-columns: 1fr; }
  .diet-meal-media { width: 100%; height: 140px; }
  .diet-kcal-add { grid-template-columns: 1fr 1fr; }
  .diet-kcal-add .diet-food-add { grid-column: 1 / -1; }
  .mm-layout { grid-template-columns: 1fr; }
  .mm-subject-list { max-height: 180px; }
  .mm-main { min-height: 280px; }
  .rc-grid { grid-template-columns: 1fr; }
  .rc-search { max-width: none; }
  .home-todo-board,
  .home-charts-board { grid-template-columns: 1fr; }
  .todo-card { flex-direction: column; }
  .todo-section { margin-bottom: 22px; }
  .todo-card-title { font-size: 14px; }
  .todo-archive-tab { font-size: 12px; padding: 8px 8px; }
  .todo-section-head {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .home-todo-col { padding: 12px 12px 10px; }
  .home-todo-item { gap: 8px; }
  .home-todo-text { font-size: 14px; }
}


/* ===== 登录页 ===== */
/* #app 为横向 flex，登录时需让页面占满宽度才能真正居中 */
#app.login-mode,
#app:has(.login-page) {
  display: block;
  min-height: 100vh;
  min-height: 100dvh;
}
.login-page {
  box-sizing: border-box;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
  background:
    radial-gradient(ellipse 80% 50% at 20% 10%, rgba(191, 224, 227, 0.55), transparent 55%),
    radial-gradient(ellipse 70% 45% at 90% 80%, rgba(168, 214, 184, 0.35), transparent 50%),
    var(--yuebai);
}
.login-card {
  width: min(400px, 100%);
  max-width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 36px 32px 32px;
}
.login-brand {
  text-align: center;
  margin-bottom: 28px;
}
.login-avatar {
  width: 72px;
  height: 72px;
  object-fit: contain;
  margin-bottom: 12px;
}
.login-title {
  margin: 0;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 26px;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.06em;
}
.login-sub {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.5;
}
.login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--text-2);
}
.login-field input {
  height: 42px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 12px;
  font-size: 16px; /* 避免 iOS 聚焦自动放大 */
  background: #FFFEFA;
  color: var(--text-1);
  width: 100%;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
.login-field input:focus {
  outline: none;
  border-color: var(--qingbi);
  box-shadow: 0 0 0 3px rgba(121, 184, 160, 0.2);
}
.login-error {
  margin: 0;
  font-size: 13px;
  color: #C81E4E;
}
.login-submit {
  width: 100%;
  height: 44px;
  margin-top: 4px;
  font-size: 15px;
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 480px) {
  .login-page {
    align-items: center;
    padding: max(20px, env(safe-area-inset-top)) 14px max(20px, calc(16px + env(safe-area-inset-bottom)));
  }
  .login-card {
    width: 100%;
    padding: 28px 20px 22px;
    border-radius: 16px;
  }
  .login-brand { margin-bottom: 22px; }
  .login-avatar { width: 64px; height: 64px; }
  .login-title { font-size: 22px; }
  .login-sub { font-size: 12.5px; }
  .login-form { gap: 14px; }
  .login-submit { height: 46px; }
}

/* ===== 侧栏当前用户 ===== */
.side-user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 16px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.side-user-name {
  font-size: 13px;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.side-logout {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--dailan);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}
.side-logout:hover {
  background: var(--primary-light);
  color: var(--primary-dark);
}

/* ===== 用户管理表 ===== */
.user-table-wrap {
  margin: 8px 0 24px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
}
.user-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.user-table th,
.user-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.user-table th {
  background: var(--bg-soft);
  color: var(--text-2);
  font-weight: 600;
}
.user-table tr:last-child td {
  border-bottom: none;
}
.user-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.btn-sm {
  padding: 4px 10px !important;
  font-size: 12px !important;
  height: auto !important;
}


/* ===== 背诵 · 抽背 ===== */
.rc-head-acts {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
/* 抽背弹层：标题/底栏固定，仅正文区滚动，并阻断滚动穿透 */
.modal.rc-draw-modal {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: min(86vh, 720px);
  width: 640px;
  max-width: 94vw;
}
.modal.rc-draw-modal .modal-head,
.modal.rc-draw-modal .modal-foot {
  flex-shrink: 0;
}
.rc-draw-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.rc-draw-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.rc-draw-subject {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--dailan);
  background: var(--primary-light);
  border: 1px solid color-mix(in srgb, var(--qingbi) 28%, var(--border));
}
.rc-draw-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  color: var(--text-3);
  background: #F1F0EB;
  border: 1px solid var(--border);
}
.rc-draw-badge.is-fresh {
  color: var(--dailan);
  background: color-mix(in srgb, var(--qingbi) 14%, #FFFEFA);
  border-color: color-mix(in srgb, var(--qingbi) 35%, var(--border));
}
.rc-draw-title {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-1);
  line-height: 1.4;
}
.rc-draw-question {
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--yuebai) 70%, #fff);
  border: 1px solid var(--border);
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-1);
  white-space: pre-wrap;
  word-break: break-word;
}
.rc-draw-reveal {
  margin-bottom: 14px;
}
.rc-draw-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
  padding-top: 4px;
}
.rc-draw-actions .btn-secondary[disabled] {
  opacity: 0.7;
  cursor: default;
}


/* ===== 评论：公开 / 我的 ===== */
.cm-tabs {
  display: flex;
  gap: 6px;
  margin: 0 0 10px;
  padding: 2px;
  background: color-mix(in srgb, var(--yuebai) 80%, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  width: fit-content;
  max-width: 100%;
}
.cm-tab {
  border: none;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cm-tab:hover {
  color: var(--dailan);
}
.cm-tab.active {
  background: color-mix(in srgb, var(--qingbi) 18%, #FFFEFA);
  color: var(--dailan);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(63, 92, 110, 0.08);
}
.cm-tab-count {
  font-size: 11px;
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}
.cm-input-row {
  flex-wrap: wrap;
  margin-top: 10px;
}
/* ===== OCR 批量识别页 ===== */
.ocr-batch-hint { margin: -4px 0 14px; }
.ocr-batch-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 12px;
}
.ocr-batch-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.ocr-batch-row input {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 14px;
}
.ocr-batch-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ocr-batch-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.ocr-batch-head h3 { margin: 0; font-size: 15px; }
.ocr-batch-pill {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--text-2);
}
.ocr-batch-pill.running { background: var(--primary-light); color: var(--primary-dark); }
.ocr-batch-pill.done { background: #E6FBF3; color: #088F5A; }
.ocr-batch-pill.failed { background: #FFFBE6; color: #854F0B; }
.ocr-batch-pill.cancelled { background: #FFF0F3; color: #C81E4E; }
.ocr-batch-progress-wrap {
  height: 10px;
  background: var(--bg-soft);
  border-radius: 999px;
  overflow: hidden;
}
.ocr-batch-progress {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #5EA5D6, #58BFA7);
  transition: width 0.25s;
}
.ocr-batch-stats {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13px;
  margin: 10px 0 6px;
}
.ocr-batch-failures ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ocr-import-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.ocr-import-toolbar label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-2);
  font-weight: 500;
}
.ocr-import-toolbar select {
  min-width: 150px;
  width: auto;
}
.ocr-import-toolbar .gf-select {
  min-width: 150px;
  flex: 0 1 auto;
  width: auto;
}
.ocr-batch-engine-row .gf-select {
  width: 100%;
}
.ocr-import-grid .gf-select {
  width: 100%;
}
.ocr-import-cards {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ocr-import-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  padding: 12px;
  overflow: hidden;
}
.ocr-import-card.has-err { border-color: #d9a152; background: #fff9ef; }
.ocr-import-card.has-dup { border-color: #d36a6a; background: #fff6f6; }
.ocr-import-card-layout {
  display: grid;
  /* 题目区可收缩；原图预览约原先两倍宽 */
  grid-template-columns: minmax(0, 1fr) minmax(200px, 240px);
  gap: 14px;
  align-items: start;
}
.ocr-import-card-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ocr-import-src-pane {
  width: 100%;
  min-width: 0;
  position: sticky;
  top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ocr-import-src-label {
  font-size: 11px;
  text-align: center;
}
.ocr-import-src-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 320px;
  padding: 0;
  border: 1px solid color-mix(in srgb, #C9A86A 35%, var(--border));
  border-radius: 10px;
  overflow: hidden;
  background: #F6F3EC;
  cursor: zoom-in;
  position: relative;
}
.ocr-import-src-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #F6F3EC;
}
.ocr-import-src-thumb.is-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: wait;
}
.ocr-import-src-thumb.is-loading img { display: none; }
.ocr-import-src-pane-pdf .ocr-import-src-pdf {
  aspect-ratio: 3 / 4;
  max-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.4;
  padding: 8px;
}
@media (max-width: 900px) {
  .ocr-import-card-layout {
    grid-template-columns: minmax(0, 1fr) minmax(160px, 200px);
  }
}
@media (max-width: 768px) {
  .ocr-import-card-layout { grid-template-columns: 1fr; }
  .ocr-import-src-pane {
    order: -1;
    position: static;
    flex-direction: row;
    align-items: center;
    max-width: none;
  }
  .ocr-import-src-thumb {
    width: 160px;
    max-height: 200px;
    flex-shrink: 0;
  }
}
.ocr-import-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
  min-width: 0;
}
.ocr-import-card-head .muted {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ocr-import-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 0;
}
.ocr-import-grid label,
.ocr-import-card > label,
.ocr-import-card-main > label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-2);
  font-weight: 500;
  min-width: 0;
  width: 100%;
}
.ocr-import-card textarea,
.ocr-import-card input[type="text"] {
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 9px;
  font-size: 13px;
  line-height: 1.45;
  background: var(--bg-card);
  color: var(--text-1);
  font-family: inherit;
  transition: var(--transition);
  box-sizing: border-box;
}
.ocr-import-card textarea {
  resize: vertical;
  min-height: 72px;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.ocr-import-card textarea:focus,
.ocr-import-card input[type="text"]:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 149, 246, 0.1);
}
.ocr-import-opts { display: grid; gap: 6px; margin-top: 6px; }
.ocr-import-opts-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-1);
}
.ocr-import-opts-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.ocr-import-opt-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.ocr-import-opt-row.ocr-import-opt-row-img {
  grid-template-columns: 56px minmax(0, 1fr) auto auto;
  align-items: start;
}
.ocr-import-stem-imgs {
  margin: 6px 0 8px;
}
.ocr-import-real-exam {
  margin: 2px 0 0;
}
.ocr-import-real-exam .ef-real-exam-ui {
  padding: 8px 10px;
}
.ocr-import-explanation {
  margin-top: 6px;
}
.ocr-import-opt-img {
  display: flex;
  align-items: flex-start;
}
.ocr-import-opt-row span { font-size: 12px; color: var(--text-2); text-align: center; }
.ocr-import-opt-letter { font-weight: 600; }
.ocr-import-opt-ans {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0;
  cursor: pointer;
}
.ocr-import-opt-ans input { margin: 0; }
.ocr-import-answer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  margin-top: 4px;
}
.ocr-import-judge-opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ocr-import-text-answer {
  display: grid;
  gap: 4px;
  font-size: 12px;
  margin-top: 4px;
}
.ocr-import-err {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ocr-import-err span {
  font-size: 12px;
  color: #854F0B;
  background: #FFFBE6;
  border: 1px solid #f2d79c;
  border-radius: 999px;
  padding: 2px 8px;
}
.ocr-import-dup {
  margin-top: 8px;
  font-size: 12px;
  color: #9a3b2f;
  background: rgba(200, 30, 78, 0.08);
  border: 1px solid rgba(200, 30, 78, 0.18);
  border-radius: 8px;
  padding: 6px 8px;
}
.cm-input-row input[type="text"] {
  flex: 1 1 160px;
  min-width: 120px;
}
.cm-add-public {
  background: color-mix(in srgb, var(--qingbi) 14%, #FFFEFA) !important;
  border-color: color-mix(in srgb, var(--qingbi) 35%, var(--border)) !important;
  color: var(--dailan) !important;
}
.cm-add-public:hover {
  background: color-mix(in srgb, var(--qingbi) 24%, #FFFEFA) !important;
  border-color: var(--qingbi) !important;
}
.cm-add-mine:hover {
  border-color: color-mix(in srgb, var(--oufen) 50%, var(--border)) !important;
  color: color-mix(in srgb, #C81E4E 40%, var(--dailan)) !important;
}

/* ===== 题目配图 ===== */
.eq-img-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  align-items: center;
}
.eq-img-slot {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-soft);
}
.eq-img-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
  display: block;
}
.eq-img-del {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 14px;
  line-height: 22px;
  cursor: pointer;
  padding: 0;
}
.eq-img-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  height: 88px;
  padding: 0 10px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text-2);
  cursor: pointer;
  background: var(--bg-card);
}
.eq-img-add:hover { border-color: var(--primary); color: var(--primary); }
.eq-img-hint { font-size: 11px; display: block; margin-top: 4px; }
.eq-opt-img, .eq-opt-img-edit {
  flex-shrink: 0;
}
.eq-opt-img img, .eq-opt-img-edit img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
  cursor: zoom-in;
  display: block;
}
.eq-opt-img-edit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.eq-opt-img-add { cursor: pointer; white-space: nowrap; }
.ef-opt-row-with-img {
  flex-wrap: wrap;
  align-items: flex-start;
}
.ef-stem-images { margin-bottom: 8px; }
.qv-stem-images-edit { margin-top: 8px; }
.qv-stem-images-edit > label {
  display: block;
  font-size: 12px;
  color: var(--text-2);
  margin-bottom: 4px;
}
.qv-opt-body, .qz-opt-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.qz-opt { align-items: flex-start; }

/* ===== 记事本模块 ===== */
.nb-layout {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: 14px;
  min-height: min(70vh, 640px);
  align-items: stretch;
}
.nb-sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255, 254, 250, 0.96) 0%, rgba(246, 243, 236, 0.9) 100%);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.nb-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.nb-search {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #FFFEFA;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  outline: none;
}
.nb-search:focus {
  border-color: color-mix(in srgb, var(--dailan) 45%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--qingbi) 20%, transparent);
}
.nb-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 4px 8px;
  display: flex;
  flex-direction: column;
  gap: 0;
  scrollbar-width: thin;
  scrollbar-color: #79B8A0 transparent;
}
.nb-list::-webkit-scrollbar { width: 6px; }
.nb-list::-webkit-scrollbar-track {
  background: transparent;
  margin-block: 8px;
}
.nb-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #BFE0E3 0%, #A9D6B8 45%, #79B8A0 100%);
  border-radius: 999px;
  border: 1px solid transparent;
  background-clip: padding-box;
}
.nb-item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  border-radius: var(--radius-sm);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background: transparent;
  padding: 11px 12px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: var(--transition);
}
.nb-item:last-child {
  border-bottom-color: transparent;
}
.nb-item:hover {
  background: color-mix(in srgb, var(--qingbi) 10%, #FFFEFA);
}
.nb-item.active {
  background: color-mix(in srgb, var(--qingbi) 16%, #FFFEFA);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--qingbi) 28%, var(--border));
}
.nb-item-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nb-item-preview {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nb-item-time {
  margin-top: 6px;
  font-size: 11px;
}
.nb-empty,
.nb-editor-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 28px 16px;
  text-align: center;
}
.nb-editor {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(165deg, rgba(255, 254, 250, 0.98) 0%, rgba(241, 240, 235, 0.88) 100%);
  box-shadow: var(--shadow-card);
  padding: 14px 16px 12px;
  position: relative;
  overflow: hidden;
}
.nb-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.nb-back { display: none; }
.nb-editor-meta {
  flex: 1;
  min-width: 0;
  font-size: 12px;
}
.nb-editor-acts {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.nb-title-input {
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-bottom: 1px solid rgba(45, 74, 62, 0.12);
  background: transparent;
  padding: 8px 2px 10px;
  margin-bottom: 10px;
  font: inherit;
  font-size: 20px;
  font-weight: 600;
  font-family: "Songti SC", "STSong", "Noto Serif SC", "PingFang SC", serif;
  color: var(--ink);
  outline: none;
}
.nb-title-input::placeholder {
  color: var(--text-3);
  font-weight: 500;
  opacity: 1;
}
.nb-title-input:placeholder-shown {
  color: var(--text-3);
  font-weight: 500;
}
.nb-content-input {
  flex: 1;
  min-height: 280px;
  width: 100%;
  box-sizing: border-box;
  resize: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #FFFEFA;
  padding: 12px 14px;
  font: inherit;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-1);
  outline: none;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #79B8A0 transparent;
}
.nb-content-input:focus {
  border-color: color-mix(in srgb, var(--qingbi) 45%, var(--border));
  box-shadow: 0 0 0 3px rgba(121, 184, 160, 0.16);
}
.nb-content-input::-webkit-scrollbar { width: 6px; }
.nb-content-input::-webkit-scrollbar-track {
  background: transparent;
  margin-block: 8px;
}
.nb-content-input::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #BFE0E3 0%, #A9D6B8 45%, #79B8A0 100%);
  border-radius: 999px;
  border: 1px solid transparent;
  background-clip: padding-box;
}
.nb-save-hint {
  margin-top: 8px;
  font-size: 12px;
  text-align: right;
}
.nb-save-hint.is-saving {
  color: var(--text-2, #6b7c86);
}
.nb-save-hint.is-success {
  color: var(--primary-dark, #5FA98C);
  font-weight: 500;
}
.nb-save-hint.is-error {
  color: #C81E4E;
  font-weight: 500;
}

/* ===== 国风 Toast · 变体 A 圆章勾（可见性由内联样式保证） ===== */
.gf-toast {
  /* 布局/配色主要由 js 内联样式控制，此处仅作补充 */
}
.gf-toast-seal {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--qingbi, #79B8A0);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 3px var(--ehuang, #F3D79E);
}
.gf-toast-seal svg { display: block; }
.gf-toast-t {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--dailan, #3F5C6E);
  letter-spacing: 1px;
  font-family: "Songti SC", "STSong", "Noto Serif SC", "PingFang SC", serif;
  line-height: 1.3;
}
.gf-toast-s {
  font-size: 12.5px;
  color: var(--qingbi, #79B8A0);
  margin-top: 2px;
  letter-spacing: 0.5px;
  line-height: 1.3;
}
@media (prefers-reduced-motion: reduce) {
  .gf-toast {
    transition: none;
  }
}


@media (max-width: 768px) {
  .nb-layout {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .nb-sidebar { min-height: 52vh; }
  .nb-layout.is-editing .nb-sidebar { display: none; }
  .nb-layout:not(.is-editing) .nb-editor { display: none; }
  .nb-layout.is-editing .nb-editor {
    min-height: min(72vh, 640px);
  }
  .nb-back { display: inline-flex; }
  .nb-search { font-size: 16px; min-height: 40px; }
  .nb-title-input { font-size: 18px; }
  .nb-content-input {
    min-height: 240px;
    font-size: 16px;
  }
}

/* ===== 碎碎念 ===== */
.ssn-layout {
  display: grid;
  grid-template-columns: minmax(260px, 320px) 1fr;
  gap: 16px;
  align-items: start;
}
.ssn-cal {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  padding: 14px 14px 16px;
  box-shadow: var(--shadow-card);
}
.ssn-cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.ssn-cal-title {
  font-size: 17px;
  color: var(--ink);
  letter-spacing: 1px;
}
.ssn-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 6px;
  text-align: center;
  font-size: 12px;
  color: var(--text-3);
}
.ssn-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.ssn-cell {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: var(--text-1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0;
}
.ssn-cell.is-empty { cursor: default; pointer-events: none; }
.ssn-cell:hover:not(.is-empty) { background: var(--bg-soft); }
.ssn-cell.is-today { border-color: color-mix(in srgb, var(--qingbi) 45%, var(--border)); }
.ssn-cell.is-selected {
  background: color-mix(in srgb, #F3EEF6 70%, #FFFEFA);
  border-color: color-mix(in srgb, #6B5A7A 28%, var(--border));
  color: #6B5A7A;
  font-weight: 600;
}
.ssn-day-num { font-size: 13px; line-height: 1; }
.ssn-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #B89BC4;
}
.ssn-editor {
  display: flex;
  flex-direction: column;
  min-height: 360px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(165deg, rgba(255, 254, 250, 0.98) 0%, rgba(243, 238, 246, 0.55) 100%);
  box-shadow: var(--shadow-card);
  padding: 14px 16px 12px;
}
.ssn-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.ssn-editor-date {
  font-size: 18px;
  color: var(--ink);
  letter-spacing: 1px;
}
.ssn-editor-meta {
  font-size: 12px;
  margin-top: 4px;
}
.ssn-editor-acts {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.ssn-content {
  flex: 1;
  min-height: 240px;
  width: 100%;
  box-sizing: border-box;
  resize: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #FFFEFA;
  padding: 12px 14px;
  font: inherit;
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-1);
  outline: none;
}
.ssn-content:focus {
  border-color: color-mix(in srgb, #B89BC4 45%, var(--border));
  box-shadow: 0 0 0 3px rgba(184, 155, 196, 0.16);
}
.ssn-hint {
  margin-top: 8px;
  font-size: 12px;
  text-align: right;
}
.ssn-hint.is-saving {
  color: var(--text-2, #6b7c86);
}
.ssn-hint.is-success {
  color: var(--primary-dark, #5FA98C);
  font-weight: 500;
}
.ssn-hint.is-error {
  color: #C81E4E;
  font-weight: 500;
}
@media (max-width: 768px) {
  .ssn-layout { grid-template-columns: 1fr; }
  .ssn-content { min-height: 220px; font-size: 16px; }
}

/* ===== 记账模块 ===== */
.ld-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}
.ld-sum-item {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(160deg, rgba(255, 254, 250, 0.96) 0%, rgba(246, 235, 216, 0.55) 100%);
  box-shadow: var(--shadow-soft);
}
.ld-sum-label {
  display: block;
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: 4px;
}
.ld-sum-val {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ld-sum-exp { color: #9a3b2f; }
.ld-sum-inc { color: #2d6a4f; }

.ld-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 14px;
  align-items: start;
}
.ld-cal-pane,
.ld-day-pane {
  min-width: 0;
}
.ld-day-pane {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255, 254, 250, 0.96) 0%, rgba(246, 243, 236, 0.9) 100%);
  box-shadow: var(--shadow-card);
  padding: 14px;
  min-height: 360px;
}
.ld-day-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(45, 74, 62, 0.12);
}
.ld-pane-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.ld-cal-selected {
  border-color: color-mix(in srgb, #C4894A 55%, var(--border)) !important;
  box-shadow: 0 0 0 2px rgba(196, 137, 74, 0.18);
}
.ld-cal-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 2px;
  min-height: 0;
}
.ld-cal-exp,
.ld-cal-inc {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ld-cal-exp { color: #9a3b2f; }
.ld-cal-inc { color: #2d6a4f; }
.ld-cal-pane .cal-cell { min-height: 64px; }

.ld-entry-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ld-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
}
.ld-entry:last-child { border-bottom-color: transparent; }
.ld-entry-main { flex: 1; min-width: 0; }
.ld-entry-cat {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.ld-entry-note {
  margin-top: 2px;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ld-entry-amt {
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ld-entry-expense .ld-entry-amt { color: #9a3b2f; }
.ld-entry-income .ld-entry-amt { color: #2d6a4f; }
.ld-entry-acts {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.ld-day-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 36px 12px;
  text-align: center;
}

.ld-cat-card {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255, 254, 250, 0.96) 0%, rgba(246, 243, 236, 0.88) 100%);
  box-shadow: var(--shadow-soft);
  padding: 14px;
}
.ld-cat-card .ld-pane-title { margin-bottom: 10px; }
.ld-cat-empty { margin: 0; font-size: 13px; }
.ld-cat-list { display: flex; flex-direction: column; gap: 8px; }
.ld-cat-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.ld-cat-name {
  font-size: 12px;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ld-cat-bar-wrap {
  height: 8px;
  border-radius: 999px;
  background: rgba(45, 74, 62, 0.06);
  overflow: hidden;
}
.ld-cat-bar {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #E8BBC8 0%, #C4894A 100%);
  min-width: 4px;
}
.ld-cat-amt {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.ld-kind-tabs {
  display: flex;
  gap: 6px;
  margin: 0 0 14px;
  padding: 3px;
  background: color-mix(in srgb, var(--yuebai) 80%, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  width: fit-content;
}
.ld-kind-tab {
  border: none;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: var(--transition);
}
.ld-kind-tab.active {
  background: color-mix(in srgb, #F6EBD8 70%, #FFFEFA);
  color: #7A5A2E;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(122, 90, 46, 0.1);
}
.ld-kind-tab[data-kind="expense"].active {
  background: color-mix(in srgb, #E8BBC8 28%, #FFFEFA);
  color: #9a3b2f;
}
.ld-kind-tab[data-kind="income"].active {
  background: color-mix(in srgb, var(--qingbi) 22%, #FFFEFA);
  color: #2d6a4f;
}
#ledger-form-modal .modal-body {
  overflow-y: auto;
  max-height: min(70vh, 560px);
}

/* 手机端悬浮记一笔：默认隐藏，小屏再显示 */
.ld-fab {
  display: none;
}

@media (max-width: 768px) {
  .ld-summary { grid-template-columns: 1fr; }
  .ld-layout { grid-template-columns: 1fr; }
  .ld-day-pane { min-height: 280px; }
  .ld-entry {
    flex-wrap: wrap;
  }
  .ld-entry-acts { width: 100%; justify-content: flex-end; }
  #ld-f-amount { font-size: 16px; }

  /* 悬浮在底栏之上，避开拇指区与 safe-area */
  .ld-fab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: fixed;
    right: 16px;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    z-index: 150;
    margin: 0;
    padding: 12px 18px;
    border: 1px solid color-mix(in srgb, #3F5C6E 22%, transparent);
    border-radius: 999px;
    background: linear-gradient(160deg, #79B8A0 0%, #5FA88E 100%);
    color: #FFFEFA;
    font: inherit;
    font-size: 14px;
    font-weight: 650;
    letter-spacing: 0.04em;
    box-shadow:
      0 6px 18px rgba(63, 92, 110, 0.18),
      0 1px 0 rgba(255, 255, 250, 0.25) inset;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .ld-fab:active {
    transform: scale(0.96);
    box-shadow: 0 3px 10px rgba(63, 92, 110, 0.16);
  }
  .ld-fab-plus {
    font-size: 18px;
    line-height: 1;
    font-weight: 700;
  }
  .ld-fab-label {
    line-height: 1;
  }
}

/* ===== 英语模块 ===== */
.yg-lead {
  margin: -4px 0 12px;
  font-size: 13px;
  line-height: 1.5;
}
.yg-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 999px;
  background: #3D8B7A;
  color: #FFFEFA;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}
.yg-panel {
  /* 英语模块：比页面月白更浅的卡片白，层次更清晰 */
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px 20px;
}
.yg-panel.yg-panel-daily {
  background: var(--bg-card);
  border: 1px solid var(--border);
}
.yg-panel.yg-panel-daily .yg-panel-head h2 {
  color: var(--text-1);
}
.yg-panel.yg-panel-daily .yg-daily-card {
  border-color: var(--border);
}
.yg-panel.yg-panel-daily .yg-tip {
  color: var(--text-2);
  background: color-mix(in srgb, var(--bg-soft) 45%, var(--bg-card));
}
.yg-panel.yg-panel-daily .yg-speak:hover {
  background: color-mix(in srgb, var(--bg-soft) 55%, var(--bg-card));
}
.yg-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.yg-panel-head h2 {
  margin: 0;
  font-size: 17px;
  color: var(--text-1);
  font-weight: 650;
}
.yg-hint { font-size: 13px; margin: 0 0 12px; line-height: 1.5; }
.yg-day-feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.yg-day-card {
  display: block;
  width: 100%;
  text-align: left;
  padding: 14px 14px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, #3D8B7A 14%, transparent);
  background: #FFFEFA;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color .15s, background .15s;
}
.yg-day-card:hover {
  border-color: color-mix(in srgb, #3D8B7A 32%, transparent);
  background: color-mix(in srgb, #E8F4F1 45%, #FFFEFA);
}
.yg-day-card.is-today {
  border-color: color-mix(in srgb, #3D8B7A 36%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, #3D8B7A 10%, transparent);
}
.yg-day-card.is-unread {
  border-color: color-mix(in srgb, #3D8B7A 40%, transparent);
  background: color-mix(in srgb, #DDF0EB 35%, #FFFEFA);
}
.yg-day-card-date {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--text-2);
  font-weight: 600;
}
.yg-day-card-date-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.yg-day-card-tags {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.yg-unread-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3D8B7A;
  flex: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, #3D8B7A 18%, transparent);
}
.yg-tag.unread {
  background: color-mix(in srgb, #3D8B7A 16%, #FFFEFA);
  color: #2F6F64;
}
.yg-day-words {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.yg-day-word {
  font-size: 16px;
  font-weight: 650;
  color: #2F4A45;
  letter-spacing: 0.02em;
}
.yg-affix {
  margin: 10px 0 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, #E8F4F0 55%, #FFFEFA);
  border: 1px solid color-mix(in srgb, #3D7A62 12%, transparent);
}
.yg-affix-title {
  font-size: 12px;
  font-weight: 650;
  color: #3D7A62;
  margin-bottom: 8px;
}
.yg-affix-parts {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 6px;
}
.yg-affix-chip {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  border-radius: 8px;
  background: #FFFEFA;
  border: 1px solid color-mix(in srgb, #3D7A62 14%, transparent);
  max-width: 160px;
}
.yg-affix-chip strong {
  font-size: 14px;
  color: #5c3d48;
}
.yg-affix-chip em {
  font-style: normal;
  font-size: 11px;
  color: #3D7A62;
}
.yg-affix-chip span {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.35;
}
.yg-affix-plus {
  align-self: center;
  color: #3D7A62;
  font-weight: 700;
  padding: 0 2px;
}
.yg-affix-summary {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.45;
}
.yg-empty {
  text-align: center;
  padding: 28px 12px;
}
.yg-daily-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.yg-daily-card {
  background: #FFFEFA;
  border: 1px solid color-mix(in srgb, #8B5A6B 10%, transparent);
  border-radius: 12px;
  padding: 14px 16px;
}
.yg-daily-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}
.yg-word-row-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}
.yg-speak {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, #3D8B7A 18%, transparent);
  background: #FFFEFA;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, opacity .15s;
}
.yg-speak .yg-speak-icon,
.yg-speak .gf-icon {
  width: 20px;
  height: 20px;
  display: block;
}
.yg-speak .yg-speak-icon svg,
.yg-speak .gf-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.yg-speak:hover { background: color-mix(in srgb, #E8F4F1 80%, #FFFEFA); }
.yg-speak.is-loading { opacity: 0.55; cursor: wait; }
.yg-word {
  font-size: 20px;
  font-weight: 700;
  color: #5c3d48;
  letter-spacing: 0.02em;
}
.yg-word.lg { font-size: 28px; margin: 8px 0 4px; }
.yg-phonetic { font-size: 13px; margin-top: 2px; }
.yg-meaning { margin: 6px 0; color: var(--text-1); line-height: 1.5; }
.yg-examples { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 8px; }
.yg-example-block { margin: 0; }
.yg-example { margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.5; }
.yg-example-zh {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--text-3);
  line-height: 1.55;
}
.yg-tip {
  margin: 8px 0 0;
  font-size: 13px;
  color: #8B5A6B;
  background: color-mix(in srgb, #F8EBEF 55%, #FFFEFA);
  border-radius: 8px;
  padding: 8px 10px;
  line-height: 1.45;
}
.yg-tag {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, #8B5A6B 12%, #FFFEFA);
  color: #8B5A6B;
  white-space: nowrap;
}
.yg-tag.warn {
  background: color-mix(in srgb, #C4894A 18%, #FFFEFA);
  color: #9a6a30;
}
.yg-tag.soft {
  background: color-mix(in srgb, var(--qingbi, #79B8A0) 16%, #FFFEFA);
  color: #3D7A62;
}
.yg-review-card {
  background: #FFFEFA;
  border-radius: 12px;
  padding: 18px 16px;
  border: 1px solid color-mix(in srgb, #8B5A6B 10%, transparent);
}
.yg-review-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 4px;
}
.yg-quiz-prompt {
  margin: 14px 0 10px;
  font-size: 14px;
  color: var(--text-2);
}
.yg-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.yg-option {
  text-align: left;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, #8B5A6B 14%, transparent);
  background: #FFFEFA;
  color: var(--text-1);
  font: inherit;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.yg-option:hover { border-color: #8B5A6B; }
.yg-option.correct {
  border-color: #3D7A62;
  background: color-mix(in srgb, #E6F5ED 70%, #FFFEFA);
}
.yg-option.wrong {
  border-color: #C81E4E;
  background: color-mix(in srgb, #F8EBEF 60%, #FFFEFA);
}
.yg-review-acts {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.yg-review-skip-row {
  margin-top: 12px;
  text-align: center;
}
.yg-reveal { margin-top: 12px; }
.yg-reveal.hidden,
.yg-form.hidden { display: none !important; }
.yg-form {
  background: #FFFEFA;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 14px;
  border: 1px solid color-mix(in srgb, #8B5A6B 10%, transparent);
}
.yg-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
}
.yg-form-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-2);
}
.yg-form-grid label.full { grid-column: 1 / -1; }
.yg-form-grid input,
.yg-form-grid textarea {
  font: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, #8B5A6B 18%, transparent);
  background: #FFFEFA;
  color: var(--text-1);
}
.yg-form-grid textarea { resize: vertical; min-height: 120px; }
.yg-form-acts {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}
.yg-word-list,
.yg-art-list,
.yg-listen-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.yg-word-row,
.yg-listen-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid color-mix(in srgb, #8B5A6B 10%, transparent);
}
.yg-word-row:last-child,
.yg-listen-row:last-child { border-bottom: none; }
.yg-word-row-title {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 4px;
}
.yg-art-item {
  text-align: left;
  width: 100%;
  padding: 12px 8px;
  border: none;
  border-bottom: 1px solid color-mix(in srgb, #8B5A6B 10%, transparent);
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.yg-art-item:hover { background: color-mix(in srgb, #F8EBEF 40%, transparent); }
.yg-art-title { font-weight: 600; margin-bottom: 4px; color: #5c3d48; }
.yg-art-view-title { margin: 8px 0 4px; font-size: 18px; color: #5c3d48; }
.yg-article-body {
  margin-top: 12px;
  line-height: 1.85;
  font-size: 16px;
  color: var(--text-1);
  white-space: pre-wrap;
  word-break: break-word;
}
.yg-token {
  display: inline;
  padding: 0 1px;
  margin: 0;
  border: none;
  border-bottom: 1px dashed color-mix(in srgb, #8B5A6B 35%, transparent);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-radius: 2px;
}
.yg-token:hover {
  background: color-mix(in srgb, #F8EBEF 70%, transparent);
  color: #8B5A6B;
}

@media (max-width: 768px) {
  .yg-form-grid { grid-template-columns: 1fr; }
  .yg-word.lg { font-size: 24px; }
  .yg-daily-top { flex-direction: column; align-items: stretch; }
  .yg-panel { padding: 14px; }
}



/* ===== 主屏幕版本更新提示（需避开手机底栏） ===== */
.app-update-banner,
#app-update-banner {
  position: fixed;
  left: 12px;
  right: 12px;
  /* 底栏约 64–72px + 安全区，再留空隙，避免被遮挡 */
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  z-index: 400;
  pointer-events: none;
}
.app-update-inner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, #3F5C6E 18%, transparent);
  background: linear-gradient(160deg, #FFFEFA 0%, #F6F3EC 100%);
  box-shadow: 0 10px 28px rgba(63, 92, 110, 0.16);
  color: var(--ink, #36403B);
}
.app-update-text {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 500;
}
.app-update-btn {
  flex-shrink: 0;
  border: none;
  border-radius: 999px;
  padding: 8px 14px;
  background: linear-gradient(160deg, #79B8A0 0%, #5FA88E 100%);
  color: #FFFEFA;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.app-update-btn:active { transform: scale(0.97); }
.app-update-dismiss {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-3, #7a847d);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
@media (min-width: 769px) {
  .app-update-banner,
  #app-update-banner {
    left: auto;
    right: 20px;
    bottom: 24px;
    width: min(420px, calc(100vw - 40px));
  }
}