/* =====================================================================
   GALAXYMC - DESIGN SYSTEM v2
   =====================================================================
   Ez a fajl a style.css UTAN toltodik be, es kesziteti azt.
   A cel: egyetlen, következetes vizualis nyelv minden oldalra
   (Kozosség, Admin, Fiokom, Bolt, Letoltesek) - igy nem kell minden
   oldalon ujra kitalalni a kartyakat, gombokat es tabellakat.

   Tartalom:
     1. Tokenek (tipografia, tavorlat, sugar, arnyek)
     2. A CSILLAGOS HATTER (a kliensben is ez a minta)
     3. Layout: shell, oldalfejlec, szekcio-labda
     4. Feluletek: panel, kartya, lista
     5. Gombok: primer, ghost, danger + jelolesek
     6. Tabellak: sticky fejlec, rendezes, cselekmenysor
     7. Badge-ek, avatarok, online pip
     8. Ures allapot, skeleton, toasz
     9. Reszponziv
   ===================================================================== */

/* ---------- 1. TOKENEK --------------------------------------------- */
:root {
  /* Tipografia: egy folytonos meret-skala.
     A skala KOMPACT: a korábbi 31px-es oldalcim (--fs-2xl) egy
     admin-dashboardon tul nagy volt. Most a legnagyobb szoveg 23px,
     a gyakorlatban hasznalt szoveg 13px. */
  --fs-xs: 10.5px;
  --fs-sm: 12px;
  --fs-base: 13px;
  --fs-md: 14.5px;
  --fs-lg: 16px;
  --fs-xl: 19px;
  --fs-2xl: 23px;
  --fs-3xl: 30px;

  /* A monospace csalad: kodok, UUID, skin-nevek, IP-k */
  --font-mono: ui-monospace, "Cascadia Mono", "JetBrains Mono", Consolas, "Courier New", monospace;

  /* Sulyok */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;

  /* Tavok: 3-as alap, minden meret ebből lepik. A korábbi 64px-es
     alj-paddig (--sp-16) feleslegesen nagy volt. */
  --sp-1: 3px;  --sp-2: 6px;  --sp-3: 9px;  --sp-4: 12px;
  --sp-5: 16px; --sp-6: 20px; --sp-8: 26px; --sp-10: 32px;
  --sp-12: 40px; --sp-16: 52px;

  /* Sugarak: egyetlen csalad, de kisebb - a kerekites most nem
     "gumiszoros" hatasu. */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 11px;
  --r-xl: 15px;
  --r-full: 999px;

  /* Arnyek: mélysegseg, de nem szurok */
  --sh-sm: 0 1px 2px rgba(0,0,0,.28);
  --sh-md: 0 4px 14px rgba(0,0,0,.34);
  --sh-lg: 0 14px 44px rgba(0,0,0,.44);
  --sh-xl: 0 28px 90px rgba(0,0,0,.56);

  /* A lila-cian feny a gombokon */
  --glow-accent: 0 0 0 1px rgba(34,211,238,.28), 0 6px 22px rgba(139,92,246,.24);

  /* Alapszinek */
  --surface-0: rgba(255,255,255,.025);
  --surface-1: rgba(255,255,255,.045);
  --surface-2: rgba(255,255,255,.07);
  --surface-3: rgba(255,255,255,.10);
  --border-1: rgba(255,255,255,.08);
  --border-2: rgba(255,255,255,.14);
  --border-accent: rgba(34,211,238,.34);
  --border-danger: rgba(248,113,113,.34);
  --border-warn: rgba(251,191,36,.32);
  --border-success: rgba(52,211,153,.32);

  /* Allapot szinek */
  --online: #34d399;
  --away: #fbbf24;
  --busy: #f87171;
  --offline: #6b7280;
}

/* ---------- 2. A CSILLAGOS HATTER ---------------------------------- */
/* A GalaxyMC galaxis tema: sot er, lassan gombolgo csillagok.
   A kliensben (a modban) ugyanez a minta fut, ezert a weben es a
   jatekon egyarolt a latvany. A hatter fix, nem mozog - igy nem
   zavarja az olvasast - de a nagy csillagok lassan elillannak. */
.gx-stars {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(1100px 620px at 12% -8%,  rgba(139, 92, 246,.17), transparent 62%),
    radial-gradient(900px  560px at 92% 6%,   rgba(34, 211, 238,.13), transparent 60%),
    radial-gradient(760px  520px at 50% 108%, rgba(232, 121, 249,.10), transparent 64%),
    linear-gradient(178deg, #05060f 0%, #0a0b1f 42%, #05060f 100%);
}
/* A csillagok ket retegen: kisebb, surubb es nagyobb, ritkabb */
.gx-stars::before,
.gx-stars::after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: repeat;
}
/* A kisebb, surubb csillagok */
.gx-stars::before {
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.62), transparent 100%),
    radial-gradient(1px 1px at 47% 62%, rgba(255,255,255,.48), transparent 100%),
    radial-gradient(1px 1px at 78% 31%, rgba(255,255,255,.55), transparent 100%),
    radial-gradient(1px 1px at 88% 77%, rgba(255,255,255,.40), transparent 100%),
    radial-gradient(1px 1px at 24% 88%, rgba(255,255,255,.50), transparent 100%),
    radial-gradient(1px 1px at 61% 8%,  rgba(255,255,255,.44), transparent 100%),
    radial-gradient(1px 1px at 33% 44%, rgba(255,255,255,.36), transparent 100%);
  background-size: 340px 340px;
  opacity:.8;
}
/* A nagyobb, fenyes csillagok */
.gx-stars::after {
  background-image:
    radial-gradient(1.6px 1.6px at 22% 40%, rgba(190,220,255,.85), transparent 100%),
    radial-gradient(2px 2px at 68% 18%, rgba(255,255,255,.72), transparent 100%),
    radial-gradient(1.4px 1.4px at 84% 58%, rgba(200,190,255,.68), transparent 100%),
    radial-gradient(1.8px 1.8px at 41% 76%, rgba(255,255,255,.60), transparent 100%);
  background-size: 620px 620px;
}
@media (prefers-reduced-motion: no-preference) {
.gx-stars::after { animation: gx-twinkle 7s ease-in-out infinite alternate; }
}
@keyframes gx-twinkle {
  from { opacity:.55; }
  to   { opacity: 1; }
}

/* ---------- 3. LAYOUT ---------------------------------------------- */
.gx-shell {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-5) var(--sp-12);
}
.gx-shell.narrow { width: min(880px, 100%); }
.gx-shell.wide   { width: min(1500px, 100%); }

/* Az oldal fejlece: cim, alcim, akciok */
.gx-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border-1);
}
.gx-page-title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}
.gx-page-title.accent {
  background: linear-gradient(120deg, var(--accent), var(--accent-3));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gx-page-sub {
  color: var(--text-dim);
  font-size: var(--fs-sm);
  margin-top: var(--sp-2);
  max-width: 62ch;
  line-height: 1.6;
}
.gx-head-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* A szekcio-valtó "labda" */
.gx-segments {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-full);
  background: var(--surface-1);
  border: 1px solid var(--border-1);
}
.gx-segments button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  padding: 7px 15px;
  border-radius: var(--r-full);
  cursor: pointer;
  transition: background.18s ease, color.18s ease;
  white-space: nowrap;
}
.gx-segments button:hover { color: var(--text); background: var(--surface-2); }
.gx-segments button[aria-selected="true"],
.gx-segments button.is-active {
  background: linear-gradient(135deg, rgba(34,211,238,.20), rgba(139,92,246,.22));
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border-accent);
}
/* A szegmens "lapja" (a gomb alatt levo kis vonal) - a "labda",
 * ami a gombhoz ugrik, ha a felhasznalo valtas. */
