/* ABG Web Enhancement — Luxury Black-Gold (desktop)
   Loaded LAST to override scoped app styles.
   Catches all remaining white/light/blue surfaces and converts to coffee-black + champagne gold. */

:root {
  --wx-bg: #21180F;
  --wx-bg2: #1C160D;
  --wx-bg3: #292014;
  --wx-card: #171209;
  --wx-deep: #100D09;
  --wx-hover: #21180E;
  --wx-gold: #C8A66A;
  --wx-border: #8D7655;
  --wx-muted: #A28D75;
  --wx-light: #E9D1A4;
  --wx-hi: #F2DEB5;
  --wx-text: #F8E7C3;
  --wx-text2: #E9D1A4;
  --wx-dark: #24190D;
  --wx-line: rgba(200, 166, 106, .22);
  --wx-line-strong: rgba(200, 166, 106, .42);
  --wx-panel: rgba(16, 13, 9, .82);
  --wx-grad-card: linear-gradient(145deg, #21180E 0%, #171209 100%);
  --wx-grad-sel: linear-gradient(135deg, #F2DEB5 0%, #E9D1A4 60%, #C8A66A 100%);
  --wx-grad-btn: linear-gradient(135deg, #E9D1A4 0%, #C8A66A 100%);
  --wx-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}

/* ===== Global catch-all: kill bright backgrounds inside #app ===== */
#app [style*="background:#fff"],
#app [style*="background: #fff"],
#app [style*="background-color:#fff"],
#app [style*="background-color: #fff"],
#app [style*="background:#ffffff"],
#app [style*="background: #ffffff"] {
  background: var(--wx-card) !important;
}

/* ===== Login / Register pages ===== */
#app .login-content,
#app .loginVersion3,
#app .registerVersion3 {
  background: var(--wx-grad-card) !important;
  background-image: linear-gradient(160deg, var(--wx-bg) 0%, var(--wx-bg2) 55%, var(--wx-deep) 100%) !important;
  color: var(--wx-text) !important;
}

#app .login-content .login-content__header p,
#app .login-content .login-content__header span,
#app .login-content label,
#app .loginVersion3-form-container label,
#app .registerVersion3-form-group > label {
  color: var(--wx-light) !important;
}

#app .login-content .self-help p,
#app .login-content .self-help .forget,
#app .login-content .self-help p a,
#app .already-account a {
  color: var(--wx-muted) !important;
}

#app .login-content .self-help p a:hover,
#app .already-account a:hover {
  color: var(--wx-hi) !important;
}

#app .login-content input,
#app .login-content textarea,
#app .registerVersion3 input,
#app .registerVersion3 select,
#app .registerVersion3 textarea {
  background: rgba(0, 0, 0, .55) !important;
  border: 1px solid var(--wx-line) !important;
  color: var(--wx-text) !important;
}

#app .login-content input:focus,
#app .registerVersion3 input:focus,
#app .registerVersion3 select:focus {
  border-color: var(--wx-gold) !important;
}

#app .login-content input::placeholder,
#app .registerVersion3 input::placeholder,
#app .registerVersion3 textarea::placeholder {
  color: rgba(233, 209, 164, .55) !important;
}

/* next-step / submit buttons on register flow */
#app .next-step,
#app .login-content .submitBtn,
#app .loginVersion3 .submitBtn,
#app .registerVersion3 .submitBtn {
  background: var(--wx-grad-btn) !important;
  border: 1px solid var(--wx-hi) !important;
  color: var(--wx-dark) !important;
  box-shadow: 0 4px 14px rgba(200, 166, 106, .22) !important;
}

#app .next-step:hover,
#app .login-content .submitBtn:hover,
#app .registerVersion3 .submitBtn:hover {
  background: var(--wx-hi) !important;
  color: var(--wx-dark) !important;
}

/* register flow step indicators */
#app .content-header .title-type .type-two .num {
  background: var(--wx-gold) !important;
  color: var(--wx-dark) !important;
}
#app .content-header .title-type .type-two .info {
  color: var(--wx-light) !important;
}
#app .title-type .type-one .mCurrent .arrows,
#app .title-type .type-one .mCurrent .line {
  border-right-color: var(--wx-gold) !important;
}

#app .required-enter-tips,
#app [class*="required"] {
  color: var(--wx-muted) !important;
}

/* ===== Member center / left menu ===== */
#app .left-menu {
  color: var(--wx-text2) !important;
}

#app .left-menu .menu-area {
  background: var(--wx-panel) !important;
  border: 1px solid var(--wx-line) !important;
  box-shadow: var(--wx-shadow) !important;
}

#app .left-menu .menu-area .el-menu,
#app .left-menu .menu-area .el-menu-item,
#app .left-menu .menu-area .el-submenu__title {
  background: transparent !important;
  color: var(--wx-text2) !important;
  border-bottom: 1px solid var(--wx-line) !important;
}

#app .left-menu .menu-area .el-menu .el-menu-item:hover,
#app .left-menu .menu-area .el-menu .el-menu-item.is-active {
  color: var(--wx-dark) !important;
  background: var(--wx-grad-btn) !important;
  font-weight: 700 !important;
}

#app .left-menu .menu-area .el-menu-item.is-active::before {
  background: var(--wx-gold) !important;
}

