/* ============================================================================
   DAGÓ 2.0 — components.css
   16 építőelem az EGÉSZ panelre. A mai 14 külön jelvény-osztály (badge-pending,
   m-pill.ok, usage-badge.tier-* …) EGY `.badge`-be olvad, 6 szemantikus változattal.

   SZABÁLY: minden komponens EGYETLEN összefüggő blokk — alapszabályok, alattuk
   közvetlenül a saját mobil/asztali kérdései. A fájl végén NINCS „mobil” szekció.
   ========================================================================== */
@layer components {

/* ── 1. GOMB ────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: var(--h); padding: 0 15px;
  border: var(--bd) solid var(--line-2);
  border-radius: var(--r);
  background: var(--surface);
  font-size: 15px; font-weight: 600; white-space: nowrap;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.btn:hover { border-color: var(--line-3); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn--primary { background: var(--fn-ink); color: var(--on-accent); border-color: transparent; }
.btn--primary:hover { background: color-mix(in srgb, var(--fn-ink) 88%, var(--text)); border-color: transparent; }
/* A romboló gomb NEM piros gomb. Tömör piros csak a megerősítő párbeszéd
   akciógombján jelenik meg — vagyis pontosan egyszer, pontosan akkor. */
.btn--danger { color: var(--danger-ink); border-color: color-mix(in srgb, var(--danger) 36%, var(--line-2)); }
.btn--danger:hover { border-color: var(--danger); }
.btn--ghost { border-color: transparent; background: none; color: var(--fn-ink); }
.btn--ghost:hover { background: var(--surface); border-color: transparent; }
.btn--sm { min-height: var(--h-sm); padding: 0 11px; font-size: var(--fs-small); }
.btn--block { width: 100%; }
@media (max-width: 759px) { .btn { min-height: var(--h-lg); } .btn--sm { min-height: 38px; } }

.iconbtn {
  position: relative;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  color: var(--muted); font-size: 16px;
}
.iconbtn:hover { background: var(--surface-2); color: var(--text); }
/* Látható méret kicsi, találati zóna 44 px — a kettő nem ugyanaz. */
.iconbtn::after { content: ""; position: absolute; inset: -5px; }
@media (max-width: 759px) { .iconbtn { width: 40px; height: 40px; } }

/* ── 2. KÁRTYA ──────────────────────────────────────────────────────────────── */
.card {
  background: var(--panel);
  border: var(--bd) solid var(--line-2);
  border-radius: var(--r-lg);
  padding: var(--card-pad);
}
.card--flush { padding-inline: 0; }
.card--flush > .card-head { padding-inline: var(--card-pad); }
.card--alert { border-color: color-mix(in srgb, var(--danger) 44%, var(--line-2)); }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.card-head h3 { font-size: var(--fs-card); }
.card-head .sub { font-size: var(--fs-small); color: var(--muted); margin-top: 3px; max-width: 68ch; }
.card-act { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 759px) { .card { padding: 16px; } .card--flush { padding-inline: 0; } .card--flush > .card-head { padding-inline: 16px; } }

.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* ── 3. KPI-CSEMPE (a „B · Csempés” irány vezérelem) ────────────────────────── */
.kpis { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (min-width: 760px) { .kpis { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); } }
.kpi {
  display: block; width: 100%; text-align: left;
  padding: 15px 16px 14px;
  border-radius: var(--r-lg);
  border: var(--bd) solid color-mix(in srgb, var(--kc, var(--fn)) 26%, var(--line-2));
  background: color-mix(in srgb, var(--kc, var(--fn)) var(--tile-wash), var(--panel));
  transition: border-color var(--t-fast) var(--ease);
}
button.kpi:hover { border-color: color-mix(in srgb, var(--kc, var(--fn)) 55%, var(--line-2)); }
.kpi-lab { font-size: var(--fs-small); color: var(--muted); font-weight: 500; }
.kpi-num {
  margin-top: 5px;
  font-family: var(--font-head); font-weight: 700;
  font-size: var(--fs-kpi); line-height: 1.08; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.kpi-num .unit { font-size: .48em; font-weight: 600; color: var(--muted); margin-left: 3px; }
.kpi-sub { margin-top: 5px; font-size: var(--fs-micro); font-weight: 600; color: var(--muted); }
.kpi-sub.up { color: var(--ok-ink); }
.kpi-sub.down { color: var(--danger-ink); }
@media (min-width: 1080px) { :root { --fs-kpi: 38px; } }

/* ── 4. SOR (telefonon MINDEN tábla ilyenné alakul) ─────────────────────────── */
.rows { display: flex; flex-direction: column; gap: 8px; }
.row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  min-height: var(--row-h); padding: 11px 13px;
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid transparent;
  transition: border-color var(--t-fast) var(--ease);
}
button.row:hover, a.row:hover { border-color: var(--line-2); }
.row-ic {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: var(--r-sm); font-size: 15px; flex: none;
  background: color-mix(in srgb, var(--rc, var(--fn)) 15%, var(--panel));
  color: color-mix(in srgb, var(--rc, var(--fn)) 76%, var(--text));
  font-weight: 700;
}
.row-body { flex: 1; min-width: 0; }
.row-p1 { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-p2 { font-size: var(--fs-small); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A sor elsődleges és másodlagos szövege KÉT SOR. A `<span>` magától soron belüli, így a kettő egy
   sorba folyt össze, és az ellipszis sem hatott (a Kiadások eddig helyben kerülte meg, 2026-09-11). */
.row-body > .row-p1, .row-body > .row-p2 { display: block; }
.row-meta { flex: none; text-align: right; font-size: var(--fs-small); color: var(--muted); font-variant-numeric: tabular-nums; }
.row-meta b { display: block; color: var(--text); font-size: 15px; font-weight: 600; }
.row.is-alert { border-color: color-mix(in srgb, var(--danger) 40%, transparent); }

/* ── 5. TÁBLA (csak ≥760px; telefonon .rows veszi át) ───────────────────────────
   VASSZABÁLY: cellába KIZÁRÓLAG szöveg, jelvény, jelölőnégyzet vagy ikongomb kerülhet.
   Legördülő, beviteli mező, kapcsoló, szöveges gomb SOHA — azok az eszközsorba
   vagy a sor kinyitójába mennek. (A 2026-09-08-i szétesés tanulsága, kódba öntve.) */
.tablewrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th {
  text-align: left; white-space: nowrap;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-2);
  font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted);
}
.table td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--surface); }
.table .num { text-align: right; }
.only-desk { display: none; }
.only-mob { display: block; }
@media (min-width: 760px) { .only-desk { display: block; } .only-mob { display: none; } }

