/* ============================================================
   语音任务管家 · Things 3 向重设计
   设计语言：纯白纸面 + 墨色文字 + 单一系统蓝；优先级降为色点/勾选圈描边；
   任务用「行」而非「卡」呈现（hairline 分隔），元信息一行灰色小字。
   约束：所有功能 class / id / 状态类与 script.js 严格对齐，不可改名；
   输入控件 font-size ≥ 16px（iOS 防聚焦缩放）；老安卓优雅降级（:has 仅增强）。
   ============================================================ */

* { box-sizing: border-box; }

:root {
  --bg: #ffffff;            /* 页面底：纯白纸面 */
  --panel: #ffffff;         /* 浮层（弹窗/拖拽克隆/底栏输入） */
  --fill: #f2f2f4;          /* 控件填充：分段控件、输入框、ghost 按钮 */
  --fill-2: #e8e8ec;        /* 填充按下态 */
  --ink: #1d1d1f;           /* 主文字 墨色 */
  --muted: #86868b;         /* 次文字 */
  --faint: #c7c7cc;         /* 占位/禁用 */
  --icon: #6e6e73;          /* 头部图标 */
  --line: rgba(0, 0, 0, .08);   /* hairline */
  --brand: #007aff;         /* 唯一强调色 系统蓝 */
  --brand-dark: #0a66d6;
  --high: #ff3b30;
  --mid: #ff9500;
  --low: #b9b9bf;           /* 低优先级：灰点，不抢戏 */
  --ok: #34c759;
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, .14), 0 2px 8px rgba(0, 0, 0, .06);
  --bottom-bar-clearance: 224px; /* 底栏 textarea 撑满时实测 201px，留 ~23px 余量 */
}

html {
  /* 消除双击缩放与 300ms 点击延迟，配合 viewport user-scalable=no 防误缩放 */
  touch-action: manipulation;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
}

button, input, textarea { font: inherit; }
button {
  cursor: pointer;
  touch-action: manipulation;
}
/* SVG 图标不拦截点击命中（事件目标始终是按钮本身） */
button svg { pointer-events: none; display: block; }

.app {
  width: min(100%, 480px);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding:
    max(14px, env(safe-area-inset-top))
    max(20px, env(safe-area-inset-right))
    max(28px, env(safe-area-inset-bottom))
    max(20px, env(safe-area-inset-left));
}

/* ---------- 头部：大标题 + 摘要行 ---------- */
.top { margin: 10px 0 6px; }

.top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

h1, h2 { margin: 0; line-height: 1.12; }
h1 { font-size: 33px; font-weight: 800; letter-spacing: -.022em; }
h2 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }

.top-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.icon-btn {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--icon);
  transition: background-color 140ms ease, color 140ms ease, transform 120ms ease;
}
.icon-btn:active { background: var(--fill); transform: scale(.92); }

.summary {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.summary strong { font-weight: 600; color: var(--muted); }
.summary > span:not(.ai-state):empty { display: none; }
.summary > span:not(.ai-state):not(:empty)::before {
  content: "·";
  margin: 0 6px;
  color: var(--faint);
}
#summaryDone { color: var(--ok); font-weight: 600; }

.ai-state {
  margin-left: auto;
  align-self: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--fill);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* 完成进度：细线 */
.progress-wrap { margin-top: 12px; }
.progress-track {
  height: 3px;
  border-radius: 999px;
  background: var(--fill-2);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--brand);
  transition: width 420ms cubic-bezier(.2, .8, .2, 1);
}
/* 全部完成：进度条变绿并弹一下（类由 render 常驻切换，动画只在类出现那次播放） */
.progress-wrap.all-done .progress-fill { background: var(--ok); }
@keyframes track-pop {
  0% { transform: scaleY(1); }
  40% { transform: scaleY(2.4); }
  100% { transform: scaleY(1); }
}
.progress-wrap.all-done .progress-track { animation: track-pop 480ms 320ms cubic-bezier(.34, 1.56, .64, 1); }

/* ---------- 列表工具行：筛选 / 排序 / 清除 ---------- */
/* display:flex 会压过 hidden 属性的 UA 规则，凡是 JS 用 hidden 控制显隐的
   flex 容器都必须补 [hidden] 覆盖（同 #nowActive 的教训） */
.listbar[hidden], .task-list[hidden], .stats-view[hidden] { display: none; }
.listbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 2px;
}

.filters {
  display: flex;
  padding: 2px;
  border-radius: 9px;
  background: var(--fill);
}

.filter {
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  padding: 7px 13px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 160ms ease, color 160ms ease;
}

.filter.active {
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}

.sort-btn {
  margin-left: auto;
  border: none;
  background: transparent;
  color: var(--muted);
  padding: 8px 6px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  border-radius: 8px;
  transition: color 140ms ease, background-color 140ms ease;
}
.sort-btn:active { background: var(--fill); }
.sort-btn:hover { color: var(--ink); }

.clear-done-btn {
  border: none;
  background: transparent;
  color: var(--muted);
  padding: 8px 6px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  border-radius: 8px;
  display: none;
  transition: color 140ms ease, background-color 140ms ease;
}
.clear-done-btn:hover, .clear-done-btn:active { color: var(--high); background: rgba(255, 59, 48, .08); }

/* ---------- 当前任务卡：正在进行 / 接下来 + 环形倒计时 ---------- */
.now-card {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 14px 0 2px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--fill);
  cursor: pointer;
  transition: transform 120ms ease;
}
.now-card:active { transform: scale(.99); }
.now-card[hidden] { display: none; }
/* 布局放样式表，不能写内联 style="display:flex"——内联 display 会压过 hidden 属性，
   导致 JS 设 hidden 后空态提示与残留活动行同时显示 */
#nowActive { display: flex; align-items: center; width: 100%; }
#nowActive[hidden] { display: none; }
.now-card .day-check { flex: none; width: 24px; height: 24px; }
.now-card .day-check::after { left: 8px; top: 4px; width: 5px; height: 10px; }

