/* ZXEarn color palette for ToriCash. Color-only overrides: no sizing or layout changes. */
:root {
  --zx-page: #081e2e;
  --zx-page-deep: #06131d;
  --zx-panel: #0b283e;
  --zx-panel-soft: #1a3347;
  --zx-panel-raised: #233d51;
  --zx-glass: rgba(35, 61, 81, .72);
  --zx-gold: #ffc72e;
  --zx-gold-dark: #eab308;
  --zx-gold-soft: rgba(255, 199, 46, .08);
  --zx-white: #ffffff;
  --zx-offwhite: #f4f7f5;
  --zx-text-soft: #b7c0c8;
  --zx-muted: #949494;
  --zx-muted-2: #8b959e;
  --zx-line: rgba(255, 255, 255, .08);
  --zx-line-strong: rgba(255, 255, 255, .12);
  --zx-gold-line: rgba(255, 199, 46, .18);
}

html,
body.zxearn-colors,
.zxearn-colors #root,
.zxearn-colors .bg-app,
.zxearn-colors .bg-dc,
.zxearn-colors .dark\:bg-navy-900 {
  background-color: var(--zx-page) !important;
  color: var(--zx-white);
}

/* Header, desktop sidebar and mobile navigation */
.zxearn-colors .header-container,
.zxearn-colors .bg-fg,
.zxearn-colors .bg-fg-1,
.zxearn-colors .sidebar-panel > div,
.zxearn-colors .sidebar-panel-min > div,
.zxearn-colors .csm-bottom-nav {
  background-color: var(--zx-panel) !important;
  color: var(--zx-white) !important;
  border-color: var(--zx-line) !important;
}
.zxearn-colors .header { border-color: var(--zx-line) !important; }
.zxearn-colors .nav_lay1,
.zxearn-colors .sidebar a,
.zxearn-colors .csm-bottom-nav a { color: var(--zx-muted) !important; }
.zxearn-colors .nav_lay1:hover,
.zxearn-colors .nav_lay_active,
.zxearn-colors .csm_b_nav_active,
.zxearn-colors .sidebar a:hover {
  color: var(--zx-white) !important;
  background-color: var(--zx-gold-soft) !important;
}
.zxearn-colors .nav_lay_active i,
.zxearn-colors .csm_b_nav_active,
.zxearn-colors .csm_b_nav_active svg,
.zxearn-colors .csm_b_nav_active i { color: var(--zx-gold) !important; }
.zxearn-colors .menu-toggle span { background-color: var(--zx-white) !important; }

/* Main backgrounds and universal surfaces */
.zxearn-colors main,
.zxearn-colors .main-content,
.zxearn-colors .app-data,
.zxearn-colors .container { color: var(--zx-white); }
.zxearn-colors .card,
.zxearn-colors .modal-content,
.zxearn-colors .dropdown-menu,
.zxearn-colors .popover,
.zxearn-colors .chat-bar,
.zxearn-colors .support_,
.zxearn-colors .profile-header,
.zxearn-colors .car_pro,
.zxearn-colors .mi_card,
.zxearn-colors .csm-tier-container,
.zxearn-colors .csm-streak-container {
  background-color: var(--zx-panel) !important;
  color: var(--zx-white) !important;
  border-color: var(--zx-line) !important;
}
.zxearn-colors .bg-light,
.zxearn-colors .bg-white,
.zxearn-colors .bg-slate-50,
.zxearn-colors .bg-slate-100,
.zxearn-colors .bg-slate-150,
.zxearn-colors .bg-slate-200,
.zxearn-colors .dark\:bg-navy-700,
.zxearn-colors .dark\:bg-navy-750,
.zxearn-colors .dark\:bg-navy-800 {
  background-color: var(--zx-panel) !important;
}
.zxearn-colors .bg-layot-dark_csm,
.zxearn-colors .bg-blk { background-color: var(--zx-page-deep) !important; }

