@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');
:root{--bg:#14133a;--panel:#1d1c4c;--line:#423d87;--text:#fbf6ea;--muted:#a9a7cf;--gold:#f1d68a;--green:#8fe08a;--red:#ff9e8a}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:radial-gradient(ellipse 90% 60% at 50% -5%,#3b3a85 0,#25244f 38%,#14133a 78%) fixed;color:var(--text);font-family:'DM Sans',-apple-system,system-ui,Arial,sans-serif;min-height:100vh}
h1,h2,h3,p{margin:0}h1,h2,h3{font-family:Manrope,-apple-system,Arial,sans-serif;letter-spacing:-.03em}
a{color:var(--green)}button,input,select{font:inherit;color:inherit}[hidden]{display:none!important}
.wrap{max-width:980px;margin:0 auto;padding:18px 18px 60px}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #36326f;padding-bottom:12px}
.top img{height:46px;display:block}
.top .who{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px}
.bell{position:relative;border:1px solid #4a4498;background:#2a275c;border-radius:12px;min-height:44px;min-width:44px;font-size:18px;cursor:pointer}
.bell b{position:absolute;top:-6px;right:-6px;background:var(--red);color:#3a1208;border-radius:10px;font:800 12px/20px Manrope,Arial;min-width:20px;padding:0 5px}
.hero{padding:42px 0 22px}.hero h1{font-size:clamp(30px,6vw,48px);line-height:1.1}.hero p{color:var(--muted);max-width:620px;line-height:1.6;margin-top:12px;font-size:17px}
.grid{display:grid;gap:16px;margin-top:20px}@media(min-width:760px){.grid.two{grid-template-columns:1fr 1fr}.grid.three{grid-template-columns:repeat(3,1fr)}}
.card{border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,#26255d,#1e1d4f);padding:20px}
.card h2{font-size:20px}.card h3{font-size:17px}.card p{color:var(--muted);line-height:1.55;margin-top:6px;font-size:14px}
.label{font-size:10px;font-weight:800;letter-spacing:.22em;color:var(--green);text-transform:uppercase}
.field{display:block;margin-top:12px}.field span{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;color:#b5b3d6;text-transform:uppercase;margin-bottom:6px}
input,select{width:100%;background:#17163f;border:1px solid #4a4498;border-radius:12px;min-height:46px;padding:0 14px;font-size:16px}
.btn{border:1px solid #4a4498;background:#2a275c;border-radius:12px;min-height:44px;padding:0 16px;font-weight:700;cursor:pointer}
.btn:hover{background:#353271}.btn.primary{background:var(--green);border-color:var(--green);color:#0d3310}.btn.primary:hover{background:#a8eca4}
.btn.sm{min-height:38px;padding:0 12px;font-size:14px}.btn.danger{color:var(--red);border-color:#6b3c58}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
.item{display:flex;gap:12px;align-items:center;justify-content:space-between;border:1px solid #423d87;border-radius:14px;background:#221f55;padding:12px 14px;margin-top:10px;flex-wrap:wrap}
.item b{font:700 16px Manrope,Arial}.item small{display:block;color:var(--muted);margin-top:2px}
.badge{display:inline-block;border:1px solid #4a4498;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700;color:var(--muted)}
.badge.ok{border-color:#3fb596;color:#7fe0c3;background:#143f34}.badge.wait{border-color:#e8c26a;color:var(--gold);background:#3a3015}.badge.no{border-color:var(--red);color:var(--red);background:#4a2232}
.code{font:800 26px Manrope,Arial;letter-spacing:.18em;color:var(--gold)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--gold);color:#2a2000;font-weight:700;border-radius:12px;padding:12px 18px;max-width:90vw;text-align:center;z-index:20}
.err{border:1px solid #7a3c4e;background:#3a1b2b;color:#ffc9c0;border-radius:12px;padding:10px 14px;font-size:14px;margin-top:12px}
table{width:100%;border-collapse:collapse;margin-top:10px}td,th{text-align:left;padding:9px 6px;border-bottom:1px solid #33316f;font-size:14px}th{color:var(--muted);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-top:18px}.tabs button{border:1px solid transparent;background:none;border-radius:12px;padding:0 14px;min-height:44px;color:var(--muted);font-weight:700;cursor:pointer}.tabs button.on{background:#2f2c65;border-color:#4a4498;color:#fbe7ae}
.muted{color:var(--muted)}.sp{height:8px}
/* choosing the kind of account */
.pick{display:block;width:100%;text-align:left;cursor:pointer;border:2px solid var(--line);border-radius:18px;background:linear-gradient(180deg,#26255d,#1e1d4f);padding:18px;color:var(--text)}
.pick:hover{border-color:#6a64c8}.pick.on{border-color:var(--green);box-shadow:0 0 0 3px #8fe08a26}
.pick .label{color:var(--gold)}.pick h3{margin-top:6px;font-size:19px}.pick p{color:var(--muted);line-height:1.5;margin-top:6px;font-size:14px}
.pick .tick{float:right;font-weight:800;color:var(--green);display:none}.pick.on .tick{display:inline}