.sfi-account-panel {
  position: absolute; z-index: 95; top: 84px; right: var(--sfi-global-action-right, 20px);
  width: min(480px, calc(100% - 40px)); max-height: calc(100dvh - 110px);
  display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box;
  padding: 24px; border: 1px solid var(--sfi-panel-border); border-radius: var(--sfi-radius-panel);
  background: var(--sfi-panel-bg); box-shadow: var(--sfi-panel-shadow);
  backdrop-filter: var(--sfi-panel-backdrop); -webkit-backdrop-filter: var(--sfi-panel-backdrop);
  color: var(--sfi-text); font: 14px/1.55 Inter, system-ui, sans-serif; scrollbar-width: thin;
}
.sfi-account-panel *, .sfi-account-panel *::before, .sfi-account-panel *::after { box-sizing: border-box; }
.sfi-account-panel[hidden], .sfi-account-panel [hidden] { display: none; }
.sfi-account-panel > header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; }
.sfi-account-panel h2 { font-size: 23px; font-weight: 350; letter-spacing: -.025em; margin: 0; }
.sfi-account-panel h3 { font-size: 16px; font-weight: 550; letter-spacing: -.01em; margin: 0 0 5px; }
.sfi-account-panel p { margin: 6px 0 16px; }
.sfi-account-panel button, .sfi-account-panel input, .sfi-account-panel textarea, .sfi-account-panel select {
  font: inherit; color: inherit; border: 1px solid var(--sfi-control-border); border-radius: 9px;
  background: transparent; padding: 10px 13px; max-width: 100%; min-height: 44px;
}
.sfi-account-panel button { cursor: pointer; font-weight: 500; line-height: 1.35; }
.sfi-account-panel button:hover { border-color: var(--sfi-blue); color: var(--sfi-blue); }
.sfi-account-panel button:disabled, .sfi-account-panel input:disabled { opacity: .55; cursor: not-allowed; }
.sfi-account-panel :is(button, input, textarea, summary, select, a):focus-visible { outline: 2px solid var(--sfi-blue); outline-offset: 3px; }
.sfi-account-panel input:not([type=checkbox]), .sfi-account-panel textarea { display: block; width: 100%; margin: 7px 0 16px; background: rgba(0,0,0,.2); }
.sfi-account-panel input[type=file] { padding: 8px; font-size: 12px; }
.sfi-account-panel input::file-selector-button { font: inherit; color: var(--sfi-text); background: transparent; border: 1px solid var(--sfi-control-border); border-radius: 6px; padding: 7px 10px; margin-right: 10px; cursor: pointer; }
.sfi-account-panel input[type=checkbox] { min-height: 0; width: 18px; height: 18px; vertical-align: middle; accent-color: var(--sfi-blue); }
.sfi-account-panel textarea { resize: vertical; min-height: 100px; }
.sfi-account-panel label { display: block; font-size: 13px; font-weight: 500; }
.sfi-account-panel .sfi-account-primary { background: var(--sfi-blue, #bfe8fb); color: #080d15; border-color: var(--sfi-blue, #bfe8fb); font-weight: 650; }
.sfi-account-panel .sfi-account-primary:hover { color: #080d15; filter: brightness(1.08); }
.sfi-account-panel .sfi-account-close { border-color: transparent; color: var(--sfi-muted); padding: 8px; font-size: 12px; }
.sfi-account-person { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; min-width: 0; }
.sfi-account-person > div:last-child { min-width: 0; }
.sfi-account-person strong { display: block; font-size: 23px; font-weight: 450; line-height: 1.25; overflow-wrap: anywhere; }
.sfi-account-person span { display: block; margin-top: 5px; color: var(--sfi-blue-muted); font-size: 12px; }
.sfi-account-avatar { position: relative; flex: 0 0 64px; height: 64px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--sfi-panel-border); border-radius: 50%; color: var(--sfi-blue); font-size: 23px; font-weight: 300; }
.sfi-account-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sfi-account-nav { display: grid; grid-template-columns: 1fr 1.25fr 1fr .7fr 1fr; border-bottom: 1px solid var(--sfi-panel-border); gap: 0; margin-bottom: 24px; }
.sfi-account-panel .sfi-account-nav button { border: 0; border-radius: 0; border-bottom: 2px solid transparent; padding: 12px 4px; color: var(--sfi-muted); font-size: 13px; }
.sfi-account-panel .sfi-account-nav button[aria-current=page] { border-bottom-color: var(--sfi-blue); color: var(--sfi-blue); }
.sfi-account-section { padding: 0 0 23px; margin: 0 0 23px; border-bottom: 1px solid var(--sfi-panel-border); }
.sfi-account-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.sfi-account-section form { margin-top: 18px; }
.sfi-account-name-fields { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; }
.sfi-account-panel form > .sfi-account-primary { margin-top: 2px; }
.sfi-account-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.sfi-account-muted { color: var(--sfi-muted); font-size: 12px; font-weight: 400; overflow-wrap: anywhere; }
.sfi-account-status { color: var(--sfi-blue); border-left: 2px solid var(--sfi-blue); padding-left: 12px; overflow-wrap: anywhere; }
.sfi-account-status:empty { display: none; }
.sfi-account-row { padding: 18px 0; border-bottom: 1px solid var(--sfi-panel-border); overflow-wrap: anywhere; }
.sfi-account-row:last-child { border-bottom: 0; padding-bottom: 0; }
.sfi-account-row strong { display: block; font-size: 15px; font-weight: 500; }
.sfi-account-row > span { display: block; margin-top: 5px; color: var(--sfi-muted); font-size: 12px; }
.sfi-account-row .sfi-account-actions button { font-size: 12px; padding: 9px 12px; }
.sfi-account-panel a { color: var(--sfi-blue); overflow-wrap: anywhere; }
.sfi-account-usage { display: grid; gap: 15px; margin: 20px 0 14px; }
.sfi-account-meter-label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; font-size: 12px; }
.sfi-account-meter-label strong { font-weight: 500; color: var(--sfi-blue); font-variant-numeric: tabular-nums; }
.sfi-account-panel meter { display: block; width: 100%; height: 6px; margin-top: 7px; border: 0; border-radius: 3px; background: rgba(255,255,255,.12); }
.sfi-account-panel meter::-webkit-meter-bar { border: 0; background: rgba(255,255,255,.12); border-radius: 3px; }
.sfi-account-panel meter::-webkit-meter-optimum-value { background: var(--sfi-blue); border-radius: 3px; }
.sfi-account-panel meter::-moz-meter-bar { background: var(--sfi-blue); border-radius: 3px; }
.sfi-account-empty { padding: 20px 0; color: var(--sfi-muted); }
.sfi-account-notice { margin-top: 22px; font-size: 12px; color: var(--sfi-muted); }
.sfi-account-panel summary { cursor: pointer; min-height: 44px; padding: 12px 0; }
.sfi-account-notice p { margin-bottom: 12px; }
.sfi-account-block-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 12px; overflow-wrap: anywhere; }
.sfi-account-danger { border-top: 1px solid var(--sfi-panel-border); margin-top: 24px; color: var(--sfi-muted); font-size: 12px; }
.sfi-account-danger form { padding: 12px 0; }
.sfi-account-danger button { margin-top: 8px; }
.sfi-account-chat-log { max-height: 34dvh; min-height: 72px; overflow: auto; overflow-wrap: anywhere; border-block: 1px solid var(--sfi-panel-border); }
.sfi-account-chat-log p { white-space: pre-wrap; margin: 6px 0; }
.sfi-account-chat-log .sfi-account-actions button { border-color: transparent; color: var(--sfi-muted); }
.sfi-account-panel [data-chat-composer] { margin-top: 20px; }
.sfi-account-panel [data-chat-composer] button { display: block; margin-left: auto; }
@media (max-width: 1119px) and (min-width: 641px) { .sfi-account-panel { width: min(480px, calc(100% - 40px)); } }
@media (max-width: 640px) {
  .sfi-account-panel { top: auto; bottom: max(8px, env(safe-area-inset-bottom)); right: max(8px, env(safe-area-inset-right)); width: calc(100% - 16px - env(safe-area-inset-left) - env(safe-area-inset-right)); max-height: calc(100dvh - 92px - env(safe-area-inset-bottom)); padding: 20px; }
  .sfi-account-panel > header { margin-bottom: 18px; }
  .sfi-account-panel h2 { font-size: 21px; }
  .sfi-account-person { gap: 12px; margin-bottom: 18px; }
  .sfi-account-person strong { font-size: 21px; }
  .sfi-account-avatar { flex-basis: 52px; height: 52px; font-size: 20px; }
  .sfi-account-nav { margin-bottom: 20px; }
  .sfi-account-name-fields { gap: 10px; }
}
@media (max-width: 359px) {
  .sfi-account-panel { padding: 16px; }
  .sfi-account-panel .sfi-account-nav button { font-size: 12px; }
}

