:root{
  --bg: #05101a;
  --glass: rgba(255,255,255,.06);
  --glass-2: rgba(255,255,255,.08);
  --accent: #ff7a00;
  --accent-2: #02c2c2;
  --muted: #9fb0c8;
  --paper: #eaf2ff;
  --radius: 18px;
  --shadow: 0 18px 46px rgba(2,8,18,.6);
  --font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%; margin:0; font-family:var(--font); -webkit-font-smoothing:antialiased}
body{
  background: #000;
  color:var(--paper);
  display:grid; place-items:center;
  padding:24px;
  background-image: url('img/bg-1.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-font-smoothing:antialiased;
}

/* dark veil so text is readable */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0;
  background: linear-gradient(180deg, rgba(3,8,18,.6), rgba(3,8,18,.84) 60%);
}

/* main card */
.app{position:relative; z-index:2; width:100%; max-width:760px; margin:0 auto}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border-radius: var(--radius);
  padding:34px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(8px) saturate(120%);
  overflow:hidden;
  transform: translateY(12px);
  animation: cardIn .6s cubic-bezier(.16,.8,.32,1) both;
}

/* hero */
.hero{ text-align:center; margin-bottom:18px }
.hero h1{ font-size: clamp(20px, 3.8vw, 32px); margin:0 0 8px; color:var(--paper) }
.hero p{ margin:0; color:var(--muted); font-size:15px }

/* form */
.form{ display:flex; flex-direction:column; gap:18px }
.inputs{ display:grid; grid-template-columns: 1fr; gap:12px }

.field{ position:relative; display:block }
.input{
  width:100%;
  padding:14px 16px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  color:var(--paper);
  font-size:15px;
  outline:none;
  transition: box-shadow .18s, transform .08s, border-color .12s;
  -webkit-appearance:none;
}
.input:focus{ box-shadow: 0 6px 26px rgba(0,0,0,.45); border-color: rgba(255,122,0,.85); transform: translateY(-2px) }
.input--readonly{ opacity: .95; cursor:default; color: var(--paper); }

/* labels */
.label{
  display:block;
  position:absolute;
  left:16px; top:10px;
  font-size:12px;
  color:var(--muted);
  pointer-events:none;
  transform-origin:left top;
  transition: transform .14s ease, font-size .14s ease, color .14s;
}
.input:focus + .label,
.input:not(:placeholder-shown) + .label,
.input[readonly] + .label{
  transform: translateY(-20px) scale(.95);
  color: var(--accent);
  font-size:11px;
}

/* hint */
.hint{ display:block; margin-top:6px; color:var(--muted); font-size:12px }

/* button */
.actions{ display:flex; justify-content:center; margin-top:4px }
.btn{
  padding:14px 28px;
  border-radius:12px;
  border:0; cursor:pointer;
  background: linear-gradient(90deg,var(--accent), #ff9f3f);
  color:#08101a; font-weight:700;
  letter-spacing:.3px;
  box-shadow: 0 10px 30px rgba(255,122,0,.08);
  transition: transform .12s ease, box-shadow .12s;
}
.btn:active{ transform:translateY(1px) }
.btn[disabled]{ opacity:.6; cursor:not-allowed; transform:none }

/* success */
.success{ text-align:center; padding:18px }
.success h2{ margin:6px 0 8px; color:var(--accent-2, #02c2c2) }
.success p{ color:var(--muted) }

/* responsive */
@media (max-width:640px){
  .card{ padding:20px }
  .hero h1{ font-size:20px }
}

/* small fancy in */
@keyframes cardIn{
  from{ opacity:0; transform: translateY(26px) scale(.995) }
  to{ opacity:1; transform:none }
}

/* validation error */
.input.error{ border-color: #ff4b4b; box-shadow: 0 8px 30px rgba(255,0,0,.06) }