/* =====================================================
   LOGIN PAGE — Ultra-Premium Dark Theme
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --navy:#0a0e1a;
  --navy-light:#111827;
  --teal:#00d4aa;
  --teal-dim:rgba(0,212,170,.15);
  --gold:#c9a84c;
  --white:#f0f4f8;
  --glass:rgba(255,255,255,.06);
  --glass-border:rgba(255,255,255,.1);
}

html,body{height:100%;overflow:hidden}

body{
  font-family:'Inter',sans-serif;
  background:var(--navy);
  display:flex;align-items:center;justify-content:center;
  position:relative;
}

/* Animated gradient background */
.login-bg{
  position:fixed;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 80%,rgba(0,212,170,.08),transparent),
    radial-gradient(ellipse 60% 50% at 80% 20%,rgba(201,168,76,.06),transparent),
    linear-gradient(160deg,#0a0e1a 0%,#0d1528 40%,#0a0e1a 100%);
}

/* Energy wave animation */
.login-bg::before,.login-bg::after{
  content:'';position:absolute;border-radius:50%;
  animation:energyPulse 8s ease-in-out infinite;
}
.login-bg::before{
  width:600px;height:600px;
  top:-200px;right:-100px;
  background:radial-gradient(circle,rgba(0,212,170,.05),transparent 70%);
}
.login-bg::after{
  width:800px;height:800px;
  bottom:-300px;left:-200px;
  background:radial-gradient(circle,rgba(201,168,76,.04),transparent 70%);
  animation-delay:-4s;
}

@keyframes energyPulse{
  0%,100%{transform:scale(1);opacity:.6}
  50%{transform:scale(1.15);opacity:1}
}

/* Grid lines */
.grid-overlay{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);
  background-size:80px 80px;
}

/* Floating particles */
.particle{
  position:fixed;border-radius:50%;z-index:1;pointer-events:none;
  background:var(--teal);opacity:0;
  animation:particleFloat linear infinite;
}
.particle:nth-child(1){width:3px;height:3px;left:10%;animation-duration:12s;animation-delay:0s}
.particle:nth-child(2){width:2px;height:2px;left:30%;animation-duration:15s;animation-delay:-3s}
.particle:nth-child(3){width:4px;height:4px;left:50%;animation-duration:10s;animation-delay:-6s}
.particle:nth-child(4){width:2px;height:2px;left:70%;animation-duration:14s;animation-delay:-2s}
.particle:nth-child(5){width:3px;height:3px;left:90%;animation-duration:11s;animation-delay:-5s}
.particle:nth-child(6){width:2px;height:2px;left:20%;animation-duration:13s;animation-delay:-8s}

@keyframes particleFloat{
  0%{transform:translateY(100vh);opacity:0}
  10%{opacity:.6}
  90%{opacity:.6}
  100%{transform:translateY(-10vh);opacity:0}
}

/* Login container */
.login-container{
  position:relative;z-index:10;
  width:100%;max-width:460px;padding:20px;
}

/* Glassmorphism card */
.login-card{
  background:var(--glass);
  backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);
  border:1px solid var(--glass-border);
  border-radius:24px;
  padding:48px 40px;
  text-align:center;
  position:relative;overflow:hidden;
  box-shadow:
    0 0 80px rgba(0,212,170,.04),
    0 32px 64px rgba(0,0,0,.4);
  transition:transform .4s ease,box-shadow .4s ease;
}
.login-card:hover{
  box-shadow:
    0 0 100px rgba(0,212,170,.06),
    0 40px 80px rgba(0,0,0,.5);
}

/* Top accent line */
.login-card::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:60px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--teal),var(--gold));
}

/* UAE Emblem / Logo area */
.login-emblem{
  width:72px;height:72px;margin:0 auto 24px;
  border-radius:50%;
  background:linear-gradient(135deg,rgba(0,212,170,.15),rgba(201,168,76,.15));
  border:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;
  font-size:28px;color:var(--teal);
}

.login-title{
  font-family:'Playfair Display',serif;
  font-size:1.6rem;font-weight:600;
  color:var(--white);margin-bottom:6px;
  letter-spacing:.5px;
}

