:root{
  --primary:#3A2357;
  --primary-dark:#241238;
  --primary-deeper:#160A24;
  --violet:#7C5CFC;
  --amber:#F5A73B;
  --amber-deep:#E08A1E;
  --bg:#FAF8FC;
  --bg-alt:#F1ECF9;
  --card:#FFFFFF;
  --ink:#1C1229;
  --ink-soft:#6E6480;
  --line:#E7E0F2;
  --radius:20px;
  --shadow-soft:0 20px 60px -20px rgba(58,35,87,0.25);
  --shadow-card:0 2px 16px rgba(58,35,87,0.08);
  --danger:#C23636;
  --success:#1F8A4C;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family:'Inter',sans-serif;
  background:var(--bg); color:var(--ink);
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:40px 20px;
}
h1,h2,h3{font-family:'Space Grotesk',sans-serif;}
a{color:inherit;}

.auth-card{
  width:100%; max-width:640px;
  background:var(--card); border-radius:20px; box-shadow:var(--shadow-soft);
  border:1px solid var(--line); padding:44px 48px;
}
.auth-card-narrow{max-width:420px;}
.auth-logo{display:flex; align-items:center; gap:10px; font-weight:700; font-size:17px; margin-bottom:32px;}
.logo-mark{width:32px; height:32px; border-radius:9px; background:linear-gradient(135deg,var(--primary),var(--violet)); display:flex; align-items:center; justify-content:center; color:#fff; font-family:'Space Grotesk'; font-weight:700; font-size:14px;}

.auth-card h1{font-size:22px; margin-bottom:6px;}
.auth-card .sub{font-size:13.5px; color:var(--ink-soft); margin-bottom:28px;}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px;}
.field label{font-size:13px; font-weight:600; color:var(--ink-soft);}
.field label .opt{font-weight:400; color:var(--ink-soft); font-size:11.5px;}
.field input, .field select{
  padding:11px 14px; border-radius:10px; border:1px solid var(--line); background:var(--bg);
  color:var(--ink); font-size:14px; width:100%; outline:none; transition:border-color .15s;
}
.field input:focus, .field select:focus{border-color:var(--violet);}
.field.error input, .field.error select{border-color:var(--danger);}
.field .err-msg{font-size:12px; color:var(--danger); display:none;}
.field.error .err-msg{display:block;}

.single-plan-note{display:flex; align-items:center; justify-content:space-between; gap:16px; border:1.5px solid var(--violet); background:var(--bg-alt); border-radius:12px; padding:14px 16px; margin-bottom:20px;}

.login-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:22px;}
.remember-label{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink-soft); cursor:pointer;}
.remember-label input{width:auto;}
.forgot-link{font-size:13.5px; color:var(--violet); font-weight:600;}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:13px 20px; border-radius:12px; font-weight:600; font-size:15px; cursor:pointer; border:none; transition:transform .15s, box-shadow .15s;}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--violet)); color:#fff; box-shadow:0 8px 20px rgba(88,52,150,0.3);}
.btn-primary:hover{transform:translateY(-1px);}
.btn-primary:disabled{opacity:.6; cursor:not-allowed; transform:none;}
.btn-ghost{background:transparent; border:1px solid var(--line); color:var(--ink);}
.foot-note{text-align:center; font-size:13.5px; color:var(--ink-soft); margin-top:20px;}
.foot-note a{color:var(--violet); font-weight:600;}

.alert{padding:12px 16px; border-radius:10px; font-size:13.5px; margin-bottom:16px; display:none;}
.alert.show{display:block;}
.alert-error{background:#FCE9E9; color:var(--danger); border:1px solid #F3C6C6;}
.alert-success{background:#E4F6EA; color:var(--success); border:1px solid #BEE7CC;}

/* ---------- Checkout page ---------- */
.checkout-card{width:100%; max-width:520px; background:var(--card); border-radius:24px; box-shadow:var(--shadow-soft); border:1px solid var(--line); padding:40px;}
.checkout-card .logo{display:flex; align-items:center; gap:10px; font-weight:700; font-size:17px; margin-bottom:28px;}
.summary-row{display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--line); font-size:14px;}
.summary-row.total{font-weight:700; font-size:16px; border-bottom:none; padding-top:16px;}
.summary-row .muted{color:var(--ink-soft);}
.secure-note{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-soft); margin:18px 0; justify-content:center;}
.test-card-hint{background:var(--bg-alt); border:1px solid var(--line); border-radius:12px; padding:14px 16px; font-size:12.5px; color:var(--ink-soft); margin-top:20px; line-height:1.6;}
.test-card-hint b{color:var(--ink);}

/* ---------- Success page ---------- */
.success-card{width:100%; max-width:460px; background:var(--card); border-radius:24px; box-shadow:var(--shadow-soft); border:1px solid var(--line); padding:44px; text-align:center;}
.success-icon{width:64px; height:64px; border-radius:50%; background:#E4F6EA; color:var(--success); font-size:30px; display:flex; align-items:center; justify-content:center; margin:0 auto 20px;}
.success-icon.pending{background:var(--bg-alt); color:var(--violet);}
.success-icon.failed{background:#FCE9E9; color:var(--danger);}

@media (max-width:640px){
  .auth-card{padding:32px 24px;}
  .grid2{grid-template-columns:1fr;}
}