:root{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.5;font-weight:500;color:#f8fafc;background:#020817;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at top,rgba(56,189,248,.18),transparent 28%),linear-gradient(135deg,#020817,#0f172a)}button{font:inherit}input,select{min-width:0;font:inherit}#root{min-height:100vh}.app-shell{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100vh}.app-shell.nav-collapsed{grid-template-columns:minmax(0,1fr)}.app-shell.nav-collapsed .sidebar{display:none}.sidebar{padding:1.75rem 1.25rem;border-right:1px solid rgba(148,163,184,.2);background:#0f172ab8;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.brand-block{display:flex;align-items:center;gap:.9rem;margin-bottom:2rem}.brand-mark{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(135deg,#22d3ee,#8b5cf6);color:#020817;font-weight:800}.brand-block h1,.topbar h2,.panel-header h3{margin:0}.eyebrow{margin:0 0 .2rem;text-transform:uppercase;letter-spacing:.08em;font-size:.68rem;color:#7dd3fc}.nav-stack{display:grid;gap:.6rem;margin-bottom:2rem}.nav-item,.preset,.button-stack button,.panel-header button{border:1px solid rgba(148,163,184,.2);background:#0f172ab3;color:#e2e8f0;transition:.15s ease-in-out}.nav-item{padding:.8rem .9rem;border-radius:12px;text-align:left;cursor:pointer}.nav-item.active,.preset.active{background:linear-gradient(135deg,#22d3ee38,#8b5cf62e);border-color:#7dd3fc66}.profile-card{display:grid;gap:.6rem;padding:1rem;border-radius:16px;background:#0f766e24;border:1px solid rgba(45,212,191,.2)}.tag{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:#99f6e4}.profile-card strong{font-size:1.1rem}.profile-card select,.profile-create input,.youtube-form input{width:100%;padding:.65rem .75rem;color:#e2e8f0;background:#0f172a;border:1px solid rgba(148,163,184,.3);border-radius:10px}.profile-create{display:flex;gap:.4rem}.profile-create button,.connect-button,.youtube-form button{padding:.65rem .85rem;border:1px solid rgba(34,211,238,.35);border-radius:10px;background:#0891b238;color:#cffafe;cursor:pointer;white-space:nowrap}.profile-rename,.profile-create-page{display:grid;gap:.5rem;max-width:520px;margin:1rem 0}.profile-rename>div,.profile-create-page>div{display:flex;gap:.5rem}.profile-rename input,.profile-create-page input{flex:1;padding:.65rem .75rem;border:1px solid rgba(148,163,184,.3);border-radius:10px;color:#e2e8f0;background:#0f172a}.profile-rename button,.profile-list button{padding:.6rem .8rem;border:1px solid rgba(34,211,238,.35);border-radius:10px;color:#cffafe;background:#0891b238;cursor:pointer;white-space:nowrap}.profile-rename button:disabled,.profile-list button:disabled{cursor:not-allowed;opacity:.5}.text-button{justify-self:start;border:0;background:transparent;color:#fda4af;cursor:pointer;padding:.25rem 0}.main-panel{padding:1.5rem}.topbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.5rem}.status-group{display:flex;gap:.75rem;flex-wrap:wrap}.status-pill{display:inline-flex;align-items:center;padding:.5rem .75rem;border-radius:999px;background:#0f172acc;border:1px solid rgba(148,163,184,.2);font-size:.72rem;text-transform:capitalize}.status-pill.connected{border-color:#34d39966;background:#10b9811f;color:#a7f3d0}.connect-button:disabled,.button-stack button:disabled{cursor:not-allowed;opacity:.5}.nav-toggle{padding:.6rem .8rem;border:1px solid rgba(148,163,184,.28);border-radius:10px;color:#e2e8f0;background:#0f172acc;cursor:pointer;white-space:nowrap}.notice{margin:-.5rem 0 1rem;color:#bae6fd;font-size:.84rem}.notice.error{color:#fda4af}.connected-sensors{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:-.5rem 0 1rem}.connected-sensor{display:inline-flex;align-items:center;gap:.45rem;padding:.35rem .45rem .35rem .7rem;border:1px solid rgba(52,211,153,.3);border-radius:999px;background:#10b9811a;color:#a7f3d0;font-size:.78rem}.connected-sensor button{width:22px;height:22px;padding:0;border:0;border-radius:50%;color:#e2e8f0;background:#0f172acc;cursor:pointer;line-height:1}.metrics-grid{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:1rem;margin-bottom:1.5rem}.metric-card{padding:1rem 1.1rem;border-radius:18px;border:1px solid rgba(148,163,184,.18);background:#0f172ab8;display:grid;gap:.4rem}.metric-card span{color:#cbd5e1;font-size:.78rem}.metric-card strong{font-size:clamp(1.25em,2vw,2em)}.metric-card.cyan{box-shadow:inset 0 0 0 1px #22d3ee33}.metric-card.violet{box-shadow:inset 0 0 0 1px #a78bfa33}.metric-card.amber{box-shadow:inset 0 0 0 1px #fbbf243d}.metric-card.rose{box-shadow:inset 0 0 0 1px #fb718533}.metric-card.mint{box-shadow:inset 0 0 0 1px #2dd4bf33}.metric-card.blue{box-shadow:inset 0 0 0 1px #60a5fa33}.metric-card.orange{box-shadow:inset 0 0 0 1px #f9731633}.metric-card.sky{box-shadow:inset 0 0 0 1px #38bdf833}.metric-card.purple{box-shadow:inset 0 0 0 1px #c084fc33}.metric-card.size-compact{min-height:62px;padding:.55rem .7rem}.metric-card.size-standard{min-height:84px}.metric-card.size-wide{min-height:116px}.overlay-metrics .metric-card{min-width:0}.viewer-panel,.customize-panel{margin-bottom:1rem}.customize-panel summary{color:#e2e8f0;font-weight:700;cursor:pointer}.panel-scale-control{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;margin-top:.8rem;padding:.65rem;border:1px solid rgba(148,163,184,.16);border-radius:12px;background:#02081759}.panel-scale-control label{display:flex;align-items:center;gap:.7rem;flex:1 1 14rem;color:#cbd5e1;font-size:.84rem}.panel-scale-control input[type=range]{flex:1}.panel-scale-control output{min-width:3.2rem;color:#e2e8f0;font-variant-numeric:tabular-nums}.panel-scale-control button{padding:.45rem .7rem;border:1px solid rgba(148,163,184,.25);border-radius:9px;color:#e2e8f0;background:#0f172acc;cursor:pointer}.panel-scale-control button:disabled{cursor:not-allowed;opacity:.5}.panel-settings-list{display:grid;gap:.6rem;margin-top:.8rem}.panel-settings-row{display:grid;grid-template-columns:minmax(140px,1fr) auto minmax(120px,.8fr) 70px minmax(100px,.8fr) minmax(100px,.8fr);align-items:center;gap:.7rem;padding:.65rem;border:1px solid rgba(148,163,184,.16);border-radius:12px;background:#02081759}.panel-settings-row>label{display:grid;gap:.25rem;color:#cbd5e1;font-size:.73rem}.panel-settings-row .visibility-control{display:flex;align-items:center;gap:.45rem;font-size:.84rem}.panel-settings-row input[type=color]{width:42px;height:30px;padding:2px;border:1px solid rgba(148,163,184,.35);border-radius:6px;background:#0f172a}.panel-settings-row select{padding:.35rem;color:#e2e8f0;border:1px solid rgba(148,163,184,.3);border-radius:7px;background:#0f172a}.reorder-controls{display:flex;gap:.25rem}.reorder-controls button{width:30px;height:30px;color:#e2e8f0;border:1px solid rgba(148,163,184,.3);border-radius:7px;background:#0f172a;cursor:pointer}.reorder-controls button:hover,.nav-toggle:hover{border-color:#7dd3fc99}.viewer-header{align-items:flex-start}.ride-toolbar{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.6rem 1rem;margin:0 0 .9rem;padding:.7rem .8rem;border:1px solid rgba(148,163,184,.18);border-radius:14px;background:#0208178c}.ride-toolbar-readout,.ride-toolbar-buttons{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.ride-toolbar-readout time{font-variant-numeric:tabular-nums;font-size:1.15rem;font-weight:750;color:#f8fafc}.ride-state,.ride-saved-note{color:#94a3b8;font-size:.75rem;text-transform:capitalize}.ride-state.recording{color:#6ee7b7}.ride-state.paused{color:#fcd34d}.ride-saved-note{text-transform:none}.ride-toolbar-buttons{justify-content:flex-end}.ride-toolbar-buttons button{padding:.55rem .8rem;border:1px solid rgba(148,163,184,.25);border-radius:10px;background:#0f172acc;color:#e2e8f0;cursor:pointer}.ride-toolbar-buttons button:hover:not(:disabled){border-color:#7dd3fc8c}.ride-toolbar-buttons button:disabled{cursor:not-allowed;opacity:.45}.ride-toolbar-buttons .ride-start{background:#0891b240;border-color:#22d3ee66;color:#cffafe}.ride-toolbar-buttons .ride-stop{border-color:#fb718559}.ride-toolbar-buttons .ride-cancel{border-color:#fbbf2459}.ride-shortcuts{grid-column:1 / -1;margin:0;color:#94a3b8;font-size:.7rem}.ride-shortcuts kbd{padding:.1rem .25rem;border:1px solid rgba(148,163,184,.25);border-radius:4px;color:#cbd5e1;background:#0f172acc}.mode-switch{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:flex-end}.mode-switch button{padding:.55rem .75rem;border-radius:10px;color:#cbd5e1;border:1px solid rgba(148,163,184,.25);background:#0208178c;cursor:pointer}.mode-switch button.active{color:#cffafe;border-color:#22d3ee8c;background:#0891b233}.youtube-form{display:flex;align-items:center;gap:.6rem;margin-bottom:.9rem}.youtube-form a{color:#7dd3fc;font-size:.85rem;white-space:nowrap}.video-layout{display:grid;gap:.75rem;align-items:stretch}.video-layout.side-mode{grid-template-columns:minmax(160px,.52fr) minmax(300px,1.9fr) minmax(160px,.52fr)}.video-layout.overlay-mode{grid-template-columns:minmax(0,1fr)}.video-frame{position:relative;overflow:hidden;width:100%;min-width:0;align-self:center;aspect-ratio:16 / 9;border-radius:16px;background:#020617;border:1px solid rgba(148,163,184,.2)}.video-frame iframe{display:block;width:100%;height:100%;border:0}.video-fullscreen-button{position:absolute;top:.6rem;right:.6rem;z-index:2;display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid rgba(226,232,240,.35);border-radius:10px;color:#f8fafc;background:#020817b3;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);cursor:pointer;opacity:.75;transition:opacity .15s ease-in-out}.video-fullscreen-button:hover,.video-fullscreen-button:focus-visible{opacity:1;border-color:#7dd3fccc}.video-frame:fullscreen{width:100vw;height:100vh;aspect-ratio:auto;border:0;border-radius:0}.video-frame:fullscreen .overlay-metrics{left:2%;right:2%;bottom:6%;gap:.75rem}.video-frame:fullscreen .overlay-metrics .metric-card{padding:.8rem 1.1rem}.video-frame:fullscreen .overlay-metrics .metric-card span{font-size:clamp(.8rem,1.2vw,1.1rem)}.video-frame:fullscreen .overlay-metrics .metric-card strong{font-size:clamp(1.4rem,3.2vw,3rem)}.video-empty{display:grid;align-content:center;justify-items:center;gap:.55rem;height:100%;padding:1.5rem;text-align:center;color:#cbd5e1}.video-empty strong{color:#f8fafc}.video-empty small{max-width:28rem}.play-icon{width:52px;height:52px;display:grid;place-items:center;padding-left:4px;border-radius:50%;color:#020817;background:#67e8f9}.side-metrics{display:flex;flex-direction:column;justify-content:space-between;gap:.5rem;min-width:0}.side-metrics .metric-card{align-content:center;padding:.75rem;min-height:0;min-width:0}.side-metrics .metric-card strong{font-size:clamp(1rem,1.5vw,1.6rem)}.overlay-metrics{position:absolute;left:3%;right:3%;bottom:3%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;pointer-events:none}.overlay-metrics .metric-card{padding:.5rem .7rem;background:#020817c2;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);pointer-events:auto}.overlay-metrics .metric-card span{font-size:clamp(.55rem,1vw,.75rem)}.overlay-metrics .metric-card strong{font-size:clamp(.85rem,1.7vw,1.5rem)}.viewing-note,.storage-note{color:#94a3b8;font-size:.78rem;margin:.75rem 0 0}.data-backup-actions{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1rem}.data-backup-actions button,.file-input-button{position:relative;display:inline-flex;align-items:center;padding:.7rem .9rem;border:1px solid rgba(148,163,184,.25);border-radius:12px;background:#0f172acc;color:#e2e8f0;font:inherit;cursor:pointer}.cloud-sync-heading{margin-top:1.5rem}.cloud-sync-controls{display:grid;justify-items:start;gap:.6rem}.sync-opt-in{display:flex;align-items:center;gap:.55rem;cursor:pointer}.sync-opt-in input{width:1rem;height:1rem;accent-color:#22d3ee}.sync-conflict{align-items:flex-start;flex-wrap:wrap}.sync-conflict p{margin:0 0 .35rem}.sync-conflict small{display:block;color:#94a3b8}.account-controls{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:.75rem}.account-controls button{padding:.5rem .75rem;border:1px solid rgba(148,163,184,.25);border-radius:10px;background:#0f172acc;color:#e2e8f0;font:inherit;cursor:pointer}.data-backup-actions button:hover,.file-input-button:hover{border-color:#7dd3fc80}.data-backup-actions button:disabled,.file-input-button[aria-disabled=true]{cursor:not-allowed;opacity:.5}.file-input-button input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;opacity:0;cursor:inherit}.content-grid,.lower-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(260px,.9fr);gap:1rem}.content-grid{margin-bottom:1rem}.content-grid.power-grid{grid-template-columns:minmax(0,1fr)}.panel{background:#0f172ab3;border:1px solid rgba(148,163,184,.2);border-radius:20px;padding:1rem 1.1rem}.large-panel{min-height:280px}.panel-header{display:flex;justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:.9rem}.panel-header button{padding:.5rem .8rem;border-radius:999px;cursor:pointer}.ride-graphs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}.ride-graph-card{min-width:0;padding:.75rem;border:1px solid rgba(148,163,184,.14);border-radius:12px;background:#02081759}.ride-graph-card h4{margin:0 0 .5rem;color:#cbd5e1;font-size:.78rem}.ride-graph{display:block;width:100%;height:150px;overflow:visible}.ride-graph-wrap{position:relative}.graph-y-tick line{stroke:#94a3b82e;stroke-width:.35}.graph-y-tick-label{fill:#94a3b8;font-size:4px}.graph-y-axis-line{stroke:#94a3b880;stroke-width:.6}.graph-hover-line{stroke:#e2e8f0b3;stroke-width:.5;stroke-dasharray:2 1;pointer-events:none}.graph-hover-point{stroke:#f8fafc;stroke-width:.8;pointer-events:none}.graph-interaction{fill:transparent;cursor:crosshair;pointer-events:all}.graph-tooltip{position:absolute;z-index:1;display:grid;gap:.1rem;padding:.35rem .5rem;border:1px solid rgba(148,163,184,.35);border-radius:7px;background:#020817;color:#f8fafc;font-size:.7rem;line-height:1.25;white-space:nowrap;transform:translate(-50%,calc(-100% - 6px));pointer-events:none}.graph-tooltip span{color:#94a3b8;font-size:.62rem}.chart-empty{margin:0;min-height:150px;display:grid;place-items:center;color:#94a3b8;font-size:.78rem}.metric-note{color:#94a3b8;font-size:.65rem;font-weight:400}.button-stack{display:grid;gap:.7rem}.button-stack button,.preset{padding:.75rem .9rem;border-radius:12px;cursor:pointer}.button-stack button:hover,.nav-item:hover,.preset:hover,.panel-header button:hover{border-color:#7dd3fc80;transform:translateY(-1px)}.preset-list{display:flex;flex-wrap:wrap;gap:.5rem}.session-log{list-style:none;padding:0;margin:0;display:grid;gap:.8rem}.session-log li{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.6rem .75rem;border-radius:12px;background:#0f766e14}.session-log span{text-transform:capitalize}.session-log small{color:#cbd5e1}.button-row{display:flex;flex-wrap:wrap;gap:.5rem}.button-row button{padding:.45rem .7rem;border:1px solid rgba(148,163,184,.25);border-radius:9px;color:#e2e8f0;background:#0f172acc;cursor:pointer}.button-row button:hover:not(:disabled){border-color:#7dd3fc8c}.button-row button:disabled{cursor:not-allowed;opacity:.5}.notice .text-button{color:#7dd3fc;text-decoration:underline}.ride-history-panel{display:grid;gap:.75rem}.ride-history-panel .panel-header{margin-bottom:0}.ride-history-item{display:grid;width:100%;gap:.3rem;padding:.2rem;border:0;color:#e2e8f0;background:transparent;text-align:left;cursor:pointer}.ride-history-item span{font-weight:650}.ride-history-item small{color:#94a3b8}.ride-history-item:hover span{color:#7dd3fc}.history-delete{padding:.5rem .75rem;border:1px solid rgba(251,113,133,.35);border-radius:9px;color:#fda4af;background:#0f172acc;cursor:pointer}.layout-manager{display:grid;gap:.8rem;margin-top:.8rem}.layout-manager-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.6rem}.layout-manager-row label{display:grid;gap:.25rem;color:#cbd5e1;font-size:.73rem}.layout-manager-row select,.layout-manager-row input{min-width:14rem;padding:.55rem .7rem;color:#e2e8f0;background:#0f172a;border:1px solid rgba(148,163,184,.3);border-radius:10px}.layout-manager-row button{padding:.55rem .8rem;border:1px solid rgba(34,211,238,.35);border-radius:10px;color:#cffafe;background:#0891b238;cursor:pointer}.layout-manager-row button:disabled{cursor:not-allowed;opacity:.5}.layout-manager-row .text-button{border-color:transparent;background:transparent;color:#fda4af}.history-back{justify-self:start;padding:.5rem .75rem;border:1px solid rgba(148,163,184,.25);border-radius:9px;color:#e2e8f0;background:#0f172acc;cursor:pointer}.ride-detail-date{margin:0;color:#cbd5e1}.ride-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.65rem;margin:0}.ride-summary-grid>div{padding:.7rem;border:1px solid rgba(148,163,184,.14);border-radius:10px;background:#02081759}.ride-summary-grid dt{color:#94a3b8;font-size:.72rem}.ride-summary-grid dd{margin:.25rem 0 0;font-size:1.1rem;font-weight:700}.profile-list li>span{font-weight:650}@media(max-width:980px){.app-shell{grid-template-columns:1fr}.sidebar{border-right:none;border-bottom:1px solid rgba(148,163,184,.2)}.metrics-grid,.content-grid,.lower-grid{grid-template-columns:1fr 1fr}.video-layout.side-mode{grid-template-columns:minmax(130px,.45fr) minmax(250px,1.8fr) minmax(130px,.45fr)}.panel-settings-row{grid-template-columns:minmax(130px,1fr) auto minmax(100px,.8fr) 55px}.panel-settings-row>label:nth-last-child(-n+2){grid-column:span 2}}@media(max-width:680px){.main-panel{padding:1rem}.metrics-grid,.content-grid,.lower-grid,.ride-graphs,.video-layout.side-mode{grid-template-columns:1fr}.side-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.viewer-header{flex-direction:column}.ride-toolbar{grid-template-columns:1fr}.ride-toolbar-buttons{justify-content:flex-start}.ride-shortcuts{grid-column:auto}.youtube-form{flex-wrap:wrap}.youtube-form input{flex-basis:100%}.topbar{align-items:flex-start;flex-direction:column}.overlay-metrics{gap:.25rem}.overlay-metrics .metric-card{padding:.3rem}.panel-settings-row{grid-template-columns:1fr auto}.panel-settings-row>label{grid-column:span 2}}