/* A 0.1 modulfelületeinek stílusa. Tokenek és üvegréteg a meglévő rendszerből. */

/* --- modulfejléc -------------------------------------------------------- */
.modfej { display: grid; grid-template-columns: 320px 1fr; gap: var(--s-6); align-items: center; }
.modfej__radial { display: grid; place-items: center; }
.modfej__radial .radialbox { grid-template-columns: 1fr 160px; gap: var(--s-4); }
.modfej__radial .radial { max-width: 280px; }
.modfej__alcim { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-ink-3); text-align: center; margin-top: var(--s-2); }
.modfej__jobb { min-width: 0; }
@media (max-width: 1023px) { .modfej { grid-template-columns: 1fr; } }

/* --- lista -------------------------------------------------------------- */
.lista { list-style: none; margin: 0; padding: 0; display: grid; }
.lista__sor { display: flex; gap: var(--s-4); align-items: center; justify-content: space-between; padding: var(--s-3) 0; border-bottom: 1px solid var(--c-line); }
.lista__sor:last-child { border-bottom: 0; }
.lista__fo { font-weight: 600; }
.lista__alsor { display: block; font-size: var(--fs-xs); color: var(--c-ink-2); }
.lista__ertek { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lista__sor button { flex: none; }

/* --- kulcs–érték -------------------------------------------------------- */
.kvlist { display: grid; gap: var(--s-2); }
.kv { display: flex; gap: var(--s-4); justify-content: space-between; padding: var(--s-2) 0; border-bottom: 1px solid var(--c-line); font-size: var(--fs-sm); }
.kv:last-child { border-bottom: 0; }
.kv__k { color: var(--c-ink-2); }
.kv__v { font-weight: 600; text-align: right; }

.cimke { font-size: 10px; font-weight: 650; padding: 2px var(--s-2); border-radius: 6px; background: var(--c-line); color: var(--c-ink-2); white-space: nowrap; }
.cimke--elo { background: var(--c-red); color: #fff; }
.cimke--ok { background: rgba(23,166,115,.14); color: var(--c-ok); }
.cimke--figyelem { background: rgba(232,163,61,.18); color: #8a5a05; }
:root[data-theme="dark"] .cimke--figyelem { color: var(--c-warn); }

/* --- idővonal ----------------------------------------------------------- */
.timeline { list-style: none; margin: 0; padding: 0 0 0 var(--s-5); position: relative; }
.timeline::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--c-line); }
.timeline__sor { display: grid; grid-template-columns: 84px 1fr auto; gap: var(--s-3); align-items: baseline; padding: var(--s-3) 0; position: relative; }
.timeline__pont { position: absolute; left: calc(-1 * var(--s-5) + 1px); top: 16px; width: 9px; height: 9px; border-radius: 50%; background: var(--c-red); box-shadow: 0 0 0 3px var(--c-card); }
.timeline__ido { font-size: var(--fs-xs); color: var(--c-ink-2); font-variant-numeric: tabular-nums; }
.timeline__cim { display: block; font-weight: 600; }
.timeline__leiras { display: block; font-size: var(--fs-xs); color: var(--c-ink-2); }
@media (max-width: 767px) { .timeline__sor { grid-template-columns: 1fr; } .timeline__pont { top: 10px; } }

/* --- élő kameracsempe --------------------------------------------------- */
.kamerarács { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--s-3); }
.livetile { position: relative; display: grid; gap: 2px; padding: 0; border: var(--glass-border); border-radius: var(--r-inner); background: var(--glass-inner); overflow: hidden; cursor: pointer; text-align: left; }
.livetile:hover { border-color: var(--c-red); }
.livetile__kep { display: block; height: 96px; background: linear-gradient(150deg, #E8ECF2, #CBD4E0); }
.livetile__kep[data-kat="munkahely"] { background: linear-gradient(150deg, #F3DDE0, #E0AEB6); }
.livetile__kep[data-kat="kozlekedes"] { background: linear-gradient(150deg, #DCE6F0, #A9BFD6); }
.livetile__kep[data-kat="intezmeny"] { background: linear-gradient(150deg, #E6E6EE, #B9B9CC); }
.livetile__kep[data-kat="sajat"] { background: linear-gradient(150deg, #F6E7D8, #DEBE9A); }
.livetile__badge { position: absolute; top: 8px; left: 8px; display: flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--r-pill); background: rgba(255,255,255,.9); font-size: 10px; font-weight: 750; color: var(--c-red); }
.livetile__nev { padding: var(--s-3) var(--s-3) 0; font-weight: 600; font-size: var(--fs-sm); }
.livetile__nezok { padding: 0 var(--s-3) var(--s-3); font-size: var(--fs-xs); color: var(--c-ink-2); }

/* --- kapcsolati háló ----------------------------------------------------- */
.halo { width: 100%; height: auto; }
.halo__el { stroke: var(--c-line); }
.halo__csomo circle { fill: var(--c-red-soft); stroke: var(--c-red-200); stroke-width: 1.5; }
.halo__betu { font-size: 13px; font-weight: 700; fill: var(--c-red); font-family: var(--font); }
.halo__nev { font-size: 10px; fill: var(--c-ink-2); font-family: var(--font); }
.halo__kozep { fill: var(--c-red); }
.halo__kozepbetu { font-size: 16px; font-weight: 750; fill: #fff; font-family: var(--font); }

/* --- vázlatos térkép ----------------------------------------------------- */
.vazterkep { width: 100%; height: auto; background: var(--glass-inner-2); border-radius: var(--r-inner); }
.vazterkep__racs { stroke: var(--c-line); stroke-width: 1; }
.vazterkep__pont { fill: var(--c-red-300); }
.vazterkep__pont--fo { fill: var(--c-red); }
.vazterkep__zona { fill: rgba(224,24,45,.08); stroke: var(--c-red-200); stroke-dasharray: 4 4; }
.vazterkep__felirat { font-size: 10px; fill: var(--c-ink-2); font-family: var(--font); }
.vazterkep__felirat--fo { font-size: 11px; font-weight: 700; fill: var(--c-ink); }
.vazterkep__zonanev { font-size: 10px; font-weight: 600; fill: var(--c-red); font-family: var(--font); }
.vazlat_megjegyzes { font-size: 11px; color: var(--c-ink-3); margin-top: var(--s-2); }

/* --- családfa ------------------------------------------------------------ */
.csaladfa { display: grid; gap: var(--s-5); }
.csaladfa__szint { display: flex; gap: var(--s-4); justify-content: center; flex-wrap: wrap; position: relative; }
.csaladfa__szint + .csaladfa__szint::before { content: ""; position: absolute; top: calc(-1 * var(--s-4)); left: 50%; width: 2px; height: var(--s-4); background: var(--c-line); }
.csaladfa__tag { padding: var(--s-3) var(--s-4); border: var(--glass-border); border-radius: var(--r-inner); background: var(--glass-inner); text-align: center; min-width: 140px; }
.csaladfa__tag--en { border-color: var(--c-red); background: var(--c-red-soft); }
.csaladfa__nev { display: block; font-weight: 650; font-size: var(--fs-sm); }
.csaladfa__ev { display: block; font-size: var(--fs-xs); color: var(--c-ink-2); }

/* --- szavazás ------------------------------------------------------------ */
.ugy { display: grid; gap: var(--s-3); padding: var(--s-5); border: var(--glass-border); border-radius: var(--r-inner); background: var(--glass-inner); }
.ugy__cim { font-weight: 650; }
.ugy__leiras { font-size: var(--fs-sm); color: var(--c-ink-2); }
.ugy__gombok { display: flex; gap: var(--s-3); }
.ugy__eredmeny { font-size: var(--fs-xs); color: var(--c-ink-2); }

/* --- kapcsoló (Beállítások) ---------------------------------------------- */
.kapcsolosor { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--c-line); }
.kapcsolosor:last-child { border-bottom: 0; }
.kapcsolosor__t { flex: 1; }
.kapcsolosor__cim { font-weight: 600; }
.kapcsolosor__leiras { display: block; font-size: var(--fs-xs); color: var(--c-ink-2); }

/* --- tiltott modul -------------------------------------------------------- */
.tiltva { display: grid; gap: var(--s-3); place-items: center; text-align: center; padding: var(--s-8); border: 1px dashed var(--c-line); border-radius: var(--r-card); }
.tiltva__ikon { width: 44px; height: 44px; color: var(--c-ink-3); }

/* --- SoulSearch ---------------------------------------------------------- */
.ssbar { display: flex; gap: var(--s-3); margin-bottom: var(--s-4); flex-wrap: wrap; }
.ssbar input { flex: 1; min-width: 220px; height: 44px; padding: 0 var(--s-4); border: var(--glass-border); border-radius: var(--r-inner); background: var(--glass-inner); color: var(--c-ink); font: inherit; outline: none; }
.ssbar input:focus { border-color: var(--c-red); box-shadow: 0 0 0 3px rgba(224,24,45,.14); }
.sstalalat { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--c-line); }
.sstalalat__av { width: 40px; height: 40px; border-radius: 50%; background: var(--c-red-soft); color: var(--c-red); display: grid; place-items: center; font-weight: 700; font-size: var(--fs-xs); flex: none; }
.sstalalat__t { flex: 1; }
.sstalalat__egyezes { font-weight: 750; color: var(--c-red); font-variant-numeric: tabular-nums; }



.ujbeszelgetes__mezo {
  display: flex; align-items: center; gap: var(--s-2);
  height: 38px; padding: 0 var(--s-3); border: var(--glass-border);
  border-radius: var(--r-pill); background: var(--glass-inner); color: var(--c-ink-2);
}
.ujbeszelgetes__mezo input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  color: var(--c-ink); font: inherit;
}
.ujbeszelgetes__talalat { display: grid; gap: var(--s-2); }
.ujbeszelgetes__sor {
  display: flex; align-items: center; gap: var(--s-3); width: 100%;
  padding: var(--s-2); border: 0; border-radius: var(--r-inner);
  background: transparent; cursor: pointer; text-align: left;
}
.ujbeszelgetes__sor:hover { background: var(--glass-inner-2); }

.csatkartya { display: grid; gap: var(--s-3); }
.csatkartya__fej { display: flex; gap: var(--s-3); align-items: flex-start; }
.provjel {
  width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center;
  background: var(--c-red-soft); color: var(--c-red);
}
.csatkartya__t { flex: 1; min-width: 0; }
.csatkartya__nev { display: block; font-weight: 650; }
.csatkartya__leiras { display: block; font-size: var(--fs-xs); color: var(--c-ink-2); }
.csatkartya__meta { font-size: var(--fs-xs); color: var(--c-ink-2); }
.csatkartya__felt summary { cursor: pointer; font-size: var(--fs-xs); font-weight: 600; color: var(--c-red); }
.csatkartya__felt ul { margin: var(--s-2) 0 var(--s-2) 1.1em; padding: 0; font-size: var(--fs-xs); color: var(--c-ink-2); }
.csatkartya__felt p { font-size: 11px; }

/* --- ismerősök panel ---------------------------------------------------- */
.ismeros__cim { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--c-ink-2); margin: var(--s-4) 0 var(--s-2); }
.ismeros__cim:first-child { margin-top: 0; }
.ismeros__sor { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) 0;
  border-bottom: 1px solid var(--c-line); flex-wrap: wrap; }
.ismeros__sor:last-child { border-bottom: 0; }
.ismeros__sor .btn { flex: none; }
.sstalalat { flex-wrap: wrap; }

/* --- Csevegőfelület (a covermessenger.png minta szerint) ---------------- */
.cschat {
  border-radius: 18px; overflow: hidden;
  border: var(--glass-border); box-shadow: var(--glass-shadow), var(--glass-edge);
  background: var(--glass-bg-deep);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.cschat__fejlec {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: linear-gradient(100deg, var(--c-red) 0%, var(--c-red) 42%,
              rgba(224,24,45,.55) 78%, rgba(224,24,45,.18) 100%);
  color: #fff;
}
.cschat__jel {
  width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: #fff; color: var(--c-red); font-weight: 800; font-size: 20px;
}
.cschat__nev { font-size: var(--fs-lg); font-weight: 750; letter-spacing: .02em; flex: none; }
.cschat__nev b { font-weight: 400; opacity: .85; }
.cschat__kereso {
  flex: 1; display: flex; align-items: center; gap: var(--s-3); max-width: 560px;
  margin-left: auto; height: 40px; padding: 0 var(--s-4);
  border-radius: var(--r-pill); background: rgba(255,255,255,.22); color: #fff;
}
.cschat__kereso input {
  flex: 1; border: 0; background: transparent; outline: none; color: #fff; font: inherit;
}
.cschat__kereso input::placeholder { color: rgba(255,255,255,.8); }

.cschat__torzs { display: grid; grid-template-columns: 320px 1fr; min-height: 560px; }
@media (max-width: 900px) { .cschat__torzs { grid-template-columns: 1fr; } }

/* --- beszélgetéslista --- */
.cslista {
  border-right: 1px solid var(--c-line); max-height: 620px;
  display: grid; grid-template-rows: auto 1fr; min-height: 0;
  background: var(--glass-inner-2);
}
/* Az ismerőskereső a lista fölött ül és nem görög el vele. */
.cslista__uj { padding: var(--s-3); border-bottom: 1px solid var(--c-line); display: grid; gap: var(--s-2); }
.cslista__sorok { overflow-y: auto; min-height: 0; }
.cslista__ures { padding: var(--s-5); }
.cssor {
  display: flex; gap: var(--s-3); align-items: flex-start; width: 100%;
  padding: var(--s-3) var(--s-4); border: 0; border-left: 3px solid transparent;
  background: transparent; cursor: pointer; text-align: left;
}
.cssor:hover { background: rgba(224,24,45,.05); }
.cssor[aria-current="true"] { background: var(--c-red-soft); border-left-color: var(--c-red); }
.cssor__av {
  width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--c-red-soft); color: var(--c-red); font-weight: 700; font-size: var(--fs-xs);
}
.cssor__av--nagy { width: 44px; height: 44px; font-size: var(--fs-sm); }
.cssor__t { flex: 1; min-width: 0; }
.cssor__fej { display: flex; justify-content: space-between; gap: var(--s-2); align-items: baseline; }
.cssor__nev { font-weight: 650; font-size: var(--fs-sm); }
.cssor__ido { font-size: 11px; color: var(--c-ink-3); white-space: nowrap; }
.cssor__elonezet {
  display: block; font-size: var(--fs-xs); color: var(--c-ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cssor[aria-current="true"] .cssor__elonezet { color: var(--c-red); }
.cssor__jel {
  align-self: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--c-red); color: #fff; font-size: 11px; font-weight: 750;
  display: grid; place-items: center;
}

/* --- csevegőablak --- */
.csablak { display: grid; grid-template-rows: auto 1fr auto; max-height: 620px; min-height: 0; }
.csablak__fejlec {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--c-line);
}
.csablak__nev { display: block; font-size: var(--fs-lg); font-weight: 700; }
.csablak__allapot { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--c-ink-2); }
.pont { width: 8px; height: 8px; border-radius: 50%; background: var(--c-ink-3); }
.pont--elo { background: var(--c-ok); }
.csablak__uzenetek {
  padding: var(--s-5); overflow-y: auto; display: grid; gap: var(--s-3);
  align-content: start;
}
.buborek { max-width: 70%; padding: var(--s-4) var(--s-5); border-radius: 20px; font-size: var(--fs-md); line-height: 1.45; }
.buborek--tars { justify-self: start; background: var(--c-line); color: var(--c-ink); border-bottom-left-radius: 8px; }
.buborek--en { justify-self: end; background: var(--c-red); color: #fff; border-bottom-right-radius: 8px; }
.buborek__ido { display: block; font-size: 11px; opacity: .75; margin-top: 6px; }

/* --- küldősor --- */
.cskuldo {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5); border-top: 1px solid var(--c-line);
}
.cskuldo[hidden] { display: none; }
.cskuldo__plusz {
  width: 40px; height: 40px; border-radius: 50%; flex: none; border: 1px solid var(--c-line);
  background: var(--glass-inner); color: var(--c-ink-2); font-size: 22px; line-height: 1; cursor: pointer;
}
/* Csak az üzenetmező – az emodzsi-panel keresője is a küldősorban van. */
.cskuldo__mezo {
  flex: 1; height: 46px; padding: 0 var(--s-5);
  border: 1px solid var(--c-line); border-radius: var(--r-pill);
  background: var(--glass-inner); color: var(--c-ink); font: inherit; outline: none;
}
.cskuldo__mezo:focus { border-color: var(--c-red); box-shadow: 0 0 0 3px rgba(224,24,45,.14); }
.cskuldo__kuld {
  width: 46px; height: 46px; border-radius: 50%; flex: none; border: 0;
  background: var(--c-red); color: #fff; cursor: pointer; display: grid; place-items: center;
}
.cskuldo__kuld:disabled { opacity: .55; }

/* --- Külső csatorna megerősítése (Telegram Start, OAuth-visszatérés) ------ */
.csatmeger {
  margin-top: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-inner);
  background: var(--glass-inner);
}
.csatmeger__cim { margin: 0 0 var(--s-1); font-weight: 600; }
.csatmeger .btn { margin-top: var(--s-2); }
.csatmeger__link { margin: var(--s-2) 0 0; word-break: break-all; font-size: 12px; }
.csatmeger__link code { color: var(--c-ink-2); }
.csatmeger__var {
  margin: var(--s-2) 0 0; font-size: 13px; color: var(--c-red);
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
}
.csatmeger__var::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--c-red); animation: csatpulzus 1.4s ease-in-out infinite;
}
@keyframes csatpulzus { 0%,100% { opacity: .25 } 50% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .csatmeger__var::before { animation: none } }

/* --- Csatolmányok a buborékban ------------------------------------------- */
.buborek__mellek { display: grid; gap: var(--s-2); margin-bottom: var(--s-2); }
.buborek__szoveg { display: block; }
.buborek__kep { display: block; border-radius: 12px; overflow: hidden; line-height: 0; }
.buborek__kep img { display: block; width: 100%; max-height: 320px; object-fit: cover; }
.buborek__video { width: 100%; max-height: 320px; border-radius: 12px; background: #000; }
.buborek__hang { width: 100%; }
.buborek__fajl {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-inner);
  background: rgba(255,255,255,.18); color: inherit; text-decoration: none; font-size: var(--fs-sm);
}
.buborek--tars .buborek__fajl { background: rgba(22,24,29,.06); }
.buborek__fajl:hover { text-decoration: underline; }
.buborek__link { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Frissítés gomb a csevegő fejlécében */
.cschat__frissit {
  flex: none; width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(255,255,255,.22); color: #fff;
}
.cschat__frissit:hover { background: rgba(255,255,255,.34); }
.cschat__frissit:disabled { opacity: .6; cursor: default; }
.cschat__frissit.forog svg { animation: csforog 900ms linear infinite; }
@keyframes csforog { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { .cschat__frissit.forog svg { animation: none } }

/* --- Emodzsi-választó ---------------------------------------------------- */
.cskuldo__emojidoboz { position: relative; flex: none; }
.cskuldo__emoji {
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center;
  background: var(--glass-inner); color: var(--c-ink-2);
}
.cskuldo__emoji:hover { background: var(--c-red-soft); color: var(--c-red); }
.cskuldo__emoji[aria-expanded="true"] { background: var(--c-red); color: #fff; }

/* A saját `display` felülírja a böngésző beépített [hidden] szabályát, ezért a
   rejtést ki KELL mondani. Enélkül a panel a hidden attribútum ellenére
   látszott — a felületen pedig egy magától megjelenő, bezárhatatlan ablaknak
   tűnt. (Ugyanez a csapda a usermenu__pop és az ertesito__pop esetében is.) */
.emoji[hidden] { display: none; }
.emoji {
  position: absolute; bottom: calc(100% + var(--s-3)); left: 0; z-index: var(--z-modal);
  width: min(340px, 80vw); display: grid; gap: var(--s-2);
  padding: var(--s-3); border-radius: var(--r-card);
  border: var(--glass-border); background: var(--glass-bg-deep);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-pop), var(--glass-edge);
}
.emoji__fej { display: flex; align-items: center; gap: var(--s-2); }
.emoji__kereso {
  flex: 1; display: flex; align-items: center; gap: var(--s-2);
  height: 34px; padding: 0 var(--s-3); border-radius: var(--r-pill);
  background: var(--glass-inner); color: var(--c-ink-2);
}
.emoji__kereso input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  color: var(--c-ink); font: inherit; }
.emoji__bezar { width: 30px; height: 30px; border: 0; border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--c-ink-2); }
.emoji__bezar:hover { background: var(--glass-inner); color: var(--c-ink); }

.emoji__csoportok { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--c-line); padding-bottom: var(--s-2); }
.emoji__csoportok::-webkit-scrollbar { display: none; }
.emoji__ful { flex: none; width: 32px; height: 30px; border: 0; border-radius: 8px;
  background: transparent; cursor: pointer; font-size: 17px; line-height: 1; }
