:root{
  --bg:#0a0f1a;
  --fg:#e8eefc;
  --muted:#a7b1c7;
  --primary:#2f7af8;
  --primary-600:#1e60d6;
  --card:#0e1524;
  --surface:#121a2b;
  --focus:#94b4ff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:var(--fg);
  background:radial-gradient(1200px 800px at 70% -10%, #1b2a4a 0%, transparent 60%), var(--bg);
}
.page{min-height:100%; display:flex; flex-direction:column}
.brand{display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid #1f2a40; background:linear-gradient(180deg,#0d1526,#0b1120)}
.brand__left{display:flex; align-items:center; gap:10px}
.brand__logo{width:44px; height:28px; border-radius:4px; display:grid; place-items:center; background:linear-gradient(180deg,#1a6ee9,#114aa8); color:#fff; font-weight:800; letter-spacing:.06em; box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.brand__logo span{font-size:.85rem}
.brand__name{font-weight:800; letter-spacing:.2px}
.brand__status{font-size:.875rem; color:var(--muted)}

.alert{max-width:760px; margin:56px auto; padding:24px 24px 28px; background:var(--surface); border:1px solid #1d2740; border-radius:16px; box-shadow:0 8px 30px rgba(0,0,0,.35)}
.alert h1{margin:0 0 10px; font-size:1.6rem}
.alert p{margin:0 0 18px; color:var(--muted)}

.btn{appearance:none; border:none; border-radius:12px; padding:12px 16px; font-weight:600; cursor:pointer; transition:transform .04s ease, background .2s ease, color .2s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--primary); color:white}
.btn-primary:hover{background:var(--primary-600)}
.btn-block{width:100%}
.btn-link{background:transparent; color:var(--muted); text-decoration:underline; padding:10px 8px}

.legal{margin:24px auto 40px; max-width:760px; color:var(--muted)}

/* Modal */
.modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(3,9,20,.6); backdrop-filter:blur(6px);}
.modal[aria-hidden="false"]{display:flex}
.modal__dialog{position:relative; width:min(980px,100%); background:linear-gradient(180deg,#0e1426,#0b1222); border:1px solid #1c2947; border-radius:18px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.55)}
.modal__close{position:absolute; right:12px; top:8px; border:none; background:transparent; color:var(--muted); font-size:28px; line-height:1; cursor:pointer}

.wizard{display:grid; grid-template-columns:1.1fr 1fr; gap:0}
.wizard__left{padding:28px; background:radial-gradient(800px 600px at 10% -20%, #15305c 0%, transparent 60%), var(--card)}
.wizard__right{padding:28px}
.wizard__title{margin:0 0 6px; font-size:1.25rem}
.wizard__subtitle{margin:0 0 16px; color:var(--muted)}

/* 3D Card */
.card-3d{perspective:1200px; height:260px}
.card-3d__inner{position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.card-3d.is-back .card-3d__inner{transform:rotateY(180deg)}
.card-3d__face{position:absolute; inset:0; backface-visibility:hidden; border-radius:18px; border:1px solid #2c3f6b; padding:22px; background:
  radial-gradient(1200px 400px at -10% 0%, rgba(255,255,255,.08), transparent 50%),
  linear-gradient(135deg, #0e1f3e, #143057 55%, #0d1f3a);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), 0 12px 40px rgba(0,0,0,.4);
}
.card-3d__front .chip{width:44px; height:34px; border-radius:6px; background:linear-gradient(180deg,#c9d1db,#9aa3ad); margin:18px 0}
.card__brand{font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:#a9c8ff}
.card__number{font-family:Consolas,Monaco,Menlo,monospace; font-size:1.28rem; letter-spacing:.22em; margin:16px 0 10px}
.card__number .masked{color:#bcd0ff88}
.card__number .last{font-weight:700}
.card__name{font-size:.95rem; letter-spacing:.1em; color:#cfe0ff}

/* AMEX badge */
.amex-badge{position:absolute; right:18px; bottom:18px; width:74px; height:44px; border-radius:6px; background:linear-gradient(180deg,#1a6ee9,#114aa8); display:grid; place-items:center; font-weight:800; letter-spacing:.04em; text-align:center; font-size:.62rem; color:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.amex-badge.--small{right:12px; bottom:12px; width:54px; height:34px; font-size:.7rem}

.card-3d__back{transform:rotateY(180deg)}
.card-3d__back .stripe{height:48px; background:#0b0f18; margin:10px -22px 18px}
.card-3d__back .sign-line{height:44px; background:#fff; color:#111; display:flex; align-items:center; padding:0 12px; border-radius:4px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.card-3d__back .sign-line .label{font-size:.8rem}
.card-3d__back .note{margin-top:14px; color:#c7d5ffb0; font-size:.85rem}

/* inputs */
.code-inputs{display:flex; gap:12px; margin:10px 0 10px}
.code-inputs input{width:56px; height:56px; border-radius:12px; border:1px solid #2a3b63; background:#0c1428; color:var(--fg); text-align:center; font-size:1.25rem; box-shadow:0 1px 0 rgba(255,255,255,.02)}
.code-inputs input:focus{outline:2px solid var(--focus); border-color:transparent}
.hint{color:var(--muted); margin:8px 0 16px}

/* Loader */
.loader{position:absolute; inset:0; display:none; align-items:center; justify-content:center; background:rgba(8,12,24,.6)}
.loader[aria-hidden="false"]{display:flex}
.spinner{width:48px; height:48px; border:4px solid #27406f; border-top-color:#8fb2ff; border-radius:50%; animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Success */
.success{position:absolute; inset:0; display:none; align-items:center; justify-content:center; flex-direction:column; gap:10px; text-align:center; background:linear-gradient(180deg,rgba(8,12,24,.55),rgba(8,12,24,.55))}
.success[aria-hidden="false"]{display:flex}
.success h2{margin:6px 0 4px}
.success p{margin:0 0 10px; color:var(--muted)}

/* Responsive */
@media (max-width: 900px){
  .wizard{grid-template-columns:1fr}
  .wizard__left{order:-1; height:260px}
}
@media (max-width: 420px){
  .code-inputs{gap:8px}
  .code-inputs input{width:48px; height:52px}
}