#app .left-menu .menu-area .cutline {
  border-top-color: var(--wx-line) !important;
}

#app .left-menu .moneyTrading a {
  background: transparent !important;
  background-image: none !important;
}

#app .left-menu .moneyTrading a .item {
  background: var(--wx-card) !important;
  background-image: none !important;
  border: 1px solid var(--wx-border) !important;
  color: var(--wx-light) !important;
}

#app .left-menu .moneyTrading a .item .text {
  color: var(--wx-light) !important;
}

#app .left-menu .moneyTrading a:hover .item,
#app .left-menu .moneyTrading a .depositActive,
#app .left-menu .moneyTrading a .withdrawActive {
  background: var(--wx-grad-btn) !important;
  background-image: var(--wx-grad-btn) !important;
  color: var(--wx-dark) !important;
}

#app .left-menu .moneyTrading a:hover .item .text,
#app .left-menu .moneyTrading a .depositActive .text,
#app .left-menu .moneyTrading a .withdrawActive .text {
  color: var(--wx-dark) !important;
}

#app .left-menu .menu-area .walletCenter .wallet-amount {
  color: var(--wx-hi) !important;
}

#app .wallet-name,
#app .left-menu .wallet-name {
  color: var(--wx-light) !important;
}

/* member center body */
#app .member-center-bg,
#app .member-center-wrapper,
#app .member-center {
  background: var(--wx-bg) !important;
  color: var(--wx-text) !important;
}

#app .member-center-bg .member-center-wrapper .member-center .member-center-body,
#app .member-center-bg .member-center-wrapper .member-center .member-center-body.current {
  background: var(--wx-panel) !important;
  border: 1px solid var(--wx-line) !important;
  color: var(--wx-text) !important;
  box-shadow: var(--wx-shadow) !important;
}

#app .member-center-body .el-tabs__header {
  border-bottom-color: var(--wx-line) !important;
}

#app .member-center-body .el-tabs__item {
  color: var(--wx-muted) !important;
}

#app .member-center-body .el-tabs__item.is-active {
  color: var(--wx-hi) !important;
}

#app .member-center-body .el-tabs__active-bar {
  background: var(--wx-gold) !important;
}

/* ===== Bulletins / notifications ===== */
#app .home-bulletins-container {
  background: var(--wx-panel) !important;
  border: 1px solid var(--wx-line) !important;
  box-shadow: var(--wx-shadow) !important;
}

#app .home-bulletins-container .list-warp {
  background: var(--wx-card) !important;
  color: var(--wx-text2) !important;
}

#app .home-bulletins-container .list-warp .notice-sidebar-box {
  background: var(--wx-deep) !important;
  border-right: 1px solid var(--wx-line) !important;
}

#app .home-bulletins-container .list-warp .notice-sidebar-box ul li .content,
#app .bulletins-container .list-warp .notice-sidebar-box ul li .content {
  color: var(--wx-muted) !important;
}

#app .home-bulletins-container .list-warp .notice-sidebar-box ul li.active .content,
#app .bulletins-container .list-warp .notice-sidebar-box ul li.active .content {
  color: var(--wx-hi) !important;
}

/* notify popup */
#app .notify-popup-wrapper {
  background: var(--wx-card) !important;
  border: 1px solid var(--wx-line) !important;
  color: var(--wx-text) !important;
  box-shadow: var(--wx-shadow) !important;
}

#app .notify-popup-wrapper .header {
  background: var(--wx-deep) !important;
  border-bottom: 1px solid var(--wx-line) !important;
  color: var(--wx-light) !important;
}

/* ele-live-menu links */
#app .ele-live-menu-wrap ul li a {
  color: var(--wx-muted) !important;
}

#app .ele-live-menu-wrap ul li a:hover {
  color: var(--wx-hi) !important;
}

/* ===== Header user dropdown ===== */
#app .header-wrapper .header-wrapper__top .top-inner .after-login .user ul {
  background: var(--wx-panel) !important;
  border: 1px solid var(--wx-line) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45) !important;
}

#app .header-wrapper .header-wrapper__top .top-inner .after-login .user ul li {
  color: var(--wx-text2) !important;
  border-bottom-color: var(--wx-line) !important;
}

#app .header-wrapper .header-wrapper__top .top-inner .after-login .user ul li:hover {
  background: var(--wx-hover) !important;
  color: var(--wx-hi) !important;
}

/* ===== Sub-navigation menu items (blue gradients) ===== */
#app .header-wrapper__bot .inner .nav .subnav li .menu-con .el-item {
  background: var(--wx-card) !important;
  background-image: none !important;
  border: 1px solid var(--wx-line) !important;
  color: var(--wx-light) !important;
}

#app .header-wrapper__bot .inner .nav .subnav li .menu-con .el-item:hover {
  background: var(--wx-grad-btn) !important;
  background-image: var(--wx-grad-btn) !important;
  color: var(--wx-dark) !important;
  border-color: var(--wx-hi) !important;
}

#app .menu-con .box .sub-item p,
#app .menu-con .box .lo-right p {
  color: var(--wx-text) !important;
}

/* ===== Pagination ===== */
#app .el-pagination,
#app .el-pagination.is-background {
  color: var(--wx-text2) !important;
}