/* ── 6. JELVÉNY — 6 szemantikus változat, és kész ───────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-micro); font-weight: 600; white-space: nowrap;
  background: color-mix(in srgb, var(--bc, var(--neutral)) 13%, var(--panel));
  color: var(--bi, var(--neutral-ink));
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--bc, var(--neutral)); flex: none; }
.badge--plain::before { display: none; }
.badge--ok      { --bc: var(--ok);      --bi: var(--ok-ink); }
.badge--warn    { --bc: var(--warn);    --bi: var(--warn-ink); }
.badge--danger  { --bc: var(--danger);  --bi: var(--danger-ink); }
.badge--info    { --bc: var(--info);    --bi: var(--info-ink); }
.badge--neutral { --bc: var(--neutral); --bi: var(--neutral-ink); }
.badge--live    { --bc: var(--coral);   --bi: var(--coral-ink); }
/* Az EGYETLEN pulzáló elem a panelen: itt a mozgás maga az információ. */
.badge--live::before { animation: pk-pulse 1.7s ease-in-out infinite; }
@keyframes pk-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.78); } }

/* ── 7. CHIP (szűrő) ────────────────────────────────────────────────────────── */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 759px) {
  .chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
}
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 36px; padding: 0 13px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: var(--surface-2);
  font-size: 14px; font-weight: 500; white-space: nowrap;
}
.chip b { font-weight: 700; font-variant-numeric: tabular-nums; }
.chip:hover { border-color: var(--line-3); }
.chip[aria-pressed="true"] {
  background: color-mix(in srgb, var(--fn) 15%, var(--panel));
  color: var(--fn-ink);
  border-color: color-mix(in srgb, var(--fn) 34%, transparent);
}

/* ── 8. FÜLEK (szegmentált) ─────────────────────────────────────────────────── */
.tabs {
  display: flex; gap: 4px; padding: 4px;
  background: var(--surface); border-radius: var(--r);
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  min-height: 36px; padding: 0 14px;
  border-radius: var(--r-sm);
  font-size: 14px; font-weight: 600; color: var(--muted); white-space: nowrap;
}
.tab[aria-selected="true"] { background: var(--panel); color: var(--fn-ink); }

/* Szekciócím EGY fülön belül (Videók → Projektor: a fal háttérvideói, majd a 16:9 változatok).
   Nem új fül és nem kártyafejléc: két, egymás alatti kártyacsoportot választ el. */
.secthead {
  margin: 6px 0 -4px;
  font-size: var(--fs-h2);
  font-weight: 700;
}

/* ── 9. KAPCSOLÓ ────────────────────────────────────────────────────────────── */
.switchrow { display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 10px 0; }
.switchrow + .switchrow { border-top: 1px solid var(--line); }
.switchrow-body { flex: 1; min-width: 0; }
.switchrow-body b { display: block; font-size: 15px; font-weight: 600; }
.switchrow-body span { font-size: var(--fs-small); color: var(--muted); }
.switch { position: relative; width: 48px; height: 28px; border-radius: var(--r-pill); background: var(--line-2); flex: none; transition: background var(--t) var(--ease); }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--panel); transition: transform var(--t) var(--ease); }
.switch[aria-checked="true"] { background: var(--ok); }
.switch[aria-checked="true"]::after { transform: translateX(20px); }

/* ── 9b. RÁDIÓ-LISTA — egy választás néhány lehetőségből (mód-kapcsolók) ─────────
   A kiválasztott elem a TELJES keretével és a pöttyével is jelez, nem csak színnel.
   (2026-09-10: a Csomagok oldal eddig stílus nélkül használta ezt a két osztályt —
   a kiválasztott mód egyáltalán nem látszott. A dago2-core teszt azóta tiltja, hogy
   egy lap olyan osztályt használjon, amihez nincs szabály.) */
.radios { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.radio {
  display: flex; align-items: flex-start; gap: 12px;
  min-height: var(--h-lg); padding: 12px 14px;
  border: 2px solid var(--line-2); border-radius: var(--r); background: var(--panel);
  cursor: pointer; transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.radio:hover { border-color: var(--fn); }
.radio:focus-visible { outline: 2px solid var(--fn); outline-offset: 2px; }
.radio > i {
  position: relative; flex: none; width: 20px; height: 20px; margin-top: 1px;
  border: 2px solid var(--line-3); border-radius: 50%; background: var(--panel);
}
.radio b { display: block; font-size: 15px; font-weight: 700; }
.radio span { display: block; margin-top: 3px; font-size: var(--fs-small); color: var(--muted); }
.radio[data-on="1"] { border-color: var(--fn); background: color-mix(in srgb, var(--fn) 8%, var(--panel)); }
.radio[data-on="1"] > i { border-color: var(--fn); }
.radio[data-on="1"] > i::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--fn); }
.radio[data-on="1"] b { color: var(--fn-ink); }
.radio[aria-disabled="true"] { cursor: not-allowed; opacity: .55; }
.radio[aria-disabled="true"]:hover { border-color: var(--line-2); }

/* ── 10. MEZŐ — az EGYETLEN űrlap-primitív ──────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-size: var(--fs-small); font-weight: 600; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: var(--h);
  padding: 8px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--panel);
  color: var(--text);
  font: inherit;
}
@media (max-width: 759px) {
  /* 16px alatt az iOS Safari fókuszkor RÁKÖZELÍT és elcsúszik a felület. Kemény szabály. */
  .field input, .field select, .field textarea { font-size: 16px; min-height: var(--h-lg); }
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--fn); }
.field .hint { font-size: var(--fs-micro); color: var(--muted); }
.field .err { font-size: var(--fs-micro); color: var(--danger-ink); font-weight: 600; }
/* A jelölőnégyzet és a rádió NEM szövegmező. A közös /styles.css pont ezt rontotta
   el kétszer (46 px magas, 100% széles rádiógomb). Itt az alaposztály része. */
.field input[type="checkbox"], .field input[type="radio"] {
  appearance: auto; width: 18px; height: 18px; min-height: 0; padding: 0; border: 0; background: none;
}

