/* Satoshi, self-hosted (was Fontshare): the page loads nothing from other origins except map tiles. */
@font-face { font-family: "Satoshi"; src: url("/static/fonts/satoshi-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/static/fonts/satoshi-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/static/fonts/satoshi-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
/* chargeflow css r150 */
:root,
html[data-theme="dark"] {
  --bg: #111112;
  --surface: #18181c;
  --surface-2: #1c1c22;
  --line: #2c2c32;
  --text: #f2f2f3;
  --muted: #b8b8be;
  --hint: #e4e4e8;
  --accent: #ffd000;
  --accent-ink: #111112;
  --accent-text: #ffd000;
  --accent-soft: rgba(255, 208, 0, 0.16);
  --mint: #5ee0c0;
  --mint-ink: #9ef0d8;
  --mint-soft: rgba(94, 224, 192, 0.12);
  --amber: #ff9f1a;
  --conn-ac-ink: #3b82f6;
  --conn-dc-ink: var(--accent);
  --conn-ufc-ink: var(--amber);
  --ice: #9aa4ad;
  --danger: #ef6b6b;
  --tip: #e879f9;
  --tip-ink: #f5d0fe;
  --tip-line: rgba(232, 121, 249, 0.45);
  --tip-soft: rgba(232, 121, 249, 0.10);
  --btn-text: #111112;
  --dock-bg: rgba(17, 17, 18, 0.92);
  --bar-track: #2c2c32;
  --ease: 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --glow: 0 10px 28px rgba(255, 208, 0, 0.26);
  --radius: 14px;
  --radius-card: 22px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --font: "Satoshi", "Segoe UI", sans-serif;
  --font-num: "Satoshi", ui-sans-serif, sans-serif;
  --pad-x: clamp(16px, 3vw, 28px);
  --app-max: 1120px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

html[data-theme="light"] {
  --bg: #c5f6e6;
  --surface: #ffffff;
  --surface-2: #e8fff6;
  --line: #9ee8d0;
  --text: #0b2f2c;
  --muted: #2a504c;
  --hint: #0f3a36;
  --accent: #ffd000;
  --accent-ink: #0b2f2c;
  --accent-text: #765a00;
  --accent-soft: rgba(255, 208, 0, 0.34);
  --mint: #43f5ba;
  --mint-ink: #0e5c56;
  --mint-soft: rgba(67, 245, 186, 0.22);
  --amber: #e07a00;
  --conn-ac-ink: #2563eb;
  --conn-dc-ink: #765a00;
  --conn-ufc-ink: #c46a00;
  --ice: #2f6b88;
  --danger: #d23a4a;
  --tip: #c026d3;
  --tip-ink: #6b21a8;
  --tip-line: rgba(192, 38, 211, 0.38);
  --tip-soft: rgba(192, 38, 211, 0.12);
  --btn-text: #0b2f2c;
  --dock-bg: rgba(197, 246, 230, 0.92);
  --bar-track: #d8f5ea;
  --glow: 0 10px 28px rgba(255, 208, 0, 0.28);
  --radius: 18px;
  --radius-card: 28px;
  --radius-sm: 16px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); }
html { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }
body {
  font-family: var(--font);
  min-height: 100dvh;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
html[data-theme="light"] body {
  background: var(--bg);
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::placeholder {
  color: var(--hint);
  opacity: 1;
}

.app {
  max-width: var(--app-max);
  margin: 0 auto;
  min-height: 100dvh;
  padding-bottom: calc(92px + var(--safe-b));
  padding-left: var(--safe-l);
  padding-right: var(--safe-r);
  overflow-x: clip;
}
.top {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(10px + var(--safe-t)) var(--pad-x) 10px;
  background: transparent;
  border-bottom: 1px solid var(--line);
}
/* Blur on a pseudo-element so the account menu is not inside a backdrop-filter
   box. WebKit paints that box and drops the overflowing menu text. */
.top::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--dock-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  pointer-events: none;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-shrink: 0;
}
.brand-logo {
  height: 48px;
  width: auto;
  display: none;
  flex-shrink: 0;
}
.brand-logo-dark { display: block; }
.brand-lg .brand-logo { height: 64px; }
html[data-theme="light"] .brand-logo-dark { display: none; }
html[data-theme="light"] .brand-logo-light { display: block; }
.mark {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  flex-shrink: 0;
}
.top-meta {
  color: var(--muted);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  position: relative;
}
.top-house {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 28vw;
}
.user-menu { position: relative; flex-shrink: 0; }
.avatar-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.avatar-btn img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 50%;
}
.avatar-fallback-stack {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 50%;
  background: var(--surface-2);
  flex: 0 0 auto;
}
.avatar-fallback-stack img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
}
.avatar-btn img.avatar-fallback-light,
.avatar-fallback-stack .avatar-fallback-light { display: none; }
html[data-theme="light"] .avatar-btn img.avatar-fallback-dark,
html[data-theme="light"] .avatar-fallback-stack .avatar-fallback-dark { display: none; }
html[data-theme="light"] .avatar-btn img.avatar-fallback-light,
html[data-theme="light"] .avatar-fallback-stack .avatar-fallback-light { display: block; }
.avatar-btn[aria-expanded="true"] {
  box-shadow: 0 0 0 3px var(--accent-soft);
}
/* Opacity and a small transform only. Do not animate height, and do not
   put a blur filter on this panel or an ancestor — WebKit then paints a blank card. */
.user-menu-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(280px, calc(100vw - 24px));
  max-height: min(70dvh, 440px);
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text);
  -webkit-text-fill-color: currentColor;
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(0,0,0,0.28);
  z-index: 60;
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity 180ms ease-out, transform 180ms ease-out;
}
.user-menu-panel[hidden] { display: none !important; }
.user-menu.is-open > .user-menu-panel { display: block; }
.user-menu-panel.is-closing { display: block; }
.user-menu.is-open > .user-menu-panel.is-on {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.user-menu-panel-inner {
  display: grid;
  gap: 8px;
  padding: 12px;
  color: var(--text);
  -webkit-text-fill-color: currentColor;
}
.user-menu-who {
  display: grid;
  gap: 2px;
  padding: 4px 6px 10px;
  border-bottom: 1px solid var(--line);
}
.user-menu-who b { color: var(--text); font-size: 14px; font-weight: 700; }
.user-menu-house { color: var(--text); font-weight: 700; }
.user-menu-who span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-menu-link,
.user-menu-logout {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  -webkit-text-fill-color: currentColor;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
}
.user-menu-link:hover,
.user-menu-link.on { background: var(--accent-soft); }
.user-menu-theme { display: grid; gap: 6px; padding: 4px 6px; }
.user-menu-theme > span {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}
.user-menu-theme-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.user-menu-theme-row button {
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text);
  -webkit-text-fill-color: currentColor;
  -webkit-appearance: none;
  appearance: none;
  padding: 8px 0;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}
.user-menu-theme-row button.on,
.user-menu-theme-row button:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-text);
}
.user-menu-logout {
  color: var(--danger);
  -webkit-text-fill-color: currentColor;
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  margin-top: 2px;
}
.user-menu-logout:hover { background: rgba(239, 107, 107, 0.12); }
.user-menu form { margin: 0; }
.top-meta > span:not(.badge-early) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 28vw;
}
.badge-early {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 8px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--tip) 22%, transparent);
  color: var(--tip-ink);
  border: 1px solid var(--tip-line);
  box-shadow: 0 0 18px var(--tip-soft);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}
.badge-early img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
  background: #0b2f2c;
  border-radius: 50%;
  padding: 4px;
  box-sizing: border-box;
}
.badge-early-sm {
  gap: 8px;
  padding: 5px 12px 5px 6px;
  font-size: 13px;
}
.badge-early-sm img {
  width: 22px;
  height: 22px;
  padding: 3px;
}
.account-early {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 8px 0 0;
}
.dot { opacity: 0.4; }
.sync-stamp {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 18px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
  width: fit-content;
  max-width: 100%;
}
.sync-stamp b {
  font-family: var(--font-num);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.theme-btn {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color var(--ease), color var(--ease), background var(--ease);
}
.theme-btn:hover { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); }
.theme-btn svg { width: 15px; height: 15px; }
.logout-icon { margin: 0; display: inline-flex; }
.theme-btn-danger:hover { border-color: var(--danger); color: var(--danger); background: rgba(239, 107, 107, 0.12); }
html[data-theme="light"] .icon-sun { display: none; }
html[data-theme="dark"] .icon-moon { display: none; }

.main { padding: 8px var(--pad-x) 36px; min-width: 0; }
.flash {
  margin: 10px var(--pad-x) 0;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  font-size: 14px;
}
.flash-err { border-left-color: var(--danger); }

h1 { font-size: clamp(26px, 4.4vw, 36px); letter-spacing: -0.045em; margin: 0; font-weight: 600; line-height: 1.05; }
h2, .section-label {
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
  font-weight: 500;
  margin: 28px 0 14px;
}
.sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 26px 0 10px;
}
.sec-head h2,
.sec-head .section-label {
  margin: 0;
}
.sec-head-link {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent-text);
  text-decoration: none;
}
.sec-head-link:hover { text-decoration: underline; }
button.sec-head-link {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: var(--accent-text);
}
button.sec-head-link[aria-expanded="true"]::after {
  content: " ↑";
  font-size: 11px;
}
button.sec-head-link[aria-expanded="false"]::after {
  content: " →";
  font-size: 11px;
}
.overview-map-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 280ms cubic-bezier(0.2, 0.8, 0.2, 1), margin 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
  margin: 0;
}
.overview-map-panel.is-open {
  grid-template-rows: 1fr;
  margin: 0 0 14px;
}
.overview-map-panel > .overview-map-inner {
  overflow: hidden;
  min-height: 0;
}
.overview-map-card {
  margin: 0;
}
.overview-map-card .ops-map {
  height: 280px;
  min-height: 280px;
}
.card h2, .card .section-label, form h2, form .section-label {
  margin: 22px 0 12px;
}
form.card > h2 {
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.02em;
  margin: 32px 0 16px;
}
.field + h2,
.grid-2 + h2,
.grid-3 + h2,
.field + .section-label,
.grid-2 + .section-label {
  margin-top: 32px;
}
.card > h2:first-child,
.card > .section-label:first-child,
.tesla-tier > .section-label:first-child {
  margin-top: 0;
}
p.lead { color: var(--muted); margin: 0 0 18px; line-height: 1.5; font-size: 15px; }
.page-head .lead, .dash-head .lead { margin: 6px 0 0; }
p.tiny { margin: 0 0 12px; line-height: 1.45; }
p.tiny:last-child { margin-bottom: 0; }
.eyebrow { margin: 0 0 6px; font-size: 13px; color: var(--muted); letter-spacing: 0.02em; font-weight: 500; }

.dash-head, .page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 8px 0 22px;
}
.dash-head { flex-wrap: nowrap; gap: 16px; }
.dash-head-nav {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.dash-head-text { flex: 1; min-width: 0; }
.dash-head-text h1 { margin: 0; }
.dash-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  max-width: 100%;
}
.dash-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}
.dash-title-row > h1 { margin: 0; }
.dash-head-text .eyebrow { margin: 4px 0 0; }
.dash-head-text .eyebrow + .period-menu { margin-top: 4px; }
.dash-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  min-height: 40px;
}
.page-head .lead { max-width: 36rem; }
.page-head .btn, .dash-head .btn { width: auto; flex-shrink: 0; }
.dash-head form { margin: 0; display: flex; }
.dash-head form.period-dates {
  display: grid !important;
}
.period-shift {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  margin-top: 2px;
  background: var(--surface);
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  position: relative;
  z-index: 2;
  transition: border-color var(--ease), color var(--ease), background var(--ease);
}
.period-shift:hover { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); }
.period-shift:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.period-shift.is-off { opacity: 0.28; pointer-events: none; }
.period-shift.is-off[aria-disabled="true"] { pointer-events: auto; cursor: default; }
.period-shift.is-off[aria-disabled="true"]:hover {
  border-color: var(--line);
  color: var(--text);
  background: var(--surface);
}
.dash-head-nav { align-items: center; flex-wrap: wrap; }
.dash-head-nav > h1 { margin: 0; }
.period-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  position: relative;
  z-index: 3;
}
.period-inline .period-shift { margin-top: 0; }
.period-inline .period-menu {
  margin: 0;
  max-width: none;
  position: relative;
  min-width: 0;
}
.period-inline .period-summary {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: none;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.period-inline .period-summary::after { opacity: 1; }
.period-inline .period-summary:hover,
.period-inline .period-menu.is-open > .period-summary {
  border-color: var(--accent);
  color: var(--accent-text);
  background: var(--accent-soft);
}
.period-inline .period-summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.period-inline .period-menu:not(.is-open) > .period-panel { pointer-events: none; }
.period-inline .period-panel {
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 5;
  min-width: min(360px, calc(100vw - 48px));
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.period-inline .period-menu.is-open > .period-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 10px 12px 8px;
}
/* #208: on mobile the pill sits mid-row, so a panel anchored to it ran past the right
   edge (Mesiac/Rok/Celé/Vlastné is ~340 px). Anchor it to the full-width header row
   instead: same width as the content column, always inside the viewport. */
@media (max-width: 720px) {
  .dash-head-nav { position: relative; z-index: 3; }
  .dash-head-nav .period-inline,
  .dash-head-nav .period-inline .period-menu { position: static; }
  .dash-head-nav .period-inline .period-panel {
    left: 0;
    right: 0;
    min-width: 0;
    max-width: 100%;
  }
  .dash-head-nav .period-inline .period-seg { min-width: 0; }
}

.period-menu {
  margin: 6px 0 0;
  max-width: 34rem;
}
.period-summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.02em;
  line-height: 1.3;
  text-align: left;
}
.period-summary > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.period-summary::after {
  content: "";
  width: 0.45em;
  height: 0.45em;
  flex-shrink: 0;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  opacity: 0.7;
  transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.period-menu.is-open > .period-summary {
  color: var(--accent-text);
}
.period-menu.is-open > .period-summary::after {
  transform: rotate(225deg) translateY(-1px);
  opacity: 1;
}
.period-summary:hover { color: var(--accent-text); }
.period-panel {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    grid-template-rows 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    margin-top 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.period-menu.is-open > .period-panel {
  grid-template-rows: 1fr;
  margin-top: 12px;
  opacity: 1;
  transform: translateY(0);
}
.period-panel-inner {
  overflow: hidden;
  min-height: 0;
  display: grid;
  gap: 8px;
}
.period-custom {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    grid-template-rows 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 160ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.period-custom.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateY(0);
}
.period-custom > .period-dates {
  overflow: hidden;
  min-height: 0;
  padding-bottom: 8px;
}
.period-custom.is-open > .period-dates {
  overflow: visible;
}
.period-dates {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: stretch;
  margin: 0;
  padding-top: 2px;
  padding-bottom: 4px;
}
.period-date-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  min-width: 0;
}
.period-date {
  display: grid;
  gap: 4px;
  min-width: 0;
  margin: 0;
}
.period-date > span {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.period-date input[type="date"],
.period-go {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: inherit;
  font: inherit;
  font-size: 14px;
  line-height: 1.2;
}
.period-date input[type="date"] {
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  padding: 0 12px;
  -webkit-appearance: none;
  appearance: none;
}
.period-date input[type="date"]::-webkit-datetime-edit,
.period-date input[type="date"]::-webkit-datetime-edit-fields-wrapper {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0;
  margin: 0;
}
.period-date input[type="date"]::-webkit-datetime-edit-text,
.period-date input[type="date"]::-webkit-datetime-edit-month-field,
.period-date input[type="date"]::-webkit-datetime-edit-day-field,
.period-date input[type="date"]::-webkit-datetime-edit-year-field {
  padding: 0;
}
.period-date input[type="date"]::-webkit-date-and-time-value {
  margin: 0;
  text-align: left;
}
.period-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  cursor: pointer;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
}
.period-date input[type="date"]:focus,
.period-go:focus-visible {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.period-go:hover {
  border-color: var(--accent);
  color: var(--accent-text);
  background: var(--accent-soft);
}
@media (min-width: 720px) {
  .period-dates {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
  .period-date-row {
    grid-column: 1;
  }
  .period-go {
    grid-column: 2;
    width: auto;
    height: 36px;
    align-self: end;
  }
  .period-date input[type="date"] {
    border-radius: var(--radius-pill);
    height: 36px;
    font-size: 13px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .period-summary::after,
  .period-panel,
  .period-custom,
  .user-menu-panel {
    transition: none;
  }
  .period-menu.is-open > .period-panel,
  .period-custom.is-open,
  .user-menu.is-open > .user-menu-panel {
    transform: none;
  }
  .user-menu-panel,
  .user-menu-panel.is-closing,
  .user-menu.is-open > .user-menu-panel.is-on {
    transition: none;
    transform: none;
  }
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.kpi {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 16px 16px 14px;
  min-width: 0;
}
.kpi:first-child,
.kpi-lead {
  background: var(--accent);
  border-color: var(--accent);
}
.kpi:first-child span,
.kpi-lead span { color: var(--accent-ink); }
.kpi:first-child strong,
.kpi-lead strong { color: var(--accent-ink); }
.kpi-lead strong { font-size: clamp(28px, 4vw, 40px); font-weight: 700; }
.kpi span {
  display: block;
  font-size: 13px;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--muted);
  margin-bottom: 8px;
  font-weight: 500;
}
.kpi strong {
  display: block;
  font-family: var(--font-num);
  font-size: clamp(22px, 3.2vw, 30px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.95;
}
.kpi em {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
  text-transform: none;
}
.kpi:first-child em,
.kpi-lead em {
  color: var(--accent-ink);
}
.kpi-lead-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.kpi-lead-top > span { margin-bottom: 0; }
.kpi-info {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  margin: 0;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(17, 17, 18, 0.28);
  background: transparent;
  color: var(--accent-ink);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.kpi-info svg { width: 14px; height: 14px; }
.kpi-info:hover,
.kpi-info:focus-visible {
  background: rgba(17, 17, 18, 0.08);
}
.kpi-info:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(17, 17, 18, 0.18);
}
.kpi-lead-foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  min-width: 0;
  margin-top: 14px;
}
.kpi-lead .kpi-maint {
  margin-top: 0;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--accent-ink) 22%, transparent);
  width: 100%;
  font-size: 14px;
  font-weight: 500;
}
.kpi-lead .kpi-maint b {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.kpi-lead-foot .kpi-delta { margin: 0; }
.kpi-delta {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  width: max-content;
  max-width: none;
  margin: 12px 0 0;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.kpi-delta svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.kpi-delta-cheaper { color: var(--mint); }
.kpi-delta-dearer { color: var(--amber); }
html[data-theme="light"] .kpi-delta-cheaper { color: var(--mint-ink); }
html[data-theme="light"] .kpi-delta-dearer { color: var(--danger); }
.kpi-explain {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  isolation: isolate;
}
.kpi-explain[hidden] { display: none; }
.kpi-explain .share-backdrop {
  opacity: 0;
  transition: opacity 180ms ease;
}
.kpi-explain.is-on .share-backdrop { opacity: 1; }
.kpi-explain-layout {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  align-items: flex-end;
}
.kpi-explain-card {
  position: relative;
  z-index: 1;
  width: 100%;
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  padding: 10px 16px calc(16px + var(--safe-b));
  max-height: min(80dvh, 560px);
  overflow: auto;
  color: var(--text);
}
.kpi-explain-card:focus { outline: none; }
html[data-theme="light"] .kpi-explain-card {
  border-color: transparent;
  box-shadow: 0 16px 40px rgba(11, 47, 44, 0.07);
}
.kpi-explain-grab {
  width: 40px;
  height: 5px;
  border-radius: 5px;
  background: var(--line);
  margin: 4px auto 14px;
}
.kpi-explain .kpi-explain-x { display: none; }
@media (min-width: 721px) {
  .kpi-explain {
    align-items: center;
    padding: 24px;
  }
  .kpi-explain-layout {
    width: auto;
    max-width: calc(100vw - 32px);
    align-items: flex-start;
    gap: 12px;
  }
  .kpi-explain-card {
    width: min(420px, calc(100vw - 120px));
    border-bottom: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: 18px 18px 16px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
  }
  html[data-theme="light"] .kpi-explain-card {
    border-color: transparent;
    box-shadow: 0 24px 80px rgba(11, 47, 44, 0.18);
  }
  .kpi-explain-grab,
  .kpi-explain .kpi-explain-x-in { display: none; }
  .kpi-explain .kpi-explain-x { display: inline-flex; }
}
.kpi-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.kpi-sheet-head b {
  font-size: 18px;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.kpi-sheet-x {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  padding: 0;
}
.kpi-sheet-x svg { width: 16px; height: 16px; }
.kpi-sheet-x:hover,
.kpi-sheet-x:focus-visible {
  border-color: var(--accent);
  color: var(--accent-text);
}
.kpi-sheet-x:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
html[data-theme="light"] .kpi-sheet-x {
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(11, 47, 44, 0.08);
}
.kpi-sheet-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  font-size: 14px;
}
.kpi-sheet-row span { color: var(--muted); }
.kpi-sheet-row b {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
}
.kpi-sheet-row.is-total span { color: var(--text); font-weight: 700; }
.kpi-sheet-rule {
  height: 1px;
  background: var(--line);
  margin: 6px 0;
}
html[data-theme="light"] .kpi-sheet-rule { background: rgba(11, 47, 44, 0.12); }
#kpi-sheet .kpi-explain-card {
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 28px 28px 0 0;
  padding: 10px 16px calc(34px + var(--safe-b));
  background-color: var(--surface);
}
#kpi-sheet .kpi-sheet-x {
  width: 36px;
  height: 36px;
}
#kpi-sheet .kpi-sheet-head b {
  min-width: 0;
  line-height: 1.25;
}
#kpi-sheet .kpi-sheet-sub { margin: 2px 0 14px; white-space: normal; }
#kpi-sheet .kpi-sheet-sub-charged { white-space: nowrap; }
#kpi-sheet .kpi-stack {
  display: flex;
  gap: 2px;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  margin: 0 0 8px;
}
#kpi-sheet .kpi-seg {
  display: block;
  min-width: 4px;
  height: 100%;
}
.kpi-seg-home { background: var(--mint); }
.kpi-seg-public { background: var(--accent); }
.kpi-seg-prepaid { background: var(--amber); }
.kpi-seg-maint { background: #9aa4ad; }
#kpi-sheet .kpi-sheet-sub-charged { opacity: 0.62; }
#kpi-sheet .kpi-sheet-row {
  align-items: flex-start;
  gap: 12px;
}
#kpi-sheet .kpi-sheet-row > span {
  font-weight: 500;
  min-width: 0;
}
#kpi-sheet .kpi-sheet-k {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
#kpi-sheet .kpi-sheet-copy {
  display: block;
  min-width: 0;
}
#kpi-sheet .kpi-sheet-name {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.25;
}
#kpi-sheet .kpi-sheet-row.is-total .kpi-sheet-name {
  color: var(--text);
  font-weight: 700;
  font-size: 15px;
}
#kpi-sheet .kpi-sheet-meta {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  opacity: 0.8;
  line-height: 1.3;
}
#kpi-sheet .kpi-maint-list {
  list-style: none;
  margin: 2px 0 6px 4px;
  padding: 0 0 0 14px;
  border-left: 1px solid var(--line);
}
#kpi-sheet .kpi-maint-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 3px 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.3;
}
#kpi-sheet .kpi-maint-list b {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
#kpi-sheet .kpi-dot {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 3px;
  flex: 0 0 10px;
}
#kpi-sheet .kpi-sheet-row b {
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 15px;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
#kpi-sheet .kpi-sheet-note {
  line-height: 1.4;
  margin: 8px 0 0;
}
#kpi-sheet .kpi-sheet-note a {
  color: var(--accent-text);
  font-weight: 700;
}
#kpi-sheet .kpi-sheet-note a:focus-visible {
  outline: none;
  border-radius: 4px;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
@media (min-width: 721px) {
  #kpi-sheet .kpi-explain-layout { padding-left: 56px; }
  #kpi-sheet .kpi-explain-card {
    width: 420px;
    max-width: calc(100vw - 48px);
    border-radius: 28px;
    border-bottom: 1px solid var(--line);
    padding: 22px 22px 20px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  }
  #kpi-sheet .kpi-explain-x {
    width: 44px;
    height: 44px;
  }
  #kpi-sheet .kpi-explain-x svg { width: 20px; height: 20px; }
}

.dash-meter-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0;
  row-gap: 4px;
  max-width: 100%;
  min-width: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  font-size: 12px;
  line-height: 1.3;
}
.dash-meter-meta > .dash-stat {
  white-space: nowrap;
}
.dash-meter-meta > .dash-stat:not(:last-child)::after {
  content: " · ";
  white-space: pre;
  opacity: 0.85;
}

.per100-ex-maint { white-space: normal; }

.dash-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 20px;
  align-items: start;
  min-width: 0;
}
.dash-col { min-width: 0; }
.dash-desk {
  display: grid;
  grid-template-columns: 1fr;
  min-width: 0;
}
.dash-desk-main,
.dash-desk-feed { min-width: 0; }
.card.dash-feed {
  padding: 16px 16px 8px;
  margin-bottom: 0;
}
.dash-feed-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 28px 0 14px;
}
.dash-feed-head h2 { margin: 0; }
.dash-feed-map {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dash-feed-map svg {
  width: 16px;
  height: 16px;
}
.dash-feed-map::after { content: none; }
.dash-feed .overview-map-panel { margin: 0 0 12px; }
.dash-feed .overview-map-card {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.dash-feed-chart { margin: 0 0 8px; }
.dash-feed-chart > .tiny {
  margin: 0 0 10px;
  color: var(--muted);
}
.dash-feed-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 72px;
}
.dash-feed-bar {
  flex: 1 1 0;
  min-width: 0;
  height: 3px;
  border-radius: 2px 2px 0 0;
  background: var(--bar-track);
}
.dash-feed-bar.is-on {
  height: max(4px, calc(var(--h) * 1%));
  background: var(--accent);
}
.dash-feed-list {
  margin: 4px -16px 0;
}
.dash-feed-list > .item:first-child { padding-top: 12px; }
/* .item (declared later) sets align-items: baseline; the doubled class wins
   so the connector tile is centred against title + date line. */
.item.dash-feed-row {
  align-items: center;
  gap: 12px;
}
.item > .conn-sq { align-self: center; }
.dash-feed-row .conn-sq svg {
  width: 16px;
  height: 16px;
}
.dash-feed-row .left b {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-feed-row .right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.dash-feed-row .right .num {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.dash-feed-more {
  display: block;
  margin: 4px 0 4px;
  padding: 12px 8px 8px;
  text-align: center;
  font-weight: 500;
  color: var(--muted);
}
.dash-feed-more:hover { color: var(--accent-text); }
.collapse-body { overflow: hidden; transition: height 0.2s ease; }
[data-collapse] { position: relative; transition: padding-bottom 0.2s ease; }
[data-collapse].is-collapsed { padding-bottom: 0; }
.collapse-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 4px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.collapse-toggle[hidden] { display: none; }
.collapse-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}
.collapse-toggle:hover,
.collapse-toggle:focus-visible { color: var(--text); }
.collapse-toggle:hover .collapse-chip,
.collapse-toggle:focus-visible .collapse-chip { border-color: var(--accent); }
.collapse-toggle svg {
  width: 20px;
  height: 20px;
  transition: transform 0.2s ease;
}
.collapse-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
[data-collapse].is-collapsed .collapse-toggle {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40px;
  margin: 0;
  align-items: center;
  background: linear-gradient(to bottom, transparent, var(--surface) 90%);
}
@media (prefers-reduced-motion: reduce) {
  .collapse-body,
  [data-collapse],
  .collapse-toggle svg { transition: none; }
}
.dash-col > h2:first-child { margin-top: 26px; }

.card + h2 { margin-top: 32px; }
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 16px;
  margin-bottom: 10px;
  box-shadow: none;
  min-width: 0;
  overflow-x: clip;
}
a.card:hover { border-color: var(--accent); }
.muted a, p.tiny a, p.hint a, .lead a { color: var(--accent-text); }
.card-row { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.card-row .right { text-align: right; white-space: nowrap; }
.muted { color: var(--muted); }
.tiny { font-size: 13px; color: var(--muted); font-weight: 500; }
.hint {
  margin: 16px 0 24px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--hint);
  font-weight: 500;
}
.hint[hidden] { display: none !important; }
.hint + .hint {
  margin-top: 0;
  padding-top: 12px;
}
.hint-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 16px 0 28px;
}
.hint-stack > .hint { margin: 0; padding-top: 0; }
.chips + .hint,
.grid-2 + .hint,
.grid-3 + .hint {
  margin-top: 16px;
}
.field > .hint,
.hint.place-status {
  margin: 14px 0 10px;
}
.lead + .hint { margin-top: 12px; }
.lead + .sync-stamp { margin-top: 8px; }
.card > .hint:first-child { margin-top: 0; }
.num, .stat {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}
/* An amount and its unit stay on one line ("38,00 €" never drops the €). */
.num { white-space: nowrap; }
.stat-lg { font-size: 36px; letter-spacing: -0.05em; font-weight: 600; margin: 6px 0 0; line-height: 1.05; }
.cost-break {
  margin: 4px 0 0;
  line-height: 1.45;
}
.cost-break + .compare { margin-top: 18px; }
.stat-md { font-size: 20px; font-weight: 500; letter-spacing: -0.04em; }
.mint { color: var(--accent); }
html[data-theme="light"] .mint { color: var(--text); }
.amber { color: var(--amber); }
.ice { color: var(--ice); }
.danger { color: var(--danger); }

.bar,
.bar i,
.bar .bar-fill,
.card > i,
a.card i {
  display: none !important;
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.chip {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius-pill);
  padding: 10px 16px;
  font-size: 14px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  transition: border-color var(--ease), background var(--ease), color var(--ease);
}
label.chip:hover, a.chip:hover { border-color: var(--accent); background: var(--accent-soft); }
label.chip, a.chip { cursor: pointer; }
.session-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}
.session-filters .field {
  flex: 1 1 10rem;
  max-width: 280px;
  margin: 0;
}
.session-filters .field > span {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 4px;
}
.session-filters .field select {
  min-height: 36px;
  padding: 6px 10px;
  font-size: 14px;
}
label.chip:has(input:checked), .chip.on {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
label.chip input { display: none; }
.chip[hidden],
[data-connector-block][hidden] {
  display: none !important;
}

.country-menu {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  margin: 0 0 18px;
}
.country-item {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 12px 16px;
  color: inherit;
  background: var(--surface);
  cursor: pointer;
  min-height: 48px;
  font-weight: 500;
  line-height: 1.2;
  transition: border-color var(--ease), background var(--ease), color var(--ease);
}
.country-item input { display: none; }
.country-item:hover { border-color: var(--accent); color: inherit; }
.country-item.on {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.country-item.on:hover { color: var(--accent-ink); }
.flag {
  width: 22px;
  height: 15px;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  overflow: hidden;
  display: inline-block;
  line-height: 0;
  background: #fff;
}
.flag svg,
.flag img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
html[data-theme="dark"] .flag { border-color: rgba(255, 255, 255, 0.22); }
.flag.flag--square {
  width: 15px;
  height: 15px;
}
.flag.flag--square img {
  object-fit: contain;
}

.country-programs { margin-bottom: 12px; }
a.item.country-row { align-items: center; }
.country-row-main {
  display: flex;
  align-items: center;
  gap: 12px;
}
.country-row .flag { width: 28px; height: 19px; }

.field {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
  min-width: 0;
  max-width: 100%;
}
.field:has(+ .btn),
.field:has(+ .form-actions),
p.tiny:has(+ .btn),
p.hint:has(+ .btn),
.chips:has(+ .btn),
.grid-2:has(+ .btn),
.grid-3:has(+ .btn) { margin-bottom: 14px; }
.field > span, .label { display: block; font-size: 15px; color: var(--text); font-weight: 500; margin: 0; }
.field input, .field select, .field textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 11px 14px;
  outline: none;
}
html[data-theme="light"] .field input,
html[data-theme="light"] .field select,
html[data-theme="light"] .field textarea {
  background: var(--surface);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.kwh-input label { display: block; }
.kwh-input span {
  display: block;
  font-size: 15px;
  color: var(--text);
  font-weight: 500;
  margin-bottom: 14px;
}
.kwh-input input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  font-family: var(--font-num);
  font-size: clamp(48px, 13vw, 72px);
  font-weight: 700;
  padding: 0 0 12px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  min-height: 0;
  text-align: left;
  caret-color: var(--accent);
}
.when {
  display: grid;
  grid-template-columns: 1.35fr 0.7fr 0.7fr;
  gap: 8px;
  min-width: 0;
}
.when input,
.when select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 11px 10px;
  outline: none;
}
html[data-theme="light"] .when input,
html[data-theme="light"] .when select {
  background: var(--surface);
}
.when input:focus,
.when select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-width: 0; }
.ev-picker { display: grid; grid-template-columns: 1fr 1fr 1.35fr; gap: 10px; min-width: 0; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; min-width: 0; }
.grid-2 > *,
.grid-3 > * { min-width: 0; }