#app .el-pagination.is-background .el-pager li,
#app .el-pagination.is-background .btn-prev,
#app .el-pagination.is-background .btn-next,
#app .el-pagination .el-pager li,
#app .el-pagination .btn-prev,
#app .el-pagination .btn-next {
  background: var(--wx-card) !important;
  border: 1px solid var(--wx-border) !important;
  color: var(--wx-light) !important;
}

#app .el-pagination.is-background .el-pager li:hover,
#app .el-pagination.is-background .btn-prev:hover,
#app .el-pagination.is-background .btn-next:hover {
  background: var(--wx-hover) !important;
  color: var(--wx-hi) !important;
  border-color: var(--wx-gold) !important;
}

#app .el-pagination.is-background .el-pager li.is-active,
#app .el-pagination .el-pager li.is-active {
  background: var(--wx-grad-btn) !important;
  color: var(--wx-dark) !important;
  border-color: var(--wx-hi) !important;
}

#app .el-pagination .el-pagination__total,
#app .el-pagination .el-pagination__jump,
#app .el-pagination .el-pagination__sizes {
  color: var(--wx-muted) !important;
}

#app .el-pagination .el-pagination__jump .el-input__inner {
  background: var(--wx-card) !important;
  border-color: var(--wx-border) !important;
  color: var(--wx-text) !important;
}

/* ===== Element UI: select / dropdown / cascader panels ===== */
#app .el-select-dropdown,
#app .el-cascader-menus,
#app .el-cascader-menu,
#app .el-popper[x-placement^="bottom"],
#app .el-popper[x-placement^="top"] {
  background: var(--wx-panel) !important;
  border: 1px solid var(--wx-line) !important;
  color: var(--wx-text) !important;
}

#app .el-select-dropdown__item,
#app .el-cascader-menu__item {
  color: var(--wx-text2) !important;
}

#app .el-select-dropdown__item.hover,
#app .el-select-dropdown__item:hover,
#app .el-cascader-menu__item:hover {
  background: var(--wx-hover) !important;
  color: var(--wx-hi) !important;
}

#app .el-select-dropdown__item.selected,
#app .el-cascader-menu__item.is-active {
  color: var(--wx-dark) !important;
  background: var(--wx-grad-btn) !important;
  font-weight: 600 !important;
}

#app .el-popper .popper__arrow,
#app .el-popper .popper__arrow::after {
  border-bottom-color: var(--wx-panel) !important;
  border-top-color: var(--wx-panel) !important;
}

/* ===== Element UI: form elements ===== */
#app .el-form-item__label {
  color: var(--wx-light) !important;
}

#app .el-checkbox__label,
#app .el-radio__label {
  color: var(--wx-text2) !important;
}

#app .el-checkbox__inner,
#app .el-radio__inner {
  background: var(--wx-deep) !important;
  border-color: var(--wx-border) !important;
}

#app .el-checkbox__input.is-checked .el-checkbox__inner,
#app .el-radio__input.is-checked .el-radio__inner {
  background: var(--wx-gold) !important;
  border-color: var(--wx-hi) !important;
}

#app .el-checkbox__input.is-checked + .el-checkbox__label,
#app .el-radio__input.is-checked + .el-radio__label {
  color: var(--wx-hi) !important;
}

/* switch */
#app .el-switch.is-checked .el-switch__core {
  background: var(--wx-gold) !important;
  border-color: var(--wx-hi) !important;
}

#app .el-switch__core {
  background: var(--wx-deep) !important;
  border-color: var(--wx-border) !important;
}

/* tags */
#app .el-tag {
  background: var(--wx-card) !important;
  border-color: var(--wx-border) !important;
  color: var(--wx-light) !important;
}

#app .el-tag.el-tag--success {
  background: rgba(32, 214, 107, .12) !important;
  border-color: rgba(32, 214, 107, .4) !important;
  color: #20D66B !important;
}

#app .el-tag.el-tag--danger {
  background: rgba(228, 92, 82, .12) !important;
  border-color: rgba(228, 92, 82, .4) !important;
  color: #E45C52 !important;
}

#app .el-tag.el-tag--warning {
  background: rgba(217, 173, 98, .12) !important;
  border-color: rgba(217, 173, 98, .4) !important;
  color: var(--wx-hi) !important;
}

/* badge */
#app .el-badge__content {
  background: var(--wx-gold) !important;
  border-color: var(--wx-deep) !important;
  color: var(--wx-dark) !important;
}

/* progress */
#app .el-progress-bar__outer {
  background: var(--wx-deep) !important;
}

#app .el-progress-bar__inner {
  background: var(--wx-grad-btn) !important;
}

#app .el-progress__text {
  color: var(--wx-light) !important;
}

/* alert */
#app .el-alert {
  background: var(--wx-card) !important;
  border-color: var(--wx-line) !important;
  color: var(--wx-text2) !important;
}

#app .el-alert__title {
  color: var(--wx-text) !important;
}

/* tooltip */
#app .el-tooltip__popper {
  background: var(--wx-panel) !important;
  border: 1px solid var(--wx-line) !important;
  color: var(--wx-text) !important;
}