/* Typography */
.zxearn-colors,
.zxearn-colors p,
.zxearn-colors span,
.zxearn-colors label,
.zxearn-colors td { color: inherit; }
.zxearn-colors h1,
.zxearn-colors h2,
.zxearn-colors h3,
.zxearn-colors h4,
.zxearn-colors h5,
.zxearn-colors h6,
.zxearn-colors .text-slate-600,
.zxearn-colors .text-slate-700,
.zxearn-colors .text-slate-800,
.zxearn-colors .dark\:text-navy-50,
.zxearn-colors .dark\:text-navy-100,
.zxearn-colors .c_w,
.zxearn-colors .fea_text,
.zxearn-colors .offer-h1,
.zxearn-colors .offer_text { color: var(--zx-white) !important; }
.zxearn-colors .text-slate-300,
.zxearn-colors .text-slate-400,
.zxearn-colors .text-slate-500,
.zxearn-colors .dark\:text-navy-200,
.zxearn-colors .dark\:text-navy-300,
.zxearn-colors .h-col,
.zxearn-colors .offer-span { color: var(--zx-muted) !important; }
.zxearn-colors .text-app,
.zxearn-colors a.text-app,
.zxearn-colors .gradient-text-com,
.zxearn-colors .fea_text i,
.zxearn-colors .text-warning,
.zxearn-colors .dark\:text-accent-light { color: var(--zx-gold) !important; }

/* Buttons, active tabs and highlights */
.zxearn-colors .btn_1,
.zxearn-colors .bg-rgb-blue,
.zxearn-colors .csm_btn_log_2,
.zxearn-colors .csm_btn_log_4,
.zxearn-colors .save-avatar-btn,
.zxearn-colors .login_tab_ac_col,
.zxearn-colors .random-btn,
.zxearn-colors .csm-start-earning-button,
.zxearn-colors .btn_2,
.zxearn-colors .wit_btn,
.zxearn-colors .bonus_btn,
.zxearn-colors .bg-green,
.zxearn-colors .btnac,
.zxearn-colors .csm-claim-btn:not(:disabled),
.zxearn-colors button.bg-primary,
.zxearn-colors a.bg-primary,
.zxearn-colors button.bg-accent,
.zxearn-colors a.bg-accent,
.zxearn-colors button.dark\:bg-accent,
.zxearn-colors a.dark\:bg-accent {
  background-color: var(--zx-gold) !important;
  background-image: none !important;
  color: var(--zx-page) !important;
  border-color: var(--zx-gold) !important;
}
.zxearn-colors .btn_1:hover,
.zxearn-colors .bg-rgb-blue:hover,
.zxearn-colors .csm_btn_log_2:hover,
.zxearn-colors .save-avatar-btn:hover,
.zxearn-colors .login_tab_ac_col:hover,
.zxearn-colors .random-btn:hover,
.zxearn-colors .csm-start-earning-button:hover,
.zxearn-colors .btn_2:hover,
.zxearn-colors .wit_btn:hover,
.zxearn-colors .bonus_btn:hover,
.zxearn-colors .bg-green:hover { background-color: var(--zx-gold-dark) !important; }
.zxearn-colors .csm_btn_log_,
.zxearn-colors .csm_btn_log_5,
.zxearn-colors .btn_nxt,
.zxearn-colors .barbase {
  background-color: var(--zx-panel) !important;
  color: var(--zx-white) !important;
  border-color: var(--zx-gold-line) !important;
}
.zxearn-colors .logon_frm-csm:not(.login_tab_ac_col),
.zxearn-colors .login_social_btn {
  background: var(--zx-panel-raised) !important;
  color: var(--zx-white) !important;
  border-color: var(--zx-line-strong) !important;
}
.zxearn-colors .login_social_btn:hover {
  background: var(--zx-panel-soft) !important;
  border-color: var(--zx-gold-line) !important;
}
.zxearn-colors .tabs-list button[aria-selected="true"],
.zxearn-colors .tabs-list .active,
.zxearn-colors .tab-active { color: var(--zx-gold) !important; border-color: var(--zx-gold) !important; }
.zxearn-colors .progress > div,
.zxearn-colors .offer-card { background-color: var(--zx-gold) !important; }

/* Forms */
.zxearn-colors input,
.zxearn-colors textarea,
.zxearn-colors select,
.zxearn-colors .form-input,
.zxearn-colors .form-select {
  background-color: var(--zx-page-deep) !important;
  color: var(--zx-white) !important;
  border-color: var(--zx-line-strong) !important;
}
.zxearn-colors input::placeholder,
.zxearn-colors textarea::placeholder { color: var(--zx-muted-2) !important; opacity: 1; }
.zxearn-colors input:focus,
.zxearn-colors textarea:focus,
.zxearn-colors select:focus {
  border-color: var(--zx-gold) !important;
  --tw-ring-color: rgba(255, 199, 46, .25) !important;
}
.zxearn-colors input[type="checkbox"],
.zxearn-colors input[type="radio"] { accent-color: var(--zx-gold); }

