@charset "UTF-8";

/* Светлая A clean / balanced и тёмная A soft из my-design-dna.
   Материал и цвет — из образца; геометрия — под пять разделов и ввод в зале. */
:root {
  color-scheme: light;
  --bg: #e9edf3;
  --paper: #fcfdff;
  --ink: #27364b;
  --muted: #56667c;
  --line: #c1ccda;
  --surface-line: #becbdc9c;
  --soft: #f4f7fb;
  --raised: #f8fafd;
  --hover: #e1e7ef;
  --action: #405b80;
  --action-hover: #334c70;
  --violet: color-mix(in oklab, #7154a3, #7042c3);
  --teal: color-mix(in oklab, #5e9c98, #099a80);
  --success: color-mix(in oklab, #327455, #13764d);
  --blue: color-mix(in oklab, #396e9e, #2468bb);
  --accent-line: linear-gradient(90deg, color-mix(in oklab, #8f96d3, #7a49dc), var(--teal));
  --surface-shadow: 0 2px 5px #2f446406, 0 9.6px 16.8px #2b3e5b12, inset 0 1px #ffffffed;
  --icon-surface: linear-gradient(145deg, #f7f9fc, #dfe5ed);
  --icon-shadow: inset 0 1px #fff, 0 4px 8px #38557813;
  /* Совместимость с компонентами исходной темы. */
  --green: var(--action);
  --radius: 25px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
}

html { scroll-padding-bottom: 110px; }
body { line-height: 1.5; }
h1, .page-heading h1 { font-size: 28px; font-weight: 700; letter-spacing: -.6px; }
h2 { font-size: 20px; line-height: 1.3; letter-spacing: -.3px; }
.hint, .source-note, .metric-caption { font-size: 12px; }
.eyebrow { letter-spacing: .7px; font-weight: 500; }
:is(button, a, input, select, textarea, summary):focus-visible { outline: 2px solid var(--action); outline-offset: 4px; }
.button { border-radius: 14px; min-height: 46px; background: var(--paper); border-color: var(--line); }
.button:hover { background: var(--soft); }
.button.primary { background: var(--action); border-color: var(--action); box-shadow: inset 0 1px #ffffff21; }
.button.primary:hover { background: var(--action-hover); border-color: var(--action-hover); }
.button.quiet { background: transparent; }
.button.danger { background: #fff5f2; color: #a54735; border-color: #f0d5cd; }
.icon { stroke-width: 1.8; }
.icon-button { border-radius: 13px; }
.icon-button:hover { background: var(--hover); }
input, select, textarea { background: var(--paper); border-color: var(--line); border-radius: 13px; }
input::placeholder, textarea::placeholder { color: #69798e; opacity: 1; }
input:focus, select:focus, textarea:focus { border-color: var(--action); }
.card, .exercise-card, .plan-node > details, .workout-visual, .login-card {
  background: var(--paper); border-color: var(--surface-line); box-shadow: var(--surface-shadow);
}
.card { padding: 24px; animation: none; }
.card-header { margin-bottom: 20px; }
.card-header p { font-size: 12px; }
.card-footer { border-color: var(--surface-line); }
.empty { padding: 24px 6px; }
.empty .empty-icon, .activity-icon, .activity-icon.blue, .action-icon, .brand-mark {
  background: var(--icon-surface); border: 1px solid #fff; color: #52647d; box-shadow: var(--icon-shadow);
}
.empty .empty-icon { width: 47px; height: 47px; border-radius: 15px; }
.brand-mark { font-family: inherit; font-size: 27px; font-weight: 600; letter-spacing: -2px; padding: 0 2px 4px 0; }

/* Верхняя навигация оставляет ширину для тренировок, каталога и аналитики. */
.sidebar.app-navigation {
  position: relative; inset: auto; width: 100%; height: auto; min-height: 90px;
  padding: 18px max(28px, calc((100% - 1196px) / 2)); flex-direction: row;
  align-items: center; justify-content: space-between; gap: 28px;
  border: 0; border-bottom: 1px solid #b9c6d54d; background: #e1e7ef; z-index: 20;
}
.brand { flex-shrink: 0; font-size: 18px; gap: 11px; }
.brand small { font-size: 11px; }
#navigation { flex-direction: row; gap: 5px; }
.nav-link { color: var(--muted); padding: 11px 14px; min-height: 46px; gap: 9px; border-radius: 13px; }
.nav-link:hover { background: #ffffff66; }
.nav-link.active { background: #ffffffae; color: #30415d; box-shadow: 0 2px 5px #27364b08, inset 0 1px #fff; }
.nav-link.active::after { display: none; }
.sidebar-bottom { margin: 0; display: flex; gap: 4px; }
.nav-button { width: auto; padding: 10px; border-radius: 12px; color: var(--muted); }
.nav-button:hover { background: #ffffff66; }
.workspace { max-width: 1260px; margin: 0 auto; padding: 0 32px; }
.topbar { height: 56px; border: 0; }
.topbar-title { font-size: 12px; }
.topbar-right { gap: 12px; }
main#content { padding: 12px 0 32px; min-height: calc(100vh - 210px); }
.page-heading { margin-bottom: 24px; }
.page-heading h1 { margin-bottom: 8px; }
.page-heading p { font-size: 13px; }
.page-footer { color: var(--muted); font-size: 11px; }

/* Цвет обозначает состояние; текст и точка остаются видимыми. */
.tag {
  --chip: var(--blue);
  border: 1px solid color-mix(in srgb, var(--chip) 36%, transparent);
  background: color-mix(in srgb, var(--chip) 3.5%, white);
  color: var(--chip); border-radius: 8px; padding: 5px 8px;
}
.tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.tag.status-draft, .tag.status-active { --chip: var(--violet); }
.tag.status-done { --chip: var(--success); }
.tag.neutral { --chip: var(--muted); color: var(--chip); background: var(--soft); }
.tag.amber { color: var(--chip); background: color-mix(in srgb, var(--chip) 3.5%, white); }
.status-dot { background: var(--teal); }
.segmented { background: #dfe5ee; border-radius: 14px; }
.segmented button, .training-tabs a, .analytics-periods a, .analytics-source a { border-radius: 10px; }
.segmented button.active, .training-tabs a.active, .analytics-periods a.active, .analytics-source a.active {
  color: var(--action); box-shadow: 0 2px 5px #27364b08, inset 0 1px #fff;
}

/* Главная: одно действие, фактические показатели и асимметричная сводка. */
.today-action {
  background: var(--paper); border: 1px solid var(--surface-line); box-shadow: var(--surface-shadow);
  padding: 24px; gap: 20px; margin-bottom: 20px;
}
.today-action::before, .program-card::before {
  content: ''; position: absolute; top: 0; left: 9%; right: 9%; height: 2px;
  background: var(--accent-line); opacity: .7; pointer-events: none;
}
.action-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 17px; flex-shrink: 0; }
.action-icon .icon { width: 25px; height: 25px; }
.today-action-copy { flex: 1; min-width: 0; }
.today-action h2 { font-family: inherit; font-size: 20px; font-weight: 600; margin: 0 0 5px; letter-spacing: -.3px; overflow-wrap: anywhere; }
.today-action p { color: var(--muted); font-size: 13px; }
.today-action .tag { margin-bottom: 8px; }
.today-action > .button { flex-shrink: 0; }
.metric-grid { gap: 16px; margin-bottom: 24px; }
.metric { padding: 20px 22px; border-radius: 22px; }
.metric-label { font-size: 12px; margin-bottom: 14px; }
.metric-label .icon { width: 32px; height: 32px; padding: 7px; border-radius: 11px; background: var(--icon-surface); border: 1px solid #fff; color: #52647d; box-shadow: var(--icon-shadow); }
.metric-value { font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; }
.metric-caption { margin-top: 8px; }
.dashboard-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 22px; }
.day { background: var(--soft); border-radius: 13px; min-height: 76px; }
.day.today { border-color: var(--line); }
.day.selected { background: var(--action); border-color: var(--action); color: white; box-shadow: 0 4px 10px #405b801a; }
.day.selected small { color: #f4f7fb; }
.day-dot { background: var(--teal); width: 5px; height: 5px; }
.day.selected .day-dot { background: #fff; }
.activity-row { border-color: var(--surface-line); }
.activity-main p { font-size: 12px; }
.macro { border-color: var(--teal); }
.macro:nth-child(2) { border-color: #b3a0d5; }
.macro:nth-child(3) { border-color: #83a6c7; }
.goal-highlight { border-color: var(--teal); }
.program-card { position: relative; border-radius: 25px; }
.program-day-tags a { background: var(--soft); }
.program-day-tags a:hover { background: var(--hover); }

/* Питание и каталог: цвет относится к данным, поверхности остаются белыми. */
.nutrition-target { background: var(--soft); border-radius: 18px; }
.target-label { color: var(--muted); }
.nutrition-target progress, .target-empty-track { background: #344c7320; }
.nutrition-target progress::-webkit-progress-bar { background: #344c7320; }
.nutrition-target progress::-webkit-progress-value { background: var(--teal); }
.nutrition-target progress::-moz-progress-bar { background: var(--teal); }
.nutrition-target.exceeded { background: #fcf3eb; }
.nutrition-target.exceeded progress::-webkit-progress-value { background: #ab7042; }
.nutrition-target.exceeded progress::-moz-progress-bar { background: #ab7042; }
.meal-macros, .guide-focus, .guide-mistake p:last-child { background: var(--soft); }
.meal-food { border-color: var(--surface-line); }
.exercise-card { border-radius: 22px; }
.exercise-card:hover { border-color: var(--line); }
.anatomy-tag, .filter-chip { background: var(--soft); border-color: var(--surface-line); }
.equipment-tag { background: var(--paper); }
.filter-chip.selected { color: var(--action); background: #e6edf6; border-color: var(--action); box-shadow: inset 0 0 0 1px var(--action); }
.exercise-tag-group h4 { color: var(--muted); }
.exercise-history-sets > span { background: var(--soft); }
.exercise-detail-action { background: var(--paper); }

/* В зале крупные поля и спокойный таймер важнее декоративных эффектов. */
.workout-page { max-width: 900px; }
.workout-focus { max-width: 640px; }
.workout-page-top { background: var(--bg); border-color: var(--line); }
.workout-title h1 { font-size: 28px; }
.workout-page-bottom { background: var(--bg); }
.workout-pending-top { border-radius: 20px; padding: 16px; border-color: var(--surface-line); box-shadow: var(--surface-shadow); }
.pending-chips button { border-radius: 11px; min-height: 44px; }
.pending-chips button.active { background: #eeeaf8; border-color: #9e89c5; color: var(--violet); }
.pending-chips button.active b { color: var(--violet); }
.optional-warmups summary { min-height: 44px; }
.workout-visual { border-radius: 24px; }
.workout-hero-photo { height: 240px; }
.workout-muscle-label { background: #f4f7fbf0; }
.focus-exercise-title h1 { font-size: 23px; font-weight: 600; }
.focus-exercise-title p, .exercise-row-title small { color: var(--muted); }
.workout-ring { background: conic-gradient(var(--violet) var(--ring-progress), #dce2ed 0); }
.rest-ring { background: conic-gradient(var(--teal) var(--ring-progress), #d4e6e4 0); }
.sets-ring { background: conic-gradient(var(--blue) var(--ring-progress), #dce2ed 0); }
.workout-ring strong { font-weight: 600; }
.workout-quick-entry input, .record-set { border-radius: 16px; height: 60px; }
.workout-quick-entry input { font-variant-numeric: tabular-nums; font-size: 24px; }
.workout-quick-entry label { font-size: 12px; }
.set-type-badge { color: var(--violet); background: #eeeaf8; border-radius: 9px; }
.set-type-badge.warmup { color: #8e784e; background: #f1ebdf; }
.pending-sets button.active { background: #eeeaf8; color: var(--violet); border-color: #9e89c5; }
.technique-info { font-family: inherit; background: var(--paper); border-color: var(--line); }
.workout-results, .workout-paused { background: #e2eeec; color: var(--ink); border-radius: 20px; }
.workout-results small { color: var(--muted); }
.workout-completion-offer { background: #edf6f2; border-color: #a4c7b8; color: var(--success); border-radius: 20px; }
.session-replace.button { background: var(--paper); border-color: var(--line); }
.effort-choice[aria-pressed=true] { color: var(--success); background: #edf6f2; border-color: var(--success); }
.effort-choice.effort-2[aria-pressed=true] { color: #926315; background: #fff5df; border-color: #926315; }
.effort-choice.effort-3[aria-pressed=true] { color: #ac503a; background: #fff0eb; border-color: #ac503a; }
.effort-badge.effort-1 { color: var(--success); }
.chain-dot { border-color: var(--line); }
.linked-after > .chain-dot, .linked-before > .chain-dot { background: var(--teal); border-color: var(--teal); }
.workout-exercise-row.linked-after::before, .plan-node.linked-after::before,
.workout-exercise-row.linked-before::after, .plan-node.linked-before::after,
.chain-connector.connected::before { background: var(--teal); }
.chain-connector.connected button { color: var(--action); background: #e2eeec; }
.chain-connector button { color: var(--muted); }
.plan-node.drop-target > details { outline-color: var(--teal); }
.plan-node > details { border-radius: 20px; }
.gym-add { background: var(--paper); border-radius: 20px; }
#workout-banner { left: 24px; right: 24px; background: var(--paper); border-color: var(--line); border-radius: 20px; box-shadow: var(--surface-shadow); }
#workout-banner button { border-radius: 20px; }
.toast { left: 50%; background: var(--ink); border-radius: 14px; box-shadow: var(--surface-shadow); }
dialog { border-color: var(--surface-line); border-radius: 25px; box-shadow: 0 18px 80px #27364b26; }
dialog::backdrop { background: #27364b55; }
.add-choice { background: var(--soft); border-radius: 16px; }

/* Аналитика сохраняет различимые категории и подписи, акцент — на результатах. */
.analytics-kpis > div { border-color: #9d91c7; }
.analytics-body { background: none; }
.anatomy-outline { fill: #e2e7ee; stroke: #99a8ba; }
.anatomy-region { stroke: #82a8a1; }
.heat-0 { fill: #e2e7ee; background: #e2e7ee; }
.heat-1 { fill: #c4e3dc; background: #c4e3dc; }
.heat-2 { fill: #8bc5b7; background: #8bc5b7; }
.heat-3 { fill: #529e8e; background: #529e8e; }
.heat-4 { fill: #286c5e; background: #286c5e; }
.analytics-heat-legend > span { color: var(--ink); }
.analytics-heat-legend > .heat-3, .analytics-heat-legend > .heat-4 { color: #fff; }
.analytics-muscle-list progress { accent-color: var(--teal); background: #dce5eb; }
.analytics-muscle-list progress::-webkit-progress-bar { background: #dce5eb; }
.analytics-muscle-list progress::-webkit-progress-value { background: var(--teal); }
.analytics-muscle-list progress::-moz-progress-bar { background: var(--teal); }
.analytics-anatomy a:hover .anatomy-region, .analytics-anatomy a:focus .anatomy-region { stroke: var(--ink); }
.analytics-donut a:focus { outline-color: var(--action); }
.login-page { background: var(--bg); grid-template-columns: minmax(0, 1fr); }
.login-card { border-radius: 28px; min-width: 0; }
.login-card h1 { font-family: inherit; font-size: 32px; font-weight: 650; }

/* Переключатель сохраняет фокус и ввод: меняется только атрибут корня. */
.theme-toggle { min-width: 44px; padding: 9px 12px; gap: 8px; font-size: 12px; }
.theme-toggle-label { white-space: nowrap; }
.theme-for-dark, :root[data-theme="dark"] .theme-for-light { display: none; }
:root[data-theme="dark"] .theme-for-dark { display: inline; }
.login-brand-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.login-brand-row .brand-mark { margin: 0; flex-shrink: 0; }
.login-brand-row .theme-toggle { align-self: center; }

/* Тёмная A soft: нейтральный графит, матовые поверхности и слабая кромка.
   Плотные поля, меню и липкие панели сохраняют читаемость поверх содержимого. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #2c3441;
  --paper: #303c4e;
  --ink: #f2f4fa;
  --muted: #bec9db;
  --line: #4a566b;
  --surface-line: #eef5ff4d;
  --soft: #374357;
  --raised: #374357;
  --hover: #42516a;
  --action: #b2c4e7;
  --action-hover: #c9d6ef;
  --violet: #bba8ff;
  --teal: #62d9c1;
  --success: #82ddaf;
  --blue: #92c4ff;
  --accent-line: linear-gradient(90deg, #a4a4fa, #77c9c3);
  --surface-shadow: inset 0 1px #ffffff32, 0 11px 24.2px #00000033;
  --icon-surface: linear-gradient(145deg, #465161, #2e3748);
  --icon-shadow: inset 0 1px #ffffff44, 0 5px 12px #0005;
  --glass-surface: linear-gradient(135deg, #ffffff0d, #b4c8ec12 60%, #ffffff0a), rgba(49, 61, 80, .7);
}
:root[data-theme="dark"] :is(.card, .today-action, .exercise-card, .plan-node > details, .login-card, .workout-pending-top) {
  background: var(--glass-surface);
}
@supports (backdrop-filter: blur(16px)) {
  :root[data-theme="dark"] :is(.card, .today-action, .login-card, .workout-pending-top) { backdrop-filter: blur(16px); }
}
:root[data-theme="dark"] :is(.empty .empty-icon, .activity-icon, .action-icon, .brand-mark, .metric-label .icon) {
  color: #e1e6ef; border-color: #ffffff32;
}
:root[data-theme="dark"] .sidebar.app-navigation { background: #222a36; border-color: var(--line); }
:root[data-theme="dark"] :is(.nav-link:hover, .nav-button:hover) { background: var(--hover); }
:root[data-theme="dark"] .nav-link.active { background: var(--raised); color: var(--ink); box-shadow: inset 0 1px #ffffff0a; }
:root[data-theme="dark"] .button.primary { background: #3b4656; border-color: #7d899b; color: var(--ink); }
:root[data-theme="dark"] .button.primary:hover { background: #495669; border-color: #a0acbd; }
:root[data-theme="dark"] .button.danger { background: #503b41; border-color: #a17774; color: #ffc0ac; }
:root[data-theme="dark"] :is(.text-link.danger, .workout-discard-button, .form-error, .legacy-exercise) { color: #ffc0ac; }
:root[data-theme="dark"] .error-banner { background: #493f38; border-color: #a28a70; color: #f3d5b3; }
:root[data-theme="dark"] :is(input, textarea)::placeholder { color: #a5b2c7; }
:root[data-theme="dark"] .tag { background: #ffffff09; border-color: color-mix(in srgb, var(--chip) 32%, transparent); }
:root[data-theme="dark"] .tag.neutral { background: var(--soft); }
:root[data-theme="dark"] .segmented { background: #252f3e; }
:root[data-theme="dark"] :is(.segmented button.active, .training-tabs a.active, .analytics-periods a.active, .analytics-source a.active) {
  background: var(--raised); color: var(--ink); box-shadow: inset 0 1px #ffffff14;
}
:root[data-theme="dark"] .day.selected { background: #3b4656; border-color: #a0acbd; color: var(--ink); box-shadow: inset 0 1px #ffffff21; }
:root[data-theme="dark"] .day.selected small { color: var(--ink); }
:root[data-theme="dark"] .day.selected .day-dot { background: var(--teal); }
:root[data-theme="dark"] :is(.nutrition-target progress, .target-empty-track, .analytics-muscle-list progress) { background: #ffffff10; }
:root[data-theme="dark"] .nutrition-target progress::-webkit-progress-bar,
:root[data-theme="dark"] .analytics-muscle-list progress::-webkit-progress-bar { background: #ffffff10; }
:root[data-theme="dark"] .nutrition-target.exceeded { background: #493f38; }
:root[data-theme="dark"] .nutrition-target.exceeded .target-balance { color: #f2c886; }
:root[data-theme="dark"] .nutrition-target.exceeded progress::-webkit-progress-value { background: #ddb476; }
:root[data-theme="dark"] .nutrition-target.exceeded progress::-moz-progress-bar { background: #ddb476; }
:root[data-theme="dark"] .filter-chip.selected { background: var(--hover); color: var(--ink); border-color: var(--action); }
:root[data-theme="dark"] .filter-chip:hover { border-color: var(--action); }
/* Фотографии и анатомические схемы сохраняют свои исходные цвета. */
:root[data-theme="dark"] .exercise-tag-icon { background: #e4e9ef; padding: 2px; border-radius: 5px; }
:root[data-theme="dark"] .photo-fallback { color: #56667c; }
:root[data-theme="dark"] span.workout-thumb { background: var(--soft); color: var(--ink); }
:root[data-theme="dark"] .workout-muscle-label { background: #303c4eef; }
:root[data-theme="dark"] :is(.pending-chips button.active, .pending-sets button.active, .set-type-badge) {
  background: #453f5c; color: var(--violet); border-color: #9e89c5;
}
:root[data-theme="dark"] .set-type-badge.warmup { background: #494334; color: #f2c886; }
:root[data-theme="dark"] .workout-ring { background: conic-gradient(var(--violet) var(--ring-progress), #ffffff10 0); }
:root[data-theme="dark"] .rest-ring { background: conic-gradient(var(--teal) var(--ring-progress), #ffffff10 0); }
:root[data-theme="dark"] .sets-ring { background: conic-gradient(var(--blue) var(--ring-progress), #ffffff10 0); }
:root[data-theme="dark"] :is(.workout-results, .workout-paused, .chain-connector.connected button) { background: #334c4d; color: var(--ink); }
:root[data-theme="dark"] .workout-completion-offer { background: #304a41; border-color: #6c9b88; color: var(--success); }
:root[data-theme="dark"] .effort-choice[aria-pressed=true] { background: #304a41; color: var(--success); border-color: var(--success); }
:root[data-theme="dark"] .effort-choice.effort-2[aria-pressed=true] { background: #494334; color: #f2c886; border-color: #f2c886; }
:root[data-theme="dark"] .effort-choice.effort-3[aria-pressed=true] { background: #503b41; color: #ffb59d; border-color: #ffb59d; }
:root[data-theme="dark"] .effort-badge.effort-2 { color: #f2c886; }
:root[data-theme="dark"] .effort-badge.effort-3 { color: #ffb59d; }
:root[data-theme="dark"] :is(dialog, .workout-more > div) { box-shadow: 0 18px 60px #0005; }
:root[data-theme="dark"] dialog::backdrop { background: #141b2680; }
:root[data-theme="dark"] .toast { background: var(--raised); color: var(--ink); border: 1px solid var(--line); }
:root[data-theme="dark"] .skip-link { background: var(--paper); color: var(--ink); }
:root[data-theme="dark"] .anatomy-outline { fill: #374357; stroke: #a5b2c7; }
:root[data-theme="dark"] .anatomy-region { stroke: #a5b2c7; }
:root[data-theme="dark"] .heat-0 { fill: #43516a; background: #43516a; }
:root[data-theme="dark"] .heat-1 { fill: #3f786e; background: #3f786e; }
:root[data-theme="dark"] .heat-2 { fill: #509b86; background: #509b86; }
:root[data-theme="dark"] .heat-3 { fill: #66bfa0; background: #66bfa0; }
:root[data-theme="dark"] .heat-4 { fill: #82ddaf; background: #82ddaf; }

@media (max-width: 1100px) and (min-width: 701px) {
  .sidebar.app-navigation { padding: 16px 24px; gap: 14px; flex-wrap: wrap; }
  #navigation { order: 3; flex-basis: 100%; justify-content: center; }
  .sidebar-bottom { margin-left: auto; }
  .workspace { padding: 0 24px; }
}
@media (max-width: 900px) {
  .dashboard-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  html { scroll-padding-bottom: calc(160px + env(safe-area-inset-bottom)); }
  .sidebar.app-navigation {
    position: fixed; inset: auto 10px calc(10px + env(safe-area-inset-bottom));
    width: auto; min-height: 0; padding: 5px; border: 1px solid #fff; border-radius: 22px;
    background: var(--paper); box-shadow: inset 0 1px #fff, 0 9px 20px #3c4c6726;
  }
  @supports (backdrop-filter: blur(12px)) {
    .sidebar.app-navigation { background: linear-gradient(145deg, #ffffffed, #e4ebf6e8); backdrop-filter: blur(12px); }
  }
  #navigation { width: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; }
  .sidebar.app-navigation > .brand, .sidebar-bottom { display: none; }
  .nav-link { min-height: 56px; padding: 7px 1px; gap: 4px; font-size: 10px; border-radius: 16px; }
  .nav-link .icon { width: 20px; height: 20px; }
  .nav-link.active { background: #c1cfe05c; box-shadow: none; }
  .workspace { padding: 0 18px calc(100px + env(safe-area-inset-bottom)); }
  .topbar { height: 66px; font-size: 11px; }
  .topbar-title { font-size: 11px; }
  .topbar-right { gap: 6px; }
  .mobile-settings { width: 44px; height: 44px; }
  .topbar .theme-toggle { width: 44px; height: 44px; padding: 10px; flex-shrink: 0; }
  .topbar .theme-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  :root[data-theme="dark"] .sidebar.app-navigation { background: #222a36ed; border-color: #ffffff32; box-shadow: inset 0 1px #ffffff14, 0 9px 20px #0004; }
  main#content { padding-top: 16px; }
  .page-heading { gap: 12px; margin-bottom: 22px; }
  .page-heading h1 { font-size: 27px; letter-spacing: -.5px; }
  .page-heading p { font-size: 13px; }
  .page-heading .button { min-width: 44px; min-height: 44px; font-size: 12px; padding: 10px 12px; }
  .card { padding: 20px; border-radius: 24px; }
  .card-header { gap: 10px; }
  .card-header h2 { font-size: 18px; }
  .card-header .text-link { font-size: 12px; }
  .today-action { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 20px; border-radius: 25px; margin-bottom: 18px; }
  .action-icon { width: 44px; height: 44px; border-radius: 14px; align-self: start; }
  .action-icon .icon { width: 22px; height: 22px; }
  .today-action h2 { font-size: 18px; }
  .today-action p { font-size: 12px; }
  .today-action > .button { grid-column: 1 / -1; width: 100%; }
  .metric-grid { gap: 12px; margin-bottom: 20px; }
  .metric { padding: 16px; border-radius: 21px; }
  .metric-label { margin-bottom: 12px; gap: 4px; }
  .metric-label .icon { width: 28px; height: 28px; padding: 6px; }
  .metric-value { font-size: 27px; }
  .metric-value small { font-size: 11px; }
  .metric-caption { font-size: 11px; }
  .dashboard-grid, .stack { gap: 18px; }
  .day { min-height: 72px; border-radius: 11px; }
  .day small { font-size: 10px; }
  .activity-row { flex-wrap: wrap; }
  .activity-row > .text-link { margin-left: auto; }
  .activity-main p { font-size: 11px; }
  .workout-title h1 { font-size: 25px; }
  .workout-page-top { min-height: 64px; }
  .workout-page-bottom { bottom: calc(84px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; }
  .workout-pending-top { padding: 14px; }
  .workout-hero-photo { height: 180px; }
  .focus-exercise-title h1 { font-size: 21px; }
  .workout-quick-entry input, .record-set { height: 58px; }
  .workout-quick-entry label { font-size: 11px; }
  #workout-banner { left: 12px; right: 12px; bottom: calc(90px + env(safe-area-inset-bottom)); }
  body:has(#workout-banner:not([hidden])) .workspace { padding-bottom: calc(185px + env(safe-area-inset-bottom)); }
  body:has(#workout-banner:not([hidden])) .toast { bottom: calc(185px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(95px + env(safe-area-inset-bottom)); }
  .nutrition-target { padding: 15px; border-radius: 16px; }
  .login-card { padding: 32px 26px; }
}
@media (max-width: 360px) {
  .workspace { padding-left: 12px; padding-right: 12px; }
  .sidebar.app-navigation { left: 6px; right: 6px; }
  .nav-link { font-size: 9px; }
  .metric { padding: 14px 12px; }
  .card { padding: 18px; }
  .today-action { padding: 18px; }
  .card-header { flex-wrap: wrap; }
  .topbar-title { display: none; }
  .topbar-right { width: 100%; }
  #top-date { margin-right: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}