:root { --bg:#0b0f14; --card:#121821; --muted:#8aa0b2; --text:#eaf2f9; --accent:#32ab63; --danger:#ef476f; }

* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--text); font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif; }
.container { width: min(1100px, 92%); margin: 0 auto; }

/* ===== Fejléc (reszponzív) ===== */
.topbar { background: rgba(18,24,33,.8); border-bottom:1px solid rgba(255,255,255,.08); backdrop-filter: blur(6px); position: sticky; top:0; z-index:10; }
.nav { display:flex; justify-content:space-between; align-items:center; gap:.75rem; flex-wrap:wrap; padding:.8rem 0; }

.brandgroup { display:flex; flex-direction:column; gap:.25rem; flex:1 1 420px; min-width:260px; }
.brand { display:inline-flex; align-items:center; gap:.5rem; font-weight:700; text-decoration:none; color:var(--text); min-width:0; }
.brand span { overflow-wrap:anywhere; } /* hosszú név törik mobilon */

/* Logó: desktopon ~50pt (≈66.7px), mobilon arányosan kisebb */
.brand img{
  height: clamp(36px, 10vw, 50pt);
  max-height: 50pt;
  width: auto;
  display: block;
}

.subtitle { color: var(--muted); font-size:.9rem; line-height:1.2; margin:0; }

.actions { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.actions .btn { white-space:nowrap; }
.hello { color: var(--muted); }

/* Mobil */
@media (max-width: 720px){
  .nav { flex-direction:column; align-items:stretch; }
  .actions { width:100%; }
  .actions .btn { flex:1 1 auto; text-align:center; }
  .hello { width:100%; text-align:center; margin-bottom:.25rem; }
}

/* ===== Gombok ===== */
.btn { appearance:none; border:1px solid transparent; background:var(--accent); color:#081218; font-weight:700; padding:.5rem .8rem; border-radius:.6rem; text-decoration:none; }
.btn:hover { filter:brightness(1.08); }
.btn.small { padding:.35rem .6rem; font-size:.9rem; }
.btn.danger { background:var(--danger); color:white; }

/* Outline gomb zöld kerettel/szöveggel */
.btn.outline { background:transparent; color:var(--accent); border-color:var(--accent); }

/* Egyéb UI elemek */
.badge { background:rgba(255,255,255,.08); padding:.2rem .45rem; border-radius:.4rem; font-size:.8rem; }
.card { background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:1rem; padding:1rem; }
.card.disabled { opacity:.55; filter:grayscale(.3); }

.grid { display:grid; gap:.9rem; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid { grid-template-columns: 1fr; } }

.list { display:flex; flex-direction:column; gap:.4rem; }
.row { display:flex; justify-content:space-between; align-items:center; gap:.6rem; padding:.6rem .7rem; border:1px dashed rgba(255,255,255,.08); border-radius:.6rem; }

.help { color:var(--muted); font-size:.92rem; }
.empty { color:var(--muted); font-style:italic; }
.footer { border-top:1px solid rgba(255,255,255,.08); margin-top:1rem; padding:1rem 0; color:var(--muted); }
.disabled-note { color:var(--muted); font-weight:700; }

/* ===== Formok (login mezők egymás alatt) ===== */
.form { display:block !important; }
.form .field { display:flex; flex-direction:column; gap:.35rem; margin-bottom:.8rem; }
.form label { display:block; font-weight:600; }
.form input, .form select, .form textarea { display:block; width:100%; }

/* Ha bárhol volt kétoszlopos rács: tiltsuk le itt */
.form .rowx { grid-template-columns:1fr !important; display:block !important; }

/* ===== 90% széles elválasztó ===== */
.hr-90 { width:90%; margin:1rem auto; border:0; height:1px; background:rgba(255,255,255,.18); }
.hr-90.left { margin-left:0; margin-right:auto; }

/* ===== Főoldali dátum gombok – térközök és tördelés ===== */
.card .segment{
  display:flex;
  flex-wrap:wrap;   /* ha nem fér ki, törhet több sorba */
  gap:.5rem;        /* gombok között térköz */
  margin:.5rem 0;   /* gombsor felett/alatt térköz */
}

/* Figyelmeztető doboz (pl. bejelentkezés szükséges) */
.notice {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  padding: .6rem .75rem;
  border-radius: .6rem;
  margin: .25rem 0 .75rem;
}
/* ===== Mobilos fejléc – felesleges függőleges rés eltüntetése ===== */
.topbar p {               /* a fejlécben lévő bármely <p> (pl. alcím) */
  margin: 0;              /* alapértelmezett ~1em margó ki */
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.2;
}

@media (max-width: 720px) {
  .nav {                  /* kisebb belső függőleges hézag a fejléc elemei között */
    gap: .35rem;
    padding: .6rem 0 .5rem;
  }
  .brandgroup {           /* brand + alcím közti hézag csökkentése, ha ezt használod */
    gap: .2rem;
  }
  .actions {              /* gombcsoport kis rátartással a brand alatt */
    margin-top: .2rem;
  }
  /* ha valahol maradt egy <br> a gombok közt, ne okozzon nagy lyukat */
  .actions br { display: none; }
}

/* Biztonsági háló: ha mégis lenne extra tér a fejléc UTÁN, kicsi negatív előrehozás nélkül,
   finoman csökkentsük a következő tartalom felső margóját */
.topbar + .container .card:first-child {
  margin-top: .25rem;   /* legyen kicsi, de ne 0 */
}