/* Shared admin dialog theme — Edit Profile is the reference.
   All dialog surfaces and controls consume these tokens. */
:root {
 --dialog-bg:#ffffff;--dialog-header:#ffffff;--dialog-body:#f8f9fc;
 --dialog-footer:#ffffff;--dialog-field:#ffffff;--dialog-border:#e3e7ed;
 --dialog-text:#263245;--dialog-muted:#66758a;--dialog-placeholder:#87919f;
 --dialog-secondary:#f0f2f6;--dialog-secondary-text:#344054;
 --dialog-accent:#315ff4;--dialog-accent-text:#ffffff;
 --dialog-close:#f0f2f6;--dialog-close-text:#344054;
}
body.dark {
 --dialog-bg:#262626;--dialog-header:#262626;--dialog-body:#262626;
 --dialog-footer:#262626;--dialog-field:#303030;--dialog-border:#484848;
 --dialog-text:#f4f4f4;--dialog-muted:#b7bec9;--dialog-placeholder:#aeb4be;
 --dialog-secondary:#393939;--dialog-secondary-text:#f4f4f4;
 --dialog-accent:#315ff4;--dialog-accent-text:#ffffff;
 --dialog-close:#343434;--dialog-close-text:#f4f4f4;
}
html body dialog:is(.account-dialog,.site-settings-dialog,.profile-editor-dialog,.notification-dialog)[open] {
 background:var(--dialog-bg)!important;color:var(--dialog-text)!important;
 border-color:var(--dialog-border)!important;color-scheme:normal;
}
html body.dark dialog:is(.account-dialog,.site-settings-dialog,.profile-editor-dialog,.notification-dialog)[open] {color-scheme:dark}
html body dialog:is(.account-dialog,.site-settings-dialog,.profile-editor-dialog,.notification-dialog)[open] > form {
 background:var(--dialog-bg)!important;color:var(--dialog-text)!important;
}
html body dialog:is(.account-dialog,.site-settings-dialog,.profile-editor-dialog,.notification-dialog)[open] :is(.dialog-heading,.account-dialog-header,.profile-editor-header,.modal-header) {
 background:var(--dialog-header)!important;background-image:none!important;
 color:var(--dialog-text)!important;border-color:var(--dialog-border)!important;
}
html body dialog:is(.account-dialog,.site-settings-dialog,.profile-editor-dialog,.notification-dialog)[open] :is(.account-dialog-body,.site-settings-body,.profile-editor-body,.modal-body) {
 background:var(--dialog-body)!important;color:var(--dialog-text)!important;
}
html body dialog:is(.account-dialog,.site-settings-dialog,.profile-editor-dialog,.notification-dialog)[open] :is(.account-dialog-footer,.site-settings-footer,.profile-editor-footer,.modal-footer) {
 background:var(--dialog-footer)!important;background-image:none!important;
 border-color:var(--dialog-border)!important;color:var(--dialog-text)!important;
}
html body dialog:is(.account-dialog,.site-settings-dialog,.profile-editor-dialog,.notification-dialog)[open] :is(.account-form-section,.form-section,.account-dialog-section,.site-settings-section,.settings-section-content,.account-fields-grid,.account-security-note,.account-identity,.profile-editor-section,.profile-editor-identity,.site-details,.account-details,fieldset) {
 background:var(--dialog-bg)!important;background-image:none!important;
 border-color:var(--dialog-border)!important;color:var(--dialog-text)!important;
}
html body dialog:is(.account-dialog,.site-settings-dialog,.profile-editor-dialog,.notification-dialog)[open] :is(.dialog-heading,.profile-editor-header,.account-form-section,.account-dialog-body,.site-settings-body,.account-dialog-footer,.site-settings-footer,.profile-editor-body) :is(h1,h2,h3,h4,label,legend,strong) {
 color:var(--dialog-text)!important;-webkit-text-fill-color:var(--dialog-text)!important;opacity:1!important;
}
html body dialog:is(.account-dialog,.site-settings-dialog,.profile-editor-dialog,.notification-dialog)[open] :is(.muted,small,.form-hint,.form-status,.dialog-heading p,.profile-editor-header p) {
 color:var(--dialog-muted)!important;-webkit-text-fill-color:var(--dialog-muted)!important;
}
html body dialog:is(.account-dialog,.site-settings-dialog,.profile-editor-dialog,.notification-dialog)[open] :is(input:not([type=radio]):not([type=checkbox]),textarea,select) {
 background:var(--dialog-field)!important;color:var(--dialog-text)!important;
 -webkit-text-fill-color:var(--dialog-text)!important;border-color:var(--dialog-border)!important;
}
html body dialog:is(.account-dialog,.site-settings-dialog,.profile-editor-dialog,.notification-dialog)[open] :is(input,textarea)::placeholder {
 color:var(--dialog-placeholder)!important;opacity:1!important;
}
html body dialog:is(.account-dialog,.site-settings-dialog,.profile-editor-dialog,.notification-dialog)[open] :is(.dialog-heading,.account-dialog-header,.profile-editor-header,.modal-header) :is(button.modal-close,button[data-close],.profile-editor-close) {
 background:var(--dialog-close)!important;color:var(--dialog-close-text)!important;
 -webkit-text-fill-color:var(--dialog-close-text)!important;border:1px solid var(--dialog-border)!important;
}
html body dialog:is(.account-dialog,.site-settings-dialog,.profile-editor-dialog,.notification-dialog)[open] :is(.account-dialog-footer,.site-settings-footer,.profile-editor-footer,.modal-footer) :is(button.outline,button.cancel,button[data-close],.profile-editor-cancel) {
 background:var(--dialog-secondary)!important;background-image:none!important;
 color:var(--dialog-secondary-text)!important;-webkit-text-fill-color:var(--dialog-secondary-text)!important;
 border:1px solid var(--dialog-border)!important;opacity:1!important;box-shadow:none!important;
}
html body dialog:is(.account-dialog,.site-settings-dialog,.profile-editor-dialog,.notification-dialog)[open] :is(.account-dialog-footer,.site-settings-footer,.profile-editor-footer,.modal-footer) :is(button.primary,.profile-editor-save) {
 color:var(--dialog-accent-text)!important;-webkit-text-fill-color:var(--dialog-accent-text)!important;
}
html body dialog:is(.account-dialog,.site-settings-dialog,.profile-editor-dialog,.notification-dialog)[open] :is(.account-heading-icon,.profile-editor-icon) {
 background:var(--dialog-secondary)!important;color:var(--dialog-text)!important;border-color:var(--dialog-border)!important;
}
html body.dark dialog:is(.account-dialog,.site-settings-dialog,.profile-editor-dialog,.notification-dialog)[open] :is(.settings-options label,.account-banking-settings,.site-settings-section summary) {
 background:var(--dialog-bg)!important;color:var(--dialog-text)!important;border-color:var(--dialog-border)!important;
}
html body.dark dialog:is(.account-dialog,.site-settings-dialog,.profile-editor-dialog,.notification-dialog)[open] :is(.settings-options label,.site-settings-section summary) :is(strong,span) {
 color:var(--dialog-text)!important;-webkit-text-fill-color:var(--dialog-text)!important;
}
html body.dark dialog:is(.account-dialog,.site-settings-dialog,.profile-editor-dialog,.notification-dialog)[open] :is(.settings-options label,.site-settings-section summary) small {
 color:var(--dialog-muted)!important;-webkit-text-fill-color:var(--dialog-muted)!important;
}
html body dialog:is(.account-dialog,.site-settings-dialog,.profile-editor-dialog,.notification-dialog)[open] :is(input,textarea,select,button):focus-visible {
 outline:2px solid var(--dialog-accent)!important;outline-offset:2px;
}
html body.dark dialog:is(.account-dialog,.site-settings-dialog,.profile-editor-dialog,.notification-dialog)[open] :is(button.outline,button.cancel,button[data-close]):hover {
 filter:brightness(1.15);
}

