/* Account pages share the workspace's navy surfaces and periwinkle accents. */
.account-shell { padding-top: clamp(32px, 7vh, 76px); padding-bottom: 40px; }
.account-card { display: grid; grid-template-columns: 1fr; width: min(100%, 460px); margin: 0 auto; background: #111936; border: 1px solid #b0b8ef17; border-radius: 22px; box-shadow: 0 28px 80px #02061540; overflow: hidden; }
.account-entry { grid-column: 1; grid-row: 1; padding: 46px 44px 38px; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.account-entry h1 { font-size: 30px; line-height: 1.14; font-weight: 550; letter-spacing: -1.6px; }
.account-entry h1 > span { color: #a3a5ff; }
.account-providers { display: grid; width: 100%; gap: 12px; margin-top: 31px; }
.account-provider { display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 0 17px; border: 1px solid #929dcc35; border-radius: 10px; background: #18203e; box-shadow: inset 0 1px 0 #fff04; color: #e9ebff; font-size: 13px; font-weight: 500; transition: background .15s, border-color .15s; }
.account-provider:hover { background: #222b4c; border-color: #a4a6f786; }
.account-provider:active { background: #1c2443; }
.provider-icon { display: block; flex: 0 0 22px; width: 22px; height: 22px; object-fit: contain; }
.provider-arrow { margin-left: auto; color: #9fa6d1; font-size: 17px; transition: transform .15s; }
.account-provider:hover .provider-arrow { transform: translateX(3px); }
.account-new { margin-top: 17px; width: 100%; text-align: center; font-size: 10px; line-height: 1.8; color: #919cbe; }
.account-alert { display: flex; align-items: flex-start; gap: 10px; width: 100%; margin-top: 20px; padding: 13px; border: 1px solid #f4bb8633; border-radius: 9px; color: #ebc7a6; background: #eab98009; font-size: 12px; line-height: 1.7; }
.account-alert > span { flex: 0 0 18px; width: 18px; height: 18px; border: 1px solid #e4bc8799; border-radius: 50%; text-align: center; font-size: 11px; line-height: 17px; }
.account-alert + .account-providers { margin-top: 16px; }
.account-providers .account-alert { margin-top: 0; }
.account-identity { margin-top: 28px; margin-bottom: 24px; display: flex; gap: 13px; align-items: center; width: 100%; padding: 15px; border: 1px solid #aab0df1c; border-radius: 11px; background: #0c142d; }
.account-avatar { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: #7978e523; color: #b4b3fa; font-size: 17px; flex-shrink: 0; }
.account-identity > div { display: grid; gap: 5px; min-width: 0; }
.account-identity strong { font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.account-identity > div > span { font-size: 10px; color: #919dbc; }
.account-identity > svg { width: 19px; height: 19px; margin-left: auto; flex-shrink: 0; fill: none; stroke: #76ccb2; stroke-width: 1.8; }
.account-primary { width: 100%; padding: 16px; border: 1px solid #9294ef60; border-radius: 10px; background: #686bbd; color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.account-primary:hover { background: #787bcc; }
.account-signout { align-self: center; margin-top: 18px; }
.account-signout button { border: 0; background: none; padding: 7px 15px; color: #a2adcb; font-size: 12px; }
.account-signout button:hover { color: #eee; }
.account-admin { margin-top: 28px; color: #b0b1ee; font-size: 12px; }
@media(max-width:650px){.account-shell{padding:24px 16px}.account-entry{padding:28px 24px}}
@media(prefers-reduced-motion:reduce){.account-provider,.provider-arrow{transition:none}}