/* Admin: a nyilvános oldal palettáján, műszerfal-hangulat (rács, ragyogó élek, élő jelzés). */
:root{
  --bg:#070b11; --panel:#0e1621; --panel2:#111c2a; --line:#1c2a3b; --line2:#2b3b52;
  --fg:#dfe8f3; --dim:#8396ac; --white:#fff;
  --ice:#5ce1ff; --amber:#ffb547; --crit:#ff4d6d; --high:#ff8a4c; --med:#ffd166; --ok:#4fe3a1;
  --f-disp:"Bricolage Grotesque","Arial Narrow",system-ui,sans-serif;
  --f-num:"Unbounded","Bricolage Grotesque",system-ui,sans-serif;
  --f-body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --gut:clamp(16px,2.4vw,32px); --r:4px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-body);line-height:1.5;overflow-x:hidden;min-height:100vh}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:
  radial-gradient(60% 40% at 90% -5%,rgba(92,225,255,.12),transparent 70%),
  radial-gradient(50% 40% at 0% 100%,rgba(255,181,71,.06),transparent 70%),
  linear-gradient(rgba(92,225,255,.035) 1px,transparent 1px) 0 0/40px 40px,
  linear-gradient(90deg,rgba(92,225,255,.035) 1px,transparent 1px) 0 0/40px 40px}
body>*{position:relative;z-index:1}
a{color:var(--ice)}
:focus-visible{outline:2px solid var(--ice);outline-offset:3px}
small{font-weight:400}
.dim{color:var(--dim)}

