/* V6 Phase 2 — visual fidelity layer. Kept separate from live.css so layout/data work stays reviewable. */

body{background:radial-gradient(circle at 82% 0,#fbfdff 0,#f5f8fc 28%,var(--bg) 62%)}
.shell{background:transparent}
.workspace{max-width:1540px;padding-top:24px}

/* Desktop shell: closer to the approved performance-console mockup. */
.sidebar{overflow:hidden;isolation:isolate;background:linear-gradient(180deg,rgba(252,253,255,.985) 0%,rgba(248,251,254,.985) 46%,rgba(244,248,252,.985) 100%)}
.sidebar>*{position:relative;z-index:2}
.sidebar::before{content:"";position:absolute;z-index:0;left:0;right:0;bottom:82px;height:43%;background-image:linear-gradient(180deg,rgba(249,251,254,1) 0%,rgba(249,251,254,.17) 18%,rgba(249,251,254,.04) 70%,rgba(249,251,254,.92) 100%),url('./assets/sidebar-road.svg');background-size:cover;background-position:center 64%;opacity:.96;pointer-events:none}
.sidebar::after{content:"MEHR AUS JEDER FAHRT";position:absolute;z-index:1;left:25px;bottom:118px;max-width:150px;color:#fff;font-size:10px;font-weight:800;line-height:1.7;letter-spacing:.20em;text-shadow:0 2px 14px rgba(9,25,38,.48);pointer-events:none}
.brand{padding-bottom:28px}
.brand-mark{background:transparent;color:var(--blue);border:1px solid #d7e5f2;box-shadow:0 5px 16px rgba(20,53,84,.06)}
.brand strong{font-size:19px}
.side-nav button.active{background:linear-gradient(90deg,#e6f1ff,#edf6ff);box-shadow:inset 3px 0 0 var(--blue),0 6px 18px rgba(11,107,203,.07)}
.side-bottom{padding-top:10px;background:linear-gradient(180deg,rgba(249,251,254,0),rgba(249,251,254,.96) 24%)}

.page-head{margin-bottom:16px}
.page-head h1{font-size:36px;letter-spacing:-.045em}
.subline{font-size:13px}
.surface,.live-kpi,.focus-panel,.live-assessment,.live-feedback{box-shadow:0 8px 24px rgba(23,42,68,.055)}

/* Compact load header. */
.load-strip{border-color:#dfe8f1;box-shadow:0 5px 18px rgba(23,42,68,.045);padding:14px 18px}
.mini-bars{height:54px}
.mini-bars i{background:linear-gradient(180deg,#c7dcf1,#a9c9e8)}
.mini-bars i.current{background:linear-gradient(180deg,#3b96e8,#0b6bcb)}

/* Hero image / training-first hierarchy. */
.workout-hero{position:relative;isolation:isolate;overflow:hidden;min-height:340px;padding:28px 28px 22px;background:linear-gradient(90deg,#f8fbff 0%,rgba(248,251,255,.98) 42%,rgba(248,251,255,.72) 58%,rgba(247,251,255,.08) 100%);border-color:#bed8f2;box-shadow:0 12px 34px rgba(27,65,100,.08)}
.workout-hero::before{content:"";position:absolute;z-index:-2;inset:0 0 0 34%;background:url('./assets/hero-ride.svg') center right/cover no-repeat;opacity:.95;pointer-events:none}
.workout-hero::after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(249,252,255,1) 0%,rgba(249,252,255,.98) 42%,rgba(249,252,255,.78) 57%,rgba(249,252,255,.16) 78%,rgba(249,252,255,.03) 100%);pointer-events:none}
.hero-copy{max-width:720px}
.hero-main{font-size:56px;letter-spacing:-.055em;color:#0d1f32}
.hero-metrics{max-width:690px}
.hero-metrics strong{font-size:22px}
.live-timeline{position:relative;z-index:2;margin-top:24px;margin-bottom:15px;max-width:100%}
.live-timeline .segment{box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.hero-actions{position:relative;z-index:2}
.primary-btn{box-shadow:0 9px 22px rgba(11,107,203,.24)}

/* Lower cards: flatter, cleaner, more like the reference composition. */
.three-grid{gap:12px}
.focus-panel{min-height:178px;padding:17px 18px}
.focus-panel h3{font-size:17px}
.panel-accent-green{position:relative;overflow:hidden}
.panel-accent-green::after{content:"";position:absolute;right:-10px;bottom:-12px;width:115px;height:95px;background:url('./assets/sidebar-road.svg') center 42%/cover no-repeat;opacity:.10;filter:saturate(.5);pointer-events:none}
.panel-accent-amber{background:linear-gradient(135deg,#fff9e9 0%,#fffdf8 70%)}
.performance-strip{box-shadow:0 5px 18px rgba(23,42,68,.045)}
.performance-strip>div{min-height:82px}

/* Analytics surfaces remain data-first; only the visual rhythm is refined. */
.live-kpi{border-radius:14px;background:linear-gradient(180deg,#fff,#fbfcfe)}
.live-chart-card,.live-map-card,.live-panel,.echart-card{border-color:#dfe7f0}
.live-map{box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.echart,.live-chart{min-height:280px}

/* Phase 2C — analytics polish. */
.live-chart-card,.live-map-card,.echart-card{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff 0%,#fcfdff 100%)}
.live-chart-card::before,.echart-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#0b6bcb 0%,#69aceb 42%,rgba(105,172,235,0) 100%);opacity:.72}
.live-map-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#147a52 0%,#77b99d 46%,rgba(119,185,157,0) 100%);opacity:.72}
.live-chart-card .card-head,.live-map-card .card-head,.echart-card .card-head{padding-bottom:8px;border-bottom:1px solid #edf2f7;margin-bottom:4px}
.live-chart-card .card-head h3,.live-map-card .card-head h3,.echart-card .card-head h3{font-size:18px;letter-spacing:-.018em}
.legend{background:#f7f9fc;border:1px solid #e8eef5;border-radius:999px;padding:5px 8px;align-self:flex-start}
.legend i{height:2px}
.live-map{position:relative;border-color:#dce6e1;background:#edf4f0;border-radius:14px}
.live-map::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),inset 0 -30px 55px rgba(19,48,64,.035);border-radius:inherit;z-index:2}
.live-map .maplibregl-ctrl-group{border-radius:10px;overflow:hidden;box-shadow:0 5px 18px rgba(22,46,68,.12)}
.live-map .maplibregl-ctrl-group button{width:30px;height:30px}
.live-map .maplibregl-ctrl-attrib{background:rgba(255,255,255,.78);backdrop-filter:blur(5px)}
.live-status{box-shadow:inset 0 0 0 1px rgba(20,122,82,.08)}

.development-kpis .kpi{position:relative;overflow:hidden}
.development-kpis .kpi::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:2px;border-radius:999px;background:linear-gradient(90deg,#0b6bcb,rgba(11,107,203,0));opacity:.35}
.profile-item>i{height:10px;box-shadow:inset 0 0 0 1px #e3eaf2}
.profile-item>i>b{background:linear-gradient(90deg,#8ec5f2 0%,#0b6bcb 100%)}
.data-note{border:1px solid #e7edf4;background:#f8fafc}

/* Early responsive hardening; full chart/mobile pass remains Phase 3. */
@media(max-width:1180px){
  .workout-hero::before{inset:0 0 0 45%;opacity:.74}
  .workout-hero::after{background:linear-gradient(90deg,#f9fcff 0%,rgba(249,252,255,.98) 50%,rgba(249,252,255,.72) 68%,rgba(249,252,255,.18) 100%)}
  .hero-main{font-size:50px}
}

@media(max-width:760px){
  .sidebar::before,.sidebar::after{display:none}
  .page-head h1{font-size:29px}
  .workout-hero{min-height:0;padding:20px 16px 17px;background:linear-gradient(145deg,#f5faff,#fff)}
  .workout-hero::before{inset:0;background-position:68% center;opacity:.12}
  .workout-hero::after{background:linear-gradient(180deg,rgba(249,252,255,.98),rgba(249,252,255,.93))}
  .hero-main{font-size:40px}
  .hero-metrics strong{font-size:18px}
  .live-timeline{margin-top:18px}
  .echart,.live-chart{height:260px;min-height:240px}
  .legend{padding:4px 7px}
}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}