@font-face {
      font-family: "Kain Source Serif";
      src: url("/assets/noto-serif-sc-400.woff2") format("woff2");
      font-style: normal;
      font-weight: 200 900;
      font-display: swap;
    }
    :root {
      color-scheme: dark;
      --bg: #101416;
      --panel: rgba(28, 34, 36, .86);
      --panel-strong: #202729;
      --line: rgba(238, 225, 196, .13);
      --text: #f4efe4;
      --muted: #a8afa9;
      --gold: #e3b866;
      --sage: #8fb6a0;
      --rose: #d9a28e;
      --blue: #91afc2;
      --shadow: 0 22px 70px rgba(0, 0, 0, .28);
      --font-cn: "Kain Source Serif", "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, SimSun, serif;
      --font-latin: Aptos, "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
      --font-sidebar-latin: "Snell Roundhand", "Segoe Script", "Brush Script MT", cursive;
      --surface-soft: rgba(255,255,255,.025);
      --surface-control: rgba(7,10,11,.34);
      --surface-sidebar: rgba(20,26,28,.94);
      --accent-soft: rgba(227,184,102,.085);
      --accent-ink: #16191a;
      --lcd: rgba(255,255,255,.04);
      --lcd-inset: inset 0 1px 3px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.07);
      --page-background:
        radial-gradient(circle at 8% 4%, rgba(190, 197, 204, .08), transparent 30rem),
        radial-gradient(circle at 90% 16%, rgba(255, 255, 255, .05), transparent 26rem),
        linear-gradient(155deg, #0e1012 0%, #17191d 52%, #111315 100%);
    }

    html[data-cn-font="source-serif"] { --font-cn: "Kain Source Serif", "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, SimSun, serif; }
    html[data-cn-font="jinghua"] { --font-cn: "京華老宋體", "京华老宋体", "KingHwa Old Song", "KingHwa_OldSong", "Kain Source Serif", "Songti SC", STSong, SimSun, serif; }
    html[data-cn-font="songti"] { --font-cn: "Songti SC", STSong, SimSun, "NSimSun", serif; }
    html[data-cn-font="sans"] { --font-cn: "Source Han Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", "PingFang SC", sans-serif; }
    html[data-sidebar-latin="clean"] { --font-sidebar-latin: "Avenir Next", Aptos, "Segoe UI", sans-serif; }
    html[data-sidebar-latin="rounded"] { --font-sidebar-latin: "Avenir Next Rounded", "Arial Rounded MT Bold", Aptos, sans-serif; }

    /* 同一台设备的夜间模式：外壳变深，液晶亮起来。 */
    html[data-theme="moon"] {
      color-scheme: dark;
      --bg: #12151a;
      --panel: rgba(26,31,37,.95);
      --panel-strong: #232931;
      --line: rgba(226,232,238,.13);
      --text: #e8ecef;
      --muted: #98a2ab;
      --gold: #7ba7f5;
      --sage: #7fbb99;
      --rose: #d59a9e;
      --blue: #7ba7f5;
      --accent-ink: #0b1220;
      --lcd: rgba(148,178,224,.07);
      --lcd-inset: inset 0 1px 3px rgba(0,0,0,.34), inset 0 0 0 1px rgba(148,178,224,.14);
      --shadow: 0 18px 54px rgba(0,0,0,.34);
      --surface-soft: rgba(255,255,255,.035);
      --surface-control: #131519;
      --surface-sidebar: rgba(18,20,23,.97);
      --accent-soft: rgba(220,223,226,.09);
    }

    html[data-theme="wechat"] {
      color-scheme: light;
      --bg: #eef1ed;
      --panel: rgba(255,255,255,.96);
      --panel-strong: #f4f7f3;
      --line: rgba(31,54,38,.14);
      --text: #1f2521;
      --muted: #667069;
      --gold: #477f59;
      --sage: #477f59;
      --rose: #9a5c5c;
      --blue: #527787;
      --shadow: 0 16px 44px rgba(43,65,49,.10);
      --surface-soft: #f0f6f1;
      --surface-control: #f5f7f5;
      --surface-sidebar: rgba(250,252,249,.98);
      --accent-soft: rgba(71,127,89,.11);
      --accent-ink: #ffffff;
      --lcd: #e4eae5;
      --lcd-inset: inset 0 1px 3px rgba(43,65,49,.15), inset 0 0 0 1px rgba(43,65,49,.09);
      --page-background: linear-gradient(155deg, #edf1ec 0%, #f7f8f6 48%, #e8eee9 100%);
    }

    html[data-theme="bubble"] {
      color-scheme: light;
      --bg: #edf2f6;
      --panel: rgba(255,255,255,.97);
      --panel-strong: #f1f5f8;
      --line: rgba(40,61,82,.14);
      --text: #202830;
      --muted: #66737e;
      --gold: #527ba3;
      --sage: #5d826d;
      --rose: #9a6167;
      --blue: #527ba3;
      --shadow: 0 16px 44px rgba(49,69,88,.11);
      --surface-soft: #edf4fa;
      --surface-control: #f4f7fa;
      --surface-sidebar: rgba(248,251,253,.98);
      --accent-soft: rgba(82,123,163,.11);
      --accent-ink: #ffffff;
      --lcd: #e2e9ef;
      --lcd-inset: inset 0 1px 3px rgba(49,69,88,.15), inset 0 0 0 1px rgba(49,69,88,.09);
      --page-background: linear-gradient(155deg, #e9f0f5 0%, #f8fafb 50%, #e7eef4 100%);
    }

    /* 设备语言：面板是塑料外壳，读数是嵌进去的小屏。重点色取自 iPod 那块背光液晶。 */
    html[data-theme="ipod"] {
      color-scheme: light;
      --bg: #dfe2e5;
      --panel: #fafbfc;
      --panel-strong: #eceef1;
      --line: rgba(30,36,44,.14);
      --text: #1b1f24;
      --muted: #5c646c;
      --gold: #2f5fd0;
      --sage: #46785f;
      --rose: #97575c;
      --blue: #2f5fd0;
      --shadow: 0 1px 2px rgba(30,36,44,.09), 0 14px 32px rgba(30,36,44,.13);
      --surface-soft: #eef0f3;
      --surface-control: #fdfdfe;
      --surface-sidebar: rgba(228,231,235,.98);
      --accent-soft: rgba(47,95,208,.09);
      --accent-ink: #ffffff;
      --lcd: #e8ebee;
      --lcd-inset: inset 0 1px 3px rgba(30,36,44,.13), inset 0 0 0 1px rgba(30,36,44,.08);
      --page-background:
        linear-gradient(135deg, rgba(255,255,255,.62), transparent 38%),
        linear-gradient(155deg, #d3d7dc 0%, #eff1f3 52%, #d9dde1 100%);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      min-height: 100dvh;
      color: var(--text);
      background: var(--page-background);
      font-family: var(--font-cn), var(--font-latin);
      font-size: 15px;
      letter-spacing: .01em;
    }

    button, input, select { font: inherit; }
    a { color: inherit; }
    button, a { -webkit-tap-highlight-color: transparent; }
    button, a, input, select { touch-action: manipulation; }
    button:active, .quick-link:active { transform: translateY(1px) scale(.99); }
    h1, h2 { text-wrap: balance; }
    .date-main, .progress-number, .weekly-value, .task-meta, .workout-date, .course-day-number, .course-day-date-label { font-variant-numeric: tabular-nums; }
    button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--gold) !important; outline-offset: 3px; }
    .skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; transform: translateY(-160%); border-radius: 10px; color: var(--bg); background: var(--text); padding: 9px 12px; text-decoration: none; }
    .skip-link:focus { transform: translateY(0); }
    .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; }

    .shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 48px; }
    .desktop-sidebar { display: none; }
    .topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 38px; }
    .brand { display: flex; align-items: center; gap: 12px; }
    .brand-mark {
      width: 42px; height: 42px; display: grid; place-items: center;
      border: 1px solid rgba(227, 184, 102, .42); border-radius: 14px;
      background: linear-gradient(145deg, rgba(227, 184, 102, .18), rgba(143, 182, 160, .08));
      box-shadow: inset 0 1px rgba(255,255,255,.09);
      font-size: 21px;
    }
    .brand-name { font-size: 16px; font-weight: 760; }
    .brand-note { margin-top: 2px; color: var(--muted); font-size: 12px; }
    .top-actions { display: flex; align-items: center; gap: 8px; }
    .secure {
      display: flex; align-items: center; gap: 8px; color: #c8d9ce; font-size: 12px;
      border: 1px solid rgba(143, 182, 160, .24); background: rgba(143, 182, 160, .08);
      border-radius: 999px; padding: 8px 12px;
    }
    .secure-dot { width: 7px; height: 7px; background: #87c69e; border-radius: 50%; box-shadow: 0 0 12px #87c69e; }
    .install-button {
      border: 1px solid rgba(227,184,102,.3); border-radius: 999px; color: var(--gold);
      background: rgba(227,184,102,.07); padding: 8px 12px; cursor: pointer; font-size: 12px;
    }
    .install-button:hover { background: rgba(227,184,102,.13); }
    .install-button:disabled { color: var(--muted); border-color: var(--line); cursor: default; }

    /* 首屏是一条窄带，不是一整屏：问候 + 今天的实况 + 日期屏。 */
    .hero { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 22px; margin-bottom: 20px; }
    .hero-date { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 6px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
    .eyebrow { color: var(--gold); text-transform: uppercase; letter-spacing: .16em; font-size: 11px; font-weight: 800; }
    h1 { margin: 0; max-width: 720px; font-family: Georgia, "Songti SC", serif; font-size: clamp(30px, 4vw, 44px); font-weight: 500; line-height: 1.05; letter-spacing: -.035em; }
    .hero-status { margin: 9px 0 0; max-width: 46ch; color: var(--muted); font-size: 13px; line-height: 1.6; }
    .hero-status:empty { display: none; }
    .hero-copy { max-width: 630px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.75; }
    .date-card { text-align: right; padding-bottom: 7px; }
    .date-main { font-family: Georgia, "Songti SC", serif; font-size: 31px; }
    .date-sub { color: var(--muted); margin-top: 7px; font-size: 13px; }

    .quick-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
    .quick-link {
      display: flex; align-items: center; justify-content: space-between; gap: 14px;
      min-height: 82px; padding: 18px 19px; text-decoration: none;
      border: 1px solid var(--line); border-radius: 18px; background: rgba(25, 31, 33, .68);
      box-shadow: inset 0 1px rgba(255,255,255,.035); transition: transform .2s, border-color .2s, background .2s;
    }
    .quick-link:hover { transform: translateY(-2px); border-color: rgba(227, 184, 102, .42); background: rgba(34, 41, 43, .9); }
    .quick-icon { font-size: 20px; margin-bottom: 7px; }
    .quick-title { font-size: 14px; font-weight: 720; }
    .quick-caption { color: var(--muted); font-size: 11px; margin-top: 3px; }
    .arrow { color: var(--gold); font-size: 19px; }

    .grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; }
    .stack { display: grid; gap: 18px; }
    .card {
      border: 1px solid var(--line); border-radius: 22px; background: var(--panel);
      box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.035); backdrop-filter: blur(18px);
      padding: 23px;
    }
    .card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 21px; }
    .card-kicker { color: var(--muted); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
    .card h2 { margin: 6px 0 0; font-size: 20px; font-weight: 720; letter-spacing: -.02em; }
    .pill { padding: 6px 9px; border-radius: 999px; background: rgba(255,255,255,.05); color: var(--muted); font-size: 11px; white-space: nowrap; }
    .refresh { border: 0; color: var(--muted); background: transparent; cursor: pointer; padding: 6px; border-radius: 8px; }
    .refresh:hover { color: var(--text); background: rgba(255,255,255,.05); }

    .progress-row { display: grid; grid-template-columns: 95px 1fr; align-items: center; gap: 18px; margin-bottom: 22px; }
    .progress-number { font-family: Georgia, serif; font-size: 38px; line-height: 1; }
    .progress-note { color: var(--muted); font-size: 11px; margin-top: 6px; }
    .bar { height: 8px; background: rgba(255,255,255,.055); border-radius: 999px; overflow: hidden; }
    .bar > span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--sage), var(--gold)); transition: width .5s ease; }

    .task-list { display: grid; gap: 9px; }
    .task {
      display: grid; grid-template-columns: 17px minmax(0, 1fr) auto; align-items: center; gap: 11px;
      padding: 12px 13px; border: 1px solid rgba(255,255,255,.055); border-radius: 13px; background: rgba(255,255,255,.025);
    }
    .task-check { width: 16px; height: 16px; padding: 0; border-radius: 50%; border: 1px solid rgba(227,184,102,.55); background: transparent; cursor: pointer; }
    .task-check:hover { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(227,184,102,.08); }
    .task-check:disabled { cursor: wait; opacity: .55; }
    .task.done .task-check { border-color: var(--sage); background: var(--sage); box-shadow: inset 0 0 0 4px var(--panel-strong); }
    .task.done .task-name { color: var(--muted); text-decoration: line-through; }
    .task-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
    .task-meta { color: var(--muted); font-size: 11px; }
    .quick-task-form { display: grid; grid-template-columns: minmax(0,1fr) 105px 92px auto; gap: 9px; margin-top: 16px; }
    .quick-task-form input, .quick-task-form select {
      min-width: 0; border: 1px solid rgba(255,255,255,.08); border-radius: 12px;
      color: var(--text); background: rgba(7,10,11,.34); padding: 10px 11px;
    }
    .quick-task-form input:focus, .quick-task-form select:focus { border-color: rgba(227,184,102,.46); }
    .quick-task-form button { border: 1px solid transparent; border-radius: 12px; color: var(--accent-ink); background: var(--gold); font-weight: 760; padding: 10px 14px; cursor: pointer; white-space: nowrap; }
    .quick-task-form button:disabled { cursor: wait; opacity: .62; }
    .task-status { min-height: 17px; margin-top: 8px; color: var(--muted); font-size: 11px; }
    .task-status.error { color: var(--rose); }
    .task-status.success { color: var(--sage); }
    .hidden { display: none !important; }
    .empty { padding: 24px 16px; border: 1px dashed rgba(255,255,255,.1); border-radius: 15px; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.7; }
    .inline-link { color: var(--gold); text-underline-offset: 3px; }

    .french-stat { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--line); }
    .french-stat:last-child { border-bottom: 0; padding-bottom: 0; }
    .stat-label { color: var(--muted); font-size: 12px; }
    .stat-value { font-size: 14px; font-weight: 700; }
    .bonjour { color: var(--blue); font-family: Georgia, serif; font-style: italic; font-size: 22px; }
    .weekly-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
    .weekly-stat { padding: 13px; border: 1px solid rgba(255,255,255,.055); border-radius: 13px; background: rgba(255,255,255,.024); }
    .weekly-value { font-family: Georgia, "Songti SC", serif; font-size: 25px; line-height: 1.05; }
    .weekly-label { margin-top: 6px; color: var(--muted); font-size: 10px; }
    .weekly-detail { display: grid; gap: 0; margin-top: 10px; }
    .weekly-line { display: flex; justify-content: space-between; gap: 14px; padding: 11px 2px; border-bottom: 1px solid var(--line); font-size: 12px; }
    .weekly-line span:first-child { color: var(--muted); }
    .weekly-line strong { font-weight: 700; }
    .weekly-message { margin: 12px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
    .tutor-entry { margin-top: 16px; padding: 14px; border: 1px solid rgba(145,175,194,.18); border-radius: 14px; background: rgba(145,175,194,.045); }
    .tutor-entry-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .tutor-entry-title { font-size: 12px; font-weight: 740; }
    .tutor-prompt { display: block; margin-top: 10px; padding: 10px 11px; overflow-wrap: anywhere; border: 1px solid var(--line); border-radius: 10px; color: var(--text); background: var(--surface-control); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; line-height: 1.55; }
    .tutor-entry-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
    .tutor-entry-note { color: var(--muted); font-size: 9px; line-height: 1.5; }

    .workout-planner { margin-top: 18px; }
    .planner-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
    .planner-copy { max-width: 690px; margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
    .workout-summary { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
    .workout-badge { padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--surface-soft); font-size: 10px; }
    .workout-badge.ready { color: var(--accent-ink); border-color: transparent; background: var(--sage); }
    .workout-week { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 9px; }
    .workout-day { min-width: 0; padding: 13px; border: 1px solid rgba(255,255,255,.06); border-radius: 15px; background: rgba(255,255,255,.024); }
    .workout-day.today { border-color: rgba(227,184,102,.38); background: rgba(227,184,102,.045); }
    .workout-day-head { display: flex; justify-content: space-between; align-items: baseline; gap: 7px; margin-bottom: 10px; }
    .workout-weekday { font-size: 13px; font-weight: 730; }
    .workout-date { color: var(--muted); font-size: 9px; }
    .workout-day select, .workout-day input {
      width: 100%; min-width: 0; border: 1px solid rgba(255,255,255,.07); border-radius: 10px;
      color: var(--text); background: rgba(7,10,11,.3); padding: 9px 8px; font-size: 11px;
    }
    .workout-day select + select, .workout-day select + input { margin-top: 7px; }
    .workout-day select:focus, .workout-day input:focus { border-color: rgba(227,184,102,.42); }
    .workout-day select:disabled { opacity: .42; }
    .workout-open { display: block; margin-top: 7px; color: var(--gold); font-size: 10px; text-decoration: none; }
    .workout-open:hover { text-decoration: underline; text-underline-offset: 3px; }
    .workout-open + input { margin-top: 7px; }
    .planner-actions { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 15px; }
    .planner-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
    .planner-status { color: var(--muted); font-size: 11px; line-height: 1.5; }
    .planner-status.success { color: var(--sage); }
    .planner-status.error { color: var(--rose); }
    .calendar-sync { margin-top: 18px; }
    .calendar-sync-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .calendar-sync-item { padding: 15px; border: 1px solid rgba(145,175,194,.15); border-radius: 15px; background: rgba(145,175,194,.035); }
    .calendar-sync-name { font-size: 13px; font-weight: 740; }
    .calendar-sync-copy { margin: 6px 0 11px; color: var(--muted); font-size: 10px; line-height: 1.55; }
    .calendar-sync-actions { display: flex; flex-wrap: wrap; gap: 7px; }
    .calendar-subscribe { display: inline-flex; align-items: center; border: 1px solid rgba(227,184,102,.28); border-radius: 10px; color: var(--gold); background: rgba(227,184,102,.07); padding: 8px 10px; font-size: 10px; text-decoration: none; }
    .calendar-subscribe[aria-disabled="true"] { color: var(--muted); border-color: var(--line); background: rgba(255,255,255,.025); pointer-events: none; }
    .calendar-security { margin: 12px 0 0; color: var(--muted); font-size: 9px; line-height: 1.6; }
    .course-planner { margin-top: 18px; }
    .course-controls { display: grid; grid-template-columns: minmax(180px,1.25fr) minmax(145px,.8fr) auto; align-items: end; gap: 10px; }
    .course-field { display: grid; gap: 7px; min-width: 0; color: var(--muted); font-size: 10px; }
    .course-field select, .course-field input {
      width: 100%; min-width: 0; border: 1px solid rgba(255,255,255,.08); border-radius: 12px;
      color: var(--text); background: rgba(7,10,11,.34); padding: 10px 11px;
    }
    .course-field select:focus, .course-field input:focus { border-color: rgba(227,184,102,.42); }
    .course-options { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
    .course-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
    .course-bulk-label { color: var(--muted); font-size: 11px; }
    .course-summary { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 2px; }
    .course-weeks { display: grid; gap: 13px; margin-top: 17px; }
    .course-week-block { padding: 13px; border: 1px solid rgba(255,255,255,.055); border-radius: 17px; background: rgba(255,255,255,.018); }
    .course-week-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; font-size: 12px; font-weight: 730; }
    .course-week-range { color: var(--muted); font-size: 9px; font-weight: 400; }
    .course-days { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 8px; }
    .course-day { min-width: 0; padding: 11px; border: 1px solid rgba(255,255,255,.06); border-radius: 13px; background: rgba(7,10,11,.22); }
    .course-day.rest { opacity: .7; background: rgba(255,255,255,.018); }
    .course-day.done { border-color: rgba(143,182,160,.42); background: rgba(143,182,160,.075); }
    .course-day.today { box-shadow: inset 0 0 0 1px rgba(227,184,102,.42); }
    .course-day-top { display: flex; align-items: baseline; justify-content: space-between; gap: 7px; }
    .course-day-number { color: var(--gold); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
    .course-day-date-label { color: var(--muted); font-size: 8px; }
    .course-day-name { min-height: 34px; margin: 7px 0 9px; font-size: 12px; font-weight: 730; line-height: 1.45; }
    .course-day input, .course-day select {
      width: 100%; min-width: 0; border: 1px solid rgba(255,255,255,.07); border-radius: 9px;
      color: var(--text); background: rgba(7,10,11,.32); padding: 8px 7px; font-size: 10px;
    }
    .course-day input + select, .course-day select + select { margin-top: 6px; }
    .course-week-flag { display: inline-block; border-radius: 999px; background: var(--gold); color: var(--accent-ink); padding: 2px 7px; font-size: 8px; font-weight: 700; letter-spacing: .04em; vertical-align: middle; }
    .course-plan-notes { display: grid; gap: 5px; border: 1px solid rgba(227,184,102,.2); border-radius: 13px; background: rgba(227,184,102,.05); padding: 11px 13px; }
    .course-plan-notes p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
    .course-day-items { display: grid; gap: 8px; margin-top: 8px; }
    .course-item { min-width: 0; border-top: 1px solid rgba(255,255,255,.05); padding-top: 8px; }
    .course-day-items > .course-item:first-child { border-top: 0; padding-top: 0; }
    .course-item-head { display: flex; align-items: baseline; justify-content: space-between; gap: 5px; margin-bottom: 6px; }
    .course-item-title { font-size: 10px; font-weight: 700; line-height: 1.45; }
    .course-item.done .course-item-title { color: var(--good, #8fb6a0); }
    .course-item-chip { flex: none; border-radius: 999px; background: rgba(255,255,255,.06); color: var(--muted); padding: 1px 6px; font-size: 8px; }
    .course-item-note { margin: 0; color: var(--muted); font-size: 9px; }
    .course-item-check { display: flex; align-items: center; gap: 6px; min-height: 44px; color: var(--muted); font-size: 10px; cursor: pointer; }
    .course-item-check input { width: 16px; min-width: 16px; flex: none; padding: 0; accent-color: var(--gold); }
    .course-moves { margin-top: 7px; border: 1px solid rgba(255,255,255,.06); border-radius: 11px; background: rgba(7,10,11,.26); padding: 7px 9px; }
    .course-moves > summary { display: flex; align-items: center; min-height: 44px; color: var(--gold); font-size: 9px; cursor: pointer; }
    .course-move-warmup, .course-move-progress { margin: 4px 0 0; color: var(--muted); font-size: 9px; line-height: 1.6; }
    .course-move-progress { color: var(--gold); }
    .course-move-list { list-style: none; display: grid; gap: 7px; margin: 8px 0 0; padding: 0; }
    .course-move { border-top: 1px solid rgba(255,255,255,.05); padding-top: 7px; }
    .course-move:first-child { border-top: 0; padding-top: 0; }
    .course-move.done .course-move-name { color: var(--good, #8fb6a0); }
    .course-move-check { display: flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; }
    .course-move-check input { width: 16px; min-width: 16px; flex: none; padding: 0; accent-color: var(--gold); }
    .course-move-name { font-size: 10px; font-weight: 700; line-height: 1.4; }
    .course-move-meta { color: var(--muted); font-size: 9px; line-height: 1.6; }
    .course-move-tip { margin: 3px 0 0; color: var(--muted); font-size: 9px; line-height: 1.6; opacity: .85; }
    .course-day-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.05); }
    .course-day-actions button {
      flex: 1 1 auto; min-height: 32px; border: 1px solid rgba(255,255,255,.08); border-radius: 8px;
      color: var(--muted); background: transparent; padding: 5px 7px; font-size: 9px; cursor: pointer;
    }
    .course-day-actions button:hover { color: var(--text); border-color: rgba(255,255,255,.18); }
    .course-day-actions button.active { color: var(--accent-ink, #101216); border-color: transparent; background: var(--gold); }
    .course-day-actions button.danger { color: var(--rose); }
    .course-shift-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 7px; border: 1px solid rgba(227,184,102,.32); border-radius: 10px; background: rgba(227,184,102,.08); padding: 7px 8px; }
    .course-shift-bar span { flex: 1 1 100%; color: var(--muted); font-size: 9px; line-height: 1.5; }
    .course-shift-bar button { flex: 1 1 auto; min-height: 32px; border: 0; border-radius: 8px; color: var(--gold); background: rgba(227,184,102,.14); padding: 5px 8px; font-size: 9px; cursor: pointer; }
    .course-shift-bar button:first-of-type { color: var(--accent-ink, #101216); background: var(--gold); }
    .course-add-form { display: grid; gap: 6px; margin-top: 7px; }
    .course-add-form .button { min-height: 34px; padding: 6px 10px; font-size: 10px; }
    .course-resource-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
    .course-resource-actions a, .course-resource-actions button { border: 0; color: var(--gold); background: transparent; padding: 0; font-size: 9px; text-decoration: none; cursor: pointer; }
    .course-resource-actions a:hover, .course-resource-actions button:hover { text-decoration: underline; text-underline-offset: 3px; }
    .course-empty { margin-top: 16px; }
    .resource-library { margin-top: 18px; }
    .resource-form { display: grid; grid-template-columns: 1.2fr 1.6fr 112px 92px auto; gap: 9px; }
    .resource-form input, .resource-form select {
      min-width: 0; border: 1px solid rgba(255,255,255,.08); border-radius: 12px;
      color: var(--text); background: rgba(7,10,11,.34); padding: 10px 11px;
    }
    .resource-form input:focus, .resource-form select:focus { border-color: rgba(143,182,160,.5); }
    .resource-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 11px; }
    .resource-tools select, .resource-filters input, .resource-filters select, .resource-review {
      min-width: 0; border: 1px solid rgba(255,255,255,.08); border-radius: 10px;
      color: var(--text); background: rgba(7,10,11,.34); padding: 9px 10px; font-size: 11px;
    }
    .resource-tools select:focus, .resource-filters input:focus, .resource-filters select:focus, .resource-review:focus { border-color: rgba(143,182,160,.5); }
    .resource-ghost { border: 1px solid rgba(255,255,255,.09); border-radius: 10px; color: var(--muted); background: rgba(255,255,255,.035); padding: 9px 11px; font-size: 11px; cursor: pointer; }
    .resource-ghost:hover { color: var(--text); background: rgba(255,255,255,.06); }
    .resource-filters { display: grid; grid-template-columns: minmax(0,1fr) 132px 132px; gap: 8px; margin-top: 13px; }
    .resource-count { margin-left: auto; color: var(--muted); font-size: 10px; }
    .resource-list { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 15px; }
    .resource-item { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 13px; padding: 13px 14px; border: 1px solid rgba(255,255,255,.055); border-radius: 14px; background: rgba(255,255,255,.024); }
    .resource-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; }
    .resource-meta { margin-top: 5px; color: var(--muted); font-size: 10px; }
    .resource-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
    .resource-open, .resource-delete { border: 0; border-radius: 9px; padding: 8px 9px; font-size: 10px; text-decoration: none; cursor: pointer; }
    .resource-open { color: var(--gold); background: rgba(227,184,102,.08); }
    .resource-delete { color: var(--muted); background: var(--surface-soft); }
    .resource-delete:hover { color: var(--rose); background: color-mix(in srgb, var(--rose) 12%, transparent); }

    .stack, .grid > *, .stack > *, .health-grid { min-width: 0; }
    .stack > * { width: 100%; }
    .health-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
    .field { display: grid; gap: 7px; }
    .field.wide { grid-column: 1 / -1; }
    .field label { color: var(--muted); font-size: 11px; }
    .field input, .field select {
      width: 100%; border: 1px solid rgba(255,255,255,.08); border-radius: 12px;
      color: var(--text); background: rgba(7,10,11,.34); padding: 11px 12px;
    }
    .field input:focus, .field select:focus { border-color: rgba(143,182,160,.5); }
    .check-row { display: flex; gap: 10px; }
    .check-chip { flex: 1; }
    .check-chip input { position: absolute; width: auto; opacity: 0; pointer-events: none; }
    .check-chip span { display: block; padding: 11px 8px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; text-align: center; color: var(--muted); font-size: 12px; cursor: pointer; }
    .check-chip input:checked + span { color: var(--accent-ink); border-color: transparent; background: var(--sage); }
    .meal-box { grid-column: 1 / -1; padding: 15px; border: 1px solid rgba(143,182,160,.15); border-radius: 15px; background: rgba(143,182,160,.035); }
    .meal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
    .meal-title { font-size: 13px; font-weight: 740; }
    .calorie-total { color: var(--sage); font-size: 11px; }
    .meal-list { display: grid; gap: 8px; }
    .meal-row { display: grid; grid-template-columns: 42px minmax(0,1fr) 86px; align-items: center; gap: 8px; }
    .meal-label { color: var(--muted); font-size: 11px; }
    .meal-row input { min-width: 0; width: 100%; border: 1px solid rgba(255,255,255,.07); border-radius: 10px; color: var(--text); background: rgba(7,10,11,.28); padding: 9px 10px; font-size: 12px; }
    .meal-row input:focus { border-color: rgba(143,182,160,.5); }
    .meal-note { margin-top: 9px; color: var(--muted); font-size: 9px; line-height: 1.55; }
    .medication-box { grid-column: 1 / -1; margin-top: 5px; padding: 15px; border: 1px solid rgba(217,162,142,.16); border-radius: 15px; background: rgba(217,162,142,.045); }
    .medication-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
    .medication-title { font-size: 13px; font-weight: 740; }
    .medication-note { color: var(--muted); font-size: 10px; }
    .dose-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .dose-chip input, .supplement-check input { position: absolute; width: auto; opacity: 0; pointer-events: none; }
    .dose-chip span { display: block; padding: 10px 8px; border: 1px solid rgba(255,255,255,.08); border-radius: 11px; color: var(--muted); text-align: center; font-size: 12px; cursor: pointer; }
    .dose-chip input:checked + span { color: var(--accent-ink); border-color: transparent; background: var(--rose); }
    .supplement-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 17px 0 8px; }
    .supplement-title { color: var(--muted); font-size: 11px; }
    .add-supplement { border: 0; color: var(--gold); background: transparent; cursor: pointer; padding: 4px; font-size: 11px; }
    .supplement-list { display: grid; gap: 7px; }
    .supplement-row { display: grid; grid-template-columns: minmax(0,1fr) 68px auto auto; align-items: center; gap: 8px; }
    .supplement-row input[type="text"] { min-width: 0; width: 100%; border: 1px solid rgba(255,255,255,.07); border-radius: 10px; color: var(--text); background: rgba(7,10,11,.28); padding: 9px 10px; font-size: 12px; }
    .supplement-row input[readonly] { color: var(--text); }
    .supplement-slot { width: 68px; border: 1px solid rgba(255,255,255,.07); border-radius: 10px; color: var(--muted); background: rgba(7,10,11,.28); padding: 9px 7px; font-size: 11px; }
    .supplement-check span { display: block; min-width: 58px; padding: 9px 8px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; color: var(--muted); text-align: center; font-size: 11px; cursor: pointer; }
    .supplement-check input:checked + span { color: var(--accent-ink); border-color: transparent; background: var(--sage); }
    .remove-supplement { width: 31px; height: 31px; border: 0; border-radius: 9px; color: var(--muted); background: var(--surface-soft); cursor: pointer; }
    .remove-supplement:hover { color: var(--rose); background: color-mix(in srgb, var(--rose) 12%, transparent); }
    .remove-supplement.placeholder { visibility: hidden; }
    .medicine-disclaimer { margin-top: 10px; color: var(--muted); font-size: 9px; line-height: 1.55; }
    .save-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; }
    .privacy { color: var(--muted); font-size: 10px; }
    .button { border: 1px solid transparent; border-radius: 12px; color: var(--accent-ink); background: var(--gold); font-weight: 750; padding: 10px 15px; cursor: pointer; }
    .button:hover { filter: brightness(1.06); }
    .saved { color: var(--sage); font-size: 11px; opacity: 0; transition: opacity .2s; }
    .saved.show { opacity: 1; }

    .footer { display: flex; justify-content: space-between; gap: 16px; padding: 24px 3px 0; color: var(--muted); font-size: 10px; }
    .skeleton { min-height: 15px; border-radius: 8px; background: linear-gradient(90deg, rgba(255,255,255,.035), rgba(255,255,255,.075), rgba(255,255,255,.035)); background-size: 200% 100%; animation: pulse 1.5s infinite; }
    @keyframes pulse { to { background-position: -200% 0; } }

    /* Kain appearance system: four complete page themes, one shared information architecture. */
    h1, .date-main, .progress-number, .weekly-value { font-family: var(--font-cn); }
    .brand-name, .card h2, .planner-head h2 { font-family: var(--font-cn); }
    .sidebar-wordmark { font-family: var(--font-sidebar-latin); font-size: 23px; font-weight: 500; line-height: 1; letter-spacing: .015em; }
    .sidebar-workspace-title { font-family: var(--font-cn); font-size: 12px; font-weight: 650; }
    .sidebar-brand-copy { min-width: 0; }
    .sidebar-brand .brand-note { font-family: var(--font-sidebar-latin); font-size: 11px; letter-spacing: .03em; }

    .card, .quick-link { background: var(--panel); border-color: var(--line); box-shadow: var(--shadow); }
    .desktop-sidebar { background: var(--surface-sidebar); border-color: var(--line); }
    .task, .weekly-stat, .workout-day, .course-week-block, .course-day, .course-moves, .resource-item { background: var(--surface-soft); border-color: var(--line); }
    .course-plan-notes { background: var(--accent-soft); border-color: color-mix(in srgb, var(--gold) 28%, transparent); }
    .course-item, .course-move, .course-day-actions { border-top-color: var(--line); }
    .course-day-actions button { border-color: var(--line); }
    .course-shift-bar { background: var(--accent-soft); border-color: color-mix(in srgb, var(--gold) 34%, transparent); }
    .quick-task-form input, .quick-task-form select,
    .workout-day select, .workout-day input,
    .course-field select, .course-field input,
    .course-day input, .course-day select,
    .resource-form input, .resource-form select,
    .resource-tools select, .resource-filters input, .resource-filters select, .resource-review,
    .field input, .field select,
    .meal-row input, .supplement-row input[type="text"], .supplement-slot {
      color: var(--text);
      border-color: var(--line);
      background: var(--surface-control);
    }
    .button, .quick-task-form button { color: var(--accent-ink); background: var(--gold); }
    .pill, .resource-ghost, .remove-supplement, .resource-delete { background: var(--surface-soft); border-color: var(--line); }
    .meal-box, .tutor-entry, .calendar-sync-item { background: var(--accent-soft); border-color: color-mix(in srgb, var(--gold) 28%, transparent); }
    .medication-box { background: color-mix(in srgb, var(--rose) 9%, var(--panel)); border-color: color-mix(in srgb, var(--rose) 28%, transparent); }
    .bar { background: color-mix(in srgb, var(--muted) 17%, transparent); }
    .bar > span { background: var(--gold); }
    .task-check { border-color: var(--gold); }
    .task.done .task-check { border-color: var(--sage); background: var(--sage); }
    .install-button { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 36%, transparent); background: var(--accent-soft); }
    .secure { color: var(--muted); border-color: var(--line); background: var(--surface-soft); }
    .secure-dot { background: var(--sage); box-shadow: none; }
    .sidebar-link[aria-current="page"] { color: var(--text); border-color: color-mix(in srgb, var(--gold) 30%, transparent); background: var(--accent-soft); }
    .sidebar-link:hover { color: var(--text); background: var(--surface-soft); }
    .sidebar-label, .sidebar-bottom, .footer { color: var(--muted); }

    .appearance-button {
      border: 1px solid var(--line); border-radius: 999px; color: var(--text);
      background: var(--surface-soft); padding: 8px 12px; cursor: pointer; font-size: 12px;
    }
    .appearance-button:hover { border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); background: var(--accent-soft); }
    .appearance-dialog {
      width: min(520px, calc(100% - 28px)); max-height: min(720px, calc(100dvh - 28px));
      overflow: auto; border: 1px solid var(--line); border-radius: 20px; color: var(--text);
      background: var(--panel); box-shadow: 0 28px 90px rgba(0,0,0,.3); padding: 0;
    }
    .appearance-dialog::backdrop { background: rgba(5,7,9,.62); backdrop-filter: blur(7px); }
    .appearance-dialog-form { display: grid; gap: 20px; padding: 23px; }
    .appearance-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
    .appearance-dialog h2 { margin: 0; font-family: var(--font-cn); font-size: 24px; }
    .appearance-dialog-copy { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
    .appearance-close { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; color: var(--text); background: var(--surface-soft); cursor: pointer; }
    .appearance-group { min-width: 0; margin: 0; border: 0; padding: 0; }
    .appearance-group legend, .appearance-field-label { display: block; margin-bottom: 9px; color: var(--muted); font-size: 11px; }
    .theme-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
    .theme-choice { position: relative; min-width: 0; }
    .theme-choice input { position: absolute; opacity: 0; pointer-events: none; }
    .theme-choice span { display: grid; grid-template-columns: 39px minmax(0,1fr); align-items: center; gap: 11px; min-height: 62px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); padding: 10px; cursor: pointer; }
    .theme-choice input:checked + span { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
    .theme-choice input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 3px; }
    .theme-swatch { display: block; width: 39px; height: 39px; border: 1px solid rgba(127,127,127,.24); border-radius: 50%; box-shadow: inset 0 0 0 7px var(--swatch-inner); background: var(--swatch); }
    .theme-choice strong { display: block; font-family: var(--font-cn); font-size: 13px; }
    .theme-choice small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
    .appearance-selects { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .appearance-field { display: grid; min-width: 0; }
    .appearance-field select { width: 100%; border: 1px solid var(--line); border-radius: 12px; color: var(--text); background: var(--surface-control); padding: 10px 11px; }
    .font-preview { border-left: 3px solid var(--gold); margin: 0; color: var(--text); background: var(--surface-soft); padding: 13px 15px; font-family: var(--font-cn); font-size: 17px; line-height: 1.8; }
    .appearance-done { justify-self: end; min-width: 96px; }

    .sidebar-visual {
      position: relative; display: grid; place-items: center; min-height: 132px;
      margin: 4px 3px 10px; overflow: hidden; border-bottom: 1px solid var(--line);
    }
    .vinyl-stage { position: relative; display: grid; width: 150px; height: 118px; place-items: center; }
    .vinyl-stage::before { content: ""; position: absolute; width: 102px; height: 102px; border-radius: 50%; background: rgba(255,255,255,.18); filter: blur(13px); box-shadow: 0 0 25px rgba(255,255,255,.28); }
    .sidebar-vinyl { position: relative; z-index: 1; width: 96px; height: 96px; object-fit: contain; filter: grayscale(1) contrast(1.12) drop-shadow(0 0 12px rgba(255,255,255,.24)); }
    .vinyl-center { position: absolute; z-index: 3; left: 50%; top: 50%; width: 24px; height: 24px; display: grid; place-items: center; transform: translate(-50%,-50%); border: 1px solid rgba(255,255,255,.55); border-radius: 50%; color: #231a0c; background: #caa557; box-shadow: 0 0 12px rgba(226,190,105,.5); font-family: var(--font-latin); font-size: 11px; font-weight: 900; }
    .vinyl-note { position: absolute; z-index: 2; color: rgba(255,255,255,.9); font-family: Georgia, serif; text-shadow: 0 0 12px rgba(255,255,255,.36); animation: note-drift 3.8s ease-in-out infinite; }
    .note-one { left: 5px; top: 24px; font-size: 20px; transform: rotate(-12deg); }
    .note-two { right: 4px; top: 13px; font-size: 18px; animation-delay: -.8s; }
    .note-three { left: 12px; bottom: 10px; font-size: 25px; animation-delay: -1.7s; }
    .note-four { right: 12px; bottom: 21px; font-size: 17px; animation-delay: -2.4s; }
    @keyframes note-drift { 0%,100% { transform: translateY(0) rotate(-5deg); opacity: .65; } 50% { transform: translateY(-5px) rotate(5deg); opacity: 1; } }

    .ipod-player { display: none; width: 154px; padding: 9px 10px 10px; border: 1px solid rgba(66,72,78,.22); border-radius: 19px; background: linear-gradient(145deg,#fafafa 0%,#c6c9cc 48%,#f3f4f4 100%); box-shadow: inset 1px 1px 0 rgba(255,255,255,.95), inset -1px -1px 0 rgba(55,60,65,.12), 0 10px 18px rgba(49,55,60,.16); }
    /* 这块屏就该像一块真的液晶：大时钟压顶，下面两行是今天的真实数据。 */
    .ipod-screen { display: grid; justify-items: center; gap: 1px; min-height: 54px; overflow: hidden; border: 3px solid #6d7378; border-radius: 6px; color: #f5f5f5; background: #0c0d0e; padding: 7px 7px 6px; box-shadow: inset 0 0 15px rgba(255,255,255,.06); }
    .ipod-screen time { color: #eef1f2; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 21px; font-weight: 500; line-height: 1; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
    .ipod-date { color: #aeb4b8; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 8px; letter-spacing: .05em; }
    .ipod-screen { align-content: center; gap: 3px; }
    @keyframes vinyl-spin { to { transform: rotate(360deg); } }
    .ipod-wheel-crop { position: relative; width: 68px; height: 68px; margin: 7px auto 0; overflow: hidden; border: 1px solid rgba(82,87,92,.14); border-radius: 50%; background: #f8f8f8; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
    .ipod-wheel-crop img { position: absolute; left: -22px; top: -87px; width: 112px; height: auto; max-width: none; filter: saturate(.12) contrast(1.02); }
    .sidebar-chat-preview { display: none; width: 100%; gap: 9px; padding: 14px 2px 18px; }
    .sidebar-chat-preview span { position: relative; max-width: 86%; padding: 9px 11px; border-radius: 13px; font-size: 12px; line-height: 1.45; }
    .sidebar-chat-preview span:first-child { justify-self: start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
    .sidebar-chat-preview span:last-child { justify-self: end; color: #17201a; background: #95d6a7; border-bottom-right-radius: 4px; }
    .sidebar-chat-preview span::after { content: ""; position: absolute; bottom: -1px; width: 9px; height: 9px; background: inherit; }
    .sidebar-chat-preview span:first-child::after { left: -4px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
    .sidebar-chat-preview span:last-child::after { right: -4px; clip-path: polygon(0 0, 100% 100%, 0 100%); }
    .cat-sticker { position: absolute; right: 15px; bottom: 11px; font-size: 20px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.18)); transform: rotate(7deg); }

    .workspace-context { display: none; min-width: 0; margin-right: auto; }
    .workspace-context > span { display: flex; align-items: center; gap: 10px; color: var(--muted); font-family: var(--font-latin); font-size: 11px; font-weight: 800; letter-spacing: .13em; }
    .live-clock { border-left: 1px solid var(--line); padding-left: 10px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-weight: 500; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
    .workspace-context strong { display: block; margin-top: 2px; font-family: var(--font-cn); font-size: 18px; font-weight: 650; }
    .view-back-button { display: none; align-items: center; gap: 7px; min-height: 38px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); background: var(--surface-soft); padding: 8px 12px; cursor: pointer; font-size: 12px; }
    .view-back-button:hover { border-color: color-mix(in srgb,var(--gold) 42%,var(--line)); background: var(--accent-soft); }
    .connection-card { padding: 0; overflow: clip; }
    .connection-card > summary { margin: 0; padding: 20px 22px; cursor: pointer; list-style: none; }
    .connection-card > summary::-webkit-details-marker { display: none; }
    .connection-card > summary::after { content: "+"; color: var(--gold); font-size: 20px; }
    .connection-card[open] > summary::after { content: "−"; }
    .connection-list { padding: 0 22px 19px; }
    .resource-show-more {
      display: block; min-height: 40px; margin: 16px auto 0; border: 1px solid var(--line); border-radius: 999px;
      color: var(--text); background: var(--surface-soft); padding: 9px 18px; font-size: 13px; cursor: pointer;
    }
    .resource-show-more.hidden { display: none; }
    .icon-only { display: inline-grid; width: 38px; min-width: 38px; place-items: center; padding: 0; font-family: var(--font-latin); font-size: 19px; line-height: 1; }

    .movement-overview { min-width: 0; }
    .movement-overview-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin: 8px 2px 22px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
    .movement-overview-head h2 { margin: 6px 0 7px; font-family: var(--font-cn); font-size: clamp(31px,4vw,46px); font-weight: 500; line-height: 1.05; }
    .movement-overview-head p { max-width: 620px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
    .movement-target-ring { flex: 0 0 auto; width: 104px; height: 104px; display: grid; place-content: center; border: 1px solid var(--line); border-radius: 50%; text-align: center; background: radial-gradient(circle,var(--surface-soft) 0 54%,transparent 55%), conic-gradient(var(--gold) 0 71%,var(--surface-soft) 71% 100%); box-shadow: inset 0 0 0 8px var(--panel); }
    .movement-target-ring span { font-family: var(--font-cn); font-size: 24px; font-weight: 700; }
    .movement-target-ring small { margin-top: 2px; color: var(--muted); font-size: 10px; }
    .movement-dashboard-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(320px,.85fr); gap: 18px; align-items: stretch; }
    .movement-today-card { position: relative; min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; background: linear-gradient(145deg,color-mix(in srgb,var(--gold) 10%,var(--panel)),var(--panel)); }
    .movement-today-card::before { content: "◌"; position: absolute; top: -38px; right: 15px; color: color-mix(in srgb,var(--gold) 18%,transparent); font-family: Georgia,serif; font-size: 190px; line-height: 1; pointer-events: none; }
    .movement-today-type { position: relative; margin-top: 44px; font-family: var(--font-cn); font-size: clamp(34px,4.5vw,58px); font-weight: 500; letter-spacing: -.04em; line-height: 1; }
    .movement-today-meta { position: relative; margin: 12px 0 0; color: var(--muted); font-size: 14px; }
    .movement-resource-link { position: relative; align-self: flex-start; margin-top: 15px; color: var(--gold); font-size: 13px; text-decoration: none; }
    .movement-done { position: relative; display: block; margin-top: 25px; cursor: pointer; }
    .movement-done input { position: absolute; opacity: 0; pointer-events: none; }
    .movement-done > span { display: grid; grid-template-columns: 38px minmax(0,1fr); grid-template-rows: auto auto; align-items: center; gap: 1px 10px; min-height: 56px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface-soft); padding: 8px 12px; }
    .movement-done i { grid-row: 1 / 3; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: transparent; font-style: normal; }
    .movement-done b { font-size: 14px; }
    .movement-done small { color: var(--muted); font-size: 11px; }
    .movement-done input:checked + span { border-color: color-mix(in srgb,var(--sage) 55%,var(--line)); background: color-mix(in srgb,var(--sage) 12%,var(--surface-soft)); }
    .movement-done input:checked + span i { color: var(--accent-ink); border-color: var(--sage); background: var(--sage); }
    .movement-done input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 3px; }
    .movement-check-card { min-height: 300px; }
    .movement-check-list { margin: 15px 0; border-top: 1px solid var(--line); }
    .movement-check-list > div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
    .movement-check-list span { color: var(--muted); }
    .movement-check-list strong { text-align: right; }
    .movement-edit-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
    .movement-route-card { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-block: 1px solid var(--line); }
    .movement-route-card a { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 0; padding: 18px 16px; border-right: 1px solid var(--line); text-decoration: none; }
    .movement-route-card a:last-child { border-right: 0; }
    .movement-route-card a:hover { background: var(--surface-soft); }
    .movement-route-card span { min-width: 0; }
    .movement-route-card b, .movement-route-card small { display: block; }
    .movement-route-card b { font-family: var(--font-cn); font-size: 14px; }
    .movement-route-card small { margin-top: 4px; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
    .movement-route-card i { color: var(--gold); font-style: normal; }

    /* Health cockpit: fast entry first, detail on demand, weekly trends always readable. */
    .health-section { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: 17px; background: var(--surface-soft); padding: 16px; }
    .health-week-picker { margin: 0 0 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-soft); padding: 12px; }
    .health-week-toolbar { display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; align-items: center; gap: 8px; margin-bottom: 10px; }
    .health-week-toolbar strong { min-width: 0; text-align: center; font-family: var(--font-cn); font-size: 13px; }
    .health-week-toolbar button { min-height: 34px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); background: var(--surface-control); padding: 6px 10px; font-size: 11px; cursor: pointer; }
    .health-week-toolbar button:disabled { opacity: .35; cursor: not-allowed; }
    .health-week-days { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 6px; }
    .health-week-day { position: relative; display: grid; min-width: 0; min-height: 68px; place-items: center; align-content: center; gap: 2px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); background: var(--panel); padding: 7px 3px; cursor: pointer; }
    .health-week-day span { font-size: 9px; }
    .health-week-day strong { color: var(--text); font-family: var(--font-latin); font-size: 17px; line-height: 1; }
    .health-week-day small { min-height: 12px; overflow: hidden; font-size: 8px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
    .health-week-day.has-record small { color: var(--sage); }
    .health-week-day.has-record::after { content: ""; position: absolute; right: 6px; top: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--sage); }
    .health-week-day.is-today { box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--gold) 55%,transparent); }
    .health-week-day.is-selected { color: var(--accent-ink); border-color: var(--gold); background: var(--gold); transform: translateY(-2px); }
    .health-week-day.is-selected strong, .health-week-day.is-selected small { color: inherit; }
    .health-week-day:disabled { opacity: .28; cursor: not-allowed; }
    .health-date-hint { margin: 9px 2px 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
    .health-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
    .health-section-head h3 { margin: 0; font-family: var(--font-cn); font-size: 16px; font-weight: 700; }
    .health-section-head p { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
    .sleep-inputs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)) 92px; gap: 9px; }
    .compact-field { display: grid; gap: 6px; }
    .compact-field span { color: var(--muted); font-size: 10px; }
    .compact-field input, .compact-field select { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 11px; color: var(--text); background: var(--surface-control); padding: 10px 11px; }
    .sleep-summary { color: var(--gold); font-size: 13px; font-variant-numeric: tabular-nums; }
    .sleep-timeline { margin-top: 14px; }
    .sleep-track { position: relative; height: 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 999px; background: linear-gradient(90deg,rgba(52,58,68,.7),var(--surface-control) 34%,var(--surface-control) 68%,rgba(142,158,176,.2)); }
    .sleep-track span { position: absolute; inset-block: 2px; left: var(--sleep-left,30%); width: var(--sleep-width,44%); border-radius: 999px; background: linear-gradient(90deg,var(--blue),color-mix(in srgb,var(--blue) 60%,white)); box-shadow: 0 0 13px color-mix(in srgb,var(--blue) 35%,transparent); }
    .sleep-scale { display: flex; justify-content: space-between; margin-top: 6px; color: var(--muted); font-size: 9px; font-variant-numeric: tabular-nums; }
    .nap-row { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 12px; }
    .nap-row label { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; }
    .nap-row input[type="number"] { width: 84px; border: 1px solid var(--line); border-radius: 9px; color: var(--text); background: var(--surface-control); padding: 7px 9px; }
    .sleep-momo-feedback { position: relative; display: grid; grid-template-columns: auto minmax(0,1fr); align-items: start; gap: 9px; margin: 13px 0 0 7px; border: 1px solid color-mix(in srgb,var(--blue) 24%,var(--line)); border-radius: 15px 15px 15px 5px; color: var(--text); background: color-mix(in srgb,var(--blue) 8%,var(--surface-soft)); padding: 10px 12px; }
    .sleep-momo-feedback::after { content: ""; position: absolute; left: -7px; bottom: -1px; width: 12px; height: 13px; clip-path: polygon(100% 0,100% 100%,0 100%); background: inherit; }
    .sleep-momo-feedback > span { color: var(--blue); font-size: 15px; }
    .sleep-momo-feedback p { margin: 0; font-size: 11px; line-height: 1.65; text-wrap: pretty; }
    .sleep-momo-feedback[data-tone="warn"] { border-color: color-mix(in srgb,var(--rose) 34%,var(--line)); background: color-mix(in srgb,var(--rose) 9%,var(--surface-soft)); }
    .exercise-entries { display: grid; gap: 9px; }
    .exercise-entry { display: grid; grid-template-columns: minmax(112px,.9fr) minmax(82px,.55fr) minmax(88px,.62fr); align-items: center; gap: 9px; min-height: 48px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-control); padding: 8px 10px; }
    .exercise-toggle { display: flex; align-items: center; gap: 8px; min-width: 0; cursor: pointer; }
    .exercise-toggle span { font-size: 13px; font-weight: 700; }
    .exercise-metric { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 5px; }
    .exercise-metric input { min-width: 0; width: 100%; border: 0; color: var(--text); background: transparent; padding: 6px 3px; font-variant-numeric: tabular-nums; }
    .exercise-metric span { color: var(--muted); font-size: 10px; }
    .walking-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 10px; border-top: 1px solid var(--line); padding-top: 11px; }
    .walking-row span { color: var(--muted); font-size: 11px; }
    .walking-row label { display: grid; grid-template-columns: 80px auto; align-items: center; gap: 6px; }
    .walking-row input { min-width: 0; width: 80px; border: 1px solid var(--line); border-radius: 9px; color: var(--text); background: var(--surface-control); padding: 8px 9px; }
    .meal-box { padding: 16px; }
    .meal-head { align-items: flex-start; }
    .calorie-budget { display: flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
    .calorie-budget label { position: relative; cursor: pointer; }
    .calorie-budget input { position: absolute; opacity: 0; pointer-events: none; }
    .calorie-budget span { display: block; border-radius: 999px; color: var(--muted); padding: 6px 9px; font-size: 10px; }
    .calorie-budget input:checked + span { color: var(--accent-ink); background: var(--gold); }
    .calorie-budget input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
    .calorie-layout { display: grid; grid-template-columns: minmax(0,1fr) 128px; align-items: center; gap: 16px; }
    .meal-row { grid-template-columns: 38px minmax(0,1fr) 88px; align-items: start; }
    .meal-label { padding-top: 10px; }
    .meal-tag-field { min-height: 42px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-control); padding: 6px 8px; }
    .meal-tag-field:focus-within { border-color: color-mix(in srgb,var(--gold) 55%,var(--line)); }
    .meal-tag-field input { flex: 1 1 118px; min-width: 90px; width: auto; border: 0; background: transparent; padding: 4px 2px; }
    .meal-tag { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; border: 1px solid color-mix(in srgb,var(--gold) 27%,var(--line)); border-radius: 999px; color: var(--text); background: var(--accent-soft); padding: 5px 7px 5px 9px; font-size: 11px; cursor: pointer; }
    .meal-tag span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .meal-tag i { color: var(--muted); font-style: normal; }
    .meal-calorie { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-control); padding-right: 7px; }
    .meal-calorie input { width: 100%; border: 0; background: transparent; padding-inline: 8px 2px; }
    .meal-calorie span { color: var(--muted); font-size: 9px; }
    .calorie-ring { --calorie-progress: 0deg; position: relative; width: 112px; height: 112px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--gold) 0 var(--calorie-progress),var(--surface-control) var(--calorie-progress) 360deg); box-shadow: inset 0 0 0 1px var(--line); }
    .calorie-ring::before { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: var(--panel); }
    .calorie-ring-copy { position: relative; z-index: 1; text-align: center; }
    .calorie-ring-copy strong { display: block; font-family: var(--font-cn); font-size: 19px; font-variant-numeric: tabular-nums; }
    .calorie-ring-copy small { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; }
    .calorie-delta { margin-top: 7px; color: var(--muted); text-align: center; font-size: 10px; }
    .supplement-row { grid-template-columns: minmax(118px,180px) 72px 62px minmax(128px,1fr) 32px; }
    .supplement-history { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; min-width: 0; }
    .supplement-history span { display: grid; min-width: 0; height: 25px; place-items: center; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: var(--surface-soft); font-family: var(--font-latin); font-size: 8px; }
    .supplement-history span.done { color: var(--accent-ink); border-color: var(--sage); background: var(--sage); }
    .supplement-history span.today { box-shadow: inset 0 0 0 1px var(--gold); }
    .movement-plan-grid, .health-trends-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin-top: 18px; }
    .decision-card { min-width: 0; }
    .decision-list { display: grid; gap: 7px; margin-top: 14px; }
    .decision-day { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 9px; border-bottom: 1px solid var(--line); padding: 8px 0; font-size: 12px; }
    .decision-day:last-child { border-bottom: 0; }
    .decision-day span, .decision-day small { color: var(--muted); }
    .decision-day strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .decision-link { display: inline-flex; margin-top: 12px; color: var(--gold); font-size: 12px; text-decoration: none; }
    .trend-chart { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); align-items: end; gap: 8px; height: 168px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
    .trend-column { min-width: 0; height: 100%; display: grid; grid-template-rows: 1fr auto auto; align-items: end; gap: 5px; text-align: center; }
    .trend-bar-wrap { width: 100%; height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
    .trend-bar { width: min(18px,42%); min-height: 2px; border-radius: 6px 6px 2px 2px; background: var(--blue); }
    .trend-bar.secondary { background: var(--gold); }
    .trend-value { overflow: hidden; color: var(--text); font-family: var(--font-latin); font-size: 9px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
    .trend-label { color: var(--muted); font-size: 9px; }
    .trend-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 9px; color: var(--muted); font-size: 10px; }
    .trend-legend i { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 2px; background: var(--blue); }
    .trend-legend i.secondary { background: var(--gold); }

    /* Today pulse and retrospective views use only locally recorded values. */
    .daily-pulse { margin-bottom: 20px; }
    .section-heading-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 13px; }
    .section-heading-row h2 { margin: 4px 0 0; font-family: var(--font-cn); font-size: 23px; }
    .section-heading-row p { max-width: 560px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
    .pulse-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; }
    .pulse-card { min-width: 0; display: grid; grid-template-columns: 76px minmax(0,1fr); align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: var(--shadow); padding: 13px; }
    .pulse-ring { --pulse-progress: 0deg; position: relative; width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--gold) 0 var(--pulse-progress),var(--surface-control) var(--pulse-progress) 360deg); box-shadow: inset 0 0 0 1px var(--line); }
    .pulse-ring::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--panel); }
    .pulse-ring strong { position: relative; z-index: 1; font-family: var(--font-cn); font-size: 16px; font-variant-numeric: tabular-nums; }
    .pulse-copy { min-width: 0; }
    .pulse-copy b { display: block; font-family: var(--font-cn); font-size: 13px; }
    .pulse-copy small { display: block; min-height: 29px; margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.45; }
    .pulse-mode { width: 100%; margin-top: 7px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: var(--surface-control); padding: 5px 7px; font-size: 10px; }
    .health-checkin-shortcut { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; margin-top: 10px; border: 1px solid var(--line); border-radius: 14px; color: var(--text); background: var(--panel); padding: 12px 14px; text-decoration: none; }
    .health-checkin-shortcut:hover { border-color: color-mix(in srgb,var(--gold) 48%,var(--line)); background: var(--surface-soft); }
    .health-checkin-shortcut:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
    .health-checkin-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--accent-ink); background: var(--gold); }
    .health-checkin-shortcut strong, .health-checkin-shortcut small { display: block; }
    .health-checkin-shortcut strong { font-family: var(--font-cn); font-size: 13px; }
    .health-checkin-shortcut small { margin-top: 3px; color: var(--muted); font-size: 10px; }
    .health-checkin-arrow { color: var(--muted); font-size: 18px; }

    .today-line { margin-bottom: 0; }
    .line-list { list-style: none; display: grid; gap: 2px; margin: 4px 0 0; padding: 0; }
    /* 时间线按时段分组：小标题领起，行只做一件事——状态点、名字、读数。 */
    .line-head {
      margin: 14px 0 4px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em;
    }
    .line-list > .line-head:first-child { margin-top: 2px; }
    .line-item {
      display: grid; grid-template-columns: 16px minmax(0,1fr) auto; align-items: baseline;
      gap: 10px; min-height: 40px; border-radius: 8px; padding: 8px 8px 8px 4px;
    }
    .line-item:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
    .line-dot {
      align-self: center; justify-self: center; width: 8px; height: 8px;
      border: 1.5px solid var(--muted); border-radius: 50%; background: transparent;
    }
    .line-item.done .line-dot { border-color: transparent; background: var(--sage); }
    .line-item.current .line-dot { border-color: var(--gold); box-shadow: 0 0 0 3px var(--accent-soft); }
    .line-label {
      min-width: 0; border: 0; color: var(--text); background: transparent; padding: 0;
      font-size: 15px; line-height: 1.45; text-align: left; cursor: pointer;
    }
    .line-label:hover { text-decoration: underline; text-underline-offset: 3px; }
    .line-item.done .line-label { color: var(--muted); }
    .line-item.current .line-label { color: var(--gold); font-weight: 650; }
    .line-meta {
      flex: none; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
      font-size: 12px; font-variant-numeric: tabular-nums;
    }
    .line-meta:empty { display: none; }

    /* 工作台编辑会给各模块打内联 order，趋势条不是模块，给它一个靠后的值免得抢到最前面。 */
    .overview-strips { display: grid; grid-template-columns: minmax(0,1fr); gap: 18px; margin: 0; order: 90; }
    .streak-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 4px; }
    .streak-cell { display: grid; gap: 3px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-soft); padding: 11px 12px; }
    /* 这是一台读数设备：所有数字走等宽 tabular，跳动时不会左右晃。 */
    .streak-cell strong, .pulse-ring strong, .bar-chart-head strong, .bar-chart-axis,
    .bar-chart-labels, .meal-donut-center strong, .month-line-scale, .date-main {
      font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-variant-numeric: tabular-nums;
    }
    .streak-cell strong { font-size: 28px; font-weight: 500; line-height: 1.1; }
    .streak-unit { margin-left: 3px; color: var(--muted); font-size: 12px; font-weight: 400; }
    .streak-label { color: var(--muted); font-size: 12px; }
    .mini-trends { display: grid; gap: 18px; margin-top: 6px; }
    .bar-chart { margin: 0; }
    .bar-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 7px; color: var(--muted); font-size: 12px; }
    .bar-chart-head strong { color: var(--text); font-size: 13px; font-variant-numeric: tabular-nums; }
    .bar-chart-body { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 7px; }
    .bar-chart-axis { display: flex; flex-direction: column; justify-content: space-between; height: 84px; color: var(--muted); font-size: 10px; text-align: right; font-variant-numeric: tabular-nums; }
    .bar-chart-plot { position: relative; height: 84px; border-bottom: 1px solid var(--line); }
    .bar-chart-grid { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; }
    .bar-chart-grid i { height: 1px; background: var(--line); opacity: .55; }
    .bar-chart-mean { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed color-mix(in srgb, var(--gold) 65%, transparent); }
    .bar-chart-bars { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); align-items: end; gap: 6px; }
    .bar-column { display: grid; align-items: end; height: 100%; }
    .bar { border-radius: 3px 3px 0 0; background: color-mix(in srgb, var(--gold) 45%, transparent); }
    .bar.current { background: var(--gold); }
    .bar.empty { background: var(--line); }
    .meal-donut-chart { --slice-0: color-mix(in srgb, var(--gold) 88%, transparent); --slice-1: color-mix(in srgb, var(--gold) 62%, transparent); --slice-2: color-mix(in srgb, var(--blue) 70%, transparent); --slice-3: color-mix(in srgb, var(--sage) 62%, transparent); margin: 0; }
    .meal-donut-body { display: grid; grid-template-columns: 96px minmax(0,1fr); align-items: center; gap: 16px; }
    .meal-donut { position: relative; width: 96px; height: 96px; border-radius: 50%; }
    .meal-donut::after { content: ""; position: absolute; inset: 26px; border-radius: 50%; background: var(--panel); }
    .meal-donut-center { position: absolute; inset: 0; z-index: 1; display: grid; align-content: center; justify-items: center; gap: 1px; }
    .meal-donut-center strong { font-size: 16px; font-variant-numeric: tabular-nums; line-height: 1; }
    .meal-donut-center small { color: var(--muted); font-size: 10px; }
    .meal-donut-legend { list-style: none; display: grid; gap: 6px; margin: 0; padding: 0; }
    .meal-donut-legend li { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
    .meal-donut-legend li::before { content: ""; width: 9px; height: 9px; flex: none; border-radius: 3px; background: var(--dot); }
    .meal-donut-legend b { margin-left: auto; color: var(--text); font-variant-numeric: tabular-nums; }
    .bar-chart-labels { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 6px; margin: 5px 0 0 41px; color: var(--muted); font-size: 10px; text-align: center; font-variant-numeric: tabular-nums; }

    /* 这台设备的签名动作：凡是读数，都做成嵌进外壳的一小块液晶。
       其余部分保持安静，让这一处成为唯一被记住的细节。 */
    .date-card, .pulse-card, .streak-cell, .line-list {
      border: 0;
      background: var(--lcd);
      box-shadow: var(--lcd-inset);
    }
    .date-card { border-radius: 12px; padding: 13px 15px; text-align: right; }
    .pulse-card { border-radius: 13px; }
    .line-list { border-radius: 10px; padding: 8px 10px; gap: 0; }
    .pulse-ring { box-shadow: inset 0 0 0 1px var(--line); }
    .pulse-ring::before { background: var(--lcd); }

    .weekly-medication { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
    .weekly-medication-days { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 5px; margin-top: 8px; }
    .weekly-medication-days span { display: grid; gap: 2px; min-width: 0; place-items: center; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: var(--surface-soft); padding: 6px 2px; font-size: 9px; }
    .weekly-medication-days span b { color: var(--text); font-family: var(--font-latin); font-size: 10px; }
    .weekly-medication-days span.complete { color: var(--accent-ink); border-color: var(--sage); background: var(--sage); }
    .weekly-medication-days span.complete b { color: inherit; }

    .health-insights { min-width: 0; }
    .insights-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 7px 2px 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
    .insights-head h2 { margin: 5px 0 7px; font-family: var(--font-cn); font-size: clamp(31px,4vw,46px); font-weight: 600; line-height: 1.05; }
    .insights-head p { max-width: 650px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
    .month-picker { display: grid; gap: 6px; flex: 0 0 auto; color: var(--muted); font-size: 10px; }
    .month-picker input { border: 1px solid var(--line); border-radius: 11px; color: var(--text); background: var(--surface-control); padding: 9px 11px; font: inherit; font-size: 12px; }
    .monthly-review { margin-bottom: 18px; border-left: 3px solid var(--gold); }
    .monthly-review p { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.75; }
    .monthly-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
    .monthly-card { min-width: 0; }
    .monthly-card-wide { grid-column: 1 / -1; }
    .monthly-summary { margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.55; }
    .month-chart { display: grid; grid-template-columns: repeat(var(--month-days,31),minmax(4px,1fr)); align-items: end; gap: 3px; height: 126px; margin-top: 14px; border-top: 1px solid var(--line); padding-top: 13px; }
    .month-column { height: 100%; min-width: 0; display: grid; grid-template-rows: 1fr auto; align-items: end; gap: 4px; }
    .month-column i { display: block; width: 100%; min-height: 2px; border-radius: 4px 4px 1px 1px; background: var(--blue); opacity: .9; }
    .month-column.no-value i { background: var(--surface-control); opacity: .6; }
    .month-column span { min-height: 9px; overflow: visible; color: var(--muted); text-align: center; font-family: var(--font-latin); font-size: 7px; }
    .month-list { display: grid; gap: 8px; margin-top: 14px; }
    .month-list-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); padding: 8px 0; font-size: 12px; }
    .month-list-row:last-child { border-bottom: 0; }
    .month-list-row span { color: var(--muted); }
    .state-cloud { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
    .state-cloud span { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--surface-soft); padding: 7px 11px; font-size: 11px; }
    .state-cloud .state-chip b { font-size: 17px; line-height: 1; }

    /* 打卡类数据用月历热点图：一格一天，颜色越深做得越多。 */
    .month-heatmap { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 4px; height: auto; margin-top: 14px; border-top: 1px solid var(--line); padding-top: 13px; }
    .heat-cell { aspect-ratio: 1; border-radius: 4px; background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line); }
    .heat-cell.filler { background: transparent; box-shadow: none; }
    .heat-cell.level-1 { background: color-mix(in srgb, var(--gold) 26%, transparent); box-shadow: none; }
    .heat-cell.level-2 { background: color-mix(in srgb, var(--gold) 48%, transparent); box-shadow: none; }
    .heat-cell.level-3 { background: color-mix(in srgb, var(--gold) 72%, transparent); box-shadow: none; }
    .heat-cell.level-4 { background: var(--gold); box-shadow: none; }

    .month-detail-calendar { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 5px; margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
    .month-detail-weekday { color: var(--muted); padding: 2px 4px 5px; text-align: center; font-size: 9px; font-weight: 700; }
    .month-detail-cell { min-width: 0; min-height: 82px; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); padding: 7px; }
    .month-detail-cell.filler { visibility: hidden; }
    .month-detail-cell.has-record { background: color-mix(in srgb,var(--gold) 7%,var(--surface-soft)); }
    .month-detail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; }
    .month-detail-head b { color: var(--text); font-family: var(--font-latin); font-size: 10px; font-variant-numeric: tabular-nums; }
    .month-detail-head span { overflow: hidden; color: var(--gold); font-family: var(--font-latin); font-size: 8px; font-weight: 700; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
    .month-detail-chips { display: grid; gap: 3px; margin-top: 7px; }
    .month-detail-chips span { overflow: hidden; border-radius: 5px; color: var(--text); background: var(--panel); padding: 3px 5px; font-size: 8px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
    .month-detail-chips small { color: color-mix(in srgb,var(--muted) 68%,transparent); font-size: 8px; }

    /* 体重是连续量，用折线看走势。 */
    .month-line { position: relative; display: block; height: 126px; margin-top: 14px; border-top: 1px solid var(--line); padding: 13px 0 0 38px; }
    .month-line svg { display: block; width: 100%; height: 100%; overflow: visible; }
    .month-line-path { fill: none; stroke: var(--gold); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
    .month-line-area { fill: color-mix(in srgb, var(--gold) 14%, transparent); stroke: none; }
    .month-line-dot { fill: var(--gold); vector-effect: non-scaling-stroke; }
    .month-line-scale { position: absolute; left: 0; top: 13px; bottom: 0; display: flex; flex-direction: column; justify-content: space-between; color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }

    .sidebar-workspace-title, .sidebar-label, .sidebar-link, .sidebar-bottom { font-weight: 750; }
    .sidebar-label { color: color-mix(in srgb,var(--text) 72%,var(--muted)); }
    .sidebar-link { color: color-mix(in srgb,var(--text) 76%,var(--muted)); }
    .sidebar-link span:last-child { font-weight: 750; }

    .click-burst { position: fixed; z-index: 1000; left: var(--burst-x); top: var(--burst-y); pointer-events: none; color: var(--burst-color,var(--gold)); font-size: 17px; filter: drop-shadow(0 2px 7px rgba(0,0,0,.24)); animation: click-burst .72s cubic-bezier(.2,.75,.25,1) forwards; }
    @keyframes click-burst { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.55) rotate(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--burst-dx)),calc(-50% + var(--burst-dy))) scale(1.05) rotate(var(--burst-rotate)); } }

    /* Green and blue themes behave like two different messaging workspaces. */
    html[data-theme="wechat"] .vinyl-stage,
    html[data-theme="bubble"] .vinyl-stage { display: none; }
    html[data-theme="wechat"] .sidebar-chat-preview,
    html[data-theme="bubble"] .sidebar-chat-preview { display: grid; }
    html[data-theme="bubble"] .sidebar-chat-preview span:last-child { color: #fff; background: #5b92c9; }
    html[data-theme="bubble"] .sidebar-chat-preview span:first-child { background: #e9edf1; }

    html[data-theme="wechat"] .task,
    html[data-theme="wechat"] .tutor-entry,
    html[data-theme="wechat"] .calendar-sync-item,
    html[data-theme="wechat"] .weekly-stat,
    html[data-theme="wechat"] .resource-item,
    html[data-theme="bubble"] .task,
    html[data-theme="bubble"] .tutor-entry,
    html[data-theme="bubble"] .calendar-sync-item,
    html[data-theme="bubble"] .weekly-stat,
    html[data-theme="bubble"] .resource-item { position: relative; overflow: visible; }

    html[data-theme="wechat"] .task,
    html[data-theme="wechat"] .tutor-entry,
    html[data-theme="wechat"] .calendar-sync-item,
    html[data-theme="wechat"] .resource-item { border-radius: 17px 17px 17px 5px; background: #fff; }
    html[data-theme="wechat"] .task:nth-child(even),
    html[data-theme="wechat"] .weekly-stat:nth-child(even),
    html[data-theme="wechat"] .resource-item:nth-child(even) { border-color: rgba(71,127,89,.18); border-radius: 17px 17px 5px 17px; background: #dff2e4; }
    html[data-theme="wechat"] .task::after,
    html[data-theme="wechat"] .tutor-entry::after,
    html[data-theme="wechat"] .calendar-sync-item::after,
    html[data-theme="wechat"] .resource-item::after,
    html[data-theme="bubble"] .task::after,
    html[data-theme="bubble"] .tutor-entry::after,
    html[data-theme="bubble"] .calendar-sync-item::after,
    html[data-theme="bubble"] .resource-item::after {
      content: ""; position: absolute; left: -5px; bottom: -1px; width: 10px; height: 11px;
      clip-path: polygon(100% 0,100% 100%,0 100%); background: inherit;
    }
    html[data-theme="wechat"] .task:nth-child(even)::after,
    html[data-theme="wechat"] .resource-item:nth-child(even)::after { left: auto; right: -5px; clip-path: polygon(0 0,100% 100%,0 100%); }

    html[data-theme="bubble"] .task,
    html[data-theme="bubble"] .tutor-entry,
    html[data-theme="bubble"] .calendar-sync-item,
    html[data-theme="bubble"] .resource-item { border-radius: 18px 18px 18px 5px; background: #e8edf2; }
    html[data-theme="bubble"] .task:nth-child(even),
    html[data-theme="bubble"] .weekly-stat:nth-child(even),
    html[data-theme="bubble"] .resource-item:nth-child(even) { border-color: rgba(82,123,163,.2); border-radius: 18px 18px 5px 18px; background: #dbeafb; }
    html[data-theme="bubble"] .task:nth-child(even)::after,
    html[data-theme="bubble"] .resource-item:nth-child(even)::after { left: auto; right: -5px; clip-path: polygon(0 0,100% 100%,0 100%); }
    html[data-theme="wechat"] .card,
    html[data-theme="bubble"] .card { box-shadow: 0 8px 24px color-mix(in srgb, var(--gold) 10%, transparent); }
    html[data-theme="wechat"] #todayTasks,
    html[data-theme="wechat"] #frenchLearning,
    html[data-theme="wechat"] #weeklyHealth,
    html[data-theme="bubble"] #todayTasks,
    html[data-theme="bubble"] #frenchLearning,
    html[data-theme="bubble"] #weeklyHealth { position: relative; overflow: visible; }
    html[data-theme="wechat"] #todayTasks::after,
    html[data-theme="wechat"] #weeklyHealth::after,
    html[data-theme="bubble"] #todayTasks::after,
    html[data-theme="bubble"] #weeklyHealth::after {
      content: ""; position: absolute; left: -9px; bottom: 25px; width: 18px; height: 20px;
      clip-path: polygon(100% 0,100% 100%,0 100%); background: var(--panel);
    }
    html[data-theme="wechat"] #frenchLearning { background: #e7f5ea; }
    html[data-theme="bubble"] #frenchLearning { background: #e2eef9; }
    html[data-theme="wechat"] #frenchLearning::after,
    html[data-theme="bubble"] #frenchLearning::after {
      content: ""; position: absolute; right: -9px; bottom: 25px; width: 18px; height: 20px;
      clip-path: polygon(0 0,100% 100%,0 100%); background: inherit;
    }

    /* iPod has its own object-led sidebar and screen-like content language. */
    html[data-theme="ipod"] .vinyl-stage { display: none; }
    html[data-theme="ipod"] .ipod-player { display: block; }
    html[data-theme="ipod"] .sidebar-visual { min-height: 164px; }
    html[data-theme="ipod"] .cat-sticker { display: none; }
    html[data-theme="ipod"] .desktop-sidebar { border-radius: 30px; box-shadow: inset 1px 1px rgba(255,255,255,.85), inset -1px -1px rgba(72,78,84,.12), 0 18px 42px rgba(58,64,70,.14); }
    html[data-theme="ipod"] .sidebar-link { border-radius: 4px; }
    html[data-theme="ipod"] .sidebar-link[aria-current="page"] { color: #fff; background: #56616b; }
    html[data-theme="ipod"] .card { border-radius: 12px; box-shadow: inset 0 1px rgba(255,255,255,.9), 0 9px 24px rgba(58,64,70,.12); }
    html[data-theme="ipod"] .button,
    html[data-theme="ipod"] .resource-ghost,
    html[data-theme="ipod"] .appearance-button,
    html[data-theme="ipod"] .install-button { box-shadow: inset 1px 1px rgba(255,255,255,.86), inset -1px -1px rgba(60,66,72,.12); }

    /* Typography scale: readable content, restrained actions. */
    .card-kicker, .appearance-group legend, .appearance-field-label { font-size: 12px; }
    .card h2, .planner-head h2 { font-size: 23px; }
    .task-name, .resource-title, .calendar-sync-name, .meal-title, .medication-title { font-size: 14px; }
    .task-meta, .task-status, .planner-copy, .planner-status, .stat-label, .weekly-line,
    .resource-meta, .calendar-sync-copy, .privacy, .medicine-disclaimer, .meal-note, .tutor-entry-note { font-size: 12px; }
    .weekly-label, .weekly-message, .course-field, .course-week-range, .course-day-number,
    .course-day-date-label, .course-resource-actions a, .course-resource-actions button,
    .calendar-security, .workout-date, .workout-open, .tutor-prompt { font-size: 11px; }
    .course-item-title, .course-move-name { font-size: 13px; }
    .course-plan-notes p, .course-item-note, .course-item-check, .course-moves > summary,
    .course-move-meta, .course-move-tip { font-size: 12px; }
    .course-item-chip, .course-week-flag { font-size: 11px; }
    .course-day-actions button, .course-shift-bar span, .course-shift-bar button { font-size: 11px; }
    .theme-choice small, .footer { font-size: 11px; }
    .button, .quick-task-form button, .resource-ghost, .calendar-subscribe, .install-button, .appearance-button {
      min-height: 38px; padding: 8px 12px; font-size: 13px;
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    }

    @media (min-width: 821px) {
      .shell {
        width: min(1500px, calc(100% - 32px));
        display: grid;
        grid-template-columns: 252px minmax(0, 1fr);
        column-gap: 28px;
        align-items: start;
        padding-top: 20px;
      }
      .shell > :not(.desktop-sidebar) { grid-column: 2; min-width: 0; }
      .desktop-sidebar {
        grid-column: 1;
        grid-row: 1 / span 20;
        display: flex;
        position: sticky;
        top: 20px;
        min-height: calc(100dvh - 40px);
        max-height: calc(100dvh - 40px);
        flex-direction: column;
        overflow: auto;
        padding: 17px 13px;
        border: 1px solid var(--line);
        border-radius: 20px;
        background: rgba(20, 26, 28, .9);
        box-shadow: 0 18px 50px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.035);
        backdrop-filter: blur(20px);
      }
      .sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 3px 5px 17px; border-bottom: 1px solid var(--line); }
      .sidebar-brand .brand-mark { width: 36px; height: 36px; border-radius: 11px; font-size: 18px; }
      .sidebar-brand .brand-name { font-size: 14px; }
      .sidebar-brand .brand-note { font-size: 11px; }
      .sidebar-nav { display: grid; gap: 3px; padding: 15px 0; }
      .sidebar-label { padding: 13px 10px 6px; color: var(--muted); font-family: var(--font-cn); font-size: 11px; font-weight: 650; letter-spacing: .08em; }
      .sidebar-link {
        display: flex; align-items: center; gap: 10px; min-height: 39px; padding: 8px 11px;
        border: 1px solid transparent; border-radius: 11px; color: var(--muted); text-decoration: none;
        font-family: var(--font-cn); font-size: 14px; transition: color .16s, border-color .16s, background .16s;
      }
      .sidebar-link:hover { color: var(--text); background: rgba(255,255,255,.035); }
      .sidebar-link[aria-current="page"] { color: #f5e6c6; border-color: rgba(227,184,102,.2); background: rgba(227,184,102,.085); }
      .sidebar-icon { width: 20px; color: var(--gold); font-family: var(--font-latin); text-align: center; font-size: 12px; }
      .sidebar-link.external .sidebar-icon { color: var(--blue); }
      .sidebar-bottom { margin-top: auto; padding: 14px 7px 2px; border-top: 1px solid var(--line); color: var(--muted); font-family: var(--font-cn); font-size: 11px; line-height: 1.65; }
      .sidebar-bottom-row { display: flex; align-items: center; gap: 7px; }
      .topbar { min-height: 52px; justify-content: flex-end; margin-bottom: 20px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
      .topbar > .brand { display: none; }
      .workspace-context { display: block; }
      .hero { align-items: center; gap: 22px; margin-bottom: 20px; padding: 3px 3px 0; }
      .hero h1 { max-width: 780px; margin: 8px 0 10px; font-size: clamp(34px, 3.3vw, 49px); line-height: 1.04; }
      .hero-copy { font-size: 15px; line-height: 1.7; }
      .date-main { font-size: 25px; }
      .date-sub { margin-top: 4px; font-size: 11px; }
      .quick-nav { display: none; }
      .card { box-shadow: 0 12px 38px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.035); }
      .grid { grid-template-columns: minmax(0,1.38fr) minmax(330px,.62fr); align-items: start; }
      #overview, #dailyPulse, #todayDashboard, #health, #frenchLearning, #movementOverview, #healthInsights, #workoutPlanner, #calendarSync, #fixedCoursePlan, #workoutLibrary { scroll-margin-top: 22px; }

      body.workspace-routed [data-view-section] { display: none; }
      body.workspace-routed[data-active-view="overview"] [data-view-section="overview"] { display: grid; }
      body.workspace-routed[data-active-view="movement"] [data-view-section="movement"],
      body.workspace-routed[data-active-view="workout"] [data-view-section="workout"],
      body.workspace-routed[data-active-view="calendar"] [data-view-section="calendar"],
      body.workspace-routed[data-active-view="course"] [data-view-section="course"],
      body.workspace-routed[data-active-view="library"] [data-view-section="library"],
      body.workspace-routed[data-active-view="insights"] [data-view-section="insights"] { display: block; }
      body.workspace-routed[data-active-view]:not([data-active-view="overview"]) .topbar { margin-bottom: 24px; }
      body.workspace-routed[data-active-view]:not([data-active-view="overview"]) .view-back-button { display: inline-flex; }
      body.workspace-routed[data-active-view]:not([data-active-view="overview"]) .footer { margin-top: 16px; }

      html[data-theme="moon"] body[data-active-view="overview"] .grid { grid-template-columns: minmax(0,1.42fr) minmax(330px,.58fr); }
      html[data-theme="wechat"] body[data-active-view="overview"] .grid { grid-template-columns: minmax(0,1.28fr) minmax(350px,.72fr); gap: 22px; }
      html[data-theme="bubble"] body[data-active-view="overview"] .grid { grid-template-columns: minmax(0,1.2fr) minmax(360px,.8fr); gap: 26px; }
      html[data-theme="ipod"] body[data-active-view="overview"] .grid { grid-template-columns: minmax(0,1.48fr) minmax(320px,.52fr); }
    }

    @media (max-width: 820px) {
      .hero, .grid { grid-template-columns: 1fr; }
      .date-card { text-align: left; }
      .quick-nav { grid-template-columns: 1fr 1fr; }
      .workout-week { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .course-days { grid-template-columns: repeat(2,minmax(0,1fr)); }
      .resource-form { grid-template-columns: 1fr 1fr; }
      .resource-form input[type="url"] { grid-column: 1 / -1; }
      .resource-list { grid-template-columns: 1fr; }
      .movement-dashboard-grid { grid-template-columns: 1fr; }
      .movement-plan-grid, .health-trends-grid { grid-template-columns: 1fr; }
      .pulse-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
      .overview-strips { grid-template-columns: 1fr; }
      .monthly-grid { grid-template-columns: 1fr; }
      .movement-route-card { grid-template-columns: 1fr 1fr; }
      .movement-route-card a:nth-child(2) { border-right: 0; }
      .movement-route-card a:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
    }
    @media (max-width: 520px) {
      .shell { width: min(100% - 20px, 1180px); padding-top: calc(18px + env(safe-area-inset-top)); padding-bottom: calc(48px + env(safe-area-inset-bottom)); }
      .topbar { margin-bottom: 28px; }
      .top-actions { gap: 5px; }
      .secure { display: none; }
      .appearance-button { padding: 8px 9px; }
      .install-button { padding: 8px 10px; }
      .quick-nav { grid-template-columns: 1fr; }
      .quick-link { min-height: 70px; }
      .card { padding: 19px; border-radius: 18px; }
      .progress-row { grid-template-columns: 78px 1fr; }
      .health-grid { grid-template-columns: minmax(0,1fr); }
      .health-week-picker { margin-inline: -3px; padding: 9px 7px; }
      .health-week-toolbar { grid-template-columns: auto minmax(0,1fr) auto; }
      .health-week-toolbar .health-today-button { grid-column: 1 / -1; width: 100%; }
      .health-week-days { gap: 3px; }
      .health-week-day { min-height: 62px; border-radius: 10px; padding-inline: 1px; }
      .health-week-day small { font-size: 0; }
      .health-week-day small::after { content: "未记"; font-size: 8px; }
      .health-week-day.has-record small::after { content: "已记"; }
      .field.wide { grid-column: auto; }
      .quick-task-form { grid-template-columns: 1fr 1fr; }
      .quick-task-form input { grid-column: 1 / -1; }
      .planner-head, .planner-actions { align-items: stretch; flex-direction: column; }
      .planner-buttons { width: 100%; justify-content: stretch; }
      .planner-buttons button { flex: 1; }
      .tutor-entry-actions { align-items: stretch; flex-direction: column; }
      .calendar-sync-grid { grid-template-columns: 1fr; }
      .workout-week { grid-template-columns: 1fr; }
      .course-controls { grid-template-columns: 1fr; }
      .course-days { grid-template-columns: 1fr; }
      .resource-form { grid-template-columns: 1fr; }
      .resource-form input[type="url"] { grid-column: auto; }
      .resource-filters { grid-template-columns: 1fr; }
      .resource-count { width: 100%; margin-left: 0; }
      .resource-item { grid-template-columns: 1fr; }
      .resource-actions { justify-content: flex-start; }
      .movement-overview-head { align-items: flex-start; }
      .movement-target-ring { width: 88px; height: 88px; }
      .movement-route-card { grid-template-columns: 1fr; }
      .movement-route-card a { border-right: 0; border-bottom: 1px solid var(--line); }
      .movement-route-card a:last-child { border-bottom: 0; }
      .sleep-inputs { grid-template-columns: 1fr 1fr; }
      .sleep-inputs .compact-field:last-child { grid-column: 1 / -1; }
      .exercise-entry { grid-template-columns: minmax(100px,1fr) 86px 92px; }
      .calorie-layout { grid-template-columns: 1fr; }
      .calorie-overview { display: grid; justify-items: center; }
      .supplement-row { grid-template-columns: minmax(0,1fr) 72px 60px 31px; }
      .supplement-history { grid-column: 1 / -1; }
      .section-heading-row, .insights-head { align-items: flex-start; flex-direction: column; }
      .pulse-grid { grid-template-columns: 1fr 1fr; }
      .pulse-card { grid-template-columns: 68px minmax(0,1fr); }
      .pulse-ring { width: 64px; height: 64px; }
      .month-picker { width: 100%; }
      .month-picker input { width: 100%; }
      .month-detail-calendar { gap: 3px; }
      .month-detail-cell { min-height: 62px; border-radius: 6px; padding: 4px; }
      .month-detail-head span { max-width: 46px; font-size: 7px; }
      .month-detail-chips { gap: 2px; margin-top: 4px; }
      .month-detail-chips span:nth-child(n+3) { display: none; }
      .health-checkin-shortcut { border-radius: 13px; }
      .footer { flex-direction: column; }
      .appearance-dialog-form { padding: 19px; }
      .theme-grid, .appearance-selects { grid-template-columns: 1fr; }
    }
    @media (min-width: 821px) {
      .desktop-sidebar { background: var(--surface-sidebar); border-color: var(--line); box-shadow: var(--shadow); }
      .card { box-shadow: var(--shadow); }
      .sidebar-link:hover { color: var(--text); background: var(--surface-soft); }
      .sidebar-link[aria-current="page"] { color: var(--text); border-color: color-mix(in srgb, var(--gold) 30%, transparent); background: var(--accent-soft); }
    }
    .skeleton-spaced { margin-bottom: 18px; }
    .theme-swatch-moon { --swatch:#0c1117; --swatch-inner:#d4d7da; }
    .theme-swatch-chat { --swatch:#f4f7fa; --swatch-inner:#3f7bd9; }
    .theme-swatch-ipod { --swatch:#e5e7e9; --swatch-inner:#4d5964; }