/* V3.4 — Fitness. Presentation only: no data or integration changes. */
:root {
  color-scheme: dark;
  --bg: #09090b;
  --card: #1c1c1e;
  --text: #f5f5f7;
  --muted: #aaaab2;
  --line: #38383d;
  --navy: #f5f5f7;
  --navy2: #262629;
  --teal: #c6f942;
  --ok: #83e0a6;
  --danger: #ff8da0;
  --lime: #c6f942;
  --cyan: #67d7ef;
  --pink: #ff759e;
  --violet: #c3a2ff;
  --shadow: none;
}
html, body { background: var(--bg); color: var(--text); }
body { padding-bottom: calc(100px + env(safe-area-inset-bottom)); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button, summary, .nutrition-file { touch-action: manipulation; }
button { transition: background-color .15s, color .15s, transform .15s; }
button:focus-visible, summary:focus-visible, a:focus-visible, .nutrition-file:focus-within {
  outline: 2px solid var(--lime); outline-offset: 4px;
}
button:disabled { opacity: .5; }
#app { max-width: 760px; }
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: calc(16px + env(safe-area-inset-top)) 22px 14px;
  background: rgba(9,9,11,.96); border-bottom: 1px solid #232326;
  box-shadow: none; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.brand { gap: 10px; min-width: 0; }
.brand h1 { font-size: 20px; font-weight: 750; letter-spacing: -.6px; color: var(--text); }
.brand small { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; }
.brand-mark { color: var(--lime); width: 28px; height: 28px; flex: 0 0 28px; }
.brand-mark svg, .workout-symbol svg, .ico svg { display: block; width: 100%; height: 100%; }
.profile-button {
  width: 42px; height: 42px; flex: 0 0 42px; position: relative; overflow: hidden;
  border: 1px solid #434347; border-radius: 50%; background: #29292d; color: var(--lime);
  display: grid; place-items: center; padding: 0; font-weight: 700;
}
.profile-button img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.profile-button img[hidden] { display: none; }
main { padding: 24px 22px; }
.dashboard-intro { margin-bottom: 24px; }
.dashboard-intro p { color: var(--muted); margin: 0 0 6px; font-size: 13px; }
.dashboard-intro h2 { font-size: 34px; letter-spacing: -1.2px; line-height: 1.15; margin: 0; font-weight: 750; overflow-wrap: anywhere; }
.hero, .metric, .card, .sync-strip, .health-chip {
  background: var(--card); border: 1px solid #2a2a2e; box-shadow: none; border-radius: 22px;
}
.hero { padding: 22px; margin-bottom: 24px; }
.hero .eyebrow { opacity: 1; color: var(--muted); text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; }
.workout-heading { display: flex; align-items: center; gap: 14px; margin: 19px 0 20px; }
.workout-heading>div { min-width: 0; }
.workout-symbol { width: 54px; height: 54px; flex: 0 0 54px; padding: 13px; background: var(--lime); color: #1b2503; border-radius: 50%; }
.hero h2 { margin: 0 0 5px; font-size: 25px; letter-spacing: -.6px; }
.hero p { color: #d0d0d5; opacity: 1; font-size: 13px; line-height: 1.45; }
.workout-count { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.hero-actions { gap: 10px; margin-top: 0; }
.hero-actions .primary { flex: 1.5; }
.hero-actions .hero-secondary { flex: 1; }
.primary, .primary.light {
  background: var(--lime); color: #182300; border: 1px solid transparent;
  box-shadow: none; border-radius: 999px; min-height: 46px; padding: 12px 19px; font-weight: 750;
}
.secondary, .hero-secondary {
  background: #303034; color: var(--text); border: 1px solid #49494e;
  box-shadow: none; border-radius: 999px; padding: 11px 16px; min-height: 44px; font-size: 13px; font-weight: 650;
}
.danger, .secondary.danger { color: var(--danger); }
.link-btn { color: var(--lime); font-size: 13px; min-height: 44px; padding: 8px 4px; }
.section-title { margin: 26px 2px 12px; gap: 10px; }
.section-title h3 { font-size: 21px; letter-spacing: -.6px; font-weight: 700; color: var(--text); }
.metric .value, .health-chip strong, .history-top strong, .settings-row strong, .sync-strip strong, .exercise h4, .exercise-titlebar h4 { color: var(--text); }
.grid { gap: 12px; }
.metric { padding: 18px; }
.metric .label { color: var(--muted); font-size: 12px; margin-bottom: 9px; }
.metric .value { font-size: 29px; letter-spacing: -.8px; font-variant-numeric: tabular-nums; }
.metric small { color: #c7c7cd; font-size: 14px; }
.metric .delta { color: var(--muted); line-height: 1.5; margin-top: 8px; font-size: 11px; }
.metric:first-child .label { color: var(--cyan); }
.metric:nth-child(2) .label { color: var(--lime); }
.metric:nth-child(3) .label { color: var(--pink); }
.metric:nth-child(4) .label { color: var(--violet); }
.health-grid { gap: 10px; }
.health-chip { padding: 16px 14px; gap: 8px; }
.health-chip strong { font-variant-numeric: tabular-nums; font-size: 18px; }
.health-chip:nth-child(1) span { color: var(--pink); }
.health-chip:nth-child(2) span { color: var(--cyan); }
.health-chip:nth-child(3) span { color: var(--violet); }
.sync-strip { padding: 15px 16px; gap: 14px; margin: 0 0 20px; align-items: center; }
.sync-strip strong { font-size: 13px; }
.sync-state { display: block; margin-top: 5px; line-height: 1.45; color: var(--muted); }
.sync-state.ok { color: var(--ok); }
.sync-state.syncing { color: var(--cyan); }
.sync-state.error { color: var(--danger); }
.sync-strip .secondary { font-size: 12px; flex: 0 0 auto; }
.settings-row, .history-item { padding: 18px; border-color: var(--line); }
.settings-row>div, .history-top>div { min-width: 0; overflow-wrap: anywhere; }
.settings-row strong { font-size: 14px; }
.settings-row p { font-size: 12px; line-height: 1.5; margin-top: 5px; }
.settings-row>.secondary { flex-shrink: 0; }
.history-top { align-items: flex-start; }
.history-item small { line-height: 1.6; }
.pill { background: #2b2b30; color: #c4c4cb; border-color: #414147; }
.badge { background: #283319; border-color: #415327; color: var(--lime); }
.source-badge.remote { background: #20343c; color: var(--cyan); }
.source-badge.local { background: #2d381e; color: var(--lime); }
.tabs { gap: 7px; padding-bottom: 8px; }
.tab { background: #242427; color: #d6d6dc; border-color: #3d3d43; min-height: 44px; padding: 10px 17px; font-size: 14px; }
.tab.active { background: var(--lime); border-color: var(--lime); color: #182300; box-shadow: none; }
.exercise { margin-bottom: 20px; border-color: #303035; }
.exercise-titlebar { padding: 18px 16px 16px; gap: 12px; }
.exercise-titlebar h4 { font-size: 17px; line-height: 1.3; }
.exercise-meta { margin-top: 5px; line-height: 1.45; }
.exercise-number { background: #303b20; color: var(--lime); box-shadow: none; }
.exercise-photo { background: #242427; }
.exercise-photo-fallback { background: #242427; color: var(--text); }
.cue { padding: 15px 16px; color: #c5c5cd; line-height: 1.6; }
.last-load, .teal-text { color: var(--lime); }
.sets { border-color: var(--line); padding: 12px 16px 16px; }
.set-num { background: #29292d; color: #d9d9de; border-color: #414147; }
.field, .form-group input { background: #111113; color: var(--text); border-color: #49494f; font-size: 16px; min-height: 44px; }
.field::placeholder, .form-group input::placeholder { color: #92929c; }
.field:focus, .form-group input:focus { border-color: var(--lime); box-shadow: 0 0 0 3px #c6f94220; }
.check { width: 44px; height: 44px; background: #252529; border-color: #595961; }
.check.done { background: var(--lime); border-color: var(--lime); color: #182300; }
.sticky-action { bottom: calc(80px + env(safe-area-inset-bottom)); background: rgba(9,9,11,.96); padding: 12px 0; gap: 10px; -webkit-backdrop-filter: blur(16px); }
.timer { background: #232b1b; border-color: #46552d; color: var(--text); }
.timer strong { color: var(--lime); }
.guide-toggle { background: #252529; border-color: #424248; color: var(--lime); min-height: 46px; }
.guide-scroll img { border-color: var(--line); background: var(--card); box-shadow: none; }
.form-group label { color: #c3c3cb; font-size: 13px; }
.form-grid { gap: 14px 10px; }
.chart-wrap { background: var(--card); }
.switch input { display: block; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; z-index: 1; cursor: pointer; }
.switch input:focus-visible+span { outline: 2px solid var(--lime); outline-offset: 4px; }
.switch span { background: #4b4b53; }
.switch input:checked+span { background: #75a322; }
.switch input:checked+span:after { background: #f4ffd9; }
.bottom-nav { background: rgba(20,20,22,.97); border-top: 1px solid #323237; box-shadow: none; padding: 9px 10px calc(8px + env(safe-area-inset-bottom)); -webkit-backdrop-filter: blur(20px); }
.nav-btn { color: #9999a3; min-height: 54px; gap: 5px; padding: 5px 2px; font-size: 10px; }
.nav-btn .ico { width: 24px; height: 24px; }
.nav-btn.active { color: var(--lime); }
.nav-btn.active .ico { filter: drop-shadow(0 0 5px #c6f94218); }
.toast { background: #333339; border-color: #5b5b63; color: var(--text); max-width: calc(100% - 32px); width: max-content; text-align: center; border-radius: 16px; bottom: calc(100px + env(safe-area-inset-bottom)); }
.update-banner { background: #303034; border-color: #5b5b63; bottom: calc(90px + env(safe-area-inset-bottom)); }
.install-note { background: #1c1c1e; color: var(--muted); border-color: var(--line); margin: 24px 0 0; line-height: 1.6; }
.install-note summary { color: #d3d3d9; cursor: pointer; min-height: 24px; }
.mini-list { color: #c6c6ce; line-height: 1.6; }
.separator { background: var(--line); }
.nutrition-dashboard { margin-bottom: 22px; }
.nutrition-dashboard .section-title { margin-top: 0; }
.nutrition-card { padding: 20px; background: var(--card); }
.nutrition-date-label { color: var(--muted); }
.nutrition-date-label input { background: #2c2c31; color: var(--text); border: 1px solid #414147; min-height: 40px; }
.nutrition-arrow { width: 44px; height: 44px; padding: 0; font-size: 24px; background: #2b2b30; }
.nutrition-energy { margin: 25px 0 20px; }
.nutrition-energy strong { font-size: 44px; letter-spacing: -1.8px; font-weight: 750; }
.nutrition-energy>span { font-size: 12px; }
.nutrition-macros { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.nutrition-macro { background: #27272b; border-radius: 14px; padding: 13px 11px; gap: 9px; }
.nutrition-macro>span { color: var(--pink); font-size: 11px; }
.nutrition-macro:nth-child(2)>span { color: var(--cyan); }
.nutrition-macro:nth-child(3)>span { color: var(--violet); }
.nutrition-macro:nth-child(4)>span { color: var(--lime); }
.nutrition-macro strong { font-size: 21px; letter-spacing: -.4px; }
.nutrition-macro small { color: #b6b6c0; margin-left: 3px; }
.nutrition-footer { font-size: 11px; line-height: 1.5; }
.nutrition-latest { color: var(--cyan); min-height: 44px; }
.nutrition-help summary { color: #d0d0d8; }
.nutrition-help p { color: var(--muted); }
.nutrition-actions { gap: 10px; }
.nutrition-actions>.primary { flex: 1; }
.nutrition-import, .nutrition-transfer { background: #141416; border-color: #48484f; padding: 16px; }
.nutrition-import textarea, .nutrition-transfer textarea { background: #09090b; border-color: #63636e; color: var(--text); }
.nutrition-import textarea:focus { outline-color: var(--lime); }
.nutrition-preview-list li span { color: var(--cyan); }
.nutrition-result.success { background: #213327; color: #b0ecc5; }
.nutrition-result.error { background: #3b2229; color: #ffb5c4; }
.nutrition-location { font-size: 12px; }
.activity-pair { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 16px; }
.activity-pair>div { display: grid; gap: 8px; min-width: 0; }
.activity-pair span { font-size: 13px; color: var(--muted); }
.activity-pair strong, .weight-summary strong { font-size: clamp(24px,7vw,34px); letter-spacing: -.6px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.activity-pair small, .weight-summary small { font-size: 14px; color: var(--muted); font-weight: 400; }
.summary-note, .summary-period, .weight-summary p, .health-chip small { font-size: 12px; line-height: 1.5; color: var(--muted); }
.summary-note { margin: 14px 0 0; }
.summary-period { margin: 0 0 18px; }
.day-picker { background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 8px; min-height: 44px; font-size: 16px; min-width: 0; max-width: 100%; }
.home-nutrition { margin-top: 26px; }
.profile-editor { display: flex; gap: 18px; align-items: center; }
.profile-editor>div:last-child { min-width: 0; }
.profile-preview { width: 68px; height: 68px; flex-basis: 68px; }
.photo-picker { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.photo-picker input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.photo-picker:focus-within { outline: 2px solid var(--lime); outline-offset: 3px; }
@media (hover:hover) {
  .primary:hover, .primary.light:hover { background: #d7ff73; }
  .secondary:hover, .hero-secondary:hover { background: #3b3b41; }
  .nav-btn:hover { color: var(--text); }
  .nav-btn.active:hover { color: var(--lime); }
}
@media (max-width:430px) {
  main { padding: 20px 16px; }
  .topbar { padding-left: 18px; padding-right: 18px; }
  .dashboard-intro h2 { font-size: 32px; }
  .hero { padding: 19px; border-radius: 22px; }
  .hero h2 { font-size: 24px; }
  .hero-actions .primary { flex: 1.3; }
  .hero-actions .hero-secondary { flex: 1; }
  .hero-actions button { font-size: 13px; padding-left: 12px; padding-right: 12px; }
  .metric, .health-chip, .card { box-shadow: none; }
  .metric { padding: 16px; }
  .metric .value { font-size: 27px; }
  .nutrition-card { padding: 16px; }
  .nutrition-macros { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .nutrition-energy strong { font-size: 40px; }
  .health-chip { padding: 14px 10px; }
  .health-chip strong { font-size: 16px; }
  .settings-row { gap: 12px; padding: 16px; }
  .sync-strip { align-items: center; padding: 14px; }
  .sync-strip .secondary { white-space: normal; max-width: 132px; }
  .tabs { margin-right: -16px; padding-right: 16px; }
}
@media (max-width:350px) {
  .workout-symbol { width: 44px; height: 44px; flex-basis: 44px; padding: 10px; }
  .workout-heading { gap: 10px; }
  .settings-row { flex-wrap: wrap; }
  .sync-strip { flex-wrap: wrap; }
  .section-title { flex-wrap: wrap; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}