/* DAGÓ 2.0 — pages-e.css · az új konzol-arculat oldal-szintű szabályai (2026-10-12, tulaj makettjei)
   Színliterál itt sem lehet — minden szín a tokens.css-ből.
   E-csoport: Kiadások (30–32), Statisztika (33, 35), Forgalom (36, 38, 39), Beállítások (53).
   Minden osztály `e-` előtagú, hogy a párhuzamosan formált többi oldallal ne ütközzön. */
@layer pages {

/* ── Közös: a négy oldal kártya-alcíme sima betű (a makettekben nem gépírásos) ── */
#page-kiadasok .card-head .sub, #page-statisztika .card-head .sub,
#page-forgalom .card-head .sub, #page-beallitasok .card-head .sub {
  font-family: var(--font-body); font-size: 14.5px; color: var(--muted);
}
.e-body { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }

/* ── Fülek: kitöltött borostyán kiválasztás (makett 33, 35, 38, 39) ───────────── */
.e-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.e-tab {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 42px; padding: 0 22px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--surface);
  font-size: 15.5px; font-weight: 600; color: var(--text); white-space: nowrap;
}
.e-tab:hover { border-color: var(--line-3); }
.e-tab[aria-selected="true"] { background: var(--amber); border-color: var(--amber); color: var(--on-accent); }
.e-tab .i { font-size: 17px; }

/* Időszak-váltó: egymáshoz tapadó gombsor (makett 36, jobbra fent) */
.e-seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); overflow: hidden; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.e-seg::-webkit-scrollbar { display: none; }
.e-seg button { min-height: 42px; padding: 0 18px; font-size: 15px; font-weight: 500; color: var(--text); white-space: nowrap; }
.e-seg button + button { border-left: 1px solid var(--line-2); }
.e-seg button[aria-selected="true"] { background: var(--amber); color: var(--on-accent); font-weight: 600; }

/* Kicsi legördülő a kártyafejlécben (makett 33: „7 nap ⌄", „Adások ⌄") */
.e-select {
  min-height: 36px; padding: 0 32px 0 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text); font: inherit; font-size: 14.5px;
}

