:root {
  --bg: #05111d;
  --bg-2: #071b2b;
  --panel: rgba(7, 29, 45, 0.74);
  --panel-2: rgba(3, 18, 31, 0.84);
  --line: rgba(67, 145, 196, 0.30);
  --text: #ecf6ff;
  --muted: #93abc0;
  --accent: #5dc7ff;
  --accent-2: #76ffe2;
  --good: #41e88a;
  --warn: #ffae42;
  --bad: #ff6c7b;
  --glow: 0 0 0 1px rgba(66, 160, 216, 0.22), 0 22px 40px rgba(0,0,0,.33);
  --radius: 24px;
  --radius-sm: 16px;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(circle at top right, rgba(12, 89, 149, 0.45), transparent 32%),
    radial-gradient(circle at 15% 15%, rgba(24, 98, 163, 0.28), transparent 26%),
    linear-gradient(180deg, #071a2a 0%, #04101b 52%, #04101a 100%);
}
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
.page-frame {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 20px;
  width: min(1580px, calc(100vw - 20px));
  margin: 12px auto;
}
.glass {
  background: linear-gradient(180deg, rgba(5,22,35,.90), rgba(4,18,30,.86));
  border: 1px solid rgba(62, 140, 191, 0.24);
  border-radius: var(--radius);
  box-shadow: var(--glow);
  backdrop-filter: blur(12px);
}
.sidebar {
  position: sticky;
  top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 18px 12px;
  min-height: calc(100vh - 24px);
}
.sidebar-logo, .nav-icon {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(90, 176, 233, .24);
  background: rgba(7, 31, 48, 0.72);
  color: #d8f6ff;
  font-size: 24px;
}
.sidebar-logo {
  width: 56px; height: 56px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(92,212,255,.28), rgba(5,26,46,.85));
  box-shadow: 0 0 24px rgba(72, 197, 255, .30);
}
.sidebar-nav { display: flex; flex-direction: column; gap: 12px; }
.nav-icon.active, .nav-icon:hover { background: linear-gradient(180deg, rgba(20,74,116,.9), rgba(8,41,67,.9)); box-shadow: 0 0 22px rgba(54,154,230,.24); }
.nav-icon.small { font-size: 20px; }
.sidebar-spacer { flex: 1; }
.sidebar-logout { margin: 0; }
.logout-button { cursor: pointer; }