input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
}
input[type="date"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-fields-wrapper {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 100%;
  padding: 0;
  margin: 0;
}
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field {
  min-width: 0;
  padding: 0;
}
input[type="date"]::-webkit-date-and-time-value {
  margin: 0;
  text-align: left;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  margin: 0 0 0 4px;
  padding: 0;
  flex-shrink: 0;
  align-self: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: var(--radius-pill);
  padding: 12px 18px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  cursor: pointer;
  transition: box-shadow var(--ease), filter var(--ease), background var(--ease), border-color var(--ease), color var(--ease);
}
.btn:hover { filter: brightness(1.08); box-shadow: var(--glow); }
.btn:active { box-shadow: none; filter: brightness(0.98); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-sm { width: auto; min-height: 36px; padding: 8px 12px; font-size: 13px; }
.btn.secondary { background: var(--surface); color: var(--text); border: 1px solid var(--line); filter: none; }
.btn.secondary:hover { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); box-shadow: none; filter: none; }
.btn.ghost { background: transparent; color: var(--muted); width: auto; min-height: 0; padding: 8px 0; filter: none; box-shadow: none; }
.btn.ghost:hover { color: var(--accent-text); box-shadow: none; }
.btn.danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); filter: none; }
.btn.danger:hover { background: rgba(239, 107, 107, 0.12); box-shadow: none; filter: none; }
.btn.ghost.danger {
  padding: 6px 12px;
  margin-top: 6px;
}
.item-actions {
  display: flex; gap: 8px; justify-content: flex-end; align-items: center;
  margin-top: 8px;
}
.item-actions form { margin: 0; display: flex; }
.btn-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  width: auto;
  cursor: pointer;
  transition: border-color var(--ease), color var(--ease), background var(--ease);
}
.btn-mini[hidden] { display: none !important; }
.btn-mini:hover { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); }
.btn-mini.danger { color: var(--danger); border-color: var(--danger); }
.btn-mini.danger:hover { background: rgba(239, 107, 107, 0.12); color: var(--danger); }
.btn-row { display: flex; gap: 8px; }
.btn-row .btn { width: auto; flex: 1; }
.form-actions {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 16px;
}
.card > .btn:last-child,
form.card > .btn,
form > .btn[type="submit"] { margin-top: 16px; }
.household-box form + form { margin-top: 8px; }
.household-box form + form > .btn { margin-top: 0; }

.list { display: flex; flex-direction: column; }
.card > .list {
  margin-left: -16px;
  margin-right: -16px;
}
.item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.list > .item:first-child { padding-top: 14px; }
.item:last-child { border-bottom: 0; padding-bottom: 14px; }
.card > .list > .item:first-child { padding-top: 16px; }
.card > .list > .item:last-child { padding-bottom: 16px; }
.item .left { min-width: 0; flex: 1; }
.item .left b { display: block; font-weight: 500; line-height: 1.25; }
.item .right { text-align: right; white-space: nowrap; flex-shrink: 0; }
a.item { color: inherit; transition: color var(--ease), background var(--ease); }
a.item:hover { background: var(--accent-soft); }
a.item:hover b { color: var(--accent-text); }
a.card { transition: border-color var(--ease); }
.item-meter { flex-direction: column; align-items: stretch; gap: 8px;   min-width: 0;
}
.item-meter .item-actions { margin-top: 2px; justify-content: flex-start; }
.ai-tip {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 18px;
  padding: 12px 16px;
  border: 1px solid var(--tip-line);
  border-radius: var(--radius-card);
  background: var(--tip-soft);
  font-size: 13px;
  color: var(--text);
}
.ai-tip[data-ai-rotate] {
  display: grid;
  overflow: hidden;
}
.ai-tip-line {
  margin: 0;
  line-height: 1.45;
}
.ai-tip[data-ai-rotate] .ai-tip-line {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateX(18px);
  pointer-events: none;
  transition: opacity 460ms var(--ease), transform 460ms var(--ease), visibility 460ms;
}
.ai-tip[data-ai-rotate] .ai-tip-line.is-on {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
}
.ai-tip[data-ai-rotate] .ai-tip-line.is-leave {
  opacity: 0;
  visibility: visible;
  transform: translateX(-18px);
}
.ai-tip strong { color: var(--tip); font-weight: 600; }
.month-note {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  padding: 14px 16px;
  margin: 0 0 16px;
  border-radius: var(--radius-card);
}
.share-box { margin: 4px 0 20px; }
.share-box > .section-label { margin-top: 4px; }
.share-people { margin-top: 16px; }
.share-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  cursor: pointer;
  text-align: left;
}
.share-box > .share-row { margin-bottom: 0; }
.share-people .share-row + .share-row { border-top: 0; margin-top: -1px; }
.share-row input {
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  flex-shrink: 0;
  accent-color: var(--accent);
}
.share-row > span { display: block; min-width: 0; flex: 1; }
.share-row b {
  display: block;
  font-weight: 500;
  line-height: 1.25;
}
.share-row .tiny,
.share-row .hint {
  display: block;
  margin: 6px 0 0;
  line-height: 1.4;
}
.share-row .hint { font-size: 14px; font-weight: 500; }
.share-row:hover { border-color: var(--accent); z-index: 1; }
.share-row:has(input:checked) { background: var(--accent-soft); }
.share-row.is-you { cursor: default; }
.month-note b { display: block; font-weight: 600; margin-bottom: 8px; }
.month-note .tiny,
.month-note .hint {
  color: var(--accent-ink);
  opacity: 0.88;
  margin: 0;
}
.month-note .hint { font-size: 14px; font-weight: 500; }
.item-main {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  width: 100%;
  min-width: 0;
}
.item-main .left { min-width: 0; flex: 1; }
.item-main .right { text-align: right; white-space: nowrap; flex-shrink: 0; }
a.item-main { color: inherit; }
a.item-main:hover b { color: var(--accent-text); }
a.kpi { display: block; color: inherit; text-decoration: none; }
a.kpi:hover { border-color: var(--accent); }
.report-snapshot {
  margin: 8px 0 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.report-snapshot li { color: var(--text); }
.report-note {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  white-space: pre-wrap;
}
.report-current { margin: 0; color: var(--muted); }
.report-link { margin-top: 16px; }
.remain { display: flex; flex-direction: column; gap: 5px; }
.remain-track {
  height: 6px;
  background: var(--bar-track);
  overflow: hidden;
  border-radius: 0;
}
.remain-track::before {
  content: "";
  display: block;
  height: 100%;
  width: var(--remain, 0%);
  background: var(--accent);
}
.remain-track.low::before { background: var(--danger); }

.soc {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 2px;
}
.item-meter > .soc { margin-top: 0; }
.item-meter > .tiny { margin: 0; line-height: 1.4; }
.soc-track {
  flex: 1;
  min-width: 0;
  height: 8px;
  background: var(--bar-track);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.soc-fill {
  display: block;
  height: 100%;
  width: var(--remain, 0%);
  min-width: 0;
  max-width: 100%;
  background: var(--accent);
  border-radius: inherit;
  padding: 0;
  flex: none;
}
.soc-read {
  flex: 0 0 auto;
  min-width: 3.5ch;
  font-family: var(--font-num);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--muted);
  text-align: right;
}
.soc.is-empty .soc-fill { width: 0; background: transparent; }
.soc.is-low .soc-fill { background: var(--danger); }
.soc.is-empty .soc-read,
.soc.is-low .soc-read { color: var(--danger); }

.mix-bar {
  display: flex;
  gap: 3px;
  height: 25px;
  margin: 0 0 14px;
  background: transparent;
  overflow: visible;
}
.mix-seg {
  display: block;
  height: 100%;
  min-width: 6px;
  border-radius: var(--radius-pill);
}
.mix-ac { background: #3b82f6; }
.mix-dc { background: var(--accent); }
.mix-ufc { background: var(--amber); }
.mix-destination { background: #7c9cff; }
.mix-drivex { background: var(--text); }
.mix-kw100 { background: #3b82f6; }
.mix-kw200 { background: var(--accent); }
.mix-kw400 { background: var(--amber); }
.mix-kw49 { background: #3b82f6; }
.mix-kw149 { background: var(--accent); }
.mix-kw150 { background: var(--amber); }
.mix-any { background: var(--muted); }
.mix-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
}
.mix-item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: var(--text);
  font-size: 12px;
  line-height: 1.25;
}
.mix-item b { font-weight: 500; }
.mix-item em {
  font-family: var(--font-num);
  font-style: normal;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.mix-item .conn-ico { align-self: center; }
.mix-item .conn-ico-ac { color: var(--conn-ac-ink); }
.mix-item .conn-ico-dc { color: var(--conn-dc-ink); }
.mix-item .conn-ico-ufc { color: var(--conn-ufc-ink); }
/* #192: provider keys keep their own bar colour; the icon shape comes from conn_kind. */
.mix-ico { display: inline-flex; align-self: center; }
.mix-item .mix-ink-destination .conn-ico { color: #7c9cff; }
.mix-item .mix-ink-drivex .conn-ico { color: var(--text); }
.mix-item .mix-ink-kw49 .conn-ico,
.mix-item .mix-ink-kw100 .conn-ico { color: var(--conn-ac-ink); }
.mix-item .mix-ink-kw149 .conn-ico,
.mix-item .mix-ink-kw200 .conn-ico { color: var(--conn-dc-ink); }
.mix-item .mix-ink-kw150 .conn-ico,
.mix-item .mix-ink-kw400 .conn-ico { color: var(--conn-ufc-ink); }
.mix-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  align-self: center;
  border-radius: var(--radius-pill);
}

details.extra { margin: 8px 0 16px; }
details.extra summary { cursor: pointer; color: var(--hint); font-size: 14px; font-weight: 500; padding: 8px 0; }

details.fold {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  margin: 0 0 10px;
}
form.card + details.fold { margin-top: 22px; }
details.fold > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px;
  cursor: pointer;
  list-style: none;
  font-weight: 500;
}
details.fold > summary::-webkit-details-marker,
details.fold > summary::marker { display: none; content: ""; }
details.fold > summary .tiny { color: var(--muted); font-weight: 500; }
details.fold[open] > summary {
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
}
details.fold .list > .item:first-child { padding-top: 16px; }
details.fold .list > .item:last-child { padding-bottom: 16px; }
details.fold .fold-empty { padding: 18px; margin: 0; }
details.fold .fold-empty a { color: var(--accent-text); }
details.fold .fold-more {
  display: block;
  padding: 16px 18px;
  color: var(--muted);
  border-top: 1px solid var(--line);
}
details.fold .fold-more:hover { color: var(--accent-text); background: var(--accent-soft); }
.log-pages {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 18px;
  font-size: 13px;
}
.log-pages a { color: var(--muted); }
.log-pages a:hover { color: var(--accent-text); }
.log-pages .is-off { color: var(--muted); opacity: 0.4; }

.dock {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: min(var(--app-max), 100%);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  background: var(--dock-bg);
  border: 0;
  border-top: 1px solid var(--line);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: 0;
  padding: 6px 8px calc(8px + var(--safe-b));
  z-index: 20;
}
.dock-1 { grid-template-columns: 1fr; }
.dock-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.dock-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.dock a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 48px;
  font-size: 11px;
  letter-spacing: 0.01em;
  text-transform: none;
  font-weight: 500;
  color: var(--muted);
  padding: 6px 2px;
  border-radius: var(--radius-pill);
  transition: color var(--ease), background var(--ease);
}
.dock a:hover { color: var(--accent-text); background: var(--accent-soft); }
.dock svg { width: 20px; height: 20px; }
.dock a.on { color: var(--accent-text); }
.dock .fab {
  background: transparent;
  color: inherit;
  border-radius: var(--radius-sm);
  font-weight: 500;
}
/* dock5: round 38 px + that rises 6 px above the 63 px dock. The whole .fab
   link (circle + label, full column, >= 48 px) is the tap target; the circle
   has no hit area of its own. Height + margin-top = 19 px keeps „Pridať“ on
   the other labels' baseline. */
.dock .fab { gap: 4px; overflow: visible; }
.dock .fab .fab-mark {
  width: 38px;
  height: 38px;
  margin-top: -19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 50%;
  box-sizing: border-box;
  pointer-events: none;
}
.dock .fab .fab-mark svg { width: 18px; height: 18px; stroke-width: 1.8; }
.dock .fab .fab-x { display: none; }
.dock .fab.is-close .fab-plus { display: none; }
.dock .fab.is-close .fab-x { display: block; }
.dock .fab .fab-word { color: var(--text); }
.dock .fab:hover { background: transparent; }
.dock .fab.is-close .fab-mark {
  width: 38px;
  height: 38px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
}
.dock .fab.on,
.dock .fab.on .fab-word { color: var(--accent-text); }
html[data-theme="light"] .dock .fab .fab-mark {
  box-shadow: 0 10px 24px rgba(11, 47, 44, 0.18), 0 2px 6px rgba(11, 47, 44, 0.08);
}
.dock-4 a,
.dock-5 a {
  white-space: nowrap;
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
  letter-spacing: 0;
}
@media (max-width: 420px) {
  .dock-4 a,
  .dock-5 a { font-size: 10px; }
  .top { gap: 8px; }
  .top .brand { flex: 1 1 auto; min-width: 0; }
  .top .brand-logo { height: auto; max-height: 40px; max-width: 100%; }
  .top-meta { flex-shrink: 0; }
  .top .badge-early {
    gap: 0;
    padding: 4px;
  }
  .top .badge-early-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* App sidebar: hidden until the desktop breakpoint. */
.side { display: none; }
.side-brand { padding: 0 6px 8px; }
.side .brand-logo { height: 48px; }
.side-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 0 1 auto;
  min-height: 0;
  overflow: auto;
  margin-top: 4px;
}
.side-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
}
.side-link svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.side-link:hover { background: var(--accent-soft); color: var(--text); }
.side-link:focus-visible,
.side .brand:focus-visible,
.side-user-btn:focus-visible,
.side-badge:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.side-link[aria-current="page"] {
  background: var(--surface);
  color: var(--text);
  font-weight: 700;
  border-color: var(--line);
}
.side-link[aria-current="page"] svg { color: var(--accent-text); }
.side-link[aria-current="page"]:hover { background: var(--surface); color: var(--text); }
.side-user {
  margin-top: auto;
  flex-shrink: 0;
  position: relative;
  z-index: 5;
}
.side-user-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  box-shadow: none;
}
.side-user-btn[aria-expanded="true"] { box-shadow: 0 0 0 3px var(--accent-soft); }
.side-avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  overflow: hidden;
  display: block;
}
.side-avatar img,
.side-avatar .avatar-fallback-stack {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.side-user-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.side-user-copy b,
.side-user-copy .tiny {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.side-user-copy b { font-size: 14px; font-weight: 700; color: var(--text); }
.side-user-copy .tiny { color: var(--muted); }
.side .user-menu-panel {
  top: auto;
  bottom: calc(100% + 8px);
  right: auto;
  left: 0;
  width: min(280px, calc(100vw - 32px));
  transform-origin: bottom left;
}
html[data-theme="light"] .side-link[aria-current="page"] {
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(11, 47, 44, 0.08);
}
html[data-theme="light"] .side-user-btn {
  border-color: transparent;
  box-shadow: 0 16px 40px rgba(11, 47, 44, 0.07);
}
html[data-theme="light"] .side-user-btn[aria-expanded="true"] {
  box-shadow: 0 0 0 3px var(--accent-soft);
}
html[data-theme="light"] .side { border-right-color: rgba(11, 47, 44, 0.12); }

/* Badge rows sit under the nav; the profile card keeps margin-top: auto.
   No fill or border — they must stay quieter than the yellow log button. */
.side-badges {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 16px 0 0;
  flex-shrink: 0;
  min-width: 0;
}
h2.side-badges-label {
  margin: 0 0 2px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.2;
  color: var(--muted);
}
.side-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: inherit;
  text-decoration: none;
}
.side-badge:hover {
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text);
}
.side-badge-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.side-badge-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
}
.side-badge-disc {
  box-sizing: border-box;
  padding: 6px;
  border-radius: 50%;
  background: #0b2f2c;
}
.side-badge-disc img {
  width: 20px;
  height: 20px;
}
.side-badge-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.side-badge-copy b {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text);
}
.side-badge-copy span {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--muted);
}

/* Desktop sidebar replaces the dock from 721px.
   Fixed, not sticky: .app uses overflow-x clip, which would cancel sticky. */
@media (min-width: 721px) {
  .app.has-side {
    max-width: none;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: calc(248px + var(--safe-l));
    padding-right: var(--safe-r);
  }
  .app.has-side > .side {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: fixed;
    top: 0;
    left: 0;
    width: calc(248px + var(--safe-l));
    height: 100dvh;
    box-sizing: border-box;
    padding: calc(18px + var(--safe-t)) 14px calc(18px + var(--safe-b)) calc(14px + var(--safe-l));
    border-right: 1px solid var(--line);
    background: var(--bg);
    overflow: visible;
    z-index: 40;
  }
  .app.has-side > .dock { display: none; }
  .app.has-side .top { display: none; }
  .app.has-side .app-body { min-width: 0; }
  .app.has-side .main { padding-bottom: calc(36px + var(--safe-b)); }
  .dash-actions-nav { display: none; }
}

/* Log chooser: desktop menu + mobile sheet. Theme surfaces only. */
.log-menu {
  position: relative;
  z-index: 6;
  margin: 6px 0 8px;
}
.side-log {
  margin: 0;
  width: 100%;
  white-space: nowrap;
}
.side-log svg { width: 18px; height: 18px; flex-shrink: 0; }
.side-log .log-chevron {
  width: 16px;
  height: 16px;
  transition: transform 180ms ease-out;
}
.side-log[aria-expanded="true"] .log-chevron { transform: rotate(180deg); }
.log-menu-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: max(100%, 280px);
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease-out;
}
.log-menu.is-open > .log-menu-panel,
.log-menu-panel.is-closing { display: block; }
.log-menu-panel.is-on {
  opacity: 1;
  pointer-events: auto;
}
.log-menu-panel[hidden] { display: none !important; }
.log-menu-panel:focus,
h2.log-sheet-title:focus { outline: none; }
.log-opt {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 56px;
  padding: 8px;
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
}
/* Only keyboard focus marks an option; pointer/touch open lands on the
   container, so nothing looks selected before a tap (#184). */
@media (hover: hover) {
  .log-opt:hover { background: var(--accent-soft); }
}
.log-opt:focus-visible {
  background: var(--accent-soft);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.log-opt-ico {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.log-opt-ico svg { width: 20px; height: 20px; }
.log-opt-ico.is-charge {
  background: var(--accent-soft);
  color: var(--accent);
}
.log-opt-ico.is-care {
  background: var(--surface-2);
  color: var(--text);
}
.log-opt-ico.o-pr {
  background: var(--mint-soft);
  color: var(--mint);
}
html[data-theme="light"] .log-opt-ico.o-pr {
  background: var(--mint);
  color: var(--mint-ink);
}
.log-opt-copy { min-width: 0; }
.log-opt-copy b {
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
.log-opt-copy span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 500;
  color: var(--muted);
}
.log-kbd {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: 0;
  padding: 0 4px;
}
.log-go {
  width: 18px;
  height: 18px;
  color: var(--muted);
}
.log-sheet[hidden] { display: none !important; }
.log-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.35);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  opacity: 0;
  transition: opacity 180ms ease-out;
}
.log-sheet-card {
  position: fixed;
  z-index: 35;
  left: 12px;
  right: 12px;
  bottom: calc(72px + var(--safe-b));
  margin: 0 auto;
  width: auto;
  max-width: 480px;
  padding: 16px 10px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  opacity: 0;
  transition: opacity 180ms ease-out;
}
.log-sheet.is-on .log-sheet-backdrop,
.log-sheet.is-on .log-sheet-card { opacity: 1; }
h2.log-sheet-title {
  margin: 2px 8px 8px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--text);
}
body.is-log-sheet { overflow: hidden; }
body.is-log-sheet .dock { z-index: 34; }
html[data-theme="light"] .log-menu-panel,
html[data-theme="light"] .log-sheet-card {
  background: var(--surface);
  border-color: transparent;
  box-shadow: 0 16px 40px rgba(11, 47, 44, 0.12);
}
html[data-theme="light"] .log-opt-ico.is-charge {
  background: var(--accent);
  color: var(--accent-ink);
}
html[data-theme="light"] .dock .fab.is-close .fab-mark {
  background: var(--surface);
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(11, 47, 44, 0.08);
}
@media (min-width: 721px) {
  .log-sheet { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .log-menu-panel,
  .log-sheet-backdrop,
  .log-sheet-card,
  .side-log .log-chevron { transition: none; }
}
/* end log chooser */


.hero-actions { display: flex; gap: 8px; margin: 12px 0 6px; }
.hero-actions .btn { width: auto; }
.compare-wrap {
  padding: 0 16px 12px;
}
.compare-wrap .compare {
  margin-top: 0;
  border-top: 0;
  padding-top: 14px;
}
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 0;
  background: transparent;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.compare .box {
  background: transparent;
  border-radius: 0;
  padding: 0 16px 0 0;
  border: 0;
  min-width: 0;
}
.compare .box + .box {
  padding: 0 0 0 16px;
  border-left: 1px solid var(--line);
}
.compare .tiny {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compare .stat {
  margin-top: 8px;
  font-size: 18px;
  line-height: 1.15;
}
.compare-note { margin-top: 8px; }

/* Narrow screens: wrap meter copy between units instead of clipping €/100 km / kWh. */
@media (max-width: 720px) {
  .item-meter .item-main {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 10px;
    min-width: 0;
  }
  .item-meter .item-main .left {
    flex: 1 1 10rem;
    min-width: 0;
  }
  .item-meter .item-main .right {
    flex: 0 1 auto;
    min-width: min-content;
    margin-left: auto;
    white-space: normal;
    overflow: visible;
  }
  .item-meter .item-main .right .num {
    white-space: nowrap;
  }
  .item-meter .item-main .right .tiny {
    white-space: normal;
    overflow-wrap: break-word;
  }
  .dash-meter-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0;
    row-gap: 4px;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }
  .compare-wrap {
    padding: 4px 18px 16px;
  }
}

.auth-wrap {
  max-width: 440px;
  margin: 0 auto;
  padding: calc(48px + var(--safe-t)) 0 20px;
}
.logo-lg { font-size: 28px; font-weight: 500; letter-spacing: -0.04em; display: flex; gap: 10px; align-items: center; }
.auth-wrap .brand { margin: 10px 0 16px; }
section.step { margin-top: 22px; }
.hidden { display: none; }
.tesla-extra, .home-extra { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.tesla-extra[hidden], .home-extra[hidden] { display: none; }
.tesla-tier { margin: 4px 0 18px; }
.tesla-connect {
  margin: 0 0 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--bg);
}
.tesla-connect[hidden] { display: none; }
.tesla-connect.is-on { border-color: var(--accent); }
.tesla-connect .hint { margin: 10px 0 0; }
.tesla-connect .btn { width: auto; margin-top: 12px; }
.tesla-connect .btn + .tiny,
.tesla-connect .btn + .hint { margin-top: 12px; }
.page-head .eyebrow a { color: var(--muted); }
.page-head .eyebrow a:hover { color: var(--accent-text); }
.ev-picker {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin: 4px 0 20px;
}
.ev-picker > .field { margin-bottom: 0; }
.field + .ev-picker { margin-top: 8px; }
.ev-note { margin: 4px 0 18px; }
.logout { margin-top: 28px; }
.session-month { margin: 0 0 18px; }
.session-month .card { margin-bottom: 10px; }
.sess-sum-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.sess-sum h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
}
.pill-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}
.pill-tag[hidden] { display: none; }
.pill-tag.ok { color: var(--mint); }
.pill-tag.bad { color: var(--amber); }
html[data-theme="light"] .pill-tag.ok { color: var(--mint-ink); }
html[data-theme="light"] .pill-tag.bad { color: var(--danger); }
.sess-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0 12px;
}
.sess-stats > div { min-width: 0; }
.sess-stats b {
  display: block;
  font-size: clamp(16px, 4.2vw, 22px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.sess-stats .tiny { display: block; margin-top: 2px; }
.sess-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 64px;
}
.sess-bar {
  flex: 1 1 0;
  min-width: 0;
  height: 3px;
  border-radius: 2px 2px 0 0;
  background: var(--bar-track);
}
.sess-bar.is-on {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  height: max(4px, calc(var(--h) * 1%));
  background: transparent;
}
.sess-bar.is-on > .kpi-seg {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 0;
}
.sess-axis {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}
.chips.chips-x {
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  margin-bottom: 14px;
}
.chips.chips-x::-webkit-scrollbar { display: none; }
.chips.chips-x .chip { flex: 0 0 auto; }
.chip small {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}
.chip.on small { color: var(--accent-ink); }
.card.sess-list { padding: 0; }
.sess-item[hidden],
.sess-toast[hidden],
.sess-sheet .kpi-sheet-row[hidden],
.sess-actions[hidden] { display: none !important; }
button.item.sess-row {
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  align-items: center;
}
.sess-item + .sess-item { border-top: 1px solid var(--line); }
html[data-theme="light"] .sess-item + .sess-item { border-top-color: rgba(11, 47, 44, 0.12); }
button.sess-row:hover,
button.sess-row:focus-visible { background: var(--accent-soft); }
button.sess-row:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--accent-soft);
}
.sess-row .left b,
.sess-row .left .tiny { display: block; }
.sess-row .left b {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sess-row .left .sess-meta {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.sess-row .left .sess-kwh { margin-top: 2px; }
.sess-row .right .num {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.conn-sq {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}
.conn-ac { background: #3b82f6; color: var(--accent-ink); }
.conn-dc { background: var(--accent); color: var(--accent-ink); }
.conn-ufc { background: var(--amber); color: var(--accent-ink); }
.conn-home { background: var(--mint); color: var(--accent-ink); }
/* Connector icons (variant A): wave / bolt / bolt + speed lines. */
.conn-ico { width: var(--s, 20px); height: var(--s, 20px); flex: none; display: block; }
.sess-fallback { display: none; }
.sess-sheet .kpi-sheet-head { align-items: flex-start; }
.sess-sheet .kpi-sheet-head b { flex: 1; min-width: 0; }
.sess-amount {
  margin: 8px 0 4px;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
}
.sess-actions { margin-top: 4px; }
.sess-toast {
  position: fixed;
  z-index: 90;
  left: 16px;
  right: 16px;
  bottom: calc(92px + var(--safe-b) + 12px);
  width: max-content;
  max-width: calc(100vw - 32px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 16px;
  border-radius: var(--radius-pill);
  background: #1c1f24;
  color: #f2f3f5;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  flex-wrap: nowrap;
}
.sess-toast span {
  min-width: 0;
  line-height: 1.35;
}
/* One line at every width: the message ellipsizes, „Späť“ stays on the right. */
.sess-toast [data-save-toast-text],
.sess-toast [data-sess-toast-text],
.sess-toast.prog-undo > span {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sess-toast form,
.sess-toast button { flex: 0 0 auto; }
.sess-toast button[hidden] { display: none !important; }
.sess-toast button {
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: 700;
  min-height: 44px;
  padding: 0 12px;
  cursor: pointer;
  border-radius: var(--radius-pill);
}
.sess-toast button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.sess-toast button:focus:not(:focus-visible),
.sess-toast button.is-quiet-focus:focus-visible { outline: none; box-shadow: none; }
@media (min-width: 721px) {
  .sess-toast { bottom: calc(24px + var(--safe-b)); }
}

.seg.scope-seg {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  min-width: 232px;
  max-width: 100%;
  margin-top: 10px;
}
.seg {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: stretch;
  background: var(--bg);
  border-radius: var(--radius-pill);
  padding: 4px;
  gap: 4px;
  border: 1px solid var(--line);
  overflow: hidden;
}
.seg.period-seg {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.seg.period-seg > button,
.seg.period-seg > a,
.seg.period-seg > span:not([data-seg-thumb]) {
  min-height: 34px;
  padding: 7px 2px;
  font-size: 12px;
}
.seg-thumb {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  margin: 0;
  background: var(--accent);
  border-radius: var(--radius-pill);
  pointer-events: none;
  transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1), width 180ms cubic-bezier(0.2, 0.8, 0.2, 1), height 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.seg > button,
.seg > a,
.seg > span:not([data-seg-thumb]) {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: var(--radius-pill);
  padding: 11px 6px;
  min-height: 40px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--ease);
}
.seg:hover > .on { color: var(--muted); }
.seg > button:hover,
.seg > a:hover,
.seg > span:not([data-seg-thumb]):hover,
.seg:not(:hover) > .on {
  background: transparent;
  color: var(--accent-ink);
}
@media (hover: none), (pointer: coarse) {
  .seg-thumb {
    visibility: hidden;
  }
  .seg > .on,
  .seg:not(:hover) > .on,
  .seg:hover > .on {
    background: var(--accent);
    color: var(--accent-ink);
  }
  .seg > button:hover,
  .seg > a:hover,
  .seg > span:not([data-seg-thumb]):hover {
    background: transparent;
    color: var(--muted);
  }
  .seg > .on:hover {
    background: var(--accent);
    color: var(--accent-ink);
  }
}
@media (prefers-reduced-motion: reduce) {
  .seg-thumb { transition: none !important; }
}

.app.landing-shell { max-width: 1120px; padding-bottom: calc(48px + var(--safe-b)); }

.landing-main { padding: 0 var(--pad-x) 32px; }
.lp-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 calc(-1 * var(--pad-x));
  padding: calc(14px + var(--safe-t)) var(--pad-x) 14px;
  background: transparent;
  border-bottom: 1px solid var(--line);
}
/* Blur on a pseudo-element, same as .top, so a later menu is not trapped in a backdrop-filter box. */
.lp-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--dock-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  pointer-events: none;
}
.lp-nav-links { display: flex; align-items: center; gap: 18px; color: var(--muted); font-size: 14px; flex-shrink: 0; }
.lp-nav-tools,
.lp-nav-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.lp-nav-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 10px;
  color: var(--text);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.1;
  white-space: nowrap;
  border-radius: var(--radius-pill);
}
.lp-nav-login:hover { color: var(--accent-text); }
.lp-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  flex-shrink: 0;
  border: 1px solid var(--line);
  background: var(--surface);
}
.lp-avatar-face,
.lp-avatar .avatar-fallback-stack,
.lp-avatar img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.lp-locale { margin: 0; }
.lp-locale button {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  min-height: 36px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.lp-locale button:hover { color: var(--text); border-color: var(--accent); }
.lp-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  color: var(--accent-ink) !important;
  background: var(--accent);
  font-weight: 700;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: box-shadow var(--ease), filter var(--ease);
}
.lp-login:hover { box-shadow: var(--glow); filter: brightness(1.08); }
.lp-top { padding: clamp(36px, 7vw, 64px) 0 0; }
.lp-hero { padding: 0 0 4px; }
.lp-kicker {
  font-family: var(--font-num);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 14px;
  font-weight: 600;
}
.lp-hero h1 {
  font-family: var(--font-num);
  font-size: clamp(30px, 4.2vw, 44px);
  line-height: 1.18;
  letter-spacing: -0.03em;
  margin: 0 0 18px;
  max-width: none;
  font-weight: 600;
  text-wrap: balance;
}
.lp-sub { color: var(--muted); font-size: clamp(16px, 2vw, 18px); line-height: 1.55; max-width: 36rem; margin: 0 0 28px; }
.lp-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.lp-cta .btn { width: auto; min-width: 180px; }
.lp-hero-grid { display: block; }
.lp-hero-kpi { margin-top: 22px; }
.lp-hero-kpi .kpi-lead-top > span { margin-bottom: 0; }
.lp-hero-kpi-note { font-weight: 500; text-align: right; }
.lp-hero-kpi strong {
  font-size: clamp(48px, 14vw, 56px);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
  margin-top: 6px;
}
.lp-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 10px;
}
.lp-note svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--mint);
}
.lp-preview {
  width: 100%;
  margin: 8px 0 8px;
  padding: 0;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
}
.lp-preview .lp-kpis {
  margin: 0;
  padding: 16px 18px 18px;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lp-preview-bar {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.lp-preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.lp-preview-grid .card { margin: 0; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: transparent; }
.lp-preview-grid .card:last-child { border-right: 0; }
.lp-manifest {
  padding: clamp(48px, 8vw, 80px) 0 12px;
}
.lp-manifest h2 {
  font-family: var(--font-num);
  font-size: clamp(26px, 3.6vw, 36px);
  line-height: 1.2;
  letter-spacing: -0.03em;
  font-weight: 600;
  margin: 0 0 14px;
  color: var(--text);
  text-transform: none;
  text-wrap: balance;
  max-width: 22em;
}
.lp-manifest p { color: var(--muted); font-size: 17px; line-height: 1.55; margin: 0; }
.lp-programs {
  padding: clamp(40px, 7vw, 72px) 0 8px;
  max-width: 40rem;
}
.lp-programs h2 {
  font-family: var(--font-num);
  font-size: clamp(26px, 3.6vw, 36px);
  line-height: 1.2;
  letter-spacing: -0.03em;
  font-weight: 600;
  margin: 0 0 14px;
  text-wrap: balance;
}
.lp-programs p { color: var(--muted); font-size: 17px; line-height: 1.55; margin: 0; }
.lp-showcase {
  padding: clamp(28px, 5vw, 48px) 0 8px;
}
.lp-manifest + .lp-showcase {
  padding-top: clamp(24px, 4vw, 36px);
}
.lp-showcase h2 {
  font-family: var(--font-num);
  font-size: clamp(26px, 3.6vw, 36px);
  line-height: 1.2;
  letter-spacing: -0.03em;
  font-weight: 600;
  margin: 0 0 12px;
  text-wrap: balance;
}
.lp-showcase-body {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
  max-width: 40rem;
  margin: 0 0 24px;
}
.lp-showcase .pub-charts { margin-bottom: 0; }
.lp-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 48px 0 8px;
  padding: 0;
  border: 0;
  align-items: stretch;
}
.lp-stats > div {
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.lp-stats > div:last-child { border-right: 1px solid var(--line); padding-right: 20px; }
.lp-stats strong {
  display: block;
  font-family: var(--font-num);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0;
}
.lp-stats span {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
  min-height: 2.8em;
}
.lp-split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 28px 48px;
  align-items: start;
  padding: clamp(48px, 8vw, 80px) 0 8px;
}
.lp-split h2 {
  font-family: var(--font-num);
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--text);
  text-transform: none;
}
.lp-split p { color: var(--muted); font-size: 16px; line-height: 1.5; margin: 0; }
@media (min-width: 721px) {
  .lp-split-rev > div { order: 2; }
}
.lp-points {
  list-style: none;
  margin: 0;
  padding: 8px 0 0;
}
.lp-points li {
  padding: 14px 0;
  border-top: 1px solid var(--line);
  font-size: 16px;
}
.lp-points li:last-child { border-bottom: 1px solid var(--line); }
.lp-faq { padding: clamp(48px, 8vw, 80px) 0 8px; }
.lp-faq h2 {
  font-family: var(--font-num);
  font-size: clamp(24px, 3.6vw, 32px);
  letter-spacing: -0.03em;
  font-weight: 600;
  margin: 0 0 20px;
  color: var(--text);
  text-transform: none;
  text-wrap: balance;
}
.lp-faq details {
  border-top: 1px solid var(--line);
  padding: 0;
}
.lp-faq details:last-of-type { border-bottom: 1px solid var(--line); }
.lp-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 0;
  font-size: 17px;
  font-weight: 500;
}
.lp-faq summary::-webkit-details-marker,
.lp-faq summary::marker { display: none; content: ""; }
.lp-faq summary:hover { color: var(--accent-text); }
.lp-faq details p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
  max-width: 40rem;
}
.lp-section { padding: 36px 0 8px; }
.lp-section h2, .lp-end h2 {
  text-transform: none;
  letter-spacing: -0.03em;
  font-size: clamp(26px, 3.6vw, 36px);
  color: var(--text);
  margin: 0 0 16px;
  font-weight: 600;
  font-family: var(--font-num);
  text-wrap: balance;
}
.lp-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lp-features .card { margin: 0; }
.lp-features p { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 8px 0 0; }
.lp-list { margin: 0; }
.lp-end { padding: clamp(56px, 10vw, 96px) 0 16px; }
.lp-end .btn { width: auto; min-width: 220px; }
.lp-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 24px 0 calc(10px + var(--safe-b));
  color: var(--muted);
  font-size: 13px;
  border-top: 1px solid var(--line);
  margin-top: 24px;
}

