:root {
  /* Pastel tech palette — elegant dark slate base, icy-cyan primary accent,
     pastel pink for the DRY_RUN/mode indicator, soft lilac as a support tone
     for tertiary/info elements. Values only — every selector below still
     reads from the same token names, so the whole app re-themes from here. */
  --bg: #11131a;
  --bg-elevated: #15171f;
  --surface: #1a1d27;
  --surface-2: #20232e;
  --surface-3: #272b38;
  --border: #2b2f3b;
  --border-strong: #3a3f4f;
  --text: #eef1f7;
  --text-muted: #9aa1b2;
  --text-faint: #656b7c;
  --accent: #6fcee3;
  --accent-strong: #9be2f0;
  --accent-soft: rgba(111, 206, 227, 0.14);
  --accent-border: rgba(111, 206, 227, 0.38);
  --pink: #e8a0c4;
  --pink-strong: #f2bfda;
  --pink-soft: rgba(232, 160, 196, 0.14);
  --pink-border: rgba(232, 160, 196, 0.38);
  --lilac: #b8adee;
  --lilac-strong: #cfc6f5;
  --lilac-soft: rgba(184, 173, 238, 0.14);
  --lilac-border: rgba(184, 173, 238, 0.38);
  --green: #7fe0b8;
  --green-soft: rgba(127, 224, 184, 0.13);
  --red: #ef8c97;
  --red-soft: rgba(239, 140, 151, 0.13);
  --orange: #e8b37e;
  --orange-soft: rgba(232, 179, 126, 0.13);
  --gray: #767c8c;
  --radius: 7px;
  --radius-sm: 5px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "SF Pro Text", "Segoe UI", Arial, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  direction: rtl;
  -webkit-font-smoothing: antialiased;
}

table, .value, .card .value { font-variant-numeric: tabular-nums; }

::selection { background: var(--accent-soft); color: var(--accent-strong); }

/* Consistent, visible keyboard focus everywhere — never rely on the browser default. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 2026-09-02: stays visible while scrolling — the connection light and
     Emergency Stop are exactly the controls you want reachable without
     scrolling back up. Below the mobile sidebar drawer's z-index (600)
     on purpose, so an open drawer still layers over it, not under it. */
  position: sticky;
  top: 0;
  z-index: 500;
  /* 2026-09-01 (iPhone PWA): viewport-fit=cover (index.html) lets content
     extend under the notch/Dynamic Island/home indicator when added to
     the home screen (no browser chrome there to account for it). env()
     resolves to 0 on non-notched devices/regular tabs, so this is a
     no-op everywhere else — additive on top of the existing padding, not
     a replacement. */
  padding: 12px var(--space-5);
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  /* safe-area-inset-left/right are physical (device-edge) values, unlike
     the app's usual logical inline-start/end — must stay paired with
     plain left/right here regardless of the RTL layout, or an RTL page
     would apply the wrong side's notch inset. */
  padding-left: calc(var(--space-5) + env(safe-area-inset-left, 0px));
  padding-right: calc(var(--space-5) + env(safe-area-inset-right, 0px));
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 0.1px;
}

.brand-logo { width: 26px; height: 26px; flex: none; display: block; }

.brand-text { display: flex; flex-direction: column; line-height: 1.25; gap: 1px; }
.brand-name { font-size: 15px; font-weight: 700; }
.brand-name-en { font-size: 11px; font-weight: 500; color: var(--text-faint); margin-inline-start: 5px; }
.brand-signature { font-size: 9.5px; font-weight: 500; color: var(--accent-strong); letter-spacing: 0.3px; opacity: 0.85; }

/* --- About/Settings full logo lockup --- */
.about-logo-row { display: flex; align-items: center; gap: 14px; margin-bottom: var(--space-4); }
.about-logo-row .brand-logo { width: 44px; height: 44px; }
.about-logo-row .brand-name { font-size: 19px; }
.about-logo-row .brand-name-en { font-size: 13px; }
.about-logo-row .brand-signature { font-size: 11px; }

.app-version {
  font-size: 10.5px;
  color: var(--text-faint);
  font-weight: 500;
  margin-inline-start: 6px;
  letter-spacing: 0.2px;
}

.status-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* 2026-09-02: the leftmost cluster the user specifically wants grouped and
   visually set apart — Admin Edit, connection status, Emergency Stop —
   reachable from anywhere without hunting through tabs. A subtle divider
   on its own side separates it from the routine controls to its right. */
.header-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-inline-start: var(--space-3);
  margin-inline-start: var(--space-2);
  border-inline-start: 1px solid var(--border);
}

/* Admin Edit — deliberately heavier than a routine "secondary" button
   (bigger, bolder, amber) since it gates real risk-parameter changes;
   the user asked for it to visually read as serious, not a casual toggle. */