/* ── 11. LEÍRÓ LISTA ────────────────────────────────────────────────────────── */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 9px 18px; font-size: 14px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }

/* ── 12. ÜRES ÁLLAPOT — sosem „Nincs adat.” ─────────────────────────────────── */
.empty { text-align: center; padding: 32px 18px; }
.empty .ic-wrap {
  width: 62px; height: 62px; margin: 0 auto 14px;
  display: grid; place-items: center; border-radius: 50%;
  background: color-mix(in srgb, var(--fn) 11%, var(--panel));
  color: var(--fn-ink); font-size: 26px;
}
.empty h4 { font-size: var(--fs-card); margin-bottom: 6px; }
.empty p { color: var(--muted); font-size: 14px; max-width: 46ch; margin-inline: auto; }

/* ── 13. ÉRTESÍTÉS ──────────────────────────────────────────────────────────── */
.toasts {
  position: fixed; z-index: 70;
  left: 14px; right: 14px; bottom: calc(58px + env(safe-area-inset-bottom) + 14px);
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none;
}
@media (min-width: 760px) { .toasts { left: 50%; right: auto; bottom: 22px; transform: translateX(-50%); } }
.toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: 10px;
  max-width: min(520px, 100%);
  padding: 12px 15px;
  border-radius: var(--r);
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--tc, var(--ok));
  box-shadow: var(--sh-3);
  font-size: 14px;
  animation: pk-toast var(--t-slow) var(--ease);
}
@keyframes pk-toast { from { opacity: 0; transform: translateY(12px); } }
.toast--ok { --tc: var(--ok); }
.toast--warn { --tc: var(--warn); }
.toast--danger { --tc: var(--danger); }

/* ── 14. ÁLLAPOT-SZALAG ─────────────────────────────────────────────────────── */
.statusbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 18px;
  border-radius: var(--r-lg);
  border: var(--bd) solid color-mix(in srgb, var(--sc, var(--ok)) 30%, var(--line-2));
  background: color-mix(in srgb, var(--sc, var(--ok)) 10%, var(--panel));
}
.statusbar .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--sc, var(--ok)); flex: none; }
.statusbar .txt { flex: 1; min-width: 200px; }
.statusbar .txt b { font-weight: 700; }
.statusbar .when { font-size: var(--fs-small); color: var(--muted); }
.statusbar--warn { --sc: var(--warn); }
.statusbar--danger { --sc: var(--danger); }

