:root { font-family: Arimo,Arial,sans-serif; color: #f3f6ff; background: #050b1a; line-height: 1.5; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(ellipse at 48% 0%,#173d7b 0%,#0a1b3a 35%,#050b1a 75%); }
a { color: inherit; text-decoration: none; }
header { height: 68px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; max-width: 960px; margin: auto; padding: 0 24px; font-size: 14px; font-weight: 700; letter-spacing: .09em; }
header b { color: #82b3ff; }
header a { justify-self: start; }
main { width: min(100% - 32px,720px); margin: 46px auto 0; padding-bottom: 100px; }
.heading { text-align: center; }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .16em; color: #88b7ff; }
h1 { font-size: clamp(31px,5vw,48px); line-height: 1.08; margin: 12px 0 14px; }
h2 { font-size: 21px; margin: 0 0 18px; }
.heading p { max-width: 500px; margin: 0 auto 27px; color: #b5c4df; }
.panel p { color: #b5c4df; }
.status { padding: 13px 17px; border-radius: 10px; background: rgba(14,37,79,.68); border: 1px solid rgba(127,174,240,.22); font-size: 13px; text-align: center; margin: 16px 0; color: #cce0ff; }
.status:empty { display: none; }
.panel { background: rgba(5,13,30,.82); border: 1px solid rgba(161,198,255,.22); border-radius: 16px; padding: 30px; margin-top: 20px; box-shadow: 0 22px 70px rgba(0,0,0,.17); }
[hidden] { display: none!important; }
#signin h2 { text-align: center; }
label { font-size: 12px; letter-spacing: .06em; font-weight: 700; display: block; margin: 14px 0 9px; }
.row { display: flex; gap: 10px; }
input { width: 100%; min-width: 0; background: #0b1930; border: 1px solid #49618b; color: white; padding: 14px 16px; border-radius: 9px; font: inherit; }
button,.button-link { font: 700 12px Arimo,Arial,sans-serif; letter-spacing: .05em; cursor: pointer; border: 1px solid #3671df; border-radius: 9px; background: #003a9c; color: white; padding: 14px 20px; white-space: nowrap; }
button:hover,.button-link:hover { background: #1155bb; }
button:disabled { opacity: .55; cursor: not-allowed; }
small { display: block; color: #a4b3d0; margin-top: 9px; }
.account-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.account-heading h2 { margin: 5px 0 8px; font-size: clamp(26px,5vw,36px); line-height: 1.1; overflow-wrap: anywhere; }
.account-badge { display: inline-block; border: 1px solid #6795d7; border-radius: 999px; padding: 4px 10px; color: #c9e0ff; background: rgba(25,65,120,.35); font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.ghost { background: transparent; border-color: #506b9b; }
.ghost:hover { background: #143262; }
.danger { border-color: #815571; color: #ffdbe3; }
#alert-state { margin-top: 26px; font-weight: 700; color: #c8e5ff; }
.account-actions { display: flex; gap: 12px; justify-content: flex-start; align-items: center; flex-wrap: wrap; margin-top: 22px; }
.account-actions:last-of-type { justify-content: space-between; }
.button-link { display: inline-flex; align-items: center; justify-content: center; }
.alert-list-panel { border-top: 1px solid rgba(161,198,255,.22); margin-top: 26px; padding-top: 24px; }
.alert-list-panel h3 { margin: 0 0 8px; font-size: 17px; letter-spacing: .04em; }
.alert-list-panel p { margin: 0 0 18px; }
.alert-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid rgba(161,198,255,.18); border-radius: 10px; padding: 13px 16px; margin: 9px 0; background: rgba(15,38,78,.42); }
.alert-row strong { font-size: 15px; overflow-wrap: anywhere; }
.alert-row button { flex: none; }
@media(max-width:460px) { .alert-row { flex-direction: column; align-items: stretch; } }
@media(max-width:580px) { main { margin-top: 26px; } .panel { padding: 20px; } .row { flex-direction: column; } .row button { width: 100%; } .account-heading { align-items: flex-start; } .account-heading button { font-size: 10px; padding: 10px; } }