:root{
  --bg:#05060f; --bg2:#0c0f24; --panel:rgba(14,18,44,.78);
  --line:#1f2a5c; --text:#e6ecff; --dim:#8b95c4;
  --cyan:#2ef2ff; --magenta:#ff2ea6; --gold:#ffc84a;
  --copper:#d9814a; --jade:#3fd69a; --crystal:#b8e6ff;
  --ok:#3fd69a; --bad:#ff5a7a;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  min-height:100vh; background:radial-gradient(ellipse at 50% -10%,#1a1452 0%,var(--bg2) 40%,var(--bg) 75%);
  color:var(--text); font:500 17px/1.55 Rajdhani,system-ui,sans-serif; overflow-x:hidden;
  display:flex; flex-direction:column;
}
a{color:var(--cyan); text-decoration:none}
a:hover{text-decoration:underline}
.dim{color:var(--dim)} .small{font-size:.92rem}

/* Neónová podlaha */
.grid-floor{
  position:fixed; left:-50%; right:-50%; bottom:0; height:55vh; z-index:-1; pointer-events:none;
  background:
    linear-gradient(transparent 0 calc(100% - 1px), rgba(46,242,255,.35) 0) 0 0/100% 48px,
    linear-gradient(90deg, transparent 0 calc(100% - 1px), rgba(255,46,166,.35) 0) 0 0/48px 100%;
  transform:perspective(420px) rotateX(62deg); transform-origin:bottom;
  mask-image:linear-gradient(to top,#000 10%,transparent 90%);
  -webkit-mask-image:linear-gradient(to top,#000 10%,transparent 90%);
  animation:floor 6s linear infinite;
}
@keyframes floor{to{background-position:0 48px,0 0}}
@media (prefers-reduced-motion:reduce){.grid-floor{animation:none}}

/* Horná lišta */
.topbar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px clamp(16px,4vw,48px)}
.brand{font:900 1.25rem Orbitron,sans-serif; letter-spacing:.12em; color:var(--text)}
.brand span{color:var(--cyan)} .brand-mark{color:var(--magenta)}
.brand:hover{text-decoration:none}
.topbar nav{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
@media (max-width:560px){
  .topbar{padding:14px 16px}
  .brand{font-size:1.05rem; white-space:nowrap}
  .topbar nav{gap:12px}
  .topbar .btn{padding:8px 12px; font-size:.7rem}
}

/* Tlačidlá */
.btn{
  display:inline-block; padding:10px 22px; border:1px solid var(--cyan); border-radius:4px;
  background:linear-gradient(90deg,rgba(46,242,255,.18),rgba(255,46,166,.18));
  color:var(--text); font:700 .85rem Orbitron,sans-serif; letter-spacing:.08em; text-transform:uppercase;
  box-shadow:0 0 18px rgba(46,242,255,.25); cursor:pointer; transition:box-shadow .2s,transform .2s;
}
.btn:hover{text-decoration:none; box-shadow:0 0 28px rgba(46,242,255,.55); transform:translateY(-1px)}
.btn-ghost{background:transparent; border-color:var(--line); box-shadow:none}
.btn-block{width:100%; margin-top:8px}

main{flex:1; width:100%; max-width:1080px; margin:0 auto; padding:0 16px 48px}

/* Hero */
.hero{text-align:center; padding:clamp(40px,10vh,110px) 0 56px}
.eyebrow{color:var(--magenta); font:700 .8rem Orbitron,sans-serif; letter-spacing:.3em; text-transform:uppercase}
.hero-title{
  margin:.1em 0; font:900 clamp(2.8rem,11vw,7rem)/1 Orbitron,sans-serif; letter-spacing:.06em;
  text-shadow:0 0 24px rgba(46,242,255,.5),0 0 60px rgba(255,46,166,.25);
}
.hero-title span{color:var(--cyan)}
.hero-sub{max-width:620px; margin:18px auto 30px; font-size:1.2rem; color:#c8d0f5}
.hero-cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

/* Kľúče */
.keys{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px}
.key{background:var(--panel); border:1px solid var(--line); border-top:3px solid; border-radius:6px; padding:20px 22px; backdrop-filter:blur(6px)}
.key h3{margin:0 0 6px; font:700 1rem Orbitron,sans-serif; letter-spacing:.06em}
.key p{margin:0; color:#c3cbef}
.key-copper{border-top-color:var(--copper)} .key-copper h3{color:var(--copper)}
.key-jade{border-top-color:var(--jade)}     .key-jade h3{color:var(--jade)}
.key-crystal{border-top-color:var(--crystal)} .key-crystal h3{color:var(--crystal)}

/* Panely a formuláre */
.panel{background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:clamp(20px,4vw,36px); margin-top:24px; backdrop-filter:blur(8px); box-shadow:0 0 40px rgba(46,242,255,.08)}
.panel h1{margin:0 0 4px; font:700 1.6rem Orbitron,sans-serif; letter-spacing:.05em}
.panel h2{margin:28px 0 10px; font:700 1rem Orbitron,sans-serif; letter-spacing:.08em; color:var(--cyan)}
.auth{max-width:440px; margin:40px auto 0}
form{display:flex; flex-direction:column; gap:14px; margin-top:18px}
label{display:flex; flex-direction:column; gap:6px; font-weight:600; color:#c8d0f5}
input{
  padding:11px 12px; border:1px solid var(--line); border-radius:4px; background:rgba(5,6,15,.7);
  color:var(--text); font:500 1rem Rajdhani,sans-serif;
}
input:focus{outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(46,242,255,.18)}
.alert{margin-top:16px; padding:10px 14px; border:1px solid var(--bad); border-radius:4px; background:rgba(255,90,122,.1); color:#ffc2cf}
.notice{margin-bottom:20px; padding:10px 14px; border:1px solid var(--ok); border-radius:4px; background:rgba(63,214,154,.1)}

/* Dashboard */
.avatar-card{display:flex; align-items:center; gap:20px}
.avatar-ring{
  width:78px; height:78px; border-radius:50%; display:grid; place-items:center; flex:none;
  font:900 2rem Orbitron,sans-serif; border:2px solid var(--cyan);
  box-shadow:0 0 22px rgba(46,242,255,.5), inset 0 0 18px rgba(255,46,166,.35);
}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px; margin-top:24px}
.stat{border:1px solid var(--line); border-radius:6px; padding:14px 16px; background:rgba(5,6,15,.5)}
.stat-num{display:block; font:700 1.6rem Orbitron,sans-serif; color:var(--gold)}
.stat-lbl{color:var(--dim); text-transform:uppercase; letter-spacing:.12em; font-size:.8rem}
.log{width:100%; border-collapse:collapse; font-size:.95rem}
.log th,.log td{padding:8px 10px; border-bottom:1px solid var(--line); text-align:left}
.log th{color:var(--dim); font-weight:600; text-transform:uppercase; letter-spacing:.08em; font-size:.75rem}
.ok{color:var(--ok)} .bad{color:var(--bad)}
.enter-world{margin-top:26px; padding:22px; border:1px dashed var(--line); border-radius:8px; text-align:center}
.enter-world p{margin:12px auto 0; max-width:520px}
.btn-big{padding:14px 34px; font-size:1rem}
@media (max-width:560px){ .log th:nth-child(2),.log td:nth-child(2){display:none} }

.foot{display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; padding:18px clamp(16px,4vw,48px); border-top:1px solid var(--line); font-size:.9rem}