/* ============================================================
   ZedPe — pôvodný login dizajn (z index.html), 1:1 zachovaný
   ============================================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}

:root{
  --acid:   #00ffe7;
  --acid2:  #00c9b8;
  --red:    #ff1a3c;
  --red2:   #cc0026;
  --amber:  #ffb300;
  --blue:   #0af;
  --bg:     #03070d;
  --bg1:    #060f18;
  --bg2:    #0a1624;
  --bg3:    #0d1e30;
  --border: #0d3a52;
  --border2:#1a5a78;
  --text:   #8ab8cc;
  --texth:  #cce8f4;
  --mono:   'JetBrains Mono', monospace;
  --exo:    'Exo 2', sans-serif;
  --russo:  'Russo One', sans-serif;
  --glow:   0 0 12px rgba(0,255,231,.4);
  --glow2:  0 0 20px rgba(0,255,231,.25);
  --rglow:  0 0 12px rgba(255,26,60,.5);
}

html,body{height:100%;background:var(--bg);overflow:hidden;cursor:crosshair}
body{font-family:var(--mono);color:var(--text);padding-bottom:env(safe-area-inset-bottom)}

/* ── SCAN LINES + NOISE ── */
body::before{
  content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,transparent 0,transparent 2px,rgba(0,0,0,.12) 2px,rgba(0,0,0,.12) 3px),
    repeating-linear-gradient(90deg,transparent 0,transparent 60px,rgba(0,255,231,.008) 60px,rgba(0,255,231,.008) 61px);
}
body::after{
  content:'';position:fixed;inset:0;z-index:9998;pointer-events:none;
  background:radial-gradient(ellipse 120% 80% at 50% 0%,rgba(0,170,255,.06) 0%,transparent 70%),
             radial-gradient(ellipse 60% 40% at 90% 100%,rgba(0,255,231,.04) 0%,transparent 60%);
}

/* ════════════ LOGIN ════════════ */
#login-overlay{
  position:fixed;inset:0;z-index:1000;
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:0;
}

/* Matrix rain canvas */
#matrix-bg{position:fixed;inset:0;z-index:0;opacity:.18}

.login-wrap{position:relative;z-index:10;width:min(440px,96vw)}

/* Top threat bar */
.threat-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 14px;
  background:rgba(255,26,60,.08);
  border:1px solid rgba(255,26,60,.3);
  border-bottom:none;
  font-size:9px;letter-spacing:2px;color:rgba(255,26,60,.9);
}
.threat-pulse{width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red);animation:tpulse .8s infinite}
@keyframes tpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.7)}}

/* Main login box */
.lbox{
  background:linear-gradient(160deg,var(--bg2) 0%,var(--bg1) 100%);
  border:1px solid var(--border2);
  border-top:2px solid var(--acid);
  padding:32px 28px 28px;
  position:relative;
  box-shadow:0 0 60px rgba(0,255,231,.08),inset 0 1px 0 rgba(0,255,231,.1);
}

/* Corner decorations */
.lbox::before,.lbox::after{
  content:'';position:absolute;width:16px;height:16px;
}
.lbox::before{top:-1px;right:-1px;border-top:2px solid var(--acid);border-right:2px solid var(--acid)}
.lbox::after{bottom:-1px;left:-1px;border-bottom:2px solid var(--acid2);border-left:2px solid var(--acid2)}

.lbox-logo{text-align:center;margin-bottom:28px}

.logo-ascii{
  font-family:var(--russo);
  font-size:clamp(28px,7vw,42px);
  letter-spacing:6px;
  color:var(--acid);
  text-shadow:0 0 30px rgba(0,255,231,.8),0 0 60px rgba(0,255,231,.3);
  line-height:1;
}
.logo-ascii span{color:var(--blue)}

.logo-sub{
  font-size:8px;letter-spacing:4px;color:var(--border2);
  margin-top:6px;text-transform:uppercase;
}

/* Security indicators — teraz s reálnym stavom, nie fake */
.sec-row{
  display:flex;gap:6px;justify-content:center;margin-bottom:20px;
  flex-wrap:wrap;
}
.sec-pill{
  font-size:8px;letter-spacing:1.5px;padding:3px 8px;
  border:1px solid;display:flex;align-items:center;gap:4px;
}
.sec-pill.green{color:var(--acid);border-color:rgba(0,255,231,.3);background:rgba(0,255,231,.05)}
.sec-pill.blue{color:var(--blue);border-color:rgba(0,170,255,.3);background:rgba(0,170,255,.05)}
.sec-pill.red{color:var(--red);border-color:rgba(255,26,60,.3);background:rgba(255,26,60,.05)}
.sec-dot{width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 5px currentColor;animation:blink 1.6s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

/* Firewall scan animation (čisto dekoratívne, netvrdí žiadne dáta) */
.fw-scan{
  height:2px;margin-bottom:20px;
  background:var(--bg3);border:1px solid var(--border);
  position:relative;overflow:hidden;
}
.fw-scan::after{
  content:'';position:absolute;top:0;left:-30%;width:30%;height:100%;
  background:linear-gradient(90deg,transparent,var(--acid),transparent);
  animation:fwscan 2.4s linear infinite;
}
@keyframes fwscan{to{left:130%}}

.field-group{margin-bottom:14px}
.field-label{
  font-size:8px;letter-spacing:3px;color:var(--border2);
  text-transform:uppercase;margin-bottom:6px;
  display:flex;align-items:center;gap:6px;
}
.field-label::before{content:'//';color:var(--acid2);font-size:9px}

.field-input{
  display:flex;align-items:center;gap:10px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.4);
  padding:11px 14px;
  transition:border-color .2s,box-shadow .2s;
  position:relative;
}
.field-input:focus-within{
  border-color:var(--acid);
  box-shadow:0 0 0 1px rgba(0,255,231,.15),var(--glow);
}
.field-input .fi-icon{color:var(--acid2);font-size:11px;flex-shrink:0}
.field-input input{
  flex:1;background:none;border:none;outline:none;
  font-family:var(--mono);font-size:13px;color:var(--texth);
  caret-color:var(--acid);
}
.field-input input::placeholder{color:rgba(138,184,204,.3);font-size:12px}
.field-input input:disabled{opacity:.4;cursor:not-allowed}

