*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0f1117;--surface:#1a1d27;--surface2:#242736;--border:#2e3248;--accent:#6c63ff;--accent2:#ff6584;--accent3:#43e97b;--accent4:#fa8231;--text:#e2e8f0;--muted:#8892b0;--radius:12px}html{font-size:14px}body{background:var(--bg);color:var(--text);min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}#app{max-width:1400px;margin:0 auto;padding:24px 20px 48px}.header{border-bottom:1px solid var(--border);align-items:center;gap:12px;margin-bottom:32px;padding-bottom:20px;display:flex}.header-icon{font-size:2rem}.header-text h1{background:linear-gradient(135deg,#6c63ff,#43e97b);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.5rem;font-weight:700}.header-text p{color:var(--muted);margin-top:2px;font-size:.85rem}.kpi-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:28px;display:grid}.kpi-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;transition:transform .2s,box-shadow .2s;position:relative;overflow:hidden}.kpi-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0006}.kpi-card:before{content:"";height:3px;position:absolute;top:0;left:0;right:0}.kpi-card.steps:before{background:var(--accent)}.kpi-card.distance:before{background:var(--accent3)}.kpi-card.calorie:before{background:var(--accent4)}.kpi-card.hr:before{background:var(--accent2)}.kpi-card.days:before{background:#38bdf8}.kpi-card.streak:before{background:#facc15}.kpi-card.sleep:before{background:#a78bfa}.kpi-label{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;font-size:.75rem}.kpi-value{font-size:1.75rem;font-weight:700;line-height:1}.kpi-card.steps .kpi-value{color:var(--accent)}.kpi-card.distance .kpi-value{color:var(--accent3)}.kpi-card.calorie .kpi-value{color:var(--accent4)}.kpi-card.hr .kpi-value{color:var(--accent2)}.kpi-card.days .kpi-value{color:#38bdf8}.kpi-card.streak .kpi-value{color:#facc15}.kpi-card.sleep .kpi-value{color:#a78bfa}.kpi-sub{color:var(--muted);margin-top:4px;font-size:.75rem}.controls{flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:24px;display:flex}.controls label{color:var(--muted);font-size:.8rem}.range-btn{border:1px solid var(--border);background:var(--surface);color:var(--muted);cursor:pointer;border-radius:20px;padding:6px 14px;font-size:.8rem;transition:all .15s}.range-btn:hover{border-color:var(--accent);color:var(--text)}.range-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}.charts-grid{grid-template-columns:1fr 1fr;gap:20px;display:grid}.chart-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px}.chart-card.wide{grid-column:1/-1}.chart-title{color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:16px;font-size:.85rem;font-weight:600}.chart-canvas{width:100%;height:280px}.chart-canvas.tall{height:340px}.month-select{float:right;background:var(--surface2);border:1px solid var(--border);color:var(--text);cursor:pointer;border-radius:6px;outline:none;padding:2px 6px;font-size:.75rem}.month-select:focus{border-color:var(--accent)}.section-label{text-transform:uppercase;letter-spacing:.1em;color:var(--muted);border-left:3px solid var(--accent);margin:28px 0 12px;padding-left:10px;font-size:.7rem;font-weight:700}@media (width<=768px){.charts-grid{grid-template-columns:1fr}.chart-card.wide{grid-column:auto}.kpi-grid{grid-template-columns:repeat(2,1fr)}}