/* Sultivo OS tervezőrendszer: színváltozók (az egyetlen forrás: sultivo-os-dizajn/rendszer/tokens.css).
   Alapból világos; a sötét téma: <html data-theme="dark">. A --so- változók a Sultivo OS saját kiterjesztései. */
:root {
  color-scheme: light;
  --bg: #f4f5f6;
  --surface: #ffffff;
  --surface-warm: var(--surface);
  --fg: #12213a;
  --fg-2: #4a5568;
  --muted: #5f6a7c;
  --meta: #5f6a7c;
  --border: #e3e5e8;
  --border-soft: #e3e5e8;
  --accent: #12213a;
  --accent-on: #ffffff;
  --accent-hover: #1b2e4f;
  --accent-active: #0d1a2e;
  --success: #0f766e;
  --warn: #8f5500;
  --danger: #b42318;
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 16px;
  --text-lg: 19px;
  --text-xl: 21px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: 50px;
  --leading-body: 1.55;
  --leading-tight: 1.05;
  --tracking-display: -0.018em;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --section-y-desktop: 40px;
  --section-y-tablet: 32px;
  --section-y-phone: 24px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --elev-flat: none;
  --elev-ring: 0 0 0 1px var(--border);
  --elev-raised: 0 8px 24px rgba(18, 33, 58, 0.12);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px #12213a;
  --motion-fast: 160ms;
  --motion-base: 220ms;
  --motion-slow: 700ms;
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --container-max: 1200px;
  --container-gutter-desktop: 40px;
  --container-gutter-tablet: 28px;
  --container-gutter-phone: 16px;

  /* Sultivo OS kiterjesztések */
  --so-font-label: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --so-label-size: 10.5px;
  --so-label-tracking: 0.2em;
  --so-label-stretch: 125%;
  --so-num-size: 40px;
  --so-num-size-sm: 28px;
  --so-num-weight: 650;
  --so-num-stage-size: 64px;
  --so-num-stage-weight: 200;
  --so-radius-command: 18px;
  --so-radius-tile: 8px;
  --so-radius-tile-lg: 18px;
  --so-sidebar-width: 256px;
  --so-line-strong: #c9ced5;
  --so-field-border: #7e889a;
  --so-selected: #e8edf5;
  --so-primary: #12213a;
  --so-on-primary: #ffffff;
  --so-signal: #eab308;
  --so-todo-bg: #fbf3d6;
  --so-todo-ink: #12213a;
  --so-result: #0f766e;
  --so-result-graphic: #0d9488;
  --so-result-bg: #e3f4f1;
  --so-warn: #8f5500;
  --so-warn-bg: #fef1dd;
  --so-danger: #b42318;
  --so-danger-bg: #fdecea;
  --so-stage: #12213a;
  --so-stage-line: #2a3c5c;
  --so-stage-ink: #f4f5f6;
  --so-stage-ink-2: #a3b2c9;
  --so-stage-label: #eab308;
  --so-stage-shadow: 0 18px 44px rgba(3, 10, 22, 0.35);
  --so-sidebar: #12213a;
  --so-sidebar-line: #2a3c5c;
  --so-sidebar-ink: #c9d3e3;
  --so-sidebar-ink-active: #ffffff;
  --so-sidebar-muted: #8b9bb5;
  --so-sidebar-active-bg: rgba(255, 255, 255, 0.09);
  --so-sidebar-warn: #f5b25b;
  --so-sidebar-danger: #f97066;
  --so-tile-overview: #ffffff;
  --so-tile-overview-icon: #12213a;
  --so-tile-clients: #2f6fdb;
  --so-tile-clients-icon: #ffffff;
  --so-tile-knowledge: #5561d6;
  --so-tile-knowledge-icon: #ffffff;
  --so-tile-workshop: #8a5cd0;
  --so-tile-workshop-icon: #ffffff;
  --so-tile-tasks: #b04f8e;
  --so-tile-tasks-icon: #ffffff;
  --so-tile-settings: #6b7587;
  --so-tile-settings-icon: #ffffff;
  --so-tile-admin: #8a94a6;
  --so-tile-admin-icon: #12213a;
}

[data-theme='dark'] {
  color-scheme: dark;
  --bg: #0b1322;
  --surface: #121c2e;
  --fg: #eef1f6;
  --fg-2: #a9b4c6;
  --muted: #8391a7;
  --meta: #8391a7;
  --border: #22304a;
  --border-soft: #22304a;
  --accent: #eef1f6;
  --accent-on: #12213a;
  --accent-hover: #ffffff;
  --accent-active: #d5dbe5;
  --success: #2dd4bf;
  --warn: #f5b25b;
  --danger: #f97066;
  --elev-raised: 0 12px 32px rgba(0, 0, 0, 0.45);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px #eab308;
  --so-line-strong: #2f4063;
  --so-field-border: #62718c;
  --so-selected: #1b2a44;
  --so-primary: #eef1f6;
  --so-on-primary: #12213a;
  --so-todo-bg: #2b2716;
  --so-todo-ink: #eef1f6;
  --so-result: #2dd4bf;
  --so-result-graphic: #2dd4bf;
  --so-result-bg: #0f2f33;
  --so-warn: #f5b25b;
  --so-warn-bg: #33260f;
  --so-danger: #f97066;
  --so-danger-bg: #3a1a1c;
}
/* Sultivo OS tervezőrendszer: elemek (az egyetlen forrás: sultivo-os-dizajn/rendszer/components.css).
   Minden szín és méret a tokens.css változóiból jön; ebben a fájlban nincs beégetett szín.
   Osztálynév-előtag: so-. A sötét téma: <html data-theme="dark">. */

/* ---------- Alap ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
:where(html) {
  -webkit-text-size-adjust: 100%;
}
:where(body) {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}
:where(.so-app) svg {
  flex: none;
}
:where(svg[data-ikon]) {
  width: 20px;
  height: 20px;
  flex: none;
}
/* A rejtett elem rejtve marad: a rendszer osztályai display-t adnak (flex, grid), ami a böngésző [hidden] szabályát
   legyőzné (például a közös ablak fejléce a kitöltő és a színpad változatban, a feltételes gombok). */
[hidden] {
  display: none !important;
}
/* Az éjkék felületeken arany a fókuszgyűrű: az éjkék gyűrű ott nem látszana. */
.so-stage,
.so-hero,
.so-sidebar,
.so-tabbar,
.so-sheet {
  --focus-ring: 0 0 0 2px var(--so-stage), 0 0 0 4px var(--so-signal);
}
/* Ugrás a tartalomra: a lap első hivatkozása; billentyűzettel az első Tab a tartalomra visz. Csak fókuszban látszik, a
   képernyő bal felső sarkában, rögzítve (a lapot nem szélesíti). */
.so-skip {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 60;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  background: var(--so-primary);
  color: var(--so-on-primary);
  font: 600 15px/1.2 var(--font-body);
  text-decoration: none;
  transform: translateY(-200%);
}
.so-skip:focus {
  transform: none;
}
.so-skip:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ---------- Betű ---------- */
.so-wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.015em;
  line-height: 1;
  white-space: nowrap;
}
.so-wordmark__dot {
  color: var(--so-signal);
}
.so-wordmark__os {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  margin-left: 6px;
  vertical-align: 3px;
  color: var(--muted);
}
.so-sidebar .so-wordmark__os,
.so-stage .so-wordmark__os,
.so-tabbar .so-wordmark__os {
  color: var(--so-stage-ink-2);
}
.so-display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-4xl);
  line-height: 1.02;
  letter-spacing: var(--tracking-display);
  font-variation-settings: 'opsz' 72;
  margin: 0;
}
.so-h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-3xl);
  line-height: 1.08;
  letter-spacing: var(--tracking-display);
  font-variation-settings: 'opsz' 72;
  margin: 0;
}
.so-h2 {
  font-family: var(--font-body);
  font-weight: 620;
  font-size: var(--text-lg);
  line-height: 1.25;
  letter-spacing: -0.018em;
  margin: 0;
}
.so-h3 {
  font-family: var(--font-body);
  font-weight: 620;
  font-size: var(--text-xl);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0;
}
.so-label {
  font-family: var(--so-font-label);
  font-stretch: var(--so-label-stretch);
  font-size: var(--so-label-size);
  letter-spacing: var(--so-label-tracking);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted);
  margin: 0;
  /* A hosszú szó szótaghatáron, kötőjellel válik el (ehhez <html lang="hu"> kell); csak a legalább 10 betűs szó, két
     oldalán legalább 4-4 betűvel. A betűközi törés csak végső tartalék. */
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 10 4 4;
  overflow-wrap: break-word;
}
.so-label--narrow {
  font-stretch: 100%;
  letter-spacing: 0.12em;
}
.so-num {
  font-family: var(--font-body);
  font-weight: var(--so-num-weight);
  font-size: var(--so-num-size);
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.so-num small {
  font-size: 0.45em;
  margin-left: 3px;
  letter-spacing: 0;
}
.so-num--sm {
  font-size: var(--so-num-size-sm);
}
.so-num--stage {
  font-family: var(--so-font-label);
  font-stretch: 125%;
  font-weight: var(--so-num-stage-weight);
  font-size: var(--so-num-stage-size);
  letter-spacing: 0;
}
.so-text-2 {
  color: var(--fg-2);
}
.so-text-3 {
  color: var(--muted);
}

/* ---------- Keret ---------- */
.so-app {
  display: grid;
  grid-template-columns: var(--so-sidebar-width) minmax(0, 1fr);
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
}
.so-sidebar {
  background: var(--so-sidebar);
  color: var(--so-sidebar-ink);
  padding: 22px 14px 18px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.so-sidebar__brand {
  color: var(--so-sidebar-ink-active);
  padding: 0 10px;
}
.so-workspace {
  position: relative;
  margin: 20px 0 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--so-sidebar-line);
  border-radius: var(--radius-md);
  color: var(--so-sidebar-ink-active);
}
.so-workspace__logo {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--so-tile-overview);
  color: var(--so-tile-overview-icon);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
}
.so-workspace__name {
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}
.so-workspace__name b {
  display: block;
  font-size: 14px;
  font-weight: 600;
}
.so-workspace__name span {
  font-size: 12.5px;
  color: var(--so-sidebar-muted);
}
.so-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 22px;
}
.so-nav__label {
  padding: 0 10px;
  margin: 0 0 8px;
  color: var(--so-sidebar-muted);
}
.so-nav__item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 7px 10px;
  border-radius: 11px;
  color: var(--so-sidebar-ink);
  text-decoration: none;
  font-size: 15px;
  transition:
    background-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard);
}
.so-nav__item:hover {
  background: var(--so-sidebar-active-bg);
  color: var(--so-sidebar-ink-active);
}
.so-nav__item.is-active {
  background: var(--so-sidebar-active-bg);
  color: var(--so-sidebar-ink-active);
  font-weight: 600;
}
.so-nav__item.is-active::after {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--so-signal);
  margin-left: auto;
}
.so-nav__item:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--so-sidebar),
    0 0 0 4px var(--so-signal);
}
.so-nav__count {
  margin-left: auto;
  min-width: 22px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  background: var(--so-signal);
  color: var(--so-stage);
  border-radius: var(--radius-pill);
  padding: 0 7px;
}
.so-sidebar__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 10px 0;
  border-top: 1px solid var(--so-sidebar-line);
}
.so-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
  background: var(--so-sidebar-active-bg);
  color: var(--so-sidebar-ink-active);
  border: 1px solid var(--so-sidebar-line);
}
.so-sidebar__foot b {
  display: block;
  font-size: 14px;
  color: var(--so-sidebar-ink-active);
}
.so-sidebar__foot small {
  display: block;
  font-size: 12.5px;
  color: var(--so-sidebar-muted);
}
/* A fiók három gombja (Béla döntése, 2026-10-01): a név alatt, a név vonalában: nyelv, fiókvédelem, kilépés. Telefonon
   a „Több” lap alján ugyanez a blokk. */
