:root{
  --bg:#070b12;
  --bg-2:#0b1220;
  --card:rgba(255,255,255,.035);
  --card-2:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --txt:#eaf2f5;
  --muted:#8fa3ad;
  --dim:#64757e;
  --acc:#10b981;
  --acc-2:#34d399;
  --acc-ink:#04231a;
  --danger:#f87171;
  --danger-bg:rgba(248,113,113,.10);
  --danger-line:rgba(248,113,113,.35);
  --r:16px;
}

*{box-sizing:border-box}

html,body{height:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans Georgian","Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.glow{
  position:fixed;
  inset:-20% -10% auto -10%;
  height:70vh;
  pointer-events:none;
  background:
    radial-gradient(50% 60% at 25% 0%, rgba(16,185,129,.20), transparent 70%),
    radial-gradient(45% 55% at 80% 5%, rgba(56,189,248,.14), transparent 70%);
  filter:blur(10px);
}

.wrap{
  position:relative;
  width:100%;
  max-width:760px;
  margin:0 auto;
  padding:40px 20px 56px;
}

/* ---------- header ---------- */
.head{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:26px;
}
.mark{
  flex:0 0 auto;
  width:52px;height:52px;
  display:grid;place-items:center;
  border-radius:14px;
  background:linear-gradient(160deg,var(--acc-2),var(--acc));
  color:var(--acc-ink);
  font-weight:800;
  letter-spacing:.5px;
  box-shadow:0 10px 30px -10px rgba(16,185,129,.7);
}
.head h1{
  margin:0;
  font-size:clamp(20px,4.4vw,26px);
  font-weight:750;
  letter-spacing:-.4px;
}
.sub{
  margin:4px 0 0;
  color:var(--muted);
  font-size:14px;
}

/* ---------- card ---------- */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:22px;
  padding:26px;
  backdrop-filter:blur(14px);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.95);
}

.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px 16px;
}
.span2{grid-column:span 2}

/* ---------- fields ---------- */
.field{display:flex;flex-direction:column;gap:7px;min-width:0}

label,.label{
  font-size:13px;
  font-weight:650;
  color:#cfe0e6;
  letter-spacing:.2px;
}

.req{color:var(--acc-2)}

input[type=text]{
  width:100%;
  padding:13px 14px;
  font:inherit;
  color:var(--txt);
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:12px;
  transition:border-color .16s, box-shadow .16s, background .16s;
}
input[type=text]::placeholder{color:var(--dim)}
input[type=text]:hover{border-color:var(--line-2)}
input[type=text]:focus{
  outline:none;
  background:rgba(255,255,255,.06);
  border-color:var(--acc);
  box-shadow:0 0 0 4px rgba(16,185,129,.15);
}
input.bad{
  border-color:var(--danger-line);
  box-shadow:0 0 0 4px rgba(248,113,113,.10);
}

.hint{margin:0;font-size:12px;color:var(--dim)}
.err{margin:0;font-size:12.5px;color:var(--danger);min-height:0}
.err:not(:empty){min-height:16px}

/* ---------- pills ---------- */
.pills{
  display:flex;
  gap:8px;
  padding:5px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:12px;
}
.pill{flex:1;position:relative;cursor:pointer}
.pill input{
  position:absolute;
  opacity:0;
  inset:0;
  cursor:pointer;
}
.pill span{
  display:block;
  text-align:center;
  padding:8px 10px;
  border-radius:9px;
  font-size:14px;
  font-weight:600;
  color:var(--muted);
  transition:background .16s,color .16s;
}
.pill:hover span{color:var(--txt)}
.pill input:checked + span{
  background:linear-gradient(160deg,var(--acc-2),var(--acc));
  color:var(--acc-ink);
}
.pill input:focus-visible + span{box-shadow:0 0 0 4px rgba(16,185,129,.20)}

/* ---------- trap ---------- */
.trap{
  position:absolute !important;
  left:-9999px;
  width:1px;height:1px;
  opacity:0;
  pointer-events:none;
}

/* ---------- actions ---------- */
.actions{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid var(--line);
}
.note{margin:0;font-size:12.5px;color:var(--dim)}

.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-width:170px;
  padding:14px 24px;
  font:inherit;
  font-weight:700;
  color:var(--acc-ink);
  background:linear-gradient(160deg,var(--acc-2),var(--acc));
  border:0;
  border-radius:13px;
  cursor:pointer;
  transition:transform .12s, box-shadow .16s, filter .16s;
  box-shadow:0 14px 34px -14px rgba(16,185,129,.8);
}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(16,185,129,.30)}
.btn[disabled]{opacity:.65;cursor:not-allowed;filter:none}

.btn.ghost{
  color:var(--txt);
  background:rgba(255,255,255,.06);
  border:1px solid var(--line-2);
  box-shadow:none;
}

.spinner{
  display:none;
  width:16px;height:16px;
  border:2px solid rgba(4,35,26,.35);
  border-top-color:var(--acc-ink);
  border-radius:50%;
  animation:spin .7s linear infinite;
}
.btn.loading .spinner{display:block}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- alert ---------- */
.alert{
  margin-bottom:20px;
  padding:14px 16px;
  font-size:14px;
  border-radius:13px;
  border:1px solid var(--danger-line);
  background:var(--danger-bg);
  color:#ffd9d9;
}

/* ---------- done ---------- */
.done{
  text-align:center;
  padding:40px 26px;
  animation:rise .35s ease-out;
}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.check{
  width:66px;height:66px;
  margin:0 auto 18px;
  display:grid;place-items:center;
  border-radius:50%;
  background:linear-gradient(160deg,var(--acc-2),var(--acc));
  color:var(--acc-ink);
  box-shadow:0 18px 44px -16px rgba(16,185,129,.85);
}
.check svg{width:32px;height:32px}
.done h2{margin:0 0 8px;font-size:22px}
.done-text{margin:0 0 24px;color:var(--muted);font-size:15px}

/* ---------- footer ---------- */
.foot{
  margin-top:26px;
  text-align:center;
  font-size:12.5px;
  color:var(--dim);
}

/* ---------- mobile ---------- */
@media (max-width:640px){
  .wrap{padding:26px 16px 44px}
  .card{padding:20px;border-radius:18px}
  .grid{grid-template-columns:1fr;gap:16px}
  .span2{grid-column:auto}
  .head{gap:13px}
  .mark{width:46px;height:46px;border-radius:12px}
  .btn{width:100%}
  .actions{flex-direction:column;align-items:stretch}
  .note{text-align:center}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}