.account-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; margin: 0 0 2rem; text-align: left; }
.account-greeting { color: var(--text-secondary); font-size: 1rem; font-weight: 500; overflow-wrap: anywhere; }
.intro-container > .account-bar { margin-bottom: -1.5rem; }
.account-dashboard { padding: 0 2rem; margin: 0 auto 1.5rem; max-width: 1600px; }
.account-button { flex-shrink: 0; padding: .65rem 1.1rem; border: 1px solid var(--border-glass-active); border-radius: 999px; background: var(--bg-card); color: var(--text-primary); font: 500 .9rem var(--font-sans); cursor: pointer; transition: background .2s, border-color .2s; }
.account-button:hover { border-color: var(--accent-color); background: rgba(var(--accent-color-rgb), .12); }
.account-button:disabled { opacity: .6; cursor: wait; }
.account-dialog { margin: auto; width: min(440px, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); overflow-y: auto; padding: 2rem; color: var(--text-primary); background: #11111b; border: 1px solid var(--border-glass-active); border-radius: 24px; box-shadow: 0 24px 100px #0009; font-family: var(--font-sans); text-align: left; }
.account-dialog::backdrop { background: #030308b8; backdrop-filter: blur(8px); }
.account-dialog [hidden] { display: none !important; }
.account-dialog, .account-dialog * { cursor: auto !important; }
.account-dialog button { cursor: pointer !important; font-family: inherit; }
.account-dialog button:disabled { opacity: .6; cursor: wait; }
.account-dialog h2 { font-size: 1.8rem; padding-right: 1.5rem; margin: .3rem 0 .7rem; }
.account-close { position: absolute; top: .8rem; right: .8rem; width: 40px; height: 40px; border: 0; border-radius: 50%; color: var(--text-secondary); background: transparent; font-size: 1.7rem; }
.account-dialog p { line-height: 1.5; color: var(--text-secondary); overflow-wrap: anywhere; }
.account-dialog form { display: grid; gap: 1rem; margin-top: 1.5rem; }
.account-dialog label { display: grid; gap: .45rem; font-size: .95rem; }
.account-dialog input { width: 100%; min-width: 0; border: 1px solid var(--border-glass-active); border-radius: 10px; background: #080810; color: white; font: 400 1rem var(--font-sans); padding: .85rem 1rem; cursor: text !important; }
.account-dialog :focus-visible, .account-button:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 3px; }
.account-dialog small { color: var(--text-secondary); }
.account-submit { min-height: 46px; border: 1px solid var(--accent-color); border-radius: 10px; color: var(--text-primary); background: rgba(var(--accent-color-rgb), .2); font-weight: 600; font-size: 1rem; }
.account-links { display: grid; gap: .4rem; margin-top: 1rem; }
.account-link { min-height: 40px; border: 0; background: transparent; color: var(--text-secondary); font-size: .9rem; text-decoration: underline; text-underline-offset: 4px; }
.account-link:hover, .account-close:hover { color: white; }
#account-notice { min-height: 1.5rem; margin-top: 1rem; font-size: .9rem; }
#account-notice[data-error="true"] { color: #ffafbd; }
.account-dialog .account-local-note { font-size: .75rem; margin-top: 1rem; }
@media (max-width: 600px) { .account-dashboard { padding: 0 1rem; } .account-dialog { padding: 1.5rem; } .account-greeting { font-size: .9rem; } }