button.serious {
  font-size: 13px;
  font-weight: 700;
  padding: 9px 18px;
  border-width: 1.5px;
}
#btn-admin-edit.serious {
  border-color: var(--orange);
  color: var(--orange);
  background: var(--orange-soft);
}
#btn-admin-edit.serious:hover { background: rgba(232, 179, 126, 0.24); }
#btn-admin-edit.serious.unlocked { background: var(--orange); color: #1a1206; }

/* Emergency Stop — the single control that halts new exposure fastest, so
   it gets the strongest visual treatment on the page. Clearing it is a
   2-second press-and-hold (app.js), not a click — .arming shows progress
   mid-hold so the user knows it registered without needing to guess. */
#btn-emergency-stop-header.serious {
  border-color: var(--red);
  color: var(--red);
  background: var(--red-soft);
  position: relative;
  overflow: hidden;
}
#btn-emergency-stop-header.serious:hover { background: rgba(239, 140, 151, 0.24); }
#btn-emergency-stop-header.serious.active {
  background: var(--red);
  color: #2a0a0d;
  border-color: var(--red);
}
#btn-emergency-stop-header.serious.arming::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: var(--arm-progress, 0%);
  background: rgba(255, 255, 255, 0.35);
  transition: width 0.05s linear;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
  letter-spacing: 0.2px;
}

.badge.dry_run { background: var(--pink-soft); color: var(--pink-strong); border-color: var(--pink-border); }
.badge.live { background: var(--red-soft); color: var(--red); border-color: rgba(239, 140, 151, 0.4); }
.badge.healthy { background: var(--green-soft); color: var(--green); }
.badge.degraded { background: var(--orange-soft); color: var(--orange); }
.badge.critical { background: var(--red-soft); color: var(--red); }
.badge.sev-critical { background: var(--red-soft); color: var(--red); }
.badge.sev-warning { background: var(--orange-soft); color: var(--orange); }
.badge.sev-info { background: var(--lilac-soft); color: var(--lilac-strong); }
/* Neutral — an out-of-scope/not-required check (e.g. HA in PRIMARY_ONLY
   mode): deliberately not green (never a fake PASS) and not red (never a
   readiness-blocking failure) — see backend/services/
   pre_live_readiness.py::ReadinessItem.status. */
.badge.neutral { background: var(--surface-3); color: var(--text-muted); border-color: var(--border-strong); }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

.owner-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

button {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  padding: 7px 15px;
  cursor: pointer;
  background: var(--surface-2);
  color: var(--text);
  transition: border-color 0.12s ease, background-color 0.12s ease, transform 0.06s ease;
}

button:hover { border-color: var(--accent); background: var(--surface-3); }
button:active { transform: translateY(0.5px); }
button:disabled { opacity: 0.45; cursor: default; }
button:disabled:hover { border-color: var(--border-strong); background: var(--surface-2); }