/* Create Account and Edit Profile use identical shared surface tokens.
   The extra specificity is intentional: legacy bundle styles have id selectors. */
html body.dark :is(#add-dialog,#profile-dialog)[open] :is(.dialog-heading,.account-dialog-body,.account-dialog-footer,.account-form-section,.account-fields-grid,#new-site-fields,#new-domain-list),
html body.dark :is(#add-dialog,#profile-dialog)[open] > form {
 background:var(--dialog-bg)!important;background-color:var(--dialog-bg)!important;
 background-image:none!important;border-color:var(--dialog-border)!important;
 color:var(--dialog-text)!important;
}
html body.dark :is(#add-dialog,#profile-dialog)[open] :is(.account-form-section h3,.account-form-section label,.account-form-section legend,.dialog-heading h2,.dialog-heading h2 span) {
 color:var(--dialog-text)!important;-webkit-text-fill-color:var(--dialog-text)!important;
 opacity:1!important;
}
html body.dark :is(#add-dialog,#profile-dialog)[open] :is(.account-form-section small,.dialog-heading p) {
 color:var(--dialog-muted)!important;-webkit-text-fill-color:var(--dialog-muted)!important;
 opacity:1!important;
}
html body.dark :is(#add-dialog,#profile-dialog)[open] .account-dialog-footer button.outline {
 background:var(--dialog-secondary)!important;background-image:none!important;
 color:var(--dialog-secondary-text)!important;-webkit-text-fill-color:var(--dialog-secondary-text)!important;
 border-color:var(--dialog-border)!important;opacity:1!important;
}
html body.dark :is(#add-dialog,#profile-dialog)[open] .dialog-heading .modal-close {
 background:var(--dialog-close)!important;color:var(--dialog-close-text)!important;
 border-color:var(--dialog-border)!important;
}
html body.dark :is(#add-dialog,#profile-dialog)[open] .account-form-section :is(input:not([type=checkbox]):not([type=radio]),select,textarea) {
 background:var(--dialog-field)!important;color:var(--dialog-text)!important;
 -webkit-text-fill-color:var(--dialog-text)!important;border-color:var(--dialog-border)!important;
}
/* Transaction badges: centralized semantic colors, never pale in dark mode. */
:root{
 --txn-deposit-bg:#e5f5ec;--txn-deposit-fg:#176b43;--txn-deposit-border:#b6dec7;
 --txn-withdraw-bg:#fce9ed;--txn-withdraw-fg:#963447;--txn-withdraw-border:#eac2cb;
}
body.dark{
 --txn-deposit-bg:#183c2e;--txn-deposit-fg:#a4f0c4;--txn-deposit-border:#387d59;
 --txn-withdraw-bg:#46252e;--txn-withdraw-fg:#ffb5c1;--txn-withdraw-border:#8a4858;
}
html body.dark :is(.transaction-type.deposit,span.transaction-type.deposit,.transaction-type.deposit:not(:hover)){
 background:var(--txn-deposit-bg)!important;color:var(--txn-deposit-fg)!important;
 -webkit-text-fill-color:var(--txn-deposit-fg)!important;border:1px solid var(--txn-deposit-border)!important;
 box-shadow:none!important;opacity:1!important;
}
html body.dark :is(.transaction-type.withdraw,span.transaction-type.withdraw,.transaction-type.withdraw:not(:hover)){
 background:var(--txn-withdraw-bg)!important;color:var(--txn-withdraw-fg)!important;
 -webkit-text-fill-color:var(--txn-withdraw-fg)!important;border:1px solid var(--txn-withdraw-border)!important;
 box-shadow:none!important;opacity:1!important;
}
html body.dark .transaction-type :is(span,strong,small,svg){
 color:inherit!important;-webkit-text-fill-color:currentColor!important;stroke:currentColor!important;
}



/* Dark-mode overrides for legacy Fund dialog IDs and the dashboard nav selector. */
html body.dark dialog#fund-dialog.account-dialog[open],
html body.dark dialog#fund-dialog.account-dialog[open] > form {
 background:var(--dialog-bg)!important;background-color:var(--dialog-bg)!important;
 background-image:none!important;color:var(--dialog-text)!important;
 border-color:var(--dialog-border)!important;
}
html body.dark #fund-dialog[open] .dialog-heading,
html body.dark #fund-dialog[open] .account-dialog-footer {
 background:var(--dialog-header)!important;background-color:var(--dialog-header)!important;
 background-image:none!important;color:var(--dialog-text)!important;
 border-color:var(--dialog-border)!important;
}
html body.dark #fund-dialog[open] .account-dialog-body {
 background:var(--dialog-body)!important;background-color:var(--dialog-body)!important;
 color:var(--dialog-text)!important;
}
html body.dark #fund-dialog[open] .dialog-heading h2,
html body.dark #fund-dialog[open] .fund-fields label {
 color:var(--dialog-text)!important;-webkit-text-fill-color:var(--dialog-text)!important;
}
html body.dark #fund-dialog[open] .account-heading-icon,
html body.dark #fund-dialog[open] .modal-close {
 background:var(--dialog-close)!important;color:var(--dialog-close-text)!important;
 border-color:var(--dialog-border)!important;
}
html body.dark #fund-dialog[open] .fund-fields :is(input,select) {
 background:var(--dialog-field)!important;color:var(--dialog-text)!important;
 -webkit-text-fill-color:var(--dialog-text)!important;border-color:var(--dialog-border)!important;
}
html body.dark #fund-dialog[open] .account-dialog-body>.muted {
 background:var(--dialog-secondary)!important;color:var(--dialog-muted)!important;
 border-color:var(--dialog-border)!important;
}
html body.dark #fund-dialog[open] .account-dialog-footer .outline {
 background:var(--dialog-secondary)!important;color:var(--dialog-secondary-text)!important;
 -webkit-text-fill-color:var(--dialog-secondary-text)!important;border-color:var(--dialog-border)!important;
}
html body.dark #fund-dialog[open] .account-dialog-footer .primary {
 background:var(--dialog-accent)!important;color:var(--dialog-accent-text)!important;
 -webkit-text-fill-color:var(--dialog-accent-text)!important;border-color:var(--dialog-accent)!important;
}