/* ── 15. DIAGRAM-PRIMITÍVEK (nulla könyvtár, nulla beégetett szín) ──────────── */
.bars { display: flex; flex-direction: column; gap: 11px; }
.bar { display: grid; grid-template-columns: 1fr 92px; gap: 5px 12px; align-items: center; font-size: 14px; }
.bar-l { grid-column: 1 / -1; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-t { height: 10px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
/* `display: block` KELL: a lapok `<span class="bar-f">`-et írnak, és egy soron belüli elem szélességét és
   magasságát a böngésző figyelmen kívül hagyja — a sáv kitöltése így NEM látszott (2026-09-11, mérve). */
.bar-f { display: block; height: 100%; border-radius: var(--r-pill); background: var(--bc2, var(--fn)); }
.bar-v { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.bar-v small { display: block; font-weight: 500; font-size: var(--fs-micro); color: var(--muted); }
@media (min-width: 760px) {
  .bar { grid-template-columns: minmax(96px, 160px) 1fr 96px; }
  .bar-l { grid-column: auto; }
}
/* Mérő: EGY állapot = EGY szín. A mai zöld→sárga→piros átmenet hazudik: egy 20%-ig
   töltött sáv is piros véggel rajzolódik. */
.meter { height: 9px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.meter-f { height: 100%; border-radius: var(--r-pill); background: var(--mc, var(--fn)); transition: width var(--t-slow) var(--ease); }
.meter--ok { --mc: var(--ok); } .meter--warn { --mc: var(--warn); } .meter--bad { --mc: var(--danger); }

/* ── 16. MEGJEGYZÉS-SOR ─────────────────────────────────────────────────────── */
.note { display: flex; gap: 9px; align-items: flex-start; font-size: var(--fs-small); color: var(--muted); }
.note .mk { flex: none; color: var(--fn-ink); font-weight: 700; }
.note--warn .mk { color: var(--warn-ink); }


/* ── 17. MEGERŐSÍTŐ ABLAK ───────────────────────────────────────────────────────
   A panel EGYETLEN <dialog>-ja. Tömör piros gomb kizárólag itt létezik. */
.dlg {
  width: min(460px, calc(100vw - 28px));
  padding: 0;
  border: var(--bd) solid var(--line-2);
  border-radius: var(--r-lg);
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--sh-3);
}
.dlg::backdrop { background: var(--backdrop); }
.dlg-form { display: flex; flex-direction: column; gap: 16px; padding: 20px; }
.dlg-head { display: flex; align-items: center; gap: 11px; }
.dlg-head h3 { font-size: var(--fs-h2); }
.dlg-ic {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: var(--r-sm); flex: none; font-size: 18px;
  background: color-mix(in srgb, var(--warn) 16%, var(--panel));
  color: var(--warn-ink);
}
.dlg-body { font-size: 15px; color: var(--muted); line-height: 1.55; }
.dlg-body b { color: var(--text); }
.dlg-type b { font-family: var(--font-mono); color: var(--danger-ink); }
.dlg-foot { display: flex; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.btn--solid-danger { background: var(--danger-ink); color: var(--on-accent); border-color: transparent; }
.btn--solid-danger:hover { background: var(--danger); border-color: transparent; }
.btn--solid-danger:disabled { background: var(--line-2); color: var(--muted); }
@media (max-width: 759px) {
  .dlg { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: 0; }
  .dlg-form { padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); }
  .dlg-foot { flex-direction: column-reverse; }
  .dlg-foot .btn { width: 100%; }
}

/* ── 18. ESZKÖZSOR ──────────────────────────────────────────────────────────────
   Ide kerül minden vezérlő, ami a mai panelen táblázat-CELLÁBAN ül. */
.toolbar { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.toolbar .search { flex: 1 1 200px; min-width: 0; position: relative; display: flex; align-items: center; }
.toolbar .search .i { position: absolute; left: 12px; color: var(--muted); pointer-events: none; }
.toolbar .search input {
  width: 100%; min-height: var(--h); padding: 8px 12px 8px 36px;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--panel); color: var(--text); font: inherit;
}
@media (max-width: 759px) { .toolbar .search input { font-size: 16px; min-height: var(--h-lg); } }
.toolbar select {
  min-height: var(--h); padding: 0 10px;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--panel); color: var(--text); font: inherit; font-size: 14px;
}
@media (max-width: 759px) { .toolbar select { min-height: var(--h-lg); font-size: 16px; } }

/* ── 19. CSOPORTOS SÁV — csak akkor létezik, ha van kijelölés ──────────────────── */
.bulkbar {
  position: sticky; bottom: calc(58px + env(safe-area-inset-bottom) + 10px); z-index: 25;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 12px 14px;
  border-radius: var(--r-lg);
  border: var(--bd) solid color-mix(in srgb, var(--fn) 34%, var(--line-2));
  background: color-mix(in srgb, var(--fn) 10%, var(--panel));
  box-shadow: var(--sh-2);
}
.bulkbar strong { font-variant-numeric: tabular-nums; }
.bulkbar .spacer { flex: 1 1 auto; }
@media (min-width: 760px) { .bulkbar { bottom: 14px; } }

/* ── 20. JELÖLŐNÉGYZET (táblában és kártyán is ugyanaz) ────────────────────────── */
.pick { width: 20px; height: 20px; accent-color: var(--fn-ink); flex: none; cursor: pointer; }
.table td.pickcell, .table th.pickcell { width: 44px; }

/* ── 21. TÖLTŐ-CSÍK (skeleton) ─────────────────────────────────────────────────── */
.skel { border-radius: var(--r); background: var(--surface-2); animation: pk-skel 1.2s ease-in-out infinite; }
@keyframes pk-skel { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }


/* ── 22. NAPI OSZLOPDIAGRAM ────────────────────────────────────────────────────
   Nulla könyvtár, nulla beégetett szín. A halmozott második oszlop a Facebookról
   érkező rész — a márkaszín KIZÁRÓLAG itt, pöttyként/oszlopként, sosem szövegen.
   Az oszlop (.col) KITÖLTI a diagram magasságát (stretch): align-items: flex-end mellett a magassága „auto", és a
   Chrome-ban a %-os oszlopmagasság semmire nem oldódik fel — minden nap 2 px-es csík volt (Forgalom, API-keretek;
   a Safari kirajzolta, ezért nem tűnt fel). Az alulra igazítást a .col justify-content: flex-end-je adja.
   A dátum-felirat a .cols alsó paddingjében ül, abszolút pozícióval: így a 100% = a teljes oszlop-terület. A sorban
   maradó felirat a feliratos oszlopok sávját megemelte („lebegett"), a csúcsnapokat pedig összenyomta. */
.cols { display: flex; align-items: stretch; gap: 3px; height: 150px; padding: 8px 0 22px; }
.cols--x2 { padding-bottom: 38px; } /* kétsoros felirat (Kiadások: hónap + összeg) */
@media (min-width: 760px) { .cols { height: 180px; } }
.col { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; }
.col-bar { display: block; flex: none; border-radius: 6px 6px 2px 2px; background: var(--fn); min-height: 2px; }
.col-bar.is-fb { background: var(--brand-fb); }
.col-x { position: absolute; top: 100%; left: 0; right: 0; margin-top: 6px; font-size: 10px; line-height: 16px; color: var(--muted-2); text-align: center; white-space: nowrap; }
.chart-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: var(--fs-micro); color: var(--muted); }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { width: 10px; height: 10px; border-radius: 3px; display: block; }

/* ── 23. TÖLCSÉR — függőleges lépések, NEM trapéz ──────────────────────────────
   390 px-en a trapéz olvashatatlan, és vizuálisan semmit nem tesz hozzá. */
.funnel { display: flex; flex-direction: column; }
.funnel-step { padding: 12px 0; }
.funnel-step + .funnel-step { border-top: 1px solid var(--line); }
.funnel-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; font-size: 14px; }
.funnel-h b { font-family: var(--font-head); font-size: var(--fs-card); font-variant-numeric: tabular-nums; }
.funnel-conv { margin-top: 7px; font-size: var(--fs-micro); color: var(--muted); }
.funnel-conv.is-bad { color: var(--danger-ink); font-weight: 600; }


/* ── 24. RENDEZHETŐ OSZLOPFEJLÉC ─────────────────────────────────────────────────
   Az egész fejléc-szöveg a gomb (nagy találati felület); a nyíl mutatja az irányt,
   a nem aktív oszlopon halvány ↕ jelzi, hogy rendezhető. */
.th-sort {
  display: inline-flex; align-items: center; gap: 5px;
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
  padding: 2px 0; border-radius: var(--r-sm);
}
.th-sort:hover { color: var(--text); }
.th-sort.is-active { color: var(--fn-ink); }
.th-arrow { font-size: 11px; color: var(--muted-2); }
.th-sort.is-active .th-arrow { color: var(--fn-ink); }
.table th.num .th-sort { flex-direction: row-reverse; }


/* ── 25. SZÁNDÉK-JELVÉNY ─────────────────────────────────────────────────────────
   🔔 „Fizetne" — a Bevétel oldal (pénz) színével, NEM állapotszínnel: ez nem probléma és
   nem is „rendben”-jelzés, hanem egy külön tény. Szándékosan nem az egészség-jelzők között. */
.badge--intent { --bc: var(--gold); --bi: var(--gold-ink); }


/* ── 26. A RÉGI PANEL MŰKÖDÉSE — Fiókok + Élő ───────────────────────────────────
   Tulaj, 2026-09-12: „nem teljesen átlátható … hasonlóbban kellene működjön, mint a régi”.
   Minden szabály itt a régi panel egy korábbi tulaj-kérését hozza vissza, a mai tokenekkel. */

/* Csoport-csempe: a csempe MAGA a szűrő — kattintásra a lista arra a csoportra szűkül
   (2026-07-26). Nagy szám, alatta a név és egy mondat arról, mit jelent. Telefonon egy sorban,
   oldalra görgethetően: tizenkét csempe egymás alatt lenyomná a listát a képernyőről. */