button.primary-start { background: var(--green); color: #0a0b0d; border-color: var(--green); }
button.primary-start:hover { background: #3dd89a; border-color: #3dd89a; }
button.primary-stop { background: var(--red); color: #0a0b0d; border-color: var(--red); }
button.primary-stop:hover { background: #ea727b; border-color: #ea727b; }
button.secondary { background: var(--surface-2); }

/* Two-step "confirm" pattern for destructive-ish actions — no native confirm()
   (blocks automation and can't be styled). First click flips the button into
   a red confirm state for a few seconds; a second click within that window
   commits, otherwise it quietly reverts. */
button.confirm-armed {
  background: var(--red-soft);
  border-color: var(--red);
  color: var(--red);
}
button.confirm-armed:hover { background: var(--red); color: #0a0b0d; }

/* --- Sidebar navigation (replaces the old horizontal top-tab bar) --- */
.app-shell {
  display: flex;
  align-items: stretch;
  min-height: calc(100vh - 58px); /* header height, approx */
}

.sidebar {
  flex: none;
  width: 216px;
  background: var(--bg-elevated);
  border-inline-start: 1px solid var(--border); /* RTL: visual right edge */
  padding: var(--space-3) 0;
  overflow-y: auto;
  transition: width 0.16s ease;
}

/* 2026-09-02: desktop-only — stays in view while scrolling, pinned right
   below the sticky header, its own height capped to the remaining
   viewport so it scrolls internally (nav list) only if that list itself
   is taller than the screen, rather than scrolling away with the main
   content. Scoped to min-width so none of this reaches the mobile
   off-canvas drawer below, which already fully controls its own
   position/top/bottom for a different (full-height fixed) purpose. */
@media (min-width: 761px) {
  .sidebar {
    position: sticky;
    top: 63px; /* measured actual rendered header height, not the ~58px estimate used elsewhere */
    height: calc(100vh - 63px);
    align-self: flex-start;
  }
}

.sidebar.collapsed { width: 56px; }

.sidebar-collapse-btn {
  display: block;
  margin: 0 var(--space-3) var(--space-2);
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 6px 10px;
  font-size: 13px;
}
.sidebar-collapse-btn:hover { color: var(--text); border-color: var(--accent); }

.sidebar nav { display: flex; flex-direction: column; gap: 2px; padding: 0 var(--space-2); background: transparent; border: none; }

.nav-group-head {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  padding: 9px 10px;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 700;
  text-align: right;
  letter-spacing: 0.1px;
}
.nav-group-head:hover { background: var(--surface-2); color: var(--text); border-color: transparent; }
.nav-group-head.active { color: var(--accent-strong); }
.nav-icon { flex: none; font-size: 13px; line-height: 1; width: 16px; text-align: center; opacity: 0.85; }

.nav-group-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.16s ease;
  padding-inline-start: 8px;
  border-inline-start: 1px solid var(--border);
  margin-inline-start: 18px;
}
.nav-group.open .nav-group-body { max-height: 400px; }

.sidebar nav button.tab {
  display: flex;
  align-items: center;
  gap: 9px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
}
.sidebar nav button.tab .nav-icon { font-size: 8px; opacity: 0.6; }
.sidebar nav button.tab:hover { background: var(--surface-2); color: var(--text); border-color: transparent; }
.sidebar nav button.tab.active { background: var(--accent-soft); color: var(--accent-strong); }
.sidebar nav button.tab.active .nav-icon { opacity: 1; color: var(--accent-strong); }

/* Icon-only collapsed mode: hide labels, center icons, tooltip via title attr */
.sidebar.collapsed .nav-group-label,
.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-group-body { display: none; }
.sidebar.collapsed .nav-group-head,
.sidebar.collapsed .sidebar nav button.tab { justify-content: center; padding: 9px 4px; }
.sidebar.collapsed .nav-icon { width: auto; }

.shadow-preset-btn.active { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent-border); }
.virtual-capital-note { font-size: 11px; color: var(--accent-strong); font-weight: 600; margin-bottom: 10px; }

main {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-5);
  max-width: 1180px;
}

.panel { display: none; }
.panel.active { display: block; animation: panel-in 0.1s ease; }

@keyframes panel-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 15px;
  transition: border-color 0.15s ease;
}

.card:hover { border-color: var(--border-strong); }
.card .label { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; letter-spacing: 0.1px; }
.card .value { font-size: 18px; font-weight: 700; color: var(--text); }
.card .value.pos { color: var(--green); }
.card .value.neg { color: var(--red); }
.card .sub { font-size: 10.5px; color: var(--text-faint); margin-top: 4px; }

/* Larger "hero" value for the primary metric on a card — used by the
   redesigned Dashboard's account/shadow-copy summary cards to keep the
   single most important number visually dominant over its siblings. */
.card .value.hero { font-size: 26px; }

.card-title { font-size: 12px; font-weight: 700; color: var(--text-muted); margin-bottom: 12px; letter-spacing: 0.2px; }

/* Plain key/value detail rows (account details, technical panels, etc.) */
.row { display: flex; justify-content: space-between; gap: var(--space-4); padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.row:last-child { border-bottom: none; }
.row .k { color: var(--text-muted); }
.row .v { color: var(--text); font-weight: 600; text-align: left; }
.row .v.pos { color: var(--green); }
.row .v.neg { color: var(--red); }

/* Compact section grouping inside a page (not the top-level .section-label
   separator) — used by the redesigned Dashboard/Subaccount pages to keep
   related cards visually grouped without a heavy border. */
.mini-heading { font-size: 11px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.4px; margin: var(--space-4) 0 var(--space-2); }
.mini-heading:first-child { margin-top: 0; }

/* Dashboard reorg (2026-08-30) — the 4 top-row "primary" cards always sit
   in one even row (never fewer/more per the viewport), each a compact
   combo card (title + hero value + a few .row details) instead of many
   single-value cards, so the whole top row reads at a glance. */
.cards-primary { grid-template-columns: repeat(4, 1fr); }
.cards-primary .card { display: flex; flex-direction: column; }
@media (max-width: 980px) {
  .cards-primary { grid-template-columns: repeat(2, 1fr); }
}

/* The Andrii "second row" card spans the full width, still just one card
   (not a grid of many), same compact title+rows shape as everything else. */
.card-wide { grid-template-columns: 1fr; }

.card .card-title .badge { margin-inline-start: 6px; vertical-align: middle; }

/* Centralized warnings — a single card, shown only when something in
   DASH_WARNINGS actually needs attention; hidden/collapsed otherwise so a
   healthy system never shows an empty red box. */
.warnings-card { border-color: var(--red-border, rgba(239, 140, 151, 0.4)); background: var(--red-soft); }
.warnings-card .card-title { color: var(--red); }
.warning-item { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 12.5px; color: var(--text); border-bottom: 1px solid rgba(239, 140, 151, 0.18); }
.warning-item:last-child { border-bottom: none; }
.warning-item .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); flex: none; }