.so-sidebar__foot {
  flex-wrap: wrap;
  row-gap: 8px;
}
.so-sidebar__foot > span:not(.so-avatar) {
  flex: 1 1 0;
  min-width: 0;
}
/* A 34 px-es gombok mellett legalább 8 px szabad hely (8. fejezet, érintési cél). */
.so-account {
  display: flex;
  gap: 8px;
  flex: 1 0 100%;
  padding-left: 40px;
}
.so-account .so-iconbtn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: var(--so-sidebar-muted);
}
.so-account .so-iconbtn:hover {
  background: var(--so-sidebar-active-bg);
  color: var(--so-sidebar-ink-active);
}
.so-account .so-iconbtn svg {
  width: 18px;
  height: 18px;
}
.so-sheet .so-sidebar__foot {
  margin-top: 18px;
}

.so-tile {
  width: 28px;
  height: 28px;
  border-radius: var(--so-radius-tile);
  display: grid;
  place-items: center;
  flex: none;
}
.so-tile svg {
  width: 17px;
  height: 17px;
}
.so-tile--lg {
  width: 66px;
  height: 66px;
  border-radius: var(--so-radius-tile-lg);
}
.so-tile--lg svg {
  width: 34px;
  height: 34px;
}
.so-tile--overview {
  background: var(--so-tile-overview);
  color: var(--so-tile-overview-icon);
}
.so-tile--clients {
  background: var(--so-tile-clients);
  color: var(--so-tile-clients-icon);
}
.so-tile--knowledge {
  background: var(--so-tile-knowledge);
  color: var(--so-tile-knowledge-icon);
}
.so-tile--workshop {
  background: var(--so-tile-workshop);
  color: var(--so-tile-workshop-icon);
}
.so-tile--tasks {
  background: var(--so-tile-tasks);
  color: var(--so-tile-tasks-icon);
}
.so-tile--settings {
  background: var(--so-tile-settings);
  color: var(--so-tile-settings-icon);
}
.so-tile--admin {
  background: var(--so-tile-admin);
  color: var(--so-tile-admin-icon);
}

.so-topbar {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 var(--container-gutter-desktop);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.so-topbar__brand {
  display: none;
}
.so-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(340px, 100%);
  height: 40px;
  padding: 0 8px 0 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--muted);
  font: 400 14.5px/1 var(--font-body);
  text-align: left;
  cursor: pointer;
}
.so-search:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.so-search svg {
  width: 18px;
  height: 18px;
}
.so-search kbd {
  margin-left: auto;
  font: 600 11.5px var(--font-body);
  color: var(--fg-2);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 2px 7px;
}
.so-iconbtns {
  display: flex;
  align-items: center;
  gap: 6px;
}
.so-iconbtn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  position: relative;
  color: var(--fg-2);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-standard);
}
.so-iconbtn svg {
  width: 20px;
  height: 20px;
}
/* A témaváltó két ikonja: a mostani témáé látszik (világosban a nap, sötétben a hold), mint ma. */
.so-icon-dark,
[data-theme='dark'] .so-icon-light {
  display: none;
}
[data-theme='dark'] .so-icon-dark {
  display: block;
}
.so-iconbtn:hover {
  background: var(--so-selected);
  color: var(--fg);
}
.so-iconbtn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
/* Választó ikonként (a nyelv): az ikon fölött átlátszó natív <select>, mint ma; a fókuszgyűrű a gombon látszik. */
.so-iconbtn > select,
.so-workspace > select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
  font-size: 16px;
}
.so-iconbtn:has(> select:focus-visible),
.so-workspace:has(> select:focus-visible) {
  box-shadow: var(--focus-ring);
}
/* A nyelvválasztó: az ikon mellett a felület nyelvének kétbetűs kódja (HU, EN), keretes pirulában, mindenhol ugyanúgy
   (rendszeroldal, oldalsáv, „Több” lap; Béla döntése, 2026-10-03). A szélessége nyelvtől független. */
.so-iconbtn.so-iconbtn--lang {
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}
.so-iconbtn__code {
  font: 600 13.5px/1 var(--font-body);
  letter-spacing: 0.02em;
}
.so-sidebar .so-iconbtn--lang,
.so-sheet .so-iconbtn--lang {
  border-color: var(--so-sidebar-line);
}
.so-iconbtn.has-dot::after {
  content: '';
  position: absolute;
  top: 9px;
  right: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--so-signal);
  border: 2px solid var(--bg);
}
.so-main {
  padding: 34px var(--container-gutter-desktop) 56px;
  max-width: calc(var(--container-max) + 2 * var(--container-gutter-desktop));
}
.so-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 12px;
}
.so-section-head > .so-link {
  white-space: nowrap;
  flex: none;
}
.so-link {
  color: var(--fg);
  font-weight: 500;
  font-size: 14.5px;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--so-line-strong);
}
.so-link:hover {
  text-decoration-color: var(--fg);
}
.so-link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 4px;
}
/* Gombként is: a menüpont, az aloldal-fül, a választó tétele, a hivatkozás és a színpad szöveges hivatkozása <button>
   is lehet (a szoftverben egy oldalnak nincs saját címe, ezért ezek gombok). A gomb saját kinézete kikapcsol, a
   hivatkozás kinézete marad; csak azt állítjuk, amit az elem maga nem ad meg. */
button.so-nav__item,
button.so-picker__item {
  width: 100%;
  margin: 0;
  border: 0;
  background: none;
  font-family: inherit;
  line-height: inherit;
  text-align: left;
  cursor: pointer;
}
button.so-subnav__tab {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  cursor: pointer;
}
button.so-link,
button.so-stage__link {
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-family: inherit;
  line-height: inherit;
  text-align: left;
  cursor: pointer;
}

/* ---------- Gombok ---------- */
.so-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font: 500 15.5px/1 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard);
}
.so-btn svg {
  width: 18px;
  height: 18px;
}
.so-btn--primary {
  background: var(--so-primary);
  color: var(--so-on-primary);
}
.so-btn--primary:hover {
  background: var(--accent-hover);
}
.so-btn--primary:active {
  background: var(--accent-active);
}
.so-btn--secondary {
  background: var(--surface);
  color: var(--fg);
  border-color: var(--so-line-strong);
}
.so-btn--secondary:hover {
  border-color: var(--so-field-border);
}
.so-btn--ghost {
  background: transparent;
  color: var(--fg);
}
.so-btn--ghost:hover {
  background: var(--so-selected);
}
.so-btn--danger {
  background: var(--surface);
  color: var(--so-danger);
  border-color: var(--so-danger);
}
.so-btn--danger:hover {
  background: var(--so-danger-bg);
}
.so-btn--sm {
  height: 34px;
  padding: 0 14px;
  font-size: 14px;
}
.so-btn--lg {
  height: 52px;
  padding: 0 26px;
  font-size: 16px;
}
.so-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.so-btn:disabled,
.so-btn[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
}
.so-stage .so-btn--primary,
.so-hero .so-btn--primary {
  background: var(--so-stage-ink);
  color: var(--so-stage);
}
.so-stage .so-btn--primary:hover,
.so-hero .so-btn--primary:hover {
  background: var(--so-sidebar-ink-active);
}

/* ---------- Mezők ---------- */
.so-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 18px;
}
.so-field__label {
  font-weight: 600;
  font-size: 15px;
  color: var(--fg);
}
.so-field__req {
  font-weight: 400;
  font-size: 13px;
  color: var(--muted);
  margin-left: 6px;
}
.so-input,
.so-textarea,
.so-select {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--so-field-border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--fg);
  font: 400 16px/1.4 var(--font-body);
  transition:
    border-color var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard);
}
.so-textarea {
  min-height: 132px;
  resize: vertical;
  line-height: var(--leading-body);
}
.so-input::placeholder,
.so-textarea::placeholder {
  color: var(--muted);
}
.so-input:focus-visible,
.so-textarea:focus-visible,
.so-select:focus-visible {
  outline: none;
  border-color: var(--fg);
  box-shadow: var(--focus-ring);
}
.so-select {
  appearance: none;
  padding-right: 42px;
}
.so-select-wrap {
  position: relative;
  display: block;
}
.so-select-wrap svg {
  position: absolute;
  right: 14px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--fg-2);
}
.so-field__help {
  font-size: 13.5px;
  color: var(--muted);
  margin: 0;
}
.so-field__error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 13.5px;
  color: var(--so-danger);
  margin: 0;
}
.so-field__error svg {
  width: 15px;
  height: 15px;
  flex: none;
  margin-top: 3px;
}
.so-field.is-error .so-input,
.so-field.is-error .so-textarea,
.so-field.is-error .so-select {
  border-color: var(--so-danger);
}
.so-check,
.so-switch {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: var(--fg);
  cursor: pointer;
}
.so-check input {
  appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--so-field-border);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
}
.so-check input:checked {
  background: var(--so-primary);
  border-color: var(--so-primary);
}
.so-check input:checked::after {
  content: '';
  width: 5px;
  height: 10px;
  border: solid var(--so-on-primary);
  border-width: 0 2px 2px 0;
  transform: translate(0, -1px) rotate(45deg);
}
.so-check input:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.so-switch input {
  appearance: none;
  flex: none;
  position: relative;
  width: 36px;
  height: 20px;
  margin: 1px 0 0;
  border-radius: var(--radius-pill);
  background: var(--so-field-border);
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-standard);
}
.so-switch input::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface);
  transition: transform var(--motion-fast) var(--ease-standard);
}
.so-switch input:checked {
  background: var(--so-primary);
}
.so-switch input:checked::after {
  transform: translateX(16px);
  background: var(--so-on-primary);
}
.so-switch input:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ---------- Parancsmező ---------- */
.so-command {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 66px;
  padding: 9px 9px 9px 22px;
  background: var(--surface);
  border: 1px solid var(--fg);
  border-radius: var(--so-radius-command);
}
.so-command:focus-within {
  box-shadow: var(--focus-ring);
}
.so-command__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--fg);
  font: 400 18px/1.4 var(--font-body);
}
.so-command__input::placeholder {
  color: var(--muted);
}
.so-command__go {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  display: grid;
  place-items: center;
  flex: none;
  cursor: pointer;
  background: var(--so-primary);
  color: var(--so-on-primary);
  transition: background-color var(--motion-fast) var(--ease-standard);
}
.so-command__go svg {
  width: 20px;
  height: 20px;
}
.so-command__go:hover {
  background: var(--accent-hover);
}
.so-command__go:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.so-examples {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0 0;
}
.so-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 5px 14px;
  border: 1px solid var(--so-line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--fg);
  font: 400 14px/1.3 var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease-standard);
}
.so-chip:hover {
  border-color: var(--so-field-border);
}
.so-chip:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ---------- Eredmény ---------- */
.so-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.so-metrics--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.so-metric {
  padding: 20px 22px 18px;
  min-width: 0;
  border-left: 1px solid var(--border);
  container-type: inline-size;
}
.so-metric:first-child {
  border-left: 0;
}
/* A szám a cellájához méreteződik: „689 340 Ft” minden szélességen kifér. 7-8 számjegyhez so-num--hosszu. */
.so-metric .so-num {
  display: block;
  margin: 0 0 10px;
  font-size: min(var(--so-num-size), 22.5cqi);
}
.so-metric .so-num--hosszu {
  font-size: min(var(--so-num-size), 17cqi);
}
.so-metric__delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--so-result);
  margin: 0 0 10px;
}
.so-metric__delta svg {
  width: 15px;
  height: 15px;
}
.so-metric .so-label {
  display: block;
}
/* Kattintható mutató (szűrő): ugyanaz a csempe gombként, a tartalma fentről indul; a kijelölt alján a fő gomb színű
   vonal a halvány kijelölő háttéren (a jel 3:1 fölött). A csempék közti hajszálvonal marad; a sor levágja a sarkot,
   ezért a fókuszgyűrű befelé áll. */