/* The legacy ID-specific home rule outranks the shared dark sidebar rule. */
html body.dark #admin-sidebar #downline-nav.nav-active,
html body.dark #admin-sidebar #downline-nav[aria-current="page"] {
 background:#383838!important;background-color:#383838!important;background-image:none!important;
 color:#f4f4f4!important;-webkit-text-fill-color:#f4f4f4!important;
 border-color:transparent!important;box-shadow:none!important;
}
html body.dark #admin-sidebar #downline-nav.nav-active:hover,
html body.dark #admin-sidebar #downline-nav[aria-current="page"]:hover {
 background:#444!important;background-color:#444!important;color:#fff!important;
 -webkit-text-fill-color:#fff!important;
}


/* Dark Mode for the Create Account preview editor (.v141-*).
   The preview script injects light-mode component rules at runtime, so these
   important declarations keep every modal surface on the shared dark palette. */
html body.dark dialog.v141-preview-dialog.v141-account-editor[open] {
 background:var(--dialog-bg)!important;background-color:var(--dialog-bg)!important;
 background-image:none!important;color:var(--dialog-text)!important;
 border-color:var(--dialog-border)!important;color-scheme:dark;
}
html body.dark dialog.v141-preview-dialog.v141-account-editor[open] > form,
html body.dark dialog.v141-preview-dialog.v141-account-editor[open] .v141-preview-form {
 background:transparent!important;color:var(--dialog-text)!important;
}
html body.dark dialog.v141-preview-dialog.v141-account-editor[open] .v141-editor-head,
html body.dark dialog.v141-preview-dialog.v141-account-editor[open] .v141-editor-footer {
 background:var(--dialog-header)!important;background-color:var(--dialog-header)!important;
 background-image:none!important;color:var(--dialog-text)!important;
 border-color:var(--dialog-border)!important;
}
html body.dark dialog.v141-preview-dialog.v141-account-editor[open] .v141-editor-body {
 background:#202020!important;background-color:#202020!important;
 color:var(--dialog-text)!important;
}
html body.dark dialog.v141-preview-dialog.v141-account-editor[open] .v141-editor-section {
 background:#303030!important;background-color:#303030!important;
 background-image:none!important;border-color:var(--dialog-border)!important;
 color:var(--dialog-text)!important;
}
html body.dark dialog.v141-preview-dialog.v141-account-editor[open] :is(.v141-editor-head h2,.v141-editor-section h3,.v141-editor-grid label,.v141-editor-grid label span) {
 color:var(--dialog-text)!important;-webkit-text-fill-color:var(--dialog-text)!important;
 opacity:1!important;
}
html body.dark dialog.v141-preview-dialog.v141-account-editor[open] :is(.v141-editor-head p,.v141-editor-grid label small,.v141-preview-notice) {
 color:var(--dialog-muted)!important;-webkit-text-fill-color:var(--dialog-muted)!important;
 opacity:1!important;
}
html body.dark dialog.v141-preview-dialog.v141-account-editor[open] :is(.v141-editor-grid input,.v141-editor-grid select) {
 background:var(--dialog-field)!important;background-color:var(--dialog-field)!important;
 background-image:none!important;color:var(--dialog-text)!important;
 -webkit-text-fill-color:var(--dialog-text)!important;border-color:var(--dialog-border)!important;
 color-scheme:dark;
}
html body.dark dialog.v141-preview-dialog.v141-account-editor[open] .v141-editor-grid input::placeholder {
 color:var(--dialog-placeholder)!important;opacity:1!important;
}
html body.dark dialog.v141-preview-dialog.v141-account-editor[open] .v141-editor-icon {
 background:var(--dialog-secondary)!important;color:var(--dialog-text)!important;
 border-color:var(--dialog-border)!important;
}
html body.dark dialog.v141-preview-dialog.v141-account-editor[open] .v141-editor-close,
html body.dark dialog.v141-preview-dialog.v141-account-editor[open] .v141-editor-cancel {
 background:var(--dialog-secondary)!important;background-color:var(--dialog-secondary)!important;
 background-image:none!important;color:var(--dialog-secondary-text)!important;
 -webkit-text-fill-color:var(--dialog-secondary-text)!important;
 border-color:var(--dialog-border)!important;opacity:1!important;box-shadow:none!important;
}
html body.dark dialog.v141-preview-dialog.v141-account-editor[open] .v141-editor-submit {
 background:var(--dialog-accent)!important;color:var(--dialog-accent-text)!important;
 -webkit-text-fill-color:var(--dialog-accent-text)!important;
 border-color:var(--dialog-accent)!important;
}