.not-available-card { border-style: dashed; background: transparent; }
.not-available-card .value { color: var(--text-faint); font-size: 13px; font-weight: 600; }
.not-available-card .finding-detail { margin-top: 6px; }

/* --- Admin Edit Mode (2026-08-30) --- */
/* Locked (default): an admin-gated input renders as plain read-only text,
   never as a visibly-disabled/greyed-out form control — "settings appear
   as normal values/text" while locked. */
.risk-sections input:disabled {
  border-color: transparent;
  background: transparent;
  color: var(--text);
  font-weight: 700;
  padding-inline-start: 2px;
  cursor: default;
  opacity: 1;
}
/* Unlocked: the field itself IS the edit control (a live, bordered input) —
   plus a small pencil hint next to its label so it's obvious at a glance
   which values are editable right now, without any permanent clutter. */
body.admin-unlocked .risk-sections .field > label::after {
  content: " ✎";
  color: var(--accent-strong);
  font-size: 10px;
  opacity: 0.85;
}
#btn-admin-edit.unlocked { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent-border); }

.backup-update-status-banner {
  border-radius: var(--radius);
  padding: 12px 15px;
  margin: 10px 0;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--surface);
}
.backup-update-status-banner.ready { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent-border); }
.backup-update-status-banner.running { background: var(--surface-3); color: var(--text); border-color: var(--border-strong); }
.backup-update-status-banner.success { background: var(--green-soft); color: var(--green); border-color: rgba(0,0,0,0); }
.backup-update-status-banner.failed { background: var(--red-soft); color: var(--red); border-color: rgba(0,0,0,0); }
.backup-update-status-banner.incompatible { background: var(--orange-soft); color: var(--orange); border-color: rgba(0,0,0,0); }
.backup-update-status-banner .sub { font-size: 11px; font-weight: 400; margin-top: 4px; opacity: 0.85; }

.backup-update-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  margin: 10px 0;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.backup-update-progress .step {
  font-size: 11px;
  padding: 4px 9px;
  border-radius: 999px;
  color: var(--text-faint);
  background: var(--surface-3);
  white-space: nowrap;
}
.backup-update-progress .step.done { color: var(--green); background: var(--green-soft); }
.backup-update-progress .step.active { color: var(--accent-strong); background: var(--accent-soft); font-weight: 700; }
.backup-update-progress .step.failed { color: var(--red); background: var(--red-soft); font-weight: 700; }
.backup-update-progress .arrow { color: var(--text-faint); font-size: 11px; }

.mini-label {
  font-size: 10.5px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
  margin: 0 0 8px;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

th, td {
  text-align: right;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  white-space: nowrap;
}

th {
  background: var(--surface-2);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

tbody tr { transition: background-color 0.1s ease; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-2); }

.pos-pnl { color: var(--green); font-weight: 600; }
.neg-pnl { color: var(--red); font-weight: 600; }
table td.pos, table td.side-long { color: var(--green); font-weight: 600; }
table td.neg, table td.side-short { color: var(--red); font-weight: 600; }
.side-long { color: var(--green); font-weight: 600; }
.side-short { color: var(--red); font-weight: 600; }

.table-wrap { overflow-x: auto; border-radius: var(--radius); }

.empty-state {
  padding: 32px 20px;
  text-align: center;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  font-size: 12px;
  line-height: 1.7;
}

.section-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin: var(--space-6) 0 var(--space-3);
  padding-bottom: var(--space-2);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}

.settings-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 17px 19px;
  max-width: 520px;
}

.settings-form.inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-4);
  max-width: none;
}

.settings-form .field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: 12px;
}

.settings-form.inline-form .field { display: block; margin-bottom: 0; }
.settings-form.inline-form .field label { display: block; margin-bottom: 6px; }
.settings-form label { color: var(--text-muted); font-size: 11.5px; }

.settings-form input,
.settings-form select {
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-size: 12px;
  text-align: center;
  font-family: inherit;
  background: var(--surface-2);
  color: var(--text);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.settings-form input { width: 108px; }
.settings-form input:hover, .settings-form select:hover { border-color: var(--border-strong); }
.settings-form input:focus, .settings-form select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.settings-form input::placeholder { color: var(--text-faint); }
.settings-form input[type="checkbox"] { width: auto; cursor: pointer; accent-color: var(--accent); }

#history-filter-group { display: flex; gap: 6px; }
.history-filter-btn.active { border-color: var(--accent); color: var(--accent); }

.card.clickable { cursor: pointer; transition: border-color 0.12s ease; }
.card.clickable:hover { border-color: var(--accent); }

.settings-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: 2px;
}

.save-msg {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--green);
  background: var(--green-soft);
  padding: 4px 10px;
  border-radius: 999px;
}