.app-shell { min-width: 0; display: flex; flex-direction: column; gap: 20px; padding: 0 0 14px; }
.topbar {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 24px 28px;
}
.brand-block { display: flex; align-items: flex-start; gap: 16px; }
.brand-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle, #78f0ff 0%, #2cb5ff 46%, #0a3554 100%);
  margin-top: 11px; box-shadow: 0 0 18px rgba(83,199,255,.7);
}
.eyebrow {
  margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: #6bc8ff;
}
h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(34px, 4.3vw, 62px); line-height: 1; }
h2 { font-size: clamp(22px, 2vw, 30px); }
h3 { font-size: 16px; }
.muted, .panel-note, .flow-subhead span, .flow-card small, .detail-copy, .metric-label, .energy-metrics small, .chart-legend { color: var(--muted); }
.top-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.status-badge, .lock-badge {
  display: inline-flex; align-items: center; justify-content: center; min-height: 38px;
  padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(87, 171, 227, .24);
  background: rgba(10, 39, 60, 0.75); font-weight: 700; color: #dff6ff;
}
.status-badge.error, .lock-badge.locked { color: #ff9ba6; border-color: rgba(255, 102, 119, .45); background: rgba(63, 11, 23, .52); }
.status-badge.waiting { color: #b8d2e4; }
.lock-badge.unlocked { color: #87ffaf; border-color: rgba(85, 225, 132, .48); background: rgba(8, 54, 29, .54); }
.link-button, .icon-button, .small-button, .control-button, .dialog-primary, .dialog-secondary {
  border: 1px solid rgba(82, 165, 218, .26);
  background: linear-gradient(180deg, rgba(25, 86, 129, .95), rgba(12, 53, 83, .95));
  color: #edf8ff; cursor: pointer; border-radius: 14px; padding: 11px 16px; font-weight: 700;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}
.link-button:hover, .icon-button:hover, .small-button:hover, .control-button:hover, .dialog-primary:hover { filter: brightness(1.08); }
.icon-button { min-width: 46px; padding-inline: 0; font-size: 19px; }
.small-button { padding: 10px 14px; border-radius: 12px; }
.link-button.danger-link, .secondary-control, .dialog-secondary { background: linear-gradient(180deg, rgba(20,32,43,.92), rgba(10,21,29,.92)); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(330px, .8fr);
  gap: 20px;
}
.hero {
  position: relative; overflow: hidden; min-height: 350px; padding: 0;
  display: flex; align-items: stretch;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 18%, rgba(55, 157, 255, .24), transparent 24%),
              radial-gradient(circle at 18% 68%, rgba(25, 120, 255, .16), transparent 30%),
              linear-gradient(135deg, rgba(4, 15, 24, .30), transparent 55%);
  pointer-events: none;
}
.hero-image {
  width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; opacity: .98;
}
.hero-vignette {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(4, 19, 31, .28) 0%, rgba(4, 20, 33, .08) 55%, rgba(3, 16, 28, .66) 100%),
              linear-gradient(180deg, rgba(3, 15, 28, .08), rgba(3, 16, 30, .72));
}
.hero-copy {
  position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding: 30px;
}
.hero-copy strong { display: block; font-size: clamp(32px, 3vw, 48px); line-height: 1.02; }
.hero-copy span { display: block; margin-top: 10px; color: #c8ddeb; }
.hero-battery-box {
  min-width: 250px; padding: 18px; border-radius: 18px; background: rgba(5, 24, 40, .62); border: 1px solid rgba(91, 171, 220, .22);
}
.hero-battery-inline { display: flex; align-items: center; gap: 16px; margin: 10px 0 8px; }
.hero-side-stack { display: grid; gap: 20px; }
.panel { padding: 24px; }
.panel-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px;
}
.compact-head { margin-bottom: 14px; }
.side-status-card .status-bigline {
  font-size: clamp(22px, 2vw, 33px); font-weight: 800; margin-bottom: 8px;
}
.inline-mini-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px;
}
.inline-mini-grid > div, .flow-summary-grid article, .energy-metrics > div, .telemetry-strip article {
  border: 1px solid rgba(77, 148, 194, .22);
  background: rgba(4, 18, 31, .58); border-radius: 18px; padding: 16px;
}
.inline-mini-grid span, .flow-summary-grid span, .energy-metrics span, .telemetry-strip span, .state-row span, .charge-session-row span { display: block; color: var(--muted); font-size: 13px; }
.inline-mini-grid strong, .flow-summary-grid strong, .energy-metrics strong, .telemetry-strip strong { display: block; font-size: clamp(20px, 2vw, 31px); margin-top: 8px; }
.telemetry-strip {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; padding: 20px;
}
.telemetry-strip .wide-sub { grid-column: span 2; }
.telemetry-strip .total-range strong { display: inline-block; font-size: clamp(24px, 2.5vw, 44px); }
.telemetry-strip em { color: var(--muted); font-style: normal; font-weight: 700; margin-left: 6px; }
.notice { padding: 16px 20px; border-radius: 18px; border: 1px solid rgba(92, 159, 220, .24); background: rgba(8, 32, 49, .72); }
.notice.error { border-color: rgba(255, 104, 120, .40); background: rgba(62, 14, 24, .58); color: #ffd7dc; }
.notice.info { color: #d9eeff; }

.visual-flow-panel { padding: 28px; }
.energy-badges { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.flow-subhead {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 20px;
}
.flow-subhead strong { display: block; font-size: 24px; margin-bottom: 4px; }
.flow-battery-meta { text-align: right; }
.flow-battery-meta b { display: block; font-size: 26px; margin-top: 6px; }
.flow-layout {
  display: grid; grid-template-columns: minmax(250px, 1fr) minmax(200px, .8fr) minmax(250px, 1fr); gap: 18px; align-items: center;
}
.flow-column { display: grid; gap: 16px; }
.flow-card {
  position: relative; overflow: hidden; border-radius: 22px; padding: 20px; border: 1px solid rgba(84, 166, 219, .20); background: rgba(5, 20, 32, .72);
}
.flow-card::after {
  content: ""; position: absolute; inset: auto auto -24px -24px; width: 90px; height: 90px; border-radius: 50%; opacity: .18; filter: blur(5px);
}
.flow-card.pv::after, .flow-card.source.pv::after { background: #87f84b; }
.flow-card.grid::after, .flow-card.source.grid::after { background: #58c6ff; }
.flow-card.car::after, .flow-card.target.car::after { background: #57ff95; }
.flow-card.home::after, .flow-card.target.home::after { background: #71b8ff; }
.flow-card.export::after, .flow-card.target.export::after { background: #ffb042; }
.flow-card span { display: block; color: #c0d7e6; font-size: 15px; }
.flow-card strong { display: block; font-size: clamp(30px, 3vw, 48px); margin: 8px 0 4px; }
.flow-center { display: grid; gap: 18px; justify-items: center; }
.flow-node {
  width: min(100%, 260px); text-align: center; border-radius: 24px; padding: 22px; background: radial-gradient(circle at 50% 18%, rgba(35, 145, 255, .20), rgba(4, 18, 31, .84)); border: 1px solid rgba(84, 170, 228, .28);
  box-shadow: inset 0 0 40px rgba(10, 113, 209, .12), 0 0 22px rgba(52, 154, 255, .08);
}
.flow-node span { display: block; color: #bdd4e4; }
.flow-node strong { display: block; font-size: clamp(34px, 3vw, 52px); margin: 8px 0 4px; }
.flow-lines { width: 100%; display: grid; gap: 22px; }
.flow-line {
  position: relative; height: 18px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden;
}
.flow-line::before {
  content: ""; position: absolute; inset: 0; width: var(--flow-scale, 0%); border-radius: inherit;
  box-shadow: 0 0 18px rgba(255,255,255,.22);
}
.flow-line.green::before { background: linear-gradient(90deg, rgba(95, 247, 167, .22), rgba(117, 255, 117, .95)); }
.flow-line.blue::before { background: linear-gradient(90deg, rgba(73, 177, 255, .24), rgba(95, 199, 255, .95)); }
.flow-line.orange::before { background: linear-gradient(90deg, rgba(255, 166, 69, .25), rgba(255, 176, 61, .96)); }
.flow-summary-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-top: 20px;
}
.flow-summary-grid article strong { font-size: clamp(20px, 2vw, 30px); }
.energy-grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 20px;
}
.energy-metrics {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
}
.status-inline { color: var(--muted); }
.charge-balance-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 12px;
}
.charge-balance-grid > div, .charge-session-row, .state-row, .command-entry, .history-chart {
  border: 1px solid rgba(76, 142, 190, .18); border-radius: 16px; background: rgba(5, 19, 31, .56);
}
.charge-balance-grid > div { padding: 16px; }
.charge-balance-grid strong { display: block; margin-top: 8px; font-size: 28px; }
.charge-session-list { display: grid; gap: 10px; margin-top: 14px; }
.charge-session-row {
  display: grid; grid-template-columns: 1.35fr .75fr .85fr .7fr; align-items: center; gap: 10px; padding: 14px 16px;
}
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
}
.history-panel, .log-panel { grid-column: span 1; }
.status-summary { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.state-dot {
  width: 12px; height: 12px; border-radius: 50%; background: #8da5b8; box-shadow: 0 0 14px rgba(255,255,255,.15);
}
.state-dot.good { background: var(--good); box-shadow: 0 0 16px rgba(65,232,138,.44); }
.state-dot.warn { background: var(--warn); box-shadow: 0 0 16px rgba(255,174,66,.42); }
.state-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.state-list { display: grid; gap: 8px; margin-top: 12px; }
.state-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 12px 14px;
}
.state-pill {
  display: inline-flex; align-items: center; justify-content: center; min-width: 92px; border-radius: 999px; padding: 7px 10px; background: rgba(14,42,61,.82); color: #e9f4ff;
}
.state-pill.good { color: #93f4b8; }
.state-pill.bad { color: #ff9da8; }
.climate-temp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 12px 0 16px; }
.climate-temp > div { border: 1px solid rgba(72,144,191,.18); border-radius: 18px; padding: 16px; background: rgba(5, 19, 31, .56); }
.climate-temp strong { display: block; font-size: 34px; margin-top: 8px; }
.defrost-status { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; color: #bfd5e6; }
.control-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.unlock-control { background: linear-gradient(180deg, rgba(31, 110, 77, .96), rgba(12, 64, 45, .96)); }
.control-countdown { margin-top: 14px; color: var(--muted); }
.history-chart { min-height: 240px; padding: 14px; display: flex; align-items: center; justify-content: center; }
.history-chart svg { width: 100%; height: 220px; overflow: visible; }
.history-chart text { fill: #9db5c8; font-size: 12px; }
.grid-line { stroke: rgba(101, 150, 185, .16); stroke-width: 1; }
.area { fill: rgba(66, 189, 255, .12); }
.line { fill: none; stroke: #6ec5ff; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.dot { fill: #8cf7ff; }
.chart-legend { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; }
.legend-battery { display: inline-block; width: 14px; height: 14px; border-radius: 4px; background: linear-gradient(180deg, #7bf39d, #43c875); margin-right: 6px; vertical-align: -2px; }
.command-log { display: grid; gap: 10px; }
.command-entry { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 12px; padding: 14px 16px; }
.ok-dot { width: 10px; height: 10px; border-radius: 50%; background: #5ad6ff; box-shadow: 0 0 12px rgba(90,214,255,.5); }
footer { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; color: var(--muted); padding: 0 6px; }

.battery-icon {
  width: 68px; height: 36px; position: relative; border-radius: 10px; border: 2px solid rgba(128, 212, 255, .72); padding: 4px; display: inline-flex; align-items: center;
}
.battery-icon::after {
  content: ""; position: absolute; right: -8px; top: 10px; width: 6px; height: 12px; border-radius: 2px; background: rgba(128, 212, 255, .72);
}
.battery-icon i {
  display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #ff767f, #ffcc63 55%, #4eef8b 100%); width: 0;
  box-shadow: inset 0 0 14px rgba(255,255,255,.18), 0 0 14px rgba(102, 244, 155, .15);
}
.battery-icon i.lvl-0 { width: 4%; }
.battery-icon i.lvl-10 { width: 10%; }
.battery-icon i.lvl-20 { width: 20%; }
.battery-icon i.lvl-30 { width: 30%; }
.battery-icon i.lvl-40 { width: 40%; }
.battery-icon i.lvl-50 { width: 50%; }
.battery-icon i.lvl-60 { width: 60%; }
.battery-icon i.lvl-70 { width: 70%; }
.battery-icon i.lvl-80 { width: 80%; }
.battery-icon i.lvl-90 { width: 90%; }
.battery-icon i.lvl-100 { width: 100%; }

.secure-dialog {
  width: min(520px, calc(100vw - 28px)); border: 1px solid rgba(88, 168, 222, .28); border-radius: 24px; color: var(--text); background: linear-gradient(180deg, rgba(6, 24, 38, .98), rgba(6, 19, 30, .98));
  box-shadow: 0 20px 50px rgba(0,0,0,.45); padding: 0;
}
.secure-dialog::backdrop { background: rgba(0, 0, 0, .62); backdrop-filter: blur(4px); }
.secure-dialog form { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 28px; }
.dialog-close {
  position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border-radius: 999px; border: 1px solid rgba(88, 168, 222, .24); background: rgba(10, 35, 52, .9); color: var(--text); cursor: pointer;
}
.secure-dialog label { color: #cbdeec; }
.secure-dialog input {
  border: 1px solid rgba(87, 161, 213, .26); border-radius: 14px; padding: 13px 15px; background: rgba(4, 17, 28, .88); color: var(--text);
}
.dialog-error { color: #ffadb7; }
.confirm-warning { border-left: 4px solid rgba(255, 175, 69, .75); padding: 12px 14px; border-radius: 14px; background: rgba(71, 43, 7, .34); color: #ffd8ac; }
.dialog-actions { display: flex; gap: 12px; justify-content: flex-end; }

@media (max-width: 1360px) {
  .page-frame { grid-template-columns: 1fr; width: min(1300px, calc(100vw - 16px)); }
  .sidebar { position: static; min-height: auto; flex-direction: row; padding: 12px 16px; }
  .sidebar-nav { flex-direction: row; }
  .sidebar-spacer { display: none; }
  .sidebar-logout { margin-left: auto; }
}
@media (max-width: 1120px) {
  .hero-grid, .energy-grid, .dashboard-grid, .flow-layout, .telemetry-strip, .flow-summary-grid { grid-template-columns: 1fr; }
  .topbar, .flow-subhead { flex-direction: column; align-items: flex-start; }
  .hero-copy { flex-direction: column; align-items: flex-start; }
  .state-columns, .control-grid, .climate-temp, .energy-metrics, .charge-balance-grid, .inline-mini-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  h1 { font-size: 32px; }
  .topbar, .panel, .visual-flow-panel, .hero-copy { padding: 20px; }
  .page-frame { width: min(100vw - 10px, 100%); }
  .charge-session-row, .state-row, .command-entry { grid-template-columns: 1fr; }
  footer { font-size: 13px; }
}

.cost-highlight { border-color: rgba(75, 232, 139, .38) !important; background: linear-gradient(180deg, rgba(11, 57, 40, .48), rgba(5, 25, 31, .64)) !important; }
.cost-highlight strong { color: #72f5a6; }
.flow-summary-grid small { display:block; margin-top:6px; color:var(--muted); font-size:12px; line-height:1.35; }


/* ============================================================
   v1.6.1 – Login / Setup / Diagnose / Settings compatibility
   ============================================================ */
.shell {
  width: min(1500px, calc(100vw - 32px));
  margin: 24px auto;
  min-height: calc(100vh - 48px);
}
.shell.narrow {
  width: min(1040px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 20px;
}
.auth-card {
  width: min(760px, 100%);
  margin: clamp(36px, 9vh, 100px) auto 24px;
  padding: clamp(26px, 5vw, 46px);
  overflow: hidden;
}
.auth-card h1 {
  font-size: clamp(42px, 7vw, 72px);
  margin-bottom: 12px;
  letter-spacing: -0.045em;
}
.auth-card > .muted {
  font-size: 16px;
  line-height: 1.65;
  max-width: 64ch;
  margin-bottom: 28px;
}
.auth-card form {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.form-row {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.form-row.full { grid-column: 1 / -1; }
.form-row label {
  color: #d8e9f5;
  font-size: 14px;
  font-weight: 750;
}
.form-row input,
.form-row select,
.form-row textarea,
.auth-card input,
.auth-card select,
.auth-card textarea {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(89, 171, 224, .28);
  border-radius: 14px;
  padding: 11px 14px;
  color: var(--text);
  background: rgba(2, 15, 26, .78);
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus,
.auth-card input:focus {
  border-color: rgba(87, 199, 255, .72);
  box-shadow: 0 0 0 3px rgba(75, 181, 246, .12), 0 0 24px rgba(68, 176, 244, .08);
}
.button {
  min-height: 48px;
  border: 1px solid rgba(82, 165, 218, .30);
  border-radius: 14px;
  padding: 11px 18px;
  font-weight: 800;
  color: #f0f9ff;
  cursor: pointer;
}
.button.primary {
  background: linear-gradient(180deg, #249fe2, #1470aa);
  box-shadow: 0 12px 28px rgba(7, 105, 164, .24), inset 0 1px 0 rgba(255,255,255,.14);
}
.button.primary:hover { filter: brightness(1.08); }
.login-error,
.error-box,
.success-box,
.security-note,
.secret-box {
  margin-top: 18px;
  padding: 15px 17px;
  border-radius: 15px;
  line-height: 1.55;
}
.login-error,
.error-box {
  color: #ffd9de;
  border: 1px solid rgba(255, 102, 119, .38);
  background: rgba(81, 13, 27, .46);
}
.success-box {
  color: #b9ffd2;
  border: 1px solid rgba(65, 232, 138, .34);
  background: rgba(10, 71, 39, .42);
}
.security-note {
  color: #b8cad8;
  border: 1px solid rgba(76, 147, 192, .20);
  background: rgba(3, 18, 29, .52);
}
.secret-box {
  display: grid;
  gap: 8px;
  color: #c9ffe0;
  border: 1px solid rgba(65, 232, 138, .35);
  background: rgba(9, 61, 35, .42);
}
.secret-box code {
  overflow-wrap: anywhere;
  user-select: all;
}
code, pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
pre {
  max-width: 100%;
  overflow-x: auto;
  padding: 14px 16px;
  border-radius: 14px;
  color: #bfeeff;
  border: 1px solid rgba(72, 159, 213, .22);
  background: rgba(2, 15, 25, .74);
}
.energy-divider {
  height: 1px;
  border: 0;
  margin: 30px 0;
  background: linear-gradient(90deg, transparent, rgba(76, 153, 204, .34), transparent);
}
.auth-card h2 {
  margin-top: 6px;
  margin-bottom: 8px;
  color: #edf8ff;
}
.auth-card form + form { margin-top: 20px; }
.settings-page-actions {
  width: min(760px, 100%);
  margin: 18px auto -6px;
  justify-content: flex-start;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 13px;
  border-radius: 12px;
  color: #bfeaff;
  border: 1px solid rgba(71, 153, 207, .20);
  background: rgba(7, 31, 49, .62);
}
.text-link:hover { background: rgba(15, 58, 88, .78); }
.topbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.compact-page-topbar {
  border-radius: var(--radius);
  margin-top: 10px;
}
.compact-page-topbar h1 {
  font-size: clamp(38px, 6vw, 64px);
  letter-spacing: -0.04em;
}
.diagnostic-panel { padding: 24px 28px; }
.diagnostic-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
}
.diagnostic-table th,
.diagnostic-table td {
  padding: 13px 16px;
  text-align: left;
  vertical-align: middle;
  border-top: 1px solid rgba(74, 144, 191, .14);
  border-bottom: 1px solid rgba(74, 144, 191, .14);
  background: rgba(3, 18, 30, .55);
}
.diagnostic-table th {
  width: 58%;
  color: #b9cfe0;
  font-weight: 700;
  border-left: 1px solid rgba(74, 144, 191, .14);
  border-radius: 14px 0 0 14px;
}
.diagnostic-table td {
  color: #edf8ff;
  font-weight: 800;
  border-right: 1px solid rgba(74, 144, 191, .14);
  border-radius: 0 14px 14px 0;
}
.diagnostic-actions {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
}

@media (max-width: 760px) {
  .shell, .shell.narrow { width: min(100% - 12px, 100%); margin: 6px auto; min-height: calc(100vh - 12px); }
  .auth-card { margin: 20px auto; padding: 22px 18px; border-radius: 20px; }
  .auth-card h1 { font-size: 42px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-row.full { grid-column: auto; }
  .compact-page-topbar { margin-top: 0; }
  .diagnostic-panel { padding: 14px; }
  .diagnostic-table th, .diagnostic-table td { padding: 11px 10px; font-size: 13px; }
  .diagnostic-table th { width: 62%; }
}

/* v1.7 Fahrzeugzentriertes Layout */
.vehicle-centric-grid { align-items: stretch; }
.vehicle-side-stack { display: grid; gap: 18px; }
.hero { position: relative; }
.hero-status-floating {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 3;
  min-width: 240px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(120, 190, 255, 0.22);
  background: rgba(7, 18, 38, 0.72);
  backdrop-filter: blur(14px);
}
.hero-status-floating strong { display: block; font-size: 24px; margin: 6px 0 4px; }
.hero-status-floating small { color: var(--muted); }
.glass-soft { box-shadow: 0 22px 40px rgba(0,0,0,.22); }
.vehicle-side-card { min-height: 0; }
.summary-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.summary-metric-grid > div,
.detail-inline-grid > div,
.availability-item {
  border: 1px solid rgba(102, 177, 255, 0.18);
  border-radius: 16px;
  padding: 12px 14px;
  background: rgba(6, 18, 36, 0.34);
}
.summary-metric-grid span,
.detail-inline-grid span,
.availability-item span { display:block; color: var(--muted); font-size: 13px; }
.summary-metric-grid strong,
.detail-inline-grid strong,
.availability-item strong { display:block; margin-top: 7px; font-size: 28px; line-height:1.1; }
.summary-metric-grid small { display:block; margin-top: 6px; color: var(--muted); }
.mini-columns.two { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-bottom:14px; }
.mini-head { margin:0 0 10px; font-size:14px; letter-spacing:.08em; text-transform:uppercase; color: var(--muted); }
.compact-list .state-row { margin-bottom: 8px; }
.detail-inline-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:14px; }
.detail-inline-grid.three-col { grid-template-columns: repeat(3,minmax(0,1fr)); }
.tire-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.energy-status-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.raw-panel { margin-top: 18px; }
.availability-list { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-bottom: 16px; }
.raw-json-box {
  border: 1px solid rgba(120, 190, 255, 0.18);
  border-radius: 16px;
  padding: 14px 16px;
  background: rgba(2, 12, 26, 0.6);
}
.raw-json-box summary { cursor: pointer; font-weight: 700; margin-bottom: 12px; }
.raw-json-box pre {
  margin: 12px 0 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12px;
  line-height: 1.55;
  color: #c4ddff;
  max-height: 460px;
  overflow: auto;
}
.availability-item { display:flex; align-items:center; justify-content:space-between; }
.availability-item strong { margin-top:0; font-size:18px; }

@media (max-width: 1200px) {
  .energy-status-grid,
  .vehicle-centric-grid,
  .hero-grid { grid-template-columns: 1fr; }
}
@media (max-width: 920px) {
  .summary-metric-grid,
  .detail-inline-grid,
  .mini-columns.two,
  .availability-list,
  .detail-inline-grid.three-col { grid-template-columns: 1fr; }
  .hero-status-floating {
    position: static;
    margin: 16px;
  }
}

/* v1.8 Energiehistorie */
.energy-history-panel { margin-top: 18px; }
.history-head { align-items: flex-start; }
.history-periods { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.period-button {
  border:1px solid rgba(96,177,236,.24);
  background:rgba(6,26,43,.76);
  color:#dcefff;
  padding:10px 14px;
  border-radius:999px;
  font-weight:700;
  cursor:pointer;
}
.period-button:hover,.period-button.active {
  background:linear-gradient(180deg,rgba(30,115,170,.95),rgba(12,65,101,.95));
  border-color:rgba(96,199,255,.56);
  box-shadow:0 0 20px rgba(71,182,255,.16);
}
.energy-history-summary {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.energy-history-summary article {
  border:1px solid rgba(77,148,194,.22);
  background:rgba(4,18,31,.58);
  border-radius:18px;
  padding:16px;
  min-height:116px;
}
.energy-history-summary span { display:block; color:var(--muted); font-size:13px; }
.energy-history-summary strong { display:block; font-size:clamp(22px,2.2vw,34px); margin-top:9px; line-height:1.08; }
.energy-history-summary small { display:block; color:var(--muted); margin-top:7px; }
.energy-history-chart-wrap,.daily-table-wrap {
  margin-top:18px;
  border:1px solid rgba(77,148,194,.18);
  background:rgba(4,18,31,.46);
  border-radius:20px;
  padding:18px;
}
.chart-title-row { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:14px; }
.chart-title-row strong { display:block; font-size:20px; }
.chart-title-row span { display:block; color:var(--muted); margin-top:4px; font-size:13px; }
.energy-power-chart {
  min-height:300px;
  border-radius:16px;
  background:
    linear-gradient(180deg,rgba(23,104,145,.08),transparent 49%,rgba(255,160,64,.05) 51%,transparent),
    rgba(2,13,24,.62);
  border:1px solid rgba(72,141,190,.16);
  padding:8px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.energy-power-chart svg { width:100%; height:300px; overflow:visible; }
.energy-zero-line { stroke:rgba(205,231,249,.42); stroke-width:1.4; }
.energy-grid-line { stroke:rgba(110,161,196,.12); stroke-width:1; stroke-dasharray:4 8; }
.energy-power-line { fill:none; stroke:rgba(151,196,223,.28); stroke-width:1.3; }
.energy-import-line { fill:none; stroke:#5dc7ff; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.energy-export-line { fill:none; stroke:#ffb35d; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.energy-axis-label { fill:#8ba8bc; font-size:11px; }
.power-chart-legend { display:flex; gap:18px; flex-wrap:wrap; margin-top:12px; color:var(--muted); font-size:13px; }
.power-chart-legend i { display:inline-block; width:18px; height:3px; border-radius:3px; vertical-align:middle; margin-right:6px; }
.legend-import { background:#5dc7ff; }
.legend-export { background:#ffb35d; }
.daily-table-scroll { overflow:auto; }
.daily-energy-table { width:100%; border-collapse:collapse; min-width:760px; }
.daily-energy-table th,.daily-energy-table td { border-bottom:1px solid rgba(80,148,194,.16); padding:12px 10px; text-align:left; }
.daily-energy-table th { color:#9bb6ca; font-size:12px; text-transform:uppercase; letter-spacing:.07em; position:sticky; top:0; background:#071b2b; }
.daily-energy-table td { color:#dbeaf5; }
.daily-energy-table td.number { font-variant-numeric:tabular-nums; }
.retention-info {
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin-top:16px;
  border-left:4px solid rgba(93,199,255,.65);
  padding:12px 14px;
  border-radius:12px;
  background:rgba(7,31,48,.44);
}
.retention-info span { color:var(--muted); line-height:1.5; }
@media (max-width:1100px){.energy-history-summary{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:700px){.energy-history-summary{grid-template-columns:1fr}.history-periods{justify-content:flex-start}.chart-title-row{align-items:flex-start;flex-direction:column}.retention-info{flex-direction:column}}

/* v1.9 Fahrzeugdaten – kompakter Hero, Status unter dem Fahrzeug */
.vehicle-focus-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(420px, .92fr);
  gap: 20px;
  align-items: start;
}
.vehicle-main-column,
.vehicle-info-stack {
  display: grid;
  gap: 18px;
  min-width: 0;
}
.compact-vehicle-hero {
  min-height: 500px;
  height: 500px;
  background: radial-gradient(circle at 50% 42%, rgba(18,73,114,.28), transparent 46%), rgba(3,16,28,.88);
}
.compact-vehicle-hero .hero-image {
  object-fit: contain;
  object-position: center center;
  width: 100%;
  height: 100%;
  transform: scale(.93);
}
.compact-vehicle-hero .hero-vignette {
  background: linear-gradient(180deg, rgba(4,18,31,.02) 0%, rgba(4,18,31,.12) 48%, rgba(4,18,31,.75) 100%);
}
.compact-vehicle-hero .hero-copy { padding: 26px 30px; }
.compact-vehicle-hero .hero-status-floating { top: 18px; right: 18px; min-width: 220px; }
.vehicle-status-under-car { padding: 22px; }
.vehicle-status-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}
.vehicle-status-under-car .state-row {
  padding: 9px 11px;
  border-radius: 12px;
  grid-template-columns: 1fr auto auto;
}
.vehicle-status-under-car .state-pill {
  min-width: 0;
  padding: 5px 8px;
  font-size: 12px;
}
.compact-light-list { display: grid; gap: 8px; margin-bottom: 10px; }
.status-line {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border:1px solid rgba(76,142,190,.18);
  border-radius:12px;
  background:rgba(5,19,31,.56);
}
.status-line span { color: var(--muted); font-size: 13px; }
.status-line strong { font-size: 15px; text-transform: uppercase; }
.vehicle-info-stack .vehicle-side-card { padding: 22px; }
.vehicle-info-stack .summary-metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.vehicle-info-stack .summary-metric-grid > div { min-height: 104px; }
.vehicle-info-stack .summary-metric-grid strong { font-size: clamp(24px,1.8vw,33px); }
.climate-detail-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.climate-detail-grid > div { min-height: 86px; }
.climate-detail-grid strong { font-size: 21px; }
.tire-charge-card .tire-grid { margin-bottom: 9px; }
.connected-data-panel { margin-top: 0; }
.connected-overview-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-bottom:18px;
}
.connected-card {
  border:1px solid rgba(77,148,194,.22);
  background:rgba(4,18,31,.58);
  border-radius:18px;
  padding:16px;
}
.connected-card > span { display:block; color:var(--muted); font-size:13px; }
.connected-card > strong { display:block; margin:8px 0 7px; font-size:clamp(22px,2vw,31px); }
.connected-card small { display:block; color:var(--muted); line-height:1.45; }
.connected-data-columns {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.connected-data-columns h3 { margin:0 0 12px; }
.connected-list { display:grid; gap:9px; }
.connected-row {
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  padding:13px 14px;
  border:1px solid rgba(76,142,190,.18);
  border-radius:14px;
  background:rgba(5,19,31,.56);
}
.connected-row > div:first-child { min-width:0; }
.connected-row strong { display:block; }
.connected-row span { display:block; margin-top:4px; color:var(--muted); font-size:13px; line-height:1.4; }
.trip-mini-stats { display:flex; flex-direction:column; gap:4px; text-align:right; white-space:nowrap; }
.trip-mini-stats b { font-size:13px; color:#d9ecf9; }

@media (max-width: 1250px) {
  .vehicle-focus-layout { grid-template-columns: 1fr; }
  .compact-vehicle-hero { height: 470px; min-height: 470px; }
  .connected-overview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 850px) {
  .compact-vehicle-hero { height: 420px; min-height: 420px; }
  .vehicle-status-columns,
  .climate-detail-grid,
  .connected-data-columns,
  .connected-overview-grid { grid-template-columns:1fr; }
  .vehicle-info-stack .summary-metric-grid { grid-template-columns:1fr 1fr; }
  .compact-vehicle-hero .hero-status-floating { position:absolute; min-width:0; max-width:60%; }
}
@media (max-width: 620px) {
  .vehicle-info-stack .summary-metric-grid { grid-template-columns:1fr; }
  .compact-vehicle-hero { height: 360px; min-height:360px; }
  .compact-vehicle-hero .hero-copy { padding:18px; }
  .compact-vehicle-hero .hero-status-floating { left:14px; right:14px; top:14px; max-width:none; }
  .compact-vehicle-hero .hero-copy { align-items:flex-end; }
  .connected-row { flex-direction:column; align-items:flex-start; }
  .trip-mini-stats { text-align:left; flex-direction:row; }
}


/* v1.9.2 UI Feinschliff */
.vehicle-info-stack .summary-metric-grid .summary-wide {
  grid-column: 1 / -1;
  min-height: 126px;
}
.vehicle-info-stack .summary-metric-grid .summary-wide strong {
  font-size: clamp(30px, 2vw, 42px);
  line-height: 1.02;
}
.inline-link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(98, 178, 245, 0.35);
  background: rgba(43, 141, 214, 0.16);
  color: #d7f0ff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  width: fit-content;
}
.inline-link-button:hover {
  background: rgba(67, 168, 243, 0.24);
  border-color: rgba(126, 196, 251, 0.5);
}
.connected-card .inline-link-button[hidden] { display: none; }

/* v1.9.4 – Navigation, kompakte Technikinfo, Falten, Jahreskosten */
.flow-technical-note {
  margin: 14px 0 4px;
  font-size: 14px;
  line-height: 1.45;
}
.flow-technical-note strong {
  color: var(--text);
  font-size: inherit;
  font-weight: 700;
}
.connected-fold {
  border: 1px solid rgba(76,142,190,.18);
  border-radius: 16px;
  background: rgba(5,19,31,.56);
  overflow: hidden;
}
.connected-fold summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.connected-fold summary::-webkit-details-marker { display: none; }
.connected-fold summary span {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
}
.connected-fold summary small {
  color: var(--muted);
  font-size: 12px;
}
.connected-fold summary::after {
  content: '＋';
  color: var(--accent);
  font-size: 20px;
  margin-left: auto;
}
.connected-fold[open] summary::after { content: '−'; }
.connected-fold .fold-content {
  padding: 0 14px 14px;
}
.energy-metrics .year-cost-card {
  border-color: rgba(89,186,255,.28);
  background: linear-gradient(180deg, rgba(8,35,55,.76), rgba(4,18,31,.66));
}
.energy-metrics .year-cost-card.cost-highlight {
  grid-column: 1 / -1;
  border-color: rgba(93,218,161,.3);
  background: linear-gradient(180deg, rgba(13,52,47,.64), rgba(5,25,34,.68));
}
.energy-metrics .year-cost-card.cost-highlight strong {
  font-size: clamp(30px, 2.8vw, 44px);
}
.meter-reading-list {
  display: grid;
  gap: 10px;
  margin: 14px 0 18px;
}
.meter-reading-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 13px 15px;
  border: 1px solid rgba(76,142,190,.18);
  border-radius: 14px;
  background: rgba(5,19,31,.56);
}
.meter-reading-row strong,
.meter-reading-row span { display: block; }
.meter-reading-row span { color: var(--muted); margin-top: 4px; }
.meter-reading-row small { color: var(--muted); }
.meter-reading-form { margin-top: 10px; }
.diagnose-shell { padding-bottom: 28px; }
.diagnostic-raw-section { margin-top: 22px; }
.inline-diagnostic-form { margin: 0; }
.diagnostic-raw-section .raw-json-box + .raw-json-box { margin-top: 12px; }
.diagnostic-raw-section .raw-json-box pre { max-height: 560px; }
@media (max-width:700px){
  .connected-fold summary { align-items: flex-start; }
  .connected-fold summary small { display:none; }
  .meter-reading-row { align-items:flex-start; flex-direction:column; }
}/* v1.9.6 – feste Energie-Verknüpfung in der linken Seitenleiste */
.sidebar-energy-link {
  color: #8ee6ff;
  font-weight: 800;
}
.sidebar-energy-link:hover,
.sidebar-energy-link:focus-visible {
  color: #ffffff;
  box-shadow: 0 0 22px rgba(54,154,230,.28);
}


/* v1.9.7 – Energiekosten übersichtlicher */
.energy-summary-note {
  margin-top: 14px;
  line-height: 1.5;
}
.energy-metrics .year-cost-card.cost-balance {
  border-width: 1px;
}
.energy-metrics .year-cost-card.cost-positive {
  border-color: rgba(93,218,161,.34);
  background: linear-gradient(180deg, rgba(13,52,47,.64), rgba(5,25,34,.68));
}
.energy-metrics .year-cost-card.cost-positive strong {
  color: #72f5a6;
}
.energy-metrics .year-cost-card.cost-negative {
  border-color: rgba(255, 117, 117, .36);
  background: linear-gradient(180deg, rgba(62,24,24,.62), rgba(31,11,16,.68));
}
.energy-metrics .year-cost-card.cost-negative strong {
  color: #ff8d8d;
}

/* v1.10.0 – Hybrid-Trainer */
.hybrid-shell { max-width: 1700px; }
.hybrid-nav-icon { font-weight: 900; font-family: ui-sans-serif, system-ui, sans-serif; }
.hybrid-topbar { align-items: center; }
.hybrid-toolbar { align-items: end; flex-wrap: wrap; }
.month-select-wrap { display: grid; gap: 6px; min-width: 190px; }
.month-select-wrap span { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.month-select-wrap select {
  min-height: 42px; border-radius: 12px; border: 1px solid rgba(102,177,255,.26);
  background: rgba(6,24,40,.88); color: var(--text); padding: 0 12px; font: inherit;
}
.hybrid-tabs { display:flex; gap:8px; padding:8px; margin-bottom:18px; width:max-content; }
.hybrid-tabs a { color:var(--muted); text-decoration:none; padding:10px 16px; border-radius:11px; font-weight:800; }
.hybrid-tabs a.active,.hybrid-tabs a:hover { color:var(--text); background:rgba(48,151,221,.18); }
.hybrid-overview-panel { margin-bottom: 22px; }
.hybrid-summary-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.hybrid-summary-grid > article,
.hybrid-score-grid > div,
.hybrid-stat {
  border:1px solid rgba(76,142,190,.19); border-radius:16px; background:rgba(5,19,31,.56); padding:16px;
}
.hybrid-summary-grid article > span,
.hybrid-score-grid span,
.hybrid-stat span { display:block; color:var(--muted); font-size:13px; }
.hybrid-summary-grid article > strong,
.hybrid-score-grid strong,
.hybrid-stat strong { display:block; margin-top:8px; font-size:clamp(22px,2vw,32px); line-height:1.08; }
.hybrid-summary-grid article > small { display:block; color:var(--muted); margin-top:7px; }
.hybrid-ev-card { border-color:rgba(83,234,146,.25)!important; }
.hybrid-score-summary { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.hybrid-score-summary > div:first-child span { color:var(--muted); font-size:13px; }
.hybrid-score-summary > div:first-child strong { display:block; font-size:34px; margin-top:7px; }
.score-ring {
  width:76px; height:76px; border-radius:50%; display:grid; place-items:center; position:relative; flex:0 0 auto;
  background:#071b2b;
}
.score-ring svg { position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.score-ring circle { fill:none; stroke-width:5; }
.score-track { stroke:rgba(126,151,172,.18); }
.score-progress { stroke:#6f8597; stroke-linecap:round; }
.score-ring b { position:relative; z-index:1; font-size:23px; }
.score-good .score-progress { stroke:#46cb70; }
.score-medium .score-progress { stroke:#ff9f1a; }
.score-bad .score-progress { stroke:#ff3b55; }
.score-neutral .score-progress { stroke:#6f8597; }
.hybrid-score-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:14px; }
.hybrid-score-grid strong { font-size:24px; }
.hybrid-trips-section { margin-top:24px; }
.section-heading-row { display:flex; justify-content:space-between; align-items:end; gap:14px; margin:0 4px 14px; }
.section-heading-row h2 { margin:4px 0 0; }
.hybrid-trip-list { display:grid; gap:16px; }
.hybrid-trip-card { padding:0; overflow:hidden; }
.hybrid-trip-card > summary { list-style:none; }
.hybrid-trip-card > summary::-webkit-details-marker { display:none; }
.hybrid-trip-summary { display:grid; grid-template-columns:minmax(220px,1fr) minmax(390px,1.4fr) 82px; gap:20px; align-items:center; padding:18px 20px; cursor:pointer; }
.hybrid-trip-summary:hover { background:rgba(34,126,189,.08); }
.hybrid-trip-title span { display:block; color:#76cbff; text-transform:uppercase; font-size:11px; font-weight:900; letter-spacing:.14em; }
.hybrid-trip-title strong { display:block; font-size:23px; margin:5px 0; }
.hybrid-trip-title small { color:var(--muted); }
.hybrid-trip-compact-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.hybrid-trip-compact-stats .hybrid-stat { padding:10px 12px; }
.hybrid-trip-compact-stats .hybrid-stat strong { font-size:18px; }
.trip-score { width:70px; height:70px; }
.hybrid-trip-body { border-top:1px solid rgba(89,169,223,.16); padding:20px; }
.hybrid-map-wrap { border:1px solid rgba(76,142,190,.22); border-radius:18px; overflow:hidden; background:#081b27; margin-bottom:16px; }
.hybrid-route-map { position:relative; width:100%; height:330px; overflow:hidden; background:#102833; }
.hybrid-map-svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.route-polyline { fill:none; stroke-width:5; stroke-linejoin:round; stroke-linecap:round; filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.route-normal { stroke:#168bd1; }
.route-ev { stroke:#35c875; }
.route-overspeed { stroke:#ff8d28; }
.route-fallback { stroke:#4da5dc; stroke-width:4; stroke-dasharray:10 8; }
.route-marker { stroke:#fff; stroke-width:3; }
.route-marker.start { fill:#35c875; }
.route-marker.end { fill:#ff3754; }
.route-marker-inner { fill:#fff; stroke:none; }
.hybrid-map-legend { position:absolute; top:12px; left:12px; z-index:3; display:flex; gap:8px; padding:7px 9px; background:rgba(3,18,28,.82); border-radius:10px; font-size:11px; }
.hybrid-map-legend span { display:flex; align-items:center; gap:5px; }
.hybrid-map-legend i { width:16px; height:4px; border-radius:4px; background:#168bd1; }
.hybrid-map-legend i.ev { background:#35c875; }
.hybrid-map-legend i.overspeed { background:#ff8d28; }
.hybrid-map-attribution { position:absolute; right:6px; bottom:5px; z-index:4; padding:3px 6px; border-radius:6px; background:rgba(255,255,255,.82); color:#19303c; font-size:10px; text-decoration:none; }
.hybrid-map-route-warning { position:absolute; left:12px; right:12px; bottom:12px; z-index:4; padding:8px 10px; border-radius:10px; background:rgba(64,34,11,.86); border:1px solid rgba(255,163,74,.38); color:#ffd1a5; font-size:12px; }
.hybrid-map-no-data { position:absolute; inset:0; display:grid; place-items:center; color:var(--muted); padding:20px; text-align:center; }
.hybrid-map-meta { display:flex; justify-content:space-between; gap:18px; align-items:center; padding:13px 15px; }
.hybrid-map-meta > div:first-child { display:grid; gap:4px; color:var(--muted); font-size:12px; }
.hybrid-map-links { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.hybrid-map-links .inline-link-button { margin-top:0; }
.hybrid-detail-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.hybrid-detail-grid .hybrid-stat strong { font-size:20px; }
.hybrid-stat.ev-stat { border-color:rgba(83,234,146,.23); }
.hybrid-detail-section { margin-top:18px; }
.hybrid-detail-section h3 { margin:0 0 10px; font-size:16px; }
.trip-score-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
.trip-score-grid .hybrid-stat { padding:12px; }
.trip-score-grid .hybrid-stat strong { font-size:22px; }
.hdc-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.hybrid-behaviour-list { display:grid; gap:8px; }
.hybrid-behaviour-row { padding:11px 13px; border:1px solid rgba(76,142,190,.18); border-radius:12px; background:rgba(5,19,31,.46); }
.hybrid-behaviour-row strong { display:block; }
.hybrid-behaviour-row span { display:block; margin-top:4px; color:var(--muted); font-size:12px; }
.hybrid-trip-meta-line { margin-top:16px; color:var(--muted); font-size:11px; word-break:break-all; }
.hybrid-empty { padding:22px; }

@media (max-width:1100px) {
  .hybrid-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hybrid-trip-summary { grid-template-columns:1fr 70px; }
  .hybrid-trip-compact-stats { grid-column:1 / -1; grid-row:2; }
  .trip-score { grid-column:2; grid-row:1; }
  .hybrid-detail-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .trip-score-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .hybrid-topbar { align-items:flex-start; }
  .hybrid-toolbar { width:100%; }
  .month-select-wrap { width:100%; }
  .hybrid-summary-grid,.hybrid-score-grid,.hybrid-detail-grid,.hdc-grid,.trip-score-grid { grid-template-columns:1fr 1fr; }
  .hybrid-trip-summary { grid-template-columns:1fr 64px; padding:15px; gap:12px; }
  .hybrid-trip-compact-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .hybrid-route-map { height:280px; }
  .hybrid-map-meta { align-items:flex-start; flex-direction:column; }
  .hybrid-map-links { justify-content:flex-start; }
  .section-heading-row { align-items:flex-start; flex-direction:column; }
}
@media (max-width:520px) {
  .hybrid-summary-grid,.hybrid-score-grid,.hybrid-detail-grid,.hdc-grid,.trip-score-grid { grid-template-columns:1fr; }
  .hybrid-trip-compact-stats { grid-template-columns:1fr 1fr 1fr; gap:6px; }
  .hybrid-trip-compact-stats .hybrid-stat { padding:8px; }
  .hybrid-trip-compact-stats .hybrid-stat span { font-size:10px; }
  .hybrid-trip-compact-stats .hybrid-stat strong { font-size:14px; }
  .hybrid-route-map { height:245px; }
}

.hybrid-launch-card {
  min-height: 92px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 18px;
  border:1px solid rgba(76,142,190,.22); border-radius:16px; background:rgba(5,19,31,.56); color:var(--text); text-decoration:none;
}
.hybrid-launch-card strong { display:block; font-size:18px; margin:4px 0; }
.hybrid-launch-card small { color:var(--muted); line-height:1.4; }
.hybrid-launch-card > b { font-size:28px; color:#69cfff; }
.hybrid-launch-card:hover { border-color:rgba(105,207,255,.45); background:rgba(15,57,82,.56); }


/* v1.10.1 – eigene Energie-Seite */
.energy-page-shell { max-width: 1680px; }
.energy-page-topbar { margin-bottom: 18px; }
.energy-page-shell #vehicleEnergySection { margin-top: 0; }
.energy-page-shell .visual-flow-panel,
.energy-page-shell .energy-history-panel,
.energy-page-shell .energy-grid { margin-top: 18px; }
@media (max-width: 850px) {
  .energy-page-topbar .top-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
}

/* v1.11 – klare Seitenleisten-Symbole */
.nav-svg {
  width: 24px;
  height: 24px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.nav-svg-fill { fill: currentColor; stroke: none; }
.energy-nav-icon { color: #69cfff; }
.nav-icon.active.energy-nav-icon { color: #ffe36b; }
.hybrid-nav-icon .nav-svg { stroke-width: 1.75; }

/* v1.11 – grafische Fahrzeug-Draufsicht */
.graphical-vehicle-status { overflow: hidden; }
.vehicle-topview-layout {
  display: grid;
  grid-template-columns: minmax(250px, .8fr) minmax(230px, 1fr);
  gap: 22px;
  align-items: center;
}
.vehicle-topview-wrap {
  min-height: 330px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  border: 1px solid rgba(80, 154, 205, .18);
  background: radial-gradient(circle at 50% 46%, rgba(36,116,165,.16), transparent 58%), rgba(3,17,29,.45);
  overflow: hidden;
}
.vehicle-topview { width: min(100%, 300px); height: 350px; overflow: visible; }
.vehicle-shadow { fill: rgba(0,0,0,.35); transform: translate(0,7px); }
.vehicle-shell { fill: #142d3d; stroke: #3d7797; stroke-width: 4; }
.vehicle-glass-roof { fill: #081923; stroke: rgba(109,183,222,.34); stroke-width: 3; }
.vehicle-center-glass { fill: #102938; stroke: rgba(104,187,225,.25); stroke-width: 2; }
.vehicle-center-glass.rear { fill: #0d2431; }
.vehicle-zone { transition: fill .25s ease, stroke .25s ease, filter .25s ease; }
.vehicle-zone.body-zone { fill: rgba(38,72,92,.62); stroke: rgba(111,180,216,.35); stroke-width: 2; }
.vehicle-zone.door-zone { fill: rgba(31,61,80,.72); stroke: rgba(106,174,210,.5); stroke-width: 3; }
.vehicle-zone.window-zone { fill: rgba(26,79,104,.62); stroke: rgba(112,202,236,.38); stroke-width: 2; }
.vehicle-zone[data-state="good"] { fill: rgba(43,177,111,.55); stroke: #67efaa; }
.vehicle-zone[data-state="warn"] { fill: rgba(235,175,53,.55); stroke: #ffd56a; }
.vehicle-zone[data-state="bad"] { fill: rgba(225,70,79,.62); stroke: #ff7d85; filter: drop-shadow(0 0 8px rgba(255,79,91,.42)); }
.vehicle-zone[data-state="unknown"] { fill: rgba(74,96,112,.46); stroke: rgba(158,183,199,.35); }
.vehicle-light { fill: rgba(94,116,129,.34); stroke: rgba(184,215,231,.32); stroke-width: 1.5; transition: .25s ease; }
.vehicle-light[data-state="light-on"] { fill: #ffe276; stroke: #fff0ad; filter: drop-shadow(0 0 11px rgba(255,226,118,.95)); }
.vehicle-light[data-state="tail-on"] { fill: #ff6675; stroke: #ffadb5; filter: drop-shadow(0 0 10px rgba(255,75,92,.8)); }
.vehicle-light[data-state="off"] { fill: rgba(84,108,122,.35); }
.vehicle-light[data-state="unknown"] { fill: rgba(84,108,122,.2); stroke-dasharray: 3 3; }
.vehicle-hazard { fill: rgba(86,103,114,.24); stroke: rgba(171,194,207,.28); stroke-width: 1.5; }
.vehicle-hazard[data-state="hazard-on"] { fill: #ffb13d; stroke: #ffd28b; animation: hazardPulse .85s infinite alternate; }
.vehicle-hazard[data-state="off"] { opacity: .35; }
@keyframes hazardPulse { from { filter: drop-shadow(0 0 2px rgba(255,169,49,.25)); opacity:.55; } to { filter: drop-shadow(0 0 12px rgba(255,169,49,.95)); opacity:1; } }
.vehicle-topview-label { fill: #e7f6ff; font-size: 28px; font-weight: 800; letter-spacing: .08em; }
.vehicle-topview-sub { fill: #73cdf5; font-size: 13px; font-weight: 700; letter-spacing: .28em; }
.vehicle-graphic-info { display: grid; gap: 14px; }
.vehicle-graphic-legend { display: grid; gap: 9px; }
.vehicle-graphic-legend span { display:flex; gap:9px; align-items:center; color:var(--muted); font-size:13px; }
.legend-dot { width:11px; height:11px; border-radius:50%; display:inline-block; border:1px solid rgba(255,255,255,.2); }
.legend-dot.good { background:#4bd891; }.legend-dot.warn { background:#efb649; }.legend-dot.bad { background:#ef5c67; }.legend-dot.unknown { background:#607687; }
.graphic-light-status { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.graphic-light-status > div { padding:11px 12px; border-radius:13px; border:1px solid rgba(76,142,190,.18); background:rgba(5,19,31,.56); }
.graphic-light-status span { display:block; color:var(--muted); font-size:12px; }
.graphic-light-status strong { display:block; margin-top:5px; font-size:15px; text-transform:uppercase; }

@media (max-width: 760px) {
  .vehicle-topview-layout { grid-template-columns: 1fr; }
  .vehicle-topview-wrap { min-height: 300px; }
  .vehicle-topview { height: 310px; }
  .graphic-light-status { grid-template-columns: 1fr; }
}

/* v1.11 – Hybrid-Trainer Karten, Adressen und Gesamtverlauf */
.hybrid-score-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.hybrid-fetch-info { margin-top: 10px; font-size: 12px; }
.hybrid-total-map-panel { margin-bottom: 22px; }
.hybrid-overview-map {
  position: relative;
  width: 100%;
  height: 480px;
  overflow: hidden;
  border: 1px solid rgba(76,142,190,.22);
  border-radius: 18px;
  background: #102833;
  touch-action: none;
}
.hybrid-map-help { display:flex; flex-wrap:wrap; gap:14px; margin-top:10px; color:var(--muted); font-size:12px; }
.interactive-osm-map { cursor: grab; user-select:none; touch-action:none; }
.interactive-osm-map.dragging { cursor: grabbing; }
.osm-tile-layer { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.osm-tile-layer img { position:absolute; width:256px; height:256px; max-width:none; user-select:none; pointer-events:none; }
.hybrid-map-controls { position:absolute; left:12px; top:12px; z-index:8; display:grid; gap:5px; }
.hybrid-map-controls .map-control {
  width:38px; height:38px; border-radius:10px; border:1px solid rgba(116,193,234,.36); background:rgba(4,22,34,.9); color:#e8f7ff;
  font-size:22px; line-height:1; font-weight:800; cursor:pointer; box-shadow:0 8px 20px rgba(0,0,0,.18);
}
.hybrid-map-controls .map-control:hover { background:rgba(22,76,106,.94); }
.hybrid-map-controls .map-control.reset { font-size:17px; }
.hybrid-trip-title strong { line-height:1.22; word-break:normal; overflow-wrap:anywhere; }
.hybrid-trip-title > span { text-transform:none; letter-spacing:.05em; }
.hybrid-route-map { touch-action:none; }
.hybrid-route-map .hybrid-map-route-warning { bottom:36px; }
@media (max-width: 700px) {
  .hybrid-overview-map { height: 360px; }
  .hybrid-score-grid { grid-template-columns:1fr 1fr; }
}

/* v1.11.1 – gemeinsame Remote-Steuerung + Klima-Live-Status */
.remote-unified-panel {
  grid-column: 1 / -1;
}
.remote-head-badges {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.remote-security-bar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px 18px;
  align-items: center;
  padding: 14px 16px;
  margin-bottom: 18px;
  border: 1px solid rgba(82, 160, 210, .2);
  border-radius: 16px;
  background: rgba(5, 19, 31, .5);
}
.remote-security-bar p { margin: 0; color: var(--muted); line-height: 1.5; }
.remote-security-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.remote-security-actions .control-button { min-width: 170px; }
.remote-security-bar .control-countdown {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
}
.remote-unified-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
  gap: 18px;
}
.remote-subpanel {
  border: 1px solid rgba(76, 142, 190, .18);
  border-radius: 18px;
  padding: 18px;
  background: rgba(5, 19, 31, .45);
}
.remote-subhead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.remote-subhead h3 { margin: 3px 0 0; font-size: 24px; }
.climate-temp.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0;
}
.climate-temp.compact > div { padding: 13px 14px; }
.climate-temp.compact strong { font-size: 25px; }
.climate-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  margin: 14px 0;
}
.climate-field,
.climate-toggle {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 72px;
  padding: 12px 14px;
  border: 1px solid rgba(76, 142, 190, .18);
  border-radius: 14px;
  background: rgba(5, 19, 31, .56);
  color: #dcecf8;
}
.climate-field > span,
.climate-toggle > span { color: var(--muted); font-size: 13px; }
.climate-field input,
.climate-field select {
  width: 100%;
  border: 1px solid rgba(89, 177, 232, .28);
  background: rgba(3, 14, 24, .88);
  color: var(--text);
  border-radius: 10px;
  padding: 10px 11px;
  font: inherit;
}
.climate-toggle {
  flex-direction: row;
  align-items: center;
  min-height: 54px;
  cursor: pointer;
}
.climate-toggle input {
  width: 20px;
  height: 20px;
  accent-color: #54c9ff;
  flex: 0 0 auto;
}
.climate-toggle > span { color: #dcecf8; font-weight: 700; }
.remote-action-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}
.remote-vehicle-buttons { margin: 14px 0 18px; }
.remote-current-state {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.remote-current-state > div {
  padding: 12px 13px;
  border: 1px solid rgba(76, 142, 190, .18);
  border-radius: 13px;
  background: rgba(3, 16, 27, .48);
}
.remote-current-state span { display: block; color: var(--muted); font-size: 12px; }
.remote-current-state strong { display: block; margin-top: 5px; font-size: 17px; }
.climate-detail-grid > div small { display: block; margin-top: 5px; color: var(--muted); }

@media (max-width: 1050px) {
  .remote-unified-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .remote-security-bar { grid-template-columns: 1fr; }
  .remote-security-bar .control-countdown { grid-column: auto; }
  .remote-security-actions { display: grid; grid-template-columns: 1fr; }
  .remote-security-actions .control-button { width: 100%; min-width: 0; }
  .climate-temp.compact,
  .climate-settings-grid,
  .remote-action-row,
  .remote-current-state { grid-template-columns: 1fr; }
}

/* v1.11.2 – ausgeglichene Fahrzeugspalten, Hover-Details, mobile Falten, Energiefluss */
.vehicle-focus-layout { align-items: stretch; }
.vehicle-main-column,
.vehicle-info-stack { height: 100%; grid-template-rows: auto 1fr; }
.vehicle-main-column > .graphical-vehicle-status,
.vehicle-info-stack > .climate-detail-card { min-height: 100%; }
.vehicle-topview-layout {
  position: relative;
  grid-template-columns: 1fr;
}
.vehicle-topview-wrap { min-height: 410px; position: relative; }
.vehicle-topview { height: 390px; width: min(100%, 340px); }
.vehicle-graphic-info { display: none !important; }
.compact-graphic-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 14px;
}
.compact-graphic-legend span { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; }
.vehicle-hover-info {
  position: absolute;
  z-index: 12;
  width: min(260px, calc(100% - 24px));
  pointer-events: none;
  padding: 11px 13px;
  border-radius: 12px;
  border: 1px solid rgba(104,194,245,.35);
  background: rgba(2,14,26,.94);
  box-shadow: 0 14px 35px rgba(0,0,0,.38);
}
.vehicle-hover-info strong { display:block; font-size:14px; margin-bottom:4px; }
.vehicle-hover-info span { color:var(--muted); font-size:12px; line-height:1.35; }
.vehicle-zone,.vehicle-light,.vehicle-hazard { cursor: help; }
.vehicle-mobile-details { display:none; margin-top:14px; border-top:1px solid rgba(86,151,196,.16); padding-top:12px; }
.vehicle-mobile-details summary { cursor:pointer; font-weight:800; color:#dff3ff; }
.vehicle-mobile-details .graphic-light-status { margin-top:12px; }
.vehicle-mobile-details .mini-head { margin-top:16px; }

/* Flussanimation: nur bei aktivem Ladezeitraum und realem Energiepfad */
.flow-line { position: relative; overflow: hidden; }
.flow-line.flow-active::after {
  content:"";
  position:absolute;
  inset:0;
  width:var(--flow-scale, 30%);
  min-width:34px;
  border-radius:inherit;
  background: repeating-linear-gradient(90deg, transparent 0 9px, rgba(255,255,255,.9) 9px 15px, transparent 15px 25px);
  background-size:50px 100%;
  animation: energyFlowMove 1.05s linear infinite;
  mix-blend-mode: screen;
  opacity:.85;
}
.right-lines .flow-line.flow-active::after { animation-direction: normal; }
.left-lines .flow-line.flow-active::after { animation-direction: normal; }
@keyframes energyFlowMove { from { background-position-x:-50px; } to { background-position-x:0; } }
@media (prefers-reduced-motion: reduce) { .flow-line.flow-active::after { animation:none; } }

@media (max-width: 760px) {
  .vehicle-main-column,.vehicle-info-stack { grid-template-rows:auto; height:auto; }
  .vehicle-topview-wrap { min-height: 300px; }
  .vehicle-topview { height: 310px; }
  .compact-graphic-legend { justify-content:flex-start; }
  .vehicle-hover-info { display:none !important; }
  .vehicle-mobile-details { display:block; }
}

.connected-trip-stats .connected-mini-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
  margin-top: 8px;
}
.connected-trip-stats .connected-mini-stats small {
  margin: 0;
  padding-top: 5px;
  border-top: 1px solid rgba(76,142,190,.12);
}
.vehicle-health-card strong { color: #dff4ff; }
.health-ok-row strong { color: #72f5a6; }
.health-warning-row strong { color: #ff9b9b; }
@media (min-width: 1101px) {
  .connected-data-columns { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 700px) {
  .connected-trip-stats .connected-mini-stats { grid-template-columns: 1fr; }
}
.hybrid-trip-compact-stats {
  grid-template-columns: repeat(4, minmax(88px, 1fr));
}
@media (max-width: 900px) {
  .hybrid-trip-compact-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
}


/* v1.11.4 – stabiler Klima-Write */
.climate-runtime-info strong { display:block; margin-top:8px; font-size:16px; }
.climate-runtime-info small { display:block; margin-top:5px; color:var(--muted); line-height:1.35; }


/* v1.11.5 – kompakte querliegende Fahrzeugansicht + eigener Tooltip */
@media (min-width: 761px) {
  .vehicle-main-column,
  .vehicle-info-stack {
    grid-template-rows: auto auto;
    align-content: start;
  }
  .vehicle-main-column > .graphical-vehicle-status,
  .vehicle-info-stack > .climate-detail-card {
    min-height: 380px !important;
    height: auto;
  }
  .vehicle-topview-wrap {
    min-height: 250px;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
  }
  .vehicle-topview {
    width: 270px;
    height: 385px;
    transform: rotate(90deg);
    transform-origin: 50% 50%;
  }
  .graphical-vehicle-status .compact-graphic-legend {
    margin-top: 8px;
  }
}
.vehicle-hover-info {
  width: 270px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(96,196,255,.48);
  background: linear-gradient(180deg, rgba(7,31,50,.98), rgba(2,14,26,.98));
  box-shadow: 0 18px 44px rgba(0,0,0,.52), inset 0 0 0 1px rgba(117,210,255,.05);
  backdrop-filter: blur(14px);
  transition: opacity .08s ease, transform .08s ease;
}
.vehicle-hover-info::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 18px;
  width: 10px;
  height: 10px;
  background: rgba(7,31,50,.98);
  border-left: 1px solid rgba(96,196,255,.48);
  border-bottom: 1px solid rgba(96,196,255,.48);
  transform: rotate(45deg);
}
.vehicle-hover-info strong { color:#ecf8ff; font-size:14px; letter-spacing:.01em; }
.vehicle-hover-info span { color:#9fc1d6; font-size:12.5px; }
@media (min-width: 761px) {
  .vehicle-topview-label,
  .vehicle-topview-sub {
    transform: rotate(-90deg);
    transform-box: fill-box;
    transform-origin: center;
  }
}


.vehicle-hover-info {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr);
  align-items: center;
  gap: 11px;
  min-height: 62px;
  padding: 11px 14px 11px 11px;
  border-radius: 15px;
  border: 1px solid rgba(92,203,255,.55);
  background: linear-gradient(145deg, rgba(8,39,61,.99), rgba(2,15,28,.99));
  box-shadow: 0 20px 50px rgba(0,0,0,.58), 0 0 22px rgba(69,187,244,.08);
}
.vehicle-hover-icon {
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:12px;
  background:rgba(56,174,230,.13);
  border:1px solid rgba(91,201,255,.25);
}
.vehicle-hover-icon svg {
  width:25px;
  height:25px;
  fill:none;
  stroke:#78d9ff;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.vehicle-hover-copy { display:block; min-width:0; }
.vehicle-hover-copy strong { display:block; color:#f2fbff; font-size:14px; margin:0 0 3px; }
.vehicle-hover-copy > span { display:block; color:#b3cede; font-size:12.5px; line-height:1.35; }


/* v1.11.7 – Klima V2 stabil, Ladestatus, Fahrzeugorientierung/Licht */
/* v1.11.9 – konsolidiertes Desktop-Fahrzeugraster */
@media (min-width: 1251px) {
  .vehicle-focus-layout {
    grid-template-columns: minmax(0, 1.08fr) minmax(430px, .92fr);
    align-items: stretch;
  }
  .vehicle-main-column,
  .vehicle-info-stack {
    display: grid;
    grid-template-rows: 545px 430px;
    align-self: stretch;
    align-content: stretch;
    height: auto;
  }
  .compact-vehicle-hero {
    min-height: 545px;
    height: 545px;
  }
  .vehicle-main-column > .graphical-vehicle-status,
  .vehicle-info-stack > .climate-detail-card {
    min-height: 430px;
    height: 430px;
    box-sizing: border-box;
  }
}
@media (min-width: 761px) {
  .vehicle-topview {
    transform: rotate(270deg) !important;
  }
  .vehicle-topview-label,
  .vehicle-topview-sub,
  .vehicle-orientation-label {
    transform: rotate(90deg) !important;
    transform-box: fill-box;
    transform-origin: center;
  }
}
.vehicle-orientation-label {
  fill: rgba(141,204,235,.62);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .22em;
}
.front-light[data-state="off"] {
  fill: rgba(90,205,255,.12) !important;
  stroke: rgba(105,214,255,.88) !important;
  stroke-width: 2.4 !important;
  opacity: .9;
}
.rear-light[data-state="off"] {
  fill: rgba(255,84,108,.12) !important;
  stroke: rgba(255,100,120,.88) !important;
  stroke-width: 2.4 !important;
  opacity: .9;
}
.vehicle-hazard[data-state="off"] {
  fill: rgba(255,179,70,.12) !important;
  stroke: rgba(255,190,84,.62) !important;
  opacity: .62 !important;
}
.climate-detail-grid small {
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-size:11.5px;
  line-height:1.3;
}
.command-entry { grid-template-columns: 12px minmax(0,1fr) auto; }
.command-meta {
  grid-column: 2 / -1;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.35;
  margin-top: -5px;
}


/* v1.11.9 – Zählerstand-Löschfunktion */
.meter-delete-details { grid-column: 1 / -1; margin-top: 8px; }
.meter-delete-details summary { cursor: pointer; color: #ff9b9b; font-weight: 700; font-size: 13px; }
.meter-delete-form { display: grid; grid-template-columns: minmax(180px,1fr) auto; gap: 10px; margin-top: 10px; }
.meter-delete-form input { min-width: 0; }
@media (max-width: 700px) { .meter-delete-form { grid-template-columns: 1fr; } }


/* v1.11.10 – Hover-Details nur bei tatsächlichem Hover + Ladestatus im Raster */
.vehicle-hover-info[hidden] {
  display: none !important;
}
.vehicle-hover-info[aria-hidden="true"] {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.vehicle-hover-info[aria-hidden="false"] {
  visibility: visible;
  opacity: 1;
}
#summaryPlug {
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}
@media (min-width: 1251px) {
  .vehicle-info-stack > .vehicle-side-card:first-child {
    overflow: hidden;
  }
  .vehicle-info-stack > .vehicle-side-card:first-child .summary-metric-grid {
    gap: 11px 14px;
  }
  .vehicle-info-stack > .vehicle-side-card:first-child .summary-metric-grid > div {
    min-height: 82px;
    padding-top: 11px;
    padding-bottom: 10px;
  }
  .vehicle-info-stack > .vehicle-side-card:first-child .summary-metric-grid .summary-wide {
    min-height: 92px;
  }
  .vehicle-info-stack > .vehicle-side-card:first-child .summary-metric-grid strong {
    font-size: clamp(22px, 1.55vw, 29px);
    margin-top: 5px;
    line-height: 1.04;
  }
  .vehicle-info-stack > .vehicle-side-card:first-child .summary-metric-grid .summary-wide strong {
    font-size: clamp(23px, 1.65vw, 30px);
    line-height: 1.04;
  }
  .vehicle-info-stack > .vehicle-side-card:first-child .summary-metric-grid small {
    margin-top: 4px;
    line-height: 1.25;
  }
}


/* v1.11.11 – Live-Fahrzeugstatus + mobile Navigation */
@media (max-width: 760px) {
  body { padding-bottom: 82px; }
  .page-frame { display:block; width:calc(100vw - 10px); margin:5px auto; }
  .app-shell { gap:12px; padding-bottom:86px; }
  .sidebar {
    position:fixed; z-index:1000; left:7px; right:7px;
    bottom:max(7px, env(safe-area-inset-bottom)); top:auto;
    min-height:0; height:66px; margin:0; padding:6px 7px;
    display:flex; flex-direction:row; align-items:stretch; gap:4px;
    border-radius:20px; background:rgba(3,18,31,.96); backdrop-filter:blur(18px);
  }
  .sidebar-logo,.sidebar-spacer { display:none !important; }
  .sidebar-nav {
    flex:1 1 auto; min-width:0; display:flex; flex-direction:row;
    align-items:stretch; justify-content:space-around; gap:3px;
  }
  .sidebar-nav a[href="#historyPanel"], .sidebar-nav a[href="#commandAudit"] { display:none !important; }
  .sidebar .nav-icon,.sidebar .nav-icon.small,.sidebar-logout .nav-icon {
    width:auto; min-width:48px; height:54px; flex:1 1 0;
    border-radius:14px; padding:5px 4px 3px; display:flex;
    flex-direction:column; align-items:center; justify-content:center; gap:2px;
    font-size:18px; line-height:1;
  }
  .sidebar .nav-icon::after,.sidebar-logout .nav-icon::after {
    content:attr(aria-label); max-width:62px; overflow:hidden; text-overflow:ellipsis;
    white-space:nowrap; font-size:8.5px; line-height:1.1; color:#9fc1d7; font-weight:700;
  }
  .sidebar .nav-svg { width:19px; height:19px; }
  .sidebar > a.nav-icon.small { flex:0 0 48px; }
  .sidebar-logout { flex:0 0 48px; margin:0; }

  .vehicle-focus-layout { display:flex !important; flex-direction:column; gap:12px; }
  .vehicle-main-column,.vehicle-info-stack { display:contents !important; }
  .compact-vehicle-hero { order:1; }
  .vehicle-info-stack > .vehicle-side-card:first-child { order:2; }
  .graphical-vehicle-status { order:3; }
  .vehicle-info-stack > .climate-detail-card { order:4; }

  .vehicle-topview-wrap {
    min-height:225px !important; height:225px !important; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
  }
  .vehicle-topview {
    width:200px !important; height:286px !important;
    transform:rotate(270deg) !important; transform-origin:50% 50% !important;
  }
  .vehicle-topview-label,.vehicle-topview-sub,.vehicle-orientation-label {
    transform:rotate(90deg) !important; transform-box:fill-box; transform-origin:center;
  }
  .graphical-vehicle-status { min-height:0 !important; height:auto !important; }
  .compact-graphic-legend {
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px 10px; margin-top:10px;
  }
  .compact-graphic-legend span { font-size:10.5px; }
  .vehicle-mobile-details { margin-top:10px; }
  .vehicle-mobile-details summary {
    padding:10px 12px; border:1px solid rgba(86,151,196,.18);
    border-radius:12px; background:rgba(5,19,31,.48);
  }
  .topbar { padding:16px 18px; }
  .brand-block { gap:10px; }
  .brand-dot { display:none; }
  .topbar h1 { font-size:clamp(27px,8vw,34px); }
}
@media (max-width:390px) {
  .sidebar .nav-icon::after,.sidebar-logout .nav-icon::after { font-size:7.7px; }
  .vehicle-topview { width:188px !important; height:269px !important; }
  .vehicle-topview-wrap { min-height:212px !important; height:212px !important; }
}

/* ==========================================================
   v1.12.0 – Navigation & Settings Redesign
   ========================================================== */
.sidebar-brand {
  display:flex; align-items:center; gap:11px; min-width:0; padding:3px;
}
.sidebar-brand-mark {
  flex:0 0 48px; width:48px; height:48px; border-radius:16px;
  display:grid; place-items:center; font-size:20px; font-weight:900;
  color:#8bdcff; border:1px solid rgba(92,190,249,.28);
  background:radial-gradient(circle at 30% 25%,rgba(83,200,255,.25),rgba(4,28,47,.9));
  box-shadow:0 0 22px rgba(58,171,236,.18);
}
.sidebar-brand-text { min-width:0; display:flex; flex-direction:column; }
.sidebar-brand-text strong { font-size:14px; white-space:nowrap; }
.sidebar-brand-text small { color:var(--muted); font-size:10px; margin-top:2px; white-space:nowrap; }
.sidebar-secondary { display:flex; flex-direction:column; gap:9px; }
.nav-item { gap:11px; }
.nav-label { font-size:13px; font-weight:800; letter-spacing:.01em; white-space:nowrap; }

@media (min-width:1361px) {
  .page-frame { grid-template-columns:218px minmax(0,1fr); max-width:1700px; }
  .sidebar.app-navigation { align-items:stretch; padding:16px 12px; gap:18px; }
  .sidebar.app-navigation .sidebar-nav { align-items:stretch; gap:8px; }
  .sidebar.app-navigation .nav-icon {
    width:100%; height:48px; border-radius:14px; display:flex; place-items:unset;
    align-items:center; justify-content:flex-start; padding:0 14px; font-size:16px;
  }
  .sidebar.app-navigation .nav-svg { width:20px; height:20px; flex:0 0 20px; }
  .sidebar.app-navigation .sidebar-logout { width:100%; }
  .sidebar.app-navigation .sidebar-logout .nav-icon { width:100%; cursor:pointer; }
}

@media (min-width:761px) and (max-width:1360px) {
  .sidebar.app-navigation { align-items:center; gap:8px; }
  .sidebar-brand-text { display:none; }
  .sidebar-brand-mark { width:42px; height:42px; flex-basis:42px; }
  .sidebar.app-navigation .sidebar-nav,
  .sidebar.app-navigation .sidebar-secondary { display:flex; flex-direction:row; gap:7px; }
  .sidebar.app-navigation .nav-icon { width:auto; min-width:48px; height:44px; padding:0 12px; display:flex; align-items:center; gap:8px; border-radius:13px; }
  .sidebar.app-navigation .nav-label { font-size:11px; }
  .sidebar.app-navigation .sidebar-logout { margin:0; }
}

.section-nav {
  display:flex; align-items:center; gap:6px; padding:7px; border-radius:16px;
  overflow-x:auto; scrollbar-width:none;
}
.section-nav::-webkit-scrollbar { display:none; }
.section-nav a {
  flex:0 0 auto; padding:9px 13px; border-radius:11px; color:#a8c5d8;
  font-size:12px; font-weight:800; border:1px solid transparent;
}
.section-nav a:hover,.section-nav a:focus-visible {
  color:#e7f8ff; border-color:rgba(79,175,235,.26); background:rgba(24,83,121,.35);
}

.settings-shell,.settings-detail-shell,.diagnose-shell { min-width:0; }
.settings-topbar { align-items:flex-start; }
.settings-message { margin:0; }
.settings-overview-grid {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px;
}
.settings-summary-card {
  display:flex; align-items:center; gap:13px; padding:16px; border-radius:18px;
  transition:transform .15s ease,border-color .15s ease;
}
.settings-summary-card:hover { transform:translateY(-2px); border-color:rgba(83,183,242,.45); }
.settings-summary-icon {
  width:42px; height:42px; border-radius:13px; display:grid; place-items:center;
  flex:0 0 42px; background:rgba(23,92,133,.35); border:1px solid rgba(88,177,231,.24);
  color:#6ed6ff; font-weight:900;
}
.settings-summary-card div { min-width:0; }
.settings-summary-card strong { display:block; font-size:16px; }
.settings-summary-card small { display:block; color:var(--muted); margin-top:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.settings-section { padding:24px; scroll-margin-top:18px; }
.settings-section-head { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; margin-bottom:18px; }
.settings-section-head h2 { margin:4px 0 4px; }
.settings-section-head p { margin:0; max-width:760px; }
.settings-step {
  display:grid; place-items:center; flex:0 0 42px; height:42px; border-radius:14px;
  border:1px solid rgba(83,177,233,.25); background:rgba(13,55,82,.45); color:#74d7ff; font-weight:900;
}
.settings-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.settings-field { display:flex; flex-direction:column; gap:7px; min-width:0; }
.settings-field > span,.settings-inline-test label > span { color:#bad1df; font-size:12px; font-weight:800; }
.settings-field input,.settings-field select,.settings-inline-test input {
  width:100%; min-height:44px; border-radius:12px; padding:10px 12px;
  border:1px solid rgba(83,154,201,.28); background:rgba(3,15,27,.72); color:#e7f6ff;
  outline:none;
}
.settings-field input:focus,.settings-inline-test input:focus { border-color:#55bdf1; box-shadow:0 0 0 3px rgba(75,178,231,.12); }
.settings-field small { color:var(--muted); line-height:1.35; }
.settings-field.full,.settings-actions.full { grid-column:1/-1; }
.security-confirm { padding-top:4px; }
.settings-actions { display:flex; gap:10px; align-items:center; }
.settings-inline-test {
  display:grid; grid-template-columns:minmax(220px,1fr) auto; align-items:end; gap:12px;
  margin-top:18px; padding-top:18px; border-top:1px solid rgba(87,151,192,.16);
}
.settings-inline-test label { display:flex; flex-direction:column; gap:7px; }
.settings-vehicle-results { margin-top:16px; display:grid; gap:8px; }
.settings-result-row {
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:10px; align-items:center;
  padding:12px 14px; border-radius:13px; border:1px solid rgba(75,145,188,.18); background:rgba(3,17,29,.48);
}
.settings-result-row span,.settings-result-row code { color:var(--muted); }
.settings-kpi-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.settings-kpi-grid > div {
  padding:14px; border:1px solid rgba(75,145,188,.18); border-radius:14px; background:rgba(3,17,29,.48);
}
.settings-kpi-grid span { display:block; color:var(--muted); font-size:12px; }
.settings-kpi-grid strong { display:block; font-size:20px; margin-top:7px; }
.settings-kpi-grid .small-strong { font-size:13px; word-break:break-all; }
.settings-link-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:14px; }
.settings-action-card {
  position:relative; min-height:95px; padding:15px 42px 15px 15px; border-radius:15px;
  border:1px solid rgba(75,145,188,.2); background:rgba(4,20,33,.56);
}
.settings-action-card:hover { border-color:rgba(76,181,241,.48); background:rgba(9,42,65,.62); }
.settings-action-card strong,.settings-action-card small { display:block; }
.settings-action-card small { color:var(--muted); margin-top:6px; line-height:1.35; }
.settings-action-card > span { position:absolute; right:15px; top:50%; transform:translateY(-50%); font-size:24px; color:#67cfff; }
.settings-detail-shell .auth-card { max-width:none; width:100%; }
.settings-detail-shell .auth-card > h1:first-of-type { font-size:26px; margin-bottom:5px; }
.settings-detail-shell h2[id] { scroll-margin-top:18px; padding-top:4px; }

@media (max-width:1100px) {
  .settings-overview-grid,.settings-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .settings-link-grid { grid-template-columns:1fr; }
}

@media (max-width:760px) {
  .sidebar.app-navigation { display:flex; }
  .sidebar.app-navigation .sidebar-brand,.sidebar.app-navigation .sidebar-spacer { display:none !important; }
  .sidebar.app-navigation .sidebar-nav,.sidebar.app-navigation .sidebar-secondary { display:contents; }
  .sidebar.app-navigation .nav-diagnose { display:none !important; }
  .sidebar.app-navigation .nav-icon,.sidebar.app-navigation .sidebar-logout .nav-icon {
    width:auto; min-width:0; height:54px; flex:1 1 0; padding:5px 2px 3px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  }
  .sidebar.app-navigation .nav-icon::after,.sidebar.app-navigation .sidebar-logout .nav-icon::after { display:none !important; content:none !important; }
  .sidebar.app-navigation .nav-label { display:block; max-width:64px; overflow:hidden; text-overflow:ellipsis; font-size:8.5px; line-height:1.05; color:#a7c5d8; }
  .sidebar.app-navigation .sidebar-logout { display:flex; flex:1 1 0; min-width:0; }
  .section-nav { padding:5px; border-radius:13px; }
  .section-nav a { padding:8px 10px; font-size:10.5px; }
  .settings-overview-grid,.settings-kpi-grid,.settings-form-grid { grid-template-columns:1fr; }
  .settings-field.full,.settings-actions.full { grid-column:auto; }
  .settings-section { padding:18px 15px; }
  .settings-section-head { gap:10px; }
  .settings-step { flex-basis:36px; height:36px; border-radius:11px; }
  .settings-inline-test { grid-template-columns:1fr; }
  .settings-result-row { grid-template-columns:1fr; }
}
.energy-settings-body { padding:20px; }.settings-detail-intro { margin:0 0 14px; color:#b5ccdb; line-height:1.5; }
.settings-detail-shell .energy-settings-body > form {
  padding:18px; margin:14px 0; border:1px solid rgba(76,148,193,.18);
  border-radius:16px; background:rgba(3,17,29,.42);
}
.settings-detail-shell .energy-settings-body > h2 {
  margin-top:24px; padding-top:4px;
}
.settings-detail-shell .energy-divider { border-color:rgba(72,143,187,.12); margin:20px 0; }

/* v1.12.1 – Energie & Hausnetz: visuelle Neuordnung */
.energy-live-panel,
.annual-energy-panel,
.charge-sessions-full {
  overflow: hidden;
}
.energy-live-head,
.energy-live-actions {
  align-items: center;
}
.energy-live-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}
.energy-live-diagram {
  display: grid;
  grid-template-columns: minmax(190px, .8fr) minmax(120px, .55fr) minmax(230px, 1fr) minmax(120px, .55fr) minmax(190px, .8fr);
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 28px;
  border: 1px solid rgba(83, 164, 218, .20);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 50%, rgba(43, 143, 211, .12), transparent 30%),
    linear-gradient(180deg, rgba(4, 19, 32, .78), rgba(3, 15, 26, .72));
}
.energy-node {
  min-width: 0;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 20px;
  border: 1px solid rgba(85, 165, 219, .23);
  border-radius: 22px;
  background: rgba(7, 28, 44, .72);
  box-shadow: inset 0 0 35px rgba(54, 151, 215, .035);
}
.energy-node-house {
  min-height: 220px;
  border-color: rgba(93, 199, 255, .38);
  background: radial-gradient(circle at 50% 30%, rgba(57, 164, 229, .16), rgba(6, 27, 43, .82) 62%);
}
.energy-node span { color: var(--muted); font-size: 14px; }
.energy-node strong { font-size: clamp(30px, 3vw, 48px); line-height: 1; }
.energy-node small { color: var(--muted); line-height: 1.35; }
.energy-node-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  border: 1px solid rgba(93, 199, 255, .25);
  background: rgba(25, 87, 127, .22);
  margin-bottom: 4px;
}
.energy-node-icon svg {
  width: 31px;
  height: 31px;
  fill: none;
  stroke: #74d2ff;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.energy-node-house .energy-node-icon svg { fill: rgba(93,199,255,.10); }
.energy-live-track {
  position: relative;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(91, 132, 158, .20);
  box-shadow: inset 0 0 0 1px rgba(106, 178, 222, .08);
}
.energy-live-track::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(91,203,255,.85), transparent);
  transform: translateX(-100%);
}
.energy-live-track.is-active::before {
  opacity: 1;
  animation: energy-track-sweep 1.55s linear infinite;
}
.energy-live-track i {
  position: absolute;
  top: 50%;
  left: -12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translateY(-50%);
  opacity: 0;
  background: #72d7ff;
  box-shadow: 0 0 14px rgba(79, 196, 255, .75);
}
.energy-live-track.is-active i {
  opacity: 1;
  animation: energy-dot-forward 2.1s linear infinite;
}
.energy-live-track.is-active i:nth-child(2) { animation-delay: .7s; }
.energy-live-track.is-active i:nth-child(3) { animation-delay: 1.4s; }
.energy-live-track-grid.is-import i { animation-name: energy-dot-reverse; }
.energy-live-track-grid.is-import::before { animation-direction: reverse; }
.energy-live-track-pv.is-active i { background: #6ff3a6; box-shadow: 0 0 14px rgba(83,236,148,.72); }
@keyframes energy-track-sweep { to { transform: translateX(100%); } }
@keyframes energy-dot-forward { from { left: -12px; } to { left: calc(100% + 12px); } }
@keyframes energy-dot-reverse { from { left: calc(100% + 12px); } to { left: -12px; } }
.energy-live-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.energy-live-facts article {
  min-width: 0;
  padding: 15px 17px;
  border: 1px solid rgba(77, 150, 198, .19);
  border-radius: 16px;
  background: rgba(5, 21, 34, .55);
}
.energy-live-facts span,
.energy-finance-metrics span { display: block; color: var(--muted); font-size: 13px; }
.energy-live-facts strong,
.energy-finance-metrics strong { display: block; margin-top: 6px; font-size: clamp(22px, 2.1vw, 31px); }
.energy-live-facts small,
.energy-finance-metrics small { display: block; margin-top: 5px; color: var(--muted); line-height: 1.35; }
.energy-live-meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 0 4px;
  color: var(--muted);
  font-size: 13px;
}
.energy-finance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.energy-finance-group {
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(77, 150, 198, .20);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(7, 29, 46, .70), rgba(4, 19, 32, .64));
}
.energy-finance-title {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(80, 146, 188, .17);
}
.energy-finance-title > div { display: grid; gap: 3px; }
.energy-finance-title strong { font-size: 18px; }
.energy-finance-title small { color: var(--muted); }
.finance-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(55, 155, 218, .14);
  border: 1px solid rgba(91, 190, 246, .24);
  font-size: 20px;
}
.energy-finance-metrics {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.energy-finance-metrics > div {
  padding: 13px 14px;
  border: 1px solid rgba(72, 135, 176, .15);
  border-radius: 14px;
  background: rgba(3, 17, 29, .46);
}
.energy-finance-metrics.two { grid-template-columns: 1fr; }
.energy-finance-metrics .cost-positive {
  border-color: rgba(78, 224, 139, .33);
  background: linear-gradient(180deg, rgba(8, 52, 35, .58), rgba(4, 28, 26, .54));
}
.energy-finance-metrics .cost-positive strong { color: #73f4a8; }
.energy-finance-metrics .cost-negative {
  border-color: rgba(255, 106, 121, .34);
  background: linear-gradient(180deg, rgba(64, 18, 27, .58), rgba(34, 10, 18, .54));
}
.energy-finance-metrics .cost-negative strong { color: #ff929d; }
.energy-history-summary-compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.charge-sessions-full { width: 100%; }
.charge-balance-grid-compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.charge-sessions-full .charge-session-row {
  grid-template-columns: minmax(160px, .8fr) minmax(90px, .45fr) minmax(130px, .6fr) minmax(120px, .55fr);
}

@media (max-width: 1120px) {
  .energy-live-diagram {
    grid-template-columns: 1fr;
  }
  .energy-live-track {
    width: 10px;
    height: 72px;
    justify-self: center;
  }
  .energy-live-track::before {
    background: linear-gradient(180deg, transparent, rgba(91,203,255,.85), transparent);
    transform: translateY(-100%);
  }
  .energy-live-track.is-active::before { animation-name: energy-track-sweep-vertical; }
  .energy-live-track i { top: -12px; left: 50%; transform: translateX(-50%); }
  .energy-live-track.is-active i { animation-name: energy-dot-down; }
  .energy-live-track-grid.is-import i { animation-name: energy-dot-up; }
  @keyframes energy-track-sweep-vertical { to { transform: translateY(100%); } }
  @keyframes energy-dot-down { from { top: -12px; } to { top: calc(100% + 12px); } }
  @keyframes energy-dot-up { from { top: calc(100% + 12px); } to { top: -12px; } }
  .energy-finance-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .energy-live-panel,
  .annual-energy-panel,
  .energy-history-panel,
  .charge-sessions-full { padding: 18px; }
  .energy-live-head { align-items: flex-start; }
  .energy-live-actions { justify-content: flex-start; margin-top: 12px; }
  .energy-live-diagram { padding: 16px; }
  .energy-node { min-height: 140px; }
  .energy-node-house { min-height: 160px; }
  .energy-live-facts,
  .energy-history-summary-compact,
  .charge-balance-grid-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .energy-live-facts,
  .energy-history-summary-compact,
  .charge-balance-grid-compact { grid-template-columns: 1fr; }
  .energy-live-meta { display: grid; }
}
@media (prefers-reduced-motion: reduce) {
  .energy-live-track.is-active::before,
  .energy-live-track.is-active i { animation: none !important; }
}


/* v1.12.2 – Energiefluss + grafische Jahresbilanz */
.annual-visual-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:16px;margin-top:20px}
.annual-chart-card{border:1px solid rgba(91,171,232,.22);border-radius:20px;background:rgba(5,20,36,.46);padding:18px;min-height:310px}
.annual-chart-head{display:flex;align-items:flex-start;gap:12px;padding-bottom:14px;border-bottom:1px solid rgba(117,177,218,.14)}
.annual-chart-head .chart-index{font-size:11px;letter-spacing:.14em;color:#59c7ff;font-weight:800}.annual-chart-head strong{display:block;font-size:18px}.annual-chart-head small{display:block;color:var(--muted);margin-top:3px}
.annual-bar-chart{height:205px;display:flex;align-items:flex-end;justify-content:center;gap:70px;padding:34px 18px 0;border-bottom:1px solid rgba(132,188,225,.18)}
.annual-bar-group{height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;min-width:150px}.annual-bar-pair{height:155px;display:flex;gap:14px;align-items:flex-end}.annual-bar{width:52px;min-height:4px;border-radius:8px 8px 2px 2px;position:relative;transition:height .45s ease}.annual-bar b{position:absolute;left:50%;transform:translateX(-50%);top:-25px;white-space:nowrap;font-size:11px}.annual-bar-paid{background:linear-gradient(180deg,#f4bd4d,#936b20)}.annual-bar-cost{background:linear-gradient(180deg,#62d5b1,#256b60)}.annual-bar-group>strong{font-size:13px;margin-top:9px}.annual-bar-group>small{font-size:11px;color:var(--muted)}
.annual-chart-legend{display:flex;justify-content:center;gap:20px;margin-top:14px;font-size:12px;color:var(--muted)}.annual-chart-legend i,.annual-donut-legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px}.legend-paid,.legend-work{background:#d79f36}.legend-cost,.legend-base{background:#4e9c89}
.annual-donut-wrap{display:flex;align-items:center;justify-content:center;gap:26px;height:230px}.annual-donut{--work-angle:270deg;width:168px;height:168px;border-radius:50%;background:conic-gradient(#d79f36 0 var(--work-angle),#4e9c89 var(--work-angle) 360deg);display:grid;place-items:center;position:relative}.annual-donut:after{content:"";position:absolute;inset:30px;border-radius:50%;background:#071827;border:1px solid rgba(110,182,230,.12)}.annual-donut>div{position:relative;z-index:1;text-align:center}.annual-donut strong{display:block;font-size:22px}.annual-donut small{color:var(--muted)}.annual-donut-legend{display:grid;gap:14px;font-size:12px;color:var(--muted)}.annual-donut-legend span{display:grid;grid-template-columns:auto 1fr;align-items:center}.annual-donut-legend b{grid-column:2;color:#eaf6ff;margin-top:2px;font-size:14px}
.balance-compare{display:grid;gap:28px;padding-top:28px}.balance-compare>div>span{display:block;color:var(--muted);font-size:13px}.balance-compare strong{display:block;font-size:28px;color:#70f2a7;margin:4px 0 10px}.balance-compare strong.negative{color:#ff8f8f}.balance-meter{height:14px;border-radius:10px;background:rgba(103,155,193,.13);overflow:hidden}.balance-meter i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#2a7b68,#65ddb0);transition:width .45s ease}.balance-meter i.negative{background:linear-gradient(90deg,#8a3138,#ff7878)}.annual-balance-visual p{margin-top:22px;font-size:12px}
@media(max-width:1100px){.annual-visual-grid{grid-template-columns:1fr}.annual-chart-card{min-height:auto}.annual-bar-chart{gap:34px}.annual-donut-wrap{min-height:220px}}
@media(max-width:640px){.annual-bar-chart{gap:16px;padding-inline:0}.annual-bar-group{min-width:120px}.annual-bar{width:42px}.annual-donut-wrap{flex-direction:column;height:auto;padding:24px 0}.annual-chart-card{padding:15px}}

/* ========================================================================== */
/* v1.13.0 · Monatsauswertung + klare grafische Jahreskosten                  */
/* ========================================================================== */
.monthly-energy-panel { margin-top: 18px; }
.annual-summary-strip,
.monthly-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.annual-summary-strip article,
.monthly-summary-strip article {
  border: 1px solid rgba(91,171,232,.20);
  border-radius: 16px;
  background: rgba(4,18,31,.52);
  padding: 15px 16px;
  min-width: 0;
}
.annual-summary-strip span,
.monthly-summary-strip span { display:block; color:var(--muted); font-size:12px; }
.annual-summary-strip strong,
.monthly-summary-strip strong { display:block; margin-top:5px; font-size:clamp(20px,2vw,29px); line-height:1.08; }
.annual-summary-strip small,
.monthly-summary-strip small { display:block; margin-top:5px; color:var(--muted); line-height:1.35; }
.annual-summary-strip .cost-positive { border-color:rgba(61,207,139,.46); background:linear-gradient(180deg,rgba(4,50,39,.56),rgba(4,25,28,.48)); }
.annual-summary-strip .cost-positive strong { color:#68efaa; }
.annual-summary-strip .cost-negative { border-color:rgba(239,104,114,.48); background:linear-gradient(180deg,rgba(67,23,30,.54),rgba(30,17,25,.46)); }
.annual-summary-strip .cost-negative strong { color:#ff929d; }

.annual-cost-flow-card { margin-top:18px; min-height:0; }
.annual-cost-flow {
  display:grid;
  grid-template-columns:minmax(132px,1fr) 32px minmax(132px,1fr) 32px minmax(142px,1fr) 32px minmax(132px,1fr);
  align-items:center;
  gap:8px;
  padding:26px 10px 10px;
}
.cost-flow-node {
  min-height:78px;
  display:grid;
  align-content:center;
  justify-items:center;
  text-align:center;
  border:1px solid rgba(132,164,203,.24);
  border-radius:12px;
  background:rgba(78,87,111,.20);
  padding:10px 10px;
}
.cost-flow-node span { font-size:9px; letter-spacing:.12em; color:#91a4be; font-weight:800; }
.cost-flow-node strong { margin-top:7px; font-size:clamp(16px,1.45vw,21px); line-height:1.08; white-space:nowrap; }
.cost-flow-node small { display:block; margin-top:5px; color:#91a4be; font-size:10px; line-height:1.25; white-space:nowrap; }
.cost-flow-node.accent { border-color:rgba(226,164,53,.72); background:rgba(121,78,25,.22); }
.cost-flow-node.accent span { color:#e6a83d; }
.cost-flow-node.base { border-color:rgba(80,169,147,.72); background:rgba(46,109,96,.18); }
.cost-flow-node.base span { color:#58b99f; }
.cost-flow-node.total { border:2px solid rgba(81,181,154,.75); min-width:150px; background:rgba(52,93,88,.25); }
.cost-flow-node.total span { color:#56b49c; }
.cost-flow-node.total strong { font-size:clamp(19px,1.85vw,27px); }
.cost-flow-node.paid { min-width:168px; background:rgba(8,29,46,.64); border-color:rgba(91,171,232,.22); }
.cost-flow-node.balance { min-width:168px; border-color:rgba(61,207,139,.42); background:linear-gradient(180deg,rgba(4,50,39,.54),rgba(4,25,28,.48)); }
.cost-flow-node.balance span { color:#6cc7ad; }
.cost-flow-node.balance strong { color:#68efaa; font-size:clamp(18px,1.7vw,25px); }
.cost-flow-node.balance.cost-negative { border-color:rgba(239,104,114,.48); background:linear-gradient(180deg,rgba(67,23,30,.54),rgba(30,17,25,.46)); }
.cost-flow-node.balance.cost-negative strong { color:#ff929d; }
.cost-flow-arrow,
.cost-flow-total-arrow { color:#91a8c8; font-size:31px; font-weight:300; text-align:center; line-height:1; }
.cost-flow-total-wrap { grid-column:2 / 8; display:flex; align-items:center; justify-content:center; gap:12px; padding-top:0; }
.cost-flow-total-arrow { color:#53b39b; }
.cost-flow-total-arrow.secondary { color:#91a8c8; }
.annual-cost-flow-legend {
  border-top:1px solid rgba(117,177,218,.14);
  display:flex;
  justify-content:center;
  gap:30px;
  flex-wrap:wrap;
  padding:15px 10px 2px;
  color:var(--muted);
  font-size:12px;
}
.annual-cost-flow-legend i,
.monthly-chart-legend i { display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:6px; vertical-align:-1px; }
.annual-cost-flow-legend b { color:#c6d9e8; font-weight:600; }
.legend-average { background:#899bb9; }

.monthly-panel-head { align-items:flex-end; }
.monthly-year-select { display:grid; gap:6px; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.1em; min-width:120px; }
.monthly-year-select select {
  appearance:none;
  min-height:40px;
  border-radius:11px;
  border:1px solid rgba(92,171,224,.28);
  background:#081d2d;
  color:#e9f4fb;
  padding:8px 34px 8px 12px;
  font:inherit;
  font-size:14px;
  letter-spacing:0;
  text-transform:none;
}
.monthly-chart-card {
  margin-top:16px;
  border:1px solid rgba(91,171,232,.22);
  border-radius:20px;
  background:rgba(5,20,36,.46);
  padding:18px;
}
.monthly-svg-chart {
  position:relative;
  overflow-x:auto;
  min-height:340px;
  padding-top:8px;
  scrollbar-width:thin;
}
.monthly-svg-chart svg { display:block; width:100%; min-width:840px; height:340px; overflow:visible; }
.monthly-balance-chart { min-height:360px; }
.monthly-balance-chart svg { height:360px; }
.monthly-empty-chart { display:grid; place-items:center; min-height:300px; text-align:center; padding:25px; }
.monthly-grid-line { stroke:rgba(142,174,202,.16); stroke-width:1; vector-effect:non-scaling-stroke; }
.monthly-balance-zero { stroke:rgba(81,190,160,.38); stroke-width:1.2; stroke-dasharray:5 5; vector-effect:non-scaling-stroke; }
.monthly-axis-label { fill:#8599b3; font-size:11px; font-family:inherit; }
.monthly-axis-right { fill:#5bb39c; }
.monthly-x-label { fill:#8fa3bd; font-size:12px; font-family:inherit; }
.monthly-month-group { cursor:pointer; }
.monthly-month-group.is-selected .monthly-x-label { fill:#f0f7fc; font-weight:800; }
.monthly-month-group.is-selected .monthly-bar-consumption,
.monthly-month-group.is-selected .monthly-bar-advance,
.monthly-month-group.is-selected .monthly-bar-cost { filter:brightness(1.18); }
.monthly-bar-consumption { fill:#d39a37; opacity:.92; transition:opacity .2s ease; }
.monthly-bar-consumption.partial { opacity:.55; stroke:#e7b85c; stroke-width:1.5; stroke-dasharray:4 3; }
.monthly-bar-empty { fill:rgba(130,151,179,.22); }
.monthly-cost-line { fill:none; stroke:#4fa48e; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.monthly-cost-point { fill:#55ad96; stroke:#0a2630; stroke-width:2; cursor:pointer; vector-effect:non-scaling-stroke; }
.monthly-partial-dot { fill:#efbf60; }
.monthly-bar-advance { fill:#d39a37; opacity:.95; }
.monthly-bar-cost { fill:#69758f; opacity:.88; }
.monthly-balance-line { fill:none; stroke:#55aa94; stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.monthly-balance-point { fill:#55aa94; stroke:#09252f; stroke-width:2; cursor:pointer; vector-effect:non-scaling-stroke; }
.monthly-balance-point.negative { fill:#e16d76; }
.monthly-chart-legend { display:flex; justify-content:center; gap:24px; flex-wrap:wrap; color:var(--muted); font-size:12px; padding-top:5px; }
.legend-consumption,.legend-advance { background:#d39a37; }
.legend-totalcost,.legend-balance { background:#55aa94; }
.legend-monthcost { background:#69758f; }
.monthly-chart-hint { margin:12px 0 0; text-align:center; font-size:12px; }

.monthly-detail-card {
  margin-top:16px;
  border:1px solid rgba(91,171,232,.22);
  border-radius:20px;
  background:rgba(5,20,36,.46);
  padding:18px;
}
.monthly-detail-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:14px; border-bottom:1px solid rgba(117,177,218,.14); }
.monthly-detail-head > div { display:grid; gap:4px; }
.monthly-detail-head span:first-child { color:var(--muted); font-size:12px; }
.monthly-detail-head strong { font-size:20px; }
.monthly-detail-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding-top:15px; }
.monthly-detail-grid > div { border:1px solid rgba(91,171,232,.16); border-radius:14px; background:rgba(3,16,29,.42); padding:14px; }
.monthly-detail-grid span { display:block; color:var(--muted); font-size:12px; }
.monthly-detail-grid strong { display:block; font-size:21px; margin-top:6px; }
.monthly-detail-grid small { display:block; color:var(--muted); margin-top:5px; line-height:1.35; }

@media(max-width:1100px){
  .annual-summary-strip,.monthly-summary-strip{grid-template-columns:repeat(2,minmax(0,1fr));}
  .annual-cost-flow{grid-template-columns:minmax(112px,1fr) 24px minmax(112px,1fr) 24px minmax(122px,1fr) 24px minmax(112px,1fr);gap:6px;}
  .cost-flow-total-wrap{grid-column:1/8;gap:9px;}
  .cost-flow-node.paid,.cost-flow-node.balance{min-width:145px;}
  .monthly-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:700px){
  .monthly-panel-head{align-items:flex-start;}
  .monthly-year-select{width:100%;}
  .annual-summary-strip,.monthly-summary-strip{grid-template-columns:1fr 1fr;}
  .annual-cost-flow{display:flex;flex-direction:column;align-items:stretch;padding:22px 4px 10px;}
  .annual-cost-flow .cost-flow-arrow{transform:rotate(90deg);font-size:30px;}
  .cost-flow-total-wrap{display:flex;flex-direction:column;padding-top:0;}
  .cost-flow-total-arrow{transform:rotate(90deg);font-size:30px;}
  .cost-flow-node{min-height:72px;}
  .cost-flow-node.paid,.cost-flow-node.balance,.cost-flow-node.total{min-width:0;width:100%;}
  .annual-cost-flow-legend{justify-content:flex-start;gap:12px 18px;}
  .monthly-detail-grid{grid-template-columns:1fr;}
  .monthly-svg-chart{margin-inline:-8px;}
}
@media(max-width:480px){
  .annual-summary-strip,.monthly-summary-strip{grid-template-columns:1fr;}
  .monthly-chart-card,.monthly-detail-card{padding:14px;}
}


/* v1.13.5 – neue grafische Ladeauswertung */
.heading-inline-note { color: var(--muted); font-size: .78em; font-weight: 600; }
.visual-flow-panel-enhanced { overflow: hidden; }
.visual-flow-panel-enhanced::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 72% 28%, rgba(53, 160, 255, .10), transparent 28%), radial-gradient(circle at 32% 78%, rgba(104, 255, 168, .08), transparent 24%);
}
.enhanced-flow-subhead { align-items: flex-start; margin-bottom: 18px; }
.enhanced-flow-meta span { color: #d9e7f3; }
.charge-flow-stage {
  display: grid; grid-template-columns: minmax(220px, .95fr) minmax(250px, .9fr) minmax(340px, 1.1fr);
  gap: 18px; align-items: center; position: relative;
}
.charge-flow-sources, .charge-flow-targets { display: grid; gap: 16px; }
.enhanced-source-card, .enhanced-target-card { min-height: 138px; }
.flow-card-label { display: flex; align-items: center; gap: 12px; color: #dbe8f4; }
.flow-card-label span { margin: 0; }
.flow-icon {
  width: 38px; height: 38px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(18, 44, 66, .85); border: 1px solid rgba(104, 168, 220, .22); box-shadow: inset 0 0 18px rgba(255,255,255,.05);
}
.flow-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.flow-icon.sun { color: #c6ff63; }
.flow-icon.grid { color: #62c5ff; }
.charge-flow-core { position: relative; display: grid; justify-items: center; gap: 22px; }
.flow-node-main {
  width: min(100%, 290px); min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: inset 0 0 60px rgba(16, 115, 217, .18), 0 0 30px rgba(71, 162, 255, .12), 0 0 0 1px rgba(95, 180, 255, .12);
  animation: flowNodePulse 4.5s ease-in-out infinite;
}
@keyframes flowNodePulse {
  0%, 100% { box-shadow: inset 0 0 60px rgba(16, 115, 217, .16), 0 0 26px rgba(71, 162, 255, .10), 0 0 0 1px rgba(95, 180, 255, .12); transform: translateY(0); }
  50% { box-shadow: inset 0 0 70px rgba(16, 115, 217, .22), 0 0 38px rgba(71, 162, 255, .18), 0 0 0 1px rgba(95, 180, 255, .18); transform: translateY(-1px); }
}
.enhanced-left-lines, .enhanced-right-lines { width: 100%; }
.enhanced-left-lines .flow-line, .enhanced-right-lines .flow-line { height: 22px; box-shadow: inset 0 0 0 1px rgba(130, 174, 214, .08); }
.target-card-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 12px;
}
.target-card-head .mini-caption { display: block; color: #9eb7ca; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; margin-bottom: 6px; }
.target-card-title { color: #dbe8f4; font-weight: 700; font-size: 15px; }
.target-meta-right { text-align: right; }
.target-meta-right span, .target-meta-right small { display: block; color: #aecdde; }
.target-meta-right small { margin-top: 4px; }
.car-card-main { min-height: 206px; }
.car-card-body { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.car-card-copy { flex: 1; }
.car-ring-wrap { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.car-source-ring {
  --share-grid: 100%;
  width: 130px; height: 130px; border-radius: 50%; position: relative;
  background: conic-gradient(#67c9ff 0 var(--share-grid), #5cff83 var(--share-grid) 100%);
  box-shadow: 0 0 24px rgba(70, 156, 255, .16), inset 0 0 20px rgba(255,255,255,.05);
  animation: none;
}
.car-source-ring.ring-active { animation: carRingRotate 1.1s ease-out; }
@keyframes carRingRotate {
  from { transform: scale(.92) rotate(-70deg); opacity: .3; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}
.car-source-ring::after {
  content: ""; position: absolute; inset: 12px; border-radius: 50%;
  background: radial-gradient(circle at 50% 18%, rgba(35, 145, 255, .14), rgba(5, 16, 28, .96)); border: 1px solid rgba(126, 177, 221, .16);
}
.car-source-ring-inner {
  position: absolute; inset: 24px; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.car-source-ring-inner span { color: #c8dbea; font-size: 12px; }
.car-source-ring-inner strong { font-size: 20px; line-height: 1.15; }
.flow-details-board { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 20px; }
.flow-details-group h3 { margin: 0 0 12px; font-size: 18px; }
.enhanced-flow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
.flow-bottom-grid { margin-top: 18px; }
.flow-bottom-grid article strong { font-size: clamp(18px, 1.8vw, 26px); }
.visual-flow-panel-enhanced .flow-card strong { font-size: clamp(24px, 2.4vw, 42px); }
.visual-flow-panel-enhanced .flow-node strong { font-size: clamp(42px, 3.2vw, 60px); }
.visual-flow-panel-enhanced .flow-technical-note { margin-top: 18px; }
@media (max-width: 1180px) {
  .charge-flow-stage { grid-template-columns: 1fr; }
  .charge-flow-core { order: -1; }
  .charge-flow-targets, .charge-flow-sources { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .car-card-main { grid-column: 1 / -1; }
  .flow-details-board { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .charge-flow-sources, .charge-flow-targets, .enhanced-flow-grid { grid-template-columns: 1fr; }
  .car-card-body { flex-direction: column; align-items: flex-start; }
  .target-meta-right { text-align: left; }
  .visual-flow-panel-enhanced .flow-node strong { font-size: clamp(34px, 10vw, 50px); }
}


/* v1.13.6 – Ladeauswertung nahe am freigegebenen Mockup */
.flow-mockup-panel { position: relative; overflow: hidden; }
.flow-mockup-panel::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(circle at 48% 38%, rgba(36,137,225,.08), transparent 28%);
}
.flow-mockup-panel > * { position: relative; z-index: 1; }
.flow-mockup-head { margin-bottom: 10px; }
.flow-mockup-head h2 { white-space: nowrap; }
.flow-mockup-subhead { margin-bottom: 4px; align-items: flex-start; }
.flow-stage-mockup {
  height: 390px; position: relative; margin: 0; isolation:isolate;
}
.charge-flow-svg { position:absolute; inset:0; width:100%; height:100%; z-index:0; overflow:visible; pointer-events:none; }
.mockup-sources { position:absolute; left:0; top:86px; width:27%; display:grid; gap:12px; z-index:2; }
.mockup-targets { position:absolute; right:0; top:28px; width:35%; display:grid; gap:12px; z-index:2; }
.mockup-center-node { position:absolute; left:38.2%; top:128px; width:22%; min-height:174px; z-index:3; }
.mockup-flow-card { border-radius:18px; padding:16px 18px; min-height:112px; }
.mockup-flow-card strong { font-size: clamp(26px, 2.25vw, 39px); margin: 7px 0 3px; }
.mockup-flow-card small { font-size:12px; line-height:1.35; }
.mockup-center-node {
  display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
  border-radius:22px; padding:18px 16px;
  background:radial-gradient(circle at 50% 18%, rgba(35,145,255,.21), rgba(5,18,31,.96));
  border:1px solid rgba(94,172,232,.48);
  box-shadow: inset 0 0 44px rgba(10,113,209,.18), 0 0 24px rgba(52,154,255,.22), 0 0 0 3px rgba(53,148,231,.06);
  animation: flowNodePulse 4.5s ease-in-out infinite;
}
.mockup-center-node span { font-size:12px; color:#bdd4e4; letter-spacing:.02em; }
.mockup-center-node strong { font-size:clamp(38px,3.3vw,58px); line-height:1.08; margin:10px 0 4px; }
.mockup-center-node small { font-size:11px; font-weight:600; color:#d8e7f4; }
.flow-icon { width:34px; height:34px; border-radius:12px; }
.flow-icon svg { width:20px; height:20px; }
.flow-card-label { gap:10px; }
.flow-card-label span { font-size:14px; }
.energy-ribbon { opacity:.18; transition:opacity .35s ease; }
.energy-ribbon.flow-active { opacity:1; }
.energy-ribbon .ribbon-base, .energy-ribbon .ribbon-motion, .energy-ribbon .ribbon-accent, .energy-ribbon .ribbon-dotted, .energy-ribbon .ribbon-arrow {
  fill:none; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round;
}
.energy-ribbon .ribbon-motion { animation:none; }
.ribbon-pv .ribbon-base { stroke:#72d86e; stroke-width:22; filter:url(#flowGlowGreen); }
.ribbon-pv .ribbon-motion { stroke:#a5ff89; stroke-width:4; stroke-dasharray:18 15; }
.energy-ribbon.ribbon-pv.flow-active .ribbon-motion { animation:ribbonTravel 1.25s linear infinite; }
.ribbon-grid .ribbon-base { stroke:#54baf2; stroke-width:25; filter:url(#flowGlowBlue); }
.ribbon-grid .ribbon-motion { stroke:#a3dcff; stroke-width:5; stroke-dasharray:19 15; }
.energy-ribbon.ribbon-grid.flow-active .ribbon-motion { animation:ribbonTravel 1.15s linear infinite; }
.ribbon-grid .ribbon-accent { stroke:#f6c94c; stroke-width:14; opacity:.95; filter:url(#flowGlowGold); }
.ribbon-car .ribbon-base { stroke:#5bc5ff; stroke-width:24; filter:url(#flowGlowBlue); }
.ribbon-car .ribbon-motion { stroke:#d0efff; stroke-width:4; stroke-dasharray:18 14; }
.energy-ribbon.ribbon-car.flow-active .ribbon-motion { animation:ribbonTravel 1.05s linear infinite; }
.ribbon-home .ribbon-dotted { stroke:#76a6c4; stroke-width:2.2; stroke-dasharray:2 8; }
.ribbon-export .ribbon-dotted, .ribbon-export .ribbon-arrow { stroke:#efc663; stroke-width:2.1; stroke-dasharray:3 7; }
@keyframes ribbonTravel { to { stroke-dashoffset:-66; } }
.mockup-car-card { min-height:116px; padding:14px 16px; }
.mockup-car-card .target-card-head { margin-bottom:6px; }
.mockup-car-card .mini-caption { font-size:10px; margin-bottom:3px; }
.mockup-car-card .target-card-title { font-size:14px; }
.mockup-car-card .target-meta-right span, .mockup-car-card .target-meta-right small { font-size:11px; }
.mockup-car-body { min-height:66px; }
.mockup-car-card .car-card-copy strong { font-size:clamp(30px,2.8vw,45px); }
.car-source-ring { width:92px; height:92px; flex:0 0 92px; }
.car-source-ring::after { inset:9px; }
.car-source-ring-inner { inset:16px; }
.car-source-ring-inner span { font-size:9px; }
.car-source-ring-inner strong { font-size:12px !important; white-space:nowrap; margin:2px 0 0 !important; }
.target-icon-card { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.target-icon-card > div { min-width:0; }
.target-outline-icon { width:48px; height:48px; flex:0 0 auto; fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; opacity:.9; }
.target-outline-icon.home { stroke:#73a9ff; }
.target-outline-icon.grid { stroke:#f6c65a; }
.flow-detail-matrix {
  margin-top:34px; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px;
}
.detail-title { margin:0 0 0; font-size:16px; align-self:end; }
.detail-title-load { grid-column:1 / 4; }
.detail-title-cost { grid-column:4 / 7; }
.detail-card {
  min-height:102px; padding:13px 14px; border-radius:15px;
  background:rgba(5,19,31,.58); border:1px solid rgba(76,142,190,.20);
}
.detail-card span { display:block; color:var(--muted); font-size:11px; }
.detail-card strong { display:block; margin-top:7px; font-size:clamp(18px,1.65vw,27px); line-height:1.15; }
.detail-card small { display:block; margin-top:6px; color:var(--muted); font-size:10px; line-height:1.3; }
.detail-card.cost-highlight { border-color:rgba(57,214,133,.48); background:linear-gradient(145deg,rgba(16,81,55,.54),rgba(4,22,31,.78)); }
.detail-card.cost-highlight strong { color:#59ef9a; }
.detail-wide { grid-column:span 2; }
.flow-tech-details { margin-top:10px; border-top:1px solid rgba(97,149,188,.12); padding-top:8px; }
.flow-tech-details summary { cursor:pointer; color:#9eb7ca; font-size:12px; user-select:none; }
.flow-tech-grid { margin-top:10px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.flow-tech-grid article { padding:10px 12px; border-radius:12px; border:1px solid rgba(76,142,190,.15); background:rgba(5,19,31,.42); }
.flow-tech-grid span { display:block; color:var(--muted); font-size:10px; }
.flow-tech-grid strong { display:block; margin-top:4px; font-size:16px; }
.flow-mockup-panel .flow-technical-note { margin-top:10px; margin-bottom:2px; font-size:11px; }
.flow-mockup-panel #flowCarEstimateNote { font-size:11px; margin-top:0; }
@media (prefers-reduced-motion: reduce) {
  .energy-ribbon .ribbon-motion, .mockup-center-node, .car-source-ring { animation:none !important; }
}
@media (max-width:1100px) {
  .flow-stage-mockup { height:auto; display:grid; grid-template-columns:1fr; gap:12px; }
  .charge-flow-svg { display:none; }
  .mockup-sources, .mockup-targets, .mockup-center-node { position:relative; inset:auto; width:auto; display:grid; }
  .mockup-sources { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mockup-targets { grid-template-columns:1fr; }
  .mockup-center-node { width:min(100%,320px); margin:0 auto; min-height:170px; }
  .flow-detail-matrix { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .detail-title-load, .detail-title-cost { grid-column:1 / -1; }
  .flow-tech-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:720px) {
  .flow-mockup-head h2 { white-space:normal; }
  .mockup-sources, .flow-detail-matrix, .flow-tech-grid { grid-template-columns:1fr; }
  .detail-title-load, .detail-title-cost, .detail-wide { grid-column:auto; }
  .flow-battery-meta { text-align:left; }
  .flow-mockup-subhead { flex-direction:column; align-items:flex-start; gap:8px; }
}


/* v1.13.8 – fachlich sauberer Ladefluss */
.flow-export-compact {
  display:flex; align-items:center; gap:10px; min-height:42px; padding:9px 12px; border-radius:12px;
  border:1px solid rgba(231,190,92,.13); background:rgba(28,26,17,.22); color:#9fb3c4;
  opacity:.72; transition:opacity .25s ease,border-color .25s ease,background .25s ease;
}
.flow-export-compact span { font-size:11px; }
.flow-export-compact strong { margin-left:auto; font-size:15px; color:#c8d4dd; white-space:nowrap; }
.flow-export-compact small { display:none; }
.flow-export-compact.has-export { opacity:1; border-color:rgba(239,198,99,.42); background:rgba(60,46,16,.32); }
.flow-export-compact.has-export strong { color:#efc663; }
.mockup-targets { gap:12px; }
.mockup-targets .target.home.is-uncertain { border-style:dashed; border-color:rgba(116,166,204,.20); background:rgba(5,19,31,.42); }
.mockup-targets .target.home.is-uncertain strong { font-size:clamp(16px,1.45vw,22px); color:#c2d0db; line-height:1.12; }
.ribbon-home.is-unknown { opacity:.07 !important; }
.ribbon-export.is-zero { opacity:0 !important; }
.ribbon-export.flow-active { opacity:1 !important; }
.flow-detail-matrix { margin-top:42px; }
@media (max-width:1100px) {
  .flow-export-compact { width:100%; }
}


/* v1.13.9 – unabhängige Netzleistungs-Zeiträume, MIN/MAX und asymmetrische Achse */
.history-controls-stack { display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.history-summary-range-label { font-size:12px; }
.power-chart-title-row { align-items:flex-start; }
.power-chart-periods { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; }
.period-button.compact { padding:8px 12px; font-size:12px; }
.power-chart-meta {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  margin:-2px 0 12px;
  min-height:40px;
}
.power-chart-meta > .muted { font-size:12px; }
.power-chart-extremes { display:flex; gap:9px; flex-wrap:wrap; justify-content:flex-end; }
.power-extreme {
  display:flex;
  align-items:baseline;
  gap:7px;
  min-width:128px;
  padding:7px 10px;
  border:1px solid rgba(96,177,236,.20);
  background:rgba(5,24,39,.72);
  border-radius:11px;
  font-variant-numeric:tabular-nums;
}
.power-extreme small { font-size:10px; letter-spacing:.10em; font-weight:800; }
.power-extreme strong { font-size:14px; }
.power-extreme-max { border-color:rgba(93,199,255,.28); }
.power-extreme-max small,.power-extreme-max strong { color:#7bd4ff; }
.power-extreme-min { border-color:rgba(255,179,93,.28); }
.power-extreme-min small,.power-extreme-min strong { color:#ffc078; }
.energy-extreme-line { stroke-width:1.2; stroke-dasharray:7 6; }
.energy-max-line { stroke:rgba(93,199,255,.60); }
.energy-min-line { stroke:rgba(255,179,93,.60); }
.energy-extreme-label { font-size:10px; font-weight:800; letter-spacing:.04em; paint-order:stroke; stroke:#031321; stroke-width:3px; stroke-linejoin:round; }
.energy-max-label { fill:#7bd4ff; }
.energy-min-label { fill:#ffc078; }
.legend-max { background:repeating-linear-gradient(90deg,#7bd4ff 0 5px,transparent 5px 8px); }
.legend-min { background:repeating-linear-gradient(90deg,#ffc078 0 5px,transparent 5px 8px); }
@media (max-width:900px) {
  .history-controls-stack { align-items:flex-start; width:100%; }
  .power-chart-title-row { flex-direction:column; }
  .power-chart-periods { justify-content:flex-start; }
  .power-chart-meta { align-items:flex-start; flex-direction:column; }
  .power-chart-extremes { justify-content:flex-start; }
}
@media (max-width:520px) {
  .power-chart-periods { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }
  .period-button.compact { width:100%; }
  .power-chart-extremes { display:grid; grid-template-columns:1fr 1fr; width:100%; }
  .power-extreme { min-width:0; }
}


/* v1.13.10 – Verlauf direkt unter Live, kompakte Historien-Kacheln, Zeitachse + Mouseover */
.energy-power-overview-panel { margin-top:18px; }
.energy-power-overview-head { margin-bottom:12px; }
.energy-history-summary-mini {
  gap:10px;
  margin-top:4px;
}
.energy-history-summary-mini article {
  min-height:78px;
  padding:11px 14px;
  border-radius:15px;
}
.energy-history-summary-mini span { font-size:12px; }
.energy-history-summary-mini strong {
  font-size:clamp(20px,1.7vw,28px);
  margin-top:6px;
}
.energy-history-summary-mini small {
  font-size:11px;
  margin-top:5px;
  line-height:1.25;
}
.energy-history-summary-mini article[hidden] { display:none !important; }
.energy-power-chart-wrap-primary { margin-top:12px; }
.energy-power-chart { position:relative; }
.energy-power-chart svg { height:330px; }
.energy-time-grid-line { stroke:rgba(110,161,196,.10); stroke-width:1; stroke-dasharray:3 7; }
.energy-time-axis-label { font-size:10px; }
.energy-axis-caption { fill:#6f8da3; font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.energy-point-hit { fill:transparent; stroke:transparent; pointer-events:all; cursor:crosshair; }
.energy-point-hit:hover { fill:rgba(255,255,255,.18); stroke:rgba(255,255,255,.55); stroke-width:1.2; }
.power-chart-tooltip {
  position:absolute;
  z-index:8;
  width:max-content;
  max-width:260px;
  padding:9px 11px;
  border-radius:10px;
  border:1px solid rgba(102,193,246,.34);
  background:rgba(2,16,28,.96);
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  pointer-events:none;
  font-variant-numeric:tabular-nums;
}
.power-chart-tooltip strong { display:block; color:#e7f6ff; font-size:14px; }
.power-chart-tooltip span { display:block; color:#a7bfd1; font-size:11px; margin-top:3px; }
.power-chart-tooltip small { display:block; color:#8faabd; font-size:10px; margin-top:4px; }
.power-chart-help { margin-left:auto; font-size:11px; color:#7898ad; }
.energy-history-detail-panel { margin-top:18px; }
.energy-history-detail-panel .daily-table-wrap { margin-top:0; }
@media (max-width:900px) {
  .energy-history-summary-mini { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .power-chart-help { width:100%; margin-left:0; }
}
@media (max-width:560px) {
  .energy-history-summary-mini { grid-template-columns:1fr 1fr; gap:8px; }
  .energy-history-summary-mini article { min-height:70px; padding:10px 11px; }
  .energy-history-summary-mini strong { font-size:20px; }
  .energy-power-chart svg { height:300px; }
}


/* v1.13.11 – Energie-Finetuning: klare Seitenreihenfolge, Bilanz ausgelagert, einheitliche Flussanimation */
.energy-power-chart-panel { margin-top:18px; }
.energy-power-chart-panel .energy-history-chart-wrap { margin-top:0; }
.energy-summary-panel { margin-top:18px; }
.energy-summary-panel .energy-history-summary-mini { margin-top:0; }
#visualFlowSection { margin-top:18px; }
#chargeSessions { margin-top:18px; }
#chargeHistory { margin-top:18px; }
#chargeHistory .panel-head { margin-bottom:12px; }
.energy-page-topbar .top-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }

/* Die Ladeauswertung nutzt jetzt dieselbe ruhige Punkt-/Lauflichtsprache wie Haus · PV · Stromnetz. */
.flow-mockup-panel .energy-ribbon { opacity:.18; }
.flow-mockup-panel .energy-ribbon.flow-active { opacity:1; }
.flow-mockup-panel .energy-ribbon .ribbon-base,
.flow-mockup-panel .energy-ribbon .ribbon-accent {
  stroke-width:10 !important;
  filter:none !important;
  opacity:.42;
}
.flow-mockup-panel .ribbon-grid .ribbon-accent { display:none; }
.flow-mockup-panel .energy-ribbon .ribbon-motion,
.flow-mockup-panel .energy-ribbon .ribbon-dotted {
  stroke-width:8 !important;
  stroke-dasharray:1 54 !important;
  stroke-linecap:round !important;
  opacity:0;
  filter:drop-shadow(0 0 6px currentColor);
  animation:none !important;
}
.flow-mockup-panel .energy-ribbon.flow-active .ribbon-motion,
.flow-mockup-panel .energy-ribbon.flow-active .ribbon-dotted {
  opacity:1;
  animation:chargeEnergyDots 2.1s linear infinite !important;
}
.flow-mockup-panel .ribbon-pv .ribbon-base { stroke:rgba(83,236,148,.24) !important; }
.flow-mockup-panel .ribbon-pv .ribbon-motion { stroke:#6ff3a6 !important; }
.flow-mockup-panel .ribbon-grid .ribbon-base,
.flow-mockup-panel .ribbon-car .ribbon-base { stroke:rgba(91,203,255,.24) !important; }
.flow-mockup-panel .ribbon-grid .ribbon-motion,
.flow-mockup-panel .ribbon-car .ribbon-motion { stroke:#72d7ff !important; }
.flow-mockup-panel .ribbon-home .ribbon-base { stroke:rgba(91,203,255,.20) !important; }
.flow-mockup-panel .ribbon-home .ribbon-dotted { stroke:#72d7ff !important; }
.flow-mockup-panel .ribbon-export .ribbon-base { stroke:rgba(255,192,120,.18) !important; }
.flow-mockup-panel .ribbon-export .ribbon-dotted { stroke:#ffc078 !important; }
.flow-mockup-panel .ribbon-export .ribbon-arrow { stroke:#ffc078 !important; stroke-width:2.2 !important; }
@keyframes chargeEnergyDots { to { stroke-dashoffset:-110; } }

/* Eigene Bilanzseite: identische Breite und Abstände wie die Energieübersicht. */
body[data-page="energy-balance"] .annual-energy-panel { margin-top:18px; }
body[data-page="energy-balance"] .monthly-energy-panel { margin-top:18px; }

@media (prefers-reduced-motion: reduce) {
  .flow-mockup-panel .energy-ribbon.flow-active .ribbon-motion,
  .flow-mockup-panel .energy-ribbon.flow-active .ribbon-dotted { animation:none !important; }
}

/* v1.13.12 – PV-Ladeempfehlung aus ESP32 v1.5.9 serverseitig protokolliert */
.pv-charge-advice {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  margin-top:14px;
  padding:14px 16px;
  border:1px solid rgba(77,150,198,.22);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(6,27,43,.78),rgba(4,20,34,.64));
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.pv-charge-advice.is-recommended {
  border-color:rgba(86,228,142,.42);
  background:linear-gradient(135deg,rgba(10,61,44,.52),rgba(4,26,31,.72));
  box-shadow:inset 0 0 0 1px rgba(91,230,148,.05);
}
.pv-charge-advice.is-not-recommended { border-color:rgba(103,154,187,.22); }
.pv-charge-advice.is-waiting { opacity:.78; }
.pv-charge-advice-icon {
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  background:rgba(90,198,255,.09);border:1px solid rgba(93,199,255,.18);
}
.pv-charge-advice.is-recommended .pv-charge-advice-icon {
  background:rgba(86,228,142,.12);border-color:rgba(86,228,142,.28);
}
.pv-charge-advice-icon svg { width:25px;height:25px;fill:none;stroke:#7bcff7;stroke-width:2.5;stroke-linejoin:round; }
.pv-charge-advice.is-recommended .pv-charge-advice-icon svg { stroke:#76eda8; }
.pv-charge-advice-copy { min-width:0; }
.pv-charge-advice-copy > span { display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.09em;font-weight:800; }
.pv-charge-advice-copy > strong { display:block;margin-top:4px;font-size:clamp(18px,1.8vw,25px);line-height:1.15;color:#e7f6ff; }
.pv-charge-advice.is-recommended .pv-charge-advice-copy > strong { color:#91f2b7; }
.pv-charge-advice-copy > small { display:block;margin-top:5px;color:#96b0c2;line-height:1.4; }
.pv-charge-advice-values { display:grid;grid-template-columns:repeat(2,minmax(118px,1fr));gap:8px; }
.pv-charge-advice-values > div { padding:9px 11px;border-radius:12px;background:rgba(2,16,28,.48);border:1px solid rgba(85,147,187,.15); }
.pv-charge-advice-values span { display:block;color:var(--muted);font-size:10px; }
.pv-charge-advice-values strong { display:block;margin-top:4px;font-size:16px;font-variant-numeric:tabular-nums; }

.pv-charge-history-stats {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
  margin:0 0 12px;
}
.pv-charge-history-stats article {
  min-width:0;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(77,150,198,.16);
  background:rgba(3,18,30,.48);
}
.pv-charge-history-stats span { display:block;color:var(--muted);font-size:11px; }
.pv-charge-history-stats strong { display:block;margin-top:4px;font-size:18px;font-variant-numeric:tabular-nums;color:#dff3ff; }
.pv-charge-history-stats article:first-child strong,
.pv-charge-history-stats article:nth-child(2) strong { color:#8cefb4; }
.pv-charge-history-stats small { display:block;margin-top:4px;color:#7797ac;font-size:10px;line-height:1.3; }
.energy-pv-charge-band { fill:rgba(81,228,139,.78);filter:drop-shadow(0 0 4px rgba(81,228,139,.32));pointer-events:none; }
.legend-pv-charge { background:#5be391;box-shadow:0 0 5px rgba(91,227,145,.35); }
.power-chart-tooltip .pv-tooltip-good { color:#83eeb0; }

@media (max-width:900px) {
  .pv-charge-advice { grid-template-columns:auto minmax(0,1fr); }
  .pv-charge-advice-values { grid-column:1 / -1;grid-template-columns:1fr 1fr; }
  .pv-charge-history-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px) {
  .pv-charge-advice { grid-template-columns:1fr;padding:13px;gap:10px; }
  .pv-charge-advice-icon { width:38px;height:38px; }
  .pv-charge-advice-values { grid-column:auto; }
  .pv-charge-history-stats { grid-template-columns:1fr 1fr;gap:7px; }
  .pv-charge-history-stats article { padding:9px 10px; }
  .pv-charge-history-stats strong { font-size:16px; }
}
.pv-history-highlight {
  border-color:rgba(86,228,142,.24) !important;
  background:linear-gradient(180deg,rgba(12,58,43,.34),rgba(4,20,31,.54)) !important;
}
.pv-history-highlight strong { color:#8cefb4; }
.energy-history-detail-panel .daily-energy-table { min-width:860px; }

/* ============================================================
   v1.13.13 – Ladehistorie: echte Zeitachse, Messlücken, Tooltips
   ============================================================ */
.history-chart {
  min-height: 320px;
  padding: 12px 14px 8px;
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
}
.history-chart svg {
  width: 100%;
  height: auto;
  min-height: 280px;
  max-height: 340px;
  overflow: visible;
}
.history-grid-line {
  stroke: rgba(101, 150, 185, .19);
  stroke-width: 1;
}
.history-x-grid-line {
  stroke: rgba(101, 150, 185, .10);
  stroke-width: 1;
  stroke-dasharray: 3 6;
}
.history-y-label,
.history-x-label {
  fill: #9db5c8;
  font-size: 12px;
  font-weight: 650;
}
.history-x-label { font-size: 11px; }
.history-area { fill: rgba(66, 189, 255, .10); }
.history-line {
  fill: none;
  stroke: #6ec5ff;
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.history-point {
  fill: #8cf7ff;
  stroke: rgba(4, 21, 34, .95);
  stroke-width: 1.5;
  cursor: help;
}
.history-point:hover {
  r: 5px;
  filter: drop-shadow(0 0 5px rgba(115, 224, 255, .75));
}
.history-charge-band {
  fill: rgba(65, 232, 138, .08);
  stroke: rgba(65, 232, 138, .14);
  stroke-width: 1;
}
.legend-charge-session {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: rgba(65, 232, 138, .28);
  border: 1px solid rgba(65, 232, 138, .42);
  margin-right: 6px;
  vertical-align: -2px;
}
.legend-history-gap {
  display: inline-block;
  width: 18px;
  height: 0;
  border-top: 2px dashed rgba(147, 171, 192, .72);
  margin-right: 6px;
  vertical-align: 3px;
}
.car-source-ring.ring-uncertain {
  filter: saturate(.45);
}
.car-source-ring.ring-uncertain::after {
  opacity: .72;
}

@media (max-width: 760px) {
  .history-chart {
    min-height: 285px;
    padding: 8px 6px 4px;
    overflow-x: auto;
  }
  .history-chart svg {
    min-width: 700px;
    min-height: 250px;
  }
  .chart-legend {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ============================================================

/* ============================================================
   v1.16.0 – Apple System Redesign
   Ruhige macOS-artige Desktop-Oberfläche, iOS-artige Mobilnavigation,
   hohe Lesbarkeit in Hell/Dunkel und keine Glass-Overlays auf Content.
   ============================================================ */
:root {
  color-scheme: light dark;
  --ui-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif;
  --ui-blue: #0a84ff;
  --ui-green: #30d158;
  --ui-orange: #ff9f0a;
  --ui-red: #ff453a;
  --ui-bg: #0b0b0d;
  --ui-bg-elevated: #111113;
  --ui-sidebar: rgba(28,28,30,.78);
  --ui-material: rgba(30,30,32,.82);
  --ui-material-strong: rgba(36,36,38,.92);
  --ui-surface: #1c1c1e;
  --ui-surface-2: #242426;
  --ui-surface-3: #2c2c2e;
  --ui-text: #f5f5f7;
  --ui-secondary: #aeaeb2;
  --ui-tertiary: #7d7d82;
  --ui-separator: rgba(84,84,88,.72);
  --ui-separator-soft: rgba(84,84,88,.42);
  --ui-fill: rgba(120,120,128,.18);
  --ui-fill-hover: rgba(120,120,128,.26);
  --ui-shadow: 0 14px 40px rgba(0,0,0,.24);
  --ui-shadow-soft: 0 5px 18px rgba(0,0,0,.16);
  --ui-radius-window: 18px;
  --ui-radius-card: 14px;
  --ui-radius-control: 10px;
  --text: var(--ui-text);
  --muted: var(--ui-secondary);
  --bg: var(--ui-bg);
  --bg-2: var(--ui-bg-elevated);
  --panel: var(--ui-surface);
  --panel-2: var(--ui-surface-2);
  --line: var(--ui-separator-soft);
  --accent: var(--ui-blue);
  --accent-2: #64d2ff;
  --good: var(--ui-green);
  --warn: var(--ui-orange);
  --bad: var(--ui-red);
  --radius: var(--ui-radius-window);
  --radius-sm: var(--ui-radius-card);
  --font: var(--ui-font);
  --glow: none;
}

@media (prefers-color-scheme: light) {
  :root {
    --ui-blue: #007aff;
    --ui-green: #248a3d;
    --ui-orange: #a86200;
    --ui-red: #c9342c;
    --ui-bg: #f5f5f7;
    --ui-bg-elevated: #f2f2f7;
    --ui-sidebar: rgba(245,245,247,.78);
    --ui-material: rgba(248,248,250,.82);
    --ui-material-strong: rgba(252,252,253,.94);
    --ui-surface: #ffffff;
    --ui-surface-2: #f7f7fa;
    --ui-surface-3: #efeff4;
    --ui-text: #1d1d1f;
    --ui-secondary: #6e6e73;
    --ui-tertiary: #8e8e93;
    --ui-separator: rgba(60,60,67,.22);
    --ui-separator-soft: rgba(60,60,67,.13);
    --ui-fill: rgba(120,120,128,.10);
    --ui-fill-hover: rgba(120,120,128,.16);
    --ui-shadow: 0 16px 42px rgba(35,35,45,.10);
    --ui-shadow-soft: 0 4px 16px rgba(35,35,45,.07);
  }
}

* { -webkit-tap-highlight-color: transparent; }
html { background: var(--ui-bg) !important; }
body {
  font-family: var(--ui-font) !important;
  color: var(--ui-text) !important;
  background: var(--ui-bg) !important;
  letter-spacing: -.01em;
}
button, input, select, textarea { font-family: inherit; }
::selection { background: rgba(10,132,255,.26); }
:focus-visible { outline: 3px solid rgba(10,132,255,.34) !important; outline-offset: 2px; }

/* App-Rahmen */
.page-frame {
  width: min(1720px, calc(100vw - 28px)) !important;
  margin: 14px auto !important;
  grid-template-columns: 238px minmax(0,1fr) !important;
  gap: 14px !important;
}
.app-shell { gap: 14px !important; padding-bottom: 18px !important; }

/* Nur Navigationsschicht bekommt Material/Blur. Content bleibt ruhig. */
.glass,
.panel,
.visual-flow-panel,
.auth-card {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-separator-soft) !important;
  color: var(--ui-text) !important;
  border-radius: var(--ui-radius-window) !important;
  box-shadow: var(--ui-shadow-soft) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.topbar,
.section-nav,
.sidebar.desktop-sidebar,
.mobile-tabbar,
.mobile-more-sheet {
  background: var(--ui-material) !important;
  border: 1px solid var(--ui-separator-soft) !important;
  box-shadow: var(--ui-shadow-soft) !important;
  backdrop-filter: saturate(165%) blur(24px) !important;
  -webkit-backdrop-filter: saturate(165%) blur(24px) !important;
}

/* Typografie */
h1,h2,h3,strong,b { color: var(--ui-text); }
h1 { font-size: clamp(30px,3vw,44px) !important; line-height: 1.02 !important; letter-spacing: -.035em; }
h2 { font-size: clamp(22px,2vw,30px) !important; letter-spacing: -.025em; }
h3 { letter-spacing: -.015em; }
.eyebrow {
  color: var(--ui-blue) !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  letter-spacing: .15em !important;
  font-weight: 750 !important;
  margin-bottom: 6px !important;
}
.muted,
.panel-note,
.flow-subhead span,
.flow-card small,
.detail-copy,
.metric-label,
.energy-metrics small,
.chart-legend,
small { color: var(--ui-secondary); }

/* macOS-artige Sidebar */
.sidebar.desktop-sidebar {
  display: flex;
  position: sticky !important;
  top: 14px !important;
  min-height: calc(100vh - 28px) !important;
  padding: 12px 10px !important;
  align-items: stretch !important;
  gap: 10px !important;
  border-radius: 18px !important;
}
.sidebar-brand {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 7px 8px 13px !important;
}
.sidebar-brand-mark {
  width: 34px !important; height: 34px !important; flex: 0 0 34px !important;
  display: grid !important; place-items: center !important;
  border-radius: 9px !important;
  background: var(--ui-blue) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}
.sidebar-brand-text { display: flex !important; flex-direction: column !important; min-width: 0; }
.sidebar-brand-text strong { font-size: 13px !important; }
.sidebar-brand-text small { margin-top: 2px; color: var(--ui-secondary) !important; font-size: 10px !important; }
.sidebar.desktop-sidebar .sidebar-nav,
.sidebar.desktop-sidebar .sidebar-secondary { display: flex !important; flex-direction: column !important; gap: 3px !important; }
.sidebar.desktop-sidebar .sidebar-spacer { flex: 1; }
.sidebar.desktop-sidebar .nav-icon,
.sidebar.desktop-sidebar .sidebar-logout .nav-icon {
  width: 100% !important; height: 38px !important; min-width: 0 !important;
  display: flex !important; flex-direction: row !important; justify-content: flex-start !important; align-items: center !important;
  gap: 9px !important; padding: 0 10px !important;
  border: 0 !important; border-radius: 9px !important;
  background: transparent !important; color: var(--ui-secondary) !important;
  box-shadow: none !important;
}
.sidebar.desktop-sidebar .nav-icon:hover { background: var(--ui-fill) !important; color: var(--ui-text) !important; }
.sidebar.desktop-sidebar .nav-icon.active {
  background: rgba(10,132,255,.16) !important;
  color: var(--ui-blue) !important;
}
.sidebar.desktop-sidebar .nav-svg { width: 17px !important; height: 17px !important; flex: 0 0 17px !important; }
.sidebar.desktop-sidebar .nav-label { display: block !important; max-width: none !important; color: currentColor !important; font-size: 12px !important; font-weight: 590 !important; }
.sidebar.desktop-sidebar .sidebar-logout { width: 100% !important; }
.mobile-tabbar { display: none; }

/* Toolbar + lokale Bereichsnavigation */
.topbar {
  min-height: 74px !important;
  padding: 16px 18px !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}
.brand-block { gap: 11px !important; }
.brand-dot { width: 8px !important; height: 8px !important; margin-top: 8px !important; box-shadow: none !important; background: var(--ui-blue) !important; }
.top-actions { gap: 8px !important; }
.section-nav {
  padding: 4px !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  overflow-x: auto;
  scrollbar-width: none;
}
.section-nav::-webkit-scrollbar { display: none; }
.section-nav a {
  min-height: 32px !important;
  display: inline-flex !important; align-items: center !important;
  padding: 6px 11px !important;
  border-radius: 8px !important;
  color: var(--ui-secondary) !important;
  font-size: 11px !important; font-weight: 600 !important;
  white-space: nowrap;
}
.section-nav a:hover,
.section-nav a:focus-visible { color: var(--ui-text) !important; background: var(--ui-fill) !important; }

/* Controls */
.link-button,
.button.primary,
.dialog-primary,
.control-button:not(.secondary-control),
.icon-button.primary {
  min-height: 36px !important;
  padding: 8px 13px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: var(--ui-blue) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  box-shadow: none !important;
}
.small-button,
.icon-button,
.secondary-control,
.dialog-secondary,
.button:not(.primary) {
  min-height: 34px !important;
  padding: 7px 12px !important;
  border: 1px solid var(--ui-separator-soft) !important;
  border-radius: 9px !important;
  background: var(--ui-fill) !important;
  color: var(--ui-text) !important;
  box-shadow: none !important;
}
button:hover,.link-button:hover,.small-button:hover,.control-button:hover { filter: none !important; }
button:hover,.small-button:hover,.secondary-control:hover { background: var(--ui-fill-hover) !important; }
input, select, textarea {
  color: var(--ui-text) !important;
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-separator) !important;
  border-radius: 9px !important;
  min-height: 38px;
}
input::placeholder, textarea::placeholder { color: var(--ui-tertiary); }

.status-badge,.lock-badge {
  min-height: 28px !important;
  padding: 5px 9px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--ui-fill) !important;
  color: var(--ui-secondary) !important;
  font-size: 10px !important;
  box-shadow: none !important;
}
.status-badge.error,.lock-badge.locked { color: var(--ui-red) !important; background: rgba(255,69,58,.12) !important; }
.status-badge.waiting { color: var(--ui-secondary) !important; }
.lock-badge.unlocked { color: var(--ui-green) !important; background: rgba(48,209,88,.12) !important; }

/* Inhaltskarten */
.panel,.visual-flow-panel { padding: 18px !important; }
.panel-head { margin-bottom: 14px !important; }
:is(
  .inline-mini-grid > div,
  .summary-metric-grid > div,
  .detail-inline-grid > div,
  .availability-item,
  .connected-card,
  .remote-subpanel,
  .remote-current-state > div,
  .hybrid-summary-grid > article,
  .hybrid-score-grid > div,
  .hybrid-stat,
  .hybrid-behaviour-row,
  .energy-metrics > div,
  .flow-summary-grid article,
  .charge-balance-grid > div,
  .charge-session-row,
  .state-row,
  .command-entry,
  .settings-summary-card,
  .settings-action-card,
  .settings-kpi-grid > div,
  .settings-form-grid,
  .energy-history-summary > article,
  .history-kpi-grid > article,
  .history-session-card,
  .flow-tech-grid > div,
  .monthly-summary-grid > article,
  .annual-summary-grid > article
) {
  background: var(--ui-surface-2) !important;
  border: 1px solid var(--ui-separator-soft) !important;
  color: var(--ui-text) !important;
  box-shadow: none !important;
}
:is(
  .inline-mini-grid,
  .summary-metric-grid,
  .detail-inline-grid,
  .connected-overview-grid,
  .hybrid-summary-grid,
  .hybrid-score-grid,
  .energy-metrics,
  .flow-summary-grid,
  .charge-balance-grid,
  .settings-overview-grid,
  .settings-kpi-grid,
  .history-kpi-grid
) { gap: 10px !important; }
:is(.inline-mini-grid span,.summary-metric-grid span,.energy-metrics span,.state-row span,.charge-session-row span,.hybrid-stat span,.connected-card span) { color: var(--ui-secondary) !important; }
:is(.inline-mini-grid strong,.summary-metric-grid strong,.energy-metrics strong,.hybrid-stat strong,.connected-card strong) { color: var(--ui-text) !important; }
.cost-highlight { background: rgba(48,209,88,.09) !important; border-color: rgba(48,209,88,.25) !important; }
.cost-highlight strong { color: var(--ui-green) !important; }

/* Fahrzeug-Hero – Light und Dark bewusst unterschiedlich */
.hero {
  min-height: 360px !important;
  border-radius: var(--ui-radius-window) !important;
  overflow: hidden !important;
  background: #07121d !important;
}
.hero::before { display: none !important; }
.hero-image { opacity: 1 !important; filter: none !important; }
.hero-vignette {
  background: linear-gradient(180deg, rgba(0,0,0,.03) 30%, rgba(0,0,0,.60) 100%) !important;
}
.hero-copy { color: #fff !important; padding: 22px !important; }
.hero-copy strong { color: #fff !important; font-size: clamp(26px,2.4vw,38px) !important; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.hero-copy span { color: rgba(255,255,255,.76) !important; }
.hero-status-floating,
.hero-battery-box {
  color: #fff !important;
  background: rgba(18,25,34,.80) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.22) !important;
  backdrop-filter: saturate(140%) blur(18px) !important;
  -webkit-backdrop-filter: saturate(140%) blur(18px) !important;
}
.hero-status-floating strong,.hero-battery-box strong { color: #fff !important; }
.hero-status-floating small,.hero-battery-box span { color: rgba(255,255,255,.72) !important; }

@media (prefers-color-scheme: light) {
  .hero { background: #e8edf2 !important; }
  .hero-image { filter: brightness(1.18) saturate(.72) contrast(.92) !important; }
  .hero-vignette {
    background:
      linear-gradient(180deg, rgba(255,255,255,.02) 42%, rgba(247,249,252,.93) 100%),
      linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.16)) !important;
  }
  .hero-copy { color: var(--ui-text) !important; }
  .hero-copy strong { color: var(--ui-text) !important; text-shadow: 0 1px 0 rgba(255,255,255,.85); }
  .hero-copy span { color: var(--ui-secondary) !important; }
  .hero-status-floating,
  .hero-battery-box {
    color: var(--ui-text) !important;
    background: rgba(255,255,255,.88) !important;
    border-color: rgba(60,60,67,.16) !important;
    box-shadow: 0 12px 32px rgba(35,35,45,.12) !important;
  }
  .hero-status-floating strong,.hero-battery-box strong { color: var(--ui-text) !important; }
  .hero-status-floating small,.hero-battery-box span { color: var(--ui-secondary) !important; }
}

/* Diagnose: Standard-macOS-Tabelle statt grauer Pillen */
.diagnostic-panel { padding: 16px 18px !important; }
.diagnostic-table {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  overflow: hidden;
  border: 1px solid var(--ui-separator-soft);
  border-radius: 12px;
  background: var(--ui-surface-2);
}
.diagnostic-table th,
.diagnostic-table td {
  padding: 11px 13px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ui-separator-soft) !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 12px !important;
}
.diagnostic-table tr:last-child th,.diagnostic-table tr:last-child td { border-bottom: 0 !important; }
.diagnostic-table th { width: 60%; color: var(--ui-secondary) !important; font-weight: 550 !important; }
.diagnostic-table td { color: var(--ui-text) !important; font-weight: 650 !important; }
.raw-json-box { background: #111820 !important; border-color: rgba(255,255,255,.10) !important; }
.raw-json-box pre { color: #c9d8e6 !important; }
.connected-fold { background: var(--ui-surface-2) !important; border-color: var(--ui-separator-soft) !important; }
.connected-fold summary { color: var(--ui-text) !important; }

/* Remote/Steuerung */
.remote-security-bar {
  background: var(--ui-surface-2) !important;
  border: 1px solid var(--ui-separator-soft) !important;
  color: var(--ui-text) !important;
  box-shadow: none !important;
}
.remote-security-bar p { color: var(--ui-secondary) !important; }
.remote-current-state > div { border-radius: 12px !important; }

/* Energie: helle Content-Flächen, Charts bleiben lesbar */
.energy-live-panel,
.energy-power-overview-panel,
.energy-history-panel,
.charge-balance-panel,
.apple-history-panel { background: var(--ui-surface) !important; }
.energy-live-diagram,
.energy-power-chart-wrap-primary,
.energy-history-chart-wrap,
.history-chart-shell,
.daily-table-wrap,
.flow-mockup-panel,
.flow-tech-details,
.history-session-section,
.history-detail-fold {
  background: var(--ui-surface-2) !important;
  border: 1px solid var(--ui-separator-soft) !important;
  box-shadow: none !important;
}
.energy-node { background: var(--ui-surface) !important; border-color: var(--ui-separator-soft) !important; color: var(--ui-text) !important; }
.energy-node span,.energy-node small { color: var(--ui-secondary) !important; }
.daily-energy-table th {
  color: var(--ui-secondary) !important;
  background: var(--ui-surface-3) !important;
  border-color: var(--ui-separator-soft) !important;
}
.daily-energy-table td { color: var(--ui-text) !important; border-color: var(--ui-separator-soft) !important; }
.history-sample-table th { color: var(--ui-secondary) !important; background: var(--ui-surface-3) !important; }
.history-sample-table td { color: var(--ui-text) !important; border-color: var(--ui-separator-soft) !important; }
.history-chart text,.history-axis-label,.history-x-label { fill: var(--ui-secondary) !important; }
.history-grid-line,.history-x-grid-line { stroke: var(--ui-separator-soft) !important; }
.history-line { stroke: var(--ui-blue) !important; }
.history-point { fill: var(--ui-blue) !important; stroke: var(--ui-surface-2) !important; }
.history-current-label { fill: var(--ui-text) !important; }
.chart-legend,.history-chart-legend { color: var(--ui-secondary) !important; }

/* Hybrid Trainer */
.hybrid-tabs {
  background: var(--ui-fill) !important;
  border: 1px solid var(--ui-separator-soft) !important;
  border-radius: 10px !important;
  padding: 3px !important;
}
.hybrid-tabs a { color: var(--ui-secondary) !important; padding: 7px 12px !important; border-radius: 7px !important; font-size: 11px !important; }
.hybrid-tabs a.active,.hybrid-tabs a:hover { color: var(--ui-text) !important; background: var(--ui-surface) !important; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.hybrid-trip-card { background: var(--ui-surface) !important; border-color: var(--ui-separator-soft) !important; }
.hybrid-trip-summary:hover { background: var(--ui-fill) !important; }
.hybrid-trip-title span { color: var(--ui-blue) !important; }
.hybrid-trip-body { border-color: var(--ui-separator-soft) !important; }
.hybrid-map-wrap { border-color: var(--ui-separator-soft) !important; background: var(--ui-surface-2) !important; }
.hybrid-map-meta { background: var(--ui-surface-2) !important; }
@media (prefers-color-scheme: dark) {
  .leaflet-tile { filter: invert(.88) hue-rotate(180deg) saturate(.72) brightness(.78) contrast(.88); }
  .leaflet-container { background: #16181c !important; }
}

/* Settings */
.settings-section { background: var(--ui-surface) !important; }
.settings-summary-card,.settings-action-card { border-radius: 13px !important; }
.settings-field span { color: var(--ui-text) !important; }
.settings-field small { color: var(--ui-secondary) !important; }

/* Desktop feinjustieren */
@media (min-width: 821px) {
  .mobile-tabbar { display: none !important; }
  .hero-grid,.vehicle-centric-grid { gap: 14px !important; }
  .dashboard-grid { gap: 14px !important; }
  .remote-unified-grid { gap: 12px !important; }
  .hybrid-trip-list { gap: 10px !important; }
  .hybrid-trip-summary { padding: 14px 16px !important; }
}

/* ============================================================
   iOS-artige Mobilansicht: KEIN horizontales Menü oben.
   Hauptnavigation ausschließlich unten: Fahrzeug / Energie / Hybrid / Mehr.
   ============================================================ */
@media (max-width: 820px) {
  html,body { width: 100%; overflow-x: hidden; }
  body { background: var(--ui-bg) !important; padding-bottom: 0 !important; }
  .page-frame { display: block !important; width: 100% !important; margin: 0 !important; }
  .sidebar.desktop-sidebar { display: none !important; }
  .app-shell {
    width: 100% !important;
    padding: 8px 10px calc(104px + env(safe-area-inset-bottom)) !important;
    gap: 10px !important;
  }

  .topbar {
    position: relative !important;
    top: auto !important;
    margin: 0 !important;
    padding: 14px 12px 12px !important;
    min-height: 0 !important;
    border-radius: 16px !important;
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-separator-soft) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
  }
  .topbar .brand-dot { display: none !important; }
  .topbar h1 { font-size: 29px !important; line-height: 1.04 !important; letter-spacing: -.035em; }
  .topbar .eyebrow { font-size: 9px !important; margin-bottom: 5px !important; }
  .topbar .muted { font-size: 12px !important; line-height: 1.35 !important; }
  .top-actions { width: 100% !important; margin-top: 9px !important; gap: 7px !important; }
  .top-actions > * { flex: 0 0 auto !important; }

  /* Das bisherige überbreite Menü oben verschwindet komplett. */
  .section-nav { display: none !important; }

  .panel,.visual-flow-panel,.auth-card { padding: 14px 12px !important; border-radius: 17px !important; box-shadow: none !important; }
  .panel-head { gap: 9px !important; margin-bottom: 12px !important; }
  .panel-head h2 { font-size: 22px !important; }
  .panel-head .link-button,.panel-head .small-button,.panel-head .button { flex: 0 0 auto !important; white-space: nowrap; }

  /* Fahrzeughero wird auf Mobil nicht mehr mit schwebenden Karten zugedeckt. */
  .hero-grid,.vehicle-centric-grid,.dashboard-grid,.remote-unified-grid,.connected-data-columns { grid-template-columns: 1fr !important; gap: 10px !important; }
  .hero { display: block !important; min-height: 0 !important; border-radius: 18px !important; }
  .hero-image { display: block !important; width: 100% !important; height: 218px !important; object-fit: cover !important; object-position: center !important; }
  .hero-vignette { position: absolute !important; inset: 0 0 auto !important; height: 218px !important; pointer-events: none; }
  .hero-status-floating { display: none !important; }
  .hero-copy {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 13px !important;
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
  }
  .hero-copy strong { color: var(--ui-text) !important; text-shadow: none !important; font-size: 23px !important; }
  .hero-copy span { color: var(--ui-secondary) !important; margin-top: 4px !important; }
  .hero-battery-box {
    width: 100% !important; min-width: 0 !important;
    padding: 12px !important; border-radius: 14px !important;
    color: var(--ui-text) !important;
    background: var(--ui-surface-2) !important;
    border: 1px solid var(--ui-separator-soft) !important;
    box-shadow: none !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  .hero-battery-box strong { color: var(--ui-text) !important; }
  .hero-battery-box span { color: var(--ui-secondary) !important; }

  .summary-metric-grid,.inline-mini-grid,.climate-temp,.energy-metrics,.charge-balance-grid,.history-kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px !important; }
  .telemetry-strip { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px !important; padding: 12px !important; }
  .telemetry-strip .wide-sub { grid-column: span 2 !important; }
  .connected-overview-grid,.hybrid-summary-grid,.hybrid-score-grid,.hybrid-detail-grid,.settings-overview-grid,.settings-kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px !important; }

  .remote-security-bar { padding: 12px !important; border-radius: 14px !important; }
  .remote-security-actions { width: 100% !important; }
  .remote-security-actions .control-button { min-width: 0 !important; flex: 1 1 145px !important; }
  .remote-action-row { grid-template-columns: 1fr !important; }

  .diagnostic-panel { padding: 12px !important; }
  .diagnostic-table th,.diagnostic-table td { padding: 10px !important; font-size: 11px !important; }
  .diagnostic-table th { width: 58% !important; }

  .hybrid-toolbar { align-items: stretch !important; }
  .hybrid-tabs { width: 100% !important; display: grid !important; grid-template-columns: repeat(2,1fr) !important; }
  .hybrid-tabs a { justify-content: center; text-align: center; }
  .hybrid-trip-summary { grid-template-columns: 1fr !important; gap: 10px !important; padding: 13px !important; }
  .hybrid-trip-compact-stats { grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 6px !important; }
  .hybrid-trip-compact-stats .hybrid-stat { padding: 8px !important; }
  .hybrid-trip-compact-stats .hybrid-stat strong { font-size: 15px !important; }
  .hybrid-route-map,.hybrid-overview-map { height: 260px !important; }
  .hybrid-map-meta { flex-direction: column !important; align-items: stretch !important; }
  .hybrid-map-links { justify-content: stretch !important; }
  .hybrid-map-links .inline-link-button { flex: 1 1 auto !important; text-align: center; }

  .energy-live-diagram { grid-template-columns: 1fr !important; }
  .energy-power-chart-panel,.history-chart-shell { overflow: hidden !important; }
  .history-chart { min-height: 300px !important; padding: 7px 4px !important; overflow-x: auto !important; overflow-y: hidden !important; }
  .history-chart svg { min-width: 720px !important; height: 292px !important; }
  .history-chart-title-row { flex-direction: column !important; align-items: flex-start !important; gap: 5px !important; }
  .history-session-timeline { display: flex !important; overflow-x: auto !important; gap: 8px !important; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .history-session-timeline::-webkit-scrollbar { display:none; }
  .history-session-card { flex: 0 0 min(86vw,340px) !important; scroll-snap-align: start; }
  .charge-session-row { grid-template-columns: 1fr 1fr !important; gap: 6px 10px !important; }
  .daily-table-scroll,.history-sample-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

  footer { padding: 4px 3px !important; font-size: 10px !important; color: var(--ui-secondary) !important; }

  /* Echte iOS-Tabbar: vier Einträge, "Mehr" öffnet Systemfunktionen. */
  .mobile-tabbar {
    position: fixed !important;
    z-index: 3000 !important;
    left: 10px !important; right: 10px !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    height: 66px !important;
    display: grid !important;
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    gap: 2px !important;
    padding: 5px !important;
    border-radius: 22px !important;
    background: var(--ui-material-strong) !important;
    box-shadow: 0 12px 38px rgba(0,0,0,.22) !important;
  }
  .mobile-tab,
  .mobile-more > summary {
    min-width: 0 !important;
    height: 56px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 4px 2px !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: transparent !important;
    color: var(--ui-secondary) !important;
    list-style: none !important;
    cursor: pointer;
  }
  .mobile-more > summary::-webkit-details-marker { display:none; }
  .mobile-tab.active,
  .mobile-more.active > summary,
  .mobile-more[open] > summary { color: var(--ui-blue) !important; background: rgba(10,132,255,.11) !important; }
  .mobile-tab .nav-svg,
  .mobile-more .nav-svg { width: 21px !important; height: 21px !important; flex: 0 0 21px !important; }
  .mobile-tab .nav-label,
  .mobile-more .nav-label { display:block !important; max-width: 70px !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:currentColor !important; font-size:10px !important; font-weight:600 !important; line-height:1.05; }
  .mobile-more { position: static !important; min-width:0; }
  .mobile-more-sheet {
    position: absolute !important;
    right: 0 !important;
    bottom: 76px !important;
    width: min(310px, calc(100vw - 20px)) !important;
    display: grid !important;
    gap: 4px !important;
    padding: 7px !important;
    border-radius: 18px !important;
    background: var(--ui-material-strong) !important;
  }
  .mobile-more:not([open]) .mobile-more-sheet { display:none !important; }
  .mobile-more-sheet a,
  .mobile-more-sheet button {
    width:100% !important;
    min-height:44px !important;
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    padding:0 12px !important;
    border:0 !important;
    border-radius:11px !important;
    background:transparent !important;
    color:var(--ui-text) !important;
    text-align:left !important;
    font-size:14px !important;
    font-weight:550 !important;
    box-shadow:none !important;
  }
  .mobile-more-sheet a:hover,.mobile-more-sheet button:hover { background:var(--ui-fill) !important; }
  .mobile-more-sheet .nav-svg { width:18px !important; height:18px !important; color:var(--ui-secondary) !important; }
  .mobile-more-sheet form { margin:0 !important; }
}

@media (max-width: 430px) {
  .app-shell { padding-inline: 8px !important; }
  .topbar h1 { font-size: 27px !important; }
  .summary-metric-grid,.inline-mini-grid,.climate-temp,.history-kpi-grid { grid-template-columns: 1fr 1fr !important; }
  .connected-overview-grid,.hybrid-summary-grid,.settings-overview-grid,.settings-kpi-grid { grid-template-columns: 1fr !important; }
  .hybrid-trip-compact-stats { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .mobile-tabbar { left:8px !important; right:8px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* v1.16.0 – Strukturregeln der erweiterten Ladehistorie */
.apple-history-panel { overflow: visible !important; }
.history-panel-head { align-items: flex-end !important; }
.history-intro { margin-top: 6px; max-width: 820px; line-height: 1.45; font-size: 12px; }
.history-range-control { display:flex; flex-direction:column; gap:5px; flex:0 0 auto; }
.history-range-control > span { padding-left:3px; color:var(--ui-secondary); font-size:10px; font-weight:650; }
.history-range-control select { min-width:145px; padding:7px 30px 7px 10px; font-weight:650; }
.history-kpi-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px !important; margin:14px 0 12px; }
.history-kpi-grid article { min-width:0; padding:11px 12px; border-radius:12px; }
.history-kpi-grid span,.history-kpi-grid small { display:block; color:var(--ui-secondary); }
.history-kpi-grid span { font-size:10px; font-weight:650; }
.history-kpi-grid strong { display:block; margin:4px 0 2px; font-size:clamp(19px,1.6vw,26px); letter-spacing:-.03em; white-space:nowrap; }
.history-kpi-grid small { font-size:9.5px; line-height:1.25; }
.history-positive { color:var(--ui-green) !important; }
.history-chart-shell { padding:12px 12px 8px !important; border-radius:14px !important; }
.history-chart-title-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 2px 8px; }
.history-chart-title-row > div { min-width:0; }
.history-chart-title-row strong { display:block; font-size:13px; }
.history-chart-title-row span:not(.history-quality-badge) { display:block; margin-top:3px; color:var(--ui-secondary); font-size:10px; }
.history-quality-badge { flex:0 0 auto; min-height:26px !important; padding:4px 8px !important; font-size:9px !important; font-weight:700; }
.history-quality-badge.quality-good { color:var(--ui-green) !important; background:rgba(48,209,88,.10) !important; }
.history-quality-badge.quality-warn { color:var(--ui-orange) !important; background:rgba(255,159,10,.10) !important; }
.history-chart { min-height:340px !important; padding:2px 0 0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.history-chart svg { width:100%; height:340px !important; overflow:visible; color:var(--ui-blue); }
.history-grid-line { stroke:var(--ui-separator-soft) !important; }
.history-x-grid-line { stroke:var(--ui-separator-soft) !important; stroke-dasharray:2 7; }
.history-y-label,.history-axis-label,.history-x-label { fill:var(--ui-secondary) !important; font-weight:560; }
.history-area { fill:url(#historyAreaGradient); color:var(--ui-blue); opacity:.12; }
.history-line { fill:none; stroke:var(--ui-blue) !important; stroke-width:2.5 !important; vector-effect:non-scaling-stroke; filter:none !important; }
.history-step-line { stroke-linejoin:round; stroke-linecap:round; }
.history-point { fill:var(--ui-blue) !important; stroke:var(--ui-surface-2) !important; stroke-width:1.5; cursor:help; vector-effect:non-scaling-stroke; }
.history-current-ring { fill:rgba(10,132,255,.16) !important; stroke:var(--ui-blue) !important; stroke-width:2.2; vector-effect:non-scaling-stroke; filter:none !important; }
.history-current-label { fill:var(--ui-text) !important; font-size:12px; font-weight:780; }
.history-charge-band { fill:rgba(48,209,88,.09) !important; stroke:rgba(48,209,88,.25) !important; stroke-width:1; vector-effect:non-scaling-stroke; }
.history-session-label { fill:var(--ui-green) !important; font-size:9px; font-weight:800; letter-spacing:.06em; }
.history-gap-marker { stroke:rgba(255,159,10,.55) !important; stroke-width:1.2; stroke-dasharray:5 7; vector-effect:non-scaling-stroke; }
.history-gap-label { fill:var(--ui-orange) !important; font-size:9px; font-weight:650; }
.history-chart-legend { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:4px 3px 0; font-size:10px; color:var(--ui-secondary) !important; }
.history-chart-legend > span { display:inline-flex; align-items:center; }
.history-empty-state { margin:auto; }
.history-session-section { margin-top:12px; padding:12px !important; border-radius:14px !important; }
.history-section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:9px; }
.history-section-heading .eyebrow { margin-bottom:3px !important; font-size:8px !important; }
.history-section-heading h3 { font-size:14px; }
.history-section-heading > small { color:var(--ui-secondary); font-size:9.5px; }
.history-session-timeline { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.history-session-card { min-width:0; padding:11px; border-radius:12px !important; }
.history-session-card-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.history-session-card time { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ui-secondary); font-size:9px; }
.history-session-state { flex:0 0 auto; padding:3px 6px; border-radius:999px; background:rgba(48,209,88,.10); color:var(--ui-green); font-size:7.5px; font-weight:800; letter-spacing:.04em; }
.history-session-state.is-active { background:rgba(10,132,255,.12); color:var(--ui-blue); }
.history-session-main { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-top:8px; }
.history-session-main strong { font-size:19px; letter-spacing:-.025em; }
.history-session-main span { color:var(--ui-secondary); font-size:10px; }
.history-session-facts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:5px; margin-top:9px; }
.history-session-facts span { min-width:0; padding:6px 7px; border-radius:9px; background:var(--ui-fill) !important; }
.history-session-facts small,.history-session-facts b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.history-session-facts small { color:var(--ui-tertiary); font-size:7.5px; }
.history-session-facts b { margin-top:3px; font-size:10px; }
.history-detail-fold { margin-top:10px; border-radius:13px !important; overflow:hidden; }
.history-detail-fold summary { cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:44px; padding:9px 12px; list-style:none; }
.history-detail-fold summary::-webkit-details-marker { display:none; }
.history-detail-fold summary span { font-weight:650; }
.history-detail-fold summary small { color:var(--ui-secondary); }
.history-detail-fold summary::after { content:"›"; font-size:20px; color:var(--ui-secondary); transform:rotate(90deg); transition:transform .16s ease; }
.history-detail-fold[open] summary::after { transform:rotate(-90deg); }
.history-sample-table-wrap { overflow-x:auto; border-top:1px solid var(--ui-separator-soft); }
.history-sample-table { width:100%; border-collapse:collapse; min-width:650px; }
.history-sample-table th,.history-sample-table td { padding:9px 11px; text-align:left; border-bottom:1px solid var(--ui-separator-soft); }
.history-sample-table th { color:var(--ui-secondary) !important; font-size:9px; font-weight:700; }
.history-sample-table td { font-size:10px; color:var(--ui-text) !important; }
.history-sample-table tbody tr:last-child td { border-bottom:0; }
.history-sample-table tr.history-row-gap td { background:rgba(255,159,10,.07) !important; }

@media (max-width:820px) {
  .history-panel-head { align-items:stretch !important; }
  .history-range-control { width:100% !important; }
  .history-range-control select { width:100% !important; min-width:0 !important; }
  .history-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .history-chart { min-height:300px !important; overflow-x:auto !important; overflow-y:hidden !important; justify-content:flex-start !important; }
  .history-chart svg { min-width:720px !important; height:292px !important; }
  .history-chart-legend { flex-wrap:wrap !important; gap:6px 10px !important; }
  .history-chart-legend #historyInfo { flex-basis:100% !important; line-height:1.35; }
  .history-section-heading { flex-direction:column !important; align-items:flex-start !important; gap:2px !important; }
  .history-section-heading > small { display:none !important; }
  .history-session-timeline { display:flex !important; overflow-x:auto !important; gap:8px !important; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .history-session-card { flex:0 0 min(86vw,340px) !important; scroll-snap-align:start; }
  .history-session-facts { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .history-detail-fold summary small { display:none !important; }
}

/* ============================================================
   v1.17.0 – Readability pass + echte Light/Dark-Flächen
   Keine grauen Legacy-Kacheln mehr: Inhalte verwenden semantische
   Oberflächen, kräftige Symbole und klaren Textkontrast.
   ============================================================ */
:root {
  --ui-tile: #1c1c1e;
  --ui-tile-subtle: #242426;
  --ui-tile-muted: #2c2c2e;
  --ui-icon-bg: rgba(10,132,255,.16);
  --ui-icon-fg: #64d2ff;
  --ui-accent-panel: #102a42;
  --ui-accent-panel-text: #f5f9ff;
}
@media (prefers-color-scheme: light) {
  :root {
    --ui-tile: #ffffff;
    --ui-tile-subtle: #f5f5f7;
    --ui-tile-muted: #ededf2;
    --ui-icon-bg: #e7f2ff;
    --ui-icon-fg: #0066cc;
    --ui-accent-panel: #e9f4ff;
    --ui-accent-panel-text: #14263a;
  }
}

/* Explizite Legacy-Overrides statt halbtransparenter dunkelgrauer Karten. */
.inline-mini-grid > div,
.summary-metric-grid > div,
.detail-inline-grid > div,
.climate-temp > div,
.climate-field,
.climate-toggle,
.remote-subpanel,
.remote-current-state > div,
.connected-card,
.energy-live-facts article,
.energy-history-summary > article,
.energy-finance-group,
.energy-finance-metrics > div,
.flow-card,
.detail-card,
.flow-tech-grid article,
.flow-export-compact,
.charge-session-row,
.state-row,
.command-entry,
.graphic-light-status > div,
.hybrid-summary-grid > article,
.hybrid-score-grid > div,
.hybrid-stat,
.hybrid-behaviour-row,
.settings-summary-card,
.settings-action-card,
.settings-kpi-grid > div,
.history-kpi-grid > article,
.history-session-card {
  background: var(--ui-tile) !important;
  color: var(--ui-text) !important;
  border: 1px solid var(--ui-separator-soft) !important;
  box-shadow: none !important;
}

/* Sekundärtexte niemals Grau-auf-Grau verschwinden lassen. */
.inline-mini-grid span,
.inline-mini-grid small,
.summary-metric-grid span,
.summary-metric-grid small,
.detail-inline-grid span,
.detail-inline-grid small,
.climate-temp span,
.climate-field > span,
.climate-field small,
.remote-current-state span,
.connected-card span,
.connected-card small,
.energy-live-facts span,
.energy-live-facts small,
.energy-history-summary span,
.energy-history-summary small,
.flow-card span,
.flow-card small,
.flow-card-label,
.target-card-head .mini-caption,
.target-meta-right span,
.target-meta-right small,
.detail-card span,
.detail-card small,
.flow-tech-grid span,
.graphic-light-status span {
  color: var(--ui-secondary) !important;
}
.inline-mini-grid strong,
.summary-metric-grid strong,
.detail-inline-grid strong,
.climate-temp strong,
.climate-field strong,
.remote-current-state strong,
.connected-card strong,
.energy-live-facts strong,
.energy-history-summary strong,
.flow-card strong,
.target-card-title,
.detail-card strong,
.flow-tech-grid strong,
.graphic-light-status strong {
  color: var(--ui-text) !important;
}

/* Klima/Remote: Inputs wie native Form Controls, keine grauen Betonflächen. */
.climate-settings-grid { gap: 10px !important; }
.climate-field,
.climate-toggle {
  border-radius: 12px !important;
  padding: 12px 13px !important;
}
.climate-field input,
.climate-field select {
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
}
#climateControlHint { display: none !important; }
.remote-subpanel > .panel-note { display: none !important; }
.remote-security-bar {
  background: var(--ui-tile-subtle) !important;
  border-color: var(--ui-separator-soft) !important;
}
.remote-security-bar p { color: var(--ui-secondary) !important; }

/* Letzte Fahrzeugaktionen immer als volle Zeile. */
#commandAudit,
.dashboard-grid > .log-panel {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}
.command-entry {
  grid-template-columns: 14px minmax(0,1fr) auto !important;
  min-height: 48px;
}

/* Fahrzeug-Draufsicht: heller technischer Hintergrund in Light,
   kontrastreicher dunkler Hintergrund in Dark. */
.vehicle-topview-wrap {
  background: radial-gradient(circle at 50% 46%, rgba(10,132,255,.08), transparent 60%), #10151b !important;
  border-color: rgba(100,210,255,.20) !important;
}
.vehicle-topview-label { fill: #f5f9ff !important; }
.vehicle-topview-sub,
.vehicle-orientation-label { fill: #75cfff !important; }
@media (prefers-color-scheme: light) {
  .vehicle-topview-wrap {
    background: radial-gradient(circle at 50% 46%, rgba(0,122,255,.08), transparent 58%), #f5f8fb !important;
    border-color: rgba(60,60,67,.14) !important;
  }
  .vehicle-shell { fill: #dfe7ed !important; stroke: #4d7186 !important; }
  .vehicle-glass-roof { fill: #183247 !important; stroke: rgba(0,92,150,.45) !important; }
  .vehicle-center-glass { fill: #22465f !important; stroke: rgba(0,92,150,.35) !important; }
  .vehicle-center-glass.rear { fill: #1b3c52 !important; }
  .vehicle-zone.body-zone { fill: rgba(170,188,199,.70) !important; stroke: rgba(67,103,124,.52) !important; }
  .vehicle-zone.door-zone { fill: rgba(154,178,193,.78) !important; stroke: rgba(55,104,132,.62) !important; }
  .vehicle-zone.window-zone { fill: rgba(34,87,116,.72) !important; stroke: rgba(40,122,161,.62) !important; }
  .vehicle-topview-label { fill: #16384f !important; }
  .vehicle-topview-sub,
  .vehicle-orientation-label { fill: #397999 !important; }
}

/* Energie-Live: Symbole und Zahlen deutlich kontrastreicher. */
.energy-live-diagram {
  background: var(--ui-tile-subtle) !important;
  border-color: var(--ui-separator-soft) !important;
}
.energy-node,
.energy-node-house {
  background: var(--ui-tile) !important;
  color: var(--ui-text) !important;
  border-color: var(--ui-separator-soft) !important;
  box-shadow: none !important;
}
.energy-node-icon {
  background: var(--ui-icon-bg) !important;
  color: var(--ui-icon-fg) !important;
  border-color: rgba(10,132,255,.18) !important;
  box-shadow: none !important;
}
.energy-node-icon svg,
.energy-node-house .energy-node-icon svg {
  stroke: var(--ui-icon-fg) !important;
  fill: none !important;
  opacity: 1 !important;
}
.energy-live-track {
  background: var(--ui-tile-muted) !important;
  box-shadow: inset 0 0 0 1px var(--ui-separator-soft) !important;
}
.energy-live-track i { background: #32ade6 !important; box-shadow: none !important; }
.energy-live-track-pv.is-active i { background: var(--ui-green) !important; box-shadow: none !important; }

/* 6-A-Empfehlung als klarer Info-Banner statt dunklem Streifen. */
.pv-charge-advice,
.pv-charge-advice.is-not-recommended,
.pv-charge-advice.is-waiting {
  background: var(--ui-accent-panel) !important;
  border: 1px solid rgba(10,132,255,.20) !important;
  color: var(--ui-accent-panel-text) !important;
  opacity: 1 !important;
}
.pv-charge-advice.is-recommended {
  background: color-mix(in srgb, var(--ui-green) 10%, var(--ui-tile)) !important;
  border-color: color-mix(in srgb, var(--ui-green) 28%, transparent) !important;
}
.pv-charge-advice-copy > strong { color: var(--ui-accent-panel-text) !important; }
.pv-charge-advice.is-recommended .pv-charge-advice-copy > strong { color: var(--ui-green) !important; }
.pv-charge-advice-copy > span,
.pv-charge-advice-copy > small { color: var(--ui-secondary) !important; }
.pv-charge-advice-icon {
  background: var(--ui-icon-bg) !important;
  border-color: rgba(10,132,255,.18) !important;
}
.pv-charge-advice-icon svg { stroke: var(--ui-icon-fg) !important; }
.pv-charge-advice-values > div {
  background: var(--ui-tile) !important;
  border-color: var(--ui-separator-soft) !important;
}
.pv-charge-advice-values span { color: var(--ui-secondary) !important; }
.pv-charge-advice-values strong { color: var(--ui-text) !important; }

/* Ladefluss: im Light Mode echte helle Karten. Der zentrale Wert ist ein
   heller Akzent statt schwarzer/dunkelgrauer Block. */
.flow-card,
.mockup-flow-card,
.flow-card.source,
.flow-card.target {
  background: var(--ui-tile) !important;
  border-color: var(--ui-separator-soft) !important;
  color: var(--ui-text) !important;
}
.flow-icon {
  background: var(--ui-icon-bg) !important;
  border-color: rgba(10,132,255,.18) !important;
  box-shadow: none !important;
}
.flow-icon.sun { color: #78a900 !important; }
.flow-icon.grid { color: var(--ui-icon-fg) !important; }
.flow-node-main,
.mockup-center-node {
  background: linear-gradient(145deg, var(--ui-accent-panel), var(--ui-tile)) !important;
  border: 1px solid rgba(10,132,255,.28) !important;
  color: var(--ui-text) !important;
  box-shadow: none !important;
  animation: none !important;
}
.flow-node-main span,
.flow-node-main small { color: var(--ui-secondary) !important; }
.flow-node-main strong { color: var(--ui-text) !important; }
.detail-card.cost-highlight {
  background: color-mix(in srgb, var(--ui-green) 8%, var(--ui-tile)) !important;
  border-color: color-mix(in srgb, var(--ui-green) 28%, transparent) !important;
}
.detail-card.cost-highlight strong { color: var(--ui-green) !important; }
.flow-export-compact { background: var(--ui-tile-subtle) !important; }
.flow-tech-details,
.flow-tech-grid { color: var(--ui-text) !important; }

/* Diagnose: auch die aufklappbaren Bereiche sind normale Content-Karten. */
.diagnostic-raw-section .connected-fold,
.connected-data-columns .connected-fold,
details.connected-fold {
  background: var(--ui-tile) !important;
  border: 1px solid var(--ui-separator-soft) !important;
  color: var(--ui-text) !important;
}
.diagnostic-raw-section .connected-fold summary,
.connected-data-columns .connected-fold summary,
details.connected-fold summary {
  background: transparent !important;
  color: var(--ui-text) !important;
}
.connected-fold summary small { color: var(--ui-secondary) !important; }
.raw-json-box { background: #111820 !important; }
.raw-json-box pre { color: #d8e4ee !important; }

/* Connected Services: kurze Überschrift, Action-Bereich flexibel. */
.connected-data-panel .panel-head { align-items: center !important; }
.connected-data-panel .energy-badges { justify-content: flex-end; }

/* Mobil: dichter, stabiler und ohne abgeschnittene Buttons/Überschriften. */
@media (max-width: 820px) {
  .app-shell { padding: 7px 8px calc(98px + env(safe-area-inset-bottom)) !important; }
  .topbar { padding: 12px 11px !important; border-radius: 15px !important; }
  .topbar h1 { font-size: 25px !important; line-height: 1.05 !important; }
  .topbar .muted { font-size: 11px !important; }
  .top-actions { display: flex !important; flex-wrap: wrap !important; }
  .top-actions > * { max-width: 100% !important; }

  .panel,.visual-flow-panel { padding: 12px 10px !important; }
  .panel-head { flex-wrap: wrap !important; align-items: flex-start !important; }
  .panel-head > div:first-child { min-width: 0 !important; flex: 1 1 180px !important; }
  .panel-head h2 { font-size: 20px !important; line-height: 1.08 !important; overflow-wrap: anywhere; }
  .panel-head .energy-badges,
  .panel-head .top-actions { flex: 1 1 100% !important; width: 100% !important; justify-content: flex-start !important; }
  .panel-head button,
  .panel-head .small-button,
  .panel-head .link-button { max-width: 100% !important; white-space: normal !important; text-align: center; }

  .connected-data-panel .panel-head { align-items: flex-start !important; }
  .connected-data-panel .energy-badges { justify-content: flex-start !important; }
  #extendedDataRefresh { width: 100% !important; }

  .hero-image { height: 190px !important; }
  .hero-vignette { height: 190px !important; }
  .hero-copy { padding: 11px !important; }
  .hero-copy strong { font-size: 21px !important; }
  .hero-battery-box { padding: 10px 11px !important; }

  .vehicle-topview-wrap { min-height: 250px !important; height: 250px !important; border-radius: 15px !important; }
  .vehicle-topview { width: 180px !important; height: 250px !important; }
  .compact-graphic-legend { gap: 7px 11px !important; }
  .compact-graphic-legend span { font-size: 10px !important; }

  .summary-metric-grid,
  .inline-mini-grid,
  .climate-temp,
  .detail-inline-grid,
  .energy-live-facts,
  .energy-history-summary-mini,
  .history-kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .summary-metric-grid > div,
  .inline-mini-grid > div,
  .climate-temp > div,
  .detail-inline-grid > div,
  .energy-live-facts article { padding: 10px !important; min-height: 82px !important; }

  .remote-unified-grid { gap: 9px !important; }
  .remote-subpanel { padding: 11px !important; }
  .climate-settings-grid { grid-template-columns: 1fr !important; }
  .remote-action-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 7px !important; }

  .energy-live-diagram { gap: 8px !important; padding: 10px !important; }
  .energy-node { min-height: 116px !important; padding: 12px !important; border-radius: 15px !important; }
  .energy-node-house { min-height: 126px !important; }
  .energy-node-icon { width: 44px !important; height: 44px !important; border-radius: 13px !important; }
  .energy-node-icon svg { width: 25px !important; height: 25px !important; }
  .energy-node strong { font-size: 28px !important; }
  .energy-live-track { width: 8px !important; height: 48px !important; }

  .charge-flow-stage { grid-template-columns: 1fr !important; gap: 9px !important; }
  .flow-card { min-height: 0 !important; padding: 12px !important; border-radius: 15px !important; }
  .flow-node-main { width: 100% !important; min-height: 140px !important; }
  .flow-detail-matrix { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 7px !important; margin-top: 14px !important; }
  .detail-title { grid-column: 1 / -1 !important; }
  .detail-card,.detail-wide { grid-column: auto !important; min-height: 86px !important; padding: 10px !important; }
  .detail-wide { grid-column: span 2 !important; }

  .mobile-tabbar {
    height: 60px !important;
    bottom: calc(6px + env(safe-area-inset-bottom)) !important;
    padding: 4px !important;
    border-radius: 20px !important;
  }
  .mobile-tab,
  .mobile-more > summary { height: 50px !important; border-radius: 15px !important; }
  .mobile-tab .nav-svg,
  .mobile-more .nav-svg { width: 19px !important; height: 19px !important; }
  .mobile-tab .nav-label,
  .mobile-more .nav-label { font-size: 9px !important; max-width: 64px !important; }
  .mobile-more-sheet { bottom: 68px !important; }

  #commandAudit { margin-bottom: 2px !important; }
  .command-entry { grid-template-columns: 12px minmax(0,1fr) auto !important; padding: 10px !important; }
  .command-entry time { font-size: 10px !important; }
}

@media (max-width: 430px) {
  .topbar h1 { font-size: 24px !important; }
  .summary-metric-grid,
  .inline-mini-grid,
  .climate-temp,
  .detail-inline-grid,
  .energy-live-facts,
  .energy-history-summary-mini { grid-template-columns: 1fr 1fr !important; }
  .connected-overview-grid { grid-template-columns: 1fr !important; }
  .remote-action-row { grid-template-columns: 1fr !important; }
  .flow-detail-matrix { grid-template-columns: 1fr !important; }
  .detail-wide { grid-column: auto !important; }
}

/* ============================================================
   v1.18.0 – Lesbarkeit, Hybrid-Entschlackung, Netzleistung
   ============================================================ */

/* Hybrid-Trainer: technische Hilfstexte entfernen, die im Alltag keinen
   Mehrwert liefern. Die eigentlichen Fahrtdaten bleiben unverändert. */
.hybrid-fetch-info,
.hybrid-trip-meta-line,
.hybrid-trip-title > small {
  display: none !important;
}

/* Hybrid-Score: Zahl auf dem farbigen Kreis immer klar lesbar. */
.score-ring b,
.trip-score b {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.55) !important;
  font-weight: 800 !important;
}

/* Google-Maps-Aktionen: auch disabled eindeutig lesbar. */
.hybrid-map-links .inline-link-button,
.inline-link-button {
  color: #075a9c !important;
  background: #d9efff !important;
  border-color: #9fd3f5 !important;
  font-weight: 700 !important;
}
.hybrid-map-links .inline-link-button:hover,
.inline-link-button:hover {
  color: #003f70 !important;
  background: #c4e7ff !important;
}
.hybrid-map-links .inline-link-button:disabled,
.inline-link-button:disabled,
.hybrid-map-links .inline-link-button[aria-disabled="true"] {
  color: #5f6b75 !important;
  background: #eef1f4 !important;
  border-color: #d2d7dc !important;
  opacity: 1 !important;
}

/* Fahrzeug-Draufsicht: Statusfarben dürfen vom Light-Mode-Grundmaterial
   nicht überschrieben werden. */
.vehicle-zone[data-state="good"] {
  fill: rgba(48, 209, 88, .68) !important;
  stroke: #178b3b !important;
  stroke-width: 3 !important;
}
.vehicle-zone[data-state="warn"] {
  fill: rgba(255, 184, 0, .68) !important;
  stroke: #b67700 !important;
  stroke-width: 3 !important;
}
.vehicle-zone[data-state="bad"] {
  fill: rgba(255, 69, 58, .70) !important;
  stroke: #c6261e !important;
  stroke-width: 3 !important;
  filter: drop-shadow(0 0 5px rgba(255,69,58,.28)) !important;
}
.vehicle-zone[data-state="unknown"] {
  fill: rgba(142, 142, 147, .34) !important;
  stroke: rgba(99, 99, 102, .48) !important;
}
.vehicle-light[data-state="light-on"] {
  fill: #ffd60a !important;
  stroke: #8a6500 !important;
  opacity: 1 !important;
}
.vehicle-light[data-state="off"] {
  fill: rgba(10,132,255,.08) !important;
  stroke: rgba(0,94,184,.60) !important;
}

/* Technische Orientierungsbeschriftungen sind entfernt; die Klasse wird
   vorsorglich ausgeblendet, damit kein FRONT/HECK in die Legende wandert. */
.vehicle-orientation-label { display: none !important; }

/* Netzleistung: im hellen Systemmodus echte helle Diagrammfläche statt
   dunkelgrauem Fremdkörper. */
@media (prefers-color-scheme: light) {
  .energy-history-chart-wrap,
  .energy-power-chart-wrap-primary,
  .energy-power-overview-panel .energy-history-chart-wrap {
    background: #fff !important;
    border-color: rgba(60,60,67,.16) !important;
    box-shadow: none !important;
  }
  .energy-power-chart {
    background:
      linear-gradient(180deg, rgba(10,132,255,.035), transparent 55%),
      #fbfcfe !important;
    border-color: rgba(60,60,67,.14) !important;
  }
  .energy-history-summary-mini article,
  .power-extreme {
    background: #f5f5f7 !important;
    color: #1d1d1f !important;
    border-color: rgba(60,60,67,.13) !important;
  }
  .energy-history-summary-mini span,
  .energy-history-summary-mini small,
  .power-chart-legend,
  .power-chart-help { color: #6e6e73 !important; }
  .energy-history-summary-mini strong { color: #1d1d1f !important; }
  .energy-zero-line { stroke: rgba(29,29,31,.42) !important; }
  .energy-grid-line,
  .energy-time-grid-line { stroke: rgba(60,60,67,.12) !important; }
  .energy-axis-label,
  .energy-time-axis-label,
  .energy-axis-caption { fill: #6e6e73 !important; }
  .energy-power-line { stroke: rgba(0,93,164,.25) !important; }
  .energy-import-line { stroke: #007aff !important; }
  .energy-export-line { stroke: #ff9500 !important; }
  .energy-extreme-label {
    stroke: #fff !important;
    stroke-width: 4px !important;
  }
  .power-extreme-max small,.power-extreme-max strong { color:#0069b9 !important; }
  .power-extreme-min small,.power-extreme-min strong { color:#a85f00 !important; }
  .power-chart-tooltip {
    background: rgba(255,255,255,.98) !important;
    border-color: rgba(60,60,67,.18) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
  }
  .power-chart-tooltip strong { color:#1d1d1f !important; }
  .power-chart-tooltip span,.power-chart-tooltip small { color:#6e6e73 !important; }
}

/* Die technische Rohdaten-Aufbewahrung ist bewusst nicht Teil der
   Endanwender-Oberfläche. */
#energyRetentionInfo { display:none !important; }

@media (max-width: 760px) {
  .score-ring b,.trip-score b { font-size: 18px !important; }
  .hybrid-map-links { width: 100% !important; }
  .hybrid-map-links .inline-link-button {
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ============================================================
   v1.19.0 – visuelle Bereinigung + Ladezyklus-Fokus
   ============================================================ */

/* Keine grauen "Beton"-Kacheln mehr in Endanwender-Bereichen. */
.pv-charge-history-stats article,
.hybrid-launch-card,
.connected-row,
.connected-fold .fold-content .connected-row {
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
  border: 1px solid var(--ui-separator-soft) !important;
  box-shadow: none !important;
}
.pv-charge-history-stats article span,
.pv-charge-history-stats article small,
.hybrid-launch-card small,
.connected-row span {
  color: var(--ui-secondary) !important;
}
.pv-charge-history-stats article strong,
.hybrid-launch-card strong,
.connected-row strong,
.connected-row b {
  color: var(--ui-text) !important;
}
.hybrid-launch-card > b { color: var(--ui-blue) !important; }
.hybrid-launch-card:hover {
  background: color-mix(in srgb, var(--ui-blue) 5%, var(--ui-surface)) !important;
  border-color: color-mix(in srgb, var(--ui-blue) 25%, var(--ui-separator-soft)) !important;
}

/* Energie-Zusammenfassung erhält zwei Rasterspalten. */
.detail-summary-wide { grid-column: span 2 !important; }

/* Das lange technische Erklärstück unter der Ladeauswertung entfällt. */
#flowCarEstimateNote { display: none !important; }

/* Speicherdetails gehören nicht in die Endanwender-Oberfläche. */
.retention-info { display: none !important; }

/* Fahrzeug-Draufsicht: Glas-/Dachflächen deutlich leichter und weniger dominant. */
.vehicle-glass-roof {
  fill: #355466 !important;
  stroke: rgba(93,174,215,.48) !important;
}
.vehicle-center-glass,
.vehicle-center-glass.rear {
  fill: #456a80 !important;
  stroke: rgba(93,174,215,.42) !important;
}
@media (prefers-color-scheme: light) {
  .vehicle-glass-roof {
    fill: #a9c0ce !important;
    stroke: #5f8ca5 !important;
  }
  .vehicle-center-glass,
  .vehicle-center-glass.rear {
    fill: #bdd0db !important;
    stroke: #6e9bb3 !important;
  }
  .pv-charge-history-stats article,
  .hybrid-launch-card,
  .connected-row,
  .connected-fold .fold-content .connected-row {
    background: #ffffff !important;
  }
  .connected-row span,
  .hybrid-launch-card small,
  .pv-charge-history-stats article span,
  .pv-charge-history-stats article small {
    color: #5f6368 !important;
  }
}

/* Ladehistorie: Fokus auf einen Ladezyklus statt technischer Gap-Wand. */
.history-focus-summary {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 8px;
  margin: 2px 0 12px;
}
.history-focus-summary[hidden] { display: none !important; }
.history-focus-summary article {
  min-height: 74px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--ui-surface-2);
  border: 1px solid var(--ui-separator-soft);
}
.history-focus-summary span,
.history-focus-summary small {
  display: block;
  color: var(--ui-secondary);
  font-size: 10px;
}
.history-focus-summary strong {
  display: block;
  margin: 4px 0 3px;
  color: var(--ui-text);
  font-size: 18px;
  line-height: 1.05;
}
.history-session-start,
.history-session-end {
  fill: var(--ui-green) !important;
  font-size: 10px !important;
  font-weight: 750 !important;
}
.history-gap-label { display: none !important; }
.history-gap-marker { opacity: .25 !important; }
.history-chart-shell .history-quality-badge.quality-warn {
  background: var(--ui-surface-2) !important;
  color: var(--ui-secondary) !important;
}

/* Netzleistungs-PV-Kennzahlen wie normale helle Metriken, nicht grau-in-grau. */
.pv-charge-history-stats article {
  min-height: 72px !important;
}
.pv-charge-history-stats article strong {
  font-weight: 760 !important;
}

/* Service/Health-Listen kompakter und deutlich lesbarer. */
.connected-fold .fold-content { background: transparent !important; }
.connected-list { gap: 7px !important; }
.connected-row { min-height: 46px; padding: 11px 12px !important; }
.connected-row span { margin-top: 2px !important; line-height: 1.35 !important; }
.health-ok-row strong { color: var(--ui-green) !important; }

@media (max-width: 1100px) {
  .detail-summary-wide { grid-column: span 2 !important; }
  .history-focus-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .detail-summary-wide { grid-column: auto !important; }
  .history-focus-summary { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
  .history-focus-summary article { min-height: 68px; padding: 9px 10px; }
  .history-focus-summary strong { font-size: 16px; }
}