.cohorts { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
@media (max-width: 759px) {
  .cohorts { display: flex; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .cohorts::-webkit-scrollbar { display: none; }
  .cohorts .cohort { flex: 0 0 150px; }
}
.cohort {
  display: flex; flex-direction: column; gap: 2px;
  width: 100%; text-align: left;
  padding: 12px 14px 11px;
  border-radius: var(--r);
  border: var(--bd) solid color-mix(in srgb, var(--kc, var(--fn)) 22%, var(--line-2));
  background: color-mix(in srgb, var(--kc, var(--fn)) var(--tile-wash), var(--panel));
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.cohort:hover { border-color: color-mix(in srgb, var(--kc, var(--fn)) 55%, var(--line-2)); }
.cohort[aria-pressed="true"] {
  border-color: var(--kc, var(--fn));
  background: color-mix(in srgb, var(--kc, var(--fn)) 18%, var(--panel));
}
.cohort-num {
  font-family: var(--font-head); font-weight: 700; font-size: 26px; line-height: 1.1;
  letter-spacing: -.01em; font-variant-numeric: tabular-nums;
  color: var(--ki, var(--text));
}
.cohort-lab { font-size: var(--fs-small); font-weight: 700; }
.cohort-desc { font-size: var(--fs-micro); color: var(--muted); line-height: 1.35; }

/* Relatív idő: zöld ≤7 nap, sima ≤30 nap, narancs régebbi, szürke ha soha (2026-07-23).
   A szín sosem beszél egyedül — a szöveg („5 napja”) mindig ott van. */
.rel { font-weight: 600; }
.rec-fresh { color: var(--ok-ink); }
.rec-ok { color: var(--text); }
.rec-stale { color: var(--orange-ink); }
.rec-never { color: var(--muted); font-weight: 500; }
.exp-soon { color: var(--warn-ink); font-weight: 600; }
.exp-over { color: var(--danger-ink); font-weight: 600; }

/* Jelvénysor egy cellában vagy kártyán — több jelzés egymás mellett, tördelve. */
.badges { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.badges + .rel, .badges + .row-p2 { margin-top: 4px; }
.badge--vip { --bc: var(--gold); --bi: var(--gold-ink); }

/* Sor-állapotok. A zöld sor a tulaj SAJÁT „€20 fizető” jelölése (2026-07-27 — a Fiókokon és az
   Élőn is); a kijelölés és a probléma felülüti, ezért azok állnak utána. */
.table--top td { vertical-align: top; }
/* Tíz oszlop fér ki egy laptopon is: szűkebb cellaköz, és a hosszú részlet-sor tördelhető. */
.table--top th, .table--top td { padding-left: 6px; padding-right: 6px; }
.table--top td.pickcell, .table--top th.pickcell { width: 32px; }
.table--top .acts .iconbtn { width: 30px; height: 30px; }
/* Hosszú e-mail-cím se szélesítse szét az oszlopot: a cella kupakot kap, a teljes cím a súgóban. */
.cellcap { max-width: 200px; }
/* Keskenyebb ablakban a tábla oldalra görgethető — a műveleti oszlop ilyenkor is a jobb szélen
   marad, mindig kéznél. (A sor-színezés a nagyobb súlyú szabályával ezt a cellát is festi.) */
.table--top th:last-child, .table--top td:last-child { position: sticky; right: 0; background: var(--panel); }
.wrap { white-space: normal; }
/* A leghosszabb szűrő-felirat se tolja ki a legördülőt a telefon képernyőjéről. */
.toolbar select { max-width: 100%; }
.table tbody tr.is-paying td { background: color-mix(in srgb, var(--ok) 8%, var(--panel)); }
.table tbody tr.is-paying td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
.table tbody tr.is-selected td { background: color-mix(in srgb, var(--fn) 10%, var(--panel)); }
.table tbody tr.is-alert td { background: color-mix(in srgb, var(--danger) 7%, var(--panel)); }
.table tbody tr.is-alert td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.table tbody tr.is-dim td { color: var(--muted); }

/* „€20 fizető” — a tulaj tervező-pipája: a fiókra semmi hatása, csak a csempét és a zöld sort
   hajtja. Jelölőnégyzet a cellában — a tábla vasszabálya ezt megengedi. */
.payflag {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px; padding: 2px 10px 2px 6px;
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  font-size: var(--fs-micro); font-weight: 600; color: var(--muted);
  white-space: nowrap; cursor: pointer; user-select: none;
}
.payflag .pick { width: 16px; height: 16px; accent-color: var(--ok-ink); }
.payflag.is-on {
  border-color: color-mix(in srgb, var(--ok) 50%, var(--line-2));
  background: color-mix(in srgb, var(--ok) 9%, var(--panel));
  color: var(--ok-ink);
}

/* Soronkénti műveleti ikonok (a régi panel ikonsora). A romboló ikon színe jelez, a
   megerősítő ablak véd. */
.acts { display: flex; gap: 2px; justify-content: flex-end; align-items: center; }
.iconbtn--ok { color: var(--ok-ink); }
.iconbtn--danger { color: var(--danger-ink); }
.iconbtn--danger:hover { background: color-mix(in srgb, var(--danger) 12%, var(--panel)); color: var(--danger-ink); }

/* Szövegként viselkedő link-gomb — táblában is megengedett, mert szöveg, nem gomb-doboz. */
.linkbtn {
  color: var(--fn-ink); font-weight: 600; text-align: left; white-space: nowrap;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px;
}
.linkbtn:hover { color: var(--text); }

/* Kikapcsolt eszközsor-kapcsoló (a „Sosem élők elrejtése”, ha a szűrő épp őket kéri). */
.btn[aria-disabled="true"] { opacity: .6; cursor: not-allowed; }

/* Fiók-kártya telefonon — a régi panel mobil-kártyája: minden fontos adat látszik, vízszintes
   görgetés nélkül. Fent: ki és mikor; lent: előfizetés, €20-pipa és a műveletek. */
.ucards { display: flex; flex-direction: column; gap: 8px; }
.ucard { padding: 11px 12px; border-radius: var(--r); background: var(--surface); border: 1px solid transparent; }
.ucard.is-paying { border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 7%, var(--surface)); }
.ucard.is-selected { border-color: color-mix(in srgb, var(--fn) 50%, transparent); }
.ucard-top { display: flex; align-items: flex-start; gap: 10px; }
.ucard-top .row-body { text-align: left; }
.ucard-top .row-meta { padding-top: 2px; }
.ucard-foot {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line);
}
.ucard-foot .payflag { margin-top: 0; }
.ucard-foot .acts { margin-left: auto; }


/* ── 27. AI-EGYEZTETŐ — a Claude és a Codex beszélgetése (2026-09-13) ──────────────
   Buborék-szál. A szerző színe (Claude narancs, Codex türkiz, te lila — inline `--mc`) CSAK a
   keretet és a nevet festi: az állapotot a jelvény és az állapot-szalag mondja, nem a buborék. */
.thread { display: flex; flex-direction: column; gap: 10px; }
.msg {
  padding: 12px 14px;
  border-radius: var(--r);
  border: 1px solid color-mix(in srgb, var(--mc, var(--slate)) 28%, var(--line));
  border-left: 3px solid var(--mc, var(--slate));
  background: color-mix(in srgb, var(--mc, var(--slate)) 6%, var(--panel));
}
.msg-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-small); }
.msg-who { font-weight: 700; color: color-mix(in srgb, var(--mc, var(--slate)) 72%, var(--text)); }
.msg-kind { color: var(--muted); }
.msg-when { margin-left: auto; color: var(--muted); font-size: var(--fs-micro); white-space: nowrap; }
/* A szöveg sortörései megmaradnak (az AI-k listákat írnak), a hosszú útvonal pedig törhet. */
.msg-body { margin-top: 7px; font-size: 15px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.card > .msg-body { margin-top: 14px; }
@media (max-width: 759px) { .msg-when { margin-left: 0; width: 100%; } }
.commits { display: flex; flex-direction: column; gap: 7px; }
.commit { display: flex; align-items: baseline; gap: 10px; font-size: 14px; min-width: 0; }
.commit > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sha { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--fn-ink); flex: none; }

