/* Reserve header space while browser-only account data is resolved. Anonymous HTML remains cacheable. */
html.site-account-js [data-site-account]:not([data-account-ready]) { visibility: hidden; }
:is(#app,#smsLanding,body.tool-page) [data-site-account] { display: flex; align-items: center; gap: 12px; }
:is(#app,#smsLanding,body.tool-page) [data-site-account] .site-account-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
:is(#app,#smsLanding,body.tool-page) [data-site-account] .site-account-heading strong { overflow-wrap: anywhere; }
:is(#app,#smsLanding,body.tool-page) [data-site-account] .site-account-dashboard { flex-shrink: 0; white-space: nowrap; min-height: 44px; box-sizing: border-box; }
:is(#app,#smsLanding,body.tool-page) [data-site-account] { --account-ink: #263548; --account-muted: #627186; --account-surface: #fff; --account-soft: #f3f6fc; --account-line: #dce4f1; --account-blue: #285ce2; position: relative; min-width: 168px; min-height: 44px; justify-content: flex-end; }
:is(#app,#smsLanding,body.tool-page) [data-site-account] .site-account-menu { position: relative; margin: 0; padding: 0; border: 0; font-size: 14px; }
:is(#app,#smsLanding,body.tool-page) [data-site-account] .site-account-trigger { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 5px 10px 5px 6px; list-style: none; cursor: pointer; border: 1px solid var(--account-line); border-radius: 8px; background: var(--account-surface); color: var(--account-ink); transition: border-color .16s,background .16s; }
:is(#app,#smsLanding,body.tool-page) [data-site-account] .site-account-trigger::-webkit-details-marker { display: none; }
:is(#app,#smsLanding,body.tool-page) [data-site-account] .site-account-trigger:hover { background: var(--account-soft); border-color: #b8c9ed; }
:is(#app,#smsLanding,body.tool-page) [data-site-account] .site-account-avatar { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 6px; background: #eaf0ff; }
:is(#app,#smsLanding,body.tool-page) [data-site-account] .site-account-avatar::before { content: ''; display: block; width: 16px; height: 16px; background: #285ce2; -webkit-mask: url('/account-user.svg') center/contain no-repeat; mask: url('/account-user.svg') center/contain no-repeat; }
:is(#app,#smsLanding,body.tool-page) [data-site-account] .site-account-copy { display: flex; flex-direction: column; text-align: left; gap: 2px; line-height: 1.25; }
:is(#app,#smsLanding,body.tool-page) [data-site-account] .site-account-label { font-size: 10px; color: var(--account-muted); font-weight: 400; }
:is(#app,#smsLanding,body.tool-page) [data-site-account] .site-account-name { font-size: 13px; color: var(--account-ink); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
:is(#app,#smsLanding,body.tool-page) [data-site-account] .site-account-chevron { width: 6px; height: 6px; margin: 0 2px 3px 4px; border-right: 1.5px solid var(--account-muted); border-bottom: 1.5px solid var(--account-muted); transform: rotate(45deg); }
:is(#app,#smsLanding,body.tool-page) [data-site-account] details[open] .site-account-chevron { transform: rotate(225deg); margin-top: 5px; }
:is(#app,#smsLanding,body.tool-page) [data-site-account] .site-account-panel { position: absolute; right: 0; top: calc(100% + 10px); width: 236px; padding: 8px; border: 1px solid var(--account-line); border-radius: 10px; background: var(--account-surface); box-shadow: 0 12px 32px #20385b1a; color: var(--account-ink); z-index: 1; }
:is(#app,#smsLanding,body.tool-page) [data-site-account] .site-account-heading { display: flex; flex-direction: column; gap: 6px; padding: 12px; line-height: 1.5; }
:is(#app,#smsLanding,body.tool-page) [data-site-account] .site-account-heading > span { font-size: 12px; color: var(--account-muted); }
:is(#app,#smsLanding,body.tool-page) [data-site-account] .site-account-heading strong { font-size: 15px; font-weight: 600; }
:is(#app,#smsLanding,body.tool-page) [data-site-account] .site-account-dashboard { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; background: var(--account-soft); border-radius: 6px; color: var(--account-blue); font-size: 14px; font-weight: 500; text-decoration: none; }
:is(#app,#smsLanding,body.tool-page) [data-site-account] .site-account-dashboard:hover { background: #eaf0ff; color: #1748bf; }
:is(#app,#smsLanding,body.tool-page) [data-site-account] .site-account-logout { display: block; width: 100%; min-height: 40px; margin: 8px 0 0; padding: 10px 12px; border: 0; border-top: 1px solid var(--account-line); border-radius: 0; background: transparent; color: var(--account-muted); font: inherit; font-size: 13px; text-align: left; cursor: pointer; box-shadow: none; }
:is(#app,#smsLanding,body.tool-page) [data-site-account] .site-account-logout:hover { color: #b53535; background: #fff5f5; }
:is(#app,#smsLanding,body.tool-page) [data-site-account] :is(a,summary,button):focus-visible { outline: 2px solid var(--account-blue); outline-offset: 3px; }
@media(max-width:760px) {
  :is(#app,#smsLanding,body.tool-page) [data-site-account] { gap: 8px; }
  :is(#app,#smsLanding,body.tool-page) [data-site-account] .site-account-name { max-width: 108px; }
  :is(#app,#smsLanding,body.tool-page) [data-site-account] .site-account-dashboard { min-height: 36px; padding: 10px 8px; font-size: 12px; }
  :is(#app,#smsLanding,body.tool-page) [data-site-account] { min-height: 36px; min-width: 148px; }
  :is(#app,#smsLanding,body.tool-page) [data-site-account] .site-account-trigger { min-height: 36px; padding: 3px 8px 3px 4px; gap: 8px; }
  :is(#app,#smsLanding,body.tool-page) [data-site-account] .site-account-avatar { width: 28px; height: 28px; }
  :is(#app,#smsLanding,body.tool-page) [data-site-account] .site-account-name { font-size: 12px; }
  :is(#app,#smsLanding,body.tool-page) [data-site-account] .site-account-label { font-size: 9px; }
}
@media(prefers-color-scheme:dark) {
  #smsLanding [data-site-account] { --account-ink: #e4ebf5; --account-muted: #b0bed1; --account-surface: #151b25; --account-soft: #1d2d4c; --account-line: #344258; --account-blue: #9ab8ff; }
}
@media(prefers-reduced-motion:reduce) { [data-site-account] * { transition: none !important; } }