/* The neutral account.php page background is shared by account dialogs.
   Paint it once on the outer dialog; embedded pages and tab containers let it
   show through. Card, input and selected-tab surfaces remain independent. */
:root {
  --cy-modal-page-color: #0c0e13;
  --cy-modal-page-image: linear-gradient(155deg, #15181e 0%, #0c0e13 54%, #101218 100%);
  --cy-modal-sticky-color: #15181e;
}
html[data-cy-color-scheme="light"] {
  --cy-modal-page-color: #eef3f8;
  --cy-modal-page-image: linear-gradient(180deg, rgba(247,250,253,.9), rgba(238,243,248,.94)), none;
  --cy-modal-sticky-color: #f6f9fc;
}

/* A named important layer wins over legacy page-specific important paints
   without changing their dimensions, typography or interactive states. */
@layer cybox-modal-surfaces {
  #profile-workspace-overlay .profile-workspace-dialog,
  #profile-workspace-overlay [data-profile-auxiliary="1"],
  #account-achievements-overlay .account-ach-modal,
  #account-shop-dialog,
  #topbar-profile-overlay .topbar-profile-modal,
  #arena-player-profile,
  :is(#friends-overlay, #promo-overlay, #student-notify-overlay, #student-notify-detail-overlay) > .rf-modal,
  :is(#friends-locked-overlay, #referral-locked-overlay) > .rl-modal,
  #dr-overlay > .dr-modal,
  #rl-overlay:not(.dr-embedded-roulette) > .rl-modal,
  #bday-overlay .bday-modal,
  #avatarCropModal .avatar-crop-dialog,
  body.shop-embedded :is(.cart-dropdown, .orders-modal, #buy-modal .sm-modal) {
    background: var(--cy-modal-page-image) var(--cy-modal-page-color) !important;
  }

  #profile-workspace-overlay :is(.profile-workspace-main, .profile-workspace-content, .profile-workspace-settings, .profile-workspace-section-head, #profile-workspace-settings-frame),
  #profile-workspace-overlay [data-profile-hosted="1"] > :is(.rf-modal, .dr-modal, .rl-modal),
  #profile-workspace-overlay [data-profile-auxiliary="1"] > .rf-modal,
  #friends-overlay :is(.fr-tab-panels, .fr-tab-panel),
  #profile-workspace-overlay :is(.fr-panel, .student-notify-pane, .student-notify-detail-actions),
  #account-achievements-overlay :is(.account-ach-head, .account-ach-body, .account-ach-loading),
  #account-shop-dialog :is(.account-shop-header, .account-shop-content, .account-shop-status, iframe),
  #bday-overlay :is(.bday-head, .bday-body),
  #avatarCropModal :is(.avatar-crop-head, .avatar-crop-actions),
  body.shop-embedded .orders-head {
    background: transparent !important;
  }

  /* Same-origin frames render over the dialog's single continuous background. */
  html[data-profile-embedded="1"],
  html[data-profile-embedded="1"] body,
  html[data-profile-embedded="1"] :is(.settings-container, #luxeCard, .settings-header, .avatar-section, .settings-tabs-wrap, .settings-form),
  html:has(> body:is(.shop-embedded, .shop-flow-embedded)),
  body:is(.shop-embedded, .shop-flow-embedded),
  body.shop-embedded :is(.layout-wrapper, .page-content),
  body.shop-flow-embedded > .wrap {
    background: transparent !important;
  }
  html[data-profile-embedded="1"] #luxeCard :is(.settings-tab-panel, .general-settings-panel, .social-settings-panel, .theme-settings-panel, .delivery-settings-panel) {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }
  body:is(.shop-embedded, .shop-flow-embedded)::before,
  body:is(.shop-embedded, .shop-flow-embedded)::after {
    display: none !important;
  }

  /* Scrolled content must not show through a sticky dialog header. */
  #arena-player-profile .arena-player-toolbar,
  body.shop-embedded :is(.cart-head, #buy-modal .sm-header) {
    background: var(--cy-modal-sticky-color) !important;
  }

  #profile-workspace-overlay .profile-workspace-backdrop,
  #account-achievements-overlay .account-ach-backdrop,
  #account-shop-dialog::backdrop {
    background: rgba(8,9,16,.55) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }
}