:root { color-scheme: light; background: #f4f7fb; }
body { margin: 0; background: #f4f7fb; }
#arvento-power-zone-training { --nav:#08111f; --surface:#fff; --panel:#f3f6f9; --line:#d8e0ea; --text:#0b1728; --muted:#43566d; --accent:#256dff; --good:#2fa66a; --warn:#b8750b; min-height:100vh; overflow-x:clip; border-bottom:1px solid var(--line); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; line-height:1.5; }
#arvento-power-zone-training *,#arvento-power-zone-training *::before,#arvento-power-zone-training *::after { box-sizing:border-box; }
#arvento-power-zone-training button,#arvento-power-zone-training input { font:inherit; }
#arvento-power-zone-training button:focus-visible,#arvento-power-zone-training input:focus-visible,#arvento-power-zone-training a:focus-visible { outline:3px solid rgba(37,109,255,.35); outline-offset:3px; }
.erg-product-header { color:#fff; background:var(--nav); }
.erg-header-inner { display:flex; width:min(1120px,calc(100% - 32px)); min-height:64px; margin:auto; align-items:center; gap:10px; font-size:.76rem; font-weight:800; letter-spacing:.11em; }
.erg-product-label { color:#b8c5d8; font-size:.66rem; font-weight:700; letter-spacing:.04em; }
.erg-brand-mark { display:grid; width:34px; height:34px; place-items:center; border-radius:10px; background:var(--accent); font-size:1rem; }
.erg-space-return { display:flex; min-height:44px; margin-left:auto; padding:0 4px; align-items:center; border-radius:6px; color:#fff; font-size:.72rem; font-weight:800; letter-spacing:.06em; text-decoration:none; white-space:nowrap; }
.erg-space-return:hover { background:rgba(255,255,255,.09); }
.erg-shell { display:grid; width:min(1080px,calc(100% - 32px)); margin:auto; padding:28px 0 88px; gap:14px; }
.erg-hero { max-width:820px; padding:24px 0 12px; }
.erg-section-heading p,.erg-summary > p { margin:0 0 6px; color:var(--accent); font-size:.8125rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.erg-hero h1 { margin:0 0 8px; font-size:clamp(2.125rem,4vw,2.5rem); font-weight:700; line-height:1.02; letter-spacing:-.04em; }
.erg-hero .erg-hero-headline { margin:0; color:var(--muted); font-size:clamp(1.15rem,2.4vw,1.55rem); font-weight:650; letter-spacing:-.02em; line-height:1.25; }
.erg-help { color:var(--muted); font-size:.9375rem; font-weight:500; }
.erg-panel { min-width:0; padding:26px; border:1px solid var(--line); border-radius:16px; background:var(--surface); }
.erg-section-heading { display:flex; align-items:end; justify-content:space-between; gap:14px; margin-bottom:14px; }
.erg-section-heading h2,.erg-summary h2 { margin:0; font-size:clamp(1.625rem,3vw,2rem); font-weight:700; line-height:1; letter-spacing:-.04em; }
.erg-section-heading small { color:var(--muted); font-size:.9375rem; font-weight:500; line-height:1.5; }
.erg-state { display:inline-flex; align-items:center; min-height:34px; padding:6px 11px; border-radius:999px; color:var(--muted); background:var(--panel); font-size:.875rem; font-weight:700; letter-spacing:.035em; text-transform:uppercase; white-space:nowrap; }
.erg-ftp-field { display:flex; min-height:68px; max-width:340px; align-items:center; gap:12px; padding:10px 14px; border:1px solid #c8d3e0; border-radius:12px; background:#fff; transition:border-color .15s ease,box-shadow .15s ease; }
.erg-ftp-field:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,109,255,.12); }
.erg-ftp-field span { color:var(--muted); font-size:.7rem; font-weight:800; letter-spacing:.08em; }
.erg-ftp-field input { min-width:0; flex:1; border:0; outline:0; color:var(--text); background:transparent; font-size:2.2rem; font-weight:850; letter-spacing:-.06em; font-variant-numeric:tabular-nums; }
.erg-ftp-field b { color:var(--muted); }
.erg-device-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.erg-device-card { display:grid; min-width:0; min-height:212px; align-content:start; gap:12px; padding:20px; border:1px solid var(--line); border-radius:13px; background:var(--panel); }
.erg-device-card > div { display:flex; justify-content:space-between; gap:8px; color:var(--muted); font-size:.8125rem; font-weight:700; letter-spacing:.035em; }
.erg-device-card > b { overflow-wrap:anywhere; font-size:1.0625rem; font-weight:700; }.erg-device-card small { min-height:42px; color:var(--muted); font-size:.9375rem; font-weight:500; line-height:1.45; }
.erg-device-card .erg-button { margin-top:auto; }
.erg-button { min-height:56px; padding:14px 18px; border:1px solid #bdc9d8; border-radius:11px; cursor:pointer; color:var(--text); background:#e7eef6; font-size:1.0625rem; font-weight:700; letter-spacing:.02em; text-transform:uppercase; transition:background-color .15s ease,border-color .15s ease,transform .08s ease; }
.erg-button:hover:not(:disabled) { border-color:#a9b8ca; background:#dde7f1; }.erg-button:active:not(:disabled) { transform:translateY(1px); }.erg-button:disabled { cursor:not-allowed; border-color:#d8e0ea; background:#edf1f5; opacity:.55; }
.erg-button-primary { border-color:var(--accent); color:#fff; background:var(--accent); }.erg-button-primary:hover:not(:disabled) { border-color:#185ce5; background:#185ce5; }
.erg-strava-panel { display:grid; min-width:0; gap:8px; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--panel); }
.erg-strava-panel > strong { color:var(--text); font-size:.7rem; letter-spacing:.12em; }
.erg-strava-panel > span { min-height:1.5em; overflow-wrap:anywhere; color:var(--muted); font-size:.76rem; font-weight:750; }
.erg-strava-panel .erg-button { width:100%; text-align:center; text-decoration:none; }
.erg-source-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.erg-source-option { min-height:58px; font-size:1.0625rem; text-align:left; }.erg-source-option[aria-pressed="true"] { border-color:var(--accent); box-shadow:0 0 0 2px rgba(37,109,255,.16),0 4px 12px rgba(37,109,255,.2); color:#fff; background:var(--accent); }
.erg-zone-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }.erg-zone-button { width:100%; min-height:56px; border-color:#c8d3e0; background:var(--panel); font-size:1.125rem; font-weight:700; white-space:nowrap; }#arvento-power-zone-training .erg-zone-button { font-size:1.125rem; }.erg-zone-button:hover:not(:disabled) { border-color:#8ea0b7; background:#dfe8f2; }.erg-zone-button[aria-pressed="true"] { border-color:var(--accent); box-shadow:0 0 0 2px rgba(37,109,255,.2),0 4px 12px rgba(37,109,255,.22); color:#fff; background:var(--accent); font-weight:800; }.erg-zone-detail { min-height:76px; margin-top:10px; padding:14px 18px; border-left:4px solid var(--accent); background:var(--panel); }.erg-zone-detail strong { display:block; font-size:1.375rem; font-weight:700; }.erg-zone-detail span { color:var(--muted); font-size:.9375rem; font-weight:500; }.erg-zone-guide { display:flex; align-items:baseline; gap:9px; margin-top:10px; }.erg-zone-guide span { color:var(--accent); font-size:.8125rem; font-weight:700; letter-spacing:.05em; }.erg-zone-guide b { font-size:1.375rem; font-weight:800; font-variant-numeric:tabular-nums; }
.erg-ready-summary,.erg-live-grid,.erg-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:0 0 16px; }.erg-ready-summary div,.erg-live-grid div,.erg-summary-grid div { min-width:0; padding:15px; border:1px solid var(--line); border-radius:11px; background:var(--panel); }.erg-ready-summary dt,.erg-live-grid dt,.erg-summary-grid dt,.erg-power-pair dt { color:var(--muted); font-size:.8125rem; font-weight:700; letter-spacing:.035em; }.erg-ready-summary dd,.erg-live-grid dd,.erg-summary-grid dd,.erg-power-pair dd { margin:6px 0 0; overflow-wrap:anywhere; font-size:1.1875rem; font-weight:750; font-variant-numeric:tabular-nums; line-height:1.3; }.erg-start { width:100%; color:#000; }.erg-start:disabled { border-color:#c8d1dc; color:#000; background:#e3e8ef; opacity:1; }.erg-start + .erg-help { margin:12px 0 0; }.erg-start,.erg-end { min-height:58px; font-size:1.125rem; font-weight:700; }.erg-live { border-color:#bcd0ff; }.erg-live-zone { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:-4px 0 16px; }.erg-live-zone strong { font-size:1.375rem; font-weight:700; }.erg-live-zone span { color:var(--muted); font-size:1rem; font-weight:700; }.erg-callout { margin:0 0 16px; padding:15px; border-radius:11px; color:#123c90; background:#eaf1ff; font-size:1rem; font-weight:800; text-align:center; }.erg-power-pair { display:grid; grid-template-columns:1fr; gap:10px; margin:0 0 16px; }.erg-power-pair div { padding:20px; border-radius:14px; color:#fff; background:var(--nav); }.erg-power-pair dt { color:#e2eaf5; }.erg-power-pair dd { font-size:clamp(2.75rem,8vw,4.6rem); line-height:.95; letter-spacing:-.07em; }.erg-power-status--below,.erg-power-status--unavailable { background:var(--nav) !important; }.erg-power-status--in-zone { background:var(--good) !important; }.erg-power-status--above { background:#c9424b !important; }.erg-power-status-legend { display:flex; flex-wrap:wrap; gap:8px 14px; margin:0 0 16px; padding:0; color:var(--muted); font-size:.9375rem; list-style:none; }.erg-power-status-legend li { display:flex; align-items:center; gap:6px; }.erg-status-dot { width:10px; height:10px; border-radius:50%; }.erg-status-dot--below { background:var(--nav); }.erg-status-dot--in-zone { background:var(--good); }.erg-status-dot--above { background:#c9424b; }.erg-zone-guidance { display:grid; gap:5px; margin:0 0 14px; padding:17px; border:1px solid #c8d7f4; border-radius:12px; background:#f3f7ff; }.erg-zone-guidance strong { color:#123c90; font-size:1.0625rem; letter-spacing:.035em; }.erg-zone-guidance span { color:var(--muted); font-size:.9375rem; font-weight:500; }.erg-end { width:100%; margin-top:18px; border-color:#d95c66; color:#8f2530; background:#fff0f1; }.erg-summary-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:760px) { .erg-device-grid { grid-template-columns:1fr; }.erg-ready-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }.erg-live-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.erg-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px) { .erg-header-inner,.erg-shell { width:min(calc(100% - 20px),1080px); }.erg-header-inner { min-height:58px; }.erg-shell { padding:12px 0 64px; gap:11px; }.erg-hero { padding:18px 2px 9px; }.erg-hero h1 { overflow-wrap:anywhere; font-size:2.125rem; }.erg-hero .erg-hero-headline { font-size:1.125rem; }.erg-panel { padding:18px; border-radius:14px; }.erg-section-heading { align-items:start; flex-direction:column; gap:8px; margin-bottom:14px; }.erg-device-grid { gap:11px; }.erg-device-card { min-height:0; gap:10px; padding:18px; }.erg-device-card > div { flex-wrap:wrap; }.erg-device-card small { min-height:0; }.erg-zone-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.erg-zone-button,#arvento-power-zone-training .erg-zone-button { min-height:68px; font-size:1.25rem; }.erg-source-options,.erg-power-pair { grid-template-columns:1fr; }.erg-live-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.erg-button { padding-inline:14px; }.erg-ready-summary { margin-bottom:13px; }.erg-ready-summary div { padding:13px; } }
@media (max-width:500px) { .erg-hero h1 { font-size:2.125rem; } }
@media (max-width:430px) { .erg-zone-guidance { padding:12px; } }
@media (max-width:430px) { .erg-strava-panel { padding:0; border:0; background:transparent; } }
@media (max-width:390px) { .erg-product-label { display:none; }.erg-summary-grid { grid-template-columns:1fr; }.erg-live-zone { align-items:start; flex-direction:column; gap:2px; } }
@media (prefers-reduced-motion:reduce) { #arvento-power-zone-training * { scroll-behavior:auto !important; } }
.erg-zone-guidance { grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:12px; }
.erg-guidance-copy { display:grid; min-width:0; gap:4px; }
.erg-power-status-legend { display:block; margin:0; padding:0; list-style:none; }
.erg-power-status-legend > strong { display:block; margin-bottom:7px; color:var(--text); font-size:.8125rem; font-weight:700; letter-spacing:.05em; }
.erg-power-status-legend ul { display:flex; flex-wrap:wrap; gap:8px 14px; margin:0; padding:0; list-style:none; }
.erg-power-status-legend li { white-space:nowrap; }
@media (max-width:520px) { .erg-zone-guidance { grid-template-columns:minmax(0,1fr); gap:10px; } }
.erg-setup-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.erg-setup-grid > div { min-width:0; }
.erg-setup-grid h2 { margin:0 0 13px; font-size:clamp(1.5rem,3vw,1.875rem); line-height:1; letter-spacing:-.04em; }
.erg-setup-grid .erg-help { margin:9px 0 0; }
.erg-setup-grid .erg-ftp-field { max-width:none; }
.erg-zone-header { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:4px 18px; }
.erg-zone-header .erg-zone-guide { margin:0; flex-shrink:0; white-space:nowrap; font-size:.85rem; }
.erg-zone-header .erg-zone-guide span { color:var(--muted); }
@media (max-width:760px) { .erg-setup-grid { grid-template-columns:1fr; gap:14px; } }
@media (max-width:520px) { .erg-zone-header { align-items:flex-start; flex-direction:column; } }
.erg-summary-grid > div:last-child { border-color:#aec7fa; }
.erg-summary > .erg-help { margin:12px 0 22px; color:var(--muted); font-size:.9375rem; font-weight:500; letter-spacing:normal; text-transform:none; }
.erg-summary-distributions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:28px; }
.erg-distribution { min-width:0; }
.erg-distribution h3 { margin:0; font-size:1rem; font-weight:700; letter-spacing:.07em; }
.erg-distribution .erg-help { margin:6px 0 18px; font-size:.875rem; }
.erg-distribution-list { display:grid; gap:14px; margin:0; padding:0; list-style:none; }
.erg-distribution-row { display:grid; grid-template-columns:minmax(0,1fr) 48px 42px; align-items:center; gap:7px 10px; font-size:.9375rem; font-variant-numeric:tabular-nums; }
.erg-distribution-label { display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline; }
.erg-distribution-label span { color:var(--muted); font-size:.875rem; }
.erg-distribution-row > time,.erg-distribution-row > b { text-align:right; }
.erg-distribution-bar { grid-column:1/-1; height:8px; overflow:hidden; border-radius:5px; background:#edf1f7; }
.erg-distribution-bar > span { display:block; height:100%; border-radius:5px; background:#547fac; }
.erg-distribution-hr .erg-distribution-bar > span { background:#b3657e; }
.erg-summary-details { margin-top:28px; font-size:.9375rem; }
.erg-summary-details summary { min-height:44px; cursor:pointer; color:var(--muted); font-weight:800; }
.erg-summary-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:14px; margin-top:28px; padding-top:22px; border-top:1px solid var(--line); }
.erg-summary-actions .erg-button { width:100%; min-height:56px; }
.erg-strava-reservation { text-align:center; }
.erg-strava-reservation span { display:block; margin-top:6px; color:var(--muted); font-size:.65rem; letter-spacing:.12em; }
@media (max-width:760px) { .erg-summary-distributions,.erg-summary-actions { grid-template-columns:1fr; } }
.erg-pre-ride-strava { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:0; padding:13px 15px; border:1px solid var(--line); border-radius:11px; background:var(--surface); }
.erg-pre-ride-strava div { display:grid; min-width:0; gap:3px; }
.erg-pre-ride-strava strong { color:var(--muted); font-size:.8125rem; letter-spacing:.035em; }
.erg-pre-ride-strava span { font-weight:750; overflow-wrap:anywhere; }
.erg-pre-ride-strava small { color:var(--muted); line-height:1.3; }
.erg-pre-ride-strava small:empty,.erg-pre-ride-strava button:empty { display:none; }
.erg-pre-ride-strava button { flex:0 0 auto; min-height:44px; }
@media (max-width:520px) { .erg-pre-ride-strava { align-items:stretch; flex-direction:column; gap:10px; }.erg-pre-ride-strava button { width:100%; } }