/*
 * Citoviso UI — INTERNAL CONSOLE layer on the design core (ADR-0021 ①).
 * Lives NEXT TO citui.css and consumes ONLY --citui-* tokens: the console's
 * look is fully driven by the central design core — change the tokens there,
 * every internal surface follows. This file styles the console's established
 * class vocabulary (.panel/.pill/.row/.kv/.filters/…) plus the app shell
 * (topbar + menu), so every console page dresses from here, not from inline CSS.
 */

/* ── App shell ──────────────────────────────────────────────────────────── */
body.con {
  margin: 0;
  /* Not a flat slab: the same cyan glow the homepage hero uses, held very faint
     so data stays readable but the surface has brand depth. */
  background:
    radial-gradient(circle at 8% -4%, color-mix(in srgb, var(--citui-cyan-400) 11%, transparent), transparent 30%),
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--citui-glow-blue) 7%, transparent), transparent 26%),
    var(--citui-surface);
  background-attachment: fixed;
  color: var(--citui-ink);
  font: 14px/1.5 var(--citui-font-text);
}
.con a { color: var(--citui-link-ink); text-decoration: none; }
.con a:hover { text-decoration: underline; }
/* ⛔ …but NOT when the link is a BUTTON. `.con a` is (0,1,1) and beats every
   `.citui-btn--*` colour rule (0,1,0), so a link-shaped button silently took the
   console's cyan link colour. MEASURED (Elek FK-005b, 2026-09-12): the payment
   FAILURE screen's only way out — "Újra próbálom a fizetést" — rendered cyan text
   on the cyan gradient, contrast ≈1.1, effectively unreadable, while every
   machine check happily reported the label as "visible". A button's colour is
   decided by its variant; the link rule must not reach inside it.
   Kept generic on purpose: the next `<a class="citui-btn">` would fall in too. */
.con a.citui-btn--primary,
.con a.citui-btn--ghost { color: var(--citui-navy-900); }
.con a.citui-btn--dark,
.con a.citui-btn--secondary { color: var(--citui-white); }
/* ⛔ …és NEM a súgó-ikonon sem. UGYANEZ A CSAPDA, HARMADSZOR: a `.con-help` (0,1,0) a
   `--citui-muted`-et szánta az ikonnak, de a `.con a` (0,1,1) verte — így a súgó-ikon MINDEN
   konzol-képernyőn cián volt fehéren, **2,41** kontraszttal (a nem-szöveges vezérlők WCAG-
   küszöbe 3,0). Mérve, amikor a Pénzügy-képernyők hiányzó ikonjait pótoltam: a hibát nem ott
   találtam, ahol kerestem. Az `opacity: 0.8` is elmegy: 0,8-cal a muted is csak ~3,1-et ad,
   és egy 30 px-es körbe zárt vékony glif ennél többet érdemel. Nyugalmi állapot = 4,63. */
.con a.con-help { color: var(--citui-muted); opacity: 1; }
.con a.citui-btn:hover { text-decoration: none; }

/* Brand chrome (Hybrid): dark navy topbar carries the homepage identity, while
   the content area below stays light and readable for data-dense operator work. */
.con-top {
  display: flex; align-items: center; gap: 20px;
  padding: 11px 22px;
  background: linear-gradient(120deg, var(--citui-navy-900), var(--citui-navy-700));
  border-bottom: 2px solid var(--citui-cyan-500);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--citui-navy-950) 16%, transparent);
  position: sticky; top: 0; z-index: 50;
}
.con-top .citui-brand__mark { width: 30px; height: 30px; }
.con-top .citui-brand { font-size: 1.1rem; gap: 9px; flex: 0 0 auto; }
/* On the navy bar the ink brand text must flip to white (mark stays cyan). */
.con-top .citui-brand--ink { color: var(--citui-white); }

/* The menu NEVER wraps into a broken column: on narrow screens it scrolls
   horizontally instead (thumb-friendly, nothing overlaps the content). */
.con-nav {
  display: flex; align-items: center; gap: 4px;
  flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; min-width: 0; flex: 1 1 auto;
}
.con-nav::-webkit-scrollbar { display: none; }
.con-nav a {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 9px;
  color: rgba(255, 255, 255, 0.72); font-weight: 600; font-size: 0.92rem; white-space: nowrap;
  transition: color var(--citui-transition), background var(--citui-transition);
}
.con-nav a svg { width: 17px; height: 17px; flex: 0 0 auto; }
.con-nav a:hover { color: var(--citui-white); background: rgba(255, 255, 255, 0.10); text-decoration: none; }
.con-nav a.active { color: var(--citui-navy-900); background: var(--citui-cyan-400); }

.con-user { margin-left: auto; font-size: 0.88rem; white-space: nowrap; flex: 0 0 auto; }
.con-user a { color: rgba(255, 255, 255, 0.78); }
.con-user a:hover { color: var(--citui-white); }

.con-main { padding: 20px 26px; max-width: min(1600px, 100%); margin: 0 auto; }

/* ── Mobile (phone-first operator use is a REAL workflow, not an edge case) ── */
@media (max-width: 760px) {
  .con-top { flex-wrap: wrap; gap: 6px 14px; padding: 10px 14px; }
  .con-top .citui-brand span { font-size: 1rem; }
  .con-user { order: 2; }
  .con-nav { order: 3; flex-basis: 100%; margin: 2px -14px 0; padding: 0 14px; }
  .con-main { padding: 14px; }
  .con .panel { padding: 14px 14px; border-radius: 16px; }
  .con .panel h2 { margin: 0 0 12px !important; padding: 0; font-size: 1.05rem; }
  .con-hero { padding: 18px 18px; }
  .con .kv { grid-template-columns: 1fr; gap: 0 0; }
  .con .kv dt { margin-top: 8px; }
}

/* ── Panels (cards) ─────────────────────────────────────────────────────── */
.con .panel {
  background: var(--citui-white);
  border: 1px solid var(--citui-line);
  border-radius: 18px;
  padding: 18px 20px;
  margin: 0 0 16px;
  box-shadow: var(--citui-shadow-sm);
}
/* Panel heading: a CLEAN display-face title inside the card (admin-hub mock) —
   the old floating navy band ("kék fülecske") is retired by owner decree
   (2026-08-23). !important defeats leftover inline margin overrides. */
.con .panel h2 {
  margin: 0 0 14px !important; padding: 0;
  font-family: var(--citui-font-display);
  font-size: 1.15rem; letter-spacing: -0.02em; text-transform: none; font-weight: 700;
  color: var(--citui-navy-900);
  background: none; border: 0; border-radius: 0;
}

/* ── Lead page: IDENTITY BAND ────────────────────────────────────────────────
   One dark band carrying everything the operator needs before choosing a tab:
   who this is, the match confidence as the single big metric (it gates every
   downstream action), the workflow-state pills, then the plain contact facts. */
.con-lhead {
  background: var(--citui-white); border: 1px solid var(--citui-line);
  border-radius: 14px; box-shadow: var(--citui-shadow-sm); overflow: hidden; margin: 0 0 14px;
}
.con-lhead__band {
  display: flex; gap: 18px; align-items: flex-start; padding: 15px 18px;
  background: linear-gradient(120deg, var(--citui-navy-900), var(--citui-navy-700));
  color: var(--citui-white); border-bottom: 2px solid var(--citui-cyan-500);
}
.con-lhead__mark {
  width: 54px; height: 54px; border-radius: 12px; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--citui-cyan-400), var(--citui-glow-blue));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--citui-font-display); font-weight: 700; font-size: 21px;
  color: var(--citui-navy-950);
}
.con-lhead__id { min-width: 0; flex: 1 1 auto; }
.con-lhead__id h1 {
  margin: 0; font-family: var(--citui-font-display); color: var(--citui-white);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem); letter-spacing: -0.02em; line-height: 1.18;
}
.con-lhead__sub { margin-top: 3px; font-size: 0.95rem; color: var(--citui-ink-inverse); opacity: 0.85; }
.con-lhead__metric { flex: 0 0 auto; text-align: right; }
.con-lhead__big {
  font-family: var(--citui-font-display); font-weight: 700; line-height: 1;
  font-size: clamp(1.5rem, 3vw, 2rem); color: var(--citui-cyan-300);
}
.con-lhead__lbl {
  margin-top: 5px; font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75;
}
.con-lhead__pills {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 11px 18px;
  border-bottom: 1px solid var(--citui-line);
}

/* ── FUTÓ HÁTTÉRMUNKA A LAP TETEJÉN — jóváhagyott „A" változat (2026-09-11) ──────
   assets/design-refs/console/gen-running/. A percekig futó generálás eddig a 3014 px-es
   lap alsó ötödében jelezte magát, a fejléc közben „mock: approved"-ot mutatott. */
.con-run-pill { display: inline-flex; align-items: center; gap: 7px; }
.con-run-pill .dot {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  background: var(--citui-cyan-500); animation: conPulse 1.1s ease-in-out infinite;
}
@keyframes conPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.72); } }
/** Eltelt idő: tabuláris számjegy, hogy ne ugráljon másodpercenként. */
.con-run-t { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ⛔ MÉRT (a végigkattintás fogta meg, 2026-09-11): a `display:flex` felülírja a
   `[hidden]` nulla-specificitású `display:none`-ját, így a „rejtett" sáv LÁTSZIK.
   Ugyanaz a csapda, mint 2026-09-05-én — a rejtés itt kimondva erősebb. */
.con-runbar[hidden] { display: none; }
.con-runbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 18px; font-size: 0.9rem;
  background: color-mix(in srgb, var(--citui-cyan-500) 12%, var(--citui-white));
  border-bottom: 1px solid var(--citui-line);
}
.con-runbar__mut { color: var(--citui-muted); }
/* ⛔⛔ A HALADÓ CSÍK KIVEZETVE (FK-003b L03, jóváhagyott „A" terv, 2026-09-14).
   Itt élt a `.con-runbar__track/__fill`: FIX 34% szélességű kitöltés, végtelenített
   `conSlide` animációval — SEMMILYEN adathoz nem kötve. Mérve: mindkét felvételen
   teljesen üres, egyenletes szürke csík (x=533–1234), és a 0:00→0:01 közti teljes
   pixeldiff KIZÁRÓLAG az eltelt-idő szövegére korlátozódott. (Letiltott animációnál
   ráadásul a kitöltés `margin-left:-34%`-on áll, vagyis a sávon KÍVÜL — ezért látszott
   üresnek.) ⛔ Vissza ne kerüljön: haladást csak VALÓS jelből mutatunk — a motor által
   jelentett szakasz neve, több sablonnál az elkészültek száma. Százalékot nem írunk:
   a szakaszok hossza erősen egyenetlen, az arányos csík a hátralévő időről hazudna. */
.con-run-stage { font-weight: 700; color: var(--citui-navy-900); }
/* Bukás: UGYANAZ a sáv mondja meg, miért állt le — nem egy másik helyen, kisebb betűvel. */
.con-runbar.bad {
  background: color-mix(in srgb, var(--citui-bad) 10%, var(--citui-white));
  color: var(--citui-bad-ink); font-weight: 600;
}
/* ⭐ A LEZÁRÓ SOR (FK-003b L06): a futás VÉGÉT eddig SEMMI nem mondta ki — a sáv némán
   eltűnt. Ez a sor MEGMARAD (az outcome TTL-jéig): kész, mennyi ideig tartott, hova vezet. */
.con-runbar.done {
  background: var(--citui-ok-soft);
  color: color-mix(in srgb, var(--citui-ok) 78%, var(--citui-navy-900));
  font-weight: 600;
}
.con-runbar.done b { color: color-mix(in srgb, var(--citui-ok) 88%, var(--citui-navy-900)); }
.con-done__dur { font-variant-numeric: tabular-nums; font-weight: 700; }
.con-runbar.done a { color: color-mix(in srgb, var(--citui-cyan-500) 70%, var(--citui-navy-900)); font-weight: 700; }
/* ⚠️ `.con .con-done__x`, NEM a puszta osztály: a `.con button` (0,1,1) VERI a
   `.con-done__x`-et (0,1,0), és a bezáró × fehér, keretes PIRULAKÉNT jelent meg a zöld
   sávon — úgy nézett ki, mint egy elsődleges művelet. A renderelt sávon mérve
   (2026-09-14); ugyanaz a specificitás-csapda, amit a link-szabály már egyszer elsütött. */
.con .con-done__x {
  margin-left: auto; border: 0; background: transparent; cursor: pointer;
  color: inherit; font: inherit; font-size: 1.15rem; line-height: 1;
  padding: 2px 8px; min-height: 0; border-radius: var(--citui-radius-pill); opacity: 0.7;
}
.con .con-done__x:hover { opacity: 1; background: color-mix(in srgb, var(--citui-ok) 14%, transparent); }
/* A futás ott is látszik, ahol a kurátor éppen NEM áll. */
.con-ltab .tabdot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-left: 6px;
  vertical-align: middle; background: var(--citui-cyan-500);
  animation: conPulse 1.1s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .con-run-pill .dot, .con-ltab .tabdot { animation: none; }
}
.con-lead-facts { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 0; }
.con-lhead .con-lead-facts { padding: 13px 18px; }
.con-lead-facts > div { min-width: 0; }
.con-lead-facts dt {
  margin: 0 0 2px; font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--citui-muted);
}
.con-lead-facts dd { margin: 0; font-size: 0.92rem; font-weight: 600; color: var(--citui-ink); }

/* ── Lead page: DOSSIER TABS ─────────────────────────────────────────────────
   The lead page carries seven unrelated jobs; as one scroll they buried each
   other. The strip is a dark navy band (same chrome as the top menu) closed by
   a cyan line — that line is what separates the strip from the content. Under
   the ACTIVE tab the line is covered by the tab's own white, so the tab and its
   opened sheet read as ONE body (a dossier), exactly like a paper folder. */
.con-ltabs { margin: 0 0 20px; }
/* Back to the lead list — a plain, unmissable affordance above the dossier. */
.con-back {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px;
  font-size: 0.9rem; font-weight: 600; color: var(--citui-muted);
}
.con-back:hover { color: var(--citui-navy-900); text-decoration: none; }
/* The tab strip stays put while a long panel scrolls, so the operator can switch
   sections without scrolling back up. Its `top` is set from JS to the live height
   of the sticky top menu (which wraps taller on phones), so it never hides under
   it. z-index sits below the top menu (50) and above the sheet. */
.con-ltabs__bar {
  display: flex; gap: 3px; padding: 8px 8px 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  background: linear-gradient(120deg, var(--citui-navy-900), var(--citui-navy-700));
  border: 1px solid var(--citui-navy-900); border-bottom: 3px solid var(--citui-cyan-500);
  border-radius: 14px 14px 0 0;
}
/* ⛔ A RAGADÁS A BURKOLÓN VAN, nem a sávon. Mérve (2026-09-14): amíg a `.con-ltabs__bar`
   ragadt egyedül, a pinnelt sáv (top=60, bottom=111) TELJESEN rátakart az alatta álló
   fül-mondatra (top=59, bottom=78) — a lap kiírta, az operátor nem látta. Teljes-lapos
   screenshoton ez nem látszik; csak geometria (elementFromPoint) mutatta meg. Így a sáv és
   a mondat EGYÜTT ragad, tehát a „mi van ezen a fülön" ott van, ahol a fülek. */
.con-ltabs__head { position: sticky; top: 0; z-index: 30; }
.con-ltabs__bar::-webkit-scrollbar { display: none; }
.con-ltab {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 17px; border-radius: 10px 10px 0 0; white-space: nowrap;
  font-family: var(--citui-font-text); font-size: 0.95rem; font-weight: 600; line-height: 1;
  color: rgba(255, 255, 255, 0.74); background: transparent; cursor: pointer;
  transition: color var(--citui-transition), background var(--citui-transition);
}
.con .con-ltab:hover {
  color: var(--citui-white); background: rgba(255, 255, 255, 0.13); text-decoration: none;
}
.con .con-ltab.on { background: var(--citui-white); color: var(--citui-navy-900); }
/* THIS is the dossier effect: the active tab paints over the cyan closing line,
   so its white runs straight down into the sheet below. */
.con-ltab.on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px;
  background: var(--citui-white);
}
.con-ltab__n {
  padding: 1px 7px; border-radius: var(--citui-radius-pill); font-size: 11px;
  background: rgba(255, 255, 255, 0.18); color: var(--citui-white);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.con-ltab.on .con-ltab__n {
  background: color-mix(in srgb, var(--citui-cyan-400) 22%, var(--citui-white));
  color: var(--citui-navy-900); border-color: transparent;
}
.con-ltabs__sheet {
  background: var(--citui-white);
  border: 1px solid var(--citui-navy-900); border-top: 0;
  border-radius: 0 0 14px 14px; padding: 14px; box-shadow: var(--citui-shadow-sm);
}
.con-ltabs__sheet > .con-tabp > *:last-child { margin-bottom: 0; }
.con-tabp { min-width: 0; }
/* Hidden ONLY when the script is alive (the class is set from <head>): with JS
   off every panel stays visible and the tab anchors still jump to them. */
.con-tabs-js .con-tabp { display: none; }
.con-tabs-js .con-tabp.on { display: block; }

@media (max-width: 760px) {
  .con-lhead__band { flex-wrap: wrap; gap: 12px 14px; padding: 13px 14px; }
  .con-lhead__metric { width: 100%; text-align: left; display: flex; align-items: baseline; gap: 12px; }
  .con-lhead__lbl { margin-top: 0; }
  .con-lhead__pills, .con-lhead .con-lead-facts { padding: 11px 14px; }
  /* Telefonon a szakasz-felirat saját sorba kerül: a szöveg és az eltelt idő fontosabb. */
  .con-runbar { padding: 9px 14px; }
  .con-run-stage { flex-basis: 100%; order: 9; }
  .con-ltabs__bar { padding: 6px 6px 0; }
  .con-ltab { padding: 11px 13px; font-size: 0.9rem; }
  .con-ltabs__sheet { padding: 10px; }
}

/* Generate panel: picker + prompt on the LEFT, selected-look preview on the RIGHT.
   The preview is the star of the panel: accent-framed like the selected card (same
   cyan + glow), and stretched to the FULL height of the controls column, so its
   bottom lines up with where the prompt input ends. */
.con .gen-2col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr); gap: 16px; align-items: stretch; }
.con .gen-2col #tpl-prev { display: flex; flex-direction: column; margin: 0; }
.con .gen-2col #tpl-prev-img {
  /* cover + a PORTRAIT source (tpl-*-prev.jpg, shot to this frame's aspect):
     cover on the old landscape card-shot blew up a random crop ("semmi sem
     látszik"), contain left the frame half-empty — the fix is the ASSET, not
     the fit (scripts/shot-previews.mts). */
  display: block; width: 100%; flex: 1; min-height: 0; object-fit: cover; object-position: top center;
  background: var(--citui-white);
  border: 2px solid var(--citui-cyan-500); border-radius: 10px;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--citui-cyan-500) 22%, transparent);
}
/* ÉLŐ előnézet: a lead SAJÁT lapja fut a keretben, a kijelölt sablonon (FK-003b ④).
   A generált oldal ~1200 px szélességre készül, ezért kicsinyítve mutatjuk — a keret
   nem böngésző-ablak, hanem BÉLYEG: azt kell megmutatnia, hogy néz ki a lap, nem azt,
   hogy olvasható-e benne a törzsszöveg. */