/* Csatolmányok (#21 téma, 2026-09-14): a hozzászólás alatt a még el nem küldöttek (törölhetők), az üzenetben az
   elküldöttek. Kép → kis előnézet, kattintásra nagyban; PDF/szöveg → egy címkés kocka, új lapon nyílik. */
.atts, .att-tray { display: flex; flex-wrap: wrap; gap: 10px; }
.atts { margin-top: 10px; }
.att-tray { margin-top: 12px; }
.att-tray:empty { display: none; }
.att { position: relative; width: 128px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.att-thumb {
  width: 128px; height: 96px; padding: 0; overflow: hidden;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
  font: 700 var(--fs-small)/1 var(--font-mono); color: var(--muted); text-decoration: none; cursor: zoom-in;
}
.att-thumb--file { cursor: pointer; }
.att-thumb:hover { border-color: var(--line-3); }
.att-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.att-name { font-size: var(--fs-micro); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-size { font-size: var(--fs-micro); color: var(--muted); }
.att-del {
  position: absolute; top: 4px; right: 4px; width: 30px; height: 30px; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--panel); color: var(--text);
}
.att-del .i { width: 14px; height: 14px; }
.att-busy {
  width: 128px; height: 96px; display: grid; place-items: center;
  border: 1px dashed var(--line-3); border-radius: var(--r-sm); font-size: var(--fs-small); color: var(--muted);
}
/* A fájlválasztó a „📎 Csatolás” címke része: a címkére koppintva nyílik (telefonon a fotók is). */
.att-pick { position: relative; }
.att-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.att-zoom { width: min(96vw, 1100px); max-width: 96vw; }
.att-zoom-form { display: flex; flex-direction: column; gap: 12px; padding: 12px; }
.att-zoom-img { display: block; max-width: 100%; max-height: 78vh; margin: 0 auto; object-fit: contain; border-radius: var(--r-sm); cursor: zoom-out; }
@media (max-width: 759px) {
  .att, .att-thumb, .att-busy { width: 104px; }
  .att-thumb, .att-busy { height: 80px; }
}

/* ── 28. VIDEÓ-ELŐNÉZET (2026-09-28) ────────────────────────────────────────────
   Először KÉP (a szerver előnézeti képe), videó csak kattintásra — a Safari a `preload="metadata"`
   videót üres dobozként rajzolja. A doboz MAGASSÁGA rögzített (`--pv-h`), a szélessége a kép
   arányából jön: így a doboz pontosan a kép, és a rá írt minta név (`.pv-name`, % a képhez mérve)
   ugyanoda esik, ahová a fal írná. A betűméret a magasság 6,2 %-a — a fal szabálya
   (public/overlay/video.js: LANDSCAPE_NAME_FONT_H_PCT). */
.pv {
  --pv-h: 126px;
  position: relative;
  width: fit-content; max-width: 100%;
  margin-top: 12px;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--video-bg);
}
.pv--tall { --pv-h: 240px; }
@media (min-width: 760px) { .pv { --pv-h: 216px; } .pv--tall { --pv-h: 320px; } }
.pv-btn { position: relative; display: block; padding: 0; cursor: pointer; }
.pv-media {
  display: block;
  height: var(--pv-h); width: auto; max-width: 100%;
  aspect-ratio: auto 16 / 9;   /* amíg a kép be nem töltődik; utána a sajátja számít */
  object-fit: contain;
  background: var(--video-bg);
}
.pv--tall .pv-media { aspect-ratio: auto 9 / 16; }
.pv-play {
  position: absolute; right: 8px; bottom: 8px;
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: var(--r-pill);
  background: var(--video-chip); color: var(--video-ink);
  font-size: 13px; line-height: 1;
  pointer-events: none;
}
.pv-btn:hover .pv-play, .pv-btn:focus-visible .pv-play { background: var(--fn-ink); }
/* Nincs előnézeti kép: a törött kép eltűnik, a doboz a saját arányával megmarad kattinthatónak. */
.pv.is-noposter .pv-media { display: none; }
.pv.is-noposter .pv-btn { height: var(--pv-h); aspect-ratio: 16 / 9; }
.pv--tall.is-noposter .pv-btn { aspect-ratio: 9 / 16; }
.pv-name {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: calc(var(--pv-h) * .062); font-weight: 900; line-height: 1.05;
  white-space: nowrap;
  color: var(--video-ink);
  text-shadow: 0 0 3px var(--video-shadow), 0 1px 2px var(--video-shadow);
  pointer-events: none;   /* a videó vezérlői alatta kattinthatók maradnak */
}

