.account-page { min-height:100svh; display:flex; flex-direction:column; isolation:isolate; color:#f3f3f5; background:#050506; font-family:Inter,"Segoe UI",sans-serif; font-size:14px; }
.account-page [hidden] { display:none!important; }
.account-atmosphere { position:fixed; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at 50% 25%,#171719 0%,#080809 55%,#000 100%); }
.account-nav { width:calc(100% - 40px); max-width:790px; margin:20px auto 0; padding:9px 18px 9px 11px; display:flex; justify-content:space-between; align-items:center; border:1px solid #ffffff1f; border-radius:999px; background:#101012e6; backdrop-filter:blur(28px) saturate(1.4); -webkit-backdrop-filter:blur(28px) saturate(1.4); box-shadow:0 4px 20px #0000000f; }
.account-brand { display:flex; align-items:center; gap:9px; font:600 17px Inter,"Segoe UI",sans-serif; }
.account-brand img { border-radius:8px; }
.back-link { font-size:12px; font-weight:500; color:#b6b6bf; transition:opacity .2s; }
.back-link:hover { opacity:.65; }
.account-layout { flex:1; display:grid; place-content:center; width:100%; padding:36px 20px; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.account-card.glass { width:min(420px,calc(100vw - 40px)); padding:32px; border:1px solid #ffffff21; border-radius:18px; background:#121214f5; backdrop-filter:blur(32px) saturate(1.2); -webkit-backdrop-filter:blur(32px) saturate(1.2); box-shadow:0 24px 80px #0009,inset 0 1px 0 #ffffff05; }
.account-card-brand { display:flex; justify-content:center; margin-bottom:24px; }
.account-card-brand img { border-radius:9px; }
.account-card-brand span { color:#a4a4b0; font:500 10px var(--font-mono); letter-spacing:1.6px; }
.account-tabs { display:flex; gap:4px; padding:4px; background:#09090b; border:1px solid #ffffff12; border-radius:10px; margin-bottom:26px; }
.account-tabs button { flex:1; border:0; padding:10px 5px; border-radius:7px; font:500 13px Inter,"Segoe UI",sans-serif; background:transparent; color:#a3a3ae; cursor:pointer; transition:background .2s,color .2s; }
.account-tabs button[aria-selected=true] { background:#2c2c31; color:#fff; box-shadow:0 2px 6px #15213b0a; }
.account-card h2 { font:600 25px/1.3 Inter,"Segoe UI",sans-serif; margin:0 0 8px; letter-spacing:-.6px; text-align:center; }
.account-muted { color:#aeafba; font-size:14px; line-height:1.6; margin:0 0 26px; text-align:center; }
.account-card label { display:block; color:#d4d4dc; font-size:13px; font-weight:500; margin:20px 0 9px; }
.account-card input { width:100%; padding:13px 14px; color:#f4f4f6; background:#09090b; border:1px solid #ffffff26; border-radius:9px; font:15px Inter,"Segoe UI",sans-serif; outline:none; transition:border-color .2s,box-shadow .2s; }
.account-card input:focus { border-color:#9b9ba7; box-shadow:0 0 0 3px #ffffff0d; background:#0c0c0f; }
.account-card input::placeholder { color:#898995; }
.input-hint { margin:8px 0 0; color:#a1a1ae; font-size:12px; line-height:1.6; }
.account-primary { width:100%; display:flex; align-items:center; justify-content:center; gap:10px; border:1px solid #ededf1; border-radius:9px; background:#ededf1; color:#111114; padding:13px 16px; font:600 14px Inter,"Segoe UI",sans-serif; cursor:pointer; margin-top:25px; transition:background .2s,transform .2s; }
.account-primary:hover { background:#fff; transform:translateY(-1px); }
.account-primary:disabled { opacity:.5; cursor:wait; transform:none; }
.account-note { display:flex; align-items:center; justify-content:center; gap:7px; margin-top:25px; padding-top:21px; border-top:1px solid #ffffff12; color:#a1a1ae; font-size:10px; }
.account-note svg { flex-shrink:0; }
.status-pill { display:inline-block; border:1px solid #36845c33; background:#15271c; color:#a0dcb3; padding:5px 9px; border-radius:999px; font:9px var(--font-mono); letter-spacing:1px; margin-bottom:18px; }
.profile-details { margin:25px 0; border-top:1px solid #ffffff1a; }
.profile-details>div { display:grid; grid-template-columns:65px 1fr; gap:10px; padding:16px 0; border-bottom:1px solid #ffffff1a; font-size:12px; }
.profile-details dt { color:#a1a1ae; }
.profile-details dd { margin:0; overflow-wrap:anywhere; }
#link-panel h3 { font-size:14px; font-weight:600; margin-bottom:10px; }
#link-panel .account-primary { margin-top:0; }
#link-command { font:11px var(--font-mono); }
.code-actions { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:10px; }
.code-actions button { padding:7px 10px; background:#09090b; color:#d4d4dc; border:1px solid #ffffff26; border-radius:7px; font-size:11px; cursor:pointer; }
#code-expiry { color:#aeafba; font:10px var(--font-mono); }
.text-button { background:none; border:none; padding:0; color:#c1c1ce; font:11px var(--font-body); cursor:pointer; margin-top:20px; text-align:left; }
.text-button:hover { color:#fff; text-decoration:underline; }
.logout { display:block; border-top:1px solid #ffffff1a; padding-top:20px; width:100%; margin-top:26px; }
.linked-message { background:#15271c; border:1px solid #36845c33; border-radius:11px; padding:14px; font-size:12px; color:#a0dcb3; }
#account-message { border:1px solid #a03d3d33; color:#f2adad; background:#2c1818; padding:12px; border-radius:11px; font-size:12px; line-height:1.7; margin:20px 0 0; }
#account-message.success { color:#a0dcb3; border-color:#36845c33; background:#15271c; }
.account-footer { margin:0 auto; padding:0 20px 26px; color:#a4a4af; font:13px Inter,"Segoe UI",sans-serif; text-align:center; }
.account-footer a:hover { color:#fff; }
@media(max-width:480px) { .account-nav { margin-top:14px; } .back-link { font-size:11px; } .account-layout { padding:32px 20px; } .account-card.glass { padding:26px 24px; border-radius:16px; } .account-card h2 { font-size:24px; } }
@media(prefers-reduced-motion:reduce) { .account-page *,.account-page *::before,.account-page *::after { transition:none; } }
.link-steps { list-style:decimal; padding-left:18px; margin:0 0 20px; color:#b9b9c4; font-size:12px; line-height:1.8; }
.link-steps li+li { margin-top:7px; }
.link-steps strong { color:#efeff3; font-weight:500; }
.discord-open { display:inline-flex; margin-top:15px; color:#e0e0e9; font-size:12px; text-decoration:underline; text-underline-offset:4px; }
#link-command { font-size:12px; }

.ui-icon { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.back-link,.discord-open,#refresh-status { display:inline-flex; align-items:center; gap:8px; }
#profile-description { text-align:left; }
#profile-title { text-align:left; }
.account-card input:autofill { background:#09090b; color:#f4f4f6; }
.account-card input:-webkit-autofill,
.account-card input:-webkit-autofill:hover,
.account-card input:-webkit-autofill:focus { -webkit-text-fill-color:#f4f4f6; -webkit-box-shadow:0 0 0 1000px #09090b inset; caret-color:#f4f4f6; }
.discord-permissions { display:grid; gap:11px; margin:0 0 24px; padding:0; font-size:13px; color:#c1c1cb; }
.discord-permissions li { display:flex; gap:10px; align-items:baseline; }
.discord-permissions li::before { content:''; width:5px; height:5px; border-radius:50%; background:#8e8ea4; flex-shrink:0; }
#link-panel .account-muted { text-align:left; margin-bottom:18px; }
.photo-panel { margin-top:26px; padding-top:24px; border-top:1px solid #ffffff1a; }
.photo-panel h3 { font-size:14px; font-weight:600; margin-bottom:16px; }
.photo-summary { display:flex; gap:15px; align-items:center; }
.profile-portrait { width:64px; height:64px; border:1px solid #ffffff20; border-radius:14px; display:grid; place-items:center; overflow:hidden; background:#242428; flex-shrink:0; }
.profile-portrait span { font-size:20px; font-weight:600; }
.profile-portrait img { width:64px; height:64px; object-fit:cover; }
#photo-status { color:#b7b7c2; font-size:12px; line-height:1.7; }
.photo-policy { font-size:11px; color:#a9a9b5; line-height:1.7; margin-top:15px; }
#avatar-file { font-size:12px; }
#avatar-file::file-selector-button { padding:6px 9px; margin-right:9px; color:#dedee6; background:#242428; border:1px solid #ffffff20; border-radius:5px; }