:root {
      --bg: #0c0d10;
      --surface: #16181c;
      --surface-soft: #111317;
      --surface-raised: #1e2126;
      --line: #2a2e35;
      --line-soft: #21242a;
      --text: #f2f4f7;
      --muted: #9aa2ad;
      --faint: #6d747e;
      --accent: #4a90ff;
      --accent-ink: #ffffff;
      --danger: #ff6b60;
      --flame: #ff9f4a;
      --success: #3ecf8e;
      --step-warmup: #46c8d8;
      --step-interval: #4a90ff;
      --step-recovery: #7b8493;
      --step-cooldown: #9aa2ad;
      --step-rest: #4a505a;
      --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
      --sans: -apple-system, BlinkMacSystemFont, system-ui, "SF Pro Text", Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      --glass: color-mix(in srgb, var(--surface) 88%, transparent);
      --glass-strong: color-mix(in srgb, var(--surface-raised) 94%, transparent);
      --glass-line: color-mix(in srgb, #ffffff 7%, transparent);
      --glass-blur: saturate(120%) blur(20px);
      --radius: 16px;
      --sp-1: 4px;
      --sp-2: 8px;
      --sp-3: 12px;
      --sp-4: 16px;
      --sp-5: 20px;
      --sp-6: 24px;
      --r-sm: 6px;
      --r-md: 10px;
      --r-lg: 14px;
      --r-xl: var(--radius);
      --r-pill: 999px;
      --fs-micro: 11px;
      --fs-xs: 12px;
      --fs-sm: 13px;
      --fs-md: 15px;
      --fs-lg: 16px;
      --fs-xl: 18px;
      --fs-2xl: 22px;
      --fs-3xl: 28px;
      --control-sm: 38px;
      --control-md: 44px;
      --control-lg: 56px;
      --control-compact: 30px;
      --dur-fast: .15s;
      --dur: .2s;
      --dur-skeleton: 1.4s;
      --ease-standard: cubic-bezier(.2, .65, .3, 1);
      --bar-pad-block: calc(var(--sp-3) + 13px);
      --bar-heading-line: var(--fs-2xl);
      --week-cell-height: 64px;
      --library-item-height: 58px;
      --tabbar-space: calc(84px + env(safe-area-inset-bottom));
    }
    * { box-sizing: border-box; }
    html, body { margin: 0; }
    body {
      background: var(--bg);
      background-attachment: fixed;
      color: var(--text);
      font-family: var(--sans);
      line-height: 1.5;
      min-height: 100vh;
      overscroll-behavior-y: none;
      -webkit-font-smoothing: antialiased;
      -webkit-tap-highlight-color: transparent;
      -webkit-text-size-adjust: 100%;
    }
    .wrap {
      max-width: 960px; margin: 0 auto;
      padding: calc(var(--sp-6) + env(safe-area-inset-top)) max(var(--sp-4), env(safe-area-inset-left)) var(--tabbar-space);
    }
    .panel[hidden] { display: none; }
    .build-route[hidden] { display: none; }
    .build-route {
      position: fixed; inset: 0; z-index: 60; overflow:auto; overscroll-behavior:contain;
      background:var(--surface); padding:calc(18px + env(safe-area-inset-top)) max(var(--sp-4), env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(var(--sp-4), env(safe-area-inset-left));
    }
    .build-route > * { width:100%; max-width:960px; margin-left:auto; margin-right:auto; min-width:0; }
    .build-route-head { max-width:960px; margin:0 auto var(--sp-3); display:flex; align-items:center; gap:var(--sp-3); }
    .build-route-head h1 { font-size:var(--fs-2xl); margin:0; }
    body.build-open { overflow:hidden; }
    h1 { font-size: var(--fs-3xl); margin: 0; letter-spacing: -0.02em; }
    .dot { color: var(--accent); }
    .tag { color: var(--muted); font-size: var(--fs-md); }
    p.lead { color: var(--muted); margin: var(--sp-2) 0 0; font-size: var(--fs-lg); }
    code, kbd { font-family: var(--mono); }
    .grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
    @media (min-width: 820px) { .grid { grid-template-columns: 1fr 1fr; } }
    .card {
      background: var(--surface);
      border: 1px solid var(--line-soft);
      border-radius: var(--r-xl);
      padding: var(--sp-4);
    }
    /* Full-width chrome rather than a floating pill: it reads as the edge of the app
       instead of an object sitting on top of the content it hides. */
    .tabbar {
      position: fixed; z-index: 30;
      left: 0; right: 0; bottom: 0;
      display: flex; justify-content: center; gap: var(--sp-1);
      padding: var(--sp-2) var(--sp-3) calc(var(--sp-2) + env(safe-area-inset-bottom));
      background: color-mix(in srgb, var(--bg) 97%, transparent);
      border-top: 1px solid var(--line-soft);
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
    }
    .tab {
      display: flex; flex-direction: column; align-items: center; gap: var(--sp-1);
      min-width: 68px; min-height: var(--control-md); padding: 6px var(--sp-3);
      background: transparent; border: 0; border-radius: var(--r-pill);
      color: var(--muted); font-family: var(--sans); font-size: var(--fs-micro); font-weight: 600;
      cursor: pointer; transition: color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
    }
    .tab svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7;
      stroke-linecap: round; stroke-linejoin: round; }
    .tab[aria-selected="true"] { color: var(--accent); }
    .card h2 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.08em;
      color: var(--muted); margin: 0 0 var(--sp-3); font-weight: 600; }
    label { display: block; font-size: var(--fs-sm); color: var(--muted); margin: 0 0 6px; }
    .row { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
    .row > div { flex: 1 1 160px; }
    input[type=text], input[type=date], input[type=password], select, textarea {
      width: 100%; background: color-mix(in srgb, var(--surface-soft) 70%, transparent); color: var(--text);
      border: 1px solid var(--glass-line); border-radius: var(--r-md); padding: 11px var(--sp-3);
      font-size: 16px; font-family: var(--sans); min-height: var(--control-md);
      -webkit-appearance: none; appearance: none;
    }
    textarea { font-family: var(--mono); font-size: var(--fs-md); min-height: 84px; resize: vertical; }
    input:focus, select:focus, textarea:focus {
      outline: none; border-color: var(--accent);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
    }
    .examples { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 4px 0 var(--sp-4); }
    .chip {
      font-family: var(--mono); font-size: var(--fs-xs); cursor: pointer;
      background: var(--surface-soft); color: var(--text);
      border: 1px solid var(--line); border-radius: var(--r-pill); padding: 5px 11px; min-height: var(--control-sm);
    }
    .chip:hover { border-color: var(--accent); color: var(--accent); }
    button.primary {
      background: var(--accent); color: var(--accent-ink); border: 0;
      border-radius: var(--r-pill); padding: 12px 22px; font-size: var(--fs-lg); font-weight: 600;
      min-height: var(--control-md); cursor: pointer;
    }
    button.primary:disabled { opacity: 0.6; cursor: default; }
    .error { color: var(--danger); font-size: var(--fs-md); margin-top: 10px; min-height: 18px; }
    .error:empty { display: none; }
    .sync-banner[hidden] { display: none; }
    .sync-banner {
      display: flex; align-items: center; gap: var(--sp-2);
      margin: var(--sp-2) 0; padding: 10px 14px;
      border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
      background: color-mix(in srgb, var(--danger) 12%, transparent);
      border-radius: var(--r-md, 12px);
      color: var(--danger); font-size: var(--fs-md);
    }
    .sync-banner[data-level="warn"] {
      border-color: color-mix(in srgb, var(--accent) 45%, transparent);
      background: color-mix(in srgb, var(--accent) 12%, transparent);
      color: var(--accent);
    }
    .sync-banner-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
    .sync-banner-msg { min-width: 0; }
    .sync-banner-btn {
      background: transparent; color: inherit; border: 1px solid currentColor;
      border-radius: var(--r-pill); padding: 4px 14px; font-size: var(--fs-md);
      cursor: pointer; flex-shrink: 0; min-height: var(--control-sm);
    }
    .sync-banner-btn:disabled { opacity: 0.6; cursor: default; }
    .sync-login { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
    .sync-login[hidden] { display: none; }
    .sync-login input {
      background: rgba(0, 0, 0, 0.25); color: var(--ink, inherit);
      border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
      border-radius: var(--r-pill); padding: 4px 12px; font-size: var(--fs-md);
      min-width: 0; flex: 1 1 130px; min-height: var(--control-sm);
    }
    .sync-login input[hidden] { display: none; }
    .sync-banner-status { font-size: var(--fs-sm, 12px); opacity: 0.9; }
    .sync-banner-status[hidden] { display: none; }
    .move-status { color: var(--accent); font-size: var(--fs-md); margin: var(--sp-2) 0; }
    .move-status button, .undo-toast button { margin-left: 8px; }
    /* preview */
    .steps { list-style: none; margin: 0; padding: 0; }
    .steps li {
      display: flex; align-items: baseline; gap: 10px;
      padding: var(--sp-2) 10px; border-radius: var(--r-sm); border: 1px solid transparent;
    }
    .steps li + li { margin-top: 2px; }
    .steps li.depth-1 { margin-left: 22px; }
    .steps li .lab { font-weight: 600; font-size: var(--fs-md); min-width: 92px; }
    .steps li .det { font-family: var(--mono); font-size: var(--fs-sm); color: var(--muted); }
    .steps li[data-kind="repeat"] { background: var(--surface-soft); }
    .steps li[data-kind="warmup"] .lab { color: var(--step-warmup); }
    .steps li[data-kind="cooldown"] .lab { color: var(--step-cooldown); }
    .steps li[data-kind="interval"] .lab { color: var(--step-interval); }
    .steps li[data-kind="recovery"] .lab,
    .steps li[data-kind="rest"] .lab { color: var(--step-recovery); }
    .json-head { display: flex; align-items: center; justify-content: space-between; }
    .json-head h2 { align-items: center; display: flex; gap: var(--sp-2); min-width: 0; overflow-wrap: anywhere; }
    button.ghost {
      background: color-mix(in srgb, var(--surface-soft) 55%, transparent);
      color: var(--muted); border: 1px solid var(--glass-line);
      border-radius: var(--r-pill); padding: 7px 13px; font-size: var(--fs-xs); cursor: pointer; min-height: var(--control-sm);
    }
    button.ghost:hover { color: var(--accent); border-color: var(--accent); }
    pre {
      margin: var(--sp-3) 0 0; background: var(--surface-soft); border: 1px solid var(--line);
      border-radius: var(--r-md); padding: 14px; overflow-x: auto; font-size: var(--fs-sm);
      font-family: var(--mono); max-height: 420px;
    }
    .placeholder { color: var(--muted); font-size: var(--fs-md); min-height: var(--control-md); display: grid; align-content: center; }
    footer { margin-top: 32px; color: var(--muted); font-size: var(--fs-sm); }
    footer a { color: var(--accent); text-decoration: none; }
    details { margin-top: 18px; }
    summary { cursor: pointer; color: var(--muted); font-size: var(--fs-md); }
    table.grammar { border-collapse: collapse; width: 100%; margin-top: var(--sp-3); font-size: var(--fs-sm); }
    table.grammar td { border-top: 1px solid var(--line); padding: 7px 8px; vertical-align: top; }
    table.grammar td:first-child { font-family: var(--mono); color: var(--accent); white-space: nowrap; }
    /* PIN gate */
    .gate { position: fixed; inset: 0; z-index: 50;
      background: color-mix(in srgb, var(--bg) 72%, transparent);
      backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
      display: flex; align-items: center; justify-content: center; padding: var(--sp-5); }
    .gate[hidden] { display: none; }
    .gate-box { background: var(--glass-strong); border: 1px solid var(--glass-line);
      backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
      border-radius: var(--r-xl); padding: var(--sp-6) var(--sp-5); width: 100%; max-width: 320px; text-align: center; }
    .gate-mark { display: block; width: 44px; height: 44px; border-radius: var(--r-md); margin: 0 auto var(--sp-3); }
    .gate-msg { color: var(--muted); font-size: var(--fs-md); margin: var(--sp-2) 0 0; }
    .gate-msg.err { color: var(--danger); }
    .gate-box input { margin: var(--sp-4) 0; text-align: center; letter-spacing: 0.4em; font-size: var(--fs-xl); }
    .gate-box button { width: 100%; }
    .day-title { color:var(--muted); font-size:13px; font-weight:500; margin-top:1px; }
    .day-title[hidden] { display:none; }
    .week-strip { display:grid; grid-template-columns:repeat(7, 1fr); gap:5px; margin-top:var(--sp-3); transition:opacity var(--dur) var(--ease-standard), visibility var(--dur) var(--ease-standard), max-height var(--dur) var(--ease-standard), margin var(--dur) var(--ease-standard); max-height:120px; }
    .week-day { display:grid; gap:4px; justify-items:center; min-height:var(--week-cell-height); padding:9px 0 8px; background:color-mix(in srgb, var(--surface-soft) 55%, transparent); border:1px solid transparent; border-radius:var(--r-lg); color:var(--text); cursor:pointer; }
    .week-day .wd-name { font-size:var(--fs-micro); font-weight:600; color:var(--muted); }
    .week-day .wd-num { font-size:var(--fs-lg); font-weight:700; font-variant-numeric:tabular-nums; }
    .week-day.is-today .wd-num { color:var(--accent); }
    .week-day.is-selected { border-color:var(--accent); background:color-mix(in srgb, var(--surface-raised) 72%, transparent); }
    .week-day.move-target { border-color:color-mix(in srgb, var(--accent) 55%, transparent); border-style:dashed; }
    .wd-dot { width:8px; height:8px; margin-top:1px; border-radius:50%; background:transparent; border:1.5px solid color-mix(in srgb, var(--muted) 50%, transparent); box-sizing:border-box; }
    .wd-dot.is-planned, .wd-dot.is-done { background:var(--accent); border:0; }
    .wd-dot.is-done { box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent); }
    .wd-dot.is-missed { background:var(--danger); border:0; opacity:.85; }
    .wd-dot.is-lg { width:10px; height:10px; margin-top:0; }
    .week-dot-loading { background:var(--surface-soft); border-color:transparent; animation:pulse var(--dur-skeleton) var(--ease-standard) infinite; }
    .week-focus { --today-row-height:104px; --today-row-gap:12px; min-height:calc(var(--today-row-height) * 2 + var(--today-row-gap)); }
    .train-plan-ribbon {
      display:block; width:100%; margin:0 0 18px; overflow:hidden; padding:11px 14px;
      background:var(--glass); border:1px solid var(--glass-line); border-radius:14px;
      color:var(--text); font:600 13px var(--sans); text-align:left; text-overflow:ellipsis;
      white-space:nowrap; cursor:pointer;
    }
    .train-plan-ribbon:hover { border-color:var(--accent); color:var(--accent); }
    .week-session .today-viz { margin:8px 0 6px; }
    /* Row actions are secondary: quiet, auto-width, never competing with the session itself. */
    .focus-actions { display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-2); }
    .focus-actions button { background:transparent; border:1px solid var(--line); border-radius:var(--r-pill); color:var(--muted); flex:0 0 auto; font-size:var(--fs-sm); font-weight:600; min-height:var(--control-compact); padding:0 14px; }
    .focus-actions button:hover { border-color:color-mix(in srgb, var(--accent) 55%, transparent); color:var(--text); }
    .focus-actions button.primary { background:color-mix(in srgb, var(--accent) 16%, transparent); border-color:color-mix(in srgb, var(--accent) 42%, transparent); color:var(--accent); }
    button.focus-add { background:transparent; border:0; color:var(--faint); display:inline-flex; align-items:center; font-size:var(--fs-sm); font-weight:600; margin-top:var(--sp-1); min-height:var(--control-compact); padding:0; position:relative; width:auto; }
    button.focus-add:hover { color:var(--accent); border-color:transparent; }
    /* The label stays on the rest-day line, but the tap area is a full-size control. */
    button.focus-add::after { content:""; position:absolute; inset:-8px -10px; }
    .today-session-badge.badge-missed { background:color-mix(in srgb, var(--danger) 14%, transparent); border-color:color-mix(in srgb, var(--danger) 40%, transparent); color:var(--danger); }
    .library-list { display:grid; gap:var(--sp-2); min-height:calc(var(--library-item-height, 58px) * 3 + var(--sp-2) * 2); max-height:360px; overflow:auto; }
    .library-item { display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid var(--line); padding:8px 0; }
    .library-item:last-child { border-bottom:0; }
    .library-item .meta { color:var(--muted); font-size:12px; }
    .undo-toast { position:fixed; right:16px; bottom:var(--tabbar-space); z-index:40; background:var(--surface-raised); color:var(--text); border:1px solid var(--line); border-radius:16px; padding:12px 14px; backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); box-shadow:0 12px 30px -16px rgba(0,0,0,.9); }
    .undo-toast[hidden] { display:none; }
    .section-card { margin-bottom:18px; }
    .plan-hero { padding:var(--sp-5) var(--sp-4); }
    .plan-kicker { color:var(--accent); font-size:12px; font-weight:700; letter-spacing:.1em; margin:0 0 4px; text-transform:uppercase; }
    .plan-hero h1 { font-size:clamp(var(--fs-3xl), 7vw, 34px); }
    .plan-storage-note, .plan-muted { color:var(--muted); font-size:13px; margin:12px 0 0; }
    .plan-template-list { display:grid; gap:var(--sp-3); min-height:calc(var(--plan-template-row-height, 66px) * 2 + var(--sp-3)); margin-top:var(--sp-3); }
    .plan-template-row { --plan-template-row-height:66px; align-items:center; background:var(--surface-soft); border:1px solid var(--line); border-radius:var(--r-lg); display:flex; gap:var(--sp-3); justify-content:space-between; min-height:var(--plan-template-row-height); padding:var(--sp-3); }
    .plan-template-row h3 { font-size:var(--fs-lg); margin:0; }
    .plan-template-row p { color:var(--muted); font-size:var(--fs-sm); margin:3px 0 0; }
    .plan-template-weeks { color:var(--accent); font-size:var(--fs-xs); white-space:nowrap; }
    .plan-template-row.is-selected { border-color:var(--accent); box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent) inset; }
    .plan-active[hidden] { display:none; }
    /* A caption for the card below it, not a floating fragment between cards. */
    .plan-phase-line { color:var(--faint); font-size:var(--fs-xs); font-weight:600; margin:0 var(--sp-4) 8px; }
    .plan-current-card, .plan-weeks-card { padding:14px; }
    .plan-session-row { --plan-session-row-height:58px; align-items:center; border-top:1px solid var(--line); display:flex; gap:10px; justify-content:space-between; min-height:var(--plan-session-row-height); padding:10px 0; }
    .plan-session-main { align-items:center; display:flex; gap:9px; min-width:0; }
    .plan-session-main > div { min-width:0; }
    .plan-session-main strong, .plan-session-main span { display:block; overflow-wrap:anywhere; }
    .plan-session-main strong { font-size:14px; }
    .plan-session-main span { color:var(--muted); font-size:12px; margin-top:2px; }
    /* One chip component, four semantic states. */
    .plan-state { background:color-mix(in srgb, #ffffff 5%, transparent); border:1px solid var(--line); border-radius:var(--r-pill); color:var(--muted); flex:0 0 auto; font-size:var(--fs-micro); font-weight:600; padding:3px 9px; white-space:nowrap; }
    .plan-state.is-done { background:color-mix(in srgb, var(--success) 14%, transparent); border-color:color-mix(in srgb, var(--success) 40%, transparent); color:var(--success); }
    .plan-state.is-scheduled { background:color-mix(in srgb, var(--accent) 14%, transparent); border-color:color-mix(in srgb, var(--accent) 40%, transparent); color:var(--accent); }
    .plan-state.is-orphan { background:color-mix(in srgb, var(--flame) 14%, transparent); border-color:color-mix(in srgb, var(--flame) 40%, transparent); color:var(--flame); }
    .plan-session-actions { align-items:center; display:flex; flex:0 0 auto; gap:6px; }
    .plan-restore-button { padding:5px 9px; }
    .plan-session-error { color:var(--danger) !important; display:block; font-size:12px; margin-top:4px; }
    .plan-reconcile-note { border-top:1px solid var(--line); padding:10px 0 0; }
    .plan-week-row { border-top:1px solid var(--line); }
    .plan-week-row summary { align-items:center; display:flex; gap:8px; justify-content:space-between; list-style:none; min-height:56px; padding:8px 0; }
    .plan-week-row summary::-webkit-details-marker { display:none; }
    .plan-week-title { align-items:center; display:flex; gap:8px; white-space:nowrap; }
    .plan-week-title b { border-radius:var(--r-pill); font-size:var(--fs-micro); padding:3px 7px; }
    .phase-base { background:color-mix(in srgb, var(--step-warmup) 18%, transparent); color:var(--step-warmup); }
    .phase-build { background:color-mix(in srgb, var(--step-interval) 18%, transparent); color:var(--step-interval); }
    .phase-peak { background:color-mix(in srgb, var(--step-recovery) 18%, transparent); color:var(--step-recovery); }
    .phase-taper { background:color-mix(in srgb, var(--step-cooldown) 18%, transparent); color:var(--step-cooldown); }
    .plan-week-summary { color:var(--muted); font-size:11px; line-height:1.25; max-height:2.5em; overflow:hidden; text-align:right; text-overflow:ellipsis; white-space:normal; }
    .plan-week-detail { padding:0 8px 8px; }
    .plan-week-detail .plan-session-row:first-child { border-top:0; }
    .plan-dots { display:inline-flex; gap:3px; margin-left:7px; vertical-align:middle; }
    .plan-dot { background:var(--line); border-radius:50%; display:inline-block; height:6px; width:6px; }
    .plan-dot.is-done { background:var(--success); }
    .plan-setup { border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; padding-top:14px; }
    .plan-setup .field { flex:1 1 170px; }
    .plan-setup input { width:100%; }
    .plan-status { color:var(--muted); font-size:13px; margin-top:8px; width:100%; }
    .plan-preview, .plan-replace-confirm { border-top:1px solid var(--line); margin-top:16px; padding-top:14px; }
    .plan-preview-label { color:var(--accent); font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
    .plan-preview h3 { margin:8px 0 0; }
    .plan-preview-week { border-top:1px solid var(--line); margin-top:12px; padding-top:10px; }
    .plan-preview-week header { align-items:center; display:flex; font-size:12px; justify-content:space-between; gap:8px; }
    .plan-preview-week header b { border-radius:999px; font-size:10px; padding:3px 7px; }
    .plan-preview-session { align-items:center; border-top:1px solid var(--line); display:flex; font-size:12px; justify-content:space-between; gap:8px; padding:7px 0; }
    .plan-preview-session span:last-child { color:var(--muted); white-space:nowrap; }
    .plan-preview-start { margin-top:14px; width:100%; }
    .plan-replace-confirm { color:var(--muted); font-size:13px; }
    .plan-replace-confirm p { margin:0 0 10px; }
    .plan-replace-confirm strong { color:var(--text); }
    .plan-schedule-actions { border-top:1px solid var(--line); margin-top:8px; padding-top:12px; }
    .plan-session-error { color:var(--danger, #f08a8a); display:block; font-size:12px; font-style:normal; margin-top:4px; }
    .plan-error { color:var(--danger, #f08a8a); font-size:13px; }
    .section-title { margin:0; }
    .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
    .field-sport { flex:0 1 180px; }
    .field-date { flex:0 1 160px; }
    .row-tools { margin:0; align-items:center; flex:0 1 auto; }
    .date-control { width:auto !important; min-width:145px; }
    @media (max-width:520px) {
      #planLibrary .json-head { align-items:center; flex-wrap:wrap; gap:8px; }
      #planLibrary .json-head > h2 { flex:0 0 auto; white-space:nowrap; overflow-wrap:normal; }
      #planLibrary .row-tools { flex:1 1 100%; width:100%; flex-wrap:wrap; justify-content:flex-start; }
    }
    .action-row { align-items:center; margin-bottom:10px; }
    button.secondary { background:var(--surface-soft); color:var(--text); border:1px solid var(--line); min-height:var(--control-md); }
    .mfa-box { margin-bottom:12px; }
    .tight-row { margin-bottom:0; }
    .mfa-input { max-width:140px; letter-spacing:.3em; }
    .push-status { font-size:14px; color:var(--muted); margin-top:6px; }
    .build-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:4px 0 12px; }
    .mode-switch { display:inline-flex; border:1px solid var(--glass-line); border-radius:999px; padding:3px; background:var(--surface-soft); }
    .mode-switch label { cursor:pointer; }
    .mode-switch input { position:absolute; opacity:0; pointer-events:none; }
    .mode-switch span { display:block; border-radius:var(--r-pill); color:var(--muted); min-height:var(--control-sm); padding:8px 14px; font-size:var(--fs-sm); }
    .mode-switch input:checked + span { background:var(--accent); color:var(--accent-ink); font-weight:600; }
    .builder-list { display:grid; gap:10px; }
    .builder-step { border:1px solid var(--glass-line); border-radius:var(--r-md); background:color-mix(in srgb, var(--surface-soft) 55%, transparent); padding:11px; }
    .builder-step-head { display:flex; align-items:center; gap:7px; margin-bottom:9px; }
    .builder-step-head > select { flex:1; min-width:0; }
    .icon-button { min-width:var(--control-md); min-height:var(--control-md); padding:5px 8px; border:1px solid var(--glass-line); border-radius:var(--r-sm); background:transparent; color:var(--muted); cursor:pointer; font-size:var(--fs-xl); }
    .icon-button:hover { color:var(--accent); border-color:var(--accent); }
    .danger-button:hover { color:var(--danger); border-color:var(--danger); }
    .builder-control { display:flex; flex-direction:column; gap:4px; color:var(--muted); font-size:11px; }
    .builder-control input { min-width:64px; }
    .measure-editor, .target-editor { display:flex; align-items:end; gap:8px; margin-top:8px; }
    .measure-editor input { flex:1; min-width:0; }
    .measure-editor select { width:92px; }
    .target-editor > select { flex:0 1 130px; }
    .target-fields { display:flex; gap:7px; flex:1; }
    .target-fields .builder-control { flex:1; }
    .builder-children { display:grid; gap:8px; border-left:2px solid var(--line); margin:2px 0 8px 8px; padding-left:10px; }
    .builder-add-row { display:flex; flex-wrap:wrap; gap:7px; margin-top:11px; }
    .builder-add-row button, .builder-add-child { min-height:var(--control-md); }
    .builder-note { color:var(--muted); font-size:12px; margin:8px 0 0; }
    .import-dialog { width:min(560px, calc(100vw - 28px)); max-height:calc(100vh - 32px); padding:var(--sp-5); border:1px solid var(--glass-line); border-radius:var(--r-xl); background:var(--surface-raised); color:var(--text); }
    .import-dialog::backdrop { background:rgba(0,0,0,.65); backdrop-filter:blur(5px); }
    .import-dialog h3 { font-size:var(--fs-md); margin:var(--sp-5) 0 var(--sp-2); }
    .import-library { display:grid; gap:7px; max-height:180px; overflow:auto; }
    .import-library-item { border:1px solid var(--line); background:var(--surface-soft); color:var(--text); border-radius:var(--r-sm); padding:11px; text-align:left; cursor:pointer; min-height:var(--control-md); }
    .import-library-item:hover { border-color:var(--accent); color:var(--accent); }
    .import-json { min-height:130px; width:100%; }
    .import-dialog form { margin:0; }
    .add-sheet {
      inset:auto auto 0 50%; bottom:0; left:50%; position:fixed; top:auto; transform:translateX(-50%);
      width:min(620px, 100%); max-height:min(78vh, 680px);
      margin:0; padding:var(--sp-4) max(var(--sp-4), env(safe-area-inset-right)) calc(var(--sp-4) + env(safe-area-inset-bottom)) max(var(--sp-4), env(safe-area-inset-left));
      border:1px solid var(--glass-line); border-bottom:0; border-radius:var(--r-xl) var(--r-xl) 0 0;
      background:var(--surface-raised); color:var(--text); box-shadow:0 -16px 40px rgba(0,0,0,.45); overflow:hidden; animation:add-sheet-in var(--dur) var(--ease-standard);
    }
    @keyframes add-sheet-in { from { opacity:0; transform:translate(-50%, 24px); } to { opacity:1; transform:translate(-50%, 0); } }
    .add-sheet::backdrop { background:rgba(0,0,0,.65); backdrop-filter:blur(5px); }
    .add-sheet-head { align-items:center; display:flex; justify-content:space-between; gap:12px; }
    .add-sheet-head h2 { font-size:var(--fs-2xl); line-height:1.25; margin:0; }
    .add-sheet-list { max-height:calc(78vh - 150px); overflow:auto; padding:4px 2px; }
    .add-sheet-list .catalog-tabs { margin-top:8px; }
    .add-sheet-new {
      align-items:flex-start; background:var(--surface-soft); border:1px solid var(--accent);
      border-radius:var(--r-md); color:var(--text); cursor:pointer; display:flex; flex-direction:column;
      gap:3px; margin-top:10px; padding:12px; text-align:left; width:100%;
    }
    .add-sheet-new span { color:var(--muted); font-size:12px; }
    .add-sheet-new:hover { color:var(--accent); }
    .lift-sheet { max-height:min(88vh, 760px); }
    .lift-sheet input[type=number], .lift-sheet input[type=search] {
      background:color-mix(in srgb, var(--surface-soft) 70%, transparent); border:1px solid var(--glass-line);
      border-radius:var(--r-md); color:var(--text); font-size:16px; min-height:var(--control-md); padding:11px var(--sp-3);
    }
    .lift-sheet-head { align-items:flex-start; }
    .lift-session-name { color:var(--muted); font-size:var(--fs-sm); margin:3px 0 0; }
    .lift-head-actions, .lift-toolbar, .lift-actions { align-items:center; display:flex; gap:8px; }
    .lift-toolbar { justify-content:space-between; margin:10px 0 4px; min-height:var(--control-md); }
    .lift-entries { max-height:calc(88vh - 260px); overflow:auto; padding:4px 0; }
    .lift-entry { border-top:1px solid var(--line); padding:12px 0; }
    .lift-entry:first-child { border-top:0; }
    .lift-entry-head { align-items:flex-start; display:flex; gap:10px; justify-content:space-between; }
    .lift-entry-head h3 { font-size:var(--fs-lg); margin:0; }
    .lift-entry-head p { color:var(--muted); font-size:var(--fs-sm); margin:3px 0 0; }
    .lift-sets { display:grid; gap:7px; margin:10px 0; }
    .lift-set { align-items:center; display:grid; gap:6px; grid-template-columns:58px minmax(130px, 1fr) auto 32px; }
    .lift-set input { box-sizing:border-box; min-height:var(--control-md); min-width:0; width:100%; }
    .lift-weight-control { align-items:center; display:flex; gap:3px; min-width:0; }
    .lift-weight-control .lift-weight { text-align:center; }
    .lift-step { font-size:var(--fs-xl); min-height:var(--control-md); padding:0 7px; }
    .lift-done { align-items:center; box-sizing:border-box; color:var(--muted); display:flex; font-size:var(--fs-sm); gap:6px; min-height:var(--control-md); min-width:56px; padding:0 8px; white-space:nowrap; }
    .lift-done-input { accent-color:var(--accent); height:24px !important; min-height:24px !important; width:24px !important; }
    .lift-remove, .lift-remove-entry { color:var(--muted); min-height:var(--control-md); }
    .lift-exercise-search { border-top:1px solid var(--line); margin-top:10px; padding-top:10px; }
    .lift-search { width:100%; }
    .lift-exercise-options { display:grid; gap:5px; margin-top:7px; max-height:150px; overflow:auto; }
    .lift-exercise-option { text-align:left; width:100%; }
    .lift-footer { border-top:1px solid var(--line); margin-top:8px; padding-top:10px; }
    .lift-total { color:var(--muted); font-size:var(--fs-sm); line-height:1.5; }
    .lift-total strong { color:var(--text); font-size:var(--fs-lg); }
    .lift-prs { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
    .lift-pr { background:color-mix(in srgb, var(--accent) 16%, transparent); border:1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius:var(--r-pill); color:var(--accent); font-size:var(--fs-micro); padding:2px 7px; }
    .lift-stats { margin-top:var(--sp-4); }
    .lift-stat-list { display:grid; gap:8px; margin-top:12px; }
    .lift-stat-row { border-top:1px solid var(--line); display:grid; gap:3px; padding-top:8px; }
    .lift-stat-row span { color:var(--muted); font-size:var(--fs-sm); }
    @media (max-width:520px) {
      .lift-set { grid-template-columns:54px minmax(105px, 1fr) auto 28px; }
      .lift-done { font-size:0; min-width:40px; padding:0 8px; }
    }
    #jsonToggle[aria-pressed="true"] { color:var(--accent); border-color:var(--accent); }
    /* Top chrome spans the viewport like the tabbar, so scrolled content passes under an
       edge rather than behind a floating card. */
    .app-bar {
      position:fixed; z-index:20; top:0; left:0; right:0;
      display:flex; flex-direction:column;
      gap:0; padding:calc(10px + env(safe-area-inset-top)) max(14px, env(safe-area-inset-left)) 10px max(14px, env(safe-area-inset-right));
      background:color-mix(in srgb, var(--bg) 97%, transparent);
      border-bottom:1px solid var(--line-soft);
      backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
      opacity:0; visibility:hidden; pointer-events:none;
      transition:opacity var(--dur) var(--ease-standard), visibility var(--dur) var(--ease-standard), padding var(--dur) var(--ease-standard), gap var(--dur) var(--ease-standard);
    }
    body[data-tab="week"] .train-bar { opacity:1; visibility:visible; pointer-events:auto; }
    body[data-tab="plan"] .train-bar { display:none; opacity:0; visibility:hidden; pointer-events:none; transition:none; }
    .app-bar > * { margin-left:auto; margin-right:auto; max-width:960px; width:100%; }
    body[data-tab="week"] .wrap {
      /* --bar-h is measured from the rendered bar, so it already covers the safe-area inset. */
      padding-top:calc(var(--bar-h, calc(var(--bar-pad-block) + var(--fs-2xl) * 1.5 + var(--fs-sm) * 1.5 + 1px + var(--sp-3) + var(--week-cell-height) + 2px + env(safe-area-inset-top))) + var(--sp-3));
    }
    .today-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; touch-action:pan-y; }
    .today-heading-main { flex:1; min-width:0; text-align:center; }
    .day-arrow { background:var(--surface-soft); border:1px solid var(--line); border-radius:var(--r-pill); color:var(--text); flex:0 0 auto; font-size:var(--fs-2xl); line-height:1; height:var(--control-md); width:var(--control-md); padding:0; }
    .day-arrow:hover { border-color:var(--accent); color:var(--accent); }
    .day-jump[hidden] { display:none; }
    .day-jump { align-items:center; display:inline-flex; justify-content:center; }
    .day-jump svg { fill:none; height:17px; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; width:17px; }
    .today-session-badge { background:color-mix(in srgb, var(--accent) 16%, transparent); border:1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius:var(--r-pill); color:var(--accent); font-size:var(--fs-micro); font-weight:600; padding:2px 8px; position:absolute; right:0; top:0; white-space:nowrap; }
    .today-heading h2 { margin:0; font-size:clamp(var(--fs-2xl), 5vw, var(--fs-3xl)); letter-spacing:-.03em; color:var(--text); text-transform:none; }
    .skeleton { background:var(--surface-soft); animation:pulse var(--dur-skeleton) var(--ease-standard) infinite; }
    .skeleton-line { display:block; border-radius:var(--r-sm); height:var(--skeleton-line-height, 14px); }
    .skeleton-block { border-radius:var(--r-sm); min-height:var(--skeleton-block-height, 28px); }
    .skeleton-row { display:grid; gap:var(--sp-2); min-height:var(--skeleton-row-height, var(--today-row-height)); }
    .today-skeleton { display:grid; gap:10px; }
    .today-skeleton span { display:block; height:14px; border-radius:var(--r-sm); background:var(--surface-soft); animation:pulse var(--dur-skeleton) var(--ease-standard) infinite; }
    .today-skeleton span:nth-child(1) { width:55%; }
    .today-skeleton span:nth-child(2) { width:90%; height:28px; }
    .today-skeleton span:nth-child(3) { width:75%; }
    .week-focus-skeleton { min-height:calc(var(--today-row-height) * 2 + var(--today-row-gap)); }
    .week-focus-skeleton span { width:100%; }
    .today-session { box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; min-height:var(--today-row-height); padding:10px 0; }
    .today-session + .today-session { border-top:1px solid var(--line); margin-top:var(--today-row-gap); padding-top:calc(10px + var(--today-row-gap)); }
    .today-session-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; position:relative; }
    .today-session-head.has-badge { padding-right:88px; }
    .today-session-name { align-items:center; display:flex; font-size:var(--fs-xl); font-weight:700; gap:var(--sp-2); min-width:0; overflow-wrap:anywhere; }
    .today-sport-icon { color:var(--accent); display:inline-flex; flex:0 0 auto; height:20px; width:20px; }
    .today-sport-icon svg { fill:none; height:100%; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; width:100%; }
    .today-session-meta { color:var(--muted); font-size:var(--fs-sm); white-space:nowrap; }
    .today-viz { display:flex; align-items:center; gap:1px; height:34px; margin:8px 0 6px; min-width:0; overflow:hidden; }
    .viz-block { align-items:center; background:var(--step-rest); border:0; border-radius:4px; cursor:help; display:flex; height:var(--block-height, 34%); justify-content:center; min-width:2px; overflow:hidden; padding:0; position:relative; transition:filter var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); }
    .viz-block:hover, .viz-block:focus-visible { filter:brightness(1.18); outline:2px solid var(--text); outline-offset:2px; transform:translateY(-2px); z-index:1; }
    .viz-block[data-kind="warmup"] { background:var(--step-warmup); }
    .viz-block[data-kind="interval"] { background:var(--step-interval); }
    .viz-block[data-kind="recovery"], .viz-block[data-kind="rest"] { background:var(--step-recovery); }
    .viz-block[data-kind="cooldown"] { background:var(--step-cooldown); }
    .today-empty { align-content:center; color:var(--muted); display:grid; font-size:var(--fs-lg); min-height:calc(var(--today-row-height) * 2 + var(--today-row-gap)); padding:12px 0 4px; }
    .today-empty strong { color:var(--text); display:block; font-size:var(--fs-2xl); margin-bottom:4px; }
    .week-card { padding:12px 14px 14px; }
    .agenda { display:grid; gap:0; }
    .agenda-week-header { padding:12px 14px 8px; }
    .agenda-week-header .week-summary { align-items:center; display:flex; gap:8px; margin:0; min-height:0; padding:6px 0; }
    .agenda-week-header .week-summary-title { flex:1; min-width:0; }
    .agenda-week-header .week-summary-title h2 { color:var(--muted); font-size:var(--fs-xs); font-weight:600; letter-spacing:.08em; line-height:1.2; margin:0; overflow:hidden; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
    .agenda-week-header .week-summary-flame { height:24px; width:20px; }
    .agenda-week-header .week-summary-flame svg { height:27px; margin:-3px 0; width:23px; }
    .agenda-day { padding:0 14px 14px; scroll-margin-top:calc(var(--bar-h, 180px) + 8px); }
    .agenda-day-heading { align-items:center; border-top:1px solid var(--line-soft); color:var(--muted); display:flex; font-size:var(--fs-md); font-weight:600; gap:8px; justify-content:space-between; letter-spacing:-.01em; margin:0; padding:16px 0 6px; }
    .agenda-day-heading.is-today { color:var(--accent); }
    .agenda-day.is-active .agenda-day-heading { color:var(--text); }
    .agenda-day.is-active .agenda-day-heading.is-today { color:var(--accent); }
    /* Rest days stay one quiet line so real sessions carry the page. */
    .agenda-day .today-empty { color:var(--faint); display:block; font-size:var(--fs-md); min-height:0; padding:0 0 6px; }
    .agenda-day .today-empty strong { color:var(--muted); display:inline; font-size:var(--fs-md); font-weight:600; margin-right:6px; }
    .agenda-day .focus-add { margin-top:0; }
    /* An open future day stays a single row: the rest line and its one affordance share it. */
    .agenda-day .today-empty-open { align-items:baseline; display:flex; gap:var(--sp-3); justify-content:space-between; }
    .agenda-day .today-empty-open > span { min-width:0; }
    .agenda-day .today-empty-open .focus-add { white-space:nowrap; }
    .week-summary { min-height:calc(var(--control-md) * 3 + var(--sp-6)); padding:14px; }
    .week-summary[hidden] { display:none; }
    .week-summary-flame { display:flex; flex:0 0 auto; height:32px; width:26px; }
    .week-summary-flame svg { display:block; height:36px; margin:-5px 0 -3px; width:30px; }
    .week-summary-rows { display:grid; gap:8px; margin-top:12px; }
    .week-summary-row { align-items:baseline; border-top:1px solid var(--line); display:grid; gap:4px 10px; grid-template-columns:1fr auto; padding-top:8px; }
    .week-summary-row strong { font-size:var(--fs-md); }
    .week-summary-value { font-variant-numeric:tabular-nums; font-weight:600; text-align:right; }
    .week-summary-dots { display:block; }
    /* streaks + training log */
    .week-summary-title { flex:1; min-width:0; }
    .card .stats-title { color:var(--text); font-size:var(--fs-xl); letter-spacing:-.01em; margin:0; text-transform:none; }
    .streak-count { fill:var(--bg); font-family:var(--sans); font-weight:800; }
    /* Equal cells so each dot sits under its day label, despite dots differing in size. */
    .log-dots { display:grid; grid-template-columns:repeat(7, 1fr); align-items:center; justify-items:center; min-height:22px; }
    .log-dot { border-radius:50%; display:block; flex:0 0 auto; }
    .log-dot-done { width:var(--dot-size, 14px); height:var(--dot-size, 14px);
      background:color-mix(in srgb, var(--accent) var(--dot-fill, 100%), var(--surface-soft)); }
    .log-dot-rest { width:6px; height:6px; background:var(--line); }
    .log-dot-future { width:6px; height:6px; background:color-mix(in srgb, var(--line) 45%, transparent); }
    .insight-detail { border-top:1px solid var(--line); display:grid; gap:8px; padding-top:12px; }
    .insight-detail[hidden] { display:none; }
    .insight-stat { display:flex; align-items:baseline; justify-content:space-between; gap:10px; color:var(--muted); font-size:13px; }
    .insight-stat strong { color:var(--text); font-variant-numeric:tabular-nums; }
    .log-trend { align-items:flex-end; display:flex; gap:5px; height:56px; }
    .log-bar { background:color-mix(in srgb, var(--accent) 45%, var(--surface-raised)); border-radius:3px; flex:1; }
    .log-bar:last-child { background:var(--accent); }
    .insight-caption { color:var(--muted); font-size:12px; margin:0; }
    /* Charts carry their own scale: a title, the peak value, and the range they cover. */
    .chart { display:grid; gap:6px; }
    .chart-head { align-items:baseline; display:flex; gap:var(--sp-3); justify-content:space-between; }
    .chart-title { color:var(--muted); font-size:var(--fs-xs); font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
    .chart-peak, .chart-axis { color:var(--faint); font-size:var(--fs-xs); font-variant-numeric:tabular-nums; }
    .chart-axis { display:flex; justify-content:space-between; }
    .log-day-labels { color:var(--faint); display:flex; font-size:var(--fs-micro); justify-content:space-between; margin-top:4px; }
    .log-day-labels span { flex:1; text-align:center; }
    .week-summary-dots .chart-title { display:block; margin-bottom:6px; }
    /* Lifts is a section of the stats sheet, not a card floating inside another card. */
    #statsContent .lift-stats { background:transparent; border:0; border-radius:0; border-top:1px solid var(--line); margin-top:var(--sp-4); padding:var(--sp-4) 0 0; }
    /* Readiness is a long sentence of values, so it gets the full width instead of a cramped column. */
    .week-summary-row.is-stacked { grid-template-columns:1fr; }
    .week-summary-row.is-stacked .week-summary-value { text-align:left; }
    @keyframes pulse { 50% { opacity:.45; } }
    @media (min-width: 701px) {
      .wrap { padding-top:48px; }
    }
    @media (max-width: 700px) {
      .wrap { padding:calc(46px + env(safe-area-inset-top)) 14px var(--tabbar-space); }
      .week-day { min-height:64px; }
      .row-tools { width:100%; }
      .row-tools .date-control { flex:1; min-width:0; }
      .today-session-head { display:block; }
      .today-session-meta { display:block; margin-top:3px; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
    }