.so-metrics:has(> button.so-metric) {
  overflow: hidden;
}
button.so-metric {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  margin: 0;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
button.so-metric:hover {
  background: var(--so-selected);
}
button.so-metric[aria-pressed='true'] {
  background: var(--so-selected);
  box-shadow: inset 0 -2px 0 var(--so-primary);
}
button.so-metric:focus-visible {
  outline: none;
  box-shadow: inset var(--focus-ring);
}
button.so-metric[aria-pressed='true']:focus-visible {
  box-shadow:
    inset 0 -2px 0 var(--so-primary),
    inset var(--focus-ring);
}
.so-sparkline {
  display: block;
  width: 100%;
  height: 30px;
  margin: 12px 0 0;
  color: var(--so-result-graphic);
}

/* ---------- Kártyák és listák ---------- */
.so-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
}
.so-next {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
}
.so-next__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0 0 10px;
}
.so-next__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--so-signal);
  flex: none;
}
.so-next__time {
  margin-left: auto;
  font-size: 13.5px;
  color: var(--muted);
  white-space: nowrap;
}
.so-next p {
  color: var(--fg-2);
  margin: 6px 0 18px;
  max-width: 62ch;
}
.so-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.so-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 6px 0;
  margin: 0;
  list-style: none;
}
/* A jobb oldali oszlop (állapot, halk adat) legfeljebb a sor 40%-a, így hosszú állapot mellett is marad hely a címnek. */
.so-list__row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) fit-content(40%);
  gap: 14px;
  align-items: center;
  padding: 14px 22px;
}
.so-list__row + .so-list__row {
  border-top: 1px solid var(--border);
}
/* Keskeny listában (oldalhasáb, kettéosztott nézet) az utolsó oszlop (állapot, sáv) a cím alá kerül, ahogy telefonon. */
.so-list {
  container-type: inline-size;
}
@container (max-width: 400px) {
  .so-list__row {
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: 10px;
  }
  .so-list__row > :last-child {
    grid-column: 2;
    justify-self: start;
    text-align: left;
  }
}
/* HB-F1-03, HB-F1-29: ikon nélküli sor (szöveg és állapot): két oszlop, a szöveg a teljes szélességet kapja. */
.so-list__row--plain {
  grid-template-columns: minmax(0, 1fr) fit-content(40%);
}
@container (max-width: 400px) {
  .so-list__row--plain {
    grid-template-columns: minmax(0, 1fr);
  }
  .so-list__row--plain > :last-child {
    grid-column: 1;
  }
}
.so-list__icon {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--bg);
  display: grid;
  place-items: center;
  color: var(--fg-2);
  font: 600 13px/1 var(--font-body);
}
.so-list__icon svg {
  width: 19px;
  height: 19px;
}
/* A hosszú adat (e-mail-cím, webcím, kód) bárhol törhet: a lista, a táblázat és az ablak címe sosem nyomja ki az oldalt. */
.so-list__title {
  display: block;
  font-weight: 600;
  font-size: 15.5px;
  overflow-wrap: anywhere;
}
.so-list__sub {
  display: block;
  font-size: 13.5px;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.so-list__meta {
  text-align: right;
  font-size: 13.5px;
  color: var(--fg-2);
  min-width: 120px;
  overflow-wrap: anywhere;
}
/* Megnyitható sor: a cím a hivatkozás, és a sor egészére kiterjed; a sorban lévő gomb fölötte marad. */
.so-list__row:has(.so-list__link) {
  position: relative;
}
.so-list__link {
  color: inherit;
  text-decoration: none;
}
button.so-list__link {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  line-height: inherit;
  text-align: left;
  cursor: pointer;
}
.so-list__link::after {
  content: '';
  position: absolute;
  inset: 0;
}
.so-list__link:focus-visible {
  outline: none;
}
.so-list__row:has(.so-list__link):hover {
  background: var(--so-selected);
}
.so-list__row:has(.so-list__link:focus-visible) {
  box-shadow: inset var(--focus-ring);
}
.so-list__row:has(.so-list__link) :is(button, a:not(.so-list__link)) {
  position: relative;
  z-index: 1;
}

/* ---------- Állapot ---------- */
.so-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 3px 11px 3px 9px;
  border-radius: var(--radius-pill);
  font: 600 13px/1.2 var(--font-body);
}
.so-status svg {
  width: 14px;
  height: 14px;
}
.so-status--live {
  background: var(--so-result-bg);
  color: var(--so-result);
}
.so-status--todo {
  background: var(--so-todo-bg);
  color: var(--so-todo-ink);
}
.so-status--todo::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--so-signal);
  flex: none;
}
.so-status--warn {
  background: var(--so-warn-bg);
  color: var(--so-warn);
}
.so-status--error {
  background: var(--so-danger-bg);
  color: var(--so-danger);
}
/* Semleges (piszkozat, sorban áll, várakozik, szünetel, nem indult): szürke keretes pirula, jel nélkül; a futó ugyanez
   forgó jellel (so-spinner). Az alak mondja meg, hogy állapot: a címke kis sarkú, az állapot pirula. */
.so-status--neutral,
.so-status--running {
  padding: 2px 10px;
  background: transparent;
  color: var(--fg-2);
  border: 1px solid var(--so-line-strong);
}
.so-status--running {
  padding-left: 8px;
}
.so-status .so-spinner {
  width: 12px;
  height: 12px;
}
/* Címke: kategória (Levél, Kampány, Űrlap); szürke keret, kis sarok, a cím alatt balra. */
.so-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  border: 1px solid var(--so-line-strong);
  border-radius: 6px;
  background: transparent;
  color: var(--fg-2);
  font: 600 12.5px/1.4 var(--font-body);
}
.so-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 0;
}
.so-banner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 14.5px;
  line-height: 1.5;
}
.so-banner svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 2px;
}
.so-banner--live {
  background: var(--so-result-bg);
  color: var(--so-result);
}
.so-banner--todo {
  background: var(--so-todo-bg);
  color: var(--so-todo-ink);
}
.so-banner--warn {
  background: var(--so-warn-bg);
  color: var(--so-warn);
}
.so-banner--error {
  background: var(--so-danger-bg);
  color: var(--so-danger);
}
/* Tájékoztatás: halvány éjkék, csík nélkül (11A); a jele info-circle. */
.so-banner--info {
  background: var(--so-selected);
  color: var(--fg);
}
.so-banner--info svg {
  color: var(--fg-2);
}
/* Haladásjelző: natív <progress value max>, így nem kell hozzá style="" (a Sultivo OS CSP-je a style attribútumot tiltja). */
.so-progress {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 5px;
  border: 0;
  margin: 0;
  background: var(--border);
  border-radius: var(--radius-pill);
  overflow: hidden;
  color: var(--so-signal);
}
.so-progress::-webkit-progress-bar {
  background: var(--border);
  border-radius: var(--radius-pill);
}
.so-progress::-webkit-progress-value {
  background: var(--so-signal);
  border-radius: var(--radius-pill);
}
.so-progress::-moz-progress-bar {
  background: var(--so-signal);
  border-radius: var(--radius-pill);
}
.so-list__meta .so-progress {
  margin-top: 6px;
}
/* Semleges sáv (például a havi keret): nem jelzés, ezért nem arany. */
.so-progress--neutral {
  color: var(--so-primary);
}
.so-progress--neutral::-webkit-progress-value {
  background: var(--so-primary);
}
.so-progress--neutral::-moz-progress-bar {
  background: var(--so-primary);
}

/* ---------- Kilépő kép ---------- */
.so-hero {
  position: relative;
  margin: 0 0 18px;
  container-type: inline-size;
  overflow-x: clip;
}
/* Legalább 250 px magas, de a hosszabb szöveggel (kettős keresztnév, hosszú cégnév) nő, nem vág le belőle. */
.so-hero__clip {
  position: relative;
  min-height: 250px;
  margin-top: 50px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--so-stage);
  display: flex;
  align-items: center;
}
.so-hero__photo,
.so-hero__cutout {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 312px;
  width: auto;
  max-width: none;
}
.so-hero__photo {
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 42%);
  mask-image: linear-gradient(to right, transparent 0, black 42%);
}
.so-hero__cutout {
  pointer-events: none;
}
.so-hero__text {
  position: relative;
  max-width: calc(54% + 36px);
  padding: 24px 0 24px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--so-stage-ink);
}
.so-hero__text .so-label {
  color: var(--so-stage-label);
}
.so-hero__text .so-display {
  color: var(--so-stage-ink);
  margin: 8px 0;
}
.so-hero__lead {
  margin: 0;
  color: var(--so-stage-ink-2);
  font-size: 16.5px;
}
/* Ügyfél-jelvény: kinek dolgozunk éppen (kilépő kép, színpad). Hosszú névnél három ponttal rövidül. */
.so-client {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  min-width: 0;
  font: 400 14.5px/1.2 var(--font-body);
  color: var(--so-stage-ink);
  background: var(--so-sidebar-active-bg);
  border: 1px solid var(--so-stage-line);
  border-radius: var(--radius-pill);
  padding: 5px 14px 5px 5px;
}
.so-client__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.so-client svg {
  width: 16px;
  height: 16px;
  flex: none;
}
button.so-client {
  cursor: pointer;
}
.so-client:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.so-hero__text .so-client {
  margin-top: 18px;
  align-self: flex-start;
}
.so-monogram {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--so-stage-ink);
  color: var(--so-stage);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
}
.so-hero--text .so-hero__clip {
  display: block;
  min-height: 0;
  margin-top: 0;
}
.so-hero--text .so-hero__photo,
.so-hero--text .so-hero__cutout {
  display: none;
}
.so-hero--text .so-hero__text {
  position: static;
  max-width: none;
  padding: 32px 36px;
}