.now-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.now-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--brand);
}
.now-card.is-next .now-eyebrow { color: var(--muted); }
.now-title {
  font-size: 16px;
  font-weight: 650;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.now-meta {
  font-size: 12.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.now-ring {
  width: 44px;
  height: 44px;
  flex: none;
  transform: rotate(-90deg); /* 让进度从 12 点方向开始走 */
}
.now-ring .ring-track {
  fill: none;
  stroke: var(--fill-2);
  stroke-width: 4;
}
.now-ring .ring-fill {
  fill: none;
  stroke: var(--brand);
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset 600ms ease;
}
[data-theme="dark"] .now-ring .ring-track { stroke: #3a3a3c; }

/* ---------- 今日精力预算条 ----------
   气质定位是油量表，不是游戏进度条：平静陈述事实，超载时提示卸载而不是责备。
   轨道宽度 = 上限；排的活超出上限时，多出来的那段越过上限线继续画，
   所以「装不下了」是一眼可见的**溢出**，而不是一根填满就没了下文的进度条。
   三态不只靠颜色区分（色盲/灰度可用）：超出段用斜纹，另有文字状态胶囊。 */
.load-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 4px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--fill);
}
.load-bar[hidden] { display: none; }

.load-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.load-chip {
  font-size: 12px;
  font-weight: 650;
  padding: 3px 9px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
}
.load-bar[data-level="near"] .load-chip { color: var(--mid); border-color: var(--mid); }
.load-bar[data-level="over"] .load-chip { color: var(--high); border-color: var(--high); }

.load-figures {
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.load-figures b { color: var(--ink); font-weight: 650; font-size: 15px; }
.load-sep { margin: 0 3px; color: var(--faint); }
.load-unit { margin-left: 2px; }

.load-track {
  position: relative;
  display: flex;
  height: 10px;
  border-radius: 999px;
  background: var(--fill-2);
  overflow: hidden;
}
.load-seg {
  height: 100%;
  width: 0;
  transition: width 260ms ease;
}
/* 已扛完的：实心；还没做的：同色系但淡，一眼分得出「已经付出」与「还欠着」 */
.load-seg-done { background: var(--ok); }
.load-seg-todo { background: color-mix(in srgb, var(--ok) 34%, transparent); }
.load-bar[data-level="near"] .load-seg-done { background: var(--mid); }
.load-bar[data-level="near"] .load-seg-todo { background: color-mix(in srgb, var(--mid) 34%, transparent); }
.load-bar[data-level="over"] .load-seg-done { background: var(--high); }
.load-bar[data-level="over"] .load-seg-todo { background: color-mix(in srgb, var(--high) 34%, transparent); }
/* 老内核不认 color-mix，退回一个中性淡色，不至于整段消失 */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .load-seg-todo { background: var(--faint); }
}
/* 超出上限的那截：斜纹。灰度打印和色盲下也能和前面两段区分开 */
.load-seg-over {
  background: repeating-linear-gradient(
    135deg,
    var(--high) 0 4px,
    transparent 4px 8px
  );
}
/* 上限线：只有超载时才出现，标出「本来的边界在哪」 */
.load-cap-mark {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: var(--ink);
  opacity: 0;
  transition: left 260ms ease;
}
.load-bar[data-level="over"] .load-cap-mark { opacity: .85; }

.load-note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}
.load-bar[data-level="over"] .load-note { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .load-seg, .load-cap-mark { transition: none; }
}

/* 编辑卡里的费神程度：5 档等宽，够 44px 点击区 */
.sheet-seg-energy button { padding: 6px 0; min-width: 40px; justify-content: center; }
.sheet-field-hint {
  margin-top: -6px;
  justify-content: space-between;
}
.sheet-hint { font-size: 12px; color: var(--muted); }
.sheet-hint-load b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* 设置里的每日精力上限：留空 = 自动推荐，不是"没设置好"。
   标签单独一行——跟主题那行共用横排会把标签和「用自动」双双挤成两行。 */
.capacity-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0 8px;
}
.capacity-label { font-size: 14px; font-weight: 650; color: var(--ink); }
.capacity-control { display: flex; align-items: center; gap: 8px; }
.capacity-control button {
  min-width: 40px;
  min-height: 40px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--fill);
  color: var(--ink);
  font-size: 17px;
  font-weight: 650;
}
.capacity-control input {
  width: 76px;
  min-height: 40px;
  text-align: center;
  font-size: 16px; /* iOS 聚焦不缩放 */
  font-variant-numeric: tabular-nums;
}
.capacity-control .unit { font-size: 13px; color: var(--muted); }
.capacity-auto {
  margin-left: auto;
  padding: 0 14px;
  white-space: nowrap; /* 「用自动」四个字不许被压成两行 */
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--brand) !important;
}
.capacity-note {
  margin: -4px 0 4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* ---------- 成长池 ----------
   放在列表底部的折叠区块而不是第六个视图：顶部五个 tab 已经够挤了，
   而且想法本来就该是"顺手存一下"，不值得占一个一级入口。 */
/* ── 娱乐额度（兑换制）──────────────────────────────────────────
   专注换来的「可以心安理得刷手机」的分钟数。刻意不用 --brand：
   跟负荷预算条一样，只走 --ok/--high 语义色，强调色留给操作本身。 */
.credit {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0 4px;
  padding: 14px;
  border-radius: 14px;
  background: var(--fill);
}
.credit[hidden] { display: none; }

.credit-main {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.credit-balance {
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-variant-numeric: tabular-nums;
}
.credit-balance b {
  font-size: 30px;
  font-weight: 680;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ok);
}
.credit[data-level="empty"] .credit-balance b { color: var(--muted); }
.credit[data-level="over"] .credit-balance b { color: var(--high); }
.credit-unit {
  font-size: 13px;
  color: var(--muted);
}
.credit-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.credit-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.credit-detail {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.credit-spend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.credit-spend-label {
  font-size: 12px;
  color: var(--muted);
}
.credit-quick,
.credit-custom {
  font-size: 13px;
  padding: 7px 12px;
  min-height: 34px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
}
.credit-custom { color: var(--muted); }
.credit-quick:active,
.credit-custom:active { background: var(--fill); }

.credit-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

/* 设置里「专注 10 分钟换 N 分钟」前半句是死的，跟输入框排一行 */
.rate-fixed {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}

.growth {
  margin: 4px 0 var(--bottom-bar-clearance);
  border-top: 1px solid var(--line);
}
.growth[hidden] { display: none; }
/* 底栏避让原本挂在 .task-list 上；成长池接在它后面时，那份 224px 留白会把
   成长池整个顶到屏幕外。有成长池时把避让交给成长池自己（上面的 margin-bottom）。
   用 body 类而不是 :has()——项目约定 :has 只做增强，不能拿它承载布局。 */
body.has-growth .task-list { padding-bottom: 8px; }

.growth-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 14px 4px;
  background: transparent;
  border: none;
  color: var(--muted);
  text-align: left;
  min-height: 44px;
}
.growth-caret {
  flex: none;
  color: var(--faint);
  transition: transform 160ms ease;
}
.growth.open .growth-caret { transform: rotate(90deg); }
.growth-title { font-size: 14px; font-weight: 650; color: var(--ink); }
.growth-count {
  font-size: 12px;
  font-weight: 650;
  color: var(--muted);
  background: var(--fill);
  border-radius: 999px;
  padding: 1px 8px;
  font-variant-numeric: tabular-nums;
}
/* 有余量时才出现的那句提示——成长池与负荷系统咬合的地方 */
.growth-hint {
  margin-left: auto;
  font-size: 12px;
  color: var(--ok);
  text-align: right;
}
.growth-hint:empty { display: none; }

.growth-body { padding: 0 4px 16px; }
.growth-body[hidden] { display: none; }

.growth-add { display: flex; gap: 8px; margin-bottom: 10px; }
.growth-add input {
  flex: 1;
  min-width: 0;
  font-size: 16px; /* iOS 聚焦不缩放的底线 */
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  min-height: 44px;
}
.growth-add input:focus { outline: none; box-shadow: 0 0 0 3px rgba(0, 122, 255, .18); }
.growth-add button {
  flex: none;
  padding: 0 16px;
  border-radius: 10px;
  border: none;
  background: var(--fill);
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
  min-height: 44px;
}
.growth-add button:active { background: var(--fill-2); }

.growth-list { display: flex; flex-direction: column; }
.growth-empty {
  margin: 0;
  padding: 10px 2px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}
.growth-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--line);
}
.growth-item:last-child { border-bottom: none; }
.growth-item-text {
  flex: 1;
  min-width: 0;
  font-size: 14.5px;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.growth-promote {
  flex: none;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--brand);
  font-size: 12.5px;
  font-weight: 650;
  min-height: 36px;
}
.growth-promote:active { background: var(--fill); }
.growth-del {
  flex: none;
  width: 32px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--faint);
  font-size: 20px;
  line-height: 1;
}
.growth-del:active { color: var(--high); }

