:root{--color-bg:          #000000;--color-surface-0:   #0A0A0A;--color-surface-1:   #111113;--color-surface-2:   #18181B;--color-surface-3:   #222226;--color-line:        #2A2A2E;--color-line-soft:   rgba(255,255,255,0.06);--color-line-hair:   rgba(255,255,255,0.09);--color-text:        #FAFAFA;--color-text-muted:  #A1A1A6;--color-text-dim:    #6B6B72;--color-text-label:  #8A8A93;--color-whoop:       #FFD424;--color-strain:      #0093E7;--color-strain-soft: rgba(0, 147, 231, 0.16);--color-hi:          #16EC06;--color-hi-soft:     rgba(22, 236, 6, 0.18);--color-mid:         #FFD424;--color-lo:          #FF0026;--color-sleep:       #7C72E8;--color-bg-light:            var(--color-surface-1);--color-white:               var(--color-surface-1);--color-blue:                var(--color-strain);--color-blue-light:          #34ADFF;--color-green:               var(--color-hi);--color-yellow:              var(--color-mid);--color-red:                 var(--color-lo);--color-text-main:           var(--color-text);--color-text-secondary:      var(--color-text-muted);--color-border-light:        var(--color-line);--color-insight-gradient-start: rgba(22,236,6,0.08);--color-insight-gradient-end:   rgba(0,147,231,0.10);--color-blue-chart:          var(--color-strain);--color-green-chart:         var(--color-hi);--color-yellow-chart:        var(--color-mid);--color-red-chart:           var(--color-lo);--color-hr-rest-line:        var(--color-strain);--font-display: 'Archivo', 'Barlow Condensed', 'Helvetica Neue', Arial, sans-serif;--font-body:    'DM Sans', 'Helvetica Neue', Arial, sans-serif;--font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;--radius-xs: 4px;--radius-sm: 8px;--radius-md: 14px;--radius-lg: 20px;--radius-xl: 28px;--glow-hi:     0 0 0 1px rgba(22,236,6,0.35), 0 10px 40px -10px rgba(22,236,6,0.45);--glow-strain: 0 0 0 1px rgba(0,147,231,0.35), 0 10px 40px -10px rgba(0,147,231,0.40);--shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 20px 40px -20px rgba(0,0,0,0.8)}*,*::before,*::after{box-sizing:border-box}html{background:var(--color-bg)}body{font-family:var(--font-body);font-size:15px;line-height:1.5;color:var(--color-text);background:radial-gradient(1200px 600px at 80% -10%, rgba(0,147,231,0.08), transparent 60%),radial-gradient(900px 500px at 0% 0%, rgba(22,236,6,0.05), transparent 55%),var(--color-bg);background-attachment:fixed;margin:0;padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5{font-family:var(--font-display);color:var(--color-text);letter-spacing:-0.01em;margin:0 0 0.6rem}h1{font-size:clamp(2rem, 3.6vw, 3.25rem);font-weight:800;letter-spacing:-0.02em;line-height:1}h2{font-size:1.75rem;font-weight:700;letter-spacing:-0.015em}h3{font-size:1.15rem;font-weight:700;letter-spacing:0}h4{font-size:0.78rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--color-text-muted)}p,span{font-size:1rem;line-height:1.55}a{color:var(--color-hi);text-decoration:none}a:hover{color:#8CFC4B}.label{font-family:var(--font-body);font-size:0.68rem;font-weight:600;color:var(--color-text-label);text-transform:uppercase;letter-spacing:0.16em}.status{display:inline-flex;align-items:center;gap:0.35rem;font-family:var(--font-mono);font-size:0.68rem;font-weight:600;border-radius:999px;padding:4px 10px;text-transform:uppercase;letter-spacing:0.14em;border:1px solid var(--color-line);color:var(--color-text-muted);background:var(--color-surface-2)}.status-good{background:var(--color-hi-soft);color:var(--color-hi);border-color:rgba(22,236,6,0.35)}.status-improve{background:rgba(255,212,36,0.14);color:var(--color-mid);border-color:rgba(255,212,36,0.4)}.status-attention{background:rgba(255,0,38,0.14);color:#FF5A72;border-color:rgba(255,0,38,0.4)}.container{padding:2rem 2rem 4rem;max-width:1440px;margin:0 auto}.section{display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:1.25rem}.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0) 40%),var(--color-surface-1);border:1px solid var(--color-line);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:1.5rem;display:flex;flex-direction:column;gap:1rem;position:relative;overflow:hidden;transition:border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease}.card::before{content:'';position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);opacity:0.6}.card-hover-effect{transition:all 220ms ease}.card-hover-effect:hover{border-color:rgba(22,236,6,0.35);transform:translateY(-3px);box-shadow:var(--glow-hi)}.card-link{text-decoration:none;color:inherit;display:block}.card-header{display:flex;align-items:center;gap:0.9rem;padding-bottom:0.9rem;border-bottom:1px solid var(--color-line-soft)}.card-header h3{font-family:var(--font-display);font-size:1.05rem;font-weight:700;letter-spacing:0.02em;text-transform:uppercase;margin:0}.card-icon{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;background:var(--color-surface-3);border:1px solid var(--color-line);border-radius:var(--radius-sm);color:var(--color-hi) !important;font-size:1rem}.card-content{display:flex;flex-direction:column;gap:1.25rem}.metric-section{display:flex;flex-direction:column}.metric-row{display:flex;justify-content:space-between;align-items:center;padding:0.7rem 0;border-bottom:1px solid var(--color-line-soft);font-size:0.9rem}.metric-row:last-child{border-bottom:none}.metric-row .label{font-size:0.68rem;color:var(--color-text-dim)}.metric-row>span:last-child{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:0.92rem;color:var(--color-text);font-weight:500}.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(130px, 1fr));gap:0.75rem;margin-top:0.75rem}.metric-bubble{background:var(--color-surface-2);border:1px solid var(--color-line);border-radius:var(--radius-md);padding:1rem 0.9rem;display:flex;flex-direction:column;align-items:flex-start;gap:0.35rem;position:relative;overflow:hidden;transition:border-color 180ms ease, transform 180ms ease, background 180ms ease}.metric-bubble::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--bubble-accent, var(--color-line));opacity:0.95}.metric-bubble:hover{transform:translateY(-1px);background:var(--color-surface-3);border-color:var(--bubble-accent, var(--color-line))}.metric-label{font-family:var(--font-body);font-size:0.62rem;color:var(--color-text-dim);text-transform:uppercase;letter-spacing:0.16em;font-weight:600}.metric-value{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:1.35rem;font-weight:600;color:var(--color-text);line-height:1.05;letter-spacing:-0.01em}.metric-duration{--bubble-accent: var(--color-strain)}.metric-strain{--bubble-accent: var(--color-strain)}.metric-avg-hr{--bubble-accent: var(--color-mid)}.metric-max-hr{--bubble-accent: var(--color-lo)}.metric-calories{--bubble-accent: var(--color-hi)}.metric-score{--bubble-accent: var(--color-hi)}.metric-hr{--bubble-accent: var(--color-lo)}.metric-hrv{--bubble-accent: var(--color-hi)}.metric-spo2{--bubble-accent: var(--color-strain)}.metric-temp{--bubble-accent: var(--color-mid)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;padding:0.65rem 1.2rem;border-radius:999px;font-family:var(--font-body);font-weight:600;font-size:0.82rem;letter-spacing:0.08em;text-transform:uppercase;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:transform 180ms ease, background 180ms ease, box-shadow 180ms ease, color 180ms ease}.btn-primary,.button-primary{background:var(--color-hi);color:#041000;border-color:var(--color-hi)}.btn-primary:hover,.button-primary:hover{background:#8CFC4B;color:#041000;box-shadow:0 10px 30px -10px rgba(22,236,6,0.6);transform:translateY(-1px)}.button-secondary{background:transparent;color:var(--color-text);border:1px solid var(--color-line)}.button-secondary:hover{border-color:var(--color-hi);color:var(--color-hi)}.insights{background:linear-gradient(135deg, var(--color-insight-gradient-start), var(--color-insight-gradient-end)),var(--color-surface-1);border:1px solid var(--color-line);border-radius:var(--radius-xl);padding:2rem;display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));gap:1.25rem}.insight-card{background:var(--color-surface-2);border:1px solid var(--color-line);border-radius:var(--radius-md);padding:1.1rem 1.25rem}.insight-card h3{font-size:0.85rem;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;margin-bottom:0.4rem;color:var(--color-text-muted)}.chart-bar{border-radius:8px;width:100%;height:300px}.bar-aerobic{background-color:var(--color-strain)}.bar-strength{background-color:var(--color-hi)}.bar-other{background-color:var(--color-mid)}.line-hrhigh{stroke:var(--color-lo);stroke-width:2}.line-hrrest{stroke:var(--color-strain);stroke-width:2}.avatar{border-radius:50%;width:44px;height:44px;border:1px solid var(--color-line)}.search-bar{border-radius:var(--radius-sm);padding:0.55rem 1rem;border:1px solid var(--color-line);background:var(--color-surface-2);color:var(--color-text);font-size:0.95rem}.recovery-card-link{text-decoration:none;color:inherit}.recovery-header{display:flex;align-items:center;gap:0.75rem;margin-bottom:1rem}.recovery-icon{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;background:var(--color-surface-3);border:1px solid var(--color-line);border-radius:var(--radius-sm);color:var(--color-hi) !important}.recovery-status{margin-top:0.75rem;padding-top:0.9rem;border-top:1px solid var(--color-line-soft);display:flex;justify-content:flex-end}.chart-section{margin-top:0.5rem}.card .chart-container,.workout-card .chart-container,.recovery-card .chart-container,.cycle-card .chart-container,.chart-section .chart-container{width:100%;margin-top:0.75rem;background:var(--color-surface-0);border:1px solid var(--color-line-soft);border-radius:var(--radius-md);padding:0.75rem}.alert{padding:1rem 1.25rem;margin-bottom:1rem;border-radius:var(--radius-md);border:1px solid var(--color-line);background:var(--color-surface-1);color:var(--color-text)}.alert-danger{background:rgba(255,0,38,0.12);border-color:rgba(255,0,38,0.4);color:#FF7B8F}@media (max-width: 768px){.container{padding:1rem 1rem 3rem}h1{font-size:1.85rem}.section{grid-template-columns:1fr}.card{border-radius:var(--radius-md)}}