/* Belépés */
.gate{min-height:100vh;display:flex;flex-direction:column;justify-content:center;max-width:420px;margin:0 auto;padding:40px var(--gut)}
.gate-lock{color:var(--ice);filter:drop-shadow(0 0 14px rgba(92,225,255,.6));margin-bottom:18px;animation:glow 2.6s ease-in-out infinite}
@keyframes glow{50%{filter:drop-shadow(0 0 4px rgba(92,225,255,.3))}}
.eyebrow{font:.75rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:0 0 6px}
.gate h1{font:800 clamp(2rem,7vw,2.8rem)/1 var(--f-disp);color:var(--white);margin:0 0 20px;letter-spacing:-.02em}
.gate-msg{font:.85rem var(--f-mono);color:var(--amber);margin:0 0 16px}
.gate-form{display:grid;gap:10px;padding:20px;border:1px solid var(--line2);border-radius:var(--r);background:rgba(14,22,33,.85);box-shadow:0 0 0 1px rgba(92,225,255,.05),0 20px 60px -30px rgba(92,225,255,.4)}
.gate-form label{font:.72rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.gate-form input{background:var(--bg);border:1px solid var(--line2);border-radius:var(--r);color:var(--white);font:1.05rem var(--f-mono);padding:13px 14px;min-height:50px;width:100%}
.gate-form input:focus{border-color:var(--ice);outline:none;box-shadow:0 0 0 3px rgba(92,225,255,.15)}
#code{letter-spacing:.5em;text-align:center;font-size:1.4rem}
.gate-form button,.out button{background:var(--ice);color:#04121a;border:0;border-radius:var(--r);font:700 .9rem var(--f-mono);letter-spacing:.06em;text-transform:uppercase;min-height:50px;cursor:pointer}
.gate-form button:hover{background:#8eeaff}
.gate-alt{margin:14px 0 0;font-size:.85rem}
.gate-alt a{color:var(--dim)}

/* Fejléc */
.top{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;padding:14px var(--gut);border-bottom:1px solid var(--line);background:rgba(7,11,17,.82);backdrop-filter:blur(8px);position:sticky;top:0;z-index:500}
.logo{font:700 1rem var(--f-mono);color:var(--white);text-decoration:none;margin-right:auto}
.logo span{color:var(--ice)}
.logo small{color:var(--dim);font-size:.8rem}
.rng{display:flex;border:1px solid var(--line2);border-radius:var(--r);overflow:hidden;font:.76rem var(--f-mono)}
.rng a{color:var(--dim);text-decoration:none;padding:0 11px;min-height:38px;display:inline-flex;align-items:center;border-right:1px solid var(--line)}
.rng a:last-child{border-right:0}
.rng a:hover{color:var(--fg);background:var(--panel2)}
.rng a[aria-current]{color:#04121a;background:var(--ice)}
.live{font:.78rem var(--f-mono);color:var(--dim);display:inline-flex;align-items:center;gap:8px}
.live i{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(79,227,161,.6);animation:beat 1.8s infinite}
.live b{color:var(--ok);font-size:1rem}
@keyframes beat{70%{box-shadow:0 0 0 9px rgba(79,227,161,0)}100%{box-shadow:0 0 0 0 rgba(79,227,161,0)}}
.out{margin:0}
.out button{background:transparent;color:var(--dim);border:1px solid var(--line2);min-height:38px;padding:0 12px;font-size:.72rem}
.out button:hover{color:var(--fg);border-color:var(--fg)}

/* Rács */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:18px var(--gut) 24px;max-width:2200px;margin:0 auto}
.span2{grid-column:span 2}.span3{grid-column:1/-1}
.card{background:linear-gradient(180deg,rgba(17,28,42,.92),rgba(14,22,33,.92));border:1px solid var(--line);border-radius:var(--r);padding:18px;min-width:0;position:relative}
.card::before{content:"";position:absolute;left:-1px;top:-1px;width:18px;height:18px;border-left:1px solid var(--ice);border-top:1px solid var(--ice);opacity:.7}
.card h2{font:500 .72rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:0 0 14px;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline}
.card h2 small{letter-spacing:.04em;text-transform:none;color:#5d7088}
.card h2.sub{margin-top:22px}
.empty{color:#5d7088;font:.82rem var(--f-mono);margin:0}

/* Fő számok */
.kpis{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.k{background:linear-gradient(160deg,rgba(92,225,255,.08),rgba(14,22,33,.9) 55%);border:1px solid var(--line2);border-radius:var(--r);padding:16px 18px;position:relative;overflow:hidden}
.k::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--ice),transparent);animation:scan 3.2s linear infinite}
@keyframes scan{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.k h2{font:500 .7rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:0 0 6px}
.k b{display:block;font:800 clamp(1.8rem,3.4vw,3rem)/1 var(--f-num);color:var(--white);font-variant-numeric:tabular-nums;letter-spacing:-.03em;text-shadow:0 0 24px rgba(92,225,255,.35)}
.k small{display:block;margin-top:6px;font:.76rem var(--f-mono);color:var(--ice)}
.k.amber{background:linear-gradient(160deg,rgba(255,181,71,.12),rgba(14,22,33,.9) 55%)}
.k.amber small{color:var(--amber)}
.k.amber::after{background:linear-gradient(90deg,transparent,var(--amber),transparent)}

/* Grafikon */
.lg{margin-left:auto;display:inline-flex;gap:6px 14px;align-items:center;text-transform:none;letter-spacing:.02em}
.lg i{display:inline-block;width:10px;height:10px;margin-right:4px;vertical-align:-1px}
.c-v{background:var(--ice)}.c-s{background:var(--amber)}
.chart{width:100%;min-height:260px}
.ch{width:100%;height:260px;display:block}
.gl{stroke:var(--line);stroke-width:1}
.gt{fill:#5d7088;font:11px var(--f-mono)}
.bar{fill:rgba(92,225,255,.55);animation:grow .7s cubic-bezier(.2,.8,.2,1) both}
.bar:hover{fill:var(--ice)}
@keyframes grow{from{transform:scaleY(0)}}
.ln{fill:none;stroke:var(--amber);stroke-width:2;stroke-linejoin:round;filter:drop-shadow(0 0 4px rgba(255,181,71,.6))}
.dot{fill:var(--amber)}

/* Tölcsér */
.funnel{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.funnel li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:baseline}
.funnel span{font-size:.9rem}
.funnel b{font:800 1.3rem var(--f-num);color:var(--white);font-variant-numeric:tabular-nums}
.funnel i{grid-column:1/-1;height:8px;width:0;border-radius:var(--r);background:linear-gradient(90deg,var(--ice),var(--amber));box-shadow:0 0 12px rgba(92,225,255,.35);transition:width 1s cubic-bezier(.2,.8,.2,1)}
.funnel small{grid-column:1/-1;font:.72rem var(--f-mono);color:var(--dim)}

/* Térkép */
.map{height:clamp(300px,42vh,520px);border-radius:var(--r);border:1px solid var(--line);background:#0b0f15}
.leaflet-container{background:#0b0f15;font-family:var(--f-body)}
.leaflet-tile-pane{filter:invert(1) hue-rotate(185deg) brightness(.82) contrast(.9) saturate(.5)}
.leaflet-tooltip{background:var(--panel2);color:var(--fg);border:1px solid var(--line2);border-radius:var(--r);font:.8rem var(--f-mono);box-shadow:none}
.leaflet-tooltip-top::before,.leaflet-tooltip-bottom::before,.leaflet-tooltip-left::before,.leaflet-tooltip-right::before{display:none}
.leaflet-control-zoom a{background:var(--panel2)!important;color:var(--fg)!important;border-color:var(--line2)!important}
.leaflet-control-attribution{background:rgba(7,11,17,.7)!important;color:var(--dim)!important}
.leaflet-control-attribution a{color:var(--dim)!important}
.pulse{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{fill-opacity:.15;stroke-opacity:.5}}

/* Sávlisták */
.bars{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.bars li{position:relative;display:flex;justify-content:space-between;gap:10px;padding:7px 10px;font-size:.88rem;border-radius:var(--r);overflow:hidden;min-width:0}
.bars i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,rgba(92,225,255,.18),rgba(92,225,255,.05));border-left:2px solid var(--ice);transition:width .9s cubic-bezier(.2,.8,.2,1);z-index:0}
.bk,.bn{position:relative;z-index:1}
.bk{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bn{font:600 .82rem var(--f-mono);color:var(--white);white-space:nowrap}
.bn small{color:var(--dim)}

/* Táblák */
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);max-height:520px;overflow-y:auto}
.tbl table{width:100%;border-collapse:collapse;font-size:.86rem}
.tbl th,.tbl td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl th{font:500 .68rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);background:var(--panel);position:sticky;top:0}
.tbl tr:hover td{background:rgba(92,225,255,.04)}
.tbl a{color:var(--fg);text-decoration:none}
.tbl a:hover{color:var(--ice)}
.mono{font-family:var(--f-mono);font-size:.8rem;color:var(--dim)}
td.ok{color:var(--ok)}td.warn{color:var(--amber)}
.sc{display:inline-block;min-width:38px;text-align:center;font:700 .8rem var(--f-mono);padding:3px 6px;border-radius:var(--r);border:1px solid currentColor}
.sc-c{color:var(--crit)}.sc-h{color:var(--high)}.sc-m{color:var(--med)}.sc-o{color:var(--ok)}.sc-p{color:var(--dim)}

/* Élő panel */
.live-card h3{font:500 .68rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:18px 0 10px;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline}
.ma{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ma span{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;font:.74rem var(--f-mono);color:var(--dim);background:rgba(7,11,17,.4)}
.ma b{display:block;font:800 1.5rem/1.1 var(--f-num);color:var(--white);font-variant-numeric:tabular-nums}
.ma .am b{color:var(--amber)}
.akt{max-height:300px}
.akt td.lap{max-width:340px;overflow:hidden;text-overflow:ellipsis}
.akt td.empty-td{color:#5d7088;font:.82rem var(--f-mono)}
.perc{width:100%}
.pc{height:120px}
.pv{fill:rgba(92,225,255,.6)}.pe{fill:var(--amber)}
@media (max-width:700px){.ma{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Élő napló */
.feed{list-style:none;margin:0;padding:0;font:.8rem var(--f-mono);display:grid;gap:2px;max-height:520px;overflow-y:auto}
.feed li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;padding:6px 0;border-bottom:1px dashed var(--line);animation:in .3s ease-out both}
.feed time{color:#5d7088}
.feed span{overflow-wrap:anywhere;color:var(--dim)}
.feed .t-scan span{color:var(--ice)}.feed .t-report span{color:var(--ok)}.feed .t-fix span,.feed .t-quote span{color:var(--amber)}
@keyframes in{from{opacity:0;transform:translateY(-3px)}}

.afoot{padding:8px var(--gut) 32px;font-size:.76rem;color:#5d7088;max-width:2200px;margin:0 auto}

@media (max-width:1100px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .span2,.span3{grid-column:1/-1}
}
@media (max-width:700px){
  .grid{grid-template-columns:minmax(0,1fr)}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .logo{width:100%}
  .rng{max-width:100%;overflow-x:auto}
  .rng a{padding:0 9px;white-space:nowrap}
  .lg{margin-left:0}
}
@media (min-width:1920px){html{font-size:17px}}
@media (min-width:2400px){html{font-size:18.5px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}