.gx-segments button { position: relative; }
.gx-segments button::after {
  content: '';
  position: absolute;
  left: 50%; right: 50%; bottom: 1px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-3));
  transition: left.22s cubic-bezier(.4,0,.2,1), right.22s cubic-bezier(.4,0,.2,1);
}
.gx-segments button[aria-selected="true"]::after,
.gx-segments button.is-active::after { left: 14px; right: 14px; }

/* ---------- 3b. KATEGORIAFULEK -------------------------------------
   A bolt kategoriak (Rang / Kozmetikum / Egyeb) egy lapos fulsor.
   A fulek nem zsanerok (nincs elcsuszott oldal), a tartalom alatt
   csuszo fulsor jelzi, hol vagyunk -> a kozeppont jobbra mozdul. */
.gx-cats {
  display: flex;
  gap: var(--sp-1);
  border-bottom: 1px solid var(--border-1);
  overflow-x: auto;
  scrollbar-width: none;
  position: relative;
}
.gx-cats::-webkit-scrollbar { display: none; }
.gx-cats button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-weight: var(--fw-semi);
  font-size: var(--fs-sm);
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  transition: color.18s ease;
}
.gx-cats button:hover { color: var(--text); }
.gx-cats button::after {
  content: '';
  position: absolute;
  left: 50%; right: 50%; bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-3));
  transition: left.24s cubic-bezier(.4,0,.2,1), right.24s cubic-bezier(.4,0,.2,1);
}
.gx-cats button[aria-selected="true"] { color: var(--text); }
.gx-cats button[aria-selected="true"]::after { left: 10px; right: 10px; }
.gx-cats.count {
  margin-left: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-dim);
  background: var(--surface-2);
  border-radius: var(--r-full);
  padding: 1px 7px;
}

/* ---------- 3c. KAPCSOLO (toggle) ---------------------------------
   Egy erteket ket allapotban mutat es kattintasra all. Nem kell
   egy "aktiv" gomb + egy masik "kikapcsol" gomb. */
.gx-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 40px; height: 22px;
  flex: 0 0 auto;
  cursor: pointer;
  border-radius: var(--r-full);
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  transition: background.2s ease, border-color.2s ease;
}
.gx-switch input {
  position: absolute; inset: 0;
  opacity: 0; margin: 0; cursor: pointer;
}
.gx-switch.knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--text-dim);
  transition: transform.22s cubic-bezier(.4,0,.2,1), background.2s ease;
  pointer-events: none;
}
.gx-switch input:checked ~.knob { transform: translateX(18px); background: var(--accent); }
.gx-switch:has(input:checked) {
  background: rgba(34,211,238,.16);
  border-color: var(--border-accent);
}
.gx-switch input:focus-visible ~.knob { box-shadow: 0 0 0 3px rgba(34,211,238,.3); }

/* ---------- 3d. OSSZEHASONLITO JELZESEK ---------------------------
   A rank-ok egymas mellett: minden funkciora egy jelzes.
.gx-mark-yes  = pipa (benne van)
.gx-mark-no   = X (nincs benne)
.gx-mark-info = kis i (benne van, DE reszlet van mellette)
   A szin nelkul is ertheto: a forma is kulonbozik (nem csak a szin),
   hogy a szintelenlatok is lathassak a kulonbséget. */
.gx-marks { display: inline-flex; gap: var(--sp-1); align-items: center; }
.gx-mark {
  width: 20px; height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 12px;
  font-weight: var(--fw-bold);
  line-height: 1;
}
.gx-mark svg { width: 12px; height: 12px; }
.gx-mark-yes { background: rgba(52,211,153,.14); color: var(--success); box-shadow: inset 0 0 0 1px rgba(52,211,153,.32); }
.gx-mark-no  { background: rgba(148,163,184,.10); color: var(--text-dim); box-shadow: inset 0 0 0 1px rgba(148,163,184,.22); }
.gx-mark-info{ background: rgba(251,191,36,.14); color: var(--warn); box-shadow: inset 0 0 0 1px rgba(251,191,36,.32); cursor: help; }
.gx-mark-note {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  margin-left: var(--sp-2);
  font-style: italic;
}
/* A "reszlet" felirat (info-jelre hover) */
.gx-mark-info[data-note]:hover::after {
  content: attr(data-note);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  background: var(--surface-3, #171a34);
  color: var(--text);
  border: 1px solid var(--border-1);
  border-radius: var(--r-sm);
  padding: 5px 9px;
  font-size: var(--fs-xs);
  font-style: normal;
  white-space: nowrap;
  z-index: 40;
  box-shadow: var(--sh-md);
  pointer-events: none;
}

/* ---------- 3e. AZ OSSZEHASONLITO RACs ----------------------------
   A rank-fejlecek VIZSZUTESEN csusznak, a funkcio-nevek fixen
   balra maradnak. Keskeny kijelzon a tabla nem torik el: a
   funkcio-nev oszlop ragad, a rank-fejlecek scrollolnak. */
.cmp-wrap { overflow-x: auto; scrollbar-width: thin; }
.cmp {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 520px;
}
.cmp th,.cmp td {
  padding: var(--sp-3) var(--sp-3);
  text-align: center;
  border-bottom: 1px solid var(--border-1);
  font-size: var(--fs-sm);
}
.cmp thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: linear-gradient(180deg, rgba(18,20,44,.98), rgba(14,16,38,.96));
  backdrop-filter: blur(10px);
  vertical-align: bottom;
}
.cmp.cmp-feat {
  position: sticky;
  left: 0;
  z-index: 6;
  text-align: left;
  min-width: 190px;
  background: linear-gradient(90deg, rgba(14,16,38,.98) 82%, rgba(14,16,38,0));
  font-weight: var(--fw-semi);
}
.cmp thead.cmp-feat { z-index: 7; background: rgba(18,20,44,.99); }
.cmp tbody tr:hover td { background: rgba(255,255,255,.028); }
.cmp tbody tr:hover.cmp-feat { background: linear-gradient(90deg, rgba(24,27,58,.99) 82%, rgba(24,27,58,0)); }
.cmp tbody tr:last-child td { border-bottom: 0; }
/* a legdragebb / kiemelt rang oszlopa */
.cmp.is-popular { background: rgba(34,211,238,.055); }
.cmp.is-popular.cmp-feat { background: linear-gradient(90deg, rgba(20,38,60,.99) 82%, rgba(20,38,60,0)); }
.cmp-rank-head { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.cmp-rank-icon { font-size: 20px; line-height: 1; }
.cmp-rank-name { font-weight: var(--fw-semi); font-size: var(--fs-sm); }
.cmp-rank-price { font-size: var(--fs-xs); color: var(--accent); font-weight: var(--fw-semi); }
.cmp-rank-dur { font-size: var(--fs-xs); color: var(--text-dim); }
.cmp-tip {
  display: inline-block;
  cursor: help;
  border-bottom: 1px dotted var(--text-dim);
}

/* ---------- 3f. A BOLT KARTYAI -----------------------------------
   A tetelek kartyakent, nem egy szurke listaban. Az AR mindig
   kiemelt (a fo dontes a "megveszem" lenne, de a szetek utan az
   "eloftet") - ezert a kozepre, nagy betuvel.
   A "Legnepszerubb" jeloloq jobbra csillan. */
.shop-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--sp-4);
}
.shop-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  border: 1px solid var(--border-1);
  background: linear-gradient(158deg, rgba(24,27,58,.6), rgba(12,13,34,.6));
  position: relative;
  transition: transform.2s ease, border-color.2s ease, box-shadow.2s ease;
}
.shop-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-accent);
  box-shadow: var(--sh-md);
}
.shop-card.is-popular { border-color: var(--border-accent); }
.shop-card-flag {
  position: absolute;
  top: -1px; right: var(--sp-4);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing:.08em;
  text-transform: uppercase;
  color: #05121a;
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  padding: 3px 10px;
  border-radius: 0 0 8px 8px;
}
.shop-card-top { display: flex; align-items: center; gap: var(--sp-3); }
.shop-card-icon { font-size: 26px; line-height: 1; }
.shop-card-name {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  /* a hosszu nevek ne torekek el a kartyat */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shop-card-cat {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  letter-spacing:.05em;
  text-transform: uppercase;
}
.shop-card-desc {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-dim);
  line-height: 1.55;
  /* a leiras max 3 sor, a karta magassaga egyenletes marad */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.55em * 3);
}
.shop-card-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border-1);
}
.shop-card-price {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--accent);
  letter-spacing:.01em;
}
.shop-card-price small { font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--text-dim); }
.shop-card-dur {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  color: var(--text-dim);
  white-space: nowrap;
}
.shop-card-buy { margin-top: 0; }