.con .gen-2col #tpl-prev-frame {
  display: block; width: 100%; flex: 1; min-height: 320px; border: 0;
  border-radius: 10px; background: var(--citui-white);
  outline: 2px solid var(--citui-cyan-500); outline-offset: -2px;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--citui-cyan-500) 22%, transparent);
}
/* Breakpoint at 1080 (not 760): the owner's phone lays the console out at ~900px
   CSS width, where the split view degenerates into a tall cropped sliver — measured
   on his screenshot 2026-08-22. Below it: one column, natural preview height. */
@media (max-width: 1080px) {
  .con .gen-2col { grid-template-columns: 1fr; }
  .con .gen-2col #tpl-prev-img { flex: none; height: auto; }
  .con .gen-2col #tpl-prev-frame { flex: none; height: 380px; }
}

/* Template picker card grid (ADR-0027): the curator picks the look as a thumbnail card. */
.con .tpl-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px;
}
.con .tpl-card {
  display: block; position: relative; cursor: pointer; border: 1px solid var(--citui-line);
  border-radius: 10px; overflow: hidden; background: var(--citui-white);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.con .tpl-card input { position: absolute; opacity: 0; pointer-events: none; }
.con .tpl-card img { display: block; width: 100%; height: 96px; object-fit: cover; object-position: top center; }
.con .tpl-card__name {
  display: block; padding: 6px 8px; font-size: 0.78rem; font-weight: 600; color: var(--citui-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Zoom is the SECONDARY act on a card (the card itself selects), so it lives in its
   own corner button — 32px tap target, thumb-reachable on the phone console. */
.con .tpl-card__zoom {
  position: absolute; top: 5px; left: 5px; width: 32px; height: 32px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--citui-line); border-radius: 8px; cursor: zoom-in;
  background: color-mix(in srgb, var(--citui-white) 86%, transparent);
  color: var(--citui-ink); backdrop-filter: blur(2px);
}
.con .tpl-card__zoom:hover { border-color: var(--citui-cyan-500); color: var(--citui-link-ink); }
.con .tpl-card:hover { border-color: var(--citui-cyan-500); transform: translateY(-2px); }
.con .tpl-card.on {
  border-color: var(--citui-cyan-500);
  box-shadow: 0 0 0 2px var(--citui-cyan-500), 0 4px 14px color-mix(in srgb, var(--citui-cyan-500) 22%, transparent);
}
/* selected marker: a solid accent dot (no glyph — console doctrine §B: icons via src/ui/icons.ts) */
.con .tpl-card.on::after {
  content: ""; position: absolute; top: 7px; right: 7px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--citui-cyan-500); box-shadow: 0 0 0 2px var(--citui-white);
}
.con .tpl-card:focus-within { border-color: var(--citui-cyan-500); box-shadow: 0 0 0 2px var(--citui-cyan-500); }

/* ── Lead data card ──────────────────────────────────────────────────────────
   Edit fields sit on a fixed 3-column rhythm (name/phone/email, then
   country/city/address) instead of auto-fit, which used to stretch a single
   full-width Name box across the card. The website spans the full row because a
   URL is long, and carries an open-in-new-tab affordance beside it. */
.con-edit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 18px; }
/* The open-in-new-tab button must line up with the INPUT, not with the bottom of
   the block: once the field grew a "scrape: …" provenance line below it, flex-end
   dropped the button under the input and it read as a stray box. */
.con-edit-site { display: flex; align-items: flex-start; gap: 8px; }
.con-edit-site > div { flex: 1 1 auto; min-width: 0; }
.con-edit-site .con-open { margin-top: 25px; width: 38px; height: 38px; }
@media (max-width: 900px) { .con-edit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .con-edit-grid { grid-template-columns: minmax(0, 1fr); } }

/* Facts below the form: a real multi-column grid. The old 130px-label <dl> put
   every value in one narrow column and left the right half of the card empty. */
/* A section heading has to LOOK like a section boundary. As a bare grey caption
   it read as another stray label, and the facts under it floated with nothing
   tying them together — the operator could not tell what belonged to what. */
.con-facts__h {
  margin: 30px 0 14px; padding-bottom: 8px;
  border-bottom: 2px solid var(--citui-navy-900);
  font-family: var(--citui-font-display);
  font-size: 1.05rem; font-weight: 700; letter-spacing: 0;
  text-transform: none; color: var(--citui-navy-900);
}
/* min 200px, not 160: at 160 a wide screen produced six hairline columns and the
   values scattered. Each fact is a BOXED cell so the key and its value read as
   one object instead of two loose lines. */
.con-fact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px 24px; }
/* NO box. Boxing every fact made a trivial one ("kontakt-csatorna: email") shout
   as loudly as the section it sits under — everything the same weight is the same
   as no hierarchy. Ranking is typographic here: heading > value > key. */
.con-fact { min-width: 0; }
.con-fact--wide { grid-column: 1 / -1; }
.con-fact__k {
  display: block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--citui-muted); margin-bottom: 3px;
}
/* The value is the thing being read — it must outweigh its own label. */
.con-fact__v {
  display: block; font-size: 0.95rem; font-weight: 600; color: var(--citui-ink);
  overflow-wrap: anywhere;
}

/* Openable source / site chips — the label and its link affordance read as one. */
.con-src { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.con-src + .con-src { margin-left: 10px; }
.con-src--flat { color: var(--citui-muted); }
.con-open {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: 0 0 auto;
  border: 1px solid var(--citui-line); border-radius: 8px; color: var(--citui-ink);
}
.con-open:hover { border-color: var(--citui-cyan-500); color: var(--citui-link-ink); }

/* `.con .` prefix, not a bare class: the console makes every form inline
   (`.con form`, for the many one-button action forms in tables), and that
   selector is MORE specific than a lone class — so a bare `.con-reenrich`
   silently lost and the row rendered as inline text with the hint wrapping
   under the button. */
.con .con-reenrich {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--citui-line);
}
.con-reenrich button { display: inline-flex; align-items: center; gap: 6px; }
/* The hint takes its OWN row. Sharing the row with the button made the sentence
   wrap into a ragged block beside it that read as broken layout — and it wrapped
   at every width, because the text is long by design (it explains a costly,
   destructive-looking action). */
.con-reenrich .small { flex: 1 1 100%; margin: 0; }

/* ── Lightbox gallery ────────────────────────────────────────────────────────
   One component for both jobs on the lead page: the lead's real photos and the
   full-page template samples. They differ in shape — a photo fits the screen,
   a template sample is a whole page and is metres tall — so the stage SCROLLS
   and the image keeps its natural height (never `object-fit: contain`, which
   would shrink a page mock into an unreadable strip). */
.cit-lb[hidden] { display: none; }
.cit-lb {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--citui-navy-950) 94%, transparent);
}
.cit-lb__stage {
  flex: 1 1 auto; overflow: auto; padding: 56px 16px 16px;
  display: flex; justify-content: center; align-items: flex-start;
}
.cit-lb__stage img {
  max-width: min(1100px, 100%); height: auto; display: block;
  border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); background: #fff;
}
.cit-lb__bar {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; color: #fff; font-size: 0.85rem;
  background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
}
.cit-lb__cap { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.cit-lb__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: 0 0 auto; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 10px;
  background: rgba(0, 0, 0, 0.35); color: #fff; font-size: 20px; line-height: 1;
}
.cit-lb__btn:hover { border-color: #fff; background: rgba(0, 0, 0, 0.6); }
.cit-lb__btn[disabled] { opacity: 0.3; cursor: default; }
/* Side steppers sit vertically centred and out of the way of the image. */
.cit-lb__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 64px; font-size: 26px;
}
.cit-lb__nav--prev { left: 10px; }
.cit-lb__nav--next { right: 10px; }
@media (max-width: 560px) {
  .cit-lb__stage { padding: 52px 8px 8px; }
  .cit-lb__nav { width: 38px; height: 52px; }
}
/* Anything that opens the gallery advertises it — the template CARD is not one of
   them: it selects (cursor: pointer, set on .tpl-card), only its zoom button zooms. */
.lead-photos a, #tpl-prev-img { cursor: zoom-in; }

/* Outcome banner after a re-enrich (Post/Redirect/Get, so it survives reload). */
.con-flash {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 12px; padding: 10px 14px; border-radius: 10px;
  font-size: 0.9rem; border: 1px solid var(--citui-line); background: var(--citui-surface);
}
.con-flash.ok { border-color: var(--citui-ok); color: var(--citui-ink); }
.con-flash.bad { border-color: var(--citui-bad); color: var(--citui-bad-ink); }

/* OUR outage, stated as ours — an unreachable data source must not be mistaken for a
   finding about the record ("nem találtunk fotót" while the quota was spent, 2026-09-09).
   Warn, not bad: nothing is broken in the data, we simply could not ask. */
.con .con-warn { color: var(--citui-warn-ink); }

/* ── Console hero (dashboard greeting) ───────────────────────────────────────
   Carries the homepage hero mood (navy glow + faint grid) into the app so the
   operator lands on brand, not on a blank slab. */
.con-hero {
  position: relative; overflow: hidden;
  border-radius: 16px; padding: 20px 24px; margin: 0 0 14px;
  color: var(--citui-white);
  background:
    radial-gradient(circle at 12% 12%, color-mix(in srgb, var(--citui-cyan-400) 34%, transparent), transparent 42%),
    radial-gradient(circle at 88% 88%, color-mix(in srgb, var(--citui-glow-blue) 18%, transparent), transparent 44%),
    linear-gradient(135deg, var(--citui-navy-950), var(--citui-navy-900) 55%, var(--citui-navy-700));
  box-shadow: var(--citui-shadow-md);
}
.con-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.65), transparent 82%);
}
.con-hero > * { position: relative; }
.con-hero .eyebrow {
  margin: 0 0 7px; font-family: var(--citui-font-display);
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--citui-cyan-300);
}
.con-hero h1 { margin: 0 0 6px; color: var(--citui-white); font-size: clamp(1.4rem, 3vw, 1.85rem); letter-spacing: -0.03em; }
.con-hero p { margin: 0; color: rgba(255, 255, 255, 0.74); font-size: 0.96rem; max-width: 62ch; }

/* Dashboard stat cards */
.con-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; }
.con-card {
  position: relative; overflow: hidden;
  display: block; background: var(--citui-white); border: 1px solid var(--citui-line);
  border-radius: 14px; padding: 14px 16px; color: inherit;
  transition: transform var(--citui-transition), box-shadow var(--citui-transition), border-color var(--citui-transition);
}
.con-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--citui-cyan-400), var(--citui-cyan-500));
  opacity: 0; transition: opacity var(--citui-transition);
}
.con-card:hover {
  transform: translateY(-3px); border-color: var(--citui-cyan-300);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--citui-cyan-500) 16%, transparent); text-decoration: none;
}
.con-card:hover::before { opacity: 1; }
.con-card .n {
  font-family: var(--citui-font-display); font-size: 1.95rem; font-weight: 700; line-height: 1;
  background: linear-gradient(135deg, var(--citui-navy-900) 20%, var(--citui-cyan-500));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.con-card .l { color: var(--citui-muted); font-size: 0.88rem; margin-top: 4px; }

/* ── Tables ─────────────────────────────────────────────────────────────── */
/* Wide tables scroll in their OWN wrapper (.tblwrap), never the whole panel:
   when the panel itself scrolled, the header band + intro text scrolled away
   with it and the card looked broken on phones (2026-08-19 owner report). */
.con .panel { overflow-x: hidden; }
/* A görgető-konténer egyben MÉRETADÓ konténer: a benne ülő magyarázó al-sor így a
   LÁTHATÓ szélességhez tud igazodni (100cqi), nem a képernyőéhez. A 100vw-s becslés
   10 px-t tévedett — és nem a viewport vágta le, hanem EZ a doboz (a DOM zöld volt,
   a pixel nem: a szöveg jobb széle a görgető doboz alá csúszott). */
.con .tblwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; container-type: inline-size; }
.con table { width: 100%; border-collapse: collapse; }
/* Magyarázó al-sor a táblázat sora ALATT (pl. „miért szakadt meg ez a futás?").
   A mondat nem fér el egy oszlopban, de az utolsó oszlopban MOBILON kicsúszik a
   képernyőről (mérve 2026-09-13: a scrape-lista „megszakadt" indoklásának jobb
   fele 390px-en olvashatatlan volt, a sor helyén meg tátongó üres hely maradt).
   Ezért a szöveg a LÁTHATÓ doboz szélességén tördel, nem a (szélesebb) táblázatén,
   és oldalra húzáskor a bal élhez tapad. */
.con td.rownote { padding-top: 0; border-top: 0; }
/* A TAPADÁS A SZÖVEGEN van, nem a cellán: a colspan-os cella pontosan olyan széles,
   mint a saját sora, tehát rajta a `position: sticky` némán hatástalan — mérve, teljes
   oldalra húzás után a cella −103 px-re csúszott, és a mondat MINDEN sora szó közepén
   levágódott. A span befoglalója viszont a cella, azon belül van tere elmaradni.
   −24px: a cella bal+jobb belső margója (11px 12px) — enélkül a szöveg pont ennyivel
   lógna ki a látható dobozból.
   overflow-wrap: a hibaüzenet egy KIVÉTEL SZÖVEGE, amiben URL is állhat, és egyetlen
   törhetetlen token 396 px-t lógott ki, ráadásul a táblázatot is szétfeszítette. A
   tördelhető próza addig is elfért — épp a legfontosabb üzenet, a hibáé, nem. */
.con td.rownote > span {
  position: sticky; left: 0;
  display: block; max-width: min(100%, calc(100cqi - 24px));
  white-space: normal; overflow-wrap: anywhere;
}
.con td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--citui-line); vertical-align: middle; }
.con th {
  text-align: left; padding: 9px 12px; color: var(--citui-muted);
  font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  background: var(--citui-surface);
  border-top: 1px solid var(--citui-line); border-bottom: 1px solid var(--citui-line);
}
.con tbody tr:hover td { background: var(--citui-surface); }
.con th a { color: var(--citui-muted); }
.con th a:hover { color: var(--citui-ink); text-decoration: none; }
.con td.num { font-variant-numeric: tabular-nums; }

/* ── Opt-out revocation (approved plan B, 2026-09-06) ────────────────────────
   Lifting an opt-out is only lawful on the recipient's own request, so the form
   stays CLOSED behind the <details> summary — the box announces the state and the
   history, it does not offer a one-click revocation. */
.con .optout-box {
  margin-top: 8px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--citui-bad) 34%, transparent);
  background: color-mix(in srgb, var(--citui-bad) 6%, transparent);
}
/* Already revoked: the trail stays, but it is history — not a live warning. */
.con .optout-box--past { border-color: var(--citui-line); background: var(--citui-surface); }
.con .optout-box summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--citui-bad-ink); }
.con .optout-box .ob-law { font-size: 12px; color: var(--citui-muted); margin: 8px 0; line-height: 1.5; }
.con .optout-box .ob-form { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; margin: 0; }
.con .optout-box .ob-form input[type="text"] { flex: 1 1 300px; min-width: 0; font-size: 13px; }
.con .optout-box .ob-log { margin: 8px 0 0; padding: 0; list-style: none; }
.con .optout-box .ob-log li { font-size: 12px; color: var(--citui-muted); padding: 2px 0; line-height: 1.5; }
.con .optout-box .ob-log li b { color: var(--citui-ink); font-weight: 600; }
@media (max-width: 640px) {
  .con .optout-box .ob-form input[type="text"] { flex: 1 1 100%; }
  .con .optout-box .ob-form button { width: 100%; }
}

/* ── ADR-0111 markets panel ─────────────────────────────────────────────────
   Same shape as the opt-out box above, for the same reason: opening a market is a
   responsibility, so the action stays CLOSED behind a summary and the decision log
   stays on the row. The row itself is neutral — the pill carries the state. */
.con .mkt-row { padding: 10px 0; border-top: 1px solid var(--citui-line); }
.con .mkt-row:first-of-type { border-top: 0; }
.con .mkt-act { margin-top: 6px; }
.con .mkt-act summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--citui-navy-700); }
.con .mkt-form { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; margin: 0; }
.con .mkt-form input[type="text"] { flex: 1 1 300px; min-width: 0; font-size: 13px; }
.con .mkt-log { margin: 8px 0 0; padding: 0; list-style: none; }
.con .mkt-log li { font-size: 12px; color: var(--citui-ink); padding: 2px 0; line-height: 1.5; }
@media (max-width: 640px) {
  .con .mkt-form input[type="text"] { flex: 1 1 100%; }
  .con .mkt-form button { width: 100%; }
}

/* ── Status vocabulary ──────────────────────────────────────────────────── */
/* Soft badge pills (admin-hub mock): filled tint, no outline box — reads as a
   quiet label, not a bordered chip fighting the table for attention. */
