/* Global visual baseline for unified brand dialogs.
   Loaded last to avoid being overridden by legacy page-level CSS. */

:root {
  --app-brand-modal-header-bg: linear-gradient(135deg, #f0b90b 0%, #e8b308 100%);
  --app-brand-modal-header-fg: #1e2329;
  --app-unified-modal-radius: 16px;
  --app-unified-modal-shadow: 0 22px 60px rgba(15, 23, 42, 0.32);
  --app-unified-modal-header-bleed: 2px;
  --app-brand-dialog-title-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --app-brand-dialog-title-font-size: 18px;
  --app-brand-dialog-title-font-weight: 700;
  --app-brand-dialog-title-line-height: 1.2;
  --app-brand-dialog-title-letter-spacing: 0.01em;
  --app-brand-modal-close-border: transparent;
  --app-brand-modal-close-bg: rgba(11, 14, 17, 0.12);
  --app-brand-modal-close-bg-hover: rgba(11, 14, 17, 0.20);
  --app-brand-modal-close-color: #ffffff;
  --app-close-btn-bg: rgba(11, 14, 17, 0.12);
  --app-close-btn-bg-hover: rgba(11, 14, 17, 0.20);
  --app-close-btn-color: #ffffff;
  --modal-close-bg: rgba(11, 14, 17, 0.12);
  --modal-close-bg-hover: rgba(11, 14, 17, 0.20);
  --modal-close-color: #ffffff;
}

.modal-content,
.binance-modal-content,
.generic-modal-dialog,
.modal-container[data-app-modal-panel="1"],
.modal-container:has(.modal-header, .generic-modal-header, .binance-modal-header, .info-dialog-header, .button-dialog-header, .app-brand-dialog__header, [class*="-modal-header"], [class*="modal__header"], [class*="-dialog-header"], [class*="dialog__header"]),
.analytics-modal__container,
[class*="-dialog-container"],
[class*="dialog__container"],
.info-dialog-container,
.button-dialog-container,
[class*="modal__dialog"] {
  border-radius: var(--app-unified-modal-radius) !important;
  overflow: hidden !important;
  background-clip: padding-box !important;
  background: var(--bg-card, #ffffff) !important;
  isolation: isolate;
}

.modal-content:has(.modal-header, .app-brand-dialog__header),
.binance-modal-content:has(.binance-modal-header, .app-brand-dialog__header),
.generic-modal-dialog:has(.generic-modal-header, .app-brand-dialog__header, .support-ticket-modal-header),
.modal-container[data-app-modal-panel="1"]:has(.modal-header, .generic-modal-header, .binance-modal-header, .info-dialog-header, .button-dialog-header, .app-brand-dialog__header, [class*="-modal-header"], [class*="modal__header"], [class*="-dialog-header"], [class*="dialog__header"]),
.modal-container:has(.modal-header, .generic-modal-header, .binance-modal-header, .info-dialog-header, .button-dialog-header, .app-brand-dialog__header, [class*="-modal-header"], [class*="modal__header"], [class*="-dialog-header"], [class*="dialog__header"]),
.analytics-modal__container:has(.modal-header, .app-brand-dialog__header, [class*="-modal-header"], [class*="modal__header"], [class*="-dialog-header"], [class*="dialog__header"]),
.info-dialog-container:has(.info-dialog-header, .app-brand-dialog__header),
.button-dialog-container:has(.button-dialog-header, .app-brand-dialog__header),
[class*="-dialog-container"]:has(.app-brand-dialog__header, [class*="-dialog-header"], [class*="dialog__header"]),
[class*="dialog__container"]:has(.app-brand-dialog__header, [class*="-dialog-header"], [class*="dialog__header"]),
[class*="modal__dialog"]:has(.modal-header, .app-brand-dialog__header, [class*="-modal-header"], [class*="modal__header"], [class*="-dialog-header"], [class*="dialog__header"]) {
  border: none !important;
  box-shadow: var(--app-unified-modal-shadow) !important;
}

#change-password-modal .modal-container,
#generic-modal .generic-modal-dialog {
  border: none !important;
  background: var(--bg-card, #ffffff) !important;
}

.app-brand-dialog__panel {
  border-radius: var(--app-unified-modal-radius) !important;
  overflow: hidden !important;
  box-shadow: var(--app-unified-modal-shadow) !important;
  background-clip: padding-box !important;
}

.app-brand-dialog__header {
  background: var(--app-brand-modal-header-bg) !important;
  color: var(--app-brand-modal-header-fg) !important;
  border-bottom: 1px solid rgba(30, 35, 41, 0.12) !important;
}

.modal-header,
.generic-modal-header,
.binance-modal-header,
.support-ticket-modal-header,
[class*="-dialog-header"],
[class*="dialog__header"],
.button-dialog-header,
.info-dialog-header,
[class*="-modal-header"],
[class*="modal__header"] {
  position: relative;
  z-index: 0;
  overflow: hidden !important;
  isolation: isolate;
  border-top-left-radius: var(--app-unified-modal-radius) !important;
  border-top-right-radius: var(--app-unified-modal-radius) !important;
  background-clip: padding-box !important;
}

.generic-modal-header,
.support-ticket-modal-header {
  margin: 0 !important;
}

.modal-header::before,
.generic-modal-header::before,
.binance-modal-header::before,
.support-ticket-modal-header::before,
.button-dialog-header::before,
.info-dialog-header::before,
[class*="-modal-header"]::before,
[class*="modal__header"]::before,
[class*="-dialog-header"]::before,
[class*="dialog__header"]::before {
  content: "";
  position: absolute;
  top: calc(var(--app-unified-modal-header-bleed) * -1);
  left: calc(var(--app-unified-modal-header-bleed) * -1);
  right: calc(var(--app-unified-modal-header-bleed) * -1);
  bottom: 0;
  background: inherit;
  border-top-left-radius: calc(var(--app-unified-modal-radius) + var(--app-unified-modal-header-bleed));
  border-top-right-radius: calc(var(--app-unified-modal-radius) + var(--app-unified-modal-header-bleed));
  pointer-events: none;
  z-index: -1;
}

.app-brand-dialog__title {
  color: var(--app-brand-modal-header-fg) !important;
}

.app-brand-dialog__title,
.generic-modal-title,
.modal-title,
.button-dialog-title,
.modal-header h1,
.modal-header h2,
.modal-header h3,
.modal-header h4,
.modal-header h5,
.modal-header h6,
.binance-modal-header h3,
[class*="-modal-header"] h1,
[class*="-modal-header"] h2,
[class*="-modal-header"] h3,
[class*="-modal-header"] h4,
[class*="-modal-header"] h5,
[class*="-modal-header"] h6,
[class*="modal__header"] h1,
[class*="modal__header"] h2,
[class*="modal__header"] h3,
[class*="modal__header"] h4,
[class*="modal__header"] h5,
[class*="modal__header"] h6,
[class*="-dialog-header"] h1,
[class*="-dialog-header"] h2,
[class*="-dialog-header"] h3,
[class*="-dialog-header"] h4,
[class*="-dialog-header"] h5,
[class*="-dialog-header"] h6,
[class*="dialog__header"] h1,
[class*="dialog__header"] h2,
[class*="dialog__header"] h3,
[class*="dialog__header"] h4,
[class*="dialog__header"] h5,
[class*="dialog__header"] h6,
[class*="-dialog-title"],
[class*="dialog__title"],
[class*="modal__title"],
[class*="modal-title"] {
  margin: 0 !important;
  font-family: var(--app-brand-dialog-title-font-family) !important;
  font-size: var(--app-brand-dialog-title-font-size) !important;
  font-weight: var(--app-brand-dialog-title-font-weight) !important;
  line-height: var(--app-brand-dialog-title-line-height) !important;
  letter-spacing: var(--app-brand-dialog-title-letter-spacing) !important;
}

.modal-close,
.app-close-btn,
.generic-modal-close,
.renewal-close-btn,
.support-ticket-close-btn,
.button-dialog-close,
.app-brand-dialog__close,
.app-close-btn.app-close-btn--transparent,
.app-close-btn.app-close-btn--light,
[data-auto-top-close="1"],
#case-detail-modal .modal-close,
#case12315DetailModal .modal-close,
#xzfy-detail-modal .modal-close,
#xzfy-dossier-modal .xzfy-dossier-modal__close,
#info-disclosure-detail-modal .modal-close.app-close-btn,
#info-disclosure-tracking-modal .modal-close.app-close-btn,
#info-disclosure-close-modal .modal-close.app-close-btn,
#operation-log-modal-info-disclosure .modal-close.app-close-btn,
.dajia-modal-header .dajia-modal-close,
.dajia-modal-header .dajia-modal-close.app-close-btn,
.dajia-modal-header .modal-close.dajia-modal-close,
.recon-offline-evidence-viewer-modal__close,
.recon-offline-select-case-modal .select-case-modal-header .modal-close.app-close-btn,
.recon-offline-draft-picker-modal__header .modal-close.app-close-btn {
  appearance: none;
  -webkit-appearance: none;
  border: none !important;
  background: var(--app-brand-modal-close-bg, rgba(11, 14, 17, 0.12)) !important;
  color: var(--app-brand-modal-close-color, #ffffff) !important;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  border-radius: 50%;
  padding: 0;
  line-height: 1;
  font-size: 22px;
  box-shadow: none !important;
  text-shadow: 0 1px 2px rgba(11, 14, 17, 0.45) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.modal-close:hover,
.app-close-btn:hover,
.generic-modal-close:hover,
.renewal-close-btn:hover,
.support-ticket-close-btn:hover,
.button-dialog-close:hover,
.app-brand-dialog__close:hover,
.app-close-btn.app-close-btn--transparent:hover,
.app-close-btn.app-close-btn--light:hover,
[data-auto-top-close="1"]:hover,
#case-detail-modal .modal-close:hover,
#case12315DetailModal .modal-close:hover,
#xzfy-detail-modal .modal-close:hover,
#xzfy-dossier-modal .xzfy-dossier-modal__close:hover,
#info-disclosure-detail-modal .modal-close.app-close-btn:hover,
#info-disclosure-tracking-modal .modal-close.app-close-btn:hover,
#info-disclosure-close-modal .modal-close.app-close-btn:hover,
#operation-log-modal-info-disclosure .modal-close.app-close-btn:hover,
.dajia-modal-header .dajia-modal-close:hover,
.dajia-modal-header .dajia-modal-close.app-close-btn:hover,
.dajia-modal-header .modal-close.dajia-modal-close:hover,
.recon-offline-evidence-viewer-modal__close:hover,
.recon-offline-select-case-modal .select-case-modal-header .modal-close.app-close-btn:hover,
.recon-offline-draft-picker-modal__header .modal-close.app-close-btn:hover {
  background: var(--app-brand-modal-close-bg-hover, rgba(11, 14, 17, 0.20)) !important;
  color: var(--app-brand-modal-close-color, #ffffff) !important;
  transform: rotate(90deg) scale(1.04);
}