.log-row { display: flex; flex-wrap: wrap; gap: 10px; padding: 7px 12px; border-bottom: 1px solid var(--border); font-size: 11.5px; }
.log-row:last-child { border-bottom: none; }
.log-row:hover { background: var(--surface-2); }
.log-time { color: var(--text-faint); min-width: 148px; }
.log-status-ACCEPTED { color: var(--green); font-weight: 600; }
.log-status-REJECTED { color: var(--red); font-weight: 600; }
.log-status-OK { color: var(--text-muted); }
.log-technical {
  display: none;
  flex-basis: 100%;
  color: var(--text-faint);
  font-size: 10.5px;
  font-family: ui-monospace, monospace;
  margin-top: 2px;
}
.log-technical.open { display: block; }

.soak-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 17px;
}

.soak-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.soak-resource-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.soak-report-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 12px;
  line-height: 1.8;
  white-space: pre-wrap;
  color: var(--text-muted);
}

.soak-report-box .verdict-pass { color: var(--green); font-weight: 700; }
.soak-report-box .verdict-fail { color: var(--red); font-weight: 700; }

.sleep-warning-banner {
  background: var(--orange-soft, rgba(232,179,126,0.13));
  border: 1px solid rgba(232, 179, 126, 0.38);
  color: var(--orange, #e8b37e);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.6;
  margin-top: 12px;
}

button.secondary.danger { border-color: rgba(239, 140, 151, 0.4); color: var(--red); }
button.secondary.danger:hover { background: var(--red-soft); border-color: var(--red); }

.soak-history-list { display: flex; flex-direction: column; gap: 8px; }
.soak-history-row {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; font-size: 12.5px;
}
.soak-history-row .meta { color: var(--text-muted); }
.soak-history-row .meta b { color: var(--text); }
.soak-history-row .verdict-pass { color: var(--green); }
.soak-history-row .verdict-fail { color: var(--red); }

.readiness-row {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 11px 13px; margin-bottom: 7px;
}
.readiness-row.fail { border-color: rgba(239, 140, 151, 0.4); }
.readiness-row.optional { border-style: dashed; }
.readiness-row-body { flex: 1; }
.readiness-row-title { font-size: 12.5px; font-weight: 600; margin-bottom: 3px; }
.readiness-row-detail { font-size: 11.5px; color: var(--text-muted); line-height: 1.6; }

.readiness-verdict {
  margin-top: 18px; padding: 18px; border-radius: var(--radius); text-align: center;
  font-size: 17px; font-weight: 700; letter-spacing: 0.3px;
}
.readiness-verdict.ready { background: var(--green-soft); color: var(--green); border: 1px solid rgba(127, 224, 184, 0.4); }
.readiness-verdict.not-ready { background: var(--red-soft); color: var(--red); border: 1px solid rgba(239, 140, 151, 0.4); }

.finding-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 11px 13px;
  margin-bottom: 7px;
  transition: border-color 0.15s ease;
}

.finding-card:hover { border-color: var(--border-strong); }
.finding-card .finding-head { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.finding-card .finding-body { flex: 1; }
.finding-card .finding-title { font-size: 12.5px; font-weight: 600; margin-bottom: 3px; }
.finding-card .finding-detail { font-size: 11.5px; color: var(--text-muted); line-height: 1.6; }
.finding-expand-btn {
  background: none; border: none; color: var(--text-faint); font-size: 11px; padding: 2px 6px; cursor: pointer;
}
.finding-expand-btn:hover { color: var(--accent-strong); background: none; }

/* --- Signals screen (איתותים): SOURCE FACTS vs R-TICK ANALYSIS --- */
.signal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 9px;
  overflow: hidden;
}
.signal-card > summary {
  cursor: pointer;
  list-style: none;
  padding: 11px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.signal-card > summary::-webkit-details-marker { display: none; }
.signal-card > summary:hover { background: var(--surface-2); }
.signal-card .signal-symbol { font-weight: 700; font-size: 13.5px; }
.signal-card-body { padding: 0 14px 14px; }
.source-facts-block {
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-top: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.block-header {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.source-facts-block .block-header { color: var(--accent-strong); }
.fact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px 14px;
}
.fact-item { font-size: 11.5px; line-height: 1.7; }
.fact-item .fact-label { color: var(--text-muted); margin-inline-end: 4px; }
.fact-item .fact-value { color: var(--text); font-weight: 600; }
.badge.na-source { background: var(--surface-3); color: var(--text-faint); border: 1px dashed var(--border-strong); }
.badge.source-provided { background: var(--accent-soft); color: var(--accent-strong); }
.event-timeline-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 8px;
  padding: 7px 0;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
}
.event-timeline-row:first-child { border-top: none; }
.event-timeline-time { color: var(--text-muted); }

/* --- Open-signal trade panel (section 5 of the Signals screen) — a
   dedicated, more visual layout distinct from the plain .fact-grid used
   by history/lifecycle cards. VERIFIED SOURCE DATA ONLY (2026-08-26): no
   calculated trade level of any kind is ever rendered here — only
   SOURCE FACTS (read straight from the observed source), LIVE MARKET
   DATA (a real live price, clearly labeled as not Master-provided), and
   an explicit "NOT AVAILABLE FROM SOURCE" for Stop Loss/Take Profit. */
.open-signal-card > summary { padding: 12px 16px; }
.open-signal-price-chip { font-size: 12px; color: var(--text-muted); }
.open-signal-price-chip .move-pos { color: var(--green); font-weight: 700; }
.open-signal-price-chip .move-neg { color: var(--red); font-weight: 700; }
.open-signal-body { padding: 0 16px 16px; }

.quick-facts-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding: 10px 0 12px;
  font-size: 11.5px;
}
.quick-facts-strip .qf-label { color: var(--text-muted); margin-inline-end: 4px; }
.quick-facts-strip .qf-value { color: var(--text); font-weight: 600; }

