:root{
  /* ====== ALAP SZÍNEK (admin oldalon is állítható) ====== */
  --bgTop:#070A0F;
  --bgBottom:#0B0F14;

  /* Felső sáv (logó melletti) */
  --headerBg:#0E141C;

  /* Kártyák (szövegdobozok) */
  --card:#121826;

  /* Szöveg */
  --text:#E8EEF7;
  --muted:#A7B0C0;

  /* Vonalak/keretek */
  --line:#222C3D;

  /* Gombok */
  --accent:#4AA3FF;
  --accent2:#7CF0C7;
  --btnText:#0B0F14;

  /* Főoldal Üzenetek gomb (külön állítható) */
  --homeBtnBg: var(--accent2);
  --homeBtnText: var(--btnText);

  /* Jelzések */
  --danger:#FF5A5F;
  --warn:#FFCC66;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:linear-gradient(180deg, var(--bgTop) 0%, var(--bgBottom) 100%);
color:var(--text);
}

a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; gap:12px; align-items:center; justify-content:space-between;
  padding:12px 14px;
  background:var(--headerBg);
  border-bottom:1px solid var(--line);
  backdrop-filter: blur(8px);
}

.brand a{color:var(--text); font-weight:700; letter-spacing:.2px}
.nav{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.navlink{
  padding:8px 10px;
  border:1px solid transparent;
  border-radius:999px;
  color:var(--text);
}
.navlink:hover{
  border-color:var(--line);
  text-decoration:none;
}

.container{
  max-width:980px;
  margin:16px auto;
  padding:0 14px 32px;
}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
  margin:14px 0;
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
}

.lead{font-size:1.05rem; line-height:1.6}
.muted{color:var(--muted)}
.btnrow{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px;
  background:var(--accent);
  color: var(--btnText);
  border:0;
  border-radius:12px;
  font-weight:700;
  cursor:pointer;

  font-size:1rem;
}
.btn:hover{filter:brightness(1.05); text-decoration:none}
.btn.secondary{color:var(--btnText); background:var(--accent2)}
.btn.ghost{
  background:transparent;
  border:1px solid var(--line);
  color:var(--text);
}
.btn.small{padding:7px 10px; border-radius:10px; font-weight:700}

.form{display:grid; gap:12px; max-width:520px}
label{display:grid; gap:6px; font-weight:600}
input, select, textarea{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  color:var(--text);
  outline:none;
}

input::placeholder, textarea::placeholder{color:rgba(167,176,192,.8);}
input:focus, select:focus, textarea:focus{
  border-color:rgba(74,163,255,.65);
  box-shadow:0 0 0 3px rgba(74,163,255,.18);
}

.flash{
  border-radius:14px;
  padding:10px 12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  margin-bottom:12px;
}
.flash.success{border-color:rgba(124,240,199,.35)}
.flash.error{border-color:rgba(255,90,95,.35)}
.flash.warning{border-color:rgba(255,204,102,.35)}

.map{height:420px; border-radius:16px; overflow:hidden; border:1px solid var(--line)}
@media (max-width: 520px){
  .map{height:340px}
  .lead{font-size:1rem}
}

.mapwrap{display:grid; gap:10px}
.maphelp{color:var(--muted); font-weight:500}
.coords{display:flex; gap:10px; flex-wrap:wrap; color:var(--muted)}
code{background:rgba(255,255,255,.06); padding:2px 6px; border-radius:8px; border:1px solid var(--line)}

.footer{
  border-top:1px solid var(--line);
  padding:14px;
  color:var(--muted);
  text-align:center;
}

.profilebar{
  display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:space-between;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.03);
}
.inline{display:inline}
.msglist{display:grid; gap:10px}
.msg{
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 12px;
  background:rgba(255,255,255,.02);
}
.msghead{display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--muted)}
.msgbody{margin-top:8px; white-space:pre-wrap; line-height:1.5}


/* Active user indicator */
.topright{display:flex;align-items:center;gap:.5rem}
.userpill{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .6rem;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.04);font-size:.9rem;color:rgba(255,255,255,.9)}

/* Desktop: use more screen real-estate */
@media (min-width: 1024px){
  .container{max-width: 1200px;}
  .map{height: 520px;}
}
@media (min-width: 1400px){
  .container{max-width: 1400px;}
}

.btn.danger{border-color:rgba(255,80,80,.35)}
.btn.danger:hover{border-color:rgba(255,80,80,.6)}
.account-actions{margin-top:.75rem}

.leaflet-popup-content .muted{opacity:.8;font-size:.92em}