/* Wallet Deposit / Withdraw modal: override legacy operation tint and white
   footer controls with a single charcoal surface in Dark Mode. */
html body.dark dialog#wallet-dialog.account-dialog[open],
html body.dark dialog#wallet-dialog.account-dialog[open] > form {
 background:#262626!important;background-color:#262626!important;
 background-image:none!important;color:#f0f0f0!important;
 border-color:#484848!important;color-scheme:dark;
}
html body.dark dialog#wallet-dialog.account-dialog[open] .dialog-heading,
html body.dark dialog#wallet-dialog.account-dialog[open] .account-dialog-footer {
 background:#262626!important;background-color:#262626!important;
 background-image:none!important;color:#f0f0f0!important;
 border-color:#484848!important;
}
html body.dark dialog#wallet-dialog.account-dialog[open] .dialog-heading :is(h2,p,strong,small) {
 color:#f0f0f0!important;-webkit-text-fill-color:#f0f0f0!important;opacity:1!important;
}
html body.dark dialog#wallet-dialog.account-dialog[open] .dialog-heading p,
html body.dark dialog#wallet-dialog.account-dialog[open] .account-dialog-body .muted {
 color:#b7bec9!important;-webkit-text-fill-color:#b7bec9!important;opacity:1!important;
}
html body.dark dialog#wallet-dialog.account-dialog[open] .account-dialog-body,
html body.dark dialog#wallet-dialog.account-dialog[open] .account-dialog-body>label,
html body.dark dialog#wallet-dialog.account-dialog[open] .account-dialog-body>section {
 background:#262626!important;background-color:#262626!important;
 background-image:none!important;color:#f0f0f0!important;
 border-color:#484848!important;
}
html body.dark dialog#wallet-dialog.account-dialog[open] .account-dialog-body :is(label,h3,strong) {
 color:#f0f0f0!important;-webkit-text-fill-color:#f0f0f0!important;opacity:1!important;
}
html body.dark dialog#wallet-dialog.account-dialog[open] .account-dialog-body :is(input:not([type=checkbox]):not([type=radio]),select,textarea) {
 background:#303030!important;background-color:#303030!important;
 color:#f0f0f0!important;-webkit-text-fill-color:#f0f0f0!important;
 border-color:#484848!important;color-scheme:dark;
}
html body.dark dialog#wallet-dialog.account-dialog[open] .account-dialog-body input::placeholder {
 color:#aeb4be!important;opacity:1!important;
}
html body.dark dialog#wallet-dialog.account-dialog[open] .account-dialog-footer .outline,
html body.dark dialog#wallet-dialog.account-dialog[open] .dialog-heading .modal-close {
 background:#393939!important;background-color:#393939!important;
 background-image:none!important;color:#f0f0f0!important;
 -webkit-text-fill-color:#f0f0f0!important;border:1px solid #565656!important;
 opacity:1!important;box-shadow:none!important;
}
html body.dark dialog#wallet-dialog.account-dialog[open] .account-dialog-footer .primary {
 background:#198754!important;color:#fff!important;-webkit-text-fill-color:#fff!important;
 border-color:#198754!important;
}
html body.dark dialog#wallet-dialog.account-dialog[open]:has(.withdraw-heading) .account-dialog-footer .primary {
 background:#c63848!important;border-color:#c63848!important;
}

