:root {
  color-scheme: dark;
  /* 外壳左右留白。顶栏与侧栏都从这条边开始，所以两处共用同一个值。 */
  --gutter: 18px;
  /* 页面内容的左右留白（各视图用）。顶栏不吃这一档 —— 它要紧贴容器的左右边缘。 */
  --page-pad: 26px;
  --brand: #14B8A6;
  --brand-2: #0D9488;
  --brand-light: rgba(20, 184, 166, 0.16);
  --brand-grad: linear-gradient(135deg, #14B8A6 0%, #0D9488 100%);
  --accent: #F59E0B;
  --accent-light: rgba(245, 158, 11, 0.16);
  --bg: #13151C;
  --bg-grad: linear-gradient(180deg, #161922 0%, #0E1016 100%);
  --surface: #1B1E29;
  --surface-2: #222633;
  /* 卡片面底色。表面上与 --surface 是同一个值，但它是一层**语义别名**：
     程迹 / 云同步那几块卡片写的是 var(--card)，按「卡片该是什么底色」来取色。
     之前只被引用、从没被定义过 —— 那几块卡片的 background 整条声明失效（渲染成透明），
      hover 上去也看不出反馈。定义成与 surface 同值，观感回到设计稿。 */
  --card: #1B1E29;
  --text: #E9EBF2;
  --text-sub: #9AA1B2;
  --text-mute: #6B7282;
  --ph: #8B93A5;
  --line: #2A2E3C;
  --line-strong: #353B4C;
  /* 图标三级尺寸规范：L1 导航级 / L2 卡片级 / L3 强调级 */
  --ico-1: 30px;
  --ico-2: 36px;
  --ico-3: 46px;
  --ico-1-fs: 16px;
  --ico-2-fs: 18px;
  --ico-3-fs: 24px;
  --success: #10B981;
  --danger: #EF4444;
  --radius: 20px;
  --radius-sm: 14px;
  --radius-xs: 10px;
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  --shadow-mid: 0 6px 22px rgba(0, 0, 0, 0.36);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55);
  --ring: 0 0 0 4px var(--brand-light);
  --ease: cubic-bezier(.4, 0, .2, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
  background: var(--bg-grad);
  background-attachment: fixed;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
/* 兜底：输入框默认跟随主题（不写就会出现浏览器白底 + 浅色字，深色模式下看不清） */
input:not([type="checkbox"]):not([type="radio"]), textarea { background: transparent; color: var(--text); font-family: inherit; }

#app { min-height: 100%; display: flex; flex-direction: column; }

/* 顶栏。它现在是**主内容容器的第一个子元素**（见 index.html 里的 .layout），
   在容器里横跨两列，所以左右不再需要任何 calc —— 左边界就是容器的内容盒左边缘，
   与侧栏的左边界是同一条边；右侧也只留容器那一圈留白，贴浏览器最右边。
   之前是「#app 里两个平级的盒子 + 两处各写一遍 max(...) 去凑」，是这次要改掉的写法。 */
.topbar {
  height: 58px; display: flex; align-items: center; justify-content: space-between;
  padding: 0; background: rgba(27,30,41,.82); backdrop-filter: saturate(150%) blur(14px); -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
#btn-menu { display: none; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-logo {
  width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff; font-weight: 700; font-size: 18px; display: grid; place-items: center;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name { font-weight: 700; font-size: 16px; }
.brand-sub { font-size: 11px; color: var(--text-sub); }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.icon-btn { border: none; background: transparent; font-size: 18px; cursor: pointer; color: var(--text); display: inline-block; }
/* 注意：不要给 .icon-btn 写 display: flex/inline-flex —— 会盖掉 [hidden]{display:none}，
   #btn-install（未触发 beforeinstallprompt 时带 hidden）就会一直露出来。 */
.icon-btn[hidden] { display: none; }
.icon-btn.sync-on { filter: drop-shadow(0 0 4px rgba(16,185,129,.9)); }

/* 内联 SVG 图标（行内线性风格）：尺寸跟随文字（1em）、颜色走 currentColor、
   与文字基线对齐。pointer-events: none —— 图标是纯装饰，点击一律落到外层
   按钮 / 行，避免 SVG 子元素成为 e.target 让事件委托（如 .todo-check）失效。 */
.ico { width: 1em; height: 1em; vertical-align: -0.15em; flex-shrink: 0; pointer-events: none; }
.ico-sm { width: .85em; height: .85em; vertical-align: -0.1em; }
.ico-lg { width: 1.3em; height: 1.3em; vertical-align: -0.22em; }

/* 云端同步设置 */
.sync-status { font-size: 13px; color: var(--text-sub); margin: 2px 0 14px; padding: 10px 12px; background: var(--bg); border-radius: var(--radius-sm); }
.sync-status.ok { color: var(--success); background: #E6F7EE; }
.sync-hint { font-size: 12px; color: var(--text-sub); line-height: 1.6; margin-top: 8px; }
.sync-divider { height: 1px; background: var(--line); margin: 18px 0; }
.sync-account-head { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.sync-phone { margin-top: 14px; }
.tl-form-actions button:disabled, .tl-form-actions button.disabled { opacity: .5; cursor: not-allowed; }
.tl-form-actions button:disabled:hover:not(.ghost), .tl-form-actions button.disabled:hover:not(.ghost) { background: var(--brand); }
#account-form .tl-label { margin-top: 10px; }
#account-verify-box .tl-label { margin-top: 8px; }
#account-verify-box .tl-form-actions { margin-top: 12px; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--brand-light); color: var(--brand);
  display: grid; place-items: center; font-weight: 700; font-size: 14px;
}

/* 布局：外壳 = 主内容容器（CSS Grid）
   第一行：顶栏，横跨两列；第二行：侧栏 | 主内容。
   顶栏与侧栏都是这个容器的子元素，左边界都落在容器的**内容盒左边缘**上 ——
   结构上就是同一条边，所以不需要任何 padding / margin 去凑对齐；
   侧栏以后改宽度（展开 / 收起）顶栏也不会错位。
   （之前是 #app 里两个平级的盒子 + 顶栏写一串 max(calc(...)) 去模拟容器左边线。） */
.layout {
  flex: 1; width: 100%;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  padding: 0 var(--gutter);
}
.topbar { grid-column: 1 / -1; }
.sidebar { grid-column: 1; }
.content { grid-column: 2; }

.sidebar {
  padding: 18px 12px; display: flex; flex-direction: column; gap: 4px;
  border-right: 1px solid var(--line); background: var(--surface);
  /* 侧栏曾经被 flex 拉到与主内容等高、菜单底下留出一大片空面板（用户反馈「左侧菜单栏留空太多」）。
     中间试过「按内容高 + 吸顶」，但 16 个菜单项 + 4 个分组标题已经能把面板填满
     （1236px 视口下菜单到 1120px），所以现在回到**铺满整列**：底色一路通到底，
     长页面滚动时侧栏跟着滚，观感上就是「上面菜单直接往下补」。 */
  align-self: stretch;
  max-height: none;
  overflow-y: auto;
  border-radius: 0;
}
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--radius-sm);
  color: var(--text-sub); text-decoration: none; font-size: 14px; cursor: pointer; transition: .15s;
}
.nav-item:hover { background: var(--bg); }
.nav-item.active { background: var(--brand-light); color: var(--brand); font-weight: 600; }
.nav-ico { font-size: var(--ico-1-fs); width: var(--ico-1); height: var(--ico-1); border-radius: 9px; background: rgba(20,184,166,.14); display: grid; place-items: center; flex-shrink: 0; transition: .15s; }
/* 选中项的图标底板：用**品牌色实底 + 白图标**，而不是白底。
   原来写死 `background: #fff`，与「我的」那一项的选中态（白字）撞在一起 ——
   白底 + 白图标 = 图标整个看不见（暗色浅色都一样）。
   改成实底后所有选中项统一是「品牌色底 + 白图标」，对比度足够。 */
.nav-item.active .nav-ico { background: var(--brand); color: #fff; }

/* 主内容列。左右留白挪到 .view 上：顶栏要贴着这一列的左右边缘（贴浏览器最右边），
   不能再被 .content 的内边距往里推一道。 */
.content { min-width: 0; }
/* 通用的 .hidden：JS 到处用它切显隐（.view / .modal / 云同步弹窗里的登录表单与已登录面板…），
   但此前只给 .view.hidden / .modal.hidden 写了规则 —— 别处挂了 .hidden 的元素照样占版面，
   于是「登录表单」和「已登录」两块会同时显示、互相压着。这里是兜底的那一条。 */
.hidden { display: none !important; }
/* 每个视图自己带页面留白（原来这层留白在 .content 上；挪下来的原因是顶栏要贴边）。
   位置与数值都没变，所以各视图的观感与之前一致。 */
.view { animation: fade .2s ease; padding: 22px var(--page-pad); }
.view.hidden { display: none; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.view-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.view-head h1 { font-size: 22px; }
.view-desc { font-size: 13px; color: var(--text-sub); margin-top: -6px; }

/* 快捷添加 */
.quick-add { display: flex; gap: 8px; }
.quick-add input {
  flex: 1; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 14px; outline: none; transition: .15s; background: var(--surface);
}
.quick-add input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-light); }
.quick-add button, .invite-code button, .memo-foot button, .invite-share-row button, .month-nav button {
  border: none; background: var(--brand-grad); color: #fff; padding: 0 18px; border-radius: var(--radius-sm);
  font-size: 14px; cursor: pointer; transition: transform .12s var(--ease), box-shadow .15s var(--ease), filter .15s var(--ease);
  box-shadow: 0 4px 14px rgba(20, 184, 166, 0.28);
}
.quick-add button:hover, .invite-code button:hover { filter: brightness(1.06); box-shadow: 0 6px 18px rgba(20, 184, 166, 0.36); }
.quick-add button:active, .invite-code button:active { transform: scale(0.97); }

/* 筛选 */
.filters { display: flex; gap: 8px; }
.chip {
  border: 1px solid var(--line); background: var(--surface); color: var(--text-sub);
  padding: 6px 14px; border-radius: 20px; font-size: 13px; cursor: pointer; transition: .15s;
}
.chip.active { background: var(--brand); color: #fff; border-color: var(--brand); }

/* 统计 */
.stat-row, .invite-stat { display: flex; gap: 12px; margin: 16px 0; }
.stat {
  flex: 1; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; display: flex; flex-direction: column; box-shadow: var(--shadow);
}
.stat b { font-size: 24px; color: var(--brand); }
.stat span { font-size: 12px; color: var(--text-sub); margin-top: 2px; }

/* 待办列表 */
.todo-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.todo-item {
  display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 13px 15px; box-shadow: var(--shadow); transition: .15s;
}
.todo-item:hover { border-color: var(--brand-light); }
.todo-check {
  width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); cursor: pointer;
  flex-shrink: 0; display: grid; place-items: center; font-size: 12px; color: #fff; transition: .15s;
}
.todo-check.done { background: var(--success); border-color: var(--success); }
/* 点正文 = 打开完整编辑弹窗（勾选框 / 删除按钮各自的动作优先），
   只给手型光标做个提示：列表的排版、间距、配色都不动。 */
.todo-body { flex: 1; min-width: 0; cursor: pointer; }
.todo-title { font-size: 14px; word-break: break-word; }
.todo-meta { font-size: 12px; color: var(--text-sub); margin-top: 3px; display: flex; gap: 8px; flex-wrap: wrap; }
.tag { background: var(--brand-light); color: var(--brand); padding: 1px 8px; border-radius: 8px; font-size: 11px; }
.tag.time { background: var(--accent-light); color: var(--accent); }
.tag.theme { font-weight: 500; }

/* 主题线 */
.tl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.tl-empty { color: var(--text-sub); padding: 40px; text-align: center; background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); }
.tl-card { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; transition: .15s; }
.tl-card:hover { box-shadow: var(--shadow-lg); }
.tl-card-top { display: flex; align-items: center; gap: 12px; }
.tl-card-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; flex-shrink: 0; }
.tl-card-info { min-width: 0; }
.tl-card-name { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-card-sub { font-size: 12px; color: var(--text-sub); margin-top: 3px; }
.tl-card-desc { font-size: 12px; color: var(--text-sub); line-height: 1.6; min-height: 18px; }
.tl-card-open { align-self: flex-start; border: 1px solid var(--brand); background: transparent; color: var(--brand); padding: 7px 14px; border-radius: 20px; font-size: 13px; cursor: pointer; transition: .15s; }
.tl-card-open:hover { background: var(--brand); color: #fff; }

.tl-progress { display: flex; align-items: center; gap: 10px; }
.tl-progress-bar { flex: 1; height: 8px; background: var(--bg); border-radius: 99px; overflow: hidden; }
.tl-progress-fill { height: 100%; background: var(--brand); border-radius: 99px; transition: width .25s; }
.tl-progress-text { font-size: 12px; color: var(--text-sub); font-variant-numeric: tabular-nums; }

.tl-badge { font-size: 11px; padding: 1px 8px; border-radius: 8px; background: var(--brand-light); color: var(--brand); font-weight: 600; }
.tl-badge.s-active { background: #E6F7EE; color: #10B981; }
.tl-badge.s-done { background: #FFF7E6; color: #F59E0B; }
.tl-badge.s-paused { background: #F1F2F6; color: #8A93A6; }
.tl-badge.s-archived { background: #F1F2F6; color: #616876; }

/* 弹窗 */
.modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; }
.modal.hidden { display: none; }
.modal-mask { position: absolute; inset: 0; background: rgba(20, 24, 38, 0.45); backdrop-filter: blur(2px); }
.modal-panel { position: relative; width: min(520px, 92vw); max-height: 88vh; overflow-y: auto; background: var(--surface); border-radius: 18px; padding: 22px 24px; box-shadow: var(--shadow-lg); animation: pop .18s ease; }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-close { border: none; background: var(--bg); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 14px; color: var(--text-sub); }

.tl-detail-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.tl-detail-icon { width: var(--ico-3); height: var(--ico-3); border-radius: 14px; display: grid; place-items: center; font-size: var(--ico-3-fs); flex-shrink: 0; background: var(--brand-light); }
.tl-detail-titles { flex: 1; min-width: 0; }
.tl-detail-titles h2 { font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-detail-meta { font-size: 12px; color: var(--text-sub); margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.tl-detail-meta .tl-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.tl-detail-actions button { border: 1px solid var(--line); background: var(--surface); color: var(--text); padding: 9px 14px; border-radius: var(--radius-sm); font-size: 13px; cursor: pointer; transition: .15s; }
.tl-detail-actions button:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.tl-detail-actions button:disabled { opacity: .45; cursor: not-allowed; }
.tl-detail-actions .ghost { background: var(--bg); }
.tl-detail-actions .danger { color: var(--danger); border-color: #FBD5D5; }
.tl-detail-actions .danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

/* 表单 */
.tl-label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin: 14px 0 6px; }
.tl-label:first-of-type { margin-top: 4px; }
.tl-input { width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 14px; outline: none; background: var(--surface); font-family: inherit; }
.tl-input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.16); }
.tl-icons { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.tl-icon { border: 1px solid var(--line); background: var(--surface); border-radius: 10px; height: 38px; font-size: 18px; cursor: pointer; transition: .12s; }
.tl-icon:hover { border-color: var(--brand); }
.tl-icon.sel { border-color: var(--brand); background: var(--brand-light); box-shadow: 0 0 0 2px var(--brand-light); }
.tl-colors { display: flex; gap: 10px; flex-wrap: wrap; }
.tl-color { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: .12s; }
.tl-color.sel { border-color: var(--text); transform: scale(1.12); }
.tl-cats { display: flex; gap: 8px; flex-wrap: wrap; }
.tl-cat { border: 1px solid var(--line); background: var(--surface); padding: 7px 16px; border-radius: 20px; font-size: 13px; cursor: pointer; color: var(--text-sub); transition: .12s; }
.tl-cat.sel { background: var(--brand); color: #fff; border-color: var(--brand); }
.tl-dates { display: flex; align-items: center; gap: 8px; }
.tl-dates .tl-input { flex: 1; }
.tl-dash { color: var(--text-sub); }
.tl-form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.tl-form-actions button { border: none; background: var(--brand); color: #fff; padding: 10px 20px; border-radius: var(--radius-sm); font-size: 14px; cursor: pointer; }
.tl-form-actions button.ghost { background: var(--bg); color: var(--text-sub); }
.tl-form-actions button:hover:not(.ghost) { background: var(--brand-2); }
.todo-del { border: none; background: transparent; color: var(--text-sub); cursor: pointer; font-size: 16px; }
.todo-del:hover { color: var(--danger); }
.todo-item.done .todo-title { text-decoration: line-through; color: var(--text-sub); }

/* 日历 */
.month-nav { display: flex; align-items: center; gap: 14px; }
.month-nav button { padding: 4px 14px; }
#cal-title { font-size: 15px; font-weight: 600; min-width: 110px; text-align: center; }
.calendar {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow);
}
.cal-dow { text-align: center; font-size: 12px; color: var(--text-sub); padding: 4px 0; }
.cal-cell {
  aspect-ratio: 1 / 1; border-radius: var(--radius-sm); display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start; padding: 6px; font-size: 13px; cursor: pointer;
  border: 1px solid transparent; transition: .15s; position: relative;
}
.cal-cell:hover { background: var(--bg); }
.cal-cell.muted { color: #C7CBD4; }
.cal-cell.today { background: var(--brand-light); color: var(--brand); font-weight: 700; }
.cal-cell.selected { border-color: var(--brand); }
.cal-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); margin-top: 3px; }
.cal-hol { position: absolute; top: 3px; right: 4px; font-size: 9px; line-height: 1; padding: 2px 4px; border-radius: 6px; font-weight: 700; }
.cal-hol-off { background: rgba(16,185,129,.18); color: var(--success); }
.cal-hol-work { background: rgba(239,68,68,.18); color: var(--danger); }
/* 农历 + 节日 */
.cal-lunar, .cal-fest, .cal-term { font-size: 10px; line-height: 1.1; margin-top: 2px; color: var(--text-sub); max-width: 100%; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-lunar-month { color: var(--brand); font-weight: 600; }
.cal-fest { font-weight: 600; padding: 1px 4px; border-radius: 4px; }
.cal-fest-major { color: #fff; background: linear-gradient(135deg, #EF4444, #F59E0B); }
.cal-fest-minor { color: #fff; background: linear-gradient(135deg, #14B8A6, #0D9488); }
.cal-fest-chuxi { color: #fff; background: linear-gradient(135deg, #DC2626, #B91C1C); }
/* 24 节气：绿色渐变，与节日红橙 / 青色区分 */
.cal-term { font-weight: 600; padding: 1px 4px; border-radius: 4px; color: #fff; background: linear-gradient(135deg, #22C55E, #16A34A); }
.cal-lunar.muted, .cal-fest.muted, .cal-term.muted { opacity: .55; }
/* 浅色主题下节日底色加深以保证对比 */
body.light .cal-fest-major { color: #fff; background: linear-gradient(135deg, #DC2626, #D97706); }
body.light .cal-fest-minor { color: #fff; background: linear-gradient(135deg, #0D9488, #0F766E); }
body.light .cal-fest-chuxi { color: #fff; background: linear-gradient(135deg, #B91C1C, #991B1B); }
body.light .cal-term { color: #fff; background: linear-gradient(135deg, #16A34A, #15803D); }
.day-detail { margin-top: 18px; }
.day-detail h3 { font-size: 15px; margin-bottom: 10px; }
.day-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: var(--text-sub); background: transparent !important; box-shadow: none !important; border: 1px dashed var(--line); padding: 28px 12px; border-radius: var(--radius-sm); }
.de-emoji { font-size: 30px; }
.de-sub { font-size: 12px; opacity: .8; }

/* 备忘录 */
.memo-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 20px; box-shadow: var(--shadow); }
.memo-title { width: 100%; border: none; background: transparent; color: var(--text); font-size: 19px; font-weight: 600; outline: none; margin-bottom: 10px; }
.memo-title::placeholder { color: var(--ph); }
#memo-body {
  width: 100%; min-height: 160px; border: none; background: transparent; resize: vertical; font-size: 15px; line-height: 1.75;
  outline: none; font-family: inherit; color: var(--text);
}
#memo-body::placeholder { color: var(--ph); }
.memo-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.memo-saved { font-size: 12px; color: var(--success); }
.memo-foot button { padding: 8px 16px; border-radius: var(--radius-xs); }
.memo-list { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.memo-item { border: 1px solid var(--line); background: var(--bg); border-radius: 16px; padding: 14px 16px; cursor: pointer; transition: .15s; }
.memo-item:hover { border-color: var(--brand); background: var(--brand-light); }
.memo-item h4 { font-size: 15px; margin-bottom: 5px; color: var(--text); }
.memo-item p { font-size: 13px; color: var(--text-sub); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.memo-item .time { font-size: 12px; color: var(--text-sub); margin-top: 5px; }

/* 每日一句 */
.quote-card {
  /* 渐变起点原来是写死的 #fff：暗色主题下卡片左上角是白的，而 blockquote 的字色是
     var(--text)（近白）—— 整段句子几乎看不见。改成从 --surface 起渐变，
     浅色下 --surface 本来就是 #FFFFFF，观感不变。 */
  background: linear-gradient(135deg, var(--surface), var(--brand-light)); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-lg); text-align: center;
}
.quote-date { font-size: 12px; color: var(--brand); font-weight: 600; margin-bottom: 14px; }
.quote-card blockquote { font-size: 20px; line-height: 1.8; font-weight: 500; color: var(--text); }
.quote-author { font-size: 13px; color: var(--text-sub); margin-top: 14px; }
.quote-actions { display: flex; gap: 10px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
.quote-actions button {
  border: 1px solid var(--line); background: var(--surface); padding: 9px 18px; border-radius: 20px;
  font-size: 13px; cursor: pointer; transition: .15s;
}
.quote-actions button:hover { border-color: var(--brand); color: var(--brand); }
.quote-actions button.liked { background: #FFF0F0; border-color: var(--danger); color: var(--danger); font-weight: 600; }
.quote-comments, .quote-contrib { margin-top: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.quote-comments h3, .quote-contrib h3 { font-size: 15px; margin-bottom: 12px; }
.quote-comment-input { display: flex; gap: 8px; margin-bottom: 12px; }
.quote-comment-input input { flex: 1; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 13px; outline: none; background: var(--surface); font-family: inherit; }
.quote-comment-input input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-light); }
.quote-comment-input button { border: none; background: var(--brand); color: #fff; padding: 0 18px; border-radius: var(--radius-sm); font-size: 13px; cursor: pointer; }
.quote-comment-input button:hover { background: var(--brand-2); }
.quote-comment-list, .quote-contrib-list { display: flex; flex-direction: column; gap: 8px; }
.qc-item { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 13px; }
.qc-text { font-size: 13px; line-height: 1.6; word-break: break-word; }
.qc-meta { font-size: 11px; color: var(--text-sub); margin-top: 4px; }
.qc-empty { font-size: 12px; color: var(--text-sub); padding: 6px 0; }
.quote-note { font-size: 11px; color: var(--text-sub); line-height: 1.7; margin-top: 16px; padding: 10px 12px; background: var(--brand-light); border-radius: var(--radius-sm); }
.quote-history { margin-top: 22px; }
.quote-history h3 { font-size: 15px; margin-bottom: 10px; }
.quote-history-list { display: flex; flex-direction: column; gap: 8px; }
.qh-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 13px; }
.qh-item .qh-meta { font-size: 11px; color: var(--text-sub); margin-top: 4px; }

/* 每日一句分享图 */
.share-panel { max-width: 420px; }
.share-canvas-wrap { display: flex; justify-content: center; margin: 12px 0 4px; }
#share-canvas { width: 100%; max-width: 300px; height: auto; border-radius: 14px; box-shadow: 0 10px 28px rgba(43,35,80,.28); }
.share-tip { font-size: 12px; color: var(--text-sub); text-align: center; margin: 0 0 14px; line-height: 1.6; }

/* 新手引导 */
.onboard-panel { max-width: 400px; text-align: center; }
.ob-illu {
  width: 72px; height: 72px; border-radius: 22px; margin: 4px auto 16px;
  display: grid; place-items: center; font-size: 38px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: 0 8px 22px rgba(79,70,229,.30);
}
.ob-title { font-size: 19px; margin-bottom: 10px; }
.ob-text { font-size: 14px; color: var(--text-sub); line-height: 1.8; min-height: 76px; }
.ob-dots { display: flex; gap: 7px; justify-content: center; margin: 18px 0 4px; }
.ob-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: .2s; }
.ob-dot.active { background: var(--brand); width: 22px; border-radius: 99px; }
.ob-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; }
.ob-actions button { border: none; background: var(--brand); color: #fff; padding: 10px 22px; border-radius: var(--radius-sm); font-size: 14px; cursor: pointer; transition: .15s; }
.ob-actions button.ghost { background: var(--bg); color: var(--text-sub); }
.ob-actions button:hover:not(.ghost) { background: var(--brand-2); }

/* 数据统计（二期 · 成长看板） */
.trend-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); margin-top: 16px; }
.trend-card h3 { font-size: 15px; margin-bottom: 18px; }
.trend-bars { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; height: 180px; }
.trend-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.trend-val { font-size: 12px; color: var(--brand); font-weight: 600; font-variant-numeric: tabular-nums; min-height: 14px; }
.trend-bar-wrap { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.trend-bar { width: 62%; max-width: 38px; background: linear-gradient(180deg, var(--brand), var(--brand-2)); border-radius: 8px 8px 0 0; min-height: 3px; transition: height .3s; }
.trend-label { font-size: 11px; color: var(--text-sub); }

/* 打卡（二期 · 习惯养成） */
.ck-today-box { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 18px; }
.ck-today-btn { border: 1px solid var(--brand); background: var(--brand-light); color: var(--brand); padding: 9px 16px; border-radius: 20px; font-size: 13px; cursor: pointer; transition: .15s; font-weight: 600; }
.ck-today-btn:hover { background: var(--brand); color: #fff; }
.ck-all-done { width: 100%; background: #E6F7EE; color: var(--success); padding: 12px 16px; border-radius: var(--radius-sm); font-size: 13px; text-align: center; }
.ck-heat-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); margin-bottom: 18px; }
.ck-heat-card h3 { font-size: 14px; margin-bottom: 14px; }
.ck-heat { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 4px; }
.ck-week-col { display: flex; flex-direction: column; gap: 4px; }
.ck-heat-cell { width: 13px; height: 13px; border-radius: 3px; background: var(--bg); flex-shrink: 0; }
.ck-heat-cell.on { background: var(--brand); }
.ck-heat-cell.today { box-shadow: 0 0 0 2px var(--accent); }
.ck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.ck-card { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; }
.ck-top { display: flex; align-items: center; gap: 12px; }
.ck-emoji { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: var(--brand-light); flex-shrink: 0; }
.ck-info { min-width: 0; }
.ck-name { font-size: 15px; font-weight: 600; }
.ck-sub { font-size: 12px; color: var(--text-sub); margin-top: 3px; }
.ck-sub b { color: var(--brand); }
.ck-week { display: flex; gap: 6px; }
.ck-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line); }
.ck-dot.on { background: var(--success); border-color: var(--success); }
.ck-btn { align-self: flex-start; border: 1px solid var(--brand); background: transparent; color: var(--brand); padding: 8px 18px; border-radius: 20px; font-size: 13px; cursor: pointer; transition: .15s; font-weight: 600; }
.ck-btn:hover { background: var(--brand); color: #fff; }
.ck-btn.done { background: var(--success); border-color: var(--success); color: #fff; }

/* 会员体系（二期 · 成长值 + 等级） */
.mb-card {
  display: flex; align-items: center; gap: 18px; background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-lg); color: #fff;
}
.mb-icon { width: 64px; height: 64px; border-radius: 18px; background: rgba(255,255,255,.18); display: grid; place-items: center; font-size: 32px; flex-shrink: 0; }
.mb-info { flex: 1; min-width: 0; }
.mb-tier { font-size: 18px; font-weight: 700; }
.mb-points { font-size: 13px; opacity: .9; margin-top: 2px; }
.mb-points b { font-size: 16px; }
.mb-progress { height: 8px; background: rgba(255,255,255,.28); border-radius: 99px; overflow: hidden; margin: 12px 0 8px; }
.mb-progress-fill { height: 100%; background: #fff; border-radius: 99px; transition: width .3s; }
.mb-next { font-size: 12px; opacity: .85; }
.mb-source-card, .mb-benefit-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); margin-top: 16px; }
.mb-source-card h3, .mb-benefit-card h3 { font-size: 15px; margin-bottom: 14px; }
.mb-source { display: flex; flex-direction: column; gap: 10px; }
.mb-src-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.mb-src-row:last-child { border-bottom: none; }
.mb-src-val { color: var(--brand); font-weight: 600; }
.mb-src-val i { font-style: normal; color: var(--text-sub); font-weight: 400; font-size: 11px; margin-left: 2px; }
.mb-benefits { display: flex; flex-direction: column; gap: 10px; }
.mb-benefit { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.mb-benefit.owned { background: #E6F7EE; border-color: #BBE9D2; }
.mb-benefit.locked { background: var(--bg); }
.mb-benefit-ico { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; flex-shrink: 0; }
.mb-benefit.owned .mb-benefit-ico { background: var(--success); color: #fff; }
.mb-benefit.locked .mb-benefit-ico { background: var(--line); color: var(--text-sub); }
.mb-benefit-text { flex: 1; min-width: 0; }
.mb-benefit-name { font-size: 14px; font-weight: 600; }
.mb-benefit-desc { font-size: 12px; color: var(--text-sub); margin-top: 2px; }
.mb-benefit-tag { font-size: 11px; padding: 3px 10px; border-radius: 99px; flex-shrink: 0; }
.mb-benefit.owned .mb-benefit-tag { background: var(--success); color: #fff; }
.mb-benefit.locked .mb-benefit-tag { background: var(--line); color: var(--text-sub); }
.mb-note { font-size: 11px; color: var(--text-sub); line-height: 1.7; margin-top: 14px; padding: 10px 12px; background: var(--brand-light); border-radius: var(--radius-sm); }

/* 邀请 */
.invite-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); text-align: center; max-width: 520px; }
.invite-card h2 { font-size: 19px; margin-bottom: 8px; }
.invite-card p { font-size: 14px; color: var(--text-sub); }
.invite-card b { color: var(--accent); }
.invite-code { display: flex; gap: 8px; justify-content: center; margin: 20px 0; }
.invite-code span { background: var(--brand-light); color: var(--brand); font-weight: 700; letter-spacing: 1px; padding: 10px 18px; border-radius: var(--radius-sm); font-size: 15px; }
.invite-share-row { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }
.invite-share-row button { padding: 10px 18px; }

/* 抽屉遮罩（移动端） */
.drawer-mask { position: fixed; inset: 0; background: rgba(8,10,16,.5); z-index: 30; opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
.drawer-mask.show { opacity: 1; visibility: visible; }

/* Tabbar（移动端） */
.tabbar { display: none; }

/* Toast */
.toast {
  position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: #1F2430; color: #fff; padding: 11px 20px; border-radius: 24px; font-size: 13px;
  opacity: 0; pointer-events: none; transition: .25s; z-index: 100;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 悬浮添加按钮 */
.fab-add {
  position: fixed; right: 24px; bottom: 28px; z-index: 40;
  width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--brand-grad); color: #fff; font-size: 30px; line-height: 1; font-weight: 300;
  box-shadow: 0 8px 24px rgba(20, 184, 166, 0.45), var(--shadow-mid);
  display: grid; place-items: center;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), filter .15s var(--ease);
  animation: fab-in .25s var(--ease);
}
.fab-add:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 12px 30px rgba(20, 184, 166, 0.55), var(--shadow-lg); filter: brightness(1.05); }
.fab-add:active { transform: scale(.94); }
@keyframes fab-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@media (max-width: 760px) {
  .fab-add { right: 16px; bottom: 76px; width: 52px; height: 52px; font-size: 28px; }
}

/* 响应式 */
@media (max-width: 760px) {
  /* 侧栏变成抽屉（脱离文档流），只剩主内容一列；外壳的左右留白也收掉，
     抽屉与内容都铺满，改由 .topbar / .view 自己的 16px 留白控制观感。 */
  .layout { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .content { grid-column: 1; }
  .topbar { padding-left: 16px; padding-right: 16px; }
  .sidebar {
    position: fixed; top: 58px; left: 0; bottom: 0; width: 244px; z-index: 40;
    transform: translateX(-100%); transition: transform .25s var(--ease);
    background: var(--surface); border-right: 1px solid var(--line); box-shadow: var(--shadow-lg);
    overflow-y: auto;
    /* 桌面那套「按内容高 + 吸顶」在抽屉里不适用：抽屉要铺满整屏 */
    max-height: none; align-self: stretch; border-radius: 0;
  }
  .sidebar.open { transform: none; }
  #btn-menu { display: block; font-size: 20px; }
  .view { padding: 16px; }
  .mine-vip-row { grid-template-columns: 1fr; }
  .tabbar {
    display: flex; position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--line);
    justify-content: space-around; padding: 8px 0; z-index: 20;
  }
  .tab { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: var(--text-sub); text-decoration: none; }
  .tab span { font-size: 18px; }
  .tab.active { color: var(--brand); }
  .brand-sub { display: none; }
}

/* 一起打卡（二期 · 社交玩法） */
.fs-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.fs-badge { font-size: 12px; padding: 5px 12px; border-radius: 99px; background: var(--bg); color: var(--text-sub); border: 1px solid var(--line); }
.fs-badge.earned { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; border-color: transparent; font-weight: 600; box-shadow: 0 4px 14px rgba(79,70,229,.28); }

.fs-panel { animation: fade .2s ease; }
.fs-action-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.fs-action-row input[type="text"] { flex: 1; min-width: 160px; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 14px; outline: none; background: var(--surface); font-family: inherit; }
.fs-action-row input[type="text"]:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-light); }
.fs-action-row input[type="number"] { width: 64px; padding: 11px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 14px; outline: none; background: var(--surface); font-family: inherit; text-align: center; }
.fs-action-row button { border: none; background: var(--brand); color: #fff; padding: 0 18px; height: 42px; border-radius: var(--radius-sm); font-size: 14px; cursor: pointer; transition: .15s; }
.fs-action-row button:hover { background: var(--brand-2); }
.fs-or { color: var(--text-sub); font-size: 13px; }
.fs-unit { color: var(--text-sub); font-size: 13px; }
.fs-pk-mode { display: flex; gap: 6px; }
.chip.mini { padding: 5px 12px; font-size: 12px; }

.fs-sub-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); margin-top: 16px; }
.fs-sub-card h3 { font-size: 14px; margin-bottom: 12px; }

.fs-team-card { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.fs-team-head { display: flex; align-items: center; gap: 12px; }
.fs-team-emoji { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; background: var(--brand-light); flex-shrink: 0; }
.fs-team-info { flex: 1; min-width: 0; }
.fs-team-name { font-size: 16px; font-weight: 700; }
.fs-team-sub { font-size: 12px; color: var(--text-sub); margin-top: 3px; }
.fs-team-sub b { color: var(--brand); letter-spacing: 1px; }
.fs-team-done { font-size: 12px; font-weight: 600; color: var(--success); background: #E6F7EE; padding: 4px 10px; border-radius: 99px; flex-shrink: 0; }
.fs-members { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
.fs-member-top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 5px; }
.fs-member-name { font-weight: 600; }
.fs-member-val { color: var(--text-sub); font-variant-numeric: tabular-nums; }
.fs-team-actions { display: flex; gap: 10px; }
.fs-team-actions button { border: 1px solid var(--line); background: var(--bg); color: var(--text-sub); padding: 8px 16px; border-radius: var(--radius-sm); font-size: 13px; cursor: pointer; transition: .15s; }
.fs-team-actions button:hover { border-color: var(--brand); color: var(--brand); }
.fs-team-actions button.danger { color: var(--danger); border-color: #FBD5D5; }
.fs-team-actions button.danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

.fs-rank-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--bg); margin-bottom: 8px; }
.fs-rank-row.me { background: var(--brand-light); border: 1px solid var(--brand); }
.fs-rank-row.top { box-shadow: inset 0 0 0 1px rgba(245,158,11,.35); }
.fs-rank-no { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: var(--surface); color: var(--text-sub); flex-shrink: 0; }
.fs-rank-row.me .fs-rank-no { background: var(--brand); color: #fff; }
.fs-rank-name { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-rank-val { font-size: 13px; color: var(--brand); font-weight: 600; font-variant-numeric: tabular-nums; flex-shrink: 0; }

.fs-pk-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); margin-bottom: 14px; }
.fs-pk-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.fs-pk-title { font-size: 15px; font-weight: 700; }
.fs-pk-sub { font-size: 12px; color: var(--text-sub); }
.fs-pk-players { display: flex; flex-direction: column; gap: 10px; }
.fs-pk-player.win .fs-member-name { color: var(--success); font-weight: 700; }
.fs-pk-result { margin-top: 14px; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; text-align: center; }
.fs-pk-result.win { background: #E6F7EE; color: var(--success); }
.fs-pk-result.lose { background: var(--bg); color: var(--text-sub); }
.fs-pk-status { margin-top: 14px; font-size: 13px; color: var(--brand); text-align: center; }

.fs-rank-block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); margin-top: 14px; }
.fs-rank-block h3 { font-size: 15px; margin-bottom: 12px; }
.fs-rank-share { margin-top: 14px; }
.fs-rank-share button { border: 1px solid var(--line); background: var(--bg); color: var(--text-sub); padding: 8px 18px; border-radius: var(--radius-sm); font-size: 13px; cursor: pointer; transition: .15s; }
.fs-rank-share button:hover { border-color: var(--brand); color: var(--brand); }

.fs-note { font-size: 11px; color: var(--text-sub); line-height: 1.7; margin-top: 18px; padding: 12px 14px; background: var(--brand-light); border-radius: var(--radius-sm); }

@media (max-width: 760px) {
  .fs-action-row { gap: 6px; }
  .fs-action-row input[type="text"] { min-width: 120px; }
}

/* 社区（二期 · 社区功能深化） */
.cm-panel { animation: fade .2s ease; }
.cm-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.cm-topic { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; transition: .15s; }
.cm-topic:hover { box-shadow: var(--shadow-lg); }
.cm-topic-top { display: flex; align-items: center; gap: 12px; }
.cm-topic-emoji { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: var(--brand-light); flex-shrink: 0; }
.cm-topic-info { flex: 1; min-width: 0; }
.cm-topic-name { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.cm-official { font-size: 10px; padding: 1px 7px; border-radius: 8px; background: var(--accent-light); color: var(--accent); font-weight: 700; }
.cm-topic-sub { font-size: 12px; color: var(--text-sub); margin-top: 3px; }
.cm-follow { border: 1px solid var(--brand); background: transparent; color: var(--brand); padding: 6px 14px; border-radius: 20px; font-size: 12px; cursor: pointer; transition: .15s; flex-shrink: 0; }
.cm-follow.on { background: var(--brand); color: #fff; }
.cm-topic-desc { font-size: 12px; color: var(--text-sub); line-height: 1.6; }
.cm-topic-open { align-self: flex-start; border: none; background: var(--brand-light); color: var(--brand); padding: 7px 14px; border-radius: 20px; font-size: 13px; cursor: pointer; transition: .15s; font-weight: 600; }
.cm-topic-open:hover { background: var(--brand); color: #fff; }

.cm-posts, .cm-feed { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.cm-post { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; }
.cm-post-top { display: flex; align-items: center; gap: 8px; font-size: 12px; flex-wrap: wrap; }
.cm-post-author { font-weight: 600; }
.cm-post-time { color: var(--text-sub); }
.cm-essence { font-size: 10px; padding: 1px 7px; border-radius: 8px; background: #FFF7E6; color: var(--accent); font-weight: 700; }
.cm-post-topic { font-size: 11px; color: var(--brand); background: var(--brand-light); padding: 1px 8px; border-radius: 8px; }
.cm-post-content { font-size: 14px; line-height: 1.7; margin: 8px 0 10px; word-break: break-word; }
.cm-post-actions { display: flex; gap: 10px; }
.cm-like { border: 1px solid var(--line); background: var(--surface); padding: 5px 12px; border-radius: 20px; font-size: 12px; cursor: pointer; transition: .15s; color: var(--text-sub); }
.cm-like.on { background: #FFF0F0; border-color: var(--danger); color: var(--danger); font-weight: 600; }
.cm-note { font-size: 11px; color: var(--text-sub); line-height: 1.7; margin-top: 18px; padding: 12px 14px; background: var(--brand-light); border-radius: var(--radius-sm); }

/* 头像可点进「我的」 */
.avatar { cursor: pointer; }

/* 侧栏分组 */
.nav-group { font-size: 11px; font-weight: 600; color: var(--text-sub); padding: 14px 14px 4px; letter-spacing: .5px; }

/* 我的页（聚合页） */
.mine-profile {
  display: flex; align-items: center; gap: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow); margin-bottom: 16px;
}
.mine-avatar {
  width: 60px; height: 60px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff;
  display: grid; place-items: center; font-size: 26px; font-weight: 700;
}
.mine-meta { flex: 1; min-width: 0; }
.mine-name-row { display: flex; align-items: center; gap: 12px; }
.mine-name { font-size: 18px; font-weight: 700; }
.mine-edit { border: 1px solid var(--line); background: var(--bg); color: var(--text-sub); padding: 4px 12px; border-radius: 20px; font-size: 12px; cursor: pointer; transition: .15s; }
.mine-edit:hover { border-color: var(--brand); color: var(--brand); }
.mine-sign { font-size: 13px; color: var(--text-sub); margin-top: 6px; }

/* 会员 / 能量 双卡 */
.mine-vip-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.mine-vip-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--brand-grad); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow-mid);
  position: relative; overflow: hidden; transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}
.mine-vip-card::after {
  content: ""; position: absolute; right: -22px; top: -22px; width: 92px; height: 92px;
  background: rgba(255,255,255,.12); border-radius: 50%; pointer-events: none;
}
.mine-vip-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.mv-ico { font-size: 26px; width: 46px; height: 46px; border-radius: 14px; background: rgba(255,255,255,.18); display: grid; place-items: center; flex-shrink: 0; z-index: 1; }
.mv-info { flex: 1; min-width: 0; z-index: 1; color: #fff; }
.mv-title { font-size: 15px; font-weight: 700; }
.mv-title b { font-size: 18px; font-variant-numeric: tabular-nums; }
.mv-sub { font-size: 12px; opacity: .85; margin-top: 3px; }
.mv-btn {
  border: none; background: #fff; color: var(--brand-2); font-weight: 600;
  padding: 7px 14px; border-radius: 20px; font-size: 12px; cursor: pointer;
  flex-shrink: 0; z-index: 1; transition: .15s;
}
.mv-btn:hover { filter: brightness(.95); transform: translateY(-1px); }
/* 能量卡：中性描边风，与会员卡形成节奏 */
.mine-vip-card.mine-vip-energy { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.mine-vip-card.mine-vip-energy .mv-info { color: var(--text); }
.mine-vip-card.mine-vip-energy .mv-sub { color: var(--text-sub); }
.mine-vip-card.mine-vip-energy .mv-ico { background: var(--brand-light); }
.mine-vip-card.mine-vip-energy .mv-btn { background: var(--brand-grad); color: #fff; }

/* 限时通知条 */
.mine-notice {
  display: flex; align-items: center; gap: 10px;
  background: var(--accent-light); border: 1px solid rgba(245,158,11,.28);
  border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 16px; font-size: 13px;
}
.mn-tag { background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 8px; flex-shrink: 0; }
.mn-text { flex: 1; min-width: 0; color: var(--text); }
.mn-text b { color: var(--accent); }
.mn-btn { border: none; background: var(--accent); color: #fff; padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; cursor: pointer; flex-shrink: 0; transition: .15s; }
.mn-btn:hover { filter: brightness(1.06); }

.mine-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); margin-bottom: 16px; }
.mine-card h3 { font-size: 15px; margin-bottom: 12px; }
.mine-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.mine-badge { font-size: 12px; padding: 6px 12px; border-radius: 20px; background: var(--brand-light); color: var(--brand); font-weight: 600; }
.mine-badge.empty { background: var(--bg); color: var(--text-sub); font-weight: 400; }
.mine-setting { display: flex; align-items: center; justify-content: space-between; padding: 13px 4px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 14px; transition: .15s; }
.mine-setting:last-child { border-bottom: none; }
.mine-setting:hover { color: var(--brand); }
.mine-setting i { font-style: normal; color: var(--text-sub); font-size: 13px; }
.mine-feat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 10px; }
.mine-feat { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 4px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; transition: .15s; }
.mine-feat:hover { border-color: var(--brand); background: var(--brand-light); transform: translateY(-1px); }
.mine-feat .mf-ico { font-size: var(--ico-2-fs); line-height: 1; width: var(--ico-2); height: var(--ico-2); border-radius: 12px; background: rgba(20, 184, 166, 0.10); display: grid; place-items: center; transition: background .15s var(--ease); }
.mine-feat:hover .mf-ico { background: rgba(20, 184, 166, 0.24); }
.mine-feat .mf-name { font-size: 12px; color: var(--text); text-align: center; }

/* 全部功能：隐藏提示 + 自定义底部导航入口 */
.mine-feats-tip { display: block; width: 100%; margin-bottom: 10px; padding: 8px 10px; text-align: left; font-family: inherit; font-size: 12px; color: var(--text-sub); background: var(--bg); border: 1px dashed var(--line); border-radius: var(--radius-xs); cursor: pointer; transition: .15s; }
.mine-feats-tip[hidden] { display: none; }
.mine-feats-tip:hover { color: var(--brand); border-color: var(--brand); }
.mine-feats-tip.expanded { border-style: solid; border-color: var(--brand); color: var(--brand); }
.mine-feat-setting { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 12px 14px; background: transparent; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); cursor: pointer; transition: .15s; }
.mine-feat-setting:hover { border-color: var(--brand); background: var(--brand-light); }
.mine-feat-setting .mfs-ico { width: var(--ico-2); height: var(--ico-2); border-radius: 12px; display: grid; place-items: center; font-size: var(--ico-2-fs); background: rgba(20, 184, 166, 0.10); flex-shrink: 0; }
.mine-feat-setting .mfs-text { flex: 1; font-size: 13px; color: var(--text); }
.mine-feat-setting i { font-style: normal; font-size: 12px; color: var(--text-sub); }

/* 「我的」页卡片小标签（演示） */
.mc-tag { font-size: 10px; font-weight: 600; color: var(--accent); background: var(--accent-light); padding: 2px 7px; border-radius: 999px; vertical-align: middle; margin-left: 4px; }
.mc-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; user-select: none; transition: color .15s var(--ease); }
.mc-toggle:hover { color: var(--accent); }
.mc-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.mc-arrow { font-style: normal; font-size: 12px; font-weight: 400; color: var(--text-mute); flex-shrink: 0; }
.mine-phase3.is-collapsed h3 { margin-bottom: 0; }
.mine-feat-grid[hidden] { display: none; }

/* ===== 三期模块 · 演示版样式 ===== */
.phase3-badge { display: inline-block; font-size: 11px; font-weight: 600; color: var(--brand); background: var(--brand-light); padding: 2px 9px; border-radius: 999px; margin-left: 6px; vertical-align: middle; }

/* 演示卡片网格（内容付费 / 电商） */
.demo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 16px; }
.demo-card { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; box-shadow: var(--shadow); }
.demo-emoji { font-size: 30px; width: 52px; height: 52px; border-radius: 14px; background: var(--brand-light); display: grid; place-items: center; flex: none; }
.demo-emoji.sm { font-size: 22px; width: 40px; height: 40px; }
.demo-body { flex: 1; min-width: 0; }
.demo-title { font-size: 14px; font-weight: 600; color: var(--text); }
.demo-sub { font-size: 12px; color: var(--text-sub); margin-top: 3px; }
.demo-buy { flex: none; border: none; background: var(--brand-grad); color: #fff; font-weight: 600; font-size: 13px; padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: .15s; }
.demo-buy:hover { filter: brightness(1.06); transform: translateY(-1px); }
.demo-buy.ghost { background: transparent; color: var(--brand); border: 1px solid var(--brand); }

/* 广告双栏 */
.ad-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.ad-col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px; box-shadow: var(--shadow); }
.ad-col h3 { font-size: 15px; margin-bottom: 12px; color: var(--text); }
.ad-item { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-top: 1px solid var(--line); }
.ad-item:first-child { border-top: none; padding-top: 0; }
.ad-t { font-size: 14px; font-weight: 600; color: var(--text); }
.ad-s { font-size: 12px; color: var(--text-sub); margin-bottom: 8px; }

/* 列表型（开放平台 / 多端） */
.demo-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.demo-row { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px 14px; box-shadow: var(--shadow); }
.demo-status { flex: none; font-size: 11px; font-weight: 600; color: var(--text-mute); background: var(--surface-2); padding: 4px 10px; border-radius: 999px; }
.demo-status.on { color: #fff; background: var(--success); }

/* AI 助手 */
.ai-box { margin-top: 16px; display: flex; flex-direction: column; gap: 14px; }
.ai-suggestions { display: flex; flex-direction: column; gap: 8px; }
.ai-sug { font-size: 13px; color: var(--text); background: var(--brand-light); border-left: 3px solid var(--brand); padding: 10px 12px; border-radius: 8px; }
.ai-chat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px; box-shadow: var(--shadow); min-height: 64px; }
.ai-msg { font-size: 14px; line-height: 1.7; color: var(--text); }
.ai-think { color: var(--text-sub); font-style: italic; }
.ai-msg-bot { color: var(--text); }
.ai-quick { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 760px) {
  .mine-lv-row { grid-template-columns: 1fr; }
  .ad-cols { grid-template-columns: 1fr; }
}

/* ===== 底部栏设置弹窗 ===== */
.tabbar-settings-panel { max-width: 460px; }
.tabbar-settings-status {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0 12px;
  padding: 10px 14px;
  background: var(--brand-light);
  border-radius: var(--radius-sm);
}
.tabbar-settings-status .tbs-count {
  font-size: 14px; font-weight: 700; color: var(--brand);
  background: rgba(255, 255, 255, 0.06);
  padding: 4px 12px; border-radius: 999px;
}
.tabbar-settings-status .tbs-count.full {
  background: var(--danger); color: #fff;
}
.tabbar-settings-status .tbs-hint {
  font-size: 12px; color: var(--text-sub);
}
.tabbar-settings-section { margin-top: 14px; }
.tbs-section-head {
  font-size: 12px; font-weight: 600; color: var(--text-sub);
  margin-bottom: 8px; letter-spacing: 0.4px;
}
.tbs-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.tbs-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  transition: border-color .15s;
}
.tbs-item:hover { border-color: var(--brand); }
.tbs-item.disabled { opacity: 0.45; pointer-events: none; }
.tbs-ico {
  width: 32px; height: 32px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--brand-light);
  font-size: 16px;
  flex: none;
}
.tbs-label { flex: 1; font-size: 14px; color: var(--text); }
.tbs-ctrls { display: flex; gap: 6px; flex: none; }
.tbs-btn {
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text);
  width: 30px; height: 30px;
  border-radius: 8px;
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  transition: .15s;
  display: grid; place-items: center;
}
.tbs-btn:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.tbs-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.tbs-add { background: var(--brand-light); border-color: var(--brand); color: var(--brand); }
.tbs-add:hover:not(:disabled) { background: var(--brand); color: #fff; }
.tbs-remove:hover:not(:disabled) { background: var(--danger); border-color: var(--danger); color: #fff; }
.tbs-empty {
  text-align: center; font-size: 13px; color: var(--text-mute);
  padding: 22px 0; background: var(--surface-2); border-radius: var(--radius-sm);
}
.tbs-actions { margin-top: 18px; }

/* ===== 亮色主题（可选回退，默认深色） ===== */
body.light {
  --brand: #14B8A6;
  --brand-2: #0D9488;
  --brand-light: rgba(20, 184, 166, 0.16);
  --brand-grad: linear-gradient(135deg, #14B8A6 0%, #0D9488 100%);
  --accent: #F59E0B;
  --accent-light: #FFF7E6;
  --bg: #F3F4FB;
  --bg-grad: linear-gradient(180deg, #F8F9FD 0%, #EFF1F8 100%);
  --surface: #FFFFFF;
  --surface-2: #FAFBFE;
  --card: #FFFFFF;   /* 见 :root 里的说明；亮色下必须跟着覆盖，否则卡片会是深色 */
  --text: #1C2230;
  --text-sub: #6B7280;
  --text-mute: #9AA1B0;
  --line: #ECEEF3;
  --line-strong: #E1E4EC;
  --success: #10B981;
  --danger: #EF4444;
  --shadow: 0 2px 10px rgba(28, 34, 48, 0.05);
  --shadow-mid: 0 6px 22px rgba(28, 34, 48, 0.07);
  --shadow-lg: 0 16px 48px rgba(28, 34, 48, 0.12);
}
body.light { color-scheme: light; --ph: #6F7684; background: var(--bg-grad); background-attachment: fixed; color: var(--text); }
body.light .topbar { background: var(--surface); border-color: var(--line); }
body.light .sidebar { background: var(--surface); border-color: var(--line); }
body.light .nav-item:hover { background: var(--bg); }
body.light .quick-add input, body.light .tl-input, body.light textarea, body.light input[type="text"] { background: var(--surface); }
body.light .modal-mask { background: rgba(20, 24, 38, 0.45); }
body.light .chip { background: var(--surface); color: var(--text-sub); border-color: var(--line); }
body.light .mine-feat { background: var(--bg); }

/* ===== 通用卡片浮起（亮/暗通用） ===== */
.todo-item, .tl-card, .mine-card, .mine-lv-card, .mine-profile, .stat, .calendar {
  transition: box-shadow .2s var(--ease), transform .2s var(--ease), border-color .15s var(--ease);
}
.todo-item:hover, .tl-card:hover, .mine-card:hover, .mine-lv-card:hover, .mine-profile:hover {
  box-shadow: var(--shadow-lg); transform: translateY(-2px); border-color: var(--line-strong);
}

/* ===== 滚动条 & 选区 ===== */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-mute); background-clip: content-box; }
::selection { background: rgba(20, 184, 166, 0.22); }

/* ===== 标题层级更精致 ===== */
.view-head h1 { letter-spacing: -0.3px; }
.mine-name, .mine-lv-name { letter-spacing: -0.2px; }

/* ===== 刘海屏 / 手势条：H5 是「装到桌面当 App 用」的，顶部状态栏与底部手势条必须让开 =====
   之前一个字没写，iPhone 上顶栏会被状态栏压住、底部 Tabbar 会被手势条盖住一截。
   env(...) 在不支持的浏览器上取到兜底值 0px，桌面端观感不变。 */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
.topbar {
  height: calc(58px + var(--safe-top));
  /* 顶栏是 sticky 的，安全区落在它内部的上内边距上，内容才不会被状态栏压住。
     左右内边距为 0：顶栏是 .layout（主内容容器）的整行，它的左右边界就是容器
     内容盒的左右边界 —— 左边与侧栏同一条边，右边贴着浏览器最右边。
     对齐由结构保证，这里不再写任何 calc。 */
  padding: var(--safe-top) 0 0;
}
.toast { bottom: calc(30px + var(--safe-bottom)); }
@media (max-width: 760px) {
  /* 抽屉从顶栏下面开始滑出：顶栏变高了，这里的起点要跟着算 */
  .sidebar { top: calc(58px + var(--safe-top)); }
  .tabbar { padding-bottom: calc(8px + var(--safe-bottom)); }
  .fab-add { bottom: calc(76px + var(--safe-bottom)); }
}

/* ===== 交互细节：让它更像 App、少一点浏览器的痕迹 ===== */
/* 移动端点按时的灰色高亮块：本项目的按钮都有自己的 :active 反馈，这个系统灰块只会显得脏 */
html { -webkit-tap-highlight-color: transparent; }
/* 页面级下拉刷新 / 边缘橡皮筋：单页应用里滚到底再拉会整页弹动，观感很「网页」 */
body { overscroll-behavior-y: none; }
/* 键盘操作时的焦点环（鼠标点击不出现）：没有它，用键盘根本看不出焦点在哪 */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
/* 系统开了「减弱动态效果」就不要再飘：卡片浮起、淡入、Toast 位移全部关掉 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== 程迹 · 旅程印迹 ===== */
.trace-summary { display: flex; gap: 10px; margin: 14px 0 6px; flex-wrap: wrap; }
.ts-item { flex: 1 1 0; min-width: 84px; background: var(--card); border: 1px solid var(--line); border-radius: calc(var(--radius) - 6px); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.ts-item b { font-size: 22px; color: var(--brand); font-weight: 800; letter-spacing: -0.5px; }
.ts-item span { font-size: 12px; color: var(--text-mute); }

.trace-list { display: flex; flex-direction: column; gap: 2px; padding: 8px 2px 24px; }
.trace-day { font-size: 12px; color: var(--text-mute); font-weight: 700; margin: 14px 4px 6px; letter-spacing: .5px; }
.trace-item { display: flex; gap: 12px; align-items: flex-start; padding: 8px 6px; border-radius: 12px; cursor: pointer; transition: background .15s var(--ease); }
.trace-item:hover { background: var(--card); }
.trace-dot { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-size: 16px; color: #fff; box-shadow: var(--shadow); }
.trace-body { flex: 1 1 auto; min-width: 0; padding-top: 2px; }
.trace-text { font-size: 14px; color: var(--text); line-height: 1.5; }
.trace-time { font-size: 11px; color: var(--text-mute); margin-top: 2px; }

/* ===== 补全缺失样式（2026-09-07）=====
   代码里用到但此前 CSS 未定义的类，导致对应区块塌成无样式的裸容器 */
.fs-rank-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.sync-account { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.mb-src-name { color: var(--text); font-weight: 500; }
.mine-vip-member { border-color: var(--brand); background: var(--brand-light); }
.tbs-list-active, .tbs-list-pool { gap: 8px; }
.tbs-item-active { border-color: var(--brand); background: var(--brand-light); }
.tbs-item-pool { background: var(--surface-2); }
.tbs-item-pool .tbs-ico { background: var(--surface); }
.tbs-up, .tbs-down { font-size: 13px; }
.fs-member { padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }

/* ===== 版本更新提示条（v1.12）=====
   打开时比对线上 version.json，发现新版弹出，点刷新即可加载最新包 */
.update-banner {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%) translateY(16px);
  display: flex; align-items: center; gap: 11px;
  max-width: min(460px, calc(100vw - 32px));
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow); border-radius: 14px; padding: 11px 12px 11px 14px;
  z-index: 120; opacity: 0; pointer-events: none; transition: .25s var(--ease);
}
.update-banner.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.update-banner-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px var(--brand-light); }
.update-banner-body { flex: 1 1 auto; min-width: 0; }
.update-banner-title { font-size: 13px; font-weight: 600; color: var(--text); }
.update-banner-title span { color: var(--brand); }
.update-banner-sub { font-size: 11px; color: var(--text-sub); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.update-banner-btn { flex: none; border: none; background: var(--brand-grad); color: #fff; font-weight: 600; font-size: 12px; padding: 7px 14px; border-radius: 999px; cursor: pointer; transition: .15s; }
.update-banner-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.update-banner-close { flex: none; border: none; background: transparent; color: var(--text-mute); font-size: 18px; line-height: 1; width: 24px; height: 24px; border-radius: 8px; cursor: pointer; }
.update-banner-close:hover { background: var(--surface-2); color: var(--text); }

/* 「我的」页底部版本行 */
.mine-version { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding: 10px 4px 0; border-top: 1px solid var(--line); }
.mine-version-txt { font-size: 12px; color: var(--text-mute); }
.mine-version-btn { border: 1px solid var(--line); background: var(--surface); color: var(--text-sub); font-size: 12px; padding: 5px 12px; border-radius: 999px; cursor: pointer; transition: .15s; }
.mine-version-btn:hover { border-color: var(--brand); color: var(--brand); }
.mine-version-btn:disabled { opacity: .6; cursor: default; }

/* ===== 2026-09-23：头像 / 每日一句配图 / 资料与关于弹层 ===== */

/* 头像：有图用图，没图用昵称首字。图片要圆形裁切，所以容器得 overflow: hidden。
   图的来源是同步字段 mine.avatar（源站相对路径 /uploads/avatars/xxx.jpg），
   手机端设置的头像这里直接显示。 */
.avatar, .mine-avatar { overflow: hidden; }
.avatar img, .mine-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 每日一句配图（与手机端同版式：文字在上、图片在下） */
.quote-image { margin: 18px auto 0; max-width: 320px; }
.quote-image img { width: 100%; display: block; border-radius: var(--radius-sm); box-shadow: var(--shadow-mid); }
.quote-origin { font-size: 11px; color: var(--text-mute); margin-top: 6px; }

/* 个人资料编辑（昵称 / 签名）。原来是两个 prompt() 弹窗，长得跟站点毫无关系 */
.pe-head { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; flex: 1; min-width: 0; }
.pe-avatar {
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff;
  display: grid; place-items: center; font-size: 26px; font-weight: 700;
}
.pe-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pe-head-txt { min-width: 0; }
.pe-head-txt b { font-size: 16px; }
.pe-head-txt p { font-size: 12px; color: var(--text-sub); margin-top: 4px; line-height: 1.5; }
.pe-count { font-size: 11px; color: var(--text-mute); text-align: right; margin-top: 4px; }

/* 关于我们 / 协议正文 */
.about-qr { display: grid; place-items: center; gap: 9px; margin: 2px 0 16px; }
/* 必须显式写 [hidden] 规则：上面那条 .about-qr 的 display: grid 会盖掉浏览器默认的
   [hidden]{display:none}（类选择器优先级更高），于是 JS 里 box.hidden = true 根本藏不住 ——
   没配二维码时会露出一个 150×150 的空白框，看着像坏了。同 .mine-feat-grid[hidden]。 */
.about-qr[hidden] { display: none; }
.about-qr-img { width: 150px; height: 150px; padding: 5px; border-radius: 6px; background: #fff; }
.about-qr-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.about-qr-cap { font-size: 12px; color: var(--text-sub); }
.about-rows { border-top: 1px solid var(--line); }
.about-rows .mine-setting { gap: 10px; }
.about-rows .mine-setting span { display: flex; align-items: center; gap: 10px; min-width: 0; }
.about-rows .mine-setting i { max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legal-body { font-size: 13px; line-height: 1.85; color: var(--text-sub); max-height: 58vh; overflow-y: auto; }
.legal-body h4 { font-size: 14px; color: var(--text); margin: 16px 0 6px; }
.legal-body p { margin-bottom: 10px; white-space: pre-wrap; }
.legal-body .faq-q { font-size: 13px; color: var(--text); font-weight: 600; margin-top: 14px; }

/* ===== 2026-09-23：四象限 / 倒数日 / 课程表 / 番茄钟 ===== */

/* 侧栏底部那块账号区（.nav-foot / .nav-mine / .nav-foot-avatar / .nav-foot-meta）
   已整体删掉：用户要求侧栏最底部不要有账号信息，菜单直接铺到底。
   「我的」的入口移到顶栏那个小圆上（见 .avatar-btn）。 */

/* 顶栏那个小圆既是头像也是「我的」的入口（桌面端唯一的入口，底栏在桌面是隐藏的）。 */
.avatar-btn { border: none; padding: 0; cursor: pointer; transition: box-shadow .15s var(--ease), transform .15s var(--ease); }
.avatar-btn:hover { box-shadow: 0 0 0 3px var(--brand-light); transform: translateY(-1px); }
.avatar-btn:active { transform: scale(.94); }

/* 新弹层里的小控件（不复用 tl-form-actions：那套是给旧弹层用的，这里左右分组更清楚） */
.m-actions { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.m-actions .grow { flex: 1; }
.m-actions button { border: none; background: var(--brand); color: #fff; padding: 10px 20px; border-radius: var(--radius-sm); font-size: 14px; cursor: pointer; transition: filter .15s; }
.m-actions button:hover { filter: brightness(1.06); }
.m-actions button.ghost { background: transparent; border: 1px solid var(--line); color: var(--text-sub); }
.m-actions button.danger { background: transparent; border: 1px solid var(--line); color: var(--danger); }
.m-checks { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; }
.m-check { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-sub); cursor: pointer; }
.m-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.m-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.m-cell {
  height: 34px; display: grid; place-items: center; font-size: 13px; cursor: pointer;
  background: var(--bg); border: 1px solid transparent; border-radius: var(--radius-xs); color: var(--text-sub);
  transition: .15s;
}
.m-cell:hover { border-color: var(--line-strong); }
.m-cell.on { background: var(--brand-light); border-color: var(--brand); color: var(--brand); font-weight: 600; }

/* 四象限：四个象限排成 2×2 的「十字」——格子之间不留 gap，共用分隔线：
   左列两个格子各画一条右边线（竖线，只在这一条），第一行两个格子各画一条下边线（横线）。
   两条线在 2×2 的正中间交汇，中心点就是「重要/紧急」这两根轴的交叉点。
   未分类不属于任何一个象限，作为第 5 格整条铺在十字下面（.mx-inbox）。
   原来 5 个格子是两列等宽往下排、还带 14px 的 gap，读不出「象限」这层意思。

   四个象限**结构完全一样**，只换一组主题变量（--mx-*），所以加色不用动布局：
     --mx-acc    主色：顶部色条 / 数字角标 / 空状态文字 / 有任务时的辉光
     --mx-soft   主色的半透明版：角标底 / 任务条描边 / 焦点环
     --mx-title  象限标题色
     --mx-bg     格子底色
     --mx-line   共用分隔线的颜色（分隔线是各格自己画的，所以十字会带上四格的颜色）
     --mx-bar    顶部色条高度
   .mx-cell 本身是最弱的一档（灰色、无底色），第 4 象限直接沿用；q1 视觉权重最高。 */
.mx-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  max-width: 880px; margin: 0 auto;                 /* 十字居中：四格等宽时才是正方形 */
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow); overflow: hidden;
}
.mx-cell {
  --mx-acc: var(--text-mute);
  --mx-soft: rgba(255,255,255,.06);
  --mx-title: var(--text-sub);
  --mx-bg: transparent;
  --mx-line: var(--line);
  --mx-bar: 3px;
  padding: 20px 22px; min-height: 186px;
  background: var(--mx-bg);
  border-right: 1px solid var(--mx-line); border-bottom: 1px solid var(--mx-line);
  /* 顶部色条用 inset 阴影画：不占布局、也不会跟共用分隔线打架 */
  box-shadow: inset 0 var(--mx-bar) 0 0 var(--mx-acc);
  transition: box-shadow .2s var(--ease);
}
.mx-cell:nth-child(2n) { border-right: none; }      /* 右列不画竖线，中间只留一条 */
/* 格子里有任务时高亮更重：色条之上再叠一圈同色辉光 */
.mx-cell.has-items { box-shadow: inset 0 var(--mx-bar) 0 0 var(--mx-acc), inset 0 0 46px -18px var(--mx-acc); }

.mx-cell h4 { font-size: 15px; font-weight: 700; color: var(--mx-title); margin-bottom: 3px; display: flex; align-items: center; gap: 8px; }
/* 副标题（马上做 / 计划做 …）：字号 12 → 13px，颜色 --text-mute → --text-sub。
   原来那对组合在红/绿/黄底上只有 2.8~3.4 的对比度（12px 小字要 4.5），几乎看不清；
   换成 --text-sub 后是 5.4~6.4，也和站里其他次要文字同一口径。 */
.mx-hint { font-size: 13px; color: var(--text-sub); margin-bottom: 12px; }
/* 数字角标：放大加粗，一眼能看出这一格压了几条。
   颜色用 --mx-title（象限标题那档亮色）而不是 --mx-acc：角标底是 --mx-soft，
   拿中间调的 --mx-acc 压在上面只有 2.9~3.9 的对比度，数字基本糊在底色里；
   换成亮色后是 5.4~9.3。 */
.mx-count {
  font-size: 13px; font-weight: 800; line-height: 1;
  min-width: 24px; height: 24px; padding: 0 8px; border-radius: 999px;
  display: inline-grid; place-items: center;
  color: var(--mx-title); background: var(--mx-soft);
}
/* 空状态沿用原来的文案（「空」），配色跟着象限走。
   不再叠 0.6 透明：灰字本身对比度就低（灰底上只有 3.1~3.4），再打七折基本看不见。
   没有象限色的两格直接给 --text-sub（5.8~6.4）。 */
.mx-cell .pm-empty { color: var(--mx-acc); }
.mx-q4 .pm-empty, .mx-inbox .pm-empty { color: var(--text-sub); }

/* 重要且紧急：四个象限里视觉权重最高 —— 暗红底 + 更高的色条 + 内圈描边 + 一圈红辉光。
   注意**不再单独放大字号**：四个象限标题统一 15px，层级只靠字重（800 vs 700 / 600）+
   颜色 + 色条 + 内描边来区分。原来这里写 16px，比其余象限大 1px —— 看着不像有意分级，
   倒像字号写错了。 */
.mx-q1 {
  --mx-acc: #F87171; --mx-soft: rgba(239,68,68,.22);
  --mx-title: #FCA5A5; --mx-line: rgba(239,68,68,.45); --mx-bar: 4px;
  --mx-bg: linear-gradient(180deg, rgba(239,68,68,.16), rgba(239,68,68,.05));
}
.mx-q1 h4 { font-weight: 800; }
.mx-q1.has-items {
  box-shadow: inset 0 4px 0 0 var(--mx-acc), inset 0 0 0 1px var(--mx-soft), inset 0 0 52px -16px var(--mx-acc);
}
/* 重要不紧急：温和的绿色系 */
.mx-q2 {
  --mx-acc: #34D399; --mx-soft: rgba(16,185,129,.18);
  --mx-title: #6EE7B7; --mx-line: rgba(16,185,129,.32);
  --mx-bg: linear-gradient(180deg, rgba(16,185,129,.11), rgba(16,185,129,.03));
}
/* 紧急不重要：黄色警示调 */
.mx-q3 {
  --mx-acc: #FBBF24; --mx-soft: rgba(245,158,11,.18);
  --mx-title: #FCD34D; --mx-line: rgba(245,158,11,.32);
  --mx-bg: linear-gradient(180deg, rgba(245,158,11,.12), rgba(245,158,11,.03));
}
/* 不重要不紧急：不加色，维持普通深色卡片，标题也压一档（弱化） */
.mx-q4 h4 { font-weight: 600; }

/* 未分类：整条铺满、底色压暗一档，层级比四个象限低，放底部不抢注意力。
   注意选择器写成 `.mx-cell.mx-inbox`：它是第 5 格，有任务时一样会挂 .has-items，
   而 `.mx-cell.has-items` 的优先级比单个 `.mx-inbox` 高 —— 不写成两个类压不住那条辉光。 */
.mx-cell.mx-inbox {
  grid-column: 1 / -1; min-height: 0; border-right: none; border-bottom: none;
  background: var(--surface-2); box-shadow: none;
}
.mx-inbox h4 { color: var(--text-sub); font-weight: 600; }
/* 没有象限色的两格（不重要不紧急 / 未分类）角标不给底色、字重降到 600、颜色用 --text-sub：
   一来层级更低，二来灰字压在灰胶囊上本来就只有 2.3~2.9 的对比度，去掉底色才看得清（4.7~4.8）。 */
.mx-q4 .mx-count, .mx-inbox .mx-count { color: var(--text-sub); background: transparent; font-weight: 600; }
.mx-inbox .mx-item { background: var(--surface); }

.mx-item {
  display: flex; align-items: center; gap: 8px; padding: 10px 11px;
  border: 1px solid transparent; border-radius: var(--radius-xs);
  background: var(--bg); margin-bottom: 8px; font-size: 14px;
}
/* 有任务的格子：任务条也带上一层象限色（边框最轻，不抢文字） */
.mx-cell.has-items .mx-item { border-color: var(--mx-soft); }
.mx-item .mx-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-item.done .mx-title { text-decoration: line-through; color: var(--text-mute); }
.mx-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; cursor: pointer; }
.mx-dot.q1 { background: #EF4444; }
.mx-dot.q2 { background: #10B981; }
.mx-dot.q3 { background: #F59E0B; }
.mx-dot.q4 { background: var(--text-mute); }
/* 换象限的下拉：原来一条样式都没写，是浏览器默认外观，跟站点完全两张皮 */
.mx-sel {
  flex: none; max-width: 110px; padding: 4px 6px; font-family: inherit; font-size: 13px;
  color: var(--text-sub); background: var(--surface); cursor: pointer; outline: none;
  border: 1px solid var(--line); border-radius: 8px;
}
.mx-sel:hover { border-color: var(--mx-acc); color: var(--mx-acc); }
.mx-sel:focus { border-color: var(--mx-acc); box-shadow: 0 0 0 3px var(--mx-soft); }
.mx-move { border: 1px solid var(--line); background: var(--surface); color: var(--text-sub); font-size: 12px; padding: 3px 9px; border-radius: 999px; cursor: pointer; flex: none; }
.mx-move:hover { border-color: var(--brand); color: var(--brand); }
/* 页面底部那句提示：11px 太小（亮色下对比度只有 2.5），提到 12px 并用 --text-sub（4.5~6.8） */
.mx-note { font-size: 12px; color: var(--text-sub); margin-top: 14px; }

/* ===== 2026-09-24：云端同步与账号安全拆成两个独立弹窗 ===== */

/* 两个弹窗各自独立，但内边距保持同一套（原来是同一个弹窗，拆开后不能一个紧一个松）。 */
#sync-settings .modal-panel, #account-security .modal-panel { padding: 24px 26px; }

/* 云端同步弹窗里「未登录」的提示条：一句话 + 一个跳转按钮。
   **这里不放登录表单**（用户口径）——所以样式只需要一条轻量提示，不要做成表单块。 */
.sync-login-hint {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 16px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg);
  font-size: 13px; color: var(--text-sub);
}
/* 提示条里的按钮不在 .tl-form-actions 里，拿不到那套按钮样式，这里单独给一份轻量按钮 */
.sync-login-hint button {
  border: 1px solid var(--line-strong); background: transparent; color: var(--text-sub);
  padding: 6px 12px; border-radius: var(--radius-sm); font-size: 13px; font-family: inherit; cursor: pointer;
}
.sync-login-hint button:hover { border-color: var(--brand); color: var(--brand); }

/* 登录方式标签页：同一时间只显示一套表单（#account-form 仍是两套表单的外层容器，
   已登录时由 updateAccountUI() 连标签一起收起，只留 #account-on）。 */
.sync-tabs { display: flex; gap: 6px; margin: 12px 0 2px; padding: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; }
.sync-tab {
  flex: 1 1 0; border: none; background: transparent; color: var(--text-sub);
  font-family: inherit; font-size: 13px; padding: 8px 10px; border-radius: 999px; cursor: pointer; transition: .15s;
}
.sync-tab:hover { color: var(--text); }
.sync-tab.active { background: var(--card); color: var(--brand); font-weight: 600; box-shadow: var(--shadow); }
/* 切面板靠 .hidden。必须显式写这条：.sync-pane 若带了 display，类选择器会压过浏览器默认的
   [hidden]{display:none}，切换就会「点了没反应」（同 .about-qr[hidden] 踩过的坑）。 */
.sync-pane.hidden { display: none; }

/* 手机号 + 发送验证码同一行：输入框占满剩余宽度，按钮按内容宽（不撑满整行）。 */
.sync-row { display: flex; gap: 8px; align-items: stretch; }
.sync-row .tl-input { flex: 1 1 auto; min-width: 0; }
.sync-row-btn {
  flex: 0 0 auto; border: 1px solid var(--line); background: var(--bg); color: var(--text-sub);
  font-family: inherit; font-size: 13px; padding: 0 14px; border-radius: var(--radius-sm); cursor: pointer; transition: .15s;
}
.sync-row-btn:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.sync-row-btn:disabled, .sync-row-btn.disabled { opacity: .5; cursor: not-allowed; }

/* 次要说明改悬浮提示：小问号跟在标签后面，鼠标停上去才展开全文（页面上不再整段铺文字）。 */
.sync-help {
  display: inline-grid; place-items: center; width: 15px; height: 15px; margin-left: 5px;
  border-radius: 50%; background: var(--bg); border: 1px solid var(--line);
  color: var(--text-mute); font-size: 10px; font-weight: 700; cursor: help; vertical-align: middle;
}
.sync-help:hover { border-color: var(--brand); color: var(--brand); }

/* 登录区按钮统一尺寸：给个下限让它们等宽成组，同时不写 width:100% —— 避免撑满整行。 */
#account-form .tl-form-actions button, #account-on .tl-form-actions button { min-width: 96px; }

/* 亮色主题：同一套变量换一组浅色值 —— 暗色那套是「深底 + 亮字」，
   亮色下要反过来（浅底 + 深字），否则红字压在浅红底上会看不清。
   - 绿 / 黄两格的标题要比暗色那档再深一档：浅绿底 + #047857 只有 3.6、浅黄底 + #B45309 只有 3.1，
     15px 的字要 4.5 —— 换成 #065F46 / #92400E 后是 7.4 / 6.9。
   - 红格的底色要比另外两格更淡一点：13px 的副标题 / 下拉用 --text-sub(#6B7280)，
     压在 #FEF2F2 上只有 4.42（差一点达标），底色提到 #FFF6F6 后是 4.55。 */
body.light .mx-cell { --mx-soft: rgba(28,34,48,.06); }
body.light .mx-q1 {
  --mx-acc: #DC2626; --mx-soft: #FEE2E2;
  --mx-title: #B91C1C; --mx-line: #FCA5A5;
  --mx-bg: linear-gradient(180deg, #FFF6F6, #FFFBFC);
}
body.light .mx-q2 {
  --mx-acc: #059669; --mx-soft: #D1FAE5;
  --mx-title: #065F46; --mx-line: #A7F3D0;
  --mx-bg: linear-gradient(180deg, #F0FDF9, #F9FEFC);
}
body.light .mx-q3 {
  --mx-acc: #D97706; --mx-soft: #FEF3C7;
  --mx-title: #92400E; --mx-line: #FDE68A;
  --mx-bg: linear-gradient(180deg, #FFFCF3, #FFFEFA);
}

/* 倒数日 */
.cd-hero {
  background: linear-gradient(135deg, var(--surface), var(--brand-light)); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px; text-align: center; margin-bottom: 16px; box-shadow: var(--shadow-lg);
}
.cd-hero-name { font-size: 14px; color: var(--text-sub); }
.cd-hero-days { font-size: 46px; font-weight: 700; color: var(--brand); line-height: 1.15; font-variant-numeric: tabular-nums; }
.cd-hero-days small { font-size: 15px; font-weight: 500; margin-left: 6px; }
.cd-hero-date { font-size: 12px; color: var(--text-mute); }
.cd-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.cd-item { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); cursor: pointer; transition: .15s; }
.cd-item:hover { border-color: var(--line-strong); transform: translateY(-1px); box-shadow: var(--shadow-mid); }
.cd-item.pinned { border-color: var(--brand); }
.cd-num { min-width: 62px; text-align: center; }
.cd-num b { display: block; font-size: 24px; color: var(--brand); font-variant-numeric: tabular-nums; line-height: 1.1; }
.cd-num.past b { color: var(--text-mute); }
.cd-num span { font-size: 11px; color: var(--text-mute); }
.cd-meta { flex: 1; min-width: 0; }
.cd-meta b { display: block; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-meta span { font-size: 12px; color: var(--text-sub); }
.cd-tag { font-size: 10px; padding: 1px 7px; border-radius: 8px; background: var(--brand-light); color: var(--brand); margin-left: 6px; font-weight: 600; }
.cd-empty { font-size: 13px; color: var(--text-sub); padding: 22px; text-align: center; background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); }

/* 课程表 */
.cs-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cs-bar button { border: none; background: var(--brand); color: #fff; padding: 8px 16px; border-radius: var(--radius-sm); font-size: 13px; cursor: pointer; }
.cs-bar button.ghost { background: transparent; border: 1px solid var(--line); color: var(--text-sub); }
.cs-bar button.cs-week { background: var(--bg); color: var(--text); border: 1px solid var(--line); min-width: 92px; }
.cs-bar button:disabled { opacity: .45; cursor: not-allowed; }
.cs-sub { font-size: 12px; color: var(--text-sub); margin-top: -6px; }
.cs-days { display: flex; flex-direction: column; gap: 14px; }
.cs-day { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.cs-day.today { border-color: var(--brand); }
.cs-day-head { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.cs-day-head .today-tag { font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--brand); color: #fff; font-weight: 500; }
.cs-course { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-xs); background: var(--bg); margin-bottom: 8px; cursor: pointer; transition: .15s; }
.cs-course:last-child { margin-bottom: 0; }
.cs-course:hover { background: var(--brand-light); }
.cs-course-bar { width: 4px; align-self: stretch; border-radius: 2px; flex: none; }
.cs-course-main { flex: 1; min-width: 0; }
.cs-course-main b { font-size: 14px; }
.cs-course-main span { display: block; font-size: 12px; color: var(--text-sub); margin-top: 2px; }
.cs-course-time { font-size: 12px; color: var(--text-mute); text-align: right; flex: none; }
.cs-empty { font-size: 13px; color: var(--text-sub); padding: 22px; text-align: center; background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); }

/* 番茄钟 */
.pm-card {
  background: linear-gradient(135deg, var(--surface), var(--brand-light)); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px 22px; text-align: center; box-shadow: var(--shadow-lg);
}
.pm-mode { font-size: 13px; color: var(--brand); font-weight: 600; letter-spacing: .5px; }
.pm-time { font-size: 62px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; margin: 4px 0 2px; }
.pm-rounds { font-size: 12px; color: var(--text-sub); }
.pm-actions { display: flex; gap: 10px; justify-content: center; margin-top: 20px; }
.pm-actions button { border: none; background: var(--brand); color: #fff; padding: 11px 30px; border-radius: 999px; font-size: 14px; cursor: pointer; }
.pm-actions button.ghost { background: transparent; border: 1px solid var(--line); color: var(--text-sub); padding: 11px 20px; }
.pm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0; }
.pm-list-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.pm-list-wrap h3 { font-size: 15px; margin-bottom: 12px; }
.pm-list { display: flex; flex-direction: column; gap: 8px; }
.pm-row { display: flex; align-items: center; gap: 10px; background: var(--bg); border-radius: var(--radius-xs); padding: 9px 12px; font-size: 13px; }
.pm-row i { font-style: normal; color: var(--text-mute); font-size: 12px; margin-left: auto; }
.pm-empty { font-size: 12px; color: var(--text-sub); }