:root {
      --bg-deep: #1a3a3a;
      --bg-soft: #2f6b5c;
      --sand: #f3efe6;
      --sand-2: #e8e1d2;
      --ink: #1c2b2a;
      --ink-soft: #4a5f5c;
      --mint: #7ec8b0;
      --coral: #e07a5f;
      --sun: #f2c14e;
      --good: #3d9b7a;
      --shadow: 0 18px 50px rgba(20, 40, 38, 0.28);
      --radius: 28px;
      --ease: cubic-bezier(0.22, 1, 0.36, 1);
      --ui-font: clamp(15px, 1.55vw + 0.55vh, 18px);
      --btn-min-h: clamp(44px, 6.5vh, 56px);
      --btn-pad-y: clamp(10px, 1.8vh, 16px);
      --btn-pad-x: clamp(16px, 2.2vw, 26px);
      --btn-font: clamp(0.95rem, 1.1vw + 0.55vh, 1.08rem);
      --tap-min: 44px;
      --page-pad-x: clamp(14px, 2.8vw, 32px);
      --page-pad-y: clamp(4px, 1.2vh, 12px);
      --topbar-pad-y: clamp(8px, 1.6vh, 16px);
      --safe-top: env(safe-area-inset-top, 0px);
      --safe-right: env(safe-area-inset-right, 0px);
      --safe-bottom: env(safe-area-inset-bottom, 0px);
      --safe-left: env(safe-area-inset-left, 0px);
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    html {
      height: 100%;
      height: 100dvh;
      font-size: var(--ui-font);
    }
    html, body { height: 100%; height: 100dvh; }
    body {
      font-family: "Noto Sans SC", system-ui, sans-serif;
      font-size: 1rem;
      line-height: 1.5;
      color: var(--ink);
      background:
        radial-gradient(1200px 700px at 10% -10%, #3d7a6e 0%, transparent 55%),
        radial-gradient(900px 600px at 110% 20%, #4a8f78 0%, transparent 50%),
        linear-gradient(160deg, #163433 0%, #1f4744 45%, #245a4f 100%);
      display: grid;
      place-items: stretch;
      padding: 0;
      overflow: hidden;
    }

    /* 默认：网页 / App WebView 铺满可视区域 */
    .device {
      width: 100%;
      height: 100%;
      max-width: none;
      max-height: none;
      background: var(--sand);
      border-radius: 0;
      box-shadow: none;
      position: relative;
      overflow: hidden;
      display: grid;
      grid-template-rows: auto 1fr auto;
      min-height: 0;
    }

    /* 桌面预览「设备框」：给 html 加 class preview-frame，或 URL ?frame=1 */
    html.preview-frame body {
      place-items: center;
      padding: 24px;
    }
    html.preview-frame .device {
      width: min(980px, 96vw);
      height: min(680px, 92vh);
      border-radius: 36px;
      box-shadow: var(--shadow), inset 0 0 0 10px #d9d0bf;
    }

    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: max(var(--topbar-pad-y), var(--safe-top))
        max(var(--page-pad-x), calc(var(--safe-right) + 12px))
        4px
        max(var(--page-pad-x), calc(var(--safe-left) + 12px));
      position: relative;
      z-index: 5;
      gap: 12px;
    }
    .brand {
      appearance: none;
      border: 0;
      background: transparent;
      font-family: "Fraunces", "Noto Sans SC", serif;
      font-size: 1.4rem;
      letter-spacing: 0.04em;
      color: var(--ink);
      font-weight: 700;
      display: inline-flex;
      align-items: baseline;
      gap: 8px;
      cursor: pointer;
      padding: 2px 4px 2px 0;
      margin: 0;
      border-radius: 8px;
      transition: opacity 0.15s ease, transform 0.15s ease;
    }
    .brand:hover {
      opacity: 0.82;
    }
    .brand:active {
      transform: scale(0.97);
      opacity: 0.7;
    }
    .brand-ver {
      font-family: "Noto Sans SC", system-ui, sans-serif;
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      color: var(--ink-soft);
      opacity: 0.85;
    }
    .top-home {
      border: none;
      background: rgba(255,255,255,0.72);
      color: var(--ink);
      padding: 10px 16px 10px 12px;
      border-radius: 999px;
      font: inherit;
      font-size: 0.95rem;
      font-weight: 700;
      cursor: pointer;
      border: 1px solid rgba(28,43,42,0.08);
      display: none;
      align-items: center;
      gap: 8px;
      min-height: var(--tap-min);
      box-shadow: 0 4px 14px rgba(28,43,42,0.06);
      transition: background 0.2s ease, transform 0.15s ease;
    }
    .top-home.show { display: inline-flex; }
    .top-home:hover { background: #fff; }
    .top-home:active { transform: scale(0.97); }
    .top-home-ico {
      width: 18px;
      height: 18px;
      flex: none;
      opacity: 0.9;
    }

    .stage {
      position: relative;
      overflow: hidden;
      height: 100%;
      min-height: 0;
    }
    .screen {
      position: absolute;
      inset: 0;
      padding: var(--page-pad-y)
        max(var(--page-pad-x), calc(var(--safe-right) + 8px))
        max(var(--page-pad-y), var(--safe-bottom))
        max(var(--page-pad-x), calc(var(--safe-left) + 8px));
      opacity: 0;
      pointer-events: none;
      transform: translateY(14px) scale(0.985);
      transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }
    .screen.active {
      opacity: 1;
      pointer-events: auto;
      transform: none;
    }
    .screen.scrollable { overflow: auto; }

    .ambient {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(500px 280px at 80% 0%, rgba(242,193,78,0.18), transparent 60%),
        radial-gradient(420px 300px at 0% 100%, rgba(126,200,176,0.22), transparent 55%);
      z-index: 0;
    }

    h1 {
      font-family: "Fraunces", "Noto Sans SC", serif;
      font-size: clamp(1.65rem, 2.2vw + 2.2vh, 3.1rem);
      line-height: 1.15;
      margin-bottom: 10px;
    }
    h2 {
      font-family: "Fraunces", "Noto Sans SC", serif;
      font-size: clamp(1.2rem, 1.1vw + 1.2vh, 1.55rem);
      margin-bottom: 4px;
    }
    .sub {
      color: var(--ink-soft);
      font-size: 0.95rem;
      line-height: 1.5;
      max-width: 36em;
    }

    .hero-home {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      z-index: 1;
    }
    .home-settings-link {
      display: inline-flex;
      margin-top: 18px;
      border: 0;
      background: transparent;
      color: var(--ink-soft);
      font: inherit;
      font-size: 0.88rem;
      text-decoration: underline;
      text-underline-offset: 3px;
      cursor: pointer;
      padding: 0;
      opacity: 0.9;
    }
    .home-settings-link:hover { opacity: 1; color: var(--ink); }

    .habits-screen {
      position: relative;
      z-index: 1;
      height: 100%;
      display: grid;
      grid-template-rows: auto 1fr;
      gap: 10px;
      min-height: 0;
    }
    .habits-panel {
      min-height: 0;
      display: grid;
      grid-template-rows: 1fr auto;
      gap: 12px;
    }
    .hero-copy {
      max-width: 520px;
      animation: rise 0.7s var(--ease) both;
    }
    .date-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: fit-content;
      background: rgba(255,255,255,0.65);
      border-radius: 999px;
      padding: 8px 14px;
      margin-bottom: 16px;
      font-size: 0.9rem;
      color: var(--ink-soft);
    }
    .date-chip i {
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--mint);
      box-shadow: 0 0 0 4px rgba(126,200,176,0.25);
      animation: pulse 2.2s ease-in-out infinite;
    }

    .cta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 18px;
      align-items: center;
    }
    .cta-row.tight { margin-top: 10px; }

    .btn {
      appearance: none;
      border: none;
      cursor: pointer;
      font: inherit;
      border-radius: 18px;
      padding: var(--btn-pad-y) var(--btn-pad-x);
      min-height: var(--btn-min-h);
      font-size: var(--btn-font);
      font-weight: 700;
      transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      user-select: none;
    }
    .btn[hidden],
    [hidden] {
      display: none !important;
    }
    .btn:active { transform: scale(0.97); }
    .btn-primary {
      background: var(--bg-deep);
      color: #f7f4ec;
      box-shadow: 0 10px 24px rgba(26,58,58,0.25);
      font-weight: 700;
      font-size: var(--btn-font);
      padding: var(--btn-pad-y) calc(var(--btn-pad-x) + 4px);
    }
    .btn-primary:hover { background: #214848; }
    .btn-ghost {
      background: rgba(255,255,255,0.55);
      color: var(--ink);
      border: 1px solid rgba(28,43,42,0.08);
    }
    /* 次要操作：与 btn-ghost 区分开（如复制昨天） */
    .btn-quiet {
      background: transparent;
      color: var(--ink-soft);
      border: 1px dashed rgba(28, 43, 42, 0.2);
      font-weight: 600;
      font-size: calc(var(--btn-font) * 0.92);
      opacity: 0.88;
    }
    .btn-quiet:hover {
      background: rgba(255, 255, 255, 0.42);
      color: var(--ink);
      border-color: rgba(28, 43, 42, 0.32);
      opacity: 1;
    }
    .btn-soft {
      background: #fff;
      color: var(--ink);
      border: 1px solid rgba(28,43,42,0.06);
    }
    .btn-good {
      background: var(--bg-soft);
      color: #fff;
      font-weight: 700;
    }
    .btn-sm {
      padding: 12px 18px;
      min-height: 48px;
      border-radius: 14px;
      font-size: 0.95rem;
    }
    .btn:disabled {
      opacity: 0.45;
      cursor: not-allowed;
      transform: none;
    }
    .btn-icon {
      width: 34px;
      height: 34px;
      padding: 0;
      border-radius: 10px;
      justify-content: center;
      background: var(--sand-2);
      color: var(--ink-soft);
      font-size: 1.1rem;
      line-height: 1;
    }
    .btn-icon.danger {
      background: rgba(224,122,95,0.15);
      color: #a84d38;
    }

    .home-art {
      position: absolute;
      right: -10px;
      bottom: 20px;
      width: min(380px, 46%);
      aspect-ratio: 1;
      border-radius: 40% 60% 55% 45% / 45% 40% 60% 55%;
      background:
        radial-gradient(circle at 35% 35%, #ffe9a8 0%, transparent 40%),
        linear-gradient(145deg, #7ec8b0, #3d8f7c 55%, #245a4f);
      opacity: 0.95;
      animation: floatBlob 8s ease-in-out infinite;
      z-index: 0;
    }
    .home-art::after {
      content: "";
      position: absolute;
      inset: 18%;
      border-radius: inherit;
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.2);
    }

    .panel {
      position: relative;
      z-index: 1;
      background: rgba(255,255,255,0.55);
      border: 1px solid rgba(28,43,42,0.06);
      border-radius: var(--radius);
      padding: 18px;
      backdrop-filter: blur(8px);
    }

    /* —— 计划页：一屏 —— */
    .plan-screen {
      position: relative;
      z-index: 1;
      height: 100%;
      display: grid;
      grid-template-rows: auto auto 1fr auto;
      gap: 8px;
      min-height: 0;
    }
    .plan-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 12px;
    }
    .plan-head .sub { font-size: 0.88rem; }
    .task-count {
      font-size: 0.82rem;
      color: var(--ink-soft);
      background: rgba(255,255,255,0.65);
      padding: 6px 12px;
      border-radius: 999px;
      white-space: nowrap;
    }

    .task-list {
      display: grid;
      gap: 8px;
      min-height: 0;
      align-content: start;
      overflow: hidden;
    }
    .task-list.dense .task-item {
      padding: 10px 14px;
      border-radius: 14px;
    }

    .task-item {
      display: grid;
      grid-template-columns: 1fr auto auto;
      gap: 10px;
      align-items: center;
      background: #fff;
      border-radius: 16px;
      padding: 12px 14px;
      border: 1px solid rgba(28,43,42,0.05);
      transition: transform 0.25s var(--ease), opacity 0.2s;
      min-height: 0;
    }
    .task-item.dragging { opacity: 0.55; transform: scale(0.98); }
    .badge {
      font-size: 0.7rem;
      padding: 3px 8px;
      border-radius: 999px;
      background: rgba(107,163,201,0.18);
      color: #356787;
      white-space: nowrap;
    }
    .badge.habit { background: rgba(126,200,176,0.22); color: #2f6b5c; }
    .badge.temp { background: rgba(242,193,78,0.22); color: #8a6a10; }
    .task-title { font-weight: 700; font-size: 0.95rem; }
    .task-meta { font-size: 0.8rem; color: var(--ink-soft); margin-top: 1px; }
    .handle {
      width: 26px; height: 26px;
      border-radius: 8px;
      background: var(--sand-2);
      display: grid;
      place-items: center;
      color: var(--ink-soft);
      font-size: 0.8rem;
      cursor: grab;
      user-select: none;
    }
    .check {
      width: 22px; height: 22px;
      border-radius: 50%;
      border: 2px solid #b9c7c3;
      display: grid;
      place-items: center;
      font-size: 0.7rem;
      color: transparent;
    }

    .plan-fab {
      display: none !important;
    }
    .plan-fab-tip { display: none !important; }

    .sort-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: clamp(6px, 1vw, 10px);
      flex: 1;
      min-height: 0;
      align-content: start;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }
    .sort-tile {
      background: #fff;
      border-radius: 12px;
      padding: 8px 10px 7px;
      border: 1px solid rgba(28,43,42,0.06);
      cursor: grab;
      display: grid;
      grid-template-rows: auto 1fr auto;
      gap: 5px;
      aspect-ratio: 5 / 3;
      width: 100%;
      min-height: 0;
      transition: transform 0.2s var(--ease), box-shadow 0.2s, opacity 0.2s, border-color 0.15s;
      user-select: none;
      -webkit-user-select: none;
      touch-action: none;
      box-shadow: 0 2px 10px rgba(28,43,42,0.04);
      position: relative;
    }
    .sort-tile:active { cursor: grabbing; }
    .sort-tile-ghost {
      position: fixed;
      left: 0;
      top: 0;
      z-index: 80;
      margin: 0;
      pointer-events: none;
      opacity: 0.92;
      box-shadow: 0 16px 36px rgba(28,43,42,0.22);
      transform: translate(-9999px, -9999px);
      aspect-ratio: auto;
      cursor: grabbing;
    }
    .sort-tile .del-btn {
      position: absolute;
      top: 4px;
      right: 4px;
      width: 32px;
      height: 32px;
      min-width: 32px;
      min-height: 32px;
      border: none;
      border-radius: 10px;
      background: rgba(224,122,95,0.12);
      color: #a84d38;
      font-size: 1.1rem;
      cursor: pointer;
      display: grid;
      place-items: center;
      z-index: 2;
    }
    .sort-tile .tile-head {
      display: flex;
      align-items: flex-start;
      gap: 6px;
      min-width: 0;
      padding-right: 32px;
    }
    .sort-tile .ord {
      width: 24px;
      height: 24px;
      border-radius: 7px;
      background: var(--sand-2);
      display: grid;
      place-items: center;
      font-family: "Fraunces", serif;
      font-weight: 700;
      font-size: 0.82rem;
      color: var(--bg-soft);
      flex: none;
      margin-top: 1px;
    }
    .sort-tile.is-editable:hover {
      box-shadow: 0 6px 18px rgba(28,43,42,0.1);
    }
    .sort-tile.dragging {
      opacity: 0.4;
      transform: scale(0.98);
    }
    .sort-placeholder {
      border-radius: 12px;
      border: 2px dashed rgba(47, 107, 92, 0.42);
      background:
        linear-gradient(165deg, rgba(126, 200, 176, 0.14), rgba(126, 200, 176, 0.05));
      aspect-ratio: 5 / 3;
      width: 100%;
      min-height: 0;
      pointer-events: none;
      box-shadow: inset 0 0 0 1px rgba(47, 107, 92, 0.06);
    }
    .sort-tile .ttl {
      flex: 1;
      min-width: 0;
      font-weight: 700;
      font-size: clamp(0.92rem, 1.7vh, 1.08rem);
      line-height: 1.25;
      padding-top: 2px;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .sort-tile .desc {
      font-size: 0.82rem;
      color: var(--ink-soft);
      line-height: 1.35;
      min-height: 0;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      align-self: stretch;
    }
    .sort-tile .desc.is-empty {
      opacity: 0.45;
      font-style: italic;
    }
    .sort-tile .meta {
      font-size: 0.8rem;
      color: var(--ink-soft);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      padding-top: 4px;
      border-top: 1px solid rgba(28,43,42,0.06);
    }
    .sort-tile .badge { font-size: 0.72rem; padding: 3px 8px; }
    .sort-tile .badge-row {
      display: inline-flex;
      gap: 6px;
      align-items: center;
    }
    .sort-tile.cat-学习 {
      background: linear-gradient(165deg, #f4f9fc 0%, #eaf3fa 100%);
      border-color: rgba(74, 144, 186, 0.45);
    }
    .sort-tile.cat-运动 {
      background: linear-gradient(165deg, #f2faf6 0%, #e5f5ee 100%);
      border-color: rgba(61, 155, 122, 0.45);
    }
    .sort-tile.cat-家务 {
      background: linear-gradient(165deg, #fbf7ef 0%, #f5ecda 100%);
      border-color: rgba(201, 154, 58, 0.45);
    }
    .badge.cat {
      background: rgba(28,43,42,0.08);
      color: var(--ink);
    }
    .sort-tile.cat-学习 .badge.cat {
      background: rgba(74, 144, 186, 0.18);
      color: #2f6285;
    }
    .sort-tile.cat-运动 .badge.cat {
      background: rgba(61, 155, 122, 0.18);
      color: #2f6b5c;
    }
    .sort-tile.cat-家务 .badge.cat {
      background: rgba(201, 154, 58, 0.2);
      color: #8a6a10;
    }

    .cat-picks {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .cat-pick {
      min-height: 44px;
      padding: 10px 16px;
      border-radius: 14px;
      border: 1.5px solid rgba(28,43,42,0.12);
      background: #fff;
      font: inherit;
      font-weight: 700;
      cursor: pointer;
      color: var(--ink-soft);
    }
    .cat-pick.cat-学习.on {
      background: rgba(74, 144, 186, 0.16);
      border-color: rgba(74, 144, 186, 0.5);
      color: #2f6285;
    }
    .cat-pick.cat-运动.on {
      background: rgba(61, 155, 122, 0.16);
      border-color: rgba(61, 155, 122, 0.5);
      color: #2f6b5c;
    }
    .cat-pick.cat-家务.on {
      background: rgba(201, 154, 58, 0.18);
      border-color: rgba(201, 154, 58, 0.5);
      color: #8a6a10;
    }

    .habit-card.cat-学习 {
      background: linear-gradient(165deg, #fff 40%, rgba(74, 144, 186, 0.12));
      border-color: rgba(74, 144, 186, 0.28);
    }
    .habit-card.cat-运动 {
      background: linear-gradient(165deg, #fff 40%, rgba(61, 155, 122, 0.12));
      border-color: rgba(61, 155, 122, 0.28);
    }
    .habit-card.cat-家务 {
      background: linear-gradient(165deg, #fff 40%, rgba(201, 154, 58, 0.14));
      border-color: rgba(201, 154, 58, 0.3);
    }
    .habit-pill.cat {
      background: rgba(28,43,42,0.08);
      color: var(--ink);
    }
    .habit-card.cat-学习 .habit-pill.cat {
      background: rgba(74, 144, 186, 0.18);
      color: #2f6285;
    }
    .habit-card.cat-运动 .habit-pill.cat {
      background: rgba(61, 155, 122, 0.18);
      color: #2f6b5c;
    }
    .habit-card.cat-家务 .habit-pill.cat {
      background: rgba(201, 154, 58, 0.2);
      color: #8a6a10;
    }

    .sheet-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      padding-right: 4px;
      margin-bottom: 18px;
    }
    .sheet-head h2 { margin: 0; flex: 1; }
    .sheet-close {
      flex: none;
      min-width: 64px;
      min-height: var(--tap-min);
      padding: 0 16px;
      border: none;
      border-radius: 14px;
      background: rgba(28,43,42,0.08);
      color: var(--ink-soft);
      font: inherit;
      font-size: 1rem;
      font-weight: 700;
      line-height: 1;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 2px;
      transition: background 0.15s, color 0.15s;
    }
    .sheet-close:hover {
      background: rgba(28,43,42,0.14);
      color: var(--ink);
    }
    .sheet-close .x {
      font-size: 1.35rem;
      font-weight: 500;
      line-height: 1;
      margin-left: 2px;
    }

    .task-item .del-btn {
      width: 44px;
      height: 44px;
      min-width: 44px;
      min-height: 44px;
      font-size: 1.25rem;
    }
    .voice-hint-text {
      margin: 0 0 10px;
      padding: 0 4px;
      background: transparent;
      border-radius: 0;
      font-size: 0.92rem;
      line-height: 1.45;
      font-weight: 500;
      color: var(--ink-soft);
    }
    .listen-status { cursor: default; }
    .live-transcript,
    .transcript-box {
      width: 100%;
      margin-top: 4px;
      background: #fff;
      border-radius: 16px;
      padding: 16px 18px;
      border: 1px solid rgba(28,43,42,0.1);
      font: inherit;
      font-size: 1.12rem;
      line-height: 1.6;
      color: var(--ink);
      min-height: 120px;
      resize: vertical;
    }
    .live-transcript-one {
      min-height: var(--tap-min);
      height: auto;
      padding: 12px 14px;
      line-height: 1.4;
      resize: none;
      overflow-x: auto;
      overflow-y: hidden;
      white-space: nowrap;
    }
    .live-transcript:focus {
      outline: none;
      border-color: rgba(47,107,92,0.45);
      box-shadow: 0 0 0 3px rgba(126,200,176,0.25);
    }

    .task-item .del-btn {
      width: 36px;
      height: 36px;
      border: none;
      border-radius: 12px;
      background: rgba(224,122,95,0.12);
      color: #a84d38;
      font-size: 1.1rem;
      cursor: pointer;
      display: grid;
      place-items: center;
      flex: none;
    }

    .exec-board {
      position: relative;
      z-index: 1;
      width: 100%;
      flex: 1;
      height: 100%;
      min-height: 0;
      display: grid;
      grid-template-columns: 0.85fr 1.3fr 0.85fr;
      gap: 14px;
      align-items: stretch;
      padding: 0;
    }
    .exec-side {
      min-height: 0;
      height: 100%;
      max-height: none;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .exec-side-label {
      font-size: 0.92rem;
      color: var(--ink-soft);
      font-weight: 700;
      letter-spacing: 0.04em;
      padding-left: 4px;
      flex: none;
    }
    .done-rail {
      flex: 1;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      gap: clamp(4px, 0.9vh, 8px);
      min-height: 0;
    }
    .done-chip {
      background: rgba(255,255,255,0.55);
      border-radius: 14px;
      padding: clamp(6px, 1.1vh, 12px) 14px;
      font-size: 0.95rem;
      color: var(--ink-soft);
      border: 1px solid rgba(28,43,42,0.05);
      flex: 1 1 0;
      min-height: 0;
      max-height: 96px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .done-chip strong {
      display: block;
      color: var(--ink);
      font-size: clamp(0.88rem, 1.6vh, 1.05rem);
      margin-bottom: 2px;
      text-decoration: line-through;
      text-decoration-color: rgba(28,43,42,0.25);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .done-chip .done-when {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: clamp(0.75rem, 1.3vh, 0.9rem);
      line-height: 1.25;
    }
    .done-empty, .next-empty {
      flex: 1;
      display: grid;
      place-items: center;
      color: var(--ink-soft);
      font-size: 0.95rem;
      background: rgba(255,255,255,0.35);
      border-radius: 16px;
      padding: 16px;
      text-align: center;
      min-height: 0;
    }
    .next-list {
      flex: 1;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      gap: clamp(4px, 0.9vh, 8px);
      min-height: 0;
    }
    .next-item {
      background: #fff;
      border-radius: 14px;
      padding: clamp(6px, 1.1vh, 14px) 16px;
      border: 1px solid rgba(28,43,42,0.06);
      box-shadow: 0 4px 12px rgba(28,43,42,0.05);
      flex: 1 1 0;
      min-height: 0;
      max-height: 110px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .next-item .nc-title {
      font-weight: 700;
      font-size: clamp(0.9rem, 1.7vh, 1.05rem);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .next-item .nc-meta {
      font-size: clamp(0.75rem, 1.3vh, 0.9rem);
      color: var(--ink-soft);
      margin-top: 4px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .exec-center {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 0;
      height: 100%;
      align-self: stretch;
    }
    .exec-card {
      width: 100%;
      max-width: 420px;
    }
    @media (max-width: 720px) and (orientation: portrait) {
      .exec-board { grid-template-columns: 1fr; grid-template-rows: minmax(0, 0.28fr) minmax(0, 1fr) minmax(0, 0.28fr); }
      .exec-side { height: 100%; max-height: none; }
      .done-chip, .next-item { max-height: none; }
    }

    .rest-screen {
      position: relative;
      z-index: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 12px;
      max-width: 520px;
      margin: 0 auto;
      width: 100%;
    }
    .rest-duration {
      width: min(560px, 100%);
      margin: 8px 0 4px;
    }
    .rest-duration-label {
      margin-bottom: 12px;
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--ink);
    }
    .rest-duration-picks {
      display: flex;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
      gap: clamp(6px, 1.5vw, 12px);
      width: 100%;
    }
    .rest-pick {
      appearance: none;
      border: 2px solid rgba(47, 107, 92, 0.35);
      background: linear-gradient(180deg, #2f6b5c 0%, #1a3a3a 100%);
      color: #f7f4ec;
      font: inherit;
      font-weight: 800;
      border-radius: 18px;
      cursor: pointer;
      transition: background 0.2s, transform 0.15s, box-shadow 0.2s, border-color 0.2s, filter 0.2s;
      box-shadow: 0 10px 24px rgba(26, 58, 58, 0.28);
      letter-spacing: 0.02em;
      align-self: center;
      flex: 1 1 0;
      white-space: nowrap;
      min-width: 0;
      padding-left: 0;
      padding-right: 0;
    }
    /* 时间越长按钮略大，但仍同一行 */
    .rest-pick[data-rest-min="5"] {
      font-size: clamp(0.82rem, 2.4vw, 0.95rem);
      padding-top: 10px;
      padding-bottom: 10px;
      min-height: 44px;
      border-radius: 14px;
      box-shadow: 0 8px 18px rgba(26, 58, 58, 0.2);
      flex-grow: 0.92;
    }
    .rest-pick[data-rest-min="10"] {
      font-size: clamp(0.88rem, 2.6vw, 1.02rem);
      padding-top: 11px;
      padding-bottom: 11px;
      min-height: 48px;
      border-radius: 15px;
      flex-grow: 1;
    }
    .rest-pick[data-rest-min="15"] {
      font-size: clamp(0.94rem, 2.8vw, 1.1rem);
      padding-top: 12px;
      padding-bottom: 12px;
      min-height: 52px;
      border-radius: 16px;
      flex-grow: 1.08;
    }
    .rest-pick[data-rest-min="20"] {
      font-size: clamp(1rem, 3vw, 1.18rem);
      padding-top: 13px;
      padding-bottom: 13px;
      min-height: 56px;
      border-radius: 17px;
      box-shadow: 0 14px 28px rgba(26, 58, 58, 0.32);
      flex-grow: 1.16;
    }
    .rest-pick:hover {
      filter: brightness(1.08);
      border-color: rgba(126, 200, 176, 0.75);
    }
    .rest-pick:active { transform: scale(0.97); }
    .rest-pick.is-pref {
      border-color: var(--sun);
      box-shadow:
        0 10px 24px rgba(26, 58, 58, 0.3),
        0 0 0 3px rgba(242, 193, 78, 0.45);
    }
    .rest-pick[data-rest-min="20"].is-pref {
      box-shadow:
        0 14px 28px rgba(26, 58, 58, 0.34),
        0 0 0 3px rgba(242, 193, 78, 0.45);
    }
    .end-day-link {
      appearance: none;
      border: 0;
      background: transparent;
      color: var(--ink-soft);
      font: inherit;
      font-size: 0.78rem;
      font-weight: 500;
      opacity: 0.55;
      cursor: pointer;
      padding: 6px 10px;
      text-decoration: underline;
      text-underline-offset: 3px;
      transition: opacity 0.2s, color 0.2s;
    }
    .end-day-link:hover {
      opacity: 0.85;
      color: var(--ink);
    }
    .exec-board > .end-day-link {
      position: absolute;
      left: 50%;
      bottom: 2px;
      transform: translateX(-50%);
      z-index: 2;
    }
    .exec-back-link {
      appearance: none;
      border: 0;
      background: transparent;
      color: var(--ink-soft);
      font: inherit;
      font-size: 0.8rem;
      font-weight: 600;
      opacity: 0.62;
      cursor: pointer;
      padding: 6px 10px;
      position: absolute;
      top: 0;
      right: 0;
      left: auto;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      gap: 2px;
      text-decoration: none;
      transition: opacity 0.2s, color 0.2s;
    }
    .exec-back-icon {
      flex: none;
      display: block;
    }
    .exec-back-link:hover {
      opacity: 0.95;
      color: var(--ink);
    }
    .rest-screen > .end-day-link {
      margin-top: 4px;
    }
    .rest-tips {
      display: grid;
      gap: 8px;
      width: 100%;
      margin: 8px 0 4px;
    }
    .rest-tip {
      background: rgba(255,255,255,0.65);
      border-radius: 14px;
      padding: 12px 16px;
      font-size: 0.95rem;
      color: var(--ink);
    }
    .rest-timer {
      font-family: "Fraunces", serif;
      font-size: 3rem;
      letter-spacing: 0.06em;
      color: var(--bg-soft);
      margin: 8px 0;
    }
    .rest-timer.done { color: var(--coral); }
    .btn-rest-next {
      background: var(--bg-deep);
      color: #f7f4ec;
      font-weight: 700;
      font-size: 1.25rem;
      padding: 18px 40px;
      min-height: 56px;
      border-radius: 20px;
      box-shadow: 0 12px 28px rgba(26,58,58,0.28);
      margin-top: 8px;
    }
    .btn-rest-skip {
      background: rgba(255,255,255,0.65);
      color: var(--ink-soft);
      font-size: 0.88rem;
      padding: 10px 16px;
      min-height: 40px;
      border: 1px solid rgba(28,43,42,0.12);
      border-radius: 12px;
      margin-top: 4px;
    }
    .btn-rest-next[hidden],
    .btn-rest-skip[hidden] {
      display: none !important;
    }
    .transcript-box {
      margin-top: 4px;
      background: #fff;
      border-radius: 16px;
      padding: 16px 18px;
      border: 1px solid rgba(28,43,42,0.08);
      font-size: 1.12rem;
      line-height: 1.6;
      color: var(--ink);
      min-height: 120px;
    }
    .ai-structuring {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 18px;
      background: rgba(47,107,92,0.1);
      border-radius: 14px;
      color: var(--ink-soft);
      font-size: 1.05rem;
    }
    .ai-structuring .spin {
      width: 18px;
      height: 18px;
      border: 2px solid rgba(47,107,92,0.25);
      border-top-color: var(--bg-soft);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
      flex: none;
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    .gen-screen {
      position: relative;
      z-index: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 18px;
    }
    .gen-orb {
      width: 88px;
      height: 88px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 30%, #ffe9a8, #3d8f7c);
      box-shadow: 0 0 0 12px rgba(126,200,176,0.18);
      animation: listenPulse 1.4s ease-in-out infinite;
    }
    .gen-dots::after {
      content: "";
      animation: genDots 1.2s steps(4, end) infinite;
    }
    @keyframes genDots {
      0% { content: ""; }
      25% { content: "."; }
      50% { content: ".."; }
      75% { content: "..."; }
    }

    .rate-flow {
      max-width: 560px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .rate-phase { animation: rise 0.35s var(--ease) both; }

    .split {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: 14px;
      height: 100%;
      min-height: 0;
      position: relative;
      z-index: 1;
    }
    @media (max-width: 720px) and (orientation: portrait) {
      .split { grid-template-columns: 1fr; }
      .home-art { display: none; }
    }

    .exec-wrap {
      height: 100%;
      display: grid;
      place-items: center;
      position: relative;
      z-index: 1;
    }
    .exec-card {
      width: min(500px, 100%);
      text-align: center;
      background: rgba(255,255,255,0.7);
      border-radius: 32px;
      padding: 40px 28px 28px;
      border: 1px solid rgba(28,43,42,0.06);
      animation: rise 0.55s var(--ease) both;
    }
    .exec-card.is-paused {
      background: rgba(255,255,255,0.85);
      box-shadow: 0 0 0 3px rgba(224,122,95,0.25);
    }
    .exec-paused {
      display: none;
      margin-top: 8px;
    }
    .exec-card.is-paused .exec-paused {
      display: block;
    }
    .btn-resume {
      background: var(--coral);
      color: #fff;
      font-weight: 700;
      font-size: 1.25rem;
      padding: 18px 48px;
      border-radius: 20px;
      box-shadow: 0 12px 28px rgba(224,122,95,0.35);
      width: min(280px, 100%);
      justify-content: center;
    }
    .btn-resume:hover { filter: brightness(1.05); }
    .note-sheet {
      width: min(480px, 100%);
    }
    .note-sheet h2 {
      font-size: 1.25rem;
      margin: 0 0 6px;
      line-height: 1.35;
    }
    .note-input {
      display: block;
      width: 100%;
      margin-top: 8px;
      min-height: 96px;
      font: inherit;
      font-size: 1.05rem;
      line-height: 1.55;
      padding: 14px 16px;
      border-radius: 14px;
      border: 1px solid rgba(28,43,42,0.12);
      background: #fff;
      color: var(--ink);
      outline: none;
      resize: vertical;
    }
    .note-input:focus {
      border-color: var(--bg-soft);
      box-shadow: 0 0 0 3px rgba(47,107,92,0.12);
    }
    .note-input.is-listening {
      border-color: rgba(61, 155, 122, 0.55);
      background: rgba(126,200,176,0.12);
    }
    .note-input-voice,
    .live-transcript[readonly] {
      caret-color: transparent;
      cursor: default;
      user-select: text;
      -webkit-user-select: text;
    }
    .note-sheet .listen-status {
      margin: 0 0 4px;
    }
    .note-actions {
      margin-top: 12px;
    }
    .note-skip-link {
      display: none !important;
    }
    .note-must-hint {
      margin: 12px auto 0;
      text-align: center;
      font-size: 0.88rem;
      color: var(--ink-soft);
      line-height: 1.4;
    }
    .note-listen-hint {
      margin: 8px 0 0;
      font-size: 0.9rem;
      color: #2f6b5c;
      font-weight: 600;
    }
    .exec-label {
      display: inline-block;
      font-size: 0.82rem;
      letter-spacing: 0.08em;
      color: var(--bg-soft);
      margin-bottom: 10px;
      font-weight: 700;
    }
    .timer {
      font-family: "Fraunces", serif;
      font-size: 3.2rem;
      margin: 12px 0 4px;
      letter-spacing: 0.04em;
    }
    .timer.paused { color: var(--coral); }
    .progress-ring {
      width: 140px; height: 140px;
      margin: 6px auto 14px;
      border-radius: 50%;
      background: conic-gradient(var(--mint) var(--p, 0%), rgba(28,43,42,0.08) 0);
      display: grid;
      place-items: center;
      position: relative;
    }
    .progress-ring::after {
      content: "";
      width: 112px; height: 112px;
      border-radius: 50%;
      background: var(--sand);
    }
    .progress-ring .inner {
      position: absolute;
      font-family: "Fraunces", serif;
      font-size: 1.2rem;
      color: var(--ink-soft);
    }
    .remain {
      color: var(--ink-soft);
      margin-bottom: 10px;
      font-size: 0.92rem;
    }
    .exec-desc {
      color: var(--ink-soft);
      font-size: 1.1rem;
      line-height: 1.45;
      margin: 0 0 10px;
      max-width: 28em;
    }
    .exec-countdown {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      margin: 0 0 18px;
    }
    .exec-countdown-time {
      font-family: "Fraunces", "Songti SC", serif;
      font-size: clamp(2.4rem, 8vh, 3.2rem);
      font-weight: 700;
      letter-spacing: 0.04em;
      color: var(--ink);
      line-height: 1;
      font-variant-numeric: tabular-nums;
      transition: color 0.25s ease;
    }
    .exec-countdown-time.is-running {
      color: var(--pine, #1a3a3a);
    }
    .exec-countdown-time.is-done {
      color: var(--coral);
      animation: countdownPulse 1s ease-in-out 2;
    }
    @keyframes countdownPulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.06); }
    }
    .exec-countdown-btn {
      min-width: 5.8em;
      background: linear-gradient(160deg, #e07a5f 0%, #c45d45 100%);
      color: #fff;
      font-weight: 800;
      font-size: 1.05rem;
      letter-spacing: 0.06em;
      border: none;
      box-shadow: 0 10px 22px rgba(224, 122, 95, 0.38);
      padding: 12px 22px;
    }
    .exec-countdown-btn:hover {
      filter: brightness(1.06);
    }
    .exec-countdown-btn:active {
      transform: scale(0.97);
    }
    .exec-countdown-btn.is-running {
      opacity: 0.78;
      pointer-events: none;
      background: linear-gradient(160deg, #2f6b5c 0%, #1a3a3a 100%);
      box-shadow: 0 8px 18px rgba(26, 58, 58, 0.28);
    }
    .exec-actions {
      display: flex;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
    }
    .exec-card.is-paused .exec-actions {
      display: none;
    }
    .exec-card.is-paused .exec-countdown-btn {
      pointer-events: none;
      opacity: 0.55;
    }

    .rate-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin: 18px 0;
    }
    .rate-btn {
      background: #fff;
      border: 2px solid transparent;
      border-radius: 20px;
      padding: 22px 12px;
      min-height: 120px;
      cursor: pointer;
      font: inherit;
      transition: transform 0.2s var(--ease), border-color 0.2s, background 0.2s;
    }
    .rate-btn:hover { transform: translateY(-2px); }
    .rate-btn.selected {
      border-color: var(--bg-soft);
      background: rgba(126,200,176,0.18);
    }
    .rate-face { font-size: 1.8rem; margin-bottom: 6px; line-height: 1; }
    .rate-label { font-weight: 700; }

    .report {
      background: #fff;
      border-radius: 20px;
      padding: 18px 20px;
      line-height: 1.7;
      box-shadow: 0 8px 24px rgba(28,43,42,0.06);
      position: relative;
      overflow: hidden;
    }
    .report::before {
      content: "";
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 5px;
      background: linear-gradient(180deg, var(--mint), var(--sun));
    }
    .stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin: 14px 0;
    }
    .stat {
      background: rgba(255,255,255,0.7);
      border-radius: 14px;
      padding: 12px;
      text-align: center;
    }
    .stat strong {
      display: block;
      font-family: "Fraunces", serif;
      font-size: 1.4rem;
      margin-bottom: 2px;
    }
    .stat span { font-size: 0.78rem; color: var(--ink-soft); }

    .history-list { display: grid; gap: 8px; margin-top: 10px; }
    .history-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #fff;
      border-radius: 14px;
      padding: 12px 14px;
    }
    .tag {
      font-size: 0.72rem;
      padding: 4px 8px;
      border-radius: 999px;
      background: rgba(126,200,176,0.2);
      color: #2f6b5c;
    }

    .dock {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 12px;
      padding: 10px 24px 16px;
      background: linear-gradient(180deg, transparent, rgba(232,225,210,0.95));
      position: relative;
      z-index: 6;
    }

    .cal-wrap {
      position: relative;
      z-index: 1;
      height: 100%;
      display: grid;
      grid-template-columns: 1.2fr 0.9fr;
      gap: 14px;
      min-height: 0;
    }
    .cal-panel, .cal-side {
      min-height: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .cal-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .cal-toolbar h2 { margin: 0; font-size: 1.25rem; }
    .cal-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 4px;
      flex: 1;
      min-height: 0;
      align-content: start;
    }
    .cal-dow {
      text-align: center;
      font-size: 0.72rem;
      color: var(--ink-soft);
      padding: 4px 0;
    }
    .cal-day {
      aspect-ratio: 1;
      max-height: 52px;
      border: none;
      border-radius: 12px;
      background: rgba(255,255,255,0.55);
      cursor: pointer;
      font: inherit;
      font-size: 0.85rem;
      color: var(--ink);
      position: relative;
      display: grid;
      place-items: center;
      transition: background 0.15s, transform 0.15s;
    }
    .cal-day:hover { background: #fff; }
    .cal-day.muted { opacity: 0.35; cursor: default; }
    .cal-day.has-report::after {
      content: "";
      position: absolute;
      bottom: 5px;
      width: 5px; height: 5px;
      border-radius: 50%;
      background: var(--bg-soft);
    }
    .cal-day.selected {
      background: var(--bg-deep);
      color: #f7f4ec;
      font-weight: 700;
    }
    .cal-day.selected.has-report::after { background: var(--mint); }
    .cal-day.today:not(.selected) {
      box-shadow: inset 0 0 0 2px var(--mint);
    }
    .day-detail, .month-list {
      background: rgba(255,255,255,0.6);
      border-radius: 18px;
      padding: 14px;
      border: 1px solid rgba(28,43,42,0.06);
      min-height: 0;
    }
    .day-detail { flex: 1; overflow: auto; }
    .day-detail.empty {
      display: grid;
      place-items: center;
      color: var(--ink-soft);
      font-size: 0.92rem;
    }
    .day-report-block {
      margin-bottom: 14px;
      font-size: 0.95rem;
      line-height: 1.55;
    }
    .day-report-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 8px;
    }
    .day-report-title {
      font-weight: 700;
      font-size: 0.95rem;
      color: var(--ink);
    }
    .day-regen-btn {
      flex: none;
      font-size: 0.82rem;
      white-space: nowrap;
    }
    .day-report-body p {
      margin: 0 0 0.65em;
    }
    .day-report-body p:last-child {
      margin-bottom: 0;
    }
    .day-tasks-title {
      font-weight: 700;
      font-size: 0.95rem;
      margin: 4px 0 8px;
      color: var(--ink);
    }
    .day-tasks-toggle {
      appearance: none;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      border: 1px solid rgba(28, 43, 42, 0.08);
      background: rgba(255, 255, 255, 0.85);
      border-radius: 12px;
      padding: 10px 12px;
      font: inherit;
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--ink);
      cursor: pointer;
      margin: 4px 0 0;
      transition: background 0.15s, border-color 0.15s;
    }
    .day-tasks-toggle:hover {
      background: #fff;
      border-color: rgba(126, 200, 176, 0.45);
    }
    .day-tasks-toggle .chev {
      color: var(--ink-soft);
      font-weight: 500;
      transition: transform 0.2s ease;
    }
    .day-tasks-toggle[aria-expanded="true"] .chev {
      transform: rotate(90deg);
    }
    .day-task-panel {
      margin-top: 8px;
    }
    .day-task-panel[hidden] {
      display: none !important;
    }
    .day-task-list {
      display: grid;
      gap: 8px;
    }
    .day-task-item {
      background: #fff;
      border-radius: 12px;
      padding: 10px 12px;
      border: 1px solid rgba(28, 43, 42, 0.06);
    }
    .day-task-item .dt-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
    }
    .day-task-item .dt-title {
      font-weight: 700;
      font-size: 0.95rem;
    }
    .day-task-item .dt-status {
      flex: none;
      font-size: 0.75rem;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 999px;
      background: rgba(28, 43, 42, 0.06);
      color: var(--ink-soft);
    }
    .day-task-item.is-done .dt-status {
      background: rgba(61, 155, 122, 0.16);
      color: var(--good);
    }
    .day-task-item .dt-meta {
      margin-top: 4px;
      font-size: 0.82rem;
      color: var(--ink-soft);
    }
    .day-task-item .dt-note {
      margin-top: 6px;
      font-size: 0.86rem;
      color: var(--ink);
      line-height: 1.4;
    }
    .month-entry {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      background: #fff;
      border-radius: 14px;
      padding: 12px 14px;
      margin-top: 8px;
      cursor: pointer;
      border: none;
      width: 100%;
      font: inherit;
      text-align: left;
      color: inherit;
    }
    .month-entry:hover { background: rgba(126,200,176,0.15); }
    .month-entry strong { display: block; }
    .month-entry span { font-size: 0.8rem; color: var(--ink-soft); }

    @media (max-width: 720px) and (orientation: portrait) {
      .cal-wrap { grid-template-columns: 1fr; overflow: auto; }
    }
    .mic-fab {
      width: 64px; height: 64px;
      border-radius: 50%;
      border: none;
      cursor: pointer;
      background: radial-gradient(circle at 35% 30%, #ffe9a8, #3d8f7c);
      box-shadow: 0 10px 24px rgba(36,90,79,0.35);
      color: #14302c;
      font-size: 1.25rem;
      font-weight: 700;
      position: relative;
      transition: transform 0.2s var(--ease);
    }
    .mic-fab:hover { transform: scale(1.06); }
    .mic-fab.listening::after {
      content: "";
      position: absolute;
      inset: -8px;
      border-radius: 50%;
      border: 2px solid rgba(126,200,176,0.55);
      animation: listenPulse 1.1s ease-in-out infinite;
    }
    .footer-note {
      font-size: 0.75rem;
      color: var(--ink-soft);
      opacity: 0.85;
    }

    .toast {
      position: absolute;
      left: 50%;
      bottom: 80px;
      transform: translateX(-50%) translateY(16px);
      background: var(--ink);
      color: #f7f4ec;
      padding: 12px 18px;
      border-radius: 14px;
      opacity: 0;
      pointer-events: none;
      transition: all 0.35s var(--ease);
      z-index: 40;
      max-width: 80%;
      text-align: center;
      font-size: 0.9rem;
    }
    .toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    .overlay {
      position: absolute;
      inset: 0;
      background: rgba(20, 40, 38, 0.48);
      display: grid;
      place-items: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s;
      z-index: 35;
      padding: max(12px, var(--safe-top))
        max(16px, var(--safe-right))
        max(12px, var(--safe-bottom))
        max(16px, var(--safe-left));
    }
    .overlay.show { opacity: 1; pointer-events: auto; }
    .sheet {
      position: relative;
      width: min(520px, 100%);
      max-height: min(560px, 88%);
      max-height: min(560px, 88dvh);
      background: var(--sand);
      border-radius: 26px;
      padding: 22px;
      transform: translateY(20px);
      transition: transform 0.35s var(--ease);
      display: flex;
      flex-direction: column;
      min-height: 0;
      overflow: hidden;
    }
    /* 周期任务 / 今日任务 / 编辑任务：加宽 + label 与控件同一行 */
    .sheet.habit-form-sheet,
    .sheet.add-task-sheet,
    .sheet.edit-task-sheet {
      width: min(720px, calc(100vw - 40px));
      max-width: 100%;
      max-height: min(92vh, 860px);
      max-height: min(92dvh, 860px);
      overflow-y: auto;
      overflow-x: hidden;
      padding-bottom: 26px;
    }
    .sheet.edit-task-sheet {
      width: min(560px, calc(100vw - 40px));
      max-height: min(88vh, 520px);
      max-height: min(88dvh, 520px);
      padding: 16px 18px 18px;
    }
    /* 编辑今日任务：初始位置偏上，避免底部保存区被挡 */
    #editTaskOverlay {
      place-items: start center;
      align-content: start;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding-top: max(20px, calc(var(--safe-top) + 12px));
    }
    #editTaskOverlay .sheet.edit-task-sheet {
      max-height: min(calc(100dvh - 48px - var(--safe-top) - var(--safe-bottom)), 520px);
      margin-top: 0;
    }
    .sheet.edit-task-sheet .voice-fab-btn {
      width: 44px;
      height: 44px;
      min-width: 44px;
      min-height: 44px;
      border-radius: 12px;
    }
    .sheet.edit-task-sheet .voice-fab-btn img {
      width: 24px;
      height: 24px;
    }
    .sheet.edit-task-sheet .field input {
      padding: 10px 12px;
    }
    .sheet.edit-task-sheet .readonly-value {
      padding: 10px 12px;
    }
    .sheet.edit-task-sheet .cta-row.tight {
      margin-top: 12px;
    }
    .sheet.habit-form-sheet .habit-form,
    .sheet.add-task-sheet .draft-fields,
    .sheet.edit-task-sheet .habit-form {
      display: grid;
      gap: 14px;
      margin-top: 8px;
    }
    .sheet.edit-task-sheet .habit-form {
      gap: 10px;
      margin-top: 6px;
    }
    .sheet.habit-form-sheet .field,
    .sheet.add-task-sheet .draft-fields .field,
    .sheet.edit-task-sheet .habit-form .field {
      display: grid;
      grid-template-columns: 6em minmax(0, 1fr);
      gap: 10px 14px;
      align-items: center;
    }
    .sheet.habit-form-sheet .field > label,
    .sheet.add-task-sheet .draft-fields .field > label,
    .sheet.edit-task-sheet .habit-form .field > label {
      margin: 0;
      display: block;
      font-size: 0.95rem;
      color: var(--ink-soft);
      font-weight: 600;
      line-height: 1.35;
      text-align: right;
    }
    .sheet.habit-form-sheet .field > input,
    .sheet.habit-form-sheet .field > .cat-picks,
    .sheet.habit-form-sheet .field > .duration-picks,
    .sheet.habit-form-sheet .field > .weekday-picks,
    .sheet.add-task-sheet .draft-fields .field > input,
    .sheet.add-task-sheet .draft-fields .field > textarea,
    .sheet.add-task-sheet .draft-fields .field > .cat-picks,
    .sheet.edit-task-sheet .habit-form .field > input,
    .sheet.edit-task-sheet .habit-form .field > .cat-picks,
    .sheet.edit-task-sheet .habit-form .field > .desc-input-row,
    .sheet.edit-task-sheet .habit-form .field > .readonly-value {
      width: 100%;
      min-width: 0;
    }
    .sheet.edit-task-sheet .habit-form .field > .field-hint {
      grid-column: 2;
      margin: 0;
    }
    .sheet.habit-form-sheet .field:has(textarea),
    .sheet.habit-form-sheet .field:has(.cat-picks),
    .sheet.habit-form-sheet .field:has(.duration-picks),
    .sheet.habit-form-sheet .field:has(.weekday-picks),
    .sheet.add-task-sheet .draft-fields .field:has(textarea),
    .sheet.add-task-sheet .draft-fields .field:has(.cat-picks),
    .sheet.edit-task-sheet .habit-form .field:has(.cat-picks),
    .sheet.edit-task-sheet .habit-form .field:has(.desc-input-row) {
      align-items: start;
    }
    .sheet.habit-form-sheet .field:has(textarea) > label,
    .sheet.habit-form-sheet .field:has(.cat-picks) > label,
    .sheet.habit-form-sheet .field:has(.duration-picks) > label,
    .sheet.habit-form-sheet .field:has(.weekday-picks) > label,
    .sheet.add-task-sheet .draft-fields .field:has(textarea) > label,
    .sheet.add-task-sheet .draft-fields .field:has(.cat-picks) > label,
    .sheet.edit-task-sheet .habit-form .field:has(.cat-picks) > label,
    .sheet.edit-task-sheet .habit-form .field:has(.desc-input-row) > label {
      padding-top: 14px;
    }
    .sheet.edit-task-sheet .habit-form .field:has(.desc-input-row) > label {
      padding-top: 16px;
    }
    .sheet.habit-form-sheet .habit-range-preview {
      margin: -2px 0 0;
      padding-left: calc(6em + 14px);
      font-size: 0.95rem;
      color: var(--ink-soft);
      line-height: 1.45;
    }
    .sheet.habit-form-sheet .habit-range-preview strong {
      color: var(--ink);
      font-weight: 700;
    }
    .sheet.add-task-sheet .draft-item {
      background: transparent;
      border: none;
      padding: 0;
      margin: 0;
    }
    .overlay.show .sheet { transform: none; }
    .sheet-body {
      overflow: auto;
      min-height: 0;
      flex: 1;
      margin: 12px 0;
    }

    .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
    .chip {
      border: none;
      background: #fff;
      padding: 14px 20px;
      min-height: var(--tap-min);
      border-radius: 999px;
      font: inherit;
      font-size: 1.02rem;
      cursor: pointer;
      color: var(--ink);
      display: inline-flex;
      align-items: center;
    }
    .chip:hover { background: rgba(126,200,176,0.25); }

    .stepper {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }
    .step {
      font-size: 0.72rem;
      color: var(--ink-soft);
      padding: 5px 9px;
      border-radius: 999px;
      background: rgba(255,255,255,0.45);
    }
    .step.on {
      background: var(--bg-deep);
      color: #f7f4ec;
      font-weight: 700;
    }

    .draft-item {
      background: #fff;
      border-radius: 16px;
      padding: 12px;
      margin-bottom: 8px;
      border: 1px solid rgba(28,43,42,0.06);
    }
    .draft-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 8px;
      align-items: center;
    }
    .draft-fields {
      display: grid;
      grid-template-columns: 1fr 88px;
      gap: 8px;
      margin-top: 8px;
    }
    .draft-fields-stack {
      grid-template-columns: 1fr;
    }
    .draft-fields textarea,
    .field textarea {
      font: inherit;
      font-size: 1.05rem;
      padding: 12px 14px;
      min-height: 88px;
      border-radius: 12px;
      border: 1px solid rgba(28,43,42,0.12);
      background: var(--sand);
      color: var(--ink);
      outline: none;
      width: 100%;
      resize: vertical;
      line-height: 1.5;
    }
    .draft-fields textarea:focus,
    .field textarea:focus {
      border-color: var(--bg-soft);
    }
    .field {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .field label {
      font-size: 0.9rem;
      color: var(--ink-soft);
    }
    .field input, .field select {
      font: inherit;
      font-size: 1.05rem;
      padding: 12px 14px;
      min-height: var(--tap-min);
      border-radius: 12px;
      border: 1px solid rgba(28,43,42,0.12);
      background: var(--sand);
      color: var(--ink);
      outline: none;
      width: 100%;
    }
    .field input:focus, .field select:focus {
      border-color: var(--bg-soft);
    }
    .listen-status {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      background: rgba(47,107,92,0.1);
      border-radius: 16px;
      margin-bottom: 12px;
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--ink-soft);
    }
    .listen-status.is-live {
      color: #2f6b5c;
      background: rgba(126,200,176,0.22);
    }
    .listen-status #listenText {
      flex: 1;
      min-width: 0;
    }
    .listen-done-btn {
      flex: none;
      margin-left: auto;
      white-space: nowrap;
      background: var(--coral);
      color: #fff;
      font-weight: 700;
      min-height: 40px;
      padding: 8px 14px;
      border-radius: 12px;
    }
    .listen-done-btn:hover {
      filter: brightness(1.05);
    }
    .listen-done-btn:active {
      transform: scale(0.97);
    }
    .listen-reload-btn {
      flex: none;
      margin-left: auto;
      white-space: nowrap;
      background: var(--bg-deep, #1a3a3a);
      color: #f7f4ec;
      font-weight: 700;
      min-height: 40px;
      padding: 8px 14px;
      border-radius: 12px;
    }
    .listen-reload-btn:hover {
      filter: brightness(1.08);
    }
    .listen-reload-btn:active {
      transform: scale(0.97);
    }
    .listen-dot {
      width: 12px; height: 12px;
      border-radius: 50%;
      background: var(--mint);
      box-shadow: 0 0 0 4px rgba(126,200,176,0.25);
      animation: pulse 1.2s ease-in-out infinite;
      flex: none;
    }
    .listen-status:not(.is-live) .listen-dot {
      animation: none;
      background: #9aabb0;
    }

    .sort-screen {
      position: relative;
      z-index: 1;
      height: 100%;
      display: grid;
      grid-template-rows: auto auto 1fr auto;
      gap: 8px;
      min-height: 0;
    }
    .plan-secondary-actions {
      justify-content: flex-start;
      padding-right: clamp(108px, 18vh, 136px);
    }
    .plan-start-fab {
      appearance: none;
      border: none;
      cursor: pointer;
      position: absolute;
      right: max(10px, var(--safe-right));
      bottom: max(10px, var(--safe-bottom));
      z-index: 4;
      width: clamp(88px, 14vh, 112px);
      height: clamp(88px, 14vh, 112px);
      border-radius: 50%;
      background: linear-gradient(160deg, #2f6b5c 0%, #1a3a3a 100%);
      color: #f7f4ec;
      box-shadow: 0 12px 28px rgba(26, 58, 58, 0.32);
      display: grid;
      place-items: center;
      flex: none;
      animation: planStartBob 2.4s ease-in-out infinite;
      transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s;
    }
    .plan-start-fab:hover {
      filter: brightness(1.06);
      box-shadow: 0 14px 32px rgba(26, 58, 58, 0.38);
    }
    .plan-start-fab:active {
      transform: scale(0.96);
      animation: none;
    }
    .plan-start-label {
      position: relative;
      z-index: 2;
      font-size: clamp(0.95rem, 2.2vh, 1.15rem);
      font-weight: 800;
      line-height: 1.25;
      text-align: center;
      letter-spacing: 0.04em;
    }
    .plan-start-ring {
      position: absolute;
      inset: -6px;
      border-radius: 50%;
      border: 2px solid rgba(126, 200, 176, 0.55);
      animation: planStartPulse 2.2s ease-out infinite;
      pointer-events: none;
    }
    .plan-start-ring-delay {
      animation-delay: 1.1s;
      border-color: rgba(242, 193, 78, 0.45);
    }
    @keyframes planStartBob {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-5px); }
    }
    @keyframes planStartPulse {
      0% { transform: scale(0.92); opacity: 0.75; }
      70% { transform: scale(1.22); opacity: 0; }
      100% { transform: scale(1.22); opacity: 0; }
    }

    .habit-list {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      align-content: start;
      min-height: 0;
      overflow: auto;
      padding: 2px;
    }
    @media (max-width: 900px) {
      .habit-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 560px) {
      .habit-list { grid-template-columns: 1fr; }
    }
    .habit-empty {
      grid-column: 1 / -1;
      padding: 36px 16px;
      text-align: center;
      color: var(--ink-soft);
      font-size: 1rem;
      background: rgba(255,255,255,0.55);
      border-radius: 16px;
    }
    .habit-card {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 10px;
      background: #fff;
      border-radius: 18px;
      padding: 18px 16px 14px;
      border: 1px solid rgba(28,43,42,0.07);
      box-shadow: 0 4px 14px rgba(28,43,42,0.05);
      min-height: 168px;
      cursor: pointer;
      transition: transform 0.15s, box-shadow 0.15s, opacity 0.2s;
    }
    .habit-card:hover {
      transform: translateY(-1px);
      box-shadow: 0 8px 20px rgba(28,43,42,0.08);
    }
    .habit-card:focus-visible {
      outline: 2px solid rgba(47,107,92,0.45);
      outline-offset: 2px;
    }
    .habit-card.is-off {
      opacity: 0.78;
      background: rgba(255,255,255,0.72);
    }
    .habit-del {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 2;
    }
    .habit-icon-btn {
      width: 36px;
      height: 36px;
      border: none;
      border-radius: 10px;
      background: rgba(28,43,42,0.06);
      color: var(--ink-soft);
      font: inherit;
      font-size: 1rem;
      font-weight: 700;
      cursor: pointer;
      display: grid;
      place-items: center;
      line-height: 1;
    }
    .habit-icon-btn:hover { background: rgba(28,43,42,0.12); color: var(--ink); }
    .habit-icon-btn.danger {
      background: rgba(224,122,95,0.12);
      color: #a84d38;
      font-size: 1.25rem;
    }
    .habit-card-title {
      margin: 0;
      padding-right: 40px;
      font-family: "Noto Sans SC", system-ui, sans-serif;
      font-size: 1.15rem;
      font-weight: 700;
      line-height: 1.35;
      color: var(--ink);
    }
    .habit-card-desc {
      margin: 0;
      font-size: 0.92rem;
      color: var(--ink-soft);
      line-height: 1.45;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      flex: 1;
    }
    .habit-card-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .habit-pill {
      font-size: 0.8rem;
      font-weight: 700;
      padding: 5px 10px;
      border-radius: 999px;
      background: rgba(47,107,92,0.12);
      color: #2f6b5c;
      white-space: nowrap;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .habit-pill.soft {
      background: rgba(28,43,42,0.06);
      color: var(--ink-soft);
      font-weight: 500;
    }
    .habit-card-foot {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 10px;
      margin-top: auto;
      padding-top: 4px;
    }
    .habit-card-range {
      font-size: 0.8rem;
      color: var(--ink-soft);
      line-height: 1.35;
      min-width: 0;
    }
    .habit-switch {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      user-select: none;
      flex: none;
    }
    .habit-switch input {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
    }
    .habit-switch-ui {
      width: 42px;
      height: 26px;
      border-radius: 999px;
      background: #c5d0cd;
      position: relative;
      flex: none;
      transition: background 0.2s;
    }
    .habit-switch-ui::after {
      content: "";
      position: absolute;
      top: 3px;
      left: 3px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 1px 4px rgba(28,43,42,0.2);
      transition: transform 0.2s;
    }
    .habit-switch input:checked + .habit-switch-ui {
      background: #3d9b7a;
    }
    .habit-switch input:checked + .habit-switch-ui::after {
      transform: translateX(16px);
    }
    .habit-switch-label {
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--ink-soft);
      min-width: 2em;
    }
    .habit-card.is-on .habit-switch-label { color: #2f6b5c; }

    .habit-form {
      display: grid;
      gap: 12px;
      margin-top: 8px;
    }
    .habit-form .field label {
      display: block;
      font-size: 0.9rem;
      color: var(--ink-soft);
      margin-bottom: 6px;
    }
    .habit-form .field input {
      width: 100%;
      border: 1px solid rgba(28,43,42,0.12);
      border-radius: 14px;
      padding: 14px 14px;
      min-height: var(--tap-min);
      font: inherit;
      font-size: 1.05rem;
      background: #fff;
      color: var(--ink);
    }
    .field-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .field-hint {
      margin: -4px 0 0;
      font-size: 0.88rem;
      color: var(--ink-soft);
    }
    .readonly-value {
      padding: 14px;
      min-height: var(--tap-min);
      border-radius: 14px;
      background: rgba(28,43,42,0.05);
      color: var(--ink);
      font-size: 1.05rem;
      font-weight: 700;
      display: flex;
      align-items: center;
    }
    .desc-input-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      align-items: center;
    }
    .desc-input-row input {
      width: 100%;
      min-width: 0;
    }
    .voice-fab-btn {
      width: 56px;
      height: 56px;
      min-width: 56px;
      min-height: 56px;
      padding: 0;
      border: none;
      border-radius: 16px;
      background: rgba(47,107,92,0.1);
      cursor: pointer;
      display: grid;
      place-items: center;
      flex: none;
      transition: transform 0.15s ease, background 0.2s, box-shadow 0.2s;
    }
    .voice-fab-btn img {
      width: 32px;
      height: 32px;
      display: block;
      pointer-events: none;
    }
    .voice-fab-btn:hover {
      background: rgba(47,107,92,0.16);
    }
    .voice-fab-btn:active {
      transform: scale(0.96);
    }
    .voice-fab-btn.is-listening {
      background: rgba(126,200,176,0.4);
      box-shadow: 0 0 0 4px rgba(126,200,176,0.28);
      animation: listenPulse 1.2s ease-in-out infinite;
    }
    .field.is-hidden,
    .field-hint.is-hidden {
      display: none !important;
    }
    .btn-voice-desc {
      display: none;
    }
    .duration-picks {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .duration-pick {
      min-height: 44px;
      padding: 10px 14px;
      border-radius: 14px;
      border: 1.5px solid rgba(28,43,42,0.12);
      background: #fff;
      font: inherit;
      font-weight: 700;
      cursor: pointer;
      color: var(--ink-soft);
    }
    .duration-pick.on {
      background: rgba(47,107,92,0.14);
      border-color: rgba(47,107,92,0.4);
      color: #2f6b5c;
    }
    .weekday-picks {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .weekday-pick {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      border: 1px solid rgba(28,43,42,0.12);
      background: #fff;
      font: inherit;
      font-weight: 700;
      font-size: 1.05rem;
      color: var(--ink-soft);
      cursor: pointer;
    }
    .weekday-pick.on {
      background: rgba(126,200,176,0.28);
      border-color: rgba(47,107,92,0.35);
      color: #2f6b5c;
    }

    @keyframes rise {
      from { opacity: 0; transform: translateY(14px); }
      to { opacity: 1; transform: none; }
    }
    @keyframes pulse {
      0%, 100% { transform: scale(1); opacity: 0.9; }
      50% { transform: scale(1.08); opacity: 1; }
    }
    @keyframes floatBlob {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      50% { transform: translateY(-14px) rotate(4deg); }
    }
    @keyframes listenPulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(126,200,176,0.45); }
      50% { box-shadow: 0 0 0 16px rgba(126,200,176,0); }
    }

    /* ========== 自适应：平板 / 手机横屏 ========== */

    /* 中等宽度：计划卡片 4 列，装饰图缩小 */
    @media (max-width: 1100px) {
      .sort-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .home-art {
        width: min(300px, 38%);
        opacity: 0.88;
      }
    }

    /* 偏窄横屏 / 小平板：计划 3 列 */
    @media (max-width: 860px) {
      .sort-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .brand { font-size: 1.2rem; }
    }

    /* 竖屏窄屏：隐藏首页装饰，表单字段改上下排 */
    @media (max-width: 640px) and (orientation: portrait) {
      .home-art { display: none; }
      .hero-copy { max-width: none; }
      .sheet.habit-form-sheet .field,
      .sheet.add-task-sheet .draft-fields .field,
      .sheet.edit-task-sheet .habit-form .field {
        grid-template-columns: 1fr;
        gap: 6px;
      }
      .sheet.habit-form-sheet .field > label,
      .sheet.add-task-sheet .draft-fields .field > label,
      .sheet.edit-task-sheet .habit-form .field > label {
        text-align: left;
        padding-top: 0 !important;
      }
      .sheet.habit-form-sheet .habit-range-preview {
        padding-left: 0;
      }
      .sheet.edit-task-sheet .habit-form .field > .field-hint {
        grid-column: 1;
      }
      .field-row { grid-template-columns: 1fr; }
      .cta-row { gap: 8px; }
      .cta-row .btn { flex: 1 1 auto; }
    }

    /* 矮屏（含手机横屏、小 iPad 横屏）：压缩纵向空间，保留横排可用 */
    @media (max-height: 560px) {
      :root {
        --page-pad-y: 2px;
        --topbar-pad-y: 4px;
        --btn-min-h: 42px;
        --btn-pad-y: 8px;
      }
      .brand { font-size: 1.1rem; gap: 6px; }
      .brand-ver { font-size: 0.65rem; }
      .top-home {
        padding: 6px 12px 6px 10px;
        min-height: 40px;
        font-size: 0.85rem;
      }
      .date-chip { margin-bottom: 8px; padding: 5px 10px; font-size: 0.8rem; }
      .home-settings-link { margin-top: 10px; }
      .cta-row { margin-top: 10px; }
      .cta-row.tight { margin-top: 6px; }
      .stepper { gap: 4px; }
      .step { font-size: 0.68rem; padding: 3px 8px; }
      .plan-head { align-items: center; }
      .plan-secondary-actions {
        padding-right: 96px;
      }
      .plan-start-fab {
        width: 76px;
        height: 76px;
        right: 8px;
        bottom: 8px;
      }
      .plan-start-label { font-size: 0.88rem; }
      .sort-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 6px;
      }
      .sort-tile {
        aspect-ratio: auto;
        min-height: 72px;
        padding: 6px 8px 5px;
        gap: 3px;
      }
      .sort-tile .del-btn {
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
        top: 4px;
        right: 4px;
        font-size: 1rem;
      }
      .habit-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
      }
      .habit-card {
        min-height: 0;
        padding: 12px 12px 10px;
        gap: 6px;
      }
      .exec-board {
        grid-template-columns: 0.75fr 1.35fr 0.75fr;
        gap: 8px;
        padding: 0;
        align-items: stretch;
      }
      .exec-side {
        height: 100%;
        max-height: none;
      }
      .exec-side-label { font-size: 0.78rem; }
      .done-chip,
      .next-item { padding: clamp(4px, 1vh, 8px) 10px; }
      .done-chip strong,
      .next-item .nc-title { font-size: clamp(0.82rem, 1.5vh, 0.92rem); margin-bottom: 2px; }
      .next-item .nc-meta { font-size: 0.78rem; margin-top: 2px; }
      .exec-card {
        padding: 16px 16px 14px;
        border-radius: 22px;
      }
      .exec-label { margin-bottom: 4px; font-size: 0.75rem; }
      .timer {
        font-size: clamp(1.8rem, 8vh, 2.6rem);
        margin: 4px 0 2px;
      }
      .progress-ring {
        width: 96px;
        height: 96px;
        margin: 2px auto 8px;
      }
      .progress-ring::after {
        width: 76px;
        height: 76px;
      }
      .progress-ring .inner { font-size: 1rem; }
      .rest-screen { gap: 6px; }
      .rest-timer { font-size: 2.2rem; margin: 4px 0; }
      .rest-tip { padding: 8px 12px; font-size: 0.85rem; }
      .btn-rest-next {
        padding: 12px 28px;
        min-height: 44px;
        font-size: 1.05rem;
        margin-top: 4px;
      }
      .rate-flow { justify-content: flex-start; padding-top: 4px; }
      .sheet {
        max-height: min(94dvh, 94%);
        padding: 14px;
        border-radius: 18px;
      }
      .sheet.habit-form-sheet,
      .sheet.add-task-sheet,
      .sheet.edit-task-sheet {
        width: min(720px, calc(100vw - 24px));
        max-height: min(94dvh, 94%);
      }
      .sheet.edit-task-sheet {
        width: min(560px, calc(100vw - 24px));
      }
      .overlay {
        padding: 10px;
        align-items: start;
        justify-items: center;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }
      #editTaskOverlay {
        padding-top: max(10px, calc(var(--safe-top) + 8px));
      }
      .live-transcript,
      .transcript-box {
        min-height: 72px;
        padding: 10px 12px;
        font-size: 1rem;
      }
      .toast { bottom: 48px; font-size: 0.85rem; }
      .home-art {
        width: min(220px, 32%);
        bottom: 8px;
        opacity: 0.75;
      }
    }

    /* 更矮的手机横屏 */
    @media (max-height: 430px) and (orientation: landscape) {
      .sort-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
      }
      .sort-tile { min-height: 72px; }
      .habit-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .exec-board {
        grid-template-columns: 0.7fr 1.4fr 0.7fr;
        gap: 6px;
      }
      .exec-card { padding: 10px 12px; }
      .progress-ring { width: 72px; height: 72px; }
      .progress-ring::after { width: 56px; height: 56px; }
      .timer { font-size: 1.7rem; }
      .home-art { display: none; }
      .hero-home { justify-content: center; }
      .cta-row .btn { min-height: 40px; }
    }

    /* 很窄竖屏手机 */
    @media (max-width: 430px) and (orientation: portrait) {
      .sort-grid { grid-template-columns: 1fr 1fr; }
      .sort-tile {
        aspect-ratio: auto;
        min-height: 110px;
      }
      .exec-board {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 0.26fr) minmax(0, 1fr) minmax(0, 0.26fr);
      }
      .exec-side { height: 100%; max-height: none; }
      .done-chip, .next-item { max-height: none; }
    }

    /* 触控优化：减少悬停依赖，保证可点 */
    @media (hover: none) and (pointer: coarse) {
      .btn:hover { filter: none; }
      .habit-card:hover { transform: none; }
      .sort-tile:active { transform: scale(0.98); }
    }