#app .el-tooltip__popper[x-placement^="top"] .popper__arrow,
#app .el-tooltip__popper[x-placement^="top"] .popper__arrow::after {
  border-top-color: var(--wx-panel) !important;
}
#app .el-tooltip__popper[x-placement^="bottom"] .popper__arrow,
#app .el-tooltip__popper[x-placement^="bottom"] .popper__arrow::after {
  border-bottom-color: var(--wx-panel) !important;
}

/* loading mask */
#app .el-loading-mask {
  background: rgba(16, 13, 9, .72) !important;
}

#app .el-loading-spinner .circular {
  color: var(--wx-gold) !important;
}

#app .el-loading-spinner .el-loading-text {
  color: var(--wx-light) !important;
}

/* message / notification */
#app .el-message,
#app .el-notification {
  background: var(--wx-panel) !important;
  border: 1px solid var(--wx-line) !important;
  color: var(--wx-text) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45) !important;
}

#app .el-message__content,
#app .el-notification__title,
#app .el-notification__content {
  color: var(--wx-text) !important;
}

/* date / time picker */
#app .el-picker-panel,
#app .el-date-table th,
#app .el-date-table td,
#app .el-picker-panel__body {
  background: var(--wx-panel) !important;
  color: var(--wx-text2) !important;
  border-color: var(--wx-line) !important;
}

#app .el-date-table td.current:not(.disabled) span,
#app .el-date-table td.today span {
  background: var(--wx-grad-btn) !important;
  color: var(--wx-dark) !important;
}

#app .el-date-table td.available:hover {
  background: var(--wx-hover) !important;
}

#app .el-picker-panel__icon-btn,
#app .el-date-picker__header-label {
  color: var(--wx-light) !important;
}

/* tabs (global, beyond theme) */
#app .el-tabs__nav-wrap::after {
  background-color: var(--wx-line) !important;
}

#app .el-tabs__item {
  color: var(--wx-muted) !important;
}

#app .el-tabs__item.is-active {
  color: var(--wx-hi) !important;
}

#app .el-tabs__active-bar {
  background: var(--wx-gold) !important;
}

/* table (global, beyond theme) */
#app .el-table,
#app .el-table__expanded-cell {
  background: var(--wx-panel) !important;
  color: var(--wx-text) !important;
}

#app .el-table th.el-table__cell,
#app .el-table th.el-table__cell > .cell {
  background: var(--wx-deep) !important;
  color: var(--wx-light) !important;
  border-bottom-color: var(--wx-line) !important;
}

#app .el-table td.el-table__cell,
#app .el-table tr {
  background: transparent !important;
  border-bottom-color: var(--wx-line) !important;
  color: var(--wx-text2) !important;
}

#app .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell,
#app .el-table__body tr:hover > td.el-table__cell {
  background: var(--wx-hover) !important;
  color: var(--wx-text) !important;
}

#app .el-table__empty-text,
#app .el-table__empty-block {
  color: var(--wx-muted) !important;
  background: var(--wx-panel) !important;
}

/* drawer */
#app .el-drawer {
  background: var(--wx-panel) !important;
  color: var(--wx-text) !important;
}

#app .el-drawer__header {
  color: var(--wx-light) !important;
  border-bottom: 1px solid var(--wx-line) !important;
}

/* ===== Footer ===== */
#app .footer {
  background: var(--wx-deep) !important;
  color: var(--wx-muted) !important;
  border-top: 1px solid var(--wx-line) !important;
}

#app .footer .footer-wrapper-two .brand-three a,
#app .footer a {
  color: var(--wx-muted) !important;
}

#app .footer a:hover {
  color: var(--wx-hi) !important;
}

/* ===== fs_img / about content ===== */
#app .fs_img .fs_txt {
  color: var(--wx-text2) !important;
}

#app .content dl .content-intro a {
  color: var(--wx-light) !important;
}

/* ===== Generic bright text catch-all (dark text on dark bg) ===== */
#app [style*="color:#333"],
#app [style*="color: #333"],
#app [style*="color:#666"],
#app [style*="color: #666"],
#app [style*="color:#999"],
#app [style*="color: #999"] {
  color: var(--wx-text2) !important;
}

/* ===== Scrollbars (web) ===== */
#app ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

#app ::-webkit-scrollbar-track {
  background: var(--wx-deep);
}

#app ::-webkit-scrollbar-thumb {
  background: var(--wx-border);
  border-radius: 6px;
  border: 2px solid var(--wx-deep);
}

#app ::-webkit-scrollbar-thumb:hover {
  background: var(--wx-gold);
}

/* ===== Selection color ===== */
#app ::selection {
  background: rgba(200, 166, 106, .32);
  color: var(--wx-hi);
}

/* ===== Broad catch-all for white-surface containers ===== */
#app .about-us .main,
#app .about-us .main .content,
#app .about-us .main ul,
#app .about-us .main p,
#app .about-us .main span,
#app .about-us .main div {
  background: var(--wx-panel) !important;
  color: var(--wx-text) !important;
}

#app .account-info .el-dialog,
#app .account-info .el-dialog__body,
#app .account-info .jb-zl,
#app .account-info .needmore,
#app .account-info .bank-info .bankset,
#app .account-info ul.info li {
  background: var(--wx-panel) !important;
  color: var(--wx-text) !important;
  border-color: var(--wx-line) !important;
}