/* The downline page creates its account breadcrumb with V141-specific classes.
   Legacy .crumb/.role-chip dark rules do not match these elements. */
html body.dark #downline-page #breadcrumbs .v141-crumb {
 background:#303030!important;color:#f0f0f0!important;
 -webkit-text-fill-color:#f0f0f0!important;border-color:#494949!important;
}
html body.dark #downline-page #breadcrumbs .v141-crumb :is(strong,span:not(.v141-crumb-chip)) {
 color:#f0f0f0!important;-webkit-text-fill-color:#f0f0f0!important;
}
html body.dark #downline-page #breadcrumbs .v141-crumb-chip {
 border:1px solid transparent!important;font-weight:700!important;opacity:1!important;
}
html body.dark #downline-page #breadcrumbs .v141-role-super-admin {
 background:#493653!important;color:#f2caff!important;-webkit-text-fill-color:#f2caff!important;border-color:#745487!important;
}
html body.dark #downline-page #breadcrumbs .v141-role-site-admin {
 background:#254451!important;color:#b1e7fa!important;-webkit-text-fill-color:#b1e7fa!important;border-color:#416e81!important;
}
html body.dark #downline-page #breadcrumbs .v141-role-sub-admin {
 background:#264633!important;color:#b7f2c9!important;-webkit-text-fill-color:#b7f2c9!important;border-color:#407456!important;
}
html body.dark #downline-page #breadcrumbs .v141-role-super-agent {
 background:#46452a!important;color:#f2e9aa!important;-webkit-text-fill-color:#f2e9aa!important;border-color:#777147!important;
}
html body.dark #downline-page #breadcrumbs .v141-role-master-agent {
 background:#503044!important;color:#ffbadb!important;-webkit-text-fill-color:#ffbadb!important;border-color:#804e69!important;
}
html body.dark #downline-page #breadcrumbs .v141-role-player {
 background:#4b3a24!important;color:#ffe0a8!important;-webkit-text-fill-color:#ffe0a8!important;border-color:#806340!important;
}
html body.dark #downline-page #breadcrumbs .v141-crumb-separator {
 color:#a6a6a6!important;
}