.con .pill {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  border: 0; color: var(--citui-navy-700); background: var(--citui-surface-2);
  /* ⑧ A jelölés EGY SZÓKÉP (jóváhagyott terv ⑧). Mérve: a „✓ kiküldve" a szűk MOCK
     oszlopban két sorra esett szét, és a pipa külön sorba került a szótól — két
     félmondat egy állítás helyett. */
  white-space: nowrap;
}
.con .panel h2 .pill { font-size: 11px; vertical-align: middle; }
.con .pill.no_site, .con .pill.approved { color: var(--citui-ok-ink); background: var(--citui-ok-soft); }
.con .pill.outdated {
  color: var(--citui-warn-ink);
  background: color-mix(in srgb, var(--citui-warn) 16%, transparent);
}
.con .pill.rejected { color: var(--citui-bad-ink); background: color-mix(in srgb, var(--citui-bad) 12%, transparent); }
/* FIGYELMEZTET, DE NEM TILT — saját szóképe kell (tulajdonosi rendelet, 2026-09-19).
   A „nem küldhető" és a „megerősítéssel kimegy" KÉT KÜLÖNBÖZŐ állítás; egy piros
   pirulán mutatva a kurátor azt olvassa, hogy a rendszer megtiltotta neki a SAJÁT
   döntését — és meg sem próbálja megnyomni a gombot, ami kiküldené. */
.con .pill.warn {
  color: var(--citui-warn-ink);
  background: color-mix(in srgb, var(--citui-warn) 16%, transparent);
}
/* ⛔ EGÉSZ MONDATOT VIVŐ PIRULA — a `.pill` alap `nowrap`-je egy SZÓKÉP-címkére való
   („✓ kiküldve"), nem egy állításra. Mérve 390px-en: a sáv „E-mail: kiküldhető — a
   küldés gomb előbb megmut…"-nál elvágódott, vagyis pont az a fél mondat veszett el,
   ami megmondja, hogy a kurátor KI TUDJA küldeni. A levágás mindig a VÉGÉT viszi el. */
.con .pill--claim { white-space: normal; }
/* A `--citui-info` a ciánnal AZONOS, ezért a saját 13%-os tintjén 2,15 volt — ez ÁLLAPOT-
   jelvény („legenerálva" / „elküldve"), tehát a jelentés-vivő körbe tartozik. */
.con .pill.generated, .con .pill.sent { color: var(--citui-link-ink); background: color-mix(in srgb, var(--citui-info) 13%, transparent); }
.con .q-good { color: var(--citui-ok-ink); font-weight: 700; }
.con .q-mid { color: var(--citui-warn-ink); font-weight: 700; }
.con .q-bad { color: var(--citui-bad-ink); font-weight: 700; }
.con .sv { font-size: 10px; color: var(--citui-muted); border: 1px solid var(--citui-line); border-radius: 4px; padding: 0 3px; margin-left: 4px; vertical-align: middle; }

/* ── Lead list: title row, sort header, legend popup (ADR-0188) ─────────────
   A lapozó MEGSZŰNT (mind a rekord egy lapon), a jelmagyarázat SÁVBÓL FELUGRÓ lett,
   és a cím alatti két szöveg-blokk kikerült (tulajdonosi döntés, 2026-09-19). */

/* A cím sora: cím + EGYETLEN „?" + a két kiút-link. A linkek jobbra sodródnak, szűk
   képernyőn viszont a cím ALÁ törnek — 390 px-en egy sorba préselve a „diszkvalifikáltak ▸"
   levágódna, márpedig az a másik lista EGYETLEN bejárata. */
.con .con-leadhead {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px;
}
.con .con-leadhead h2 { margin: 0; }
.con .con-leadhead__sp { margin-left: auto; display: flex; gap: 14px; align-items: center; }
@media (max-width: 700px) {
  .con .con-leadhead__sp { margin-left: 0; width: 100%; }
}

/* A darabszám EGY sorban, a tábla ALATT. Ez az egyetlen hely, ahol a MEDENCE mérete
   elhangzik („260 sor a 596 aktív leadből”) — enélkül a szűrt lista a teljes készletnek
   látszana, mert a `/leads` alapból szűr. */
.con .con-leadcount { margin: 10px 2px 0; line-height: 1.6; }

/* Sortable header: a nyíl alapból HALVÁNY, ráhúzásra erősödik, az aktív oszlopon teli.
   ⛔ Érintőképernyőn NINCS hover, és a tulaj telefonról dolgozik — ott tehát mindig látszik.
   ⛔⛔ A FELTÉTEL A MUTATÓ-KÉPESSÉG, NEM A SZÉLESSÉG. Eddig `max-width: 700px` volt, ami
   FELTEVÉS: hogy „érintőképernyő = keskeny". Mérve (tudásbázis-őr, 2026-09-20): FEKVŐ
   telefonon (844×390) és álló tableten (820×1180) a 10 tölcsérből 8 maradt láthatatlan,
   vagyis a kézikönyv fő utasításának nem volt hova koppintani. A szélesség-ág megmarad
   (egy keskenyre húzott asztali ablak is telefon-előnézet), de a DÖNTŐ a `hover: none`. */
.con .con-sorth { text-decoration: none; color: inherit; white-space: nowrap; }
.con .con-sorth__m { margin-left: 2px; opacity: 0.22; font-weight: 400; }
.con .con-sorth:hover .con-sorth__m { opacity: 0.9; }
.con .con-sorth.on { color: var(--citui-link-ink); }
.con .con-sorth.on .con-sorth__m { opacity: 1; }
@media (hover: none), (pointer: coarse), (max-width: 700px) {
  .con .con-sorth__m { opacity: 0.5; }
}

/* ── JELMAGYARÁZAT-FELUGRÓ (ADR-0188) ───────────────────────────────────────
   ⛔ Sáv volt: 11 sornyi szöveg a döntés előtt, MINDEN betöltéskor, akkor is, ha senki
   nem kérdezett. Most felugró: a cím melletti „?" nyitja, az ×/ESC/háttér zárja. */
.con .con-legend {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px;
  background: color-mix(in srgb, var(--citui-navy-950) 55%, transparent);
}
.con .con-legend[hidden] { display: none; }
.con .con-legend__box {
  width: min(100%, 620px); max-height: 82vh; overflow: auto;
  background: var(--citui-white); border-radius: 16px;
  box-shadow: 0 24px 60px color-mix(in srgb, var(--citui-ink) 28%, transparent);
}
/* A fejléc RAGAD a doboz tetején: 11 oszlop + 5 jelölés hosszabb, mint a képernyő, és a
   bezáró × nem görögthet ki a képből. */
.con .con-legend__head {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 10px;
  padding: 16px 18px 12px; background: var(--citui-white);
  border-bottom: 1px solid var(--citui-line);
}
.con .con-legend__head h3 {
  margin: 0; font-size: 1.05rem; color: var(--citui-navy-900);
}
.con .con-legend__x {
  margin-left: auto; border: 0; background: none; cursor: pointer; padding: 4px;
  color: var(--citui-muted); line-height: 0; width: auto;
}
.con .con-legend__x:hover { color: var(--citui-navy-900); }
.con .con-legend__list { margin: 0; padding: 14px 18px 18px; font-size: 0.88rem; line-height: 1.55; }
.con .con-legend__row { margin-bottom: 10px; }
.con .con-legend__row dt { font-weight: 800; color: var(--citui-navy-900); }
.con .con-legend__row dd { margin: 2px 0 0; color: var(--citui-muted); }
.con .con-legend__sec {
  margin: 16px 0 10px; padding-top: 12px; border-top: 1px solid var(--citui-line);
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--citui-muted);
}
.con .con-legend__foot { margin: 0; padding: 0 18px 18px; }
/* A tudásbázis-horgony itt FELIRATOS link, nem néma ikon: egy mondat végén egy ikon nem
   mondja meg, hova visz. */
.con .con-help--text {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.85rem; font-weight: 700; color: var(--citui-link-ink);
}

/* ── Text + layout helpers ──────────────────────────────────────────────── */
.con .mut { color: var(--citui-muted); }
.con .small { font-size: 13px; }
.con .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.con .kv { display: grid; grid-template-columns: 130px 1fr; gap: 2px 12px; }
.con .kv dt { color: var(--citui-muted); }
.con .kv dd { margin: 0; }
.con code { background: var(--citui-surface-2); padding: 1px 5px; border-radius: 4px; }
.con pre {
  background: var(--citui-navy-900); color: var(--citui-ink-inverse); border-radius: 10px;
  border: 1px solid var(--citui-line); padding: 10px 12px;
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap;
}

/* ── Forms ──────────────────────────────────────────────────────────────── */
.con form { display: inline; }
/* Buttons as pills (admin-hub mock): friendly tap targets, quiet outline by
   default; the semantic ok/bad variants keep their colour voice. */
.con button {
  font: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 14px; min-height: 34px;
  border-radius: var(--citui-radius-pill); cursor: pointer;
  border: 1px solid var(--citui-line-strong); background: var(--citui-white); color: var(--citui-navy-800);
  transition: var(--citui-transition);
}
.con button:hover { border-color: var(--citui-cyan-500); }
/* ⛔ A TILTOTT GOMB NE NÉZZEN KI ÉLŐNEK (Elek FK-004, 2026-09-13). A submit-szabály navy
   gradiense a `disabled` állapotra is ráült, ezért a „Páros indítása (nincs kép)" ugyanúgy
   elsődleges akciónak látszott, mint egy indítható gomb: a szerver megtagadja a kattintást,
   a felület viszont nem mondta meg előre. A dizájn-magban a szabály MEGVAN
   (`.citui-btn:disabled`) — a konzol nyers <button>-jei maradtak ki belőle. Ugyanaz a kettő. */
.con button:disabled { opacity: 0.5; pointer-events: none; }
/* ⛔ `:not(.hp-alt)` — a nyitókép-választó bélyege `type="submit"`, de NEM elsődleges
   akció-gomb, hanem KÉP. Enélkül a navy gradiens ült a csempe alatt, és a feliratai
   (pontszám, tárgy, „nem tölthető be" indok) sötét háttérre estek (mérve 2026-09-11). */
.con button[type="submit"]:not(.ok):not(.bad):not(.hp-alt):not(.ghost) {
  background: linear-gradient(120deg, var(--citui-navy-900), var(--citui-navy-700));
  color: var(--citui-white); border-color: transparent;
}
.con button[type="submit"]:not(.ok):not(.bad):not(.hp-alt):not(.ghost):hover { filter: brightness(1.15); }
.con button.ok { border-color: var(--citui-ok); color: var(--citui-ok-ink); }
.con button.bad { border-color: var(--citui-bad); color: var(--citui-bad-ink); }
/* Icon + label button (the icon set replaces the emoji these buttons once used). */
.con button.con-ib { display: inline-flex; align-items: center; gap: 6px; }
.con button.con-ib svg { flex: 0 0 auto; color: var(--citui-cyan-500); }
.con select, .con input, .con textarea {
  background: var(--citui-white); color: var(--citui-ink);
  border: 1px solid var(--citui-line-strong); border-radius: 10px; padding: 8px 11px; font: inherit;
  transition: border-color var(--citui-transition);
}
.con select:focus, .con input:focus, .con textarea:focus {
  outline: none; border-color: var(--citui-cyan-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--citui-cyan-400) 22%, transparent);
}
.con .filters { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; margin-bottom: 16px; }
.con .filters label { font-size: 11px; color: var(--citui-muted); text-transform: uppercase; letter-spacing: 0.04em; display: flex; flex-direction: column; gap: 4px; }
.con iframe { background: var(--citui-white); }

/* ── Login page ─────────────────────────────────────────────────────────── */
.con-login {
  min-height: 100vh; display: grid; place-items: center;
  background: linear-gradient(160deg, var(--citui-navy-900), var(--citui-navy-700));
}
.con-login .box {
  width: min(400px, 92vw); background: var(--citui-white); border-radius: 16px;
  padding: 30px 28px; box-shadow: 0 18px 50px color-mix(in srgb, var(--citui-navy-950) 40%, transparent);
}
.con-login .box h1 { font-family: var(--citui-font-display); font-size: 1.15rem; margin: 14px 0 18px; color: var(--citui-navy-900); }
.con-login label { display: block; font-size: 0.85rem; color: var(--citui-muted); margin: 12px 0 4px; }
.con-login input { width: 100%; box-sizing: border-box; }
.con-login button { width: 100%; margin-top: 18px; background: var(--citui-cyan-500); border-color: var(--citui-cyan-500); color: var(--citui-navy-900); padding: 11px; }
.con-login .err { color: var(--citui-bad-ink); font-size: 0.88rem; margin-top: 12px; }

/* ── Sub-tabs inside a section (e.g. Scrape ▸ indítás / térkép / területek) ──
   A second navigation level that keeps the top menu short: related surfaces of
   one workflow live together instead of each claiming a top-level slot. */
.con-tabs {
  display: flex; gap: 4px; flex-wrap: nowrap; overflow-x: auto;
  scrollbar-width: none; margin: 0 0 18px; border-bottom: 1px solid var(--citui-line);
}
.con-tabs::-webkit-scrollbar { display: none; }
.con-tabs a {
  padding: 9px 15px; color: var(--citui-muted); font-weight: 600; font-size: 0.94rem;
  white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.con-tabs a:hover { color: var(--citui-navy-900); text-decoration: none; }
.con-tabs a.active { color: var(--citui-navy-900); border-bottom-color: var(--citui-cyan-500); }

/* ── Qualification badge (icon + label) ──────────────────────────────────────
   In a 100-row list the qualification is the first thing the operator scans, so
   it gets a shape, not just a word. Icons are inline SVG (design doctrine: no
   emoji anywhere in the product). */
.con .qbadge {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  padding: 3px 8px 3px 6px; border-radius: 999px; font-size: 0.8rem; font-weight: 600;
  border: 1px solid currentColor; background: var(--citui-white);
}
.con .qbadge svg { width: 14px; height: 14px; flex: 0 0 auto; }
.con .qbadge.qb-hot { color: var(--citui-bad-ink); }      /* no site = prime target */
.con .qbadge.qb-warn { color: var(--citui-warn-ink); }
.con .qbadge.qb-ok { color: var(--citui-ok-ink); }
.con .qbadge.qb-mut,
.con .qbadge.qb-off { color: var(--citui-muted); }
.con .qbadge.qb-off { text-decoration: line-through; }

/* Lead media strip: the photos we actually gathered for this lead. Compact
   thumbnails that scroll INSIDE the panel — reference material, not a gallery
   that pushes the working panels off-screen. Click opens the original. */
.con .lead-photos {
  display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  max-height: 420px; overflow-y: auto; overscroll-behavior: contain;
}
.con .lead-photos img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border-radius: 8px; border: 1px solid var(--citui-line); background: var(--citui-surface-2);
}

/* ── Column filters in the table header ─────────────────────────────────────
   Multi-select + search living IN the header: the filter sits where the data is,
   and several columns combine instead of replacing each other. */
.con th { white-space: nowrap; }
/* ── EGYSOROS, NAGYVÁLLALATI FEJLÉC (ADR-0188) ──────────────────────────────
   ⛔ A régi fejléc KÉTSZINTES volt és tördelt, mert minden oszlop három dolgot viselt:
   feliratot, szűrő-tölcsért ÉS egy „?" gombot — mérve ~110 px magas, lépcsőzetes sor.
   A „?" gombok megszűntek (a jelmagyarázat felugró lett), így a felirat, a rendezés-nyíl
   és a tölcsér EGY 38 px-es sorba fér. A tördelés-kivétel ezzel tárgytalan: a fejléc
   ismét `nowrap`, mint a konzol többi táblájáé.
   ⚠️ A `nowrap` visszavétele azért biztonságos, mert 11 × ~19 px („?" + margó) szabadult
   fel — de ezt az őr MÉRI (0 px túllógás), nem feltételezzük. */
/* ⛔ SŰRŰ RÁCS-TIPOGRÁFIA. 11 oszlop, 260 sor, lapozás nélkül: a vízszintes hely a
   legszűkösebb erőforrás, és a cella-SZÖVEG tolja, nem a fejléc. 13 px (a konzol
   alapértelmezett 14,4 px helyett) ~80 px-t ad vissza — mérve ettől fér ki a 11 oszlop
   1366 px-es laptopon is, ami a leggyakoribb munkahelyi szélesség. A jóváhagyott terv
   12 px-en készült, tehát ez még mindig NAGYOBB, mint amit a tulaj elfogadott. */
.con .con-leadtbl { font-size: 13px; }
.con .con-leadtbl th {
  white-space: nowrap; vertical-align: middle; line-height: 1.2;
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--citui-muted); height: 38px; padding-top: 0; padding-bottom: 0;
  background: var(--citui-surface-2); border-bottom: 1px solid var(--citui-line-strong);
}
.con .con-leadtbl th .con-th { display: inline-flex; align-items: center; }
/* A SZÁM-oszlopok fejléce a számokkal egy oldalra igazodik (eddig a felirat balra, az
   érték jobbra állt — az oszlop két különböző tengelyt mutatott). */
.con .con-leadtbl th.num { text-align: right; }
.con .con-leadtbl th.num .con-th { justify-content: flex-end; width: 100%; }
.con .con-leadtbl th .con-sorth { display: inline; }
.con .con-leadtbl th .cf { margin-left: 3px; }
.con .con-leadtbl th .cf { white-space: nowrap; }

/* ── A FEJLÉC TAPAD függőleges görgetéskor (ADR-0188) ───────────────────────
   Lapozás nélkül mind a 260 sor egyben áll; a 40. sornál egy elgörgött fejléc azt
   jelentené, hogy az operátor nem tudja, melyik oszlopot nézi. A `.tblwrap` a görgető-
   doboz, tehát a `top: 0` AHHOZ képest ragad — ezért kap a doboz korlátos magasságot. */
.con .con-leadtbl thead th { position: sticky; top: 0; z-index: 3; }
/* ⚠️ A `sticky` a LEGKÖZELEBBI GÖRGETŐ ŐSHÖZ képest ragad. A `.tblwrap` az `overflow-x`
   miatt már görgető doboz, de MAGASSÁG-KORLÁT nélkül függőlegesen sosem görög — vagyis a
   fejléc ragadása néma no-op lenne, miközben a CSS-ben „beállítottnak" látszik
   (`reference_fullpage_shot_hides_dead_sticky`). A korlát teszi valóságossá. */
.con .tblwrap--leads {
  max-height: min(72vh, 820px); overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--citui-line); border-radius: 10px;
}

/* ── A VEZÉRLŐK ALAPBÓL NEM LÁTSZANAK ───────────────────────────────────────
   Tulajdonosi kifogás: „csili csálé, semmi nagyvállalati érzet". 11 oszlopnyi mindig
   látható tölcsér zajt csinál; a tölcsér ráhúzásra jön elő, AKTÍV szűrőnél viszont
   mindig ott van, ciánban, a jelvényével — mert az már ÁLLÍTÁS a listáról.
   ⛔ Érintőképernyőn nincs hover → 700 px alatt mindig látszik (halványan). */
