:root {
  --primary:#00ffc6;
  --secondary:#4f46e5;
  --accent:#00aaff;
  --bg:#05060a;
  --text:#fff;
  --muted:rgba(255,255,255,.72);
  --panel:rgba(255,255,255,.08);
  --panel-strong:rgba(255,255,255,.16);
  --radius:22px;
  --font:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial,sans-serif;
  --t:.3s cubic-bezier(.2,.8,.2,1);
  --shadow:0 28px 90px rgba(0,0,0,.6);
}

/* RESET */
*{box-sizing:border-box;margin:0;padding:0}
html,body{
  min-height:100%;
  overflow-x:hidden;
  overflow-y:auto;
}
body.login{font-family:var(--font);color:var(--text);background:var(--bg);overflow-x:hidden}

/* =========================================================
   ANIMIRANA POZADINA (mesh + orbs + sparkles + scanline)
   ========================================================= */
.bg{position:fixed;inset:0;z-index:-10;overflow:hidden}

/* animirani gradient "mesh" */
.mesh{
  position:fixed;
  inset:-15% -10%;
  will-change:transform;
  background:
    radial-gradient(60% 60% at 10% 15%, rgba(79,70,229,.25), transparent 60%),
    radial-gradient(60% 60% at 85% 25%, rgba(0,255,198,.2), transparent 60%),
    radial-gradient(40% 60% at 30% 80%, rgba(0,170,255,.18), transparent 60%),
    linear-gradient(180deg,#06070a 0%,#0a0c11 40%,#07090d 100%);
  animation: meshDrift 24s ease-in-out infinite alternate;
  filter: blur(8px);
}
@keyframes meshDrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-2%,2%,0) scale(1.04)}
  100%{transform:translate3d(2%,-2%,0) scale(1.03)}
}

/* lebdeći orbovi */
.orbs{
  position:fixed;
  inset:0;
  pointer-events:none;
  mix-blend-mode:screen;
  filter:saturate(1.2);
}
.orb{
  position:absolute;
  border-radius:50%;
  filter:blur(110px);
  opacity:.5;
  will-change:transform;
}
.orb.a{
  width:540px;height:540px;
  left:-80px;top:12%;
  background:radial-gradient(circle,#00ffc6,transparent 65%);
  animation:floatA 14s ease-in-out infinite;
}
.orb.b{
  width:640px;height:640px;
  right:-140px;bottom:6%;
  background:radial-gradient(circle,#4f46e5,transparent 65%);
  animation:floatB 18s ease-in-out infinite 1s;
}
.orb.c{
  width:720px;height:720px;
  left:32%;top:60%;
  background:radial-gradient(circle,#00aaff,transparent 65%);
  animation:floatC 20s ease-in-out infinite .5s;
}
@keyframes floatA{
  0%{transform:translate(0,0)}
  50%{transform:translate(40px,-35px)}
  100%{transform:translate(-25px,20px)}
}
@keyframes floatB{
  0%{transform:translate(0,0)}
  50%{transform:translate(-35px,25px)}
  100%{transform:translate(20px,-25px)}
}
@keyframes floatC{
  0%{transform:translate(0,0)}
  50%{transform:translate(30px,25px)}
  100%{transform:translate(-25px,-20px)}
}

/* sitne iskrice */
.sparkles{
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.7;
  background-image:
    radial-gradient(2px 2px at 12% 22%, rgba(255,255,255,.18) 50%, transparent 51%),
    radial-gradient(2px 2px at 70% 60%, rgba(255,255,255,.15) 50%, transparent 51%),
    radial-gradient(2px 2px at 40% 80%, rgba(255,255,255,.12) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 88% 30%, rgba(255,255,255,.15) 50%, transparent 51%);
  background-repeat:no-repeat;
  background-size:200% 200%;
  animation:sparkle 8s linear infinite;
}
@keyframes sparkle{
  0%{background-position:12% 22%,70% 60%,40% 80%,88% 30%}
  25%{background-position:14% 20%,68% 64%,42% 78%,86% 33%}
  50%{background-position:10% 25%,72% 58%,38% 82%,90% 27%}
  75%{background-position:13% 21%,69% 62%,40% 79%,87% 31%}
  100%{background-position:12% 22%,70% 60%,40% 80%,88% 30%}
}

/* tanki “scanline” za tech osjećaj */
.scanline{
  position:fixed;
  inset:0;
  background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,.04) 1%,transparent 2%);
  background-size:100% 3px;
  opacity:.25;
  animation:scan 6s linear infinite;
}
@keyframes scan{
  from{background-position-y:0}
  to{background-position-y:3px}
}

/* uvijek dopusti animacije (čak i ako OS ima reduce motion) */
@media (prefers-reduced-motion:no-preference){
  .mesh,.orb,.sparkles,.scanline{animation-play-state:running}
}
@media (prefers-reduced-motion:reduce){
  .mesh,.orb,.sparkles,.scanline{animation-play-state:running;animation-duration:60s;opacity:.4}
}

/* =========================================================
   OSTATAK STILA — identično kao prije
   ========================================================= */

.page-header{
  width:92%;max-width:1200px;margin:22px auto 0;
  display:flex;align-items:center;justify-content:flex-start;gap:14px;
}
.brand{display:flex;align-items:center;gap:.8rem;color:var(--text);text-decoration:none}
.brand__logo{width:82px;height:82px;filter:drop-shadow(0 0 22px rgba(0,255,198,.45))}
.brand__name{font-weight:800;font-size:1.25rem;letter-spacing:.4px}

.main-container{
  width:92%;
  max-width:1200px;
  margin:2.2rem auto 0;

  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;

  align-items:stretch;
}

@media (max-width:900px){
  .main-container{
    grid-template-columns:1fr;
    gap:1.4rem;
  }
}

.card{
  position:relative;overflow:hidden;border-radius:var(--radius);
  background:var(--panel);backdrop-filter:blur(24px);
  box-shadow:var(--shadow);border:1px solid var(--panel-strong);
  height:100%;display:flex;flex-direction:column;padding:2rem;
  transition:transform var(--t), box-shadow var(--t), filter var(--t);
}
.card::before{
  content:"";position:absolute;inset:-2px;border-radius:inherit;z-index:-1;
  background:conic-gradient(from 0deg at 50% 50%, rgba(0,255,198,.35), rgba(79,70,229,.35), rgba(0,170,255,.25), transparent 60%, rgba(0,255,198,.35));
  filter:blur(18px);opacity:.28;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 40px 120px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.06) inset;
  filter:saturate(1.05);
}