/* ---------- 3f. A "VASARLAISAIM" (a sajt vásárlások) --------------
   A vásárlás UTÁNI állapot egy helyen, egy sorban: mi, mikor, és
   mi van vele (feldolgozásban / megerősítve / elutasítva). A
   "felfedezés" felirat nem magyaráz semmit -> a státusz + a hint. */
.shop-purchase {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.02);
}
.shop-purchase +.shop-purchase { margin-top: var(--sp-2); }
.shop-purchase-icon { font-size: 22px; line-height: 1; flex: 0 0 auto; }
.shop-purchase-main { min-width: 0; flex: 1 1 auto; }
.shop-purchase-name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.shop-purchase-meta { font-size: var(--fs-xs); color: var(--text-dim); }
.shop-purchase-hint {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  color: var(--text-dim);
  text-align: right;
  max-width: 46%;
}
/* a státusz színe: feldolgozas = figyelem, aktiv = rendben */
.shop-purchase.is-pending { border-color: rgba(255,176,32,.35); }
.shop-purchase.is-active  { border-color: rgba(52,211,153,.30); }
.shop-purchase.is-refused { border-color: rgba(255,107,107,.35); }
@media (max-width: 620px) {
.shop-purchase { flex-wrap: wrap; }
.shop-purchase-hint { max-width: 100%; text-align: left; }
}

/* ---------- 3g. AZ ADMIN: funkcio-zas, chip, modal-kartya -------- */
/* A funkcio-zas: a checkbox NEM egy szokasos négyzet, hanem a
   BOLT-beli jelzes (X / pipa) -> amit bejelölöl, az ugyanaz,
   amit a játékos lát. A "különbség" mező mellette. */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.018);
  max-height: 320px;
  overflow-y: auto;
}
.feat-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.feat-check {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 1;
  min-width: 0;
  cursor: pointer;
  padding: 3px;
  border-radius: var(--r-sm);
  transition: background.16s ease;
}
.feat-check:hover { background: rgba(255,255,255,.04); }
.feat-check input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.feat-mark { width: 18px; height: 18px; font-size: 11px; flex: 0 0 auto; }
.feat-check input:focus-visible ~.feat-mark { box-shadow: 0 0 0 3px rgba(34,211,238,.32); }
.feat-label {
  font-size: var(--fs-sm);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.feat-note { width: 108px; flex: 0 0 auto; }

/* A "chipek" (gyors ertekek): a kivalasztott nem ugral, hanem
   kiemelodik -> a felhasznalo latja, hol van most. */
#shopDurChips.gx-btn { transition: background.18s ease, color.18s ease, border-color.18s ease; }
#shopDurChips.gx-btn.is-on {
  background: linear-gradient(135deg, rgba(34,211,238,.22), rgba(139,92,246,.2));
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border-accent);
}
/* A gomb-sor a tablaban (a kapcsolo nem tolt el) */
.gx-inline-form { display: inline-flex; margin: 0; }
.gx-field-row { display: flex; align-items: center; }
.gx-acts { display: inline-flex; gap: var(--sp-2); justify-content: flex-end; }
/* A kesztyu-doboz: a hosszu űrlap (a funkciokkal) ne menjen ki
   a kepből, de legyen görgetheto. */
.gx-modal-card {
  max-height: min(88vh, 900px);
  overflow-y: auto;
  width: min(620px, 100%);
  text-align: left;
}

/* ---------- 4. FEULETEK -------------------------------------------- */
.gx-panel {
  background: linear-gradient(158deg, rgba(22,25,52,.72), rgba(10,11,30,.72));
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  overflow: hidden;
}
.gx-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border-1);
  background: linear-gradient(180deg, rgba(255,255,255,.035), transparent);
}
.gx-panel-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.gx-panel-title.count {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--accent);
  background: rgba(34,211,238,.14);
  border: 1px solid var(--border-accent);
  border-radius: var(--r-full);
  padding: 1px 8px;
  min-width: 22px;
  text-align: center;
}
.gx-panel-body { padding: var(--sp-5); }
.gx-mx-auto { margin-inline: auto; margin-left: auto; margin-right: auto; }
.gx-panel-body.tight { padding: var(--sp-3); }
.gx-panel-foot {
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--border-1);
  background: rgba(0,0,0,.20);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

/* A ket haszbalos oldal: lista + reszlet */
.gx-split {
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: var(--sp-4);
  align-items: start;
}
.gx-split >.gx-panel { min-width: 0; }

