/* Account pages: the shared frame, entrance and connected app layout. */
body.product-account {
  --bg:#18181A; --raised:#212124; --text:#FAF8F3; --muted:#B8B8B2;
  --quiet:#9C9C97; --line:#3B3B3E; --warn:#F2A6A6;
  --font:Manrope,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  margin:0; background:var(--bg); color:var(--text); color-scheme:dark;
  font:500 15px/1.65 var(--font); min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column;
}
* { box-sizing:border-box; }
[hidden] { display:none!important; }
button,input,select { font:inherit; }
a { color:inherit; text-decoration:none; }
button,a { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { cursor:default; opacity:.45; }
input:disabled { opacity:.6; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:2px solid var(--voltage); outline-offset:4px; }
p,h1,h2,h3 { margin:0; }
svg { display:block; }
a:hover { text-decoration:underline; text-underline-offset:4px; }
.site-head { position:sticky; top:0; z-index:10; background:var(--bg); width:100%; border-bottom:1px solid var(--line); }
.head-inner { max-width:1168px; margin:auto; padding:24px; display:flex; align-items:center; justify-content:space-between; min-height:96px; gap:24px; }
.brand { display:flex; align-items:center; gap:8px; color:var(--text); flex:none; min-height:44px; }
.brand-mark { width:30px; height:30px; }
.brand-wordmark { width:112px; height:auto; }
.head-actions { display:flex; align-items:center; gap:24px; }
.account-main { flex:1; width:calc(100% - 48px); max-width:960px; margin:0 auto; padding:56px 0 88px; }
.card,#stage { width:100%; min-width:0; }
.account-heading { margin-bottom:44px; }
h1 { font-size:38px; font-weight:800; letter-spacing:-.045em; line-height:1.2; }
#title:focus { outline:none; }
.account-heading:has(+ .who:not(:empty)) { margin-bottom:0; }
.who { color:var(--muted); font-size:13px; overflow-wrap:anywhere; margin:12px 0 44px; }
.who:empty { display:none; }
#account-note:not(:empty) { margin:0 0 24px; }
.card.door > .account-heading,.card.door > .who { display:none; }
.card.fail > .account-heading { margin-bottom:0; }
.card.fail > .who:not(:empty) { margin-bottom:0; }
.site-foot { width:calc(100% - 48px); max-width:1120px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; gap:24px; border-top:1px solid var(--line); padding:20px 0 24px; color:var(--quiet); font-size:11px; }
.site-foot nav { display:flex; gap:24px; }
.site-foot a { display:flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; }
body:has(.entrance-layout) .account-main { padding:56px 0 72px; display:flex; align-items:center; }
.entrance-layout { display:grid; grid-template-columns:minmax(0,11fr) minmax(0,12fr); gap:40px; align-items:center; width:100%; }
.entrance-copy { max-width:480px; padding:12px 0; }
.entrance-copy h1 { font-size:56px; }
.entrance-description { font-size:22px; line-height:1.6; color:var(--muted); margin-top:20px; max-width:440px; }
.mode-tail { white-space:nowrap; }
.entrance-actions { margin-top:32px; }
.entrance-actions .primary { width:100%; max-width:320px; min-height:56px; font-size:16px; }
.developer-door { font-size:12px; color:var(--quiet); margin-top:38px; }
.developer-door a { margin-left:3px; color:var(--muted); text-decoration:underline; text-underline-offset:4px; display:inline-flex; align-items:center; min-height:44px; }
.entrance-art { margin:0; aspect-ratio:1; align-self:center; position:relative; overflow:hidden; }
.entrance-art img { display:block; width:100%; height:100%; object-fit:contain; mix-blend-mode:lighten; mask-image:radial-gradient(ellipse 53% 55% at 50% 50%,#000 57%,transparent 100%); }
.loading-message { color:var(--muted); display:flex; align-items:center; gap:12px; min-height:48px; }
.empty-state { max-width:660px; margin:56px auto 72px; text-align:center; padding:40px 0; }
.empty-glyph { width:64px; height:64px; margin:0 auto 26px; opacity:.6; }
.empty-state h2 { font-size:27px; line-height:1.3; letter-spacing:-.035em; font-weight:700; }
.empty-state .empty-original { margin-top:12px; color:var(--muted); font-size:16px; }
.empty-next { margin:24px auto 0; max-width:475px; color:var(--muted); font-size:14px; }
.direct-fact { margin:22px auto 0; max-width:490px; font-size:12px; color:var(--quiet); }
.direct-fact a { text-decoration:underline; text-underline-offset:4px; display:inline-flex; align-items:center; min-height:44px; }
.failure { max-width:600px; padding:40px 0 88px; }
.failure p { margin-top:16px; color:var(--muted); }
.failure p:first-child { margin-top:0; }
.failure .ghost { margin-top:24px; min-width:160px; }
.failure .quiet { font-size:12px; color:var(--quiet); }
.quiet a { text-decoration:underline; text-underline-offset:4px; }
.prov { display:flex; align-items:center; gap:12px; margin:42px 0 16px; }
.prov:first-child { margin-top:0; }
.kic { display:grid; place-items:center; width:30px; height:30px; flex:none; }
.kic svg { width:25px; height:25px; }
.provider-copy { position:relative; min-width:0; }
.kt { font-size:15px; font-weight:700; }
.provider-count { grid-column:1/-1; font-size:11px; color:var(--quiet); }
.conn { scroll-margin-top:120px; position:relative; padding:24px 28px; margin-bottom:14px; border:1px solid var(--line); border-radius:15px; background:var(--raised); }
.conn.off { background:none; }
.r1 { display:flex; align-items:center; gap:12px; }
.av { display:grid; place-items:center; width:40px; height:40px; flex:none; overflow:hidden; border-radius:10px; background:#303034; color:#DADAD4; font-size:18px; font-weight:700; }
.av img { width:100%; height:100%; object-fit:contain; }
.app { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:19px; font-weight:700; letter-spacing:-.03em; }
.capline { margin-top:18px; font-size:14px; color:var(--muted); line-height:1.8; }
.capline b { color:var(--text); font-weight:700; }
.is-paused > .capline { color:var(--text); }
.cap-spend { font-size:13px; color:var(--muted); margin-top:6px; }
.bar { height:3px; background:#414145; border-radius:2px; margin-top:15px; overflow:hidden; }
.bar i { display:block; height:100%; background:var(--muted); }
.freshness { color:var(--quiet); font-size:11px; float:right; margin-top:22px; }
.chip { flex:none; margin-left:auto; font:500 10px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--quiet); letter-spacing:.06em; }
.det { display:none; border-top:1px solid var(--line); margin-top:20px; padding-top:20px; }
.open > .det { display:block; }
.drow { display:flex; align-items:center; gap:10px; font-size:12px; color:var(--muted); min-width:0; }
.dic { flex:none; }
.dic svg { width:18px; height:18px; }
.quiet { display:block; color:var(--quiet); font-size:11px; margin-top:9px; }
.loc { min-width:0; overflow-wrap:anywhere; }
.loc b { font-weight:600; }
.pill { display:inline-flex; margin-top:12px; gap:8px; align-items:center; color:var(--muted); font-size:12px; }
.pill svg { flex:none; width:16px; height:16px; }
.pill path { fill:currentColor; }
.warr { margin-left:8px; }
@media(max-width:800px) {
  .entrance-layout { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; }
  .entrance-copy h1 { font-size:40px; }
  .account-main { max-width:720px; }
}
@media(max-width:600px) {
  .head-inner { padding:16px 20px; min-height:78px; gap:12px; }
  .brand-mark { width:25px; height:25px; }
  .brand-wordmark { width:94px; }
  .head-actions { gap:12px; }
  .account-main { width:calc(100% - 40px); padding:36px 0 56px; }
  .account-heading { margin-bottom:30px; }
  .who { margin-bottom:30px; }
  h1 { font-size:30px; }
  .site-foot { width:calc(100% - 40px); font-size:10px; gap:12px; padding:16px 0; }
  .site-foot nav { gap:18px; }
  body:has(.entrance-layout) .account-main { padding:40px 0 56px; align-items:flex-start; }
  .entrance-layout { display:flex; flex-direction:column; gap:12px; align-items:stretch; }
  .entrance-copy { padding:0; max-width:none; }
  .entrance-copy h1 { font-size:36px; }
  .entrance-description { font-size:18px; line-height:1.65; margin-top:18px; max-width:320px; }
  .entrance-actions { margin-top:28px; }
  .entrance-actions .primary { width:100%; max-width:none; min-height:48px; font-size:14px; }
  .developer-door { margin-top:20px; font-size:11px; }
  .entrance-art { width:230px; max-width:70%; margin:12px auto 0; }
  .empty-state { margin:20px auto 32px; padding:20px 0; }
  .empty-state h2 { font-size:24px; }
  .empty-state .empty-original { font-size:15px; }
  .empty-next { font-size:13px; line-height:1.8; }
  .direct-fact { font-size:11px; }
  .failure { padding:20px 0 40px; }
  .failure p { font-size:14px; }
  .prov { margin-top:34px; margin-bottom:12px; }
  .conn { padding:18px; margin-bottom:12px; border-radius:13px; }
  .app { font-size:18px; }
  .av { width:34px; height:34px; font-size:16px; border-radius:8px; }
  .r1 { gap:10px; }
  .capline { font-size:13px; margin-top:16px; }
  .cap-spend { font-size:12px; }
  .freshness { font-size:10px; margin-top:23px; }
  .det { margin-top:14px; padding-top:16px; }
  .drow { font-size:11px; }
  .chip { font-size:9px; }
}