:root {
    color-scheme: light;
    --color-bg: #f2f5ec;
    --color-surface: #ffffff;
    --color-surface-soft: #e6eadf;
    --color-surface-strong: #e6eadf;
    --color-text: #0e1110;
    --color-muted: #4d554c;
    --color-faint: #4d554c;
    --color-border: #d5dacb;
    --color-border-strong: #d5dacb;
    --color-accent: #7cc000;
    --color-accent-strong: #3f7a00;
    --color-accent-text: #3f7a00;
    --color-accent-soft: #e6eadf;
    --color-primary: #c6f432;
    --color-on-primary: #0e1110;
    --color-danger: #b3321a;
    --color-danger-soft: color-mix(in srgb, var(--color-danger) 10%, var(--color-surface));
    --color-warning: #3f7a00;
    --color-warning-soft: #e6eadf;
    --color-graphite: #0e1110;
    --color-paper: #f2f5ec;
    --color-backdrop: rgb(14 17 16 / 68%);
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: calc(var(--space-4) + var(--space-1));
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: calc(var(--space-8) + var(--space-2));
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: calc(var(--space-16) + var(--space-4));
    --size-hairline: 1px;
    --size-focus: 3px;
    --size-icon: 1.25rem;
    --size-touch: 3rem;
    --size-control: 3rem;
    --size-header: calc(var(--space-16) + var(--space-8) + var(--space-2));
    --size-brand: 10rem;
    --size-brand-header: 8.75rem;
    --size-brand-loader: 11.25rem;
    --duration-boot-fade: 200ms;
    --color-boot-muted: #a3ab9f;
    --size-secret: 8rem;
    --size-sr: 1px;
    --size-day-card: 16rem;
    --width-content: 76rem;
    --width-login: 28rem;
    --width-modal: 34rem;
    --width-copy: 46rem;
    --font-family: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-display: "Unbounded", "Arial Black", system-ui, sans-serif;
    --font-xs: 0.75rem;
    --font-sm: 0.875rem;
    --font-md: 1rem;
    --font-lg: 1.125rem;
    --font-xl: 1.5rem;
    --font-2xl: 3rem;
    --font-3xl: 2.25rem;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 600;
    --line-tight: 1;
    --line-title: 1.25;
    --line-body: 1.5;
    --line-h1: 2.625rem;
    --line-h2: 1.875rem;
    --line-h3: 1.5rem;
    --line-sm: 1.25rem;
    --line-label: 1rem;
    --line-button: 1.25rem;
    --line-metric: 3rem;
    --tracking-wide: 0.06em;
    --tracking-title: -0.01em;
    --tracking-subtitle: 0;
    --radius-sm: 0.5rem;
    --radius-md: 0.875rem;
    --radius-lg: 1.375rem;
    --radius-xl: 1.375rem;
    --radius-pill: 999px;
    --transition-fast: 140ms ease;
    --transition-normal: 220ms ease;
    --duration-pulse: 1.4s;
    --duration-reduced: 1ms;
    --opacity-disabled: 0.5;
    --opacity-pulse: 0.55;
    --grid-min: 17rem;
    --history-meta-min: 7rem;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --color-bg: #0e1110;
    --color-surface: #171b19;
    --color-surface-soft: #1f2522;
    --color-surface-strong: #1f2522;
    --color-text: #f2f5ec;
    --color-muted: #a3ab9f;
    --color-faint: #a3ab9f;
    --color-border: #2c322d;
    --color-border-strong: #2c322d;
    --color-accent: #c6f432;
    --color-accent-strong: #c6f432;
    --color-accent-text: #c6f432;
    --color-accent-soft: #1f2522;
    --color-danger: #ff8a6e;
    --color-danger-soft: color-mix(in srgb, var(--color-danger) 12%, var(--color-surface));
    --color-warning: #c6f432;
    --color-warning-soft: #1f2522;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        color-scheme: dark;
        --color-bg: #0e1110;
        --color-surface: #171b19;
        --color-surface-soft: #1f2522;
        --color-surface-strong: #1f2522;
        --color-text: #f2f5ec;
        --color-muted: #a3ab9f;
        --color-faint: #a3ab9f;
        --color-border: #2c322d;
        --color-border-strong: #2c322d;
        --color-accent: #c6f432;
        --color-accent-strong: #c6f432;
        --color-accent-text: #c6f432;
        --color-accent-soft: #1f2522;
        --color-danger: #ff8a6e;
        --color-danger-soft: color-mix(in srgb, var(--color-danger) 12%, var(--color-surface));
        --color-warning: #c6f432;
        --color-warning-soft: #1f2522;
    }
}