.con .con-leadtbl th .cf-btn { opacity: 0; transition: opacity 0.12s ease; }
.con .con-leadtbl th:hover .cf-btn,
.con .con-leadtbl th .cf-btn:focus-visible,
.con .con-leadtbl th .cf-btn.on { opacity: 1; }
/* ⛔ Ugyanaz a szabály, ugyanabból az okból: a tölcsér ott látszódjon, ahol nincs hover. */
@media (hover: none), (pointer: coarse), (max-width: 700px) {
  .con .con-leadtbl th .cf-btn { opacity: 0.55; }
}

/* ⛔ A VÍZSZINTES HELY A LEGSZŰKÖSEBB ERŐFORRÁS ezen a 11 oszlopos táblán, és az
   ADAT tolja (hosszú szereplő- és településnevek), nem a fejléc. 7 px belső margó:
   mérve ez tartja 0 px túllógáson 1280 px-en, MIUTÁN a tölcsér visszakapta a 14 px-ét.
   ⚠️ Az őr MÉRI (nem feltételezi): a `nowrap` fejléc egy elvékonyodó margóval némán
   levágná a MOCK oszlop vezérlőjét, ahogy 2026-09-14-én tette. */
.con .con-leadtbl td, .con .con-leadtbl th { padding-left: 6px; padding-right: 6px; }
/* …plusz biztosíték a SZEREPLŐ-NÉV oszlopra: a fenti helynyerés a MAI korpuszra elég,
   egyetlen extrém hosszú token viszont megint kitolná a tölcsért a vágás mögé. A név a
   táblázat EGYETLEN felülről nem korlátos szabad szövege (cégnév), ezért ott a szó
   törhető — adat-függetlenül korlátozva a tábla legkisebb szélességét. Mérve egy 52
   karakteres, szóköz nélküli névvel: a tábla így is 0 px-t lóg túl.
   ⛔ A VÁROS oszlopra NEM: ott a törés elsült — a 13-14 betűs Balaton-parti
   településnevek („Balatonföldvár", „Balatongyörök") egyetlen betűt csaptak át a
   következő sorba, vagyis a javítás új olvashatósági hibát gyártott volna. A hosszú
   településnév kötött szókincs, a cégnév nem. */
   ⛔ A `min-width` NEM díszítés: nélküle a törhetőség 390 px-en a NÉV oszlopot ~30 px-re
   lapította, és a „ELEK-TESZT Vendégház" „Vend / éghá / z"-ként tördelődött. A telefonos
   táblázat úgyis oldalra görget (ott minden oszlop a kereten kívülre lóg), tehát a
   törhetőség CSAK a vágás ellen kell — a zsugorodás ellen nem. */
.con .con-leadtbl td[data-col="name"] { overflow-wrap: anywhere; min-width: 13ch; }
.con .con-leadtbl th[data-col="name"] { min-width: 13ch; }

/* ── Jóváhagyott terv: `assets/design-refs/console/lead-list/` ───────────────────────
   ⑨ EGYENLETES SORMAGASSÁG. A fenti törhetőség (indokolt, marad) 1 és 3 soros sorokat
   kevert, és a szem nem tudott végigfutni egy oszlopon. A NÉV két sornál elvágódik — a
   TELJES név az elemleírásban marad, tehát információ nem vész el, csak határt kap.
   ⚠️ A `-webkit-line-clamp` a linkre szól (az a blokk-szerű doboz), nem a cellára: a
   cellán a `display:-webkit-box` szétverné a táblázat-elrendezést. */
/* ⚠️ A `tr { height }` csak MINIMUM: a kétsoros név átnyomta (mérve 50 vs 65 px egy
   táblán belül). Az EGYENLETESSÉGET a név-doboz FIX kétsoros magassága adja — az
   egysoros és a kétsoros név ugyanakkora helyet foglal, tehát a sorok egy vonalon
   maradnak, és a szem végig tud futni egy oszlopon. */
.con .con-leadtbl tbody tr { height: 46px; }
.con .con-leadtbl td[data-col="name"] a {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; max-width: 22ch;
  line-height: 1.3; height: 2.6em;
}

/* ⑩ A NÉV OSZLOP TAPAD — ez a tulajdonosi döntés lényege (2026-09-14).
   Mérve 390 px-en: a 11 oszlopból 3 látszott, a görgető-doboz 750 px-t lógott túl, és
   minden döntéshez kellő oszlop (Kvalifikáció, Fotók, Anyag, Match, Kontakt, Mock) kívül
   rekedt. Vízszintes görgetéskor a NÉV a helyén marad, hogy minden érték mellett látszódjon,
   MELYIK leadről szól.
   ⚠️ A `sticky` a GÖRGETŐ-DOBOZHOZ (.tblwrap) képest tapad, nem a laphoz. A `z-index` a
   fejléc-sorral való sorrendet rendezi: a fejléc-cella mindkét irányban ragad, ezért kap
   magasabbat. A háttér KÖTELEZŐ — enélkül az alátolt oszlopok átlátszanának rajta. */
/* ⑩b Alapértelmezés: REJTVE. ⚠️ Ennek a media query ELŐTT kell állnia — azonos
   specificitásnál a KÉSŐBBI szabály nyer, és amikor ez a query után állt, NÉMÁN
   kiütötte a mobilos `display:flex`-et (mérve: a jelzés 390 px-en nem látszott). */
.con .con-scrollhint {
  display: none; align-items: baseline; gap: 6px;
  margin: 0 0 6px; font-size: 12.5px; color: var(--citui-muted);
}

/* ⛔ A RAGADÁS ÉS A GÖRGETÉS-JELZÉS MÉRT TÉNYHEZ KÖTŐDIK, NEM TÖRÉSPONTHOZ (ADR-0188).
   Eddig `@media (max-width: 700px)` kapcsolta be: az a feltevés, hogy asztalin mindig
   befér mind a 11 oszlop. Mérve 2026-09-19 az ÚJ fejléccel: 1280 px-en 0 px a túllógás —
   DE ez az ADAT függvénye (egy hosszabb településnév vagy egy 90 %-os böngésző-nagyítás
   visszahozza), és akkor a MOCK oszlop némán levágódna, pont úgy, ahogy 2026-09-14-én.
   Egy pixelre kimért illeszkedés VÉLETLENÜL tart (`feedback_exact_match_held_only_by_accident`).
   Ezért a lap-szkript MEGMÉRI a valódi túllógást, és `is-scrollx`-et tesz a dobozra:
   ha van mit görgetni, a NÉV tapad és a lap ki is mondja; ha nincs, egy vonal sem
   kerül a táblába fölöslegesen. */
.con .tblwrap--leads.is-scrollx .con-leadtbl td[data-col="name"],
.con .tblwrap--leads.is-scrollx .con-leadtbl th[data-col="name"] {
  position: sticky; left: 0; z-index: 2;
  background: var(--citui-white);
  box-shadow: 1px 0 0 var(--citui-line);
}
.con .tblwrap--leads.is-scrollx .con-leadtbl thead th[data-col="name"] {
  background: var(--citui-surface-2); z-index: 4;
}
/* A sor-hover NE tüntesse el a ragadó cella hátterét (különben a mögé görgő oszlopok
   átütnének rajta pont akkor, amikor az operátor egy soron áll). */
.con .tblwrap--leads.is-scrollx .con-leadtbl tbody tr:hover td[data-col="name"] {
  background: var(--citui-surface);
}
/* ⑩b „Oldalra görgetve jön a többi oszlop" — egy néma görgethetőség nem felfedezhető. */
.con .con-scrollhint.is-on { display: flex; }

@media (max-width: 700px) {
  /* Telefonon a sorok magasabbak (a NÉV két sora + a jelölések kényelmesen elférnek). */
  .con .con-leadtbl tbody tr { height: 54px; }
}

/* ⑤ PLAFON-jelölés és ⑥ ALAPÉRTÉK-jelölés a cellában. Halkak: az ÉRTÉK a főszereplő,
   ezek csak megmondják, mit NEM jelent. */
.con .con-cap {
  font-size: 10px; color: var(--citui-muted); border: 1px solid var(--citui-line);
  border-radius: 4px; padding: 0 3px; margin-left: 3px; font-weight: 600;
  white-space: nowrap; vertical-align: middle;
}
.con .con-basev { border-bottom: 1px dotted var(--citui-muted); cursor: help; }
.con .con-nomatch { color: var(--citui-muted); font-size: 12px; white-space: nowrap; cursor: help; }

/* A jelmagyarázatot nyitó EGYETLEN „?" a cím mellett (ADR-0188). Érintőképernyőn ez az
   út a jelentéshez — a `title` elemleírás ott elérhetetlen, a tulaj pedig telefonról
   dolgozik. 26 px: ujjal is eltalálható, de nem versenyez a címmel. */
.con .con-helpq {
  border: 1px solid var(--citui-line-strong); background: var(--citui-white);
  color: var(--citui-muted); border-radius: 50%; width: 26px; height: 26px;
  font-size: 14px; line-height: 1; padding: 0; cursor: pointer;
  display: inline-grid; place-items: center; font-weight: 700; flex: 0 0 auto;
}
.con .con-helpq:hover, .con .con-helpq:focus-visible {
  color: var(--citui-link-ink); border-color: var(--citui-cyan-500);
}
.con .cf { position: relative; display: inline-block; margin-left: 2px; vertical-align: middle; }
.con .cf-btn {
  display: inline-flex; align-items: center; gap: 3px; padding: 2px; margin: 0;
  border: 1px solid transparent; border-radius: 6px; background: none;
  color: var(--citui-muted); cursor: pointer; width: auto;
}
.con .cf-btn:hover { background: var(--citui-surface-2); color: var(--citui-navy-900); }
/* ⛔ `flex: 0 0 auto` KÖTELEZŐ: az `inline-flex` gomb a jelvény mellett 0,34 px-re
   zsugorította az ikont (mérve 2026-09-19) — a tölcsér NEM HIÁNYZOTT a markupból, csak
   nem volt szélessége, tehát a „megvan-e az ikon" forrás-ellenőrzés zöldet adott volna. */
.con .cf-btn svg { width: 14px; height: 14px; flex: 0 0 auto; }
/* AKTÍV szűrő: a SZÍN és a jelvény mondja, nem egy keret. A keretes alak gomb-dobozt
   rajzolt a 38 px-es fejléc-sorba, és pont azt a „csili-csálé" hatást adta vissza,
   amit a terv megszüntetett (tulajdonosi kifogás, 2026-09-19). */
.con .cf-btn.on { color: var(--citui-link-ink); }
/* ⑦ KÉT JELENTÉS = KÉT ALAK (jóváhagyott terv ⑦). Eddig a DARABSZÁM („2 értéket
   kipipáltam") és a KÜSZÖB („legalább 1") ugyanabban a kerek cián pöttyben ült — az
   alapértelmezett nézetben egymás mellett, két különböző jelentéssel, egy képpel. */
.con .cf-btn i { font-style: normal; font-size: 0.7rem; font-weight: 700; line-height: 1; flex: 0 0 auto; }
/* DARABSZÁM: kerek, KITÖLTÖTT, cián. */
.con .cf-btn i.cf-count {
  background: var(--citui-cyan-500); color: var(--citui-white); border-radius: 999px; padding: 1px 5px;
}
/* KÜSZÖB: SZÖGLETES, körvonalas, `≥` jellel — más forma, más súly, más jelentés. */
.con .cf-btn i.cf-thresh {
  background: transparent; color: var(--citui-navy-700);
  border: 1.5px solid var(--citui-navy-700); border-radius: 4px; padding: 0 3px;
}
/* ⛔ `fixed`, NEM `absolute` — a felugró KIMENEKÜL a görgető-dobozból.
   Mérve 390 px-en (tudásbázis-őr, 2026-09-20): a `.tblwrap--leads` `overflow:auto`
   levágta a felugró jobb sávját (Kvalifikáció 29 px, Anyag 26 px, Terület 40 px), és
   PONT ott ül a `.cf-count` élő darabszám — vagyis a kézikönyv „pipálható lista élő
   darabszámmal" ígérete telefonon nem teljesült. Egy `absolute` doboz a görgető-ős
   vágósíkján BELÜL marad, akárhova igazítom; a `fixed` a nézetablakhoz képest él, ezért
   a lap-szkript helyezi el és szorítja a képernyőre (`citCfPlace`).
   ⚠️ A két determinisztikus őr ezt NEM fogta: mindkettő 1280 px-en mért. */
.con .cf-pop {
  /* ⛔ z-index 80: a ragadó `.con-top` fejléc 50-en ül, és mérve (fekvő telefon, 844×390)
     a „fölé ugrik" ág alá tolta a felugrót — a 4 élő darabszámból 3 TAKARVA volt, épp az a
     kettő, amit a kézikönyv példaként ígér. A z-index önmagában nem elég (külön rétegző
     környezetek), ezért a lap-szkript a fejléc ALÁ is szorítja (`citCfPlace`). */
  position: fixed; z-index: 80; min-width: 210px; max-width: min(280px, calc(100vw - 16px));
  display: flex; flex-direction: column; gap: 6px; padding: 10px;
  background: var(--citui-white); border: 1px solid var(--citui-line-strong);
  border-radius: 10px; box-shadow: 0 10px 28px color-mix(in srgb, var(--citui-ink) 16%, transparent);
  font-weight: 400; text-transform: none; letter-spacing: 0;
}
.con .cf-pop[hidden] { display: none; }
/* One-line explanation INSIDE the popup where the number is typed: a 0–1 score
   needs its range said at the point of entry, not in a header tooltip. */
.con .cf-hint { line-height: 1.4; max-width: 210px; white-space: normal; }
.con .cf-pop input[type="text"], .con .cf-pop input[type="number"] { width: 100%; margin: 0; }
.con .cf-list { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; }
.con .cf-opt {
  display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px;
  font-size: 0.88rem; cursor: pointer; color: var(--citui-ink);
}
.con .cf-opt:hover { background: var(--citui-surface-2); }
.con .cf-opt input { margin: 0; width: auto; }
.con .cf-count { margin-left: auto; color: var(--citui-muted); font-size: 0.78rem; }

/* ── Digital footprint (portal listings on the lead card) ────────────────────
   A scan-and-open list: host first (that is what identifies the portal), the
   page title as quiet context, and a badge for the pages we actually read. */
.con-listings { list-style: none; margin: 0 0 4px; padding: 0; }
.con-listing {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 6px 0; border-bottom: 1px solid var(--citui-line);
}
.con-listing:last-child { border-bottom: 0; }
.con-listing > a {
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 600; flex: 0 0 auto;
}
.con-listing__t { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.con-listing__ok {
  flex: 0 0 auto; font-size: 11px;
  border-color: var(--citui-ok); color: var(--citui-ok-ink);
}

/* ── Contact ledger (every sighting, with source and verdict) ────────────────
   Rejected rows stay VISIBLE but recede: the operator must be able to see what
   the filter dropped without the drops competing with the usable contacts. */
.con-ledger { width: 100%; }
.con-ledger td, .con-ledger th { vertical-align: top; }
.con-ledger__row--out { opacity: 0.62; }
.con-ledger__use { border-color: var(--citui-cyan-500); color: var(--citui-link-ink); font-size: 11px; }
.con-ledger__ok { border-color: var(--citui-ok); color: var(--citui-ok-ink); font-size: 11px; }
.con-ledger__no { border-color: var(--citui-line-strong); color: var(--citui-muted); font-size: 11px; }

/* ── Duplicate review ────────────────────────────────────────────────────── */
.dup-leads { display: grid; gap: 8px; }
.dup-lead {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  padding: 8px 10px; border: 1px solid var(--citui-line); border-radius: 10px;
}
.dup-lead:hover { border-color: var(--citui-cyan-500); }
.dup-lead__b { display: grid; gap: 2px; min-width: 0; }
.dup-lead__b a { overflow-wrap: anywhere; }
.dup-actions { gap: 8px; flex-wrap: wrap; }
@media (max-width: 560px) { .dup-actions button { flex: 1 1 100%; } }

/* ── Pricing editor ──────────────────────────────────────────────────────────
   The unit ("Ft / hó") used to sit OUTSIDE the input as loose text, so every row
   ended at a different x and the column read as ragged noise. Input + unit are
   one bordered control here: the right edge lines up and the number belongs to
   its unit visually, not just by proximity. */
.pr-field { min-width: 0; }
.pr-field__l {
  display: block; margin-bottom: 4px; font-size: 0.78rem; color: var(--citui-muted);
}
.pr-input {
  display: flex; align-items: stretch; overflow: hidden;
  border: 1px solid var(--citui-line-strong); border-radius: 8px;
  background: var(--citui-surface);
}
.pr-input:focus-within { border-color: var(--citui-cyan-500); }
.pr-input input {
  flex: 1 1 auto; min-width: 0; border: 0; background: transparent; outline: none;
  padding: 9px 10px; text-align: right; font-size: 0.95rem; font-variant-numeric: tabular-nums;
}
.pr-input__u {
  display: flex; align-items: center; padding: 0 10px;
  border-left: 1px solid var(--citui-line); background: var(--citui-surface-2);
  color: var(--citui-muted); font-size: 0.78rem; white-space: nowrap;
}
/* The spine module has no price. Rendered as a field-SHAPED cell so the grid
   rhythm holds — a bare pill in a grid of inputs broke the row alignment. */
.pr-static {
  display: flex; align-items: center; padding: 9px 10px; min-height: 40px;
  border: 1px dashed var(--citui-line-strong); border-radius: 8px;
  background: var(--citui-surface-2); color: var(--citui-muted); font-size: 0.85rem;
}
.pr-group {
  margin: 24px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--citui-line);
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--citui-ink);
}

/* ── Editable field (lead dossier) ────────────────────────────────────────────
   The inputs were 12.5px with 5px padding and the "scrape: …" origin line sat
   under them at the same visual weight as real content, so a field, its label
   and its provenance all read as one grey mush. Label above, input as a proper
   control, provenance clearly subordinate and marked as a QUOTE of the source. */
