/* Account center composition, restored from the 2026-10-10 information hierarchy.
   Current account renderers, controls, native dialogs and request ownership remain authoritative. */
.hidden { display:none!important; }
.turnstile-slot { min-height:0; }
.turnstile-slot:not(:empty) { margin-top:4px; min-height:65px; }
#redeemForm input { text-transform:uppercase; }

html:root[data-platform-theme] body.feika-ui.feika-account {
  --account-page-inset:28px;
  --account-selection-face:var(--brand-soft);
  --account-selection-ink:var(--text);
  min-height:var(--platform-viewport-height);
  & .app-shell { position:relative; z-index:1; min-width:0; }
  & .page { min-width:0; }
  & .account-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; margin:0 0 18px; min-width:0; }
  & .account-brand { display:flex; align-items:center; gap:12px; min-width:0; }
  & .account-brand-copy { min-width:0; }
  & #accountPageTitle { margin:0; color:var(--text); font-size:26px; font-weight:750; line-height:1.3; }
  & #accountPageDescription { margin:5px 0 0; color:var(--ink-2); font-size:12px; line-height:1.7; }
  & .account-session { min-width:0; max-width:100%; }
  & #sessionState { padding:0; color:var(--ink-2); font-size:12px; background:transparent; border:0; }
  & .side-nav { gap:4px; padding:6px; border:1px solid var(--line-soft); border-radius:13px; background:var(--surface); box-shadow:var(--shadow-card); }
  & .side-nav [data-ui-control=navigation] { position:relative; gap:7px; width:auto; min-width:0; --ui-target-size:36px; padding:9px 13px; border:0; border-radius:8px; color:var(--muted); font-size:12px; font-weight:500; box-shadow:none; }
  & .side-nav [data-ui-control=navigation] svg { flex:none; width:15px; height:15px; }
  & .side-nav [data-ui-control=navigation][aria-current=page] {
    color:var(--account-selection-ink)!important; --control-metadata-ink:var(--account-selection-ink);
    background:var(--account-selection-face)!important; box-shadow:none; font-weight:650;
  }
  & .side-nav [data-ui-control=navigation][aria-current=page]::after { content:""; position:absolute; left:13px; right:13px; bottom:1px; height:2px; border-radius:2px; background:var(--brand); }
  & .side-nav [data-ui-control=navigation]:hover:not([aria-current=page]) { color:var(--text); background:var(--hover-bg)!important; }
  & .account-dashboard { display:block; min-width:0; }
  & .account-profile { position:relative; isolation:isolate; min-width:0; margin-bottom:16px; padding:20px; overflow:hidden; border:1px solid var(--line-soft); border-radius:16px; background:linear-gradient(110deg,var(--surface),var(--brand-soft)); box-shadow:var(--shadow-card); }
  & .account-profile::before { content:""; position:absolute; z-index:-1; inset:0 0 0 auto; width:78%; pointer-events:none; background:url('/static/media/ui/creator-world.webp') right bottom/auto 100% no-repeat; opacity:calc(var(--decor-opacity,.8) * .35); }
  & .account-profile-body { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 20px; min-width:0; }
  & .account-identity { display:flex; align-items:center; gap:20px; min-width:0; }
  & .account-avatar { display:grid; place-items:center; flex:none; width:72px; height:72px; border:1px solid var(--line); border-radius:50%; overflow:hidden; background:var(--surface); color:var(--ink-2); font-size:30px; font-weight:500; }
  & .account-avatar img { display:block; width:100%; height:100%; object-fit:cover; }
  & .account-profile-copy { min-width:0; }
  & #accountIdentityName { margin:0; max-height:none; overflow:visible; color:var(--text); font-size:19px; line-height:1.4; font-weight:700; overflow-wrap:anywhere; }
  & #accountIdentityEmail { margin:7px 0 0; max-height:none; overflow:visible; color:var(--ink-2); font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
  & .account-chips { display:flex; align-items:center; flex-wrap:wrap; gap:8px; min-width:0; margin-left:92px; }
  & .account-chips .ui-description-list { container-type:normal; min-width:0; max-width:100%; margin:0; padding:5px 10px; border-radius:7px; background:var(--soft); }
  & .account-chips .ui-description-list>div { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 12px; }
  & .account-chips :is(dt,dd) { min-width:0; margin:0; font-size:11px; line-height:1.6; }
  & .account-chips .ui-card-actions { margin:0; padding:0; }
  & .account-profile-actions { grid-column:2; grid-row:1 / span 2; display:flex; align-items:flex-start; flex-wrap:wrap; gap:8px; }
  & #dashboardView .ui-control { --ui-target-size:36px; --ui-control-font-size:13px; --ui-control-padding:7px 12px; }
  & .account-metrics { display:grid; grid-template-columns:1.15fr 1.12fr 1.02fr .78fr; gap:12px; align-items:stretch; margin-bottom:24px; min-width:0; }
  & .account-stat { min-width:0; border:1px solid var(--line-soft); border-radius:15px; background:var(--surface); box-shadow:var(--shadow-card); }
  & .account-stat-body { display:grid; grid-template-columns:30px minmax(0,1fr); grid-template-rows:auto auto auto 1fr; gap:3px 12px; min-width:0; height:100%; padding:16px; }
  & .account-stat-heading { display:contents; }
  & .account-stat-icon { grid-column:1; grid-row:1 / span 3; display:grid; place-items:center; width:30px; height:30px; border-radius:9px; background:var(--brand-soft); color:var(--brand); }
  & .account-stat-icon svg { width:18px; height:18px; }
  & .account-stat-label { grid-column:2; margin:1px 0 2px; color:var(--ink-2); font-size:12px; line-height:1.6; }
  & .account-stat-value { grid-column:2; display:flex; align-items:baseline; flex-wrap:wrap; gap:7px; margin:4px 0; max-width:100%; max-height:none; color:var(--text); font-size:25px; font-weight:650; line-height:1.3; font-variant-numeric:tabular-nums; letter-spacing:-.025em; }
  & .account-stat-value>.ui-meta { font-size:11px; font-weight:400; color:var(--ink-2); }
  & .account-stat-meta { grid-column:2; max-width:100%; max-height:none; margin:0; color:var(--ink-2); font-size:11px; line-height:1.65; }
  & .account-stat-actions { grid-column:2; display:flex; align-items:flex-end; flex-wrap:wrap; gap:6px; min-width:0; padding-top:10px; }
  & .account-connection-state { grid-column:2; display:flex; align-items:center; gap:7px; margin:5px 0; color:var(--text); font-size:15px; font-weight:650; line-height:1.5; }
  & .account-connection-state::before { content:""; flex:none; width:7px; height:7px; border-radius:50%; background:var(--muted); }
  & .account-connection-state.ok::before { background:var(--ok); box-shadow:0 0 0 3px var(--success-soft); }
  & .account-shortcuts .account-stat-body { display:flex; flex-direction:column; gap:7px; }
  & .account-shortcuts h3 { margin:0 0 1px; font-size:13px; line-height:1.6; font-weight:650; }
  & .account-shortcut { display:flex; align-items:center; justify-content:space-between; min-width:0; min-height:30px; color:var(--ink-2); font-size:11px; text-decoration:none; }
  & .account-shortcut::after { content:"›"; margin-left:8px; color:var(--muted); }
  & .account-shortcut:hover { color:var(--brand); }
  & .account-dashboard-columns { display:grid; grid-template-columns:1.2fr 1fr; align-items:stretch; gap:18px; min-width:0; }
  & :is(.account-summary-panel,.account-ledger-panel) { min-width:0; padding:20px; border:1px solid var(--line-soft); border-radius:16px; background:var(--surface); box-shadow:var(--shadow-card); }
  & .account-section-title { display:flex; align-items:center; gap:8px; margin:0 0 22px; color:var(--text); font-size:17px; font-weight:700; line-height:1.5; }
  & .account-section-title svg { width:18px; height:18px; color:var(--brand); }
  & .account-system-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; min-width:0; }
  & .account-system-metric { min-width:0; padding:16px 12px; border-radius:13px; background:var(--panel-2); }
  & .account-system-body { display:grid; grid-template-columns:36px minmax(0,1fr); gap:4px 12px; min-width:0; }
  & .account-system-heading { display:contents; }
  & .account-system-icon { grid-column:1; grid-row:1 / span 3; display:grid; place-items:center; align-self:center; width:32px; height:32px; color:var(--brand); border-radius:10px; background:var(--brand-soft); }
  & .account-system-icon svg { width:21px; height:21px; }
  & .account-system-label { grid-column:2; color:var(--ink-2); font-size:12px; line-height:1.6; }
  & .account-system-value { grid-column:2; max-height:none; margin:0; color:var(--text); font-size:23px; font-weight:600; line-height:1.4; letter-spacing:-.025em; font-variant-numeric:tabular-nums; }
  & .account-system-meta { grid-column:2; max-height:none; margin:0; color:var(--ink-2); font-size:11px; line-height:1.7; }
  & .account-ledger { display:grid; gap:0; min-width:0; }
  & .account-ledger [data-ui-ledger-row] { display:block; min-width:0; padding:18px 0; border-bottom:1px solid var(--line); }
  & .account-ledger [data-ui-ledger-row]:first-child { padding-top:0; }
  & .account-ledger [data-ui-ledger-row]:last-child { padding-bottom:0; border-bottom:0; }
  & .account-ledger .ui-heading-row { align-items:baseline; gap:12px; }
  & .account-ledger .ui-card-title { min-width:0; max-height:none; color:var(--text); font-size:13px; font-weight:500; }
  & .account-ledger .ui-exact-value { max-height:none; margin:0; font-size:15px; font-weight:600; line-height:1.6; white-space:nowrap; }
  & .account-ledger .ui-meta { max-height:none; margin:8px 0 0; font-size:11px; line-height:1.65; color:var(--ink-2); }
  & .account-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding-top:14px; color:var(--muted); }
  & .account-footer>.ui-meta { font-size:11px; }
  & .account-footer-links { display:flex; flex-wrap:wrap; gap:6px; }
  & .account-footer-links .ui-control { border:0; background:transparent; color:var(--muted); font-size:11px; }
  & #accountHelp { width:100%; order:20; margin:12px 0 0; padding:0; border:0; box-shadow:none; background:transparent; }
  & #accountHelp>.ui-card-body { width:100%; display:flex; align-items:center; flex-wrap:wrap; flex-direction:row; gap:8px 14px; padding:0; }
  & #accountHelp :is(h3,p,a) { margin:0; color:var(--ink-2); font-size:11px; line-height:1.6; }
  & #accountHelp a { min-height:30px; padding:3px 8px; }
  & .account-read-status[hidden] { display:none; }
  & .ui-dialog { --ui-dialog-width:460px; }
  & .ui-dialog-header>div { min-width:0; }
  & #authView .ui-control { --ui-target-size:48px; --ui-control-font-size:16px; }
  & #authView .turnstile-slot:empty { display:none; }
}
html:root:is([data-platform-theme=feika],[data-platform-theme=painted-dark]) body.feika-ui.feika-account {
  --account-selection-face:color-mix(in srgb,var(--brand) 9%,var(--surface));
  & .account-profile::before { opacity:.1; filter:grayscale(.65); }
  & .account-stat-icon { color:var(--ink-2); background:var(--panel-2); }
  & .account-system-icon { color:var(--brand); background:var(--surface); }
}
html:root[data-platform-theme^=painted] body.feika-ui.feika-account :is(.account-profile,.account-stat,.account-summary-panel,.account-ledger-panel) {
  background-image:linear-gradient(var(--material-panel-wash),var(--material-panel-wash)),var(--material-canvas);
  background-size:auto,var(--material-size,720px) var(--material-size,720px);
  background-blend-mode:var(--material-blend,normal,normal);
}
@media(min-width:761px) {
  html:root[data-platform-theme] body.feika-ui.feika-account {
    & .app-shell { display:flex; flex-direction:column; width:min(1560px,100%); min-height:var(--platform-viewport-height); margin:0 auto; padding:24px var(--account-page-inset) 28px; }
    & .sidebar,& .page { display:contents; }
    & #accountHeader { order:-3; }
    & .side-nav { order:-2; display:flex; align-items:center; flex-direction:row; flex-wrap:wrap; margin:0 0 16px; }
    & .side-nav [data-i18n-title=securitySettings] { margin-left:auto; }
  }
}
@media(max-width:1200px) {
  html:root[data-platform-theme] body.feika-ui.feika-account .account-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  html:root[data-platform-theme] body.feika-ui.feika-account .account-dashboard-columns { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:760px) {
  html:root[data-platform-theme] body.feika-ui.feika-account {
    --account-page-inset:16px;
    & .app-shell { display:block; min-width:0; }
    & .sidebar { position:sticky; top:0; z-index:30; display:block; height:auto; min-height:0; padding:max(8px,env(safe-area-inset-top)) var(--account-page-inset) 8px; border:0; border-bottom:1px solid var(--line); background:var(--surface); }
    & .page { display:block; width:100%; min-width:0; margin:0; padding:18px var(--account-page-inset) max(32px,env(safe-area-inset-bottom)); }
    & .account-header { margin-bottom:18px; gap:10px; }
    & #accountPageTitle { font-size:24px; }
    & #sessionState { overflow-wrap:anywhere; }
    & .account-profile { padding:16px; }
    & .account-profile-body { grid-template-columns:minmax(0,1fr); gap:12px; }
    & .account-identity { gap:12px; }
    & .account-avatar { width:56px; height:56px; font-size:24px; }
    & .account-chips { margin-left:0; }
    & .account-profile-actions { grid-column:1; grid-row:auto; }
    & .account-metrics { gap:12px; margin-bottom:18px; }
    & .account-stat-body { display:flex; flex-direction:column; gap:7px; padding:14px; }
    & .account-stat-heading { display:flex; align-items:center; gap:8px; }
    & .account-stat-label { margin:0; font-size:11px; }
    & .account-stat-value { margin:0; font-size:22px; }
    & .account-stat-actions { padding-top:5px; margin-top:auto; }
    & .account-shortcut { min-height:36px; font-size:12px; }
    & :is(.account-summary-panel,.account-ledger-panel) { padding:16px; }
    & .account-section-title { margin-bottom:16px; }
    & .account-system-grid { gap:12px; }
    & .account-system-metric { padding:14px; }
    & .account-system-body { display:flex; flex-direction:column; gap:5px; }
    & .account-system-heading { display:flex; align-items:center; gap:8px; }
    & .account-system-value { font-size:21px; }
    & .account-ledger .ui-heading-row { flex-wrap:wrap; }
    & #accountHelp { display:none; }
  }
}
@media(max-width:380px) {
  html:root[data-platform-theme] body.feika-ui.feika-account :is(.account-metrics,.account-system-grid) { grid-template-columns:minmax(0,1fr); }
}
html:root[data-platform-theme] body.feika-ui.feika-account:has(#authView:not(.hidden)) {
  & .app-shell { display:block; }
  & :is(.sidebar,.page>#accountHeader) { display:none; }
  & .page { display:block; width:100%; max-width:540px; margin:0 auto; padding:clamp(32px,8vh,88px) 32px 40px; }
}
@media(max-width:760px) {
  html:root[data-platform-theme] body.feika-ui.feika-account:has(#authView:not(.hidden)) .page { padding:32px 20px; }
}