styles.css

/*
  时间尺 (time-logger)
  Copyright © 2026 wowayou — https://github.com/wowayou/time-logger
  SPDX-License-Identifier: AGPL-3.0-or-later
  Commercial licensing available on request; contact via the repository above.

  v33 视觉令牌层（阶段0 提案 D 定稿）：
  - 双色板：暗=石墨冷（默认）、亮=冷白（v72 起，见下）；三个有彩桶色均过 dataviz 六项校验
  - v69（D11）：亮色底色冷移一档 #f7f5f1→#f6f6f5（仅 --bg；卡面暖令牌保留），对比度重校全部持平或微升
  - v72（推翻 D11 折中，SPEC-004）：亮色整体回归冷白——--bg/--input/--track/--border/--shadow-1/2/3
    全部去暖（`rgba(48,42,30,…)`→`rgba(28,32,44,…)`）；--card 与三桶彩色本体/tint、--text/--muted/--faint
    不动；WCAG 对比度只升不降（新 bg 更亮）
  - 结构令牌全站唯一：圆角 12/16/22、动效 140/280ms、字阶 12/13/15/17（v1.5.2 SPEC-016 A 期扩充，见下方结构令牌块）
  - 海拔用阴影（亮）/ 阴影+顶光（暗），描边整体降级为 hairline 或透明占位
  - 行为零变更：选择器、布局机制（P13-P16 护栏）与 v32 完全一致
*/
    /* === 结构令牌（不随主题变） ===
       SPEC-016 A 期（v1.5.2）收敛：令牌块以外的 font-size / border-radius 一律引用令牌
       （或 inherit / 0 / 50%）；确属例外的裸值必须在同一行附一条以「raw:」开头、
       写明理由的注释，project_audit.py 的 audit_css_tokens 按行检查并封顶例外数量。
       - 圆角：sm 8 小控件（36px 级按钮、日历格、提示气泡）/ ctl 12 输入与 sheet 内分组 /
         card 16 页面卡片 / sheet 22 / pill 胶囊与「高度一半」的条形端。
       - 字号：cap 12 / ui 13 / ui-strong 14 / body 15 / input 16 / title 17。
         --fs-input 是输入控件的下限（iOS 聚焦放大红线，不得调小），body 基准、sheet
         头部文字按钮、FAB 主文案同值共用。展示用大数字（hero、时间分析）按版式单定，
         走 raw 例外，不进字阶。
       - 间距：4px 刻度 --sp-1…--sp-6（4/8/12/16/24/32），A 期只把恰好落在刻度上的值
         换成令牌；2/6/10/14 等半档与奇数值暂保留原值，留待 B 期按组件收敛（见 SPEC-016）。
       - 字重：600 / 700 两档为主（A 期把 650 并入 600），500/400 各有零星用处。 */
    :root {
      --r-sm: 8px;
      --r-ctl: 12px;
      --r-card: 16px;
      --r-sheet: 22px;
      --r-pill: 999px;
      --fs-cap: 12px;
      --fs-ui: 13px;
      --fs-ui-strong: 14px;
      --fs-body: 15px;
      --fs-input: 16px;
      --fs-title: 17px;
      --sp-1: 4px;
      --sp-2: 8px;
      --sp-3: 12px;
      --sp-4: 16px;
      --sp-5: 24px;
      --sp-6: 32px;
      --t-fast: 140ms ease-out;
      --control-h: 44px;
    }
    /* v84：`color-scheme` 与四处令牌块一一配对（默认暗 / 跟随系统亮 / 显式亮 / 显式暗）。
       缺席时（此前一直如此）UA 按 light 画它自己的表面：滚动条与 gutter、原生控件、
       文本选中，以及——这条才是真机上看得见的那个——**合成器的基础背景色**；窗口被
       系统缩放（Android 退出/进入动效）时未绘制区域用它填充，于是暗色应用退出时露出
       白边（维护者 S23 实录，见 docs/v82-v83-device-acceptance.md）。**必须四处都写**：
       「跟随系统」时根本没有 data-theme 属性，只挂在 html[data-theme] 上等于对大多数
       用户不生效。 */
    /* === 暗·石墨（默认） === */
    :root {
      color-scheme: dark;
      --bg: #0e0f13;
      --card: #16171e;
      --input: #1d1f29;
      /* v76：控件表面分层修正——拆「井」（--input，凹陷输入态）与「壳」
         （--chrome，view-tabs 未选中态/日期导航按钮的浮起底）。暗色本就
         --input(#1d1f29) 亮于 --bg(#0e0f13)，没有倒挂问题，--chrome 直接
         复用 --input 的暗色值，暗色主题零视觉变化。 */
      --chrome: #1d1f29;
      --border: rgba(255,255,255,0.09);
      --track: #262838;
      --accent: #a99fff;
      --accent-bg: rgba(139,124,255,0.14);
      --maintain: #63c894;
      --maintain-bg: rgba(70,168,120,0.14);
      --leak: #e19a59;
      --leak-bg: rgba(201,128,60,0.16);
      --text: #e8e9f1;
      --muted: #9fa1b8;
      --faint: #898ba2;
      --danger: #e0596b;
      --shadow-1: 0 1px 2px rgba(0,0,0,0.40);
      --shadow-2: 0 4px 16px rgba(0,0,0,0.35);
      --shadow-3: 0 16px 48px rgba(0,0,0,0.50);
      --top-light: inset 0 1px 0 rgba(255,255,255,0.045);
    }
    /* === 亮·宣纸（跟随系统） === */
    @media (prefers-color-scheme: light) {
      :root {
        color-scheme: light;
        --bg: #eceef3;
        --card: #ffffff;
        --input: #e2e5ea;
        /* v76：亮色下 --input(#e2e5ea) 比 --bg(#eceef3) 更暗，若拿它当 view-tabs/
           日期导航的底会让顶部控件带比纯白内容卡更「重」，层级倒挂。--chrome 专门
           给这类壳表面，比 --bg 更亮（更浮），--input 本身留给真正凹陷的输入井。 */
        --chrome: #f2f3f7;
        --border: rgba(28,32,44,0.08);
        --track: #e2e5eb;
        --accent: #5745c7;
        --accent-bg: #efecfc;
        --maintain: #237a52;
        --maintain-bg: #e9f4ee;
        --leak: #9a4f1e;
        --leak-bg: #f8ede4;
        --text: #33323b;
        --muted: #686570;
        --faint: #66646d;
        --danger: #ae414f;
        --shadow-1: 0 1px 2px rgba(28,32,44,0.06), 0 2px 8px rgba(28,32,44,0.05);
        --shadow-2: 0 2px 6px rgba(28,32,44,0.07), 0 10px 28px rgba(28,32,44,0.08);
        --shadow-3: 0 8px 20px rgba(28,32,44,0.10), 0 28px 64px rgba(28,32,44,0.14);
        --top-light: none;
      }
    }
    /* === 手动覆盖（优先级高于 media query） === */
    html[data-theme="light"] {
      color-scheme: light;
      --bg: #eceef3;
      --card: #ffffff;
      --input: #e2e5ea;
      --chrome: #f2f3f7;
      --border: rgba(28,32,44,0.08);
      --track: #e2e5eb;
      --accent: #5745c7;
      --accent-bg: #efecfc;
      --maintain: #237a52;
      --maintain-bg: #e9f4ee;
      --leak: #9a4f1e;
      --leak-bg: #f8ede4;
      --text: #33323b;
      --muted: #686570;
      --faint: #66646d;
      --danger: #ae414f;
      --shadow-1: 0 1px 2px rgba(28,32,44,0.06), 0 2px 8px rgba(28,32,44,0.05);
      --shadow-2: 0 2px 6px rgba(28,32,44,0.07), 0 10px 28px rgba(28,32,44,0.08);
      --shadow-3: 0 8px 20px rgba(28,32,44,0.10), 0 28px 64px rgba(28,32,44,0.14);
      --top-light: none;
    }
    html[data-theme="dark"] {
      color-scheme: dark;
      --bg: #0e0f13;
      --card: #16171e;
      --input: #1d1f29;
      --chrome: #1d1f29;
      --border: rgba(255,255,255,0.09);
      --track: #262838;
      --accent: #a99fff;
      --accent-bg: rgba(139,124,255,0.14);
      --maintain: #63c894;
      --maintain-bg: rgba(70,168,120,0.14);
      --leak: #e19a59;
      --leak-bg: rgba(201,128,60,0.16);
      --text: #e8e9f1;
      --muted: #9fa1b8;
      --faint: #898ba2;
      --danger: #e0596b;
      --shadow-1: 0 1px 2px rgba(0,0,0,0.40);
      --shadow-2: 0 4px 16px rgba(0,0,0,0.35);
      --shadow-3: 0 16px 48px rgba(0,0,0,0.50);
      --top-light: inset 0 1px 0 rgba(255,255,255,0.045);
    }

    * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
    html { height: 100%; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
    /* v86：窄屏隐藏根滚动条。真机录屏逐帧放大后确认，窗口右缘那道「白边」内部有
       滚动条滑块——它是**经典滚动条占用的轨道**（S23 上 Chrome 画的是经典滚动条，
       不是 overlay），`scrollbar-gutter: stable` 还把它恒定预留，于是通高一条浅色带
       贴着窗口右缘，系统缩放动效里尤其显眼。手机上滚动条本就不该占位（iOS/多数
       Android 都是 overlay），桌面保留它做滚动位置指示——按宽度断点分流，与本项目
       其它响应式判据同源（不按 pointer/设备名）。手法与 .wheel-col 既有做法一致。 */
    @media (max-width: 719px) {
      html {
        scrollbar-gutter: auto;
        scrollbar-width: none;
      }
      html::-webkit-scrollbar { width: 0; height: 0; }
    }
    body {
      background: var(--bg);
      color: var(--text);
      font-family: -apple-system, 'PingFang SC', 'Helvetica Neue', system-ui, sans-serif;
      font-size: var(--fs-input);
      line-height: 1.5;
      min-height: 100%;
      min-height: -webkit-fill-available;
      min-height: 100svh;
      display: flex;
      flex-direction: column;
      overflow-x: hidden;
    }
    /* P15: boot latch narrowed to the JS-rendered regions only. Hiding all of
       .app while .footer (outside it) stayed visible painted "a blank page
       with two floating buttons" during module load on slow devices — the SE2
       refresh flash. Static chrome (header, tabs, date-nav shell, footer) now
       paints with the HTML parse; the data regions fade in together after the
       first render() (render runs before app-ready, so they reveal already
       correct — including add-btn hidden on non-day views). */
    body:not(.app-ready):not(.boot-restored) :is(#add-btn, .ruler, .tl-head, #timeline) { opacity: 0; }
    :is(#add-btn, .ruler, .tl-head, #timeline) { transition: opacity 0.18s ease; }
    @media (prefers-reduced-motion: reduce) {
      :is(#add-btn, .ruler, .tl-head, #timeline) { transition: none; }
    }
    button { touch-action: manipulation; }
    :where(button, a, input, textarea, select, [tabindex]):focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }
    .app {
      width: 100%;
      flex: 1 0 auto;
      max-width: 600px;
      margin: 0 auto;
      padding: env(safe-area-inset-top) clamp(var(--sp-3), 4vw, var(--sp-4)) 18px;
      container-type: inline-size;
    }

    /* Header */
    .hdr {
      padding: var(--sp-3) 0 10px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: var(--sp-2);
      min-width: 0;
    }
    .hdr-brand {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: var(--sp-2);
    }
    .hdr-icon-link,
    .hdr-action-btn {
      width: 44px;
      height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 44px;
      border-radius: var(--r-ctl);
      color: var(--text);
      text-decoration: none;
    }
    .hdr-action-btn {
      border: none;
      background: transparent;
      color: var(--text);
      font-size: var(--fs-title);
      font-family: inherit;
    }
    /* header「···」沿用 stroke 图标渲染约定（app.js 注入 iconSvg('more')）。 */
    .hdr-action-btn svg {
      width: 20px;
      height: 20px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .hdr-icon-link:active,
    .hdr-action-btn:active { background: var(--input); }
    .hdr-icon {
      display: block;
      width: 32px;
      height: 32px;
      border-radius: var(--r-sm);
    }
    .hdr-title {
      flex: 0 0 auto;
      color: var(--text);
      font-size: var(--fs-title);
      font-weight: 600;
      line-height: 1.15;
      letter-spacing: 0.01em;
      white-space: nowrap;
    }
    .hdr-brand-copy {
      min-width: 0;
      display: flex;
      align-items: baseline;
      gap: var(--sp-2);
    }
    /* v61：里程碑文案比旧「使用第 N 天」长一倍，且天数会涨到三、四位数。
       允许收缩并省略号收尾（`0 1 auto` + `min-width:0`），宁可截断也不撞上
       「···」按钮——320px + 三位数时两者已经贴脸。完整文案在 aria-label 里。 */
    .usage-day {
      flex: 0 1 auto;
      min-width: 0;
      color: var(--muted);
      font-size: var(--fs-cap);
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    /* v1.6.0（D32）：今天恰好是第 7/30/100… 个记录日时整天换成 accent 浅底胶囊，与周期
       标签的「今天」同一强调色；文字不变、不加图标、不加动效。 */
    .usage-day.is-milestone {
      color: var(--accent);
      background: var(--accent-bg);
      font-weight: 600;
      padding: 0 var(--sp-2);
      border-radius: var(--r-pill);
    }
    body:not(.app-ready):not(.boot-restored) .usage-day { visibility: hidden; }
    .hdr-actions {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      color: var(--text);
    }
    .seg {
      display: inline-flex;
      align-items: center;
      background: var(--input);
      border: 1px solid transparent;
      border-radius: var(--r-ctl);
      padding: 2px;
      gap: 2px;
      flex-shrink: 0;
    }
    .seg button {
      background: transparent;
      border: none;
      color: var(--muted);
      border-radius: calc(var(--r-ctl) - 2px);
      font-size: var(--fs-cap);
      line-height: 1;
      font-family: inherit;
      padding: 7px 9px;
      cursor: pointer;
      white-space: nowrap;
      transition: background var(--t-fast), color var(--t-fast);
    }
    .seg button.active {
      background: var(--card);
      color: var(--text);
      font-weight: 600;
      box-shadow: var(--shadow-1);
    }
    .theme-seg {
      flex: 0 0 auto;
      min-width: 0;
    }
    .theme-seg button { padding: 7px var(--sp-2); }
    @container (max-width: 390px) {
      .hdr-title { display: none; }
    }
    /* Add button */
    /* R2+FAB（v47）：右下角悬浮胶囊。fixed 相对视口——宽屏时把右偏移锚到 600px
       居中内容列的右边缘内 16px（`50vw-284px`＝(100vw-600)/2+16），窄屏回落 16px。 */
    .fab {
      position: fixed;
      right: max(16px, calc(50vw - 284px));
      bottom: calc(16px + env(safe-area-inset-bottom));
      z-index: 70;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 1px;
      min-height: 52px;
      padding: 9px 18px;
      background: var(--accent);
      color: #fff;
      border: none;
      border-radius: var(--r-pill);
      font-family: inherit;
      cursor: pointer;
      box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 22%, transparent);
      transition: transform var(--t-fast), box-shadow var(--t-fast);
    }
    .fab-main { font-size: var(--fs-input); font-weight: 600; line-height: 1.15; }
    .fab-sub {
      font-size: var(--fs-cap);
      color: rgba(255,255,255,0.78);
      font-variant-numeric: tabular-nums;
      line-height: 1.1;
    }
    .fab:active {
      transform: scale(0.97);
      box-shadow: 0 1px 5px color-mix(in srgb, var(--accent) 18%, transparent);
    }
    .fab[hidden] { display: none; }
    @media (prefers-reduced-motion: reduce) { .fab { transition: none; } }
    /* 列表底部渐隐遮罩 + 避让：FAB 之下、内容之上。 */
    .list-fade {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      height: 56px;
      z-index: 65;
      pointer-events: none;
      background: linear-gradient(to bottom, transparent, var(--bg));
    }
    .list-fade[hidden] { display: none; }

    /* Unified command tooltip */
    button[data-tip] { position: relative; }
    button[data-tip]::after {
      content: attr(data-tip);
      position: absolute;
      left: 50%;
      bottom: calc(100% + 8px);
      transform: translateX(-50%);
      z-index: 40;
      width: 0;
      max-width: 0;
      padding: 0;
      overflow: hidden;
      border-radius: var(--r-sm);
      background: var(--text);
      color: var(--bg);
      font-size: var(--fs-cap);
      line-height: 1.35;
      font-weight: 500;
      white-space: normal;
      text-align: left;
      box-shadow: var(--shadow-2);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.12s ease, visibility 0s linear 0.12s;
      transition-delay: 0s;
    }
    button[data-tip]::before {
      content: "";
      position: absolute;
      left: 50%;
      bottom: calc(100% + 3px);
      transform: translateX(-50%);
      z-index: 41;
      border: 0 solid transparent;
      border-top-color: var(--text);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.12s ease, visibility 0s linear 0.12s;
      transition-delay: 0s;
    }
    button[data-tip][data-tip-pos="bottom"]::after {
      top: calc(100% + 8px);
      bottom: auto;
    }
    button[data-tip][data-tip-pos="bottom"]::before {
      top: calc(100% + 3px);
      bottom: auto;
      border-top-color: transparent;
      border-bottom-color: var(--text);
    }
    @media (hover: hover) and (pointer: fine) {
      button[data-tip]:hover::after,
      button[data-tip]:hover::before {
        opacity: 1;
        visibility: visible;
        transition-delay: 800ms, 800ms;
      }
      button[data-tip]:hover::after {
        width: max-content;
        max-width: min(260px, calc(100vw - 32px));
        padding: 7px 9px;
      }
      button[data-tip]:hover::before {
        border-width: 5px;
      }
    }
    button[data-tip]:focus-visible::after,
    button[data-tip]:focus-visible::before {
      opacity: 1;
      visibility: visible;
      transition-delay: 0s, 0s;
    }
    button[data-tip]:focus-visible::after {
      width: max-content;
      max-width: min(260px, calc(100vw - 32px));
      padding: 7px 9px;
    }
    button[data-tip]:focus-visible::before {
      border-width: 5px;
    }

    /* View controls */
    .view-box {
      display: grid;
      gap: 10px;
      margin-bottom: var(--sp-3);
    }
    .view-tabs {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      /* v76：覆盖 .seg 共享的 --input 底——view-tabs 未选中态是「壳」不是「井」，
         用 --chrome（暗色下与 --input 同值，零变化；亮色下比 --bg 更浮）。同优先级
         单类选择器，源码顺序在 .seg 之后即生效，不改 .seg 本身（theme-seg/
         bucket-seg/record-mode-seg 等其它复用者不受影响）。 */
      background: var(--chrome);
    }
    .view-tabs button {
      min-width: 0;
      font-size: var(--fs-ui);
    }
    .date-nav {
      width: 100%;
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr) 44px;
      gap: var(--sp-2);
      align-items: center;
    }
    #today-btn {
      grid-column: 1 / -1;
      width: 100%;
    }
    @container (min-width: 430px) {
      .date-nav {
        grid-template-columns: 44px minmax(0, 1fr) 44px minmax(76px, auto);
      }
      #today-btn {
        grid-column: auto;
      }
      /* R5：显式 grid 轨道即便对应 item 被 [hidden] 也照样保留空间——「回到今天」条件
         隐藏后需要 collapse 掉第 4 列，否则右侧留一块死区。 */
      .date-nav:has(#today-btn[hidden]) {
        grid-template-columns: 44px minmax(0, 1fr) 44px;
      }
    }
    .nav-btn {
      min-width: 0;
      height: 44px;
      /* v76：日期导航按钮（‹ › 回到今天）是壳表面，不是输入井——见 .view-tabs
         同批注释。 */
      background: var(--chrome);
      color: var(--text);
      border: 1px solid transparent;
      border-radius: var(--r-ctl);
      font-size: var(--fs-ui-strong);
      font-family: inherit;
      cursor: pointer;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      box-shadow: none;
    }
    .nav-btn:active { opacity: 0.75; }
    .period-label {
      min-width: 0;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      /* v76：与相邻的 .nav-btn 同一条 .date-nav 行，必须同底色——否则三个元素
         一深一浅比只做半条更显眼。period-label 本身不是按钮，但视觉上是同一条
         「日期导航」壳的一部分。 */
      background: var(--chrome);
      border: 1px solid transparent;
      border-radius: var(--r-ctl);
      color: var(--text);
      font-size: var(--fs-ui-strong);
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding: 0 10px;
      box-shadow: none;
    }
    /* R5：当前周期含今天时的常驻高亮字样——即便「回到今天」按钮已隐藏，这里仍
       给一个「你在今天」的持续信号。 */
    .period-today-badge {
      color: var(--accent);
      font-weight: 700;
      margin-left: 2px;
    }

    /* Form */
    .fl { margin-bottom: 11px; min-width: 0; }
    .fl-label { font-size: var(--fs-cap); color: var(--muted); margin-bottom: var(--sp-1); }
    .inp {
      width: 100%;
      background: var(--input);
      border: 1px solid transparent;
      border-radius: var(--r-ctl);
      color: var(--text);
      font-size: var(--fs-input);
      font-family: inherit;
      padding: 10px var(--sp-3);
      min-height: var(--control-h);
      line-height: 1.25;
      outline: none;
      transition: border-color var(--t-fast), background var(--t-fast);
    }
    .inp:focus { border-color: var(--accent); background: var(--card); }
    .ta {
      resize: none;
      overflow: hidden;
      min-height: 52px;
      line-height: 1.35;
      white-space: pre-wrap;
    }
    /* When a long note would grow the textarea past the viewport cap (esp. iOS
       keyboard shrinking visualViewport), autosize adds this so it scrolls
       internally instead of pushing the save ✓ off-screen. */
    .ta.ta-capped { overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .edit-what-input { margin-bottom: var(--sp-2); }
    .edit-tag-input { margin-bottom: 10px; }

    /* Chips */
    .chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 7px; }
    .chip-group { display: grid; gap: var(--sp-1); margin-bottom: var(--sp-2); }
    .chip-group-label {
      color: var(--muted);
      font-size: var(--fs-cap);
    }
    .chip {
      min-height: 44px;
      padding: var(--sp-2) 15px;
      border-radius: var(--r-pill);
      border: 1px solid var(--border);
      background: transparent;
      color: var(--muted);
      font-size: var(--fs-ui);
      font-family: inherit;
      cursor: pointer;
      transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
    }
    .chip.sel {
      background: var(--accent-bg);
      border-color: var(--accent);
      color: var(--accent);
      font-weight: 600;
    }
    .chip-maintain.sel { background: var(--maintain-bg); border-color: var(--maintain); color: var(--maintain); }
    .chip-leak.sel { background: var(--leak-bg); border-color: var(--leak); color: var(--leak); }
    .chip-draft { border-style: dashed; cursor: default; }
    .form-hint {
      margin-top: 5px;
      color: var(--muted);
      font-size: var(--fs-cap);
      line-height: 1.35;
    }
    .form-inline-error {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      padding: 9px 10px;
      border: 1px solid var(--danger);
      border-radius: var(--r-ctl);
      background: color-mix(in srgb, var(--danger) 12%, transparent);
      color: var(--text);
      font-size: var(--fs-ui);
      line-height: 1.35;
    }
    .form-inline-error[hidden] { display: none; }
    /* v1.5.0：自定义标签撞上别的桶已有的同名标签——醒目的归属提醒，色相＝它真正会记入
       的桶（与草稿 chip 同色），一键「改选 X」。不拦保存：规则本身没变，只是必须看得见。 */
    .tag-owner-warn {
      --warn-fg: var(--accent);
      --warn-bg: var(--accent-bg);
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 6px var(--sp-3);
      margin-top: 6px;
      padding: 9px 10px;
      border-left: 3px solid var(--warn-fg);
      border-radius: var(--r-ctl);
      background: var(--warn-bg);
      color: var(--text);
      font-size: var(--fs-ui);
      line-height: 1.4;
    }
    .tag-owner-warn[data-b="maintain"] { --warn-fg: var(--maintain); --warn-bg: var(--maintain-bg); }
    .tag-owner-warn[data-b="leak"] { --warn-fg: var(--leak); --warn-bg: var(--leak-bg); }
    .tag-owner-warn[hidden] { display: none; }
    .tag-owner-warn .mini-btn { font-size: var(--fs-ui); }

    .form-time-row {
      display: flex;
      align-items: center;
      gap: var(--sp-2);
      min-height: var(--control-h);
      padding: 9px 10px;
      border: 1px solid transparent;
      border-radius: var(--r-ctl);
      background: var(--input);
    }
    .start-time-trigger {
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
      font-family: inherit;
      font-size: var(--fs-body);
      font-variant-numeric: tabular-nums;
      font-weight: 600;
      color: var(--accent);
      text-decoration: underline;
      text-underline-offset: 3px;
      border-radius: var(--r-sm);
      flex-shrink: 0;
    }
    .start-time-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    .start-time-trigger:focus:not(:focus-visible) { outline: none; }
    .start-time-trigger:active { opacity: 0.75; }
    .form-time-arrow {
      color: var(--muted);
      font-size: var(--fs-ui);
      font-variant-numeric: tabular-nums;
      min-width: 0;
    }
    .start-time-section[hidden] { display: none; }

    /* Wheel picker */
    .wheel-picker {
      display: flex;
      height: 200px;
      border-radius: var(--r-ctl);
      overflow: hidden;
      border: 1px solid var(--border);
      background: var(--input);
      position: relative;
      z-index: 0;
    }
    .wheel-col {
      flex: 1;
      /* 必须压在 .wheel-highlight 之上：亮色 --accent-bg 不透明，
         高亮带盖在文字上会吞掉选中行（P22）。 */
      position: relative;
      z-index: 1;
      overflow-y: scroll;
      scroll-snap-type: y mandatory;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      outline: none;
      -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 28%, black 72%, transparent 100%);
      mask-image: linear-gradient(to bottom, transparent 0%, black 28%, black 72%, transparent 100%);
    }
    .wheel-col::-webkit-scrollbar { display: none; }
    .wheel-col-date { flex: 1.8; }
    .wheel-item {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      scroll-snap-align: center;
      font-size: var(--fs-ui-strong);
      color: var(--text);
      cursor: pointer;
      user-select: none;
      white-space: nowrap;
      padding: 0 var(--sp-1);
    }
    .wheel-item.is-selected {
      color: var(--text);
      font-weight: 700;
    }
    .wheel-col:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
    .wheel-col-date .wheel-item { font-size: var(--fs-cap); }
    .wheel-divider {
      width: 1px;
      background: var(--border);
      flex-shrink: 0;
      align-self: stretch;
    }
    .wheel-highlight {
      position: absolute;
      left: 0; right: 0;
      top: 50%;
      height: 40px;
      transform: translateY(-50%);
      border-top: 1px solid var(--accent);
      border-bottom: 1px solid var(--accent);
      background: var(--accent-bg);
      pointer-events: none;
      z-index: 0;
    }
    .wheel-actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 6px;
    }
    .wheel-now-btn {
      background: transparent;
      border: none;
      color: var(--accent);
      font-size: var(--fs-ui);
      font-family: inherit;
      cursor: pointer;
      padding: var(--sp-1) 0;
    }
    /* Desktop datetime picker */
    .dt-picker {
      display: grid;
      gap: 9px;
      position: relative;
    }
    .dt-trigger {
      display: flex;
      align-items: center;
      gap: var(--sp-2);
      height: var(--control-h);
      background: var(--input);
      color: var(--text);
      border: 1px solid transparent;
      border-radius: var(--r-ctl);
      font-size: var(--fs-body);
      font-family: inherit;
      cursor: pointer;
      padding: 0 var(--sp-3);
      width: 100%;
      text-align: left;
      white-space: nowrap;
    }
    .dt-trigger:active { opacity: 0.75; }
    .dt-cal-ico {
      flex-shrink: 0;
      margin-left: auto;
      color: var(--muted);
      width: 16px;
      height: 16px;
    }
    .dt-pop {
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      z-index: 100;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--r-card);
      box-shadow: var(--shadow-2), var(--top-light);
      padding: var(--sp-3);
      width: 280px;
      max-width: calc(100vw - 24px);
    }
    .dt-pop.dt-pop-up {
      top: auto;
      bottom: calc(100% + 6px);
    }
    .dt-cal-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: var(--sp-2);
      font-size: var(--fs-ui-strong);
      font-weight: 600;
      color: var(--text);
    }
    .dt-nav {
      background: transparent;
      border: none;
      color: var(--text);
      font-size: var(--fs-title);
      font-family: inherit;
      cursor: pointer;
      padding: 2px var(--sp-2);
      border-radius: var(--r-sm);
    }
    .dt-nav:hover { background: var(--input); }
    .dt-cal-dow {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      text-align: center;
      font-size: var(--fs-cap);
      color: var(--muted);
      margin-bottom: var(--sp-1);
    }
    .dt-cal-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 2px;
    }
    .dt-day {
      aspect-ratio: 1;
      background: transparent;
      border: none;
      border-radius: var(--r-sm);
      font-size: var(--fs-ui);
      font-family: inherit;
      cursor: pointer;
      color: var(--text);
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .dt-day:hover:not(:disabled) { background: var(--input); }
    .dt-day.is-today { color: var(--accent); font-weight: 600; }
    .dt-day.is-sel { background: var(--accent); color: #fff; }
    .dt-day.is-sel:hover { background: var(--accent); }
    .dt-blank { pointer-events: none; color: transparent; cursor: default; }
    .dt-time {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--sp-2);
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid var(--border);
    }
    .dt-step {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }
    .dt-step-btn {
      background: transparent;
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      color: var(--text);
      font-size: var(--fs-cap);
      font-family: inherit;
      cursor: pointer;
      padding: 2px var(--sp-2);
      line-height: 1;
    }
    .dt-step-btn:hover { background: var(--input); }
    .dt-step-inp {
      width: 44px;
      text-align: center;
      font-size: var(--fs-input);
      font-family: inherit;
      background: var(--input);
      color: var(--text);
      border: 1px solid transparent;
      border-radius: var(--r-sm);
      padding: 2px 0;
      -moz-appearance: textfield;
    }
    .dt-step-inp::-webkit-outer-spin-button,
    .dt-step-inp::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
    .dt-colon {
      font-size: var(--fs-title);
      font-weight: 600;
      color: var(--text);
      padding-bottom: 2px;
    }
    .dt-now {
      margin-left: var(--sp-1);
      background: transparent;
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      color: var(--accent);
      font-size: var(--fs-ui);
      font-family: inherit;
      cursor: pointer;
      padding: 3px 10px;
    }
    .dt-now:hover { background: var(--accent-bg); }
    .dt-precise { display: grid; gap: var(--sp-1); }
    .dt-precise-label { font-size: var(--fs-cap); color: var(--muted); }
    .dt-error {
      color: var(--danger);
      font-size: var(--fs-cap);
      line-height: 1.35;
      min-height: 16px;
    }
    .dt-error[hidden] {
      display: none;
    }

    /* Ruler */
    .ruler {
      background: var(--card);
      border-radius: var(--r-card);
      padding: 14px var(--sp-4);
      margin-bottom: var(--sp-3);
      min-height: 82px;
      box-shadow: var(--shadow-1);
    }
    .ruler-bar {
      height: 9px;
      border-radius: var(--r-pill);
      /* 新发现：分段缝原为 transparent，实际颜色由父级 --card 透出——亮色下 --card
         接近白（缝极淡）、暗色下 --card 是深石墨（缝显重），两主题分段视觉重量不一致。
         改用已经按主题配平过的 --border（既有 hairline 令牌），缝的视觉重量主题间一致。 */
      background: var(--border);
      display: flex;
      overflow: hidden;
      margin-bottom: 9px;
      gap: 2px;
    }
    .ruler-bar div { transition: flex 0.3s; }
    .ruler-bar div:first-child { border-radius: var(--r-pill) 0 0 var(--r-pill); }
    .ruler-bar div:last-child { border-radius: 0 var(--r-pill) var(--r-pill) 0; }
    .ruler-text {
      font-size: var(--fs-ui);
      color: var(--muted);
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      min-width: 0;
      font-variant-numeric: tabular-nums;
    }
    .ruler-text span {
      display: flex;
      align-items: center;
      gap: 5px;
      min-width: 0;
      overflow-wrap: anywhere;
    }
    .muted-note {
      color: var(--muted);
      font-size: var(--fs-ui);
    }
    .dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    /* R4（v47）：日视图结论卡（渲染进 #ruler 容器）——主线净时长唯一大数字。 */
    .day-hero {
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-width: 0;
    }
    .hero-nums {
      display: flex;
      align-items: flex-end;
      gap: var(--sp-5);
      flex-wrap: wrap;
      min-width: 0;
    }
    .hero-cell { min-width: 0; }
    .hero-label {
      font-size: var(--fs-cap);
      color: var(--muted);
      margin-bottom: 2px;
    }
    .hero-big {
      /* v56：32→36px——大数字保持墨色（v55 决策：FAB 是唯一饱和 CTA），用字号
         补偿去色后的层级。 */
      font-size: 36px; /* raw: 展示数字（v56 定 36px），不进字阶 */
      font-weight: 700;
      line-height: 1.05;
      color: var(--text);
      font-variant-numeric: tabular-nums;
    }
    .hero-leak {
      font-size: 19px; /* raw: 展示数字，按版式单定、不进字阶 */
      font-weight: 600;
      line-height: 1.1;
      color: var(--leak);
      font-variant-numeric: tabular-nums;
    }
    .hero-bar {
      height: 6px;
      border-radius: var(--r-pill);
      background: var(--border);
      display: flex;
      overflow: hidden;
      gap: 2px;
    }
    .hero-bar div:first-child { border-radius: var(--r-pill) 0 0 var(--r-pill); }
    .hero-bar div:last-child { border-radius: 0 var(--r-pill) var(--r-pill) 0; }
    .hero-aux {
      font-size: var(--fs-cap);
      color: var(--faint);
      font-variant-numeric: tabular-nums;
      overflow-wrap: anywhere;
    }

    /* Timeline */
    .tl-label {
      font-size: var(--fs-cap);
      color: var(--faint);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      margin-bottom: var(--sp-2);
    }
    /* v69 阶段格言（C13）：hero 结论卡与时间轴之间的一行安静小字。真按钮（点击
       编辑）但视觉上是文本行；44px 最小高度守触控红线，引号用 CSS 生成内容（读屏
       只读正文）。 */
    .motto-line {
      display: block;
      width: 100%;
      min-height: var(--control-h);
      margin: -4px 0 2px;
      padding: 6px var(--sp-4);
      background: transparent;
      border: 0;
      border-radius: var(--r-ctl);
      font-family: inherit;
      font-size: var(--fs-ui);
      line-height: 1.5;
      color: var(--muted);
      text-align: center;
      cursor: pointer;
      transition: color var(--t-fast);
      /* v70：格言是用户自由文本，可能是一串不带空格的拉丁字符（粘 URL 就会触发）。
         中文可任意位置断行所以从未暴露，但 320px 下实测长拉丁串会撑破文档宽度
         （480px 挤进 279px 容器），撞「窄屏不得横向溢出」红线。 */
      overflow-wrap: anywhere;
    }
    /* display:block 会压过 UA 的 [hidden]{display:none}，必须显式让位。 */
    .motto-line[hidden] { display: none; }
    .motto-line::before { content: '「'; }
    .motto-line::after { content: '」'; }
    .motto-line:hover { color: var(--text); }
    .motto-line:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

    /* v1.4.0「现在」条：今天有进行中的已发生段时，在 hero 结论与时间轴之间站一
       行「正在做：X · 已 Ymin」。真按钮（点按编辑该段），视觉上是一张贴地的状态条；
       左侧桶色竖脏沿用 .entry 的 data-b→--rail 语法（与时间轴同一套颜色）。 */
    .now-strip {
      display: flex;
      align-items: baseline;
      gap: var(--sp-2);
      width: 100%;
      min-height: var(--control-h);
      margin: -2px 0 6px;
      padding: 9px 14px 9px var(--sp-4);
      position: relative;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--r-ctl);
      font-family: inherit;
      text-align: left;
      cursor: pointer;
      overflow: hidden;
      transition: background var(--t-fast);
    }
    /* display:flex 会压过 UA 的 [hidden]{display:none}，必须显式让位。 */
    .now-strip[hidden] { display: none; }
    .now-strip::before {
      content: '';
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 4px;
      background: var(--rail, var(--track));
    }
    .now-strip[data-b="job"] { --rail: var(--accent); }
    .now-strip[data-b="maintain"] { --rail: var(--maintain); }
    .now-strip[data-b="leak"] { --rail: var(--leak); }
    .now-strip[data-b="unrecorded"] { --rail: var(--track); }
    .now-strip:hover { background: color-mix(in srgb, var(--accent) 6%, var(--card)); }
    .now-strip:active { background: color-mix(in srgb, var(--accent) 10%, var(--card)); }
    .now-strip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    .now-strip .now-label {
      flex: none;
      font-size: var(--fs-cap);
      color: var(--faint);
      letter-spacing: 0.02em;
    }
    .now-strip .now-what {
      flex: 1 1 auto;
      min-width: 0;
      font-size: var(--fs-body);
      color: var(--text);
      font-weight: 600;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .now-strip .now-dur {
      flex: none;
      font-size: var(--fs-cap);
      color: var(--muted);
      font-variant-numeric: tabular-nums;
    }

    .tl-head {
      display: flex;
      align-items: center;
      gap: var(--sp-2);
      min-height: 30px;
    }
    #timeline { min-height: 160px; }
    html[data-boot="has-entries"] #timeline { min-height: 360px; }
    /* R2+FAB：日视图列表底部预留 ≥72px，让最后一张卡片能滚到 FAB 上方（FAB 固定
       在视口右下）。非日视图 FAB 隐藏，多出的底部留白无害。 */
    #timeline { padding-bottom: 84px; }

    /* v56：连续日志容器——把日视图从「一堆浮起的卡片」改为「一整块连续的日志面」。
       时间是连续的（每段结束＝下段开始）；一块贴地的 --card 面 + 发丝分隔 + 通高
       桶色竖脊表达它，而不是各自带阴影的方块。海拔：hero 结论卡是唯一带内容阴影的
       主表面（v55），时间轴容器贴地（hairline 边、无阴影）。 */
    .log {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--r-card);
      overflow: hidden;
    }
    /* 发丝分隔线：容器每个直接子行（swipe-row / 裸 entry / now 线）除首行外都在顶部
       画一条，从 16px 起（越过 4px 竖脊）——竖脊因此全程不被打断，竖读色序＝一天的
       形状。放在 wrapper 级 ::after、不随卡片左滑平移（竖脊占用 .entry::before）。 */
    .log > * { position: relative; }
    .log > * + *::after {
      content: "";
      position: absolute;
      z-index: 5;
      left: 16px;
      right: 0;
      top: 0;
      height: 1px;
      background: var(--border);
      pointer-events: none;
    }
    /* 「现在」一线自身就是分隔——贴着它的上下行不再画发丝线，避免三线叠置。 */
    .log > .tl-now::after,
    .log > .tl-now + *::after { content: none; }
    /* 「现在」一线：未来在上、现在一线、过去在下；进行中行本身保持中性（不 accent
       洗底——紫＝主线桶＋可交互，不挪用）。呼吸点是本版签名。 */
    .tl-now {
      display: flex;
      align-items: center;
      gap: var(--sp-2);
      padding: 7px 14px 7px var(--sp-4);
    }
    .tl-now-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent);
      flex: 0 0 auto;
      animation: tl-now-pulse 2.4s ease-in-out infinite;
    }
    .tl-now-label {
      font-size: var(--fs-cap);
      font-weight: 600;
      color: var(--accent);
      font-variant-numeric: tabular-nums;
    }
    .tl-now-line {
      flex: 1;
      height: 1px;
      background: color-mix(in srgb, var(--accent) 40%, transparent);
    }
    @keyframes tl-now-pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.35; }
    }
    @media (prefers-reduced-motion: reduce) {
      .tl-now-dot { animation: none; }
    }
    .swipe-row {
      position: relative;
      overflow: hidden;
      min-width: 0;
      isolation: isolate;
    }
    .swipe-row .entry {
      position: relative;
      z-index: 2;
      width: 100%;
      margin-bottom: 0;
    }
    .swipe-actions {
      position: absolute;
      z-index: 1;
      inset: 0 0 0 auto;
      width: 144px;
      display: grid;
      grid-template-columns: repeat(2, 72px);
      visibility: hidden;
    }
    .swipe-row.swipe-revealing .swipe-actions { visibility: visible; }
    .swipe-action {
      width: 72px;
      min-width: 72px;
      height: 100%;
      border: 0;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: var(--sp-1);
      color: #fff;
      font-family: inherit;
      font-size: var(--fs-ui);
      font-weight: 600;
      line-height: 1.2;
    }
    .swipe-action svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
    .swipe-edit { background: var(--accent); }
    .swipe-delete { background: var(--danger); }
    .swipe-actions[aria-hidden="true"] { pointer-events: none; }
    /* v56：行＝时间｜内容｜时长 三列网格，贴地无圆角无描边；--card 底必须保留且
       不透明——左滑时行滑过底下的操作轨道，透明底会让轨道透出（v53 教训的行级版）。 */
    .entry {
      position: relative;
      background: var(--card);
      border-radius: 0;
      padding: 11px 14px 11px var(--sp-4);
      margin: 0;
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr) auto;
      align-items: start;
      gap: 10px;
      min-width: 0;
      box-shadow: none;
      /* 纵向滚动仍归浏览器、横向手势归左滑编辑处理器（app.js registerCardSwipe），
         两者互不抢；transform 落在自己的合成层，回弹平滑。 */
      touch-action: pan-y;
      /* R7：列表重建（新增/删除/切段）时的入场淡入，140ms。只过渡 opacity——刻意不碰
         transform，因为 transform 是左滑手势的驱动属性；一旦两者共用 transition 声明，
         手势 touchstart 清空内联 transition 后会退回这条 CSS 规则，把 1:1 跟手拖拽
         变成带延迟的动画。opacity 与 transform 完全独立，互不干扰。 */
      transition: opacity 0.14s ease-out;
      will-change: transform;
    }
    @starting-style {
      .entry { opacity: 0; }
    }
    /* v56 通高桶色竖脊：色相＝桶（与 hero 比例条同源），实色＝已发生、虚线＝计划、
       灰（--track）＝未记录。行行相接（行无纵向间距、分隔线避开左 16px），竖读色序
       即一天的形状。随 .entry 一起左滑（属于行的内容）。 */
    .entry::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 4px;
      background: var(--rail, var(--track));
    }
    .entry[data-b="job"] { --rail: var(--accent); }
    .entry[data-b="maintain"] { --rail: var(--maintain); }
    .entry[data-b="leak"] { --rail: var(--leak); }
    .entry[data-b="unrecorded"] { --rail: var(--track); }
    /* 计划＝虚线脊。CSS mask 铺圆头胶囊段（4×7、rx2、缝 4px），比硬边渐变条纹优雅；
       mask 不支持时整段退化为实色脊（仍有桶色，只丢「未发生」的虚线语义）。 */
    .entry.planned::before {
      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='11'%3E%3Crect x='0' y='2' width='4' height='7' rx='2'/%3E%3C/svg%3E");
      -webkit-mask-repeat: repeat-y;
      -webkit-mask-size: 4px 11px;
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='11'%3E%3Crect x='0' y='2' width='4' height='7' rx='2'/%3E%3C/svg%3E");
      mask-repeat: repeat-y;
      mask-size: 4px 11px;
    }
    .entry.sheet-editing { background: color-mix(in srgb, var(--accent) 8%, var(--card)); }
    .entry.gap .e-what { color: var(--muted); }
    /* R6：整卡可点（role=button）——指针手型 + 按压/聚焦反馈；键盘 focus-visible 描边
       （outline 内收，容器 overflow:hidden 会裁掉外扩的描边）。 */
    .entry[data-action] { cursor: pointer; }
    .entry[data-action]:active { background: color-mix(in srgb, var(--accent) 8%, var(--card)); }
    .entry[data-action]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
    .entry[data-action]:focus:not(:focus-visible) { outline: none; }
    .e-body { min-width: 0; }
    .e-time { font-size: var(--fs-ui); color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 1px; }
    .e-what { font-size: var(--fs-body); color: var(--text); word-break: break-word; white-space: pre-wrap; margin-bottom: 3px; }
    .entry.placeholder .e-what { color: var(--muted); }
    .e-meta { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
    .e-meta > * { min-width: 0; }
    /* v56：tag 降为素色小字——桶的颜色职责整体移交竖脊，列表只保留一个彩色通道。 */
    .e-tag {
      font-size: var(--fs-cap);
      color: var(--faint);
      max-width: 100%;
      overflow-wrap: anywhere;
    }
    .e-dur {
      font-size: var(--fs-cap);
      color: var(--muted);
      overflow-wrap: anywhere;
      font-variant-numeric: tabular-nums;
      text-align: right;
      padding-top: 3px;
    }
    /* gap 行的「补一下」纯提示（整行即补录动作）——素色文字链形态，与 mini-btn 同语。 */
    .e-cta {
      font-size: var(--fs-cap);
      font-weight: 600;
      color: var(--accent);
    }
    /* v56：mini-btn（补一下/确认/标记已发生）从实心胶囊降为素色文字链——安静台账里
       只有真正指向缺口/待办的动作保留 accent 文字；触控热区仍由透明伪元素补足。 */
    .mini-btn {
      position: relative;
      min-width: 0;
      padding: 0;
      border: none;
      background: none;
      color: var(--accent);
      font-size: var(--fs-cap);
      font-weight: 600;
      font-family: inherit;
      line-height: 1.4;
      cursor: pointer;
      white-space: normal;
      overflow-wrap: anywhere;
    }
    /* 视觉是一行小字，透明伪元素把可点区扩到 ≥44px（触控目标红线，T11）。 */
    .mini-btn::before {
      content: '';
      position: absolute;
      inset: -13px -8px;
    }
    .mini-btn:active { opacity: 0.75; }
    /* SPEC-011: fixed scrim over the safe-area status bar strip. standalone +
       black-translucent + viewport-fit=cover lets scrolled content run under the
       system status bar and visually collide with its clock/carrier glyphs; this
       purely decorative bar reclaims that strip. env() resolves to 0 in a normal
       browser context or on a non-notched desktop, so it has zero footprint there.
       z-index sits above ordinary scrolling content but below the update banner
       (75) and .form-sheet (80) per the existing z scale — it must not compete
       with either, and pointer-events:none keeps it from stealing any tap. */
    .statusbar-scrim {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: env(safe-area-inset-top, 0px);
      background: var(--bg);
      z-index: 60;
      pointer-events: none;
    }
    /* v76 (SPEC-011 retro): real-machine screenshots showed the scrim's hard
       bottom edge slicing through header glyphs mid-scroll — reads as a
       rendering seam rather than a clean cutoff. Add the 8–12px --bg-to-
       transparent fade the spec pre-approved as the fallback. It's a ::after
       of the scrim itself (no new DOM node, no separate z-index to manage —
       it inherits the scrim's local stacking context and its "position:fixed,
       painted at z-index:60" placement), positioned right at the scrim's own
       bottom edge (`top: 100%`, relative to the scrim's fixed box). Height is
       `min(10px, env(safe-area-inset-top, 0px))`: on a real notch/Dynamic
       Island (20/47/59px) that clamps to a flat 10px fade; wherever
       safe-area-inset-top resolves to 0 (any ordinary browser context, or a
       non-notched desktop) it clamps to 0 too — same zero-footprint guarantee
       as the scrim, extended rather than bypassed. `pointer-events: none` is
       technically inherited from the parent already, but stated explicitly
       since this is the property under test. */
    .statusbar-scrim::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      height: min(10px, env(safe-area-inset-top, 0px));
      background: linear-gradient(to bottom, var(--bg), transparent);
      pointer-events: none;
    }
    /* SPEC-001/SPEC-002: legacy-origin migration notice — normal document flow
       above the .app shell (not fixed), so it never competes with the fixed
       update banner or FAB for the same screen real estate. Host-gated in
       src/app.js. SPEC-002 (v76): permanent, no-dismiss — only one action
       button remains ("打开新地址"), so .migration-notice-actions now holds a
       single link. */
    .migration-notice {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--sp-2) var(--sp-3);
      padding: 10px clamp(var(--sp-3), 4vw, var(--sp-4));
      background: var(--accent-bg);
      border-bottom: 1px solid var(--border);
    }
    .migration-notice[hidden] { display: none; }
    .migration-notice span {
      flex: 1 1 240px;
      min-width: 0;
      color: var(--text);
      font-size: var(--fs-ui);
      line-height: 1.4;
    }
    .migration-notice-actions {
      display: flex;
      flex: 0 0 auto;
      gap: var(--sp-2);
    }
    .migration-btn {
      min-width: 44px;
      min-height: 44px;
      padding: 0 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: none;
      border-radius: var(--r-sm);
      background: var(--accent);
      color: #fff;
      font-size: var(--fs-ui-strong);
      font-weight: 600;
      font-family: inherit;
      text-decoration: none;
      cursor: pointer;
      white-space: nowrap;
    }

    /* Update prompt */
    .update-banner {
      position: fixed;
      left: 50%;
      bottom: calc(12px + env(safe-area-inset-bottom));
      transform: translateX(-50%);
      /* iOS standalone 会把 sticky 与 fixed FAB 放进不同合成层，视觉上错开但 FAB
         仍可能截走按钮命中区。提示改为真正的 fixed 层，明确位于 FAB 之上、sheet 之下。 */
      z-index: 75;
      width: min(600px, calc(100% - 24px));
      margin: 0;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px var(--sp-3);
      border: 1px solid var(--border);
      border-radius: var(--r-ctl);
      background: var(--card);
      color: var(--text);
      box-shadow: var(--shadow-3);
    }
    .update-banner[hidden] { display: none; }
    body:has(#add-btn:not([hidden])) .update-banner {
      bottom: calc(84px + env(safe-area-inset-bottom));
    }
    .update-banner span {
      min-width: 0;
      flex: 1;
      color: var(--muted);
      font-size: var(--fs-ui);
      line-height: 1.35;
    }
    .update-btn {
      min-height: 36px;
      padding: 0 var(--sp-3);
      border: none;
      border-radius: var(--r-sm);
      background: var(--accent);
      color: #fff;
      font-size: var(--fs-ui-strong);
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      white-space: nowrap;
    }

    /* Cross-tab conflict banner — fixed at top, above form sheet (z-index 90) */
    .cross-tab-banner {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 90;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px var(--sp-4);
      background: var(--card);
      border-bottom: 1px solid var(--border);
      box-shadow: var(--shadow-1);
    }
    .cross-tab-banner[hidden] { display: none; }
    .cross-tab-banner span {
      flex: 1;
      color: var(--muted);
      font-size: var(--fs-ui);
      line-height: 1.35;
    }
    .undo-toast {
      position: fixed;
      left: 50%;
      bottom: calc(88px + env(safe-area-inset-bottom));
      z-index: 70;
      width: min(360px, calc(100% - 32px));
      min-height: 48px;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      gap: var(--sp-3);
      padding: 9px 10px 9px 14px;
      border: 1px solid var(--border);
      border-radius: var(--r-ctl);
      background: var(--card);
      box-shadow: var(--shadow-3);
    }
    .undo-toast[hidden] { display: none; }
    .undo-toast span { flex: 1; min-width: 0; color: var(--text); font-size: var(--fs-ui-strong); }
    #info-toast.is-milestone span { color: var(--accent); font-weight: 600; }
    /* SPEC-006 B：#undo-toast 与 #info-toast 共用同一 fixed 位置；两者理论上可能
       同时可见（例如撤销窗口内触发一条普通提示），此时把 info-toast 挪到上方，
       避免两条 toast 视觉重叠。 */
    body:has(#undo-toast:not([hidden])) #info-toast {
      bottom: calc(148px + env(safe-area-inset-bottom));
    }
    /* SPEC-012：#info-toast 到达本身要可感知（v73 的「静默」教训之一是它出现得
       太不起眼），加一个克制的淡入+上移入场，和 sheet 的 @starting-style 同一套
       渐进增强写法；.undo-toast 基础规则不动，只有 #info-toast 加这层动效。
       z-index 提到 .form-sheet（80）之上：导入确认走「更多」下钻返回（v41 既有的
       returnToMore 导航栈，红线不能改——CLAUDE.md 自测清单 7）时，closeForm() 是
       同步把 #form-sheet 内容换回「更多」而非真正 hidden，无论 showInfoToast 延迟
       多久，届时 #form-sheet 仍在原 z-index 80 覆盖同一屏幕位置；只有 toast 的
       z-index 高于 form-sheet，它才能在「更多」重新盖住屏幕之后仍然可见（无头探针
       实测坐实：z:70 时 elementFromPoint 命中的是 .more-body 而不是 toast）。仍低于
       z-index 90 的 .cross-tab-banner，不影响既有层级红线。 */
    #info-toast {
      z-index: 85;
      transition: opacity 0.2s ease, transform 0.25s ease-out;
    }
    @starting-style {
      #info-toast:not([hidden]) {
        opacity: 0;
        transform: translateX(-50%) translateY(8px);
      }
    }
    @media (prefers-reduced-motion: reduce) {
      #info-toast { transition: none; }
    }
    .undo-btn {
      min-width: 64px;
      min-height: 36px;
      border: 0;
      border-radius: var(--r-sm);
      background: var(--accent-bg);
      color: var(--accent);
      font-family: inherit;
      font-size: var(--fs-ui-strong);
      font-weight: 600;
    }
    .undo-btn[hidden] { display: none; }

    /* Form sheet */
    .form-sheet {
      /* v43: 恒定满布局视口，不再随键盘缩放（结构性根除 P16–P23 整类跳变）。键盘只
         盖住底部，焦点控件靠正文滚动避开——面板几何全程不动，没有可跳的东西。 */
      position: fixed;
      inset: 0;
      z-index: 80;
      display: grid;
      align-items: end;
    }
    .form-sheet[hidden] { display: none; }
    .form-sheet-backdrop {
      /* fixed + inset:0：遮罩恒盖满布局视口。 */
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.42);
      transition: opacity 0.2s ease;
    }
    .form-sheet-panel {
      position: relative;
      display: flex;
      flex-direction: column;
      /* min-width:0 stops the panel (a grid item of .form-sheet) from expanding
         to its min-content: a tall textarea's intrinsic min-content otherwise
         blows the panel out to max-width (600px) on a 375px screen, shoving the
         save ✓ off the right edge — the SE2 "can't edit" bug. Same discipline as
         the view-tabs minmax(0,1fr) guard. */
      min-width: 0;
      max-height: calc(100dvh - env(safe-area-inset-top) - 12px);
      width: 100%;
      max-width: 600px;
      margin: 0 auto;
      border: 1px solid var(--border);
      border-bottom: none;
      border-radius: var(--r-sheet) var(--r-sheet) 0 0;
      background: var(--card);
      padding: 0 var(--sp-4);
      box-shadow: var(--shadow-3);
      transition: transform 0.25s ease-out, opacity 0.2s ease;
    }
    /* v43: 会召唤软键盘的表单（新建/编辑/标签设置）用定高高 sheet——头部置顶保存 ✓
       常在、内容从顶部流下、焦点控件滚到键盘上方；面板几何不随键盘变。短 sheet
       （更多/说明/导入平移）不加 .tall，保持内容自适应，不弹键盘也不会跳。 */
    .form-sheet-panel.tall {
      height: calc(100dvh - env(safe-area-inset-top) - 12px);
    }
    /* v33: sheet 进场动画（纯 CSS 渐进增强；hidden→显示时从 @starting-style 过渡进来。
       旧浏览器无此规则=直接弹出。 */
    @starting-style {
      .form-sheet:not([hidden]) .form-sheet-panel { transform: translateY(18px); opacity: 0; }
      .form-sheet:not([hidden]) .form-sheet-backdrop { opacity: 0; }
    }
    /* R1（v46）：关闭走对称的收起动画——JS 挂 .sheet-closing 后过渡到与进场
       @starting-style 相同的终态，transitionend 播完才真正 hidden（sheet_controller.js
       animateSheetClose）；不再是旧版瞬断。 */
    .form-sheet.sheet-closing .form-sheet-panel { transform: translateY(18px); opacity: 0; }
    .form-sheet.sheet-closing .form-sheet-backdrop { opacity: 0; }
    .form-sheet.sheet-dragging .form-sheet-panel,
    .form-sheet.sheet-dragging .form-sheet-backdrop { transition: none; }
    .form-sheet.sheet-drag-dismiss.sheet-closing .form-sheet-panel { transform: translateY(100%); opacity: 0.35; }
    .form-sheet.sheet-drag-dismiss.sheet-closing .form-sheet-backdrop { opacity: 0; }
    @media (prefers-reduced-motion: reduce) {
      .form-sheet-panel, .form-sheet-backdrop { transition: none; }
    }
    .form-sheet-panel:focus, .form-sheet-panel:focus-visible { outline: none; }
    @media (prefers-reduced-motion: reduce) {
      .entry { transition: none; }
    }
    /* v34 C 语法 sheet 头：抓手条 + 取消/完成文字按钮 + 居中标题 */
    .sh-grab {
      flex: 0 0 auto;
      position: relative;
      z-index: 2;
      width: 64px;
      height: 44px;
      margin: 0 auto -30px;
      touch-action: none;
      cursor: grab;
    }
    .sh-grab::before {
      content: '';
      display: block;
      width: 40px;
      height: 5px;
      margin: 9px auto 0;
      border-radius: var(--r-pill);
      background: var(--track);
    }
    .form-sheet.sheet-dragging .sh-grab { cursor: grabbing; }
    .form-sheet-head {
      /* v43: 置顶不滚——键盘只盖底部，保存 ✓ 永远在顶部可达（结构性根治 P2/⑧）。 */
      position: sticky;
      top: 0;
      z-index: 1;
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 52px;
      margin: 0 calc(-1 * var(--sp-4));
      padding: calc(var(--sp-1) + env(safe-area-inset-top)) var(--sp-4) 6px;
      background: var(--card);
      border-radius: var(--r-sheet) var(--r-sheet) 0 0;
      border-bottom: 1px solid var(--border);
    }
    .sh-cancel,
    .sh-done {
      background: none;
      border: none;
      font-family: inherit;
      font-size: var(--fs-input);
      padding: var(--sp-2) 2px;
      min-height: 44px;
      cursor: pointer;
      flex: 0 0 auto;
      border-radius: var(--r-sm);
    }
    .sh-cancel { color: var(--muted); }
    .sh-done { color: var(--accent); font-weight: 700; }
    .sh-done:disabled { color: var(--faint); opacity: 0.55; cursor: default; }
    .sh-cancel:active,
    .sh-done:active { opacity: 0.7; }
    .sh-title {
      flex: 1;
      min-width: 0;
      text-align: center;
      font-size: var(--fs-body);
      font-weight: 600;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .sh-spacer { flex: 0 0 36px; }
    .form-lede {
      color: var(--muted);
      font-size: var(--fs-ui);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    /* cell 分组（C 语法 × B 皮肤：inset 底 + 内分隔线，无描边） */
    .cell-group {
      /* v77：cell 分组是「壳」表面，不是输入井——沿用 v76 的 --chrome（暗色下与
         --input 同值，零变化；亮色下比 --card 面板略暗一档、比旧 --input 轻得多）。
         v75 把 --input 压暗后，亮色下这些分组在白面板上变成沉甸甸的灰板，比它们
         承载的文字还重；而暗色一直是对的（分组比面板亮＝浮起）。同一处倒挂，
         v76 只修了 view-tabs/date-nav 两处，这里是补齐。 */
      background: var(--chrome);
      border-radius: var(--r-ctl);
      overflow: hidden;
      /* P21：块级流，不用 grid——iOS WebKit 对 grid auto 轨道内 <button> 的
         min-height 计量有缺陷（轨道按内容高算、条目按 min-height 绘），四行
         备份组累计溢出 ~28px，最后一行被 overflow:hidden 拦腰裁掉。常规流中
         min-height 恒被尊重。行自身是 display:flex（块级盒），无需额外声明。 */
    }
    .cell-btn,
    .cell-row {
      position: relative;
      display: flex;
      align-items: center;
      gap: var(--sp-2);
      width: 100%;
      min-height: 48px;
      padding: 10px 14px;
      background: transparent;
      border: none;
      color: var(--text);
      font-size: var(--fs-body);
      font-family: inherit;
      text-align: left;
      min-width: 0;
    }
    /* v79：`.cell-btn` 此前只用在 <button> 上（UA 默认无下划线），v78 的隐私政策
       cell 第一次把它用在 <a> 上，UA 的链接下划线随即露出来——连右侧 › 箭头
       一起被划上，同组里只有那一行长得不一样。外观归 class 管，不归标签管。 */
    .cell-btn { cursor: pointer; justify-content: space-between; text-decoration: none; }
    .cell-btn:active { background: var(--card); }
    .cell-btn.copied { color: var(--accent); }
    .cell-btn[hidden] { display: none; }
    .cell-group > * + *::before {
      content: "";
      position: absolute;
      top: 0;
      left: 14px;
      right: 0;
      height: 1px;
      background: var(--border);
    }
    .cell-chevron { color: var(--faint); font-size: var(--fs-input); flex: 0 0 auto; }
    .cell-row .theme-seg { margin-left: auto; }
    /* v56：编辑 sheet 内的「切一刀」——切分入口从时间轴行内迁到这里（行内逐行常显
       的动作词是列表噪音）。与 cell-danger 同形态、accent 色。 */
    .cell-action {
      min-height: 48px;
      border: none;
      border-radius: var(--r-ctl);
      background: color-mix(in srgb, var(--accent) 10%, transparent);
      color: var(--accent);
      font-size: var(--fs-body);
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      margin-bottom: 10px;
    }
    .cell-action:active { opacity: 0.75; }
    .cell-danger {
      min-height: 48px;
      border: none;
      border-radius: var(--r-ctl);
      background: color-mix(in srgb, var(--danger) 10%, transparent);
      color: var(--danger);
      font-size: var(--fs-body);
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
    }
    .cell-danger:active { opacity: 0.75; }
    .interval-editor { display: grid; gap: var(--sp-3); }
    .boundary-picker { display: grid; gap: 6px; min-width: 0; }
    .boundary-limits {
      color: var(--muted);
      font-size: var(--fs-ui);
      line-height: 1.45;
      overflow-wrap: anywhere;
    }
    .end-mode-seg { margin: 0; }
    .overnight-summary {
      padding: 10px var(--sp-3);
      border-radius: var(--r-ctl);
      background: var(--accent-bg);
      color: var(--text);
      font-size: var(--fs-ui-strong);
      font-weight: 600;
      line-height: 1.45;
      font-variant-numeric: tabular-nums;
    }
    .overnight-end-seg button { min-width: 0; padding-inline: var(--sp-2); font-size: var(--fs-ui); }
    .plan-expired-hint { margin-top: -2px; }
    .interval-preview {
      display: grid;
      gap: 0;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }
    .preview-head {
      padding: 9px 0 7px;
      color: var(--text);
      font-size: var(--fs-ui-strong);
      font-weight: 600;
    }
    .preview-head.is-error { color: var(--danger); }
    .preview-row {
      min-height: 42px;
      display: grid;
      grid-template-columns: 52px 92px minmax(0, 1fr);
      align-items: center;
      gap: var(--sp-2);
      border-top: 1px solid var(--border);
      font-size: var(--fs-ui);
    }
    .preview-role { color: var(--muted); }
    .preview-time { color: var(--text); font-variant-numeric: tabular-nums; }
    .preview-label { min-width: 0; color: var(--text); overflow-wrap: anywhere; }
    .preview-tag { color: var(--muted); font-weight: 400; }

    /* v1.5.0 切一刀 / 补一下：先看结果（原段 + 比例切分条 + 逐段行），再选时刻。
       颜色沿用时间轴 data-b→--rail 语法；新段满色，前后原段压暗，没选标签的新段是
       accent 斜纹描边（「待填写」）。条只是逐段文字行的图示，aria-hidden。 */
    .cut-overview { display: grid; gap: 6px; }
    .cut-source {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 2px var(--sp-2);
      font-size: var(--fs-ui-strong);
      line-height: 1.4;
    }
    .cut-source-what { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
    .cut-source-tag { color: var(--muted); }
    .cut-source-meta { margin-left: auto; color: var(--muted); font-size: var(--fs-ui); font-variant-numeric: tabular-nums; }
    .cut-bar {
      display: flex;
      gap: 2px;
      height: 14px;
      border-radius: var(--r-pill);
      overflow: hidden;
    }
    .cut-part {
      flex-basis: 0;
      min-width: 3px;
      background: var(--rail, var(--track));
      transition: flex-grow var(--t-fast);
    }
    .cut-before, .cut-after { opacity: 0.38; }
    .cut-part[data-b="unrecorded"] { opacity: 1; }
    .cut-part[data-b="pending"] {
      background: repeating-linear-gradient(-45deg, var(--accent-bg) 0 5px, transparent 5px 10px);
      box-shadow: inset 0 0 0 1.5px var(--accent);
      border-radius: var(--r-pill);
    }
    .cut-part[data-b="job"], .preview-row[data-b="job"] { --rail: var(--accent); }
    .cut-part[data-b="maintain"], .preview-row[data-b="maintain"] { --rail: var(--maintain); }
    .cut-part[data-b="leak"], .preview-row[data-b="leak"] { --rail: var(--leak); }
    .cut-part[data-b="unrecorded"], .preview-row[data-b="unrecorded"] { --rail: var(--track); }
    .cut-scale {
      display: flex;
      justify-content: space-between;
      gap: var(--sp-2);
      color: var(--muted);
      font-size: var(--fs-cap);
      font-variant-numeric: tabular-nums;
    }
    .cut-scale-dur { color: var(--text); font-weight: 600; text-align: center; }
    .cut-scale-dur.is-error { color: var(--danger); }
    .cut-overview + .interval-preview .preview-role::before {
      content: '';
      display: inline-block;
      width: 8px;
      height: 8px;
      margin-right: 6px;
      border-radius: 50%;
      background: var(--rail, var(--track));
      vertical-align: 1px;
    }
    .cut-overview + .interval-preview .preview-before .preview-role::before,
    .cut-overview + .interval-preview .preview-after .preview-role::before { opacity: 0.45; }
    .cut-overview + .interval-preview .preview-row[data-b="unrecorded"] .preview-role::before { opacity: 1; }
    .cut-overview + .interval-preview .preview-row[data-b="pending"] .preview-role::before {
      background: transparent;
      box-shadow: inset 0 0 0 1.5px var(--accent);
    }
    .cut-overview + .interval-preview .preview-new .preview-label { font-weight: 600; }

    /* v1.5.0 段内区间选择器：一行四列「时:分 – 时:分」，比单点滚轮矮（160px，须与
       pickers.js RANGE_PAD 同步）；宽屏为两枚 HH:MM 文本框。 */
    .range-wheel-head {
      display: grid;
      grid-template-columns: 1fr 1fr;
      margin-bottom: var(--sp-1);
      color: var(--muted);
      font-size: var(--fs-cap);
      text-align: center;
    }
    .wheel-picker.range-wheel { height: 160px; }
    .wheel-col-range .wheel-item { font-size: var(--fs-title); font-variant-numeric: tabular-nums; }
    .wheel-sep {
      position: relative;
      z-index: 1;
      flex: 0 0 auto;
      align-self: center;
      padding: 0 1px;
      color: var(--muted);
      font-size: var(--fs-title);
      font-weight: 600;
      user-select: none;
    }
    /* 开始与结束之间的「–」要比时:分之间的「:」宽。用专属 class：v1.5.0 的
       `.wheel-sep:nth-of-type(2)` 按元素类型（div）计数，实际命中了第一个「:」（v1.5.1 修）。 */
    .wheel-sep-dash { padding: 0 6px; }
    .range-snaps {
      display: flex;
      justify-content: space-between;
      gap: var(--sp-2);
      margin-top: 2px;
    }
    .range-snap {
      min-height: 44px;
      padding: 0 2px;
      border: none;
      background: none;
      color: var(--accent);
      font-family: inherit;
      font-size: var(--fs-ui);
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      cursor: pointer;
    }
    .range-snap:active { opacity: 0.75; }
    .range-snap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
    .range-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
    .range-field { display: grid; gap: var(--sp-1); color: var(--muted); font-size: var(--fs-cap); }
    .range-inp { width: 7.5em; text-align: center; font-variant-numeric: tabular-nums; }
    .range-dash { padding-bottom: var(--sp-3); color: var(--muted); }
    .delete-confirm-body { gap: 14px; }
    .delete-target {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 3px var(--sp-3);
      padding-bottom: var(--sp-3);
      border-bottom: 1px solid var(--border);
    }
    .delete-range { grid-row: 1 / span 2; color: var(--muted); font-size: var(--fs-ui-strong); font-variant-numeric: tabular-nums; }
    .delete-what { min-width: 0; color: var(--text); font-size: var(--fs-body); overflow-wrap: anywhere; }
    .delete-tag { color: var(--muted); font-size: var(--fs-ui); }
    .delete-result { padding: 2px 0; }
    .delete-result p { color: var(--text); font-size: var(--fs-ui-strong); line-height: 1.55; }
    .delete-result.is-unrecorded p { color: var(--danger); }
    .import-summary { color: var(--text); font-size: var(--fs-ui-strong); line-height: 1.5; font-weight: 600; }
    .import-summary.is-error { color: var(--danger); }
    /* v1.2.0：导入预览逐条清单——新增/已跳过分组。折叠在 details 里。
       v1.2.1（B）：弱化呈现——新增不需逐条确认，清单只是可选核对，故去掉主线色强调
       边框、标题一律 muted，让上方那行汇总当主角，消除“像待办勾选表”的错觉。 */
    .import-detail { display: grid; gap: var(--sp-2); }
    .import-detail:empty { display: none; }
    .import-detail-note { color: var(--muted); font-size: var(--fs-cap); line-height: 1.5; }
    .import-group {
      border: 1px solid var(--border);
      border-radius: var(--r-ctl);
      background: var(--card);
      overflow: hidden;
    }
    .import-group-head {
      list-style: none;
      cursor: pointer;
      padding: var(--sp-2) 11px;
      font-size: var(--fs-cap);
      font-weight: 500;
      color: var(--muted);
    }
    .import-group-head::-webkit-details-marker { display: none; }
    .import-group-head::after { content: '\203a'; float: right; color: var(--faint); transition: transform 120ms ease; }
    .import-group[open] .import-group-head::after { transform: rotate(90deg); }
    .import-item-list { border-top: 1px solid var(--border); }
    .import-item {
      display: grid;
      gap: 1px;
      padding: var(--sp-2) 11px;
      min-width: 0;
    }
    .import-item + .import-item { border-top: 1px solid var(--border); }
    .import-item-meta { color: var(--faint); font-size: var(--fs-cap); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
    .import-item-what { color: var(--text); font-size: var(--fs-ui-strong); overflow-wrap: anywhere; white-space: pre-wrap; }
    .import-group-skip .import-item-what { color: var(--muted); }
    .import-conflicts {
      display: grid;
      gap: 10px;
      padding: 10px;
      border: 1px solid color-mix(in srgb, var(--danger) 65%, transparent);
      border-radius: var(--r-ctl);
      background: color-mix(in srgb, var(--danger) 8%, transparent);
    }
    .import-conflicts[hidden] { display: none; }
    .import-conflict-intro { color: var(--muted); font-size: var(--fs-ui); line-height: 1.5; }
    .import-conflict-list { display: grid; gap: 10px; }
    .import-conflict-card {
      overflow: hidden;
      border-radius: var(--r-ctl);
      background: var(--input);
      box-shadow: var(--shadow-1), var(--top-light);
    }
    .import-conflict-title {
      padding: var(--sp-2) 11px;
      color: var(--danger);
      font-size: var(--fs-ui);
      font-weight: 600;
      border-bottom: 1px solid var(--border);
    }
    .import-conflict-side { padding: 9px 11px; min-width: 0; }
    .import-conflict-side + .import-conflict-side { border-top: 1px solid var(--border); }
    .import-conflict-role { color: var(--muted); font-size: var(--fs-cap); margin-bottom: 2px; }
    .import-conflict-what { color: var(--text); font-size: var(--fs-ui-strong); overflow-wrap: anywhere; white-space: pre-wrap; }
    .import-conflict-meta { color: var(--faint); font-size: var(--fs-cap); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
    .import-conflict-actions {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
      padding: 9px 10px 10px;
      border-top: 1px solid var(--border);
    }
    .import-conflict-actions button {
      min-width: 0;
      min-height: 38px;
      padding: 5px 7px;
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      background: transparent;
      color: var(--muted);
      /* 原写法 `font: 600 12px/1.25 inherit` 整条无效（inherit 等全局关键字不能出现在
         简写的分量里），浏览器整条丢弃，按钮一直落回 UA 默认按钮字体。拆成长写。 */
      font-family: inherit;
      font-size: var(--fs-cap);
      font-weight: 600;
      line-height: 1.25;
      cursor: pointer;
    }
    .import-conflict-actions button.active {
      border-color: var(--accent);
      background: var(--accent-bg);
      color: var(--accent);
    }
    .import-conflict-merge-note {
      padding: 0 11px 10px;
      color: var(--muted);
      font-size: var(--fs-cap);
      line-height: 1.45;
    }
    .import-resolution-error {
      padding-bottom: var(--sp-2);
      color: var(--danger);
      font-size: var(--fs-ui);
      font-weight: 600;
    }
    /* P34（v63）：更多正文脱离 .form-sheet-body 的 grid auto 轨道——v62 内容首次
       超过面板可用高度后，grid（min-height:0 的 flex 子项）把各分组轨道压到低于
       内容高，.cell-group 的 overflow:hidden 拦腰裁掉后续行（P21 的上一层复发：
       那次是组内 grid，这次是正文 grid；双引擎均可复现，非 iOS 特有）。块级流中
       分组高度恒被尊重，超高由正文 overflow-y 滚动接住。 */
    /* 复合选择器压过后文 .form-sheet-body 的 display:grid（同优先级按序会输）。 */
    .form-sheet-body.more-body { display: block; }
    .more-body > * + * { margin-top: 10px; }
    /* v69 阶段格言 sheet：内容极少，grid 拉伸轨道会把元素撑出大空隙；同走 P34 的
       块级流判例（复合选择器必须写在下方 .form-sheet-body 的 grid 定义之前）。 */
    .form-sheet-body.motto-body { display: block; }
    .motto-body > * + * { margin-top: var(--sp-3); }
    /* 块级流里按钮缩到内容宽；补回 grid 轨道下的整行形态（与编辑 sheet 的
       cell-action 一致）。 */
    .motto-body .cell-action { display: block; width: 100%; }
    /* v1.5.0（D31）：单句格言 / 文字轮播二选一。面板内同样走块级流（P34：承载表单的
       正文不放进会被压缩的 grid 轨道）。 */
    .motto-mode-seg { display: flex; }
    .motto-mode-seg button { flex: 1; }
    .motto-pane > * + * { margin-top: var(--sp-3); }
    .quotes-input { font-size: var(--fs-input); line-height: 1.55; }
    .quotes-count { overflow-wrap: anywhere; }
    .app-version {
      text-align: center;
      color: var(--faint);
      font-size: var(--fs-cap);
      padding: 2px 0 6px;
    }
    .form-sheet-body {
      display: grid;
      /* Pin the single column to the container so tall/long content scrolls
         instead of widening the panel past the screen (see .form-sheet-panel). */
      grid-template-columns: minmax(0, 1fr);
      gap: var(--sp-3);
      padding-top: 14px;
      /* v43: 底部预留键盘遮挡高度 --kb，让最后一个字段能滚到键盘上方；键盘落下时
         --kb→0，多出的内边距收回。--kb 由 sheet_controller 从 visualViewport 写，
         只影响这个滚动内边距、不移动面板（迟到也只是晚一拍滚，不跳）。 */
      padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom) + var(--kb, 0px));
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      scroll-padding-top: 84px;
      scroll-padding-bottom: var(--kb, 0px);
      flex: 1;
      min-height: 0;
    }
    .help-body section {
      display: grid;
      gap: var(--sp-1);
      padding-bottom: 10px;
      border-bottom: 1px solid var(--border);
    }
    .help-body section:last-child { border-bottom: none; }
    .help-body h2 {
      color: var(--text);
      font-size: var(--fs-body);
      line-height: 1.3;
    }
    .help-body p {
      color: var(--muted);
      font-size: var(--fs-ui);
      line-height: 1.5;
    }
    /* P34（v63 在 .more-body 上判过，SPEC-007 把分组数从 2 个加到 4 个后在这里
       复发）：承载 cell-group 的 sheet 正文不得坐在会被压缩的 grid 轨道里——
       min-height:0 的 flex 子项里，auto 轨道会被压到低于内容高，分组的
       overflow:hidden 随即拦腰裁行。复合选择器压过后文同优先级的 display:grid。 */
    .form-sheet-body.config-body { display: block; }
    .config-body > * + * { margin-top: 10px; }
    /* v86：报错必须和「出问题的那一行」同屏可见。v84 把滚动目标从错误条改成出错行
       之后，挂在正文末尾的错误条留在了屏幕外——保存被拦下、却什么提示都看不到
       （真机上 A6/B5/B6 三步全中，而用例只断言了 toBeVisible()：**在布局里** 不等于
       **在视口里**，这是这条缺陷能溜过去的真正原因）。粘到正文底边两者兼得；底色
       改为不透明，否则内容会从下面透上来。 */
    .config-body .form-inline-error {
      position: sticky;
      bottom: 0;
      z-index: 2;
      background: color-mix(in srgb, var(--danger) 12%, var(--card));
      box-shadow: var(--shadow-1);
    }
    .cfg-section .chip-group-label { margin-bottom: 6px; }
    /* SPEC-017：标签云。每个标签收起时是一个 chip（与「记一条」的标签同族：胶囊、
       44px 命中），点开原地变成整宽编辑卡；编辑控件始终留在行内（hidden），保存事务
       读到的仍是每行自己的控件。用 flex-wrap 不用 grid（P21：iOS WebKit 对 grid auto
       轨道内 <button> 的 min-height 计量有缺陷）。取代 v37 的两行式 cell 与 SPEC-007
       的通高竖脊——竖脊只在展开的卡上保留，收起时由桶色圆点承担同一职责。 */
    .cfg-list {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      gap: 8px;
    }
    .cfg-row {
      position: relative;
      min-width: 0;
      max-width: 100%;
    }
    .cfg-row[data-b="job"] { --rail: var(--accent); }
    .cfg-row[data-b="maintain"] { --rail: var(--maintain); }
    .cfg-row[data-b="leak"] { --rail: var(--leak); }
    .cfg-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      max-width: 100%;
      min-height: 44px;
      padding: 8px 14px 8px 12px;
      border: 1px solid var(--border);
      border-radius: var(--r-pill);
      background: transparent;
      color: var(--text);
      font-size: var(--fs-ui);
      font-family: inherit;
      text-align: left;
      cursor: pointer;
      transition: background var(--t-fast), border-color var(--t-fast);
    }
    .cfg-chip:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }
    /* 桶色圆点：与时间轴同一组 --rail 令牌；保存前改桶只变点的颜色，chip 不跳组。 */
    .cfg-chip-dot {
      flex: 0 0 auto;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--rail, var(--track));
    }
    .cfg-row.is-history:not(.is-open) .cfg-chip-dot { opacity: 0.55; }
    .cfg-chip-name,
    .cfg-chip-was {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .cfg-chip-name.is-empty { color: var(--faint); }
    /* 改过名：原名在前并划掉，箭头挂在新名前面（不在被划掉的元素里）。 */
    .cfg-chip-was {
      color: var(--faint);
      text-decoration: line-through;
    }
    .cfg-chip-was:not([hidden]) + .cfg-chip-name::before {
      content: "→ ";
      color: var(--faint);
    }
    .cfg-chip-meta {
      flex: 0 0 auto;
      color: var(--faint);
      font-size: var(--fs-cap);
      font-variant-numeric: tabular-nums;
    }
    .cfg-chip-meta:empty { display: none; }
    .cfg-chip .cell-chevron { display: none; }
    /* 零记录：虚线边——一眼看出哪些可以清理。 */
    .cfg-row[data-count="0"]:not(.is-new) > .cfg-chip { border-style: dashed; }
    .cfg-row.is-current > .cfg-chip {
      background: var(--accent-bg);
      border-color: var(--accent);
      color: var(--accent);
      font-weight: 600;
    }
    .cfg-row.is-new > .cfg-chip {
      border-style: dashed;
      border-color: var(--accent);
    }
    .cfg-row.is-new .cfg-chip-meta {
      color: var(--accent);
      font-weight: 600;
    }
    /* 有暂存改动（改名 / 改桶 / 免确认）：chip 尾部一个 accent 小点。 */
    .cfg-row.is-dirty > .cfg-chip::after {
      content: "";
      flex: 0 0 auto;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent);
    }
    /* 展开：整宽编辑卡（--chrome 壳面，同 .cell-group），左缘桶色竖脊回来，chip 面成为卡头。 */
    .cfg-row.is-open {
      flex: 1 1 100%;
      padding: 2px 12px 12px 16px;
      border-radius: var(--r-ctl);
      background: var(--chrome);
    }
    .cfg-row.is-open::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 4px;
      border-radius: var(--r-ctl) 0 0 var(--r-ctl);
      background: var(--rail, var(--track));
    }
    .cfg-row.is-open > .cfg-chip {
      width: 100%;
      padding-left: 0;
      padding-right: 0;
      border-color: transparent;
      background: transparent;
      color: var(--text);
      font-weight: 600;
    }
    .cfg-row.is-open > .cfg-chip .cfg-chip-dot { display: none; }
    /* 卡头：暂存小点（::after）紧跟条数，展开箭头推到最右。 */
    .cfg-row.is-open > .cfg-chip .cell-chevron {
      display: inline;
      order: 1;
      margin-left: auto;
      transform: rotate(90deg);
    }
    /* 历史主线折叠：只藏「没动过、没展开、没待删除」的历史行——折叠不得把暂存改动
       藏起来。搜索期间折叠让位（由筛选决定显示什么）。 */
    .cfg-fold {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 44px;
      padding: 8px 12px 8px 14px;
      border: none;
      border-radius: var(--r-pill);
      background: var(--chrome);
      color: var(--muted);
      font-size: var(--fs-ui);
      font-family: inherit;
      cursor: pointer;
    }
    .cfg-fold .cell-chevron { transition: transform var(--t-fast); }
    .cfg-fold[aria-expanded="true"] .cell-chevron { transform: rotate(90deg); }
    .config-body:not(.is-searching) .cfg-list.is-folded > .cfg-row.is-history:not(.is-open):not(.is-dirty):not([data-pending-delete="1"]) {
      display: none;
    }
    .config-body.is-searching .cfg-fold,
    .cfg-row.is-filtered,
    .cfg-section.is-filtered { display: none; }
    .cfg-badge {
      flex: 0 0 auto;
      padding: 3px var(--sp-2);
      border-radius: var(--r-pill);
      background: var(--accent-bg);
      color: var(--accent);
      font-size: var(--fs-cap);
      font-weight: 600;
    }
    .cfg-set-current { flex: 0 0 auto; }
    /* 两段式分段控件替换原生 <select>：只有两个选项时它更直接，且不引入 iOS
       原生弹层（那个弹层不跟随应用语言，英文界面下会弹中文选项）。 */
    .cfg-bucket-seg {
      flex: 0 0 auto;
      padding: 2px;
    }
    .cfg-bucket-seg button {
      padding: 6px 10px;
      font-size: var(--fs-cap);
      min-height: 36px;
    }
    /* longOk 换应用样式勾选框：仍是真正的 <input type=checkbox>（键盘与读屏行为
       白送），只换外观；44px 命中由透明伪元素给，不撑布局。 */
    .cfg-long input[type="checkbox"] {
      appearance: none;
      -webkit-appearance: none;
      position: relative;
      width: 20px;
      height: 20px;
      margin: 0;
      border: 1.5px solid var(--border);
      border-radius: 6px; /* raw: 20px 勾选框；--r-sm 会接近圆形、读成单选框 */
      background: var(--card);
      cursor: pointer;
      flex: 0 0 auto;
    }
    .cfg-long input[type="checkbox"]::after {
      content: "";
      position: absolute;
      inset: -12px;
    }
    .cfg-long input[type="checkbox"]:checked {
      background: var(--accent);
      border-color: var(--accent);
    }
    .cfg-long input[type="checkbox"]:checked::before {
      content: "";
      position: absolute;
      left: 6px;
      top: 2px;
      width: 5px;
      height: 10px;
      border: solid #fff;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg);
    }
    .cfg-long input[type="checkbox"]:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }
    .cfg-defaults-preview {
      margin-top: var(--sp-2);
    }
    /* 默认标签预览两键（v1.5.5）：与合并提示同一病——两个都是 cell-action、无水平内边距，
       缩成两颗一模一样的贴字小胶囊，主次不分。改为等宽撑满、左「取消」中性（壳面底）、
       右「添加」保留 accent 浅底作主按钮，顺序与合并提示一致。不用 accent 实心底白字：
       暗色 --accent（#a99fff）上白字对比度约 2.4:1。cell-action 自带的 10px 下边距保留
       （v1.4.2 起由用例守着）。 */
    .cfg-defaults-actions {
      display: flex;
      gap: var(--sp-2);
      margin-top: 6px;
    }
    .cfg-defaults-actions > button {
      flex: 1 1 0;
      min-width: 0;
      min-height: var(--control-h);
      padding: 0 var(--sp-3);
    }
    .cfg-defaults-actions > [data-action="cancel-locale-defaults"] {
      background: var(--chrome);
      color: var(--text);
    }
    .cfg-defaults-actions > button:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }
    /* 合并提示两键（v1.5.4，真机反馈「显示一般」）：原来直接沿用 cell-action / cell-danger——
       没有水平内边距，缩成两颗贴字、宽窄不一、靠左的小胶囊；10% 色调底放在同样是 danger
       色调的提示框里，「合并」的红底几乎融进框里，「先不合并」的紫底又和粉框打架。
       改成等宽两键撑满一行、卡片底把按钮从提示框里托出来：左「先不合并」中性，右「合并」
       danger 字 + danger 描边——仿 iOS 双按钮提示框，破坏性动作靠颜色与位置区分。
       不用实心红底白字：暗色 --danger 上白字对比度约 3.6:1，不到正文 4.5:1。
       只作用于这一处；整行按钮的全局收敛归 SPEC-016 B 期。 */
    .cfg-merge-actions {
      display: flex;
      flex: 1 1 100%;
      gap: var(--sp-2);
      margin-top: var(--sp-1);
    }
    .cfg-merge-actions > button {
      flex: 1 1 0;
      min-width: 0;
      min-height: var(--control-h);
      margin: 0;
      padding: 0 var(--sp-3);
      background: var(--card);
    }
    .cfg-merge-actions > .cell-action {
      color: var(--text);
      box-shadow: inset 0 0 0 1px var(--border);
    }
    .cfg-merge-actions > .cell-danger {
      color: var(--danger);
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 55%, transparent);
    }
    .cfg-merge-actions > button:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }
    .cfg-line {
      display: flex;
      align-items: center;
      gap: var(--sp-2);
      min-width: 0;
    }
    .cfg-line .cfg-name {
      flex: 1;
      min-width: 0;
      background: var(--card);
      min-height: 40px;
      padding: 7px 11px;
    }
    .cfg-line .cfg-bucket {
      flex: 0 0 96px;
      width: 96px;
      background: var(--card);
      min-height: 40px;
      padding: 7px 11px;
    }
    .cfg-sub {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--sp-2);
      margin-top: 6px;
      min-width: 0;
    }
    .cfg-long {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--muted);
      font-size: var(--fs-cap);
    }
    .cfg-long[hidden] { display: none; }
    .cfg-count {
      color: var(--faint);
      font-size: var(--fs-cap);
      font-variant-numeric: tabular-nums;
      flex: 0 0 auto;
    }
    /* v82：删除只出现在零记录的行上，占的正是「N 条记录」那个右槽——两者互斥，
       所以行高不变。danger 色是 mini-btn 的唯一例外（其余都是 accent 文字链）。 */
    .cfg-delete {
      flex: 0 0 auto;
      color: var(--danger);
    }
    /* 待删除是**可撤销的中间态**，不是已经消失：行留在原地变灰，按钮翻成「撤销」，
       真正生效要按 sheet 头部的「保存」。 */
    .cfg-row[data-pending-delete="1"] { opacity: 0.5; }
    .cfg-row[data-pending-delete="1"] .cfg-name,
    .cfg-row[data-pending-delete="1"] .cfg-chip-name { text-decoration: line-through; }
    .cfg-row[data-pending-delete="1"] .cfg-delete { color: var(--accent); }
    .cfg-empty { margin-top: 0; }
    /* v83：组内最后一个是「＋ 新建标签」。SPEC-017 起它是标签云末尾的虚线 chip，
       accent 文字表明它是动作而不是又一个标签。 */
    .cfg-add {
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      padding: 8px 14px;
      border: 1px dashed var(--border);
      border-radius: var(--r-pill);
      background: transparent;
      color: var(--accent);
      font-size: var(--fs-ui);
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
    }
    @media (min-width: 720px) {
      .form-sheet {
        align-items: center;
        padding: var(--sp-5);
      }
      .form-sheet-panel {
        max-width: 520px;
        border-bottom: 1px solid var(--border);
        border-radius: var(--r-sheet);
        box-shadow: var(--shadow-3);
      }
      .form-sheet-body {
        padding-bottom: var(--sp-4);
      }
      /* 居中 dialog 无软键盘：定高 .tall 收回，按内容自适应。 */
      .form-sheet-panel.tall { height: auto; }
    }
    body.sheet-open {
      overflow: hidden;
    }
    body.sheet-open .update-banner { bottom: calc(12px + env(safe-area-inset-bottom)); }

    .empty-tip {
      text-align: center;
      color: var(--muted);
      padding: 36px 0;
      font-size: var(--fs-ui-strong);
    }

    /* Summary */
    .summary-list {
      display: grid;
      gap: var(--sp-2);
    }
    .sum-row {
      width: 100%;
      background: var(--card);
      border: 1px solid transparent;
      border-radius: var(--r-card);
      color: var(--text);
      padding: var(--sp-3) 14px;
      font-family: inherit;
      text-align: left;
      cursor: pointer;
      min-width: 0;
      box-shadow: var(--shadow-1), var(--top-light);
    }
    .sum-row:active { border-color: var(--accent); }
    .sum-top {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 10px;
      margin-bottom: var(--sp-2);
      min-width: 0;
    }
    .sum-name {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: var(--fs-body);
      font-weight: 600;
    }
    .sum-total {
      flex: 0 0 auto;
      font-size: var(--fs-cap);
      color: var(--muted);
      font-variant-numeric: tabular-nums;
    }
    .sum-meta {
      display: flex;
      gap: var(--sp-3);
      flex-wrap: wrap;
      color: var(--muted);
      font-size: var(--fs-cap);
      min-width: 0;
      font-variant-numeric: tabular-nums;
    }
    .sum-meta span {
      min-width: 0;
      overflow-wrap: anywhere;
    }

    @container (max-width: 420px) {
      .entry { padding: 11px var(--sp-3) 11px var(--sp-4); gap: var(--sp-2); }
    }

    .bucket-seg { margin-bottom: 10px; }
    .record-mode-seg { margin-bottom: var(--sp-3); }
    .cell-btn[aria-disabled="true"] {
      opacity: 0.45;
      cursor: not-allowed;
    }
    .cell-btn[aria-disabled="true"]:active { opacity: 0.45; }
    .import-file { display: none; }

    /* === v1.3.0 时间拨号盘分析页 ===
       挂在「更多」下的 analytics sheet。调色全部复用既有令牌：拨号键面用 --input，
       四桶脊色用 --accent/--maintain/--leak/--track，「接通」键用 --maintain（本站无
       独立 green 令牌，维持键的绿即连接色）。无新令牌、无新运行时资产。 */
    .analytics-body { display: flex; flex-direction: column; gap: 6px; }
    .an-period { align-self: center; margin: 2px 0 var(--sp-1); }
    .an-period-label { text-align: center; color: var(--muted); font-size: var(--fs-cap); }

    .an-display { text-align: center; padding: 6px var(--sp-1) 2px; }
    .an-headline {
      font-size: 40px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; /* raw: 展示数字，按版式单定、不进字阶 */
      font-variant-numeric: tabular-nums; color: var(--text);
    }
    .an-headline .u { font-size: 20px; font-weight: 600; color: var(--muted); margin-left: 2px; } /* raw: 展示数字，按版式单定、不进字阶 */
    .an-subline { color: var(--muted); font-size: var(--fs-ui); margin-top: 6px; }
    .an-subline b { color: var(--text); }
    .an-delta { color: var(--faint); font-size: var(--fs-cap); margin-top: 3px; min-height: 16px; }
    .an-trend { color: var(--accent); font-size: var(--fs-cap); margin-top: 2px; }
    .an-coverage { color: var(--faint); font-size: var(--fs-cap); margin-top: var(--sp-1); }
    .an-spark { height: 40px; margin: var(--sp-2) 6px 0; }
    .an-spark svg { width: 100%; height: 40px; overflow: visible; }
    .an-spark rect { fill: var(--accent); }
    .an-spark-maintain rect { fill: var(--maintain); }
    .an-spark-leak rect { fill: var(--leak); }
    .an-spark-unrecorded rect { fill: var(--track); }

    .an-padwrap { display: flex; justify-content: center; }
    .an-pad {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px var(--sp-2);
      padding: var(--sp-3) 2px 6px; width: 100%; max-width: 340px;
    }
    .an-tile {
      display: flex; flex-direction: column; align-items: center; gap: 7px;
      background: none; border: 0; cursor: pointer; font: inherit; color: inherit; padding: 0;
    }
    .an-disc {
      width: 72px; height: 72px; border-radius: 50%; background: var(--input);
      display: grid; place-items: center; position: relative; box-shadow: var(--shadow-2);
      transition: transform var(--t-fast);
    }
    .an-tile:active .an-disc { transform: scale(0.93); }
    .an-tile.sel .an-disc { outline: 2px solid var(--accent); outline-offset: 3px; }
    .an-tile:focus-visible .an-disc { outline: 2px solid var(--accent); outline-offset: 3px; }
    .an-big { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); } /* raw: 展示数字，按版式单定、不进字阶 */
    .an-big .u { font-size: var(--fs-cap); font-weight: 600; color: var(--muted); margin-left: 1px; }
    .an-disc::after {
      content: ""; position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
      width: 15px; height: 3px; border-radius: var(--r-pill); background: var(--track);
    }
    .an-disc.job::after { background: var(--accent); }
    .an-disc.maintain::after { background: var(--maintain); }
    .an-disc.leak::after { background: var(--leak); }
    .an-disc.unrec::after { background: var(--track); }
    .an-cap { font-size: var(--fs-cap); color: var(--muted); text-align: center; line-height: 1.25; max-width: 92px; overflow-wrap: anywhere; }

    .an-pager { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 2px 0; min-height: 24px; }
    .an-dots { display: flex; gap: 7px; }
    .an-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--track); border: 0; padding: 0; cursor: pointer; }
    .an-dot.on { background: var(--accent); }
    .an-arrow { background: none; border: 0; color: var(--muted); font-size: var(--fs-title); cursor: pointer; padding: 2px var(--sp-2); line-height: 1; }
    .an-arrow[disabled] { opacity: 0.3; cursor: default; }

    .an-call-wrap { display: grid; place-items: center; padding: 10px 0 var(--sp-1); }
    .an-call {
      width: 60px; height: 60px; border-radius: 50%; background: var(--maintain); border: 0; cursor: pointer;
      display: grid; place-items: center; box-shadow: var(--shadow-2);
    }
    .an-call svg { width: 27px; height: 27px; fill: #fff; }
    .an-call:active { transform: scale(0.94); }
    .an-call:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
    .an-call-label { color: var(--muted); font-size: var(--fs-cap); margin-top: 7px; }