.con-fld { min-width: 0; }
.con-fld__l {
  display: block; margin-bottom: 4px;
  font-size: 0.78rem; font-weight: 600; color: var(--citui-muted);
}
.con-fld input {
  width: 100%; box-sizing: border-box; padding: 8px 10px; font-size: 0.92rem;
  border: 1px solid var(--citui-line-strong); border-radius: 8px;
  background: var(--citui-surface); color: var(--citui-ink);
}
.con-fld input:focus { outline: none; border-color: var(--citui-cyan-500); }
.con-fld__src {
  display: block; margin-top: 3px; padding-left: 8px;
  border-left: 2px solid var(--citui-line);
  font-size: 0.72rem; color: var(--citui-muted); overflow-wrap: anywhere;
}

/* ── Module hub (admin-hub mock, owner decree 2026-08-23) ─────────────────────
   The console home is a MODULE GRID: every card carries its own submenu list and
   a "Modul megnyitása" foot — the top bar stays slim (module-level only), never
   a flat list of every function. Ported from the owner's approved mock. */
.con-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; position: relative; z-index: 1; }
.con-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px;
  border-radius: var(--citui-radius-pill); min-height: 32px;
  background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--citui-white); font-size: 12.5px; font-weight: 500; transition: var(--citui-transition);
}
.con-chip:hover { background: rgba(255, 255, 255, 0.18); text-decoration: none; color: var(--citui-white); }
.con-chip b { font-weight: 700; }
.con-chip .led { width: 7px; height: 7px; border-radius: 50%; background: var(--citui-cyan-400); }
.con-chip--warn .led { background: var(--citui-warn); }
.con-chip--bad .led { background: var(--citui-bad); }
.con-chip--ok .led { background: var(--citui-ok); }

.con-hubsearch {
  display: flex; align-items: center; gap: 10px; margin: 16px 0 14px; padding: 11px 15px;
  background: var(--citui-white); border: 1px solid var(--citui-line);
  border-radius: var(--citui-radius-pill); box-shadow: var(--citui-shadow-sm);
}
.con-hubsearch svg { color: var(--citui-muted); flex: none; }
.con-hubsearch input { flex: 1; border: 0; outline: 0; background: none; font-size: 14px; color: var(--citui-ink); min-width: 0; margin: 0; padding: 0; }
.con-hubsearch .hint { color: var(--citui-muted); font-size: 12px; white-space: nowrap; }

.con-modgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.con-mod {
  background: var(--citui-white); border: 1px solid var(--citui-line); border-radius: 18px;
  overflow: hidden; box-shadow: var(--citui-shadow-sm); display: flex; flex-direction: column;
  transition: var(--citui-transition);
}
.con-mod:hover { box-shadow: var(--citui-shadow-md); border-color: var(--citui-line-strong); transform: translateY(-2px); }
.con-mod__head { display: flex; gap: 12px; align-items: flex-start; padding: 16px 16px 12px; color: inherit; }
.con-mod__head:hover { text-decoration: none; }
.con-mod__ico {
  width: 42px; height: 42px; flex: none; border-radius: 13px; display: grid; place-items: center;
  color: var(--citui-white); background: linear-gradient(140deg, var(--citui-navy-800), var(--citui-navy-700));
}
.con-mod__t { display: block; font-family: var(--citui-font-display); font-weight: 600; font-size: 1.05rem; color: var(--citui-navy-900); }
.con-mod__role { display: block; color: var(--citui-muted); font-size: 12.5px; margin-top: 3px; }
.con-subs { list-style: none; margin: 0; padding: 0 8px 8px; display: flex; flex-direction: column; }
.con-sub {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px;
  border-radius: 11px; min-height: 42px; color: inherit; border: 1px solid transparent;
  transition: var(--citui-transition);
}
.con-sub:hover {
  text-decoration: none;
  background: color-mix(in srgb, var(--citui-cyan-400) 9%, transparent);
  border-color: color-mix(in srgb, var(--citui-cyan-500) 24%, transparent);
}
.con-sub__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--citui-cyan-500); flex: none; opacity: 0.55; }
.con-sub:hover .con-sub__dot { opacity: 1; }
.con-sub__n { font-size: 13px; font-weight: 500; flex: 1; min-width: 0; color: var(--citui-ink); }
.con-sub__n em { font-style: normal; background: color-mix(in srgb, var(--citui-cyan-400) 32%, transparent); border-radius: 4px; }
.con-sub .pill { margin-left: auto; }
.con-mod__foot { margin-top: auto; padding: 10px 16px 14px; border-top: 1px solid var(--citui-line); }
.con-mod__open { display: inline-flex; align-items: center; gap: 6px; color: var(--citui-link-ink); font-weight: 600; font-size: 12.5px; min-height: 32px; }

@media (max-width: 960px) { .con-modgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .con-modgrid { grid-template-columns: 1fr; } }

/* ── Partner header band (MineREAL reference, owner 2026-08-23) ──────────────
   One brand band: identity left (name, address, badges), compact KPI boxes
   right; the tab row rides directly under the band. */
.con-phead {
  background: var(--citui-white); border: 1px solid var(--citui-line);
  border-radius: 18px; box-shadow: var(--citui-shadow-sm); overflow: hidden; margin: 0 0 16px;
}
.con-phead__band {
  display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap;
  padding: 16px 20px;
  background: linear-gradient(120deg, var(--citui-navy-900), var(--citui-navy-700));
  border-bottom: 2px solid var(--citui-cyan-500); color: var(--citui-white);
}
.con-phead__id { min-width: 0; flex: 1 1 300px; }
.con-phead__id h1 {
  margin: 0; font-family: var(--citui-font-display); color: var(--citui-white);
  font-size: clamp(1.2rem, 2.4vw, 1.5rem); letter-spacing: -0.02em; line-height: 1.2;
}
.con-phead__sub { margin-top: 3px; font-size: 0.9rem; color: rgba(255, 255, 255, 0.75); }
.con-phead__badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.con .con-phead__badges .pill {
  background: rgba(255, 255, 255, 0.12); color: var(--citui-white);
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.con-phead__kpis { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; flex: 0 1 auto; }
.con-pkpi {
  min-width: 96px; padding: 9px 12px; border-radius: 12px; text-align: right;
  background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.16);
}
.con-pkpi__v { font-family: var(--citui-font-display); font-weight: 700; font-size: 1.06rem; line-height: 1.15; color: var(--citui-white); }
.con-pkpi__v .mut { color: rgba(255, 255, 255, 0.6); }
.con-pkpi__l { font-size: 10.5px; color: rgba(255, 255, 255, 0.65); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }
.con-phead .con-tabs { padding: 0 14px; margin: 0; border-bottom: 0; }
.con-phead__body { padding: 14px 20px 18px; }

/* KPI strip (MineREAL: db · érték · al-metrika boxes in one row) */
.con-kstrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 4px 0 14px; }
.con-kbox { border: 1px solid var(--citui-line); border-radius: 12px; padding: 10px 12px; background: var(--citui-white); }
.con-kbox__t { font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--citui-muted); }
.con-kbox__r { display: flex; gap: 10px; align-items: baseline; margin-top: 4px; flex-wrap: wrap; }
.con-kbox__v { font-family: var(--citui-font-display); font-weight: 700; font-size: 1.12rem; color: var(--citui-navy-900); }
.con-kbox__s { font-size: 11.5px; color: var(--citui-muted); }
.con-kbox--bad .con-kbox__v { color: var(--citui-bad-ink); }

/* Monthly breakdown chart (pure SVG bars) */
.con-chart { border: 1px solid var(--citui-line); border-radius: 12px; padding: 12px 14px; background: var(--citui-white); margin: 0 0 14px; }
.con-chart__t { font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--citui-muted); margin-bottom: 6px; }

/* ── Column-filter table header (MineREAL kereső) ──────────────────────────
   A second thead row of per-column controls: the fastest path to any document. */
.con .colf th { padding: 6px 8px; background: var(--citui-surface-2); border-top: 0; }
.con .colf input, .con .colf select {
  width: 100%; min-width: 72px; box-sizing: border-box;
  padding: 5px 8px; font-size: 12px; border-radius: 8px; margin: 0;
}
.con .colf input[type="date"] { min-width: 116px; }

/* Band badges: the <code> inside a band pill must not bring its light surface
   background under white text (invisible tax number, 2026-08-23). */
.con .con-phead__badges .pill code { background: transparent; color: inherit; padding: 0; }
/* Column-filter date pair stacks inside its cell, never bleeds into neighbours. */
.con .colf .colf-stack { display: flex; flex-direction: column; gap: 4px; }


/* ── MOCK COPY PANEL (ADR-0065 approved plan: assets/design-refs/console/) ─────────
   The generated selling copy, side by side with what the property's own listing says
   it offers. Container queries, not media queries: the panel lives inside the tab
   column, so it must react to ITS width, not the window's. */
.cp-panel { container-type: inline-size; }
.cp-scale {
  display: flex; align-items: center; gap: 10px; background: var(--citui-white);
  border: 1px solid var(--citui-line); border-radius: var(--citui-radius);
  padding: 14px 16px; margin-bottom: 12px;
}
.cp-scale .cp-cell { display: flex; gap: 10px; align-items: center; flex: 1; min-width: 0; }
.cp-scale .cp-sep { width: 1px; align-self: stretch; background: var(--citui-line); }
.cp-scale .cp-n {
  font-family: var(--citui-font-display); font-size: 1.85rem; font-weight: 600; line-height: 1;
}
.cp-scale .cp-n.good { color: var(--citui-ok-ink); }
.cp-scale .cp-n.miss { color: var(--citui-warn-ink); }
.cp-scale .cp-t { font-size: 0.78rem; color: var(--citui-muted); line-height: 1.35; }

.cp-doc { background: var(--citui-white); border: 1px solid var(--citui-line);
  border-radius: var(--citui-radius); padding: 16px 18px; }
.cp-eyebrow { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--citui-muted); margin: 0 0 6px; }
.cp-lead { font-family: var(--citui-font-display); font-size: 1.5rem; line-height: 1.15;
  margin: 0 0 10px; font-weight: 600; }
.cp-lead em { font-style: italic; color: var(--citui-link-ink); }
.cp-tag { font-size: 0.98rem; margin: 0 0 10px; line-height: 1.45; }
.cp-intro { font-size: 0.86rem; line-height: 1.65; color: var(--citui-ink);
  opacity: 0.82; margin: 0 0 12px; }
.cp-hl { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.cp-hl li { display: flex; gap: 8px; align-items: flex-start; font-size: 0.86rem; line-height: 1.45; }
.cp-hl svg { flex: none; margin-top: 3px; color: var(--citui-cyan-500); }

.cp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px;
  border-radius: var(--citui-radius-pill); font-size: 0.8rem; border: 1px solid;
  font-family: inherit; min-height: 32px; background: none; }
.cp-chip.used { background: var(--citui-ok-soft); color: var(--citui-ok-ink);
  border-color: color-mix(in srgb, var(--citui-ok) 30%, transparent); cursor: default; }
.cp-chip.miss { background: color-mix(in srgb, var(--citui-warn) 12%, var(--citui-white));
  color: var(--citui-warn-ink);
  border-color: color-mix(in srgb, var(--citui-warn) 40%, transparent);
  cursor: pointer; transition: transform var(--citui-transition), box-shadow var(--citui-transition); }
.cp-chip.miss:hover { transform: translateY(-1px); box-shadow: var(--citui-shadow-sm); }
.cp-chip.miss[aria-pressed="true"] {
  background: var(--citui-navy-900); color: var(--citui-ink-inverse); border-color: var(--citui-navy-900); }
.cp-chip .cp-pl { font-weight: 700; font-size: 0.95rem; line-height: 1; }

.cp-verdicts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.cp-v { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px;
  border-radius: var(--citui-radius-pill); font-size: 0.8rem; font-weight: 600;
  border: 1px solid transparent; cursor: pointer; background: none; font-family: inherit;
  min-height: 32px; }
.cp-v.ok { background: var(--citui-ok-soft); color: color-mix(in srgb, var(--citui-ok) 78%, var(--citui-ink));
  border-color: color-mix(in srgb, var(--citui-ok) 30%, transparent); }
.cp-v.bad { background: color-mix(in srgb, var(--citui-bad) 10%, var(--citui-white));
  color: color-mix(in srgb, var(--citui-bad) 80%, var(--citui-ink));
  border-color: color-mix(in srgb, var(--citui-bad) 30%, transparent); }
.cp-v .cp-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.cp-why { display: none; margin: -6px 0 12px; padding: 11px 13px; background: var(--citui-white);
  border: 1px solid var(--citui-line); border-left: 3px solid var(--citui-ok);
  border-radius: var(--citui-radius-sm); font-size: 0.82rem; line-height: 1.55; color: var(--citui-muted); }
.cp-why.open { display: block; }
/* Outcome of the last text rewrite — success, or the reason it failed (ADR: the
   2026-09-07 silent-failure fix; a background job must be able to speak). */
.cp-outcome { display: flex; gap: 9px; align-items: flex-start; font-size: 0.84rem;
  line-height: 1.5; font-weight: 500; }
.cp-outcome svg { flex: none; margin-top: 1px; }
.cp-outcome.ok { border-color: color-mix(in srgb, var(--citui-ok) 35%, transparent);
  background: var(--citui-ok-soft); color: color-mix(in srgb, var(--citui-ok) 80%, var(--citui-ink)); }
.cp-outcome.bad { border-color: color-mix(in srgb, var(--citui-bad) 38%, transparent);
  background: color-mix(in srgb, var(--citui-bad) 9%, var(--citui-white));
  color: color-mix(in srgb, var(--citui-bad) 82%, var(--citui-ink)); }
.cp-hint { font-size: 0.78rem; color: var(--citui-muted); margin: 8px 0 0; line-height: 1.5; }

@container (min-width: 720px) {
  .cp-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; }
  .cp-lead { font-size: 2rem; }
  .cp-scale .cp-n { font-size: 2.3rem; }
}

/* ── SOURCE PANEL — "Honnan tudjuk?" (ADR-0106 ⑥; approved plan:
   assets/design-refs/console/source-panel/) ─────────────────────────────────
   The generation-time source map of the latest mock: inventory cards, then the
   text-element → fact-chip → verbatim-quote chain, then the warning strip.
   Container queries (the panel reacts to ITS column, not the window). */
.sp-panel { container-type: inline-size; }
.sp-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.sp-head h2 { margin: 0; }
.sp-probl { display: flex; align-items: center; gap: 6px; font-size: 0.8rem;
  color: var(--citui-muted); cursor: pointer; user-select: none; }
.sp-probl input { accent-color: var(--citui-cyan-500); }

.sp-srcgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
@container (min-width: 720px) { .sp-srcgrid { grid-template-columns: repeat(4, 1fr); } }
.sp-src { border: 1px solid var(--citui-line); border-radius: var(--citui-radius-sm);
  padding: 11px 13px; background: var(--citui-surface); }
.sp-src.missing { background: var(--citui-white); border-style: dashed; }
.sp-src h3 { margin: 0 0 5px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--citui-muted); display: flex; gap: 6px; align-items: center; }
.sp-src .sp-v { font-family: var(--citui-font-display); font-size: 0.95rem; font-weight: 600; }
.sp-src.missing .sp-v { color: var(--citui-muted); font-weight: 500; }
.sp-src .sp-d { font-size: 0.76rem; color: var(--citui-muted); margin-top: 4px; line-height: 1.45; }

.sp-sect-t { margin: 0 0 8px; font-weight: 700; }
.sp-elem { border: 1px solid var(--citui-line); border-radius: var(--citui-radius-sm);
  margin-bottom: 10px; overflow: hidden; background: var(--citui-white); }
.sp-elem-h { padding: 9px 13px; background: var(--citui-surface-2); font-size: 0.82rem; }
.sp-elem-h .sp-lbl { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--citui-muted); display: block; margin-bottom: 3px; }
.sp-elem-h .sp-txt { font-style: italic; }
.sp-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 9px 13px; }
.sp-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem;
  border-radius: var(--citui-radius-pill); padding: 5px 12px; min-height: 30px;
  border: 1px solid var(--citui-line-strong); background: var(--citui-white);
  cursor: pointer; font-family: inherit; color: var(--citui-ink); }
.sp-chip.open { background: var(--citui-surface-2); }
.sp-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; display: inline-block; }
.sp-chip[data-src="portal"] .sp-dot, .sp-legend .sp-dot[data-src="portal"] { background: var(--citui-navy-700); }
.sp-chip[data-src="guest"] .sp-dot, .sp-legend .sp-dot[data-src="guest"] { background: var(--citui-cyan-500); }
.sp-chip[data-src="owner"] .sp-dot, .sp-legend .sp-dot[data-src="owner"] { background: var(--citui-ok); }
.sp-chip[data-src="none"] { border-color: var(--citui-bad); }
.sp-chip[data-src="none"] .sp-dot, .sp-legend .sp-dot[data-src="none"] { background: var(--citui-bad); }
.sp-quote { display: none; margin: 0 13px 11px; padding: 9px 12px;
  border-left: 3px solid var(--citui-cyan-500); background: var(--citui-surface);
  font-size: 0.78rem; color: var(--citui-navy-700); border-radius: 0 10px 10px 0; line-height: 1.5; }
.sp-quote b { display: block; font-size: 0.68rem; color: var(--citui-muted); font-weight: 600; margin-bottom: 3px; }
.sp-quote.show { display: block; }

.sp-warn { display: flex; gap: 8px; align-items: center; border-radius: var(--citui-radius-sm);
  padding: 9px 13px; font-size: 0.82rem; font-weight: 500; margin-top: 12px; }
.sp-warn.ok { background: var(--citui-ok-soft); color: var(--citui-ok-ink); }
.sp-warn.bad { background: color-mix(in srgb, var(--citui-bad) 10%, var(--citui-white));
  color: color-mix(in srgb, var(--citui-bad) 80%, var(--citui-ink)); }
.sp-warn svg { flex: none; }
.sp-miss { margin-top: 10px; border: 1px solid var(--citui-line); border-radius: var(--citui-radius-sm);
  padding: 9px 13px; font-size: 0.78rem; line-height: 1.5; }
.sp-miss b { color: var(--citui-warn-ink); }
.sp-miss span { color: var(--citui-muted); }
.sp-legend { display: flex; gap: 14px; margin-top: 12px; font-size: 0.72rem;
  color: var(--citui-muted); flex-wrap: wrap; }
.sp-legend i { display: inline-flex; align-items: center; gap: 5px; font-style: normal; }