/* Magyar fordítás a Support oldalon (#30 téma, 2026-09-14): az idegen nyelvű üzenet magyarul áll,
   az eredeti egy lenyitható blokkban marad. A szöveg sortörései megmaradnak, a hosszú link törhet. */
.tr { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
.tr-q { font-weight: 600; color: var(--text); }
.tr-a { display: block; margin-top: 6px; font-size: var(--fs-small); color: var(--muted); }
.tr-orig { margin-top: 4px; font-size: var(--fs-micro); color: var(--muted); }
.tr-orig > summary { width: fit-content; cursor: pointer; }
.tr-orig > .tr { margin-top: 4px; padding-left: 10px; border-left: 2px solid var(--line); }
.tr-note { font-size: var(--fs-micro); color: var(--muted); }

}

/* Posztok (2026-09-30): kép balra, szöveg jobbra; keskeny képernyőn egymás alatt. */
.post-grid{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:759px){.post-grid{grid-template-columns:1fr}}

/* Statisztika (2026-10-11): az időszakok EGYMÁS MELLETT, egy táblában (a tulaj: mért adat = táblázat). Telefonon a
   tábla vízszintesen görgethető, a mutató neve közben a bal szélen marad (ragadós első oszlop). A heti diagram a tulaj
   „B" választása (széles oszlopok, szám fölöttük, csonka hét csíkozva); a hőtérkép 7 × 24 cella, a szín telítettsége az óra
   forgalma (`--a` = százalék, a lap számolja). */