@media (max-width: 720px) {
  .dash-head {
    flex-wrap: wrap;
  }
  .dash-head-nav { width: 100%; }
  .dash-actions {
    width: 100%;
    justify-content: stretch;
  }
  .dash-actions .btn { flex: 1; }
  .page-head { align-items: flex-start; }
  .page-head .btn { width: 100%; }
  .grid-2 { grid-template-columns: 1fr; }
  .ev-picker { grid-template-columns: 1fr; }
  .lp-nav-links a:not(.lp-login):not(.lp-nav-login):not(.lp-avatar) { display: none; }
  .landing-shell .lp-nav .brand-logo,
  .landing-shell .lp-nav .brand-lg .brand-logo {
    height: 40px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
  }
  .landing-shell .lp-nav { gap: 8px; flex-wrap: nowrap; }
  .landing-shell .lp-nav .brand { min-width: 0; flex: 1 1 auto; }
  .landing-shell .lp-nav-links { gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
  .lp-note { justify-content: center; text-align: left; }
  .app.pub .lp-nav {
    gap: 10px;
    min-width: 0;
    padding: calc(10px + var(--safe-t)) 0 10px;
  }
  .app.pub .brand { flex-shrink: 1; min-width: 0; }
  .app.pub .brand-logo,
  .app.pub .brand-lg .brand-logo {
    height: 40px;
    max-width: min(160px, 42vw);
    width: auto;
    object-fit: contain;
    object-position: left center;
  }
  .app.pub .lp-nav-links { gap: 8px; flex-shrink: 0; }
  .app.pub .lp-login {
    padding: 7px 12px;
    font-size: 13px;
    white-space: nowrap;
  }
  .lp-preview-grid, .lp-features, .lp-stats, .lp-split { grid-template-columns: 1fr; }
  .lp-stats { border: 0; }
  .lp-stats > div {
    border: 1px solid var(--line);
    padding: 22px 20px;
  }
  .lp-stats > div:last-child { border-bottom: 1px solid var(--line); }
  .lp-preview-grid .card { border-right: 0; border-bottom: 1px solid var(--line); }
  .lp-cta .btn { width: 100%; }
  .lp-end .btn { width: 100%; }
  .period-menu { max-width: none; }
  .period-menu.is-open > .period-panel { margin-top: 8px; }
  .dash-head form.period-dates,
  .period-dates {
    display: grid;
    grid-template-columns: 1fr;
  }
  .period-date-row {
    grid-template-columns: 1fr 1fr;
  }
  .period-go {
    grid-column: auto;
    width: 100%;
  }
  .seg.period-seg > button,
  .seg.period-seg > a,
  .seg.period-seg > span:not([data-seg-thumb]) {
    min-height: 32px;
    padding: 6px 1px;
    font-size: 11px;
  }
  .when { grid-template-columns: 1fr 1fr; }
  .when input[type="date"] { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .landing-shell .lp-nav {
    flex-wrap: wrap;
    row-gap: 8px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .landing-shell .lp-nav-links { display: contents; }
  .landing-shell .lp-nav-actions {
    order: 2;
    margin-left: auto;
    gap: 2px;
  }
  .landing-shell .lp-nav-tools {
    order: 3;
    flex: 1 1 100%;
    justify-content: flex-end;
  }
  .landing-shell .lp-nav-login { padding: 0 8px; font-size: 13px; }
  .landing-shell .lp-login { padding: 0 12px; font-size: 13px; }
}

@media (max-width: 640px) {
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .kpi:first-child { grid-column: 1 / -1; }
  .lp-preview .lp-kpis { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .top-house { display: none; }
  .top .brand-logo,
  .brand-lg .brand-logo {
    height: 40px;
  }
}

@media (min-width: 900px) {
  .dash-split {
    grid-template-columns: 1.05fr 0.95fr;
    margin-top: 8px;
  }
  .dash-col > h2:first-child { margin-top: 26px; }
}

@media (min-width: 1080px) {
  .dash-desk {
    grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr);
    gap: 24px;
    align-items: start;
  }
  .dash-desk .dash-split {
    grid-template-columns: 1fr;
    margin-top: 0;
  }
  .dash-desk-feed > .dash-feed-head { margin-top: 28px; }
  .kpi-grid { grid-template-columns: repeat(4, 1fr); }
  .kpi:first-child { grid-column: auto; }
  .lp-preview .lp-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
    gap: clamp(28px, 4vw, 48px);
    align-items: center;
  }
  .lp-hero-kpi { margin-top: 0; }
  .lp-hero-kpi strong { font-size: clamp(64px, 6vw, 88px); }
  .lp-note { justify-content: flex-start; }
}
.kpi-overview {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}
.kpi-overview > .kpi-lead {
  grid-column: 1 / -1;
  position: relative;
  padding: 12px 16px 14px 12px;
  text-align: left;
}
.kpi-overview .kpi-lead-top {
  align-items: flex-start;
  justify-content: flex-start;
  min-height: 0;
  margin-bottom: 4px;
}
.kpi-overview .kpi-lead-top > span {
  font-size: 12px;
  line-height: 1.25;
}
.kpi-overview .kpi-info {
  position: absolute;
  top: 12px;
  right: 12px;
}
.kpi-overview > .kpi-lead > strong {
  margin: 0;
  text-align: left;
  font-size: clamp(30px, 8vw, 40px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}
.kpi-strip {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: none;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-content: start;
  justify-items: stretch;
  overflow: hidden;
  min-width: 0;
}
.kpi-strip .kpi-cell {
  grid-column: span 2;
  grid-row: span 3;
  display: grid;
  grid-template-rows: subgrid;
  align-items: end;
  justify-items: start;
  row-gap: 0;
  padding: 12px 12px 12px 12px;
  min-width: 0;
  position: relative;
  text-align: left;
}
.kpi-strip.n5 .kpi-cell:nth-child(n+4) { grid-column: span 3; }
.kpi-strip .kpi-cell + .kpi-cell::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: var(--line);
}
.kpi-strip .kpi-cell:nth-child(4)::before { display: none; }
.kpi-strip .kpi-cell:nth-child(n+4)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--line);
}
.kpi-strip .kpi-cell:nth-child(4)::after { left: 12px; }
.kpi-strip .kpi-cell:last-child::after { right: 12px; }
.kpi-cell-lbl {
  align-self: end;
  justify-self: start;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.25;
  text-align: left;
  overflow-wrap: normal;
  word-break: normal;
}
.kpi-cell-balance .kpi-cell-lbl {
  letter-spacing: -0.01em;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.kpi-cell-num {
  display: block;
  align-self: end;
  justify-self: start;
  margin-top: 4px;
  max-width: 100%;
  font-family: var(--font-num);
  font-size: clamp(15px, 4.6vw, 20px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-align: left;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.kpi-unit {
  margin-left: 0.28em;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.kpi-cell-aside {
  display: block;
  align-self: start;
  justify-self: start;
  margin-top: 3px;
  max-width: 100%;
  font-size: 12px;
  font-weight: 500;
  font-style: normal;
  color: var(--muted);
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: break-word;
}
@media (max-width: 400px) {
  .kpi-strip .kpi-cell { padding-left: 8px; padding-right: 8px; }
  .kpi-cell-aside { font-size: 11px; }
}
.kpi-pair {
  display: flex;
  flex-direction: column;
  align-self: end;
  justify-self: start;
  gap: 1px;
  margin-top: 4px;
  min-width: 0;
  max-width: 100%;
}
.kpi-pair-line {
  display: block;
  max-width: 100%;
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.25;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}
.kpi-lead .kpi-rate-hint {
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--accent-ink);
}
html[data-theme="light"] .kpi-strip .kpi-cell + .kpi-cell::before,
html[data-theme="light"] .kpi-strip .kpi-cell:nth-child(n+4)::after {
  background: rgba(11, 47, 44, 0.12);
}
/* Prepaid label stays 12px. On a narrow cell it wraps between words.
   Page inset and cell padding stay put so the card edges stay visible. */
@media (min-width: 1080px) {
  .kpi-overview {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    align-items: stretch;
  }
  .kpi-overview > .kpi-lead { grid-column: auto; }
  .kpi-overview > .kpi-lead {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 16px 16px 14px 16px;
    text-align: left;
  }
  .kpi-overview .kpi-lead-top {
    display: flex;
    align-items: flex-start;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    min-height: 0;
    margin-bottom: 4px;
  }
  .kpi-overview .kpi-info { top: 16px; right: 16px; }
  .kpi-overview > .kpi-lead > strong {
    flex: 0 0 auto;
    margin: 0;
    text-align: left;
    font-size: 40px;
    line-height: 1;
  }
  .kpi-overview .kpi-lead-foot { flex: 0 0 auto; }
  .kpi-strip { align-content: start; }
  .kpi-strip .kpi-cell { padding: 16px 16px 14px 16px; text-align: left; }
  .kpi-strip.n5 .kpi-cell:nth-child(n+4) { grid-column: span 3; }
  .kpi-strip .kpi-cell:nth-child(4)::before { display: none; }
  .kpi-strip .kpi-cell:nth-child(n+4)::after { display: block; }
  .kpi-strip .kpi-cell:nth-child(4)::after { left: 16px; }
  .kpi-strip .kpi-cell:last-child::after { right: 16px; }
  .kpi-strip .kpi-cell + .kpi-cell::before { top: 16px; bottom: 14px; }
  .kpi-cell-num { font-size: 24px; margin-top: 4px; }
  .kpi-pair-line { font-size: 13px; letter-spacing: -0.04em; }
}
@media (prefers-reduced-motion: reduce) {
  .kpi-explain,
  .kpi-explain .share-backdrop { transition: none; }
}

.place-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}
.place-row input {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  max-width: 100%;
}
.place-row .btn-mini {
  flex: 0 0 auto;
  height: auto;
  min-height: 44px;
  padding: 0 12px;
  align-self: stretch;
  white-space: nowrap;
}
.place-status { margin: 10px 0 4px; }
.place-status.is-on { color: var(--accent-text); }

.ops-map {
  height: min(58vh, 480px);
  min-height: 260px;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-2);
  z-index: 1;
}
.ops-map-note { margin: 10px 0 0; }
.ops-map + .ops-map-note + .list { margin-top: 4px; }

html[data-theme="light"] .top,
html[data-theme="light"] .lp-nav {
  background: transparent;
  border-color: rgba(11, 47, 44, 0.12);
}
html[data-theme="light"] .lp-note svg { color: var(--mint-ink); }
html[data-theme="light"] .lp-avatar {
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(11, 47, 44, 0.08);
}
html[data-theme="light"] .dock {
  background: var(--dock-bg);
  border-color: rgba(11, 47, 44, 0.12);
}
html[data-theme="light"] .card,
html[data-theme="light"] .kpi,
html[data-theme="light"] .kpi-strip,
html[data-theme="light"] details.fold,
html[data-theme="light"] .flash,
html[data-theme="light"] .tesla-connect {
  border-color: rgba(11, 47, 44, 0.12);
  box-shadow: 0 16px 40px rgba(11, 47, 44, 0.07);
}
html[data-theme="light"] .tesla-connect {
  background: var(--surface);
}
html[data-theme="light"] .tesla-connect.is-on {
  border-color: var(--accent);
}
html[data-theme="light"] .kpi-lead {
  border-color: transparent;
}
html[data-theme="light"] .theme-btn,
html[data-theme="light"] .period-shift {
  background: #fff;
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(11, 47, 44, 0.08);
}
html[data-theme="light"] .user-menu-panel {
  background: #fff;
  color: var(--text);
  -webkit-text-fill-color: currentColor;
  border-color: transparent;
  box-shadow: 0 18px 40px rgba(11, 47, 44, 0.14);
}
html[data-theme="light"] .user-menu-panel-inner {
  background: transparent;
  color: var(--text);
  -webkit-text-fill-color: currentColor;
}
html[data-theme="light"] .period-seg {
  background: #fff;
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(11, 47, 44, 0.08);
}
html[data-theme="light"] .period-date input[type="date"],
html[data-theme="light"] .period-go {
  background: #fff;
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(11, 47, 44, 0.05);
}
html[data-theme="light"] .theme-btn:hover,
html[data-theme="light"] .period-shift:hover {
  background: var(--accent-soft);
  color: var(--accent-text);
  border-color: var(--accent);
}
html[data-theme="light"] .period-shift.is-off[aria-disabled="true"]:hover {
  background: var(--surface);
  border-color: transparent;
  color: var(--text);
  box-shadow: 0 8px 18px rgba(11, 47, 44, 0.08);
}
html[data-theme="light"] .period-inline .period-summary {
  background: var(--surface);
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(11, 47, 44, 0.08);
}
html[data-theme="light"] .period-inline .period-menu.is-open > .period-panel {
  border-color: transparent;
  box-shadow: 0 16px 40px rgba(11, 47, 44, 0.12);
}
html[data-theme="light"] .theme-btn-danger:hover {
  background: rgba(239, 107, 107, 0.12);
  color: var(--danger);
  border-color: var(--danger);
}
html[data-theme="light"] .btn.danger,
html[data-theme="light"] .btn-mini.danger,
html[data-theme="light"] .btn.ghost.danger {
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--danger);
}
html[data-theme="light"] .btn.danger:hover,
html[data-theme="light"] .btn-mini.danger:hover,
html[data-theme="light"] .btn.ghost.danger:hover {
  background: rgba(239, 107, 107, 0.12);
  color: var(--danger);
  border-color: var(--danger);
}
html[data-theme="light"] .chip {
  background: var(--surface-2);
  color: var(--text);
  border-color: color-mix(in srgb, var(--mint-ink) 55%, #fff);
}
html[data-theme="light"] label.chip:has(input:checked),
html[data-theme="light"] .chip.on {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
html[data-theme="light"] .badge-early {
  background: color-mix(in srgb, var(--tip) 16%, #fff);
  color: var(--tip-ink);
  border-color: var(--tip-line);
  box-shadow: 0 8px 20px var(--tip-soft);
}
html[data-theme="light"] .sync-stamp {
  background: #fff;
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(11, 47, 44, 0.07);
}
html[data-theme="light"] .seg { background: #fff; border-color: transparent; }
html[data-theme="light"] .field input,
html[data-theme="light"] .field select,
html[data-theme="light"] .field textarea,
html[data-theme="light"] .when input,
html[data-theme="light"] .when select {
  background: #fff;
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(11, 47, 44, 0.05);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
  .seg-thumb { transition: none !important; }
  .btn:hover, .btn-mini:hover, .period-shift:hover, .theme-btn:hover,
  .dock a:hover, .country-item:hover, label.chip:hover, .lp-login:hover, a.card:hover {
    transform: none;
    box-shadow: none;
  }
}

.lp-calc-link { margin: 18px 0 0; }
.lp-calc-link a { color: var(--muted); }
.lp-calc-link a:hover { color: var(--accent-text); }
.lp-nav-links a[aria-current="page"] { color: var(--text); font-weight: 600; }

.calc-hero { padding: clamp(32px, 7vw, 64px) 0 8px; }
.calc-hero h1 {
  font-family: var(--font-num);
  font-size: clamp(28px, 4.2vw, 40px);
  line-height: 1.18;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
  max-width: none;
  font-weight: 600;
  text-wrap: balance;
}
.calc-hero .lp-sub { margin-bottom: 8px; }
.calc-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 20px 0 12px;
  align-items: start;
}
.calc-inputs { min-width: 0; }
.calc-panel,
.calc-result {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  min-width: 0;
}
.calc-panel { padding: 28px 24px 22px; }
.calc-result { padding: 28px 24px 24px; }
html[data-theme="light"] .calc-panel,
html[data-theme="light"] .calc-result {
  border-color: transparent;
  box-shadow: 0 12px 32px rgba(11, 47, 44, 0.08);
}
.calc-hint { margin: 8px 0 20px; }
.calc-slider {
  display: block;
  margin: 0 0 28px;
}
.calc-slider-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--muted);
}
.calc-slider-top strong {
  color: var(--text);
  font-family: var(--font-num);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  text-align: right;
}
.calc-slider input[type="range"] {
  --fill: 50%;
  --calc-track: #3a3a3a;
  --calc-fill: var(--accent);
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;
  background: transparent;
  border-radius: var(--radius-pill);
  outline: none;
  margin: 0;
  padding: 0;
  cursor: pointer;
}
html[data-theme="light"] .calc-slider input[type="range"] {
  --calc-track: rgba(11, 47, 44, 0.28);
}
.calc-slider input[type="range"]:focus-visible {
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.calc-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: var(--radius-pill);
  background: linear-gradient(to right, var(--calc-fill) var(--fill), var(--calc-track) var(--fill));
}
.calc-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--surface);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}
html[data-theme="light"] .calc-slider input[type="range"]::-webkit-slider-thumb {
  border-color: #fff;
  box-shadow: 0 2px 10px rgba(11, 47, 44, 0.28);
}
.calc-slider input[type="range"]::-moz-range-track {
  height: 8px;
  background: var(--calc-track);
  border-radius: var(--radius-pill);
}
.calc-slider input[type="range"]::-moz-range-progress {
  height: 8px;
  background: var(--calc-fill);
  border-radius: var(--radius-pill);
}
.calc-slider input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--surface);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}
html[data-theme="light"] .calc-slider input[type="range"]::-moz-range-thumb {
  border-color: #fff;
  box-shadow: 0 2px 10px rgba(11, 47, 44, 0.28);
}
.calc-country-field { margin-bottom: 20px; }
.calc-panel .field { margin-bottom: 18px; }
html[data-theme="light"] .calc-panel .field input,
html[data-theme="light"] .calc-panel .field select {
  background: var(--surface-2);
  border: 1px solid var(--line);
  box-shadow: none;
}
.calc-more {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.calc-more > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  color: var(--hint);
  font-size: 14px;
  font-weight: 500;
  padding: 12px 0 4px;
  width: fit-content;
}
.calc-more > summary::-webkit-details-marker,
.calc-more > summary::marker { display: none; content: ""; }
.calc-more > summary::after {
  content: "";
  width: 0.42em;
  height: 0.42em;
  flex-shrink: 0;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-top: -0.12em;
}
.calc-more[open] > summary::after {
  transform: rotate(-135deg);
  margin-top: 0.12em;
}
.calc-more > summary:hover { color: var(--accent-text); }
.calc-more[open] > summary { color: var(--text); }
.calc-slider-hint {
  display: block;
  margin: -8px 0 12px;
  line-height: 1.35;
}
.calc-mix-dc { margin: 0 0 8px; }
.calc-advanced {
  display: grid;
  gap: 4px;
  padding: 8px 0 4px;
}
.calc-advanced .field { margin-bottom: 14px; }
.calc-savings-caption {
  margin: 0 0 8px;
  letter-spacing: 0.01em;
}
.calc-savings {
  font-family: var(--font-num);
  font-size: clamp(44px, 8vw, 68px);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.95;
  margin: 0 0 22px;
  font-variant-numeric: tabular-nums;
}
.calc-savings.is-ev { color: var(--mint); }
.calc-savings.is-ice { color: var(--amber); }
.calc-savings.is-even { color: var(--text); }
html[data-theme="light"] .calc-savings.is-ev { color: var(--mint-ink); }
.calc-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 0 0 20px;
}
.calc-compare span {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}
.calc-compare strong {
  display: block;
  font-family: var(--font-num);
  font-size: 20px;
  letter-spacing: -0.03em;
  font-weight: 600;
}
.calc-compare em {
  display: block;
  margin-top: 4px;
  font-style: normal;
}
.calc-break {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  border-top: 1px solid var(--line);
}
.calc-break li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.calc-break span { color: var(--muted); }
.calc-break strong { font-weight: 600; }
.calc-disclaimer { margin: 0 0 18px; line-height: 1.45; white-space: pre-line; }
.calc-result .btn { width: 100%; margin-top: 4px; }

@media (min-width: 840px) {
  .calc-layout {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 32px 48px;
  }
  .calc-result {
    position: sticky;
    top: 24px;
  }
}

.calc-countries {
  display: flex;
  gap: 6px;
  margin: 0 0 22px;
}
.calc-countries button {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  border-radius: var(--radius-sm);
  padding: 10px 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.calc-countries button:hover {
  color: var(--text);
  border-color: var(--accent);
}
.calc-countries button.is-active {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.calc-country-short { display: none; }
@media (max-width: 560px) {
  .calc-country-full { display: none; }
  .calc-country-short { display: inline; }
  .calc-countries button { padding: 10px 4px; font-size: 12px; }
}
html[data-theme="light"] .calc-countries button {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--muted);
}
html[data-theme="light"] .calc-countries button.is-active {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

.calc-home-rate {
  display: flex;
  align-items: center;
  gap: 10px;
}
.calc-home-rate input {
  flex: 1;
  min-width: 0;
}
.calc-home-rate em {
  font-style: normal;
  color: var(--muted);
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
}

.calc-mix { margin: 4px 0 8px; }
.calc-mix[hidden],
.calc-mix-one[hidden],
.calc-slider[hidden] { display: none !important; }
.calc-mix-live {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--text);
}
.calc-mix-live strong {
  font-family: var(--font-num);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.calc-mix .calc-slider { margin-bottom: 18px; }
.calc-mix-one { margin: 0 0 18px; }
html[data-theme="light"] .calc-panel input[type="range"] {
  --calc-track: rgba(11, 47, 44, 0.28);
}

.calc-fuel-type {
  margin: 4px 0 14px;
}
.calc-fuel-note {
  margin: 8px 0 14px;
  line-height: 1.45;
}

.pub-private {
  margin: 8px 0 0;
  color: var(--accent-text);
}
.pub-id {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 28px 0 16px;
  padding: 18px 18px;
}
.card.pub-id {
  overflow: visible;
}
.pub-avatar-wrap {
  position: relative;
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  overflow: hidden;
  border-radius: 50%;
}
.pub-avatar {
  width: 96px;
  height: 96px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  display: block;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 50%;
}
.pub-avatar.avatar-fallback {
  background: transparent;
  border: 0;
}
.pub-who {
  min-width: 0;
  overflow: visible;
}
.pub-who h1 {
  font-size: clamp(28px, 5vw, 40px);
  margin: 0 0 6px;
  letter-spacing: -0.045em;
  max-width: none;
}
.pub-preview-name {
  display: block;
  font-size: 18px;
  letter-spacing: -0.03em;
  margin: 0 0 4px;
}
.pub-handle-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 4px;
  overflow: visible;
}
.pub-handle {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 20px;
}
.pub-edit {
  text-decoration: none;
}
.pub-handle-dot {
  color: var(--muted);
  font-size: 15px;
  line-height: 20px;
  opacity: 0.45;
}
.pub-icons {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pub-icon-founder { order: -1; }
.pub-icon {
  position: relative;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}
.pub-icon-founder {
  width: 22px;
  height: 30px;
}
.pub-icon-founder-mark {
  display: flex;
  width: 22px;
  height: 30px;
  align-items: center;
  justify-content: center;
  outline: none;
}
.pub-icon-founder-mark:focus-visible {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  border-radius: 4px;
}
.pub-icon-founder-mark img {
  width: 22px;
  height: 30px;
  object-fit: contain;
  display: block;
}
.pub-icon-disc {
  display: flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  background: #0b2f2c;
  border-radius: 50%;
  outline: none;
}
.pub-icon-disc:focus-visible {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}
.pub-icon-disc img {
  width: 12px;
  height: 12px;
  object-fit: contain;
  display: block;
}
.pub-icon-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  /* Always dark tooltip — readable on mint and dark pages */
  background: #1c1f24;
  color: #f2f3f5;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 6;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.pub-icon-tip b {
  font-weight: 600;
  color: #f2f3f5;
}
.pub-icon-tip em {
  font-style: normal;
  font-weight: 400;
  color: #b5bac1;
}
.pub-icon-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: #1c1f24;
}
.pub-icon:hover .pub-icon-tip,
.pub-icon:focus-within .pub-icon-tip {
  opacity: 1;
}
.pub-stats-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
}
.pub-stats-head .tiny { margin: 0; }
.pub-range-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  justify-content: flex-end;
}
.pub-share {
  position: relative;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-decoration: none;
  transition: border-color var(--ease), color var(--ease), background var(--ease);
}
.pub-share:hover,
.pub-share:focus-visible {
  border-color: var(--accent);
  color: var(--accent-text);
  background: var(--accent-soft);
}
.pub-share svg { width: 15px; height: 15px; }
.pub-share:hover .pub-icon-tip,
.pub-share:focus-visible .pub-icon-tip { opacity: 1; }
body.share-lock { overflow: hidden; }
.share-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  transition: opacity 180ms ease;
}
.share-modal[hidden] { display: none; }
.share-modal.is-on { opacity: 1; }
.share-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 10, 0.74);
}
html[data-theme="light"] .share-backdrop { background: rgba(11, 47, 44, 0.58); }
.share-layout {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 100%;
  max-height: 100%;
}
.share-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 100%;
  max-height: 100%;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}
.share-dialog:focus { outline: none; }
.share-frame {
  position: relative;
  width: min(860px, calc(90vh - 80px), calc(100vw - 120px));
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-2);
}
@supports (height: 100dvh) {
  .share-frame { width: min(860px, calc(90dvh - 80px), calc(100vw - 120px)); }
}
.share-x { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28); }
@media (max-width: 720px) {
  .share-layout { flex-direction: column-reverse; align-items: flex-end; }
  .share-frame { width: min(calc(100vw - 32px), calc(100vh - 148px)); }
  @supports (height: 100dvh) {
    .share-frame { width: min(calc(100vw - 32px), calc(100dvh - 148px)); }
  }
}
.share-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.share-img[hidden] { display: none; }
.share-state {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}
.share-state[hidden] { display: none; }
.share-spin {
  width: 28px;
  height: 28px;
  border: 3px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: share-spin 800ms linear infinite;
}
@keyframes share-spin { to { transform: rotate(360deg); } }
.share-retry {
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.share-retry:hover,
.share-retry:focus-visible { border-color: var(--accent); color: var(--accent-text); }
.share-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.share-act {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--ease), color var(--ease), background var(--ease);
}
.share-act.share-act-label {
  width: auto;
  min-height: 40px;
  height: auto;
  padding: 0 14px 0 12px;
  gap: 6px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.share-act[hidden] { display: none; }
.share-act:hover,
.share-act:focus-visible {
  border-color: var(--accent);
  color: var(--accent-text);
  background: var(--accent-soft);
}
.share-act svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) {
  .share-modal { transition: none; }
  .share-spin { animation: none; }
}
.seg.pub-range {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: var(--surface);
  flex: 1;
  max-width: 560px;
}
.seg.pub-range > a {
  min-height: 32px;
  padding: 6px 4px;
  font-size: 12px;
}
.pub-charts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 32px;
}
.pub-mix { grid-column: 1 / -1; margin: 0; }
.pub-chart { padding: 16px 16px 14px; }
.pub-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 16px;
  flex-wrap: wrap;
  margin: 0 0 10px;
}
.pub-chart-head .tiny { margin: 0; }
.pub-chart-readout:empty { display: none; }
.pub-chart-readout {
  margin: 0;
  font-family: var(--font-num);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-align: right;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
.pub-spark {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  aspect-ratio: 320 / 120;
  margin-inline: auto;
  color: var(--accent);
  overflow: visible;
  touch-action: manipulation;
  cursor: pointer;
}
.pub-spark-fill {
  fill: currentColor;
  opacity: 0.12;
  stroke: none;
  pointer-events: none;
}
.pub-spark-line { pointer-events: none; }
.pub-spark-y {
  fill: var(--muted);
  font-family: inherit;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  user-select: none;
}
.pub-chart-cost .pub-spark { color: var(--mint); }
.pub-chart-km .pub-spark { color: var(--ice); }
.pub-dot-hit {
  fill: transparent;
  cursor: pointer;
}
.pub-dot-mark {
  fill: var(--surface);
  stroke: currentColor;
  stroke-width: 2.2;
  pointer-events: none;
}
.pub-dot.is-on .pub-dot-mark,
.pub-dot:hover .pub-dot-mark,
.pub-dot:focus-within .pub-dot-mark {
  fill: currentColor;
}
html[data-theme="light"] .pub-chart-cost .pub-spark { color: var(--mint-ink); }
html[data-theme="light"] .pub-chart-km .pub-spark { color: #2a6280; }
html[data-theme="light"] .pub-spark-fill { opacity: 0.16; }
html[data-theme="light"] .landing-shell .pub-chart,
html[data-theme="light"] .landing-shell .pub-mix {
  border-color: color-mix(in srgb, var(--mint-ink) 16%, var(--line));
  box-shadow: 0 8px 22px rgba(11, 47, 44, 0.06);
}
.pub-chart-axis {
  display: flex;
  justify-content: space-between;
  max-width: 380px;
  margin: 4px auto 0;
  /* Plot edges in the 320-unit viewBox: first point at 44, last at 302.
     The first date starts there; the last date ends there. */
  padding: 0 calc(100% * 18 / 320) 0 calc(100% * 44 / 320);
  font-size: 11px;
  color: var(--muted);
}
.pub-chart-axis span {
  white-space: nowrap;
}
.pub-chart-axis span:first-child { text-align: left; }
.pub-chart-axis span:last-child { text-align: right; }
@media (max-width: 900px) {
  .pub-charts { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .pub-stats-head { flex-direction: column; align-items: stretch; }
  .pub-range-row { justify-content: stretch; }
  .seg.pub-range { max-width: none; }
  .pub-charts { grid-template-columns: 1fr; }
  .pub-chart-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .pub-chart-readout { font-size: 16px; text-align: left; }
}
html:has(.share-view),
html:has(.share-view) body,
.app.share-view,
.app.share-view .main {
  background: var(--bg);
  color: var(--text);
}
.app.share-view { padding-bottom: 32px; }
.share-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 8px 0 24px;
}
.share-card {
  width: min(1080px, 100%);
  height: auto;
  display: block;
}
.share-foot {
  display: flex;
  justify-content: center;
}
.share-dl {
  position: relative;
  width: 40px;
  height: 40px;
  border: 1px solid var(--text);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background var(--ease), color var(--ease);
}
.share-dl:hover,
.share-dl:focus-visible {
  background: var(--text);
  color: var(--bg);
}
.share-dl svg { width: 16px; height: 16px; }
.share-dl:hover .pub-icon-tip,
.share-dl:focus-visible .pub-icon-tip { opacity: 1; }
.pub-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px 16px;
  margin: 0 0 16px;
  padding: 18px 18px;
}
.pub-cars-card {
  padding: 14px;
  margin-bottom: 16px;
}
.pub-cars-card .pub-cars {
  margin-bottom: 0;
}
.pub-cars-card .pub-car {
  background: var(--surface-2);
}
.pub-stat { min-width: 0; }
.pub-stat-cost { min-width: 0; }
.pub-stat strong {
  display: block;
  font-family: var(--font-num);
  font-size: clamp(22px, 4.2vw, 34px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pub-stat span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
}
.pub-sub { margin: -4px 0 12px; }
.pub-cars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 28px;
}
.pub-car {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: 14px 14px 12px;
  min-width: 0;
}
.pub-car-mark {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-num);
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 10px;
  border-radius: 12px;
}
.pub-car-mark img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}
.pub-car b { display: block; margin-bottom: 4px; }
.pub-cta { margin: 36px 0 12px; }
.pub-cta .btn { width: auto; }
.pub-cta .tiny { margin-top: 10px; }

@media (max-width: 800px) {
  .pub-stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .pub-stat-cost { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .pub-cars { grid-template-columns: 1fr; }
  .pub-stats { grid-template-columns: 1fr 1fr; }
  .pub-id { align-items: flex-start; }
}


.profile-edit { margin: 0; }
.profile-edit-grid {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 28px 36px;
  align-items: start;
  max-width: 720px;
}
.profile-edit-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.profile-edit-photo > input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}
.profile-edit-photo-frame {
  position: relative;
  width: 112px;
  height: 112px;
  display: block;
}
.profile-edit-photo-frame .pub-avatar,
.profile-edit-photo-frame .avatar-fallback-stack {
  width: 112px;
  height: 112px;
}
.profile-edit-photo-frame .pub-avatar-wrap { width: 112px; height: 112px; }
.profile-edit-cam {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--btn-text);
  border: 2px solid var(--bg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
}
.profile-edit-who { margin-bottom: 18px; }
.profile-edit-who strong { display: block; font-size: 20px; letter-spacing: -0.03em; }
.url-field {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
  min-height: 44px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
html[data-theme="light"] .url-field { background: var(--surface); }
.url-field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field .url-prefix {
  display: inline;
  flex: 0 0 auto;
  margin: 0;
  padding: 0 2px 0 14px;
  color: var(--muted);
  font-size: 14px;
  line-height: 44px;
  white-space: nowrap;
}
.field .url-field input {
  display: block;
  flex: 1 1 auto;
  width: auto;
  min-width: 4ch;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  min-height: 44px;
  padding: 0 8px 0 0;
}
.field .url-status {
  display: inline;
  flex: 0 0 auto;
  margin: 0;
  padding: 0 14px 0 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 44px;
  white-space: nowrap;
}
.field .url-status.ok { color: var(--mint); }
html[data-theme="light"] .field .url-status.ok { color: var(--mint-ink); }
.field .url-status.err { color: var(--danger); }
.field-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}
.field-meta .ok { color: var(--mint); }
.field-meta .err { color: var(--danger); }
.pub-bio {
  margin: 8px 0 0;
  max-width: 36rem;
  color: var(--text);
  font-size: 15px;
  line-height: 1.45;
  white-space: pre-wrap;
}
@media (max-width: 700px) {
  .profile-edit-grid { grid-template-columns: 1fr; }
  .profile-edit-photo { align-items: flex-start; }
  .page-head .btn { width: auto; }
}

