:root { --ink:#12231d; --muted:#738078; --line:#e4e9e5; --surface:#fff; --canvas:#f7f8f6; --deep:#10372e; --deep-2:#0a2a22; --mint:#a8ead0; --lime:#d9ef71; --orange:#f2b466; --purple:#b9a7f8; --blue:#9ed6f4; --red:#e78f84; --shadow:0 12px 36px rgba(17,35,29,.06); }
* { box-sizing:border-box; }
body { margin:0; background:var(--canvas); color:var(--ink); font-family:Manrope,Arial,sans-serif; font-size:14px; }
button, input, select, textarea { font:inherit; } button { cursor:pointer; } .app-shell { min-height:100vh; display:flex; }
.sidebar { width:254px; flex:0 0 254px; min-height:100vh; background:var(--deep-2); color:#eff8f4; padding:24px 16px; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.brand { display:flex; align-items:center; gap:9px; font-size:26px; font-weight:800; letter-spacing:-1.4px; padding:0 9px 30px; }.brand-mark { width:28px; height:28px; display:grid; place-items:center; border-radius:9px; background:var(--mint); color:var(--deep-2); font-size:21px; font-style:italic; }
.athlete-mini { display:flex; align-items:center; gap:10px; padding:10px 9px 22px; border-bottom:1px solid rgba(227,248,238,.13); }.avatar { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#d4ae92,#63483b); color:white; display:grid; place-items:center; font-size:11px; font-weight:700; }.athlete-mini div:nth-child(2) { display:grid; gap:2px; }.athlete-mini strong { font-size:13px; }.athlete-mini span { font-size:11px; color:#a7c6bb; }.more-button { margin-left:auto; border:0; color:#a7c6bb; background:transparent; letter-spacing:1px; }
.main-nav { display:grid; gap:4px; padding:24px 0; }.nav-item, .settings { border:0; border-radius:9px; padding:11px 12px; background:transparent; color:#b7d0c5; text-align:left; display:flex; gap:13px; align-items:center; font-weight:600; }.nav-item span { width:15px; font-size:16px; text-align:center; }.nav-item:hover, .nav-item.active { background:rgba(191,239,215,.12); color:#fff; }.nav-item.active { color:var(--mint); }.nav-item i { margin-left:auto; min-width:19px; height:19px; display:grid; place-items:center; background:var(--lime); color:#18352b; border-radius:50%; font-size:10px; font-style:normal; }.coach-nav { margin-top:5px; color:var(--mint); }.sidebar-bottom { margin-top:auto; }.sidebar-bottom p { color:#87a99d; font-size:9px; font-weight:700; letter-spacing:1.2px; padding:0 10px; }.connection { border:0; background:transparent; color:#b7d0c5; padding:7px 10px; width:100%; display:flex; align-items:center; gap:9px; text-align:left; }.connection b { color:var(--mint); margin-left:auto; }.source-dot { width:7px; height:7px; border-radius:50%; background:var(--mint); }.source-dot.hevy { background:var(--purple); }.source-dot.fddb { background:var(--orange); }.source-dot.withings { background:var(--blue); }.settings { margin-top:20px; color:#9ebeb2; width:100%; }
.main-content { min-width:0; flex:1; max-width:1440px; margin:0 auto; padding:0 42px 56px; }.topbar { height:76px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }.topbar-date { font-size:12px; color:var(--muted); font-weight:600; }.topbar-actions { display:flex; gap:12px; align-items:center; }.icon-button { height:36px; width:36px; border:0; border-radius:50%; background:transparent; font-size:19px; color:var(--ink); position:relative; }.notification-dot { position:absolute; width:6px; height:6px; border-radius:50%; background:#e78f84; top:8px; right:8px; }.sync-button { border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:8px; padding:9px 13px; font-size:12px; font-weight:700; display:flex; gap:6px; align-items:center; }.sync-button.is-syncing .sync-icon { display:inline-block; animation:spin 1s linear infinite; }.menu-button { display:none; }
.view { display:none; animation:fade .25s ease; }.view.active { display:block; }.page-intro { display:flex; justify-content:space-between; gap:22px; align-items:flex-end; padding:38px 0 28px; }.dashboard-intro { padding-bottom:23px; }.eyebrow, .data-label, .metric-caption { margin:0 0 7px; color:var(--muted); font-weight:800; letter-spacing:1.1px; font-size:10px; }.page-intro h1, .coach-header h1 { margin:0; letter-spacing:-1.6px; font-size:30px; line-height:1.2; }.intro-copy { margin:8px 0 0; color:var(--muted); }.week-switcher, .segmented-control { border:1px solid var(--line); background:var(--surface); border-radius:8px; padding:3px; display:flex; align-items:center; gap:4px; }.week-switcher button { border:0; background:transparent; padding:4px 7px; font-size:19px; line-height:18px; color:var(--muted); }.week-switcher strong { font-size:12px; min-width:66px; text-align:center; }.segmented-control button { border:0; background:transparent; padding:7px 13px; border-radius:5px; font-weight:700; font-size:12px; color:var(--muted); }.segmented-control button.selected { background:var(--deep); color:#fff; }
.readiness-card { min-height:160px; border-radius:14px; padding:25px 28px; display:flex; align-items:center; gap:30px; color:#eff8f4; background:linear-gradient(115deg,#114438,#0a2f26); position:relative; overflow:hidden; }.readiness-card:after { content:""; position:absolute; width:350px; height:350px; border:1px solid rgba(202,246,225,.15); right:-120px; top:-250px; border-radius:50%; box-shadow:0 0 0 40px rgba(202,246,225,.04),0 0 0 85px rgba(202,246,225,.03); }.readiness-main { display:flex; gap:19px; align-items:center; min-width:44%; position:relative; z-index:1; }.score-ring { width:78px; height:78px; display:grid; place-content:center; border-radius:50%; border:7px solid #70c6a7; border-top-color:rgba(214,249,233,.27); transform:rotate(35deg); flex:0 0 auto; }.score-ring span { font-size:26px; font-weight:800; letter-spacing:-1px; transform:rotate(-35deg); text-align:center; }.score-ring small { color:#aed5c6; font-size:9px; transform:rotate(-35deg); text-align:center; margin-top:-4px; }.readiness-card h2 { margin:0 0 7px; font-size:18px; letter-spacing:-.7px; }.readiness-card p:not(.eyebrow) { color:#b8d7cb; margin:0; font-size:12px; line-height:1.5; }.readiness-card .eyebrow { color:#86b8a6; }.readiness-points { margin-left:auto; display:flex; gap:24px; position:relative; z-index:1; }.readiness-points div { min-width:75px; display:grid; gap:5px; }.readiness-points .data-label { color:#88b3a3; font-size:8px; margin:0; }.readiness-points strong { font-size:14px; }.readiness-points em { font-family:"DM Mono",monospace; font-size:11px; font-style:normal; }.positive { color:#59cf9f!important; }.circle-arrow { border:0; background:var(--mint); color:var(--deep); z-index:1; width:36px; height:36px; border-radius:50%; font-size:18px; }
.metric-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:19px 0; }.metric-card, .panel { background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:0 2px 8px rgba(17,35,29,.025); }.metric-card { padding:18px 20px 16px; min-height:182px; }.metric-top { display:flex; justify-content:space-between; align-items:center; }.metric-icon { height:30px; width:30px; display:grid; place-items:center; border-radius:8px; font-weight:800; }.load-icon { color:#356dba; background:#e8f2fc; }.food-icon { color:#b37518; background:#fbf1dd; }.scale-icon { color:#705fb9; background:#efebfc; }.metric-tag { color:#397963; background:#e5f5ed; font-size:8px; font-weight:800; padding:4px 6px; border-radius:5px; letter-spacing:.45px; }.metric-tag.nutrition { color:#9b681b; background:#fbf3e7; }.metric-card p { color:var(--muted); font-size:11px; font-weight:700; margin:19px 0 4px; }.metric-card strong { font-size:24px; letter-spacing:-1px; }.metric-card strong small { font-size:11px; color:var(--muted); letter-spacing:0; }.progress-track { height:6px; background:#edf0ee; border-radius:6px; margin:14px 0 8px; overflow:hidden; }.progress-track span { display:block; height:100%; background:#57b78f; border-radius:6px; }.metric-card footer { display:flex; justify-content:space-between; color:var(--muted); font-size:10px; }.metric-card footer b { color:#4b8a73; }.macro-bars { display:flex; gap:4px; height:6px; margin:17px 0 10px; }.macro-bars i { display:block; background:#80c9a7; border-radius:4px; }.macro-bars i:nth-child(2) { background:#b8a8f4; }.macro-bars i:nth-child(3) { background:#f2bc72; }.mini-line { height:34px; margin:8px 0 6px; }.mini-line svg { width:100%; height:100%; }.mini-line path { fill:none; stroke:#8b78da; stroke-width:2; vector-effect:non-scaling-stroke; }
.dashboard-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:18px; }.panel { padding:22px; }.panel-heading { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }.panel-heading h2, .chart-header h2, .goal-banner h2, .goal-grid h2, .strategy-panel h2 { margin:0; font-size:18px; letter-spacing:-.6px; }.text-button { color:#31735d; background:transparent; border:0; padding:5px 0; font-size:11px; font-weight:800; white-space:nowrap; }.workout-row { display:flex; gap:13px; align-items:center; margin:27px 0 15px; }.workout-symbol { width:42px; height:42px; display:grid; place-items:center; border-radius:10px; font-size:21px; }.strength { background:#ebf5e8; color:#568f52; }.run { background:#eaf2fc; color:#4284c9; }.bike { background:#f3ebfc; color:#7a5fb6; }.rest { background:#f2f3f2; color:#6d7972; }.workout-row h3 { margin:0 0 3px; font-size:14px; }.workout-row p { margin:0; color:var(--muted); font-size:11px; }.workout-status { margin-left:auto; font-size:10px; color:#5c806f; background:#eaf5ee; padding:5px 7px; border-radius:5px; }.exercise-pills { display:flex; flex-wrap:wrap; gap:6px; }.exercise-pills span { border:1px solid var(--line); border-radius:5px; padding:5px 7px; font-size:10px; color:#607169; }.workout-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:21px; }.button { border-radius:7px; padding:9px 12px; font-size:11px; font-weight:800; border:1px solid var(--line); background:#fff; color:var(--ink); }.button.primary { background:var(--deep); border-color:var(--deep); color:#fff; }.button.primary:hover { background:#174f42; }.button.secondary:hover { background:#f2f6f4; }.weekly-panel { overflow:hidden; }.week-bars { height:124px; display:flex; align-items:flex-end; justify-content:space-between; gap:11px; margin:20px 0 12px; padding:0 5px; }.week-bars div { display:flex; flex:1; min-width:20px; height:100%; flex-direction:column; justify-content:flex-end; align-items:center; gap:7px; }.week-bars .bar { display:block; width:100%; border-radius:4px 4px 2px 2px; }.week-bars .strength { background:#6fb18a; }.week-bars .run { background:#82b4e1; }.week-bars .bike { background:#a48fd6; }.week-bars .rest { background:#dfe6e1; }.week-bars .planned { background:repeating-linear-gradient(-45deg,#c0d6cb 0,#c0d6cb 4px,#dbe8e1 4px,#dbe8e1 8px); }.week-bars small { color:var(--muted); font-size:9px; }.week-bars .today small { color:var(--deep); font-weight:800; }.weekly-summary { padding-top:14px; border-top:1px solid var(--line); display:flex; justify-content:space-between; font-size:10px; color:var(--muted); }.weekly-summary div { display:grid; gap:3px; }.weekly-summary span { color:var(--ink); font-weight:800; font-size:13px; }.insight-banner { display:flex; align-items:center; gap:14px; border:1px solid #dfe9d5; background:#f5faed; border-radius:10px; padding:13px 17px; margin-top:18px; }.sparkle { width:29px; height:29px; display:grid; place-items:center; border-radius:8px; background:#e1efc7; color:#5d7e24; }.insight-banner div { flex:1; }.insight-banner strong { font-size:11px; }.insight-banner p { color:#647267; margin:3px 0 0; font-size:10px; }
.calendar-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:16px; }.calendar-toolbar > button:not(.add-session) { border:1px solid var(--line); background:#fff; color:var(--muted); width:30px; height:30px; border-radius:7px; font-size:20px; line-height:1; }.calendar-toolbar strong { font-size:13px; margin-right:auto; }.add-session { margin-left:auto; }.calendar-wrap { background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; }.calendar-weekdays, .month-calendar { display:grid; grid-template-columns:repeat(7,1fr); }.calendar-weekdays { border-bottom:1px solid var(--line); background:#fbfcfb; }.calendar-weekdays span { padding:11px 12px; color:var(--muted); font-size:10px; font-weight:800; }.calendar-day { min-height:110px; padding:10px 8px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); position:relative; }.calendar-day:nth-child(7n) { border-right:0; }.calendar-day:nth-last-child(-n+7) { border-bottom:0; }.calendar-day.other { background:#fafbfa; color:#a6aea9; }.day-number { font-size:11px; font-weight:700; display:inline-grid; place-items:center; width:22px; height:22px; }.calendar-day.today .day-number { background:var(--deep); color:white; border-radius:50%; }.calendar-event { border:0; text-align:left; width:100%; border-radius:4px; padding:4px 5px; margin-top:5px; display:block; font-size:9px; line-height:1.3; color:#315e3f; background:#eaf5e8; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.calendar-event.run { color:#28669d; background:#e8f2fb; }.calendar-event.bike { color:#624796; background:#f0ebfa; }.calendar-event.rest { color:#66736c; background:#eff2f0; }.calendar-event.planned { outline:1px dashed #a8c4b5; outline-offset:-1px; }.calendar-legend { display:flex; gap:18px; color:var(--muted); font-size:10px; padding:13px 0; }.calendar-legend span { display:flex; align-items:center; gap:5px; }.legend-dot { width:8px; height:8px; border-radius:2px; display:inline-block; }.legend-dot.strength { background:#80b87a; }.legend-dot.run { background:#82b4e1; }.legend-dot.bike { background:#ab96db; }.legend-dot.rest { background:#cfd7d1; }
.period-select { border:1px solid var(--line); background:#fff; padding:9px 30px 9px 10px; border-radius:7px; color:var(--ink); font-size:11px; font-weight:700; }.progress-tabs { display:flex; gap:7px; border-bottom:1px solid var(--line); }.progress-tabs button { background:transparent; border:0; padding:11px 4px 10px; margin-right:18px; color:var(--muted); font-weight:700; font-size:12px; position:relative; }.progress-tabs button.selected { color:var(--deep); }.progress-tabs button.selected:after { content:""; height:2px; background:var(--deep); position:absolute; left:0; right:0; bottom:-1px; }.progress-hero { margin-top:22px; padding-bottom:16px; }.chart-header { display:flex; justify-content:space-between; gap:20px; }.chart-header h2 { font-size:23px; letter-spacing:-1.2px; }.chart-header h2 em { font-family:"DM Mono",monospace; font-size:12px; font-style:normal; letter-spacing:0; margin-left:6px; }.chart-header p { font-size:11px; color:var(--muted); margin:5px 0 0; }.chart-legend { display:flex; align-items:flex-start; padding-top:9px; gap:11px; color:var(--muted); font-size:10px; }.chart-legend span { display:flex; gap:5px; align-items:center; }.chart-legend i { width:16px; height:2px; background:#4c987c; display:inline-block; }.chart-legend .muted i { background:#d0dad4; }.main-chart { height:240px; margin-top:18px; }.main-chart svg { width:100%; height:100%; overflow:visible; }.chart-grid-line { stroke:#e7ece8; stroke-width:1; }.chart-axis-label { fill:#8c9992; font-size:10px; font-family:Manrope, sans-serif; }.chart-area { fill:rgba(91,177,139,.12); }.chart-average { fill:none; stroke:#3b9272; stroke-width:2.5; }.chart-daily { fill:none; stroke:#cad7d0; stroke-width:1.4; }.chart-dot { fill:#3b9272; stroke:#fff; stroke-width:2; }.chart-xaxis { display:flex; justify-content:space-between; margin-left:43px; color:#8c9992; font-size:9px; }.progress-stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:18px 0; }.progress-stat-grid .metric-card { min-height:140px; }.progress-stat-grid .metric-card p { margin-top:14px; }.stat-compare { color:var(--muted); font-size:10px; margin-top:6px; }.milestones { margin-top:0; }.milestone-row { display:flex; align-items:center; gap:12px; padding:16px 0; border-top:1px solid var(--line); }.milestone-row:first-of-type { margin-top:15px; }.milestone-icon { width:27px; height:27px; display:grid; place-items:center; border-radius:50%; background:#e5f3e9; color:#4b9272; font-weight:800; }.milestone-icon.pending { background:#f4f1e6; color:#aa8c36; }.milestone-row div { flex:1; }.milestone-row strong { font-size:12px; }.milestone-row p { margin:3px 0 0; color:var(--muted); font-size:10px; }.milestone-row > span:last-child { color:#527766; font-family:"DM Mono",monospace; font-size:11px; }
.goal-banner { display:flex; align-items:center; gap:22px; background:linear-gradient(120deg,#e1f3e9,#f0f8ee); padding:24px 28px; border-radius:13px; border:1px solid #d8eadc; }.goal-ring { height:79px; width:79px; flex:0 0 79px; border-radius:50%; border:7px solid #5da17d; border-top-color:#c5dfc9; display:grid; place-items:center; }.goal-ring span { font-size:23px; font-weight:800; letter-spacing:-1px; }.goal-ring small { font-size:10px; }.goal-banner h2 { font-size:20px; }.goal-banner p:not(.eyebrow) { margin:5px 0 0; color:#587161; font-size:11px; max-width:520px; }.goal-date { margin-left:auto; width:90px; display:grid; justify-items:center; border-left:1px solid #c7dfce; }.goal-date span { color:#587161; font-size:9px; font-weight:800; letter-spacing:1px; }.goal-date strong { font-size:29px; letter-spacing:-1px; }.goal-date small { font-size:10px; color:#587161; }.goal-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:18px 0; }.goal-grid .panel { min-height:214px; }.goal-grid h2 { font-size:17px; margin-bottom:25px; }.goal-kpi { display:flex; align-items:baseline; gap:7px; }.goal-kpi strong { font-size:27px; letter-spacing:-1px; }.goal-kpi span { color:var(--muted); font-size:11px; }.goal-progress { height:8px; overflow:hidden; border-radius:5px; background:#edf1ee; margin:12px 0; }.goal-progress span { display:block; height:100%; border-radius:5px; background:#69ae88; }.goal-note { font-size:10px; color:var(--muted); }.focus-list { list-style:none; padding:0; margin:0; display:grid; gap:13px; }.focus-list li { display:flex; align-items:center; gap:11px; }.focus-list li > span { color:#72a38a; font-family:"DM Mono",monospace; font-size:11px; }.focus-list strong { font-size:11px; }.focus-list p { color:var(--muted); font-size:10px; margin:2px 0 0; }.strategy-panel { display:flex; align-items:center; justify-content:space-between; gap:25px; }.strategy-panel > div { max-width:640px; }.strategy-panel h2 { margin-bottom:7px; }.strategy-panel p:not(.eyebrow) { margin:0; color:var(--muted); font-size:11px; line-height:1.65; }
.coach-view { padding-bottom:20px; }.coach-header { padding:34px 0 20px; display:flex; align-items:center; justify-content:space-between; }.coach-header > div { display:flex; align-items:center; gap:12px; }.coach-orb, .coach-avatar { color:#e8f8e8; background:radial-gradient(circle at 30% 20%,#bdeea7,#4f9272 53%,#153a30 100%); box-shadow:inset 0 0 12px rgba(250,255,210,.45); }.coach-orb { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; font-size:19px; }.online-status { color:#678075; font-size:10px; font-weight:700; display:flex; gap:6px; align-items:center; }.online-status i { height:7px; width:7px; border-radius:50%; background:#64be91; }.coach-layout { display:grid; grid-template-columns:minmax(0,1fr) 250px; min-height:530px; border:1px solid var(--line); background:#fff; border-radius:13px; overflow:hidden; }.chat-panel { display:flex; flex-direction:column; min-height:530px; }.chat-messages { flex:1; padding:24px 25px; }.message { display:flex; gap:10px; max-width:670px; margin-bottom:19px; }.coach-avatar { width:29px; height:29px; flex:0 0 29px; display:grid; place-items:center; border-radius:9px; font-size:13px; }.message > div:last-child { background:#f3f7f4; padding:12px 13px; border-radius:3px 12px 12px 12px; }.message p { margin:0; font-size:12px; line-height:1.55; }.message span { display:block; color:#90a098; margin-top:6px; font-size:9px; }.message.user-message { margin-left:auto; flex-direction:row-reverse; }.message.user-message > div:last-child { background:#dff2e7; border-radius:12px 3px 12px 12px; }.suggestion-area { margin-top:27px; }.suggestion-area > p { color:var(--muted); font-weight:800; letter-spacing:1px; font-size:9px; }.suggestions { display:flex; flex-wrap:wrap; gap:7px; }.suggestions button { background:#fff; border:1px solid var(--line); color:#446154; padding:8px 10px; border-radius:6px; font-size:10px; }.suggestions button:hover { background:#f3f8f4; border-color:#b7d6c2; }.chat-input { display:flex; align-items:flex-end; gap:8px; margin:0 20px 18px; border:1px solid #d5ded8; border-radius:10px; padding:6px 7px 6px 12px; }.chat-input:focus-within { border-color:#75a990; box-shadow:0 0 0 3px #dff0e6; }.chat-input textarea { flex:1; border:0; resize:none; outline:0; padding:7px 0; min-height:34px; max-height:120px; color:var(--ink); font-size:11px; }.chat-input textarea::placeholder { color:#9aa8a0; }.send-button { width:30px; height:30px; border:0; border-radius:7px; background:var(--deep); color:white; font-size:17px; line-height:1; }.coach-context { background:#f8faf8; padding:25px 20px; border-left:1px solid var(--line); }.context-row { display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--line); color:var(--muted); font-size:10px; }.context-row strong { font-size:10px; color:var(--ink); }.context-row i { color:#4d9774; font-style:normal; }.coach-context hr { border:0; border-top:1px solid var(--line); margin:25px 0 17px; }.focus-title { display:block; margin:2px 0 4px; font-size:12px; }.coach-context > p:not(.eyebrow) { font-size:10px; color:var(--muted); margin:0 0 14px; }
.toast { position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px); opacity:0; pointer-events:none; background:#153a30; color:#fff; border-radius:8px; padding:11px 16px; font-size:11px; font-weight:700; transition:.2s ease; box-shadow:var(--shadow); z-index:10; }.toast.show { opacity:1; transform:translate(-50%,0); }.modal-backdrop { position:fixed; inset:0; background:rgba(8,31,23,.42); display:none; align-items:center; justify-content:center; padding:20px; z-index:20; }.modal-backdrop.show { display:flex; }.modal { width:min(410px,100%); background:#fff; border-radius:13px; padding:26px; position:relative; box-shadow:0 16px 50px rgba(0,0,0,.2); }.modal h2 { margin:0 0 21px; letter-spacing:-.6px; }.modal label { display:grid; gap:6px; color:#53665b; font-size:11px; font-weight:700; margin-bottom:15px; }.modal select,.modal input { padding:10px; border:1px solid var(--line); border-radius:7px; background:#fff; outline:none; }.modal input:focus,.modal select:focus { border-color:#75a990; }.modal-close { position:absolute; top:14px; right:14px; border:0; background:transparent; color:var(--muted); font-size:23px; }.modal .button { width:100%; margin-top:6px; }
@keyframes fade { from { opacity:.3; transform:translateY(4px) } to { opacity:1; transform:none } } @keyframes spin { to { transform:rotate(360deg) } }
@media (max-width:1050px) { .main-content { padding:0 28px 40px; }.readiness-points { gap:14px; }.dashboard-grid { grid-template-columns:1fr; }.weekly-panel { min-height:240px; }.week-bars { max-width:440px; }.calendar-day { min-height:92px; }.goal-grid { grid-template-columns:1fr; }.coach-layout { grid-template-columns:minmax(0,1fr) 215px; } }
@media (max-width:820px) { .sidebar { position:fixed; z-index:15; transform:translateX(-100%); transition:.22s ease; box-shadow:12px 0 38px rgba(0,0,0,.15); }.sidebar.open { transform:translateX(0); }.main-content { width:100%; padding:0 20px 36px; }.menu-button { display:block; border:0; background:transparent; color:var(--ink); font-size:19px; padding:6px 0; }.topbar-date { margin-right:auto; margin-left:15px; }.metric-grid { grid-template-columns:repeat(3,minmax(185px,1fr)); overflow:auto; padding-bottom:15px; margin:0 -20px; padding-left:20px; padding-right:20px; }.metric-card { min-height:168px; }.calendar-day { min-height:84px; }.calendar-event { font-size:8px; }.coach-layout { grid-template-columns:1fr; }.coach-context { border-left:0; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(2,1fr); gap:0 18px; }.coach-context > .eyebrow, .coach-context hr, .coach-context .text-button { grid-column:1/-1; }.coach-context > p:not(.eyebrow) { grid-column:1/-1; }.chat-panel { min-height:455px; }.goal-banner { padding:20px; }.progress-stat-grid { grid-template-columns:repeat(3,minmax(170px,1fr)); overflow:auto; margin-left:-20px; margin-right:-20px; padding:0 20px 8px; } }
@media (max-width:570px) { .main-content { padding:0 14px 28px; }.topbar { height:62px; }.topbar-date { font-size:10px; }.sync-button { padding:8px; }.sync-button span:last-child { display:none; }.page-intro { padding:27px 0 20px; align-items:flex-start; flex-direction:column; }.page-intro h1,.coach-header h1 { font-size:25px; }.dashboard-intro { gap:14px; }.week-switcher { align-self:flex-start; }.readiness-card { padding:19px; display:block; }.readiness-main { align-items:flex-start; }.readiness-card h2 { font-size:16px; }.readiness-points { margin:18px 0 0 97px; }.circle-arrow { position:absolute; right:18px; bottom:18px; }.metric-grid { margin:0 -14px; padding-left:14px; padding-right:14px; }.dashboard-grid { gap:14px; }.panel { padding:18px; }.workout-actions { justify-content:stretch; }.workout-actions .button { flex:1; font-size:10px; padding:9px 8px; }.insight-banner { align-items:flex-start; }.insight-banner .text-button { display:none; }.calendar-toolbar { flex-wrap:wrap; }.calendar-toolbar .add-session { order:2; margin-left:0; }.calendar-weekdays span { padding:9px 3px; text-align:center; }.calendar-day { padding:6px 3px; min-height:77px; }.calendar-event { padding:3px; margin-top:3px; font-size:0; height:8px; width:8px; border-radius:50%; }.calendar-event.run { background:#82b4e1; }.calendar-event.bike { background:#ab96db; }.calendar-event.strength { background:#80b87a; }.calendar-event.rest { background:#cfd7d1; }.calendar-legend { gap:9px; flex-wrap:wrap; }.period-select { width:100%; }.chart-header { display:block; }.chart-legend { padding-top:12px; }.main-chart { height:185px; }.chart-xaxis { margin-left:39px; overflow:hidden; gap:11px; white-space:nowrap; }.goal-banner { display:grid; grid-template-columns:79px 1fr; gap:14px; }.goal-date { grid-column:1/-1; margin:0; width:100%; border-left:0; border-top:1px solid #c7dfce; padding-top:12px; grid-template-columns:1fr auto 1fr; align-items:baseline; }.goal-date span { justify-self:end; margin-right:6px; }.goal-date small { justify-self:start; margin-left:6px; }.strategy-panel { align-items:flex-start; flex-direction:column; }.coach-header { padding:25px 0 17px; align-items:flex-start; gap:10px; }.online-status { margin-top:4px; font-size:9px; white-space:nowrap; }.chat-messages { padding:18px 15px; }.chat-input { margin:0 12px 12px; }.coach-context { padding:20px 15px; }.suggestions { display:grid; }.suggestions button { text-align:left; }.modal { padding:21px; } }