.panel-block-header {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.panel-block-header.source { background: var(--accent-soft); color: var(--accent-strong); border: 1px solid var(--accent-border); }
.panel-block-header.live { background: var(--orange-soft); color: var(--orange); border: 1px solid rgba(232, 179, 126, 0.4); }

.panel-divider-strong {
  height: 2px;
  margin: 14px 0;
  background: linear-gradient(90deg, var(--accent-border), rgba(232, 179, 126, 0.4));
  border-radius: 2px;
  opacity: 0.6;
}

.levels-row {
  display: flex;
  align-items: stretch;
  gap: 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.level-divider { width: 1px; background: var(--border-strong); flex: 0 0 1px; }
.level-pane { flex: 1; min-width: 0; }
.level-pane-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
  margin-bottom: 6px;
}
.stop-pane .level-pane-title { color: var(--red); }
.target-pane .level-pane-title { color: var(--green); }
.level-pane-value { font-size: 15px; font-weight: 700; color: var(--text); }
.level-pane-value.na { font-size: 12px; font-weight: 600; color: var(--text-faint); font-style: italic; }

.share-signal-actions { display: flex; gap: 8px; margin-top: 14px; }
.share-signal-box {
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
  direction: ltr;
  text-align: left;
}

/* --- Risk Settings: sectioned layout (A-F) --- */
.risk-sections {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.risk-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.risk-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 6px;
}
.risk-section-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}
.risk-section-note { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; line-height: 1.5; }
.risk-section .settings-form.inline-form { margin-bottom: 0; }

/* --- Sources: "SUMMARY FIRST" cards --- */
.source-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.source-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.source-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.source-card-name { font-size: 14px; font-weight: 700; }
.source-card-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 14px;
  margin-bottom: 14px;
}
.source-stat-label { display: block; font-size: 10.5px; color: var(--text-muted); margin-bottom: 2px; }
.source-stat-value { display: block; font-size: 13px; font-weight: 600; }
.source-card-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.source-card-more {
  display: none;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.source-card-more.open { display: block; }

/* --- Source Diagnostics: simplified summary --- */
.diag-summary-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  max-width: 420px;
}
.diag-summary-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.diag-summary-name { font-size: 16px; font-weight: 700; }
.diag-summary-lines { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-muted); }

/* --- Virtual Technician: knowledge-base guide detail --- */
.finding-guide {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display: none;
  font-size: 12px;
  line-height: 1.65;
}
.finding-guide.open { display: block; }
.finding-guide .kb-section { margin-bottom: 10px; }
.finding-guide .kb-label {
  font-size: 10.5px; font-weight: 700; color: var(--accent-strong);
  text-transform: none; margin-bottom: 3px; letter-spacing: 0.2px;
}
.finding-guide .kb-list { margin: 0; padding-inline-start: 18px; color: var(--text-muted); }
.finding-guide .kb-list li { margin-bottom: 2px; }
.finding-guide .kb-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.repair-step {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  margin-bottom: 6px;
}
.repair-step .repair-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; background: var(--accent-soft);
  color: var(--accent-strong); font-size: 10.5px; font-weight: 700; margin-inline-end: 6px;
}
.repair-step .repair-step-what { font-weight: 600; font-size: 12px; }
.repair-step .repair-step-meta { color: var(--text-muted); font-size: 11px; margin-top: 4px; }
.repair-step .repair-step-meta div { margin-top: 2px; }

.finding-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.finding-actions button { font-size: 11px; padding: 5px 10px; }
.diag-result { font-size: 11px; margin-top: 6px; padding: 6px 9px; border-radius: var(--radius-sm); }
.diag-result.ok { background: var(--green-soft); color: var(--green); }
.diag-result.fail { background: var(--red-soft); color: var(--red); }

/* --- Phase 31: Sources -> Andrii "אירועים נצפים" / Observed Events --- */
.event-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.event-card.event-OPEN { border-inline-start-color: var(--green); }
.event-card.event-CLOSE { border-inline-start-color: var(--red); }
.event-card.event-INCREASE { border-inline-start-color: var(--accent); }
.event-card.event-REDUCE { border-inline-start-color: var(--orange); }
.event-card.event-SIDE_CHANGE { border-inline-start-color: var(--orange); }
.event-card.event-LEVERAGE_CHANGE { border-inline-start-color: var(--accent); }
.event-card.event-UPDATE_SL, .event-card.event-UPDATE_TP { border-inline-start-color: var(--text-muted); }
.event-card.event-AMBIGUOUS { border-inline-start-color: var(--text-faint); }