.pub-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 10px 0 6px;
}
.pub-actions .pub-edit { margin: 0; }
.pub-recap-chip {
  display: inline-flex;
  align-items: center;
  margin: 4px 0 0;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}
.pub-recap-chip:hover { filter: brightness(1.08); }
body.wrap-lock { overflow: hidden; }
.wrap-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px 40px;
  overflow: auto;
  background: rgba(8, 8, 10, 0.72);
}
.wrap-overlay[hidden] { display: none; }
.wrap-modal {
  width: min(420px, 100%);
  margin: auto;
  padding: 18px 16px 20px;
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}
.wrap-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.wrap-modal-head h2 {
  margin: 0;
  font-size: 20px;
  letter-spacing: -0.03em;
}
.wrap-theme-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 12px 0 14px;
}
.wrap-theme-caption {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.wrap-theme-nav {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.wrap-theme-nav:disabled {
  opacity: 0.35;
  cursor: default;
}
.wrap-theme-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wrap-theme-dot {
  width: 14px;
  height: 14px;
  padding: 0;
  border-radius: 999px;
  border: 2px solid transparent;
  background: var(--wrap-swatch, #ffd000);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.wrap-theme-dot:hover {
  transform: scale(1.1);
}
.wrap-theme-dot.on {
  box-shadow: 0 0 0 2px var(--text), inset 0 0 0 1px rgba(0, 0, 0, 0.2);
  transform: scale(1.15);
}
.wrap-theme-name { margin: 0; color: var(--muted); }
.wrap-theme-strip-page { margin: 10px 0 16px; max-width: 420px; }
.wrap-stage, .wrap-page-stage {
  background: #111112;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #2c2c32;
}
.wrap-stage canvas, .wrap-page-stage canvas {
  display: block;
  width: 100%;
  height: auto;
}
.wrap-page-stage { max-width: 420px; margin: 18px 0; }
.wrap-actions, .wrap-page-actions {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}
.wrap-kicker { margin: 8px 0 0; color: var(--accent-text); font-weight: 600; }
.wrap-copy-status { color: var(--accent-text); }
@media (min-width: 640px) {
  .wrap-actions, .wrap-page-actions { grid-template-columns: 1fr 1fr; }
  .wrap-actions .btn:first-child, .wrap-page-actions .btn:first-child { grid-column: 1 / -1; }
}


/* --- tarify browse --- */
.tarify-layout {
  max-width: 920px;
  margin: 0 auto 64px;
  padding: 0 20px 40px;
}
.tarify-country {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  align-items: flex-start;
  justify-content: space-between;
  margin: 8px 0 28px;
}
.tarify-country .field {
  flex: 1 1 220px;
  margin-bottom: 0;
  max-width: 320px;
}
.tarify-europe {
  flex: 0 0 auto;
  width: min(240px, 42vw);
  margin-left: auto;
}
.tarify-europe-map {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
}
.tarify-europe-map path {
  vector-effect: non-scaling-stroke;
  stroke-linejoin: miter;
  stroke-linecap: butt;
}
.tarify-europe-hit {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.tarify-europe-other path {
  fill: var(--surface-2);
  stroke: var(--line);
  stroke-width: 0.8;
  pointer-events: none;
  opacity: 0.45;
}
.tarify-europe-hit path {
  fill: var(--surface-2);
  stroke: var(--line);
  stroke-width: 1.1;
  transition: fill var(--ease), stroke var(--ease);
}
.tarify-europe-hit:hover path,
.tarify-europe-hit:focus-visible path {
  fill: var(--accent-soft);
  stroke: var(--accent);
}
.tarify-europe-hit.is-active path {
  fill: var(--accent);
  stroke: var(--accent);
}
.tarify-europe-hit:focus-visible {
  outline: none;
}
html[data-theme="light"] .tarify-europe-other path {
  opacity: 0.55;
}
@media (max-width: 720px) {
  .tarify-country {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .tarify-country .field {
    flex: 1 1 auto;
    max-width: none;
    width: 100%;
  }
  .tarify-europe {
    width: min(100%, 300px);
    margin: 0 auto;
  }
  .tarify-europe-hit path {
    stroke-width: 1.7;
  }
}
@media (hover: none), (pointer: coarse) {
  .tarify-europe-hit path {
    stroke-width: 1.8;
  }
}
.tarify-calc-link {
  margin-bottom: 2px;
  white-space: nowrap;
}
.tarify-section-title {
  font-size: 15px;
  font-weight: 600;
  margin: 28px 0 12px;
  color: var(--muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.tarify-operator { margin-bottom: 22px; }
.tarify-op-name {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 18px;
  font-weight: 650;
  margin: 0 0 12px;
}
.tarify-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  align-items: start;
}
.tarify-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  height: auto;
  align-self: start;
}
html[data-theme="light"] .tarify-card {
  background: #fff;
}
.tarify-card-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tarify-card-head b {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.3;
}
.tarify-owned {
  color: var(--muted);
  font-weight: 500;
}
.tarify-owned-ops {
  padding: 12px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-soft);
}
.tarify-meta {
  color: var(--muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.3;
}
.tarify-rates {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: start;
}
.tarify-rates[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.tarify-rates[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tarify-rates[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tarify-rate {
  --heat: 0.5;
  --heat-deg: calc(128 - (128 * var(--heat)));
  background: hsl(var(--heat-deg) 72% 42% / 0.22);
  border: 1px solid hsl(var(--heat-deg) 70% 48% / 0.45);
  border-radius: 10px;
  padding: 7px 5px 6px;
  text-align: center;
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  box-sizing: border-box;
}
.tarify-rate strong {
  color: hsl(var(--heat-deg) 78% 72%);
  font-size: 12px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[data-theme="light"] .tarify-rate {
  background: hsl(var(--heat-deg) 70% 42% / 0.16);
  border-color: hsl(var(--heat-deg) 65% 38% / 0.35);
}
html[data-theme="light"] .tarify-rate strong {
  color: hsl(var(--heat-deg) 72% 28%);
}
.tarify-rate.is-neutral {
  --heat: 0.35;
  background: rgba(255, 208, 0, 0.08);
  border-color: transparent;
}
html[data-theme="light"] .tarify-rate.is-neutral {
  background: rgba(0, 0, 0, 0.04);
}
.tarify-rate.is-neutral strong { color: inherit; }
.tarify-rates-note {
  display: block;
}
.tarify-rate-note {
  border-radius: 10px;
  padding: 12px 14px;
  background: rgba(255, 208, 0, 0.08);
  border: 1px solid rgba(255, 208, 0, 0.18);
  color: var(--muted);
  font-size: 13px;
  font-weight: 550;
  line-height: 1.35;
  text-align: left;
}
html[data-theme="light"] .tarify-rate-note {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.06);
}
.tarify-rates span {
  display: block;
  width: 100%;
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 0;
  line-height: 1.15;
  min-height: 1.15em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: normal;
  overflow-wrap: normal;
}
.tarify-heat-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
  font-weight: 550;
}
[data-tarify-page="route"] .tarify-heat-legend {
  margin-top: 28px;
}
.tarify-public-catalog.is-collapsible {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(-12px);
  margin-top: 0;
  transition:
    grid-template-rows 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.35s ease,
    transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
    margin-top 0.45s ease;
}
.tarify-public-catalog.is-collapsible.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateY(0);
  margin-top: 8px;
}
.tarify-public-catalog.is-collapsible > .tarify-public-catalog-inner {
  overflow: hidden;
  min-height: 0;
}
.tarify-public-catalog.is-collapsible.is-open > .tarify-public-catalog-inner {
  overflow: visible;
}
.tarify-public-catalog.is-collapsible[hidden] {
  display: none !important;
}
.tarify-country-wizard {
  margin: 20px 0 0;
  display: grid;
  gap: 16px;
}
.tarify-country-wizard[hidden] {
  display: none !important;
}
.tarify-wizard-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin: 0 0 4px;
}
.tarify-wizard-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.tarify-wizard-step {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  border-radius: 999px;
  padding: 6px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.tarify-wizard-step:disabled {
  opacity: 0.45;
  cursor: default;
}
.tarify-wizard-step.is-current {
  color: var(--text);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}
.tarify-wizard-step.is-done {
  color: var(--text);
}
.tarify-wizard-step > .flag {
  width: 20px;
  height: 14px;
}
.tarify-wizard-title {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.25;
}
.tarify-wizard-title[hidden] { display: none !important; }
.tarify-wizard-hint {
  margin: 0;
  color: var(--muted);
}
.tarify-wizard-empty {
  margin: 0 0 12px;
}
.tarify-wizard-catalog.is-collapsible {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateX(0) translateY(-10px);
  transition:
    grid-template-rows 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.32s ease,
    transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tarify-wizard-catalog.is-collapsible.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateX(0) translateY(0);
}
.tarify-wizard-catalog.is-collapsible.is-slide-left {
  transform: translateX(-18px) translateY(0);
  opacity: 0;
}
.tarify-wizard-catalog.is-collapsible.is-slide-right {
  transform: translateX(18px) translateY(0);
  opacity: 0;
}
.tarify-wizard-catalog.is-collapsible > .tarify-wizard-catalog-inner {
  overflow: hidden;
  min-height: 0;
}
.tarify-wizard-catalog.is-collapsible.is-open > .tarify-wizard-catalog-inner {
  overflow: visible;
}
.tarify-wizard-catalog.is-collapsible[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .tarify-wizard-catalog.is-collapsible {
    transition: none;
  }
}
.tarify-heat-swatch {
  width: 28px;
  height: 14px;
  border-radius: 999px;
  display: inline-block;
  flex-shrink: 0;
}
.tarify-heat-swatch.is-low { background: hsl(128 72% 42%); }
.tarify-heat-swatch.is-high { background: hsl(0 72% 48%); }
.tarify-heat-range {
  margin-left: 2px;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  color: var(--text);
}

.tarify-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 0;
}
.tarify-card-actions:empty,
.tarify-card-actions[hidden] { display: none !important; }
@media (hover: hover) and (pointer: fine) {
  .tarify-card-actions {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 160ms ease, transform 160ms ease, max-height 160ms ease, margin-top 160ms ease;
  }
  .tarify-card:hover .tarify-card-actions,
  .tarify-card:focus-within .tarify-card-actions {
    opacity: 1;
    max-height: 48px;
    margin-top: 4px;
    pointer-events: auto;
    transform: translateY(0);
  }
}
@media (hover: none), (pointer: coarse) {
  .tarify-card-actions {
    opacity: 1;
    max-height: none;
    overflow: visible;
    pointer-events: auto;
    transform: none;
    margin-top: 4px;
  }
}



body.tarify-picking .tarify-card-actions,
body.tarify-picking .tarify-card:hover .tarify-card-actions,
body.tarify-picking .tarify-card:focus-within .tarify-card-actions,
[data-tarify-root].is-comparing .tarify-card-actions,
[data-tarify-root].is-comparing .tarify-card:hover .tarify-card-actions,
[data-tarify-root].is-comparing .tarify-card:focus-within .tarify-card-actions {
  display: none !important;
  opacity: 0 !important;
  max-height: 0 !important;
  margin-top: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  visibility: hidden !important;
}

/* --- flag country dropdown --- */
.flag-select {
  position: relative;
  width: 100%;
}
.flag-select-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.flag-select-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.flag-select-toggle:hover { border-color: var(--accent); }
.flag-select.is-open > .flag-select-toggle {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.flag-select-toggle::after {
  content: "";
  width: 0.45em;
  height: 0.45em;
  flex-shrink: 0;
  margin-left: 10px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: 0.7;
  transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.flag-select.is-open > .flag-select-toggle::after {
  transform: rotate(225deg) translateY(-1px);
  opacity: 1;
}
.flag-select-current {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin: 0 !important;
  font-size: inherit;
  color: inherit;
}
/* .field span { display:block } must not stack flag + name */
.field .flag-select-current,
.field .flag-select-option {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  margin-bottom: 0;
  color: inherit;
  font-size: inherit;
}
.field .flag-select-current > .flag,
.field .flag-select-option > .flag,
.flag-select-current > .flag,
.flag-select-option > .flag {
  display: inline-block !important;
  margin: 0 !important;
  flex-shrink: 0;
  width: 34px;
  height: 23px;
  border-radius: 3px;
}
.field .flag-select-current > span,
.field .flag-select-option > span,
.flag-select-current > span,
.flag-select-option > span {
  display: inline !important;
  margin: 0 !important;
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.flag-select-option.is-active > span { color: inherit; }
.flag-select-panel {
  position: absolute;
  z-index: 80;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  display: grid;
  gap: 2px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  max-height: min(320px, 60vh);
  overflow: auto;
  isolation: isolate;
}
html[data-theme="dark"] .flag-select-panel {
  background: #1c1c22;
}
html[data-theme="light"] .flag-select-panel {
  background: #ffffff;
  box-shadow: 0 16px 36px rgba(11, 47, 44, 0.16);
}
.flag-select-panel[hidden] { display: none !important; }
.flag-select-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.flag-select-option:hover { background: rgba(255, 208, 0, 0.1); }
html[data-theme="light"] .flag-select-option:hover { background: rgba(0, 0, 0, 0.05); }
.flag-select-option.is-active {
  background: var(--accent);
  color: var(--accent-ink);
}


.tarify-layout.tarify-inapp {
  max-width: none;
  margin: 0 0 24px;
  padding: 0 0 8px;
}


/* --- tarify compare --- */
.tarify-compare-hint[hidden] {
  display: none !important;
}
.tarify-compare-hint { margin: 0 0 18px; }
.tarify-card { position: relative; }
body.tarify-picking .tarify-card[data-tarify-plan] { cursor: pointer; }
body.tarify-picking .tarify-card[data-tarify-plan]:hover { border-color: var(--accent); }
body.tarify-picking .tarify-card.is-compare-skip,
[data-tarify-root].is-comparing .tarify-card.is-compare-skip {
  opacity: 0.45;
  pointer-events: none;
}
.tarify-card.is-picked {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.tarify-pick {
  display: none;
  position: absolute;
  top: 12px;
  right: 12px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  opacity: 0.7;
}
body.tarify-picking .tarify-pick { display: block; }
.tarify-card.is-picked .tarify-pick {
  opacity: 1;
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: inset 0 0 0 3px var(--surface);
}
body.tarify-picking .tarify-card[data-tarify-plan] .tarify-card-head { padding-right: 28px; }
.tarify-compare-panel {
  margin: 22px 0;
  padding: 18px 16px 14px;
  overflow: visible;
}
.tarify-compare-panel[hidden] { display: none !important; }
.tarify-compare-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
  margin-bottom: 12px;
}
.tarify-compare-panel-head h2 {
  margin: 0;
  font-size: 16px;
}
.tarify-compare-panel-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.tarify-mode {
  grid-template-columns: 1fr 1fr;
  min-width: 168px;
  max-width: 220px;
  margin: 0;
}
.tarify-mode > .on,
.tarify-mode:not(:hover) > .on,
.tarify-mode:hover > .on {
  background: var(--accent);
  color: var(--accent-ink);
}
.tarify-compare-table-wrap { overflow-x: auto; }
.tarify-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.tarify-compare-table th,
.tarify-compare-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.tarify-compare-table thead th {
  font-weight: 650;
  min-width: 140px;
}
.tarify-compare-table tbody th {
  color: var(--muted);
  font-weight: 550;
  white-space: nowrap;
  width: 1%;
}
.tarify-compare-controls {
  display: flex;
  flex-direction: column;
  margin: 0 0 18px;
}
.tarify-compare-panel.is-route-mode .tarify-compare-controls { display: none; }
.tarify-compare-panel.is-route-mode .tarify-route-box { order: -1; }
.tarify-compare-panel.is-route-mode .tarify-month-sliders { margin-top: 16px; }
.tarify-month-sliders {
  display: grid;
  gap: 4px 20px;
}
@media (min-width: 720px) {
  .tarify-month-sliders {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  .tarify-month-sliders .calc-mix { grid-column: 1 / -1; }
}
[data-tarify-kwh-slot-month],
[data-tarify-mix-slot-month] { display: contents; }
.tarify-compare-kwh { margin: 0 0 18px; }
.tarify-route-box { margin: 0; }
.tarify-route-layout {
  display: grid;
  gap: 16px;
}
@media (min-width: 720px) {
  .tarify-route-layout {
    grid-template-columns: minmax(240px, 360px) minmax(0, 1fr);
    align-items: stretch;
  }
}
.tarify-route-composer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 440px;
}
.tarify-route-title {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.tarify-route-input {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--text);
  outline: none;
}
.tarify-route-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.tarify-route-field { position: relative; min-width: 0; }
.tarify-suggest {
  position: absolute;
  z-index: 70;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
  max-height: 280px;
  overflow: auto;
}
.tarify-suggest[hidden] { display: none; }
.tarify-suggest-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.tarify-suggest-item:hover,
li[aria-selected="true"] .tarify-suggest-item {
  background: var(--accent-soft);
  color: var(--accent-text);
}
.tarify-suggest-label { font-size: 14px; font-weight: 650; }
.tarify-suggest-detail { font-size: 12px; font-weight: 500; color: var(--muted); }
.tarify-route-vias { display: grid; gap: 8px; }
.tarify-route-via-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.tarify-route-via-remove {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.tarify-route-via-remove:hover { color: var(--danger); border-color: var(--danger); }
.tarify-route-depart {
  display: grid;
  gap: 4px;
  margin: 8px 0 4px;
}
.tarify-vehicle-field {
  display: grid;
  gap: 4px;
  margin: 4px 0;
}
.tarify-leftover-note {
  display: block;
  margin: 0;
  color: var(--muted);
}
.tarify-leg-rate-kind {
  display: block;
  margin: 2px 0 0;
  color: var(--muted);
}
.tarify-leg-rate-kind.is-night,
.tarify-leg-rate-kind.is-mix {
  color: var(--text);
}
.tarify-card .tarify-leg-rate-kind {
  margin: 6px 0 0;
}
.tarify-route-depart input[type="datetime-local"] {
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.tarify-leg-times {
  display: block;
  margin: 2px 0 0;
  color: var(--muted);
}
.tarify-route-add {
  align-self: flex-end;
  margin: 0;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.tarify-route-add:hover { color: var(--accent-text); }
.tarify-route-plan { width: 100%; margin-top: 4px; }
.tarify-route-status { margin: 0; color: var(--muted); }
.tarify-route-map-wrap {
  min-width: 0;
  position: relative;
  z-index: 0;
  isolation: isolate;
  display: flex;
  flex-direction: column;
}
.tarify-route-map-shell {
  position: relative;
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.tarify-route-map-shell:has(.tarify-route-map[hidden]) {
  min-height: 0;
  flex: 0 0 auto;
}
.tarify-route-map {
  height: 360px;
  min-height: 360px;
  flex: 1 1 auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
  position: relative;
  z-index: 0;
  isolation: isolate;
}
@media (min-width: 720px) {
  .tarify-route-map-shell { min-height: 420px; }
  .tarify-route-map { height: 100%; min-height: 420px; }
}
@media (min-width: 960px) {
  .tarify-route-map-shell { min-height: 520px; }
  .tarify-route-map { min-height: 520px; }
}
/* MapLibre keeps its own stacking context inside the box, under .top / user-menu */
.tarify-route-map.maplibregl-map {
  font-family: inherit;
  background: var(--surface-2);
  z-index: 0;
  height: 100%;
}
.tarify-route-map-empty { margin: 8px 0 0; }
.tarify-route-meta { margin: 8px 0 0; color: var(--muted); }
.tarify-route-timing { margin: 4px 0 0; color: var(--muted); }
.tarify-route-alts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0;
}
.tarify-route-alts[hidden] { display: none !important; }
.tarify-route-alt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.2;
  cursor: pointer;
}
.tarify-route-alt:hover {
  border-color: var(--accent);
  color: var(--accent-text);
}
.tarify-route-alt.is-on,
.tarify-route-alt[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-text);
}
.tarify-rate-alt {
  display: block;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.2;
}
.tarify-rate.is-night .tarify-rate-alt { color: inherit; opacity: 0.72; }
.tarify-route-mix-slot {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 8px 24px;
}
.tarify-route-mix-slot:empty {
  display: none;
  margin: 0;
  padding: 0;
  border: 0;
}
@media (min-width: 720px) {
  .tarify-route-mix-slot {
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
    align-items: start;
  }
}
.tarify-route-mix-slot .tarify-compare-kwh { margin: 0; }
.tarify-route-mix-slot .calc-mix { margin: 0; }
.tarify-route-box [data-tarify-night-slider] { display: none !important; }
.tarify-route-countries {
  margin: 16px 0 0;
  display: grid;
  gap: 12px;
}
.tarify-route-banner {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.tarify-cc-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.tarify-cc-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
}
.tarify-cc-chip i {
  width: 8px;
  height: 8px;
  border-radius: 99px;
}
.tarify-cc-chip strong { font-weight: 700; }
.tarify-mix-title {
  margin: 8px 0 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.tarify-leg-grid {
  display: grid;
  gap: 12px;
}
@media (min-width: 720px) {
  .tarify-leg-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
.tarify-leg {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.tarify-leg-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.tarify-flag-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.tarify-leg-head em { color: var(--muted); font-style: normal; }
.tarify-cc {
  display: inline-flex;
  min-width: 28px;
  justify-content: center;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--surface-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.tarify-compare-panel.is-route-mode [data-tarify-night-slider] {
  display: none;
}
.tarify-flag-bank { display: none !important; }
.tarify-top {
  position: fixed;
  left: 50%;
  right: auto;
  /* Sit just right of the --app-max portal (into the gutter), not over list rows. */
  margin-left: min(calc(var(--app-max) / 2), calc(50vw - 48px - var(--safe-r, 0px)));
  bottom: calc(84px + var(--safe-b, 0px));
  z-index: 25;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform-origin: left center;
  transform: translateY(12px) scale(0.84);
  transition: opacity 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 0s linear 280ms;
}
.tarify-top.is-on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 0s;
}
.tarify-top svg { width: 22px; height: 22px; }
@media (hover: hover) and (pointer: fine) {
  .tarify-top:hover { filter: brightness(1.06); }
}
@media (max-width: 720px) {
  .tarify-top {
    left: auto;
    right: max(8px, var(--safe-r, 0px));
    margin-left: 0;
    bottom: calc(78px + var(--safe-b, 0px));
    width: 44px;
    height: 44px;
    transform-origin: center center;
  }
  .tarify-top svg { width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .tarify-top,
  .tarify-top.is-on {
    transition: none;
    transform: none;
  }
}
.tarify-leg-head > .flag,
.tarify-cc-chip > .flag {
  width: 22px;
  height: 15px;
}
.tarify-leg .field { margin: 0; }
.tarify-leg select {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  color: inherit;
  font: inherit;
}
.tarify-leg-empty { margin: 0; color: var(--muted); }
.tarify-leg-cost { display: flex; gap: 8px; align-items: baseline; margin: 0; }
.tarify-mix-totals {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--surface-2);
}
.tarify-mix-total {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 16px;
  margin: 0;
  padding: 0;
  background: none;
  font-weight: 650;
}
.tarify-mix-total span {
  min-width: 0;
  line-height: 1.35;
}
.tarify-mix-total strong {
  font-size: 18px;
  white-space: nowrap;
  text-align: right;
}
.tarify-mix-total.is-pack {
  margin: 0;
  font-weight: 600;
  color: var(--muted);
}
.tarify-mix-total.is-pack strong {
  font-size: 16px;
  color: var(--text);
}
.tarify-mix-names {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
}
.tarify-mix-names span {
  display: inline-block;
  min-width: 0;
  max-width: 100%;
}
.tarify-kwh-note { display: block; margin-top: 6px; color: var(--muted); font-style: normal; }
.tarify-route-note { color: var(--muted); font-weight: 500; }
.tarify-cov {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.01em;
  vertical-align: 1px;
}
.tarify-cov.is-strong { background: var(--mint-soft); color: var(--mint-ink); }
.tarify-cov.is-ok { background: var(--surface-2); color: var(--text); }
.tarify-cov.is-weak { background: var(--accent-soft); color: var(--accent-text); }
.tarify-cov.is-none { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.tarify-cov.is-count { background: var(--surface-2); color: var(--text); }
html[data-theme="light"] .tarify-cov.is-strong { color: var(--mint-ink); }
.tarify-route-avail {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 0;
}
.tarify-route-avail[hidden] { display: none !important; }
.tarify-op-name .tarify-route-avail { margin-left: 2px; }
.tarify-popular {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: 0;
  padding: 2px 8px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
}
.tarify-popular[hidden] { display: none !important; }
.tarify-compare-verdict {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--mint-soft);
  color: var(--text);
  font-size: 14px;
  line-height: 1.4;
}
.tarify-compare-verdict[hidden] { display: none !important; }
.tarify-compare-verdict strong { font-weight: 650; }
.tarify-compare-verdict .tarify-mix-pack-line {
  display: block;
  margin-top: 4px;
  font-weight: 600;
  color: var(--muted);
}
.tarify-compare-verdict .tarify-mix-pack-line strong { color: var(--text); }
.tarify-compare-ranks {
  display: grid;
  gap: 8px;
  margin: 0 0 18px;
}
.tarify-rank {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.tarify-rank.is-best {
  border-color: var(--mint);
  box-shadow: 0 0 0 1px var(--mint);
}
.tarify-rank.is-unknown { opacity: 0.72; }
.tarify-rank-n {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 16px;
  color: var(--muted);
}
.tarify-rank.is-best .tarify-rank-n { color: var(--mint); }
.tarify-rank-copy strong { display: block; font-size: 14px; }
.tarify-rank-copy em { display: block; margin-top: 2px; font-style: normal; color: var(--muted); }
.tarify-rank-cost {
  text-align: right;
  display: grid;
  gap: 2px;
}
.tarify-rank-cost strong {
  font-family: var(--font-num);
  font-size: 16px;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.tarify-rank-vs {
  font-size: 12px;
  color: var(--muted);
}
.tarify-rank.is-best .tarify-rank-vs { color: var(--mint); font-weight: 650; }
html[data-theme="light"] .tarify-rank.is-best {
  border-color: var(--mint-ink);
  box-shadow: 0 0 0 1px var(--mint-ink);
}
html[data-theme="light"] .tarify-rank.is-best .tarify-rank-n,
html[data-theme="light"] .tarify-rank.is-best .tarify-rank-vs { color: var(--mint-ink); }
.tarify-rate-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.5rem;
  padding: 6px 8px;
  border-radius: 8px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.settings-more { margin-top: 28px; }
.settings-more > h2:first-child { margin-top: 0; }


/* Spaľovák fuel type segment (vehicle forms) */
.field-label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 6px;
}
.ice-fuel-block { margin: 4px 0 14px; }
.ice-fuel-seg {
  display: flex;
  gap: 6px;
  margin: 0 0 14px;
}
.ice-fuel-seg label {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  border-radius: var(--radius-sm);
  padding: 10px 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.ice-fuel-seg label input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ice-fuel-seg label:hover {
  color: var(--text);
  border-color: var(--accent);
}
.ice-fuel-seg label.is-active,
.ice-fuel-seg label:has(input:checked) {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.ice-fuel-block input[readonly] {
  opacity: 0.85;
  cursor: default;
}
.ice-fuel-note {
  margin: 6px 0 0;
  line-height: 1.45;
}
html[data-theme="light"] .ice-fuel-seg label {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--muted);
}
html[data-theme="light"] .ice-fuel-seg label.is-active,
html[data-theme="light"] .ice-fuel-seg label:has(input:checked) {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

/* Quick charge entry */
.app.charge-page { padding-bottom: 0; }
.charge-form {
  --cta-h: 72px;
  padding-bottom: calc(var(--cta-h) + var(--safe-b) + 16px);
}
.charge-form h2.charge-h {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
.charge-kwh { margin-bottom: 14px; }
.charge-page h1 + .sync-stamp { margin-top: 16px; }
.charge-kwh .kwh-line {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  border-bottom: 3px solid var(--line);
}
.charge-kwh input,
.charge-kwh input:focus,
.charge-kwh input:focus-visible {
  outline: none;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 auto;
  width: auto;
}
.charge-kwh .kwh-line:focus-within { border-bottom-color: var(--accent); }
.charge-kwh .kwh-unit {
  font-style: normal;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.03em;
  padding-bottom: 14px;
  color: var(--text);
}
.charge-kwh.is-filled .kwh-line { border-bottom-color: var(--accent); }
.charge-estimate {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  font-size: 14px;
  color: var(--muted);
}
.charge-estimate .num {
  color: var(--text);
  font-weight: 700;
  white-space: nowrap;
}
.charge-estimate [data-estimate-line] { min-width: 0; }
.charge-when { margin: 4px 0 14px; }
.charge-when-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.charge-when .chips { margin-bottom: 0; }
button.chip { cursor: pointer; font: inherit; }
.charge-when-custom { margin-top: 12px; }
.charge-when-custom[hidden] { display: none; }
.charge-when-custom .hint { margin: 8px 0 0; }
.charge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
@media (max-width: 1079px) {
  .charge-last { padding-top: 4px; padding-bottom: 4px; }
  .charge-last > .charge-row:first-of-type { border-top: 0; }
}
.charge-ico {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.charge-ico svg { width: 18px; height: 18px; }
/* 320 px: the label column shrinks (wraps / ellipsizes) so Zmeniť / Tu som stay on the row. */
.charge-row-copy { flex: 1 1 0; min-width: 0; }
.charge-row-copy b { overflow-wrap: anywhere; }
.charge-row-auto .charge-row-copy b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.charge-row-copy .tiny { display: block; margin-bottom: 2px; }
.charge-row-copy b {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.charge-row-place input {
  width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.charge-row-place input { text-overflow: ellipsis; }
.charge-row-place input::-webkit-calendar-picker-indicator { display: none !important; }
.charge-row-place input::placeholder { text-overflow: ellipsis; }
.charge-row-place input:focus {
  border: 0;
  box-shadow: none;
  outline: none;
}
.charge-change,
.charge-here {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--accent-text);
  font-weight: 700;
  font-size: 14px;
  min-height: 44px;
  padding: 8px 2px;
  cursor: pointer;
}
.charge-change:hover,
.charge-here:hover { color: var(--text); }
/* #191: keep „Tu som“ on the place line and the same width while it reads „Hľadám…“. */
.charge-row-place > .charge-row-copy { flex-basis: 0; }
.charge-row-place .charge-here { min-width: 4.75em; text-align: right; }
.charge-row-place .charge-here:disabled { cursor: progress; }
.charge-row-place .place-status { flex: 1 0 100%; margin: 0; }
.charge-row-place .place-status[hidden] { display: none; }
.charge-vehicle-panel,
.charge-geo-hint,
.charge-meter-fields { flex: 1 0 100%; }
.charge-vehicle-panel[hidden],
.charge-meter-fields[hidden],
.charge-geo-hint[hidden] { display: none; }
.charge-geo-hint { margin: 0; }
.charge-geo-hint p { margin: 0 0 10px; }
.charge-geo-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}
.charge-geo-actions .btn.ghost { min-height: 44px; padding: 8px 4px; }
.charge-meter-fields { padding-top: 4px; }
.charge-meter-fields .field { position: relative; }
.charge-tesla-tag { margin-top: 8px; }
.charge-fold > summary svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--muted);
}
.charge-fold[open] > summary svg { transform: rotate(180deg); }
.charge-fold-body { padding: 0 18px 8px; }
.charge-program { display: none; }
.charge-program.is-on {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 70;
}
.charge-sheet-backdrop {
  display: none;
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(8, 8, 10, 0.74);
  cursor: pointer;
}
.charge-program.is-on .charge-sheet-backdrop { display: block; }
html[data-theme="light"] .charge-sheet-backdrop { background: rgba(11, 47, 44, 0.58); }
.charge-program-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  max-height: min(86dvh, 720px);
  margin-top: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  padding: 16px 16px calc(16px + var(--safe-b));
  color: var(--text);
}
.charge-program.is-on {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.charge-program .seg { margin: 8px 0 12px; }
.charge-connectors[hidden] { display: none !important; }
.charge-connectors {
  display: grid;
  grid-template-columns: repeat(var(--conn-n, 3), minmax(0, 1fr));
  gap: 4px;
  margin: 12px 0 16px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--bg);
  overflow: hidden;
}
.charge-connectors > button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.1;
  min-height: 40px;
  min-width: 0;
  padding: 8px 6px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.charge-connectors > button.on {
  background: var(--accent);
  color: var(--accent-ink);
}
.charge-connectors > button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.charge-connectors > button[hidden] { display: none !important; }
/* #192: many connectors wrap onto a second row instead of scrolling behind „Použiť“. */
.charge-connectors.is-scroll {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  overflow: visible;
  gap: 8px;
  margin: 12px 0 16px;
  padding: 0 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.charge-connectors.is-scroll > button {
  flex: 0 0 auto;
  min-width: max-content;
  padding: 8px 16px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.charge-connectors.is-scroll > button.on {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}
.charge-plan-note { margin: 0 0 8px; }
.charge-plans {
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.charge-plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  color: var(--text);
}
.charge-plan input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.charge-plan-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
/* Selection is a radio circle, not colour alone; the real <input type=radio> stays for a11y. */
.charge-plan-dot {
  flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--muted); background: transparent; box-sizing: border-box;
}
.charge-plan:has(input:checked) .charge-plan-dot {
  border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 3px var(--surface);
}
.charge-plan:has(input:focus-visible) .charge-plan-dot { outline: 2px solid var(--accent); outline-offset: 2px; }
.charge-plan.is-off .charge-plan-dot { border-style: dashed; }
.charge-plan-main b { font-weight: 700; letter-spacing: -0.02em; }
.charge-plan-main small { color: var(--muted); font-size: 13px; font-weight: 500; }
.charge-plan .num { font-weight: 700; white-space: nowrap; }
.charge-plan:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.charge-plan.is-off {
  border-style: dashed;
  color: var(--muted);
}
.charge-plan.is-off b,
.charge-plan.is-off .num,
.charge-plan.is-off small { color: var(--muted); }
.charge-sheet-apply { margin-top: auto; }
.charge-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.charge-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 35;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--cta-h);
  padding: 10px var(--pad-x) calc(10px + var(--safe-b));
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.charge-bar-sum { min-width: 0; }
.charge-bar-sum .tiny { display: block; }
.charge-bar-sum b {
  display: block;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.charge-bar .btn {
  width: auto;
  flex: 1 1 160px;
  margin: 0;
}
html[data-theme="light"] .charge-program-card,
html[data-theme="light"] .charge-bar,
html[data-theme="light"] .charge-plan {
  border-color: transparent;
  box-shadow: 0 16px 40px rgba(11, 47, 44, 0.07);
}
html[data-theme="light"] .charge-plan:has(input:checked) {
  border-color: var(--accent);
  box-shadow: none;
}
html[data-theme="light"] .charge-bar {
  border-top: 1px solid rgba(11, 47, 44, 0.12);
  box-shadow: 0 -8px 24px rgba(11, 47, 44, 0.06);
}
body.charge-lock { overflow: hidden; }
@media (min-width: 721px) and (max-width: 1079px) {
  .app.has-side .charge-bar { left: calc(248px + var(--safe-l)); }
}
/* Zapísať nabíjanie, desktop: left flow of cards + sticky summary (spec zapis-desktop) */
.charge-form .charge-summary { display: none; }
.charge-form .charge-fold-opt { display: none; }
@media (min-width: 1080px) {
  .charge-form { display: grid; align-items: start; padding-bottom: 24px; }
  .charge-form .charge-last { display: contents; }
  .charge-form .charge-row-program,
  .charge-form .charge-row-meter { display: none; }
  .charge-form .charge-meter-fields { display: block !important; }
  .charge-form .charge-program { display: block; position: static; }
  .charge-form .charge-program.is-on { position: static; display: block; }
  .charge-form .charge-program-card { max-height: none; margin: 0; overflow: visible; border-radius: var(--radius-card); }
  .charge-form .charge-plans { overflow: visible; flex: 0 0 auto; min-height: min-content; max-height: none; }
  .charge-form .charge-sheet-backdrop,
  .charge-form .charge-program .kpi-sheet-x,
  .charge-form .charge-sheet-apply { display: none; }
  .charge-page h1 { display: inline-block; vertical-align: middle; margin-right: 14px; }
  .charge-page h1 + .sync-stamp { display: inline-flex; vertical-align: middle; margin-top: 0; }

  .charge-form {
    max-width: 1120px;
    margin-top: 20px;
    grid-template-columns: minmax(0, 1fr) 300px;
    column-gap: 20px;
    row-gap: 12px;
  }
  /* left column, in reading order: Auto+Nabité+po nabití | Miesto+Kedy | Program a konektor | Doplnky */
  .charge-form .charge-row-auto { grid-column: 1; grid-row: 1; }
  .charge-form .charge-kwh { grid-column: 1; grid-row: 2; }
  .charge-form .charge-meter-fields { grid-column: 1; grid-row: 3; }
  .charge-form .charge-row-place { grid-column: 1; grid-row: 4; }
  .charge-form .charge-when { grid-column: 1; grid-row: 5; }
  .charge-form .charge-program { grid-column: 1; grid-row: 6; }
  .charge-form .charge-fold { grid-column: 1; grid-row: 7; margin: 0; }
  .charge-form .charge-summary { grid-column: 2; grid-row: 1 / span 7; }
  .charge-form .charge-bar { display: none; }          /* replaced by the summary card */
  .charge-form .charge-estimate { display: none; }          /* shown in the summary card instead */

  /* shared card skin for the left blocks */
  .charge-form .charge-row-auto, .charge-form .charge-kwh, .charge-form .charge-meter-fields, .charge-form .charge-row-place, .charge-form .charge-when {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: 18px 22px;
    margin: 0;
  }
  /* join 1–3 into one card and 4–5 into one card (negative gap + flat inner edges) */
  .charge-form .charge-row-auto, .charge-form .charge-row-place {
    border-bottom-left-radius: 0; border-bottom-right-radius: 0;
    border-bottom-color: transparent;
    padding-bottom: 10px;
  }
  .charge-form .charge-kwh {
    border-radius: 0; border-top: 0; border-bottom-color: transparent;
    margin-top: -12px; padding-top: 6px; padding-bottom: 0;
  }
  .charge-form .charge-meter-fields {
    border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0;
    margin-top: -12px; padding-top: 18px; padding-bottom: 22px;
  }
  .charge-form .charge-when {
    border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0;
    margin-top: -12px; padding-top: 18px; padding-bottom: 22px;
    position: relative;
  }
  .charge-form .charge-when::before {        /* hairline between Miesto and Kedy */
    content: ""; position: absolute; left: 22px; right: 22px; top: 0;
    height: 1px; background: var(--line);
  }
  .charge-form .charge-row-auto { border-top: 1px solid var(--line); }
  .charge-form .charge-row-auto .charge-row-copy b { font-size: 16px; }

  .charge-form .charge-kwh .kwh-line input { font-size: 72px; }
  .charge-form .charge-kwh label > span:first-child { font-size: 15px; font-weight: 600; }
  .charge-form .charge-meter-fields .grid-2 { gap: 12px; }
  .charge-form .charge-meter-fields .charge-tesla-tag { position: absolute; right: 12px; bottom: 12px; margin: 0; width: auto; }

  /* Miesto: input becomes a real field + "Tu som" as a secondary pill */
  .charge-form .charge-row-place { padding-top: 18px; flex-wrap: wrap; }
  .charge-form .charge-row-place .charge-ico { display: none; }
  .charge-form .charge-row-place .charge-row-copy .tiny { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 10px; }
  .charge-form .charge-row-place input {
    min-height: 48px; padding: 11px 14px 11px 40px;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8b8be' stroke-width='1.8'%3E%3Cpath d='M12 21s7-6.2 7-11a7 7 0 1 0-14 0c0 4.8 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.2'/%3E%3C/svg%3E") no-repeat 14px 50% / 18px;
  }
  .charge-form .charge-here {
    align-self: flex-end; min-height: 48px; padding: 0 18px;
    border: 1px solid var(--line); border-radius: var(--radius-pill);
    background: var(--surface); color: var(--text);
  }
  .charge-form .charge-here:hover { border-color: var(--accent); background: var(--accent-soft); }
  .charge-form .charge-when-head { margin-bottom: 10px; }
  .charge-form .charge-when-head .tiny { font-size: 13px; }

  /* Program a konektor: 2-column tiles inside one card */
  .charge-form .charge-program-card { padding: 18px 22px 22px; border-bottom: 1px solid var(--line); }
  .charge-form .charge-program .kpi-sheet-head b { font-size: 15px; }
  .charge-form .charge-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 0; }
  .charge-form .charge-plan { min-height: 64px; background: var(--bg); }
  .charge-form .charge-plan:has(input:checked) { box-shadow: inset 0 0 0 1px var(--accent); }
  .charge-form .charge-connectors { margin-top: 14px; }

  /* Summary (new aside) */
  .charge-form .charge-summary {
    display: block; position: sticky; top: 24px; align-self: start;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-card); padding: 18px 20px 20px;
  }
  .charge-form .charge-summary dl { margin: 0; padding: 2px 14px; border-radius: var(--radius); background: var(--bg); }
  .charge-form .charge-summary dl > div { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; font-size: 14px; }
  .charge-form .charge-summary dl > div + div { border-top: 1px solid var(--line); }
  .charge-form .charge-summary dt { color: var(--muted); }
  .charge-form .charge-summary dd { margin: 0; font-weight: 700; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
  .charge-form .charge-summary-total { display: flex; justify-content: space-between; align-items: baseline; margin: 18px 2px 0; }
  .charge-form .charge-summary-total b { display: block; font-size: 48px; font-weight: 700; letter-spacing: -0.05em; line-height: 1; margin: 6px 2px 16px; }
  .charge-form .charge-summary .btn { min-height: 52px; }
  .charge-form .charge-summary .charge-kbd { text-align: center; margin: 12px 0 0; }
  .charge-form .charge-fold-opt { display: inline; margin-right: auto; font-size: 13px; font-weight: 500; color: var(--muted); }
  .charge-form .charge-summary-calc { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 2px; }
  .charge-form .charge-summary-total:first-of-type { flex-direction: column; align-items: stretch; gap: 6px; }
  /* Iný čas: Začiatok and Koniec each get a full row so the date field is never clipped. */
  .charge-form .charge-when-custom .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .charge-form .charge-summary .btn.is-idle { opacity: 0.45; box-shadow: none; }
}
/* 1080–1279: the left cards need ~620 px (Kedy chips on one row), so stay one column
   and pin a compact summary (výpočet · spolu · Uložiť) to the bottom; two columns from 1280. */
@media (min-width: 1080px) and (max-width: 1279px) {
  .charge-form { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
  .charge-form .charge-summary {
    grid-column: 1; grid-row: 8;
    position: sticky; top: auto; bottom: 12px; z-index: 5;
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(180px, auto);
    align-items: center; column-gap: 18px;
    padding: 12px 14px 12px 20px;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
  }
  .charge-form .charge-summary dl,
  .charge-form .charge-summary .charge-kbd { display: none; }
  .charge-form .charge-summary-total { margin: 0; }
  .charge-form .charge-summary-total:first-of-type { flex-direction: row; justify-content: flex-start; gap: 14px; align-items: center; min-width: 0; }
  .charge-form .charge-summary-calc { align-items: flex-start; text-align: left; }
  .charge-form .charge-summary-total b { font-size: 32px; margin: 0; }
}
@media (min-width: 1080px) {
  html[data-theme="light"] .charge-form .charge-row-auto,
  html[data-theme="light"] .charge-form .charge-kwh,
  html[data-theme="light"] .charge-form .charge-meter-fields,
  html[data-theme="light"] .charge-form .charge-row-place,
  html[data-theme="light"] .charge-form .charge-when,
  html[data-theme="light"] .charge-form .charge-summary { border-color: transparent; box-shadow: 0 16px 40px rgba(11, 47, 44, 0.07); }
  html[data-theme="light"] .charge-form .charge-kwh,
  html[data-theme="light"] .charge-form .charge-when,
  html[data-theme="light"] .charge-form .charge-meter-fields { box-shadow: 0 16px 40px rgba(11, 47, 44, 0.07); clip-path: inset(0 -40px -40px -40px); }
  html[data-theme="light"] .charge-form .charge-row-auto,
  html[data-theme="light"] .charge-form .charge-row-place { clip-path: inset(-40px -40px 0 -40px); }
  html[data-theme="light"] .charge-form .charge-kwh { clip-path: inset(0 -40px); }
  html[data-theme="light"] .charge-form .charge-summary dl,
  html[data-theme="light"] .charge-form .charge-plan,
  html[data-theme="light"] .charge-form .charge-row-place input { background-color: #e8fff6; border-color: transparent; }
  html[data-theme="light"] .charge-form .charge-plan:has(input:checked) { background-color: var(--accent-soft); border-color: var(--accent); }
  html[data-theme="light"] .charge-form .charge-here { border-color: transparent; box-shadow: 0 8px 18px rgba(11, 47, 44, 0.08); }
  html[data-theme="light"] .charge-form .charge-when::before { background: rgba(11, 47, 44, 0.12); }
}
@media (prefers-reduced-motion: reduce) {
  .charge-fold > summary svg { transition: none; }
}

/* PR8: onboarding, empty states, save toast */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
/* Stack the welcome and the stepper until both fit on one row. */
.dash-head.is-onboard {
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 14px;
}
.dash-head.is-onboard .dash-head-nav,
.dash-head.is-onboard .dash-head-text {
  flex: none;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.dash-head.is-onboard h1 {
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
}
.dash-head.is-onboard .lead { max-width: 36rem; }
.stepper {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.dash-head.is-onboard .stepper li {
  flex: 0 0 auto;
  justify-content: center;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.15;
  white-space: nowrap;
}
.dash-head.is-onboard .stepper li b { flex: 0 0 auto; }
@media (min-width: 1080px) {
  .dash-head.is-onboard {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
  }
  .dash-head.is-onboard .dash-head-nav { width: auto; flex: 1 1 auto; }
  .dash-head.is-onboard .stepper {
    flex: 0 1 auto;
    width: auto;
    max-width: 56%;
    overflow: visible;
  }
  .dash-head.is-onboard .stepper li {
    flex: 0 1 auto;
    padding: 6px 12px;
    font-size: 13px;
    white-space: nowrap;
  }
}
.stepper li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}
.stepper li b {
  font-weight: 700;
}
.stepper li.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.onboard-form .card > h2 {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
}
.onboard-later { margin: 4px 0 0; }
.ev-search .field { margin-bottom: 10px; }
.ev-popular-label { margin: 0 0 8px; }
.ev-picked { margin: 0 0 12px; }
.ev-picker.ev-picker-details,
label.field.ev-picker-details { display: none; }
button.chip {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
button.chip:hover,
button.chip:focus-visible {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.ev-results {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 12px;
}
.ev-results[hidden] { display: none; }
.ev-hit {
  text-align: left;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.ev-hit:hover,
.ev-hit:focus-visible {
  background: var(--accent-soft);
  border-color: var(--accent);
  outline: none;
}
.onboard-form {
  --cta-h: 72px;
  /* The bar floats above the dock, so the list needs both heights to scroll clear. */
  padding-bottom: calc(var(--cta-h) + 76px + 28px);
}
.onboard-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(76px + var(--safe-b));
  z-index: 30;
  display: flex;
  align-items: center;
  min-height: var(--cta-h);
  padding: 10px var(--pad-x) 10px;
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.onboard-bar .btn { margin: 0; }
html[data-theme="light"] .onboard-bar,
html[data-theme="light"] .ev-hit {
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(11, 47, 44, 0.08);
}
html[data-theme="light"] .stepper li:not(.is-on) { border-color: transparent; box-shadow: 0 8px 18px rgba(11, 47, 44, 0.08); }
@media (min-width: 721px) {
  .app.has-side .onboard-form { padding-bottom: calc(var(--cta-h) + var(--safe-b) + 28px); }
  .app.has-side .onboard-bar {
    left: calc(248px + var(--safe-l));
    right: 0;
    bottom: 0;
    padding-bottom: calc(10px + var(--safe-b));
  }
}
.kpi-empty-note { font-weight: 500; }
.kpi-empty-copy {
  margin: 8px 0 0;
  color: var(--accent-ink);
  font-size: 14px;
  line-height: 1.45;
  font-weight: 500;
}
/* Same 10px as .card margin-bottom and .kpi-grid gap. Only the hero that
   stands alone above the setup card; the full grid already gaps the strip. */
.kpi-overview + .setup-card {
  margin-top: 10px;
}
.setup-card > h2 {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
}
.setup-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.setup-steps li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.setup-mark {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  margin-top: 1px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.setup-mark svg { width: 14px; height: 14px; }
.setup-steps .is-done .setup-mark {
  border: 0;
  background: var(--mint);
  color: var(--accent-ink);
}
html[data-theme="light"] .setup-steps .is-done .setup-mark {
  background: var(--mint-ink);
  color: #fff;
}
.setup-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}
.setup-copy {
  font-weight: 500;
  line-height: 1.35;
}
.setup-steps .is-done .setup-copy {
  color: var(--muted);
  text-decoration: none;
}
.setup-steps .is-now .setup-copy { color: var(--text); }
.setup-steps .tiny { margin: 0; }
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 4px;
}
.empty-ico {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.empty-ico svg { width: 24px; height: 24px; }
.empty-line { margin: 0; font-weight: 600; }
.empty-hint { margin: 0; color: var(--muted); }
.save-check {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  color: var(--accent);
  display: inline-flex;
}
.save-check svg { width: 22px; height: 22px; }
#save-toast form { margin: 0; display: flex; }
.item.is-new {
  background: var(--accent-soft);
  transition: background var(--ease);
}
.tag-new {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  vertical-align: 1px;
}
.item:not(.is-new) .tag-new { display: none; }
@media (prefers-reduced-motion: reduce) {
  .item.is-new,
  .stepper li,
  .ev-hit,
  button.chip,
  #save-toast { transition: none; animation: none; }
}

/* Auth forms: placeholders, inline errors, password toggle */
.field input::placeholder,
.field textarea::placeholder {
  color: color-mix(in srgb, var(--muted) 55%, transparent);
  opacity: 1;
}
.f-err {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--danger);
}
.f-help {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--muted);
}
.f-summary {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--danger);
}
.field input[aria-invalid="true"] {
  border-color: var(--danger);
}
.field input[aria-invalid="true"]:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
html[data-theme="light"] .field input[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: inset 0 0 0 1px var(--danger), 0 6px 16px rgba(11, 47, 44, 0.05);
}
html[data-theme="light"] .field input[aria-invalid="true"]:focus {
  box-shadow: inset 0 0 0 1px var(--danger), 0 0 0 3px var(--accent-soft);
}
.field > .pw-field {
  position: relative;
  display: block;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}
.pw-field input { padding-right: 48px; }
.pw-toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  color: var(--muted);
  cursor: pointer;
}
.pw-toggle[hidden] { display: none; }
.pw-toggle svg { width: 20px; height: 20px; }
.pw-toggle svg[hidden] { display: none; }
.pw-toggle:hover { color: var(--text); }
.pw-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Page header controls (Prehľad, auto): on desktop the last-update text and
   ‹ obdobie › sit at the right end of the title row. Mobile keeps the pill
   under the header and the arrows next to the title. */
.head-tools { display: contents; }
.sync-stamp.sync-stamp-head { display: none; }
@media (min-width: 721px) {
  .dash-head-nav > .dash-title { flex: 1 1 auto; width: 100%; }
  .dash-title-row {
    width: 100%;
    justify-content: space-between;
    gap: 10px 16px;
  }
  .head-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-left: auto;
    min-width: 0;
  }
  .sync-stamp.sync-stamp-head {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-size: 13px;
    color: var(--muted);
    white-space: nowrap;
  }
  html[data-theme="light"] .sync-stamp.sync-stamp-head {
    background: none;
    box-shadow: none;
  }
  .sync-stamp.sync-stamp-head b { color: var(--muted); font-weight: 600; }
  .sync-stamp.sync-stamp-below { display: none; }
  .head-tools .period-inline .period-panel { left: auto; right: 0; }

  .dash-head.veh-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    align-items: center;
    column-gap: 6px;
    row-gap: 4px;
  }
  .veh-head > .dash-head-text { display: contents; }
  .veh-head h1 { grid-column: 1; grid-row: 1; margin: 0; min-width: 0; }
  .veh-head .eyebrow { grid-column: 1 / -1; grid-row: 2; margin: 0; }
  .veh-head > .period-shift { grid-column: 2; grid-row: 1; margin-top: 0; }
  .veh-head .period-menu {
    grid-column: 3;
    grid-row: 1;
    margin: 0;
    max-width: none;
    position: relative;
    z-index: 3;
  }
  .veh-head > .dash-actions { grid-column: 4; grid-row: 1; min-height: 0; }
  .veh-head > .dash-actions .period-shift { margin-top: 0; }
  .veh-head > .sync-stamp-head { grid-column: 2 / -1; grid-row: 3; justify-self: end; }
  .veh-head .period-summary {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  .veh-head .period-summary::after { opacity: 1; }
  .veh-head .period-summary:hover,
  .veh-head .period-menu.is-open > .period-summary {
    border-color: var(--accent);
    color: var(--accent-text);
    background: var(--accent-soft);
  }
  .veh-head .period-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  html[data-theme="light"] .veh-head .period-summary {
    border-color: transparent;
    box-shadow: 0 8px 18px rgba(11, 47, 44, 0.08);
  }
  .veh-head .period-menu:not(.is-open) > .period-panel { pointer-events: none; }
  .veh-head .period-panel {
    position: absolute;
    right: -46px;
    top: 100%;
    z-index: 5;
    min-width: min(360px, calc(100vw - 48px));
  }
  .veh-head .period-menu.is-open > .period-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: 10px 12px 8px;
  }
  html[data-theme="light"] .veh-head .period-menu.is-open > .period-panel {
    border-color: transparent;
    box-shadow: 0 16px 40px rgba(11, 47, 44, 0.12);
  }
}
/* #196: on desktop "Posledná aktualizácia" follows the ‹ obdobie › buttons. */
@media (min-width: 1080px) {
  .head-tools .period-inline { order: 1; }
  .head-tools .sync-stamp-head { order: 2; }
  .dash-head.veh-head { grid-template-columns: minmax(0, 1fr) auto auto auto auto; }
  .veh-head > .sync-stamp-head { grid-column: 5; grid-row: 1; justify-self: end; margin-left: 10px; }
  .veh-head > .period-shift { grid-column: 2; }
  .veh-head .period-menu { grid-column: 3; }
  .veh-head > .dash-actions { grid-column: 4; }
}

/* Program sheets: detail, end on date, notices. Reuse the kpi sheet shell. */
.kpi-explain.prog-sheet .kpi-explain-x-in { display: inline-flex; }
.prog-sheet .kpi-sheet-x { width: 40px; height: 40px; flex-shrink: 0; }
.prog-sheet .kpi-sheet-x svg { width: 18px; height: 18px; }
.prog-sheet .kpi-explain-card {
  border-radius: 28px 28px 0 0;
  padding-bottom: calc(24px + var(--safe-b));
}
@media (min-width: 721px) {
  .prog-sheet .kpi-explain-layout { padding-left: 0; }
  .prog-sheet .kpi-explain-card {
    width: 420px;
    max-width: calc(100vw - 48px);
    border-radius: 28px;
    padding: 22px 22px 20px;
  }
}
.prog-head { align-items: center; gap: 12px; }
.prog-head-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.prog-head-copy b { color: var(--text); font-weight: 700; overflow-wrap: anywhere; }
.prog-ico {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--mint-soft);
  color: var(--mint);
}
html[data-theme="light"] .prog-ico { background: var(--mint); color: var(--mint-ink); }
.prog-ico svg { width: 20px; height: 20px; }
.prog-state { display: inline-flex; align-items: center; gap: 6px; }
.prog-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); display: inline-block; }
html[data-theme="light"] .prog-dot { background: var(--mint-ink); }
.prog-table { margin: 4px 0 14px; }
.prog-actions { display: grid; gap: 8px; }
.prog-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; }
.prog-actions .btn svg { width: 18px; height: 18px; }
.prog-actions .tiny { margin: 0 0 8px; text-align: center; }
.prog-rule { height: 1px; background: var(--line); margin: 8px 0 4px; }
html[data-theme="light"] .prog-rule { background: rgba(11, 47, 44, 0.12); }
.prog-sub { margin: 0 0 8px; overflow-wrap: anywhere; }
.prog-sheet form.kpi-explain-card .btn { margin-top: 8px; }
.prog-sheet .btn.ghost { width: 100%; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.prog-err { color: var(--danger); font-size: 13px; font-weight: 500; margin: -12px 0 12px; }
.prog-err[hidden], .prog-notice[hidden] { display: none; }
.prog-notice { margin: -8px 0 16px; color: var(--accent-text); overflow-wrap: anywhere; }
button.kpi-sheet-row.is-link {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  min-height: 44px;
}
button.kpi-sheet-row.is-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
  border-radius: var(--radius-sm);
}
.prog-chev { margin-left: 8px; color: var(--muted); font-weight: 500; }
.prog-undo form { margin: 0; }
.kpi-explain.is-covered .kpi-explain-card,
.kpi-explain.is-covered .kpi-explain-x { visibility: hidden; }
.kpi-explain.is-covered .share-backdrop { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .prog-sheet.kpi-explain .share-backdrop { transition: none; }
}

/* Údržba: Zapísať → Údržba form, História → Údržba rows and detail sheet */
.maint-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 14px;
}
.maint-head h1 { margin: 0; }
.maint-back { margin-top: 0; }
.maint-back svg { width: 18px; height: 18px; }
.maint-form {
  --cta-h: 72px;
  padding-bottom: calc(var(--cta-h) + var(--safe-b) + 16px);
}
.maint-car { margin: 0 0 14px; }
.maint-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  min-height: 44px;
  padding: 6px 14px 6px 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
}
.maint-pill b { font-weight: 700; }
.maint-pill small { color: var(--muted); font-size: 13px; font-weight: 500; }
.maint-pill-mark {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-ink);
}
.maint-pill-mark img { width: 18px; height: 18px; }
.maint-pill.is-pick { padding-right: 40px; cursor: pointer; }
.maint-pill.is-pick select {
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.maint-pill.is-pick select:focus { outline: none; }
.maint-pill.is-pick:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.maint-pill-chev {
  position: absolute;
  right: 14px;
  color: var(--muted);
  pointer-events: none;
}
.maint-amount { margin-bottom: 18px; }
.maint-set {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  min-width: 0;
}
.maint-sl {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 0;
  margin: 0 0 10px;
}
.maint-sl .charge-h {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.maint-sl .tiny[hidden] { display: none; }
.maint-cats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.maint-cat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-height: 76px;
  padding: 10px 4px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--ease), background var(--ease);
}
.maint-cat input,
.maint-when input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.maint-when label.chip input { display: block; }
.maint-when label.chip { position: relative; }
.maint-cat-ico,
.maint-sq {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
}
.maint-cat:hover { border-color: var(--accent); }
.maint-cat:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.maint-cat:has(input:checked) .maint-cat-ico { background: var(--accent); color: var(--accent-ink); }
.maint-cat:has(input:focus-visible),
.maint-when label.chip:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--accent-soft); border-color: var(--accent); }
.maint-when { margin-bottom: 0; }
.maint-when label.chip:has(input:checked) small { color: var(--accent-ink); }
.maint-date { margin: 12px 0 0; }
.maint-date[hidden] { display: none; }
details.fold.maint-more > summary { justify-content: flex-start; padding: 12px 14px; min-height: 56px; }
.maint-more-ico,
.maint-more-chev { width: 20px; height: 20px; flex: 0 0 20px; color: var(--muted); }
.maint-more-copy { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; }
.maint-more-copy small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 500; }
details.fold.maint-more[open] > summary .maint-more-chev { transform: rotate(180deg); }
.maint-more-body { padding: 14px 14px 4px; }
.maint-more-body .field em { font-style: normal; color: var(--muted); font-weight: 500; }
.maint-odo .hint { display: block; margin-top: 8px; }
.maint-odo .hint[hidden] { display: none; }
.maint-bar .btn { gap: 8px; }
.maint-bar .btn svg { width: 20px; height: 20px; }
.maint-bar .btn[disabled] {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--muted);
  box-shadow: none;
  cursor: not-allowed;
}
.maint-cancel,
.maint-kbd,
.maint-side { display: none; }
html[data-theme="light"] .maint-pill,
html[data-theme="light"] .maint-cat {
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(11, 47, 44, 0.05);
}
html[data-theme="light"] .maint-cat:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
@media (max-width: 380px) {
  .maint-cats { gap: 6px; }
  .maint-cat { font-size: 11px; }
}
@media (min-width: 1080px) {
  .maint-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 20px;
    align-items: start;
  }
  .maint-form {
    display: block;
    padding: 20px 22px 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
  }
  .maint-form .charge-kwh { margin-bottom: 18px; }
  .maint-form .charge-bar.maint-bar {
    position: static;
    min-height: 0;
    margin-top: 20px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .maint-bar .btn { flex: 0 0 auto; padding: 0 26px; }
  .maint-cancel { display: inline-flex; }
  .maint-kbd { display: inline; margin-left: auto; }
  .maint-side { display: block; padding: 16px 18px; }
  html[data-theme="light"] .maint-form { border-color: transparent; box-shadow: 0 16px 40px rgba(11, 47, 44, 0.07); }
}
.maint-side-total {
  display: block;
  margin: 4px 0 6px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.04em;
}
.maint-side-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}
.maint-side-row + .maint-side-row { border-top: 1px solid var(--line); }
.maint-side-row .left { flex: 1; min-width: 0; }
.maint-side-row .left b,
.maint-side-row .left .tiny { display: block; }
.maint-side-row .num { font-weight: 700; }
.maint-side-more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--accent-text);
  font-size: 13px;
  font-weight: 700;
}