@media (prefers-reduced-motion: reduce) {
  .growth-caret { transition: none; }
}

/* ---------- 任务列表：行式呈现 ---------- */
.task-list {
  display: flex;
  flex-direction: column;
  padding-bottom: var(--bottom-bar-clearance);
  overflow-x: hidden; /* 左滑时红色「删除」条从右侧滑入，不许撑宽页面 */
  overflow-x: clip;   /* 新内核用 clip：纯裁剪、不产生滚动容器，规避 iOS overflow+transform 顽疾 */
}

.empty {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 64px 20px;
  color: var(--muted);
  text-align: center;
}
.empty strong { color: var(--ink); font-size: 16px; font-weight: 650; }
.empty span { font-size: 13.5px; line-height: 1.6; }

/* 空状态插画：灰线打底、品牌蓝点睛，三个视图共用 */
.empty-art { display: block; margin: 0 auto 2px; color: var(--faint); }
.empty-art .accent { stroke: var(--brand); }

@media (prefers-reduced-motion: reduce) {
  .check-wrap span.just-done,
  .check-wrap span.just-done::after,
  .day-check.just-done,
  .day-check.just-done::after,
  .progress-wrap.all-done .progress-track { animation: none; }
  .progress-fill { transition: none; }
}

.task-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--line);
  background: transparent;
  cursor: default;
  transform: translateZ(0);
  transition: transform 180ms ease, opacity 180ms ease, background-color 180ms ease;
  position: relative; /* 左滑删除的红条 ::after 定位基准；不设 touch-action:pan-y，否则长按拖拽会被浏览器抢竖向手势 */
}
.task-card:active { transform: scale(.995); }

