.account-page{--line:#51445f;--muted:#c2b5d1;--card:#1a1330;--accent:#dfff60;--danger:#ff8f8f;padding-bottom:72px}
.account-page h1{margin:8px 0 4px}
.account-page h2{font-size:1.15rem;line-height:1.5;margin:0 0 8px}
.account-page p{margin:0 0 12px}
.account-page .lead{color:var(--muted)}
.account-page .back{display:inline-block;margin-bottom:8px}
.account-page [hidden]{display:none!important}
.account-page section{margin:0}
.account-page .card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;margin:16px 0}
.account-page .notice{border:1px solid #c9a94a;background:#2a2212;border-radius:12px;padding:16px;margin:16px 0}
.account-page .hint,.account-page .count{color:var(--muted);font-size:.875rem}
.account-page .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.account-page input:not([type=radio],[type=checkbox]),.account-page button,.account-dialog button,.account-transfer-dialog button{font:inherit;border:1px solid var(--accent,#dfff60);border-radius:8px;padding:10px 16px;max-width:100%}
.account-page input:not([type=radio],[type=checkbox]){display:block;width:min(100%,360px);box-sizing:border-box;background:#21192e;color:#f5efff;border-color:#897b9a;margin:4px 0 12px}
.account-page input::placeholder{color:#8a7f99}
.account-page .field-label{display:flex;justify-content:space-between;width:min(100%,360px);gap:8px}
.account-page button,.account-dialog button,.account-transfer-dialog button{background:#dfff60;color:#16151a;margin:4px 8px 4px 0;cursor:pointer;font-weight:600}
.account-page button.secondary,.account-dialog button.secondary,.account-transfer-dialog button.secondary{background:transparent;color:#dfff60}
.account-page button.text{background:none;border:0;color:#dfff60;padding:4px 0;text-decoration:underline;font-weight:400}
.account-page button.danger,.account-dialog button.danger{background:transparent;border-color:var(--danger,#ff8f8f);color:var(--danger,#ff8f8f)}
.account-page button:disabled,.account-dialog button:disabled{opacity:.5;cursor:default}
.account-page .identity-name{font-size:1.6rem;line-height:1.4;margin-bottom:8px;overflow-wrap:anywhere}
.account-page #accountTag{color:var(--muted);font-size:1rem;margin-left:4px}
.account-page .badge{display:inline-block;margin-right:16px;border-radius:999px;padding:2px 12px;font-size:.875rem;font-weight:600;background:#23402a;color:#b8f5c4;border:1px solid #4f8a5d}
.account-page .badge.warn{background:#3d2a10;color:#ffd58a;border-color:#a77b2c}
.account-page #renameForm{margin-top:12px}
.account-page #passkeySection.warn{border-color:#c9a94a;background:#2a2212}
.account-page .danger-zone{border-color:#7a3a46;background:#21121a;margin-top:40px}
.account-page .danger-zone h2{color:var(--danger)}
.account-page .skeleton{display:grid;gap:12px}
.account-page .skeleton span{display:block;height:20px;border-radius:6px;background:#2a2140;animation:account-pulse 1.2s ease-in-out infinite alternate}
.account-page .skeleton span:first-child{width:50%;height:32px}
@keyframes account-pulse{to{opacity:.4}}
@media (prefers-reduced-motion:reduce){.account-page .skeleton span{animation:none}}
.account-page .toast{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);box-sizing:border-box;margin:0;padding:12px 18px;border-radius:10px;background:#f5efff;color:#16151a;box-shadow:0 6px 24px #0008;overflow-wrap:anywhere;z-index:10}
.account-page .toast:empty{display:none}
.account-page nav{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:28px}
.account-page :focus-visible,.account-dialog :focus-visible,.account-transfer-dialog :focus-visible{outline:3px solid #dfff60;outline-offset:3px}
.account-dialog,.account-transfer-dialog{box-sizing:border-box;background:#170c28;color:#f5efff;border:1px solid #897b9a;border-radius:12px;width:calc(100% - 32px);max-width:560px;padding:20px}
.account-dialog::backdrop,.account-transfer-dialog::backdrop{background:#000b}
.account-dialog h2,.account-transfer-dialog h2{font-size:1.2rem;line-height:1.5;margin-top:0}
.account-dialog .check{display:flex;gap:10px;align-items:flex-start;margin:12px 0}
.account-dialog .check input{margin-top:6px;flex:none}
.account-dialog .actions,.account-transfer-dialog .actions{display:flex;flex-wrap:wrap;justify-content:flex-end;margin-top:16px}
.account-transfer-dialog fieldset{border:0;margin:16px 0;padding:0;min-width:0}
.account-transfer-dialog legend{font-weight:600;margin-bottom:8px}
.account-transfer-dialog .choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.account-transfer-dialog label{display:block;border:1px solid #897b9a;border-radius:10px;padding:12px;cursor:pointer;overflow-wrap:anywhere}
.account-transfer-dialog label:has(input:checked){border-color:#dfff60;background:#262013}
.account-transfer-dialog .choice-title{display:flex;gap:8px;align-items:center;font-weight:600}
.account-transfer-dialog .choice-title input{margin:0;flex:none}
.account-transfer-dialog dl{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;margin:8px 0 0;font-size:.9rem}
.account-transfer-dialog dt{color:#c2b5d1}
.account-transfer-dialog dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