/* Keskeny helyen (telefon, tablet oldalsávval) a fotó a szöveg fölé kerül, a szereplő feje kilóg a kártya tetején. */
@container (max-width: 720px) {
  .so-hero__clip {
    display: block;
    min-height: 0;
    margin-top: 64px;
    padding-top: 186px;
  }
  .so-hero__photo,
  .so-hero__cutout {
    bottom: auto;
    right: 50%;
    height: 242px;
    transform: translateX(50%);
  }
  .so-hero__photo {
    top: -56px;
    -webkit-mask-image:
      linear-gradient(to bottom, black 72%, transparent),
      linear-gradient(to right, transparent, black 14%, black 86%, transparent);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to bottom, black 72%, transparent),
      linear-gradient(to right, transparent, black 14%, black 86%, transparent);
    mask-composite: intersect;
  }
  .so-hero__cutout {
    top: 8px;
  }
  .so-hero__text {
    position: static;
    max-width: none;
    padding: 4px 20px 22px;
  }
  .so-hero__text .so-display {
    font-size: 36px;
  }
  .so-hero--text .so-hero__clip {
    margin-top: 0;
    padding-top: 0;
  }
  .so-hero--text .so-hero__text {
    padding: 24px 20px;
  }
}

/* ---------- Színpad ---------- */
.so-stage {
  background: var(--so-stage);
  color: var(--so-stage-ink);
}
.so-stage__kicker {
  color: var(--so-stage-label);
  display: flex;
  gap: 14px;
  align-items: center;
}
.so-stage__kicker i {
  font-style: normal;
  color: var(--so-stage-ink-2);
}
.so-stage__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 4.8vw, 68px);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variation-settings: 'opsz' 72;
  margin: 18px 0;
  color: var(--so-stage-ink);
}
.so-stage__lead {
  font-size: 18px;
  color: var(--so-stage-ink-2);
  margin: 0 0 34px;
  max-width: 34em;
}
.so-stage__metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--so-stage-line);
  margin: 0 0 38px;
}
.so-stage__metrics > * {
  padding: 18px 12px 0 0;
  animation: so-fel var(--motion-slow) var(--ease-standard) both;
}
.so-stage__metrics > *:nth-child(1) {
  animation-delay: 150ms;
}
.so-stage__metrics > *:nth-child(2) {
  animation-delay: 300ms;
}
.so-stage__metrics > *:nth-child(3) {
  animation-delay: 450ms;
}
.so-stage__metrics > *:nth-child(4) {
  animation-delay: 600ms;
}
.so-stage__metrics .so-num--stage {
  display: block;
  line-height: 1;
  margin: 0 0 12px;
}
.so-stage__metrics .so-label {
  color: var(--so-stage-ink-2);
}
.so-stage__frame {
  position: relative;
  height: 470px;
  margin-top: 90px;
}
.so-stage__clip {
  position: absolute;
  inset: 0;
  border-radius: 26px;
  overflow: hidden;
  background: var(--so-sidebar-line);
}
.so-stage__photo,
.so-stage__cutout {
  position: absolute;
  left: 50%;
  bottom: 0;
  height: 560px;
  width: auto;
  max-width: none;
  transform: translateX(-58%);
}
.so-stage__cutout {
  pointer-events: none;
}
.so-stage__float {
  position: absolute;
  left: -34px;
  bottom: 34px;
  width: 300px;
  background: var(--so-stage-ink);
  color: var(--so-stage);
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: var(--so-stage-shadow);
}
.so-stage__float .so-label {
  color: var(--so-stage);
  display: flex;
  align-items: center;
  gap: 8px;
}
.so-stage__float .so-label::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--so-signal);
}
.so-stage__float p {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.45;
}
/* A színpad mint teljes képernyő (onboarding vége): fejléc, kéthasábos jelenet, fotó nélküli tartalék. */
.so-stage--page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
}
.so-stage__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 28px 64px;
}
.so-stage__head-end {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.so-stage__close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  cursor: pointer;
  border: 1px solid var(--so-stage-line);
  background: transparent;
  color: var(--so-stage-ink-2);
  transition:
    color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard);
}
.so-stage__close:hover {
  color: var(--so-stage-ink);
  border-color: var(--so-stage-ink-2);
}
button.so-stage__close {
  padding: 0;
}
.so-stage__close:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.so-stage__body {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  align-content: center;
  padding: 20px 64px 56px;
}
.so-stage__actions {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}
.so-stage__link {
  color: var(--so-sidebar-ink);
  font-size: 15.5px;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--so-stage-line);
}
.so-stage__link:hover {
  color: var(--so-stage-ink);
  text-decoration-color: var(--so-stage-ink-2);
}
.so-stage__link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 4px;
}
.so-stage__cards {
  display: none;
  flex-direction: column;
  gap: 14px;
}
.so-stage--text .so-stage__frame {
  display: none;
}
.so-stage--text .so-stage__cards {
  display: flex;
}
.so-stage__card {
  background: var(--so-sidebar-active-bg);
  border: 1px solid var(--so-stage-line);
  border-radius: 20px;
  padding: 20px 22px;
}
.so-stage__card .so-label {
  color: var(--so-stage-ink-2);
}
.so-stage__card p {
  margin: 8px 0 0;
  font-size: 17px;
  line-height: 1.45;
  color: var(--so-stage-ink);
}
.so-stage__tags {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.so-stage__tags li {
  border: 1px solid var(--so-stage-line);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  font-size: 14px;
  color: var(--so-sidebar-ink);
}
@keyframes so-fel {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Várakozás ---------- */
.so-working {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
}
.so-working__title {
  font-size: 17px;
  font-weight: 620;
  letter-spacing: -0.015em;
  margin: 6px 0 12px;
}
.so-working__note {
  font-size: 14px;
  color: var(--fg-2);
  margin: 12px 0 0;
}
.so-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.so-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 15px;
}
.so-steps li svg {
  width: 16px;
  height: 16px;
}
.so-steps li.is-done {
  color: var(--fg);
}
.so-steps li.is-done svg {
  color: var(--so-result);
}
.so-steps li.is-now {
  color: var(--fg);
  font-weight: 600;
}
.so-steps__meta {
  margin-left: auto;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}
.so-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--border);
  border-top-color: var(--so-signal);
  animation: so-forog 1s linear infinite;
  flex: none;
}
@keyframes so-forog {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- Üres és hibaállapot ---------- */
.so-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 26px 24px 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.so-empty__art {
  width: 180px;
  height: 180px;
  object-fit: contain;
  margin: -6px 0 2px;
}
.so-empty__art--dark {
  display: none;
}
[data-theme='dark'] .so-empty__art--light {
  display: none;
}
[data-theme='dark'] .so-empty__art--dark {
  display: block;
}
.so-empty__title {
  font-size: var(--text-lg);
  font-weight: 620;
  letter-spacing: -0.015em;
  margin: 10px 0 6px;
}
.so-empty__text {
  color: var(--fg-2);
  max-width: 44ch;
  margin: 0 0 16px;
}
.so-empty--error .so-empty__title {
  color: var(--fg);
}

/* ---------- Rétegek ---------- */
/* A közös felugró ablak: minden rekord, űrlap és megerősítés ebben nyílik (<dialog>, showModal). 780 px; legalább
   4 oszlopos táblázatnál, előnézetnél és összevetésnél 1080 (so-dialog--wide, vagy magától). A cím so-h3, a belső
   térköz 22×24, a gombsor (so-footer) nem rögzített. Telefonon teljes képernyő, a cím és a bezárás fent marad.
   A felmérés ablaka (so-dialog--fill) a tartalom helyét tölti ki a keret mellett, pontosan a jóváhagyott kép szerint. */
.so-dialog {
  width: min(780px, 100%);
  max-height: calc(100dvh - 48px);
  padding: 22px 24px;
  overflow-y: auto;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-raised);
}
.so-dialog::backdrop {
  background: color-mix(in srgb, var(--so-stage) 55%, transparent);
}
.so-dialog--wide,
.so-dialog:has(.so-table th:nth-child(4), .so-preview, .so-compare) {
  width: min(1080px, 100%);
}
.so-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
}
.so-dialog__head > :first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}
.so-dialog .so-footer {
  margin-top: 22px;
}
.so-dialog--fill:modal {
  position: fixed;
  inset: 64px 0 0 var(--so-sidebar-width);
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 34px var(--container-gutter-desktop) 56px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--bg);
}
.so-dialog--fill::backdrop {
  background: transparent;
}
.so-dialog--fill > * {
  max-width: var(--container-max);
}
/* Az „Első lépések” vége: a közös ablak teljes képernyős, éjkék színpadként (benne a so-stage so-stage--page tartalma). */
.so-dialog--stage:modal {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--so-stage);
  color: var(--so-stage-ink);
}
.so-toast {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--so-primary);
  color: var(--so-on-primary);
  border-radius: var(--radius-pill);
  padding: 10px 18px;
  font-size: 14.5px;
  box-shadow: var(--elev-raised);
}
.so-toast svg {
  width: 18px;
  height: 18px;
}
/* Felugró értesítés: alul középen, 24 px-re a széltől; telefonon a fülsáv fölött. Nyitott ablaknál a visszajelzés az
   ablakon belül, a gombsor fölött jelenik meg (so-banner), mert az értesítés az ablak alá kerülne. */
.so-toasts {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 24px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.so-toasts > .so-toast {
  pointer-events: auto;
}

/* ---------- Űrlap (második kör) ---------- */
/* Az űrlap egy hasábban áll, legfeljebb 720 px széles; a mezők egymás alatt (so-field), a szakaszok hajszálvonallal. */
.so-form {
  max-width: 720px;
}
.so-form__section {
  margin: 0 0 28px;
}
.so-form__section + .so-form__section {
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.so-fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 18px 16px;
  margin: 0 0 18px;
  min-width: 0;
}
.so-fieldset__legend {
  padding: 0 6px;
  margin-left: -6px;
  font-weight: 600;
  font-size: 15px;
  color: var(--fg);
}
.so-fieldset .so-radio,
.so-fieldset .so-check {
  display: flex;
  margin: 10px 0 0;
}
/* Két mező egymás mellett (például ugyanaz a szöveg magyarul és angolul); 600 px alatt egymás alatt. */
.so-field-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}
.so-radio {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: var(--fg);
  cursor: pointer;
}
.so-radio input {
  appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--so-field-border);
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
}
.so-radio input:checked {
  border-color: var(--so-primary);
}
.so-radio input:checked::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--so-primary);
}
.so-radio input:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
/* Skála (például 1-10): számgombok egy sorban, a két végén a felirat; keskeny helyen öt oszlop (Béla döntése,
   2026-10-03). A rádió a szám mögött áll, átlátszóan; a kijelölt szám éjkék, mint a fő gomb. */