.emoji__ful:hover { background: var(--glass-inner); }
.emoji__ful[aria-selected="true"] { background: var(--c-red-soft); }

.emoji__racs {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
  max-height: 216px; overflow-y: auto; overscroll-behavior: contain;
}
.emoji__jel {
  aspect-ratio: 1; border: 0; border-radius: 8px; background: transparent; cursor: pointer;
  font-size: 21px; line-height: 1; padding: 0;
}
.emoji__jel:hover, .emoji__jel:focus-visible { background: var(--c-red-soft); outline: none; }
.emoji__ures { grid-column: 1 / -1; padding: var(--s-4); text-align: center; }

/* „Régebbi üzenetek” a beszélgetés tetején */
.csregebbi {
  justify-self: center; padding: var(--s-2) var(--s-4); border-radius: var(--r-pill);
  border: 1px solid var(--c-line); background: var(--glass-inner); color: var(--c-ink-2);
  font: inherit; font-size: var(--fs-sm); cursor: pointer;
}
.csregebbi:hover { background: var(--c-red-soft); color: var(--c-red); border-color: var(--c-red-200); }
.csregebbi:disabled { opacity: .6; cursor: default; }

/* --- Profilkép: maga a kép a feltöltő gomb ------------------------------- */
.profilfej__av {
  position: relative; overflow: hidden; border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center;
}
.profilfej__av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profilfej__avjel {
  position: absolute; inset: auto 0 0 0; padding: 4px 0;
  background: rgba(22,24,29,.62); color: #fff; font-size: 11px; letter-spacing: .04em;
  opacity: 0; transition: opacity var(--t-fast);
}
.profilfej__av:hover .profilfej__avjel,
.profilfej__av:focus-visible .profilfej__avjel { opacity: 1; }
.profilfej__av.tolt { opacity: .5; }