/* "csak a problémák": the healthy inventory folds away, warnings stay. */
.sp-panel.problems-only .sp-srcgrid, .sp-panel.problems-only .sp-legend,
.sp-panel.problems-only .sp-sect-t, .sp-panel.problems-only .sp-elem:not(.has-problem) { display: none; }

/* ── Súgó (ADR-0045/e): contextual help entry + searchable KB page ──────────
   .con-help sits inline in a screen heading — ≥30px tap target (mobile-first,
   the operator works from a phone). Token-driven, no raw colors. */
.con-help {
  display: inline-grid; place-items: center; width: 30px; height: 30px;
  border: 1px solid var(--citui-line); border-radius: 50%;
  color: var(--citui-muted); vertical-align: middle; margin-left: 6px; opacity: 0.8;
}
.con-help:hover { opacity: 1; border-color: var(--citui-cyan-500); color: var(--citui-link-ink); }
/* ⛔ SÖTÉT SÁVON az alap `.con-help` olvashatatlan: navy-900-on a muted ink kontrasztja ~2,2, a
   keret pedig `rgba(14,42,71,.12)` — vagyis LÁTHATATLAN. A partner-lap fejléce ugyanolyan navy
   gradiens, mint a hero, ezért ugyanazt az inverz kezelést kapja. Mérve, nem feltételezve
   (a súgó-ikon pótlásakor, 2026-09-13); az őr a kontrasztot SZÁMOLJA, nem szemre nézi. */
/* ⚠️ A SZELEKTOR-SÚLY ITT NEM DÍSZ: a fenti `.con a.con-help` (0,2,1) VERNÉ a rövidebb
   `.con-hero .con-help` (0,2,0) alakot — mérve: a partner-lap ikonja muted maradt a navy
   sávon, 3,03 kontraszttal. Vagyis a specificitás-csapda javítása ELŐÁLLÍTOTTA a következő
   csapdát, egy szinttel feljebb. Ezért a sötét-felület szabály (0,3,1). */
.con .con-hero a.con-help,
.con .con-phead__band a.con-help {
  border-color: rgba(255, 255, 255, 0.45); color: var(--citui-white); opacity: 1;
}
.con .con-phead__band a.con-help:hover { border-color: var(--citui-cyan-400); color: var(--citui-cyan-300); }
/* ⛔ SPECIFICITÁS-CSAPDA, mérve: a `.con form { display: inline }` (0,1,1) VERI a
   `.con-kb-search { display: flex }`-et (0,1,0), ezért a kereső nem a panel szélességét
   vette fel, hanem a tartalmára zsugorodott (~200 px) — és a 274 px-es helyőrző
   elvágódott: „Mit keresel? (pl. mock,". A tünet a kereső SZÖVEGÉNEK látszott, az oka egy
   szomszédos szabály volt. Ugyanaz a minta, mint a `.con a` ↔ gomb-szín ütközésnél. */
.con form.con-kb-search { display: flex; gap: 8px; margin: 4px 0 14px; flex-wrap: wrap; }
/* ⛔ Telefonon a teljes szélesség SEM elég: a gomb mellett a mező ~200 px marad. Ezért
   keskenyen a mező egész sort kap, a gomb alá kerül. (A saját vázlatomon mérve.) */
.con-kb-search input[type="search"] { flex: 1 1 100%; min-width: 0; }
.con-kb-search button { margin-left: auto; }
/* Approved plan (design-refs/console/help-start): two-pane help center — the topic list
   stays visible beside the article on desktop; single column on phone. */
.con-kb-cols { display: block; }
@media (min-width: 720px) {
  .con-kb-search input[type="search"] { flex: 1 1 auto; }
  .con-kb-search button { margin-left: 0; }
  /* 300 → 360 px: négy csoportnév két sorba tört a keskeny hasábban, miközben mellette a
     képernyő nagyobbik fele üresen állt. */
  .con-kb-cols { display: grid; grid-template-columns: 360px 1fr; gap: 22px; align-items: start; }
  .con-kb-side { position: sticky; top: 70px; }
  .con-kb-art { border-left: 1px solid var(--citui-line); padding-left: 22px; min-height: 320px; }
}
.con-kb-toc { display: flex; flex-direction: column; gap: 6px; }
.con-kb-toc a {
  display: block; padding: 10px 12px; border-radius: 10px; text-decoration: none;
  border: 1px solid transparent; color: inherit;
}
.con-kb-toc a:hover { border-color: var(--citui-cyan-500); }
.con-kb-toc a.act {
  background: color-mix(in srgb, var(--citui-cyan-500) 12%, var(--citui-white));
  border-color: color-mix(in srgb, var(--citui-cyan-500) 40%, transparent);
  font-weight: 600;
}
.con-kb-toc a small { display: block; color: var(--citui-muted); font-weight: 400; margin-top: 2px; }
/* Összecsukható csoport (jóváhagyott terv „A", 2026-09-12): a fejléc `<summary>`, hogy
   a nyitás/csukás JS nélkül is működjön. A natív háromszöget elrejtjük — a saját chevron
   forog helyette. */
.con-kb-ghead {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--citui-muted); margin: 10px 0 2px; padding: 6px 12px 0;
  border-top: 1px solid var(--citui-line);
}
.con-kb-toc .con-kb-g:first-child .con-kb-ghead { border-top: 0; margin-top: 0; padding-top: 0; }
summary.con-kb-ghead {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 10px 12px 10px; list-style: none; user-select: none;
}
summary.con-kb-ghead::-webkit-details-marker { display: none; }
summary.con-kb-ghead:hover { color: var(--citui-ink); }
summary.con-kb-ghead .n {
  font-weight: 700; font-size: 0.7rem; letter-spacing: 0; color: var(--citui-muted);
  background: var(--citui-surface-2); border-radius: var(--citui-radius-pill); padding: 1px 8px;
}
summary.con-kb-ghead .cv { margin-left: auto; flex: 0 0 auto; transition: transform 0.18s; }
details[open] > summary.con-kb-ghead .cv { transform: rotate(180deg); }
details[open] > summary.con-kb-ghead { color: var(--citui-ink); }
/* ⛔ A `display:flex` ERŐSEBB, mint a `[hidden]` böngésző-alapértelmezése (0,1,0 vs 0,0,0):
   enélkül JS nélkül HALOTT gombpár látszik. Mérve az őrrel, nem feltételezve. */
.con-kb-tools[hidden]{display:none}
/* ⛔ A dizájn-mag globális `img, svg { display: block }` resetje egy MONDATBA tett
   ikont kitör a sorból: a súgó bevezetőjében az ikon külön sorban állt, a mondat
   három sorra szakadt (Elek FK-000 kézi lépésén mérve). A resethez nem nyúlunk —
   ott van értelme —, csak ahol az ikon a szöveg RÉSZE. */
.con-inline-ic svg { display: inline; vertical-align: -2px; }
/* A csoport-jelölés ne törjön két sorba a keskeny TOC-oszlopban. */
summary.con-kb-ghead .tag { white-space: nowrap; }
/* A darabszám és a gombpár EGY soron, a lista fölött — a gombpár arra hat, ami alatta van.
   ⚠️ A `.con-kb-tools` display-értéke NEM kaphat magasabb specificitást a `[hidden]`-nél
   (0,2,0), különben JS nélkül halott gombpár jelenne meg; ezért a sor a SZÜLŐN flex. */
.con-kb-bar {
  display: flex; gap: 10px; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; margin: 2px 0 4px;
}
.con-kb-tools {
  display: flex; gap: 6px; align-items: center; justify-content: flex-end;
  font-size: 0.8rem; color: var(--citui-muted); margin: 0;
}
.con-kb-tools button {
  font: inherit; font-weight: 600; cursor: pointer; background: none; border: 0; padding: 0;
  color: var(--citui-navy-900); text-decoration: underline;
}
/* ⛔ A jelölés a KÁRTYA fejlécén is pirula kell legyen: pirula nélkül a nagybetűs
   csoportcím FOLYTATÁSAKÉNT olvasódott („AZ OLDALAM ÜGYFÉL IS LÁTJA"), vagyis a témakör
   nevének látszott. Mérve az indulólapon; a szabály eddig csak a lista-fejlécre állt. */
.con-kb-ghead .tag, .con-kb-sc h3 .tag {
  display: inline-block; border-radius: var(--citui-radius-pill); padding: 1px 8px;
  background: color-mix(in srgb, var(--citui-cyan-500) 14%, var(--citui-white));
  border: 1px solid color-mix(in srgb, var(--citui-cyan-500) 40%, transparent);
  letter-spacing: 0; text-transform: none; font-weight: 600; font-size: 0.65rem;
  color: var(--citui-ink); white-space: nowrap;
}
.con-kb-art { margin-top: 14px; }
@media (min-width: 720px) { .con-kb-art { margin-top: 0; } }
.con-kb-empty {
  color: var(--citui-muted); font-size: 0.9rem; padding: 30px 10px; text-align: center;
  border: 1px dashed var(--citui-line); border-radius: 12px;
}
/* INDULÓLAP (jóváhagyott terv „C", 2026-09-13): a jobb hasáb érkezéskor témakör-kártyákat
   mutat MINDEN cikkcímmel, nem egy „Válassz témát…" felszólítást 500 px üresség fölött.
   ⛔ TELEFONON REJTVE: ott a lista maga az indulólap, a kártya ugyanazoknak a címeknek a
   második példánya lenne egy képernyőn. A kétszintű modell jelölése („ügyfél is látja”)
   a kártyán is ott marad. */
.con-kb-start, .con-kb-startlead { display: none; }
@media (min-width: 720px) {
  /* Az eligazító mondat is csak ott jelenik meg, ahol a kártyák — telefonon nincs jobb hasáb,
     amire mutatna. */
  .con-kb-startlead { display: block; margin: 0 0 12px; }
  /* ⛔ `align-items: start`: enélkül a rács minden kártyáját a sor LEGMAGASABBIKÁHOZ nyújtja, és
     a rövid témakörök alatt 95–294 px üresség marad (Elek FK-000 mérése). A kártya legyen
     akkora, amekkora a tartalma. */
  .con-kb-start { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
}
@media (min-width: 1100px) {
  .con-kb-start { grid-template-columns: 1fr 1fr 1fr; }
}
.con-kb-sc {
  border: 1px solid var(--citui-line); border-radius: 12px; padding: 12px 14px;
  background: var(--citui-white);
}
.con-kb-sc h3 {
  margin: 0 0 7px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--citui-muted);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.con-kb-sc ul { margin: 0; padding: 0; list-style: none; }
.con-kb-sc li a {
  display: block; text-decoration: none; color: inherit; font-size: 0.87rem; padding: 5px 0;
  border-bottom: 1px solid var(--citui-line);
}
.con-kb-sc li:last-child a { border-bottom: 0; }
.con-kb-sc li a:hover { color: var(--citui-link-ink); }
.con-kb-article h1 { font-size: 1.25rem; margin: 8px 0 4px; }
.con-kb-article h3 { font-size: 1.02rem; margin: 20px 0 6px; }
.con-kb-article p { margin: 8px 0; line-height: 1.55; }
.con-kb-article ul, .con-kb-article ol { padding-left: 20px; margin: 8px 0; }
.con-kb-article li { margin: 6px 0; line-height: 1.5; }
.con-kb-article img {
  max-width: 100%; border: 1px solid var(--citui-line); border-radius: 12px; display: block;
}

/* ── Module-sales (frozen plan: assets/design-refs/console/pricing-sales) ──
   Dense, stripe-free rows (owner rejected two airier rounds): short right-
   aligned inputs, two-column module grid, a toggle per module. Tokens only. */
.con-nav__it { position: relative; display: inline-flex; }
.con-nav__it > a { display: inline-flex; }
.con-dd {
  display: none; position: absolute; top: 100%; left: 0; min-width: 230px;
  background: var(--citui-white); border: 1px solid var(--citui-line-strong);
  border-radius: var(--citui-radius-sm); box-shadow: var(--citui-shadow-sm);
  padding: 6px; z-index: 60;
}
.con-nav__it:hover .con-dd, .con-nav__it:focus-within .con-dd { display: block; }
/* ⛔ The nav is a horizontal SCROLL container on phones (`overflow-x:auto`, from
   the mobile header fix) — and an overflow ancestor CLIPS an absolutely
   positioned descendant. The dropdown therefore rendered (display:block, and
   Playwright could even click it) but was cut to the 36px nav strip and was
   NEVER PAINTED: `elementFromPoint` at its centre returned the page content
   behind it. Above the phone breakpoint the nav always fits, so it needs no
   scroll container; `wrap` keeps a narrow desktop window from hiding items now
   that they can no longer scroll. */
@media (min-width: 761px) {
  .con-nav { overflow: visible; flex-wrap: wrap; }
}
.con-nav .con-dd a { display: block; color: var(--citui-ink); padding: 7px 10px; border-radius: 9px; }
.con-nav .con-dd a:hover { background: var(--citui-surface-2); color: var(--citui-ink); }
.con-dd__sep { border-top: 1px solid var(--citui-line); margin: 5px 4px; }

/* ── Díjcsomagok (owner request 2026-09-07): what each tier costs and contains.
   The nesting rule ("everything from the smaller tier is in the bigger one") is
   SHOWN, not merely stated: inherited modules are muted, the tier's own
   additions are solid. Compact, stripe-free — same language as the rest of the
   page (frozen plan: design-refs/console/pricing-sales). Tokens only. */
.pr-tiers { display: grid; gap: 10px; grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 860px) { .pr-tiers { grid-template-columns: 1fr; } }
.pr-tier {
  border: 1px solid var(--citui-line); border-radius: 12px;
  background: var(--citui-surface-2); padding: 11px 13px;
}
.pr-tier__head { display: flex; align-items: baseline; gap: 8px; }
.pr-tier__head b { font-size: 1rem; }
.pr-tier__price {
  margin-left: auto; font-weight: 700; font-size: 1.02rem; white-space: nowrap;
  color: var(--citui-ink);
}
.pr-tier__price i { font-style: normal; font-weight: 500; font-size: .78rem; color: var(--citui-muted); }
.pr-tier__note { font-size: .82rem; color: var(--citui-muted); margin-top: 1px; }
.pr-tier__sub { font-size: .76rem; color: var(--citui-muted); margin-top: 4px; }
.pr-tier__inh, .pr-tier__plus {
  margin-top: 9px; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--citui-muted);
}
.pr-tier__chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.pr-tier__chip {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 2px 8px; border-radius: 999px; font-size: .78rem;
  border: 1px solid var(--citui-line-strong); background: var(--citui-white); color: var(--citui-ink);
}
.pr-tier__chip i { font-style: normal; font-size: .72rem; color: var(--citui-muted); }
.pr-tier__chip b {
  font-weight: 600; font-size: .68rem; text-transform: uppercase; color: var(--citui-warn-ink);
}
/* inherited from the smaller tier — present, but not this tier's news */
.pr-tier__chip--inh {
  background: transparent; border-style: dashed; color: var(--citui-muted);
}

.pr-modgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 26px; }
@media (max-width: 760px) { .pr-modgrid { grid-template-columns: 1fr; } }
.pr-mod { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.pr-mod__name { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.pr-mod__why { display: none; flex-basis: 100%; font-size: 11px; color: var(--citui-warn-ink); }
.pr-mod__price { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.pr-mod__price input {
  width: 76px; padding: 3px 7px; text-align: right; font: inherit;
  border: 1px solid var(--citui-line-strong); border-radius: 8px;
}
.pr-mod__u { color: var(--citui-muted); font-size: 11.5px; width: 64px; }
/* .off = the SAVED state; :has() mirrors it live on click, before the save */
.pr-mod.off .pr-mod__n,
.pr-mod:has(.con-sell input:not(:checked)) .pr-mod__n { text-decoration: line-through; color: var(--citui-muted); }
.pr-mod.off .pr-mod__why,
.pr-mod:has(.con-sell input:not(:checked)) .pr-mod__why { display: block; }
.pr-mod.off .pr-mod__price,
.pr-mod:has(.con-sell input:not(:checked)) .pr-mod__price { opacity: 0.45; }
.pr-mod:has(.con-sell input:checked) .pr-mod__n { text-decoration: none; color: inherit; }
.pr-mod:has(.con-sell input:checked) .pr-mod__why { display: none; }
.pr-mod:has(.con-sell input:checked) .pr-mod__price { opacity: 1; }

.con-sell { position: relative; display: inline-flex; flex: 0 0 auto; cursor: pointer; }
.con-sell input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.con-sell__track {
  width: 30px; height: 17px; border-radius: var(--citui-radius-pill);
  background: var(--citui-ok); position: relative; transition: background 0.15s;
}
.con-sell__track::after {
  content: ""; position: absolute; top: 2px; left: 15px; width: 13px; height: 13px;
  border-radius: 50%; background: var(--citui-white); transition: left 0.15s;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--citui-navy-950) 25%, transparent);
}
.con-sell input:not(:checked) + .con-sell__track { background: color-mix(in srgb, var(--citui-muted) 45%, var(--citui-white)); }
.con-sell input:not(:checked) + .con-sell__track::after { left: 2px; }

/* ── NYITÓKÉP-VÁLASZTÓ (jóváhagyott terv: assets/design-refs/console/hero-override/) ──
   A motor ítélete javaslat; a döntés az emberé. A sáv a mock-panelen ül, közvetlenül a
   Nyitókép-ítélet alatt — ott, ahol a kurátor a mockot bírálja. Container query, nem
   media query: a panel a fül-oszlopban él, a SAJÁT szélességére kell reagálnia. */
.hp-wrap { margin: 0 0 14px; }
.hp-row { display: grid; gap: 12px; }
.hp-cur { position: relative; margin: 0; }
.hp-cur img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block;
  border-radius: var(--citui-radius); border: 2px solid var(--citui-cyan-500); }
.hp-cur figcaption { font-size: 0.76rem; color: var(--citui-muted); line-height: 1.45; margin-top: 6px; }
.hp-tag { position: absolute; left: 8px; top: 8px; z-index: 1; background: var(--citui-navy-900);
  color: var(--citui-ink-inverse); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em;
  padding: 3px 9px; border-radius: var(--citui-radius-pill); }