.so-scale {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  container-type: inline-size;
}
.so-scale__options {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 8px;
  margin: 14px 0 0;
}
.so-scale__option {
  position: relative;
  display: block;
}
.so-scale__option > input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.so-scale__option > span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid var(--so-field-border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--fg);
  font: 600 16px/1 var(--font-body);
  font-variant-numeric: tabular-nums;
}
.so-scale__option > input:hover + span {
  border-color: var(--fg);
}
.so-scale__option > input:checked + span {
  background: var(--so-primary);
  border-color: var(--so-primary);
  color: var(--so-on-primary);
}
.so-scale__option > input:focus-visible + span {
  box-shadow: var(--focus-ring);
}
.so-scale__option > input:disabled {
  cursor: not-allowed;
}
.so-scale__option > input:disabled + span {
  opacity: 0.45;
}
.so-scale__ends {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 0;
  font-size: 13.5px;
  color: var(--fg-2);
}
@container (max-width: 520px) {
  .so-scale__options {
    grid-auto-flow: row;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
/* Választókártya: nagyobb választási felület címmel és egy mondattal (rádió vagy jelölőnégyzet); a kiválasztott éjkék keretű. */
.so-choice {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 2px 12px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid var(--so-line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: pointer;
}
.so-choice input {
  appearance: none;
  grid-row: span 2;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--so-field-border);
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
}
.so-choice input[type='checkbox'] {
  border-radius: 6px;
}
.so-choice:has(input:checked) {
  border-color: var(--so-primary);
  background: var(--so-selected);
}
.so-choice input:checked {
  border-color: var(--so-primary);
  background: var(--so-primary);
}
.so-choice input:checked::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--so-on-primary);
}
.so-choice input[type='checkbox']:checked::after {
  width: 5px;
  height: 10px;
  border-radius: 0;
  background: none;
  border: solid var(--so-on-primary);
  border-width: 0 2px 2px 0;
  transform: translate(0, -1px) rotate(45deg);
}
.so-choice:focus-within {
  box-shadow: var(--focus-ring);
}
.so-choice__title {
  font-weight: 600;
  font-size: 15.5px;
  color: var(--fg);
}
.so-choice__text {
  grid-column: 2;
  font-size: 14px;
  color: var(--fg-2);
}
/* Fájlmező: a böngésző saját fájlválasztója, a rendszer másodlagos gombjával. */
.so-file {
  display: block;
  width: 100%;
  font: 400 15px/1.4 var(--font-body);
  color: var(--fg-2);
}
.so-file::file-selector-button {
  margin-right: 12px;
  height: 40px;
  padding: 0 18px;
  border: 1px solid var(--so-line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--fg);
  font: 500 15px/1 var(--font-body);
  cursor: pointer;
}
.so-file:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-pill);
}
/* Egyszeri kód: egy széles mező nagy, ritkított számjegyekkel. */
.so-input--otp {
  max-width: 260px;
  text-align: center;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.3em;
  font-variant-numeric: tabular-nums;
}
/* Ismétlődő sor (például egy űrlap mezői, egy sorozat levelei): a sor végén fel, le és törlés ikongomb. */
.so-repeat {
  display: grid;
  gap: 10px;
}
.so-repeat__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.so-repeat__row .so-field {
  margin: 0;
}
.so-repeat__tools {
  display: flex;
  gap: 2px;
  margin-top: 24px;
}
.so-repeat__up svg {
  transform: rotate(180deg);
}
/* Karakterkorlát a mező alatt, jobbra; a határ közelében borostyán, fölötte piros. */
.so-field__count {
  align-self: flex-end;
  margin: -2px 0 0;
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.so-field__count.is-near {
  color: var(--so-warn);
}
.so-field__count.is-over {
  color: var(--so-danger);
  font-weight: 600;
}
/* Hangbevitel: mikrofongomb a szöveges mező alatt; felvételnél arany pont és idő, leíráskor várakozás, utána átnézés. */
.so-voice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 8px 0 0;
}
.so-voice__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--so-line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--fg);
  font: 500 14px/1 var(--font-body);
  cursor: pointer;
}
.so-voice__btn svg {
  width: 16px;
  height: 16px;
}
.so-voice__btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.so-voice__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.so-voice__btn[aria-busy='true']:disabled {
  opacity: 1;
  cursor: progress;
}
.so-voice.is-recording .so-voice__btn {
  border-color: var(--so-field-border);
}
.so-voice.is-recording .so-voice__btn::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--so-signal);
}
.so-voice.is-recording .so-voice__status {
  color: var(--fg);
}
.so-voice__status {
  font-size: 13.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.so-voice__review {
  flex-basis: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
}
.so-voice__review p {
  margin: 0 0 12px;
}
.so-voice__uncertain {
  background: var(--so-todo-bg);
  color: var(--so-todo-ink);
  border-radius: 4px;
  padding: 0 2px;
}
/* Ár a műveleten: a gomb feliratában, a művelet után, halkabban („Generálás indítása · 10 kredit”). */
.so-btn__meta {
  font-weight: 400;
  opacity: 0.8;
}

/* ---------- Visszajelzés (második kör) ---------- */
/* Feltételkapu: ha egy művelethez valami hiányzik, a gomb letiltott, alatta a hiányzó lépések, mindegyik pótló gombbal. */
.so-gate {
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.so-gate__list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.so-gate__item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-height: 34px;
  font-size: 15px;
  color: var(--fg);
}
.so-gate__item::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--so-signal);
}
.so-gate__item.is-done {
  color: var(--muted);
}
.so-gate__item.is-done::before {
  background: var(--so-result-graphic);
}
.so-gate__fix {
  margin-left: auto;
}
/* A sáv művelete (például „Újrapróbálom”): a sáv jobb szélén; 600 px alatt a szöveg alatt. */
.so-banner__action {
  margin-left: auto;
  flex: none;
}
/* Töltés: álló vázsorok a lista helyén; nem mozognak, hogy ne vonják el a figyelmet. */
.so-skeleton {
  display: grid;
  gap: 12px;
  padding: 4px 0;
}
.so-skeleton__row {
  height: 14px;
  border-radius: var(--radius-pill);
  background: var(--border);
}
.so-skeleton__row:nth-child(3n + 2) {
  width: 82%;
}
.so-skeleton__row:nth-child(3n) {
  width: 64%;
}

/* ---------- Táblázat (7A, 8A) ---------- */
/* 48 px-es sor, 15 px-es szöveg, a fejléc Inter 13/600 mondat eleji nagybetűvel. A listatáblázat sorai kártyák, ha a
   keret keskenyebb, mint amit az oszlopai kérnek: 4 oszlopig 600, 5 vagy több oszlopnál 840 px alatt (telefonon mindig;
   a cella data-label-je a mezőnév; 600 és 840 px között két kártya áll egymás mellett). Az összevető táblázat (so-table--compare: jogosultságok, árak) táblázat marad, és a
   keretén belül oldalra görgethető. A keret (so-table-frame) mér; a listatáblázatnál a fehér keret maga a táblázat. */
.so-table-frame {
  container-type: inline-size;
  overflow-x: auto;
}
.so-table-frame:has(> .so-table--compare) {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 4px 10px;
}
/* Kijelölő táblázat (például árcella egy behozott táblából): saját, magasságban korlátos görgetési terület, ragadó
   fejléccel, hogy a sok sor ne nyomja ki az oldalt. */
