:root { color-scheme: light; }
body { min-width:320px; min-height:100vh; margin:0; color:var(--atonal-ink); background:var(--atonal-paper); font-family:var(--atonal-mono); }
button,input { font:inherit; }
[hidden] { display:none !important; }
.account-shell { width:min(1120px,calc(100% - 40px)); margin:0 auto; padding:52px 0 80px; }
.account-heading { max-width:820px; margin-bottom:36px; }
.account-heading p,.state-label { margin:0 0 10px; color:var(--atonal-blue); font-size:12px; font-weight:700; letter-spacing:.14em; }
.account-heading h1 { margin:0; color:var(--atonal-navy); font-family:var(--atonal-display); font-size:clamp(56px,7vw,96px); font-weight:400; line-height:.9; letter-spacing:-.025em; }
.account-heading > span { display:block; margin-top:20px; color:var(--atonal-muted); font-size:16px; line-height:1.6; }
.account-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--atonal-line); border-left:1px solid var(--atonal-line); background:var(--atonal-white); }
.account-panel { min-height:340px; padding:30px; border-right:1px solid var(--atonal-line); border-bottom:1px solid var(--atonal-line); }
.panel-label { display:flex; align-items:center; gap:10px; margin-bottom:34px; color:var(--atonal-muted); font-size:11px; letter-spacing:.12em; }
.panel-label span { color:var(--atonal-blue); }
.panel-label b { font-weight:700; }
form { display:grid; gap:9px; }
label { margin-top:8px; color:var(--atonal-muted); font-size:11px; font-weight:700; letter-spacing:.08em; }
input { width:100%; height:44px; padding:0 12px; border:1px solid var(--atonal-line); outline:0; color:var(--atonal-navy); background:var(--atonal-paper); }
input:focus { border-color:var(--atonal-blue); box-shadow:0 0 0 3px rgba(0,24,240,.08); }
.primary-action,.secondary-action { display:inline-flex; min-height:42px; align-items:center; justify-content:center; padding:0 15px; border:1px solid var(--atonal-navy); cursor:pointer; text-decoration:none; font-size:12px; font-weight:700; letter-spacing:.06em; }
.primary-action { margin-top:14px; color:white; background:var(--atonal-blue); border-color:var(--atonal-blue); }
.secondary-action { color:var(--atonal-navy); background:transparent; }
.identity-panel h2,.api-panel h2 { margin:0 0 14px; color:var(--atonal-navy); font-family:var(--atonal-display); font-size:36px; font-weight:400; letter-spacing:.01em; overflow-wrap:anywhere; }
.state-copy { max-width:440px; margin:0 0 28px; color:var(--atonal-muted); font-size:13px; line-height:1.65; }
.credit-total { display:block; margin:0 0 10px; color:var(--atonal-navy); font-family:var(--atonal-display); font-size:96px; font-weight:400; line-height:.9; }
.payment-note { padding:13px; border:1px solid var(--atonal-line); color:var(--atonal-muted); background:var(--atonal-soft); font-size:12px; line-height:1.5; }
.wallet-control { display:grid; gap:9px; margin-top:12px; }
.wallet-control span { color:var(--atonal-muted); font-size:11px; line-height:1.5; overflow-wrap:anywhere; }
.form-message { margin:8px 0 0; color:#bb2133; font-size:12px; line-height:1.5; }
.registration-notice { margin:14px 0 0; padding:12px 13px; border-left:3px solid var(--atonal-blue); color:var(--atonal-muted); background:var(--atonal-soft); font-size:12px; line-height:1.55; }

/* Shared ATONAL typography scale. */
.account-heading p,.state-label,.panel-label,label,.primary-action,.secondary-action,
.payment-note,.wallet-control span,.form-message,.registration-notice { font-size:var(--atonal-type-xs); }
.state-copy { font-size:var(--atonal-type-base); }
@media (max-width:760px) { .account-shell { padding-top:36px; }.account-grid { grid-template-columns:1fr; }.account-panel { min-height:300px; }.account-heading h1 { font-size:58px; } }
@media (max-width:520px) { .account-shell { width:calc(100% - 28px); }.account-panel { padding:22px; }.credit-total { font-size:72px; } }