#app .account-info .el-dialog__title,
#app .account-info label,
#app .account-info .bank-info .bankset p,
#app .account-info ul.info li span {
  color: var(--wx-light) !important;
}

#app .account-info ul.info li .changPd {
  color: var(--wx-hi) !important;
}

#app .account-info .bind-bank .bind-bank-title img {
  filter: sepia(1) saturate(1.3) hue-rotate(-12deg) brightness(1.1) !important;
}

/* ===== Tables (generic) ===== */
#app table,
#app .agentGuide table,
#app #articles table,
#app .box_2-s table,
#app .box3-table table,
#app .content_s table {
  background: var(--wx-panel) !important;
  color: var(--wx-text) !important;
  border-collapse: collapse !important;
}

#app table th,
#app .agentGuide table th,
#app #articles table th,
#app .box_2-s tr td,
#app .box3-table tr.trr td,
#app .content_s table td,
#app .content_s table th {
  background: var(--wx-deep) !important;
  color: var(--wx-light) !important;
  border-color: var(--wx-line) !important;
}

#app table td,
#app .agentGuide table td,
#app #articles table td {
  background: var(--wx-panel) !important;
  color: var(--wx-text2) !important;
  border-color: var(--wx-line) !important;
}

#app table tr:hover td,
#app .box_2-s tr:hover td,
#app .box3-table tr.trr:hover td {
  background: var(--wx-hover) !important;
  color: var(--wx-text) !important;
}

/* ===== Bet record page ===== */
#app #bet-record,
#app #bet-record .control-div > input,
#app #bet-record .game-type > .control-div > .input,
#app #bet-record .game-type ul {
  background: var(--wx-card) !important;
  color: var(--wx-text) !important;
  border-color: var(--wx-line) !important;
}

#app #bet-record .game-type ul li {
  color: var(--wx-text2) !important;
  border-bottom-color: var(--wx-line) !important;
}

#app #bet-record .game-type ul li:hover {
  background: var(--wx-hover) !important;
  color: var(--wx-hi) !important;
}

/* ===== Custom select / dropdown (bootstrap-style) ===== */
#app .dropdown-menu,
#app .diy_select_list {
  background: var(--wx-panel) !important;
  border: 1px solid var(--wx-line) !important;
  color: var(--wx-text) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45) !important;
}

#app .dropdown-menu > li > a,
#app .diy_select_list li {
  color: var(--wx-text2) !important;
  background: transparent !important;
}

#app .dropdown-menu > li > a:hover,
#app .dropdown-menu > li > a:focus,
#app .diy_select_list li:hover {
  background: var(--wx-hover) !important;
  color: var(--wx-hi) !important;
}

#app .dropdown-menu .divider {
  background: var(--wx-line) !important;
}

/* ===== Bootstrap pagination ===== */
#app .pagination > li > a,
#app .pagination > li > span {
  background: var(--wx-card) !important;
  border-color: var(--wx-border) !important;
  color: var(--wx-light) !important;
}

#app .pagination > li > a:hover,
#app .pagination > li > span:hover,
#app .pagination > li > a:focus,
#app .pagination > li > span:focus {
  background: var(--wx-hover) !important;
  color: var(--wx-hi) !important;
  border-color: var(--wx-gold) !important;
}

#app .pagination > .active > a,
#app .pagination > .active > span,
#app .pagination > .active > a:hover,
#app .pagination > .active > span:hover,
#app .pagination > .active > a:focus,
#app .pagination > .active > span:focus {
  background: var(--wx-grad-btn) !important;
  border-color: var(--wx-hi) !important;
  color: var(--wx-dark) !important;
}

#app .pagination > .disabled > span,
#app .pagination > .disabled > a {
  background: var(--wx-deep) !important;
  color: var(--wx-disabled, #796653) !important;
  border-color: var(--wx-line) !important;
}

/* ===== Bootstrap alerts ===== */
#app .alert {
  background: var(--wx-card) !important;
  border-color: var(--wx-line) !important;
  color: var(--wx-text2) !important;
}

#app .alert-warning {
  border-color: rgba(217, 173, 98, .4) !important;
  color: var(--wx-hi) !important;
}

#app .alert-danger {
  border-color: rgba(228, 92, 82, .4) !important;
  color: #E45C52 !important;
}

#app .alert-success {
  border-color: rgba(32, 214, 107, .4) !important;
  color: #20D66B !important;
}

/* ===== Bootstrap buttons / badges ===== */
#app .btn-default {
  background: var(--wx-card) !important;
  border-color: var(--wx-border) !important;
  color: var(--wx-light) !important;
}

#app .btn-default:hover,
#app .btn-default:focus,
#app .btn-default:active {
  background: var(--wx-hover) !important;
  color: var(--wx-hi) !important;
  border-color: var(--wx-gold) !important;
}

#app .btn-default .badge,
#app .btn-primary .badge,
#app .btn-success .badge,
#app .btn-info .badge,
#app .btn-warning .badge,
#app .btn-danger .badge {
  background: var(--wx-gold) !important;
  color: var(--wx-dark) !important;
}

/* ===== Generic .card / .bg-white surfaces ===== */
#app .card,
#app .bg-white,
#app .bood_1 {
  background: var(--wx-panel) !important;
  color: var(--wx-text) !important;
  border-color: var(--wx-line) !important;
}