/* A lista elemei */
.gx-list { display: flex; flex-direction: column; }
.gx-list-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: 0;
  border-bottom: 1px solid var(--border-1);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background.15s ease;
}
.gx-list-item:last-child { border-bottom: 0; }
.gx-list-item:hover { background: var(--surface-1); }
.gx-list-item.is-active {
  background: linear-gradient(90deg, rgba(34,211,238,.16), rgba(139,92,246,.07));
  box-shadow: inset 3px 0 0 var(--accent);
}
.gx-list-item.gx-item-main { flex: 1; min-width: 0; }
.gx-item-title {
  font-size: var(--fs-base);
  font-weight: var(--fw-semi);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gx-item-sub {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gx-list-item.gx-item-actions { display: flex; gap: var(--sp-1); flex-shrink: 0; }

/* ---------- 5. GOMBOK ---------------------------------------------- */
.gx-btn {
  --gx-btn-bg: var(--surface-2);
  --gx-btn-fg: var(--text);
  --gx-btn-bd: var(--border-1);
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 7px 13px;
  border-radius: var(--r-md);
  border: 1px solid var(--gx-btn-bd);
  background: var(--gx-btn-bg);
  color: var(--gx-btn-fg);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: transform.14s ease, filter.14s ease, background.14s ease;
}
.gx-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.gx-btn:active { transform: translateY(0); filter: brightness(.96); }
.gx-btn:disabled,
.gx-btn[aria-disabled="true"] { opacity:.45; cursor: not-allowed; transform: none; filter: none; }
.gx-btn svg {
  width: 15px; height: 15px;
  stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
.gx-btn-primary {
  --gx-btn-bg: linear-gradient(135deg, #0891b2, var(--accent-2));
  --gx-btn-fg: #fff;
  --gx-btn-bd: transparent;
  box-shadow: 0 6px 20px rgba(139,92,246,.26);
}
.gx-btn-ghost { --gx-btn-bg: var(--surface-1); }
.gx-btn-ghost:hover { --gx-btn-bg: var(--surface-2); }
.gx-btn-soft {
  --gx-btn-bg: rgba(34,211,238,.12);
  --gx-btn-bd: var(--border-accent);
  --gx-btn-fg: #a5f3fc;
}
.gx-btn-success {
  --gx-btn-bg: rgba(52,211,153,.16);
  --gx-btn-bd: var(--border-success);
  --gx-btn-fg: #6ee7b7;
}
.gx-btn-danger {
  --gx-btn-bg: rgba(248,113,113,.14);
  --gx-btn-bd: var(--border-danger);
  --gx-btn-fg: #fca5a5;
}
.gx-btn-danger-solid {
  --gx-btn-bg: linear-gradient(135deg, #dc2626, #ef4444);
  --gx-btn-fg: #fff;
  --gx-btn-bd: transparent;
}
.gx-btn-warn {
  --gx-btn-bg: rgba(251,191,36,.14);
  --gx-btn-bd: var(--border-warn);
  --gx-btn-fg: #fcd34d;
}
.gx-btn-sm { padding: 6px 12px; font-size: var(--fs-xs); border-radius: var(--r-sm); gap: 5px; }
.gx-btn-sm svg { width: 13px; height: 13px; }
.gx-btn-icon { padding: 7px; border-radius: var(--r-sm); }
.gx-btn-icon svg { width: 16px; height: 16px; }
.gx-btn-block { width: 100%; }
/* A gomb nem törik meg a sorba (a "Csatlakozás" gomb a szövegmező
   mellett, hogy a szövege ne menjen át alá). */
.gx-btn-nowrap { white-space: nowrap; flex-shrink: 0; }
.gx-btn.is-busy { pointer-events: none; opacity:.6; }
.gx-btn.is-busy::after {
  content: "";
  width: 13px; height: 13px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: gx-spin.7s linear infinite;
}
@keyframes gx-spin { to { transform: rotate(360deg); } }

/* ---------- 6. TABELLAK -------------------------------------------- */
.gx-table-wrap {
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(158deg, rgba(22,25,52,.66), rgba(10,11,30,.66));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.gx-table-scroll { overflow-x: auto; }
.gx-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  min-width: 520px;
}
.gx-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(12,14,34,.96);
  backdrop-filter: blur(10px);
  text-align: left;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing:.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border-2);
  white-space: nowrap;
}
.gx-table thead th.sortable { cursor: pointer; user-select: none; }
.gx-table thead th.sortable:hover { color: var(--text); }
.gx-table thead th.arrow { opacity:.35; margin-left: 4px; font-size: 9px; }
.gx-table thead th[aria-sort].arrow { opacity: 1; color: var(--accent); }
.gx-table tbody td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border-1);
  vertical-align: middle;
}
.gx-table tbody tr { transition: background.14s ease; }
.gx-table tbody tr:hover { background: var(--surface-1); }
.gx-table tbody tr:last-child td { border-bottom: 0; }
.gx-table td.num,.gx-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.gx-table td.actions { text-align: right; white-space: nowrap; }
.gx-table td.actions.gx-btn +.gx-btn { margin-left: var(--sp-2); }
.gx-table tbody tr.is-selected { background: rgba(34,211,238,.10); }

/* ---------- 7. BADGE / AVATAR ------------------------------------- */
.gx-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  padding: 2px 9px;
  border-radius: var(--r-full);
  border: 1px solid var(--border-1);
  background: var(--surface-1);
  color: var(--text-dim);
  white-space: nowrap;
}
.gx-badge-accent  { background: rgba(34,211,238,.13); border-color: var(--border-accent); color: #a5f3fc; }
.gx-badge-violet  { background: rgba(139,92,246,.15); border-color: rgba(139,92,246,.34); color: #ddd6fe; }
.gx-badge-pink    { background: rgba(232,121,249,.14); border-color: rgba(232,121,249,.32); color: #fbcfe8; }
.gx-badge-success { background: rgba(52,211,153,.13); border-color: var(--border-success); color: #6ee7b7; }
.gx-badge-warn    { background: rgba(251,191,36,.13); border-color: var(--border-warn); color: #fcd34d; }
.gx-badge-danger  { background: rgba(248,113,113,.13); border-color: var(--border-danger); color: #fca5a5; }

.gx-avatar {
  position: relative;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  overflow: hidden;
  display: grid;
  place-items: center;
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  color: #0b0b1f;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
.gx-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gx-avatar-lg { width: 48px; height: 48px; font-size: var(--fs-md); border-radius: var(--r-lg); }
.gx-avatar-xl { width: 76px; height: 76px; font-size: var(--fs-xl); border-radius: var(--r-xl); }
.gx-avatar.pip {
  position: absolute;
  right: -2px; bottom: -2px;
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 2px solid #0b0b1f;
  background: var(--offline);
}
.gx-avatar.pip.online { background: var(--online); box-shadow: 0 0 8px rgba(52,211,153,.8); }
.gx-avatar.pip.away   { background: var(--away); }
.gx-avatar.pip.busy   { background: var(--busy); }

/* ---------- 8. URES ALLAPOT / SKELETON / TOASZ -------------------- */
.gx-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-10) var(--sp-6);
  text-align: center;
  color: var(--text-dim);
}
.gx-empty-icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: var(--r-lg);
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  color: var(--text-dim);
  margin-bottom: var(--sp-1);
}
.gx-empty-icon svg {
  width: 22px; height: 22px;
  stroke: currentColor; fill: none; stroke-width: 1.7;
}
.gx-empty-title { font-size: var(--fs-base); font-weight: var(--fw-semi); color: var(--text); }
.gx-empty-text { font-size: var(--fs-sm); max-width: 42ch; line-height: 1.6; }

.gx-skel {
  background: linear-gradient(90deg, var(--surface-1) 25%, var(--surface-3) 37%, var(--surface-1) 63%);
  background-size: 400% 100%;
  animation: gx-shimmer 1.3s ease-in-out infinite;
  border-radius: var(--r-sm);
  height: 12px;
}
@keyframes gx-shimmer {
  from { background-position: 100% 50%; }
  to   { background-position: 0 50%; }
}
.gx-skel-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border-1);
}

.gx-toasts {
  position: fixed;
  right: var(--sp-5);
  bottom: var(--sp-5);
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  pointer-events: none;
}
.gx-toast {
  pointer-events: auto;
  min-width: 260px;
  max-width: 380px;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid var(--border-1);
  background: rgba(14,16,36,.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--sh-lg);
  font-size: var(--fs-sm);
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  animation: gx-toast-in.28s cubic-bezier(.22,1.2,.36,1);
}
@keyframes gx-toast-in {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.gx-toast.leaving { opacity: 0; transform: translateY(6px); transition: opacity.22s ease, transform.22s ease; }
.gx-toast-success { border-color: var(--border-success); }
.gx-toast-error   { border-color: var(--border-danger); }
.gx-toast-warn    { border-color: var(--border-warn); }
.gx-toast-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
  background: var(--accent);
}
.gx-toast-success.gx-toast-dot { background: var(--online); }
.gx-toast-error.gx-toast-dot { background: var(--busy); }
.gx-toast-warn.gx-toast-dot { background: var(--away); }

/* ---------- 9. EGYEB SEGED ---------------------------------------- */
.gx-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.gx-row-tight { gap: var(--sp-2); }
.gx-col { display: flex; flex-direction: column; gap: var(--sp-3); }
.gx-spacer { flex: 1; }
.gx-mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: var(--fs-sm); }
.gx-dim { color: var(--text-dim); }
.gx-small { font-size: var(--fs-xs); }
.gx-center { text-align: center; }
.gx-nowrap { white-space: nowrap; }
.gx-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-wrap-any { overflow-wrap: anywhere; word-break: break-word; }

.gx-field { display: flex; flex-direction: column; gap: 5px; }
.gx-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--text-dim);
  letter-spacing:.02em;
}
.gx-input,
.gx-select,
.gx-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-1);
  background: rgba(0,0,0,.28);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  transition: border-color.16s ease, box-shadow.16s ease, background.16s ease;
}
.gx-input::placeholder,.gx-textarea::placeholder { color: rgba(232,236,255,.32); }
.gx-input:focus,.gx-select:focus,.gx-textarea:focus {
  outline: none;
  border-color: var(--border-accent);
  background: rgba(0,0,0,.42);
  box-shadow: 0 0 0 3px rgba(34,211,238,.14);
}
.gx-textarea { font-family: inherit; resize: vertical; min-height: 76px; }
.gx-input-sm { padding: 6px 10px; font-size: var(--fs-xs); border-radius: var(--r-sm); }

