/* EF Booking — shared design tokens and base components (docs/research/design-spec.md §2, SPEC.md §1).
   Portal (light) tokens live on :root; the driver app sets <html data-theme="app"> and gets the dark
   mapping below. Component classes use the semantic tokens only, so one class works in both products. */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

/* ------------------------------------------------------------------ 2.1 portal colours (light) */
:root {
  color-scheme: light;

  --bg-page: #F4F6F1;
  --surface: #FFFFFF;
  --surface-muted: #FAFBF8;
  --ink: #071C1B;
  --ink-2: #384743;
  --ink-3: #3E4B46;
  --muted: #55655F;
  --border: #DCE3DC;
  --border-soft: #E8EDE7;
  --border-row: #EFF2EE;
  --border-input: #C9D2CC;
  --grid-line: #EDF1EC;
  --teal: #008C82;
  --teal-dark: #0B6B63;
  --teal-deeper: #0B4F49;
  --teal-deepest: #15544E;
  --teal-bg: #E5F3F1;
  --teal-bg-2: #E9F2F1;
  --teal-bg-3: #F0F8F7;
  --teal-border: #BFE0DC;
  --teal-on-dark: #CDE8E4;
  --lime: #E6FF00;
  --lime-12: rgba(230, 255, 0, 0.12);
  --lime-07: rgba(230, 255, 0, 0.07);
  --success-bg: #E3F4E8;
  --success-text: #1B6B3A;
  --success-dot: #2E9E5B;
  --warn-bg: #FDF1E2;
  --warn-text: #9A5B0B;
  --warn-border: #E8B269;
  --warn-dot: #D97706;
  --warn-price-bg: #FAEEDF;
  --warn-tint: rgba(180, 83, 9, 0.055);
  --danger-bg: #FBE9E7;
  --danger-text: #B3362A;
  --now-line: #C93A2E;
  --occupied-bg: #E7ECE7;
  --neutral-chip-bg: #EEF1EC;
  --hatch-a: #EFF2EE;
  --hatch-b: #E2E8E1;
  --sidebar-text: #C7D4CE;
  --sidebar-muted: #8FA39C;
  --sidebar-divider: rgba(255, 255, 255, 0.14);
  --sidebar-divider-soft: rgba(255, 255, 255, 0.10);
  --overlay: rgba(7, 28, 27, 0.46);
  --shadow-modal: 0 24px 64px rgba(7, 28, 27, 0.35);
  --shadow-tooltip: 0 8px 24px rgba(7, 28, 27, 0.3);
  --tooltip-bg: #071C1B;
  --tooltip-text: #F2F5F0;
  --free-slot-bg: rgba(0, 140, 130, 0.05);
  --arch-module-text: #9FB3AC;
  --link: #008C82;
  --link-hover: #0B6B63;
  --focus-ring: #008C82;

  /* semantic aliases used by the components (remapped for the app theme) */
  --text: var(--ink);
  --text-2: var(--ink-2);
  --cta-bg: var(--ink);
  --cta-text: var(--lime);
  --chip-bg: var(--neutral-chip-bg);
  --chip-text: var(--muted);
  --switch-track-on: var(--ink);
  --switch-knob-on: var(--lime);
  --switch-track-off: var(--border-input);
  --switch-knob-off: #FFFFFF;
  --info-icon-border: var(--border-input);
  --info-icon-bg: var(--surface);
  --info-icon-glyph: var(--muted);

  /* ---------------------------------------------------------------- 2.2 driver-app colours (dark) */
  --app-bg: #071C1B;
  --app-card: #0E2925;
  --app-card-border: #1D3B36;
  --app-card-inner: #10312C;
  --app-chip-bg: #12332F;
  --app-chip-text: #4FD1C0;
  --app-link-hover: #7FE3D6;
  --app-text: #FFFFFF;
  --app-text-2: #C3D2CC;
  --app-muted: #8FA39C;
  --app-tabbar-border: #16332E;
  --app-outline: #29473F;
  --app-sketch-fill: #0C2622;
  --app-success: #6FCF97;

  /* ---------------------------------------------------------------- 2.3 typography */
  --font-body: 'Inter', system-ui, sans-serif;
  --font-display: 'Syne', sans-serif;
  --fs-brand: 19px;
  --fs-page-title: 22px;
  --fs-modal-title: 19px;
  --fs-arch-title: 20px;
  --fs-backend-title: 16px;
  --fs-app-title: 21px;
  --fs-app-arrival: 24px;
  --fs-app-hero: 26px;
  --fs-wallet-brand: 15px;
  --fs-kpi: 20px;
  --fs-kpi-billing: 21px;
  --fs-body: 13px;
  --fs-body-strong: 13.5px;
  --fs-card-title: 13px;
  --fs-radio-title: 14px;
  --fs-topbar-date: 14px;
  --fs-input-energy: 15px;
  --fs-input-time: 13.5px;
  --fs-select: 13px;
  --fs-small: 12.5px;
  --fs-small-2: 12px;
  --fs-small-3: 11.5px;
  --fs-micro: 11px;
  --fs-micro-2: 10.5px;
  --fs-micro-3: 10px;
  --fs-micro-4: 9.5px;
  --fs-micro-5: 9px;
  --fs-th: 10.5px;
  --ls-th: 0.4px;
  --fs-eyebrow: 10.5px;
  --ls-eyebrow: 0.6px;
  --fs-card-id: 19px;
  --ls-card-id: 2px;
  --fs-tooltip: 11.5px;
  --lh-tooltip: 1.55;
  --lh-text: 1.5;
  --lh-text-loose: 1.7;

  /* ---------------------------------------------------------------- 2.4 layout measures */
  --sidebar-w: 232px;
  --topbar-h: 68px;
  --tabbar-h: 80px;
  --modal-w: 620px;
  --phone-w: 390px;
  --phone-h: 844px;
  --radius-card: 12px;
  --radius-card-lg: 14px;
  --radius-modal: 16px;
  --radius-btn: 10px;
  --tooltip-w: 300px;
}

