:root {
  color-scheme: light dark;
  --page: #0a1020;
  --surface: #111a2c;
  --surface-raised: #172238;
  --border: #273650;
  --text: #edf2fb;
  --muted: #9baac1;
  --blue: #78a9ff;
  --blue-strong: #3274e8;
  --green: #63d6a0;
  --amber: #f1c875;
  --red: #ff9292;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(ellipse at 15% 0%, rgba(48, 92, 169, .22), transparent 36rem),
    var(--page);
  color: var(--text);
  font: 15px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.shell { width: min(100% - 32px, 760px); margin: 0 auto; padding: 64px 0 36px; }
.page-header { display: flex; align-items: center; gap: 18px; margin-bottom: 30px; }
.brand-mark { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid #4267a6; border-radius: 16px; background: linear-gradient(145deg, #245fc2, #17386e); color: white; font-size: 23px; font-weight: 800; box-shadow: 0 8px 28px #07152d; }
.eyebrow, .step { margin: 0 0 4px; color: var(--blue); font-size: 11px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 4px; font-size: clamp(24px, 4vw, 32px); line-height: 1.2; letter-spacing: -.035em; }
h2 { margin: 0; font-size: 18px; letter-spacing: -.02em; }
.intro { margin: 0; color: var(--muted); }
.card { margin: 16px 0; padding: 24px; border: 1px solid var(--border); border-radius: 18px; background: linear-gradient(145deg, rgba(21, 32, 52, .97), rgba(15, 24, 40, .98)); box-shadow: 0 14px 35px rgba(0, 0, 0, .18); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.lock-icon { color: var(--green); font-size: 13px; text-shadow: 0 0 12px rgba(99, 214, 160, .5); }
label { display: block; margin: 16px 0 7px; color: #dce5f4; font-size: 13px; font-weight: 650; }
input { width: 100%; min-height: 46px; padding: 11px 13px; border: 1px solid #354663; border-radius: 10px; outline: none; background: #0c1423; color: var(--text); font: inherit; transition: border-color .15s, box-shadow .15s; }
input::placeholder { color: #697993; }
input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(120, 169, 255, .15); }
.input-row { display: flex; gap: 10px; }
.input-row input { flex: 1; min-width: 0; }
.button { min-height: 42px; padding: 9px 14px; border: 1px solid transparent; border-radius: 9px; color: var(--text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: transform .12s, background .12s, border-color .12s; }
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button:disabled { opacity: .52; cursor: not-allowed; }
.button-primary { background: var(--blue-strong); color: white; box-shadow: 0 5px 15px rgba(50, 116, 232, .2); }
.button-primary:hover:not(:disabled) { background: #4184f5; }
.button-secondary { border-color: #354663; background: var(--surface-raised); }
.button-secondary:hover:not(:disabled) { border-color: #59739b; }
.button-danger { border-color: #623e4b; background: #281923; color: #ffb7b7; }
.button-danger:hover:not(:disabled) { border-color: #a65f69; }
.hint { margin: 7px 0 0; color: var(--muted); font-size: 12px; }
.badge { flex: 0 0 auto; padding: 5px 9px; border: 1px solid transparent; border-radius: 999px; font-size: 11px; font-weight: 700; }
.badge-muted { border-color: #354663; background: #1a2639; color: #b6c3d7; }
.badge-success { border-color: #265c4b; background: #123426; color: #8be4b9; }
.notice { margin-top: 20px; padding: 12px 14px; border: 1px solid transparent; border-radius: 10px; font-size: 12px; }
.notice-warning { border-color: #705d35; background: rgba(84, 66, 29, .25); color: #f4d99e; }
.notice-info { border-color: #29496f; background: rgba(26, 58, 99, .25); color: #bad3f7; }
.notice code { color: #ffe5a8; font-size: 11px; }
.actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.status-message { min-height: 22px; margin: 13px 0 0; color: var(--muted); font-size: 13px; }
.status-message[data-kind="success"] { color: var(--green); }
.status-message[data-kind="error"] { color: var(--red); }
footer { padding: 10px 4px; color: #7d8ca3; font-size: 12px; text-align: center; }

@media (max-width: 560px) {
  .shell { padding-top: 34px; }
  .card { padding: 19px; }
  .page-header { align-items: flex-start; }
  .input-row { flex-direction: column; }
  .input-row .button { width: 100%; }
  .actions .button { flex: 1 1 100%; }
}