.login-subtitle{
  font-size:.82rem;color:rgba(240,244,248,.45);
  margin-bottom:36px;letter-spacing:.3px;
  line-height:1.5;
}

/* Input group */
.input-group{
  position:relative;margin-bottom:24px;text-align:left;
}
.input-group label{
  display:block;font-size:.7rem;font-weight:600;
  text-transform:uppercase;letter-spacing:1.5px;
  color:rgba(240,244,248,.4);margin-bottom:10px;
}
.input-wrapper{
  position:relative;
}
.input-wrapper svg{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:rgba(240,244,248,.3);
  transition:color .3s;
}
.input-wrapper input{
  width:100%;padding:14px 48px 14px 48px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;color:var(--white);
  font-family:'Inter',sans-serif;font-size:.92rem;
  transition:all .3s ease;outline:none;
}
.input-wrapper input::placeholder{color:rgba(240,244,248,.25)}
.input-wrapper input:focus{
  border-color:var(--teal);
  background:rgba(0,212,170,.04);
  box-shadow:0 0 20px rgba(0,212,170,.08);
}
.input-wrapper input:focus ~ svg,
.input-wrapper input:focus + svg{color:var(--teal)}

/* Toggle visibility */
.toggle-pass{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;
  color:rgba(240,244,248,.3);transition:color .3s;
  display:flex;align-items:center;
}
.toggle-pass:hover{color:var(--teal)}
.toggle-pass svg{width:18px;height:18px}

/* Submit button */
.login-btn{
  width:100%;padding:15px;border:none;border-radius:14px;
  background:linear-gradient(135deg,var(--teal),#00b894);
  color:#0a0e1a;font-family:'Inter',sans-serif;
  font-size:.92rem;font-weight:600;
  cursor:pointer;position:relative;overflow:hidden;
  transition:all .3s ease;letter-spacing:.5px;
}
.login-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 30px rgba(0,212,170,.3);
}
.login-btn:active{transform:translateY(0)}

.login-btn::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
  transform:translateX(-100%);
  transition:transform .6s;
}
.login-btn:hover::after{transform:translateX(100%)}

/* Error state */
.login-card.shake{
  animation:microShake .5s ease;
}
.login-card.shake .input-wrapper input{
  border-color:#ff4757;
  box-shadow:0 0 20px rgba(255,71,87,.15);
}
@keyframes microShake{
  0%,100%{transform:translateX(0)}
  15%{transform:translateX(-6px)}
  30%{transform:translateX(5px)}
  45%{transform:translateX(-4px)}
  60%{transform:translateX(3px)}
  75%{transform:translateX(-2px)}
}

.error-msg{
  font-size:.78rem;color:#ff4757;
  margin-top:12px;opacity:0;
  transition:opacity .3s;
}
.error-msg.show{opacity:1}

/* Cinematic transition overlay */
.cinematic-overlay{
  position:fixed;inset:0;z-index:1000;
  background:#0a0e1a;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .5s ease;
}
.cinematic-overlay.active{opacity:1;pointer-events:all}

.cinematic-overlay .loader{
  display:flex;flex-direction:column;align-items:center;gap:20px;
}
.cinematic-overlay .loader-bar{
  width:200px;height:2px;background:rgba(255,255,255,.1);
  border-radius:2px;overflow:hidden;
}
.cinematic-overlay .loader-fill{
  height:100%;width:0;background:var(--teal);border-radius:2px;
  transition:width 1.2s ease;
}
.cinematic-overlay.active .loader-fill{width:100%}
.cinematic-overlay .loader-text{
  font-size:.75rem;color:rgba(240,244,248,.4);
  letter-spacing:3px;text-transform:uppercase;
}

/* Footer on login */
.login-footer{
  text-align:center;margin-top:24px;
  font-size:.7rem;color:rgba(240,244,248,.2);
  letter-spacing:.5px;
}
.login-footer a{color:rgba(0,212,170,.5);text-decoration:none}
.login-footer a:hover{color:var(--teal)}

/* Responsive */
@media(max-width:520px){
  .login-card{padding:36px 24px;border-radius:20px}
  .login-title{font-size:1.35rem}
}