/* ------------------------------------------------------------------ driver app theme mapping */
:root[data-theme="app"],
[data-theme="app"] {
  color-scheme: dark;
  --bg-page: var(--app-bg);
  --surface: var(--app-card);
  --surface-muted: var(--app-card-inner);
  --text: var(--app-text);
  --text-2: var(--app-text-2);
  --ink-2: var(--app-text-2);
  --muted: var(--app-muted);
  --border: var(--app-card-border);
  --border-soft: var(--app-card-border);
  --border-row: var(--app-card-border);
  --border-input: var(--app-outline);
  --grid-line: var(--app-card-border);
  --link: var(--app-chip-text);
  --link-hover: var(--app-link-hover);
  --cta-bg: var(--lime);
  --cta-text: var(--app-bg);
  --chip-bg: var(--app-chip-bg);
  --chip-text: var(--app-chip-text);
  --switch-track-on: var(--lime);
  --switch-knob-on: var(--app-bg);
  --switch-track-off: var(--app-outline);
  --switch-knob-off: var(--app-text-2);
  --info-icon-border: var(--app-outline);
  --info-icon-bg: transparent;
  --info-icon-glyph: var(--app-muted);
  --tooltip-bg: var(--app-card-inner);
  --tooltip-text: var(--app-text);
  --shadow-tooltip: 0 8px 24px rgba(0, 0, 0, 0.5);
  --focus-ring: var(--app-chip-text);
  --success-bg: var(--app-chip-bg);
  --success-text: var(--app-success);
  --success-dot: var(--app-success);
  --neutral-chip-bg: var(--app-chip-bg);
  --radius-card: 14px;
}