.gx-search { position: relative; }
.gx-search svg {
  position: absolute;
  left: 11px; top: 50%;
  transform: translateY(-50%);
  width: 15px; height: 15px;
  stroke: var(--text-dim); fill: none; stroke-width: 2;
  pointer-events: none;
}
.gx-search.gx-input { padding-left: 34px; }

.gx-activity { display: flex; flex-direction: column; gap: 0; }
.gx-activity-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border-1);
  font-size: var(--fs-sm);
}
.gx-activity-row:last-child { border-bottom: 0; }
.gx-activity-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.gx-count,
.gx-panel-title.count {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--accent);
  background: rgba(34,211,238,.14);
  border: 1px solid var(--border-accent);
  border-radius: var(--r-full);
  padding: 1px 8px;
  min-width: 22px;
  text-align: center;
}

/* ---------- 9b. A SZAM-BURAKOK ------------------------------------ */
.gx-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--sp-3);
}
.gx-stat {
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  border: 1px solid var(--border-1);
  background: linear-gradient(158deg, rgba(22,25,52,.66), rgba(10,11,30,.66));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
}
/* A stat al-csereke (pl. "IG kredit" a szam alatt) */
.gx-stat-sub {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-dim);
  margin-top: 1px;
}
/* A csak olvaso szoveg, ami a vizualisan rejtett, de a screen
   reader megszolitja (a tablak osszzehasonlito neve). */
.gx-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.gx-stat::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  opacity:.8;
}
.gx-stat.violet::after { background: linear-gradient(180deg, var(--accent-2), var(--accent-3)); }
.gx-stat.success::after { background: linear-gradient(180deg, var(--success), #0ea5e9); }
.gx-stat.warn::after   { background: linear-gradient(180deg, var(--warn), #f97316); }
.gx-stat-icon {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  color: var(--accent);
  margin-bottom: var(--sp-2);
}
.gx-stat-icon svg {
  width: 15px; height: 15px;
  stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.gx-stat.violet.gx-stat-icon { color: var(--accent-3); }
.gx-stat.success.gx-stat-icon { color: var(--success); }
.gx-stat.warn.gx-stat-icon { color: var(--warn); }
.gx-stat-value {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.gx-stat-label {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing:.06em;
  font-weight: var(--fw-semi);
}

/* ---------- 9c. A FJELMEGORITO-MODAL ------------------------------- */
.gx-confirm {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  padding: var(--sp-5);
  background: rgba(2,4,14,.76);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: gx-fade.16s ease;
}
.gx-confirm[hidden] { display: none; }
.gx-confirm-card {
  width: min(440px, 100%);
  padding: var(--sp-6);
  border-radius: var(--r-xl);
  border: 1px solid var(--border-danger);
  background: linear-gradient(150deg, rgba(32,20,30,.98), rgba(12,10,24,.98));
  box-shadow: var(--sh-xl);
  text-align: center;
  animation: gx-pop.18s cubic-bezier(.2,.9,.3,1.2);
}
.gx-confirm-card h3 { margin: 0 0 var(--sp-3); font-size: var(--fs-lg); color: #fca5a5; }
.gx-confirm-card p  { margin: 0 0 var(--sp-5); font-size: var(--fs-sm); color: var(--text-dim); line-height: 1.6; }
.gx-confirm-actions { display: flex; gap: var(--sp-3); justify-content: center; }

@keyframes gx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes gx-pop {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 9d. A FAJLFELTOLTO ------------------------------------- */
.gx-file {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  border: 1px dashed var(--border-2);
  background: rgba(0,0,0,.24);
  cursor: pointer;
  transition: border-color.15s ease, background.15s ease;
}
.gx-file:hover { border-color: var(--accent); background: rgba(34,211,238,.06); }
.gx-file-icon { color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
.gx-file-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.gx-file-text { min-width: 0; }
.gx-file-name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gx-file-hint { font-size: var(--fs-xs); color: var(--text-dim); }
/* A "callout": egy kis, keretezett szekzio a formokban (a sajat
   baratkód doboza, egy figyelmeztetes). Keskeny, hogy ne vonja el
   a figyelmet a fo muvelettol. */
.gx-callout {
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.02);
  padding: var(--sp-3);
}
.gx-callout-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing:.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 var(--sp-2);
}
.gx-file input[type="file"] {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.gx-file.is-bad { border-color: var(--error); background: rgba(239,68,68,.08); }
.gx-file.is-ok  { border-color: var(--success); background: rgba(52,211,153,.07); }

/* ---------- 9e. MIKROANIMACIOK + MIKROINTERAKCIOK -----------------
   Egy koherens mozgasi-rendszer, hogy az oldal "elo" legyen, de
   NE nyugtalan. A szabalyok:
     - CSAK transform / opacity animalunk (nincs layout--trigger,
       a scroll-nem teljesites miatt);
     - a mozgas ROVID (120-260ms), gyors kiindulassal;
     - a hover es a lenyomas kulonbozo jelzest ad;
     - a prefers-reduced-motion kikapcsol mindent (a fenti media).
   ------------------------------------------------------------------ */

/* --- a mozgasi tokenek (hogy minden ugyanaz a "tempó" legyen) --- */
:root {
  --mo-fx: 130ms;                                   /* a feedback */
  --mo-base: 190ms;                                 /* a zene */
  --mo-slow: 300ms;                                 /* a belepes */
  /* A gorsitott egy gorbe: a nyomas azonnal belso allapotba ugrik,
     a felengedese hosszabban, elegendoen "puhan" sima. */
  --mo-ease: cubic-bezier(.2,.8,.3, 1);
  --mo-spring: cubic-bezier(.22, 1.3,.36, 1);
}

/* --- 1) A FOK GOMBOK: nyomas + hover + ripple --- */
.gx-btn,
.gx-segments button,
.clan-chan,
.mini-form button,
input[type="submit"],
button {
  -webkit-tap-highlight-color: transparent;
}
.gx-btn {
  position: relative;
  overflow: hidden;               /* hogy a ripple a gombon belul maradjon */
  transition:
    transform var(--mo-fx) var(--mo-ease),
    filter var(--mo-fx) var(--mo-ease),
    background var(--mo-base) var(--mo-ease),
    border-color var(--mo-base) var(--mo-ease),
    box-shadow var(--mo-base) var(--mo-ease),
    color var(--mo-base) var(--mo-ease);
}
.gx-btn:hover { transform: translateY(-1px); }
.gx-btn:active { transform: translateY(0) scale(.975); transition-duration: var(--mo-fx); }
.gx-btn:disabled { transform: none !important; }

/* A RIPPLE: a gx.js egy span-t ad a gombhoz a kattintas helyen. */
.gx-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: currentColor;
  opacity:.28;
  pointer-events: none;
  animation: gx-ripple.58s var(--mo-ease) forwards;
}
@keyframes gx-ripple {
  to { transform: scale(2.6); opacity: 0; }
}

/* --- 2) A SZEKCIÓ-VÁLTÓ: a henger MOZOG a fulak kozott --- */
/* A "labda" nem villan at, hanem odacsuzik: egy abszolut elemet
   mozgatunk, aminek szelessegét/poziciojat JS allitja. */
.gx-segments { position: relative; }
.gx-segments button { position: relative; z-index: 1; }
.gx-segments.is-sliding button { transition: color var(--mo-base) var(--mo-ease); }
.gx-segments-thumb {
  position: absolute;
  z-index: 0;
  top: 3px;
  bottom: 3px;
  left: 0;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, rgba(34,211,238,.22), rgba(139,92,246,.24));
  box-shadow: inset 0 0 0 1px var(--border-accent), 0 2px 10px rgba(34,211,238,.14);
  pointer-events: none;
  /* A gx.js a width/left-et allitja inline-eran; a mozgas a CSS */
  transition: transform var(--mo-slow) var(--mo-spring),
              width var(--mo-slow) var(--mo-spring);
  will-change: transform, width;
}

/* --- 3) A KARTYAK: hover "felemelkedes" --- */
.gx-panel,
.group-card,
.clan-rail,
.gx-list-item,
.card {
  transition:
    transform var(--mo-base) var(--mo-ease),
    box-shadow var(--mo-base) var(--mo-ease),
    border-color var(--mo-base) var(--mo-ease),
    background var(--mo-base) var(--mo-ease);
}
@media (hover: hover) {
.group-card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.gx-list-item:hover { transform: translateX(2px); }
}

/* --- 4) A LISTA-ELEMEK: belepes sorrendben (stagger) --- */
/* A gx.js a gyx--i valtozot teszi az elemekre (0,1,2...), igy a
   belepes "hullam" hatasa keletkezik. A --i a sorszam. */
.gx-stagger > * {
  opacity: 0;
  animation: gx-in-up.34s var(--mo-ease) forwards;
  animation-delay: calc(var(--i, 0) * 28ms);
}
@keyframes gx-in-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* --- 5) A VIEW-VALTAS: keres kifut --- */
/* A szekciok valtasa ne ugorjon: a beovo oldal enyhén bejobb
   csuszik. A ".hidden" a megjelenest is elrejti. */
.gx-view { animation: gx-view-in.22s var(--mo-ease); }
@keyframes gx-view-in {
  from { opacity: 0; transform: translateY(8px) scale(.995); }
  to   { opacity: 1; transform: none; }
}

/* --- 6) A CSATORNA-VALTAS (a klanban) --- */
.clan-chat-swap { animation: gx-swap.2s var(--mo-ease); }
@keyframes gx-swap {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: none; }
}

/* --- 7) A UZENET-BUBOREK: a kuldott buborék "pukkad" --- */
.gx-msg.new-in { animation: gx-msg-pop.26s var(--mo-spring); }
@keyframes gx-msg-pop {
  from { opacity: 0; transform: translateY(8px) scale(.94); }
  to   { opacity: 1; transform: none; }
}

/* --- 8) A SZAM-BADGE: ha novel, kicsit "megugrik" --- */
.badge-pop { animation: gx-badge-pop.34s var(--mo-spring); }
@keyframes gx-badge-pop {
  0%   { transform: scale(.5); opacity: 0; }
  60%  { transform: scale(1.18); }
  100% { transform: scale(1); opacity: 1; }
}

/* --- 9) A FOKMEZO: a "kozeppont" egy hullam --- */
.gx-input:focus,
.gx-select:focus,
.gx-textarea:focus {
  box-shadow: 0 0 0 3px rgba(34,211,238,.16);
}
.gx-input,
.gx-select,
.gx-textarea {
  transition:
    border-color var(--mo-base) var(--mo-ease),
    box-shadow var(--mo-base) var(--mo-ease),
    background var(--mo-base) var(--mo-ease);
}

/* --- 10) A CHECKBOX: a bejelolest animaljuk --- */
.join-mode-opt input[type="radio"],
.join-mode-opt input[type="checkbox"] {
  transition: transform var(--mo-fx) var(--mo-spring), accent-color var(--mo-base);
}
.join-mode-opt input[type="radio"]:active,
.join-mode-opt input[type="checkbox"]:active { transform: scale(.88); }
.join-mode-opt {
  cursor: pointer;
  transition: background var(--mo-base) var(--mo-ease), border-color var(--mo-base) var(--mo-ease);
}
.join-mode-opt:hover { background: var(--surface-1); }
.join-mode-opt:has(input:checked) {
  border-color: var(--border-accent);
  background: rgba(34,211,238,.08);
}

/* --- 11) A FOKMENU: a nyitott lenyitogomb megfordul --- */
.gx-disclosure { transition: transform var(--mo-base) var(--mo-ease), opacity var(--mo-base); }
.gx-disclosure.is-open { transform: rotate(180deg); }

/* --- 12) A TOAST: a be- és kielnem is hullam --- */
.gx-toast { transition: transform var(--mo-base) var(--mo-spring), opacity var(--mo-base); }

/* --- 13) A LIFT: nyomas a gombokon es a listaelemeken --- */
.gx-admin-links a,
.gx-nav a {
  transition:
    background var(--mo-fx) var(--mo-ease),
    color var(--mo-fx) var(--mo-ease),
    transform var(--mo-fx) var(--mo-ease),
    padding-left var(--mo-base) var(--mo-ease);
}
.gx-admin-links a:hover { transform: translateX(2px); }

/* --- 14) A LINK: a "alamos" aláhuzas megjelenik --- */
a.gx-link {
  position: relative;
  text-decoration: none;
}
a.gx-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--mo-base) var(--mo-ease);
}
a.gx-link:hover::after { transform: scaleX(1); }

/* --- 15) A GORGESSOR (mindenhol a wezen) --- */
.gx-table-scroll,
.clan-channels,
.chat-messages {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.16) transparent;
}
.gx-table-scroll::-webkit-scrollbar,
.clan-channels::-webkit-scrollbar,
.chat-messages::-webkit-scrollbar { width: 9px; height: 9px; }
.gx-table-scroll::-webkit-scrollbar-thumb,
.clan-channels::-webkit-scrollbar-thumb,
.chat-messages::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.14);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.gx-table-scroll::-webkit-scrollbar-thumb:hover,
.clan-channels::-webkit-scrollbar-thumb:hover,
.chat-messages::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.26); background-clip: padding-box; }