/* ===== Carousel indicators ===== */
#app .carousel-indicators .active {
  background: var(--wx-gold) !important;
}

#app .carousel-indicators li {
  border-color: var(--wx-border) !important;
  background: var(--wx-deep) !important;
}

#app .el-carousel__button {
  background: var(--wx-border) !important;
}

#app .el-carousel__button.is-active {
  background: var(--wx-gold) !important;
}

#app .el-carousel__mask {
  background: rgba(16, 13, 9, .55) !important;
}

/* ===== Calendar ===== */
#app .el-calendar,
#app .el-calendar-table,
#app .el-calendar-table th,
#app .el-calendar-table td {
  background: var(--wx-panel) !important;
  color: var(--wx-text2) !important;
  border-color: var(--wx-line) !important;
}

#app .el-calendar-table td.is-selected .el-calendar-day {
  background: var(--wx-grad-btn) !important;
  color: var(--wx-dark) !important;
}

#app .el-calendar-day:hover {
  background: var(--wx-hover) !important;
}

/* ===== Custom file / select inputs ===== */
#app .custom-file-label,
#app .custom-select {
  background: var(--wx-card) !important;
  border-color: var(--wx-border) !important;
  color: var(--wx-text) !important;
}

#app .custom-select:focus {
  border-color: var(--wx-gold) !important;
}

#app .custom-select:focus::-ms-value {
  background: var(--wx-card) !important;
  color: var(--wx-text) !important;
}

/* ===== el-checkbox-button ===== */
#app .el-checkbox-button__inner {
  background: var(--wx-card) !important;
  border-color: var(--wx-border) !important;
  color: var(--wx-light) !important;
}

#app .el-checkbox-button.is-checked .el-checkbox-button__inner {
  background: var(--wx-grad-btn) !important;
  border-color: var(--wx-hi) !important;
  color: var(--wx-dark) !important;
  box-shadow: -1px 0 0 0 var(--wx-hi) !important;
}

#app .el-checkbox-button.is-disabled .el-checkbox-button__inner {
  background: var(--wx-deep) !important;
  color: var(--wx-disabled, #796653) !important;
  border-color: var(--wx-line) !important;
}

/* ===== el-input count badge ===== */
#app .el-input .el-input__count .el-input__count-inner {
  background: var(--wx-deep) !important;
  color: var(--wx-muted) !important;
}

/* ===== el-date-range time picker wrap ===== */
#app .el-date-range-picker__time-picker-wrap .el-picker-panel {
  background: var(--wx-panel) !important;
  border-color: var(--wx-line) !important;
}

/* ===== el-divider ===== */
#app .el-divider,
#app .el-divider__text {
  background: var(--wx-line) !important;
  color: var(--wx-muted) !important;
}

#app .el-divider__text {
  background: var(--wx-bg) !important;
}

/* ===== el-breadcrumb ===== */
#app .el-breadcrumb__inner,
#app .el-breadcrumb__inner a {
  color: var(--wx-muted) !important;
}

#app .el-breadcrumb__inner.is-link:hover,
#app .el-breadcrumb__inner a:hover {
  color: var(--wx-hi) !important;
}

#app .el-breadcrumb__separator {
  color: var(--wx-border) !important;
}

/* ===== el-collapse ===== */
#app .el-collapse,
#app .el-collapse-item__header,
#app .el-collapse-item__wrap {
  background: var(--wx-panel) !important;
  border-color: var(--wx-line) !important;
  color: var(--wx-text2) !important;
}

#app .el-collapse-item__content {
  color: var(--wx-text) !important;
}

/* ===== el-empty / el-result ===== */
#app .el-empty__description,
#app .el-result__title,
#app .el-result__subtitle {
  color: var(--wx-muted) !important;
}

/* ===== el-rate ===== */
#app .el-rate__icon {
  color: var(--wx-gold) !important;
}

#app .el-rate .el-rate__text {
  color: var(--wx-light) !important;
}

/* ===== el-slider ===== */
#app .el-slider__runway {
  background: var(--wx-deep) !important;
}

#app .el-slider__bar {
  background: var(--wx-grad-btn) !important;
}

#app .el-slider__button {
  border-color: var(--wx-gold) !important;
}

/* ===== el-tree ===== */
#app .el-tree,
#app .el-tree-node__content {
  background: var(--wx-panel) !important;
  color: var(--wx-text2) !important;
}

#app .el-tree-node__content:hover {
  background: var(--wx-hover) !important;
  color: var(--wx-text) !important;
}

#app .el-tree-node.is-current > .el-tree-node__content {
  background: var(--wx-grad-btn) !important;
  color: var(--wx-dark) !important;
}

/* ===== el-transfer ===== */
#app .el-transfer-panel,
#app .el-transfer-panel__header,
#app .el-transfer-panel__body {
  background: var(--wx-panel) !important;
  border-color: var(--wx-line) !important;
  color: var(--wx-text) !important;
}

#app .el-transfer-panel__list .el-transfer-panel__item {
  color: var(--wx-text2) !important;
}

#app .el-transfer-panel__list .el-transfer-panel__item:hover {
  background: var(--wx-hover) !important;
  color: var(--wx-text) !important;
}