/* Transaction report rows use unclassed spans with inline light-mode colors.
   Match those legacy inline values so dark mode can override them reliably. */
html body.dark #transactions-page #transaction-rows td:nth-child(2)>span[style*="background: rgb(232, 247, 239)"] {
 background:#183c2e!important;color:#a4f0c4!important;-webkit-text-fill-color:#a4f0c4!important;
 border:1px solid #387d59!important;
}
html body.dark #transactions-page #transaction-rows td:nth-child(2)>span[style*="background: rgb(255, 240, 240)"] {
 background:#46252e!important;color:#ffb5c1!important;-webkit-text-fill-color:#ffb5c1!important;
 border:1px solid #8a4858!important;
}

/* Compact Site Settings dialog while preserving a full-width mobile layout. */
html body dialog.site-settings-dialog[open] {
  box-sizing: border-box;
  width: min(680px, calc(100vw - 40px));
  max-width: 680px;
  max-height: 82dvh;
  border-radius: 16px;
}
html body dialog.site-settings-dialog[open] #site-form {
  max-height: 82dvh;
}
html body dialog.site-settings-dialog[open] .dialog-heading {
  padding: 16px 20px;
}
html body dialog.site-settings-dialog[open] .site-settings-body {
  padding: 14px 20px;
}
html body dialog.site-settings-dialog[open] .site-settings-footer {
  padding: 12px 20px 14px;
}
html body dialog.site-settings-dialog[open] .site-settings-section {
  margin: 8px 0;
}
html body dialog.site-settings-dialog[open] .site-settings-section > summary {
  padding: 14px 16px;
}
html body dialog.site-settings-dialog[open] .settings-section-content {
  padding: 15px 16px;
}
@media (max-width: 600px) {
  html body dialog.site-settings-dialog[open] {
    width: calc(100vw - 28px);
    max-width: none;
    max-height: 84dvh;
  }
  html body dialog.site-settings-dialog[open] #site-form {
    max-height: 84dvh;
  }
  html body dialog.site-settings-dialog[open] .dialog-heading {
    padding: 14px 16px;
  }
  html body dialog.site-settings-dialog[open] .site-settings-body {
    padding: 12px 14px;
  }
  html body dialog.site-settings-dialog[open] .site-settings-footer {
    padding: 10px 14px 12px;
  }
  html body dialog.site-settings-dialog[open] .site-settings-footer > label {
    gap: 5px;
  }
  html body dialog.site-settings-dialog[open] .site-settings-footer input {
    min-height: 38px;
  }
  html body dialog.site-settings-dialog[open] .site-settings-actions {
    gap: 10px;
  }
  html body dialog.site-settings-dialog[open] .site-settings-actions > button {
    min-height: 40px;
  }
}