*, *::before, *::after { box-sizing: border-box; }

html { min-height: 100%; }

body {
    min-height: 100vh;
    margin: var(--space-0);
    background: var(--color-bg);
    color: var(--color-text);
    font: var(--weight-regular) var(--font-md)/var(--line-body) var(--font-family);
    text-rendering: optimizeLegibility;
}

button, input, select, textarea { font: inherit; }
button { color: inherit; }
[hidden] { display: none !important; }

:focus-visible {
    outline: var(--size-focus) solid var(--color-accent-text);
    outline-offset: var(--space-1);
}

.skip-link {
    position: fixed;
    z-index: 100;
    top: var(--space-3);
    left: var(--space-3);
    transform: translateY(-200%);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-text);
    color: var(--color-bg);
}

.skip-link:focus { transform: translateY(var(--space-0)); }

.sr-only {
    position: absolute;
    width: var(--size-sr);
    height: var(--size-sr);
    padding: var(--space-0);
    margin: calc(var(--size-sr) * -1);
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: var(--space-0);
}

.panel {
    border: var(--size-hairline) solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
}

.eyebrow {
    margin: var(--space-0) var(--space-0) var(--space-2);
    color: var(--color-accent-text);
    font-size: var(--font-xs);
    font-weight: var(--weight-bold);
    line-height: var(--line-label);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.heading, .subheading { margin: var(--space-0); font-family: var(--font-display); font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.heading { max-width: var(--width-copy); font-size: var(--font-3xl); line-height: var(--line-h1); letter-spacing: var(--tracking-title); }
.subheading { font-size: var(--font-xl); line-height: var(--line-h2); letter-spacing: var(--tracking-subtitle); }
.muted { color: var(--color-muted); }

.button {
    display: inline-flex;
    min-height: var(--size-touch);
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: var(--size-hairline) solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--font-md);
    font-weight: var(--weight-semibold);
    line-height: var(--line-button);
    text-decoration: none;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.button:hover:not(:disabled) { transform: translateY(calc(var(--size-hairline) * -1)); }
.button:disabled { cursor: not-allowed; opacity: var(--opacity-disabled); }
.button-primary { border-color: var(--color-primary); border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-on-primary); }
.button-primary:hover:not(:disabled) { border-color: var(--color-text); }
.button-secondary { border-color: var(--color-border-strong); background: var(--color-surface); }
.button-secondary:hover:not(:disabled) { border-color: var(--color-accent-text); color: var(--color-accent-text); }
.button-danger { border-color: var(--color-danger); background: var(--color-danger); color: var(--color-surface); }
.button-danger:hover:not(:disabled) { background: var(--color-danger-soft); color: var(--color-danger); }
.button-quiet { min-height: var(--size-touch); padding-inline: var(--space-3); background: transparent; color: var(--color-muted); }
.button-quiet:hover:not(:disabled) { background: var(--color-surface-soft); color: var(--color-text); }
.button-wide { width: 100%; }

.field { display: grid; gap: var(--space-2); }
.field-label { color: var(--color-text); font-size: var(--font-xs); font-weight: var(--weight-semibold); line-height: var(--line-label); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.field-input {
    width: 100%;
    min-height: var(--size-control);
    padding: var(--space-2) var(--space-3);
    border: var(--size-hairline) solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface-soft);
    color: var(--color-text);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.field-input:hover { border-color: var(--color-accent-text); }
.field-input::placeholder { color: var(--color-faint); }
.fieldset { margin: var(--space-0); padding: var(--space-0); border: var(--space-0); }
.check-row { display: flex; min-height: var(--size-touch); align-items: center; gap: var(--space-3); color: var(--color-muted); }
.check-row input { flex: 0 0 var(--size-icon); width: var(--size-icon); height: var(--size-icon); margin: var(--space-0); accent-color: var(--color-primary); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.form-error { margin: var(--space-0); color: var(--color-danger); font-size: var(--font-sm); line-height: var(--line-sm); }

.login-shell {
    display: grid;
    min-height: 100vh;
    align-content: center;
    justify-items: center;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-4);
    background: var(--color-bg);
}
.boot-screen { gap: var(--space-4); background: var(--color-graphite); color: var(--color-paper); opacity: 1; transition: opacity var(--duration-boot-fade) linear; }
.boot-screen--leaving { opacity: 0; }
.boot-content { display: grid; justify-items: center; gap: var(--space-4); }
.boot-logo-animation { display: block; width: var(--size-brand-loader); height: auto; }
.boot-status { margin: var(--space-0); visibility: hidden; color: var(--color-boot-muted); font-size: var(--font-sm); line-height: var(--line-sm); }
.boot-status[data-visible="true"] { visibility: visible; }
.login-brand { padding: var(--space-3); }
.login-brand--boot { padding-bottom: var(--space-0); }
.brand-logo { display: block; width: var(--size-brand); height: auto; }
.brand-button .brand-logo { width: var(--size-brand-header); }
.brand-logo--dark, .brand-icon { display: none; }
:root[data-theme="dark"] .brand-logo--light { display: none; }
:root[data-theme="dark"] .brand-logo--dark { display: block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) .brand-logo--light { display: none; }
    :root:not([data-theme="light"]):not([data-theme="dark"]) .brand-logo--dark { display: block; }
}
.login-card { width: min(100%, var(--width-login)); padding: var(--space-8); }
.login-card > .muted { margin: var(--space-3) var(--space-0) var(--space-8); }
.login-form { display: grid; gap: var(--space-5); }
.session-retry { margin-top: var(--space-5); }

.app-header {
    position: sticky;
    z-index: 20;
    top: var(--space-0);
    border-bottom: var(--size-hairline) solid var(--color-border);
    background: color-mix(in srgb, var(--color-bg) 92%, transparent);
    backdrop-filter: blur(var(--space-3));
}
.header-inner {
    display: flex;
    width: min(100%, var(--width-content));
    min-height: var(--size-header);
    align-items: center;
    gap: var(--space-6);
    margin-inline: auto;
    padding-inline: var(--space-6);
}
.brand-button { padding: var(--space-3); border: var(--space-0); background: transparent; cursor: pointer; }
.primary-nav { display: flex; align-self: stretch; gap: var(--space-1); }
.nav-link {
    position: relative;
    min-height: var(--size-touch);
    padding: var(--space-2) var(--space-3);
    border: var(--space-0);
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
    font-weight: var(--weight-medium);
}
.nav-link::after {
    position: absolute;
    right: var(--space-3);
    bottom: var(--space-0);
    left: var(--space-3);
    height: var(--size-focus);
    border-radius: var(--radius-pill) var(--radius-pill) var(--space-0) var(--space-0);
    background: transparent;
    content: "";
}
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--color-text); }
.nav-link[aria-current="page"]::after { background: var(--color-accent); }
.header-actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.theme-toggle { width: var(--size-touch); flex: 0 0 var(--size-touch); padding: var(--space-0); }
.theme-toggle svg { display: block; width: var(--size-icon); height: var(--size-icon); }