.hp-alts { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
/* ⛔ MÉRVE (2026-09-11): a bélyeg `type="submit"` gomb, ezért a
   `.con button[type=submit]` ELSŐDLEGES-gomb szabálya (navy gradiens + 7px/14px
   pill-padding) FELÜLÍRTA a csempét — 107 px-es sötét keretben ült egy 77 px-es kép,
   a feliratok navy háttéren. Specificitás-kérdés (0,1,1 > 0,1,0), nem ízlésé: a csempe
   KÉP, nem gomb-alakú akció. Ezért `.con .hp-alt`. */
.con .hp-alt { position: relative; padding: 0; min-height: 0;
  border: 1px solid var(--citui-line); background: var(--citui-white); color: var(--citui-ink);
  border-radius: var(--citui-radius-sm); overflow: hidden; cursor: pointer; text-align: left;
  font-family: inherit; font-weight: 400;
  transition: border-color var(--citui-transition), transform var(--citui-transition); }
.con .hp-alt:hover { border-color: var(--citui-cyan-500); transform: translateY(-1px); }
.hp-alt img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.hp-sc { position: absolute; right: 4px; top: 4px; font-size: 0.62rem; font-weight: 700;
  padding: 2px 6px; border-radius: var(--citui-radius-pill); color: var(--citui-ink-inverse);
  background: color-mix(in srgb, var(--citui-navy-950) 78%, transparent); }
/* KITÖLTÖTT jelvény: itt a felirat ÜL a színen, tehát a HÁTTÉR kapja a sötétebb
   változatot — a fehér szám a mai piroson 2,85 volt. */
.hp-sc.low { background: var(--citui-bad-ink); }
.hp-subj { display: block; font-size: 0.62rem; color: var(--citui-muted); padding: 3px 5px 4px; }
.hp-form.busy { opacity: 0.6; pointer-events: none; }

/* ── „NEM TÖLTHETŐ BE" / „KIZÁRVA" — a csempe MONDJA MEG, mi a baj (FK-003b ①) ───────
   A „nem ítélt" a VERDIKT hiányáról szól; a betöltési hiba és a hirdetés-kizárás
   MÁS állítás, ezért saját sort kap, nem ugyanazt a feliratot. */
.hp-dead[hidden], .hp-deadsum[hidden] { display: none; }
.hp-dead {
  display: block; margin: 0; padding: 3px 5px 5px; font-size: 0.62rem; line-height: 1.35;
  color: var(--citui-bad-ink); background: color-mix(in srgb, var(--citui-bad) 8%, transparent);
}
.hp-cur .hp-dead { font-size: 0.72rem; padding: 5px 7px; border-radius: var(--citui-radius-sm); margin-top: 5px; }
.hp-deadsum {
  margin-top: 10px; padding: 8px 11px; font-size: 0.8rem; font-weight: 600;
  color: var(--citui-bad-ink); border-radius: var(--citui-radius);
  background: color-mix(in srgb, var(--citui-bad) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--citui-bad) 30%, transparent);
}
/* ── KÉP-KAPU a JÓVÁHAGYÁSON és a KÖVETETT LINKEN (ADR-0134) ──────────────────────
   A megtagadás nem néma és nem felugró: a kártyán marad, kiírja MELYIK kép, MIÉRT,
   és mi a következménye a leadnél. A „tudomásul veszem" ezért NEM elsődleges gomb —
   a rendes kiút az újragenerálás. */
.pg-box {
  margin-top: 10px; padding: 11px 13px; border-radius: var(--citui-radius);
  background: color-mix(in srgb, var(--citui-bad) 7%, var(--citui-white));
  border: 1px solid color-mix(in srgb, var(--citui-bad) 38%, transparent);
}
.pg-head { display: flex; align-items: center; gap: 7px; font-weight: 700; color: var(--citui-bad-ink); font-size: 0.86rem; }
.pg-lead { margin: 7px 0 0; font-size: 0.82rem; font-weight: 600; line-height: 1.45; }
.pg-list { margin: 8px 0 0; padding-left: 18px; font-size: 0.76rem; line-height: 1.45; }
.pg-list li { margin-bottom: 6px; }
.pg-why { color: var(--citui-bad-ink); font-weight: 600; }
.pg-next { margin: 9px 0 0; font-size: 0.78rem; line-height: 1.5; color: var(--citui-navy-800); }
.pg-ack { margin-top: 9px; }
/* ── KÉP NÉLKÜLI lap: a kivétel KÉT LÉPÉSBEN (ADR-0150, jóváhagyott terv „B") ──────
   A kép nélküli kiküldés nem lehet az alapút: a `<details>` mögé zárjuk (JS nélkül is
   működik), és az indoklás KÖTELEZŐ — a gombot a számláló tiltja, a garancia a szerver. */
.pg-exc { margin-top: 10px; }
.pg-exc > summary {
  cursor: pointer; font-size: 0.78rem; font-weight: 600; color: var(--citui-navy-800);
  padding: 6px 11px; border-radius: var(--citui-radius-pill); width: fit-content;
  border: 1px solid var(--citui-line-strong); background: transparent; list-style: none;
}
.pg-exc > summary::-webkit-details-marker { display: none; }
.pg-exc > summary:hover { border-color: var(--citui-bad); color: var(--citui-bad-ink); }
.pg-form {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--citui-bad) 22%, transparent);
}
.pg-form label { display: block; font-size: 0.76rem; font-weight: 700; color: var(--citui-navy-800); margin-bottom: 5px; }
.pg-req { color: var(--citui-bad-ink); }
.pg-fields { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.pg-form textarea {
  flex: 1 1 320px; min-width: 0; font: inherit; font-size: 0.8rem; line-height: 1.45;
  padding: 8px 10px; border-radius: var(--citui-radius-sm);
  border: 1px solid var(--citui-line-strong); background: var(--citui-white);
  color: var(--citui-ink); resize: vertical; min-height: 60px;
}
.pg-count { margin: 5px 0 0; font-size: 0.72rem; color: var(--citui-muted); }
.pg-count.short { color: var(--citui-bad-ink); font-weight: 600; }
.pg-err { margin: 8px 0 0; font-size: 0.78rem; font-weight: 700; color: var(--citui-bad-ink); }
/* MOBIL: a mező és a gomb egymás alá, a gomb teljes szélességű hüvelykujj-cél. */
@media (max-width: 560px) {
  .pg-fields { flex-direction: column; gap: 7px; }
  .pg-form textarea { flex: 1 1 auto; width: 100%; }
  .pg-fields button { width: 100%; }
}
/* A kattintás ELŐTTI figyelmeztetés a gombsorban — nem gomb, csak mondat. */
.pg-pre[hidden] { display: none; }
.pg-pre {
  display: inline-block; align-self: center; font-size: 0.76rem; font-weight: 600;
  line-height: 1.35; color: var(--citui-bad-ink); padding: 4px 8px;
  border-radius: var(--citui-radius-sm);
  background: color-mix(in srgb, var(--citui-bad) 9%, transparent);
}
/* A kizárt kép LÁTSZIK (a néma eltüntetés „nem is volt ott"-nak olvasódna), de nem
   választható: tompítva, áthúzott kurzorral, gomb nélkül. */
.hp-alt.is-excluded { display: block; cursor: not-allowed; opacity: 0.55; }
.hp-alt.is-excluded:hover { border-color: var(--citui-line); transform: none; }
.hp-alt.is-excluded .hp-subj { color: var(--citui-bad-ink); font-weight: 600; }
.hp-note { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between;
  background: var(--citui-ok-soft); border: 1px solid color-mix(in srgb, var(--citui-ok) 35%, transparent);
  border-radius: var(--citui-radius); padding: 9px 12px; font-size: 0.8rem; margin-bottom: 10px; }
.hp-undo { background: none; border: 0; font: inherit; font-size: 0.8rem; text-decoration: underline;
  cursor: pointer; color: var(--citui-navy-800); padding: 0; }
.hp-warnbox { background: color-mix(in srgb, var(--citui-warn) 12%, var(--citui-white));
  border: 1px solid color-mix(in srgb, var(--citui-warn) 42%, transparent);
  border-radius: var(--citui-radius); padding: 11px 13px; font-size: 0.82rem; line-height: 1.5; margin-top: 10px; }
.hp-warnrow { display: flex; gap: 8px; margin-top: 9px; }
/* Fotók fül: ugyanaz az igazság, több hellyel (jóváhagyott terv "B" változata). */
.lead-photos .hp-cell { position: relative; }
.lead-photos .hp-meta { font-size: 0.7rem; color: var(--citui-muted); line-height: 1.4; padding: 5px 2px 0; }
.lead-photos .hp-pick { width: 100%; margin-top: 5px; border: 1px solid var(--citui-line);
  background: var(--citui-surface-2); border-radius: var(--citui-radius-sm); font: inherit;
  font-size: 0.72rem; font-weight: 600; padding: 6px 4px; cursor: pointer; color: var(--citui-ink); }
.lead-photos .hp-pick:hover { background: var(--citui-cyan-300); }
.lead-photos .hp-pick[disabled] { background: var(--citui-navy-900); color: var(--citui-ink-inverse);
  border-color: var(--citui-navy-900); cursor: default; }

@container (min-width: 720px) {
  .hp-row { grid-template-columns: 230px 1fr; align-items: start; }
}

/* ── Megkeresés-piszkozat: a levél és a ragadós küldés-sáv ──────────────────
   Jóváhagyott terv „B" (assets/design-refs/console/outreach-sticky-send/,
   tulajdonosi döntés 2026-09-14).

   ⛔ A LEVÉL SZÖVEGE NEM GÖRGETŐ DOBOZ. A korábbi `rows="22"` textarea 445 px-et
   mutatott, és 390 px-en a levél 61 %-a (702/1147 px) esett alá — köztük a
   leiratkozó link és a HIRDETŐ-azonosítás (§C.2), asztali gépen is az utóbbi.
   Ezért itt NINCS `max-height` és NINCS `overflow`: a hibaosztály szerkezetileg
   szűnik meg, nem egy nagyobbra hízlalt számmal. */
.con .con-mailtext {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--citui-line-strong);
  border-radius: 10px;
  background: var(--citui-white);
  color: var(--citui-ink);
  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ⛔ A SÁV A `.panel`-EN KÍVÜL ÜL, és ez nem ízlés kérdése: a `.con .panel`-nek
   `overflow-x: hidden`-je van, ami a panelt SCROLL-KONTÉNERRÉ teszi — egy azon
   BELÜL ülő `position: sticky` a panel dobozához tapadna, nem a képernyőhöz,
   vagyis néma díszlet lenne. A sáv a `.con-main` közvetlen gyereke. */
.con-sendbar {
  position: sticky;
  bottom: 0;
  z-index: 30;
  margin: 0 0 16px;
  padding: 12px 16px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  background: color-mix(in srgb, var(--citui-white) 96%, transparent);
  border: 1px solid var(--citui-line-strong);
  border-radius: 14px;
  box-shadow: 0 -10px 30px color-mix(in srgb, var(--citui-navy-900) 12%, transparent);
  backdrop-filter: blur(6px);
}
.con-sendbar__why { font-size: 0.82rem; color: var(--citui-muted); flex: 1 1 200px; }
/* A zárt sáv NÉZZEN KI zártnak — a tiltott gomb halványságát a `.con
   button:disabled` adja, a sáv kerete pedig figyelmeztető sávvá vált. */
.con-sendbar[data-cit-sendbar="locked"] { border-color: var(--citui-warn); }

/* ══ LEAD-LAP — jóváhagyott terv (B változat, 2026-09-14) ═══════════════════════════
   Kontraktus: assets/design-refs/console/lead-page/
   A lap első kérdése: HOL TART ez a lead, és MI A KÖVETKEZŐ LÉPÉS — nem egy pontszám. */

/* ① MUNKAMENET-SÁV a fejléc alatt. Asztalin hat állomás egy sorban; a görgetés csak
   végszükség (nagyon szűk ablaknál), a telefonos elrendezést a média-blokk rendezi. */
.con .con-wf {
  display: flex; background: var(--citui-white);
  border-left: 1px solid var(--citui-line); border-right: 1px solid var(--citui-line);
  overflow: auto;
}
.con .con-wf__st {
  flex: 1 0 auto; min-width: 120px; padding: 10px 12px;
  border-right: 1px solid var(--citui-line); position: relative;
}
.con .con-wf__st:last-child { border-right: 0; }
.con .con-wf__k {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--citui-muted); font-weight: 700;
}
.con .con-wf__v { font-size: 13.5px; font-weight: 700; margin-top: 3px; }
.con .con-wf__st.done { background: var(--citui-ok-soft); }
.con .con-wf__st.done .con-wf__v { color: var(--citui-ok-ink); }
/* A SORON KÖVETKEZŐ állomás megjelöli magát — a kurátor ne keresse. */
.con .con-wf__st.now {
  background: color-mix(in srgb, var(--citui-cyan-500) 11%, transparent);
  box-shadow: inset 0 -3px 0 var(--citui-cyan-500);
}
.con .con-wf__st.todo .con-wf__v { color: var(--citui-muted); font-weight: 600; }
.con .con-wf__st.run { background: color-mix(in srgb, var(--citui-cyan-500) 16%, transparent); }
.con .con-wf__st.run .dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--citui-info); margin-right: 5px; animation: conRunDot 1.1s infinite;
}
@keyframes conRunDot { 50% { opacity: 0.25; } }

/* ② ADAT-MEGBÍZHATÓSÁG: egy sor a sáv alatt, mindig a KÖVETKEZMÉNYÉVEL. */
.con .con-trust {
  display: flex; gap: 9px; align-items: flex-start; margin: 0;
  background: var(--citui-white); border: 1px solid var(--citui-line); border-top: 0;
  padding: 10px 16px; font-size: 13px; line-height: 1.5;
}
.con .con-trust b { color: var(--citui-navy-900); }
.con .con-trust.bad { background: color-mix(in srgb, var(--citui-bad) 7%, var(--citui-white)); }
.con .con-trust.base { background: color-mix(in srgb, var(--citui-warn) 9%, var(--citui-white)); }
.con .con-trust svg { flex: 0 0 auto; margin-top: 2px; }

/* ③ FÜLSOR ALATTI MONDAT — a számláló helyett (az nem mondta meg, mit számol). */
/* A mondat a RAGADÓS egység része, ezért SAJÁT háttér kell neki — enélkül a mögé görgő
   tartalom átütne rajta. */
.con .con-ltabs__say {
  font-size: 12.5px; color: var(--citui-muted); margin: 0;
  padding: 7px 10px 9px; background: var(--citui-surface);
  border-left: 1px solid var(--citui-line); border-right: 1px solid var(--citui-line);
  border-bottom: 1px solid var(--citui-line);
}

/* ④ ÖSSZEHASONLÍTÓ MOCK-TÁBLA — a sor a KÜLÖNBSÉGET mutatja. */
.con .con-arttbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.con .con-arttbl th, .con .con-arttbl td {
  padding: 9px 8px; border-bottom: 1px solid var(--citui-line);
  text-align: left; vertical-align: top;
}
.con .con-arttbl thead th {
  background: var(--citui-surface-2); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--citui-navy-700); white-space: nowrap;
}
.con .con-arttbl tr.cur { background: color-mix(in srgb, var(--citui-ok) 5%, var(--citui-white)); }
.con .con-arttbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.con .con-arttbl .why { display: block; font-size: 11.5px; color: var(--citui-muted); margin-top: 2px; }

/* ⑤ KÉPANYAG-LEVEZETÉS + ⑧ megnevezett recept-sorok a nyers kulcs=érték helyett. */
.con .con-imgdet { margin-top: 6px; font-size: 12.5px; }
.con .con-imgdet summary { cursor: pointer; color: var(--citui-link-ink); }
.con .con-imgdet ul { margin: 6px 0 0; padding-left: 18px; color: var(--citui-muted); line-height: 1.6; }
.con .con-imgwarn { margin-top: 6px; font-size: 12.5px; color: var(--citui-bad-ink); display: flex; gap: 5px; align-items: flex-start; }
.con .con-recipe {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 7px 16px;
  background: var(--citui-surface); border-radius: 10px; padding: 10px 12px;
  font-size: 12.5px; margin: 8px 0 0;
}
.con .con-recipe dt {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--citui-muted); font-weight: 700;
}
.con .con-recipe dd { margin: 1px 0 0; font-weight: 600; }
.con .con-rawmeta { margin-top: 8px; font-size: 12px; }
.con .con-rawmeta summary { cursor: pointer; color: var(--citui-muted); }
.con .con-rawmeta pre {
  background: var(--citui-navy-950); color: var(--citui-ink-inverse); padding: 10px; border-radius: 8px;
  overflow: auto; font-size: 11px; margin: 6px 0 0; white-space: pre-wrap;
}
.con .con-decision {
  font-size: 13px; background: var(--citui-surface-2); border-radius: 10px;
  padding: 9px 12px; margin-top: 8px;
}

/* ═══ MOCK-KÁRTYÁK — jóváhagyott terv: assets/design-refs/console/mock-cards/ ═══
   (A — kép-vezérelt csempe, tulajdonosi döntés 2026-09-20)

   ⛔ MIÉRT: a mockok teljes szélességű, MÉRT 1529×586 px-es panelekként álltak egymás
   alatt, tizennyolc mezős recept-ráccsal, és a mock LÁTVÁNYA sehol nem jelent meg —
   pedig a kurátor pont azt ítéli meg. A csukott kártya most 403×476 px (a mai 21 %-a),
   háromasával egy sorban, a tetején a generált nyitóoldal pillanatképével. */
.con .con-mkgrid { display: grid; gap: 12px; grid-template-columns: 1fr; margin-top: 2px; }
@media (min-width: 700px)  { .con .con-mkgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .con .con-mkgrid { grid-template-columns: repeat(3, 1fr); } }

.con .con-mk {
  background: var(--citui-white); border: 1px solid var(--citui-line);
  border-radius: var(--citui-radius-sm); overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color var(--citui-transition), box-shadow var(--citui-transition);
}
.con .con-mk[data-mk-state="approved"] {
  border-color: color-mix(in srgb, var(--citui-ok) 45%, var(--citui-line));
}
/* ⑥ Az elutasított kártya a rácsban marad, halványan — a jelvénye mondja ki, mi történt. */
.con .con-mk[data-mk-state="rejected"] { opacity: 0.62; }
.con .con-mk[data-mk-state="rejected"]:hover,
.con .con-mk[data-mk-state="rejected"]:focus-within { opacity: 1; }
/* Az AKTÍV kép-kapu kártyája TELJES SORT kap: a megtagadás megnevezi a hibás képeket
   és INDOKLÁST kér — az a szöveg és az az űrlap nem fér egy harmad-szélességű kártyába
   (mérve: 1280 px-en is egymás alá esett a mező és a gomb). A pillanatkép ilyenkor nem
   nőhet 16:9-ben a teljes szélességre, ezért kap magasság-plafont. */