/* Mobile and desktop-mode phone viewports: target the actual /admin Site Settings dialog. */
@media (max-width: 1100px), (pointer: coarse) and (hover: none) {
  html body dialog.site-settings-dialog[open] {
    width: min(560px, calc(100vw - 32px)) !important;
    max-width: 560px !important;
    max-height: 76dvh !important;
  }
  html body dialog.site-settings-dialog[open] #site-form {
    max-height: 76dvh !important;
  }
}

/* Match the reference layout: compact cancel on the left, wide save on the right. */
html body #timezone-dialog .account-dialog-footer {
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  justify-content:stretch!important;
  gap:12px!important;
}
html body #timezone-dialog .account-dialog-footer #timezone-notice:not(:empty) {
  flex:1 0 100%!important;
}
html body #timezone-dialog .account-dialog-footer [data-close] {
  order:1!important;
  flex:0 0 128px!important;
  width:128px!important;
  margin:0!important;
}
html body #timezone-dialog .account-dialog-footer .primary {
  order:2!important;
  width:auto!important;
  min-width:0!important;
  flex:1 1 0!important;
  justify-self:stretch!important;
  margin:0!important;
}
@media(max-width:420px) {
  html body #timezone-dialog .account-dialog-footer {gap:10px!important;padding:14px!important}
  html body #timezone-dialog .account-dialog-footer [data-close] {
    flex-basis:96px!important;
    width:96px!important;
  }
}
/* Compact searchable country/city picker for the timezone dialog. */
html body #timezone-dialog .timezone-field {
  display:grid;
  gap:8px;
  min-width:0;
}
html body #timezone-dialog .timezone-field-label,
html body #timezone-dialog .timezone-picker-search-label > span {
  color:#344054;
  font-size:13px;
  font-weight:650;
}
html body #timezone-dialog .timezone-picker {
  position:relative;
  min-width:0;
}
html body #timezone-dialog .timezone-picker-trigger {
  width:100%;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 14px;
  border:1px solid #d9e1ee;
  border-radius:10px;
  background:#fff;
  color:#253247;
  text-align:left;
  font:inherit;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