.main-content { width: min(100%, var(--width-content)); margin-inline: auto; padding: var(--space-12) var(--space-6) var(--space-20); }
.page { display: grid; gap: var(--space-12); }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-8); }
.page-intro { max-width: var(--width-login); margin: var(--space-0); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.section-heading > .muted { margin: var(--space-0); font-size: var(--font-sm); line-height: var(--line-sm); }
.summary-section { padding-top: var(--space-2); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min)), 1fr)); gap: var(--space-6); }

.day-card {
    display: grid;
    min-height: var(--size-day-card);
    align-content: space-between;
    gap: var(--space-8);
    padding: var(--space-6);
    border: var(--size-hairline) solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.day-card:hover { border-color: var(--color-accent-text); transform: translateY(calc(var(--space-1) * -1)); }
.day-card-number { color: var(--color-accent-text); font-size: var(--font-xs); font-weight: var(--weight-bold); line-height: var(--line-label); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.day-card h3 { margin: var(--space-2) var(--space-0); font-size: var(--font-lg); line-height: var(--line-h3); }
.exercise-preview { display: grid; gap: var(--space-0); margin: var(--space-5) var(--space-0) var(--space-0); padding: var(--space-0); list-style: none; }
.exercise-preview-item { display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-0); border-top: var(--size-hairline) solid var(--color-border); }
.exercise-preview-item:first-child { padding-top: var(--space-0); border-top: var(--space-0); }
.exercise-preview-item:last-child { padding-bottom: var(--space-0); }
.exercise-preview-name { font-size: var(--font-sm); line-height: var(--line-sm); overflow-wrap: anywhere; }
.exercise-prescriptions { display: grid; gap: var(--space-1); }
.exercise-prescription { color: var(--color-muted); font-size: var(--font-xs); line-height: var(--line-label); overflow-wrap: anywhere; }
.day-card > div:last-child { display: grid; width: 100%; align-self: end; justify-items: start; gap: var(--space-4); }
.day-stats { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.day-stat { padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--color-surface-soft); color: var(--color-muted); font-size: var(--font-sm); line-height: var(--line-sm); }
.day-card .button { justify-self: start; }

.draft-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding: var(--space-5) var(--space-6);
    border: var(--size-hairline) solid var(--color-accent-text);
    border-radius: var(--radius-lg);
    background: var(--color-accent-soft);
}
.draft-banner p { margin: var(--space-1) var(--space-0) var(--space-0); }