/* Offer and reward cards retain logos/images while using the ZX base colors. */
.zxearn-colors .csm-offer-card-main,
.zxearn-colors .offerList,
.zxearn-colors .image-container,
.zxearn-colors .off_card,
.zxearn-colors .offer_card_boder,
.zxearn-colors .re_ly_1,
.zxearn-colors .csm-streak-day,
.zxearn-colors .info-item,
.zxearn-colors .le_lay_1,
.zxearn-colors .u_l_earn {
  background-color: var(--zx-panel) !important;
  color: var(--zx-white) !important;
  border-color: var(--zx-line-strong) !important;
}
.zxearn-colors .csm-offer-badge,
.zxearn-colors .offer_sec,
.zxearn-colors .off_sp_btn {
  background-color: var(--zx-gold) !important;
  color: var(--zx-page) !important;
  border-color: var(--zx-gold) !important;
}
.zxearn-colors .csm-offer-stars,
.zxearn-colors .csm_off_rate_h,
.zxearn-colors .coin_ { color: var(--zx-gold-dark) !important; }
.zxearn-colors .csm-offer-hover-content { background-color: rgba(6, 19, 29, .88) !important; color: var(--zx-gold) !important; }

/* Tables and lists */
.zxearn-colors table,
.zxearn-colors thead,
.zxearn-colors tbody { color: var(--zx-white) !important; }
.zxearn-colors thead,
.zxearn-colors thead tr,
.zxearn-colors th { background-color: var(--zx-page-deep) !important; color: var(--zx-text-soft) !important; }
.zxearn-colors tbody tr { background-color: var(--zx-panel) !important; border-color: var(--zx-line) !important; }
.zxearn-colors td,
.zxearn-colors th,
.zxearn-colors .border-slate-150,
.zxearn-colors .border-slate-200,
.zxearn-colors .border-slate-300,
.zxearn-colors .dark\:border-navy-500,
.zxearn-colors .dark\:border-navy-600,
.zxearn-colors .dark\:border-navy-700 { border-color: var(--zx-line) !important; }