/* ===== el-steps ===== */
#app .el-step__title.is-process,
#app .el-step__title.is-finish {
  color: var(--wx-hi) !important;
}

#app .el-step__title.is-wait {
  color: var(--wx-muted) !important;
}

#app .el-step__head.is-process,
#app .el-step__head.is-finish {
  color: var(--wx-gold) !important;
  border-color: var(--wx-gold) !important;
}

#app .el-step__head.is-wait {
  color: var(--wx-border) !important;
  border-color: var(--wx-border) !important;
}

#app .el-step__line {
  background: var(--wx-line) !important;
}

/* ===== el-upload ===== */
#app .el-upload-dragger {
  background: var(--wx-card) !important;
  border-color: var(--wx-border) !important;
}

#app .el-upload-dragger:hover {
  border-color: var(--wx-gold) !important;
}

#app .el-upload-list__item-name,
#app .el-upload__text {
  color: var(--wx-light) !important;
}

/* ===== el-timeline ===== */
#app .el-timeline-item__timestamp {
  color: var(--wx-muted) !important;
}

#app .el-timeline-item__node {
  background: var(--wx-gold) !important;
}

#app .el-timeline-item__tail {
  border-left-color: var(--wx-line) !important;
}

/* ===== el-statistic ===== */
#app .el-statistic__content,
#app .el-statistic__head {
  color: var(--wx-text) !important;
}

/* ===== el-skeleton ===== */
#app .el-skeleton__item {
  background: var(--wx-deep) !important;
}

/* ===== el-page-header ===== */
#app .el-page-header__content,
#app .el-page-header__left {
  color: var(--wx-light) !important;
}

#app .el-page-header__left:hover {
  color: var(--wx-hi) !important;
}

/* ===== Modal / dialog generic (bootstrap) ===== */
#app .modal-content {
  background: var(--wx-panel) !important;
  border: 1px solid var(--wx-line) !important;
  color: var(--wx-text) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .55) !important;
}

#app .modal-header,
#app .modal-footer {
  border-color: var(--wx-line) !important;
  color: var(--wx-light) !important;
}

#app .modal-title,
#app .modal-body {
  color: var(--wx-text) !important;
}

#app .modal-header .close {
  color: var(--wx-muted) !important;
}

#app .modal-header .close:hover {
  color: var(--wx-hi) !important;
}

/* ===== Popover ===== */
#app .el-popover {
  background: var(--wx-panel) !important;
  border-color: var(--wx-line) !important;
  color: var(--wx-text) !important;
}

#app .el-popover[x-placement^="top"] .popper__arrow,
#app .el-popover[x-placement^="top"] .popper__arrow::after {
  border-top-color: var(--wx-panel) !important;
}

#app .el-popover[x-placement^="bottom"] .popper__arrow,
#app .el-popover[x-placement^="bottom"] .popper__arrow::after {
  border-bottom-color: var(--wx-panel) !important;
}

/* ===== Nav-tabs / generic tabs ===== */
#app .nav-tabs > li > a {
  color: var(--wx-muted) !important;
  border-color: var(--wx-line) !important;
  background: var(--wx-card) !important;
}

#app .nav-tabs > li.active > a,
#app .nav-tabs > li.active > a:hover,
#app .nav-tabs > li.active > a:focus {
  background: var(--wx-grad-btn) !important;
  color: var(--wx-dark) !important;
  border-color: var(--wx-hi) !important;
}

#app .nav-tabs > li > a:hover {
  background: var(--wx-hover) !important;
  color: var(--wx-hi) !important;
  border-color: var(--wx-gold) !important;
}

/* ===== Tab content panels ===== */
#app .tab-content > .tab-pane,
#app .tab-content > .active {
  background: var(--wx-panel) !important;
  color: var(--wx-text) !important;
}

/* ===== Form controls (bootstrap) ===== */
#app .form-control {
  background: var(--wx-card) !important;
  border-color: var(--wx-border) !important;
  color: var(--wx-text) !important;
}

#app .form-control:focus {
  border-color: var(--wx-gold) !important;
  box-shadow: 0 0 0 2px rgba(200, 166, 106, .18) !important;
}

#app .form-control::placeholder {
  color: rgba(233, 209, 164, .5) !important;
}

#app .input-group-addon {
  background: var(--wx-deep) !important;
  border-color: var(--wx-border) !important;
  color: var(--wx-light) !important;
}

/* ===== Well / panel (bootstrap) ===== */
#app .well,
#app .panel {
  background: var(--wx-panel) !important;
  border-color: var(--wx-line) !important;
  color: var(--wx-text) !important;
}

#app .panel-heading {
  background: var(--wx-deep) !important;
  border-color: var(--wx-line) !important;
  color: var(--wx-light) !important;
}

#app .panel-footer {
  background: var(--wx-card) !important;
  border-color: var(--wx-line) !important;
  color: var(--wx-muted) !important;
}

/* ===== List group ===== */
#app .list-group-item {
  background: var(--wx-panel) !important;
  border-color: var(--wx-line) !important;
  color: var(--wx-text2) !important;
}

#app .list-group-item:hover {
  background: var(--wx-hover) !important;
  color: var(--wx-text) !important;
}

#app .list-group-item.active,
#app .list-group-item.active:hover {
  background: var(--wx-grad-btn) !important;
  color: var(--wx-dark) !important;
  border-color: var(--wx-hi) !important;
}