html body #timezone-dialog .timezone-picker-trigger:hover,
html body #timezone-dialog .timezone-picker-trigger[aria-expanded="true"] {
  border-color:#8ba2ff;
  box-shadow:0 0 0 3px #315df51a;
}
html body #timezone-dialog .timezone-picker-trigger > span {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
html body #timezone-dialog .timezone-picker-trigger svg {
  width:18px;
  height:18px;
  flex:0 0 auto;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .16s ease;
}
html body #timezone-dialog .timezone-picker-trigger[aria-expanded="true"] svg {
  transform:rotate(180deg);
}
html body #timezone-dialog .timezone-picker.is-ready > #timezone-offset {
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  min-height:0!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
  border:0!important;
}
html body #timezone-dialog .timezone-picker-panel {
  margin-top:8px;
  padding:10px;
  border:1px solid #e1e7f0;
  border-radius:12px;
  background:#fff;
  box-shadow:0 10px 26px #1b2b4514;
}
html body #timezone-dialog .timezone-picker-panel[hidden] {
  display:none!important;
}
html body #timezone-dialog .timezone-picker-search-label {
  display:grid;
  gap:7px;
  margin:0 0 8px;
}
html body #timezone-dialog .timezone-picker-search-label > span {
  font-size:11px;
  color:#68758a;
}
html body #timezone-dialog #timezone-location-search {
  width:100%;
  min-height:42px;
  box-sizing:border-box;
  padding:0 12px;
  border:1px solid #d9e1ee;
  border-radius:9px;
  outline:none;
  background:#f8faff;
  color:#253247;
  font:inherit;
  font-size:14px;
}
html body #timezone-dialog #timezone-location-search:focus {
  border-color:#5778fa;
  box-shadow:0 0 0 3px #315df51a;
  background:#fff;
}
html body #timezone-dialog .timezone-location-options {
  max-height:min(270px,36dvh);
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
}
html body #timezone-dialog .timezone-option-group + .timezone-option-group {
  margin-top:4px;
  padding-top:5px;
  border-top:1px solid #edf0f5;
}
html body #timezone-dialog .timezone-option-country {
  margin:0;
  padding:8px 9px 5px;
  color:#758198;
  font-size:11px;
  font-weight:700;
  letter-spacing:.035em;
  line-height:1.3;
  text-transform:uppercase;
}
html body #timezone-dialog .timezone-option {
  width:100%;
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 9px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#29364a;
  text-align:left;
  font:inherit;
  cursor:pointer;
}
html body #timezone-dialog .timezone-option:hover,
html body #timezone-dialog .timezone-option[aria-selected="true"] {
  background:#eef2ff;
  color:#2848c8;
}
html body #timezone-dialog .timezone-option-title {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
  font-weight:550;
}
html body #timezone-dialog .timezone-option-detail {
  flex:0 0 auto;
  color:#78859a;
  font-size:11px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
html body #timezone-dialog .timezone-location-empty {
  margin:0;
  padding:16px 8px;
  color:#78859a;
  text-align:center;
  font-size:13px;
}
html body #timezone-dialog .timezone-location-empty[hidden] {
  display:none!important;
}
html body.dark #timezone-dialog .timezone-field-label,
html body.dark #timezone-dialog .timezone-picker-search-label > span {
  color:#d0d8e5;
}
html body.dark #timezone-dialog .timezone-picker-trigger,
html body.dark #timezone-dialog .timezone-picker-panel {
  border-color:#3b475b;
  background:#1c2431;
  color:#e4eaf3;
}
html body.dark #timezone-dialog #timezone-location-search {
  border-color:#3b475b;
  background:#151d29;
  color:#e4eaf3;
}
html body.dark #timezone-dialog #timezone-location-search:focus {
  background:#1c2431;
}
html body.dark #timezone-dialog .timezone-option-group + .timezone-option-group {
  border-color:#303b4e;
}
html body.dark #timezone-dialog .timezone-option-country,
html body.dark #timezone-dialog .timezone-option-detail,
html body.dark #timezone-dialog .timezone-location-empty {
  color:#9aa8bc;
}
html body.dark #timezone-dialog .timezone-option {
  color:#e0e6ef;
}
html body.dark #timezone-dialog .timezone-option:hover,
html body.dark #timezone-dialog .timezone-option[aria-selected="true"] {
  background:#293a59;
  color:#dbe5ff;
}
@media(max-width:480px) {
  html body #timezone-dialog .timezone-picker-trigger {min-height:46px;font-size:13px}
  html body #timezone-dialog .timezone-picker-panel {padding:8px}
  html body #timezone-dialog .timezone-location-options {max-height:min(240px,32dvh)}
  html body #timezone-dialog .timezone-option {min-height:40px}
}