/* Static canonical solid atlas: no extra WebGL context in account panels. */
.sfi-account-avatar { flex-basis:72px; width:72px; height:72px; color:var(--account-avatar-color); }
.sfi-account-avatar-solid { position:absolute; width:54px; height:54px; top:-1px; left:8px; background-size:700% 3100%; background-repeat:no-repeat; }
.sfi-account-avatar .sfi-account-avatar-initials { color:var(--account-avatar-color); position:absolute; bottom:7px; left:0; right:0; text-align:center; font-size:12px; line-height:1; font-weight:600; letter-spacing:.08em; }
.sfi-account-avatar img { z-index:1; }
@media(max-width:640px) {
  .sfi-account-avatar { flex-basis:60px; width:60px; height:60px; }
  .sfi-account-avatar-solid { width:44px; height:44px; left:7px; top:-1px; }
  .sfi-account-avatar-initials { bottom:5px; font-size:10px; }
}

.sfi-account-time-remaining { display:block; margin:18px 0; font-size:28px; font-weight:400; color:var(--sfi-blue); font-variant-numeric:tabular-nums; }
.sfi-account-balance { display:grid; grid-template-columns:1fr auto; gap:6px 16px; margin-bottom:16px; }
.sfi-account-balance strong { font-weight:500; font-variant-numeric:tabular-nums; }
.sfi-account-plan-card { padding:18px 0; border-bottom:1px solid var(--sfi-panel-border); }
.sfi-account-plan-card:last-child { border-bottom:0; }
.sfi-account-plan-price { display:block; color:var(--sfi-blue); font-weight:500; margin:6px 0; }
.sfi-account-plan-card p { font-size:13px; }
.sfi-account-panel[data-account-page=plan] .sfi-account-section > button { margin:0 8px 10px 0; }