/* ===== Progress bars (bootstrap) ===== */
#app .progress {
  background: var(--wx-deep) !important;
}

#app .progress-bar {
  background: var(--wx-grad-btn) !important;
}

/* ===== Jumbotron / hero text ===== */
#app .jumbotron {
  background: var(--wx-panel) !important;
  color: var(--wx-text) !important;
}

/* ===== Tooltip (bootstrap) ===== */
#app .tooltip-inner {
  background: var(--wx-panel) !important;
  color: var(--wx-text) !important;
  border: 1px solid var(--wx-line) !important;
}

#app .tooltip.top .tooltip-arrow,
#app .tooltip.top-left .tooltip-arrow,
#app .tooltip.top-right .tooltip-arrow {
  border-top-color: var(--wx-panel) !important;
}
#app .tooltip.right .tooltip-arrow {
  border-right-color: var(--wx-panel) !important;
}
#app .tooltip.left .tooltip-arrow {
  border-left-color: var(--wx-panel) !important;
}
#app .tooltip.bottom .tooltip-arrow,
#app .tooltip.bottom-left .tooltip-arrow,
#app .tooltip.bottom-right .tooltip-arrow {
  border-bottom-color: var(--wx-panel) !important;
}

/* ===== Media / misc text contrast ===== */
#app .text-muted {
  color: var(--wx-muted) !important;
}

#app .text-primary {
  color: var(--wx-hi) !important;
}

#app .text-success {
  color: #20D66B !important;
}

#app .text-danger {
  color: #E45C52 !important;
}

#app .text-warning {
  color: var(--wx-hi) !important;
}

#app .text-info {
  color: var(--wx-light) !important;
}

/* ===== Links (generic, non-navigation) ===== */
#app a {
  color: var(--wx-light);
}

#app a:hover {
  color: var(--wx-hi);
}

/* ===== Strong / headings contrast ===== */
#app h1, #app h2, #app h3, #app h4, #app h5, #app h6,
#app .h1, #app .h2, #app .h3, #app .h4, #app .h5, #app .h6 {
  color: var(--wx-text) !important;
}

#app strong, #app b {
  color: var(--wx-light) !important;
}

/* ===== Small / helper text ===== */
#app small, #app .small {
  color: var(--wx-muted) !important;
}

/* ===== Code / pre ===== */
#app code, #app pre {
  background: var(--wx-deep) !important;
  color: var(--wx-light) !important;
  border-color: var(--wx-line) !important;
}

/* ===== Hr ===== */
#app hr {
  border-top-color: var(--wx-line) !important;
}

/* ===== Plain Element UI overrides (beat lazy chunk .el-* { background:#fff }) ===== */
#app .el-button {
  background: var(--wx-card) !important;
  background-image: none !important;
  border-color: var(--wx-border) !important;
  color: var(--wx-light) !important;
}

#app .el-button:hover,
#app .el-button:focus {
  background: var(--wx-hover) !important;
  color: var(--wx-hi) !important;
  border-color: var(--wx-gold) !important;
}

#app .el-button:active {
  background: var(--wx-hover) !important;
  color: var(--wx-hi) !important;
  border-color: var(--wx-gold) !important;
}

#app .el-button.is-plain,
#app .el-button.is-plain:hover,
#app .el-button.is-plain:focus,
#app .el-button.is-plain:active {
  background: var(--wx-card) !important;
  color: var(--wx-light) !important;
  border-color: var(--wx-border) !important;
}

#app .el-button.is-disabled,
#app .el-button.is-disabled:focus,
#app .el-button.is-disabled:hover,
#app .el-button.is-disabled.is-plain,
#app .el-button.is-disabled.is-plain:focus,
#app .el-button.is-disabled.is-plain:hover {
  background: var(--wx-deep) !important;
  color: var(--wx-disabled, #796653) !important;
  border-color: var(--wx-line) !important;
}

#app .el-input__inner {
  background: rgba(0, 0, 0, .55) !important;
  border-color: var(--wx-line) !important;
  color: var(--wx-text) !important;
}

#app .el-input__inner:focus {
  border-color: var(--wx-gold) !important;
}

#app .el-dialog {
  background: var(--wx-panel) !important;
  border: 1px solid var(--wx-line) !important;
  color: var(--wx-text) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .55) !important;
}

#app .el-dialog__header,
#app .el-dialog__body,
#app .el-dialog__footer {
  background: transparent !important;
  color: var(--wx-text) !important;
}

#app .el-dialog__title {
  color: var(--wx-light) !important;
}

#app .el-dropdown-menu {
  background: var(--wx-panel) !important;
  border: 1px solid var(--wx-line) !important;
  color: var(--wx-text) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45) !important;
}

#app .el-dropdown-menu__item {
  color: var(--wx-text2) !important;
  background: transparent !important;
}

#app .el-dropdown-menu__item:hover,
#app .el-dropdown-menu__item:focus {
  background: var(--wx-hover) !important;
  color: var(--wx-hi) !important;
}

#app .el-dropdown-menu__item--divided:before {
  background: var(--wx-line) !important;
}

/* body override in case lazy chunk sets body bg */
body {
  background-color: var(--wx-bg) !important;
}