/* ------------------------------------------------------------------ base reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-text);
  color: var(--text);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.5; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.display { font-family: var(--font-display); font-weight: 700; }
.page-title { font-family: var(--font-display); font-size: var(--fs-page-title); font-weight: 700; }
.muted { color: var(--muted); }
.sub { font-size: var(--fs-micro); color: var(--muted); }
.th {
  font-size: var(--fs-th); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--ls-th); color: var(--muted);
}
.eyebrow {
  font-size: var(--fs-eyebrow); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow); color: var(--muted);
}
.empty-cell { color: var(--muted); }
.link-muted { color: var(--muted); font-size: var(--fs-small-2); font-weight: 600; }
.link-muted:hover { color: var(--text); }
.link-danger { color: var(--danger-text); font-size: var(--fs-small-2); font-weight: 600; }
.link-danger:hover { color: var(--danger-text); text-decoration: underline; }

/* ------------------------------------------------------------------ 2.5.4 chips */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 6px; padding: 4px 9px;
  font-size: var(--fs-small-3); font-weight: 600; line-height: 1.2; white-space: nowrap;
  background: var(--chip-bg); color: var(--chip-text);
}
.chip__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.chip__icon { width: 12px; height: 12px; flex: 0 0 auto; }
.chip--sm { border-radius: 5px; padding: 2px 7px; font-size: var(--fs-micro-2); }
.chip--teal { background: var(--teal-bg-2); color: var(--teal-dark); }
.chip--evse { background: var(--teal-bg); color: var(--teal-dark); border-radius: 5px; padding: 2px 6px; font-size: var(--fs-micro-3); }
.chip--success { background: var(--success-bg); color: var(--success-text); }
.chip--success .chip__dot { background: var(--success-dot); }
.chip--neutral { background: var(--neutral-chip-bg); color: var(--muted); }
.chip--warn { background: var(--warn-bg); color: var(--warn-text); }
.chip--warn .chip__dot { background: var(--warn-dot); }
.chip--danger { background: var(--danger-bg); color: var(--danger-text); }
.chip--lime { background: var(--lime); color: #071C1B; font-size: var(--fs-micro-2); font-weight: 700; }
.chip--outline { background: transparent; color: var(--muted); border: 1px solid var(--border-input); }
.chip--tag { background: var(--warn-bg); color: var(--warn-text); border-radius: 5px; padding: 2px 7px; font-size: var(--fs-micro-2); }
[data-theme="app"] .chip { padding: 4px 8px; font-size: var(--fs-micro-2); }
[data-theme="app"] .chip--muted { color: var(--app-text-2); }
[data-theme="app"] .chip--vehicle { padding: 5px 9px; color: var(--app-text-2); }
[data-theme="app"] .chip--reserved { padding: 5px 10px; font-size: var(--fs-micro); }
[data-theme="app"] .chip--outline { border-color: var(--app-outline); color: var(--app-text-2); }
[data-theme="app"] .chip--lime { background: var(--lime); color: var(--app-bg); }
[data-theme="app"] .chip--eta { background: transparent; color: var(--app-success); padding: 0; }

/* ------------------------------------------------------------------ 2.5.1 buttons */
.btn-primary, .btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--radius-btn); font-weight: 700; line-height: 1.2; white-space: nowrap;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.btn-primary {
  background: var(--cta-bg); color: var(--cta-text);
  padding: 10px 16px; font-size: var(--fs-body-strong);
}
.btn-primary:hover:not(:disabled) { background: #123430; }
.btn-primary .btn__icon { width: 13px; height: 13px; stroke-width: 2; }
.btn-primary--lg { padding: 11px 18px; }
.btn-secondary {
  background: var(--surface); color: var(--ink-2); border: 1px solid var(--border);
  padding: 10px 14px; font-size: var(--fs-body); font-weight: 600;
}
.btn-secondary:hover:not(:disabled) { border-color: var(--border-input); background: var(--surface-muted); }
.btn-secondary--modal { border-color: var(--border-input); }
.btn-secondary--sm { padding: 8px 13px; font-size: var(--fs-small); border-radius: 9px; }
.btn-preset {
  border: 1px solid var(--border-input); border-radius: 9px; padding: 9px 13px;
  font-size: var(--fs-small); font-weight: 500; color: var(--ink-2); background: var(--surface);
}
.btn-preset.is-active { background: var(--ink); border-color: var(--ink); color: #FFFFFF; font-weight: 600; }
[data-theme="app"] .btn-primary {
  width: 100%; height: 52px; border-radius: 13px; font-size: 15px; font-weight: 700; gap: 9px;
}
[data-theme="app"] .btn-primary:hover:not(:disabled) { background: #F1FF5C; }
[data-theme="app"] .btn-primary--unlock { height: 56px; border-radius: 14px; font-size: 15.5px; font-weight: 800; gap: 10px; }
[data-theme="app"] .btn-dashed {
  display: flex; align-items: center; justify-content: center; width: 100%;
  border: 1.5px dashed var(--app-outline); border-radius: 12px; padding: 13px;
  font-size: var(--fs-small); font-weight: 600; color: var(--app-text-2); background: transparent;
}

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
}
.icon-btn:hover:not(:disabled) { color: var(--text); border-color: var(--border-input); }
.icon-btn--sm { width: 28px; height: 28px; border-radius: 7px; }
.icon-btn svg { width: 12px; height: 12px; stroke-width: 1.8; }
.icon-btn--more svg { width: 13px; height: 13px; stroke-width: 2.4; }
[data-theme="app"] .icon-btn { border-color: var(--app-card-border); background: transparent; color: var(--app-text-2); }

/* ------------------------------------------------------------------ 2.5.7 info icon + tooltip */
.tooltip-anchor { position: relative; display: inline-flex; align-items: center; }
.info-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--info-icon-border); background: var(--info-icon-bg); color: var(--info-icon-glyph);
}
.info-icon svg { width: 10px; height: 10px; stroke-width: 2; }
.info-icon--sm { width: 16px; height: 16px; }
.info-icon--sm svg { width: 9px; height: 9px; }
.info-icon--teal { border-color: var(--teal); background: var(--teal-bg-3); color: var(--teal-dark); }
.tooltip {
  display: none; position: absolute; left: 26px; top: 50%; transform: translateY(-50%);
  width: var(--tooltip-w); max-width: calc(100vw - 32px);
  background: var(--tooltip-bg); color: var(--tooltip-text);
  font-size: var(--fs-tooltip); font-weight: 400; line-height: var(--lh-tooltip); text-align: left;
  padding: 10px 12px; border-radius: 9px; box-shadow: var(--shadow-tooltip); z-index: 6;
}
.tooltip--left { left: auto; right: 26px; }
.tooltip-anchor:hover > .tooltip,
.tooltip-anchor:focus-within > .tooltip,
.tooltip-anchor.is-open > .tooltip,
.info-icon[aria-expanded="true"] + .tooltip { display: block; }
[data-theme="app"] .tooltip { border: 1px solid var(--app-outline); }