.so-table-frame--pick {
  max-height: min(45vh, 24rem);
  overflow-y: auto;
}
.so-table-frame--pick thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
}
.so-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.so-table:not(.so-table--compare) {
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 4px 10px;
}
.so-table th {
  font: 600 13px/1.2 var(--font-body);
  color: var(--fg-2);
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
/* A sor az elválasztó vonallal együtt 48 px akkor is, ha a cellában kis gomb vagy állapot áll (7A); a szám táblázatos
   számjegyekkel, balra. */
.so-table td {
  height: 48px;
  padding: 6px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.so-table tr:last-child td {
  border-bottom-color: transparent;
}
.so-table--compare :is(th, td):not(:first-child) {
  text-align: center;
}
.so-table--compare th:first-child,
.so-table--compare td:first-child {
  font-weight: 600;
}
.so-table--compare th:first-child,
.so-table--compare td:first-child {
  position: sticky;
  left: 0;
  background: var(--surface);
}
.so-table .so-check {
  vertical-align: middle;
}
.so-table .so-status {
  white-space: nowrap;
  overflow-wrap: normal;
}
/* Kártyasor. A cella egy kis táblázat: balra a mezőnév, jobbra a cella teljes tartalma egyben (szöveg és elem együtt
   sem válik szét), a mezőnév a tartalom közepéhez igazodik. */
@container (max-width: 600px) {
  .so-table:not(.so-table--compare) {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
  }
  .so-table:not(.so-table--compare),
  .so-table:not(.so-table--compare) :is(tbody, tr) {
    display: block;
  }
  .so-table:not(.so-table--compare) thead {
    display: none;
  }
  .so-table:not(.so-table--compare) tr {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 8px 16px;
    margin: 0 0 12px;
  }
  .so-table:not(.so-table--compare) tr:last-child {
    margin-bottom: 0;
  }
  .so-table:not(.so-table--compare) td {
    display: table;
    width: 100%;
    height: auto;
    padding: 5px 0;
    border: 0;
    text-align: right;
  }
  .so-table:not(.so-table--compare) td::before {
    content: attr(data-label);
    display: table-cell;
    width: 1%;
    padding-right: 12px;
    white-space: nowrap;
    vertical-align: middle;
    color: var(--muted);
    font-size: 13.5px;
    text-align: left;
  }
  .so-table:not(.so-table--compare) td:first-child {
    display: block;
    font-weight: 600;
    font-size: 16px;
    text-align: left;
  }
  .so-table:not(.so-table--compare) td:first-child::before {
    content: none;
  }
  .so-table:not(.so-table--compare) td:empty {
    display: none;
  }
}
@container (min-width: 600.02px) and (max-width: 840px) {
  .so-table:not(.so-table--compare):has(th:nth-child(5)) {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
  }
  .so-table:not(.so-table--compare):has(th:nth-child(5)),
  .so-table:not(.so-table--compare):has(th:nth-child(5)) :is(tbody, tr) {
    display: block;
  }
  .so-table:not(.so-table--compare):has(th:nth-child(5)) thead {
    display: none;
  }
  .so-table:not(.so-table--compare):has(th:nth-child(5)) tr {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 8px 16px;
    margin: 0 0 12px;
  }
  .so-table:not(.so-table--compare):has(th:nth-child(5)) tbody {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .so-table:not(.so-table--compare):has(th:nth-child(5)) tr {
    margin: 0;
  }
  .so-table:not(.so-table--compare):has(th:nth-child(5)) td {
    display: table;
    width: 100%;
    height: auto;
    padding: 5px 0;
    border: 0;
    text-align: right;
  }
  .so-table:not(.so-table--compare):has(th:nth-child(5)) td::before {
    content: attr(data-label);
    display: table-cell;
    width: 1%;
    padding-right: 12px;
    white-space: nowrap;
    vertical-align: middle;
    color: var(--muted);
    font-size: 13.5px;
    text-align: left;
  }
  .so-table:not(.so-table--compare):has(th:nth-child(5)) td:first-child {
    display: block;
    font-weight: 600;
    font-size: 16px;
    text-align: left;
  }
  .so-table:not(.so-table--compare):has(th:nth-child(5)) td:first-child::before {
    content: none;
  }
  .so-table:not(.so-table--compare):has(th:nth-child(5)) td:empty {
    display: none;
  }
}

/* ---------- Adat (második kör) ---------- */
/* Adatpárok: címke balra, érték jobbra; 600 px alatt a címke az érték fölé kerül. */
.so-kv {
  display: grid;
  grid-template-columns: minmax(120px, 34%) minmax(0, 1fr);
  gap: 10px 20px;
  margin: 0;
  font-size: 15px;
}
.so-kv dt {
  color: var(--fg-2);
}
.so-kv dd {
  margin: 0;
  color: var(--fg);
  overflow-wrap: anywhere;
}
/* Lenyíló szakasz: natív <details>, a cím sorában jobbra nyíl. */
/* Idővonal és előzmények: függőleges vonal pontokkal, felül a legfrissebb. */
.so-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}
.so-timeline__item {
  position: relative;
  padding: 0 0 18px 26px;
}
.so-timeline__item::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 7px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--so-line-strong);
}
.so-timeline__item::after {
  content: '';
  position: absolute;
  left: 8px;
  top: 22px;
  bottom: 0;
  width: 1px;
  background: var(--border);
}
.so-timeline__item:last-child::after {
  display: none;
}
.so-timeline__item.is-current::before {
  border-color: var(--so-signal);
  background: var(--so-signal);
}
.so-timeline__time {
  display: block;
  font-size: 13px;
  color: var(--muted);
}
/* Kódblokk (beágyazó kód, egyszer látható kulcs): egyenletes szélességű betű, másolás gombbal; a hosszú sor görgethető. */
.so-code {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
}
.so-code__text {
  margin: 0;
  padding: 14px 118px 14px 16px;
  font: 400 14px/1.6 var(--font-mono);
  color: var(--fg);
  white-space: pre;
  overflow-x: auto;
}
.so-code__copy {
  position: absolute;
  top: 9px;
  right: 10px;
}
/* Szegmensválasztó: 2-4 egymást kizáró nézet (például Asztali | Telefon); a kiválasztott halvány éjkék háttéren.
   Egy be/ki kapcsolóhoz a so-switch való. */
.so-segmented {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
}
.so-segmented button {
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--fg-2);
  font: 500 14px/1 var(--font-body);
  cursor: pointer;
}
.so-segmented button[aria-pressed='true'] {
  background: var(--so-selected);
  color: var(--fg);
  font-weight: 600;
}
.so-segmented button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.so-segmented button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* Előnézeti keret: a generált oldal vagy levél, fölötte a nézetválasztó; telefonos nézetben 375 px széles. */
.so-preview {
  display: grid;
  gap: 12px;
  justify-items: center;
}
.so-preview__frame {
  width: 100%;
  height: 420px;
  border: 1px solid var(--so-line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: auto;
}
.so-preview__frame.is-phone {
  width: 375px;
  max-width: 100%;
}
/* HB-F1-15: a beágyazott keret kitölti a dobozt (méret nélkül a böngésző alapja, 300×150 px marad). */
.so-preview__iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Változatok összevetése: két hasáb (előző | új); 600 px alatt egymás alatt. A változást szöveg is jelzi. */
.so-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.so-compare__col {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.so-compare__col.is-new {
  border-color: var(--so-primary);
}
.so-compare__mark {
  display: block;
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.so-compare__mark.is-changed {
  color: var(--fg);
}
.so-compare__mark.is-changed::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--so-signal);
  vertical-align: 1px;
}

/* ---------- Oldal (második kör) ---------- */
/* Szűrősor: kereső és legfeljebb három szűrő egy sorban, a „Szűrés” gombbal; keskeny helyen egymás alatt. */
.so-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
  padding: 14px 16px;
  margin: 0 0 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.so-filterbar .so-field {
  flex: 1 1 200px;
  margin: 0;
  min-width: 0;
}
.so-filterbar > .so-btn {
  flex: none;
}
/* Lapozás: „Előző · 2 / 5 · Következő”, a lista alatt középen. */
.so-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 20px 0 0;
}
.so-pagination__info {
  font-size: 14px;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}
/* „Továbbiak betöltése”: másodlagos gomb a lista alatt, középen. */
.so-more {
  display: flex;
  justify-content: center;
  margin: 16px 0 0;
}

/* ---------- Rétegek (második kör) ---------- */
/* Gyorskereső (Ctrl K): felül nyíló réteg (<dialog>, showModal, mint ma), keresősorral, találati listával és halk
   lábléccel; mögötte a közös ablak fátyla. */
.so-palette {
  width: min(640px, 100%);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--fg);
  box-shadow: var(--elev-raised);
  overflow: hidden;
}
.so-palette:modal {
  margin: 12vh auto auto;
  max-height: 78vh;
}
.so-palette::backdrop {
  background: color-mix(in srgb, var(--so-stage) 55%, transparent);
}
.so-palette__input {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
}
.so-palette__input input {
  flex: 1;
  min-width: 0;
  height: 56px;
  border: 0;
  background: none;
  color: var(--fg);
  font: 400 17px/1 var(--font-body);
  outline: none;
}
.so-palette__input:focus-within {
  box-shadow: inset 0 -2px 0 var(--so-primary);
}
.so-palette__input kbd {
  font: 600 11.5px var(--font-body);
  color: var(--fg-2);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 2px 7px;
}
.so-palette__results {
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: 360px;
  overflow-y: auto;
}
.so-palette__item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
}
.so-palette__item svg {
  width: 18px;
  height: 18px;
  color: var(--fg-2);
}
.so-palette__item[aria-selected='true'] {
  background: var(--so-selected);
}
.so-palette__kind {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--muted);
}
.so-palette__foot {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--muted);
}
/* A keretek mérője: kredit, levél, SMS, tárhely; fogyóban borostyán, elfogyva piros, mindig szöveggel (a figyelmeztető
   sor). Ugyanaz a jelölés két helyen: asztali gépen az oldalsáv alján, telefonon az oldalfejlécben, a leírás alatt.
   Az oldalsávon kívül (Béla döntése, 2026-10-01) összecsukva áll: a kredit (az első tétel), a fogyóban lévő és az
   elfogyott keret látszik, mellette a lenyíló gomb (so-allowance__more, aria-expanded); kinyitva mind a négy. */
.so-allowance {
  display: grid;
  grid-template-columns: minmax(0, max-content) auto;
  justify-content: start;
  align-items: start;
  gap: 8px;
}
.so-allowance__title {
  display: none;
}
.so-allowance__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.so-allowance__name {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--so-line-strong);
}
.so-allowance__name:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 4px;
}
.so-allowance__warning {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 13.5px;
  color: var(--so-warn);
}
.so-allowance__more {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--fg-2);
  cursor: pointer;
  transition:
    border-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard);
}
.so-allowance__more svg {
  width: 18px;
  height: 18px;
  transition: transform var(--motion-fast) var(--ease-standard);
}
.so-allowance__more:hover {
  border-color: var(--so-field-border);
  color: var(--fg);
}
.so-allowance__more:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.so-allowance__more[aria-expanded='true'] svg {
  transform: rotate(180deg);
}
:not(.so-sidebar)
  > .so-allowance:has(> .so-allowance__more[aria-expanded='false'])
  .so-allowance__item:not(:first-child, .is-low, .is-out) {
  display: none;
}
.so-allowance__item {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-height: 34px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 14px;
  color: var(--fg-2);
}
.so-allowance__value {
  font-weight: 600;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.so-allowance__item.is-low {
  border-color: var(--so-warn);
  background: var(--so-warn-bg);
  color: var(--so-warn);
}
.so-allowance__item.is-out {
  border-color: var(--so-danger);
  background: var(--so-danger-bg);
  color: var(--so-danger);
}
.so-allowance__item.is-low .so-allowance__value,
.so-allowance__item.is-out .so-allowance__value {
  color: inherit;
}
.so-allowance__item.is-low .so-allowance__name,
.so-allowance__item.is-out .so-allowance__name {
  text-decoration-color: currentColor;
}
/* Az oldalsávban: sorok egymás alatt, a felhasználó fölött; mindig mind a négy, lenyíló nélkül. */
.so-sidebar .so-allowance {
  display: block;
  margin: auto 0 14px;
  padding: 14px 10px 0;
  border-top: 1px solid var(--so-sidebar-line);
}
.so-sidebar .so-allowance__more {
  display: none;
}
.so-sidebar .so-allowance + .so-sidebar__foot {
  margin-top: 0;
}
.so-sidebar .so-allowance__title {
  display: block;
  margin: 0 0 6px;
  color: var(--so-sidebar-muted);
}
.so-sidebar .so-allowance__list {
  display: block;
}
.so-sidebar .so-allowance__item {
  display: flex;
  justify-content: space-between;
  min-height: 0;
  padding: 4px 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 13.5px;
  color: var(--so-sidebar-ink);
}
.so-sidebar .so-allowance__name {
  text-decoration-color: var(--so-sidebar-line);
}
.so-sidebar .so-allowance__name:focus-visible {
  box-shadow:
    0 0 0 2px var(--so-sidebar),
    0 0 0 4px var(--so-signal);
}
.so-sidebar .so-allowance__value {
  color: var(--so-sidebar-ink-active);
}
.so-sidebar .so-allowance__item.is-low {
  color: var(--so-sidebar-warn);
}
.so-sidebar .so-allowance__item.is-out {
  color: var(--so-sidebar-danger);
}
.so-sidebar .so-allowance__warning {
  margin: 8px 0 0;
  color: var(--so-sidebar-warn);
  font-size: 12.5px;
}

/* Értesítések: a lista sorai; az olvasatlan félkövér, és arany pont jelzi. */
.so-list__row.is-unread .so-list__title {
  font-weight: 700;
}
.so-list__row.is-unread .so-list__icon {
  position: relative;
}
.so-list__row.is-unread .so-list__icon::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--so-signal);
  border: 2px solid var(--surface);
}

