html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;      
  overflow-y: hidden;      
  touch-action: manipulation;
}

.logo {
  width: clamp(84px, 9vw, 120px); 
  aspect-ratio: 1 / 1;            
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(124,107,255,0.16), rgba(0,197,255,0.08));
  border: 1.8px solid rgba(255,255,255,0.06);
  box-shadow: 0 6px 30px rgba(124,107,255,0.08), 0 0 18px rgba(0,197,255,0.02) inset;
  backdrop-filter: blur(6px);
  z-index: 6;
  transform: translateZ(0);
}

.logo img {
  width: 100%;
  height: 100%;
  object-fit: contain; 
  border-radius: inherit;
}

* {
  box-sizing: border-box;
}


 
:root{
  
  --bg-900: #0b0c10;           
  --bg-800: #0f1116;
  --glass-veil: rgba(255,255,255,0.06);
  --glass-veil-2: rgba(255,255,255,0.03);

  --accent-a: #7C6BFF;        
  --accent-b: #00F5A0;        
  --accent-c: #00C2FF;        
  --accent-d: #FF6B6B;        
  --neon: rgba(0,197,255,0.9);

  --glass-border: rgba(255,255,255,0.12);
  --glass-border-2: rgba(124,107,255,0.18);

  --text-primary: rgba(255,255,255,0.96);
  --muted: rgba(255,255,255,0.62);

  --card-radius: 18px;
  --ease-smooth: cubic-bezier(.2,.9,.2,1);
  --shadow-1: 0 10px 30px rgba(4,6,12,0.7);
  --shadow-2: 0 4px 18px rgba(12,14,20,0.6);
}


*{box-sizing:border-box;margin:0;padding:0}
html,body{height:70%}
body{
  font-family: "Poppins", Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg, var(--bg-900) 0%, var(--bg-800) 100%);
  color: var(--text-primary);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  position:relative;
}


body::before{
  content:"";
  position: absolute;
  inset: -20%;
  background: radial-gradient(600px 400px at 10% 20%, rgba(124,107,255,0.08), transparent 10%),
              radial-gradient(500px 350px at 90% 80%, rgba(0,197,255,0.06), transparent 12%),
              linear-gradient(180deg, transparent, rgba(0,0,0,0.25));
  filter: blur(30px);
  transform: rotate(4deg) scale(1.05);
  z-index:0;
  animation: bgDrift 18s linear infinite;
  pointer-events:none;
}
@keyframes bgDrift{
  0%{transform: rotate(4deg) translateY(0) scale(1.05)}
  50%{transform: rotate(-3deg) translateY(6%) scale(1.06)}
  100%{transform: rotate(4deg) translateY(0) scale(1.05)}
}


.app-shell {
  position: relative;
  width: 100%;
  max-width: 920px;
  padding: clamp(28px, 4vw, 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 3vw, 34px);
  z-index: 2;
  pointer-events: auto;
}

.glass-container {
  position: relative;
  width: 100%;
  max-width: 820px;
  padding: clamp(28px, 3.6vw, 56px);
  border-radius: var(--card-radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)),
              linear-gradient(135deg, rgba(124,107,255,0.02), rgba(0,197,255,0.02));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  overflow: visible;
  transform-origin: center;
  transition: transform 650ms var(--ease-smooth), box-shadow 450ms var(--ease-smooth);
  z-index: 3;
}

.glass-container::before,
.glass-container::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:1;
}
.glass-container::before{
  
  padding:1px;
  background: linear-gradient(120deg, rgba(124,107,255,0.06), rgba(0,197,255,0.04));
  mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}
.glass-container::after{
  /* neon glow halo */
  filter: blur(28px) saturate(180%);
  background: radial-gradient(400px 160px at 8% 10%, rgba(124,107,255,0.12), transparent 10%),
              radial-gradient(360px 160px at 92% 90%, rgba(0,197,255,0.08), transparent 8%);
  opacity: .9;
}


.glass-container:hover{
  transform: translateY(-6px) rotateX(1deg);
  box-shadow: 0 30px 60px rgba(2,4,10,0.7);
}


.header{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  z-index:5;
  position:relative;
}

.logo{
  width: clamp(84px, 9vw, 120px);
  height: same-as-width;
  display:grid;
  place-items:center;
  border-radius:999px;
  background: linear-gradient(135deg, rgba(124,107,255,0.16), rgba(0,197,255,0.08));
  border: 1.8px solid rgba(255,255,255,0.06);
  box-shadow: 0 6px 30px rgba(124,107,255,0.08), 0 0 18px rgba(0,197,255,0.02) inset;
  backdrop-filter: blur(6px);
  z-index:6;
  transform: translateZ(0);
}


.h-title{
  font-size: clamp(18px, 2.2vw, 34px);
  letter-spacing: 2px;
  color: var(--text-primary);
  text-transform: uppercase;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:8px;
  text-shadow: 0 6px 22px rgba(4,6,12,0.6);
}


.h-title span{
  display:inline-block;
  position:relative;
}
.h-title span::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-10px;
  width:70%;
  height:6px;
  background: linear-gradient(90deg, rgba(124,107,255,0.45), rgba(0,197,255,0.35));
  filter: blur(8px);
  border-radius:999px;
  opacity:.9;
}