.event-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.event-symbol { font-size: 14px; font-weight: 700; }
.event-title { font-size: 12.5px; font-weight: 600; color: var(--text); }
.event-time { font-size: 11px; color: var(--text-faint); margin-inline-start: auto; }

.event-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 6px 16px;
  font-size: 11.5px;
}
.event-fields .ef-label { color: var(--text-muted); }
.event-fields .ef-value { font-weight: 600; color: var(--text); }

.observed-position-note {
  margin-bottom: 12px;
}

.wouldcopy-box {
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 11.5px;
}

.advanced-only { display: none; }
.tech-advanced .advanced-only { display: block; }
.advanced-only .kb-raw {
  font-family: ui-monospace, "SF Mono", monospace; font-size: 10.5px; color: var(--text-faint);
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 10px; white-space: pre-wrap; word-break: break-all;
}

/* --- Virtual Technician: toolbar / subnav / mode toggle --- */
.tech-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 10px; }
.tech-toolbar-left { display: flex; align-items: center; gap: 10px; }

.mode-toggle { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px; }
.mode-toggle .mode-btn {
  background: none; border: none; font-size: 11px; padding: 5px 11px; color: var(--text-muted); border-radius: 4px;
}
.mode-toggle .mode-btn:hover { background: var(--surface-3); }
.mode-toggle .mode-btn.active { background: var(--accent-soft); color: var(--accent-strong); }

.tech-subnav { display: flex; gap: var(--space-3); border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.tech-subtab {
  background: none; border: none; border-bottom: 2px solid transparent; border-radius: 0;
  padding: 8px 2px; font-size: 12.5px; color: var(--text-muted); margin-bottom: -1px;
}
.tech-subtab:hover { background: none; color: var(--text); }
.tech-subtab.active { color: var(--accent-strong); border-bottom-color: var(--accent); }
.ai-status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gray); margin-inline-start: 5px; }
.ai-status-dot.connected { background: var(--green); }

.tech-subpanel { display: none; }
.tech-subpanel.active { display: block; }

/* --- AI chat --- */
.ai-status-banner {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 9px 12px; font-size: 12px; color: var(--text-muted); margin-bottom: 10px; text-align: center;
}
.chat-context-chip {
  display: inline-flex; align-items: center; gap: 6px; background: var(--accent-soft); color: var(--accent-strong);
  border: 1px solid var(--accent-border); border-radius: 999px; padding: 4px 11px; font-size: 11px; margin-bottom: 10px;
}
.chat-context-chip button { background: none; border: none; color: var(--accent-strong); font-size: 12px; padding: 0 0 0 4px; cursor: pointer; }
.chat-quick-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chat-quick-btn { font-size: 11px; padding: 5px 10px; background: var(--surface-2); }

.chat-history {
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px; min-height: 220px; max-height: 420px; overflow-y: auto; margin-bottom: 10px;
}
.chat-msg { margin-bottom: 10px; max-width: 80%; }
.chat-msg.user { margin-inline-start: auto; text-align: left; }
.chat-msg .chat-bubble {
  display: inline-block; padding: 8px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.6;
  white-space: pre-wrap;
}
.chat-msg.user .chat-bubble { background: var(--accent-soft); color: var(--text); }
.chat-msg.assistant .chat-bubble { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); }
.chat-msg .chat-time { font-size: 9.5px; color: var(--text-faint); margin-top: 3px; }
.chat-empty { color: var(--text-faint); font-size: 12px; text-align: center; padding: 30px 0; }

.chat-input-row { display: flex; gap: 8px; }
.chat-input-row input { flex: 1; }