/* ---------- Rendszeroldalak (második kör) ---------- */
/* Belépés, kétlépcsős azonosítás, elfelejtett jelszó, új jelszó, meghívó: középen egy kártya, fölötte a logó. */
.so-auth {
  min-height: 100vh;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 40px var(--container-gutter-phone);
  background: var(--bg);
  color: var(--fg);
}
.so-auth__brand {
  margin: 0 0 22px;
}
.so-auth__card {
  width: 100%;
  max-width: 440px;
  padding: 28px 30px 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.so-auth__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
  font-variation-settings: 'opsz' 72;
  margin: 6px 0 8px;
}
.so-auth__card .so-btn--primary {
  width: 100%;
  margin-top: 6px;
}
.so-auth__links {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 16px 0 0;
  font-size: 14.5px;
}
/* A kétlépcsős azonosítás QR-kódja mindkét témában világos alapon áll, hogy a telefon be tudja olvasni. */
.so-auth__qr {
  display: block;
  width: 200px;
  max-width: 100%;
  margin: 14px auto;
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--so-stage-ink);
}

@media (max-width: 600px) {
  .so-kv {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px 0;
  }
  .so-kv dd {
    margin-bottom: 10px;
  }
  .so-field-pair,
  .so-compare {
    grid-template-columns: minmax(0, 1fr);
  }
  .so-banner {
    flex-wrap: wrap;
  }
  .so-banner > span {
    flex: 1 1 calc(100% - 30px);
    min-width: 0;
  }
  .so-banner__action {
    margin-left: 30px;
  }
  .so-gate__fix {
    margin-left: 18px;
  }
}

/* ---------- Állapotok és szöveg (harmadik kör) ---------- */
/* A szoftver oldalváltáskor az oldalcímre, ablaknyitáskor az ablak címére teszi a fókuszt (tabindex="-1"): a cím nem kap
   fókuszgyűrűt, a felolvasó felolvassa. */
:where(h1, h2, h3)[tabindex='-1']:focus {
  outline: none;
}
/* Csak felolvasónak szóló szöveg (például egy mező felirata, ha a mező maga mutatja, mire való). */
.so-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* Dolgozik (aria-busy): a felirat marad, előtte so-spinner; nem halványul el, mint a letiltott. */
.so-btn[aria-busy='true'] {
  cursor: progress;
}
.so-btn[aria-busy='true']:disabled {
  opacity: 1;
  cursor: progress;
}
.so-btn--primary .so-spinner {
  border-color: color-mix(in srgb, var(--so-on-primary) 35%, transparent);
  border-top-color: var(--so-on-primary);
}
/* Csak olvasható mező: halvány háttér, halk keret (mint a kódblokk). */
.so-input[readonly],
.so-textarea[readonly] {
  background: var(--bg);
  border-color: var(--border);
}
/* Oldalon belüli kereső: so-input, bal szélén a keresés ikonjával. A pirula alakú so-search csak a felső sávban van. */
.so-searchbox {
  position: relative;
  display: block;
}
.so-searchbox > svg {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.so-searchbox > .so-input {
  padding-left: 42px;
}
/* Folyó szöveg (súgó, AI által írt szöveg): 16/1,55, bekezdések között 12 px, a lista 20 px-re behúzva, legfeljebb 62 karakter. */
.so-prose {
  max-width: 62ch;
  color: var(--fg);
}
.so-prose > * {
  margin: 0;
}
.so-prose > * + * {
  margin-top: 12px;
}
.so-prose > :first-child {
  margin-top: 0;
}
.so-prose :is(ul, ol) {
  padding-left: 20px;
}
.so-prose li + li {
  margin-top: 4px;
}
.so-prose :is(h2, h3) {
  margin-top: 20px;
  font: 620 17px/1.3 var(--font-body);
  letter-spacing: -0.01em;
}
.so-prose a {
  color: var(--fg);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--so-line-strong);
}
.so-prose code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--bg);
  font: 14px/1.4 var(--font-mono);
}
/* A mentett, soronként írt szöveg (ügyfélválasz, jegyzet, kivonat): a sortörései megmaradnak, a hosszú adat bárhol
   törhet. */
.so-prose--lines {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* Beszélgetés (például a tudástárral): buborék és avatar nélkül; minden forduló egy sor, a kérdés félkövér, alatta a
   válasz másodlagos színnel; alul a szövegmező és egy gomb. */
.so-conversation {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.so-conversation__turn {
  padding: 14px 22px;
}
.so-conversation__turn + .so-conversation__turn {
  border-top: 1px solid var(--border);
}
.so-conversation__question {
  margin: 0;
  font-size: 15.5px;
  font-weight: 600;
}
.so-conversation__answer {
  margin: 6px 0 0;
  color: var(--fg-2);
  max-width: 62ch;
}
.so-conversation__input {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin: 14px 0 0;
}
.so-conversation__input .so-textarea {
  flex: 1;
  min-height: 44px;
}
@media (max-width: 760px) {
  .so-dialog:modal {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0 16px 20px;
    border: 0;
    border-radius: 0;
  }
  .so-dialog__head {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0 -16px 8px;
    padding: 14px 16px 10px;
    background: var(--surface);
  }
  .so-dialog--fill:modal {
    inset: 0;
    padding: 20px var(--container-gutter-phone) 40px;
  }
  .so-dialog--stage:modal {
    padding: 0;
  }
  .so-toasts {
    bottom: calc(84px + env(safe-area-inset-bottom));
  }
  .so-conversation__turn {
    padding: 12px 16px;
  }
  .so-conversation__input {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ---------- Mobil ---------- */
.so-tabbar,
.so-sheet,
.so-scrim {
  display: none;
}
.so-tabbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 56px;
  padding: 4px 6px;
  border-radius: 12px;
  font: 400 11px/1.2 var(--font-body);
  color: var(--so-sidebar-ink);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
}
.so-tabbar__item.is-active {
  color: var(--so-sidebar-ink-active);
  font-weight: 600;
}
.so-tabbar__item:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--so-sidebar),
    0 0 0 4px var(--so-signal);
}

@media (max-width: 1180px) {
  .so-stage__body {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .so-stage__frame {
    width: 100%;
    max-width: 620px;
    justify-self: center;
  }
}
@media (max-width: 1100px) {
  .so-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    --so-num-size: 34px;
  }
  .so-metric:nth-child(odd) {
    border-left: 0;
  }
  .so-metric:nth-child(n + 3) {
    border-top: 1px solid var(--border);
  }
  .so-metrics--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .so-metrics--3 .so-metric {
    border-top: 0;
    border-left: 1px solid var(--border);
  }
  .so-metrics--3 .so-metric:first-child {
    border-left: 0;
  }
}
@media (max-width: 760px) {
  .so-app {
    grid-template-columns: minmax(0, 1fr);
  }
  .so-sidebar {
    display: none;
  }
  .so-topbar {
    padding: 0 var(--container-gutter-phone);
  }
  .so-topbar__brand {
    display: block;
  }
  /* A gyorskereső telefonon nagyító ikongomb a téma előtt, mint ma (Béla döntése, 2026-10-01); a felirat a felolvasóé. */
  .so-search {
    width: 40px;
    height: 40px;
    padding: 0;
    margin-left: auto;
    margin-right: -10px;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--fg-2);
    border-radius: 12px;
  }
  .so-search:hover {
    background: var(--so-selected);
    color: var(--fg);
  }
  .so-search svg {
    width: 20px;
    height: 20px;
  }
  .so-search__label,
  .so-search kbd {
    display: none;
  }
  .so-main {
    padding: 20px var(--container-gutter-phone) 110px;
  }
  .so-tabbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    justify-content: space-around;
    background: var(--so-sidebar);
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  }
  .so-sheet {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    background: var(--so-sidebar);
    border-radius: 22px 22px 0 0;
    padding: 18px 14px calc(18px + env(safe-area-inset-bottom));
    max-height: 85vh;
    overflow-y: auto;
    transform: translateY(100%);
    visibility: hidden;
    transition:
      transform var(--motion-base) var(--ease-standard),
      visibility 0s linear var(--motion-base);
  }
  .so-sheet::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--so-sidebar-line);
    margin: -6px auto 14px;
  }
  .so-sheet.is-open {
    transform: none;
    visibility: visible;
    transition:
      transform var(--motion-base) var(--ease-standard),
      visibility 0s;
  }
  .so-btn {
    height: auto;
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 1.25;
    white-space: normal;
    text-align: center;
  }
  .so-btn--sm {
    min-height: 34px;
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .so-btn--lg {
    min-height: 52px;
  }
  .so-actions > .so-btn {
    flex: 1 1 auto;
  }
  /* A gombsor gombjai kitöltik a sort (Béla döntése, 2026-10-01); a Vissza/Előző szöveges gomb fölöttük marad. */
  .so-footer > .so-actions {
    flex: 1 1 100%;
    margin-left: 0;
  }
  .so-metrics {
    --so-num-size: 30px;
  }
  .so-metric {
    padding: 16px 14px 14px;
  }
  .so-metric .so-label {
    font-stretch: 100%;
    letter-spacing: 0.12em;
  }
  .so-command {
    min-height: 56px;
    padding-left: 16px;
  }
  .so-command__input {
    font-size: 16px;
  }
  .so-stage__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 18px;
  }
  .so-list__row {
    padding: 12px 16px;
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: 10px;
  }
  .so-list__row > :last-child {
    grid-column: 2;
    justify-self: start;
    text-align: left;
  }
  .so-next,
  .so-card {
    padding: 18px;
  }
  .so-stage__head {
    padding: 18px var(--container-gutter-phone);
  }
  .so-stage__body {
    padding: 8px var(--container-gutter-phone) 40px;
  }
  .so-stage__frame {
    height: 330px;
    margin-top: 70px;
    overflow-x: clip;
  }
  .so-stage__photo,
  .so-stage__cutout {
    height: 400px;
    transform: translateX(-66%);
  }
  .so-stage__float {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
  }
  .so-stage__actions {
    gap: 18px;
  }
  .so-stage__metrics .so-label {
    letter-spacing: 0.12em;
  }
  .so-stage__actions .so-btn {
    width: 100%;
  }
}

/* ---------- Elrendezés (a jóváhagyott képernyőkből, 4. átnézés C1) ---------- */
/* A keret jobb hasábja (felső sáv és tartalom), az oldalfejléc, a rácsok, a függőleges ritmus és a jóváhagyott
   képernyők saját darabjai. Az értékek a jóváhagyott képekből jönnek; a sorrend (a fájl végén) is az övék. */
.so-app__body {
  min-width: 0;
}

/* Oldalfejléc: helyjelző vagy vissza-hivatkozás; alatta a cím, jobbra a súgó és a műveletek (vagy a haladásjelző);
   alatta a leírás. */