.form-card{
  margin-top: 4px;
  width:100%;
  max-width:640px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius: 12px;
  padding: clamp(18px, 2.6vw, 28px);
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: var(--shadow-2);
  position:relative;
  z-index:4;
}


.divider{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--muted);
  font-size:14px;
  margin: 18px 0;
}
.divider::before, .divider::after{
  content:"";
  height:1px;
  flex:1;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
}


.form-field{
  position:relative;
  margin-bottom:18px;
}
.input {
  width:100%;
  padding:14px 16px;
  border-radius:10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.06);
  color:var(--text-primary);
  outline:none;
  font-size:16px;
  transition: box-shadow 280ms var(--ease-smooth), transform 220ms var(--ease-smooth), border-color 220ms var(--ease-smooth);
  box-shadow: 0 2px 10px rgba(2,4,10,0.45) inset;
  backdrop-filter: blur(6px);
}

.input:autofill {
    background-color: transparent;
}

.input-label{
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
  font-size:14px;
  color:var(--muted);
  transition: transform 220ms var(--ease-smooth), font-size 220ms var(--ease-smooth), top 220ms var(--ease-smooth), color 220ms var(--ease-smooth);
  background: transparent;
  padding: 0 6px;
}


.input:focus{
  border-color: var(--glass-border-2);
  box-shadow: 0 6px 28px rgba(0,0,0,0.55), 0 0 18px rgba(124,107,255,0.06);
  transform: translateY(-2px);
}
.input:focus + .input-label,
.input[data-has-value="true"] + .input-label{
  top:2px;
  transform: none;
  font-size:12px;
  color:var(--accent-b);
}


.input:focus{
  box-shadow:
    0 6px 28px rgba(0,0,0,0.56),
    0 0 10px rgba(0,197,255,0.06),
    0 0 30px rgba(124,107,255,0.04);
}


.input-icon{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  opacity:0.9;
  pointer-events:none;
}


.controls{
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:center;
  margin-top:4px;
  flex-wrap:wrap;
}

.btn {
  --btn-h: 48px;
  width: 100%;
  max-width: 600px;
  height: var(--btn-h);
  border-radius: 12px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: #021014;
  background: linear-gradient(135deg, var(--accent-b), var(--accent-c));
  border: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
  transition: transform 240ms var(--ease-smooth), box-shadow 240ms var(--ease-smooth), filter 240ms var(--ease-smooth);
  box-shadow: 0 8px 26px rgba(0,197,255,0.12), 0 2px 6px rgba(2,4,10,0.4);
  position: relative;
  overflow: visible;
}



.btn::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  mix-blend-mode: overlay;
  opacity:0;
  transform:translateX(-14%);
  transition: opacity 480ms var(--ease-smooth), transform 480ms var(--ease-smooth);
  pointer-events:none;
}
.btn:hover::after{ opacity:1; transform:translateX(0) }


.btn:hover{
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 22px 50px rgba(0,197,255,0.12), 0 10px 24px rgba(2,4,10,0.6);
}
 
.btn:active{
  transform: translateY(0) scale(.995);
  filter: saturate(.98);
}

.btn-ghost{
  background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));
  color:var(--text-primary);
  border: 1px dashed rgba(255,255,255,0.06);
  min-width:200px;
  box-shadow: 0 4px 18px rgba(2,4,10,0.45);
}
.btn-ghost:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(12,14,20,0.6), 0 0 18px rgba(124,107,255,0.04);
}


.badge{
  display:inline-grid;
  place-items:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  background: linear-gradient(90deg, rgba(255,107,107,0.14), rgba(124,107,255,0.12));
  color:var(--text-primary);
  box-shadow: 0 6px 18px rgba(255,107,107,0.04);
  transition: transform 200ms var(--ease-smooth);
}
.badge.pulse{
  animation: pulse 2.6s infinite;
}
@keyframes pulse{
  0%{ transform:scale(1); opacity:1 }
  50%{ transform:scale(1.06); opacity:.86 }
  100%{ transform:scale(1); opacity:1 }
}


.note{
  font-size:13px;
  color:var(--muted);
  text-align:center;
  margin-top:6px;
  letter-spacing:0.2px;
}


:focus{
  outline: 3px solid rgba(124,107,255,0.18);
  outline-offset: 3px;
}


@media (max-width:900px){
  .glass-container{ padding: clamp(18px, 4vw, 36px) }
  .app-shell{ padding: clamp(18px, 3vw, 34px) }
  .form-card{ padding: 16px }
  .btn{ min-width: 180px }
  .logo{ width: 84px }
}


@media (max-width:480px){
  .glass-container{ border-radius:14px; padding:18px; width:94vw }
  .h-title{ font-size:18px }
  .form-card{ padding:12px }
  .controls{ flex-direction:column; gap:10px }
  .btn{ width:100%; min-width:unset; height:48px }
  .input{ padding:12px 14px; font-size:15px }
  .input-label{ left:14px }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

.glass-container {
  max-width: 100vw;
  overflow: hidden;
}

body {
  overscroll-behavior-x: none; 
}