:root{
  --bg: #0b1220;
  --card: rgba(255,255,255,.08);
  --card2: rgba(255,255,255,.06);
  --text: #e5e7eb;
  --muted: rgba(229,231,235,.72);
  --border: rgba(148,163,184,.22);
  --g1: rgba(37,99,235,.95);
  --g2: rgba(56,189,248,.92);
}
*{box-sizing:border-box}
body{margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; background: radial-gradient(1200px 800px at 20% 10%, rgba(37,99,235,.25), transparent 65%), radial-gradient(1200px 800px at 80% 40%, rgba(56,189,248,.18), transparent 65%), var(--bg); color: var(--text)}
.wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px}
.card{width:min(520px, 100%); padding:22px; border-radius:22px; border:1px solid var(--border); background: linear-gradient(180deg, var(--card), var(--card2)); box-shadow: 0 40px 120px rgba(0,0,0,.35)}
.brand{font-weight:900; letter-spacing:.2px; opacity:.95}
h1{margin:10px 0 6px; font-size:24px}
.muted{color: var(--muted); font-size:13px; line-height:1.45}
.row{display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid rgba(148,163,184,.12)}
.k{color: var(--muted)}
.v{font-weight:800}
.hint{margin-top:14px; color: rgba(229,231,235,.7); font-size:12px}
.btn{margin-top:12px; width:100%; height:44px; border-radius:16px; border:1px solid rgba(37,99,235,.22); background: linear-gradient(135deg, var(--g1), var(--g2)); color:white; font-weight:900; cursor:pointer}
.btn:disabled{opacity:.65; cursor:not-allowed}
.btn--ghost{background: transparent; border:1px solid var(--border); color: var(--text)}
.term{display:flex; gap:14px; flex-wrap:wrap; justify-content:flex-end}
.term__opt{display:flex; gap:8px; align-items:center; font-weight:800; color: rgba(229,231,235,.9)}
.term__opt input{accent-color: rgb(56,189,248)}