/* LOGIN */
.headline{text-align:center;font-size:2rem;font-weight:800;letter-spacing:.3px;margin-bottom:.5rem}
.subtitle{text-align:center;color:var(--muted);margin-bottom:1.4rem}
.alert{
  background:rgba(255,80,80,.12);color:#ff7676;border:1px solid rgba(255,80,80,.35);
  padding:.85rem 1rem;border-radius:14px;text-align:center;margin-bottom:1rem;
}
.login-form{display:flex;flex-direction:column;gap:1.15rem;margin-top:.25rem}
.input-group{position:relative}
.input-group input{
  width:100%;padding:1rem .95rem;border-radius:14px;background:rgba(255,255,255,.05);
  color:#fff;border:1px solid rgba(255,255,255,.18);
  transition:border var(--t), box-shadow var(--t), transform var(--t), background var(--t);
}
.input-group input:hover{border-color:rgba(255,255,255,.28)}
.input-group input:focus{
  border-color:var(--primary);box-shadow:0 0 0 7px rgba(0,255,198,.12);
  transform:translateY(-1px);background:rgba(255,255,255,.07);
}
.input-group label{
  position:absolute;left:14px;top:14px;color:var(--muted);pointer-events:none;
  transition:transform var(--t), color var(--t), font-size var(--t), top var(--t), background var(--t);
  padding:0 .35rem;border-radius:6px;
}
.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label{
  top:-9px;font-size:.74rem;color:var(--primary);background:rgba(10,12,16,.9)
}

.btn-login{
  position:relative;overflow:hidden;isolation:isolate;
  appearance:none;border:0;cursor:pointer;width:100%;
  padding:.98rem 1.1rem;border-radius:16px;
  font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  color:#000;background:linear-gradient(90deg,var(--secondary),var(--primary));
  box-shadow:0 14px 40px rgba(0,255,198,.35);
  transition:transform var(--t), box-shadow var(--t), filter var(--t);
}
.btn-login:hover{transform:translateY(-2px);box-shadow:0 18px 54px rgba(0,255,198,.55)}
.btn-login:active{transform:translateY(0) scale(.99)}
.btn-login::after{
  content:"";position:absolute;inset:0;transform:translateX(-120%);
  background:linear-gradient(110deg, transparent 0%, rgba(255,255,255,.4) 15%, transparent 30%);
  mix-blend-mode:soft-light;
}
.btn-login:hover::after{animation:sheen 1.1s ease}
@keyframes sheen{to{transform:translateX(120%)}}