/* --- 16) A "PULZALO" ONLINE-PONT --- */
.gx-dot-online {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--online);
  box-shadow: 0 0 0 0 rgba(52,211,153,.5);
  animation: gx-pulse-dot 2.2s ease-out infinite;
}
@keyframes gx-pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(52,211,153,.42); }
  70%  { box-shadow: 0 0 0 7px rgba(52,211,153,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}

/* --- 17) A FOKUSZ: csak billentyuzetnel, hogy ne zavarja a kurzort --- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* --- 18) A SKELETON: a "hoher" csillag --- */
.gx-skel::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  background-size: 220% 100%;
}

/* =====================================================================
   0) AZ IKONOK (.ic) - a sprite-ből a <use> hivatkozik
   ---------------------------------------------------------------------
   Minden UI-elem (menü, gomb, címsor, állapot) IZON, nem emoji.
   A szín a currentColor -> a gomb hover/active színét követi.
   ===================================================================== */
.ic {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  vertical-align: -0.14em;   /* a szöveg közepére igazítva */
  stroke-width: 2;
  pointer-events: none;      /* ne blokkolja a gomb kattintását */
}
.ic-sm { font-size:.85em; }
.ic-lg { font-size: 1.35em; }
.ic-xl { font-size: 1.9em; }
/* a gombokban a szöveg előtt, a "cím + felirat" sorokban a szöveg után */
.gx-btn >.ic:first-child,
button >.ic:first-child,
a >.ic:first-child { margin-right:.4em; }
.gx-btn >.ic:last-child,
button >.ic:last-child,
a >.ic:last-child { margin-left:.4em; margin-right: 0; }
/* a tisztán ikon gombok (a beállítások, a bezárás) */
.gx-btn-icon { padding-left:.5em; padding-right:.5em; }
.gx-btn-icon >.ic { margin: 0 !important; font-size: 1.15em; }
/* a címsorok (a "Barátok", a "Fiókom") */
.gx-panel-title >.ic,.gx-page-title >.ic { color: var(--accent); margin-right:.45em; }
/* a címke-sorok (űrlap: "Csoport neve") */
.gx-label >.ic,.gx-field >.gx-label >.ic { margin-right:.4em; color: var(--text-dim); }
/* a státusz-jelvények (a ✓/✕/⏳ helyett) */
.gx-mark-yes { color: var(--success); }
.gx-mark-no  { color: #ff6b6b; }
.gx-mark-info { color: var(--accent-cyan, #22d3ee); }
.gx-status-ok   { color: var(--success); }
.gx-status-warn { color: var(--warn, #ffb020); }
.gx-status-off  { color: var(--text-dim); }
/* ha a betöltés alatt nincs ikon, ne legyen extra rés (a régi <span
   körül körül) */
.ic-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* az adminbolt ikon-elonezete (a symbol neve helyett a kep) */
.shop-icon-preview {
  display: flex; align-items: center; justify-content: center;
  height: 38px; padding: 0 var(--sp-3);
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.02);
  color: var(--accent);
}

/* =====================================================================
   19) A CSOPORT FEULET ("grp-")
   ---------------------------------------------------------------------
   A markup mar hasznalta a grp-* osztalyokat, de a CSS HIANYZOTT ->
   a felulet sulyatlan, "nagyi" volt (a felhasznalo panasza: nem
   egyertelmu, nem "hulyebiztos"). Itt a ketoszlopos elrendezes, a
   kompakt lista-sorok, a minimum-letszam figyelmeztetes es a
   tag-lista.
   ===================================================================== */
.grp-layout {
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: var(--sp-4);
  align-items: start;
}
.grp-rail { min-width: 0; }

/* --- a lista (a "saját csoportjaim") --- */
.grp-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-2);
  overflow-y: auto;
  min-height: 60px;
  flex: 1 1 auto;
}
.grp-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid transparent;
  border-radius: var(--r-md, 10px);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast,.14s) ease, border-color var(--t-fast,.14s) ease;
}
.grp-row:hover { background: rgba(255,255,255,.05); }
.grp-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* a kivalasztott csoport: hatarvonallal, nem csak szinvel -> latszik
   a fakon is, es nem szorul a szinre */
