*{margin:0;padding:0;box-sizing:border-box;font-family:Inter,system-ui}

body{
  min-height:100vh;
  background:radial-gradient(circle at top,#0f172a,#020617 75%);
  color:#fff;
  overflow-x:hidden
}

/* ---------- BACKGROUND ---------- */
.bg{
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at 20% 30%,rgba(99,102,241,.25),transparent 55%),
    radial-gradient(circle at 80% 60%,rgba(34,211,238,.25),transparent 55%);
  animation:floatBg 18s ease-in-out infinite alternate;
  z-index:-1
}
@keyframes floatBg{
  from{filter:hue-rotate(0deg)}
  to{filter:hue-rotate(35deg)}
}

/* ---------- HEADER ---------- */
header{
  height:64px;
  padding:0 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(15,23,42,.6);
  backdrop-filter:blur(18px);
  box-shadow:0 8px 30px rgba(0,0,0,.6)
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800
}
.brand img{height:74px}

.nav{
  display:flex;
  gap:10px
}
.nav a{
  color:#fff;
  text-decoration:none;
  padding:8px 14px;
  border-radius:14px;
  font-size:.8rem;
  font-weight:600
}
.admin{background:linear-gradient(90deg,#6366f1,#22d3ee)}
.event-login{border:1px solid rgba(255,255,255,.4)}

/* ---------- MAIN ---------- */
.wrapper{
  min-height:calc(100vh - 64px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px
}

.card{
  width:100%;
  max-width:420px;
  background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.02));
  backdrop-filter:blur(24px);
  border-radius:26px;
  padding:28px;
  box-shadow:0 40px 120px rgba(0,0,0,.75)
}

.title{
  text-align:center;
  font-size:1.6rem;
  font-weight:800;
  background:linear-gradient(90deg,#38bdf8,#22d3ee,#a78bfa);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent
}

.subtitle{
  text-align:center;
  font-size:.9rem;
  opacity:.75;
  margin-top:6px
}

input,button{
  width:100%;
  padding:14px;
  margin-top:14px;
  border-radius:16px;
  border:none;
  font-size:15px
}

input{
  background:rgba(255,255,255,.08);
  color:#fff
}

button{
  background:linear-gradient(90deg,#6366f1,#22d3ee);
  color:#fff;
  font-weight:600;
  cursor:pointer
}
button.secondary{
  background:rgba(255,255,255,.12)
}

video{
  width:100%;
  border-radius:18px;
  margin-top:14px;
  display:none;
  background:#000
}

/* ---------- SHIELD LOADER ---------- */
.loader{
  position:fixed;
  inset:0;
  background:rgba(2,6,23,.88);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:2000;
  backdrop-filter:blur(6px);
}

.shield-core{
  width:160px;
  height:160px;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  animation:pulse 2s ease-in-out infinite;
}

.shield-ring{
  position:absolute;
  inset:0;
  animation:spin 1.4s linear infinite;
}

.shield-ring circle{
  animation:dash 1.6s ease-in-out infinite;
}

.shield-emoji{
  font-size:2.6rem;
  filter:drop-shadow(0 0 14px rgba(34,211,238,.9));
  z-index:1;
}

.shield-text{
  margin-top:10px;
  font-size:.85rem;
  opacity:.8;
}

.dots{animation:dots 1.4s infinite}

/* ---------- ANIMATIONS ---------- */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes dash{
  0%{stroke-dashoffset:314}
  50%{stroke-dashoffset:160}
  100%{stroke-dashoffset:314}
}
@keyframes pulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.06)}
}
@keyframes dots{
  0%{opacity:.2}
  50%{opacity:1}
  100%{opacity:.2}
}

/* ---------- FOOTER ---------- */
footer{
  text-align:center;
  font-size:.75rem;
  opacity:.6;
  padding:14px
}