.con .con-mk[data-mk-gate="1"] { grid-column: 1 / -1; }
.con .con-mk[data-mk-gate="1"] .con-mk__shot { max-height: 280px; }
.con .con-mk[data-mk-open="1"] {
  border-color: var(--citui-cyan-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--citui-cyan-500) 14%, transparent);
}

/* ③ PILLANATKÉP. A `ready` doboz FIX 16:9 (a rács így egyenletes); a beszédes
   állapotoké viszont csak MINIMUM magasság — egy befagyasztott magasságba kényszerített
   indok kifolyik a doboz alól, rá a linkekre (mérve a terv első körében). */
.con .con-mk__shot {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--citui-surface-2); border-bottom: 1px solid var(--citui-line);
}
.con .con-mk__shot img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center;
}
.con .con-mk__shot.is-empty {
  aspect-ratio: auto; min-height: 120px; display: flex; align-items: center;
  justify-content: center; text-align: center; padding: 32px 12px 44px;
  background: repeating-linear-gradient(45deg,
    var(--citui-surface-2) 0 10px, var(--citui-white) 10px 20px);
}
.con .con-mk__why {
  font-size: 11.5px; line-height: 1.45; color: var(--citui-warn-ink); max-width: 36ch;
  overflow-wrap: anywhere;
}
.con .con-mk__why b { display: block; color: var(--citui-ink); font-size: 12px; margin-bottom: 3px; }
.con .con-mk__ask {
  display: block; margin: 8px auto 0; font: 600 11.5px/1 var(--citui-font-text);
  padding: 7px 12px; border-radius: var(--citui-radius-pill);
  border: 1px solid var(--citui-line-strong); background: var(--citui-white);
  color: var(--citui-ink); cursor: pointer;
}
.con .con-mk__badge { position: absolute; top: 8px; left: 8px; z-index: 2; }
/* ⑦ A két MEGLÉVŐ link a képen ül — a felirataik változatlanok (az Elek-forgatókönyv
   és a KB szó szerint idézi őket). */
.con .con-mk__links { position: absolute; right: 7px; bottom: 7px; z-index: 2; display: flex; gap: 5px; }
.con .con-mk__links a {
  font-size: 11px; font-weight: 600; text-decoration: none; color: var(--citui-white);
  background: color-mix(in srgb, var(--citui-navy-950) 84%, transparent);
  padding: 5px 9px; border-radius: var(--citui-radius-pill);
}
.con .con-mk__links a:hover { background: var(--citui-navy-900); color: var(--citui-white); }

.con .con-mk__hd { padding: 9px 11px 0; }
.con .con-mk__hd b {
  font-family: var(--citui-font-display); font-size: 0.92rem; display: block; line-height: 1.25;
}
.con .con-mk__sub { display: block; font-size: 11px; color: var(--citui-muted); margin-top: 2px; }

/* ④ A CSUKOTT KÁRTYÁN csak az áll, ami a mockok között KÜLÖNBÖZIK. */
.con .con-mk__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; padding: 8px 11px 10px; margin: 0; }
.con .con-mk__facts > div { min-width: 0; }
.con .con-mk__facts .con-mk__wide { grid-column: 1 / -1; }
.con .con-mk__facts dt {
  font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--citui-muted);
}
.con .con-mk__facts dd { margin: 1px 0 0; font-weight: 700; font-size: 13px; line-height: 1.25; }
.con .con-mk__u { display: block; font-weight: 400; font-size: 11px; color: var(--citui-muted); }
.con .con-mk__gate {
  display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 600;
  padding: 2px 7px; border-radius: var(--citui-radius-pill); margin: 0 3px 3px 0;
  background: var(--citui-ok-soft); color: var(--citui-ok-ink);
}
.con .con-mk__gate[data-verdict="flag"] {
  background: color-mix(in srgb, var(--citui-warn) 16%, var(--citui-white)); color: var(--citui-warn-ink);
}
.con .con-mk__gate[data-verdict="fail"] {
  background: color-mix(in srgb, var(--citui-bad) 12%, var(--citui-white)); color: var(--citui-bad-ink);
}

.con .con-mk__act {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 8px 10px;
  border-top: 1px solid var(--citui-line); background: var(--citui-surface); margin-top: auto;
}
.con .con-mk__decide { display: contents; }
.con .con-mk__act button { font-size: 12px; padding: 8px 12px; }
.con .con-mk__more { margin-left: auto; }
.con .con-mk__act .con-decision {
  margin: 0; padding: 0; background: none; font-size: 11.5px; line-height: 1.35; flex: 1; min-width: 0;
}

/* ② A KINYITOTT RÉSZ — ide költözött minden, ami a csukott kártyáról lekerült.
   Semmi nem tűnt el: a recept többi mezője, az AI-költség, a nyers adat, és a
   jóváhagyott mock műveletei (konvertálás, törlés) mind itt élnek tovább. */
.con .con-mk__det {
  border-top: 1px solid var(--citui-line); padding: 10px 12px; background: var(--citui-surface);
}
.con .con-mk__det[hidden] { display: none; }
.con .con-mk__det .con-recipe { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin-top: 0; }
.con .con-mkgen summary { color: var(--citui-ink); }

/* ⑥ ÖSSZEADÓDÓ SÁV — a három szakasz kiadja a nevezőt. */
.con .cp-sum { margin: 10px 0 4px; }
.con .cp-bar {
  display: flex; height: 26px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--citui-line);
}
.con .cp-bar span {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  font-size: 11.5px; font-weight: 700; color: var(--citui-white);
  overflow: hidden; white-space: nowrap; min-width: 0;
}
/* Ugyanaz: a sáv-szeleten FEHÉR felirat ül, ezért a HÁTTÉR a szöveg-token
   (fehér a mai zöldön 3,00, a mai sárgán még kevesebb). */
.con .cp-bar .b1 { background: var(--citui-ok-ink); }
.con .cp-bar .b2 { background: var(--citui-warn-ink); }
/* Semleges, NEM ítélő szín: az ismétlés se nem jó, se nem baj — a márka-tokenből keverve. */
.con .cp-bar .b3 { background: color-mix(in srgb, var(--citui-navy-700) 45%, var(--citui-white)); }
.con .cp-leg { font-size: 12.5px; color: var(--citui-muted); line-height: 1.6; margin: 7px 0 0; }

/* ⑩ TELEFONON: a sáv FÜGGŐLEGES lista, a mock-tábla sorokká bomlik — KÜLÖN tervezői
   döntés, nem a desktop lelőve. Hat állomás 390 px-en vízszintesen vagy kigörögne,
   vagy olvashatatlanul összenyomódna. */
@media (max-width: 700px) {
  .con .con-wf { flex-direction: column; overflow: visible; }
  .con .con-wf__st {
    border-right: 0; border-bottom: 1px solid var(--citui-line);
    display: flex; gap: 10px; align-items: baseline; min-width: 0;
  }
  .con .con-wf__st:last-child { border-bottom: 0; }
  .con .con-wf__k { flex: 0 0 96px; }
  .con .con-wf__st.now { box-shadow: inset 3px 0 0 var(--citui-cyan-500); }
  .con .con-arttbl thead { display: none; }
  .con .con-arttbl tr { display: block; border-bottom: 1px solid var(--citui-line-strong); padding: 8px 0; }
  .con .con-arttbl td { display: flex; gap: 8px; border: 0; padding: 3px 4px; }
  .con .con-arttbl td::before {
    content: attr(data-l); flex: 0 0 104px; font-size: 10.5px; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--citui-muted); font-weight: 700; padding-top: 2px;
  }
  .con .con-arttbl .num { text-align: left; }
  .con .con-arttbl .why { display: inline; margin-left: 6px; }
}

/* ── Megkeresés-panel: EGY ÉLŐ link, a többi korábbi ────────────────────────
   Jóváhagyott terv „A" (assets/design-refs/console/outreach-link-live-archive/,
   tulajdonosi döntés 2026-09-14). A régi lapon semmi nem jelölte, melyik link az
   élő, és a három művelet-gomb (navigáció, navigáció, ÁLLAPOT-ÍRÁS) azonos navy
   gradienst viselt — a felület nem mondta meg, melyik kattintás ír. */
.con .con-linkcard {
  border: 1px solid var(--citui-line); border-radius: 12px;
  padding: 14px; margin-top: 12px; background: var(--citui-white);
}
.con .con-linkcard--live {
  border: 2px solid var(--citui-navy-900);
  box-shadow: 0 6px 22px color-mix(in srgb, var(--citui-navy-900) 10%, transparent);
}
/* A korábbi kártya HALVÁNYABB HÁTTERŰ, de nem halvány SZÖVEGŰ: az adat ugyanúgy
   olvasható, csak a hangsúly kisebb. (Az opacity itt olvashatatlanná tenné.) */
.con .con-linkcard--old { background: var(--citui-surface); }
.con .con-pill-live {
  background: var(--citui-navy-900); color: var(--citui-white);
  border-color: transparent; font-weight: 600;
}
/* ④ A navigáció LINK, nem submit-gomb — így magától kimarad a navy gradiensből. */
.con .con-linkact {
  color: var(--citui-navy-700); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--citui-navy-700) 35%, transparent);
  font-size: 0.9rem;
}
.con .con-linkact:hover { color: var(--citui-navy-900); border-bottom-color: var(--citui-navy-900); }
.con .con-linkacts { gap: 14px; }
/* ③ Új link ELŐTT a képernyő kimondja, mi lesz a mostanival — állandóan látszik,
   JS nélkül is; a gomb megerősítése csak ráadás. */
.con .con-livewarn {
  margin-top: 10px; padding: 10px 12px; border-radius: 9px; font-size: 0.86rem;
  background: color-mix(in srgb, var(--citui-warn) 12%, transparent);
  /* A jelzés-szín keveréke a saját tintjén 3,31-et adott — a FELIRAT a szöveg-tokent
     kapja (a háttér és a keret marad a jelzés-színen). */
  color: var(--citui-warn-ink);
  border: 1px solid color-mix(in srgb, var(--citui-warn) 40%, transparent);
}
.con .con-oldlinks { margin-top: 12px; }
.con .con-oldlinks > summary {
  cursor: pointer; font-size: 0.86rem; color: var(--citui-muted); padding: 6px 0;
}

/* ── MÁSODLAGOS gomb a konzolon: `.ghost` ───────────────────────────────────
   ⛔ EZ AZ OSZTÁLY HÓNAPOKIG HALOTT VOLT. A `class="ghost"` hat helyen szerepelt a
   konzolban — a szándék „halvány, másodlagos" —, de a `.ghost`-hoz EGYETLEN szabály
   sem tartozott, ezért a submit-gombok a fenti navy gradienst kapták. MÉRVE
   (2026-09-15, valódi konzol): a lead-lapon 2 ilyen gomb, a `/duplicates`-en pedig a
   HÁROM válaszból KETTŐ — vagyis az „Ugyanaz — összevonás" (ami lead-rekordokat von
   össze) semmiben nem különbözött a másik két verdikttől.

   A kinézet a dizájn-mag MEGLÉVŐ ghost-mintája (`.citui-btn--ghost`): fehér lap,
   `line-strong` szegély, navy szöveg. Nem új stílus, hanem a meglévő szándék
   hatályba léptetése. A hover a konzol saját `.con button:hover` szabályára bízva.

   ⚠️ Ez EGYETLEN másodlagos osztály. Az ADR-0169-ben bevezetett `con-btn2` ide olvadt
   be: két osztály ugyanarra a szerepre két igazság lenne ugyanazon a képernyőn. */
.con button.ghost, .con button.ghost[type="submit"] {
  background: var(--citui-white);
  color: var(--citui-navy-900);
  border: 1px solid var(--citui-line-strong);
}

/* ── A FIZETÉS ÁTJÁRÓJA ÉS A BUKÁS-LAP ──────────────────────────────────────────
   Jóváhagyott terv: assets/design-refs/console/pay-gateway-exit/ („A — a fizetés
   a főszereplő”, tulaj 2026-09-15).
   ⛔ Mért kiindulás: a „Fizetek ▸” és az „Elutasítom” BÁJTRA AZONOS volt — mindkettő
   35 px, `font-weight: 600`, 12,5 px, fehér háttér, 999 px lekerekítés; egyedül a
   szövegszín tért el. Semmi nem mondta meg, melyik a művelet. */
.con .pay-item {
  margin: 0 0 14px; padding: 11px 12px; text-align: left;
  border: 1px solid var(--citui-line);
  border-radius: 11px; background: var(--citui-surface-2);
}
.con .pay-item b { display: block; font-size: 0.95rem; }
.con .pay-item span { display: block; margin-top: 2px; font-size: 0.82rem; color: var(--citui-muted); }

/* A művelet-blokk: EGY hangos út, alatta a halk visszaút. Oszlopban, hogy a
   hierarchia 390 px-en se essen szét egymás melletti, egyforma pirulákká. */
.con .pay-act { display: flex; flex-direction: column; align-items: stretch; gap: 9px; margin-top: 16px; }
.con .pay-act form { display: flex; }
/* ⛔ SPECIFICITÁS: a generikus `.con button[type=submit]:not(.ok):not(.bad):not(.hp-alt)
   :not(.ghost)` (0,6,1) VERI a sima `.con .pay-act button[type=submit]`-et (0,3,1).
   Mérve 2026-09-15: az első változatom mindkét gombot NAVY GRADIENSSEL festette —
   a „halk” visszaút ugyanúgy kitöltött lett, mint a fizetés, vagyis a hierarchia,
   amiért ez a terv készült, egyáltalán nem látszott. A DOM-mérés (magasság,
   betűvastagság) HELYES volt; a KÉP mutatta meg, hogy a festés más.
   Ugyanaz a csapda, mint a `.con a` link-szabály a gomb-feliraton. */
.con .pay-act button[type="submit"]:not(.ok):not(.bad):not(.hp-alt):not(.ghost) {
  flex: 1 1 auto; min-height: 48px; padding: 13px 20px; border-radius: 12px;
  border: 1px solid transparent; font-weight: 700; font-size: 0.95rem; cursor: pointer;
  background: var(--citui-cyan-500); color: var(--citui-navy-900);
}
.con .pay-act button[type="submit"]:not(.ok):not(.bad):not(.hp-alt):not(.ghost):hover { filter: brightness(1.06); }
/* ⭐ A halk visszaút: MÉRHETŐEN kisebb és könnyebb — nem csak más színű. De nem
   tűnik el, és nem megy a tapintható méret alá. */
.con .pay-act .pay-act__quiet button[type="submit"]:not(.ok):not(.bad):not(.hp-alt):not(.ghost) {
  min-height: 40px; padding: 10px 14px; font-weight: 600; font-size: 0.85rem;
  background: transparent; color: var(--citui-muted);
  border: 1px solid var(--citui-line-strong);
}
.con .pay-act .pay-act__quiet button[type="submit"]:not(.ok):not(.bad):not(.hp-alt):not(.ghost):hover {
  color: var(--citui-navy-900); border-color: var(--citui-navy-900); filter: none;
}

/* A hivatkozási azonosító MÁSOLHATÓ — egy kódot képernyőről átgépelni nem művelet. */
.con .pay-ref {
  display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap;
  margin: 14px 0 0; font-size: 0.82rem; color: var(--citui-muted);
}
.con .pay-ref button {
  min-height: 34px; padding: 7px 11px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--citui-line-strong);
  background: var(--citui-white); color: var(--citui-navy-900);
  font-weight: 600; font-size: 0.8rem;
}
.con .pay-ref button.is-done { border-color: var(--citui-ok); color: var(--citui-ok-ink); }

/* Minden lapról vezessen tovább nevesített út — néma zsákutca nincs (ADR-0129 ③). */
.con .pay-exits {
  margin: 16px 0 0; padding-top: 13px; border-top: 1px solid var(--citui-line);
  display: flex; gap: 10px 14px; flex-wrap: wrap; justify-content: center; align-items: center;
}
.con .pay-exits a { font-size: 0.85rem; font-weight: 600; }
@media (max-width: 560px) {
  .con .pay-exits { flex-direction: column; gap: 7px; }
}

/* ── A KÜLDÉS MEGERŐSÍTÉSE: őr-lelet felugró (tulajdonosi rendelet, 2026-09-17) ─────
   „max figyelmeztessen, de ha utána is továbbkattint, menjen ki". A doboz a fotó-kapu
   nyelvét beszéli (.pg-head/.pg-lead/.pg-list), mert ugyanaz a dolga: kimondja, mit
   talált a gép, és a döntést a kurátorra bízza.
   ⛔ `open` attribútummal jön, tehát JS NÉLKÜL is látszik — a `showModal()` csak a
   sötétített hátteret adja hozzá. A garancia amúgy sem itt van, hanem a szerveren. */
.vg-dlg {
  max-width: 540px; width: calc(100% - 32px);
  padding: 16px 18px; border-radius: var(--citui-radius);
  border: 1px solid color-mix(in srgb, var(--citui-bad) 38%, transparent);
  background: color-mix(in srgb, var(--citui-bad) 7%, var(--citui-white));
  color: var(--citui-ink); box-shadow: var(--citui-shadow-md);
}
.vg-dlg::backdrop { background: color-mix(in srgb, var(--citui-navy-950) 55%, transparent); }
.vg-dlg__form { margin-top: 12px; padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--citui-bad) 22%, transparent); }
.vg-dlg__acts { display: flex; gap: 10px; align-items: center; justify-content: flex-end;
  flex-wrap: wrap; margin-top: 12px; }
/* A kiút NÉV szerint, nem csak egy „x": a mégsem is döntés, és látszania kell. */
.vg-dlg__cancel { font-size: 0.8rem; font-weight: 700; color: var(--citui-link-ink); text-decoration: none; }
.vg-dlg__cancel:hover { text-decoration: underline; }
/* MOBIL: a két válasz egymás alá, teljes szélességű hüvelykujj-cél. */
@media (max-width: 560px) {
  .vg-dlg__acts { flex-direction: column-reverse; align-items: stretch; }
  .vg-dlg__acts button { width: 100%; }
  .vg-dlg__cancel { text-align: center; padding: 8px 0; }
}