/* ====== Root & Reset ====== */
:root{
  --bg1:#0f1226; --bg2:#161a36;
  --card:#12152b99; /* glass */
  --text:#e7e9ff; --muted:#b7b9d6; --accent:#7c5cff; --accent2:#26ffe6;
  --ring: 0 0 0 3px color-mix(in oklab, var(--accent) 35%, transparent);
  --radius:22px; --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box;}
html,body{height:100%}
body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Inter", Arial, sans-serif;
  color:var(--text); background: radial-gradient(1200px 600px at 10% 10%, #1b1f4a, transparent 60%) ,
                     radial-gradient(1200px 600px at 90% 20%, #222a6b, transparent 60%) ,
                     linear-gradient(160deg,var(--bg1),var(--bg2));
  overflow-x:hidden;
}
@media (prefers-color-scheme: light){
  :root{ --bg1:#fbfbff; --bg2:#f0f3ff; --card:#ffffffcc; --text:#0f1237; --muted:#4c4f79; }
  body{ background: radial-gradient(900px 500px at 10% 10%, #eaf0ff, transparent 60%),
                 radial-gradient(900px 500px at 90% 20%, #eef2ff, transparent 60%),
                 linear-gradient(160deg,var(--bg1),var(--bg2)); }
}

/* ====== Animated Aurora ====== */
.aurora{
  position:fixed; inset:-20vmax; pointer-events:none; filter: blur(60px) saturate(160%);
  background:
    radial-gradient(30vmax 20vmax at 15% 20%, color-mix(in oklab, var(--accent) 40%, transparent), transparent 60%),
    radial-gradient(25vmax 18vmax at 85% 25%, color-mix(in oklab, var(--accent2) 40%, transparent), transparent 60%),
    radial-gradient(35vmax 22vmax at 50% 90%, color-mix(in oklab, #ff6aa3 35%, transparent), transparent 60%);
  animation: float 14s ease-in-out infinite alternate;
  opacity:.55;
}
@keyframes float{
  0%{ transform: translate3d(-2%, -1%, 0) rotate(0.5deg); }
  100%{ transform: translate3d(2%, 1%, 0) rotate(-0.5deg); }
}

/* ====== Container ====== */
.wrap{
  min-height:100%;
  display:grid; place-items:center; padding:32px;
}
.card{
  width:min(640px, 92vw);
  background: var(--card);
  backdrop-filter: blur(14px) saturate(140%);
  border:1px solid color-mix(in oklab, var(--accent) 15%, #ffffff22);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:28px;
  position:relative;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(120deg, color-mix(in oklab, var(--accent) 25%, transparent), transparent 35%,
                                       color-mix(in oklab, var(--accent2) 25%, transparent) 65%, transparent 85%);
  opacity:.25; pointer-events:none; mask: linear-gradient(#0006, transparent 70%);
}

/* ====== Heading ====== */
.h-title{
  display:flex; align-items:center; gap:12px; margin:0 0 18px 0;
  font-size:clamp(20px, 2.6vw, 28px); font-weight:800; letter-spacing:.3px;
}
.badge{
  font-size:12px; padding:6px 10px; border-radius:999px; font-weight:700; letter-spacing:.4px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  color:#0a0b14; box-shadow: 0 6px 20px color-mix(in oklab, var(--accent) 30%, transparent);
}

/* ====== Form ====== */
.form{
  display:grid; gap:16px; margin-top:6px;
}
.field{
  position:relative; background: #ffffff08; border:1px solid #ffffff22; border-radius:16px; padding:14px 14px 8px;
  transition:.25s border-color, .25s background;
}
.field:focus-within{ border-color: color-mix(in oklab, var(--accent) 35%, #fff0); background:#ffffff12; box-shadow: var(--ring); }
.label{
  position:absolute; top:10px; left:14px; font-size:12px; color:var(--muted); letter-spacing:.2px;
}
.input{
  width:100%; background:transparent; border:0; outline:none; color:var(--text);
  font-size:16px; margin-top:12px;
}
.input::placeholder{ color:#98a1c280; }

/* ====== Actions ====== */
.actions{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:6px; }
.btn{
  appearance:none; border:0; cursor:pointer; padding:12px 18px; border-radius:16px; font-weight:800;
  letter-spacing:.3px; transform: translateZ(0);
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  color:#0b0f1a; box-shadow: 0 10px 24px color-mix(in oklab, var(--accent) 35%, transparent);
  transition: transform .08s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:hover{ filter:saturate(130%); box-shadow: 0 16px 30px color-mix(in oklab, var(--accent) 45%, transparent); }
.btn:active{ transform: translateY(1px) scale(.98); }

/* Secondary button/link */
.link{
  background:#ffffff12; color:var(--text); border:1px solid #ffffff2e;
  text-decoration:none; display:inline-block;
}

/* ====== Result & Alert ====== */
.result{
  margin-top:16px; padding:14px; border-radius:16px; background:#1f2246cc; border:1px solid #ffffff24;
  box-shadow: inset 0 0 0 1px #ffffff12;
}
.ok{ border-color: color-mix(in oklab, var(--accent2) 35%, transparent); }
.err{ border-color: color-mix(in oklab, #ff6a6a 45%, transparent); }

/* ====== Footer ====== */
.foot{
  margin-top:18px; color:var(--muted); font-size:12px; text-align:center;
}