/* 左滑删除：手指跟随期间关过渡；红色「删除」条贴在卡片右缘，随卡片左移露出 */
.task-card.swiping { transition: none; }
.task-card.swiping::after,
.task-card.swipe-out::after {
  content: "删除";
  position: absolute;
  left: 100%;
  top: 0;
  bottom: 0;
  width: 100vw;
  display: flex;
  align-items: center;
  padding-left: 20px;
  background: var(--high);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.task-card.swipe-out { transition: transform 240ms ease; }

/* 勾选圈：描边色随优先级（:has 渐进增强，老内核回退灰圈） */
.check-wrap {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
  margin-top: 1px;
}
.task-check { position: absolute; inset: 0; opacity: 0; }
.check-wrap span {
  display: block;
  width: 24px;
  height: 24px;
  border: 1.8px solid var(--faint);
  border-radius: 50%;
  background: transparent;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.task-card:has(.priority.high) .check-wrap span { border-color: var(--high); }
.task-card:has(.priority.medium) .check-wrap span { border-color: var(--mid); }
.task-check:checked + span { border-color: var(--brand); background: var(--brand); }
.task-card:has(.priority.high) .task-check:checked + span { border-color: var(--high); background: var(--high); }
.task-card:has(.priority.medium) .task-check:checked + span { border-color: var(--mid); background: var(--mid); }
.task-check:checked + span::after {
  content: "";
  position: absolute;
  left: 8.5px;
  top: 4.5px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* 完成瞬间的弹簧动效：圈先弹一下，对勾随后放大画出（.just-done 由 JS 挂、动画结束即摘） */
@keyframes check-pop {
  0% { transform: scale(.72); }
  45% { transform: scale(1.16); }
  72% { transform: scale(.95); }
  100% { transform: scale(1); }
}
@keyframes check-draw {
  from { transform: rotate(45deg) scale(0); opacity: 0; }
  to { transform: rotate(45deg) scale(1); opacity: 1; }
}
.check-wrap span.just-done { animation: check-pop 380ms cubic-bezier(.3, 1.4, .5, 1); }
.check-wrap span.just-done::after { transform-origin: 50% 50%; animation: check-draw 220ms 90ms cubic-bezier(.3, 1.4, .5, 1) backwards; }

.task-card.done { opacity: .52; }
.task-card.done .task-title { text-decoration: line-through; color: var(--muted); }
.task-card.done .deadline.overdue { color: var(--muted); }

/* 标题第一行、元信息第二行：只动视觉顺序，DOM 结构不变。
   整个 task-main 是「打开编辑卡」的点击区，行内不再有独立编辑控件。 */
.task-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
}
.task-main .task-title { order: 1; }
.task-main .task-top { order: 2; }
.task-main .task-note-preview { order: 3; }

.task-title {
  border: 0;
  background: transparent;
  padding: 0;
  width: 100%;
  font-size: 16px; /* <16px 聚焦会触发 iOS 整页放大 */
  font-weight: 600;
  color: var(--ink);
  min-height: 24px;
  outline: none;
  pointer-events: none; /* 只读展示：点击穿透给 task-main 打开编辑卡 */
}
.task-title::placeholder { color: var(--faint); }

.task-note-preview {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.task-note-preview[hidden] { display: none; }

/* 元信息行：小字灰色，优先级是色点，时长/截止可点击 */
.task-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 12px;
  row-gap: 6px;
  font-size: 12.5px;
  color: var(--muted);
}
/* 视觉顺序：优先级 → 开始 → 时长 → 截止 → 日历 → 标签 → 序号；DOM 顺序不动 */
.task-top .priority { order: 1; }
.task-top .start-at { order: 2; }
.task-top .duration { order: 3; }
.task-top .deadline { order: 4; }
.task-top .cal-export-btn { order: 5; }
.task-top .task-tag { order: 6; }
.task-top .order { order: 7; margin-left: auto; }

.order {
  /* 序号是调试感很强的元素，对用户没有信息量，隐藏（DOM 保留，脚本照常写入） */
  display: none;
}

/* 元信息 chip：纯展示，编辑统一走底部编辑卡 */
.priority,
.start-at,
.duration,
.deadline,
.reminder {
  padding: 0;
  border-radius: 6px;
  background: transparent;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  user-select: none;
}
.reminder { color: var(--muted); font-variant-numeric: tabular-nums; }
.reminder.reminder-off { color: var(--faint); font-weight: 500; }

/* 开始时间：加粗但不上色，靠字重区分「几点干嘛」 */
.start-at { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.start-at.empty { color: var(--faint); font-weight: 500; }

/* 优先级 = 色点 + 文字 */
.priority {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-weight: 600;
}
.priority::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--low);
}
.priority.high::before { background: var(--high); }
.priority.medium::before { background: var(--mid); }
/* 优先级只用色点表达，文字保持灰色——每行只留一个彩色元素，避免元信息行五色打架 */

.duration {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.deadline { color: var(--muted); font-variant-numeric: tabular-nums; }
.deadline.empty { color: var(--faint); }
/* 今天/明天用字重和墨色强调即可；彩色只留给「已逾期」这一个告警态 */
.deadline.today { color: var(--ink); font-weight: 600; }
.deadline.tomorrow { color: var(--muted); font-weight: 600; }
.deadline.overdue { color: #d70015; font-weight: 600; }
.deadline.future { color: var(--muted); }

.task-tag {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--fill);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* 加入系统日历 */
.cal-export-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  vertical-align: middle;
  opacity: .8;
  transition: opacity 140ms ease, background-color 140ms ease, transform 120ms ease;
}
.cal-export-btn:hover { opacity: 1; background: var(--fill); }
.cal-export-btn:active { transform: scale(.92); }
.cal-export-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---------- 任务编辑卡（底部弹出）：行内所有字段的统一编辑入口 ---------- */
dialog.task-sheet {
  width: 100%;
  max-width: 480px;
  margin: auto auto 0;
  border: 0;
  border-radius: 20px 20px 0 0;
  padding: 0;
  background: transparent;
}
dialog.task-sheet::backdrop { background: rgba(0, 0, 0, .42); }

.sheet {
  padding: 10px 20px calc(18px + env(safe-area-inset-bottom));
  border-radius: 20px 20px 0 0;
  background: var(--panel);
  box-shadow: var(--shadow-pop);
  animation: sheet-in 240ms cubic-bezier(.2, .8, .2, 1);
}
@keyframes sheet-in {
  from { transform: translateY(28px); opacity: .6; }
  to { transform: translateY(0); opacity: 1; }
}

.sheet-grabber {
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: var(--fill-2);
  margin: 0 auto 12px;
}

.sheet-title {
  width: 100%;
  border: none;
  border-radius: 12px;
  background: var(--fill);
  padding: 12px 14px;
  font-size: 16px; /* <16px 聚焦会触发 iOS 整页放大 */
  font-weight: 600;
  color: var(--ink);
  outline: none;
  transition: box-shadow 140ms ease;
}
.sheet-title:focus { box-shadow: 0 0 0 3px rgba(0, 122, 255, .18); }

.sheet-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  border-bottom: 1px solid var(--line);
}
.sheet-field > span {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.sheet-field input[type="time"],
.sheet-field input[type="date"],
.sheet-field select {
  border: none;
  background: var(--fill);
  border-radius: 9px;
  color: var(--ink);
  font-size: 16px; /* <16px 聚焦会触发 iOS 整页放大 */
  padding: 6px 10px;
  outline: none;
}
.sheet-deadline { display: inline-flex; gap: 6px; }

.sheet-seg {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: 9px;
  background: var(--fill);
}
.sheet-seg button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: transparent;
  color: var(--muted);
  padding: 6px 14px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  min-height: 34px;
  transition: background-color 140ms ease, color 140ms ease;
}
.sheet-seg button.active {
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}
.sheet-seg .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.sheet-seg .dot-high { background: var(--high); }
.sheet-seg .dot-mid { background: var(--mid); }
.sheet-seg .dot-low { background: var(--low); }

.sheet-duration {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sheet-duration button {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sheet-duration button:active { transform: scale(.92); }
.sheet-duration input {
  width: 60px;
  height: 32px;
  text-align: center;
  border: none;
  border-radius: 9px;
  background: var(--fill);
  color: var(--ink);
  font-size: 16px; /* <16px 聚焦会触发 iOS 整页放大 */
  outline: none;
  -moz-appearance: textfield;
}
.sheet-duration input::-webkit-outer-spin-button,
.sheet-duration input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.sheet-duration .unit { font-size: 12.5px; color: var(--muted); }

#sheetNote {
  width: 100%;
  min-height: 52px;
  margin-top: 12px;
  padding: 10px 12px;
  border: none;
  border-radius: 12px;
  background: var(--fill);
  color: var(--ink);
  font-size: 16px; /* <16px 聚焦会触发 iOS 整页放大 */
  line-height: 1.5;
  resize: vertical;
  outline: none;
}
#sheetNote:focus { box-shadow: 0 0 0 3px rgba(0, 122, 255, .18); }

.sheet-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.sheet-actions button { flex: 1; }
.ghost-btn.danger { color: var(--high); }

/* ---------- 拖拽 ---------- */
.task-card.dragging {
  opacity: .4;
  transform: scale(.98);
  will-change: transform;
}
.task-card.drag-over { border-top: 2px solid var(--brand); }
.task-card.touch-placeholder { opacity: .35; transition: none; }

.task-drag-clone {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  margin: 0;
  pointer-events: none;
  background: var(--panel);
  border-bottom: none;
  border-radius: 16px;
  box-shadow: var(--shadow-pop);
  transform: translate3d(0, 0, 0) scale(1.03);
  opacity: .97;
  will-change: transform;
  padding-left: 12px;
  padding-right: 12px;
}

body.touch-dragging {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
body.touch-dragging .task-card { transition: transform 160ms ease; }

@media (pointer: fine) {
  .task-card { cursor: grab; }
  .task-card:active { cursor: grabbing; }
}

/* ---------- 动画：新增 / 删除 / 筛选 ---------- */
.task-card.recent {
  animation: task-pop 520ms cubic-bezier(.2, .8, .2, 1);
  will-change: transform, opacity;
}
@keyframes task-pop {
  0% { opacity: 0; transform: translate3d(0, 12px, 0) scale(.98); }
  55% { opacity: 1; transform: translate3d(0, -2px, 0) scale(1.005); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

.task-card.is-removing {
  animation: task-remove 240ms cubic-bezier(.4, 0, 1, 1) forwards;
  overflow: hidden;
  pointer-events: none;
}
@keyframes task-remove {
  0% { opacity: 1; transform: translateX(0); max-height: 240px; }
  35% { opacity: 0; transform: translateX(40px); }
  100% { opacity: 0; transform: translateX(40px); max-height: 0; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }
}

.task-card.is-filter-entering {
  animation: filter-enter 280ms cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes filter-enter {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ---------- Snackbar ---------- */
.snackbar {
  position: fixed;
  bottom: max(calc(var(--bottom-bar-clearance) - 28px), env(safe-area-inset-bottom));
  left: 50%;
  transform: translate3d(-50%, 150%, 0);
  background: rgba(28, 28, 30, .96);
  color: #f5f5f7;
  padding: 12px 20px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 500;
  display: none;
  align-items: center;
  gap: 16px;
  box-shadow: var(--shadow-pop);
  transition: transform 220ms cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
  z-index: 100;
  white-space: nowrap;
}
.snackbar[hidden] { display: none; }
.snackbar.show { display: flex; transform: translate3d(-50%, 0, 0); }
.snackbar button {
  background: transparent;
  border: none;
  color: #6db2ff;
  font-weight: 700;
  padding: 0;
  margin: 0;
}
.snackbar button[hidden] { display: none; }

/* ---------- 到点提醒横幅 ---------- */
.reminder-banner {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(560px, calc(100vw - 24px));
  padding: 13px 14px;
  border-radius: 18px;
  background: rgba(28, 28, 30, .94);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  color: #f5f5f7;
  box-shadow: var(--shadow-pop);
  z-index: 120;
  animation: reminder-in 260ms cubic-bezier(.2, .8, .2, 1);
}
.reminder-banner[hidden] { display: none; }
.reminder-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffd60a;
}
.reminder-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.reminder-body strong { font-size: 14px; }
.reminder-body span {
  font-size: 13px;
  opacity: .82;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
#reminderNotifyBtn {
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, .3);
  background: transparent;
  color: #6db2ff;
  border-radius: 9px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
#reminderCloseBtn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: #f5f5f7;
  font-size: 18px;
  line-height: 1;
  opacity: .7;
}
#reminderCloseBtn:hover { opacity: 1; }
@keyframes reminder-in {
  from { transform: translate(-50%, -16px); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}

/* ---------- 底部输入栏：毛玻璃，更轻更窄 ---------- */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  padding: 10px 16px max(14px, env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: .5px solid var(--line);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.manual-input-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.manual-input-box textarea {
  width: 100%;
  background: var(--fill);
  padding: 11px 14px;
  border-radius: 14px;
  border: none;
  color: var(--ink);
  font-size: 16px; /* <16px 聚焦会触发 iOS 整页放大 */
  line-height: 1.5;
  min-height: 44px;
  max-height: 120px;
  resize: none;
  outline: none;
  transition: box-shadow 140ms ease, background-color 140ms ease;
}
.manual-input-box textarea::placeholder { color: var(--muted); }
.manual-input-box textarea:focus { box-shadow: 0 0 0 3px rgba(0, 122, 255, .18); }
.manual-input-box textarea:disabled { opacity: .6; }

.manual-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.hold-to-talk-btn {
  flex: 1;
  height: 46px;
  border: 0;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  background: var(--fill);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transform: translateZ(0);
  transition: transform 120ms ease, background-color 120ms ease, box-shadow 120ms ease, color 120ms ease;
  will-change: transform;

  /* CRITICAL FOR MOBILE HOLD */
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  -webkit-touch-callout: none;
}
.hold-to-talk-btn .icon {
  display: flex;
  align-items: center;
  color: var(--brand);
  transition: color 120ms ease;
}
.hold-to-talk-btn.pressing,
.hold-to-talk-btn.recording {
  background: var(--brand);
  color: #fff;
  transform: scale(.985);
  box-shadow: 0 6px 20px rgba(0, 122, 255, .35);
}
.hold-to-talk-btn.pressing .icon,
.hold-to-talk-btn.recording .icon { color: #fff; }

/* 打字入口：只在收起态显示，展开后由「整理成清单」接管 */
.keyboard-btn {
  display: none;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 14px;
  background: var(--fill);
  color: var(--icon);
  transition: background-color 140ms ease, transform 120ms ease;
}
.keyboard-btn:active { background: var(--fill-2); transform: scale(.94); }

/* 底部输入区默认收起：只留「按住说话」胶囊 + 打字按钮，列表多出约一屏的三分之一 */
body.input-collapsed { --bottom-bar-clearance: 108px; }
body.input-collapsed #rawInput { display: none; }
body.input-collapsed #parseBtn { display: none; }
body.input-collapsed .keyboard-btn { display: flex; }
/* 当页面内有别的输入框获焦时（代表键盘弹起），把无关的底部输入区藏掉，免得它被键盘顶起来挡住视线 */
body.input-collapsed:has(input:focus, textarea:focus, select:focus) .bottom-bar { display: none; }

.primary-btn {
  background: var(--brand);
  color: #fff;
  height: 46px;
  min-height: 46px;
  border: 0;
  border-radius: 14px;
  font-weight: 600;
  padding: 0 22px;
  white-space: nowrap;
  transition: transform 120ms ease, background-color 140ms ease, opacity 140ms ease;
}
.primary-btn:hover { background: var(--brand-dark); }
.primary-btn:active:not(:disabled) { transform: scale(.985); }
.primary-btn:disabled { cursor: not-allowed; background: var(--faint); }

.ghost-btn {
  background: var(--fill);
  color: var(--ink);
  min-height: 46px;
  border: 0;
  border-radius: 13px;
  font-weight: 600;
  transition: background-color 140ms ease, transform 120ms ease;
}
.ghost-btn:active { background: var(--fill-2); transform: scale(.985); }
.primary-btn.small, .ghost-btn.small {
  min-height: 40px;
  font-size: 13px;
}

/* 文本飞入动画 */
.flying-text {
  position: fixed;
  background: var(--panel);
  color: var(--ink);
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  font-size: 16px;
  box-shadow: var(--shadow-pop);
  z-index: 9999;
  pointer-events: none;
  box-sizing: border-box;
  overflow: hidden;
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
  transition: transform 420ms cubic-bezier(.2, .8, .2, 1), opacity 420ms ease;
  will-change: transform, opacity;
}
.flying-text.fly-away {
  transform: translate3d(0, -130px, 0) scale(.88);
  opacity: 0;
}

/* ---------- 设置弹窗 ---------- */
dialog {
  width: min(92vw, 450px);
  border: 0;
  border-radius: 24px;
  padding: 0;
  background: transparent;
}
dialog::backdrop { background: rgba(0, 0, 0, .42); }

.settings {
  padding: 22px;
  border-radius: 24px;
  background: var(--panel);
  box-shadow: var(--shadow-pop);
}

.settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.eyebrow {
  margin: 0 0 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.settings label {
  display: block;
  margin-top: 16px;
}
.settings label span {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
}

.settings input[type="text"],
.settings input[type="password"],
.settings input[type="url"] {
  width: 100%;
  padding: 12px 14px;
  border: none;
  border-radius: 12px;
  background: var(--fill);
  color: var(--ink);
  font-size: 16px; /* <16px 聚焦会触发 iOS 整页放大 */
  outline: none;
  transition: box-shadow 140ms ease;
}
.settings input:focus { box-shadow: 0 0 0 3px rgba(0, 122, 255, .18); }

.note {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}

.test-conn-row { margin-top: 14px; }
.test-conn-row .ghost-btn.small { width: 100%; }
.test-conn-result { white-space: pre-line; margin-top: 8px; }

.data-actions { margin-top: 24px; }
.data-actions-row { display: flex; gap: 10px; }
.data-actions-row .ghost-btn { flex: 1; }
.data-actions .note { margin-top: 8px; }

.settings-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 20px;
}
.settings-actions button { flex: 1; }

/* 主题三态分段控件 */
.theme-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}
.theme-field > span {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}
.theme-options {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: 9px;
  background: var(--fill);
}
.theme-option {
  border: none;
  background: transparent;
  color: var(--muted);
  padding: 6px 12px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  min-height: 34px;
  transition: background-color 140ms ease, color 140ms ease;
}
.theme-option.active {
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}

/* ---------- 日程视图：日期带 + 未安排 + 时间轴 ---------- */
.view-switch {
  display: flex;
  padding: 2px;
  border-radius: 9px;
  background: var(--fill);
  margin: 14px 0 0;
}
.view-option {
  flex: 1;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  padding: 7px 0;
  font-size: 13px;
  font-weight: 600;
  transition: background-color 160ms ease, color 160ms ease;
}
.view-option.active {
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}

.day-view { padding-bottom: var(--bottom-bar-clearance); }
.day-view[hidden], .day-untimed[hidden], .day-timeline[hidden], .day-empty[hidden] { display: none; }

.day-strip {
  display: flex;
  gap: 4px;
  margin: 14px -4px 6px;
  padding: 2px 4px 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.day-strip::-webkit-scrollbar { display: none; }
.day-cell {
  flex: none;
  width: 48px;
  padding: 8px 0 7px;
  border: none;
  border-radius: 14px;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: background-color 140ms ease;
}
.day-cell .dw { font-size: 10.5px; color: var(--muted); }
.day-cell .dn { font-size: 15px; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.day-cell .dot { width: 4px; height: 4px; border-radius: 50%; background: transparent; }
.day-cell .dot.on { background: var(--brand); }
.day-cell.today .dn { color: var(--brand); }
.day-cell.active { background: var(--ink); }
.day-cell.active .dw, .day-cell.active .dn { color: var(--bg); }
.day-cell.active .dot.on { background: var(--bg); }

.day-untimed { margin: 6px 0 14px; }
.day-untimed-head {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 2px;
}
.day-untimed-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.day-untimed-item.done { opacity: .5; }
.day-untimed-item.done .day-item-title { text-decoration: line-through; color: var(--muted); }

.day-check {
  flex: none;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 50%;
  border: 1.8px solid var(--faint);
  background: transparent;
  position: relative;
  transition: background-color 140ms ease, border-color 140ms ease;
}
.day-check.prio-high { border-color: var(--high); }
.day-check.prio-medium { border-color: var(--mid); }
.day-check.on { background: var(--brand); border-color: var(--brand); }
.day-check.on.prio-high { background: var(--high); border-color: var(--high); }
.day-check.on.prio-medium { background: var(--mid); border-color: var(--mid); }
.day-check.on::after {
  content: "";
  position: absolute;
  left: 6.5px;
  top: 3px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.day-check.just-done { animation: check-pop 380ms cubic-bezier(.3, 1.4, .5, 1); }
.day-check.just-done::after { transform-origin: 50% 50%; animation: check-draw 220ms 90ms cubic-bezier(.3, 1.4, .5, 1) backwards; }

.day-item-main { min-width: 0; flex: 1; }
.day-item-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.day-item-meta {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

.day-timeline { position: relative; margin-top: 6px; }

/* 签名视觉：贯穿全天的脊线 + 任务节点（呼应勾选圈语言，中心线在 x=51px） */
.day-spine {
  position: absolute;
  left: 50px;
  top: 0;
  bottom: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--fill-2);
}
.day-node {
  position: absolute;
  left: 44px; /* 全局 border-box：总宽即 14，左移半宽后圆心 44+7=51，正压脊线中心 */
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--faint);
  z-index: 2;
  pointer-events: none;
}
.day-node.prio-high { border-color: var(--high); }
.day-node.prio-medium { border-color: var(--mid); }
.day-node.done { background: var(--brand); border-color: var(--brand); }
.day-node.done.prio-high { background: var(--high); border-color: var(--high); }
.day-node.done.prio-medium { background: var(--mid); border-color: var(--mid); }
.day-node.flag { border-color: var(--high); border-style: dashed; }
.day-node.flag.done { background: var(--faint); border-color: var(--faint); border-style: solid; }
.day-hour {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid var(--line);
}
.day-hour span {
  position: absolute;
  left: 0;
  top: -7px;
  font-size: 10.5px;
  color: var(--faint);
  background: var(--bg);
  padding-right: 6px;
  font-variant-numeric: tabular-nums;
}
.day-canvas {
  position: absolute;
  left: 64px; /* 给脊线和节点让出 18px */
  right: 2px;
  top: 0;
  bottom: 0;
}
.day-block {
  position: absolute;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 10px;
  border-left: 3px solid var(--faint);
  background: var(--fill);
  overflow: hidden;
  cursor: pointer;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.day-block .day-check { width: 18px; height: 18px; margin-top: 1px; }
.day-block .day-check.on::after { left: 5.5px; top: 2.5px; }
.day-block.prio-high { border-left-color: var(--high); background: rgba(255, 59, 48, .07); }
.day-block.prio-medium { border-left-color: var(--mid); background: rgba(255, 149, 0, .08); }
.day-block.prio-low { border-left-color: var(--faint); }
.day-block.done { opacity: .5; }
.day-block.done .day-item-title { text-decoration: line-through; color: var(--muted); }

.day-flag {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1.5px dashed var(--high);
  cursor: pointer;
}
.day-flag span {
  position: absolute;
  right: 0;
  top: -8px;
  font-size: 10.5px;
  font-weight: 600;
  color: #d70015;
  background: var(--bg);
  padding: 1px 6px;
  border-radius: 6px;
  max-width: 70%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.day-flag.done { border-top-color: var(--faint); }
.day-flag.done span { color: var(--muted); text-decoration: line-through; }

.day-now {
  position: absolute;
  left: 51px; /* 从脊线出发 */
  right: 0;
  border-top: 2px solid var(--high);
  z-index: 5;
  pointer-events: none;
}
.day-now::before {
  content: "";
  position: absolute;
  left: -4px; /* 圆点扣在脊线中心上 */
  top: -5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--high);
}

.day-empty {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 56px 20px;
  color: var(--muted);
  text-align: center;
}
.day-empty strong { color: var(--ink); font-size: 16px; font-weight: 650; }
.day-empty span { font-size: 13.5px; }

/* ---------- 日常视图 ---------- */
.routine-view { padding-bottom: var(--bottom-bar-clearance); }
.routine-view[hidden], .routine-empty[hidden] { display: none; }
.routine-empty {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 48px 20px;
  color: var(--muted);
  text-align: center;
}
.routine-empty strong { color: var(--ink); font-size: 16px; font-weight: 650; }
.routine-empty span { font-size: 13.5px; line-height: 1.6; }
.routine-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.routine-intro { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 0; flex: 1; }
.routine-head .ghost-btn.small { white-space: nowrap; flex-shrink: 0; }
.routine-card {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--card, #fff);
  border: 1px solid var(--hairline, rgba(0,0,0,.08));
  border-radius: 14px;
}
.routine-card.is-disabled { opacity: .55; }
.routine-enable { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); }
.routine-enable input { width: 16px; height: 16px; }
.routine-title-input {
  flex: 1 1 140px;
  min-width: 120px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--fill-2);
  padding: 4px 2px;
}
.routine-title-input:focus { outline: none; border-bottom-color: var(--accent, #0a84ff); }
.routine-fields { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.routine-field {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
  background: var(--fill);
  border-radius: 9px;
  padding: 4px 8px;
}
.routine-field .unit { color: var(--muted); }
.routine-field input, .routine-field select {
  border: none;
  background: transparent;
  font-size: 13px;
  color: var(--ink);
  padding: 0;
}
.routine-field .routine-duration-input { width: 44px; text-align: right; }
.routine-field:focus-within { background: var(--fill-2); }
.routine-delete-btn {
  margin-left: auto;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  padding: 6px;
  cursor: pointer;
  border-radius: 8px;
}
.routine-delete-btn:active { background: var(--fill-2); }

/* ---------- 键盘焦点环 ---------- */
.task-main:focus-visible,
button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ---------- 深色主题 ---------- */
/* auto（跟随系统）在 JS 里解析成 light/dark 写到 <html data-theme>，
   首屏由 index.html <head> 内联脚本提前设置，避免闪烁。 */
[data-theme="dark"] {
  --bg: #000000;
  --panel: #1c1c1e;
  --fill: #1c1c1e;
  --fill-2: #2c2c2e;
  --ink: #f5f5f7;
  --muted: #98989f;
  --faint: #48484a;
  --icon: #aeaeb2;
  --line: rgba(255, 255, 255, .1);
  --brand: #0a84ff;
  --brand-dark: #409cff;
  --high: #ff453a;
  --mid: #ff9f0a;
  --low: #58585c;
  --ok: #30d158;
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .4);
}

[data-theme="dark"] .filter.active {
  background: #636366;
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
[data-theme="dark"] .theme-option.active {
  background: #636366;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
[data-theme="dark"] .view-option.active {
  background: #636366;
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
[data-theme="dark"] .day-block { box-shadow: none; }
[data-theme="dark"] .day-block.prio-high { background: rgba(255, 69, 58, .16); }
[data-theme="dark"] .day-block.prio-medium { background: rgba(255, 159, 10, .16); }
[data-theme="dark"] .day-flag span { color: #ff8a80; }

[data-theme="dark"] .deadline.overdue { color: #ff8a80; }

[data-theme="dark"] .bottom-bar {
  background: rgba(18, 18, 20, .82);
  border-top-color: rgba(255, 255, 255, .12);
}
[data-theme="dark"] .manual-input-box textarea { background: var(--fill-2); }
[data-theme="dark"] .hold-to-talk-btn { background: var(--fill-2); }
[data-theme="dark"] .hold-to-talk-btn.pressing,
[data-theme="dark"] .hold-to-talk-btn.recording {
  background: var(--brand);
  box-shadow: 0 6px 20px rgba(10, 132, 255, .4);
}
[data-theme="dark"] .primary-btn:disabled { background: #3a3a3c; color: #7c7c80; }

[data-theme="dark"] .snackbar { background: #2c2c2e; }
[data-theme="dark"] .reminder-banner { background: rgba(38, 38, 40, .94); }

[data-theme="dark"] .settings input[type="text"],
[data-theme="dark"] .settings input[type="password"],
[data-theme="dark"] .settings input[type="url"] { background: var(--fill-2); }
[data-theme="dark"] .ghost-btn { background: var(--fill-2); }
[data-theme="dark"] .ghost-btn:active { background: #3a3a3c; }

[data-theme="dark"] .sheet-title,
[data-theme="dark"] #sheetNote,
[data-theme="dark"] .sheet-field input[type="time"],
[data-theme="dark"] .sheet-field input[type="date"],
[data-theme="dark"] .sheet-field select,
[data-theme="dark"] .sheet-duration input { background: var(--fill-2); }
[data-theme="dark"] .sheet-seg button.active {
  background: #636366;
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
[data-theme="dark"] .keyboard-btn { background: var(--fill-2); }
[data-theme="dark"] .check-wrap span { border-color: #58585c; }
[data-theme="dark"] .task-card:has(.priority.high) .check-wrap span { border-color: var(--high); }
[data-theme="dark"] .task-card:has(.priority.medium) .check-wrap span { border-color: var(--mid); }

/* ---------- 桌面 / 无障碍 ---------- */
@media (min-width: 700px) {
  .app { padding-top: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
  .flying-text.fly-away { transform: none; }
  .reminder-banner { animation: none; }
}

/* ---------- 专注模式 (Focus Timer) ---------- */
.focus-start-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--brand);
  background: var(--fill);
  border-radius: 50%;
  font-size: 14px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
  z-index: 2; /* 确保在 task-main 的点击之上 */
}
.focus-start-btn:hover { opacity: 1; background: var(--fill-2); }
.focus-start-btn:active { transform: translateY(-50%) scale(0.92); }

.task-card.done .focus-start-btn { display: none; }

.now-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto; /* Push to right */
}

#stopFocusDialog {
  width: 100%;
  max-width: 320px;
  border: 0;
  border-radius: 16px;
  background: transparent;
}
#stopFocusDialog::backdrop { background: rgba(0, 0, 0, 0.42); }


/* ---------- Focus Overlay：双皮肤（zen 极简禅意 / hud 数据仪表盘） ----------
   皮肤由 #focusOverlay 的 data-skin 决定，值存在 settings.focusSkin，浮层右上角按钮切换。
   两套皮肤共用同一份 DOM；只属于一套的装饰件带 data-skin-only，由下面的规则显隐。
   ⚠ 进度环仍是 r=135 的 circle，stroke-dasharray / stroke-dashoffset 由 script.js
     内联写入（见 FOCUS_RING_C），这里只能管描边样式，绝不可在 CSS 里设这两个属性。
   ------------------------------------------------------------------------ */
.focus-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #fff;
  background: #050505;
  /* 只过渡配色：切皮肤时底色柔和推过去，不至于硬闪一下 */
  transition: background-color 0.3s ease, color 0.3s ease;
}
.focus-overlay[hidden] {
  display: none !important;
}

/* 皮肤专属装饰件的显隐总闸 */
.focus-overlay [data-skin-only] { display: none; }
.focus-overlay[data-skin="zen"] [data-skin-only="zen"],
.focus-overlay[data-skin="hud"] [data-skin-only="hud"] { display: block; }
/* SVG 图形元素的 display 初值是 inline，给它 block 虽然也能画出来，
   但那是块级布局值套在 SVG 上下文里；老渲染引擎上有过怪毛病，这里显式还原 */
.focus-overlay[data-skin="zen"] circle[data-skin-only="zen"],
.focus-overlay[data-skin="hud"] circle[data-skin-only="hud"] { display: inline; }

/* 右上角皮肤切换 */
.focus-skin-btn {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 16px);
  right: calc(env(safe-area-inset-right, 0px) + 16px);
  z-index: 3;
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.42);
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.focus-skin-btn:hover { color: rgba(255,255,255,0.75); border-color: rgba(255,255,255,0.28); }
.focus-skin-btn:active { transform: scale(0.92); }

/* 构图：标题贴顶，环 + 按钮作为一组在剩余空间里居中（上下各留一份 auto），
   不再用 space-between 把三段撑满整屏——那样中间会空出一大片。 */
.focus-content {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 26px)
           calc(env(safe-area-inset-right, 0px) + 20px)
           calc(env(safe-area-inset-bottom, 0px) + 26px)
           calc(env(safe-area-inset-left, 0px) + 20px);
}
.focus-title {
  flex: 0 0 auto;
  margin: 0;
  max-width: calc(100% - 112px); /* 给右上角皮肤按钮让位 */
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.focus-timer-wrap {
  flex: 0 0 auto;
  margin-top: auto;
  position: relative;
  width: min(320px, 82vw);
  height: min(320px, 82vw);
  display: flex;
  align-items: center;
  justify-content: center;
}
.focus-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.focus-ring-fill {
  fill: none;
  transition: stroke-dashoffset 1s linear;
}
.focus-time-center {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.focus-time-display {
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.focus-actions {
  flex: 0 0 auto;
  margin-top: 52px;
  margin-bottom: auto;
  display: flex;
}
.focus-action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.focus-btn {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.15s ease;
}
.focus-btn:active { transform: scale(0.95); }

/* ===== 皮肤 A：zen 极简禅意 ===== */
.focus-overlay[data-skin="zen"] { background: #050505; }
.focus-overlay[data-skin="zen"] .focus-title {
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}
@keyframes focusZenBreathe {
  0%, 100% { transform: scale(0.92); opacity: 0.02; }
  50%      { transform: scale(1.08); opacity: 0.08; }
}
.focus-breathe-bg {
  fill: #fff;
  transform-origin: 150px 150px;
  animation: focusZenBreathe 8s ease-in-out infinite;
}
.focus-overlay[data-skin="zen"] .focus-ring-track {
  fill: none;
  stroke: rgba(255,255,255,0.03);
  stroke-width: 2;
}
.focus-overlay[data-skin="zen"] .focus-ring-fill {
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  filter: url(#zenGlow);
}
.focus-overlay[data-skin="zen"] .focus-time-display {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
  font-size: min(86px, 21vw);
  font-weight: 200;
  letter-spacing: -2px;
  color: rgba(255,255,255,0.95);
}
.focus-overlay[data-skin="zen"] .focus-time-label {
  font-size: 11px;
  font-weight: 400;
  color: rgba(255,255,255,0.3);
  letter-spacing: 4px;
  margin-top: 12px;
}
.focus-overlay[data-skin="zen"] .focus-actions { gap: 60px; }
.focus-overlay[data-skin="zen"] .focus-action-item { gap: 16px; }
.focus-overlay[data-skin="zen"] .focus-action-item span {
  font-size: 11px;
  font-weight: 400;
  color: rgba(255,255,255,0.3);
  letter-spacing: 2px;
}
.focus-overlay[data-skin="zen"] .focus-btn {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.8);
}
.focus-overlay[data-skin="zen"] .focus-btn:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.3);
}
.focus-overlay[data-skin="zen"] .focus-btn.danger {
  color: rgba(255,69,58,0.8);
  border-color: rgba(255,69,58,0.2);
}
.focus-overlay[data-skin="zen"] .focus-btn.danger:hover {
  background: rgba(255,69,58,0.1);
  border-color: rgba(255,69,58,0.4);
}

/* ===== 皮肤 C：hud 数据仪表盘 ===== */
.focus-overlay[data-skin="hud"] {
  background: #0f1011;
  color: #a0a5aa;
}
.focus-grid-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 30px 30px;
  background-position: center center;
}
.focus-overlay[data-skin="hud"] .focus-skin-btn {
  border-radius: 8px;
  background: #1e2024;
  border-color: #2a2d32;
  color: #70757a;
}
.focus-overlay[data-skin="hud"] .focus-title {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  font-weight: 500;
  color: #e0e5eb;
  background: #1e2024;
  border: 1px solid #2a2d32;
  border-radius: 6px;
  padding: 6px 16px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.focus-overlay[data-skin="hud"] .focus-ring-track {
  fill: none;
  stroke: #2a2d32;
  stroke-width: 16;
  stroke-dasharray: 4 6; /* 虚线轨道 = 刻度感 */
}
.focus-ring-inner {
  fill: none;
  stroke: #1a1c1e;
  stroke-width: 1;
}
.focus-overlay[data-skin="hud"] .focus-ring-fill {
  stroke: #ccff00;
  stroke-width: 16;
  stroke-linecap: butt;
}
.focus-overlay[data-skin="hud"] .focus-time-display {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: min(72px, 18vw);
  font-weight: 600;
  color: #fff;
  letter-spacing: -2px;
}
.focus-overlay[data-skin="hud"] .focus-time-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  font-weight: 700;
  color: #ccff00;
  letter-spacing: 1px;
  margin-top: 12px;
}
.focus-overlay[data-skin="hud"] .focus-actions {
  gap: 16px;
  width: 100%;
  justify-content: center;
}
.focus-overlay[data-skin="hud"] .focus-action-item {
  gap: 8px;
  flex: 1 1 0;
  max-width: 140px;
}
.focus-overlay[data-skin="hud"] .focus-action-item span {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  font-weight: 600;
  color: #70757a;
  letter-spacing: 1px;
}
.focus-overlay[data-skin="hud"] .focus-btn {
  width: 100%;
  height: 56px;
  border-radius: 8px;
  background: #1e2024;
  border: 1px solid #2a2d32;
  color: #fff;
}
.focus-overlay[data-skin="hud"] .focus-btn:hover {
  background: #2a2d32;
  border-color: #3e4249;
}
.focus-overlay[data-skin="hud"] .focus-btn.danger { color: #ff453a; }

/* 矮屏（如 iPhone SE 375×667）收一档，别让按钮被挤出屏幕 */
@media (max-height: 720px) {
  .focus-timer-wrap {
    width: min(258px, 72vw);
    height: min(258px, 72vw);
  }
  .focus-actions { margin-top: 34px; }
  .focus-overlay[data-skin="zen"] .focus-time-display { font-size: min(70px, 18vw); }
  .focus-overlay[data-skin="hud"] .focus-time-display { font-size: min(58px, 15vw); }
}

@media (prefers-reduced-motion: reduce) {
  .focus-breathe-bg {
    animation: none;
    opacity: 0.05;
    transform: scale(1);
  }
  .focus-ring-fill { transition: none; }
  .focus-overlay, .focus-btn, .focus-skin-btn { transition: none; }
}

/* ---------- 统计面板 Premium UI ---------- */
.stats-view {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 0;
  padding-bottom: var(--bottom-bar-clearance);
}

.glass-panel {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .glass-panel {
  background: rgba(30, 30, 30, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.glass-panel h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

.stats-hero {
  display: flex;
  justify-content: center;
  align-items: center;
}

.stats-hero-ring {
  position: relative;
  width: 160px;
  height: 160px;
}

.stats-hero-ring .ring-track {
  fill: none;
  stroke: var(--fill-2);
  stroke-width: 8;
}

.stats-hero-ring .ring-fill {
  fill: none;
  stroke: url(#statsRingGradient);
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1);
  stroke-dasharray: 439.8; /* 2 * PI * 70 */
  stroke-dashoffset: 439.8;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

[data-theme="dark"] .stats-hero-ring .ring-track {
  stroke: #3a3a3c;
}

.stats-hero-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.time-value {
  font-size: 28px;
  font-weight: 800;
  background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
}

.time-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  margin-top: 4px;
}

.stacked-bar {
  display: flex;
  height: 20px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--fill-2);
  margin-bottom: 16px;
}

.stacked-segment {
  height: 100%;
  transition: flex-basis 0.5s ease;
}

.tags-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

.legend-color {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.heatmap-wrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.heatmap-months {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 12px; /* 与 .heatmap-grid 列宽一致，逐列对齐 */
  gap: 4px;                /* 与 .heatmap-grid 间距一致 */
  font-size: 10px;
  color: var(--muted);
  height: 12px;
  padding-left: 20px; /* 星期标签列 12px + .heatmap-body 间距 8px */
}

.heatmap-months span {
  white-space: nowrap; /* 「N月」比 12px 列宽，向右溢出显示，不挤动列 */
}

.heatmap-body {
  display: flex;
  gap: 8px;
}

.heatmap-days {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: none; /* 内容溢出滚动时不许被压缩，否则下面的定宽失效 */
  width: 12px; /* 定宽，月份行的 padding-left: 20px 才能精确对齐格子列 */
  font-size: 10px;
  color: var(--muted);
  line-height: 12px;
  padding-top: 4px; /* match the grid rows */
}

.heatmap-days span {
  height: 12px;
}

.heatmap-container {
  overflow-x: auto;
  padding-bottom: 8px;
}

.heatmap-grid {
  display: grid;
  grid-template-rows: repeat(7, 12px);
  grid-auto-flow: column;
  gap: 4px;
}

.heat-cell {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: #ebedf0;
}
.heat-empty { background: transparent !important; }

[data-theme="dark"] .heat-cell {
  background: #161b22;
}
[data-theme="dark"] .heat-empty { background: transparent !important; }

/* GitHub Green Colors */
.heat-lvl-1 { background: #9be9a8 !important; }
.heat-lvl-2 { background: #40c463 !important; }
.heat-lvl-3 { background: #30a14e !important; }
.heat-lvl-4 { background: #216e39 !important; }

[data-theme="dark"] .heat-lvl-1 { background: #0e4429 !important; }
[data-theme="dark"] .heat-lvl-2 { background: #006d32 !important; }
[data-theme="dark"] .heat-lvl-3 { background: #26a641 !important; }
[data-theme="dark"] .heat-lvl-4 { background: #39d353 !important; }

/* In order to make gradients work on strokes we need defs, we'll inject it via script or assume it's there. Actually, let's just use CSS solid color for now to be safe, or #00f2fe */
.stats-hero-ring .ring-fill {
  stroke: #00f2fe;
}