.btn-secondary{
  display:inline-flex;justify-content:center;align-items:center;
  margin-top:.95rem;padding:.9rem 1rem;width:100%;
  border-radius:16px;text-decoration:none;font-weight:800;letter-spacing:.3px;
  color:#eafdf8;background:rgba(255,255,255,.06);
  border:1px dashed rgba(255,255,255,.22);
  transition:background var(--t), transform var(--t), box-shadow var(--t), border-color var(--t);
}
.btn-secondary:hover{
  background:rgba(0,255,198,.1);
  border-color:rgba(0,255,198,.6);
  box-shadow:0 0 0 8px rgba(0,255,198,.12) inset, 0 14px 40px rgba(0,255,198,.3);
  transform:translateY(-2px) scale(1.01);
}
.pulse{animation:ctaPulse 2.8s ease-in-out infinite}
@keyframes ctaPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(0,255,198,.0)}
  50%{box-shadow:0 0 0 8px rgba(0,255,198,.08)}
}

/* DISCORD */
.discord-title{margin:0 0 1rem 0;font-size:1.3rem;font-weight:800}
.discord-card iframe{
  width:100%;height:420px;border:none;border-radius:16px;
  background:#0b0d12;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)
}
.discord-note{color:var(--muted);font-size:.9rem;margin-top:.75rem}

.login-card:hover{box-shadow:0 40px 120px rgba(0,255,198,.28),0 0 0 1px rgba(0,255,198,.25) inset}
.discord-card:hover{box-shadow:0 40px 120px rgba(79,70,229,.28),0 0 0 1px rgba(79,70,229,.25) inset}

/* TABELE */
.data-section{
  width:92%;max-width:1200px;margin:2.2rem auto 2.4rem;
  display:flex;flex-wrap:wrap;gap:1.6rem;justify-content:center;
}
.data-card{
  position:relative;overflow:hidden;background:var(--panel);
  border:1px solid var(--panel-strong);backdrop-filter:blur(20px);
  border-radius:var(--radius);box-shadow:var(--shadow);width:100%;max-width:460px;
  transition:transform var(--t), box-shadow var(--t), filter var(--t);
}
.data-card::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;
  background:radial-gradient(600px 220px at 50% -20%, rgba(0,255,198,.22), transparent 60%);
  opacity:0;transition:opacity var(--t);
}
.data-card:hover{transform:translateY(-6px) scale(1.015);box-shadow:0 30px 95px rgba(0,255,198,.22)}
.data-card:hover::after{opacity:1}
.data-card h2{
  margin:0;padding:.85rem 1rem;background:linear-gradient(90deg,var(--primary), var(--accent));
  color:#000;font-weight:900;letter-spacing:.4px;text-align:center;border-bottom:1px solid rgba(255,255,255,.1)
}
.data-card table{width:100%;border-collapse:collapse}
.data-card th,.data-card td{padding:.9rem 1rem;border-bottom:1px solid rgba(255,255,255,.1);text-align:left}
.data-card tbody tr:hover{
  background:rgba(255,255,255,.06);
  transform:scale(1.01);
  box-shadow:inset 2px 0 0 var(--primary);
  filter:saturate(1.05);
}

.btn-edit{
  display:block;margin:1rem auto 1.2rem;padding:.55rem 1.1rem;border-radius:999px;
  background:var(--primary);color:#000;text-decoration:none;font-weight:800;
  transition:transform var(--t), box-shadow var(--t);width:max-content
}
.btn-edit:hover{transform:translateY(-2px);box-shadow:0 12px 36px rgba(0,255,198,.45)}

.footer{
  width:92%;max-width:1200px;margin:1.6rem auto 2.6rem;
  text-align:center;color:var(--muted);font-size:.95rem
}
.footer b{color:var(--primary)}
.footer-handle{color:var(--primary);font-weight:800}

:focus-visible{outline:2px dashed var(--primary);outline-offset:4px}
button,a{-webkit-tap-highlight-color:transparent}

@keyframes fadeInUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.login-card,.discord-card,.data-card{animation:fadeInUp .9s ease forwards}


@media (max-width:600px){

  .discord-card iframe{
    height:340px;
  }

}
@media (max-width:520px){

  .brand__logo{
    width:64px;
    height:64px;
  }

  .brand__name{
    font-size:1rem;
  }

  .headline{
    font-size:1.6rem;
  }

  .card{
    padding:1.5rem;
  }

  .btn-login{
    padding:.9rem;
  }

}