/* GarminCoach 2026 interface layer. This intentionally follows style.css so
   legacy component behavior remains available while the visual system is unified. */
:root {
  --bg: #090c0f;
  --surface: #0f1317;
  --surface-raised: #151a1f;
  --card: #181d22;
  --card-soft: #20262c;
  --fg: #f6f8fa;
  --muted: #8d969f;
  --muted-strong: #b8c0c7;
  --accent: #12b8ff;
  --accent-strong: #56ccff;
  --sleep: #8bc7e8;
  --load: #079df0;
  --fitness: #9b6dff;
  --success: #00e676;
  --warning: #ffb020;
  --danger: #ff596c;
  --border: #30363d;
  --border-soft: #242a30;
  --input: #0e1216;
  --shadow: 0 22px 60px rgba(0,0,0,.28);
  --radius: 16px;
  --radius-sm: 10px;
  --sidebar: 232px;
  --content: 1440px;
}

html { background: var(--bg); }
body { background: radial-gradient(circle at 75% -20%, rgba(18,184,255,.08), transparent 32rem), var(--bg); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select, textarea { font: inherit; }
a, button { -webkit-tap-highlight-color: transparent; }
.ui-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 200; padding: .7rem 1rem; background: #fff; color: #000; border-radius: 8px; }
.skip-link:focus { top: 1rem; }

/* Application shell */
.app-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 60; width: var(--sidebar); display: flex; flex-direction: column; padding: 1.25rem .85rem; border-right: 1px solid var(--border-soft); background: rgba(13,16,19,.97); }
.gc-brand { display: inline-flex; align-items: center; gap: .7rem; min-height: 48px; padding: .25rem .4rem; color: var(--fg); text-decoration: none; }
.gc-mark { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(86,204,255,.55); border-radius: 50%; background: radial-gradient(circle at 32% 28%, rgba(86,204,255,.22), rgba(7,157,240,.06) 55%, transparent 56%); box-shadow: inset 0 0 0 4px #12171b, 0 0 24px rgba(18,184,255,.12); color: #fff; font-size: .75rem; font-weight: 800; letter-spacing: -.08em; }
.gc-wordmark { font-size: 1rem; font-weight: 800; letter-spacing: -.035em; }
.gc-wordmark span { color: var(--accent-strong); }
.side-nav { display: flex; flex-direction: column; align-items: stretch; gap: .3rem; margin-top: 2rem; }
.side-nav a, .nav-action { display: flex; align-items: center; gap: .85rem; width: 100%; min-height: 48px; padding: .7rem .85rem; border: 0; border-radius: 12px; background: transparent; color: var(--muted); font-size: .88rem; font-weight: 650; text-decoration: none; text-align: left; cursor: pointer; }
.side-nav a:hover, .nav-action:hover { background: rgba(255,255,255,.045); color: var(--fg); }
.side-nav a.active { background: linear-gradient(90deg, rgba(18,184,255,.18), rgba(18,184,255,.06)); color: #fff; box-shadow: inset 3px 0 var(--accent); }
.side-nav a.active .ui-icon { color: var(--accent-strong); }
.sidebar-footer { display: grid; gap: .65rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--border-soft); }
.sidebar-footer form { margin: 0; }
.sidebar-caption { padding: 0 .85rem; color: #626b74; font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.app-main { width: auto; max-width: none; min-height: 100vh; margin-left: var(--sidebar); padding: 2.2rem clamp(1.4rem, 3vw, 3.5rem) 4rem; }
.app-main > * { max-width: var(--content); margin-left: auto; margin-right: auto; }
.bottom-nav, .more-sheet { display: none; }

/* Shared typography and controls */
h1, h2, h3 { color: var(--fg); letter-spacing: -.025em; }
h1 { font-size: clamp(2rem, 4vw, 3.25rem); }
h2 { font-size: clamp(1.45rem, 2.2vw, 2rem); }
h3 { font-size: 1rem; }
.eyebrow, .card-kicker, .tile-label { color: var(--muted-strong); font-size: .68rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.muted { color: var(--muted); }
.page-heading { position: sticky; top: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin: calc(-1 * clamp(1.4rem, 3vw, 3.5rem)) calc(-1 * clamp(1.4rem, 3vw, 3.5rem)) 1.75rem; padding: 1.25rem clamp(1.4rem, 3vw, 3.5rem) .85rem; background: rgba(9,12,15,.95); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,.06); }
.page-heading h1 { margin: .25rem 0 .4rem; }
.page-heading p { margin: 0; }
.page-heading-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.card, .tile, .add-session-panel { border: 1px solid var(--border-soft); border-radius: var(--radius); background: linear-gradient(145deg, rgba(31,37,43,.98), rgba(20,25,30,.98)); box-shadow: none; }
.card { padding: 1.35rem; }
.progression-page { max-width: 1050px; margin: 0 auto; }
.progression-list { display: grid; gap: 1rem; }
.progression-card-head, .progression-actions { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.progression-card h2 { margin: .3rem 0 0; }
.progression-direction, .progression-result { padding: .4rem .7rem; border-radius: 999px; background: rgba(18,184,255,.12); color: var(--accent); font-weight: 750; }
.progression-result { display: inline-block; }
.progression-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; margin: 1rem 0; }
.progression-stats div, .evidence-row { padding: .75rem; border-radius: 10px; background: rgba(255,255,255,.035); }
.progression-stats dt, .evidence-row small { color: var(--muted); font-size: .78rem; }
.progression-stats dd { margin: .2rem 0 0; font-weight: 800; }
.progression-evidence summary { cursor: pointer; font-weight: 750; }
.evidence-row { display: grid; gap: .3rem; margin-top: .65rem; }
.evidence-row ul { margin: .25rem 0 0; padding-left: 1.1rem; }
.evidence-row em { color: var(--accent); font-style: normal; font-size: .78rem; }
.progression-actions { margin-top: 1rem; align-items: end; }
.progression-actions form:first-child { display: grid; grid-template-columns: minmax(10rem, 1fr) auto; align-items: end; gap: .6rem; flex: 1; }
.progression-actions label { grid-column: 1 / -1; font-weight: 700; }
.progression-actions input { min-height: 44px; }
.progression-history { margin-top: 2rem; }
@media (max-width: 640px) { .progression-card-head, .progression-actions { flex-direction: column; } .progression-stats { grid-template-columns: 1fr; } .progression-actions, .progression-actions form, .progression-actions form:first-child { width: 100%; } .progression-actions form:first-child { grid-template-columns: 1fr; } .progression-actions button { width: 100%; } }
.card:hover { border-color: #353d45; }
.btn, .btn-secondary, .btn-ghost, .btn-danger-outline { min-height: 44px; border-radius: 999px; font-weight: 750; letter-spacing: -.01em; }
.btn { border: 1px solid var(--accent); background: var(--accent); color: #001017; box-shadow: 0 8px 22px rgba(18,184,255,.16); }
.btn:hover { background: var(--accent-strong); border-color: var(--accent-strong); transform: translateY(-1px); }
.btn-secondary { border: 1px solid var(--border); background: rgba(255,255,255,.035); color: var(--fg); }
.btn-secondary:hover { border-color: #505962; background: rgba(255,255,255,.07); }
.btn.small, .btn-secondary.small, .btn.btn-sm, .btn-secondary.btn-sm, .btn-danger-outline.btn-sm { min-height: 38px; padding: .45rem .85rem; font-size: .78rem; }
input, select, textarea { min-height: 46px; border: 1px solid var(--border); border-radius: 10px; background: var(--input); color: var(--fg); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(18,184,255,.13); }
textarea { min-height: 110px; }
:is(a,button,input,select,textarea,[tabindex]):focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; }
.notice, .sync-banner, .success-card, .error { border-radius: 12px; }
.info { border-color: #55606a; color: var(--muted-strong); }

/* Dashboard */
.dashboard-page { display: grid; gap: 1.6rem; padding-top: .75rem; }
/* Recommendation 1: Header & Sync Status Bar Polish */
.today-heading { position: sticky; top: 0; z-index: 40; align-items: center; margin: calc(-1 * clamp(1.4rem, 3vw, 3.5rem)) calc(-1 * clamp(1.4rem, 3vw, 3.5rem)) .25rem; padding: 1.25rem clamp(1.4rem, 3vw, 3.5rem) .85rem; background: rgba(9,12,15,.95); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,.06); }
.today-heading .eyebrow { display: inline-block; padding: .25rem .75rem; border-radius: 999px; background: linear-gradient(135deg, rgba(18,184,255,.18), rgba(7,157,240,.06)); border: 1px solid rgba(86,204,255,.35); color: var(--accent-strong); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .4rem; }
.today-title { display: flex; align-items: baseline; gap: .85rem; }
.today-title h1 { margin: 0; font-size: clamp(1.8rem, 3.5vw, 2.5rem); font-weight: 850; color: #fff; letter-spacing: -.03em; }
.today-date { color: var(--muted-strong); font-size: .88rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.sync-cluster { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; justify-content: flex-end; padding: .45rem .85rem; border-radius: 14px; background: rgba(18,24,31,.75); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(10px); }
.sync-freshness { display: flex; align-items: center; gap: .5rem; color: var(--muted-strong); font-size: .78rem; font-weight: 650; }
.sync-dot { width: 8px; height: 8px; border-radius: 50%; background: #00e676; box-shadow: 0 0 10px rgba(0,230,118,.8); animation: pulse-sync 2.5s infinite ease-in-out; }
@keyframes pulse-sync { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: .7; } }
.dashboard-actions { display: flex; gap: .45rem; }
.dashboard-actions [hidden] { display: none !important; }
.dashboard-actions form { margin: 0; }
.dashboard-actions .btn { border-radius: 10px; min-height: 36px; padding: .35rem .9rem; font-weight: 750; font-size: .82rem; background: linear-gradient(135deg, #12b8ff, #009ceb); border: 1px solid #56ccff; color: #001017; box-shadow: 0 4px 14px rgba(18,184,255,.3); transition: all .18s ease; }
.dashboard-actions .btn:hover { background: linear-gradient(135deg, #56ccff, #12b8ff); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(18,184,255,.45); }
/* Recommendation 2: Hero Metrics Grid Modernization */
.hero-metrics { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; padding: clamp(1.3rem,2.6vw,2.2rem); overflow: hidden; border: 1px solid rgba(86,204,255,.25); border-radius: 24px; background: radial-gradient(circle at 50% -30%, rgba(39,51,59,.95) 0, rgba(23,28,33,.95) 45%, rgba(15,19,23,.98) 100%); box-shadow: 0 16px 45px rgba(0,0,0,.35), 0 0 25px rgba(18,184,255,.08); }
.hero-metric { --ring-color: var(--accent); display: grid; justify-items: center; align-content: start; min-width: 0; padding: .5rem; text-align: center; }
.hero-metric.sleep { --ring-color: var(--sleep); }
.hero-metric.load { --ring-color: var(--load); }
.hero-metric.readiness.good { --ring-color: #00e676; }
.hero-metric.readiness.caution { --ring-color: #ffb020; }
.hero-metric.readiness.poor { --ring-color: #ff596c; }

/* ACWR Range Bar Gauge */
.acwr-range-card { width: 100%; max-width: 240px; display: grid; justify-items: center; align-content: center; gap: .65rem; margin-top: .4rem; }
.acwr-val-display { display: flex; align-items: baseline; gap: .35rem; }
.acwr-main-num { font-size: clamp(2.1rem,4.2vw,3.4rem); font-weight: 850; color: #fff; letter-spacing: -.06em; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.acwr-main-unit { color: var(--accent-strong); font-size: .75rem; font-weight: 800; letter-spacing: .1em; }
.acwr-range-track { position: relative; width: 100%; height: 20px; border-radius: 999px; display: flex; overflow: visible; background: rgba(0,0,0,.4); padding: 2px; border: 1px solid rgba(255,255,255,.1); }
.acwr-segment { height: 100%; display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: rgba(255,255,255,.95); text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.acwr-segment.zone-under { width: 40%; background: linear-gradient(90deg, #12b8ff, #009ceb); border-radius: 999px 0 0 999px; }
.acwr-segment.zone-optimal { width: 25%; background: linear-gradient(90deg, #00e676, #00c853); }
.acwr-segment.zone-over { width: 35%; background: linear-gradient(90deg, #ffb020, #ff596c); border-radius: 0 999px 999px 0; }
.acwr-pin { position: absolute; top: 50%; transform: translate(-50%, -50%); transition: left .4s cubic-bezier(.34,1.56,.64,1); z-index: 3; }
.acwr-pin-dot { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3.5px solid #001017; box-shadow: 0 0 12px rgba(255,255,255,.9), 0 4px 8px rgba(0,0,0,.5); }
.acwr-range-ticks { width: 100%; display: flex; justify-content: space-between; color: var(--muted-strong); font-size: .65rem; font-weight: 750; }
.acwr-explain { text-align: center; color: var(--muted-strong); font-size: .76rem; font-weight: 650; font-style: italic; line-height: 1.35; }
.acwr-detail-explain { text-align: center; color: var(--muted); font-size: .7rem; font-weight: 600; margin-top: .2rem; }

.metric-ring { --ring-pct: 0; position: relative; display: grid; place-items: center; width: clamp(140px,15vw,210px); aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--ring-color) calc(var(--ring-pct) * 1%), #273037 0); box-shadow: 0 0 36px color-mix(in srgb, var(--ring-color) 25%, transparent); }
.metric-ring::before { content: ""; position: absolute; inset: 10px; border-radius: inherit; background: radial-gradient(circle at 50% 35%, #1d242a, #0e1216 76%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.metric-ring-content { position: relative; z-index: 1; display: grid; justify-items: center; line-height: 1; }
.metric-ring-value { font-size: clamp(2.1rem,4.2vw,3.6rem); font-weight: 850; letter-spacing: -.06em; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.metric-ring-unit { margin-top: .4rem; color: var(--muted-strong); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.hero-metric-label { display: flex; align-items: center; gap: .35rem; margin-top: 1rem; color: #fff; font-size: .84rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.hero-metric-label .ui-icon { width: 18px; height: 18px; color: var(--ring-color); filter: drop-shadow(0 0 6px var(--ring-color)); }
.hero-metric-detail { min-height: 1.3rem; margin-top: .35rem; color: var(--muted-strong); font-size: .78rem; font-weight: 650; }
.hero-metric-sub { margin-top: .35rem; padding: .2rem .65rem; border-radius: 999px; background: rgba(18,184,255,.1); border: 1px solid rgba(86,204,255,.3); color: var(--accent-strong); font-size: .82rem; font-weight: 750; letter-spacing: .03em; display: inline-block; }
.hero-recovery-signals { grid-column: span 1; align-content: stretch; text-align: left; }
.hero-recovery-signals .recovery-signal-list { width: 100%; margin-top: .8rem; }
.hero-recovery-signals .recovery-signal-row { display: grid; grid-template-columns: 110px 145px 1fr; align-items: center; gap: .5rem; padding: .65rem 0; border-bottom: 1px dashed rgba(255,255,255,.08); }
.hero-recovery-signals .recovery-signal-row:last-child { border-bottom: 0; }
.hero-recovery-signals .signal-label { font-size: .78rem; font-weight: 750; color: var(--muted-strong); white-space: nowrap; }
.recovery-signal-indicator { padding: .25rem .65rem; border-radius: 999px; font-size: .72rem; font-weight: 750; display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; justify-self: start; }
.hero-recovery-signals .signal-val { font-size: .76rem; font-weight: 700; color: var(--fg); white-space: normal; word-break: break-word; line-height: 1.3; }
.recovery-signal-indicator.good { background: rgba(0,230,118,.12); border: 1px solid rgba(0,230,118,.3); color: #00e676; }
.recovery-signal-indicator.caution { background: rgba(255,176,32,.12); border: 1px solid rgba(255,176,32,.3); color: #ffb020; }
.recovery-signal-indicator.poor { background: rgba(255,89,108,.12); border: 1px solid rgba(255,89,108,.3); color: #ff596c; }
.recovery-signal-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.metric-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-top: .5rem; margin-bottom: .85rem; }
.metric-section-heading h2 { margin: 0; font-size: 1.4rem; font-weight: 850; color: #fff; letter-spacing: -.02em; }

/* Recommendation 3: Performance & Health Metric Tiles */
.secondary-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .9rem; }
.secondary-metrics .tile { min-width: 0; margin: 0; padding: 1.15rem 1.25rem; border-radius: 18px; background: linear-gradient(145deg, rgba(23,28,34,.95), rgba(15,19,23,.95)); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 10px 30px rgba(0,0,0,.25); transition: all .18s ease; }
.secondary-metrics .tile:hover { border-color: rgba(18,184,255,.35); transform: translateY(-2px); box-shadow: 0 12px 35px rgba(0,0,0,.35), 0 0 20px rgba(18,184,255,.1); }
.tile-label { color: var(--muted-strong); font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.secondary-metrics .tile-value { margin-top: .75rem; font-size: clamp(1.6rem,2.5vw,2.3rem); font-weight: 850; color: #fff; line-height: 1.1; }
.secondary-metrics .tile-unit { font-size: .74rem; font-weight: 750; color: var(--accent-strong); }
.tile-sub { color: var(--muted-strong); font-size: .78rem; font-weight: 600; margin-top: .4rem; }
.trend.up { padding: .15rem .45rem; border-radius: 999px; background: rgba(0,230,118,.12); border: 1px solid rgba(0,230,118,.3); color: #00e676; font-size: .74rem; font-weight: 750; }
.trend.down { padding: .15rem .45rem; border-radius: 999px; background: rgba(255,89,108,.12); border: 1px solid rgba(255,89,108,.3); color: #ff596c; font-size: .74rem; font-weight: 750; }
.trend.flat { padding: .15rem .45rem; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: var(--muted); font-size: .74rem; font-weight: 700; }
.secondary-metrics .recovery-signals-tile { grid-column: span 2; }
.secondary-metrics .tile-gauge .gauge { width: 150px !important; height: 75px !important; overflow: hidden; margin: 0 auto; }
/* Recommendation 4: Trends Charts Modernization */
.chart-grid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 1rem; }
.chart-card { min-width: 0; margin: 0; padding: 1.35rem 1.45rem; border-radius: 20px; background: linear-gradient(145deg, rgba(23,28,34,.95), rgba(15,19,23,.95)); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 10px 30px rgba(0,0,0,.25); transition: all .18s ease; }
.chart-card:hover { border-color: rgba(18,184,255,.32); box-shadow: 0 12px 35px rgba(0,0,0,.35), 0 0 20px rgba(18,184,255,.08); }
.chart-card[data-chart="sleep"], .chart-card[data-chart="hrv"] { grid-column: span 3; }
.chart-card[data-chart="rhr"], .chart-card[data-chart="steps"], .chart-card[data-chart="calories"], .chart-card[data-chart="stress"], .chart-card[data-chart="body-battery"] { grid-column: span 2; }
.chart-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.chart-range-control { display: inline-flex; gap: .25rem; padding: .2rem; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; }
.chart-range-control button { appearance: none; border: 0; border-radius: 7px; background: transparent; color: #9aacbc; cursor: pointer; font: inherit; font-size: .82rem; font-weight: 700; padding: .4rem .65rem; }
.chart-range-control button[aria-pressed="true"] { background: rgba(18,184,255,.2); color: #dff6ff; }
.chart-range-control button:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.recovery-health-trends { display: grid; gap: .85rem; }
.slow-metric-history { display: grid; gap: .85rem; margin-top: 1.5rem; }
.slow-history-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.slow-history-card { min-width: 0; padding: 1.1rem 1.2rem; }
.slow-history-card h3 { margin-top: 0; }
.slow-chart-wrap { height: 180px; margin-top: .75rem; }
.status-history-list { margin: .75rem 0 0; padding-left: 1.2rem; color: #9aacbc; }
.trend-authority-note { margin: 0; color: #dff6ff; font-weight: 700; }
.trend-coverage-legend { margin: 0; font-size: .86rem; }
.trend-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.trend-card { min-width: 0; padding: 1rem 1.1rem; }
.trend-card h3 { margin: 0 0 .65rem; font-size: 1rem; }
.trend-card p { margin: .45rem 0 0; font-size: .88rem; }
.trend-card-value { display: block; font-size: 1.2rem; color: #f5fbff; }
.body-battery-trend { grid-column: span 2; }
.body-battery-primary { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.body-battery-primary span { display: grid; gap: .15rem; }
.body-battery-primary small { color: #9aacbc; }
.trend-movement-context { padding: .8rem 1rem; border-left: 3px solid rgba(155,109,255,.75); background: rgba(155,109,255,.08); border-radius: 8px; color: #dce6ef; }
.chart-head h3 { margin: 0; color: #fff; font-size: 1.05rem; font-weight: 750; letter-spacing: -.015em; text-transform: none; display: flex; align-items: center; gap: .4rem; }
.info { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(18,184,255,.35); background: rgba(18,184,255,.08); color: var(--accent-strong); font-size: .65rem; font-weight: 800; display: inline-grid; place-items: center; transition: all .15s ease; }
.info:hover, .info:focus { background: rgba(18,184,255,.2); border-color: var(--accent); color: #fff; }
.chart-wrap { height: 250px; }
.collapse-btn { display: none !important; }
.chart-card.collapsed .chart-wrap { display: block !important; }
/* Recommendation 5: Recent Workouts Table Modernization */
.activities-card { padding: 0; overflow: hidden; border-radius: 20px; background: linear-gradient(145deg, rgba(23,28,34,.95), rgba(15,19,23,.95)); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.activities-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.45rem; border-bottom: 1px solid rgba(255,255,255,.08); background: linear-gradient(90deg, rgba(18,184,255,.1), rgba(7,157,240,.02) 60%, transparent); }
.activities-head h2 { margin: 0; font-size: 1.25rem; font-weight: 850; color: #fff; }
.activities-table { margin: 0; width: 100%; border-collapse: collapse; }
.activities-table th { color: var(--muted-strong); font-size: .72rem; letter-spacing: .08em; font-weight: 800; text-transform: uppercase; padding: .85rem 1rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.activities-table td { padding: .85rem 1rem; border-bottom: 1px solid rgba(255,255,255,.04); font-weight: 650; }
.activities-table tr { transition: background .15s ease; }
.activities-table tbody tr:hover { background: rgba(18,184,255,.06); }
.activities-table tr:last-child td { border-bottom: 0; }
.activities-table td a { display: inline-block; padding: .25rem .65rem; border-radius: 8px; background: rgba(18,184,255,.08); border: 1px solid rgba(18,184,255,.25); color: var(--accent-strong); font-size: .78rem; font-weight: 750; text-decoration: none; transition: all .15s ease; }
.activities-table td a:hover { background: rgba(18,184,255,.22); border-color: var(--accent); color: #fff; }
#pagination-controls { padding: 1rem; border-top: 1px solid rgba(255,255,255,.06); }
#pagination-controls .btn { padding: .35rem .85rem; border-radius: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: var(--fg); font-weight: 700; transition: all .15s ease; }
#pagination-controls .btn:hover:not(:disabled) { background: rgba(18,184,255,.18); border-color: var(--accent); color: #fff; }
#pagination-controls .btn:disabled { opacity: .3; cursor: not-allowed; }
.activity-mobile-list { display: none; }
.activity-card-link { color: inherit; text-decoration: none; }

/* Calendar Polish */
.calendar-page { display: grid; gap: 1.25rem; }
.calendar-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0; padding: .5rem 0; }
.calendar-header .btn-secondary { border-radius: 12px; padding: .45rem 1rem; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: var(--fg); font-weight: 750; font-size: .85rem; transition: all .18s ease; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; }
.calendar-header .btn-secondary:hover { background: rgba(18,184,255,.18); border-color: var(--accent); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(18,184,255,.25); }
.calendar-title { text-align: center; }
.calendar-title h1 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 850; color: #fff; letter-spacing: -.03em; }
.calendar-grid { gap: 4px; padding: 4px; border: 1px solid rgba(255,255,255,.08); border-radius: 20px; background: rgba(15,19,23,.95); box-shadow: 0 16px 45px rgba(0,0,0,.35); overflow: hidden; }
.weekday-header { padding: .6rem 0; background: rgba(23,28,34,.95); color: var(--muted-strong); font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; text-align: center; border-radius: 6px; }
.calendar-cell { min-height: 125px; padding: .65rem; border: 1px solid rgba(255,255,255,.03); border-radius: 12px; background: rgba(23,28,34,.6); transition: all .15s ease; }
.calendar-cell:hover:not(.other-month) { background: rgba(27,33,40,.9); border-color: rgba(18,184,255,.2); }
.calendar-cell.other-month { opacity: .35; background: rgba(15,19,23,.4); }
.calendar-cell.today { background: linear-gradient(145deg, rgba(18,184,255,.18), rgba(15,19,23,.95) 75%); border: 1px solid rgba(86,204,255,.55); box-shadow: inset 0 0 18px rgba(18,184,255,.12), 0 0 15px rgba(18,184,255,.15); }
.date-num { font-size: .88rem; font-weight: 850; color: #fff; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-green { background: #00e676; box-shadow: 0 0 8px rgba(0,230,118,.8); }
.dot-yellow { background: #ffb020; box-shadow: 0 0 8px rgba(255,176,32,.8); }
.dot-red { background: #ff596c; box-shadow: 0 0 8px rgba(255,89,108,.8); }
.act-pill { border: 1px solid rgba(18,184,255,.25); border-left: 3px solid var(--accent); border-radius: 8px; background: linear-gradient(135deg, rgba(18,184,255,.12), rgba(7,157,240,.04)); color: #fff; font-size: .78rem; font-weight: 700; padding: .3rem .5rem; transition: all .15s ease; text-decoration: none; }
.act-pill:hover { background: linear-gradient(135deg, rgba(18,184,255,.25), rgba(7,157,240,.12)); border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(18,184,255,.25); }
.calendar-agenda { display: none; }

/* Workout Details Polish */
.workout-page { display: grid; gap: 1.25rem; }
.workout-hero { position: relative; overflow: hidden; padding: clamp(1.5rem,3.2vw,2.5rem); border-radius: 22px; border: 1px solid rgba(86,204,255,.25); background: radial-gradient(circle at 85% 0, rgba(18,184,255,.22), transparent 28rem), linear-gradient(145deg, rgba(23,28,34,.95), rgba(15,19,23,.95)); box-shadow: 0 16px 45px rgba(0,0,0,.35), 0 0 25px rgba(18,184,255,.08); }
.workout-hero-head h1 { margin: .25rem 0 .4rem; font-size: clamp(1.8rem,3.5vw,2.8rem); font-weight: 850; color: #fff; letter-spacing: -.03em; }
.workout-hero .type-tag { padding: .35rem .85rem; border-radius: 999px; background: linear-gradient(135deg, rgba(18,184,255,.2), rgba(7,157,240,.08)); border: 1px solid rgba(86,204,255,.4); color: var(--accent-strong); font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.workout-stat-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: .85rem; margin-top: 1.8rem; }
.workout-stat { padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.08); }
.workout-stat b { display: block; font-size: clamp(1.3rem, 2.2vw, 1.8rem); font-weight: 850; color: #fff; letter-spacing: -.04em; line-height: 1.1; }
.workout-stat span { color: var(--muted-strong); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; margin-top: .2rem; display: block; }
.workout-section { margin: 0; border-radius: 20px; background: linear-gradient(145deg, rgba(23,28,34,.95), rgba(15,19,23,.95)); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 10px 30px rgba(0,0,0,.25); padding: 1.5rem; }
.exercise { padding: 1rem 0; border-bottom: 1px dashed rgba(255,255,255,.08); }
.exercise:last-child { border-bottom: 0; }
.set-pill { border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(0,0,0,.3); padding: .3rem .65rem; color: #fff; font-size: .8rem; font-weight: 700; }
.cardio-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .9rem; }
.cardio-stat { padding: 1rem 1.15rem; border-radius: 14px; background: rgba(18,24,31,.75); border: 1px solid rgba(255,255,255,.06); }
.cardio-value { font-size: 1.4rem; font-weight: 850; color: #fff; margin-top: .2rem; }
.hrz-track { height: 16px; border-radius: 999px; background: rgba(0,0,0,.4); padding: 2px; border: 1px solid rgba(255,255,255,.08); overflow: hidden; }
.hrz-fill { height: 100%; border-radius: 999px; transition: width .4s ease; }
.hrz-z0 { background: linear-gradient(90deg, #5a6b76, #788b99); }
.hrz-z1 { background: linear-gradient(90deg, #12b8ff, #009ceb); box-shadow: 0 0 10px rgba(18,184,255,.4); }
.hrz-z2 { background: linear-gradient(90deg, #00e676, #00c853); box-shadow: 0 0 10px rgba(0,230,118,.4); }
.hrz-z3 { background: linear-gradient(90deg, #ffb020, #ffa000); box-shadow: 0 0 10px rgba(255,176,32,.4); }
.hrz-z4 { background: linear-gradient(90deg, #ff7043, #f4511e); box-shadow: 0 0 10px rgba(255,112,67,.4); }
.hrz-z5 { background: linear-gradient(90deg, #ff596c, #e53935); box-shadow: 0 0 10px rgba(255,89,108,.4); }

/* Training Plan Polish */
.plan-proposal-card { border-color: rgba(86,204,255,.35); border-radius: 22px; background: linear-gradient(145deg, rgba(18,184,255,.14), rgba(7,157,240,.04) 50%, rgba(15,19,23,.95)); box-shadow: 0 16px 45px rgba(0,0,0,.35), 0 0 25px rgba(18,184,255,.08); }
.plan-proposal-card .badge { background: linear-gradient(135deg, rgba(18,184,255,.2), rgba(7,157,240,.08)); border: 1px solid rgba(86,204,255,.4); color: var(--accent-strong); font-weight: 800; }
.plan-sessions-list { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .75rem; }
.plan-session-badge { display: inline-flex; align-items: center; gap: .55rem; padding: .55rem 1rem; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; background: rgba(23,28,34,.95); transition: all .18s ease; }
.plan-session-badge:hover { border-color: rgba(18,184,255,.35); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(18,184,255,.15); }
.plan-session-num { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #12b8ff, #009ceb); border: 1px solid #56ccff; color: #001017; font-weight: 850; font-size: .78rem; box-shadow: 0 0 10px rgba(18,184,255,.4); }
.plan-template-card { border-radius: 20px; overflow: hidden; background: linear-gradient(145deg, rgba(23,28,34,.95), rgba(15,19,23,.95)); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.plan-template-header { margin: 0; padding: 1.15rem 1.45rem; border-bottom: 1px solid rgba(255,255,255,.08); background: linear-gradient(90deg, rgba(18,184,255,.1), rgba(7,157,240,.02) 60%, transparent); }
.session-garmin-status.is-ready { color: #00e676; text-shadow: 0 0 8px rgba(0,230,118,.4); font-weight: 750; }
.exercise-row { border: 1px solid rgba(255,255,255,.06); border-radius: 14px; background: rgba(18,24,31,.6); padding: 1rem 1.15rem; transition: all .15s ease; }
.exercise-row:hover { border-color: rgba(18,184,255,.2); background: rgba(22,29,37,.8); }
.exercise-name { font-size: 1rem; font-weight: 850; color: #fff; }
.exercise-replace { border-radius: 8px; padding: .25rem .6rem; background: rgba(18,184,255,.08); border: 1px solid rgba(18,184,255,.25); color: var(--accent-strong); font-weight: 750; transition: all .15s ease; }
.exercise-replace:hover { background: rgba(18,184,255,.22); border-color: var(--accent); color: #fff; }
.picker-dialog { border: 1px solid rgba(86,204,255,.3); border-radius: 24px 24px 0 0; background: rgba(15,19,23,.98); backdrop-filter: blur(16px); box-shadow: 0 -20px 60px rgba(0,0,0,.5); }
.picker-result { border-radius: 12px; padding: .75rem 1rem; transition: all .15s ease; }
.picker-result:hover { background: rgba(18,184,255,.12); border-color: rgba(18,184,255,.3); }

/* Onboarding Polish */
.content-header { margin-bottom: 1.5rem; }
.onboarding-shell { max-width: 1160px; }
.onboarding-heading h1 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); letter-spacing: -.03em; }
.onboarding-steps { gap: .85rem; }
.onboarding-steps li { transition: all .2s ease; border-radius: 16px; background: linear-gradient(145deg, rgba(23,28,34,.95), rgba(15,19,23,.95)); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 4px 14px rgba(0,0,0,.2); }
.onboarding-steps li > span { width: 34px; height: 34px; font-size: .85rem; font-weight: 800; transition: all .2s ease; }
.onboarding-steps li.active { border-color: var(--accent); background: linear-gradient(145deg, rgba(18,184,255,.16), rgba(7,157,240,.04)); color: var(--fg); box-shadow: 0 0 25px rgba(18,184,255,.25), inset 0 0 0 1px rgba(86,204,255,.35); }
.onboarding-steps li.active > span { border-color: var(--accent-strong); background: linear-gradient(135deg, #12b8ff, #009ceb); color: #001017; font-weight: 850; box-shadow: 0 0 14px rgba(18,184,255,.6); }
.onboarding-steps li.done { border-color: rgba(0,230,118,.35); background: linear-gradient(145deg, rgba(0,230,118,.08), rgba(0,230,118,.02)); color: var(--muted-strong); }
.onboarding-steps li.done > span { border-color: var(--success); background: rgba(0,230,118,.25); color: #00e676; box-shadow: 0 0 10px rgba(0,230,118,.35); }
.sync-banner { border-radius: 18px; border: 1px solid rgba(18,184,255,.3); background: linear-gradient(145deg, rgba(18,184,255,.12), rgba(7,157,240,.04)); box-shadow: 0 8px 25px rgba(0,0,0,.25); }
.filter-chip { border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: var(--fg); font-weight: 750; transition: all .18s ease; }
.filter-chip:hover, .filter-chip.is-selected { background: rgba(18,184,255,.2); border-color: var(--accent); color: #fff; box-shadow: 0 4px 12px rgba(18,184,255,.25); }
.choice-card { border-radius: 18px; border: 1px solid rgba(255,255,255,.08); background: linear-gradient(145deg, rgba(23,28,34,.95), rgba(15,19,23,.95)); transition: all .18s ease; }
.choice-card:hover { border-color: rgba(18,184,255,.35); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.choice-card:has(input:checked) { border-color: var(--accent); background: linear-gradient(145deg, rgba(18,184,255,.16), rgba(7,157,240,.04)); box-shadow: 0 0 25px rgba(18,184,255,.18), inset 0 0 0 1px rgba(86,204,255,.3); }
.choice-card > span { border-radius: 14px; background: transparent; }
.choice-card input:checked + span { border-color: var(--accent); box-shadow: none; }
.onboarding-submit { border-color: rgba(86,204,255,.35); border-radius: 20px; background: rgba(15,19,23,.98); backdrop-filter: blur(16px); box-shadow: 0 -12px 35px rgba(0,0,0,.4); }

/* Recommendation 2: Recent History & Activity Mix Cards */
.onboarding-findings .card { border-radius: 20px; background: linear-gradient(145deg, rgba(25,31,37,.95), rgba(16,20,25,.95)); border: 1px solid rgba(255,255,255,.08); padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; gap: .75rem; }
.onboarding-findings .card h3 { margin: .1rem 0 .25rem; font-size: 1.35rem; }
.onboarding-findings .card p { margin: 0; }
.activity-count { display: inline-flex; align-items: center; gap: .75rem; align-self: flex-start; margin: .25rem 0 .15rem; padding: .45rem .9rem; border-radius: 12px; background: rgba(18,184,255,.08); border: 1px solid rgba(18,184,255,.2); }
.activity-count strong { font-size: 2.1rem; font-weight: 850; line-height: 1; background: linear-gradient(135deg, #ffffff, var(--accent-strong)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.activity-count span { color: var(--muted-strong); font-size: .78rem; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; }
#training-background { margin-top: .35rem; color: var(--muted); font-size: .85rem; }
.history-bar-track { height: 12px; border-radius: 999px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.05); box-shadow: inset 0 2px 4px rgba(0,0,0,.4); }
.history-bar-track span { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #12b8ff, #56ccff); box-shadow: 0 0 12px rgba(18,184,255,.45); }
.history-bar-label small { padding: .15rem .5rem; border-radius: 999px; background: rgba(255,255,255,.06); color: var(--accent-strong); font-size: .75rem; font-weight: 700; }

/* Recommendation 3: Routine Filter Chips & Choice Card Grid */
.filter-chip { transition: all .18s ease; border-radius: 999px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); color: var(--muted-strong); font-weight: 650; }
.filter-chip:hover { border-color: rgba(18,184,255,.4); background: rgba(18,184,255,.08); color: var(--fg); }
.filter-chip.is-selected { border-color: var(--accent); background: linear-gradient(135deg, rgba(18,184,255,.22), rgba(7,157,240,.1)); color: #fff; box-shadow: 0 0 14px rgba(18,184,255,.25), inset 0 0 0 1px rgba(86,204,255,.3); font-weight: 750; }

/* Single Card Selection (No Radio Checkbox, No Double Card Borders) */
.choice-card input[type="radio"] { display: none !important; }
.choice-card { display: block; border: 0 !important; background: transparent !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; }
.choice-card.is-filtered-out { display: none !important; }
.choice-card > span { display: block; border-radius: 18px; background: linear-gradient(145deg, rgba(23,28,34,.95), rgba(15,19,23,.95)); border: 1px solid rgba(255,255,255,.08); padding: 1.25rem; transition: all .18s ease; }
.choice-card:hover > span { border-color: rgba(18,184,255,.4); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.choice-card input:checked + span { border-color: var(--accent) !important; background: linear-gradient(145deg, rgba(26,35,44,.98), rgba(16,22,28,.98)) !important; box-shadow: 0 0 0 1px var(--accent), 0 14px 32px rgba(18,184,255,.2) !important; }

/* Match Progress Bar Tracks & Scaled Widths per Tone */
.routine-match { padding: .45rem .75rem; border-radius: 12px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.06); margin: .6rem 0; }
.routine-match[data-tone="best"] .routine-match-track span { width: 98% !important; background: linear-gradient(90deg, #00e676, #56ccff) !important; box-shadow: 0 0 14px rgba(0,230,118,.5) !important; }
.routine-match[data-tone="best"] .routine-match-heading { color: var(--success) !important; font-weight: 850; }
.routine-match[data-tone="strong"] .routine-match-track span { width: 78% !important; background: linear-gradient(90deg, #00e676, #12b8ff) !important; box-shadow: 0 0 10px rgba(0,230,118,.35) !important; }
.routine-match[data-tone="good"] .routine-match-track span { width: 60% !important; background: linear-gradient(90deg, #12b8ff, #56ccff) !important; box-shadow: 0 0 10px rgba(18,184,255,.35) !important; }
.routine-match[data-tone="possible"] .routine-match-track span { width: 42% !important; background: linear-gradient(90deg, #ffb020, #ffd060) !important; box-shadow: 0 0 10px rgba(255,176,32,.35) !important; }
.routine-match[data-tone="poor"] .routine-match-track span { width: 12% !important; background: rgba(255,255,255,.25) !important; box-shadow: none !important; }
.routine-detail-fact { padding: .18rem .45rem; border-radius: 6px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.05); }

/* Section Cards, Form Spacing & Label Alignment */
.onboarding-form { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 1.25rem; padding-bottom: 6rem; }
.section-card { border-radius: 20px; background: linear-gradient(145deg, rgba(23,28,34,.95), rgba(15,19,23,.95)); border: 1px solid rgba(255,255,255,.08); padding: clamp(1.2rem, 3vw, 1.75rem); margin-bottom: 0 !important; }
.section-card + .section-card { margin-top: 0 !important; }
.section-emoji { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 14px; background: linear-gradient(135deg, rgba(18,184,255,.12), rgba(7,157,240,.04)); border: 1px solid rgba(86,204,255,.2); font-size: 1.35rem; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.section-heading h2 { font-size: 1.3rem; font-weight: 750; color: #fff; }
.section-heading p { font-size: .88rem; color: var(--muted-strong); margin-top: .2rem; }
.section-card label.field { display: flex; flex-direction: column; gap: .4rem; width: 100%; margin-top: .75rem; color: var(--fg); font-size: .92rem; font-weight: 700; text-align: left; }
.onboarding-form textarea { width: 100%; box-sizing: border-box; border-radius: 14px; background: rgba(10,13,16,.9); border: 1px solid rgba(255,255,255,.12); padding: .85rem 1rem; font-size: .92rem; transition: all .18s ease; margin-top: .2rem; }
.onboarding-form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(18,184,255,.16), 0 8px 20px rgba(0,0,0,.3); background: rgba(14,18,22,1); }
.section-card .field-hint { display: block; margin-top: .4rem; color: var(--muted); font-size: .82rem; }

/* Recommendation 5: Floating / Elevated Sticky Submit Bar */
.onboarding-submit { position: sticky; bottom: 1.25rem; z-index: 20; border-radius: 20px; padding: 1.1rem 1.4rem; background: linear-gradient(135deg, rgba(20,26,33,.94), rgba(12,16,21,.96)); border: 1px solid rgba(86,204,255,.32); backdrop-filter: blur(18px); box-shadow: 0 16px 40px rgba(0,0,0,.45), 0 0 24px rgba(18,184,255,.12); transition: all .2s ease; }
.onboarding-submit b { color: #fff; font-size: 1rem; font-weight: 750; }
.onboarding-submit p { color: var(--muted-strong); font-size: .84rem; margin-top: .2rem; }
.onboarding-submit .btn { min-height: 48px; padding: .65rem 1.6rem; border-radius: 14px; background: linear-gradient(135deg, #12b8ff, #009ceb); border: 1px solid #56ccff; color: #001017; font-weight: 800; font-size: .95rem; box-shadow: 0 8px 24px rgba(18,184,255,.3); transition: all .18s ease; }
.onboarding-submit .btn:hover { background: linear-gradient(135deg, #56ccff, #12b8ff); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(18,184,255,.45); }

/* Recommendation 1: Program Proposal Hero Card Modernization */
.plan-proposal-card { border-radius: 22px; background: radial-gradient(circle at 10% 0%, rgba(18,184,255,.18), rgba(7,157,240,.04) 60%, transparent), linear-gradient(145deg, rgba(25,32,39,.95), rgba(15,19,24,.95)); border: 1px solid rgba(86,204,255,.42); box-shadow: 0 20px 50px rgba(0,0,0,.35), 0 0 30px rgba(18,184,255,.12); padding: clamp(1.5rem, 3.5vw, 2.4rem); }
.plan-proposal-card .badge { padding: .3rem .8rem; border-radius: 999px; background: linear-gradient(135deg, rgba(18,184,255,.22), rgba(7,157,240,.08)); border: 1px solid rgba(86,204,255,.45); color: var(--accent-strong); font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.plan-proposal-card h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; color: #fff; margin-bottom: .6rem; }
.proposal-rationale { font-size: .98rem; line-height: 1.6; color: var(--muted-strong); }
.proposal-rationale strong { color: #fff; font-weight: 750; }
.proposal-note { border-radius: 12px; background: rgba(0,230,118,.08); border: 1px solid rgba(0,230,118,.25); color: var(--fg); padding: .65rem .95rem; font-size: .88rem; font-weight: 600; }
.proposal-note > span:first-child { background: rgba(0,230,118,.25); color: #00e676; border-radius: 50%; width: 22px; height: 22px; font-weight: 850; }
#approve-button { min-height: 48px; padding: .65rem 1.6rem; border-radius: 14px; background: linear-gradient(135deg, #12b8ff, #009ceb); border: 1px solid #56ccff; color: #001017; font-weight: 800; font-size: .95rem; box-shadow: 0 8px 24px rgba(18,184,255,.35); transition: all .18s ease; }
#approve-button:hover { background: linear-gradient(135deg, #56ccff, #12b8ff); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(18,184,255,.5); }

/* Recommendation 2: Workout Template & Session Header Cards */
.plan-template-card { border-radius: 20px; overflow: hidden; background: linear-gradient(145deg, rgba(23,28,34,.95), rgba(15,19,23,.95)); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.plan-template-header { padding: 1.1rem 1.4rem; border-bottom: 1px solid rgba(255,255,255,.08); background: linear-gradient(90deg, rgba(18,184,255,.12), rgba(7,157,240,.02) 60%, transparent); }
.plan-session-num { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(86,204,255,.4); background: rgba(18,184,255,.12); color: var(--accent-strong); font-size: .85rem; font-weight: 850; box-shadow: 0 0 10px rgba(18,184,255,.2); }
.session-garmin-status.is-ready { padding: .25rem .65rem; border-radius: 999px; background: rgba(0,230,118,.12); border: 1px solid rgba(0,230,118,.35); color: #00e676; font-size: .74rem; font-weight: 750; }
.session-garmin-status.is-incomplete { padding: .25rem .65rem; border-radius: 999px; background: rgba(255,176,32,.1); border: 1px solid rgba(255,176,32,.3); color: #ffb020; font-size: .74rem; font-weight: 700; }

/* Recommendation 3: Exercise Row Layout & Input Fields */
.exercise-row { border: 1px solid rgba(255,255,255,.07); border-radius: 14px; background: linear-gradient(145deg, rgba(20,25,30,.9), rgba(14,18,22,.9)); padding: 1rem 1.1rem; transition: all .18s ease; }
.exercise-row:hover { border-color: rgba(18,184,255,.35); background: linear-gradient(145deg, rgba(24,31,38,.95), rgba(15,20,25,.95)); box-shadow: 0 4px 16px rgba(0,0,0,.2); }
.exercise-name { color: #fff; font-size: .98rem; font-weight: 750; }
.exercise-replace { padding: .25rem .6rem; border-radius: 8px; background: rgba(18,184,255,.08); border: 1px solid rgba(18,184,255,.25); color: var(--accent-strong); font-size: .78rem; font-weight: 700; transition: all .15s ease; }
.exercise-replace:hover { background: rgba(18,184,255,.2); border-color: var(--accent); color: #fff; }
.exercise-field input, .exercise-field select { height: 42px; border-radius: 10px; background: rgba(9,12,15,.95); border: 1px solid rgba(255,255,255,.12); color: var(--fg); font-weight: 700; transition: all .15s ease; }
.exercise-field input:focus, .exercise-field select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(18,184,255,.2); background: rgba(12,16,20,1); }
.exercise-actions .remove-exercise { padding: .35rem .75rem; border-radius: 8px; background: rgba(255,89,108,.08); border: 1px solid rgba(255,89,108,.25); color: #ff596c; font-size: .78rem; font-weight: 700; transition: all .15s ease; }
.exercise-actions .remove-exercise:hover { background: rgba(255,89,108,.2); border-color: #ff596c; color: #fff; }

/* Workout Templates Actions & Target Controls Polish */
.plan-templates-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.plan-templates-actions { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }

.exercise-field.target-field { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.exercise-field.target-field > span { width: 100%; text-align: center; margin-bottom: .3rem; }
.exercise-field.target-field .target-control { width: auto; display: flex; align-items: center; justify-content: center; gap: .45rem; }
.exercise-field.target-field .target-select { width: 84px; min-width: 84px; flex: 0 0 84px; }
.exercise-field.target-field .ex-target { width: 68px; flex: 0 0 68px; }

.warmup-target { text-align: center; justify-self: center; width: 100%; }
.warmup-target > span { display: block; text-align: center; width: 100%; margin-bottom: .25rem; }
.warmup-target .target-control { display: flex !important; justify-content: center !important; align-items: center !important; gap: .45rem !important; width: 100% !important; }
.warmup-target .target-control select { width: 84px !important; min-width: 84px !important; flex: 0 0 84px !important; min-height: 38px !important; height: 38px !important; font-size: .84rem !important; }
.warmup-target .target-control input { width: 68px !important; flex: 0 0 68px !important; min-height: 38px !important; height: 38px !important; font-size: .84rem !important; }

.warmup-weight { text-align: center; justify-self: center; width: 100%; }
.warmup-weight > span { display: block; text-align: center; width: 100%; margin-bottom: .25rem; }
.warmup-weight input { margin: 0 auto; width: 92px !important; min-height: 38px !important; height: 38px !important; font-size: .84rem !important; }

.target-control { display: grid; grid-template-columns: 84px minmax(58px, 1fr) auto; gap: .45rem; align-items: center; }
.target-select { position: relative; width: 84px; min-width: 84px; }
.target-control select { width: 100%; border-radius: 10px !important; background: rgba(12,16,21,.95); border: 1px solid rgba(255,255,255,.12) !important; padding: .45rem 1.6rem .45rem .65rem; font-weight: 700; text-align: left; appearance: none; }
.target-chevron { right: .6rem; }
.target-control input { border-radius: 10px !important; border: 1px solid rgba(255,255,255,.12) !important; width: 100%; text-align: center; }
.target-unit, .warmup-target-unit { color: var(--accent-strong); font-weight: 750; font-size: .78rem; }

.warmup-target { text-align: center; justify-self: center; width: 100%; }
.warmup-target > span { display: block; text-align: center; width: 100%; margin-bottom: .25rem; }
.warmup-weight { text-align: center; justify-self: center; width: 100%; }
.warmup-weight > span { display: block; text-align: center; width: 100%; margin-bottom: .25rem; }
.warmup-weight input { margin: 0 auto; }

.exercise-warmup {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  border-top: 0;
  padding-top: 0;
  margin-top: .15rem;
  transition: all .18s ease;
}
.exercise-warmup:has(.warmup-inputs:not(.is-hidden)) {
  display: grid;
  grid-template-columns: minmax(230px, 2.2fr) 72px minmax(160px, 1.15fr) 112px 88px 96px;
  align-items: center;
  gap: .75rem;
  border-top: 1px dashed rgba(255,255,255,.12);
  padding-top: .65rem;
  margin-top: .5rem;
}
.exercise-warmup label { color: var(--muted-strong); font-size: .8rem; font-weight: 650; }
.exercise-warmup:not(:has(.warmup-inputs:not(.is-hidden))) label { font-size: .78rem; color: var(--muted); font-weight: 600; opacity: .75; cursor: pointer; min-height: auto; }
.exercise-warmup:not(:has(.warmup-inputs:not(.is-hidden))) label:hover { opacity: 1; color: var(--fg); }
.exercise-warmup > label:first-child { grid-column: 1 / 3; margin: 0; }
.warmup-inputs { grid-column: 3 / -1; display: grid; grid-template-columns: minmax(160px, 1.15fr) 112px 88px 96px; gap: .75rem; align-items: end; }
.warmup-inputs.is-hidden { display: none !important; }
.add-ex-btn { min-height: 42px; border-radius: 12px; border: 1px dashed rgba(18,184,255,.4); background: rgba(18,184,255,.05); color: var(--accent-strong); font-weight: 750; font-size: .88rem; transition: all .18s ease; margin: 0 1.35rem 1.25rem; width: calc(100% - 2.7rem); }
.add-ex-btn:hover { background: rgba(18,184,255,.14); border-color: var(--accent); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(18,184,255,.2); }

/* Recommendation 5: Exercise Search & Replace Modal Dialog */
.picker-backdrop { background: rgba(4, 7, 10, .82); backdrop-filter: blur(14px); }
.picker-dialog { border: 1px solid rgba(86,204,255,.35) !important; border-radius: 22px !important; background: linear-gradient(145deg, rgba(23,28,34,.98), rgba(15,19,23,.98)) !important; box-shadow: 0 30px 90px rgba(0,0,0,.6), 0 0 30px rgba(18,184,255,.15) !important; padding: 1.6rem !important; }
.picker-close { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.06); color: var(--fg); font-size: 1.3rem; transition: all .15s ease; }
.picker-close:hover { background: rgba(255,89,108,.2); border-color: #ff596c; color: #fff; }
#exercise-search { border-radius: 12px; background: rgba(10,13,16,.95); border: 1px solid rgba(255,255,255,.15); padding: .75rem 1rem; font-size: .95rem; color: #fff; transition: all .18s ease; }
#exercise-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(18,184,255,.2); background: rgba(12,16,21,1); }
.picker-results { overflow-x: hidden !important; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(18,184,255,.3) transparent; padding-right: .2rem; }
.picker-result { width: 100%; box-sizing: border-box; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.05); padding: .85rem 1rem; transition: all .15s ease; font-weight: 650; }
.picker-result:hover, .picker-result:focus { border-color: var(--accent); background: linear-gradient(90deg, rgba(18,184,255,.16), rgba(7,157,240,.04)); color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.2); }

/* Account and focused flows */
.settings-page { max-width: 1080px !important; display: grid; gap: 1.25rem; }
.settings-profile { display: flex; align-items: center; gap: 1.25rem; padding: 1.35rem 1.6rem; border-radius: 22px; background: linear-gradient(145deg, rgba(23,28,34,.95), rgba(15,19,23,.95)); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.settings-avatar { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #12b8ff, #009ceb); border: 2px solid #56ccff; color: #001017; font-size: 1.6rem; font-weight: 850; box-shadow: 0 0 20px rgba(18,184,255,.45); flex-shrink: 0; }
.settings-profile h2 { margin: 0 0 .2rem; font-size: 1.35rem; font-weight: 850; color: #fff; }
.settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.2rem; }
.settings-grid > .card { margin: 0; }
.settings-grid .wide, .settings-grid .card.wide { grid-column: span 2; }
.settings-section-head { display: flex; align-items: start; gap: 1rem; margin-bottom: 1.25rem; }
.settings-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: rgba(18,184,255,.1); border: 1px solid rgba(18,184,255,.3); color: var(--accent-strong); font-size: 1.1rem; flex-shrink: 0; }
.settings-section-head h2 { margin: 0 0 .2rem; font-size: 1.25rem; font-weight: 850; color: #fff; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1.1rem; border-radius: 14px; background: rgba(18,24,31,.6); border: 1px solid rgba(255,255,255,.05); margin-top: .65rem; }
.settings-row form { margin: 0; }
.settings-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; margin-top: 1.25rem; }
.settings-actions form { margin: 0; }
.danger-zone { border-color: rgba(255,89,108,.35) !important; background: linear-gradient(145deg, rgba(255,89,108,.12), rgba(15,19,23,.95)) !important; box-shadow: 0 16px 45px rgba(0,0,0,.35), 0 0 25px rgba(255,89,108,.08) !important; }
.danger-zone .settings-icon { background: rgba(255,89,108,.15); border-color: rgba(255,89,108,.4); color: #ff596c; font-weight: 850; }

.settings-card-users { display: flex; flex-direction: column; gap: 1.5rem; padding: 1.75rem; }
.invite-form { margin-top: 1.5rem; margin-bottom: 2rem; }
.invite-form .field-label { display: block; font-size: .84rem; font-weight: 750; color: #fff; margin-bottom: .5rem; }
.invite-input-flex { display: flex; align-items: center; gap: 1rem; width: 100%; max-width: 580px; flex-wrap: wrap; }
.invite-input-flex input { flex: 1 1 240px; min-width: 0; margin: 0; }
.invite-input-flex .btn { flex-shrink: 0; min-height: 46px; padding: 0 1.25rem; white-space: nowrap; margin: 0; }

.invitation-link-box { margin-top: 1.25rem; }
.invitation-link-box label { display: block; margin-bottom: 0.5rem; font-weight: 750; color: #fff; }
.invitation-link-box input { width: 100%; max-width: 580px; }

.active-users-section { margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-direction: column; gap: 1rem; }
.section-subhead { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.1rem; }
.section-subhead h3 { margin: 0; font-size: 1.15rem; font-weight: 850; color: #fff; }
.badge-count { padding: .2rem .55rem; border-radius: 999px; background: rgba(18,184,255,.12); border: 1px solid rgba(18,184,255,.25); color: var(--accent-strong); font-size: .75rem; font-weight: 800; }
.active-users-list { display: flex; flex-direction: column; gap: .85rem; }
.user-row { margin: 0; }
.delete-user-form { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0; }
.delete-user-form input { flex: 1 1 180px; min-width: 0; min-height: 38px; padding: .35rem .65rem; font-size: .78rem; border-radius: 8px; margin: 0; }
.delete-user-form button { margin: 0; }

.telegram-status-row { margin-top: 1rem; margin-bottom: 1.25rem; }
.telegram-status-info { display: flex; flex-direction: column; gap: 0.25rem; }
.telegram-status-info b { font-size: 1.05rem; color: #fff; }
.telegram-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; margin-top: 1.25rem; }
.telegram-actions a.btn, .telegram-actions button { margin: 0; }
.telegram-actions form { margin: 0; }
.telegram-field { margin: 0; margin-top: 0.85rem; width: 100%; }
.telegram-intro { margin-top: 0.85rem; margin-bottom: 1.25rem; }

.danger-form { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin: 0; }
.danger-form .field { flex: 1 1 220px; min-width: 0; }

/* Authentication & Login Polish */
.focus-shell { min-height: 100vh; background: radial-gradient(circle at 50% 0, rgba(18,184,255,.18), transparent 36rem), #090c0f; display: grid; place-items: center; }
.focus-main { width: min(100% - 2rem, 580px); margin: 0 auto; padding: clamp(1.5rem,5vw,4rem) 0; }
.focus-card { padding: clamp(1.8rem,4.5vw,2.8rem); border: 1px solid rgba(86,204,255,.3); border-radius: 26px; background: linear-gradient(145deg, rgba(23,28,34,.96), rgba(15,19,23,.96)); backdrop-filter: blur(18px); box-shadow: 0 20px 60px rgba(0,0,0,.45), 0 0 30px rgba(18,184,255,.1); }
.focus-card h1 { margin: .4rem 0 .65rem; font-size: clamp(1.8rem,4.5vw,2.65rem); font-weight: 850; color: #fff; letter-spacing: -.03em; }
.focus-intro { margin-bottom: 1.5rem; color: var(--muted-strong); font-size: .95rem; line-height: 1.6; }
.focus-form { display: grid; gap: 1.1rem; }
.focus-form .field { display: grid; gap: .45rem; }
.focus-form label { font-size: .88rem; font-weight: 750; color: #fff; }
.focus-form input { width: 100%; min-height: 48px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.35); color: #fff; padding: 0 1rem; font-size: .95rem; }
.focus-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(18,184,255,.2); }
.focus-form .btn { width: 100%; min-height: 50px; border-radius: 999px; font-size: 1rem; font-weight: 850; background: linear-gradient(135deg, #12b8ff, #009ceb); border: 1px solid #56ccff; color: #001017; box-shadow: 0 8px 25px rgba(18,184,255,.35); margin-top: .5rem; transition: all .18s ease; }
.focus-form .btn:hover { background: linear-gradient(135deg, #56ccff, #12b8ff); transform: translateY(-1px); box-shadow: 0 12px 30px rgba(18,184,255,.5); }
.focus-step { display: flex; gap: .4rem; margin-bottom: 1.25rem; }
.focus-step span { height: 5px; flex: 1; border-radius: 99px; background: rgba(255,255,255,.1); }
.focus-step span.done, .focus-step span.active { background: linear-gradient(90deg, #12b8ff, #56ccff); box-shadow: 0 0 10px rgba(18,184,255,.5); }
.focus-actions { margin-top: 1.25rem; display: grid; gap: .75rem; }
.focus-brand { display: flex; align-items: center; gap: .55rem; margin-bottom: 1.5rem; text-decoration: none; }

/* ── Onboarding v2 ── */
.onboarding-card { animation: ob-fade-up .45s cubic-bezier(.22,.8,.36,1) both; }
@keyframes ob-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Progress */
.ob-progress { display: flex; align-items: center; gap: 0; margin-bottom: 1.75rem; }
.ob-progress-seg { display: flex; align-items: center; flex: 1; }
.ob-progress-seg:last-child { flex: 0; }
.ob-progress-dot { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.15); color: #69737d; font-size: .7rem; font-weight: 800; flex-shrink: 0; transition: all .3s ease; }
.ob-progress-dot.done { background: rgba(18,184,255,.18); border-color: #12b8ff; color: #12b8ff; }
.ob-progress-dot.active { background: linear-gradient(135deg,#12b8ff,#009ceb); border-color: #56ccff; color: #001017; box-shadow: 0 0 14px rgba(18,184,255,.5); }
.ob-progress-bar { flex: 1; height: 2px; background: rgba(255,255,255,.07); margin: 0 .35rem; border-radius: 99px; }
.ob-progress-seg.done .ob-progress-bar, .ob-progress-seg.active .ob-progress-bar { background: linear-gradient(90deg,#12b8ff,#56ccff); }

/* Identity */
.ob-identity { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.5rem; padding: .55rem .8rem; border-radius: 999px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.08); width: fit-content; }
.ob-avatar { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg,#12b8ff,#009ceb); color: #001017; font-size: .75rem; font-weight: 850; flex-shrink: 0; }
.ob-email { font-size: .82rem; color: var(--muted-strong); font-weight: 600; }

/* Error */
.ob-error { display: flex; align-items: center; gap: .6rem; padding: .75rem 1rem; border-radius: 12px; background: rgba(241,92,109,.12); border: 1px solid rgba(241,92,109,.35); color: #ff8794; font-size: .88rem; margin-bottom: 1.25rem; }

/* Step icon */
.ob-step-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; margin-bottom: 1rem; }
.ob-step-icon.privacy { background: rgba(18,184,255,.12); border: 1px solid rgba(18,184,255,.3); color: #12b8ff; }
.ob-step-icon.timezone { background: rgba(99,232,162,.12); border: 1px solid rgba(99,232,162,.3); color: #63e8a2; }
.ob-step-icon.garmin { background: rgba(255,167,61,.12); border: 1px solid rgba(255,167,61,.3); color: #ffa73d; }
.ob-step-icon.success { background: rgba(63,185,80,.14); border: 1px solid rgba(63,185,80,.35); color: #3fb950; }

/* Headings & intro */
.onboarding-card h1 { margin: 0 0 .55rem; font-size: clamp(1.55rem,4vw,2.1rem); font-weight: 850; color: #fff; letter-spacing: -.03em; line-height: 1.15; }
.ob-intro { margin: 0 0 1.35rem; color: var(--muted-strong); font-size: .93rem; line-height: 1.65; }
.ob-intro strong { color: var(--fg); }

/* Bullets */
.ob-bullets { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .55rem; }
.ob-bullets li { display: flex; align-items: center; gap: .65rem; font-size: .88rem; color: var(--muted-strong); }

/* Form */
.ob-form { display: grid; gap: 1rem; }
.ob-field { display: grid; gap: .4rem; }
.ob-field-label { font-size: .82rem; font-weight: 750; color: var(--fg); letter-spacing: .01em; }
.ob-input-wrap { position: relative; }
.ob-input-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #4a535c; pointer-events: none; }
.ob-input { width: 100%; min-height: 50px; border-radius: 14px; border: 1.5px solid rgba(255,255,255,.1); background: rgba(0,0,0,.35); color: #fff; padding: 0 1rem; font-size: .95rem; transition: border-color .2s, box-shadow .2s; outline: none; }
.ob-input.has-icon { padding-left: 2.75rem; }
.ob-input:focus { border-color: rgba(18,184,255,.6); box-shadow: 0 0 0 3px rgba(18,184,255,.15); }
.ob-pw-wrap .ob-pw-toggle { position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); background: none; border: 0; color: #4a535c; cursor: pointer; padding: .25rem; display: grid; place-items: center; transition: color .15s; }
.ob-pw-wrap .ob-pw-toggle:hover { color: var(--muted-strong); }
.ob-pw-wrap .ob-input { padding-right: 2.75rem; }

/* Custom checkbox */
.ob-checkbox { display: flex; align-items: flex-start; gap: .75rem; cursor: pointer; padding: 1rem; border-radius: 14px; background: rgba(18,184,255,.04); border: 1.5px solid rgba(18,184,255,.15); transition: background .2s, border-color .2s; }
.ob-checkbox:hover { background: rgba(18,184,255,.08); border-color: rgba(18,184,255,.3); }
.ob-checkbox input { position: absolute; opacity: 0; width: 0; height: 0; }
.ob-checkbox-box { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid rgba(255,255,255,.2); background: rgba(0,0,0,.4); flex-shrink: 0; margin-top: .1rem; transition: all .2s; }
.ob-checkbox input:checked ~ .ob-checkbox-box { background: linear-gradient(135deg,#12b8ff,#009ceb); border-color: #56ccff; box-shadow: 0 0 10px rgba(18,184,255,.4); }
.ob-checkbox input:checked ~ .ob-checkbox-box::after { content: ''; display: block; width: 5px; height: 9px; border: 2px solid #001017; border-top: 0; border-left: 0; transform: rotate(45deg) translateY(-1px); }
.ob-checkbox-label { font-size: .9rem; color: var(--fg); line-height: 1.5; }

/* CTA button */
.ob-btn { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; min-height: 52px; border-radius: 999px; font-size: 1rem; font-weight: 850; background: linear-gradient(135deg, #12b8ff, #009ceb); border: 1.5px solid #56ccff; color: #001017; box-shadow: 0 8px 28px rgba(18,184,255,.38); transition: all .2s ease; text-decoration: none; }
.ob-btn:hover { background: linear-gradient(135deg, #56ccff, #12b8ff); transform: translateY(-2px); box-shadow: 0 14px 35px rgba(18,184,255,.52); color: #001017; }
.ob-btn-arrow { font-size: 1.1rem; transition: transform .2s; }
.ob-btn:hover .ob-btn-arrow { transform: translateX(3px); }
.ob-btn:disabled, .ob-btn[disabled] { opacity: .38; cursor: not-allowed; pointer-events: none; }

/* Inline heading with icon */
.ob-heading-with-icon { display: flex; align-items: center; gap: .75rem; margin: 0 0 .55rem; font-size: clamp(1.55rem,4vw,2.1rem); font-weight: 850; color: #fff; letter-spacing: -.03em; line-height: 1.2; }
.ob-heading-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: rgba(18,184,255,.12); border: 1px solid rgba(18,184,255,.3); color: #12b8ff; flex-shrink: 0; }
.ob-heading-icon.timezone { background: rgba(99,232,162,.12); border-color: rgba(99,232,162,.3); color: #63e8a2; }
.ob-heading-icon.garmin { background: rgba(255,167,61,.12); border-color: rgba(255,167,61,.3); color: #ffa73d; }
.ob-heading-icon.success { background: rgba(63,185,80,.14); border-color: rgba(63,185,80,.35); color: #3fb950; }

/* Notice */
.ob-notice { display: flex; align-items: center; gap: .55rem; padding: .65rem .85rem; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); color: #4a535c; font-size: .8rem; }
.ob-notice svg { flex-shrink: 0; color: #3fb950; }

/* MFA hint */
.ob-mfa-hint { font-size: .8rem; color: #4a535c; margin: -.25rem 0 .25rem; }

/* MFA input */
.mfa-input { letter-spacing: .35em; font-size: 1.4rem; font-weight: 700; text-align: center; }

/* Sign out */
.ob-signout { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.07); text-align: center; }
.ob-signout-btn { background: none; border: 0; color: #4a535c; font-size: .82rem; cursor: pointer; padding: .25rem; transition: color .15s; }
.ob-signout-btn:hover { color: var(--muted-strong); }

@media (max-width: 1100px) {
  .secondary-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .workout-stat-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .cardio-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 899px) {
  .app-sidebar { display: none; }
  .app-main { min-height: calc(100vh - 74px); margin: 0; padding: 1.25rem 1rem calc(6.5rem + env(safe-area-inset-bottom)); }
  .bottom-nav { position: fixed; inset: auto 0 0; z-index: 70; display: grid; grid-template-columns: repeat(4,1fr); min-height: calc(68px + env(safe-area-inset-bottom)); padding: .35rem max(.35rem,env(safe-area-inset-left)) env(safe-area-inset-bottom) max(.35rem,env(safe-area-inset-right)); border-top: 1px solid #30363d; background: rgba(10,13,16,.96); backdrop-filter: blur(18px); }
  .bottom-nav a, .bottom-nav button { display: grid; justify-items: center; align-content: center; gap: .18rem; min-height: 58px; padding: .25rem; border: 0; border-radius: 10px; background: transparent; color: #69737d; font-size: .62rem; font-weight: 700; text-decoration: none; }
  .bottom-nav .ui-icon { width: 25px; height: 25px; }
  .bottom-nav :is(a,button).active, .bottom-nav a[aria-current="page"] { color: var(--fg); }
  .bottom-nav :is(a,button).active .ui-icon, .bottom-nav a[aria-current="page"] .ui-icon { color: var(--accent); filter: drop-shadow(0 0 7px rgba(18,184,255,.35)); }
  .more-sheet:not([hidden]) { position: fixed; inset: 0; z-index: 100; display: block; }
  .sheet-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(0,0,0,.68); backdrop-filter: blur(3px); }
  .sheet-panel { position: absolute; inset: auto 0 0; max-height: 80dvh; padding: .5rem 1rem calc(1.25rem + env(safe-area-inset-bottom)); border: 1px solid var(--border); border-radius: 22px 22px 0 0; background: #171c21; box-shadow: 0 -20px 60px rgba(0,0,0,.45); }
  .sheet-handle { width: 42px; height: 4px; margin: 0 auto 1rem; border-radius: 99px; background: #4a535c; }
  .sheet-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: .75rem; }
  .sheet-heading h2 { margin: .2rem 0 0; }
  .sheet-close { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 50%; background: #11161a; color: var(--fg); font-size: 1.5rem; }
  .sheet-panel form { margin: 0; }
  .sheet-link { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .9rem; width: 100%; min-height: 68px; padding: .8rem; border: 0; border-top: 1px solid var(--border-soft); background: transparent; color: var(--fg); text-align: left; text-decoration: none; }
  .sheet-link span { display: grid; }
  .sheet-link small { margin-top: .15rem; color: var(--muted); }
  .sheet-link.danger { color: #ff8794; }
  body.sheet-open { overflow: hidden; }
  .hero-metrics { padding: 1rem .5rem; }
  .metric-ring { width: clamp(105px,28vw,180px); }
  .chart-grid { grid-template-columns: 1fr !important; }
  .slow-history-grid { grid-template-columns: 1fr; }
  .chart-card, .chart-card[data-chart] { grid-column: 1 / -1 !important; }
  .settings-grid { grid-template-columns: 1fr !important; }
  .settings-grid .wide, .settings-grid .card.wide { grid-column: auto !important; }
}

@media (max-width: 640px) {
  .page-heading, .today-heading { align-items: flex-start; flex-direction: column; margin: -1.25rem -1rem 1.25rem -1rem; padding: 1rem 1rem .85rem; }
  .sync-cluster { width: 100%; justify-content: space-between; }
  .hero-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); gap: .1rem; border-radius: 18px; }
  .hero-metric { padding: .25rem .1rem; }
  .metric-ring { width: clamp(88px,27vw,118px); }
  .metric-ring::before { inset: 7px; }
  .metric-ring-value { font-size: clamp(1.45rem,8vw,2rem); }
  .metric-ring-unit { font-size: .55rem; }
  .hero-metric-label { gap: .2rem; margin-top: .7rem; font-size: .62rem; letter-spacing: .07em; }
  .hero-metric-label .ui-icon { display: none; }
  .hero-metric-detail { padding: 0 .1rem; font-size: .62rem; }
  .hero-recovery-signals { grid-column: 1 / -1; padding: .85rem; }
  .hero-recovery-signals .recovery-signal-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: .35rem .5rem;
    padding: .75rem 0;
  }
  .hero-recovery-signals .signal-label {
    grid-column: 1;
    font-size: .84rem;
  }
  .hero-recovery-signals .recovery-signal-indicator {
    grid-column: 2;
    justify-self: end;
  }
  .hero-recovery-signals .signal-val {
    grid-column: 1 / -1;
    font-size: .82rem;
    color: var(--muted-strong);
    margin-top: .15rem;
    white-space: normal;
    word-break: break-word;
    line-height: 1.35;
  }
  .secondary-metrics { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .secondary-metrics .tile { padding: .9rem; }
  .secondary-metrics .recovery-signals-tile { grid-column: 1 / -1; }
  .chart-wrap { height: 220px; }
  .activities-card .table-scroll { display: none; }
  .activity-mobile-list { display: grid; }
  .activity-mobile-item { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: .8rem; min-height: 74px; padding: .8rem 1rem; border-bottom: 1px solid var(--border-soft); }
  .activity-mobile-item:last-child { border-bottom: 0; }
  .activity-mobile-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: rgba(7,157,240,.13); color: var(--load); }
  .activity-mobile-copy { min-width: 0; }
  .activity-mobile-copy b, .activity-mobile-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .activity-mobile-copy small { margin-top: .2rem; color: var(--muted); }
  .activity-mobile-value { text-align: right; }
  .activity-mobile-value b, .activity-mobile-value small { display: block; }
  .activity-mobile-value small { color: var(--muted); }
  .calendar-scroll { display: none; }
  .calendar-agenda { display: grid; gap: .7rem; }
  .calendar-header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .45rem; width: 100%; }
  .calendar-header .btn-secondary { min-height: 40px; padding: .45rem .65rem; font-size: .72rem; }
  .calendar-title { min-width: 0; }
  .calendar-title h1 { margin: .15rem 0 0; font-size: 1.45rem; white-space: nowrap; }
  .calendar-title .eyebrow { font-size: .56rem; }
  .agenda-day { display: grid; grid-template-columns: 52px 1fr; gap: .75rem; }
  .agenda-date { padding-top: .8rem; color: var(--muted); font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
  .agenda-date b { display: block; color: var(--fg); font-size: 1.35rem; letter-spacing: -.04em; }
  .agenda-events { display: grid; gap: .45rem; }
  .agenda-event, .agenda-empty { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .7rem; min-height: 62px; padding: .75rem; border: 1px solid var(--border-soft); border-radius: 12px; background: #171c21; color: inherit; text-decoration: none; }
  .agenda-event > span:nth-child(2) { display: grid; min-width: 0; }
  .agenda-empty { grid-template-columns: 1fr; color: var(--muted); }
  .workout-hero-head { flex-direction: column; }
  .workout-stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .cardio-grid { grid-template-columns: 1fr 1fr; }
  .settings-profile { flex-direction: row; gap: 1rem; padding: 1.1rem 1.25rem; }
  .settings-row { flex-direction: column; align-items: flex-start; gap: .6rem; padding: .85rem; }
  .settings-row > span { width: 100%; }
  .settings-row form { width: 100%; }
  .settings-row form button { width: 100%; }
  .invite-input-flex { flex-direction: column; align-items: stretch; width: 100%; }
  .invite-input-flex input, .invite-input-flex .btn { width: 100% !important; max-width: 100% !important; flex: none; }
  .delete-user-form { flex-direction: column; align-items: stretch; width: 100%; }
  .delete-user-form input, .delete-user-form button { width: 100% !important; flex: none; }
  .danger-form { flex-direction: column; align-items: stretch; width: 100%; }
  .danger-form .field, .danger-form .btn-danger-outline { width: 100% !important; flex: none; }
}

/* Mobile follow-up: isolate the activity pager from the global site nav. */
.activity-pagination {
  position: static;
  inset: auto;
  top: auto;
  right: auto;
  left: auto;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: .75rem;
  margin-top: 1rem;
  padding-top: 1rem;
  overflow: visible;
  border: 0;
  border-top: 1px solid var(--border-soft);
  background: transparent;
  box-shadow: none;
}
.activity-pagination > :first-child { justify-self: start; width: auto; }
.activity-pagination > :nth-child(2) { justify-self: center; white-space: nowrap; }
.activity-pagination > :last-child { justify-self: end; width: auto; }
.activity-pagination .pager-placeholder { opacity: .55; cursor: default; }

@media (max-width: 640px) {
  .exercise-head { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: .35rem; }
  .exercise-name { grid-row: 1; min-width: 0; max-width: 100%; }
  .exercise-meta { grid-row: 2; display: inline-flex; align-items: center; flex-wrap: nowrap; gap: .3rem; min-width: 0; max-width: 100%; white-space: nowrap; font-size: .78rem; }
  .exercise-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .exercise-row .exercise-identity { grid-column: 1 / -1; }
  .exercise-row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-areas: "identity identity" "sets rest" "target load" "actions actions" "warmup warmup"; }
  .exercise-row .exercise-identity { grid-area: identity; }
  .exercise-row .sets-field { grid-area: sets; }
  .exercise-row .rest-field { grid-area: rest; }
  .exercise-row .target-field { grid-area: target; }
  .exercise-row .load-field { grid-area: load; }
  .exercise-row .exercise-actions { grid-area: actions; }
  .exercise-row .exercise-warmup { grid-area: warmup; }
  .exercise-row.is-timed { grid-template-areas: "identity identity" "sets rest" "target target" "actions actions" "warmup warmup"; }
  .exercise-row.is-timed .load-field { display: none; }
  .exercise-row .warmup-inputs { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); gap: .65rem; }
  .exercise-row.warmup-is-timed .warmup-target { grid-column: 1 / -1; }
  .exercise-row.warmup-is-timed .warmup-weight { display: none; }
  .exercise-row .target-field { min-width: 0; max-width: 100%; align-items: stretch; }
  .exercise-row .target-field .target-control { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(3.4rem, .72fr) auto; gap: .35rem !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
  .exercise-row .target-field .target-select, .exercise-row .target-field .ex-target { width: 100% !important; min-width: 0 !important; max-width: 100% !important; flex: none !important; }
  .exercise-row .warmup-inputs { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(5.25rem, .75fr); column-gap: 1rem; row-gap: .65rem; align-items: end; min-width: 0; width: 100%; }
  .exercise-row .warmup-target, .exercise-row .warmup-weight { min-width: 0; max-width: 100%; }
  .exercise-row .warmup-target .target-control { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(3.4rem, .7fr) auto; gap: .35rem !important; width: 100% !important; min-width: 0 !important; }
  .exercise-row .warmup-target .target-select, .exercise-row .warmup-target .ex-warmup-target, .exercise-row .warmup-weight .ex-warmup-weight { width: 100% !important; min-width: 0 !important; max-width: 100% !important; flex: none !important; }
}

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

/* Final mobile containment rules.  These intentionally follow legacy grids. */
@media (max-width: 640px) {
  html, body { overflow-x: clip; }
  .app-main, .dashboard-page, .calendar-page, .workout-page, .workout-section,
  .card, .exercise, .exercise-head, .set-pills, .plan-template-card,
  .exercise-row, .availability-section, .availability-row {
    min-width: 0; max-width: 100%; box-sizing: border-box;
  }
  .today-heading, .page-heading, .calendar-header { position: static; }
  .hero-metrics { grid-template-columns: minmax(0, 1fr); gap: .9rem; padding: .9rem; }
  .hero-recovery-signals, .hero-metric.sleep { grid-column: auto; width: 100%; }
  .hero-metric.sleep { border-top: 1px solid rgba(255,255,255,.14); padding-top: 1rem; justify-items: center; }
  .hero-metric.sleep .hero-metric-detail { white-space: nowrap; }
  .trend-card-grid { grid-template-columns: minmax(0, 1fr); }
  .body-battery-trend { grid-column: auto; }
  .metric-section-heading { align-items: flex-start; }
  .chart-range-control { flex-shrink: 0; }
  .calendar-header { grid-template-columns: auto minmax(0, 1fr) auto; margin: 0; padding: .5rem 0; }
  .calendar-header .btn-secondary { min-width: 0; }
  .exercise-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
  .exercise-name { min-width: 0; overflow-wrap: anywhere; }
  .exercise-meta { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .35rem; white-space: nowrap; }
  .set-pills { display: flex; flex-wrap: wrap; min-width: 0; }
  .set-pill { max-width: 100%; overflow-wrap: anywhere; }
  .exercise-row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .7rem !important; }
  .exercise-row .exercise-identity, .exercise-row .target-field, .exercise-row .exercise-warmup, .exercise-row .exercise-actions { grid-column: 1 / -1; min-width: 0; }
  .exercise-row .exercise-field, .exercise-row .warmup-inputs, .exercise-row .warmup-inputs > label { min-width: 0; max-width: 100%; }
  .exercise-row.has-warmup .exercise-warmup, .exercise-row .warmup-inputs { display: grid; grid-template-columns: 1fr; gap: .65rem; }
  .exercise-row .warmup-inputs.is-hidden { display: none; }
  .activity-pagination { display: flex; justify-content: center; align-items: center; gap: .75rem; padding-top: 1rem; }
}

@media (max-width: 360px) {
  .hero-metric.sleep .hero-metric-detail { white-space: normal; }
  .exercise-head { align-items: flex-start; flex-direction: column; }
}

/* Single Inline Row Weekly Availability - High Specificity Override */
.availability-section .availability-rows-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  margin-top: 1rem !important;
  width: 100% !important;
}

.availability-section .availability-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 1.25rem !important;
  padding: 0.55rem 1rem !important;
  border-radius: 10px !important;
  background: rgba(16, 21, 26, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.availability-section .availability-row:hover {
  border-color: rgba(18, 184, 255, 0.3) !important;
}

.availability-section .availability-row.is-rest {
  background: rgba(10, 13, 16, 0.4) !important;
  border-color: rgba(255, 255, 255, 0.04) !important;
}

.availability-section .avail-day-name {
  width: 120px !important;
  min-width: 120px !important;
  flex-shrink: 0 !important;
  display: block !important;
  margin: 0 !important;
}

.availability-section .avail-day-name strong {
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  color: #fff !important;
  display: block !important;
}

.availability-section label.avail-rest-label {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.45rem !important;
  width: 110px !important;
  min-width: 110px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: var(--muted-strong) !important;
  cursor: pointer !important;
  user-select: none !important;
}

.availability-section label.avail-rest-label input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  flex-shrink: 0 !important;
  accent-color: #12b8ff !important;
  cursor: pointer !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-block !important;
}

.availability-section label.avail-rest-label span {
  display: inline !important;
  white-space: nowrap !important;
}

.availability-section .avail-time-pickers {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.6rem !important;
  margin: 0 !important;
  padding: 0 !important;
}
.availability-section .avail-time-pickers.is-hidden { display: none !important; }

.availability-section .avail-time-pickers .time-label {
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  display: inline !important;
  margin: 0 !important;
}

.availability-section .avail-time-pickers input[type="time"] {
  width: 110px !important;
  min-width: 110px !important;
  max-width: 110px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 0.4rem !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  background: rgba(8, 10, 13, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  text-align: center !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  display: inline-block !important;
}

.availability-section .avail-time-pickers input[type="time"]:focus {
  border-color: #12b8ff !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(18, 184, 255, 0.2) !important;
}

@media (max-width: 640px) {
  .availability-section .availability-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: .65rem !important;
    align-items: center !important;
  }
  .availability-section .avail-day-name { width: auto !important; min-width: 0 !important; }
  .availability-section .avail-rest-control { justify-self: end; min-width: 0; }
  .availability-section label.avail-rest-label { width: auto !important; min-width: 0 !important; }
  .availability-section .avail-time-pickers {
    grid-column: 1 / -1;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) !important;
    gap: .4rem !important;
    min-width: 0 !important;
  }
  .availability-section .avail-time-pickers input[type="time"] { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
}

/* Keep these mobile layout contracts last, after legacy dashboard/program rules. */
@media (max-width: 640px) {
  .activity-pagination { position: static; inset: auto; top: auto; right: auto; left: auto; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); background: transparent; box-shadow: none; overflow: visible; }
  .activity-pagination > :first-child { justify-self: start; width: auto; }
  .activity-pagination > :nth-child(2) { justify-self: center; white-space: nowrap; }
  .activity-pagination > :last-child { justify-self: end; width: auto; }
  .exercise-head { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: .35rem; }
  .exercise-name { grid-row: 1; min-width: 0; max-width: 100%; }
  .exercise-meta { grid-row: 2; display: inline-flex; align-items: center; flex-wrap: nowrap; gap: .3rem; min-width: 0; max-width: 100%; white-space: nowrap; font-size: .78rem; }
  .exercise-row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-areas: "identity identity" "sets rest" "target load" "actions actions" "warmup warmup"; }
  .exercise-row .exercise-identity { grid-area: identity; }
  .exercise-row .sets-field { grid-area: sets; }
  .exercise-row .rest-field { grid-area: rest; }
  .exercise-row .target-field { grid-area: target; }
  .exercise-row .load-field { grid-area: load; }
  .exercise-row .exercise-actions { grid-area: actions; }
  .exercise-row .exercise-warmup { grid-area: warmup; }
  .exercise-row.is-timed { grid-template-areas: "identity identity" "sets rest" "target target" "actions actions" "warmup warmup"; }
  .exercise-row.is-timed .load-field { display: none; }
  .exercise-row .warmup-inputs { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); gap: .65rem; }
  .exercise-row.warmup-is-timed .warmup-target { grid-column: 1 / -1; }
  .exercise-row.warmup-is-timed .warmup-weight { display: none; }
}

/* Final authoritative mobile Target-control rendering rules. */
@media (max-width: 640px) {
  .exercise-row .target-field { min-width: 0; max-width: 100%; align-items: stretch; }
  .exercise-row:not(.is-timed) .target-field .target-control { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(3rem, .65fr) !important; column-gap: .35rem !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
  .exercise-row:not(.is-timed) .target-field .target-unit:empty { display: none; }
  .exercise-row.is-timed .target-field .target-control { grid-template-columns: minmax(5rem, 1fr) minmax(3.5rem, .7fr) auto !important; }
  .exercise-row .target-field .target-control select { box-sizing: border-box; width: 100% !important; min-width: 0 !important; max-width: 100% !important; padding-left: .45rem !important; padding-right: 1.2rem !important; font-size: .8rem; white-space: nowrap; }
  .exercise-row .warmup-inputs { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(5.25rem, .75fr); column-gap: 1rem; row-gap: .65rem; align-items: end; min-width: 0; width: 100%; }
  .exercise-row .warmup-target, .exercise-row .warmup-weight { min-width: 0; max-width: 100%; }
  .exercise-row:not(.warmup-is-timed) .warmup-target .target-control { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(3rem, .65fr) !important; column-gap: .4rem !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
  .exercise-row:not(.warmup-is-timed) .warmup-target-unit:empty { display: none; }
  .exercise-row.warmup-is-timed .warmup-target .target-control { grid-template-columns: minmax(5rem, 1fr) minmax(3.5rem, .7fr) auto !important; }
  .exercise-row .warmup-target .target-control select { box-sizing: border-box; width: 100% !important; min-width: 0 !important; max-width: 100% !important; flex: none !important; padding-left: .45rem !important; padding-right: 1.2rem !important; font-size: .8rem !important; white-space: nowrap; }
  .exercise-row .warmup-target .ex-warmup-target { box-sizing: border-box; width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
}