/* Threat counter — reálny počet pokusov pre túto IP */
.threat-counter{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 12px;background:rgba(0,0,0,.3);border:1px solid var(--border);
  margin-bottom:14px;font-size:9px;
}
.tc-label{color:var(--text);letter-spacing:1px}
.tc-val{color:var(--amber);font-family:var(--russo);font-size:12px;letter-spacing:2px}
.tc-val.high{color:var(--red)}

.btn-primary{
  width:100%;padding:14px;
  background:transparent;
  border:1px solid var(--acid);
  font-family:var(--russo);font-size:11px;letter-spacing:4px;
  color:var(--acid);cursor:pointer;
  position:relative;overflow:hidden;
  text-transform:uppercase;
  transition:all .2s;
  box-shadow:inset 0 0 0 0 var(--acid);
}
.btn-primary:disabled{opacity:.4;cursor:not-allowed}
.btn-primary::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(0,255,231,.08) 50%,transparent 100%);
  transform:translateX(-100%);
  animation:btnshine 3s ease infinite;
}
@keyframes btnshine{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
.btn-primary:hover{
  background:rgba(0,255,231,.1);
  box-shadow:var(--glow);
  color:var(--texth);
}

#login-status{
  text-align:center;font-size:10px;margin-top:10px;
  min-height:18px;letter-spacing:2px;
}
#login-status.ok{color:var(--acid)}
#login-status.err{color:var(--red)}
#login-status.loading{color:var(--blue)}

/* Bottom fingerprint row */
.login-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 14px;
  background:rgba(0,255,231,.03);
  border:1px solid var(--border);
  border-top:none;
  font-size:8px;letter-spacing:1.5px;color:rgba(138,184,204,.5);
}

/* ── Boot sekvencia po prihlásení (jediná "neskutočná" časť — animácia prechodu) ── */
#boot-overlay{
  position:fixed;inset:0;z-index:2000;background:var(--bg);
  display:none;align-items:center;justify-content:center;flex-direction:column;
  font-family:var(--mono);color:var(--acid);
}
#boot-overlay.show{display:flex}
#boot-lines{width:min(480px,92vw);font-size:12px;line-height:1.8}
#boot-lines div{opacity:0;animation:bootline .25s forwards;white-space:pre-wrap}
@keyframes bootline{to{opacity:1}}
#boot-lines .dim{color:var(--border2)}
#boot-lines .ok{color:var(--acid)}

/* ── v52 — TOTP 2FA krok ── */
.totp-header{
  display:flex;align-items:center;gap:8px;justify-content:center;
  margin-bottom:10px;
}
.totp-icon{color:var(--acid);font-size:18px}
.totp-title{
  font-family:var(--mono);font-size:13px;letter-spacing:3px;
  color:var(--acid);font-weight:700;
}
.totp-hint{
  font-size:10.5px;color:var(--border2);text-align:center;
  margin-bottom:18px;line-height:1.5;
}
#inp-totp{
  text-align:center;letter-spacing:6px;font-size:18px;font-weight:700;
}

@media (max-width:480px){
  .lbox{padding:20px 16px 18px}
  .threat-bar{font-size:8px;padding:5px 10px;letter-spacing:1px}
  .threat-bar span:first-child{display:none}
  .sec-pill{font-size:7px;padding:2px 6px}
  .login-footer{font-size:7px;padding:5px 10px}
}

/* ==== v72-server-status : stav servera v threat-bare ==================
   .threat-bar ma v zaklade cerveny nadych (povodne "N BLOKOVANYCH").
   Tieto modifikatory ho prefarbia podla realneho stavu - cervena uz
   teda znamena problem, nie dekoraciu.                              */
.threat-bar.ok{background:rgba(0,255,231,.06);border-color:rgba(0,255,231,.28);color:rgba(0,255,231,.9)}
.threat-bar.ok .threat-pulse{background:var(--acid);box-shadow:0 0 8px var(--acid)}
.threat-bar.warn{background:rgba(255,179,0,.08);border-color:rgba(255,179,0,.32);color:rgba(255,179,0,.92)}
.threat-bar.warn .threat-pulse{background:var(--amber);box-shadow:0 0 8px var(--amber)}