.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.metric { display: flex; flex-direction: column; min-width: var(--space-0); padding: var(--space-5); border: var(--size-hairline) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.metric-value { margin: var(--space-0) var(--space-0) var(--space-2); font-family: var(--font-display); font-size: var(--font-2xl); font-weight: var(--weight-medium); line-height: var(--line-metric); overflow-wrap: anywhere; }
.metric-label { margin: auto var(--space-0) var(--space-0); color: var(--color-muted); font-size: var(--font-xs); font-weight: var(--weight-semibold); line-height: var(--line-label); letter-spacing: var(--tracking-wide); text-transform: uppercase; }

.empty-state, .loading-state, .error-state { padding: var(--space-8); border: var(--size-hairline) dashed var(--color-border-strong); border-radius: var(--radius-lg); color: var(--color-muted); text-align: center; }
.card-grid > .empty-state, .card-grid > .loading-state, .card-grid > .error-state,
.metric-grid > .empty-state, .metric-grid > .loading-state, .metric-grid > .error-state { grid-column: 1 / -1; }
.loading-state { animation: pulse var(--duration-pulse) ease-in-out infinite; }
.error-state { border-color: var(--color-danger); background: var(--color-danger-soft); color: var(--color-danger); }
@keyframes pulse { 50% { opacity: var(--opacity-pulse); } }

.history-list { display: grid; gap: var(--space-3); }
.history-card { overflow: clip; border: var(--size-hairline) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.history-summary {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(var(--history-meta-min), 1.4fr) repeat(3, minmax(var(--space-16), 0.7fr)) auto;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    border: var(--space-0);
    background: transparent;
    cursor: pointer;
    text-align: left;
}
.history-summary:hover { background: var(--color-surface-soft); }
.history-date { font-weight: var(--weight-semibold); }
.history-stat { display: grid; gap: var(--space-1); }
.history-stat span:first-child { color: var(--color-muted); font-size: var(--font-xs); line-height: var(--line-label); }
.history-chevron { color: var(--color-accent-text); font-size: var(--font-xl); transition: transform var(--transition-fast); }
.history-summary[aria-expanded="true"] .history-chevron { transform: rotate(45deg); }
.history-details { display: grid; gap: var(--space-4); padding: var(--space-0) var(--space-5) var(--space-5); border-top: var(--size-hairline) solid var(--color-border); }
.history-note { margin: var(--space-4) var(--space-0) var(--space-0); padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-soft); color: var(--color-muted); white-space: pre-wrap; }
.exercise-group { padding-top: var(--space-4); }
.exercise-group h3 { margin: var(--space-0) var(--space-0) var(--space-2); font-size: var(--font-lg); line-height: var(--line-h3); }
.set-row { display: grid; grid-template-columns: minmax(var(--space-16), 1fr) repeat(3, minmax(var(--space-12), auto)); gap: var(--space-3); padding: var(--space-2) var(--space-0); border-top: var(--size-hairline) solid var(--color-border); color: var(--color-muted); font-size: var(--font-sm); line-height: var(--line-sm); }
.set-row strong { color: var(--color-text); }
.set-meta { grid-column: 1 / -1; font-size: var(--font-xs); line-height: var(--line-label); white-space: pre-wrap; overflow-wrap: anywhere; }
.history-facts { display: grid; grid-template-columns: repeat(3, minmax(var(--space-0), 1fr)); gap: var(--space-3); padding-top: var(--space-4); }
.set-skipped { color: var(--color-faint); text-decoration: line-through; }
.load-more-wrap { display: flex; justify-content: center; }

.token-layout { display: grid; grid-template-columns: minmax(var(--grid-min), 0.78fr) minmax(var(--grid-min), 1.22fr); gap: var(--space-8); align-items: start; }
.token-form { display: grid; gap: var(--space-5); padding: var(--space-6); }
.token-form p { margin: var(--space-2) var(--space-0) var(--space-0); }
.token-list-heading { min-height: var(--size-touch); align-items: center; }
.token-list { display: grid; gap: var(--space-3); }
.token-card { display: grid; gap: var(--space-4); padding: var(--space-5); border: var(--size-hairline) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.token-card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.token-name { min-width: var(--space-0); margin: var(--space-0); overflow-wrap: anywhere; font-size: var(--font-lg); line-height: var(--line-h3); }
.token-status { flex-shrink: 0; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--color-bg); color: var(--color-accent-text); font-size: var(--font-xs); font-weight: var(--weight-semibold); line-height: var(--line-label); }
.token-status--inactive { background: var(--color-danger-soft); color: var(--color-danger); }
.token-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.token-meta-item { display: grid; gap: var(--space-1); color: var(--color-muted); font-size: var(--font-sm); line-height: var(--line-sm); }
.token-meta-item strong { color: var(--color-text); font-weight: var(--weight-medium); }
.scope-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.scope-chip { padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--color-surface-soft); color: var(--color-muted); font-size: var(--font-xs); line-height: var(--line-label); }

