/* kryha-login – jednotny tmavy styl ladici s webom KRYHA (bez externych zdrojov) */
:root{
  --bg:#070B14;
  --surface:#0C1326;
  --border:rgba(120,170,255,0.18);
  --text:rgba(255,255,255,0.94);
  --text2:rgba(255,255,255,0.78);
  --muted:rgba(255,255,255,0.62);
  --accent:#59C6FF;
  --accent2:#2F7DFF;
  --chyba-bg:rgba(255,90,90,0.12);
  --chyba-hr:rgba(255,120,120,0.45);
  --ok-bg:rgba(89,198,255,0.10);
  --ok-hr:rgba(89,198,255,0.45);
}

*{ box-sizing:border-box; }

body.kl-body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(900px 520px at 20% 0%, rgba(47,125,255,0.18), transparent 65%),
    radial-gradient(800px 520px at 90% 10%, rgba(89,198,255,0.14), transparent 65%),
    var(--bg);
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial,
               "Noto Sans", "Liberation Sans", sans-serif;
  line-height:1.58;
}

main.kl-main{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:20px;
  padding:32px 16px;
}

header.kl-head{ margin-bottom:4px; }
a.kl-logo-link{ display:inline-block; border-radius:16px; }
img.kl-logo{
  max-width:min(220px, 60vw);
  height:auto;
  display:block;
}

section.kl-karta{
  width:min(430px, 100%);
  background:rgba(12,19,38,0.92);
  border:1px solid var(--border);
  border-radius:18px;
  padding:28px;
  box-shadow:0 16px 60px rgba(0,0,0,0.42);
}
section.kl-karta--siroka{ width:min(880px, 100%); }

h1.kl-nadpis{ margin:0 0 12px; font-size:1.45rem; font-weight:650; }
h2.kl-nadpis2{ margin:28px 0 8px; font-size:1.1rem; font-weight:650; }
p.kl-popis{ color:var(--text2); margin:0 0 16px; }
p.kl-odkaz{ margin:14px 0 0; }
a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
a:hover{ color:#8FD9FF; }

p.kl-msg{
  margin:0 0 16px; padding:12px 14px; border-radius:12px;
  background:var(--ok-bg); border:1px solid var(--ok-hr); color:var(--text);
}
p.kl-msg--chyba{ background:var(--chyba-bg); border-color:var(--chyba-hr); }

form.kl-form{ display:flex; flex-direction:column; gap:8px; }
label.kl-label{ margin-top:8px; font-size:0.95rem; color:var(--text2); }
input.kl-input, select.kl-input{
  min-height:44px;
  padding:10px 12px;
  font-size:1rem;
  color:var(--text);
  background:#0A1022;
  border:1px solid var(--border);
  border-radius:12px;
}
input.kl-input:focus-visible, select.kl-input:focus-visible,
button.kl-tlacidlo:focus-visible, a:focus-visible{
  outline:2px solid rgba(89,198,255,0.75);
  outline-offset:3px;
}

button.kl-tlacidlo{
  margin-top:16px;
  min-height:44px;
  padding:10px 18px;
  font-size:1rem;
  font-weight:600;
  color:#04121F;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  border:0;
  border-radius:12px;
  cursor:pointer;
}
button.kl-tlacidlo:hover{ filter:brightness(1.08); }

button.kl-tlacidlo--maly{
  min-height:44px;
  margin-top:0;
  padding:8px 12px;
  font-size:0.9rem;
  font-weight:600;
}
button.kl-tlacidlo--nebezpecny{
  color:#fff;
  background:linear-gradient(135deg, #FF7A7A, #C2364B);
}

div.kl-tabulka-obal{ overflow-x:auto; }
table.kl-tabulka{ width:100%; border-collapse:collapse; font-size:0.97rem; }
table.kl-tabulka th, table.kl-tabulka td{
  text-align:left; padding:10px 12px; border-bottom:1px solid var(--border);
  vertical-align:middle;
}
table.kl-tabulka th{ color:var(--muted); font-weight:600; }
td.kl-akcie{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

footer.kl-foot{ margin-top:8px; }
a.kl-zpet{ color:var(--text2); text-decoration:none; min-height:44px;
           display:inline-flex; align-items:center; padding:6px 10px; }
a.kl-zpet:hover{ color:var(--accent); }

/* mobile: tabulka ako zoznam */
@media (max-width: 640px){
  table.kl-tabulka thead{ display:none; }
  table.kl-tabulka tr{ display:block; border-bottom:1px solid var(--border); padding:8px 0; }
  table.kl-tabulka td{ border:0; padding:4px 6px; display:flex; gap:8px; }
  table.kl-tabulka td::before{ content:attr(data-hl) ":"; color:var(--muted); min-width:70px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}