.so-page-head {
  margin: 0 0 28px;
}
.so-page-head__body {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.so-back {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--fg-2);
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
}
.so-back:hover {
  color: var(--fg);
}
.so-back:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 6px;
}
.so-back svg {
  width: 18px;
  height: 18px;
}
button.so-back {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
}
/* Helyjelző (2A): kicsi, halk felirat a cím fölött. A jobb oldal (so-page-head__end): a súgó (so-link, 1A), utána a
   műveletek, a fő gomb a legszélső; a cím alapvonalán áll. A leírás a cím alatt. */
.so-page-head__trail {
  margin: 0 0 8px;
  font: 500 13px/1.2 var(--font-body);
  color: var(--muted);
}
.so-page-head__body:has(> .so-page-head__end) {
  align-items: baseline;
  row-gap: 10px;
}
.so-page-head__end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
}
.so-page-head__end > .so-link {
  white-space: nowrap;
}
.so-page-head__lead {
  margin: 6px 0 0;
  font-size: 15.5px;
  color: var(--fg-2);
  max-width: 62ch;
}
.so-main .so-allowance {
  display: none;
}
/* Alnézet-választó (3C): aláhúzott fülsor, soha nem görget oldalra. Négy vagy több aloldalnál (so-subnav--many), ha a
   sor nem fér el (900 px alatti hely), választó gomb: a mostani aloldal és „2 / 7”; koppintásra alulról felúszó lista. */
.so-subnav {
  container-type: inline-size;
  margin: 22px 0 0;
}
.so-subnav__tabs {
  display: flex;
  flex-wrap: wrap;
  column-gap: 26px;
  border-bottom: 1px solid var(--border);
}
.so-subnav__tab {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--fg-2);
  text-decoration: none;
  font: 500 15px/1.2 var(--font-body);
  white-space: nowrap;
}
.so-subnav__tab:hover {
  color: var(--fg);
}
.so-subnav__tab[aria-current] {
  color: var(--fg);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--so-primary);
}
.so-subnav__tab:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 6px;
}
.so-subnav__select {
  display: none;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--so-line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--fg);
  font: 600 16px/1.2 var(--font-body);
  text-align: left;
  cursor: pointer;
}
.so-subnav__select:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.so-subnav__select svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--fg-2);
}
.so-subnav__count {
  margin-left: auto;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
@container (max-width: 900px) {
  .so-subnav--many .so-subnav__tabs {
    display: none;
  }
  .so-subnav--many .so-subnav__select {
    display: flex;
  }
}
/* Alulról felúszó választólista (például az aloldalak): világos lap, a mostani kiemelve, arany ponttal. A fátyol a
   meglévő so-scrim; a lap bezárul Escre, mellé koppintva és lehúzva. */
.so-picker {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  max-width: 560px;
  max-height: 85vh;
  margin: 0 auto;
  overflow-y: auto;
  padding: 10px 14px calc(18px + env(safe-area-inset-bottom));
  background: var(--surface);
  border-radius: 22px 22px 0 0;
  box-shadow: var(--elev-raised);
  transform: translateY(100%);
  visibility: hidden;
  transition:
    transform var(--motion-base) var(--ease-standard),
    visibility 0s linear var(--motion-base);
}
.so-picker::before {
  content: '';
  display: block;
  width: 36px;
  height: 4px;
  margin: 0 auto 12px;
  border-radius: var(--radius-pill);
  background: var(--so-line-strong);
}
.so-picker.is-open {
  transform: none;
  visibility: visible;
  transition:
    transform var(--motion-base) var(--ease-standard),
    visibility 0s;
}
.so-picker__label {
  margin: 0 8px 6px;
}
.so-picker__item {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 0 10px;
  border-radius: 11px;
  color: var(--fg);
  text-decoration: none;
  font-size: 16px;
}
.so-picker__item:hover {
  background: var(--so-selected);
}
.so-picker__item:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.so-picker__item[aria-current] {
  background: var(--so-selected);
  font-weight: 600;
}
.so-picker__item[aria-current]::after {
  content: '';
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--so-signal);
}
.so-scrim.is-open {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 25;
  background: color-mix(in srgb, var(--so-stage) 55%, transparent);
}
.so-meter {
  width: min(320px, 100%);
}
.so-meter__text {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--fg-2);
}
.so-meter__text b {
  color: var(--fg);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

/* Rácsok: tartalom és mellékhasáb (Áttekintő), lépéssor, kérdés és magyarázat (felmérés), kártyarács. */
.so-layout {
  display: grid;
  gap: 24px;
  align-items: start;
}
.so-layout--aside {
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
}
.so-layout--steps {
  grid-template-columns: 236px minmax(0, 1fr) 248px;
}
.so-layout--cards {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 20px;
}
.so-metrics + .so-layout {
  margin-top: 30px;
}
.so-stack {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.so-stack > .so-section-head {
  margin: 0 0 -12px;
}
/* A hasábban a köz mindig a so-stack 24 px-e: a blokkok saját függőleges margója itt nem számít. */
.so-stack > * {
  margin-top: 0;
  margin-bottom: 0;
}
.so-command-area {
  margin: 0 0 34px;
}

/* Szervezet a kártyán (logócsempe, név, alcím), tényszámok, kiemelt mondat, kétvégű sor, halk felirat. */
.so-org {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
}
.so-org__logo {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  flex: none;
  background: var(--so-selected);
  color: var(--fg);
  font: 600 20px/1 var(--font-display);
}
.so-org__name {
  display: block;
  font-size: 16.5px;
  font-weight: 620;
  letter-spacing: -0.01em;
}
.so-org__sub {
  display: block;
  font-size: 13.5px;
  color: var(--muted);
}
.so-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 14px;
  border-block: 1px solid var(--border);
  container-type: inline-size;
}
.so-facts__item {
  min-width: 0;
  padding: 14px 0 12px;
}
.so-facts__item + .so-facts__item {
  padding-left: 14px;
  border-left: 1px solid var(--border);
}
.so-facts .so-num {
  display: block;
  margin: 0 0 8px;
}
.so-quote {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--fg-2);
}
.so-quote b {
  color: var(--fg);
  font-weight: 600;
}
.so-split {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
}
.so-split:has(+ .so-progress) {
  margin-bottom: 12px;
}
.so-meta {
  font-size: 13.5px;
  color: var(--muted);
}
/* Keskeny sorban (telefon, és 1100-1370 px között a jobb hasáb) szorosabb címke, hogy a hosszú szó is kiférjen. */
@container (max-width: 360px) {
  .so-facts__item + .so-facts__item {
    padding-left: 10px;
  }
  .so-facts .so-label {
    letter-spacing: 0.06em;
  }
}

/* Lépéssor: számozott szakaszok, az aktív éjkék; 1100 px alatt körsor, csak az aktív neve látszik. */
.so-stepper ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.so-stepper__step {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 12px;
  color: var(--fg-2);
  text-decoration: none;
  font-size: 14.5px;
  line-height: 1.3;
}
.so-stepper__step:hover {
  background: var(--so-selected);
  color: var(--fg);
}
.so-stepper__step:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.so-stepper__step.is-active {
  background: var(--surface);
  color: var(--fg);
  font-weight: 600;
  box-shadow: var(--elev-ring);
}
.so-stepper__step.is-active:focus-visible {
  box-shadow: var(--focus-ring);
}
.so-stepper__num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  border: 1px solid var(--so-line-strong);
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.so-stepper__step.is-active .so-stepper__num {
  background: var(--so-primary);
  border-color: var(--so-primary);
  color: var(--so-on-primary);
}
.so-stepper__name {
  flex: 1;
  min-width: 0;
}
.so-stepper__count {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Körsor bármilyen szélességen (so-stepper--row): a varázsló a közös ablakban (például az új kampány) így mutatja a
   lépéseit, a lépés fölött; csak az aktív neve látszik. */
.so-stepper--row ol {
  flex-direction: row;
  gap: 6px;
}
.so-stepper--row .so-stepper__step {
  min-height: 36px;
  padding: 4px;
}
.so-stepper--row .so-stepper__step.is-active {
  flex: 1;
  padding: 4px 12px 4px 4px;
}
.so-stepper--row .so-stepper__step:not(.is-active) .so-stepper__name,
.so-stepper--row .so-stepper__count {
  display: none;
}

/* Kérdéskártya, lenyíló szakasz (a jóváhagyott Példaválasz), gombsor az űrlap, az ablak és a varázsló alján,
   magyarázó kártya a mellékhasábban. */
.so-question {
  padding: 24px 28px;
}
.so-question__title {
  display: block;
  margin: 0 0 4px;
}
.so-disclosure {
  margin: 0 0 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
}
.so-disclosure summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  font-size: 14.5px;
  font-weight: 600;
  border-radius: var(--radius-md);
}
.so-disclosure summary::-webkit-details-marker {
  display: none;
}
.so-disclosure summary svg {
  width: 16px;
  height: 16px;
  transition: transform var(--motion-fast) var(--ease-standard);
}
.so-disclosure[open] summary svg {
  transform: rotate(90deg);
}
.so-disclosure summary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.so-disclosure .so-disclosure__body {
  margin: 0;
  padding: 0 14px 14px 38px;
  font-size: 15px;
  color: var(--fg-2);
}
.so-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.so-footer > .so-actions:only-child {
  margin-left: auto;
}
.so-reason .so-list__icon {
  margin: 0 0 14px;
}
.so-reason p {
  margin: 6px 0 0;
  font-size: 15px;
  color: var(--fg-2);
}

@media (max-width: 1320px) {
  .so-layout--steps {
    grid-template-columns: 240px minmax(0, 1fr);
  }
  .so-layout--steps > :nth-child(3) {
    grid-column: 2;
  }
}
@media (max-width: 1100px) {
  .so-layout--aside {
    grid-template-columns: minmax(0, 1fr);
  }
  .so-layout--steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .so-layout--steps > :nth-child(3) {
    grid-column: auto;
  }
  .so-stepper ol {
    flex-direction: row;
    gap: 6px;
  }
  .so-stepper__step {
    min-height: 36px;
    padding: 4px;
  }
  .so-stepper__step.is-active {
    flex: 1;
    padding: 4px 12px 4px 4px;
  }
  .so-stepper__step:not(.is-active) .so-stepper__name,
  .so-stepper__count {
    display: none;
  }
}
@media (max-width: 760px) {
  .so-page-head {
    margin-bottom: 20px;
  }
  .so-meter,
  .so-page-head__end {
    width: 100%;
  }
  .so-main .so-allowance {
    display: grid;
  }
  .so-page-head > .so-allowance {
    margin: 14px 0 0;
  }
  .so-main > .so-allowance {
    margin: 0 0 18px;
  }
  .so-question {
    padding: 18px;
  }
  .so-disclosure .so-disclosure__body {
    padding-left: 14px;
  }
}

/* ---------- Csökkentett mozgás ---------- */
/* Nem 0,01 ms-os áttűnés: az minden elemre „all” áttűnést tenne, és a frissen megjelenő rétegek (például a menülap
   ikonjai) egy képkockáig hiányozhatnak. Itt egyszerűen nincs mozgás; a belépő elemek azonnal a végállapotukban vannak. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}