/* ------------------------------------------------------------------ 2.5.5 switch */
.switch {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  width: 40px; height: 22px; border-radius: 11px; padding: 2px;
  background: var(--switch-track-off); transition: background-color 120ms ease;
}
.switch__knob {
  width: 18px; height: 18px; border-radius: 9px; margin-left: 0;
  background: var(--switch-knob-off); transition: margin-left 120ms ease, background-color 120ms ease;
}
.switch[aria-checked="true"], .switch.is-on { background: var(--switch-track-on); }
.switch[aria-checked="true"] .switch__knob, .switch.is-on .switch__knob { margin-left: 18px; background: var(--switch-knob-on); }

/* ------------------------------------------------------------------ 2.5.6 avatar */
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: 50%;
  font-size: 12px; font-weight: 600; letter-spacing: 0.2px;
  background: var(--teal-bg); color: var(--teal-dark);
}
.avatar--sm { width: 30px; height: 30px; font-size: 11px; font-weight: 700; }
.avatar--self { background: var(--teal); color: #FFFFFF; }
.avatar--inactive { background: var(--neutral-chip-bg); color: var(--muted); }

/* ------------------------------------------------------------------ cards, KPI tiles, tables */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: 14px 16px;
}
.card--tight { padding: 13px 16px; }
.card--calendar { border-radius: var(--radius-card-lg); }
.card--flush { padding: 0; overflow: hidden; }
.card__title { font-size: var(--fs-card-title); font-weight: 700; }
.card__inner { background: var(--surface-muted); border-radius: 10px; padding: 12px 14px; }
[data-theme="app"] .card--hero { border-radius: 16px; padding: 18px; }
[data-theme="app"] .card--row { border-radius: 12px; padding: 13px 14px; }
[data-theme="app"] .card--route { border-radius: 14px; padding: 14px; }
[data-theme="app"] .card--wallet { border-radius: 18px; height: 180px; padding: 20px; }
[data-theme="app"] .card__inner { background: var(--app-card-inner); }