/* História → Údržba */
.maint-sum {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.maint-sum .tiny { display: block; }
.maint-sum > div:first-child > b {
  display: block;
  margin-top: 4px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.1;
}
.maint-sum-side { text-align: right; line-height: 1.5; }
.maint-sum > div:first-child .tiny { overflow-wrap: anywhere; }
.maint-sum-side span,
.maint-sum-side b { display: block; }
.maint-sum > div:first-child { min-width: 0; }
.maint-sum-side b {
  margin-top: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
}
.maint-mh {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 18px 4px 8px;
}
.maint-mh h2 { margin: 0; font-size: 13px; }
.maint-empty { padding: 14px 16px; }
.maint-empty .tiny { margin: 0; }
.maint-month-note { margin: 6px 4px 0; }
.maint-row .maint-sq { width: 38px; height: 38px; flex-basis: 38px; }
.maint-item.is-new { animation: maint-new 2.4s ease-out both; }
@keyframes maint-new {
  0%, 60% { background: var(--accent-soft); }
  100% { background: transparent; }
}
.maint-sheet .kpi-sheet-head { align-items: center; }
.maint-sheet-title { flex: 1; min-width: 0; }
.maint-sheet-title b,
.maint-sheet-title .tiny { display: block; }
.maint-sheet-title b { font-size: 19px; letter-spacing: -0.03em; }
.maint-sheet [data-maint-note] { overflow-wrap: anywhere; }
.maint-actions { display: grid; gap: 10px; margin-top: 14px; }
.maint-actions[hidden] { display: none !important; }
.maint-actions { align-items: start; }
.maint-actions form { margin: 0; }
.maint-actions .btn,
.maint-actions form > .btn[type="submit"] { margin: 0; }
.maint-actions .btn { gap: 8px; }
.maint-actions .btn svg { width: 18px; height: 18px; }
.maint-why { margin: 0; text-align: center; }
@media (min-width: 721px) {
  .maint-actions { grid-template-columns: 1fr 1fr; }
  .maint-why { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .maint-item.is-new { animation: none; background: var(--accent-soft); }
  .maint-cat { transition: none; }
}

/* Provider logo tile (.plogo) – docs/design/CURRENT.md "Provider logos".
   One component, fixed boxes per size, never crops (object-fit: contain).
   The plate (background) comes only from here: data-plate light | dark | brand (--brand).
   Files are trimmed by scripts/normalize_logos.py, without baked-in white. */
:root, html[data-theme="dark"] {
  --logo-plate: #f4f4f6;
  --logo-ring: transparent;
  --logo-plate-dark: #26262c;
  --logo-ring-dark: rgba(255, 255, 255, 0.10);
  --logo-ring-brand: rgba(255, 255, 255, 0.10);
}
html[data-theme="light"] {
  --logo-plate: #ffffff;
  --logo-ring: rgba(11, 47, 44, 0.12);
  --logo-plate-dark: #0b2f2c;
  --logo-ring-dark: transparent;
  --logo-ring-brand: transparent;
}
.plogo {
  --w: 64px;
  --h: 40px;
  --fill: 100%;
  box-sizing: border-box;
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--w);
  height: var(--h);
  padding: calc(var(--h) * 0.16) calc(var(--h) * 0.22);
  border-radius: calc(var(--h) * 0.26);
  background: var(--plate, var(--logo-plate));
  box-shadow: inset 0 0 0 1px var(--ring, var(--logo-ring));
  overflow: hidden;
  vertical-align: middle;
}
.plogo img {
  display: block;
  width: 100%;
  height: var(--fill);
  min-width: 0;
  object-fit: contain;
  object-position: center;
}
.plogo[data-aspect="wide"] { --fill: 72%; }
.plogo[data-aspect="medium"] { --fill: 88%; }
.plogo[data-aspect="square"] { --fill: 100%; }
.plogo[data-plate="dark"] { --plate: var(--logo-plate-dark); --ring: var(--logo-ring-dark); }
.plogo[data-plate="brand"] { --plate: var(--brand); --ring: var(--logo-ring-brand); }
.plogo .plogo-dark { display: none; }
html[data-theme="dark"] .plogo.has-dark { --plate: var(--logo-plate-dark); --ring: var(--logo-ring-dark); }
html[data-theme="dark"] .plogo.has-dark .plogo-img:not(.plogo-dark) { display: none; }
html[data-theme="dark"] .plogo.has-dark .plogo-dark { display: block; }
.plogo.xl { --w: 100%; --h: 56px; padding: 9px 12px; }
.plogo.l { --w: 88px; --h: 56px; }
.plogo.m { --w: 64px; --h: 40px; }
.plogo.s { --w: 40px; --h: 40px; padding: 6px; }
.plogo.s img { height: 100%; }
/* monogram: no file, or the image failed (app.js adds .is-mono) */
.plogo.is-mono,
.plogo:not(:has(img)) {
  background: var(--brand, #2a2a2e);
  box-shadow: none;
  color: var(--ink, #fff);
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: calc(var(--h) * 0.38);
  line-height: 1;
}
.plogo.is-mono::before,
.plogo:not(:has(img))::before { content: attr(data-mono); }
.plogo.is-mono img { display: none; }
.item.item-op { align-items: center; justify-content: flex-start; }
.item.item-op > .left { flex: 1 1 auto; min-width: 0; }

/* ---- Nový program: Krajina → Poskytovateľ → Program → Potvrdenie (programs.html) ---- */
.pflow { min-width: 0; }
.pf-head { display: flex; align-items: center; gap: 12px; margin: 8px 0 14px; }
.pf-head h1 { flex: 1; min-width: 0; margin: 0; padding-block: 0.12em; font-size: clamp(22px, 6vw, 30px); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* #217: overflow:hidden with the global tight line-height clipped „ý“ and „p/g“ */
.pf-head .pf-back, .pp-x { width: 44px; height: 44px; margin-top: 0; }
.pf-head .pf-back svg { width: 18px; height: 18px; }
.pf-month { margin: 0; display: flex; }
.mpill {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px 0 14px;
  border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface);
  font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.mpill:hover { border-color: var(--accent); }
.mpill:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.mpill svg { width: 16px; height: 16px; color: var(--muted); }
.mpill select { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); opacity: 0; cursor: pointer; font-size: 16px; }
.mpill .m-long { display: none; }
html[data-theme="light"] .mpill { border-color: transparent; box-shadow: 0 8px 18px rgba(11, 47, 44, 0.08); }

.stp {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; margin: 0 0 6px;
  border: 1px solid var(--line); border-radius: 22px; background: var(--surface);
}
html[data-theme="light"] .stp { border-color: transparent; box-shadow: 0 16px 40px rgba(11, 47, 44, 0.07); }
.stp > * { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; min-height: 48px; padding: 7px 10px 8px; border-radius: 18px; }
.stp em { display: flex; align-items: center; gap: 4px; font-style: normal; font-size: 11.5px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.stp em svg { width: 13px; height: 13px; color: var(--mint-ink); flex: none; }
html[data-theme="dark"] .stp em svg { color: var(--mint); }
.stp b { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 14px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stp b .flag { flex: none; }
.stp .cur { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
.stp .cur em { color: var(--accent-text); font-weight: 700; }
.stp .todo b { color: var(--muted); font-weight: 600; }
.stp a:hover { background: var(--accent-soft); }
.stp .ph { font-weight: 600; }
.stp a:focus-visible, .pcard:focus-visible, .prov:focus-visible, .crow:focus-visible, .pseg a:focus-visible, .pp-change:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.pf-copy { margin-top: 12px; }
.pf-cols { margin-top: 6px; display: block; min-width: 0; }
.pcol { min-width: 0; }
.pcol[hidden] { display: none; }
.pflow[data-step="1"] .pcol-2, .pflow[data-step="1"] .pcol-3,
.pflow[data-step="2"] .pcol-1, .pflow[data-step="2"] .pcol-3,
.pflow[data-step="3"] .pcol-1, .pflow[data-step="3"] .pcol-2 { display: none; }
.colh { display: none; }
.sl2h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 18px 4px 10px; }
.sl2h h2, .pstrip h2 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.sl2h .tiny { white-space: nowrap; }
.pf-hint, .pf-note, .pf-report, .pf-empty { text-align: center; margin: 12px 4px 0; }

/* country list */
.clist { padding: 4px 0; margin: 0; }
.crow { display: flex; align-items: center; gap: 14px; min-height: 62px; padding: 0 16px; border-radius: var(--radius-card); }
.crow + .crow { border-top: 1px solid var(--line); border-top-left-radius: 0; border-top-right-radius: 0; }
html[data-theme="light"] .crow + .crow { border-top-color: rgba(11, 47, 44, 0.1); }
.crow .flag { width: 34px; height: 23px; }
.crow .flag img { width: 100%; height: 100%; object-fit: cover; }
.crow .zt { flex: 1; min-width: 0; }
.crow b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.crow .tiny { display: block; margin-top: 1px; }
.crow > svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.crow:hover { background: var(--accent-soft); }
.crow.on { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); border-top-color: transparent; }
.crow.on + .crow { border-top-color: transparent; }
.crow .tag { flex: none; font-size: 11.5px; font-weight: 700; color: var(--accent-text); background: var(--surface); border-radius: var(--radius-pill); padding: 3px 8px; white-space: nowrap; }

/* provider search + tiles */
.pf-search { position: relative; display: block; margin: 14px 0 0; }
.pf-search svg { position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--muted); pointer-events: none; }
.pf-search input {
  width: 100%; min-height: 48px; padding: 0 16px 0 44px; border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--surface); outline: none; font-size: 16px;
}
.pf-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
html[data-theme="light"] .pf-search input { border-color: transparent; box-shadow: 0 8px 18px rgba(11, 47, 44, 0.08); }
.plist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.prov {
  position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 120px; padding: 12px;
  border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface);
}
.prov[hidden] { display: none; }
html[data-theme="light"] .prov, html[data-theme="light"] .pcard { border-color: rgba(11, 47, 44, 0.12); box-shadow: 0 16px 40px rgba(11, 47, 44, 0.07); }
.prov:hover { border-color: var(--accent); }
.prov.on, .pcard.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.prov-tile { display: block; }
.prov-tile .plogo.xl { display: flex; }
.prov-row-logo { display: none; }
.prov-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prov-name { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.prov-text b { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; overflow-wrap: anywhere; }
.prov-text .tiny { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prov-sub:empty { display: none; }
.bdgs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.prov-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.pf-mine { display: inline-flex; flex: none; }
.pf-group { grid-column: 1 / -1; margin: 6px 4px 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.pf-group:first-child { margin-top: 0; }
.pf-group[hidden] { display: none; }
.pf-ico { display: flex; align-items: center; justify-content: center; width: 100%; height: 56px; border-radius: 15px; background: var(--surface-2); color: var(--text); }
html[data-theme="dark"] .pf-ico { background: var(--bg); }
.pf-ico svg { width: 24px; height: 24px; }
.pf-plus { background: var(--accent-soft); color: var(--accent-text); }
.prov-dash { background: transparent; border: 1.5px dashed var(--line); box-shadow: none !important; }
html[data-theme="light"] .prov-dash { border-color: rgba(11, 47, 44, 0.25); }
.pf-sep { grid-column: 1 / 2; }

.bdg { display: inline-flex; align-items: center; gap: 5px; border-radius: var(--radius-pill); padding: 3px 9px; font-size: 11.5px; font-weight: 700; white-space: nowrap; line-height: 1.3; }
.bdg.sub { background: var(--accent-soft); color: var(--accent-text); }
.bdg.tar { background: var(--mint-soft); color: var(--mint-ink); }
html[data-theme="dark"] .bdg.tar { color: var(--mint); }
.bdg.act { background: var(--surface-2); color: var(--text); }
html[data-theme="dark"] .bdg.act { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.bdg.act i { width: 6px; height: 6px; border-radius: 50%; background: var(--mint-ink); display: block; flex: none; }
html[data-theme="dark"] .bdg.act i { background: var(--mint); }

/* program cards */
.pstrip { display: flex; align-items: center; gap: 12px; margin: 16px 4px 0; }
.pstrip .zt { flex: 1; min-width: 0; }
.pstrip .tiny { display: block; margin-top: 2px; }
.pstrip .pf-ico { width: 88px; }
.pseg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; margin: 14px 0 12px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--bg); }
html[data-theme="light"] .pseg { background: var(--surface); border-color: transparent; box-shadow: 0 8px 18px rgba(11, 47, 44, 0.08); }
.pseg a { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 44px; border-radius: var(--radius-pill); color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; }
.pseg a small { font-size: 12px; font-weight: 600; opacity: 0.75; }
.pseg a:hover { color: var(--text); }
.pseg a.on { background: var(--accent); color: var(--accent-ink); }
.pcards { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.pcard { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.pcard:hover { border-color: var(--accent); }
.pc-top { display: flex; align-items: flex-start; gap: 12px; }
.pc-dot { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--muted); }
.pcard.on .pc-dot { border-color: var(--accent); background: radial-gradient(circle, var(--accent-ink) 0 4px, var(--accent) 5px); }
.pc-name { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.pc-fee { flex: none; text-align: right; }
.pc-fee b { display: block; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc-fee .tiny { display: block; }
.pc-badges { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 34px; }
.pc-line, .pc-night { padding-left: 34px; display: block; }
.pc-rates { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 34px; }
.rate { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: var(--radius-pill); background: var(--surface-2); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
html[data-theme="dark"] .rate { background: var(--bg); }
.rate b { font-weight: 700; }
.rate-ac .conn-ico { color: var(--conn-ac-ink); }
.rate-dc .conn-ico { color: var(--conn-dc-ink); }
.rate-ufc .conn-ico { color: var(--conn-ufc-ink); }
.rate .conn-ico { width: 14px; height: 14px; }

/* bar above the dock (phone, before the sheet) */
.pf-bar {
  position: fixed; z-index: 30; left: var(--pad-x); right: var(--pad-x); bottom: calc(84px + var(--safe-b));
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 16px;
  border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface);
}
.pf-bar[hidden] { display: none; }
html[data-theme="light"] .pf-bar { border-color: transparent; box-shadow: 0 16px 40px rgba(11, 47, 44, 0.16); }
.pf-bar-main { min-width: 0; display: flex; flex-direction: column; }
.pf-bar-main b { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-bar-main .tiny { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-bar .btn { min-height: 44px; flex: none; }
.bcr { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 0 2px 10px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.bcr svg { width: 13px; height: 13px; }

/* confirm panel: bottom sheet below 1080px, sticky side panel from 1080px */
.ppanel { display: none; }
.ppanel.is-open { display: block; position: fixed; inset: 0; z-index: 90; }
.pp-backdrop { position: absolute; inset: 0; background: rgba(8, 8, 10, 0.74); }
html[data-theme="light"] .pp-backdrop { background: rgba(11, 47, 44, 0.58); }
.pp-card {
  position: absolute; left: 0; right: 0; bottom: 0; max-width: 560px; margin: 0 auto; max-height: 94dvh; overflow-y: auto;
  padding: 10px 16px calc(24px + var(--safe-b)); border: 1px solid var(--line); border-bottom: 0;
  border-radius: 28px 28px 0 0; background: var(--surface);
}
body.pp-lock { overflow: hidden; }
.pp-grab { width: 44px; height: 5px; margin: 0 auto 8px; border-radius: 3px; background: var(--line); }
html[data-theme="light"] .pp-grab { background: var(--line); }
.pp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.pp-head h2, .pp-empty h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.pp-x { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); flex: none; }
.pp-x svg { width: 16px; height: 16px; }
html[data-theme="light"] .pp-x { border-color: transparent; box-shadow: 0 8px 18px rgba(11, 47, 44, 0.08); }
.pp-sum { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 14px; border-radius: var(--radius); background: var(--mint-soft); }
.pp-sum .pp-ico { display: flex; align-items: center; justify-content: center; width: 64px; height: 40px; border-radius: 10px; background: var(--surface-2); flex: none; }
.pp-ico svg { width: 22px; height: 22px; }
.pp-sum-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pp-sum-main b { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.pp-change { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--accent-text); font-weight: 700; }
.pp-label { display: block; margin: 0 0 8px; padding: 0; font-size: 14px; color: var(--muted); font-weight: 500; }
.pp-field { margin-bottom: 16px; }
.pp-date { display: flex; align-items: center; gap: 10px; }
.pp-date input[type="date"] {
  flex: 1; min-width: 0; min-height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); font-size: 16px; font-weight: 700; outline: none;
}
html[data-theme="light"] .pp-date input[type="date"] { background: var(--surface); border-color: transparent; box-shadow: 0 6px 16px rgba(11, 47, 44, 0.05); }
.pp-date input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pp-tag { flex: none; font-size: 12px; font-weight: 700; color: var(--mint-ink); background: var(--mint-soft); border-radius: var(--radius-pill); padding: 3px 8px; white-space: nowrap; }
html[data-theme="dark"] .pp-tag { color: var(--mint); }
.pp-tag[hidden] { display: none; }
.pp-chips { margin: 10px 0 0; }
.pp-chips .chip { min-height: 44px; padding: 10px 12px; font-size: 13.5px; font-weight: 600; cursor: pointer; color: var(--text); }
.pp-chips .chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.pp-field .prog-err { margin: 8px 0 0; }
.pp-who { margin: 0 0 14px; padding: 0; border: 0; min-width: 0; }
.pp-who .pp-label { float: none; }
.pp-member { position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px; margin-bottom: 6px; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); cursor: pointer; }
html[data-theme="light"] .pp-member { background: var(--surface); border-color: transparent; box-shadow: 0 6px 16px rgba(11, 47, 44, 0.05); }
.pp-member input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pp-member.is-you { cursor: default; }
/* The member's own profile picture (or the default one), as everywhere else in the app. */
.pp-av { flex: none; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; overflow: hidden; }
.pp-member-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pp-member-main b { font-size: 15px; }
.pp-box { flex: none; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 2px solid var(--line); border-radius: 8px; color: transparent; }
.pp-box svg { width: 14px; height: 14px; }
.pp-member input:checked + .pp-box { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.pp-member input:focus-visible + .pp-box { outline: 2px solid var(--accent); outline-offset: 2px; }
.pp-boxes { margin: 0 0 14px; }
.pp-both { margin-bottom: 10px; padding: 12px 12px 10px; border-radius: var(--radius); background: var(--surface-2); }
.pp-both[hidden] { display: none; }
html[data-theme="dark"] .pp-both { background: var(--bg); border: 1px solid var(--line); }
.pp-both-h { display: flex; gap: 10px; align-items: flex-start; margin: 0 2px 10px; font-size: 14px; font-weight: 700; line-height: 1.4; }
.pp-both-h svg { width: 18px; height: 18px; margin-top: 1px; flex: none; color: var(--muted); }
.pp-opts { display: flex; flex-direction: column; gap: 6px; }
.pp-opt { position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; }
html[data-theme="light"] .pp-opt { border-color: transparent; box-shadow: 0 6px 16px rgba(11, 47, 44, 0.05); }
.pp-opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pp-opt.is-off { opacity: 0.7; cursor: not-allowed; }
.pp-opt.is-off input { cursor: not-allowed; }
.pp-dot { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--muted); }
.pp-opt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pp-opt-main b { font-size: 14.5px; font-weight: 700; overflow-wrap: anywhere; }
.pp-opt-main .tiny:empty { display: none; }
.pp-opt.is-on, .pp-opt:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.pp-opt.is-on .pp-dot, .pp-opt:has(input:checked) .pp-dot { border-color: var(--accent); background: radial-gradient(circle, var(--accent-ink) 0 4px, var(--accent) 5px); }
.pp-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.pp-more { margin: 0 4px 10px; }
.pp-note { text-align: center; margin: 10px 4px 0; }
.pp-custom { margin-bottom: 6px; }
.pp-custom .chips { margin-bottom: 0; }
.pp-custom .chip { min-height: 44px; }
.pp-rate > span { font-size: 13px; }
.pp-card .btn svg { width: 18px; height: 18px; }
.pp-empty .btn[disabled] { opacity: 0.45; cursor: not-allowed; filter: none; box-shadow: none; }

/* Zapísať nabíjanie: which program of one provider */

@media (min-width: 721px) {
  .mpill .m-short { display: none; }
  .mpill .m-long { display: inline; }
  .plist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pf-bar { left: calc(248px + var(--pad-x)); bottom: 20px; max-width: 560px; }
  .pcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Sidebar (248px) leaves 776px at 1080: country + provider columns fold into the stepper, panel sits to the right. */
@media (min-width: 1080px) {
  .pflow[data-step="3"] .ppanel { display: block; position: sticky; top: 16px; inset: auto; z-index: 1; }
  .pflow[data-step="3"] .ppanel .pp-backdrop, .pp-grab, .pp-x { display: none; }
  .ppanel .pp-card { position: static; max-width: none; max-height: none; margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
  html[data-theme="light"] .ppanel .pp-card { border-color: rgba(11, 47, 44, 0.12); box-shadow: 0 16px 40px rgba(11, 47, 44, 0.07); }
  .pf-bar { display: none; }
  .pcards { grid-template-columns: minmax(0, 1fr); }
  body.pp-lock { overflow: auto; }
}
/* Vlastný program has no provider list: the empty middle column is dropped and the form spans it,
   fields on the left, date / who / save on the right, instead of one tall 300px panel. */
@media (min-width: 1080px) {
  .pflow[data-step="3"][data-custom] .pcol-3 { display: none; }
  .pflow[data-step="3"][data-custom] .ppanel { grid-column: 2 / 4; }
  .pp-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; align-items: start; }
  .pp-two .pp-colB { padding-top: 2px; }
}
/* #217 desktop: ~1200px content, countries 220px | provider grid (or programs) | sticky panel 300px. */
@media (min-width: 1080px) {
  .pflow { max-width: 1200px; }
  .pflow[data-step] .pf-cols { display: grid; grid-template-columns: 220px minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
  .pflow[data-step] .pcol-1 { display: block; grid-column: 1; grid-row: 1; }
  .pflow[data-step="1"] .pcol-1 { grid-column: 1 / -1; }
  .pflow[data-step="2"] .pcol-2 { display: block; grid-column: 2 / 4; grid-row: 1; }
  .pflow[data-step="3"] .pcol-3 { grid-column: 2; grid-row: 1; }
  .pflow[data-step="3"] .ppanel { grid-column: 3; grid-row: 1; }
  .pflow[data-step] .pcol[hidden] { display: none; }
  .colh { display: flex; align-items: center; gap: 8px; margin: 0 4px 10px; font-size: 13px; font-weight: 700; white-space: nowrap; }
  .colh i { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-style: normal; font-size: 12px; }
  .colh i svg { width: 12px; height: 12px; }
  .colh i.ok { background: var(--mint-soft); color: var(--mint-ink); border-color: transparent; }
  html[data-theme="dark"] .colh i.ok { color: var(--mint); }
  .colh i.cur { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
  .colh .tiny { margin-left: auto; font-weight: 500; }
  .pcol-1 .sl2h, .pcol-1 .pf-hint { display: none; }
  .pcol-1 .clist { padding: 6px; }
  .crow { min-height: 52px; padding: 0 10px; gap: 10px; border-radius: 16px; }
  .crow .flag { width: 26px; height: 18px; }
  .crow b { font-size: 14.5px; line-height: 1.25; }
  .crow .tiny { white-space: nowrap; font-size: 12px; }
  .crow .tag, .crow > svg { display: none; }
  /* #217 step 1 (no country picked yet): full-width card grid; collapses to the 220px column once picked. */
  html .pflow[data-step="1"] .clist { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; padding: 0; border: 0; background: none; box-shadow: none; overflow: visible; }
  html .pflow[data-step="1"] .clist .crow { min-height: 64px; padding: 0 14px; gap: 12px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
  html[data-theme="light"] .pflow[data-step="1"] .clist .crow { border-color: rgba(11, 47, 44, 0.12); box-shadow: 0 16px 40px rgba(11, 47, 44, 0.07); }
  html .pflow[data-step="1"] .clist .crow:hover { border-color: var(--accent); }
  html .pflow[data-step="1"] .clist .crow.on { background: var(--accent-soft); border-color: transparent; box-shadow: inset 0 0 0 2px var(--accent); }
  .pflow[data-step="1"] .crow .flag { width: 34px; height: 23px; }
  .pflow[data-step="1"] .crow b { font-size: 16px; }
  .plist { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .prov { min-height: 0; }
  .prov-tile { display: none; }
  .prov-row-logo { display: block; }
  .prov-row-logo .pf-ico { width: 64px; height: 40px; border-radius: 10px; }
  .pf-sep { grid-column: auto; }
  .pf-hint, .pf-report { text-align: left; }
  .pcol-3 .pseg, .pcol-3 .pstrip { margin-top: 0; }
  .pflow[data-step] .pf-head { margin-bottom: 4px; }
}
@media (max-width: 359px) {
  .pf-head h1 { font-size: 22px; }
  .pf-head { gap: 8px; }
  .mpill { padding: 0 12px; }
  .mpill svg, .crow .tag { display: none; }
  .stp > * { padding: 6px 7px 7px; }
  .stp b { font-size: 12.5px; gap: 4px; }
  .stp em { font-size: 10.5px; }
  .stp b .flag { display: none; }
  .crow { gap: 12px; padding: 0 14px; }
  .pp-change { display: none; }
  .pf-bar-main .tiny { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mpill, .prov, .pcard, .crow { transition: none; }
}
/* the confirm sheet focuses its title on open (screen readers); no ring for that programmatic focus */
#pp-title:focus { outline: none; }

/* #212 Shared program confirmed each month: Prehľad card, payer info, Zapísať inline question. */
.share-card { display: flex; flex-direction: column; gap: 12px; }
.share-eb {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 13px;
  font-weight: 700;
}
.share-card h2 { margin: 0; font-size: 20px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; line-height: 1.2; }
.share-lead { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.share-q { display: flex; flex-direction: column; gap: 12px; min-width: 0; margin: 0; }
.share-q + .share-q { border-top: 1px solid var(--line); padding-top: 16px; }
.share-prow { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--radius); background: var(--surface-2); min-width: 0; }
.share-prow-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.share-prow-main b { font-weight: 700; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.share-payer { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
.share-av {
  display: inline-grid;
  place-items: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 700;
}
.share-actions { display: flex; gap: 8px; }
.share-actions .btn { width: auto; flex: 1 1 auto; min-width: 0; }
.share-actions .btn.secondary { flex: 0 0 auto; min-width: 88px; }
@media (max-width: 359px) {
  .share-actions { flex-direction: column; }
  .share-actions .btn,
  .share-actions .btn.secondary { width: 100%; flex: 1 1 auto; }
}
.share-remember { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--muted); font-size: 14px; cursor: pointer; }
.share-remember input { flex: 0 0 20px; width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.share-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}
.share-note svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; }
.share-inline {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
  padding: 14px;
  border: 1.5px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-soft);
}
.share-inline[hidden] { display: none; }
.share-inline > b { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.share-inline > .tiny { margin: 0; }
.share-inline .share-prow { background: var(--surface); }
.share-info { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.share-info[hidden] { display: none; }
.share-info.is-pending { border-color: var(--amber); }
.share-info-body { min-width: 0; }
.share-info-body b { display: block; font-weight: 700; overflow-wrap: anywhere; }
.share-info-body .tiny { margin: 4px 0 0; }
.share-info-body a { color: var(--accent-text); font-weight: 700; }
.share-x {
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -10px -10px 0 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.share-x svg { width: 18px; height: 18px; }
.sess-toast.share-toast > span { white-space: normal; }


/* ===== História + mapa (MapLibre, self-hosted) ===== */
:root {
  --cfm-ac: #3b82f6;
  --cfm-dc: var(--accent);
  --cfm-ufc: var(--amber);
  --cfm-ufc-ink: #111112;
  --home-bg: #f2f2f3;
  --home-ink: #111112;
}
html[data-theme="light"] {
  --cfm-ac: #2f6fe0;
  --cfm-ufc-ink: #ffffff;
  --home-bg: #0b2f2c;
  --home-ink: #ffffff;
}
.maplibregl-map { font-family: inherit; background: var(--surface-2); }
.maplibregl-map .maplibregl-ctrl.maplibregl-ctrl-attrib,
.maplibregl-map .maplibregl-ctrl.maplibregl-ctrl-attrib.maplibregl-compact {
  background: var(--surface);
  color: var(--muted);
  font-size: 10px;
  font-family: inherit;
}
.maplibregl-map .maplibregl-ctrl-attrib a { color: var(--muted); }
/* Keep the credit clear of the map card's rounded corner. */
.hist-map .maplibregl-map .maplibregl-ctrl-bottom-right { right: 10px; bottom: 8px; }
.hist-map .maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib { margin: 0; }
.hist-map .maplibregl-ctrl-attrib-inner { white-space: nowrap; }
/* A narrow map wraps the legend by whole items, never inside one. */
.hist-legend { flex-wrap: wrap; row-gap: 2px; right: 10px; width: max-content; max-width: calc(100% - 20px); }
.hist-legend li { white-space: nowrap; }
.maplibregl-map .maplibregl-ctrl-attrib-button { background-color: transparent; }
html[data-theme="dark"] .maplibregl-map .maplibregl-ctrl-attrib-button { filter: invert(1); }
.maplibregl-map .maplibregl-ctrl-group { background: var(--surface); border: 1px solid var(--line); box-shadow: none; }
html[data-theme="light"] .maplibregl-map .maplibregl-ctrl-group { border-color: transparent; box-shadow: 0 8px 18px rgba(11, 47, 44, 0.08); }
.maplibregl-map .maplibregl-ctrl-group button { width: 44px; height: 44px; }
.maplibregl-map .maplibregl-ctrl-group button + button { border-top-color: var(--line); }
html[data-theme="dark"] .maplibregl-map .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1); }
.cfm-fail {
  position: absolute;
  inset: auto 12px 12px 12px;
  margin: 0;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 14px;
  z-index: 3;
}

/* pins: speed of the connector, size = kWh */
.cfm-pin {
  position: relative;
  width: var(--pin, 34px);
  height: var(--pin, 34px);
  padding: 0;
  display: grid;
  place-items: center;
  border: 2px solid var(--surface);
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  background: var(--cfm-ac);
  font: inherit;
}
.cfm-pin::before { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; }
.cfm-pin svg { width: 58%; height: 58%; }
.cfm-pin.cfm-dc { background: var(--cfm-dc); color: var(--accent-ink); }
.cfm-pin.cfm-ufc { background: var(--cfm-ufc); color: var(--cfm-ufc-ink); }
.cfm-pin.is-approx { border-style: dashed; border-color: var(--text); }
.cfm-pin.is-sel { width: calc(var(--pin, 34px) * 1.15); height: calc(var(--pin, 34px) * 1.15); box-shadow: 0 0 0 8px var(--accent-soft); z-index: 2; }
.cfm-pin:focus-visible, .cfm-cluster:focus-visible, .cfm-home:focus-visible, .cfm-callout-body:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.cfm-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--text);
  color: var(--bg);
  font: normal 700 11px/18px var(--font-num);
  text-align: center;
}
.cfm-cluster {
  position: relative;
  width: 40px;
  height: 40px;
  padding: 3px;
  border: 0;
  border-radius: 50%;
  background: var(--ring);
  cursor: pointer;
}
.cfm-cluster::before { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; }
.cfm-cluster b {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  font: 700 13px/1 var(--font-num);
}
.cfm-home {
  width: 32px;
  height: 32px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 2px solid var(--surface);
  border-radius: 9px;
  background: var(--home-bg);
  color: var(--home-ink);
  cursor: pointer;
  z-index: 2;
}
.cfm-home::before { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; }
.cfm-home svg { width: 20px; height: 20px; }
.cfm-home.is-sel { box-shadow: 0 0 0 8px var(--accent-soft); }
.cfm-callout { pointer-events: auto; }
.cfm-callout-body {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  gap: 0 6px;
  align-items: center;
  min-width: 180px;
  max-width: 240px;
  min-height: 44px;
  padding: 8px 10px 8px 12px;
  text-align: left;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
html[data-theme="light"] .cfm-callout-body { border-color: transparent; box-shadow: 0 8px 18px rgba(11, 47, 44, 0.12); }
.cfm-callout-body b { grid-column: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.cfm-callout-body .tiny { grid-column: 1; margin: 0; }
.cfm-callout-go { grid-column: 2; grid-row: 1 / span 2; display: grid; place-items: center; width: 28px; height: 28px; }
.cfm-callout-go svg { width: 18px; height: 18px; }
.cfm-fix {
  position: relative;
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--surface);
}
.cfm-fix::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--acc, 24px) * 2);
  height: calc(var(--acc, 24px) * 2);
  margin: calc(var(--acc, 24px) * -1) 0 0 calc(var(--acc, 24px) * -1);
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  pointer-events: none;
}
.cfm-fix-station {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--cfm-dc);
  color: var(--accent-ink);
  border: 2px solid var(--surface);
}
.cfm-fix-station svg { width: 12px; height: 12px; }
.cfm-key { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; background: var(--cfm-ac); }
.cfm-key.cfm-dc { background: var(--cfm-dc); }
.cfm-key.cfm-ufc { background: var(--cfm-ufc); }
.cfm-key.cfm-homekey { border-radius: 3px; background: var(--home-bg); }

/* História layout */
.hist { min-width: 0; }
.vseg {
  display: inline-flex;
  flex-shrink: 0;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
}
html[data-theme="light"] .vseg { border-color: transparent; box-shadow: 0 8px 18px rgba(11, 47, 44, 0.08); }
.vseg button {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.vseg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.vseg button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.hist-bar { align-items: center; }
.hist-map {
  position: relative;
  height: 180px;
  margin: 0 0 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface-2);
}
html[data-theme="light"] .hist-map { border-color: transparent; box-shadow: 0 16px 40px rgba(11, 47, 44, 0.07); }
.hist-map-canvas, .hist-map-canvas.maplibregl-map { position: absolute; inset: 0; }
.hist-map:has(.hist-empty) .hist-map-canvas { opacity: 0.55; }
.hist-map-top { position: absolute; left: 10px; top: 10px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.hist-pill {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
html[data-theme="light"] .hist-pill { border-color: transparent; box-shadow: 0 8px 18px rgba(11, 47, 44, 0.08); }
.hist-pill[hidden] { display: none; }
.hist-pill:hover { border-color: var(--accent); }
.hist-fullmap { position: absolute; right: 10px; top: 10px; z-index: 2; }
.hist-legend {
  position: absolute;
  left: 10px;
  bottom: 44px; /* above the OpenFreeMap attribution, which stays visible */
  z-index: 2;
  display: none;
  gap: 12px;
  align-items: center;
  margin: 0;
  padding: 6px 12px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}
html[data-theme="light"] .hist-legend { border-color: transparent; }
.hist-empty {
  position: absolute;
  inset: 12px;
  z-index: 3;
  width: min(420px, calc(100% - 24px));
  height: fit-content;
  max-height: calc(100% - 24px);
  margin: auto;
  padding: 16px;
  display: grid;
  gap: 8px;
  justify-items: start;
  overflow: auto;
}
.hist-empty svg { width: 28px; height: 28px; color: var(--accent-text); }
.hist-empty p { margin: 0; }
.hist-map-fail { margin: 6px 0 0; }
.hist-map-off { margin: 0 0 12px; }
.hist-tools { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; }
.hist-tools .hist-filterbtn { min-height: 44px; gap: 6px; cursor: pointer; font: inherit; font-size: 14px; }
.hist-tools svg { width: 16px; height: 16px; }
.hist-clear {
  min-height: 44px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  background: none;
  border: 0;
  color: var(--accent-text);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.hist-selbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  margin: 0 0 8px;
  padding: 0 4px 0 12px;
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  font-size: 14px;
}
.hist-selbar[hidden] { display: none; }
.hist-selbar button { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--text); cursor: pointer; }
.hist-selbar svg { width: 18px; height: 18px; }
.sess-item.hl { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.hist-noloc { color: var(--muted); }
.hist-grab { display: block; width: 100%; height: 44px; padding: 0; border: 0; background: none; cursor: grab; touch-action: none; }
.hist-grab[hidden] { display: none; }
.hist-grab i { display: block; width: 40px; height: 5px; margin: 0 auto; border-radius: 5px; background: var(--line); }
html[data-theme="light"] .hist-grab i { background: rgba(11, 47, 44, 0.25); }

/* the sheets */
.hist-sheet .kpi-explain-card { max-height: min(86dvh, 640px); }
form.hist-form { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
.hist-sheet-head { display: flex; align-items: center; gap: 8px; }
.hist-sheet-head b { flex: 1; }
.hist-form-body { flex: 1; min-height: 0; overflow: auto; padding-bottom: 8px; }
.hist-fs { margin: 0 0 14px; padding: 0; border: 0; min-width: 0; }
.hist-fs legend { padding: 0; margin: 0 0 8px; font-size: 13px; font-weight: 500; color: var(--muted); }
.hist-form .chips { margin-bottom: 0; }
.hist-form .chip { min-height: 44px; }
.hist-form label.chip input { display: block; position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.hist-form label.chip { position: relative; }
.hist-form label.chip:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.hist-form .conn-chip-ico, .hist-net { display: inline-flex; align-items: center; gap: 6px; }
.hist-form .conn-ico { width: 16px; height: 16px; }
.hist-form-foot {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 8px;
  padding: 10px 0 calc(16px + var(--safe-b));
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.hist-form-foot .btn { width: 100%; }
.hist-custom { margin-top: 10px; }
.hist-custom[hidden] { display: none; }
.hist-place-mark { display: inline-flex; flex: 0 0 auto; }
.hist-place-name { display: grid; flex: 1; min-width: 0; }
.hist-place-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 8px 0; }
.hist-tiles > div { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); display: grid; gap: 2px; }
.hist-tiles .num { font-size: 20px; font-weight: 600; letter-spacing: -0.03em; }
.hist-acc, .hist-avg { margin: 4px 0; }
.hist-sub { margin: 14px 0 8px; font-size: 14px; font-weight: 500; }
.hist-place-rows { margin: 0 0 14px; }
.hist-place-rows .item { align-items: center; gap: 10px; }
.hist-place-rows .conn-sq { flex: 0 0 auto; }

/* wide screens: the map sits beside the list */
@media (min-width: 721px) {
  .vseg, .hist-fullmap, .hist [data-hist-outside] { display: none; }
  .hist-map { height: 320px; }
  .hist-legend { display: flex; }
  .hist[data-map-off] .hist-map { display: none; }
}
@media (min-width: 1080px) {
  .hist:not([data-map-off]) {
    display: grid;
    grid-template-columns: minmax(0, 500px) minmax(0, 1fr);
    column-gap: 24px;
    align-items: start;
  }
  .hist:not([data-map-off]) > * { grid-column: 1; }
  .hist:not([data-map-off]) > .hist-map {
    grid-column: 2;
    grid-row: 1 / span 4;
    position: sticky;
    top: 24px;
    height: calc(100dvh - 48px);
    margin: 0;
  }
  .hist:not([data-map-off]) > .hist-list { grid-row: auto; }
}

/* phones: Zoznam | Mapa */
@media (max-width: 720px) {
  .hist-bar .lead { display: none; }
  .hist .hist-pill-all { display: none; }
  .hist[data-view="list"] [data-hist-outside] { display: none; }
  body.hist-map-on { overflow: hidden; }
  .hist[data-view="map"] .hist-fullmap { display: none; }
  .hist[data-view="map"] .hist-map {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--hist-top, 56px);
    bottom: calc(60px + var(--safe-b));
    height: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
    z-index: 5;
  }
  /* The OpenFreeMap / OpenStreetMap credit must stay visible: keep it just above the sheet's top edge. */
  .hist[data-view="map"] .hist-map .maplibregl-ctrl-bottom-right {
    bottom: calc(100dvh - 60px - var(--safe-b) - var(--sheet-top, 56dvh) + 8px);
  }
  .hist[data-view="map"] .hist-list {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--sheet-top, 56%);
    bottom: calc(60px + var(--safe-b));
    z-index: 6;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 0 var(--pad-x) 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
  }
  html[data-theme="light"] .hist[data-view="map"] .hist-list { border-color: transparent; box-shadow: 0 -16px 40px rgba(11, 47, 44, 0.07); }
  .hist[data-view="map"] .hist-map-top { top: 10px; }
  .hist-form-foot { grid-template-columns: 1fr 1.6fr; }
}
@media (max-width: 380px) {
  .hist-tiles .num { font-size: 17px; }
  .vseg button { padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .cfm-pin, .cfm-cluster { transition: none; }
}

/* „Tu som“ panel (Zapísať, Upraviť) and the home picker in Domácnosť */
.here-panel { flex: 1 0 100%; display: grid; gap: 8px; margin: 8px 0 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); }
.here-panel[hidden] { display: none; }
.here-panel p { margin: 0; }
.here-line { font-size: 14px; font-weight: 500; }
.here-line.is-on { color: var(--accent-text); }
.here-line.is-warn { color: var(--danger); }
.here-map { position: relative; height: 104px; overflow: hidden; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.here-chips { margin: 0; }
.here-chips .chip { min-height: 44px; font: inherit; cursor: pointer; }
.home-map { height: 240px; min-height: 240px; margin: 8px 0; }
.home-geo .btn-row { flex-wrap: wrap; gap: 8px; }
.home-geo .btn-row .btn { width: auto; flex: 1 1 10rem; }
.home-geo .btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.cfm-home-pick { cursor: grab; }

/* ---------------------------------------------------------------- /tarify redesign (Mirage, tarify-spec.md) */
.tf { --tf-gap: 10px; display: flex; flex-direction: column; gap: 12px; }
.tf-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.tf-title { display: flex; align-items: center; gap: 12px; min-width: 0; flex-wrap: wrap; }
.tf-title h1 { margin: 0; font-size: 32px; line-height: 1.1; padding-block: 0.08em; }
.tf-lead { margin: -4px 0 0; }
.tf-head-tools { display: none; align-items: center; gap: 10px; }
.tf-country { position: relative; }
.tf-country > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px 0 10px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--line); font-weight: 600; cursor: pointer; }
.tf-country > summary::-webkit-details-marker { display: none; }
.tf-country > summary svg { width: 16px; height: 16px; }
.tf-country .flag img { width: 22px; height: auto; border-radius: 3px; display: block; }
.tf-country-list { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 240px; max-height: 60dvh; overflow: auto; margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28); }
.tf-country-list a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; }
.tf-country-list a:hover, .tf-country-list a[aria-current] { background: var(--accent-soft); }
.tf-country-list small { margin-left: auto; }
html[data-theme="light"] .tf-country > summary { border-color: transparent; box-shadow: 0 8px 18px rgba(11, 47, 44, 0.08); }
html[data-theme="light"] .tf-country-list { border-color: transparent; box-shadow: 0 18px 40px rgba(11, 47, 44, 0.14); }

/* segments */
.tf-seg { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--line); }
.tf-seg > .tiny { padding: 0 8px; }
.tf-seg button, .tf-seg label > span { min-height: 36px; padding: 0 14px; border: 0; border-radius: var(--radius-pill); background: none; color: var(--text); font: inherit; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.tf-seg button[aria-pressed="true"], .tf-seg input:checked + span { background: var(--accent); color: var(--accent-ink); }
.tf-seg button small { font-weight: 500; opacity: 0.8; }
.tf-seg label { flex: 1; display: flex; }
.tf-seg label > span { flex: 1; }
.tf-seg input { position: absolute; opacity: 0; pointer-events: none; }
.tf-seg label:has(input:focus-visible) > span, .tf-seg button:focus-visible { box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
html[data-theme="light"] .tf-seg { border-color: transparent; box-shadow: 0 8px 18px rgba(11, 47, 44, 0.08); }

/* Pre vás */
.tf-you, .tf-bars-card { display: flex; flex-direction: column; gap: 10px; }
.tf-you-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tf-eyebrow { font-size: 13px; color: var(--accent-text); }
.tf-edit { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 4px; border: 0; background: none; color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.tf-edit svg { width: 16px; height: 16px; }
.tf-verdict { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.tf-rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tf-rank li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.tf-rank li:first-child { border-top: 0; }
.tf-rank-n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--surface-2); }
.tf-rank-n.on { background: var(--accent); color: var(--accent-ink); }
.tf-rank-name, .tf-rank-eur, .tf-net-main, .tf-pname, .tf-home-name, .tf-home-rate { display: flex; flex-direction: column; min-width: 0; }
.tf-rank-name b { overflow-wrap: anywhere; }
.tf-rank-eur { text-align: right; }
.tf-src { display: flex; gap: 8px; align-items: flex-start; margin: 0; }
.tf-src svg, .tf-note svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.tf-note { display: flex; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--hint); }
html[data-theme="dark"] .tf-note { background: var(--bg); }
.tf-note p { margin: 0; }
.tf-compare-m { margin-top: 2px; }

/* tools */
.tf-tools { display: flex; flex-direction: column; gap: 10px; }
.tf-seg-m { align-self: flex-start; }
.tf-search { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--line); }
.tf-search svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.tf-search input { flex: 1; min-width: 0; border: 0; background: none; color: var(--text); font: inherit; min-height: 42px; padding: 0; box-shadow: none; }
.tf-search input:focus { outline: none; }
.tf-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
html[data-theme="light"] .tf-search { border-color: transparent; box-shadow: 0 6px 16px rgba(11, 47, 44, 0.05); }

/* networks */
.tf-nets { display: flex; flex-direction: column; gap: 10px; }
.tf-group { display: flex; align-items: baseline; justify-content: space-between; margin-top: 8px; }
.tf-group h2 { margin: 0; font-size: 15px; color: var(--text); font-weight: 700; }
.tf-group[hidden], .tf-netgrid[hidden], .tf-net[hidden] { display: none; }
.tf-netgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tf-gap); }
.tf-net { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--line); color: var(--text); text-decoration: none; min-width: 0; }
.tf-net:hover { border-color: var(--accent); }
.tf-net:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
html[data-theme="light"] .tf-net { border-color: transparent; box-shadow: 0 16px 40px rgba(11, 47, 44, 0.07); }
.tf-net-logo .plogo { width: 100%; }
.tf-net-name { overflow-wrap: anywhere; line-height: 1.25; }
.tf-net-price { display: flex; flex-direction: column; }
.tf-c { display: none; flex-direction: column; gap: 3px; }
.tf[data-conn="ac"] .tf-c[data-c="ac"], .tf[data-conn="dc"] .tf-c[data-c="dc"], .tf[data-conn="ufc"] .tf-c[data-c="ufc"] { display: flex; }
.tf-price b { font-size: 22px; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.tf-perkwh { font-size: 12px; color: var(--muted); margin-left: 2px; }
.tf-range { position: relative; height: 4px; border-radius: 4px; background: var(--bar-track); margin: 3px 0 1px; }
.tf-range i { position: absolute; top: 0; bottom: 0; min-width: 6px; border-radius: 4px; background: linear-gradient(90deg, var(--mint), var(--accent), var(--amber)); }
.tf-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; }
.bdg.new { background: transparent; color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent); }
.tf-short { display: none; }
.bdg.tf-mine { max-width: 100%; white-space: normal; align-items: flex-start; text-align: left; overflow-wrap: anywhere; }
.bdg.tf-mine i { margin-top: 5px; }
.tf-badges { min-width: 0; max-width: 100%; }
.tf-empty { margin: 0; }
.tf-home { display: flex; flex-direction: column; padding: 4px 16px; }
.tf-home-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.tf-home-row:first-child { border-top: 0; }
.tf-home-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); }
.tf-home-ico svg { width: 20px; height: 20px; }
.tf-home-rate { text-align: right; }
.tf-report { text-align: center; margin: 8px 0 0; }