.modal-backdrop { position: fixed; z-index: 50; inset: var(--space-0); display: grid; place-items: center; padding: var(--space-4); background: var(--color-backdrop); }
.modal-card { width: min(100%, var(--width-modal)); padding: var(--space-6); }
.modal-card > .muted { margin: var(--space-3) var(--space-0) var(--space-5); }
.secret-value { max-height: var(--size-secret); overflow: auto; padding: var(--space-4); border: var(--size-hairline) solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-bg); font: var(--font-sm)/var(--line-body) ui-monospace, monospace; overflow-wrap: anywhere; user-select: all; }
.modal-card .actions { margin-top: var(--space-5); }

.toast-region { position: fixed; z-index: 80; right: var(--space-4); bottom: var(--space-4); display: grid; width: min(calc(100% - var(--space-8)), var(--width-login)); gap: var(--space-2); pointer-events: none; }
.toast { padding: var(--space-3) var(--space-4); border: var(--size-hairline) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); }
.toast--success { border-color: var(--color-accent); }
.toast--error { border-color: var(--color-danger); background: var(--color-danger-soft); }
.toast--warning { border-color: var(--color-warning); background: var(--color-warning-soft); }

.main-content:focus { outline: none; }
.day-card:focus-within { border-color: var(--color-accent-text); }
.token-name, .day-card h3, .exercise-group h3 { font-weight: var(--weight-semibold); overflow-wrap: anywhere; }

