/*
  时间尺 (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 定稿）：
  - 双色板：暗=石墨冷（默认）、亮=宣纸暖；三个有彩桶色均过 dataviz 六项校验
  - 结构令牌全站唯一：圆角 12/16/22、动效 140/280ms、字阶 12/13/15/17
  - 海拔用阴影（亮）/ 阴影+顶光（暗），描边整体降级为 hairline 或透明占位
  - 行为零变更：选择器、布局机制（P13-P16 护栏）与 v32 完全一致
*/
    /* === 结构令牌（不随主题变） === */
    :root {
      --r-ctl: 12px;
      --r-card: 16px;
      --r-sheet: 22px;
      --fs-cap: 12px;
      --fs-ui: 13px;
      --fs-body: 15px;
      --fs-title: 17px;
      --t-fast: 140ms ease-out;
      --t-med: 280ms cubic-bezier(0.32, 0.72, 0, 1);
      --control-h: 44px;
      --icon-btn: 44px;
    }
    /* === 暗·石墨（默认） === */
    :root {
      --bg: #0e0f13;
      --card: #16171e;
      --input: #1d1f29;
      --border: rgba(255,255,255,0.09);
      --track: #262838;
      --accent: #8b7cff;
      --accent-bg: rgba(139,124,255,0.14);
      --maintain: #46a878;
      --maintain-bg: rgba(70,168,120,0.14);
      --leak: #c9803c;
      --leak-bg: rgba(201,128,60,0.16);
      --green: var(--maintain);
      --green-bg: var(--maintain-bg);
      --text: #e8e9f1;
      --muted: #9fa1b8;
      --faint: #6c6e85;
      --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 {
        --bg: #f7f5f1;
        --card: #ffffff;
        --input: #f1efe9;
        --border: rgba(48,42,30,0.10);
        --track: #e4e1d9;
        --accent: #6b5ce6;
        --accent-bg: #efecfc;
        --maintain: #3f9e70;
        --maintain-bg: #e9f4ee;
        --leak: #c4703a;
        --leak-bg: #f8ede4;
        --green: var(--maintain);
        --green-bg: var(--maintain-bg);
        --text: #33323b;
        --muted: #77747f;
        --faint: #a09da8;
        --danger: #cf4d5e;
        --shadow-1: 0 1px 2px rgba(48,42,30,0.06), 0 2px 8px rgba(48,42,30,0.05);
        --shadow-2: 0 2px 6px rgba(48,42,30,0.07), 0 10px 28px rgba(48,42,30,0.08);
        --shadow-3: 0 8px 20px rgba(48,42,30,0.10), 0 28px 64px rgba(48,42,30,0.14);
        --top-light: none;
      }
    }
    /* === 手动覆盖（优先级高于 media query） === */
    html[data-theme="light"] {
      --bg: #f7f5f1;
      --card: #ffffff;
      --input: #f1efe9;
      --border: rgba(48,42,30,0.10);
      --track: #e4e1d9;
      --accent: #6b5ce6;
      --accent-bg: #efecfc;
      --maintain: #3f9e70;
      --maintain-bg: #e9f4ee;
      --leak: #c4703a;
      --leak-bg: #f8ede4;
      --green: var(--maintain);
      --green-bg: var(--maintain-bg);
      --text: #33323b;
      --muted: #77747f;
      --faint: #a09da8;
      --danger: #cf4d5e;
      --shadow-1: 0 1px 2px rgba(48,42,30,0.06), 0 2px 8px rgba(48,42,30,0.05);
      --shadow-2: 0 2px 6px rgba(48,42,30,0.07), 0 10px 28px rgba(48,42,30,0.08);
      --shadow-3: 0 8px 20px rgba(48,42,30,0.10), 0 28px 64px rgba(48,42,30,0.14);
      --top-light: none;
    }
    html[data-theme="dark"] {
      --bg: #0e0f13;
      --card: #16171e;
      --input: #1d1f29;
      --border: rgba(255,255,255,0.09);
      --track: #262838;
      --accent: #8b7cff;
      --accent-bg: rgba(139,124,255,0.14);
      --maintain: #46a878;
      --maintain-bg: rgba(70,168,120,0.14);
      --leak: #c9803c;
      --leak-bg: rgba(201,128,60,0.16);
      --green: var(--maintain);
      --green-bg: var(--maintain-bg);
      --text: #e8e9f1;
      --muted: #9fa1b8;
      --faint: #6c6e85;
      --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; }
    body {
      background: var(--bg);
      color: var(--text);
      font-family: -apple-system, 'PingFang SC', 'Helvetica Neue', system-ui, sans-serif;
      font-size: 16px;
      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) :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; }
    .app {
      width: 100%;
      flex: 1 0 auto;
      max-width: 600px;
      margin: 0 auto;
      padding: env(safe-area-inset-top) clamp(12px, 4vw, 16px) 18px;
      container-type: inline-size;
    }

    /* Header */
    .hdr {
      padding: 20px 0 16px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }
    .hdr-brand {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .hdr-icon-link,
    .github-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: 17px;
      font-family: inherit;
    }
    .hdr-icon-link:active,
    .github-link:active,
    .hdr-action-btn:active { background: var(--input); }
    .hdr-icon {
      display: block;
      width: 32px;
      height: 32px;
      border-radius: 8px;
    }
    .hdr-title {
      flex: 0 0 auto;
      color: var(--text);
      font-size: 20px;
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: 0.01em;
      white-space: nowrap;
    }
    .github-link {
      opacity: 0.72;
      transition: opacity 0.2s ease, background 0.2s ease;
    }
    .hdr-actions {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      color: var(--text);
    }
    .github-link:hover,
    .github-link:focus-visible { opacity: 1; }
    .github-icon {
      display: block;
      width: 20px;
      height: 20px;
    }
    .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: 10px;
      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), var(--top-light);
    }
    .theme-seg {
      flex: 0 0 auto;
      margin-left: 0;
      min-width: 0;
    }
    .theme-seg button { padding: 7px 8px; }
    @container (max-width: 390px) {
      .hdr-title { display: none; }
    }
    @container (max-width: 330px) {
      .theme-seg button { padding-left: 7px; padding-right: 7px; }
    }
    /* Add button */
    .add-btn {
      width: 100%;
      padding: 15px;
      background: var(--accent);
      color: #fff;
      border: none;
      border-radius: var(--r-card);
      font-size: 16px;
      font-weight: 650;
      cursor: pointer;
      margin-bottom: 12px;
      letter-spacing: 0.3px;
      box-shadow: 0 5px 16px color-mix(in srgb, var(--accent) 30%, transparent);
      transition: transform var(--t-fast), opacity var(--t-fast);
    }
    .add-btn:active { opacity: 0.85; transform: scale(0.985); }
    .add-btn[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: 10px;
      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: 12px;
    }
    .view-tabs {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .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: 8px;
      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;
      }
    }
    .nav-btn {
      min-width: 0;
      height: 44px;
      background: var(--card);
      color: var(--text);
      border: 1px solid transparent;
      border-radius: var(--r-ctl);
      font-size: 14px;
      font-family: inherit;
      cursor: pointer;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      box-shadow: var(--shadow-1), var(--top-light);
    }
    .nav-btn:active { opacity: 0.75; }
    .period-label {
      min-width: 0;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--card);
      border: 1px solid transparent;
      border-radius: var(--r-ctl);
      color: var(--text);
      font-size: 14px;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding: 0 10px;
      box-shadow: var(--shadow-1), var(--top-light);
    }

    /* Form */
    .fl { margin-bottom: 11px; min-width: 0; }
    .fl-label { font-size: var(--fs-cap); color: var(--muted); margin-bottom: 4px; }
    .inp {
      width: 100%;
      background: var(--input);
      border: 1px solid transparent;
      border-radius: var(--r-ctl);
      color: var(--text);
      font-size: 16px;
      font-family: inherit;
      padding: 10px 12px;
      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: 8px; }
    .edit-tag-input { margin-bottom: 10px; }

    /* Chips */
    .chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 7px; }
    .chip-group { display: grid; gap: 4px; margin-bottom: 8px; }
    .chip-group-label {
      color: var(--muted);
      font-size: var(--fs-cap);
    }
    .chip {
      min-height: 44px;
      padding: 8px 15px;
      border-radius: 999px;
      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; }

    .form-time-row {
      display: flex;
      align-items: center;
      gap: 8px;
      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: 15px;
      font-variant-numeric: tabular-nums;
      font-weight: 650;
      color: var(--accent);
      text-decoration: underline;
      text-underline-offset: 3px;
      border-radius: 4px;
      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; }

    /* Form actions */
    .form-btns {
      display: flex;
      align-items: stretch;
      gap: 8px;
      min-height: var(--control-h);
      margin-top: 4px;
    }
    .btn-pri {
      flex: 1;
      min-height: var(--control-h);
      padding: 0 12px;
      background: var(--accent);
      color: #fff;
      border: none;
      border-radius: var(--r-ctl);
      font-size: 16px;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
    }
    .btn-pri:active { opacity: 0.8; }
    .btn-sec {
      min-height: var(--control-h);
      min-width: 88px;
      padding: 0 16px;
      background: transparent;
      color: var(--muted);
      border: 1px solid var(--border);
      border-radius: var(--r-ctl);
      font-size: 16px;
      font-family: inherit;
      cursor: pointer;
    }
    .btn-pri, .btn-sec {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1.2;
    }

    /* 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;
      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: 14px;
      color: var(--text);
      cursor: pointer;
      user-select: none;
      white-space: nowrap;
      padding: 0 4px;
    }
    .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: 1;
    }
    .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: 4px 0;
    }
    /* Desktop datetime picker */
    .dt-picker {
      display: grid;
      gap: 9px;
      position: relative;
    }
    .dt-trigger {
      display: flex;
      align-items: center;
      gap: 8px;
      height: var(--control-h);
      background: var(--input);
      color: var(--text);
      border: 1px solid transparent;
      border-radius: var(--r-ctl);
      font-size: 15px;
      font-family: inherit;
      cursor: pointer;
      padding: 0 12px;
      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: 12px;
      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: 8px;
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
    }
    .dt-nav {
      background: transparent;
      border: none;
      color: var(--text);
      font-size: 18px;
      font-family: inherit;
      cursor: pointer;
      padding: 2px 8px;
      border-radius: 8px;
    }
    .dt-nav:hover { background: var(--input); }
    .dt-cal-dow {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      text-align: center;
      font-size: 11px;
      color: var(--muted);
      margin-bottom: 4px;
    }
    .dt-cal-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 2px;
    }
    .dt-day {
      aspect-ratio: 1;
      background: transparent;
      border: none;
      border-radius: 8px;
      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: 8px;
      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: 8px;
      color: var(--text);
      font-size: 11px;
      font-family: inherit;
      cursor: pointer;
      padding: 2px 8px;
      line-height: 1;
    }
    .dt-step-btn:hover { background: var(--input); }
    .dt-step-inp {
      width: 44px;
      text-align: center;
      font-size: 16px;
      font-family: inherit;
      background: var(--input);
      color: var(--text);
      border: 1px solid transparent;
      border-radius: 8px;
      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: 18px;
      font-weight: 600;
      color: var(--text);
      padding-bottom: 2px;
    }
    .dt-now {
      margin-left: 4px;
      background: transparent;
      border: 1px solid var(--border);
      border-radius: 10px;
      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: 4px; }
    .dt-precise-label { font-size: 11px; 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 16px;
      margin-bottom: 12px;
      min-height: 82px;
      box-shadow: var(--shadow-1), var(--top-light);
    }
    .ruler-bar {
      height: 9px;
      border-radius: 5px;
      background: transparent;
      display: flex;
      overflow: hidden;
      margin-bottom: 9px;
      gap: 2px;
    }
    .ruler-bar div { transition: flex 0.3s; }
    .ruler-bar div:first-child { border-radius: 5px 0 0 5px; }
    .ruler-bar div:last-child { border-radius: 0 5px 5px 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: 3px;
      flex-shrink: 0;
    }

    /* Timeline */
    .tl-label {
      font-size: var(--fs-cap);
      color: var(--faint);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      margin-bottom: 8px;
    }
    .tl-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      min-height: 34px;
    }
    .switch-btn {
      min-height: 30px;
      flex: 0 0 auto;
    }
    #timeline { min-height: 160px; }
    html[data-boot="has-entries"] #timeline { min-height: 360px; }
    .entry {
      background: var(--card);
      border-radius: var(--r-card);
      padding: 12px 14px;
      margin-bottom: 8px;
      display: flex;
      align-items: flex-start;
      gap: 10px;
      border: 1px solid transparent;
      min-width: 0;
      box-shadow: var(--shadow-1), var(--top-light);
    }
    .entry.editing { border-color: var(--accent); }
    .entry.sheet-editing { border-color: var(--accent); }
    .entry.placeholder { border-color: var(--border); }
    .entry.gap { border-style: dashed; border-color: var(--border); background: transparent; box-shadow: none; }
    .entry.gap .e-what { color: var(--muted); }
    .e-body { flex: 1; min-width: 0; }
    .e-time { font-size: var(--fs-ui); color: var(--muted); font-variant-numeric: tabular-nums; margin-bottom: 2px; }
    .e-what { font-size: var(--fs-body); color: var(--text); word-break: break-word; white-space: pre-wrap; margin-bottom: 5px; }
    .entry.placeholder .e-what { color: var(--muted); }
    .e-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
    .e-meta > * { min-width: 0; }
    .e-tag {
      font-size: var(--fs-cap);
      padding: 2px 9px;
      border-radius: 8px;
      background: var(--accent-bg);
      color: var(--accent);
      max-width: 100%;
      overflow-wrap: anywhere;
    }
    .e-tag-job { background: var(--accent-bg); color: var(--accent); }
    .e-tag-maintain { background: var(--maintain-bg); color: var(--maintain); }
    .e-tag-leak { background: var(--leak-bg); color: var(--leak); }
    .e-tag-unrecorded { background: var(--input); color: var(--muted); }
    .e-dur {
      font-size: var(--fs-cap);
      color: var(--muted);
      overflow-wrap: anywhere;
      font-variant-numeric: tabular-nums;
    }
    .e-btns {
      display: flex;
      flex-direction: column;
      gap: 6px;
      flex: 0 0 var(--icon-btn);
      width: var(--icon-btn);
    }
    .icon-btn {
      width: var(--icon-btn);
      height: var(--icon-btn);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 var(--icon-btn);
      padding: 0;
      background: transparent;
      border: none;
      color: var(--muted);
      font-family: inherit;
      cursor: pointer;
      border-radius: 10px;
      transition: background var(--t-fast), color var(--t-fast);
    }
    .icon-btn svg {
      width: 18px;
      height: 18px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .icon-btn:active { background: var(--input); }
    .icon-btn.dbtn { color: var(--danger); }
    .edit-context {
      display: grid;
      gap: 2px;
      padding-bottom: 10px;
      margin-bottom: 12px;
      border-bottom: 1px solid var(--border);
    }
    .edit-actions {
      justify-content: flex-end;
      min-height: var(--icon-btn);
      margin-top: 8px;
    }
    .edit-actions .icon-btn {
      border: 1px solid var(--border);
    }
    .edit-actions .save-btn {
      background: var(--accent);
      border-color: var(--accent);
      color: #fff;
    }
    .edit-actions .cancel-btn {
      background: transparent;
      color: var(--muted);
    }
    .mini-btn {
      min-width: 0;
      min-height: 30px;
      padding: 2px 11px;
      border: 1px solid transparent;
      border-radius: 9px;
      background: var(--accent-bg);
      color: var(--accent);
      font-size: var(--fs-cap);
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      white-space: normal;
      overflow-wrap: anywhere;
    }
    .mini-btn:active { opacity: 0.75; }
    .time-toggle {
      width: 100%;
      min-height: 40px;
      padding: 0 12px;
      border: 1px solid var(--border);
      border-radius: var(--r-ctl);
      background: transparent;
      color: var(--text);
      font-size: 15px;
      font-family: inherit;
      cursor: pointer;
      text-align: left;
    }
    .time-collapse { margin-top: 8px; }
    .time-collapse[hidden] { display: none; }

    /* Update prompt */
    .update-banner {
      position: sticky;
      bottom: calc(12px + env(safe-area-inset-bottom));
      z-index: 60;
      width: min(600px, calc(100% - 24px));
      margin: 0 auto 12px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: var(--card);
      color: var(--text);
      box-shadow: var(--shadow-3);
    }
    .update-banner[hidden] { display: none; }
    .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 12px;
      border: none;
      border-radius: 10px;
      background: var(--accent);
      color: #fff;
      font-size: 14px;
      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 16px;
      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;
    }

    /* Form sheet */
    .form-sheet {
      position: fixed;
      left: 0;
      right: 0;
      /* Track the visual viewport so the iOS keyboard cannot push the sticky
         head (and its save ✓) off-screen. Falls back to the full layout
         viewport when visualViewport vars are unset. */
      top: var(--vvt, 0px);
      height: var(--vvh, 100%);
      z-index: 80;
      display: grid;
      align-items: end;
    }
    .form-sheet[hidden] { display: none; }
    /* P16: present only for the one-shot settled-geometry write after a
       keyboard burst — turns the single remaining snap into a short glide.
       (.sheet-closing still wins during teardown and kills all transitions.) */
    .form-sheet.vv-glide { transition: top 0.18s ease-out, height 0.18s ease-out; }
    .form-sheet.vv-glide .form-sheet-panel {
      transition: transform 0.25s ease-out, opacity 0.2s ease, max-height 0.18s ease-out;
    }
    @media (prefers-reduced-motion: reduce) {
      .form-sheet.vv-glide,
      .form-sheet.vv-glide .form-sheet-panel { transition: none; }
    }
    .form-sheet-backdrop {
      position: absolute;
      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: min(var(--vvh, 92dvh), 720px, calc(100dvh - env(safe-area-inset-top) - 8px));
      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 16px;
      box-shadow: var(--shadow-3);
      transition: transform 0.25s ease-out, opacity 0.2s ease;
    }
    /* v33: sheet 进场动画（纯 CSS 渐进增强；hidden→显示时从 @starting-style 过渡进来。
       关闭仍走 hidden 瞬断；P14 teardown 与 vv-glide 不受影响。旧浏览器无此规则=直接弹出。 */
    @starting-style {
      .form-sheet:not([hidden]) .form-sheet-panel { transform: translateY(18px); opacity: 0; }
      .form-sheet:not([hidden]) .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; }
    .icon-btn:focus:not(:focus-visible) { outline: none; }
    .form-sheet-head {
      position: sticky;
      top: 0;
      z-index: 5;
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 64px;
      margin: 0 -16px;
      padding: calc(12px + env(safe-area-inset-top)) 16px 10px;
      background: var(--card);
      border-radius: var(--r-sheet) var(--r-sheet) 0 0;
      border-bottom: 1px solid var(--border);
    }
    .form-sheet-summary {
      min-width: 0;
      flex: 1;
    }
    .form-sheet-title {
      color: var(--muted);
      font-size: var(--fs-cap);
      font-weight: 500;
    }
    .form-sheet-what {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--text);
      font-size: var(--fs-body);
    }
    .form-sheet-actions {
      display: flex;
      gap: 8px;
      flex: 0 0 auto;
    }
    .form-sheet-actions .icon-btn { border: 1px solid var(--border); }
    .form-sheet-actions .save-btn {
      border-color: var(--accent);
      background: var(--accent);
      color: #fff;
      box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 30%, transparent);
    }
    .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: 12px;
      padding-top: 14px;
      padding-bottom: calc(16px + env(safe-area-inset-bottom));
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      scroll-padding-top: 84px;
      flex: 1;
      min-height: 0;
    }
    .help-body section {
      display: grid;
      gap: 4px;
      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;
    }
    .config-body { gap: 10px; }
    .cfg-list { display: grid; gap: 8px; }
    .cfg-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(86px, 0.55fr);
      gap: 7px;
      align-items: center;
      padding: 8px;
      border: 1px solid transparent;
      border-radius: 14px;
      background: var(--input);
    }
    .cfg-row .inp { background: var(--card); }
    .cfg-long {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--muted);
      font-size: var(--fs-cap);
    }
    .cfg-row .mini-btn { min-height: 34px; }
    .cfg-add { width: 100%; }
    @media (max-width: 390px) {
      .cfg-row { grid-template-columns: 1fr; }
    }
    @media (min-width: 720px) {
      .form-sheet {
        align-items: center;
        padding: 24px;
      }
      .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: 16px;
      }
    }
    body.sheet-open {
      overflow: hidden;
    }
    body.sheet-open .footer { display: none; }
    body.sheet-open .update-banner { bottom: calc(12px + env(safe-area-inset-bottom)); }
    /* P14: during the deferred teardown (soft keyboard collapsing before we close
       + render) suppress transitions/animations so any residual reflow lands in a
       single silent frame instead of animating a visible second jump. */
    body.sheet-closing * {
      transition: none !important;
      animation: none !important;
    }

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

    /* Summary */
    .summary-list {
      display: grid;
      gap: 8px;
    }
    .sum-row {
      width: 100%;
      background: var(--card);
      border: 1px solid transparent;
      border-radius: var(--r-card);
      color: var(--text);
      padding: 12px 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: 8px;
      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: 12px;
      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: 12px; gap: 8px; }
    }

    /* Footer */
    .footer {
      position: sticky;
      bottom: 0;
      flex: 0 0 auto;
      z-index: 50;
      background: var(--bg);
      border-top: 1px solid var(--border);
      padding: 8px clamp(12px, 4vw, 16px);
      padding-bottom: calc(8px + env(safe-area-inset-bottom));
      min-height: 52px;
    }
    .footer-inner {
      max-width: 600px;
      margin: 0 auto;
      container-type: inline-size;
    }
    .footer-btns {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 8px;
    }
    .backup-sheet-btns {
      display: grid;
      gap: 8px;
    }
    .copy-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 0;
      min-height: 40px;
      padding: 0 8px;
      background: transparent;
      color: var(--muted);
      border: 1px solid var(--border);
      border-radius: var(--r-ctl);
      font-size: var(--fs-ui);
      font-family: inherit;
      cursor: pointer;
      white-space: nowrap;
      transition: color var(--t-fast), border-color var(--t-fast);
    }
    .copy-btn.copied { color: var(--accent); border-color: var(--accent); }
    .copy-btn:active { opacity: 0.7; }
    .copy-btn[hidden] { display: none; }
    .bucket-seg { margin-bottom: 10px; }
    .record-mode-seg { margin-bottom: 12px; }
    .entry.planned {
      border: 1px dashed var(--border);
      background: color-mix(in srgb, var(--bg) 92%, var(--muted));
      box-shadow: none;
    }
    .entry.planned .e-tag-planned {
      color: var(--muted);
      border-color: var(--border);
    }
    .copy-btn[aria-disabled="true"] {
      opacity: 0.45;
      cursor: not-allowed;
    }
    .copy-btn[aria-disabled="true"]:active { opacity: 0.45; }
    .import-file { display: none; }