/* Modals, notices and chat */
.zxearn-colors .of-modal,
.zxearn-colors [class*="backdrop"] { background-color: rgba(6, 19, 29, .82) !important; }
.zxearn-colors .of-modal-content,
.zxearn-colors .box_modal { background-color: var(--zx-page) !important; border-color: var(--zx-line-strong) !important; }
.zxearn-colors #cookieNotice,
.zxearn-colors .alert:not(.bg-error):not(.bg-success) {
  background-color: var(--zx-panel-soft) !important;
  color: var(--zx-white) !important;
  border-color: var(--zx-line) !important;
}
.zxearn-colors .toast-success-m { background-color: #4ade80 !important; }

/* Public home */
.zxearn-colors .bg-b-csm,
.zxearn-colors .jumbo,
.zxearn-colors .n_se { background-color: var(--zx-page) !important; }
.zxearn-colors .get-paid { color: var(--zx-gold) !important; }
.zxearn-colors .home-login-card-s1,
.zxearn-colors .h-use .card { background-color: var(--zx-panel) !important; border-color: var(--zx-line) !important; }

/* Scrollbars */
.zxearn-colors * { scrollbar-color: var(--zx-panel-raised) var(--zx-page-deep); }
.zxearn-colors *::-webkit-scrollbar-track { background: var(--zx-page-deep); }
.zxearn-colors *::-webkit-scrollbar-thumb { background: var(--zx-panel-raised); }

/* Keep semantic success/error/info states readable. */
.zxearn-colors .text-success { color: #4ade80 !important; }
.zxearn-colors .text-error,
.zxearn-colors .text-red { color: #ff5c5c !important; }
.zxearn-colors .text-info { color: #229ed9 !important; }
.zxearn-colors .bg-success { background-color: #4ade80 !important; color: var(--zx-page) !important; }
.zxearn-colors .bg-error { background-color: #ff5c5c !important; color: #fff !important; }
.zxearn-colors .bg-info { background-color: #229ed9 !important; color: #fff !important; }

/* Complete action-button and tab coverage across frontend and admin pages. */
.zxearn-colors button.btn,
.zxearn-colors a.btn,
.zxearn-colors input[type="submit"],
.zxearn-colors input[type="button"] {
  background-color: var(--zx-panel-raised) !important;
  background-image: none !important;
  color: var(--zx-white) !important;
  border-color: var(--zx-line-strong) !important;
}

.zxearn-colors button.btn[class*="bg-primary"],
.zxearn-colors a.btn[class*="bg-primary"],
.zxearn-colors button.btn[class*="bg-accent"],
.zxearn-colors a.btn[class*="bg-accent"],
.zxearn-colors button.btn[class*="bg-green"],
.zxearn-colors a.btn[class*="bg-green"],
.zxearn-colors button.btn[class*="bg-red"],
.zxearn-colors a.btn[class*="bg-red"],
.zxearn-colors button.btn[class*="bg-success"],
.zxearn-colors a.btn[class*="bg-success"],
.zxearn-colors button.btn[class*="bg-info"],
.zxearn-colors a.btn[class*="bg-info"],
.zxearn-colors button.btn[class*="bg-warning"],
.zxearn-colors a.btn[class*="bg-warning"],
.zxearn-colors button.btn[class*="bg-error"],
.zxearn-colors a.btn[class*="bg-error"],
.zxearn-colors button.btn[class*="bg-rgb-blue"],
.zxearn-colors a.btn[class*="bg-rgb-blue"],
.zxearn-colors .cc_btn,
.zxearn-colors .btn_app,
.zxearn-colors .claim-button {
  background-color: var(--zx-gold) !important;
  background-image: none !important;
  color: var(--zx-page) !important;
  border-color: var(--zx-gold) !important;
}

.zxearn-colors button.btn[class*="bg-primary"]:hover,
.zxearn-colors a.btn[class*="bg-primary"]:hover,
.zxearn-colors button.btn[class*="bg-accent"]:hover,
.zxearn-colors a.btn[class*="bg-accent"]:hover,
.zxearn-colors button.btn[class*="bg-green"]:hover,
.zxearn-colors a.btn[class*="bg-green"]:hover,
.zxearn-colors button.btn[class*="bg-red"]:hover,
.zxearn-colors a.btn[class*="bg-red"]:hover,
.zxearn-colors button.btn[class*="bg-success"]:hover,
.zxearn-colors a.btn[class*="bg-success"]:hover,
.zxearn-colors button.btn[class*="bg-info"]:hover,
.zxearn-colors a.btn[class*="bg-info"]:hover,
.zxearn-colors button.btn[class*="bg-warning"]:hover,
.zxearn-colors a.btn[class*="bg-warning"]:hover,
.zxearn-colors button.btn[class*="bg-error"]:hover,
.zxearn-colors a.btn[class*="bg-error"]:hover {
  background-color: var(--zx-gold-dark) !important;
  color: var(--zx-page) !important;
}

.zxearn-colors .tabs-list .btn,
.zxearn-colors .tab-link,
.zxearn-colors [role="tab"] {
  background-color: var(--zx-panel-raised) !important;
  background-image: none !important;
  color: var(--zx-text-soft) !important;
  border-color: transparent !important;
}

.zxearn-colors .tabs-list .btn.login_tab_ac_col,
.zxearn-colors .tabs-list .btn.bg-light-act,
.zxearn-colors .tabs-list .btn.border-primary,
.zxearn-colors .tabs-list .btn.border-accent,
.zxearn-colors .tabs-list .btn.border-success,
.zxearn-colors .tabs-list .btn.border-error,
.zxearn-colors .tabs-list .btn.border-app,
.zxearn-colors .tabs-list .btn.border-white,
.zxearn-colors .tab-link.bg-red,
.zxearn-colors .tab-link.bg-primary,
.zxearn-colors [role="tab"][aria-selected="true"],
.zxearn-colors .avatar-category-tab.active,
.zxearn-colors .tab-active {
  background-color: var(--zx-gold) !important;
  background-image: none !important;
  color: var(--zx-page) !important;
  border-color: var(--zx-gold) !important;
}