/* Экран «День»: мобильная раскладка по умолчанию, шире — сетки. */
.day-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); }
.day-toolbar > .button { flex: 1 1 auto; }
.day-toolbar .button[aria-pressed="true"] { border-color: var(--color-accent-text); color: var(--color-accent-text); }
.day-date-field { flex: 1 1 100%; }
.day-section-heading { align-items: center; }
.day-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); margin-bottom: var(--space-5); }
.day-summary > :nth-child(3) { grid-column: 1 / -1; }
.summary-card .metric-value { font-size: var(--font-xl); line-height: var(--line-h2); }
.summary-extra { margin: var(--space-0) var(--space-0) var(--space-2); color: var(--color-muted); font-size: var(--font-sm); line-height: var(--line-sm); overflow-wrap: anywhere; }
.day-notice { display: grid; gap: var(--space-3); margin-bottom: var(--space-5); padding: var(--space-4) var(--space-5); border: var(--size-hairline) solid var(--color-warning); border-radius: var(--radius-lg); background: var(--color-warning-soft); }
.day-notice-item { display: grid; gap: var(--space-3); }
.day-notice-item p { margin: var(--space-0); }
.meal-list { display: grid; gap: var(--space-3); }
.meal-card { display: grid; gap: var(--space-3); padding: var(--space-5); border: var(--size-hairline) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.meal-card--confirmed { border-color: var(--color-accent); }
.meal-card--skipped { border-style: dashed; }
.meal-card--skipped .meal-title, .meal-card--skipped .meal-macros { color: var(--color-muted); }
.meal-top { display: grid; gap: var(--space-2); }
.meal-heading { min-width: var(--space-0); }
.meal-meta { margin: var(--space-0) var(--space-0) var(--space-1); color: var(--color-muted); font-size: var(--font-sm); line-height: var(--line-sm); }
.meal-title { margin: var(--space-0); font-size: var(--font-lg); font-weight: var(--weight-semibold); line-height: var(--line-h3); overflow-wrap: anywhere; }
.meal-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.meal-status { padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--color-surface-soft); color: var(--color-muted); font-size: var(--font-xs); font-weight: var(--weight-semibold); line-height: var(--line-label); white-space: nowrap; }
.meal-status--confirmed { background: var(--color-bg); color: var(--color-accent-text); }
.meal-status--skipped { background: var(--color-danger-soft); color: var(--color-danger); }
.meal-status--estimate { border: var(--size-hairline) dashed var(--color-border-strong); background: transparent; }
.meal-macros { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); color: var(--color-muted); font-size: var(--font-sm); line-height: var(--line-sm); }
.meal-macros strong { color: var(--color-text); font-size: var(--font-md); line-height: var(--line-body); }
.meal-note { margin: var(--space-0); padding: var(--space-3); border-radius: var(--radius-sm); background: var(--color-surface-soft); color: var(--color-muted); font-size: var(--font-sm); line-height: var(--line-sm); white-space: pre-wrap; overflow-wrap: anywhere; }
.meal-actions-wrap { display: grid; gap: var(--space-3); }
.meal-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.meal-actions .button { flex: 1 1 calc(50% - var(--space-2)); }
.meal-pending { margin: var(--space-0); color: var(--color-accent-text); font-size: var(--font-sm); line-height: var(--line-sm); }
.grams-form { display: grid; grid-template-columns: minmax(var(--history-meta-min), 1fr) auto; align-items: end; gap: var(--space-3); padding-top: var(--space-3); border-top: var(--size-hairline) solid var(--color-border); }
.grams-hint, .grams-form .form-error { grid-column: 1 / -1; margin: var(--space-0); }
.day-confirm { display: grid; justify-items: stretch; gap: var(--space-2); margin-top: var(--space-5); }
.day-confirm-hint { margin: var(--space-0); font-size: var(--font-sm); line-height: var(--line-sm); }
.day-forms { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: start; }
.day-form { display: grid; gap: var(--space-4); padding: var(--space-6); }
.day-form-note { margin: var(--space-0); font-size: var(--font-sm); line-height: var(--line-sm); overflow-wrap: anywhere; }
.day-form-link { display: grid; gap: var(--space-2); }
.day-form-link-text { margin: var(--space-0); color: var(--color-accent-text); font-size: var(--font-sm); font-weight: var(--weight-medium); line-height: var(--line-sm); }
textarea.field-input { min-height: calc(var(--size-control) * 2.5); resize: vertical; line-height: var(--line-body); }