@layer pages {
  /* A görgetődoboz NEM adhatja tovább a tábla szélességét: `width: 0` + `min-width: 100%` nélkül a 760 px-es tábla
     telefonon az egész oldalt szélesebbre tolja (a kártyák jobb széle lelóg), görgetés helyett. */
  .stat-scroll { width: 0; min-width: 100%; }
  .stat-table { min-width: 860px; }
  .stat-table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
  .stat-table thead th { vertical-align: bottom; }
  .stat-table th:first-child { position: sticky; left: 0; z-index: 1; background: var(--panel); }
  .stat-table tbody th {
    min-width: 200px; padding: 10px 12px; border-bottom: 1px solid var(--line);
    text-align: left; white-space: normal; text-transform: none; letter-spacing: 0;
    font-size: 14px; font-weight: 600; color: var(--text);
  }
  .stat-table tr.stat-group th {
    padding-top: 20px; border-bottom: 1px solid var(--line-2);
    font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--fn-ink);
  }
  .stat-table tr.stat-sub th { padding-left: 26px; font-weight: 500; color: var(--muted); }
  .stat-range { display: block; margin-top: 2px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
  .stat-hint {
    display: block; max-width: 44ch; margin-top: 2px;
    font-size: var(--fs-micro); font-weight: 500; line-height: 1.35; color: var(--muted);
    white-space: normal; text-decoration: none; text-transform: none; letter-spacing: 0;
  }
  .stat-pct { display: block; font-size: var(--fs-micro); font-weight: 600; color: var(--muted); }
  /* Tördelhet: egy sorban a „Tegnap" oszlopot a szám kétszeresére szélesítené, telefonon csak a „Ma" férne ki. */
  .stat-vs { display: block; margin-top: 2px; font-size: var(--fs-micro); font-weight: 500; color: var(--muted); white-space: normal; }
  .stat-vs.up { color: var(--ok-ink); }
  .stat-vs.down { color: var(--danger-ink); }
  .stat-vs.is-big { font-weight: 700; }
  .stat-h4 { margin: 0 0 8px; font-size: 15px; font-weight: 700; }
  .stat-block { margin-top: 20px; }
  .stat-blockhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
  .stat-blockhead .stat-h4 { margin: 0; }
  .stat-top td { padding: 9px 10px; }
  .stat-top td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
  .stat-rank { width: 36px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .stat-giftname { display: inline-flex; align-items: center; gap: 8px; }
  .stat-gift { flex: none; width: 28px; height: 28px; object-fit: contain; }
  .stat-who { font-weight: 600; }

  /* Heti alakulás (B) */
  .stat-weeks { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .stat-wk { display: flex; gap: 8px; align-items: flex-end; height: 190px; padding-top: 22px; }
  .stat-wk > div { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; text-align: center; }
  .stat-wk-v { font-weight: 700; font-size: 14px; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
  .stat-wk-bar { border-radius: 8px 8px 3px 3px; background: var(--c); min-height: 3px; }
  .stat-wk-bar.is-part { background: repeating-linear-gradient(135deg, var(--c) 0 6px, color-mix(in srgb, var(--c) 45%, var(--panel)) 6px 10px); }
  .stat-wk-x { font-size: 11px; color: var(--muted); margin-top: 6px; line-height: 1.25; }
  .stat-wk-x small { display: block; color: var(--muted-2); font-size: 11px; }
  .stat-trend { margin-top: 10px; font-size: var(--fs-small); color: var(--muted); }
  .stat-trend .stat-vs, .stat-trend .stat-hint { display: inline; }

  /* A közös időszak-váltó a listás kártyák fölött */
  .stat-periodbar { display: flex; flex-direction: column; gap: 6px; }

  /* Hőtérkép: 7 × 24 */
  .stat-heat { display: grid; grid-template-columns: 34px repeat(24, minmax(16px, 1fr)); gap: 3px; min-width: 600px; }
  .stat-heat-lab { font-size: 11px; font-weight: 600; color: var(--muted); align-self: center; }
  .stat-heat-x { font-size: 10px; color: var(--muted-2); text-align: center; }
  .stat-heat-cell { aspect-ratio: 1; border-radius: 3px; background: color-mix(in srgb, var(--fn) var(--a, 0%), var(--surface-2)); }

  /* Szöveges csempe-érték (péntek, szombat): a számméret telefonon kilógna a csempéből */
  .kpi-num.stat-kpi-text { font-size: 24px; line-height: 1.15; }
  /* Funkció-használat: sáv + százalék egy cellában */
  .stat-featbar { display: grid; grid-template-columns: 1fr 48px; gap: 8px; align-items: center; min-width: 140px; font-size: var(--fs-small); color: var(--muted); }

  @media (max-width: 759px) {
    .stat-table tbody th { min-width: 150px; }
    .stat-table .stat-hint { display: none; }
  }
}

/* ── Értesítések (2026-10-11) — a küldő űrlap és a csengő-előnézet ─────────────── */
@layer pages {
  .ntf-compose { align-items: start; }
  .ntf-form { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  /* A `.field` display:flex-e felülírná a böngésző `hidden`-jét — a címzett-függő mezők így tűnnek el. */
  .ntf-form [hidden] { display: none; }
  .ntf-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
  .ntf-label { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
  .ntf-preview { padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
  .ntf-item {
    display: flex; flex-direction: column; gap: 6px; padding: 14px 16px;
    border-left: 4px solid var(--fn); border-radius: var(--r); background: var(--panel);
  }
  .ntf-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--fs-micro); color: var(--muted); }
  .ntf-title { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
  .ntf-body { font-size: var(--fs-small); line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
  .ntf-title.is-empty, .ntf-body.is-empty { color: var(--muted-2); font-style: italic; }
  .ntf-cta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
  .ntf-cell { max-width: 32ch; overflow-wrap: anywhere; }

/* ════════════════════════════════════════════════════════════════════════════
   2026-10-12 — AZ ÚJ KONZOL ARCULATA a közös elemeken (tulaj makettjei: PKTOK-Dago-Part-1)
   Kártyacím keskeny, félkövér (Barlow Condensed); táblázat sötét fejsorral és
   oszlopvonalakkal, keretben; szögletesebb szűrő-chip, borostyán kiválasztással;
   elsődleges gomb tömör borostyán; „ÉLŐ" zöld kapszula. A régi szabályok UTÁN,
   ugyanabban a rétegben — a későbbi nyer.
   ══════════════════════════════════════════════════════════════════════════ */
.card { border-color: var(--line-2); }
.card-head h3 { font-family: var(--font-head); font-weight: 700; font-size: 25px; letter-spacing: .005em; line-height: 1.1; }
.card-head h3 small { font-family: var(--font-body); font-weight: 400; font-size: 18px; color: var(--text); }
.card-head .sub { font-family: var(--font-mono); font-size: 13px; }
.card-link {
  display: inline-flex; align-items: center; gap: 8px; color: var(--amber-ink); font-size: 14.5px; font-weight: 500;
  text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer;
}
.card-link:hover { text-decoration: underline; }

.btn { border-radius: var(--r-sm); background: var(--surface); }
.btn--primary { background: var(--amber); color: var(--on-accent); border-color: var(--amber); }
.btn--primary:hover { background: var(--amber-ink); border-color: var(--amber-ink); }
.btn--ghost { color: var(--amber-ink); }

.tablewrap.boxed, .table.boxed { border: 1px solid var(--line-2); border-radius: var(--r-sm); }
.tablewrap.boxed { overflow: hidden; overflow-x: auto; }
.table th {
  font-family: var(--font-body); font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--text); background: var(--surface); border-bottom: 1px solid var(--line-2);
}
.table.grid-lines td + td, .table.grid-lines th + th { border-left: 1px solid var(--line); }
.table td { border-bottom-color: var(--line); }
.table tbody tr:hover td { background: color-mix(in srgb, var(--surface) 70%, var(--panel)); }

.chip { border-radius: var(--r-sm); background: var(--surface); border-color: var(--line-2); }
.chip b {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: var(--r-pill); background: var(--line-3); color: var(--text); font-size: 12px;
}
.chip[aria-pressed="true"] { background: var(--amber); color: var(--on-accent); border-color: var(--amber); font-weight: 600; }
.chip[aria-pressed="true"] b { background: color-mix(in srgb, var(--on-accent) 22%, var(--amber)); color: var(--on-accent); }

.badge--live { --bc: var(--ok); --bi: var(--ok-ink); height: 30px; padding: 0 13px; font-weight: 700; text-transform: uppercase;
  background: color-mix(in srgb, var(--ok) 22%, var(--panel)); }

/* Változás-jel a táblákban: ▲ zöld / ▼ piros (a „rossz" irány a hívó dönti el: .up / .down). */
.delta { white-space: nowrap; font-variant-numeric: tabular-nums; }
.delta.up { color: var(--ok-ink); }
.delta.down { color: var(--danger-ink); }
.delta.flat { color: var(--muted); }

/* Riasztó-csempék a Főoldal tetején (makett 01): színes ikonkör, cím, alcím, nagy „N db", nyíl. */
.qtiles { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.qtile {
  display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 16px; row-gap: 14px;
  align-items: center; text-align: left; width: 100%;
  padding: 18px 18px 16px; border-radius: var(--r);
  border: 1px solid color-mix(in srgb, var(--qc) 55%, var(--line-2));
  background: color-mix(in srgb, var(--qc) 13%, var(--panel));
}
.qtile[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--qc); }
.qtile .q-ic {
  grid-row: 1; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-size: 26px;
  background: color-mix(in srgb, var(--qc) 30%, var(--panel)); color: color-mix(in srgb, var(--qc) 80%, var(--text));
}
.qtile .q-t { grid-column: 2 / 4; }
.qtile .q-t b { display: block; font-family: var(--font-head); font-size: 21px; font-weight: 700; }
.qtile .q-t span { color: var(--muted); font-size: 14.5px; }
.qtile .q-n { grid-column: 1 / 3; font-family: var(--font-head); font-size: 34px; font-weight: 700; line-height: 1; }
.qtile .q-n small { font-family: var(--font-body); font-size: 17px; font-weight: 400; color: var(--muted); margin-left: 8px; }
.qtile .q-go { grid-column: 3; color: var(--muted); font-size: 20px; transform: rotate(-90deg); }

/* Prioritás-pötty a Teendők táblában. */
.prio { display: inline-flex; align-items: center; gap: 8px; }
.prio::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--pc, var(--warn)); }
.prio--high { --pc: var(--danger); color: var(--danger-ink); }
.prio--mid { --pc: var(--warn); color: var(--warn-ink); }

/* Személy-cella: kerek monogram + név + második sor. */
.who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.who .mono {
  width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: color-mix(in srgb, var(--mc, var(--amber)) 35%, var(--panel)); color: var(--text); font-weight: 700; font-size: 14px;
}
.who b { display: block; font-weight: 600; }
.who span { display: block; font-size: 13px; color: var(--muted); }

}