/* --- Albumok ------------------------------------------------------------- */
.ujalbum { display: grid; gap: var(--s-3); margin-bottom: var(--s-4); }
.ujalbum__cim { margin: 0; font-size: var(--fs-md); }
.ujalbum__sor { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.ujalbum__sor input {
  flex: 1; min-width: 200px; height: 42px; padding: 0 var(--s-4);
  border: 1px solid var(--c-line); border-radius: var(--r-inner);
  background: var(--glass-inner); color: var(--c-ink); font: inherit; outline: none;
}
.ujalbum__sor input:focus { border-color: var(--c-red); box-shadow: 0 0 0 3px rgba(224,24,45,.14); }
.ujalbum__sug { margin: 0; font-size: var(--fs-xs); }
.ujalbum .btn { justify-self: start; }

.lathatosag { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.lathatosag__gomb {
  padding: var(--s-2) var(--s-4); border-radius: var(--r-pill);
  border: 1px solid var(--c-line); background: var(--glass-inner);
  color: var(--c-ink-2); font: inherit; font-size: var(--fs-sm); cursor: pointer;
}
.lathatosag__gomb[aria-pressed="true"] {
  background: var(--c-red); border-color: var(--c-red); color: #fff;
}

.albumkartya { display: grid; gap: var(--s-3); margin-bottom: var(--s-4); }
.albumkartya__fej { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); }
.albumkartya__cim { margin: 0; font-size: var(--fs-lg); }
.albumkartya__meta { margin: 2px 0 0; font-size: var(--fs-sm); }
.albumkartya__lat { white-space: nowrap; }
.albumkartya__vezerlok { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }
.albumkartya__fel { cursor: pointer; }
.albumkartya__allapot { margin: 0; font-size: var(--fs-sm); }

.mediaracs {
  display: grid; gap: var(--s-2);
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.mediacsempe {
  position: relative; margin: 0; aspect-ratio: 1; border-radius: var(--r-inner);
  overflow: hidden; background: var(--glass-inner-2); cursor: pointer;
  display: grid; place-items: center;
}
.mediacsempe img, .mediacsempe video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mediacsempe__jel {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 28px; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.6); pointer-events: none;
}
.mediacsempe__hang { font-size: 34px; }
.mediacsempe__nev { font-size: var(--fs-xs); padding: 0 var(--s-2); text-align: center; }
.mediacsempe__meta {
  position: absolute; inset: auto 0 0 0; padding: 4px 6px; font-size: 10px;
  background: rgba(22,24,29,.55); color: #fff; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity var(--t-fast);
}
.mediacsempe:hover .mediacsempe__meta { opacity: 1; }
.mediacsempe__torol {
  position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: 0;
  border-radius: 50%; background: rgba(22,24,29,.6); color: #fff; cursor: pointer;
  opacity: 0; transition: opacity var(--t-fast);
}
.mediacsempe:hover .mediacsempe__torol { opacity: 1; }
.mediacsempe__torol:hover { background: var(--c-red); }

.medianagy {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: rgba(10,11,14,.88); padding: var(--s-6);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.medianagy__elem { max-width: 92vw; max-height: 86vh; border-radius: var(--r-card); }
.medianagy__bezar {
  position: absolute; top: var(--s-5); right: var(--s-5); width: 40px; height: 40px;
  border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff;
  font-size: 18px; cursor: pointer;
}
.medianagy__bezar:hover { background: var(--c-red); }

/* --- Pénzügyek → Szolgáltatók ------------------------------------------- */
.szolg__osszeg { display: grid; gap: var(--s-3); }
.szolg__megj { font-size: var(--fs-xs); margin: 0; }
.szolg__fej { display: flex; justify-content: flex-end; margin-bottom: var(--s-3); }
.szolg__hely { font-size: var(--fs-sm, 14px); font-weight: 700; margin: var(--s-5) 0 var(--s-1); }
.szolg__hely .muted { font-weight: 400; }
.szolg__sor { display: flex; gap: var(--s-4); align-items: center; padding: var(--s-3) 0; border-bottom: 1px solid var(--c-line); }
.szolg__sor:last-child { border-bottom: 0; }
.szolg__sor--szunetel .szolg__t, .szolg__sor--szunetel .lista__ertek { opacity: .7; }
.szolg__t { flex: 1; min-width: 0; }
.szolg__t .lista__fo { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.szolg__t .lista__alsor { overflow-wrap: anywhere; }
.szolg__gy { font-weight: 400; color: var(--c-ink-2); font-size: var(--fs-xs); }
.szolg__gombok { display: flex; gap: var(--s-2); flex: none; }
.szolg__gombok .btn { height: 32px; }
.szolg__ures { display: grid; gap: var(--s-2); padding: var(--s-6); border: 1px dashed var(--c-line); border-radius: var(--r-card); text-align: center; }
.szolg__urlap { padding: var(--s-4) 0 var(--s-5); border-bottom: 1px solid var(--c-line); }
.szolg__mezok { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-5); }
.szolg__szeles { grid-column: 1 / -1; }
.szolg__urlapgombok { display: flex; gap: var(--s-3); margin-top: var(--s-5); }
.szolg__helyuj { display: grid; grid-template-columns: 1fr 1.6fr auto; gap: 0 var(--s-4); align-items: end; }
.szolg__helyuj .btn { height: 44px; }
.szolg__helyuj .formerror { grid-column: 1 / -1; }
.field select, .field textarea {
  width: 100%; padding: 0 var(--s-4);
  border: 1px solid var(--c-line); border-radius: var(--r-inner);
  background: var(--glass-inner); color: var(--c-ink); font: inherit; outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field select { height: 44px; }
.field textarea { display: block; padding: var(--s-3) var(--s-4); resize: vertical; min-height: 64px; }
.field select:focus, .field textarea:focus { border-color: var(--c-red); box-shadow: 0 0 0 3px rgba(224,24,45,.14); }
.field select[aria-invalid="true"] { border-color: var(--c-red); }
@media (max-width: 767px) {
  .szolg__mezok, .szolg__helyuj { grid-template-columns: 1fr; }
  .szolg__sor { flex-wrap: wrap; }
  .szolg__gombok { width: 100%; }
}

/* --- Profilom → Üzenőfal ------------------------------------------------- */
.fal { display: grid; gap: var(--s-5); max-width: 720px; }
.fal__iro textarea, .fal__szerk {
  width: 100%; padding: var(--s-3) var(--s-4); resize: vertical; min-height: 72px;
  border: 1px solid var(--c-line); border-radius: var(--r-inner);
  background: var(--glass-inner); color: var(--c-ink); font: inherit; outline: none;
}
.fal__iro textarea:focus, .fal__szerk:focus, .fal__hszuj input:focus { border-color: var(--c-red); box-shadow: 0 0 0 3px rgba(224,24,45,.14); }
.fal__iroalso { display: flex; gap: var(--s-3); align-items: center; margin-top: var(--s-3); flex-wrap: wrap; }
.fal__iroter { flex: 1; }
.fal__kepgomb { cursor: pointer; }
.fal__lat {
  height: 34px; padding: 0 var(--s-3); border: 1px solid var(--c-line); border-radius: 999px;
  background: var(--glass-inner); color: var(--c-ink); font: inherit; font-size: var(--fs-xs);
}
.fal__elonezet { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-3); }
.fal__elokep { position: relative; width: 72px; height: 72px; }
.fal__elokep img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.fal__elox {
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%;
  border: 0; background: var(--c-ink); color: var(--c-bg, #fff); cursor: pointer; font-size: 11px;
}
.fal__lista { display: grid; gap: var(--s-4); }
.fal__bej--kituzve { box-shadow: inset 3px 0 0 var(--c-red); }
.fal__fej { display: flex; gap: var(--s-3); align-items: center; }
.fal__ki { flex: 1; min-width: 0; }
.fal__menu { display: flex; gap: var(--s-1); align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.fal__mgomb { height: 30px; min-width: 30px; padding: 0 var(--s-2); }
.fal__av {
  width: 40px; height: 40px; border-radius: 50%; flex: none; object-fit: cover;
  display: grid; place-items: center; background: var(--c-red); color: #fff; font-weight: 700; font-size: var(--fs-xs);
}
.fal__av--kicsi { width: 30px; height: 30px; font-size: 10px; }
.fal__szoveg { margin-top: var(--s-3); line-height: 1.55; overflow-wrap: anywhere; }
.fal__szoveg a, .fal__hszszoveg a { color: var(--c-red); text-decoration: underline; }
.fal__szerkgombok { display: flex; gap: var(--s-2); margin-top: var(--s-2); }
.fal__kepek { display: grid; gap: 4px; margin-top: var(--s-3); border-radius: var(--r-inner); overflow: hidden; }
.fal__kepek--2, .fal__kepek--4 { grid-template-columns: 1fr 1fr; }
.fal__kepek--3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.fal__kepek--3 .fal__kep:first-child { grid-row: span 2; }
.fal__kep { position: relative; padding: 0; border: 0; background: var(--c-line); cursor: zoom-in; aspect-ratio: 4 / 3; overflow: hidden; }
.fal__kepek--1 .fal__kep { aspect-ratio: auto; max-height: 520px; }
.fal__kepek--3 .fal__kep:first-child { aspect-ratio: auto; }
.fal__kep img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fal__tobb { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.5); color: #fff; font-size: var(--fs-lg); font-weight: 700; }
.fal__lab { display: flex; gap: var(--s-4); align-items: center; margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--c-line); }
.fal__kedv { border: 0; background: transparent; color: var(--c-ink); font: inherit; cursor: pointer; padding: var(--s-1) var(--s-2); border-radius: 8px; }
.fal__kedv:hover { background: var(--c-line); }
.fal__hszszam { font-size: var(--fs-xs); }
.fal__hszek { display: grid; gap: var(--s-3); margin-top: var(--s-3); }
.fal__hsz { display: flex; gap: var(--s-3); align-items: flex-start; }
.fal__hszt { flex: 1; min-width: 0; padding: var(--s-2) var(--s-3); border-radius: 12px; background: var(--glass-inner); }
.fal__hszt .lista__fo { font-size: var(--fs-xs); }
.fal__hszszoveg { display: block; overflow-wrap: anywhere; }
.fal__hszuj { display: flex; gap: var(--s-2); }
.fal__hszuj input {
  flex: 1; min-width: 0; height: 36px; padding: 0 var(--s-3); border: 1px solid var(--c-line); border-radius: 999px;
  background: var(--glass-inner); color: var(--c-ink); font: inherit; outline: none;
}
.fal__hszuj .btn { height: 36px; }
.fal__ures { display: grid; gap: var(--s-2); padding: var(--s-6); border: 1px dashed var(--c-line); border-radius: var(--r-card); text-align: center; }
.fal__tovabb { justify-self: center; }
/* a display-szabály felülírná a hidden attribútumot */
.fal__ures[hidden], .fal__elonezet[hidden] { display: none; }
.szolg__esed { display: grid; justify-items: end; gap: 2px; }

/* --- Pénzügyek → szolgáltatói belépőablak -------------------------------- */
.tavablak { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: var(--s-4); background: rgba(10,11,14,.55); }
.tavablak__doboz { width: min(1100px, 100%); max-height: calc(100vh - 2 * var(--s-4)); display: grid; grid-template-rows: auto 1fr auto; border-radius: var(--r-card); overflow: hidden; }
.tavablak__fej { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--c-line); }
.tavablak__cim { flex: 1; min-width: 0; display: grid; }
.tavablak__url { font-size: var(--fs-xs); color: var(--c-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.tavablak__gomb { width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--c-line); color: var(--c-ink); cursor: pointer; flex: none; }
.tavablak__kep { position: relative; min-height: min(70vh, 820px); background: #fff; overflow: auto; }
.tavablak__kep img { display: block; width: 100%; height: auto; cursor: pointer; user-select: none; -webkit-user-select: none; }
.tavablak__allapot { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--s-6); text-align: center; background: var(--c-surface, #fff); color: var(--c-ink); font-weight: 600; }
.tavablak__allapot[hidden] { display: none; }
.tavablak__be { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; resize: none; }
.tavablak__lab { margin: 0; padding: var(--s-3) var(--s-4); font-size: var(--fs-xs); color: var(--c-ink-2); border-top: 1px solid var(--c-line); }
@media (max-width: 767px) {
  .tavablak { padding: 0; }
  .tavablak__doboz { width: 100%; height: 100%; max-height: none; border-radius: 0; }
  .tavablak__kep { min-height: 0; }
}
.szolg__figy { display: flex; gap: var(--s-4); align-items: center; justify-content: space-between; flex-wrap: wrap; padding: var(--s-4) var(--s-5); border-radius: var(--r-card); background: var(--c-red-soft); border-left: 3px solid var(--c-red); }
.szolg__frissul { margin: 0 0 var(--s-3); }
.szolg__gombok .btn:disabled { opacity: .45; cursor: not-allowed; }