/* ── KPI-csempe ikonnal (makett 30, 33, 35, 36, 38) ───────────────────────────── */
.e-kpis { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.e-kpi {
  display: flex; align-items: flex-start; gap: 13px; min-width: 0;
  padding: 18px 16px 16px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--panel);
}
.e-kpi-ic {
  flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 21px;
  background: var(--surface-2); color: var(--text);
}
.e-kpi-b { min-width: 0; display: flex; flex-direction: column; }
.e-kpi-l { font-size: 15px; color: var(--text); }
.e-kpi-n {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  font-family: var(--font-head); font-weight: 700; font-size: 32px; line-height: 1.1; margin-top: 4px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.e-kpi-n .delta { font-family: var(--font-body); font-size: 15px; font-weight: 600; }
.e-kpi-s { font-size: 13.5px; color: var(--muted); margin-top: 3px; }
.e-kpi-s .e-up { color: var(--ok-ink); font-weight: 600; }
.e-kpi-s .e-down { color: var(--danger-ink); font-weight: 600; }
.e-kpi-sm { font-size: 21px; line-height: 1.25; white-space: normal; }
.e-acts > div { display: flex; gap: 4px; }
/* Napló „Forrás / kategória" cellája: leírás + kategória-címke + forrás */
.e-srccell { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.e-srccell > span:first-child { min-width: 140px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Rácsok ────────────────────────────────────────────────────────────────────── */
.e-grid { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); align-items: start; }
.e-col { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
@media (min-width: 1080px) {
  .e-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .e-grid--wide { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .e-grid--side { grid-template-columns: minmax(0, 1fr) 270px; }
  .e-grid--form { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .e-grid--meta { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); }
}
.e-stretch { align-items: stretch; }
.e-stretch > .card { height: 100%; }

/* ── Táblák ────────────────────────────────────────────────────────────────────── */
.e-tbl td, .e-tbl th { white-space: nowrap; }
.e-tbl td.num, .e-tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
.e-tbl td.mono { font-family: var(--font-mono); font-size: 13.5px; }
.e-tbl td.wrap { white-space: normal; min-width: 180px; }
.e-tbl tr.e-total td { font-weight: 700; background: var(--surface); border-top: 1px solid var(--line-2); }
.e-tbl td.e-gold { color: var(--amber-ink); font-weight: 700; }
.e-hint { color: var(--muted-2); font-size: 12px; cursor: help; }
.e-tbl.stat-table tbody th { font-size: 14.5px; font-weight: 500; }
.e-tbl.stat-table tr.stat-sub th { padding-left: 46px; }
.e-tbl .e-ic { display: inline-flex; align-items: center; gap: 12px; }
.e-tbl .e-ic .i { color: var(--muted); font-size: 17px; }
.e-tbl td.e-no { width: 40px; color: var(--muted); }
.e-tbl td, .e-tbl th { padding-top: 9px; padding-bottom: 9px; }
.e-tbl td.e-acts { width: 1%; }
.e-share { display: grid; grid-template-columns: 52px minmax(60px, 1fr); gap: 10px; align-items: center; min-width: 140px; }
.e-share b { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }

/* Vízszintes arány-sáv (táblában és listában) */
.e-meter { display: block; height: 12px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.e-meter > i { display: block; height: 100%; border-radius: 3px; background: var(--bc, var(--amber)); min-width: 2px; }

/* Pötty a kategória mellé */
.e-dot { display: inline-block; width: 13px; height: 13px; border-radius: 50%; background: var(--dc, var(--slate)); flex: none; }
.e-cat { display: inline-flex; align-items: center; gap: 10px; }
.e-tag {
  display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 5px; font-size: 12.5px; font-weight: 600;
  background: color-mix(in srgb, var(--dc, var(--slate)) 30%, var(--panel)); color: color-mix(in srgb, var(--dc, var(--slate)) 55%, var(--text));
  border: 1px solid color-mix(in srgb, var(--dc, var(--slate)) 55%, var(--line-2));
}

/* ── Kördiagram (makett 30: Kategóriák szerinti bontás) ───────────────────────── */
.e-donutwrap { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 760px) { .e-donutwrap { grid-template-columns: 190px minmax(0, 1fr); } }
.e-donut {
  position: relative; width: 180px; aspect-ratio: 1; border-radius: 50%; justify-self: center;
  background: var(--g, var(--surface-2));
}
.e-donut::after { content: ""; position: absolute; inset: 30px; border-radius: 50%; background: var(--panel); }
.e-donut > div { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; text-align: center; }
.e-donut b { font-family: var(--font-head); font-size: 22px; font-weight: 700; }
.e-donut span { font-size: 13px; color: var(--muted); }
.e-legend { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 9px 18px; align-items: center; font-size: 15px; }
.e-legend .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-size: 14px; }
.e-legend .pct { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ── Függőleges oszlopdiagram tengellyel (makett 30, 33, 39) ─────────────────── */
.e-chart { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 0 8px; }
.e-chart.has-y2 { grid-template-columns: 46px minmax(0, 1fr) 46px; }
.e-yax { position: relative; height: var(--ch, 200px); font-size: 12.5px; color: var(--muted); }
.e-yax span { position: absolute; right: 0; transform: translateY(50%); font-variant-numeric: tabular-nums; }
.e-yax--r span { right: auto; left: 0; }
.e-plot {
  position: relative; height: var(--ch, 200px); display: flex; align-items: stretch; gap: var(--bgap, 14px);
  padding: 0 6px; border-left: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
  background-image: linear-gradient(to top, var(--line) 1px, transparent 1px);
  background-size: 100% 25%;
}
.e-bar { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.e-bar > i { display: block; width: min(100%, var(--bw, 64px)); background: var(--bc, var(--slate)); border-radius: 3px 3px 0 0; min-height: 2px; }
.e-bar.is-hi > i { --bc: var(--amber); }
.e-bar.is-part > i { background: repeating-linear-gradient(135deg, var(--bc, var(--amber)) 0 6px, color-mix(in srgb, var(--bc, var(--amber)) 40%, var(--panel)) 6px 10px); }
.e-bar > b { font-size: 12.5px; font-weight: 500; margin-bottom: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.e-bar.is-hi > b { font-weight: 700; }
.e-xax { grid-column: 2; display: flex; gap: var(--bgap, 14px); padding: 7px 6px 0; font-size: 12.5px; color: var(--muted); }
.e-xax span { flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.e-line { position: absolute; inset: 0 6px; width: calc(100% - 12px); height: 100%; overflow: visible; pointer-events: none; }
.e-line polyline { fill: none; stroke: var(--muted); stroke-width: 2; vector-effect: non-scaling-stroke; }
.e-line circle { fill: var(--panel); stroke: var(--text); stroke-width: 2; vector-effect: non-scaling-stroke; }
.e-chart-legend { display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; margin-top: 14px; font-size: 14px; color: var(--text); }
.e-chart-legend span { display: inline-flex; align-items: center; gap: 9px; }
.e-chart-legend i { width: 13px; height: 13px; border-radius: 50%; background: var(--lc, var(--amber)); }
.e-chart-legend i.is-line { width: 26px; height: 2px; border-radius: 0; background: var(--muted); }
@media (max-width: 759px) {
  .e-chart, .e-chart.has-y2 { grid-template-columns: 36px minmax(0, 1fr); }
  .e-chart .e-yax--r { display: none; }
  .e-bar > b { font-size: 10.5px; }
  .e-xax { font-size: 11px; }
}

/* Vonal- és területdiagram (makett 36: Napi látogatás) */
.e-area { display: block; width: 100%; height: 100%; overflow: visible; }
.e-area .a1 { fill: color-mix(in srgb, var(--slate) 22%, transparent); }
.e-area .a2 { fill: color-mix(in srgb, var(--amber) 22%, transparent); }
.e-area .l1 { fill: none; stroke: var(--slate); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.e-area .l2 { fill: none; stroke: var(--amber); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.e-pts { position: absolute; inset: 0; pointer-events: none; }
.e-pts i { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--pc, var(--amber)); }
.e-plot--line { padding: 0; background-size: 100% 25%; }
.e-xax--abs { position: relative; display: block; height: 26px; padding: 0; }
.e-xax--abs span { position: absolute; top: 7px; transform: translateX(-50%); overflow: visible; }

/* Kártyacím ikonnal (makett 38: Ország · Nyelv · Eszköz · Böngésző) */
.e-h3ic { display: flex; align-items: center; gap: 14px; min-width: 0; }
.e-h3ic .e-kpi-ic { width: 44px; height: 44px; background: none; font-size: 30px; }

/* ── Vízszintes sávlista (makett 30: Legnagyobb szolgáltatók; 33: Legaktívabb napok) ── */
.e-hbars { display: flex; flex-direction: column; gap: 14px; }
.e-hbar { display: grid; grid-template-columns: minmax(70px, 110px) minmax(0, 1fr) auto; gap: 14px; align-items: center; font-size: 15px; }
.e-hbar > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.e-hbar > b { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-size: 14px; }
.e-hbar .e-meter { height: 18px; }
.e-hbar--rank { grid-template-columns: 26px minmax(70px, 100px) minmax(0, 1fr) auto; }
.e-rank {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface-2); font-size: 12.5px; font-weight: 600; color: var(--text);
}
.e-rank.is-1 { background: var(--amber); color: var(--on-accent); }

/* Változás-lista (makett 33: Legfontosabb változások) */
.e-chg { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; gap: 11px 12px; align-items: center; font-size: 14.5px; }
.e-chg .i { color: var(--muted); }
.e-chg b { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.e-chg .delta { text-align: right; font-size: 13.5px; min-width: 64px; }

/* Rangsor-lista monogrammal (makett 33: Top streamerek) */
.e-top { display: flex; flex-direction: column; }
.e-top > * { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 0; text-align: left; width: 100%; }
.e-top > * + * { border-top: 1px solid var(--line); }
.e-top .who .mono { width: 30px; height: 30px; font-size: 12px; }
.e-top .e-coin { display: inline-flex; align-items: center; gap: 7px; font-variant-numeric: tabular-nums; }
.e-top .e-coin::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--amber); }

/* ── Hőtérkép borostyánban (makett 35) ─────────────────────────────────────── */
.e-heat { display: grid; grid-template-columns: 78px repeat(24, minmax(14px, 1fr)); gap: 3px; min-width: 560px; }
.e-heat-lab { font-size: 13.5px; color: var(--text); align-self: center; }
.e-heat-x { font-size: 12px; color: var(--muted); text-align: center; padding-top: 6px; }
.e-heat-cell { aspect-ratio: 1.15; border-radius: 3px; background: color-mix(in srgb, var(--amber) var(--a, 0%), var(--surface-2)); }
.e-heat-legend { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--muted); }
.e-heat-legend i { width: 15px; height: 15px; border-radius: 3px; background: color-mix(in srgb, var(--amber) var(--a, 0%), var(--surface-2)); }

/* Mini-csempék egy kártyán belül (makett 32: Összköltés · Aktív kampányok · Utolsó szinkron; 35: Fizetés) */
.e-minis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.e-mini { padding: 13px 15px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); min-width: 0; }
.e-mini span { display: block; font-size: 13.5px; color: var(--muted); }
.e-mini b { display: flex; align-items: center; gap: 9px; margin-top: 5px; font-family: var(--font-head); font-size: 25px; font-weight: 700; font-variant-numeric: tabular-nums; }
.e-mini b.is-text { font-family: var(--font-body); font-size: 15.5px; font-weight: 600; overflow-wrap: anywhere; }
.e-mini small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted); }

/* Állapot-pötty + szöveg a kártya fejlécében (makett 32: „● Kapcsolat rendben") */
.e-state { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; }
.e-state::before { content: ""; flex: none; width: 15px; height: 15px; margin-top: 2px; border-radius: 50%; background: var(--sc, var(--slate)); }
.e-state b { display: block; color: var(--sc-ink, var(--text)); font-weight: 600; }
.e-state small { display: block; color: var(--muted); font-size: 13px; }
.e-state--ok { --sc: var(--ok); --sc-ink: var(--ok-ink); }
.e-state--warn { --sc: var(--warn); --sc-ink: var(--warn-ink); }
.e-state--bad { --sc: var(--danger); --sc-ink: var(--danger-ink); }
.e-headside { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

/* Keretes belső doboz (makett 32: a kulcs-mezők doboza) */
.e-box { padding: 16px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--bg-2); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.e-box .btn { flex: 1 1 140px; }
.e-btnrow { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── Űrlap: címke balra, mező jobbra (makett 31, 53) ─────────────────────────── */
.e-form { display: flex; flex-direction: column; gap: 18px; }
.e-frow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; align-items: start; }
.e-frow > label, .e-frow > .e-flab { font-size: 16px; font-weight: 600; padding-top: 9px; }
.e-frow > label .req, .e-flab .req { color: var(--danger-ink); margin-left: 4px; }
@media (min-width: 760px) { .e-frow { grid-template-columns: 180px minmax(0, 1fr); gap: 7px 20px; } }
.e-fctl { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.e-fctl .hint { font-size: 13.5px; color: var(--muted); }
.e-fctl .count { font-size: 13px; color: var(--muted); text-align: right; }
.e-in, .e-fctl select, .e-fctl textarea {
  width: 100%; min-height: 46px; padding: 9px 14px; border: 1px solid var(--line-3); border-radius: var(--r-sm);
  background: var(--bg-2); color: var(--text); font: inherit; font-size: 16px;
}
.e-fctl textarea { min-height: 84px; resize: vertical; }
.e-in:focus, .e-fctl select:focus, .e-fctl textarea:focus { border-color: var(--amber); outline: none; }
.e-pair { display: grid; grid-template-columns: minmax(0, 1fr) 130px; gap: 14px; }
.e-unit { display: flex; align-items: stretch; border: 1px solid var(--line-3); border-radius: var(--r-sm); background: var(--bg-2); overflow: hidden; }
.e-unit:focus-within { border-color: var(--amber); }
.e-unit input { flex: 1; min-width: 0; min-height: 46px; padding: 9px 14px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 16px; }
.e-unit input:focus { outline: none; }
.e-unit > span { display: grid; place-items: center; min-width: 52px; padding: 0 12px; border-left: 1px solid var(--line-3); background: var(--surface); color: var(--muted); font-size: 15px; }
.e-radios { display: flex; gap: 28px; flex-wrap: wrap; padding-top: 8px; }
.e-radio { display: inline-flex; align-items: center; gap: 11px; font-size: 16px; cursor: pointer; }
.e-radio input { appearance: none; width: 24px; height: 24px; margin: 0; border-radius: 50%; border: 2px solid var(--muted); background: transparent; cursor: pointer; }
.e-radio input:checked { border-color: var(--amber); background: radial-gradient(circle, var(--amber) 0 5px, transparent 6px); }
.e-radio input:focus-visible { outline: 2px solid var(--amber-ink); outline-offset: 2px; }

/* Előnézet-sorok (makett 31: Számítási előnézet) */
.e-calc { border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 4px 18px; background: var(--bg-2); }
.e-calc > div { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; font-size: 16px; }
.e-calc > div b { font-family: var(--font-head); font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; }
.e-calc > div.is-sum { border-top: 1px solid var(--line-2); font-weight: 700; font-size: 17px; }
.e-calc > div.is-sum b { font-size: 25px; }
.e-calc--fill { background: var(--surface-2); border-color: var(--surface-2); }
.e-bullets { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; font-size: 15.5px; color: var(--text); }
.e-bullets li::marker { color: var(--muted); }
.e-footbar { display: flex; justify-content: flex-end; gap: 14px; flex-wrap: wrap; padding: 16px 18px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--panel); }
.e-footbar .btn { min-width: 124px; min-height: 48px; font-size: 16px; }
.e-back { display: inline-flex; align-items: center; gap: 9px; color: var(--text); font-size: 16px; text-decoration: none; }
.e-back .i { transform: rotate(90deg); }

/* ── Beállítások (makett 53) ─────────────────────────────────────────────────── */
/* Telefonon és keskeny ablakban a menü a tartalom FÖLÖTT, sorban; asztalon jobbra, oszlopban (mint a makettben). */
.e-sidenav { display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; order: -1; }
.e-sidenav h3 { display: none; font-family: var(--font-head); font-size: 25px; font-weight: 700; margin: 0 0 10px; }
.e-sidenav button {
  text-align: left; min-height: 48px; padding: 0 18px; border-radius: var(--r-sm); border: 1px solid transparent;
  font-family: var(--font-head); font-size: 20px; font-weight: 700; color: var(--text);
}
.e-sidenav button:hover { background: var(--surface); }
.e-sidenav button[aria-current="page"] {
  background: color-mix(in srgb, var(--amber) 34%, var(--bg-2)); border-color: color-mix(in srgb, var(--amber) 70%, var(--bg-2));
  border-left: 4px solid var(--amber); color: var(--amber-ink);
}
@media (min-width: 1080px) {
  .e-sidenav { flex-direction: column; flex-wrap: nowrap; order: 0; }
  .e-sidenav h3 { display: block; }
}
.e-logo {
  display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); padding-bottom: 20px; border-bottom: 1px solid var(--line-2);
}
@media (min-width: 1080px) { .e-logo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.e-drop {
  display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 18px;
  border: 2px dashed var(--line-3); border-radius: var(--r-sm); text-align: center;
}
.e-drop .hint { font-size: 14px; color: var(--muted); }
.e-preview {
  position: relative; width: 190px; aspect-ratio: 9 / 16; border-radius: var(--r-sm); overflow: hidden;
  background-color: var(--surface-2);
  background-image:
    linear-gradient(45deg, var(--line-2) 25%, transparent 25%, transparent 75%, var(--line-2) 75%),
    linear-gradient(45deg, var(--line-2) 25%, transparent 25%, transparent 75%, var(--line-2) 75%);
  background-size: 22px 22px; background-position: 0 0, 11px 11px;
}
.e-preview > span { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-size: 11.5px; color: var(--muted); }
.e-bbform { display: flex; flex-direction: column; gap: 12px; }
.e-bbrow { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 14px; align-items: center; font-size: 15.5px; }
@media (max-width: 759px) { .e-bbrow { grid-template-columns: minmax(0, 1fr) 150px; } }
.e-bbrow select { min-height: 46px; padding: 0 12px; border: 1px solid var(--line-3); border-radius: var(--r-sm); background: var(--bg-2); color: var(--text); font: inherit; font-size: 16px; }
.e-save { display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; padding-top: 16px; }
.e-save .btn--primary { min-width: 240px; min-height: 46px; font-size: 16px; }
.e-emptybox { border: 2px dashed var(--line-3); border-radius: var(--r-sm); }
.e-emptybox .ic-wrap { border-radius: 50%; }

/* ── Statisztika – Toplisták (makett 34, 2026-10-12) ─────────────────────────── */
#page-statisztika .e-stretch > .card { display: flex; flex-direction: column; }
#page-statisztika .card-head .card-act { align-items: center; }
.e-toptbl td, .e-toptbl th { padding-top: 10px; padding-bottom: 10px; vertical-align: middle; }
.e-toptbl thead th { font-size: 14.5px; font-weight: 500; color: var(--text); background: var(--surface); }
.e-toptbl td.num { font-size: 16px; }
.e-toptbl .who .mono { width: 36px; height: 36px; font-size: 13px; background: var(--surface-2); }
.e-toptbl .who b { font-weight: 500; font-size: 15.5px; }
.e-toptbl td:nth-child(2) { white-space: normal; }
.e-toptbl .who span span { font-size: 12.5px; line-height: 1.3; }
.e-medal {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--line-3); background: var(--surface); font-size: 15px; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.e-medal.is-1 { background: var(--amber); border-color: var(--amber); color: var(--on-accent); }
.e-medal.is-2 { background: color-mix(in srgb, var(--slate) 55%, var(--panel)); border-color: var(--slate); }
.e-medal.is-3 { background: color-mix(in srgb, var(--orange) 50%, var(--panel)); border-color: var(--orange); }
.e-giftname { display: inline-flex; align-items: center; gap: 14px; font-size: 15.5px; }
.e-giftimg { flex: none; width: 36px; height: 36px; object-fit: contain; }
.e-giftimg--none { display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--amber); font-size: 18px; }
.e-coinv { display: inline-flex; align-items: center; gap: 10px; }
.e-coinv .i { color: var(--amber); font-size: 18px; }
.e-share-s { font-size: 12.5px; color: var(--muted); font-weight: 400; margin-right: 12px; }
.e-sortbtn { font: inherit; color: inherit; white-space: nowrap; }
.e-sortbtn:hover, .e-sortbtn[aria-pressed="true"] { color: var(--amber-ink); }
.e-whobtn { text-decoration: none; color: var(--text); }
.e-whobtn:hover b { color: var(--amber-ink); text-decoration: underline; }
.e-topmore { margin-top: 14px; align-self: flex-start; }

/* ── Forgalom – Honnan (makett 37, 2026-10-12) ───────────────────────────────── */
#page-forgalom .e-stretch > .card { display: flex; flex-direction: column; }
.e-wtbl td, .e-wtbl th { padding: 7px 8px; font-size: 14.5px; }
.e-wtbl th { font-size: 13.5px; }
.e-wtbl thead th { font-weight: 500; color: var(--text); background: var(--surface); }
.e-wtbl td.e-no { width: 36px; }
.e-wtbl td.e-clip { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.e-wtbl td.mono { font-family: var(--font-body); font-size: 14.5px; }
.e-wtbl .e-share { grid-template-columns: 48px minmax(36px, 1fr); gap: 8px; min-width: 96px; }
.e-wtbl .e-share b { text-align: left; }
.e-wtbl .e-meter { height: 11px; }
.e-wmore { margin-top: 14px; align-self: flex-start; }

/* ── Beállítások – Fiók (makett 54, 2026-10-12) ──────────────────────────────── */
@media (min-width: 1080px) { .e-grid--sideL { grid-template-columns: 270px minmax(0, 1fr); } }
.e-sidenav--full { padding: 0; overflow: hidden; }
.e-sidenav--full .e-sidenav-h { display: none; }
.e-sidenav--full button { display: inline-flex; align-items: center; gap: 12px; margin: 0; }
.e-sidenav--full button .i { font-size: 22px; }
@media (max-width: 1079px) { .e-sidenav--full { padding: 8px; background: transparent; border: 0; } }
@media (min-width: 1080px) {
  .e-sidenav--full { gap: 6px; padding-bottom: 12px; }
  .e-sidenav--full .e-sidenav-h { display: block; padding: 22px 18px 16px; margin-bottom: 8px; border-bottom: 1px solid var(--line-2); }
  .e-sidenav--full .e-sidenav-h h3 { margin: 0; }
  .e-sidenav--full .e-sidenav-h p { margin: 6px 0 0; font-size: 15.5px; color: var(--muted); }
  .e-sidenav--full button { margin: 0 6px; font-size: 18px; font-family: var(--font-body); font-weight: 500; }
  .e-sidenav--full button[aria-current="page"] {
    background: var(--amber); border-color: var(--amber); border-left-width: 1px; color: var(--on-accent); font-weight: 600;
  }
}
.e-acct { gap: 0; padding: 22px 20px; }
.e-acct-top { display: flex; align-items: center; gap: 48px; flex-wrap: wrap; padding-bottom: 22px; border-bottom: 1px solid var(--line-2); }
.e-acct-av {
  flex: none; width: 130px; height: 130px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-2); color: var(--text); font-size: 64px;
}
.e-acct-kv { display: grid; grid-template-columns: minmax(130px, 220px) minmax(0, 1fr); gap: 16px 30px; margin: 0; font-size: 16.5px; flex: 1 1 320px; min-width: 0; }
.e-acct-kv dt { color: var(--muted); }
.e-acct-kv dd { margin: 0; overflow-wrap: anywhere; }
.e-acct-kv .badge { font-size: 14.5px; height: 28px; }
.e-acct-out { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding-top: 22px; }
.e-acct-out .btn { flex: 0 0 auto; min-height: 52px; min-width: 190px; font-size: 18px; font-weight: 700; justify-content: center; }
.e-acct-out .btn .i { font-size: 22px; }
.e-acct-out p { margin: 0; flex: 1 1 260px; font-size: 15px; color: var(--muted); }
.e-dago { gap: 22px; padding: 22px 20px; }
.e-dago-top { display: flex; align-items: center; gap: 34px; flex-wrap: wrap; }
.e-dago-mark { font-family: var(--font-head); font-weight: 800; font-size: 150px; line-height: .78; color: var(--amber); width: 120px; text-align: center; }
.e-dago-top > div { flex: 1 1 300px; min-width: 0; }
.e-dago-name { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-family: var(--font-body); font-weight: 700; font-size: 34px; line-height: 1.1; }
.e-dago-name b { color: var(--amber); }
.e-dago-ver { display: inline-grid; place-items: center; height: 36px; padding: 0 16px; border-radius: var(--r-pill); background: var(--surface-2); font-size: 17px; font-weight: 600; }
.e-dago-top p { margin: 10px 0 0; font-size: 16.5px; line-height: 1.55; color: var(--muted); }
.e-dago-old { border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--panel); padding: 18px; display: flex; flex-direction: column; gap: 16px; }
.e-dago-oldrow { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--line-2); }
.e-dago-oldrow > div { flex: 1 1 260px; min-width: 0; }
.e-dago-oldrow b { font-size: 17px; }
.e-dago-oldrow p { margin: 4px 0 0; font-size: 14.5px; color: var(--muted); }
.e-dago-ic { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font-size: 24px; }
.e-dago-oldrow .btn { flex: 0 0 auto; min-height: 44px; color: var(--text); text-decoration: none; }
.e-dago-old .e-state { align-items: center; font-size: 15.5px; }
.e-dago-old .e-state::before { margin-top: 0; }
@media (max-width: 759px) {
  .e-acct-top { gap: 20px; }
  .e-acct-av { width: 84px; height: 84px; font-size: 40px; }
  .e-acct-kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .e-acct-kv dd { margin-bottom: 10px; }
  .e-dago-mark { font-size: 96px; width: 80px; }
  .e-dago-name { font-size: 26px; }
}


/* ── Belépő (makett 55, 2026-10-12) — a .field (components réteg) felülírása; a váz a layout.css-ben ──────────── */
.login-card .field { gap: 10px; }
.login-card .field > label { font-size: 19px; font-weight: 500; }
.login-card .field input {
  min-height: 58px; padding: 0 18px; font-size: 19px; border-radius: var(--r-sm);
  border-color: var(--line-3); background: var(--surface);
}
.login-card .field input::placeholder { color: var(--muted); }
.login-card .field input:focus { border-color: var(--amber); outline: none; }
.login-card .btn--primary { min-height: 58px; font-size: 21px; font-weight: 700; border-radius: var(--r-sm); margin-top: 4px; }
@media (max-width: 759px) {
  .login-card .field > label { font-size: 16px; }
  .login-card .field input { min-height: 50px; font-size: 17px; }
  .login-card .btn--primary { min-height: 50px; font-size: 18px; }
}

}