/* --- Repair Wizard --- */
.wizard-overlay {
  position: fixed; inset: 0; background: rgba(10, 11, 13, 0.72);
  display: flex; align-items: center; justify-content: center; z-index: 100;
}
.wizard-panel {
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius);
  width: min(560px, 92vw); max-height: 80vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.wizard-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid var(--border); font-size: 12.5px; color: var(--accent-strong); font-weight: 600;
}
.wizard-close { background: none; border: none; color: var(--text-muted); font-size: 15px; padding: 2px 6px; }
.wizard-close:hover { background: none; color: var(--text); }
.wizard-body { padding: 18px; }
.wizard-body .wizard-question { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.wizard-body .wizard-why { font-size: 12px; color: var(--text-muted); margin-bottom: 14px; }
.wizard-body .wizard-action-btn { width: 100%; padding: 10px; font-size: 12.5px; }
.wizard-body .wizard-result { margin-top: 12px; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 12px; }
.wizard-body .wizard-result.ok { background: var(--green-soft); color: var(--green); }
.wizard-body .wizard-result.fail { background: var(--red-soft); color: var(--red); }
.wizard-body .wizard-next-row { display: flex; gap: 8px; margin-top: 14px; }
.wizard-progress { font-size: 10.5px; color: var(--text-faint); margin-bottom: 10px; }

.tech-disclaimer {
  margin-top: var(--space-4);
  font-size: 10.5px;
  color: var(--text-faint);
  text-align: center;
}

.logs-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* --- Symbol autocomplete --- */
.symbol-autocomplete { position: relative; width: 140px; }
.symbol-autocomplete input { width: 100%; text-transform: uppercase; }

.autocomplete-list {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  z-index: 20;
  list-style: none;
  margin: 0;
  padding: 4px;
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  max-height: 220px;
  overflow-y: auto;
  display: none;
}

.autocomplete-list.open { display: block; }

.autocomplete-list li {
  padding: 6px 9px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.autocomplete-list li .ac-base { color: var(--text-faint); font-size: 10.5px; }
.autocomplete-list li:hover, .autocomplete-list li.active { background: var(--accent-soft); color: var(--accent-strong); }
.autocomplete-list li.no-results { color: var(--text-faint); cursor: default; text-align: center; }
.autocomplete-list li.no-results:hover { background: none; color: var(--text-faint); }

footer {
  text-align: center;
  color: var(--text-faint);
  font-size: 10px;
  padding: 15px;
  padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px));
}

/* 2026-09-01 (cloud migration): non-blocking toast notifications, replacing
   native alert() everywhere — alert() freezes the ENTIRE page's JS
   (including every 1s polling loop) until a human physically clicks OK,
   which is untenable once the app runs unattended / accessed remotely. */
#toast-container {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(420px, 90vw);
}
.toast {
  background: var(--card-bg, #1a1c22);
  border: 1px solid var(--border, #333);
  border-inline-start: 4px solid var(--gray, #888);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text, #eee);
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  animation: toast-in 0.2s ease-out;
}
.toast.toast-error { border-inline-start-color: var(--red, #ef8c97); }
.toast.toast-info { border-inline-start-color: var(--green, #7fe0b8); }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   2026-09-01 (cloud migration + remote/mobile access): mobile layout.
   Everything above was designed for a ~1500px desktop window; this makes
   it genuinely usable on a phone (iPhone 15 Pro portrait ≈390px) without
   touching any of the desktop rules above — additive only.
   ============================================================ */
@media (max-width: 760px) {
  header {
    flex-wrap: wrap;
    row-gap: 8px;
    padding: 10px var(--space-3);
  }
  .status-row { flex-wrap: wrap; row-gap: 6px; }
  .brand-signature { display: none; } /* reclaim vertical space */

  .app-shell { position: relative; }

  /* The sidebar becomes an off-canvas drawer instead of a permanent
     216px-wide column — on a 390px screen that column alone would eat
     more than half the usable width. Reuses the EXISTING collapse
     toggle/class (desktop/frontend/app.js already persists it via
     localStorage) — only what "collapsed" visually means changes here. */
  .sidebar {
    position: fixed;
    inset-inline-end: 0;
    top: 0;
    bottom: 0;
    /* This is a fixed, edge-to-edge drawer (unlike the desktop column) —
       top/bottom nav items must not land under the Dynamic Island/notch
       or the home indicator when opened in standalone PWA mode. */
    padding-top: calc(var(--space-3) + env(safe-area-inset-top, 0px));
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    width: 78vw;
    max-width: 300px;
    z-index: 600;
    box-shadow: -8px 0 24px rgba(0,0,0,0.4);
    transform: translateX(0);
    transition: transform 0.2s ease;
  }
  html[dir="rtl"] .sidebar { transform: translateX(0); }
  .sidebar.collapsed {
    width: 78vw;
    max-width: 300px;
    transform: translateX(100%);
  }
  html[dir="rtl"] .sidebar.collapsed { transform: translateX(-100%); }

  main {
    padding: var(--space-3);
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    max-width: 100%;
  }

  .cards-primary,
  .cards {
    grid-template-columns: 1fr !important;
  }

  /* Every wide element (tables especially) scrolls within itself,
     never the page body — matches the existing "no horizontal scroll"
     rule the desktop layout already follows. */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* The base button rule (padding: 7px 15px, font-size: 12px) renders at
     roughly 32px tall — well under the ~44px minimum touch target Apple's
     HIG and WCAG 2.5.5 both call for. Fine with a mouse on desktop
     (unchanged there — this is mobile-only), but real friction on a phone
     for the many small "secondary" action buttons packed into table rows
     (הסבר לי את התקלה, שאל את הטכנאי AI, etc.). */
  button { min-height: 44px; padding: 10px 15px; }

  .wizard-panel { width: 94vw !important; }
}