.kpi-row { display: flex; gap: 14px; }
.kpi { flex: 1 1 0; display: flex; flex-direction: column; gap: 6px; }
.kpi__label { font-size: var(--fs-th); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-th); color: var(--muted); display: flex; align-items: center; gap: 6px; }
.kpi__value { font-size: var(--fs-kpi); font-weight: 700; line-height: 1.2; }
.kpi--billing .kpi__value { font-size: var(--fs-kpi-billing); }
.kpi__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn-dot); }
.kpi__sub { font-size: var(--fs-micro); color: var(--muted); }

.table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.table th {
  text-align: left; padding: 10px 16px; border-bottom: 1px solid var(--border-soft);
  font-size: var(--fs-th); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-th); color: var(--muted);
}
.table td { padding: 11px 16px; border-bottom: 1px solid var(--border-row); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table--dense th { padding: 9px 16px; }
.table--dense td { padding: 9px 16px; }
.table__section td { background: var(--surface-muted); padding: 8px 16px; font-size: var(--fs-th); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-th); color: var(--muted); }
.table__primary { font-weight: 600; }
.table__actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }

/* ------------------------------------------------------------------ 2.5.2 segmented, 2.5.3 pills */
.segmented { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.segmented__item { border-radius: 7px; padding: 6px 14px; font-size: var(--fs-small); font-weight: 500; color: var(--muted); }
.segmented__item.is-active, .segmented__item[aria-pressed="true"] { background: var(--ink); color: #FFFFFF; font-weight: 600; }

.pills { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.pill {
  border-radius: 9px; padding: 8px 16px; font-size: var(--fs-small); font-weight: 500;
  background: var(--surface); border: 1px solid var(--border); color: var(--muted);
}
.pill.is-active, .pill[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #FFFFFF; font-weight: 600; }

/* ------------------------------------------------------------------ 2.5.8 inputs */
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: var(--fs-small-2); font-weight: 600; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.input, .select {
  width: 100%; border: 1px solid var(--border-input); border-radius: 10px; padding: 10px 12px;
  background: var(--surface); color: var(--text); font-size: var(--fs-select); font-weight: 500; line-height: 1.3;
}
.input:focus, .select:focus { outline: 2px solid var(--focus-ring); outline-offset: 0; border-color: var(--teal); }
.input--time { font-size: var(--fs-input-time); font-weight: 600; text-align: right; width: 52px; padding: 6px 8px; }
.input--energy { font-size: var(--fs-input-energy); font-weight: 600; }
.select { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; cursor: pointer; }
.select svg { width: 12px; height: 12px; color: var(--muted); flex: 0 0 auto; }
.field__unit { font-size: var(--fs-small); color: var(--muted); }
.field__error { font-size: var(--fs-small-2); color: var(--danger-text); }
[data-theme="app"] .input, [data-theme="app"] .select { background: var(--app-card-inner); border-color: var(--app-outline); }

/* ------------------------------------------------------------------ 2.5.9 radio card */
.radio-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left;
  border: 1.5px solid var(--border-input); border-radius: 12px; padding: 13px 16px; background: var(--surface);
}
.radio-card__left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.radio-card__ring {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-input); flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.radio-card__ring::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); opacity: 0; }
.radio-card__title { font-size: var(--fs-radio-title); font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.radio-card__sub { font-size: var(--fs-small-3); color: var(--muted); }
.radio-card__right { text-align: right; flex: 0 0 auto; }
.radio-card__price { font-size: 14px; font-weight: 700; }
.radio-card__cost { font-size: var(--fs-small-3); color: var(--muted); }
.radio-card.is-selected, .radio-card[aria-checked="true"] { border: 2px solid var(--teal); background: var(--teal-bg-3); padding: 12.5px 15.5px; }
.radio-card.is-selected .radio-card__ring, .radio-card[aria-checked="true"] .radio-card__ring { border-color: var(--teal); }
.radio-card.is-selected .radio-card__ring::after, .radio-card[aria-checked="true"] .radio-card__ring::after { opacity: 1; }
.radio-card.is-selected .radio-card__title, .radio-card[aria-checked="true"] .radio-card__title { font-weight: 700; }
.radio-card.is-selected .radio-card__price, .radio-card[aria-checked="true"] .radio-card__price { color: var(--teal-dark); }
[data-theme="app"] .radio-card { background: var(--app-card); border-color: var(--app-outline); }
[data-theme="app"] .radio-card.is-selected, [data-theme="app"] .radio-card[aria-checked="true"] { border-color: var(--lime); background: var(--app-card); }
[data-theme="app"] .radio-card.is-selected .radio-card__price { color: var(--lime); }

/* ------------------------------------------------------------------ 2.5.10 banner */
.banner {
  display: flex; align-items: center; gap: 10px;
  background: var(--teal-bg-3); border: 1px solid var(--teal-border); border-radius: 12px; padding: 12px 16px;
  font-size: var(--fs-small); color: var(--teal-deeper);
}
.banner__icon { width: 16px; height: 16px; flex: 0 0 auto; color: var(--teal-dark); }
.banner__text { flex: 1 1 auto; min-width: 0; }
.banner__link { font-size: var(--fs-small); font-weight: 600; color: var(--teal-dark); white-space: nowrap; }
.banner--warn { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-text); }
.banner--warn .banner__icon, .banner--warn .banner__link { color: var(--warn-text); }
.banner--danger { background: var(--danger-bg); border-color: var(--danger-text); color: var(--danger-text); }
.banner--danger .banner__icon, .banner--danger .banner__link { color: var(--danger-text); }
[data-theme="app"] .banner { background: var(--app-card-inner); border-color: var(--app-outline); color: var(--app-text-2); }
[data-theme="app"] .banner__icon, [data-theme="app"] .banner__link { color: var(--app-chip-text); }

/* ------------------------------------------------------------------ 2.5.11 progress */
.progress { width: 100%; height: 6px; border-radius: 3px; background: var(--grid-line); overflow: hidden; }
.progress__fill { height: 100%; border-radius: 3px; background: var(--teal); transition: width 200ms ease; }
.progress__value { font-size: var(--fs-small-3); color: var(--muted); text-align: right; }
[data-theme="app"] .progress__fill { background: var(--lime); }

/* ------------------------------------------------------------------ 2.5.13 skeleton, hatch */
.skeleton { display: block; height: 12px; border-radius: 6px; background: var(--sidebar-divider-soft); }
.skeleton--first { background: var(--sidebar-divider); }
.skeleton--light { background: var(--border-row); }
.skeleton--pulse { animation: ef-skeleton 1.2s ease-in-out infinite; }
@keyframes ef-skeleton { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

.hatch {
  background: repeating-linear-gradient(45deg, var(--hatch-a) 0, var(--hatch-a) 8px, var(--hatch-b) 8px, var(--hatch-b) 16px);
}
.hatch--legend {
  background: repeating-linear-gradient(45deg, var(--hatch-a) 0, var(--hatch-a) 3px, var(--hatch-b) 3px, var(--hatch-b) 6px);
}

/* ------------------------------------------------------------------ modal + backdrop (2.4) */
.backdrop { position: fixed; inset: 0; background: var(--overlay); z-index: 10; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal {
  width: var(--modal-w); max-width: 100%; max-height: calc(100vh - 32px); overflow: auto;
  background: var(--surface); border-radius: var(--radius-modal); box-shadow: var(--shadow-modal);
}
.modal__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 24px; border-bottom: 1px solid var(--border-soft); }
.modal__title { font-family: var(--font-display); font-size: var(--fs-modal-title); font-weight: 700; }
.modal__subtitle { font-size: var(--fs-small); color: var(--muted); margin-top: 2px; }
.modal__body { display: flex; flex-direction: column; gap: 16px; padding: 18px 24px; }
.modal__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 24px; border-top: 1px solid var(--border-soft); background: var(--surface-muted); }

/* ------------------------------------------------------------------ misc shared bits */
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--success-dot); }
.dot--warn { background: var(--warn-dot); }
.dot--danger { background: var(--danger-text); }
.sync-line { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small-2); color: var(--muted); }
.price-cheap { color: var(--teal-dark); }
.price-expensive { color: var(--warn-text); }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; align-items: center; gap: 12px; }
.row--between { justify-content: space-between; }
.grow { flex: 1 1 auto; min-width: 0; }