/* network detail */
.tf-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tf-back { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-weight: 600; text-decoration: none; }
.tf-back-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--text); }
.tf-back-btn svg { width: 18px; height: 18px; }
html[data-theme="light"] .tf-back-btn { border-color: transparent; box-shadow: 0 8px 18px rgba(11, 47, 44, 0.08); }
.tf-panel { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tf-panel-head { display: flex; align-items: center; gap: 12px; }
.tf-panel-head p { margin: 2px 0 0; }
.tf-net-h { margin: 0; font-size: 26px; line-height: 1.15; color: var(--text); font-weight: 700; letter-spacing: -0.03em; }
.tf-pseg { width: 100%; }
.tf-pseg button { flex: 1 1 0; min-width: 0; padding: 0 8px; }
.tf-prices-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.tf-band button { min-height: 32px; padding: 0 10px; font-size: 13px; }
.tf-matrix { display: flex; flex-direction: column; }
.tf-mrow { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(52px, 0.9fr) repeat(3, minmax(38px, 0.62fr)); gap: 4px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); }
.tf-mhead { border-top: 0; padding-top: 0; font-size: 12px; color: var(--muted); font-weight: 600; }
.tf-mhead > :not(:first-child), .tf-mrow > .num { text-align: right; }
.tf-dcol { display: none; }
.tf-pname b { overflow-wrap: anywhere; }
.tf-pname .bdg { align-self: flex-start; margin: 2px 0; }
.tf-fee small { display: block; }
.tf-rate span { display: inline-block; padding: 2px 5px; border-radius: 8px; font-variant-numeric: tabular-nums; }
.tf-rate span.lo { background: var(--mint-soft); color: var(--mint-ink); box-shadow: inset 0 0 0 1px var(--mint); }
html[data-theme="dark"] .tf-rate span.lo { color: var(--mint); }
.tf[data-band="day"] [data-b="night"], .tf[data-band="night"] [data-b="day"] { display: none; }
.tf[data-ptype="prepaid"] [data-ptype="payg"]:not(button), .tf[data-ptype="payg"] [data-ptype="prepaid"]:not(button) { display: none; }
.tf-mrow.win .tf-you-col { color: var(--accent-text); font-weight: 700; }
.tf-legend { margin: 0; }
.tf-lo-key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--mint-soft); box-shadow: inset 0 0 0 1px var(--mint); margin-right: 6px; vertical-align: -1px; }
.tf-add { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; border: 1px solid var(--line); color: var(--text); text-decoration: none; font-size: 18px; }
.tf-add:hover { border-color: var(--accent); }
.tf-bars { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tf-bars li { display: grid; grid-template-columns: minmax(70px, 0.9fr) minmax(0, 1.4fr) auto; gap: 10px; align-items: center; font-size: 13px; }
.tf-bar-name { font-weight: 600; overflow-wrap: anywhere; }
.tf-bar { display: flex; height: 10px; border-radius: 6px; background: var(--bar-track); overflow: hidden; }
.tf-bar i.fee, .tf-bar-key i.fee { background: var(--ice); }
.tf-bar i.en, .tf-bar-key i.en { background: color-mix(in srgb, var(--ice) 45%, var(--bar-track)); }
.tf-bars li.win .tf-bar i.fee { background: color-mix(in srgb, var(--accent) 60%, var(--ice)); }
.tf-bars li.win .tf-bar i.en { background: var(--accent); }
.tf-bars li.win b { color: var(--accent-text); }
.tf-bar-key { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; }
.tf-bar-key i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.tf-bar-key i.en { margin-left: 10px; }
.tf-pair { display: flex; flex-direction: column; gap: 12px; }
.tf-kpis { display: none; }
.tf-pricelist { text-align: center; margin: 0; }

/* sheet */
.tf-form { display: flex; flex-direction: column; gap: 12px; max-height: min(88dvh, 720px); }
.tf-src-seg { display: flex; width: 100%; }
.tf-form[data-src="manual"] .tf-real, .tf-form:not([data-src="manual"]) .tf-manual { display: none; }
.tf-form .hist-fs { border: 0; margin: 0; padding: 0; }
.tf-form .hist-fs legend { padding: 0; margin: 0 0 8px; font-size: 13px; font-weight: 500; color: var(--muted); }
.tf-sum[hidden] { display: none; }
.tf-sum { margin: 0; padding: 4px 14px; border-radius: var(--radius-sm); background: var(--mint-soft); }
html[data-theme="dark"] .tf-sum { background: var(--bg); }
.tf-sum > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.tf-sum > div:first-child { border-top: 0; }
.tf-sum dt { color: var(--muted); }
.tf-sum dd { margin: 0; font-weight: 700; text-align: right; }
.tf-mixbar { flex-basis: 100%; display: flex; gap: 2px; height: 6px; border-radius: 4px; overflow: hidden; }
.tf-mixbar i { display: block; height: 100%; }
.tf-form .field { margin-bottom: 0; }
.tf-manual { display: flex; flex-direction: column; gap: 12px; }

/* 320 px */
@media (max-width: 359px) {
  .tf-title h1 { font-size: 28px; }
  .tf-perkwh, .tf-long { display: none; }
  .tf-short { display: inline; }
  .tf-netgrid { gap: 8px; }
  .tf-net { padding: 10px; }
  .tf-mrow { grid-template-columns: minmax(0, 1.3fr) minmax(48px, 0.9fr) repeat(3, minmax(34px, 0.6fr)); font-size: 13px; }
  .tf-rate span { padding: 2px 3px; }
  .tf-pseg button { padding: 0 4px; font-size: 13px; gap: 3px; }
}

/* mobile flow (T1 → T2) */
@media (max-width: 899px) {
  .tf.has-op .tf-side, .tf.has-op .tf-head, .tf.has-op .tf-lead { display: none; }
  .tf:not(.has-op) .tf-main { display: none; }
}

/* desktop (T3) */
@media (min-width: 900px) {
  .tf { max-width: 1200px; }
  .tf-head-tools { display: flex; }
  .tf-seg-m, .tf-compare-m, .tf-back { display: none; }
  .tf-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
  .tf-side { display: flex; flex-direction: column; gap: 12px; }
  .tf-netgrid { grid-template-columns: 1fr; gap: 0; }
  .tf-nets { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 10px; gap: 4px; }
  html[data-theme="light"] .tf-nets { border-color: transparent; box-shadow: 0 16px 40px rgba(11, 47, 44, 0.07); }
  .tf-group { margin: 6px 6px 2px; }
  .tf-group h2 { font-size: 13px; }
  .tf-net { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-areas: "logo main price" "logo badges price"; column-gap: 10px; row-gap: 2px; padding: 8px; border-radius: var(--radius-sm); box-shadow: none !important; border-color: transparent; background: none; }
  .tf-net.on { border-color: var(--accent); background: var(--accent-soft); }
  .tf-net-logo { grid-area: logo; }
  .tf-net-logo .plogo { width: 52px; height: 36px; }
  .tf-net-main { grid-area: main; }
  .tf-net-price { grid-area: price; text-align: right; align-self: center; }
  .tf-badges { grid-area: badges; margin: 0; }
  .tf-net .tf-range, .tf-net .tf-from, .tf-perkwh { display: none; }
  .tf-price b { font-size: 15px; }
  .tf-net-sub { font-size: 11.5px; }
  .tf-home { box-shadow: none !important; border: 0; padding: 0 6px; background: none; }
  .tf-pair { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; align-items: start; }
  .tf-kpis { display: flex; flex-direction: column; gap: 10px; }
  .tf-kpi { display: flex; flex-direction: column; gap: 2px; }
  .tf-kpi b { font-size: 24px; letter-spacing: -0.03em; }
  .tf-kpi.lead { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
  .tf-kpi.lead .tiny { color: var(--accent-ink); }
  .tf-add-m { display: none; }
  .tf-pricelist { text-align: left; }
  .tf-pseg { width: auto; }
  .tf-panel-tools { display: flex; justify-content: space-between; }
}
@media (min-width: 1200px) {
  .tf-grid { grid-template-columns: 340px minmax(0, 1fr); }
  .tf-mrow { grid-template-columns: minmax(0, 2fr) minmax(70px, 0.9fr) repeat(3, minmax(48px, 0.6fr)) minmax(80px, 0.9fr) 36px; }
  .tf-dcol { display: block; }
  .tf-mhead .tf-dcol { display: block; }
}

/* ── /vehicles redesign (Mirage) ─────────────────────────────────────── */
.vh-page-head .btn svg { width: 16px; height: 16px; margin-right: 6px; }
.vh-month {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px;
  padding: 8px 14px; border-radius: var(--radius-pill); background: var(--surface);
  border: 1px solid var(--line); font-size: 14px; font-weight: 600;
}
.vh-month svg { width: 16px; height: 16px; color: var(--muted); }
.vh-list { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.vc { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 18px; min-width: 0; }
.vc-head, .vp-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.vc-logo {
  flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--accent);
  color: var(--accent-ink); display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 20px;
}
.vc-logo img { width: 26px; height: 26px; object-fit: contain; }
.vc-name { flex: 1; min-width: 0; }
.vc-name h2 {
  margin: 0; font-size: 20px; font-weight: 700; color: var(--text); letter-spacing: -0.02em;
  display: flex; align-items: center; gap: 8px; min-width: 0;
}
.vc-link, .vp-name-txt { color: inherit; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.vc-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.vc-link:focus-visible { outline: none; }
.vc:has(.vc-link:focus-visible) { box-shadow: 0 0 0 3px var(--accent-soft); border-color: var(--accent); }
.vc-line { margin: 2px 0 0; overflow-wrap: anywhere; }
.vc-chev { width: 20px; height: 20px; flex: none; color: var(--muted); }
.vh-chip {
  flex: none; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px;
  border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-text);
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.vh-tesla {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 28px;
  padding: 4px 12px; border-radius: var(--radius-pill); background: var(--surface-2);
  color: var(--muted); font-size: 13px; font-weight: 600;
}
.vh-tesla.on { background: var(--mint-soft); color: var(--mint-ink); }
.vh-tesla i { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); flex: none; }
.vc-main { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.vc-main p { margin: 0; }
.vc-big, .vp-big {
  font-family: var(--font-num); font-size: 36px; font-weight: 700; letter-spacing: -0.045em;
  line-height: 1; margin: 0; white-space: nowrap;
}
.vc-big small, .vp-big small, .vp-tile b small {
  font-size: 15px; font-weight: 600; letter-spacing: 0; margin-left: 4px;
}
.vc-main .tiny { margin-top: 6px; }
.vc-odo { text-align: right; display: flex; flex-direction: column; gap: 4px; margin-left: auto; }
.vc-odo b { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.vc-wide { display: none; }
.vc-need, .vc-cmp a, .vc-need a { position: relative; z-index: 2; }
.vc-need {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-radius: var(--radius); background: var(--surface-2);
}
.vc-need svg { width: 22px; height: 22px; color: var(--amber); flex: none; }
.vc-need p { margin: 0; flex: 1; font-size: 14px; }
.vc-need .btn { flex: none; min-height: 40px; }
.vc-cmp { display: flex; flex-direction: column; gap: 10px; }
.vc-cmp:empty { display: none; }
.vc-cmp .vh-bars { border-top: 1px solid var(--line); padding-top: 12px; }
.vc-mini { display: none; }
.vh-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.vh-bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; }
.vh-bar-name { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vh-bar-name svg { width: 16px; height: 16px; flex: none; color: var(--accent-text); }
.vh-bars li.ice .vh-bar-name svg, .vh-bars li.ice b { color: var(--ice); }
.vh-bars b { font-size: 14px; white-space: nowrap; }
.vh-bar { grid-column: 1 / -1; height: 8px; border-radius: var(--radius-pill); background: var(--bar-track); overflow: hidden; }
.vh-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.vh-bars li.ice .vh-bar i { background: var(--ice); }
.vh-saved.more { background: var(--surface-2); color: var(--text); }
.cmp-bar { display: block; margin-top: 8px; height: 6px; }
.cmp-bar.ice i { background: var(--ice); }
.vh-saved {
  margin: 0; display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: var(--radius); background: var(--mint-soft); color: var(--mint-ink);
  font-weight: 600; font-size: 14px;
}
.vh-saved b { font-size: 20px; letter-spacing: -0.02em; white-space: nowrap; }
.vh-ice-add {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 14px;
  border: 1.5px dashed var(--line); border-radius: var(--radius); color: var(--text);
  text-decoration: none; font-weight: 600; font-size: 14px;
}
.vh-ice-add svg { width: 20px; height: 20px; color: var(--ice); flex: none; }
.vh-ice-add span { flex: 1; min-width: 0; }
.vh-ice-add b { color: var(--accent-text); }
.vh-ice-add:hover, .vh-ice-add:focus-visible { border-color: var(--accent); outline: none; }
.vh-add {
  display: flex; align-items: center; gap: 14px; padding: 18px; text-decoration: none; color: var(--text);
  background: transparent; border: 1.5px dashed var(--line); box-shadow: none;
}
.vh-add > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.vh-add-ico { width: 48px; height: 48px; border-radius: 14px; background: var(--accent-soft); color: var(--accent-text); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.vh-add-ico svg { width: 22px; height: 22px; }
.vh-add:hover, .vh-add:focus-visible { border-color: var(--accent); outline: none; }
.vh-empty { display: flex; flex-direction: column; gap: 14px; }
.vh-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.vh-steps li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.vh-steps i { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-weight: 700; font-size: 13px; flex: none; }

/* Detail panel */
.vh-panel { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.vp-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vp-back { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500; min-height: 44px; }
.vp-back .period-shift { margin: 0; }
.vp-edit svg { width: 15px; height: 15px; margin-right: 6px; }
.vp-edit { min-height: 40px; background: var(--surface); }
.vp-edit-wide { display: none; }
.vp-head { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.vp-name { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.03em; color: var(--text); display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-logo { width: 52px; height: 52px; }
.vp-period { display: flex; align-items: center; gap: 8px; min-width: 0; }
.vp-period .period-menu { flex: 1; min-width: 0; max-width: none; margin: 0; }
.vp-period .period-shift { margin: 0; }
.vp-period .period-menu { position: relative; z-index: 3; }
.vp-period .period-summary {
  width: 100%; justify-content: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--line);
  border-radius: var(--radius-pill); background: var(--surface); color: var(--text);
  font-size: 14px; font-weight: 700; letter-spacing: -0.01em;
}
.vp-period .period-summary::after { opacity: 1; }
.vp-period .period-summary:hover, .vp-period .period-menu.is-open > .period-summary { border-color: var(--accent); background: var(--accent-soft); }
html[data-theme="light"] .vp-period .period-summary { border-color: transparent; box-shadow: 0 8px 18px rgba(11, 47, 44, 0.08); }
.vp-period .period-menu:not(.is-open) > .period-panel { pointer-events: none; }
.vp-period .period-panel { position: absolute; left: 0; right: 0; margin: 0 auto; top: calc(100% + 6px); z-index: 5; min-width: min(340px, calc(100vw - 32px)); }
.vp-period .period-menu.is-open > .period-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 10px 12px 8px; }
html[data-theme="light"] .vp-period .period-menu.is-open > .period-panel { border-color: transparent; box-shadow: 0 16px 40px rgba(11, 47, 44, 0.12); }
.vp-owner { margin: 0; }
.vp-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.vp-lead {
  grid-column: 1 / -1; background: var(--accent); color: var(--accent-ink); border-radius: var(--radius-card);
  padding: 18px; display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
.vp-lead .tiny, .vp-lead .hint, .vp-lead dt { color: var(--accent-ink); }
.vp-lead .vp-big { font-size: 44px; }
.vp-sub { margin: 0; font-size: 14px; font-weight: 600; }
.vp-lead .hint { margin: 0; }
.vp-lead-btn { align-self: flex-start; background: var(--surface); color: var(--text); }
.vp-break { margin: 6px 0 0; display: flex; flex-direction: column; gap: 6px; }
.vp-break div { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.vp-break dt { margin: 0; min-width: 0; }
.vp-break dd { margin: 0; font-weight: 700; white-space: nowrap; }
.vp-break-lead { border-top: 1px solid rgba(11, 47, 44, 0.18); padding-top: 10px; }
.vp-break-lead dt { font-weight: 600; }
.vp-break .sum { border-top: 1px solid var(--line); padding-top: 8px; font-weight: 600; }
.vp-tile {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
.vp-tile b { font-family: var(--font-num); font-size: 22px; font-weight: 700; letter-spacing: -0.03em; white-space: nowrap; }
.vp-tile b small { font-size: 13px; }
.vp-tile-more, .vp-tile-long, .vp-lead-period-hide { display: none; }
.vp-boxes { display: flex; flex-direction: column; gap: 12px; }
.vp-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.vp-box-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.vp-box-head h3, .vp-rec-h { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); }
.vp-box-head a { color: var(--accent-text); font-weight: 600; font-size: 14px; text-decoration: none; }
.vp-box-body { display: flex; flex-direction: column; gap: 12px; }
.vp-fuel { margin: 0; }
.vp-made-part { display: none; }
.vp-mix .mix-bar { margin: 0 0 10px; }
.vp-rec-h { margin: 8px 0 0; }
.vp-recs { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; }
.vp-rec { display: block; color: var(--text); text-decoration: none; border-top: 1px solid var(--line); }
.vp-rec:first-child { border-top: 0; }
a.vp-rec, .vp-rec summary { display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 56px; cursor: pointer; }
.vp-rec summary { list-style: none; }
.vp-rec summary::-webkit-details-marker { display: none; }
.vp-rec-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.vp-rec-ico svg { width: 18px; height: 18px; }
.vp-rec-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vp-rec-main .tiny { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-rec-count { white-space: nowrap; font-weight: 600; color: var(--text); }
a.vp-rec:hover, .vp-rec summary:hover { background: var(--surface-2); }
.vp-deg { list-style: none; margin: 0; padding: 0 14px 12px 66px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.vp-deg li { display: flex; justify-content: space-between; gap: 10px; }
.vp-foot { text-align: center; margin: 4px 0 0; }

/* Mobile/tablet: list page shows only the list, detail page only the panel. */
@media (max-width: 1079px) {
  .vh:not(.vh-is-detail) .vh-panel { display: none; }
  .vh-is-detail .vh-page-head, .vh-is-detail .vh-list { display: none; }
}
@media (max-width: 360px) {
  .vc { padding: 16px; }
  .vc-big, .vp-big, .vp-lead .vp-big { font-size: 28px; }
  .vc-need { flex-wrap: wrap; }
  .vc-need .btn { width: 100%; }
  .vp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vp-tile b { font-size: 20px; }
  .vh-saved b { font-size: 18px; }
}

/* Desktop ≥ 1080: list of cards left, detail panel right. */
@media (min-width: 1280px) {
  .vh-grid { grid-template-columns: 360px minmax(0, 1fr) !important; }
}
@media (min-width: 1080px) {
  .vh-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; max-width: 1200px; }
  .vh-page-head { max-width: 1200px; }
  .vh-month { display: none; }
  .vc { padding: 14px 16px; gap: 8px; }
  .vc.is-sel { border: 2px solid var(--accent); padding: 13px 15px; }
  .vc-logo { width: 40px; height: 40px; font-size: 17px; }
  .vc-logo img { width: 22px; height: 22px; }
  .vc-name h2 { font-size: 17px; }
  .vc-chev, .vh-tesla, .vc-need, .vc-cmp { display: none; }
  .vc-big { font-size: 26px; }
  .vc-big small { font-size: 13px; }
  .vc-odo b { font-size: 17px; }
  .vc-wide { display: inline; }
  .vc-mini { display: flex; align-items: center; gap: 10px; margin: 0; }
  .vc-mini:empty { display: none; }
  .vc-mini-bar { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 40px; }
  .vc-mini-bar i { display: block; height: 4px; border-radius: 4px; background: var(--accent); }
  .vc-mini-bar i.ice { background: var(--ice); }
  .vh-add { padding: 16px; }
  .vh-panel {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
    padding: 22px; gap: 14px;
  }
  .vh-panel .vp-top { display: none; }
  .vp-edit-wide { display: inline-flex; }
  .vp-lead-period, .vp-sub-more, .vp-break-lead, .vp-tile-short { display: none; }
  .vp-tile-more, .vp-tile-long { display: inline; }
  .vp-tile { background: var(--surface-2); border-color: transparent; }
  .vp-box { background: var(--surface-2); border-color: transparent; }
  .vp-made-part { display: flex; flex-direction: column; gap: 10px; }
  .vp-rec-h, .vp-foot { display: none; }
  .vp-recs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; background: none; border: 0; overflow: visible; }
  .vp-rec { border: 0; border-radius: var(--radius); background: var(--surface-2); }
  .vh-panel { container-type: inline-size; }
  .vp-head { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
  .vp-id { flex: 1 1 100%; }
  .vp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vp-lead { grid-column: auto; padding: 14px 16px; }
  .vp-lead .vp-big { font-size: 30px; }
}
@container (min-width: 640px) {
  .vp-id { flex: 1 1 240px; }
  .vp-kpis { grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); }
  .vp-tile b { font-size: 24px; }
  .vp-boxes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .vp-recs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
html[data-theme="light"] .vh-month,
html[data-theme="light"] .vp-tile,
html[data-theme="light"] .vp-box,
html[data-theme="light"] .vp-recs { border-color: transparent; box-shadow: 0 8px 18px rgba(11, 47, 44, 0.06); }
html[data-theme="light"] .vh-add { box-shadow: none; border-color: rgba(11, 47, 44, 0.22); }
html[data-theme="light"] .vh-ice-add { border-color: rgba(11, 47, 44, 0.22); }
@media (min-width: 1080px) {
  html[data-theme="light"] .vh-panel { border-color: transparent; box-shadow: 0 16px 40px rgba(11, 47, 44, 0.07); }
  html[data-theme="light"] .vp-tile, html[data-theme="light"] .vp-box { box-shadow: none; background: #e8fff6; }
  html[data-theme="light"] .vp-recs { box-shadow: none; }
}

/* Edit / new car */
.vf h1 { margin: 6px 0 6px; }
.vf .lead { margin: 0 0 14px; }
.vf-form { display: flex; flex-direction: column; gap: 12px; padding-bottom: 76px; }
.vf-sec { padding: 18px; }
.vf-sec > h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 16px; color: var(--text); font-weight: 600; }
.vf-sec > h2 svg { width: 18px; height: 18px; color: var(--accent-text); }
.vf-sec .field:last-child { margin-bottom: 0; }
.vf-in { position: relative; display: block; }
.vf-in input { width: 100%; padding-right: 72px; box-sizing: border-box; }
.vf-in i { position: absolute; right: 14px; top: 0; bottom: 0; display: flex; align-items: center; font-style: normal; font-size: 13px; font-weight: 600; color: var(--muted); pointer-events: none; white-space: nowrap; }
.vf-note { margin: -8px 0 0; }
.vf-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.vf-pair { margin-bottom: 20px; }
.vf-sec .vf-pair > .field { display: flex; flex-direction: column; justify-content: flex-end; margin-bottom: 0; }
@media (max-width: 720px) { .vf-pair { display: grid; gap: 10px; } }
.vf-pick { margin: 0 0 20px; }
.vf-car { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--radius); background: var(--surface-2); cursor: pointer; list-style: none; }
.vf-car::-webkit-details-marker { display: none; }
.vf-car-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vf-car-txt .tiny { overflow-wrap: anywhere; }
.vf-car-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vf-change { flex: none; background: var(--surface); }
.vf-pick[open] .vf-change { border-color: var(--accent); }
.vf-pick-body { padding-top: 14px; }
.vf-save {
  position: sticky; bottom: calc(76px + var(--safe-b, 0px)); z-index: 5; padding: 10px 0 0;
  background: linear-gradient(to bottom, transparent, var(--bg) 40%);
}
@media (min-width: 721px) { .vf-save { bottom: 12px; } .vf { max-width: 720px; } }
@media (prefers-reduced-motion: reduce) { .vc, .vh-add, .vh-ice-add { transition: none; } }

/* ===== Profil /u/ (Mirage) ===== */
.pf-preview-bar { margin: 0 0 12px; padding: 10px 14px; border-radius: var(--radius); background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: 14px; }
.pf-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.pf-side, .pf-main { min-width: 0; }
.card.pf-id { flex-direction: column; text-align: center; gap: 12px; margin: 12px 0 14px; padding: 22px 18px 18px; }
.card.pf-id { align-items: center; }
.pf-id .pub-avatar-wrap, .pf-id .pub-avatar { width: 104px; height: 104px; }
.pf-id .pub-avatar-wrap { align-self: center; margin-left: auto; margin-right: auto; }
.pf-id .pub-who { width: 100%; }
.pf-id .pub-who h1 { margin: 0 0 6px; overflow-wrap: anywhere; }
.pf-id .pub-handle-row { justify-content: center; }
.pf-id .pub-bio { margin: 10px auto 0; max-width: 40ch; overflow-wrap: anywhere; }
.pf-since { margin: 8px 0 0; }
.pf-actions { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 10px; width: 100%; }
.pf-actions .btn { width: auto; min-width: 200px; }
.pf-actions .btn { padding-left: 10px; padding-right: 10px; font-size: 15px; }
.pf-actions .btn, .pf-share-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; }
.pf-actions .btn svg, .pf-share-actions .btn svg { width: 16px; height: 16px; flex: none; }
.pf-actions .btn span, .pf-share-actions .btn span { white-space: nowrap; }
.pf-vis { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: var(--radius); background: var(--surface-2); color: var(--text); text-align: left; text-decoration: none; }
.pf-vis > svg { width: 18px; height: 18px; flex: none; color: var(--muted); }
.pf-vis-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pf-vis-copy b { font-size: 14px; }
.pf-vis-copy span { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.pf-chip { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--mint-soft); color: var(--mint-ink); font-size: 12px; font-weight: 600; }
.pf-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pf-chip.off, .pf-vis.off .pf-chip { background: var(--surface); color: var(--muted); }
.pf-vis-note { margin: -2px 0 0; }
.pf-vis-note a { color: var(--accent-text); font-weight: 600; }
.pf-lock { display: flex; align-items: flex-start; gap: 8px; margin: 18px 0 8px; }
.pf-lock svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.pf-lock-side { display: none; }
.pf-range { display: flex; margin: 4px 0 12px; }
.pf-range a { flex: 1 1 auto; text-align: center; white-space: nowrap; }
.pf-hero { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: var(--radius-card); background: var(--accent); color: var(--accent-ink); }
.pf-hero strong { font-size: clamp(36px, 10vw, 48px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.pf-hero span { font-size: 13px; font-weight: 600; opacity: 0.8; }
.pf-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 10px 0 0; }
.pf-tile { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pf-tile strong { font-size: 24px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pf-tile span { font-size: 13px; color: var(--muted); font-weight: 500; }
.pf-first { margin: 10px 0 0; }
.pf-first a { color: var(--accent-text); font-weight: 600; }
.pf-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 24px 0 10px; }
.pf-sec-head h2 { margin: 0; font-size: 20px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
.pf-trend-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.pf-trend-small { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.pf-chart { margin: 0; min-width: 0; }
.pf-chart .pub-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pf-chart .pub-chart-head .tiny { margin: 0; }
.pf-chart .pub-chart-readout { margin: 0; font-weight: 700; font-size: 14px; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pf-chart-big .pub-chart-readout { font-size: 16px; }
.pf-trend-small .pf-chart .pub-chart-head { flex-wrap: wrap; }
.pf-mix { margin-top: 10px; }
.pf-card-title { margin: 0 0 10px; font-weight: 700; font-size: 15px; }
.pf-cars .pub-cars-card { margin: 0; }
.pf-cars .pub-car .tiny { overflow-wrap: anywhere; }
/* Share modal: T1 boarding pass, story 9:16 or square */
.pf-share .share-dialog { display: flex; flex-direction: column; gap: 12px; padding: 14px; }
.pf-share .pf-share-frame { width: min(400px, calc(100vw - 60px), calc((100dvh - 260px) * 0.5625)); aspect-ratio: 9 / 16; margin: 0 auto; }
.pf-share .pf-share-frame.is-landscape { width: min(960px, calc(100vw - 120px), calc((100dvh - 230px) * 1.905)); aspect-ratio: 1200 / 630; }
.pf-share .pf-share-frame.is-square { width: min(480px, calc(100vw - 60px), calc(100dvh - 260px)); aspect-ratio: 1 / 1; }
.pf-share .share-img { width: 100%; height: 100%; object-fit: contain; }
.pf-share-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.pf-share-actions .btn[hidden] { display: none; }
.pf-share-actions:has(.btn[hidden]) { grid-template-columns: minmax(0, 1fr); }
/* Edit profile */
.pf-back { display: inline-flex; align-items: center; gap: 10px; margin: 8px 0 6px; color: var(--muted); font-weight: 500; text-decoration: none; }
.pf-back-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--line); color: var(--text); }
.pf-back-btn svg { width: 18px; height: 18px; }
/* Title → first card: exactly 24px (Designer), same as between the other sections. */
.pf-edit-title { margin: 4px 0 24px; }
.pf-edit { display: flex; flex-direction: column; gap: 4px; max-width: 640px; padding-bottom: 24px; }
.pf-photo { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.pf-photo .profile-edit-photo { flex: none; }
.pf-photo .profile-edit-photo input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pf-photo-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pf-photo-acts { display: flex; gap: 16px; margin-top: 4px; }
.pf-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--text); cursor: pointer; }
.pf-link.danger { color: var(--danger); }
.pf-privacy { display: flex; flex-direction: column; gap: 6px; }
.pf-switch { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.pf-switch svg { width: 18px; height: 18px; flex: none; }
.pf-switch b { flex: 1; }
.pf-switch input { appearance: none; -webkit-appearance: none; width: 48px; height: 28px; margin: 0; border-radius: var(--radius-pill); background: var(--bar-track); position: relative; cursor: pointer; transition: background var(--ease); }
.pf-switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); transition: left var(--ease); }
.pf-switch input:checked { background: var(--accent); }
.pf-switch input:checked::after { left: 23px; }
.pf-switch input:focus-visible { box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
.pf-priv-h { margin: 8px 0 0; font-weight: 600; }
.pf-priv-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; font-size: 14px; font-weight: 600; }
.pf-priv-list li { display: flex; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.pf-priv-list.yes li::before { content: "✓"; color: var(--mint-ink); }
.pf-priv-list.no li::before { content: "×"; color: var(--danger); }
.pf-edit-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 10px; margin-top: 18px; }
.pf-settings-row .left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pf-settings-row .left > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.pf-settings-row .tiny { overflow-wrap: anywhere; }
.pf-settings-avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; overflow: hidden; }
.pf-settings-avatar img:not(.avatar-fallback) { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.user-menu-profile { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
@media (max-width: 360px) {
  .pf-actions, .pf-share-actions, .pf-edit-actions { grid-template-columns: minmax(0, 1fr); }
  .pf-range a { padding-left: 6px; padding-right: 6px; font-size: 13px; }
  .pf-priv-list { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1000px) {
  .pf-grid { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 24px; align-items: start; }
  .card.pf-id { margin-top: 0; }
  .pf-lock-side { display: flex; margin-top: 4px; }
  .pf-lock-foot { display: none; }
  .pf-range { margin-top: 0; }
  .pf-trend-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .pf-trend-grid.no-big { grid-template-columns: minmax(0, 1fr); }
  .pf-trend-small { grid-template-columns: minmax(0, 1fr); }
}
html[data-theme="light"] .pf-tile, html[data-theme="light"] .pf-id { border-color: transparent; box-shadow: 0 8px 18px rgba(11, 47, 44, 0.06); }
@media (prefers-reduced-motion: reduce) { .pf-switch input, .pf-switch input::after { transition: none; } }
.pf-share .pf-share-frame { background: transparent; }
.pf-photo .profile-edit-photo-frame,
.pf-photo .profile-edit-photo-frame .pub-avatar,
.pf-photo .profile-edit-photo-frame .avatar-fallback-stack { width: 88px; height: 88px; }
.pf-photo .profile-edit-photo-frame .profile-edit-cam { width: 28px; height: 28px; }
.pf-edit .field-meta { align-items: baseline; }
.pf-edit .field-meta > span { margin: 0; font-size: 13px; }
.pf-edit .field-meta > span:last-child { flex: none; }
.pf-edit .field > .field-meta { width: 100%; box-sizing: border-box; display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; }
.pf-share-head { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.pf-share .pf-share-x { flex: 0 0 40px; width: 40px; height: 40px; box-shadow: none; }

/* /u/ trend charts (hotfix): readout on two lines under the title, room for the value, ticks and axis */
.pf-chart .pub-chart-head { flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: 8px; }
.pf-chart .pub-chart-readout.pf-readout { display: flex; flex-direction: column; gap: 1px; white-space: normal; text-align: left; }
.pf-readout-when { font-size: 12px; font-weight: 500; color: var(--muted); }
.pf-readout-when:empty { display: none; }
.pf-readout-val { font-size: 16px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.pf-chart-big .pf-readout-val { font-size: 20px; }
.pf-trend-small .pf-chart { padding: 14px 14px 12px; }
.pf-trend-small .pub-spark { margin-top: 4px; }
.pf-trend-small .pub-spark-y { font-size: 13px; }
@media (min-width: 360px) and (max-width: 899px) { .pf-trend-small .pub-spark-y { font-size: 20px; } }
.pf-trend-small .pub-chart-axis { margin-top: 6px; }

/* Lístok v2 (profil-spec „Lístok v2“): ordinary yellow stat card, share button under it, 2×2 stats */
.pf-hero { gap: 6px; }
.pf-hero-lbl { font-size: 13px; font-weight: 600; opacity: 0.8; }
.pf-hero strong { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pf-hero strong small { font-size: 15px; font-weight: 700; letter-spacing: 0; opacity: 0.85; }
.pf-share-btn { margin: 10px 0 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.pf-share-btn svg { width: 16px; height: 16px; }
.pf-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card.pf-tile { padding: 18px 20px; gap: 8px; }
.pf-tile .pf-tile-lbl { font-size: 13px; font-weight: 600; color: var(--muted); }
.pf-tile p { margin: 0; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; min-width: 0; }
.pf-tile p strong { font-size: 30px; font-weight: 700; line-height: 1.05; }
.pf-tile p span { font-size: 13.5px; color: var(--muted); font-weight: 500; }
@media (max-width: 359px) { .pf-tile p strong { font-size: 26px; } .card.pf-tile { padding: 16px; } }
/* ── /tarify network detail on mobile: B2, one card per program (spec tarify-mobil-b2-spec.md) ── */
.tfc-unit { margin: -4px 0 0; text-align: right; font-size: 12px; color: var(--muted); }
.tfc-list { display: flex; flex-direction: column; gap: 12px; }
.tfc { position: relative; padding: 18px 16px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
html[data-theme="dark"] .tfc { box-shadow: none; }
html[data-theme="light"] .tfc { border-color: transparent; }
.tfc-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tfc-name { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tfc-chip { flex: 0 0 auto; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.tfc.has-badge .tfc-head { padding-right: 4px; }
.tfc-badge { position: absolute; top: -9px; right: 14px; z-index: 1; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--accent); color: var(--accent-ink); white-space: nowrap; }
.tfc-fee { margin: -4px 0 0; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tfc-fee b { color: var(--text); font-weight: 700; }
.tfc-cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tfc-cells.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tfc-cell { display: flex; flex-direction: column; gap: 4px; padding: 10px 10px 11px; border-radius: 12px; background: var(--surface-2); min-width: 0; }
html[data-theme="dark"] .tfc-cell { background: #1e1e24; }
.tfc-lbl { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tfc-ico { display: inline-grid; place-items: center; width: 14px; height: 14px; flex: 0 0 14px; }
.tfc-ico svg { width: 14px; height: 14px; }
.tfc-ico.ac { color: #3b82f6; }
.tfc-ico.dc { color: var(--accent-text); }
.tfc-ico.ufc { color: var(--amber); }
.tfc-v { display: flex; align-items: baseline; gap: 4px; font-size: 24px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.tfc-v small { font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.tfc-v [data-b] { display: inline-flex; align-items: center; gap: 3px; }
.tfc-moon svg { width: 13px; height: 13px; color: var(--muted); }
.tfc-na { font-size: 15px; color: var(--muted); line-height: 1.6; }
.tfc-sub { font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.tfc-line, .tfc-cond { margin: 0; font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.tfc-line svg, .tfc-cond svg { width: 14px; height: 14px; flex: 0 0 14px; }
.tfc-legend { margin: 2px 0 0; text-align: center; }
.tfc-lo-key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; box-shadow: inset 0 0 0 1px #3fcf9f; margin-right: 6px; vertical-align: -1px; }
html[data-theme="dark"] .tfc-lo-key { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mint) 55%, transparent); }
.tf[data-band="day"][data-ptype="all"] .tfc-cell.lo-day-all,
.tf[data-band="day"][data-ptype="prepaid"] .tfc-cell.lo-day-prepaid,
.tf[data-band="day"][data-ptype="payg"] .tfc-cell.lo-day-payg,
.tf[data-band="night"][data-ptype="all"] .tfc-cell.lo-night-all,
.tf[data-band="night"][data-ptype="prepaid"] .tfc-cell.lo-night-prepaid,
.tf[data-band="night"][data-ptype="payg"] .tfc-cell.lo-night-payg { box-shadow: inset 0 0 0 1px #3fcf9f; }
html[data-theme="dark"] .tf .tfc-cell[class*="lo-"] { --tfc-lo: color-mix(in srgb, var(--mint) 55%, transparent); }
html[data-theme="dark"] .tf[data-band="day"][data-ptype="all"] .tfc-cell.lo-day-all,
html[data-theme="dark"] .tf[data-band="day"][data-ptype="prepaid"] .tfc-cell.lo-day-prepaid,
html[data-theme="dark"] .tf[data-band="day"][data-ptype="payg"] .tfc-cell.lo-day-payg,
html[data-theme="dark"] .tf[data-band="night"][data-ptype="all"] .tfc-cell.lo-night-all,
html[data-theme="dark"] .tf[data-band="night"][data-ptype="prepaid"] .tfc-cell.lo-night-prepaid,
html[data-theme="dark"] .tf[data-band="night"][data-ptype="payg"] .tfc-cell.lo-night-payg { box-shadow: inset 0 0 0 1px var(--tfc-lo); }
@media (max-width: 899px) {
  .tf-main .tf-matrix, .tf-main .tf-legend, .tf-main .tf-pair { display: none; }
  /* B2 cards sit on the page background, not inside the panel card */
  .tf-main .tf-panel:has(.tfc-list) { background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; }
}
@media (min-width: 900px) {
  .tfc-unit, .tfc-list, .tfc-legend { display: none; }
  .tf-band-m { display: none; } /* desktop table: Deň/Noc only when a program has a night price (as before) */
}

/* Recapy (profil-spec.md §10): owner-only Prehľad card + „Vaše recapy“ row. --rc-acc / --rc-band come from the recap theme. */
.rc-note { position: relative; display: flex; align-items: center; gap: 10px; margin: 0 0 24px; padding: 10px 6px 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
[data-theme="light"] .rc-note { border-color: transparent; box-shadow: 0 8px 18px rgba(11, 47, 44, .08); }
.rc-note-dot { flex: none; width: 10px; height: 10px; border-radius: var(--radius-pill); background: var(--rc-band, var(--accent)); }
.rc-note-text { flex: 1; min-width: 0; margin: 0; font-size: 14px; line-height: 1.35; color: var(--text); }
.rc-note-text b { font-weight: 600; }
.rc-note-view { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--accent-text); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.rc-note-view:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.rc-hide { flex: none; margin: 0; }
.rc-x { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: var(--radius-pill); background: none; color: var(--muted); cursor: pointer; }
.rc-x:hover { background: var(--surface-2); color: var(--text); }
.rc-x svg { width: 18px; height: 18px; }
.rc-row-wrap { margin: 18px 0 0; }
.rc-row-title { margin: 0 0 10px; }
.rc-row { display: flex; gap: 10px; margin: 0 calc(-1 * var(--pad-x)); padding: 2px var(--pad-x) 8px; list-style: none; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.rc-row::-webkit-scrollbar { display: none; }
.rc-row li { flex: none; scroll-snap-align: start; }
.rc-stub { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 132px; min-height: 104px; padding: 22px 14px 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--text); text-align: left; cursor: pointer; overflow: hidden; font: inherit; }
[data-theme="light"] .rc-stub { border-color: transparent; box-shadow: 0 8px 18px rgba(11, 47, 44, .08); }
.rc-stub-band { position: absolute; inset: 0 0 auto 0; height: 10px; background: var(--rc-band, var(--accent)); }
.rc-stub::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 34px; border-top: 2px dashed var(--line); }
.rc-stub b { font-size: 15px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.rc-stub small { font-size: 12px; color: var(--muted); }
.rc-stub-v { margin-top: auto; padding-top: 14px; font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; }
.rc-stub:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rc-stub.rc-year { box-shadow: inset 0 0 0 2px #f5b301; }
@media (min-width: 900px) {
  .rc-note { max-width: 640px; }
  .rc-row { margin: 0; padding: 2px 0 8px; flex-wrap: wrap; overflow: visible; }
}

/* ---- Naplánovať trasu (/tarify/trasa), spec trasa-spec v4 ----------------------------------------
   Full map in the História style; phones: floating input card, then a bottom sheet;
   from 721px: a 440px floating panel on the left, zoom and legend on the right. */
.tarify-layout.is-trasa { display: block; }
.trasa {
  --seg2: #55555e;
  position: relative;
  margin: 0 calc(-1 * var(--pad-x));
}
html[data-theme="light"] .trasa { --seg2: #86c2ae; }
.trasa-map { position: relative; height: 300px; overflow: hidden; background: var(--bg); }
.trasa[data-state="input"] .trasa-map { height: calc(100dvh - 190px - var(--safe-b)); min-height: 520px; }
.trasa-map-canvas, .trasa-map-canvas.maplibregl-map { position: absolute; inset: 0; }
.trasa-map .maplibregl-ctrl-bottom-right { right: 10px; bottom: 34px; }
.trasa-map .maplibregl-ctrl-attrib { margin: 0; }
.trasa-map .maplibregl-ctrl-attrib-inner { white-space: nowrap; }
.trasa-top {
  position: absolute;
  z-index: 3;
  top: 10px;
  left: var(--pad-x);
  right: var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  pointer-events: none;
}
.trasa-top[hidden] { display: none; }
.trasa-top > * { pointer-events: auto; }
.trasa-pill {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 11px 16px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 15px;
  font-weight: 700;
}
.trasa-round {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.trasa-round svg { width: 16px; height: 16px; }
.trasa-round:hover { border-color: var(--accent); color: var(--accent-text); }
.trasa-round:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
html[data-theme="light"] .trasa-pill,
html[data-theme="light"] .trasa-round { border-color: transparent; box-shadow: 0 8px 18px rgba(11, 47, 44, 0.08); }
.trasa-legend {
  position: absolute;
  z-index: 3;
  display: none;
  gap: 14px;
  align-items: center;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 500;
}
.trasa-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.trasa-legend [hidden] { display: none; }
.trasa-key { display: inline-block; width: 14px; height: 4px; border-radius: 2px; }
.trasa-key.is-main { background: var(--accent); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35); }
.trasa-key.is-alt { background: var(--seg2); }
.trasa-key.is-border { height: 0; border-top: 2px dashed var(--muted); border-radius: 0; }
.trasa-border-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
}
.trasa-border-tag b { font-weight: 700; font-variant-numeric: tabular-nums; }
.trasa-border-tag .flag { width: 18px; height: 13px; border-radius: 2px; }
html[data-theme="light"] .trasa-border-tag { border-color: transparent; box-shadow: 0 8px 18px rgba(11, 47, 44, 0.12); }

.trasa-panel {
  position: relative;
  z-index: 4;
  margin-top: -28px;
  padding: 10px var(--pad-x) 20px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  background: var(--surface);
}
html[data-theme="light"] .trasa-panel { border-color: transparent; box-shadow: 0 -16px 40px rgba(11, 47, 44, 0.07); }
.trasa-grab { display: block; width: 44px; height: 5px; margin: 0 auto 14px; border-radius: 3px; background: var(--line); }
.trasa-h1 { display: none; margin: 0 0 14px; }
.trasa[data-state="input"] .trasa-panel {
  position: absolute;
  top: 0;
  left: var(--pad-x);
  right: var(--pad-x);
  margin: 0;
  padding: 16px;
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-card);
}
html[data-theme="light"] .trasa[data-state="input"] .trasa-panel { border-color: transparent; box-shadow: 0 16px 40px rgba(11, 47, 44, 0.12); }
.trasa[data-state="input"] .trasa-grab { display: none; }
.trasa-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.trasa-head[hidden] { display: none; }
.trasa-head-copy { display: grid; gap: 2px; min-width: 0; }
.trasa-head-copy strong { font-size: 17px; letter-spacing: -0.02em; }
.trasa-edit { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.trasa-edit svg { width: 15px; height: 15px; }
.trasa-step[hidden] { display: none; }
.trasa-h2 { margin: 0 0 12px; font-size: 19px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
.trasa-label { margin: 18px 0 6px; }
.trasa-label[hidden] { display: none; }

/* Zadanie */
.trasa-ends {
  position: relative;
  display: grid;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}
html[data-theme="dark"] .trasa-ends { background: var(--bg); }
.trasa-end, .trasa-vias .tarify-route-via-row { display: flex; align-items: center; gap: 12px; padding: 8px 60px 8px 14px; }
.trasa-end + .trasa-vias:not(:empty), .trasa-vias + .trasa-end { border-top: 1px solid var(--line); }
.trasa-vias .tarify-route-via-row { border-bottom: 1px solid var(--line); padding-left: 38px; }
.trasa-vias .tarify-route-via-row:last-child { border-bottom: 0; }
.trasa-vias .tarify-route-field { flex: 1; }
.trasa-dot { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--accent); }
.trasa-dot.is-to { border-radius: 3px; border: 0; background: var(--text); }
.trasa-end-field { display: grid; gap: 0; flex: 1; min-width: 0; }
.trasa-end-field .tiny { font-size: 12px; }
.trasa-ends .tarify-route-input {
  min-height: 30px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 16px;
  font-weight: 500;
}
.trasa-ends .tarify-route-input:focus { box-shadow: none; }
.trasa-ends:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.trasa-swap { position: absolute; right: 10px; top: calc(50% - 20px); }
.trasa-add { display: block; margin: 10px 0 4px; padding: 6px 0; color: var(--accent-text); font-size: 14px; }
.trasa-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 10px; align-items: end; margin: 6px 0 14px; }
.trasa-row .field { margin: 0; }
.trasa-row .tarify-leftover-note { display: none; }
.trasa-row:not(:has(.tarify-vehicle-field)) { grid-template-columns: 1fr; }
.trasa-input .tarify-route-status { margin-top: 10px; }

/* Vyberte tarify */
.trasa-countries { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.trasa-cc, .trasa-step { min-width: 0; }
.trasa-cc { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.trasa-cc-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  background: none;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-card);
}
.trasa-cc-head:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.trasa-cc-head .flag { flex: 0 0 auto; width: 26px; height: 19px; margin-top: 3px; border-radius: 3px; }
.trasa-cc-copy { display: grid; gap: 3px; flex: 1; min-width: 0; }
.trasa-cc-copy strong { font-size: 16px; }
.trasa-cc-pick, .trasa-leg-pick { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: 4px; font-size: 14px; font-weight: 500; }
.trasa-cc-pick > span:last-child, .trasa-leg-pick > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trasa-chev { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 4px; color: var(--muted); transition: transform var(--ease); }
.trasa-cc.is-open .trasa-chev { transform: rotate(180deg); }
.trasa-cc-body { padding: 0 16px 10px; }
.trasa-empty { margin: 0 0 10px; }
.trasa-nets { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 12px; margin: 0 -2px; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.trasa-nets::-webkit-scrollbar { display: none; }
.trasa-net {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 4px 14px 4px 5px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.trasa-net.on { background: var(--accent-soft); border-color: var(--accent); }
.trasa-net:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.trasa .plogo.s { --w: 30px; --h: 30px; border-radius: 50%; }
.trasa-leg-pick .plogo.s, .trasa-cc-pick .plogo.s { --w: 22px; --h: 22px; border-radius: 7px; }
.trasa-plans { display: grid; }
.trasa-plan {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  cursor: pointer;
}
.trasa-plan + .trasa-plan { border-top: 1px solid var(--line); }
.trasa-plan input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.trasa-radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--muted); box-sizing: border-box; }
.trasa-plan.on .trasa-radio, .trasa-plan input:checked + .trasa-radio { border: 7px solid var(--accent); background: var(--accent-ink); }
.trasa-plan input:focus-visible + .trasa-radio { box-shadow: 0 0 0 3px var(--accent-soft); }
.trasa-plan-copy { display: grid; gap: 2px; min-width: 0; }
.trasa-plan-copy strong { font-size: 15px; }
.trasa-rate { font-size: 15px; white-space: nowrap; }
.trasa-sticky {
  position: sticky;
  bottom: calc(68px + var(--safe-b));
  z-index: 2;
  margin: 12px calc(-1 * var(--pad-x)) 0;
  padding: 12px var(--pad-x);
  background: var(--surface);
  border-top: 1px solid var(--line);
}

/* Výsledok */
.trasa-alts { display: flex; gap: 8px; overflow-x: auto; margin: 0 0 12px; scrollbar-width: none; }
.trasa-alts[hidden] { display: none; }
.trasa-alts .chip { flex: 0 0 auto; min-height: 40px; padding: 0 14px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.trasa-alt { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.trasa-alt .trasa-alt-name { color: inherit; font-weight: 600; opacity: 1; }
.trasa-alt .trasa-alt-dot,
.trasa-alt .trasa-alt-km { color: var(--muted); font-weight: 500; }
.trasa-alt.on .trasa-alt-dot,
.trasa-alt.on .trasa-alt-km { color: inherit; opacity: 0.75; }
.trasa-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.trasa-tile { display: grid; gap: 6px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--surface-2); }
.trasa-tile span { font-size: 13px; font-weight: 500; color: var(--muted); }
.trasa-tile strong { font-size: clamp(22px, 6vw, 26px); font-weight: 700; letter-spacing: -0.03em; }
.trasa-tile.is-cost { background: var(--accent); color: var(--accent-ink); }
.trasa-tile.is-cost span { color: var(--accent-ink); }
.trasa-legs { display: grid; }
.trasa-leg { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.trasa-leg + .trasa-leg { border-top: 1px solid var(--line); }
.trasa-leg > .flag { flex: 0 0 auto; width: 26px; height: 19px; border-radius: 3px; }
.trasa-leg-copy { flex: 1; min-width: 0; }
.trasa-leg-copy p { margin: 0; }
.trasa-leg-pick { margin-top: 2px; font-size: 13px; color: var(--muted); }
.trasa-leg-pick > span:last-child { white-space: normal; }
.trasa-leg .btn-mini { flex: 0 0 auto; }
.trasa-compare { display: grid; gap: 4px; }
.trasa-compare[hidden] { display: none; }
.trasa-cmp { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: var(--radius-sm); font-size: 15px; font-weight: 500; }
.trasa-cmp { align-items: center; }
.trasa-cmp strong { white-space: nowrap; }
.trasa-cmp-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.trasa-cmp-logos { display: inline-flex; flex: 0 0 auto; }
.trasa-cmp-logos .plogo.s { --w: 24px; --h: 24px; border-radius: 7px; }
.trasa-cmp-logos .plogo + .plogo { margin-left: -6px; box-shadow: 0 0 0 2px var(--surface); }
.trasa-cmp.is-best { background: var(--accent-soft); font-weight: 700; }

/* Desktop: map fills the content area, the panel floats on the left. */
@media (min-width: 721px) {
  .tarify-layout.is-trasa { margin: 0; }
  .main:has(.trasa) { padding: 0; }
  .trasa { position: static; margin: 0; }
  .trasa-map, .trasa[data-state="input"] .trasa-map {
    position: fixed;
    top: 0;
    bottom: 0;
    left: calc(248px + var(--safe-l));
    right: var(--safe-r);
    height: auto;
    min-height: 0;
    z-index: 1;
  }
  .trasa-map .maplibregl-ctrl-top-right { top: 6px; right: 6px; }
  .trasa-map .maplibregl-ctrl-bottom-right { bottom: 4px; }
  .trasa-top { display: none; }
  .trasa-legend:not([hidden]) { display: flex; left: calc(440px + 32px + 24px); bottom: 14px; }
  .trasa-panel, .trasa[data-state="input"] .trasa-panel {
    position: fixed;
    top: 16px;
    bottom: 16px;
    left: calc(248px + var(--safe-l) + 16px);
    right: auto;
    width: min(440px, calc(100vw - 248px - 32px));
    margin: 0;
    padding: 22px 22px 0;
    overflow: auto;
    overscroll-behavior: contain;
    border-bottom: 1px solid var(--line);
    border-radius: var(--radius-card);
  }
  .trasa[data-state="input"] .trasa-panel { bottom: auto; max-height: calc(100dvh - 32px); padding-bottom: 22px; }
  .trasa-grab { display: none; }
  .trasa-h1 { display: block; font-size: 26px; }
  .trasa-head { margin-bottom: 12px; }
  .trasa-sticky { bottom: 0; margin: 12px -22px 0; padding: 14px 22px 18px; }
  .trasa-result { padding-bottom: 22px; }
}
@media (min-width: 721px) and (max-width: 1080px) {
  .trasa-legend:not([hidden]) { left: auto; right: 14px; bottom: 34px; }
}
@media (max-width: 720px) {
  .trasa[data-state="input"] .trasa-h1 { display: block; position: absolute; top: -52px; }
  .trasa[data-state="input"] { margin-top: 52px; }
  .trasa .trasa-map .maplibregl-ctrl-top-right { display: none; }
  .trasa-legend:not([hidden]) { display: none; }
  .trasa-head { display: none; }
  /* The fixed dock (60px + safe area) must not cover the end of the sheet (Porovnanie). */
  .trasa-panel { padding-bottom: calc(76px + var(--safe-b)); }
  .trasa[data-state="input"] .trasa-panel { padding-bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .trasa-chev { transition: none; }
}
/* /charge empty state: placeholder and empty totals read as hints, not values */
.charge-kwh input::placeholder { color: var(--muted); opacity: 0.45; }
.charge-form .num.is-empty::before { content: attr(data-empty); color: var(--muted); opacity: 0.6; font-weight: 500; }
.tarify-route-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; padding: 14px 16px; color: var(--text); text-decoration: none; }
.tarify-route-cta-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tarify-route-cta-text .tiny { color: var(--muted); }
.tarify-route-cta-arrow { font-weight: 700; color: var(--accent); }
.plist-row { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; }
.plist-add { margin-top: 14px; width: 100%; }
@media (min-width: 721px) {
  .tarify-route-cta { display: none; }
}
.sess-more { display: flex; justify-content: center; margin: 14px 0 4px; }
.sess-more-btn[aria-busy="true"] { opacity: 0.6; pointer-events: none; }
.plist-title { margin-bottom: 4px; }
.plist-period { margin: 0 0 24px; }
.plist-card > .list > .item:first-child { padding-top: 0; }
.plist-card > .list > .item:last-child { padding-bottom: 0; }
.charge-page h1 { margin-bottom: 24px; }
.charge-form .num.is-unknown { color: var(--muted); font-weight: 600; }

/* ---- Trasa · výber siete (spec trasa-siete-spec.md) ---------------------------------------------
   Country card: one row with the current network + Zmeniť. The list opens as a bottom sheet on phones
   and as a popover beside the panel (over the map) from 721px, so the panel's prices stay visible. */
.trasa-net-row { display: flex; align-items: center; gap: 12px; padding: 4px 0 12px; border-bottom: 1px solid var(--line); }
.trasa-net-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.trasa-rate.is-unknown, .trasa-tile strong.is-unknown { font-size: 15px; font-weight: 600; color: var(--muted); }
.trasa-tile.is-cost strong.is-unknown { color: var(--accent-ink); }
.trasa-tile-note { display: block; font-style: normal; font-size: 12px; font-weight: 500; color: var(--muted); }
.trasa-tile.is-cost .trasa-tile-note { color: var(--accent-ink); opacity: 0.8; }
.trasa-cmp .trasa-tile-note { display: inline; }
.trasa-np { position: fixed; inset: 0; z-index: 90; }
.trasa-np[hidden] { display: none; }
.trasa-np-scrim { position: absolute; inset: 0; background: rgba(8, 8, 10, 0.6); }
html[data-theme="light"] .trasa-np-scrim { background: rgba(11, 47, 44, 0.42); }
.trasa-np-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  max-height: min(78dvh, 640px);
  padding: 14px var(--pad-x) calc(16px + var(--safe-b));
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  background: var(--surface);
}
html[data-theme="light"] .trasa-np-panel { border-color: transparent; box-shadow: 0 -16px 40px rgba(11, 47, 44, 0.12); }
.trasa-np-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.trasa-np-flag .flag { width: 28px; height: 20px; border-radius: 4px; }
.trasa-np-copy { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.trasa-np-copy strong { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.trasa-np-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--muted);
}
html[data-theme="light"] .trasa-np-search { background: var(--surface); border-color: transparent; box-shadow: 0 6px 16px rgba(11, 47, 44, 0.08); }
.trasa-np-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.trasa-np-search svg { width: 18px; height: 18px; flex: 0 0 auto; }
.trasa-np-search input { flex: 1 1 auto; min-width: 0; min-height: 0; padding: 10px 0; border: 0; background: transparent; box-shadow: none; color: var(--text); font: inherit; outline: none; }
.trasa-np-list { flex: 1 1 auto; overflow: auto; overscroll-behavior: contain; margin: 10px calc(-1 * var(--pad-x)) 0; padding: 0 var(--pad-x); }
.trasa-np-group + .trasa-np-group { border-top: 1px solid var(--line); margin-top: 6px; }
.trasa-np-label { margin: 12px 0 4px; font-size: 12px; font-weight: 500; color: var(--muted); }
.trasa-np-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.trasa-np-row:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); border-radius: var(--radius-sm); }
.trasa-np-row .trasa-np-copy strong { font-size: 15px; font-weight: 600; }
.trasa-np-check { width: 20px; height: 20px; flex: 0 0 auto; color: var(--accent-text); }
.trasa-np-mono.plogo { --brand: var(--surface-2); --ink: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.trasa-np-empty { display: grid; gap: 4px; padding: 28px 0; text-align: center; }
body.trasa-np-lock { overflow: hidden; }
@media (min-width: 721px) {
  .trasa-np { inset: auto; }
  .trasa-np-scrim { position: fixed; inset: 0; background: transparent; }
  html[data-theme="light"] .trasa-np-scrim { background: transparent; }
  .trasa-np-panel {
    position: fixed;
    top: var(--np-top, 16px);
    bottom: auto;
    left: calc(248px + var(--safe-l) + 16px + min(440px, calc(100vw - 248px - 32px)) + 12px);
    right: auto;
    width: 360px;
    max-height: calc(100dvh - var(--np-top, 16px) - 16px);
    padding: 16px;
    border-bottom: 1px solid var(--line);
    border-radius: var(--radius-card);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  }
  html[data-theme="light"] .trasa-np-panel { box-shadow: 0 16px 40px rgba(11, 47, 44, 0.14); }
  .trasa-np-list { margin: 10px -16px 0; padding: 0 16px; }
  body.trasa-np-lock { overflow: auto; }
}
@media (min-width: 721px) and (max-width: 1080px) {
  .trasa-np-panel { left: auto; right: 16px; width: min(360px, calc(100vw - 248px - 32px)); }
}
/* Route planner on phones: the sheet scrolls under the dock, so the dock is opaque here (no see-through
   "MOL Plugee 4,02 €") and the sheet ends a dock height + safe area + 16px above the bottom. */
@media (max-width: 720px) {
  body:has(.trasa) { --dock-h: 64px; }
  body:has(.trasa) .dock { background: var(--bg); }
  .app:has(.trasa) { padding-bottom: 0; }
  .trasa-panel { padding-bottom: calc(var(--dock-h, 64px) + var(--safe-b) + 16px); }
  .trasa[data-state="input"] .trasa-panel { padding-bottom: 16px; }
}