/* Account utilities share the World toolbar's compact icon vocabulary. */
.sfi-world-global-controls [data-sfi-account-control] { width:36px; min-width:36px; padding:8px; flex:0 0 36px; }
[data-sfi-account-control] svg, .sfi-account-close svg { display:block; width:18px; height:18px; flex:none; }
.sfi-account-panel { padding:24px; }
.sfi-account-panel > header { margin-bottom:20px; }
.sfi-account-panel h2 { font-size:18px; font-weight:450; }
.sfi-account-panel .sfi-account-close { display:grid; place-items:center; width:44px; flex:0 0 44px; }
.sfi-account-person { padding:18px; border:1px solid var(--sfi-panel-border); border-radius:16px; background:rgba(191,232,251,.035); margin-bottom:18px; }
.sfi-account-person strong { font-size:22px; }
.sfi-account-nav { grid-template-columns:1fr 1.25fr 1fr .7fr 1fr; padding:4px; gap:2px; border:1px solid var(--sfi-panel-border); border-radius:12px; background:rgba(0,0,0,.16); }
.sfi-account-panel .sfi-account-nav button { min-width:0; padding:10px 2px; font-size:12px; border:0; border-radius:8px; }
.sfi-account-panel .sfi-account-nav button[aria-current=page] { background:rgba(191,232,251,.1); box-shadow:inset 0 0 0 1px rgba(191,232,251,.12); }
.sfi-account-content { min-width:0; }
.sfi-account-section { padding-bottom:24px; margin-bottom:24px; }
.sfi-account-section h3 { margin-bottom:8px; }
.sfi-account-panel input:not([type=checkbox]):focus, .sfi-account-panel textarea:focus { border-color:var(--sfi-blue); }
.sfi-account-panel input:not([type=checkbox]) { min-width:0; }
.sfi-account-allowance, .sfi-account-panel[data-account-page=plan] .sfi-account-section:first-child { padding:20px; border:1px solid var(--sfi-panel-border); border-radius:14px; background:rgba(191,232,251,.035); }
.sfi-account-storage-total { display:flex; flex-direction:column; gap:2px; margin-top:20px; }
.sfi-account-storage-total strong { color:var(--sfi-blue); font-size:28px; font-weight:400; letter-spacing:-.025em; font-variant-numeric:tabular-nums; }
.sfi-account-storage-total span { color:var(--sfi-muted); font-size:12px; }
.sfi-account-usage { margin:20px 0 12px; }
.sfi-account-meter-label { font-size:11px; gap:4px 8px; }
.sfi-account-allowance > p:last-child { margin-bottom:0; }
.sfi-account-recording { padding:18px!important; margin-top:12px; border:1px solid var(--sfi-panel-border)!important; border-radius:14px; background:rgba(0,0,0,.12); }
.sfi-account-recording-meta { display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:8px; color:var(--sfi-muted); font-size:12px; font-variant-numeric:tabular-nums; }
.sfi-account-recording-meta span:first-child { color:var(--sfi-blue); }
.sfi-account-recording .sfi-account-actions { display:grid; grid-template-columns:1fr 1fr; }
.sfi-account-recording-more { margin-top:8px; }
.sfi-account-recording-more summary { color:var(--sfi-muted); font-size:12px; }
.sfi-account-recording-options { display:flex; flex-wrap:wrap; gap:8px; padding-bottom:2px; }
.sfi-account-recording-options button { font-size:12px; }
.sfi-account-plan-card { padding:18px; margin-top:12px; border:1px solid var(--sfi-panel-border); border-radius:14px; }
.sfi-account-plan-card:last-child { border-bottom:1px solid var(--sfi-panel-border); }
.sfi-account-plan-card[data-current=true] { border-color:var(--sfi-blue-muted); background:rgba(191,232,251,.035); }
.sfi-account-plan-price { font-size:21px; font-weight:400; }
.sfi-account-plan-card p { margin-bottom:12px; }
.sfi-account-plan-card button { width:100%; }
.sfi-account-balance { font-size:12px; padding-block:14px; border-block:1px solid var(--sfi-panel-border); }
.sfi-account-chat-log { display:flex; flex-direction:column; padding:0; border:0; border-radius:0; background:transparent; }
.sfi-account-chat-log time { font-size:10px; }
.sfi-account-panel [data-chat-composer] textarea { margin-bottom:10px; }
@media(max-width:640px) {
 .sfi-account-panel { padding:18px; }
 .sfi-account-person { padding:14px; gap:12px; }
 .sfi-account-person strong { font-size:20px; }
 .sfi-account-allowance, .sfi-account-panel[data-account-page=plan] .sfi-account-section:first-child { padding:16px; }
}
@media(max-width:359px) {
 .sfi-account-panel { padding:12px; }
 .sfi-account-panel .sfi-account-nav button { font-size:11px; }
 .sfi-account-person { padding:12px; }
 .sfi-account-storage-total strong { font-size:25px; }
}
/* Scroll the content beneath an unboxed header; keep the close control reachable. */
.sfi-account-panel:focus { outline: none; }
.sfi-account-panel > header { flex: none; position: static; margin: 0 0 26px; padding: 0; background: transparent; border: 0; box-shadow: none; backdrop-filter: none; }
.sfi-account-panel > header h2 { font-size: 14px; font-weight: 500; letter-spacing: .015em; color: var(--sfi-blue-muted); }
.sfi-account-panel .sfi-account-close { border: 0; border-radius: 50%; background: transparent; box-shadow: none; width: 44px; height: 44px; margin: -8px -8px -8px 0; }
.sfi-account-panel .sfi-account-close:hover { background: rgba(191,232,251,.07); }
.sfi-account-body { min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 3px; margin: -3px; }
.sfi-account-welcome h3 { font-family: Georgia, 'Times New Roman', serif; font-size: 30px; font-weight: 400; line-height: 1.15; letter-spacing: -.025em; margin-bottom: 14px; }
.sfi-account-panel .sfi-account-eyebrow { color: var(--sfi-blue-muted); font-size: 9px; letter-spacing: .16em; margin: 0 0 12px; }
.sfi-account-panel .sfi-account-intro { color: var(--sfi-muted); font-size: 14px; line-height: 1.65; margin: 0 0 22px; }
.sfi-account-benefits { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; margin: 26px 0 30px; }
.sfi-account-benefits div { min-width: 0; }
.sfi-account-benefits dt { color: var(--sfi-blue); font-size: 25px; font-weight: 400; letter-spacing: -.025em; line-height: 1.3; }
.sfi-account-benefits dd { margin: 5px 0 0; color: var(--sfi-muted); font-size: 11px; line-height: 1.5; max-width: 100px; }
.sfi-account-panel[data-signed-out=true] .sfi-account-actions { margin-top: 0; }
.sfi-account-panel[data-signed-out=true] .sfi-account-actions .sfi-account-primary { width: 100%; border-radius: 10px; }
.sfi-account-panel .sfi-account-returning { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 5px; color: var(--sfi-muted); font-size: 12px; margin: 8px 0 20px; }
.sfi-account-panel .sfi-account-returning button { color: var(--sfi-blue); padding: 8px 3px; border: 0; background: transparent; font-size: 12px; }
.sfi-account-panel .sfi-account-returning button:hover { text-decoration: underline; text-underline-offset: 4px; }
.sfi-account-panel .sfi-account-reassurance { color: var(--sfi-muted); font-size: 11px; line-height: 1.6; margin: 0; }
.sfi-account-panel .sfi-account-notice { margin-top: 6px; border: 0; }
.sfi-account-notice > summary { width: fit-content; max-width: 100%; color: var(--sfi-blue-muted); font-size: 11px; padding: 12px 0; list-style: none; }
.sfi-account-notice > summary::-webkit-details-marker { display: none; }
.sfi-account-notice > summary::after { content: '+'; margin-left: 8px; }
.sfi-account-notice[open] > summary::after { content: '−'; }
.sfi-account-notice[open] > summary { color: var(--sfi-blue); }
.sfi-account-chat-log[data-empty=true] { padding: 24px 0 30px; border: 0; border-radius: 0; background: transparent; min-height: 0; }
.sfi-account-chat-empty p { font-family: Georgia, 'Times New Roman', serif; font-size: 26px; line-height: 1.25; letter-spacing: -.02em; color: var(--sfi-text); }
.sfi-account-chat-empty span { display: block; color: var(--sfi-muted); font-size: 12px; margin-top: 12px; }
.sfi-account-panel .sfi-account-chat-invitation .sfi-account-intro { margin-bottom: 16px; }
.sfi-account-body > .sfi-account-actions:has(> button[hidden]):not(:has(> button:not([hidden]))) { display: none; }
.sfi-account-body > .sfi-account-muted:empty { display: none; }
@media(max-width:640px) {
  .sfi-account-panel > header { margin-bottom: 22px; }
  .sfi-account-welcome h3 { font-size: 29px; }
  .sfi-account-benefits { gap: 12px; }
}
@media(max-width:359px) {
  .sfi-account-welcome h3 { font-size: 27px; }
  .sfi-account-benefits dt { font-size: 23px; }
}
.sfi-account-chat-log .sfi-account-chat-message { flex-shrink:0; padding:16px; border:1px solid rgba(191,232,251,.14); border-radius:16px; background:rgba(191,232,251,.035); }
.sfi-account-message-identity { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.sfi-account-message-identity .sfi-account-avatar { flex-basis:38px; height:38px; width:38px; }
.sfi-account-message-identity .sfi-account-avatar-initials { font-size:9px; }
.sfi-account-chat-message time { font-size:10px; }
.sfi-account-panel [data-chat-composer] { padding:12px; border:1px solid var(--sfi-panel-border); border-radius:18px; background:rgba(2,6,12,.14); display:grid; justify-items:end; }
.sfi-account-panel [data-chat-composer] label { width:100%; }
.sfi-account-panel [data-chat-composer] textarea { border:0; background:transparent; margin:0 0 8px; min-height:72px; padding:4px; }
.sfi-account-panel [data-chat-composer] button { border-radius:999px; padding:8px 22px; }
.sfi-account-panel .sfi-account-plans { position:fixed; inset:0; margin:auto; box-sizing:border-box; width:min(1140px,calc(100vw - 32px)); max-width:none; max-height:calc(100dvh - 32px); padding:32px; border:1px solid var(--sfi-panel-border); border-radius:26px; background:linear-gradient(135deg,#0b1520f5,#050911f5); color:#e8f4fc; box-shadow:0 32px 100px #0009; overflow:auto; }
.sfi-account-plans::backdrop { background:#01040ac4; backdrop-filter:blur(8px); }
.sfi-account-plans > header { display:flex; justify-content:space-between; gap:18px; align-items:center; margin:0; }
.sfi-account-plans h2 { font:400 30px/1.2 Georgia,serif; margin:0; }
.sfi-account-plans .sfi-account-close { flex:0 0 44px; height:44px; border-radius:50%; }
.sfi-account-plan-grid { display:grid; grid-template-columns:1fr 1fr 1.12fr 1fr; gap:12px; margin:22px 0 8px; align-items:stretch; }
.sfi-account-plan-grid .sfi-account-plan-card { position:relative; display:flex; flex-direction:column; padding:22px 18px; margin:16px 0; border-radius:18px; background:rgba(191,232,251,.025); min-width:0; }
.sfi-account-plan-grid .sfi-account-plan-card[data-current=true] { border-color:rgba(191,232,251,.5); background:rgba(143,215,255,.07); }
.sfi-account-plan-grid .sfi-account-plan-card[data-recommended=true] { margin:0; padding-top:38px; padding-bottom:38px; border:1px solid #a1d9f4; background:linear-gradient(155deg,#213b50,#101c2c); box-shadow:0 8px 32px #0005; }
.sfi-account-plan-recommended { position:absolute; top:-13px; left:50%; transform:translateX(-50%); padding:5px 14px; border:1px solid #a1d9f4; border-radius:999px; background:#bfe8fb; color:#102434; font-size:11px; font-weight:700; letter-spacing:.04em; white-space:nowrap; }
.sfi-account-plan-grid h3 { min-height:34px; font-size:17px; overflow-wrap:anywhere; }
.sfi-account-plan-grid .sfi-account-plan-price { display:flex; align-items:baseline; gap:6px; margin:10px 0 16px; white-space:nowrap; }
.sfi-account-plan-price strong { font-size:34px; font-weight:500; }
.sfi-account-plan-price span { font-size:12px; color:#b5c9d8; }
.sfi-account-plan-benefits { padding:0; list-style:none; font-size:12px; line-height:1.5; color:#b5c9d8; flex:1; }
.sfi-account-plan-benefits li { display:flex; flex-direction:column; gap:2px; padding:9px 0; border-top:1px solid #bfe8fb14; }
.sfi-account-plan-benefits strong { color:#e8f4fc; font-weight:500; font-size:13px; }
.sfi-account-plan-benefits span { font-size:11px; }
.sfi-account-plan-grid button { width:100%; border-radius:999px; font-size:12px; }
.sfi-account-plan-grid [data-recommended=true] > button { border-color:#bfe8fb; background:#bfe8fb; color:#102434; }
@media(max-width:850px) { .sfi-account-plan-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 12px; } .sfi-account-plan-grid .sfi-account-plan-card { margin:0; } .sfi-account-plan-grid .sfi-account-plan-card[data-recommended=true] { padding-top:22px; padding-bottom:22px; } }
@media(max-width:500px) { .sfi-account-panel .sfi-account-plans { padding:20px; width:calc(100vw - 18px); max-height:calc(100dvh - 18px); } .sfi-account-plan-grid { grid-template-columns:1fr; } .sfi-account-plans h2 { font-size:28px; } }
/* Share the experience panel anchor, including compact viewport clearance. */
.sfi-account-panel { top:calc(var(--sfi-global-action-top) + var(--sfi-global-action-height) + 15px); max-height:calc(100dvh - var(--sfi-global-action-top) - var(--sfi-global-action-height) - 58px); }
@media(max-width:640px) { .sfi-account-panel { top:auto; bottom:calc(58px + env(safe-area-inset-bottom)); max-height:calc(100dvh - 132px - env(safe-area-inset-bottom)); } }
.sfi-account-message-identity .sfi-account-avatar-solid { width:32px; height:32px; left:2px; top:-2px; }
.sfi-account-message-identity .sfi-account-avatar-initials { bottom:4px; }
/* All account sections keep the same top anchor; only the body scrolls. */
@media(max-width:640px) { .sfi-account-panel { top:calc(var(--sfi-global-action-top) + var(--sfi-global-action-height) + 15px); bottom:auto; max-height:min(62dvh,calc(100dvh - var(--sfi-global-action-top) - var(--sfi-global-action-height) - 32px)); } }
/* A compact reading rhythm across the account and community panels. */
.sfi-account-panel { padding:18px; }
.sfi-account-panel > header { margin-bottom:14px; flex:none; }
.sfi-account-panel .sfi-account-person { padding:12px; gap:12px; margin-bottom:12px; }
.sfi-account-panel .sfi-account-nav { margin-bottom:16px; }
.sfi-account-panel .sfi-account-section { padding-bottom:16px; margin-bottom:16px; }
.sfi-account-panel .sfi-account-section form { margin-top:12px; }
.sfi-account-panel[data-kind=chat] .sfi-account-body { gap:10px; }
.sfi-account-panel[data-kind=chat] .sfi-account-intro { margin:0 0 8px; font-size:12px; }
.sfi-account-panel[data-kind=chat] .sfi-account-actions:empty,
.sfi-account-panel[data-kind=chat] p:empty { display:none; }
.sfi-account-panel[data-kind=chat] .sfi-account-chat-log { min-height:0; max-height:34dvh; gap:8px; }
.sfi-account-panel .sfi-account-chat-empty { padding:12px 0 18px; }
.sfi-account-panel .sfi-account-chat-empty p { font-size:22px; margin:0; }
.sfi-account-panel .sfi-account-chat-empty span { margin-top:8px; }
.sfi-account-panel [data-chat-composer] { margin-top:10px; }
.sfi-account-panel .sfi-account-notice { padding:8px 10px; border:1px solid rgba(191,232,251,.1); border-radius:10px; background:rgba(191,232,251,.025); margin-top:12px; }
.sfi-account-recording .sfi-account-actions { gap:6px; margin-top:10px; }
.sfi-account-recording .sfi-share-action { display:inline-flex; align-items:center; gap:5px; flex:1 1 auto; padding:7px 9px; font-size:11px; border-radius:10px; }
.sfi-account-recording .sfi-share-action-label { font-size:10px; }
.sfi-account-recording .sfi-share-copy { margin-top:10px; }
.sfi-account-recording .sfi-share-copy-controls { grid-template-columns:1fr; }
.sfi-account-recording .sfi-share-copy input { margin:0; font-size:11px; min-height:36px; }
.sfi-account-recording .sfi-share-copy-actions button { padding:7px; min-height:40px; }
@media(max-width:640px){.sfi-account-panel{padding:16px;}.sfi-account-panel > header{margin-bottom:14px;}}
.sfi-account-panel .sfi-account-chat-log[data-empty=true] { padding:0; }
.sfi-account-panel .sfi-account-notice > summary { padding:5px 0; }
.sfi-account-panel .sfi-account-benefits { margin:18px 0; }
.sfi-account-panel .sfi-account-returning { margin-bottom:10px; }
.sfi-account-panel .sfi-account-library-item { display:grid; grid-template-columns:minmax(0,1fr) auto 12px; gap:12px; align-items:center; width:100%; min-height:52px; padding:10px 2px; border:0; border-bottom:1px solid rgba(191,232,251,.12); border-radius:0; text-align:left; background:none; font-size:13px; }
.sfi-account-library-item > span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sfi-account-library-item small { font:12px ui-monospace,monospace; color:var(--sfi-blue-muted); }
.sfi-account-panel[data-account-page=recordings] .sfi-account-allowance { padding:12px; margin-bottom:16px; }
.sfi-account-panel[data-account-page=recordings] .sfi-account-storage-total { margin-top:8px; flex-direction:row; align-items:baseline; gap:8px; }
.sfi-account-panel[data-account-page=recordings] .sfi-account-storage-total strong { font-size:20px; }
.sfi-account-panel[data-account-page=recordings] .sfi-account-usage { margin:10px 0; }
.sfi-account-person .sfi-account-plan-badge { display:inline-flex; align-items:center; gap:6px; width:fit-content; padding:4px 9px; margin-top:7px; border:1px solid rgba(191,232,251,.25); border-radius:999px; background:rgba(191,232,251,.06); color:#bfe8fb; font-size:10px; font-weight:600; letter-spacing:.04em; }
.sfi-account-plan-badge::before { content:none; font-size:13px; }
.sfi-account-person .sfi-account-plan-badge[data-plan=mathematics] { color:#dfca96; border-color:#d2af6750; background:#d2af6712; }
.sfi-account-person .sfi-account-plan-badge[data-plan=mathematics_plus] { color:#c8dfff; border-color:#8abfff66; background:linear-gradient(110deg,#97cfff18,#ad9cec18); }
.sfi-account-person .sfi-account-plan-badge[data-plan=mathematics_ai] { color:#f0d8a4; border-color:#d2af6780; background:linear-gradient(110deg,#d2af6720,#8bd3fb18); box-shadow:0 0 15px #d2af6710; }
.sfi-account-plan-badge[data-plan=mathematics_ai]::before { content:'✦'; }
.sfi-account-panel button[aria-busy=true] { cursor:progress; }

.sfi-account-plans > .sfi-account-status:empty { display:none; }
.sfi-account-plans > .sfi-account-status:not(:empty) { margin:10px 0 0; padding:8px 12px; border:1px solid #bfe8fb30; border-radius:10px; font-size:12px; line-height:1.4; }
.sfi-account-plans > .sfi-account-muted:last-child { margin:0; font-size:11px; line-height:1.5; }
.sfi-world-global-controls [data-sfi-account-control=chat] { width:auto; flex-basis:auto; gap:7px; padding:8px 12px; }
@media(max-width:640px) { .sfi-account-control-label { display:none; } .sfi-world-global-controls [data-sfi-account-control=chat] { padding:6px; } }

/* A compact, centered comparison heading; approved plan cards stay unchanged. */
.sfi-account-plans > header { position:relative; justify-content:center; padding:0 52px; min-height:48px; text-align:center; }
.sfi-account-plans > header > div { min-width:0; }
.sfi-account-plans > header .sfi-account-close { position:absolute; right:0; top:0; }
.sfi-account-plans .sfi-account-plan-subtitle { margin:6px 0 0; font-size:12px; line-height:1.4; color:#a9bdcd; letter-spacing:.02em; }
@media(max-width:500px) { .sfi-account-plans > header { padding:0 34px; } .sfi-account-plans > header h2 { font-size:25px; } .sfi-account-plans > header .sfi-account-close { width:32px; height:32px; min-width:32px; } .sfi-account-plans .sfi-account-plan-subtitle { font-size:11px; } }

.sfi-account-panel .sfi-account-close { height:36px; width:36px; min-width:36px; flex-basis:36px; border:1px solid #bfe8fb30; border-radius:50%; background:transparent; }

/* The signed-out invitation needs a visible, clearly bounded primary action. */
.sfi-account-panel[data-signed-out=true] .sfi-account-actions .sfi-account-primary {
 background:linear-gradient(135deg,#d3f1ff 0%,#a2d5ef 55%,#79b6d6 100%);
 color:#081723;
 border:1px solid #d4f2ff;
 box-shadow:inset 0 1px 0 #ffffff80,0 3px 14px #70c3ef20;
}

/* Account is a destination: one opaque full-screen surface above the World. */
.sfi-account-panel[data-kind=account]{position:fixed;inset:0;width:100%;height:100dvh;max-height:none;border:0;border-radius:0;background:#07090d;backdrop-filter:none;-webkit-backdrop-filter:none;padding:max(16px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));z-index:200}
.sfi-account-panel[data-kind=account]>header,.sfi-account-panel[data-kind=account]>.sfi-account-status,.sfi-account-panel[data-kind=account]>.sfi-account-body{width:100%;max-width:880px;margin-left:auto;margin-right:auto}
.sfi-account-panel[data-kind=account]>header{padding-bottom:14px;border-bottom:1px solid #ffffff24}
.sfi-account-panel[data-kind=account] .sfi-account-body{flex:1;min-height:0;overflow:auto;padding:0 2px 8px;overscroll-behavior:contain}
.sfi-account-panel[data-kind=account][data-signed-out=true] .sfi-account-body{max-width:660px}
.sfi-account-panel[data-kind=account][data-signed-out=true] .sfi-account-welcome{position:relative;isolation:isolate;overflow:hidden;border:1px solid #ffffff45;border-radius:20px;background:#030406;padding:clamp(22px,5vw,44px);margin:12px 0 0}
.sfi-account-welcome>*:not(.account-entry-art){position:relative;z-index:1}
.sfi-account-panel[data-kind=account] .sfi-account-welcome h3{font-size:clamp(28px,5vw,40px);line-height:1.12;max-width:390px;font-weight:350;margin:12px 0}
.sfi-account-panel[data-kind=account] .sfi-account-returning{border:0;background:none;padding:0;margin:16px 0 0;border-radius:0;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sfi-account-panel[data-kind=account] .sfi-account-returning button{padding:4px 10px;border:1px solid #ffffff35;border-radius:8px;min-height:40px}
.sfi-account-panel[data-kind=account] .sfi-account-welcome .sfi-account-primary{background:linear-gradient(120deg,#fbfcff,#b9c1cc);border-color:#fff;color:#10131a;box-shadow:0 4px 30px #ffffff14;border-radius:10px;width:100%}
.account-entry-art{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:.8}
.account-entry-art[data-style=particles]{opacity:1;mask-image:radial-gradient(ellipse at 35% 42%,#0004 0%,#0009 35%,#000e 75%)}
.account-entry-art[data-style=particles] i{position:absolute;inset:-25%;display:block;will-change:transform;animation:account-drift var(--duration) ease-in-out var(--delay) infinite alternate}
.account-entry-art[data-style=particles] svg{display:block;width:100%;height:100%;fill:#86c8ff}
@keyframes account-drift{from{transform:translate3d(calc(-1 * var(--flow-x)),var(--flow-y),0) rotate(-3deg)}to{transform:translate3d(var(--flow-x),calc(-1 * var(--flow-y)),0) rotate(3deg)}}
.account-entry-art[data-style=orbits]{mask-image:linear-gradient(90deg,transparent,#000)}
.account-entry-art[data-style=orbits] i{position:absolute;width:370px;height:370px;border:1px solid #ffffff24;border-radius:50%;right:-130px;top:-60px;transform:rotateX(40deg);background:radial-gradient(circle,transparent 60%,#ffffff04 70%)}
.account-entry-art[data-style=orbits] i:nth-child(2){width:460px;height:460px;right:-175px;top:-105px}
.account-entry-art[data-style=orbits] i:nth-child(3){width:550px;height:550px;right:-220px;top:-150px}
.account-entry-art[data-style=frame]{background:radial-gradient(ellipse at 90% 0%,#ffffff20,transparent 60%);box-shadow:inset 0 1px 0 #fff9,inset 0 0 60px #ffffff07}
.account-plan-selectors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:16px 0 12px}
.sfi-account-panel .account-plan-selector{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:0;padding:12px 4px;border:1px solid #ffffff29;border-radius:12px;font-size:12px;text-align:center;white-space:normal;overflow-wrap:anywhere;background:#ffffff04}
.account-plan-selector strong{font-size:26px;font-weight:450;line-height:1}
.account-plan-selector small{font-size:10px;color:#a4b2c4}
.sfi-account-panel .account-plan-selector[aria-pressed=true]{background:linear-gradient(145deg,#24394c,#162333);border-color:#bbddf2;color:#fff;box-shadow:inset 0 1px 0 #ffffff26}
.account-plan-selector[data-plan=mathematics_plus]{border-color:#8dabca}
.account-plan-detail{border:1px solid #ffffff25;border-radius:14px;padding:20px;background:#ffffff03;min-height:0}
.account-plan-detail-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.account-plan-detail-heading>span{font-size:13px;color:#b7c4d4;white-space:nowrap}
.account-plan-facts{margin:0 0 14px}
.account-plan-facts>div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid #ffffff12;padding:9px 0;font-size:13px}
.account-plan-facts dt{color:#b7c4d4}.account-plan-facts dd{margin:0;text-align:right;color:#edf5ff}
.account-plan-detail>.sfi-account-primary{width:100%;margin-top:8px}
.account-plan-upgrades{display:grid;grid-template-columns:1fr 1fr;gap:8px;list-style:none;padding:0;margin:16px 0}
.account-plan-upgrades li{border:1px solid #ffffff18;border-radius:10px;padding:12px}
.account-plan-upgrades li strong,.account-plan-upgrades li span{display:block}.account-plan-upgrades li strong{font-size:21px;font-weight:400}.account-plan-upgrades li span{font-size:12px;color:#b7c4d4;margin-top:4px}
.account-plan-inheritance{font-size:14px;color:#b7c4d4}
.account-compare table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:12px;line-height:1.35}
.account-compare th,.account-compare td{padding:10px 4px;border-bottom:1px solid #ffffff18;overflow-wrap:anywhere;text-align:center;font-weight:400}
.account-compare th:first-child{width:26%;text-align:left;color:#b7c4d4}
.account-compare [data-selected=true]{background:#a6d7ff10;color:#d9edff}
.account-compare[data-layout=matrix] .account-plan-detail{padding:12px}
@media(min-width:750px){.sfi-account-panel[data-kind=account][data-signed-out=false] .sfi-account-content{max-width:740px}.sfi-account-panel[data-account-page=profile] .sfi-account-content{display:grid;grid-template-columns:1.3fr 1fr;gap:32px}.sfi-account-panel[data-account-page=profile] .sfi-account-section{border:0}}
@media(max-width:640px){.sfi-account-panel[data-kind=account]{padding:12px max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}.sfi-account-panel[data-kind=account] .sfi-account-welcome{padding:22px}.sfi-account-panel .sfi-account-plans:has(.account-compare){width:100%;height:100dvh;max-width:none;max-height:none;inset:0;margin:0;border:0;border-radius:0;padding:16px 12px}.sfi-account-panel .account-plan-selector{font-size:10px;min-height:104px}.account-plan-selector strong{font-size:24px}.account-plan-detail{padding:14px}.account-compare table{font-size:10px}.account-compare[data-layout=matrix] .account-plan-detail{padding:6px}.account-compare th,.account-compare td{padding:10px 3px}.account-plan-detail-heading h3{font-size:16px}}
@media(prefers-reduced-motion:reduce){.account-entry-art i{animation:none!important}}

.sfi-account-panel .sfi-account-close,.sfi-account-plans>header .sfi-account-close{width:44px;height:44px;min-width:44px;min-height:44px;flex:0 0 44px;padding:12px;margin:0;aspect-ratio:1}
@media(max-width:640px){.sfi-account-panel .account-plan-selector>span{font-size:clamp(8px,2.4vw,10px);white-space:nowrap;letter-spacing:-.025em}}

/* Shared signup / plan action: one broad, non-repeating Perlin field per layer. */
.account-flow-action[data-account-entry],
.sfi-account-panel .sfi-account-primary.account-flow-action,
.sfi-account-panel[data-signed-out=true] .sfi-account-actions .sfi-account-primary.account-flow-action,
.sfi-account-panel[data-kind=account] .sfi-account-welcome .sfi-account-primary.account-flow-action{
 position:relative;isolation:isolate;overflow:hidden;min-height:56px;padding:16px 21px;border:0;border-radius:11px;
 background:#030409;
 color:#fff;box-shadow:0 5px 20px #0005;
 font-weight:600;letter-spacing:.015em;
}
.account-flow-label{position:relative;z-index:2;text-shadow:0 1px 7px #000,0 0 12px #000}
.account-flow-art{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit;pointer-events:none;background:linear-gradient(90deg,#090316,#02040a 48%,#030d20)}
.account-flow-art::before,.account-flow-art::after{content:'';position:absolute;inset:-110% -25%;
 background:radial-gradient(ellipse at 24% 42%,#ed24cc 0%,#8a146f 23%,transparent 57%),radial-gradient(ellipse at 76% 60%,#1689fa 0%,#113977 24%,transparent 58%);
 mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22400%22%20viewBox%3D%220%200%201200%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cfilter%20id%3D%22n%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.007%20.014%22%20numOctaves%3D%222%22%20seed%3D%228%22%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%224%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%201%200%200%200%200%201%200%200%200%200%201%202.8%200%200%200%20-.8%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%221200%22%20height%3D%22400%22%20filter%3D%22url%28%23n%29%22%2F%3E%3C%2Fsvg%3E");mask-size:100% 100%;mask-position:center;mask-repeat:no-repeat;opacity:.85;will-change:transform;animation:account-noise-flow calc(16s / 3) ease-in-out -2s infinite alternate;
}
.account-flow-art::after{background:radial-gradient(ellipse at 62% 36%,#327eff 0%,transparent 53%),radial-gradient(ellipse at 38% 65%,#c91bb7 0%,transparent 52%);opacity:.45;animation-duration:calc(23s / 3);animation-delay:calc(-17s / 3);animation-direction:alternate-reverse}
/* Brighten the edge of the SAME field; no separate colored border or timeline. */
.account-flow-action::after{content:'';position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px #ffffff36}
.sfi-account-panel .account-flow-action:hover:not(:disabled)::after{box-shadow:inset 0 0 0 1px #ffffff50}
.sfi-account-panel .account-flow-action:focus-visible{outline:2px solid #c3e8ff;outline-offset:4px}
.sfi-account-panel .account-flow-action:disabled{opacity:.5;animation-play-state:paused}
.account-flow-action:disabled .account-flow-art::before,.account-flow-action:disabled .account-flow-art::after{animation-play-state:paused}
@keyframes account-noise-flow{from{transform:translate3d(-8%,-6%,0) rotate(-8deg) scale(1.04)}to{transform:translate3d(9%,8%,0) rotate(9deg) scale(1.17)}}
@media(prefers-reduced-motion:reduce){.sfi-account-panel .account-flow-action,.account-flow-art::before,.account-flow-art::after{animation:none!important}}

@media(min-width:641px){.sfi-account-panel .sfi-account-plans:has(.account-compare[data-layout=matrix]){width:min(660px,calc(100vw - 32px));padding:24px}}

/* Signed-out entry is one centered invitation, separate from the full profile. */
.sfi-account-backdrop{position:fixed;inset:0;z-index:199;background:rgb(0 0 0 / .68);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.sfi-account-backdrop[hidden]{display:none}
.sfi-account-panel[data-kind=account][data-signed-out=true]{inset:50% auto auto 50%;transform:translate(-50%,-50%);width:min(520px,calc(100vw - 32px));height:auto;max-height:calc(100dvh - 32px);padding:0;border:1px solid #ffffff45;border-radius:20px;background:#030406;box-shadow:0 24px 100px #0009}
.sfi-account-panel[data-kind=account][data-signed-out=true]>header{position:absolute;inset:10px 10px auto auto;width:auto;margin:0;padding:0;border:0;z-index:3}
.sfi-account-panel[data-kind=account][data-signed-out=true]>header h2{display:none}
.sfi-account-panel[data-kind=account][data-signed-out=true]>.sfi-account-status:empty{display:none}
.sfi-account-panel[data-kind=account][data-signed-out=true]>.sfi-account-status:not(:empty){padding:24px 62px 0 24px}
.sfi-account-panel[data-kind=account][data-signed-out=true]>.sfi-account-body{flex:0 1 auto;padding:0;max-width:none}
.sfi-account-panel[data-kind=account][data-signed-out=true] .sfi-account-welcome{margin:0;border:0;border-radius:0;padding:32px}
.sfi-account-panel[data-kind=account][data-signed-out=true] .sfi-account-welcome h3{font-size:clamp(28px,6vw,36px);max-width:360px}
.sfi-account-panel[data-kind=account][data-signed-out=true] .sfi-account-eyebrow{padding-right:36px}
@media(max-width:640px){.sfi-account-panel[data-kind=account][data-signed-out=true] .sfi-account-welcome{padding:26px 22px}}

.sfi-account-panel[data-kind=account][data-signed-out=false]>header{gap:10px;padding-bottom:8px;margin-bottom:12px}
.sfi-account-panel .sfi-account-brand{display:block;font:300 21px/1.05 Inter,system-ui,sans-serif;letter-spacing:.02em;color:#edf6fb}
.sfi-account-panel .sfi-account-heading-context{display:block;margin-top:5px;font-size:9px;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:#9bb6c6}
@media(max-width:640px){.sfi-account-panel[data-kind=account][data-signed-out=false]{padding-top:max(6px,env(safe-area-inset-top))}.sfi-account-panel[data-kind=account][data-signed-out=false]>header{margin-bottom:8px;padding-bottom:5px}.sfi-account-panel .sfi-account-person{padding:12px;margin-bottom:12px}}

.sfi-account-panel[data-kind=chat]>header{margin-bottom:10px;min-height:44px;gap:8px;padding-bottom:8px;border-bottom:1px solid #bfe8fb24}
.sfi-account-panel[data-kind=chat]>header h2{font-size:18px;font-weight:400;letter-spacing:-.01em;color:#edf6fb}
.sfi-account-panel[data-kind=chat] .sfi-account-intro{margin-bottom:12px}
.sfi-account-panel[data-kind=chat] .sfi-account-body{padding:0;margin:0}
@media(max-width:640px){.sfi-account-panel[data-kind=chat]{top:calc(var(--sfi-global-action-top,8px) + var(--sfi-global-action-height,34px) + 8px);bottom:auto;right:9px;width:calc(100% - 18px);padding:12px;max-height:calc(100dvh - 70px)}}

@media(max-width:640px){.sfi-account-panel[data-kind=account][data-signed-out=false]{inset:calc(var(--sfi-global-action-top,12px) + var(--sfi-global-action-height,34px) + 8px) 9px max(9px,env(safe-area-inset-bottom));width:auto;height:auto;max-height:none;padding:10px 12px;border:1px solid #bfe8fb40;border-radius:15px}}


/* Desktop account destination: top navigation with bounded, readable content. */
@media(min-width:750px){
 .sfi-account-panel[data-kind=account][data-signed-out=false]{padding:24px clamp(24px,3vw,48px)}
 .sfi-account-panel[data-kind=account][data-signed-out=false]>header,
 .sfi-account-panel[data-kind=account][data-signed-out=false]>.sfi-account-status,
 .sfi-account-panel[data-kind=account][data-signed-out=false]>.sfi-account-body{max-width:960px}
 .sfi-account-panel[data-kind=account][data-signed-out=false]>.sfi-account-body{display:flex;flex-direction:column;gap:16px;align-items:stretch;padding-top:12px}
 .sfi-account-panel[data-kind=account][data-signed-out=false] .sfi-account-person{margin:0;padding:16px}
 .sfi-account-panel[data-kind=account][data-signed-out=false] .sfi-account-nav{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px;padding:8px;margin:0}
 .sfi-account-panel[data-kind=account][data-signed-out=false] .sfi-account-nav button{text-align:left;padding:12px 14px;min-height:44px}
 .sfi-account-panel[data-kind=account][data-signed-out=false] .sfi-account-content{width:100%;max-width:none;min-width:0;margin-inline:0}
 .sfi-account-panel[data-kind=account][data-account-page=profile] .sfi-account-content{display:grid;grid-template-columns:minmax(0,1fr);max-width:960px;gap:20px;align-items:start}
 .sfi-account-panel[data-kind=account][data-account-page=profile] .sfi-account-section{margin:0;padding:24px;border:1px solid #bfe8fb24;border-radius:16px;background:#bfe8fb04;min-width:0}
 .sfi-account-panel[data-kind=account][data-account-page=profile] .sfi-account-section h3{margin-top:0;font-size:20px}
 .sfi-account-panel[data-kind=account][data-account-page=profile] input[type=file]{width:100%;min-width:0}
 .sfi-account-panel[data-kind=account][data-signed-out=false]:not([data-account-page=profile]) .sfi-account-content{display:flex;flex-direction:column;gap:20px}
 .sfi-account-panel[data-kind=account][data-signed-out=false]:not([data-account-page=profile]) .sfi-account-content>.sfi-account-section,
 .sfi-account-panel[data-kind=account][data-account-page=recordings] .sfi-account-allowance{margin:0;padding:24px;border:1px solid #bfe8fb24;border-radius:16px;background:#bfe8fb04;min-width:0}
 .sfi-account-panel[data-kind=account][data-signed-out=false] .sfi-account-content>.sfi-account-section>h3{margin-top:0;font-size:20px}

}
@media(min-width:1100px){
 .sfi-account-panel[data-kind=account][data-account-page=profile] .sfi-account-content{grid-template-columns:minmax(0,1.35fr) minmax(280px,1fr)}
}

/* Account surface refinement: one aligned frame, existing ice-blue palette. */
.sfi-account-panel[data-kind=account][data-signed-out=false]{background:radial-gradient(ellipse at 50% 0%,#122332 0%,#07090d 62%)}
.sfi-account-panel[data-kind=account][data-signed-out=false] .sfi-account-brand{font-size:26px;letter-spacing:-.025em}
.sfi-account-panel[data-kind=account][data-signed-out=false] .sfi-account-heading-context{letter-spacing:.22em;color:var(--sfi-blue-muted)}
.sfi-account-panel[data-kind=account][data-signed-out=false] .sfi-account-person{background:linear-gradient(115deg,#bfe8fb0e,#bfe8fb03);border-color:#bfe8fb30;box-shadow:inset 0 1px #ffffff08}
.sfi-account-panel[data-kind=account][data-signed-out=false] .sfi-account-person strong{font-weight:400;letter-spacing:-.035em}
.sfi-account-panel[data-kind=account][data-signed-out=false] .sfi-account-nav{background:#03080c80;border-color:#bfe8fb26}
.sfi-account-panel[data-kind=account][data-signed-out=false] .sfi-account-nav button{flex:1;text-align:center}
.sfi-account-panel[data-kind=account][data-signed-out=false] .sfi-account-nav button[aria-current=page]{background:linear-gradient(180deg,#bfe8fb20,#bfe8fb0a);box-shadow:inset 0 1px #bfe8fb45,inset 0 -2px var(--sfi-blue);color:#e5f6ff}
.sfi-account-panel[data-kind=account][data-signed-out=false] .sfi-account-content>.sfi-account-section,
.sfi-account-panel[data-kind=account][data-account-page=recordings] .sfi-account-allowance{background:linear-gradient(145deg,#bfe8fb07,#03080c40);box-shadow:inset 0 1px #ffffff06}
.sfi-account-panel[data-kind=account][data-signed-out=false] .sfi-account-content input:not([type=checkbox]){background:#03080c80;border-color:#bfe8fb30}
.sfi-account-panel[data-kind=account][data-signed-out=false] .sfi-account-content label{color:#c5d9e5;font-size:12px}
@media(min-width:750px){
 .sfi-account-panel[data-kind=account][data-signed-out=false]{overflow-y:auto;scrollbar-gutter:stable both-edges}
 .sfi-account-panel[data-kind=account][data-signed-out=false]>.sfi-account-body{overflow:visible;flex:none;padding-inline:0}
 .sfi-account-panel[data-kind=account][data-signed-out=false]>header{flex-shrink:0}
 .sfi-account-panel[data-kind=account][data-signed-out=false] .sfi-account-person{padding:22px 24px}
 .sfi-account-panel[data-kind=account][data-signed-out=false] .sfi-account-person strong{font-size:28px}
}

.sfi-account-panel .sfi-account-danger{border-top:0;margin-top:0;padding-top:0}

/* The standalone library uses a high page layer. Account deep links must open
   above that layer as they do above ordinary World canvases. */
html.has-world-parallax-page .sfi-account-backdrop { z-index:2147483300; }
html.has-world-parallax-page .sfi-account-panel[data-kind=account] { z-index:2147483301; }

.sfi-account-courses{display:grid;gap:18px;margin-top:20px}
.sfi-account-course{padding:16px;border:1px solid #ffffff26;border-radius:12px;background:#ffffff04}
.sfi-account-course>a{font-size:16px;color:#d5eafb;font-weight:600;line-height:1.4}
.sfi-account-course p{margin:8px 0;font-size:13px}
.sfi-account-course small{display:block;line-height:1.5;color:#a3bed0}
.sfi-account-course progress{width:100%;height:7px;accent-color:#b5d9ee}
.sfi-account-course .sfi-account-actions{align-items:center;justify-content:space-between;gap:10px}
.sfi-account-course .sfi-account-actions a{color:#c4e6fa;font-size:13px;padding:10px 0}

/* Keep the email unsubscribe control visible above the profile editing fields. */
.sfi-account-panel[data-kind=account][data-account-page=profile] .sfi-account-content{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
.sfi-account-panel[data-kind=account][data-account-page=profile] .sfi-account-content>.sfi-account-section{margin:0;padding:22px;border:1px solid #bfe8fb24;border-radius:16px;min-width:0}
.sfi-account-panel .sfi-account-display-name{margin-top:20px;padding-top:18px;border-top:1px solid #bfe8fb24}
.sfi-account-panel .sfi-account-photo-preview{display:flex;align-items:center;gap:16px;padding:16px 0;margin:4px 0 18px;border-block:1px solid #bfe8fb24}
.sfi-account-photo-preview>span{font-size:12px;line-height:1.5;color:#c5d9e5}
.sfi-account-panel .sfi-account-photo-upload{display:grid;gap:10px}
.sfi-account-panel .sfi-account-photo-upload input{max-width:100%;min-width:0;font:12px/1.5 system-ui,sans-serif}
.sfi-account-panel .sfi-account-photo-upload input::file-selector-button{padding:9px 12px;margin-right:10px;border:1px solid #718da5;border-radius:6px;background:#1c3042;color:#e4f2fa;cursor:pointer}
.sfi-account-panel[data-kind=account][data-account-page=profile] [data-marketing-preferences]{grid-column:1/-1}
@media(min-width:750px){
 .sfi-account-panel[data-kind=account][data-account-page=profile] .sfi-account-content{grid-template-columns:minmax(0,1.35fr) minmax(250px,1fr)}
 .sfi-account-panel[data-account-page=profile] [data-profile-card=details]{grid-column:1;grid-row:1}
 .sfi-account-panel[data-account-page=profile] [data-profile-card=photo]{grid-column:2;grid-row:1}
 .sfi-account-panel[data-account-page=profile] .sfi-account-content:has(>[data-marketing-preferences])>[data-profile-card]{grid-row:2}
 .sfi-account-panel[data-account-page=profile] [data-marketing-preferences]{grid-row:1}
}
@media(max-width:480px){.sfi-account-panel[data-kind=account][data-account-page=profile] .sfi-account-content>.sfi-account-section{padding:16px}}

/* Plan details, available time and payment history have distinct, calm panels. */
.sfi-account-panel[data-kind=account][data-signed-out=false][data-account-page=plan] .sfi-account-content{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
.sfi-account-panel[data-account-page=plan] [data-plan-card]{min-width:0;border-top:2px solid #789dbb!important}
.sfi-account-panel[data-account-page=plan] [data-plan-card=time]{border-top-color:#a494c5!important;background:radial-gradient(ellipse at 100% 0,#7062ac18,transparent 75%),#0c141e}
.sfi-account-panel .sfi-account-subscription-heading{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:24px 0 16px}
.sfi-account-subscription-heading>strong{font:400 27px/1.2 Georgia,serif;color:#dcecff}
.sfi-account-panel .sfi-account-subscription-facts{margin:0 0 20px;display:grid}
.sfi-account-subscription-facts>div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid #bfe8fb20;font:13px/1.5 system-ui,sans-serif}
.sfi-account-subscription-facts dt{color:#9bb5ca}.sfi-account-subscription-facts dd{margin:0;text-align:right;color:#e0ecf7}
.sfi-account-panel .sfi-account-billing-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.sfi-account-panel .sfi-account-billing-actions>button,.sfi-account-panel .sfi-account-billing-action{min-height:42px;margin:0;padding:10px 14px;border:1px solid #647e9d;background:linear-gradient(130deg,#24384c,#25304a);color:#e5effb;border-radius:8px;font-weight:500}
.sfi-account-panel .sfi-account-billing-actions>button:hover,.sfi-account-panel .sfi-account-billing-action:hover{background:#344963;border-color:#a3bad2;color:#fff}
.sfi-account-time-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:center;margin:22px 0}
.sfi-account-panel .sfi-account-time-heading .sfi-account-time-remaining{margin:0;line-height:1.2;font:400 32px/1.2 Georgia,serif;color:#e2d5ff}
.sfi-account-time-heading>span{grid-column:1;margin-top:3px;font-size:12px}
.sfi-account-time-action{grid-column:2;grid-row:1/3}
.sfi-account-panel [data-plan-card=time] progress{width:100%;height:7px;accent-color:#bca7e5;margin:0 0 8px}
.sfi-account-panel [data-plan-card=history]{grid-column:1/-1}
.sfi-account-payment{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;padding:17px 0;border-bottom:1px solid #bfe8fb22}
.sfi-account-payment>div{display:grid;gap:6px;align-content:start;min-width:0}
.sfi-account-payment strong{font-size:14px;font-weight:500;line-height:1.5;overflow-wrap:anywhere}
.sfi-account-payment small{font-size:12px;color:#a4b9cb;line-height:1.4}
.sfi-account-payment-amount{text-align:right}
.sfi-account-payment a{font-size:12px;color:#c4dff4;text-underline-offset:3px}
.sfi-account-panel .sfi-account-lesson-history-row{padding:18px 0;gap:10px}
.sfi-account-lesson-history-row small{font-size:12px;line-height:1.5;color:#a7bdcf}
.sfi-account-lesson-history-row progress{width:100%;height:5px;accent-color:#b7cce5}
@media(min-width:900px){.sfi-account-panel[data-kind=account][data-signed-out=false][data-account-page=plan] .sfi-account-content{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:480px){.sfi-account-time-heading{grid-template-columns:minmax(0,1fr)}.sfi-account-time-action{grid-column:1;grid-row:3;margin-top:14px}.sfi-account-panel .sfi-account-billing-actions>button{flex:1}.sfi-account-payment{gap:10px}.sfi-account-payment strong{font-size:13px}}

@media(max-width:749px){
 .sfi-account-panel[data-kind=account][data-account-page=plan] .sfi-account-content>[data-plan-card]{margin:0;padding:16px;border:1px solid #bfe8fb24;border-radius:14px}
 .sfi-account-panel[data-account-page=plan] [data-plan-card]>h3{margin-top:0}
}

.sfi-account-transcript { max-height:55dvh; overflow:auto; overflow-wrap:anywhere; }
.sfi-account-transcript p { display:grid; gap:4px; white-space:pre-wrap; }
.sfi-account-transcript strong { color:var(--sfi-blue); }
/* Account sections grow with the shared library; labels retain usable width. */
@media(max-width:749px){
 .sfi-account-panel[data-kind=account][data-signed-out=false] .sfi-account-nav{display:flex;flex-wrap:wrap;gap:4px;padding:6px}
 .sfi-account-panel[data-kind=account][data-signed-out=false] .sfi-account-nav button{flex:1 0 auto;min-width:76px;padding:10px 8px;min-height:44px;white-space:nowrap}
}
@media(min-width:750px) and (max-width:1119px){
 .sfi-account-panel[data-kind=account][data-signed-out=false] .sfi-account-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* Compact conversation bubbles within the shared learning module. */
.sfi-account-panel[data-kind=chat] .sfi-account-chat-log { gap:12px; padding:4px 2px; max-height:42dvh; }
.sfi-account-panel .sfi-account-chat-log .sfi-account-chat-message { align-self:flex-start; width:94%; padding:10px 12px 7px; border:1px solid var(--sfi-panel-border); border-radius:14px 14px 14px 4px; background:rgba(191,232,251,.045); }
.sfi-account-panel .sfi-account-chat-log .sfi-account-chat-message[data-own=true] { align-self:flex-end; border-radius:14px 14px 4px 14px; background:rgba(191,232,251,.10); }
.sfi-account-panel .sfi-account-message-identity { gap:6px; margin:0 0 5px; }
.sfi-account-panel .sfi-account-message-identity .sfi-account-avatar { display:none; }
.sfi-account-panel .sfi-account-message-identity strong { min-width:0; font-size:11px; font-weight:600; color:var(--sfi-blue); }
.sfi-account-panel .sfi-account-message-identity time { flex-shrink:0; margin-left:auto; font-size:9px; opacity:.75; }
.sfi-account-panel .sfi-account-chat-message p { margin:0; font-size:13px; line-height:1.5; }
.sfi-account-panel .sfi-chat-message-actions { justify-content:flex-end; gap:4px; margin:3px -4px -3px 0; }
.sfi-account-panel .sfi-chat-message-actions button { min-height:24px; padding:3px 5px; font-size:10px; font-weight:400; border:1px solid transparent; border-radius:5px; color:var(--sfi-muted); }
.sfi-account-panel .sfi-chat-message-actions button:hover { color:var(--sfi-text); border-color:var(--sfi-control-border); }
.sfi-account-panel .sfi-chat-message-actions select { min-height:28px; padding:3px 5px; font-size:11px; }
.sfi-account-panel [data-chat-composer] { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:8px; margin-top:8px; padding:8px; border:1px solid var(--sfi-panel-border); border-radius:11px; background:rgba(0,0,0,.12); }
.sfi-account-panel [data-chat-composer] label { min-width:0; }
.sfi-account-panel [data-chat-composer] textarea { min-height:48px; max-height:150px; margin:0; padding:5px; font-size:13px; line-height:1.5; border:1px solid var(--sfi-panel-border); border-radius:7px; resize:vertical; }
.sfi-account-panel [data-chat-composer] textarea:focus-visible { outline:none; background:rgba(191,232,251,.045); }
.sfi-account-panel [data-chat-composer] .sfi-chat-send { min-height:36px; margin:0; padding:8px 11px; border:1px solid var(--sfi-panel-border); border-radius:7px; background:rgba(191,232,251,.045); color:var(--sfi-blue); font-size:12px; }