.grp-row.is-active {
  background: rgba(120,140,255,.12);
  border-color: var(--accent);
}
.grp-row.is-need { border-color: rgba(255,176,32,.45); }
.grp-row-emoji { font-size: 18px; line-height: 1; flex: 0 0 auto; }
.grp-row-main { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.grp-row-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.grp-row-sub { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; font-size: 11px; color: var(--text-dim); }
/* A szamlalo ROZGAZAS NE KENJEN: a "4/4" felirat es a jelzes
   kulon reszt kap, igy a gomb nem ugrik ossze, ha a "hely" megjelenik. */
.grp-row-count { flex: 0 0 auto; min-width: 34px; font-variant-numeric: tabular-nums; }
.grp-row-need,.grp-row-slots {
  flex: 0 0 auto;
  padding: 1px 6px;
  border-radius: 999px;
  white-space: nowrap;
}
.grp-row-need  { background: rgba(255,176,32,.16);  color: #ffc861; }
.grp-row-slots { background: rgba(120,140,255,.16); color: #a9b4ff; }

/* --- a keres a sajt listamon belul --- */
.grp-search {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 0 var(--sp-3) var(--sp-2);
  border-bottom: 1px solid var(--border-1);
}
.grp-search svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; opacity:.6; flex: 0 0 auto; }
.grp-search input { flex: 1 1 auto; min-width: 0; }

/* --- a meghivok sora --- */
.grp-metabar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-2) var(--sp-4);
  border-top: 1px solid var(--border-1);
  background: rgba(255,255,255,.02);
}
.grp-metabar[hidden] { display: none; }

/* --- a minimum-letszam figyelmeztetes --- */
.grp-need {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  margin: 0 var(--sp-4) var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid rgba(255,176,32,.35);
  border-radius: var(--r-md, 10px);
  background: rgba(255,176,32,.08);
  font-size: var(--fs-sm);
  color: var(--text);
}
.grp-need.hidden { display: none; }
.grp-need span { flex: 1 1 220px; min-width: 0; }

/* --- a chat oldal --- */
.grp-chat { display: flex; flex-direction: column; min-height: 460px; max-height: calc(100vh - 190px); }
.grp-composer { position: relative; }
.grp-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px; margin-left: 4px;
  border-radius: 999px;
  background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1;
}
.grp-badge.hidden { display: none; }

/* --- a tag-lista (a "Tagok kezelése" modal) --- */
.grp-member-row {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-2);
  border-bottom: 1px solid var(--border-1);
}
.grp-member-row:last-child { border-bottom: none; }
.grp-member-name {
  min-width: 0; flex: 0 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-sm);
}

/* --- a felfedezes sora --- */
.grp-discover-row {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2);
  border-bottom: 1px solid var(--border-1);
}

/* =====================================================================
   20) A BARÁTOK HÁROM FÜLE (gx-ftab)
   ---------------------------------------------------------------------
   A felhasználó kérése: a kiküldött kérések, a bejövő kérések és
   a meglévő barátok KÜLÖN legyenek. Egy fül = egy lista, a szám
   a néven (a fülön pont jelzi, ha van benne valami).
   ===================================================================== */
.gx-friend-tabs {
  display: flex;
  gap: 2px;
  padding: var(--sp-2) var(--sp-3) 0;
  border-bottom: 1px solid var(--border-1);
}
.gx-ftab {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: -1px;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: var(--r-sm, 6px) var(--r-sm, 6px) 0 0;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--t-fast,.14s) ease, background var(--t-fast,.14s) ease;
}
.gx-ftab:hover { color: var(--text); background: rgba(255,255,255,.04); }
.gx-ftab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.gx-ftab.is-active {
  color: var(--text);
  font-weight: var(--fw-semi);
  border-bottom-color: var(--accent);
  background: rgba(120,140,255,.08);
}
.gx-ftab-label { line-height: 1; }
/* a szam a neven belul: ne ugorjon, ha 0 -> 12 */
.gx-ftab.count { min-width: 22px; justify-content: center; }
@media (max-width: 620px) {
.gx-ftab { padding: var(--sp-2); font-size: var(--fs-xs); }
.gx-ftab-label { display: none; }
}

/* =====================================================================
   21) A FIOK OLDAL (acc-*)
   ---------------------------------------------------------------------
   Egy "munkafelület": a fej (avatar + adatok + 3 szám), alatta balra a
   szekció-nav, jobbra a tartalom. Keszeny kijelzon a navigacio felul marad
   (egy vizszintes sor), a tartalom alatta.
   ===================================================================== */
/* === A FióK OLDAL ELRENDEZÉSE ===================================
   Egy "munkafelület": a fej (avatar + adatok + 3 szám), alatta
   balra a szekció-nav, jobbra a tartalom. Keszeny kijelzon a
   navigáció felül marad (egy vizszintes sor), a tartalom alatta.
   ================================================================= */
.acc-shell { max-width: 1120px; margin: 0 auto; }