/* До десктопной раскладки шапка и показатели занимают два ряда. */
@media (max-width: 1023px) {
    :root { --size-header: auto; }
    .header-inner { flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3) var(--space-4) var(--space-0); }
    .brand-button { order: 1; padding: var(--space-2); }
    .brand-button .brand-logo { display: none !important; }
    .brand-button .brand-icon { display: block; width: var(--space-8); height: var(--space-8); }
    .header-actions { order: 2; }
    .logout-button { padding-inline: var(--space-2); }
    .primary-nav { order: 3; width: 100%; justify-content: stretch; }
    .nav-link { flex: 1; padding-inline: var(--space-2); font-size: var(--font-sm); }
    .main-content { padding: var(--space-8) var(--space-4) var(--space-16); }
    .page { gap: var(--space-8); }
    .page-heading, .draft-banner { align-items: stretch; flex-direction: column; }
    .metric-grid { grid-template-columns: repeat(2, 1fr); }
    .metric { padding: var(--space-4); }
    .history-summary { grid-template-columns: 1fr auto; gap: var(--space-3); }
    .history-summary .history-stat { display: none; }
    .set-row { grid-template-columns: 1fr 1fr; }
    .token-layout { grid-template-columns: 1fr; }
    .token-meta { grid-template-columns: 1fr; }
    .login-card { padding: var(--space-6); }
}

/* Брейкпоинт 640px: узкие метрики. */
@media (max-width: 640px) {
    .metric-value { font-size: var(--font-xl); line-height: var(--line-h2); }
}

/* Брейкпоинт 1024px: широкая десктопная раскладка. */
@media (min-width: 1024px) {
    .program-grid { grid-template-columns: repeat(3, 1fr); }
    .day-toolbar > .button { flex: 0 0 auto; }
    .day-date-field { flex: 0 1 var(--history-meta-min); flex-basis: calc(var(--history-meta-min) * 2); }
    .day-summary { grid-template-columns: repeat(3, 1fr); }
    .day-summary > :nth-child(3) { grid-column: auto; }
    .meal-top { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: var(--space-3); }
    .meal-heading { flex: 1 1 var(--history-meta-min); }
    .meal-actions .button { flex: 0 0 auto; }
    .day-confirm { justify-items: start; }
    .day-forms { grid-template-columns: 1fr 1fr; }
}

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