/* Desktop wide map & textarea */
@media (min-width: 1024px){
  #pickmap{max-width:100%;}
  textarea{max-width:100%;}
}
/* Back home link */
.backhome{margin:0.5rem 0;}
.backhome a{font-size:.9rem}
/* User dropdown */
.user-menu{position:relative}
.user-dropdown{display:none;position:absolute;right:0;top:100%;background:#111;border:1px solid #333;border-radius:6px;min-width:220px;z-index:100}
.user-dropdown.open{display:block}
.user-dropdown a, .user-dropdown button{display:block;width:100%;padding:.5rem .75rem;background:none;border:0;color:#eee;text-align:left}
.user-dropdown a:hover, .user-dropdown button:hover{background:#222}

/* Header layout fix */
.topbar{display:flex;align-items:center;justify-content:space-between}
.user-area{margin-left:auto}
.user-menu{position:relative}
.userpill{cursor:pointer}
.user-dropdown{display:none;position:absolute;right:0;top:100%;background:#111;border:1px solid #333;border-radius:6px;min-width:240px;z-index:200}
.user-dropdown.open{display:block}
.user-dropdown a, .user-dropdown button{display:block;width:100%;padding:.6rem .8rem;background:none;border:0;color:#eee;text-align:left}
.user-dropdown a:hover, .user-dropdown button:hover{background:#222}

/* Desktop full width content */
@media (min-width: 1024px){
  .container{max-width:1400px}
  .card{max-width:100%}
  .map{width:100%}
  #pickmap{width:100%}
  textarea{width:100%}
}

/* Header: menu + user right aligned */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.rightgroup{display:flex;align-items:center;justify-content:flex-end;gap:.75rem;flex:1}
.nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.35rem}
.user-area{display:flex;align-items:center;justify-content:flex-end}
.user-menu{position:relative}
.userpill{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .6rem;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.04);font-size:.9rem;color:rgba(255,255,255,.9);text-decoration:none;cursor:pointer}
.user-dropdown{display:none;position:absolute;right:0;top:calc(100% + .35rem);background:#111;border:1px solid #333;border-radius:10px;min-width:260px;z-index:200;overflow:hidden}
.user-dropdown.open{display:block}
.user-dropdown a, .user-dropdown button{display:block;width:100%;padding:.65rem .85rem;background:none;border:0;color:#eee;text-align:left;text-decoration:none}
.user-dropdown a:hover, .user-dropdown button:hover{background:#222}

/* Desktop: truly wide layout (match full screen), but keep comfortable padding */
@media (min-width: 1024px){
  .container{max-width:100%;width:100%;padding-left:24px;padding-right:24px}
  .card{max-width:none;width:100%}
  .form{max-width:none}
  .map{width:100%}
  #pickmap{width:100%}
  .mapwrap{width:100%}
  .form textarea{width:100%}
}

/* Fixed-width action buttons on desktop (do NOT stretch to full width) */
@media (min-width: 1024px){
  .btn.fixed{width:240px;justify-content:center}
}

/* Ensure top nav stays right-aligned */
.topbar{display:flex;align-items:center;gap:1rem}
.rightgroup{margin-left:auto;display:flex;align-items:center;gap:.75rem;justify-content:flex-end}
.nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.35rem}
.user-area{display:flex;align-items:center;justify-content:flex-end}

/* Login (and any .form.narrow): keep controls compact on desktop */
@media (min-width: 1024px){
  .form.narrow{max-width:520px}
}

/* Hard-enforce top menu right alignment */
.topbar{justify-content:space-between !important}
.rightgroup{flex:1 !important; margin-left:auto !important; justify-content:flex-end !important}
.nav{justify-content:flex-end !important}

/* === v20260106_1 alignment hard fix === */
.topbar{display:flex;align-items:center;justify-content:space-between;}
.brand{flex:0 0 auto;}
.rightgroup{flex:1 1 auto;display:flex;align-items:center;justify-content:flex-end;gap:.75rem;margin-left:auto;}
.nav{display:flex;flex:0 1 auto;justify-content:flex-end;gap:.35rem;flex-wrap:wrap;margin-left:auto;}
.navlink{display:inline-flex;align-items:center;}
.user-area{flex:0 0 auto;margin-left:.25rem;}

/* Tight message line spacing */
.msglist, .msg, .msgbody{line-height:1;}
.msgbody{margin-top:.25rem;}

/* Brand icon-only logo */
.brand-link{display:inline-flex;align-items:center;text-decoration:none}
.brand-logo{height:40px;width:auto;display:block}
@media (max-width: 600px){
  .brand-logo{height:32px}
}


/* Főoldali Üzenetek gomb külön színe */
.btn.wallbtn{background:var(--homeBtnBg); color:var(--homeBtnText); border-color:transparent;}
.btn.wallbtn:hover{filter:brightness(1.05); text-decoration:none;}


/* K&V accordion */
.qa-list{display:grid;gap:10px;margin-top:14px}
.qa-item{border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.02);overflow:hidden}
.qa-item[open]{background:rgba(255,255,255,.03)}
.qa-question{list-style:none;cursor:pointer;padding:14px 16px;font-weight:700;color:var(--text);position:relative}
.qa-question::-webkit-details-marker{display:none}
.qa-question::after{content:'+';position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--accent);font-size:1.2rem;line-height:1}
.qa-item[open] .qa-question::after{content:'−'}
.qa-answer{padding:0 16px 14px;color:var(--text)}
.qa-answer p:first-child{margin-top:0}