/* --- a fej --- */
.acc-hero {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5); flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-4);
  background: linear-gradient(150deg, rgba(120,140,255,.10), rgba(10,11,30,.55));
}
.acc-hero-id { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
.acc-hero-avatar {
  width: 78px; height: 78px; border-radius: var(--r-xl);
  font-size: var(--fs-xl); flex-shrink: 0;
  border: 2px solid var(--border-accent);
  box-shadow: 0 6px 22px rgba(0,0,0,.35);
}
.acc-hero-txt { min-width: 0; }
.acc-hero-name {
  margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-bold);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acc-hero-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.acc-hero-uuid { margin: 6px 0 0; }
.acc-hero-stats { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.acc-stat {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 108px; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border-1); border-radius: var(--r-md);
  background: rgba(0,0,0,.18);
}
.acc-stat-ic { color: var(--accent); font-size: 17px; margin-bottom: 2px; }
.acc-stat b { font-size: var(--fs-md); }
.acc-stat span { font-size: 10.5px; color: var(--text-dim); text-align: center; line-height: 1.25; }
.acc-stat.is-warn  { border-color: rgba(255,176,32,.4); }
.acc-stat.is-warn.acc-stat-ic { color: var(--warn, #ffb020); }
.acc-stat.is-ok.acc-stat-ic { color: var(--success); }

/* --- a flash --- */
.acc-flash { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); }
.acc-flash-ok  { border-color: var(--border-success); background: linear-gradient(150deg, rgba(52,211,153,.12), rgba(10,11,30,.6)); }
.acc-flash-ok.acc-flash-ic  { color: var(--success); }
.acc-flash-err { border-color: var(--border-danger);  background: linear-gradient(150deg, rgba(239,68,68,.12),  rgba(10,11,30,.6)); }
.acc-flash-err.acc-flash-ic { color: #ff6b6b; }

/* --- a ketoszlopos elrendezes --- */
.acc-layout { display: grid; grid-template-columns: 236px 1fr; gap: var(--sp-4); align-items: start; }

/* --- a bal navigacio --- */
.acc-nav { position: sticky; top: 74px; overflow: hidden; }
.acc-nav-list { display: flex; flex-direction: column; padding: var(--sp-2); gap: 2px; }
.acc-nav-link {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  color: var(--text-dim); font-size: var(--fs-sm); text-decoration: none;
  transition: background.14s ease, color.14s ease;
}
.acc-nav-link:hover { background: rgba(255,255,255,.05); color: var(--text); }
.acc-nav-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.acc-nav-link.is-active { background: rgba(120,140,255,.12); color: var(--text); font-weight: var(--fw-semi); box-shadow: inset 2px 0 0 var(--accent); }
.acc-nav-link span { flex: 1 1 auto; }
.acc-nav-link em { font-style: normal; opacity:.45; display: inline-flex; }
.acc-nav-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warn, #ffb020); flex: 0 0 auto; }
.acc-nav-foot { padding: var(--sp-2) var(--sp-3) var(--sp-3); border-top: 1px solid var(--border-1); }

/* --- a szekciok --- */
.acc-section { margin-bottom: var(--sp-6); scroll-margin-top: 78px; }
.acc-section-head { margin-bottom: var(--sp-3); }
.acc-section-head.gx-page-sub { margin: 2px 0 0; }
.acc-card { margin-bottom: var(--sp-3); }
.acc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.acc-narrow { max-width: 360px; }

/* --- a baratkod / a kod-sor --- */
.acc-code-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.acc-code {
  flex: 1 1 160px; min-width: 150px;
  font-size: var(--fs-lg); color: var(--accent); letter-spacing:.6px;
  user-select: all; padding: var(--sp-2) var(--sp-3);
  background: rgba(99,102,241,.08); border: 1px solid var(--border-accent);
  border-radius: var(--r-md);
}
.acc-current {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3);
  border: 1px solid var(--border-1); border-radius: var(--r-md);
  background: rgba(255,255,255,.02); flex-wrap: wrap;
}
.acc-current-val { font-size: var(--fs-sm); color: var(--text); word-break: break-all; }
.acc-hint {
  display: flex; align-items: flex-start; gap: 6px;
  margin: 0 0 var(--sp-3); color: var(--text-dim);
}
.acc-hint-ok { color: var(--success); }

/* --- a biztonsagi teendo --- */
.acc-todo {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3);
  border: 1px solid rgba(255,176,32,.35); border-radius: var(--r-md);
  background: rgba(255,176,32,.08);
}
.acc-todo-ic { color: var(--warn, #ffb020); font-size: 20px; display: inline-flex; }

/* --- a 2FA beallitas --- */
.acc-totp-setup { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-5); align-items: start; }
.acc-qr img { border-radius: var(--r-md); background: #fff; padding: 10px; }
.acc-totp-secret {
  display: block; margin: 4px 0 var(--sp-3);
  padding: var(--sp-2) var(--sp-3); background: rgba(0,0,0,.3);
  border-radius: var(--r-sm); letter-spacing:.12em; font-size: var(--fs-sm);
  word-break: break-all;
}
/* a kod-mezo: kozepre igazitott, nagy betuvel (szamjegyek) */
.acc-code-input {
  text-align: center; font-size: var(--fs-xl); letter-spacing:.4em;
  font-family: var(--font-mono);
}

/* --- az elonezetek --- */
.acc-preview { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.acc-face {
  width: 72px; height: 72px; flex-shrink: 0; border-radius: var(--r-md);
  background-image: url('/api/skin/<%= encodeURIComponent(user.username) %>');
  background-size: 800% 800%; background-position: 12.5% 12.5%;
  image-rendering: pixelated; background-color: rgba(0,0,0,.2);
  border: 1px solid var(--border-1);
}
.acc-skin-full {
  width: 64px; height: 64px; flex-shrink: 0; image-rendering: pixelated;
  border-radius: var(--r-md); background: rgba(0,0,0,.2);
  border: 1px solid var(--border-1);
}
.acc-avatar-full {
  width: 72px; height: 72px; flex-shrink: 0; border-radius: 50%;
  object-fit: cover; background: rgba(0,0,0,.2); font-size: var(--fs-lg);
  border: 1px solid var(--border-1);
}

/* --- keszeny kijelz --- */
@media (max-width: 860px) {
.acc-layout { grid-template-columns: 1fr; }
.acc-nav { position: static; }
.acc-nav-list { flex-direction: row; overflow-x: auto; }
.acc-nav-link { flex: 0 0 auto; }
.acc-nav-link em { display: none; }
.acc-grid2 { grid-template-columns: 1fr; }
.acc-totp-setup { grid-template-columns: 1fr; }
.acc-hero-stats { width: 100%; }
}

/* =====================================================================
   A reszponziv: a ketoszlopos elrendezes keszeny kijelzon egyosul
   ===================================================================== */
@media (max-width: 900px) {
.grp-layout { grid-template-columns: 1fr; }
.grp-chat { max-height: none; min-height: 380px; }
.grp-rail.gx-panel { max-height: 340px; }
}
@media (max-width: 900px) {
.gx-split { grid-template-columns: 1fr; }
.gx-page-title { font-size: var(--fs-xl); }
}
@media (max-width: 620px) {
:root { --fs-2xl: 20px; --fs-xl: 17px; }
.gx-shell { padding: var(--sp-4) var(--sp-3) var(--sp-10); }
.gx-panel-body { padding: var(--sp-3); }
.gx-page-head { flex-direction: column; align-items: stretch; }
.gx-head-actions.gx-btn { flex: 1; }
.gx-table { min-width: 480px; }
}

/* A prefers-reduced-motion: ne legyenek animaciok */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:.01ms !important;
  }
}
/* ─────────────────────────────────────────────────────────────
   A [hidden] ATTRIBUTUM MINDIG ELONYUL
   ─────────────────────────────────────────────────────────────
   A beépített böngésző-szabály ([hidden] { display: none }) ugyanolyan
   specificitású, mint egy sima osztály-szabály -> ha BÁRMELYIK
   osztály display:block/-flex-t ad (a.btn, a.skn-2d, a modal),
   az FELÜLÍRJA a rejtést. Ez két valódi bugot okozott:
     - a fiókoldali feltöltő modal a nyitás után is rejtetlen maradt
     - az adatlapon a 2D skin kép a 3D avatar mögé is látszott
   Az !important itt nem a lustaság, hanem a Helyes viselkedés:
   a hidden attributum mindig győzzön. */
[hidden] { display: none !important; }

/* ============================================================
   A KULON STILUSLAPOK NEM ITT BETOLTENDEK
   ------------------------------------------------------------
   Az account.css / ui-scale.css / dashboard.css KULON <link>-kent
   toltodik be (a partials/head.ejs-ben, a ds.css UTAN), NEM
   @import-ként innan.

   MIERT: a CSS szabaly szerint az @import-ot a fajl ELEJEN kell
   megadni - ha a szabalyok UTAN all, a bongeszo CSENDBEN eldobja
   (nincs hiba, nincs konzol, csak a hatasa hiányzik). Ez itt
   1900-as sorban volt -> a fiokoldal es a nagyobb gombok
   NEM tokent be, pedig hetekig azt hittuk, hogy igen.
   ============================================================ */