/* Shared color contract for every customer-facing page. The stronger root
   selector intentionally wins over legacy page-local :root declarations. */
html:not(.light-mode):root {
  color-scheme: dark;
  --bg: #0B0E11;
  --bg0: #0A0E1A;
  --bg1: #0F1422;
  --bg2: #131A2C;
  --bg3: #1A2340;
  --brd: #25324B;
  --brd2: #34425E;
  --t1: #E8ECF1;
  --t2: #A6B0C1;
  --t3: #7F8CA2;
  --bg-primary: #0A0E1A;
  --bg-secondary: #0F1422;
  --bg-card: #131A2C;
  --bg-hover: #1A2340;
  --bg-input: #0D1220;
  --border-color: #25324B;
  --border-light: #34425E;
  --text-primary: #E8ECF1;
  --text-secondary: #A6B0C1;
  --text-muted: #7F8CA2;
  --nav-bg: #0F1422;
  --nav-hover: #1A2340;
  --main-bg: #0A0E1A;
  --card: #131A2C;
  --card2: #0F1422;
  --line: #25324B;
  --text: #E8ECF1;
  --muted: #A6B0C1;
  --muted2: #7F8CA2;
  --dim: #7F8CA2;
  /* Legacy standalone pages use these names instead of the shared palette. */
  --panel: #131A2C;
  --field: #0D1220;
  --surface: #131A2C;
  --surface-2: #1A2340;
}

/* Shared system popup (desktop + mobile, dark + light). */
html.ecx-system-popup-open{overflow:hidden!important}
.ecx-system-popup-overlay{position:fixed;inset:0;z-index:2147480000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(3,8,18,.72);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);opacity:0;transition:opacity .18s ease}
.ecx-system-popup-overlay.is-visible{opacity:1}.ecx-system-popup-overlay.is-closing{opacity:0}
.ecx-system-popup-dialog{width:min(92vw,500px);max-height:min(86vh,760px);overflow:auto;border:1px solid var(--brd,var(--border,#273248));border-radius:20px;background:var(--bg2,var(--card,#111827));color:var(--t1,var(--text-primary,#eef2f7));box-shadow:0 28px 80px rgba(0,0,0,.38);transform:translateY(14px) scale(.98);transition:transform .2s ease}
.ecx-system-popup-overlay.is-visible .ecx-system-popup-dialog{transform:translateY(0) scale(1)}
.ecx-system-popup-hero{min-height:56px;padding:14px 18px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--brd,var(--border,#273248));background:linear-gradient(135deg,rgba(59,130,246,.14),transparent)}
.ecx-system-popup-icon{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#3b82f6;color:#fff;font-size:15px;font-weight:800}.ecx-system-popup-label{font-size:13px;font-weight:700;color:#3b82f6;letter-spacing:.03em}
.type-important .ecx-system-popup-hero{background:linear-gradient(135deg,rgba(240,185,11,.16),transparent)}.type-important .ecx-system-popup-icon{background:#f0b90b;color:#161616}.type-important .ecx-system-popup-label{color:#d39a00}
.type-forced .ecx-system-popup-hero{background:linear-gradient(135deg,rgba(248,73,96,.18),transparent)}.type-forced .ecx-system-popup-icon{background:#f84960}.type-forced .ecx-system-popup-label{color:#f84960}
.ecx-system-popup-close{margin-left:auto;width:32px;height:32px;border:0;border-radius:8px;background:transparent;color:var(--t2,var(--text-secondary,#8894aa));font-size:25px;line-height:1;cursor:pointer}.ecx-system-popup-close:hover{background:rgba(127,140,160,.13);color:var(--t1,var(--text-primary,#eef2f7))}
.ecx-system-popup-image{display:block;width:100%;max-height:260px;object-fit:cover;background:var(--bg1,var(--background,#0a0e1a))}
.ecx-system-popup-body{padding:24px 24px 18px}.ecx-system-popup-body h2{margin:0 0 12px!important;font-size:22px!important;line-height:1.35!important;color:var(--t1,var(--text-primary,#eef2f7))!important;text-align:left!important}.ecx-system-popup-content{white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px;line-height:1.75;color:var(--t2,var(--text-secondary,#8894aa))}.ecx-system-popup-forced-hint{margin:16px 0 0;padding:10px 12px;border-radius:8px;background:rgba(248,73,96,.1);color:#f84960;font-size:12px}
.ecx-system-popup-actions{display:flex;justify-content:flex-end;gap:10px;padding:0 24px 24px}.ecx-system-popup-button{min-width:112px;min-height:44px;padding:10px 20px;border-radius:10px;border:1px solid transparent;font-size:14px;font-weight:700;cursor:pointer}.ecx-system-popup-button.primary{background:#3b82f6;color:#fff}.ecx-system-popup-button.primary:hover{background:#2563eb}.ecx-system-popup-button.secondary{background:transparent;border-color:var(--brd,var(--border,#273248));color:var(--t1,var(--text-primary,#eef2f7))}.ecx-system-popup-button.secondary:hover{background:rgba(127,140,160,.1)}
@media(max-width:600px){.ecx-system-popup-overlay{align-items:center;padding:12px}.ecx-system-popup-dialog{width:100%;max-height:88vh;border-radius:20px}.ecx-system-popup-body{padding:20px 18px 16px}.ecx-system-popup-body h2{font-size:20px!important}.ecx-system-popup-actions{padding:0 18px 18px;flex-direction:column-reverse}.ecx-system-popup-button{width:100%}}

/* IEO winning celebration: event-driven and shown before regular system popups. */
.ecx-ieo-winning-overlay{background:radial-gradient(circle at 50% 24%,rgba(240,185,11,.16),transparent 38%),rgba(3,8,18,.78)}
.ecx-ieo-winning-dialog{position:relative;overflow:hidden;width:min(94vw,560px);border-color:rgba(240,185,11,.38);background:linear-gradient(180deg,#17170f 0,#111827 42%,#111827 100%);box-shadow:0 30px 100px rgba(0,0,0,.5),0 0 0 1px rgba(240,185,11,.08)}
.ecx-ieo-winning-hero{position:relative;overflow:hidden;padding:34px 64px 27px;text-align:center;background:radial-gradient(circle at 50% 0,rgba(255,221,102,.3),transparent 56%),linear-gradient(145deg,rgba(240,185,11,.2),rgba(245,158,11,.05));border-bottom:1px solid rgba(240,185,11,.2)}
.ecx-ieo-winning-close{position:absolute;z-index:3;top:13px;right:13px;color:rgba(255,255,255,.68)}
.ecx-ieo-winning-trophy{position:relative;z-index:2;width:66px;height:66px;margin:0 auto 13px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:linear-gradient(145deg,#ffe68a,#f0b90b 64%,#ca8700);color:#5b3600;font-size:31px;box-shadow:0 12px 35px rgba(240,185,11,.32),inset 0 2px 0 rgba(255,255,255,.65)}
.ecx-ieo-winning-eyebrow{position:relative;z-index:2;margin-bottom:7px;color:#f0b90b;font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.ecx-ieo-winning-hero h2{position:relative;z-index:2;margin:0!important;color:#fff!important;font-size:27px!important;line-height:1.25!important;text-align:center!important;letter-spacing:.01em}
.ecx-ieo-winning-hero p{position:relative;z-index:2;margin:8px 0 0;color:#c7ceda;font-size:14px;line-height:1.55}
.ecx-ieo-confetti{position:absolute;z-index:1;width:7px;height:12px;border-radius:2px;background:#f0b90b;transform:rotate(22deg);opacity:.85}.ecx-ieo-confetti:nth-child(3n){width:9px;height:9px;border-radius:50%;background:#3b82f6}.ecx-ieo-confetti:nth-child(4n){background:#0ecb81;transform:rotate(58deg)}
.ecx-ieo-confetti.c1{left:8%;top:18%}.ecx-ieo-confetti.c2{left:17%;top:66%}.ecx-ieo-confetti.c3{left:27%;top:24%}.ecx-ieo-confetti.c4{left:36%;top:9%}.ecx-ieo-confetti.c5{left:46%;top:20%}.ecx-ieo-confetti.c6{right:44%;top:7%}.ecx-ieo-confetti.c7{right:34%;top:19%}.ecx-ieo-confetti.c8{right:26%;top:10%}.ecx-ieo-confetti.c9{right:18%;top:63%}.ecx-ieo-confetti.c10{right:8%;top:27%}.ecx-ieo-confetti.c11{left:11%;top:43%}.ecx-ieo-confetti.c12{right:10%;top:51%}
.ecx-ieo-winning-body{padding:20px 24px 15px}.ecx-ieo-winning-list{display:grid;gap:10px;max-height:310px;overflow:auto}.ecx-ieo-winning-card{display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px;border:1px solid rgba(240,185,11,.2);border-radius:13px;background:rgba(255,255,255,.035)}
.ecx-ieo-winning-coin{width:46px;height:46px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:linear-gradient(145deg,#fbd44a,#d99600);color:#3b2600;font-size:19px;font-weight:900}.ecx-ieo-winning-info{min-width:0;display:flex;flex-direction:column;gap:5px}.ecx-ieo-winning-info strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--t1,#eef2f7);font-size:14px}.ecx-ieo-winning-info span{color:var(--t3,#7f8ca2);font-size:11px}.ecx-ieo-winning-award{text-align:right}.ecx-ieo-winning-award b{display:block;color:#f0b90b;font-size:22px;line-height:1.1;font-variant-numeric:tabular-nums}.ecx-ieo-winning-award span{display:block;margin-top:4px;color:#c7ceda;font-size:11px;font-weight:700}.ecx-ieo-winning-note{margin:13px 2px 0;color:var(--t3,#7f8ca2);font-size:12px;line-height:1.55;text-align:center}.ecx-ieo-winning-actions{padding-top:3px}.ecx-ieo-winning-actions .primary{background:linear-gradient(135deg,#f5c51b,#e7a900);color:#2d2000;box-shadow:0 8px 20px rgba(240,185,11,.18)}.ecx-ieo-winning-actions .primary:hover{background:linear-gradient(135deg,#ffdc54,#f0b90b)}
html.light-mode .ecx-ieo-winning-dialog{background:linear-gradient(180deg,#fffaf0 0,#fff 44%,#fff 100%);border-color:#e8bd39;box-shadow:0 28px 85px rgba(58,43,12,.22)}html.light-mode .ecx-ieo-winning-hero{background:radial-gradient(circle at 50% 0,rgba(255,211,76,.35),transparent 58%),linear-gradient(145deg,#fff4cc,#fffaf0)}html.light-mode .ecx-ieo-winning-hero h2{color:#362700!important}html.light-mode .ecx-ieo-winning-hero p{color:#67552f}html.light-mode .ecx-ieo-winning-close{color:#735d2f}html.light-mode .ecx-ieo-winning-card{background:#fffdf7;border-color:#ecd994}html.light-mode .ecx-ieo-winning-award span{color:#67552f}
@media(max-width:600px){.ecx-ieo-winning-hero{padding:29px 42px 22px}.ecx-ieo-winning-trophy{width:58px;height:58px;font-size:27px}.ecx-ieo-winning-hero h2{font-size:23px!important}.ecx-ieo-winning-body{padding:16px 16px 12px}.ecx-ieo-winning-card{grid-template-columns:40px minmax(0,1fr) auto;padding:12px 11px;gap:9px}.ecx-ieo-winning-coin{width:40px;height:40px;font-size:17px}.ecx-ieo-winning-award b{font-size:18px}.ecx-ieo-winning-info strong{font-size:13px}.ecx-ieo-winning-actions{padding-top:2px}}

/* ═══ 日间模式主题变量 ═══ */
html.light-mode:root {
  color-scheme: light;
  --bg: #F6F8FB;
  --bg0: #F6F8FB;
  --bg1: #FFFFFF;
  --bg2: #FFFFFF;
  --bg3: #EEF2F7;
  --brd: #D8E0EA;
  --brd2: #C7D0DC;
  --t1: #172033;
  --t2: #3F4B5F;
  --t3: #5E6B7D;
  --bg-primary: #F6F8FB;
  --bg-secondary: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-hover: #EEF2F7;
  --bg-input: #FFFFFF;
  --border-color: #D8E0EA;
  --border-light: #C7D0DC;
  --text-primary: #172033;
  --text-secondary: #3F4B5F;
  --text-muted: #5E6B7D;
  --nav-bg: #FFFFFF;
  --nav-hover: #EEF2F7;
  --main-bg: #F6F8FB;
  --card: #FFFFFF;
  --card2: #F7F9FC;
  --line: #D8E0EA;
  --text: #172033;
  --muted: #3F4B5F;
  --muted2: #5E6B7D;
  --dim: #5E6B7D;
  --panel: #FFFFFF;
  --field: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #EEF2F7;
  /* Legacy pages still use these short semantic tokens.  The original neon
     values are readable on the dark canvas but wash out against white cards. */
  --gn: #07856B;
  --rd: #D23D55;
  --bl: #216EE9;
  --or: #9A6B00;
  --green-bg: rgba(14, 160, 112, 0.10);
  --red-bg: rgba(213, 51, 76, 0.09);
  --blue-bg: rgba(55, 114, 255, 0.09);
}

html.light-mode body {
  background: var(--bg0, var(--bg-primary));
  color: var(--t1, var(--text-primary));
}

html.light-mode {
  background: #F6F8FB;
}

/* The shared navigation reserves its final height before JavaScript replaces
   the legacy header. Keep that placeholder in the selected theme as well so
   a light page never flashes a dark strip during navigation. */
html.light-mode body > nav.nav:not(.ecx-shared-nav),
html.light-mode body > nav.navbar:not(.ecx-shared-nav),
html.light-mode body > .app > nav.nav:not(.ecx-shared-nav),
html.light-mode body > .app > nav.navbar:not(.ecx-shared-nav) {
  background: #FFFFFF !important;
  border-bottom-color: #D8E0EA !important;
  box-shadow: 0 8px 28px rgba(37, 54, 84, 0.09) !important;
}

html.light-mode input,
html.light-mode select,
html.light-mode textarea {
  background-color: var(--bg-input, var(--bg2));
  border-color: var(--brd, var(--line));
  color: var(--t1, var(--text));
  color-scheme: light;
}

html.light-mode input::placeholder,
html.light-mode textarea::placeholder {
  color: #667386;
  opacity: 1;
}

/* Overlays should dim the inactive page without making it look like a second
   dark theme. */
html.light-mode .sheet-overlay,
html.light-mode .modal-overlay,
html.light-mode .filt-panel-overlay,
html.light-mode .my-sheet-overlay,
html.light-mode .main-menu-overlay,
html.light-mode .lang-overlay,
html.light-mode .pwd-modal {
  background: rgba(15, 23, 42, 0.42);
}

/* Mobile asset overview: remove page-local fixed dark surfaces. */
html.light-mode .top-nav {
  background: rgba(255, 255, 255, 0.96);
  border-color: var(--brd);
}

html.light-mode .top {
  background: rgba(255, 255, 255, 0.96);
  border-color: var(--line, var(--brd));
}

html.light-mode .nav,
html.light-mode .navbar {
  background: rgba(255, 255, 255, 0.96);
  border-color: var(--brd);
  box-shadow: 0 6px 20px rgba(24, 39, 75, 0.06);
}

html.light-mode .dropdown a:hover,
html.light-mode .dropdown span:hover,
html.light-mode .dropdown-item:hover,
html.light-mode .lang-dd span:hover {
  background: var(--bg3);
}

html.light-mode .banner,
html.light-mode .banner-bg {
  background: linear-gradient(135deg, #EEF4FF 0%, #F8FAFF 58%, #F1F8F6 100%);
  border-color: var(--brd);
}

html.light-mode .banner-content,
html.light-mode .banner h1,
html.light-mode .banner h2 {
  color: var(--t1, var(--text));
}

html.light-mode .banner p,
html.light-mode .banner .subtitle {
  color: var(--t2, var(--muted));
}

html.light-mode .hero {
  background: radial-gradient(circle at 88% 16%, rgba(55, 114, 255, 0.10), transparent 34%),
              linear-gradient(135deg, #F4F7FF 0%, #F8FBFF 58%, #F1F8F6 100%);
  border-color: var(--brd, var(--line));
}

html.light-mode .hero p,
html.light-mode .hero .subtitle {
  color: var(--t2, var(--muted));
}

html.light-mode .hero-copy .hero-kicker {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--t1, var(--text));
}

html.light-mode .hero-kicker,
html.light-mode .hero-platform-points span {
  background: rgba(255, 255, 255, 0.78);
  border-color: var(--brd);
}

html.light-mode .account-grid .acct-card,
html.light-mode .coin-list .coin-item {
  background: #FFFFFF;
  border-color: var(--brd);
  box-shadow: 0 5px 18px rgba(24, 39, 75, 0.06);
}

html.light-mode .total-card {
  background: linear-gradient(135deg, #EEF4FF 0%, #F7F9FF 55%, #F4F1FF 100%);
  color: var(--t1, var(--text));
  border-color: #C7D7F5;
  box-shadow: 0 10px 28px rgba(38, 76, 140, 0.10);
}

html.light-mode .total-card .tc-label,
html.light-mode .total-card .tc-val,
html.light-mode .total-card .tc-entry {
  color: var(--t1, var(--text));
}

html.light-mode .total-card .tc-entry {
  background: rgba(255, 255, 255, 0.76);
  border-color: #C7D7F5;
}

html.light-mode #futuresCard.acct-card,
html.light-mode #secondCard.acct-card {
  background: #FFFFFF;
  border-color: var(--brd);
}

html.light-mode #inviteCard.invite-card {
  background: linear-gradient(145deg, #F7F5FF, #FFFFFF) !important;
  border-color: #DCD5FF !important;
}

html.light-mode .account-grid #futuresCard .acct-name { color: #315FBC; }
html.light-mode .account-grid #secondCard .acct-name { color: #8A5C00; }
html.light-mode .account-grid #secondCard .acct-transfer { color: #7A5200; }
html.light-mode .top-nav .tn-r-btn:nth-child(1),
html.light-mode .quick-actions .tn-r-btn:nth-child(1) { color: #087F5B; }
html.light-mode .top-nav .tn-r-btn:nth-child(2),
html.light-mode .quick-actions .tn-r-btn:nth-child(2) { color: #8A5C00; }
html.light-mode .top-nav .tn-r-btn:nth-child(3),
html.light-mode .quick-actions .tn-r-btn:nth-child(3) { color: #315FBC; }

html.light-mode .project-visual {
  background: #FFFFFF;
  color: var(--text);
  border-color: var(--line);
  box-shadow: 0 7px 22px rgba(24, 39, 75, 0.07);
}

html.light-mode .merchant-hero,
html.light-mode .level-card,
html.light-mode .form-card,
html.light-mode .state-card,
html.light-mode .intro {
  background: #FFFFFF;
  color: var(--t1, var(--text));
  border-color: var(--brd, var(--line));
  box-shadow: 0 6px 20px rgba(24, 39, 75, 0.06);
}

html.light-mode .merchant-hero p,
html.light-mode .section-label,
html.light-mode .form-field label {
  color: var(--t2, var(--muted));
}

html.light-mode .lev-bar,
html.light-mode .inline-orders,
html.light-mode .quick-trade-controls .bs-switch,
html.light-mode .quick-trade-controls .tp-tabs,
html.light-mode .quick-contract-controls .dir-switch,
html.light-mode .quick-contract-controls .tp-tabs {
  background: #FFFFFF;
  border-color: var(--brd);
  box-shadow: 0 4px 16px rgba(24, 39, 75, 0.06);
}

/* Mobile C2C market: the branded dark redesign must also have a complete
   daylight palette. */
html.light-mode .c2c-hero {
  background: radial-gradient(circle at 92% 5%, rgba(14, 160, 112, 0.12), transparent 35%),
              linear-gradient(135deg, #EEF4FF 0%, #F7F9FF 55%, #F1F8F6 100%);
  border-color: #C7D7F5;
  box-shadow: 0 10px 28px rgba(38, 76, 140, 0.10);
}

html.light-mode .c2c-hero:before {
  background-image: linear-gradient(rgba(49, 95, 188, 0.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(49, 95, 188, 0.05) 1px, transparent 1px);
}

html.light-mode .hero-title { color: var(--t1); text-shadow: none; }
html.light-mode .hero-title em { color: #315FBC; }
html.light-mode .hero-kicker,
html.light-mode .hero-sub,
html.light-mode .hero-trust { color: #45546A; }
html.light-mode .hero-trust { border-color: #D8E0EA; }

html.light-mode .banner-content h1 {
  background: none;
  color: var(--t1);
  -webkit-text-fill-color: var(--t1);
  text-shadow: none;
}

html.light-mode .side-switch,
html.light-mode .filt-chip,
html.light-mode .filt-chip.amount input,
html.light-mode .fiat-wrap select,
html.light-mode .price-toggle,
html.light-mode .quick-price,
html.light-mode .desktop-filter-row .fiat-wrap select {
  background: #FFFFFF;
  color: var(--t1);
  border-color: var(--brd);
}

html.light-mode .ad-card {
  background: #FFFFFF;
  border-color: var(--brd);
  box-shadow: 0 7px 22px rgba(24, 39, 75, 0.07);
}

html.light-mode .empty-state {
  background: #FFFFFF;
  border-color: var(--brd);
}

/* Trading pages share the palette variables, but a handful of transient
   surfaces predate that contract and still carry a fixed dark background.
   These selectors cover only UI surfaces; chart canvases and market direction
   colours deliberately remain untouched. */
html.light-mode .inline-orders,
html.light-mode .orders-center-frame,
html.light-mode .detail-sheet,
html.light-mode .sym-panel,
html.light-mode .type-drop-panel,
html.light-mode .confirm-box,
html.light-mode .offline-modal-box,
html.light-mode .offline-box,
html.light-mode .email-modal-box,
html.light-mode .email-modal,
html.light-mode .pwd-modal-box,
html.light-mode .sheet,
html.light-mode .sheet-panel,
html.light-mode .sheet-content,
html.light-mode .bottom-sheet,
html.light-mode .drawer-panel,
html.light-mode .modal-box,
html.light-mode .modal-content {
  background: #FFFFFF !important;
  color: var(--t1) !important;
  border-color: var(--brd) !important;
  box-shadow: 0 12px 34px rgba(37, 54, 84, 0.12) !important;
}

/* Branded alert/prompt/confirm dialogs are shared by trading and account
   pages.  They used to stay dark after the page switched to daylight. */
html.light-mode .bmodal-box {
  background: #FFFFFF !important;
  color: var(--t1) !important;
  border-color: var(--brd) !important;
  box-shadow: 0 20px 55px rgba(37, 54, 84, 0.18) !important;
}

html.light-mode .bmodal-title { color: var(--t1) !important; }
html.light-mode .bmodal-body { color: var(--t2) !important; }
html.light-mode .bmodal-input,
html.light-mode .bmodal-input[readonly] {
  background: #F7F9FC !important;
  color: var(--t1) !important;
  border-color: var(--brd) !important;
}
html.light-mode .bmodal-btn-cancel {
  background: #EEF2F7 !important;
  color: var(--t1) !important;
}

html.light-mode .inline-order-card,
html.light-mode .ord-card,
html.light-mode .type-drop-item:active,
html.light-mode .lev-drop,
html.light-mode .ob-tabs,
html.light-mode .ob-spread {
  background: var(--bg3) !important;
  border-color: var(--brd) !important;
}

html.light-mode .toast-notification,
html.light-mode .toast:not(.ok):not(.err):not(.success):not(.error) {
  background: #FFFFFF !important;
  color: var(--t1) !important;
  border: 1px solid var(--brd) !important;
  box-shadow: 0 10px 30px rgba(37, 54, 84, 0.14) !important;
}

/* Full-screen symbol/market selectors are normal page surfaces in daylight,
   not dark overlays. The dimming masks behind them stay translucent. */
html.light-mode .symbol-modal,
html.light-mode .sym-drawer,
html.light-mode .sym-drawer .sym-panel,
html.light-mode .sm-header,
html.light-mode .sm-search,
html.light-mode .sm-search-wrap,
html.light-mode .sm-list,
html.light-mode .symbol-picker-header,
html.light-mode .sym-drawer .sp-search,
html.light-mode .symbol-picker-search-wrap,
html.light-mode .sym-drawer .sp-list,
html.light-mode .chart-fs,
html.light-mode .cf-hd {
  background: var(--bg0) !important;
  color: var(--t1) !important;
  border-color: var(--brd) !important;
}

html.light-mode .sm-search input,
html.light-mode .sp-search input {
  background: #FFFFFF !important;
  color: var(--t1) !important;
  border-color: var(--brd) !important;
}

html.light-mode .sm-header h3,
html.light-mode .sm-item .name,
html.light-mode .sm-item .price,
html.light-mode .level-deposit {
  color: var(--t1) !important;
}

html.light-mode .sm-fullname,
html.light-mode .sm-empty,
html.light-mode .level-deposit small {
  color: var(--t3) !important;
}

html.light-mode .sm-item {
  border-bottom-color: var(--brd) !important;
}

html.light-mode .sm-change.flat {
  color: var(--t2) !important;
  background: var(--bg3) !important;
}

html.light-mode .sm-item:hover,
html.light-mode .sm-item:active,
html.light-mode .sp-it.sel,
html.light-mode .sym-drawer .sp-it:hover,
html.light-mode .sym-drawer .sp-it:active {
  background: #EEF2F7 !important;
}

/* Legacy trading widgets that still use fixed dark fills. */
html.light-mode .product-card,
html.light-mode .bottom-panel,
html.light-mode .order-table thead th,
html.light-mode .credit-mode-bar,
html.light-mode .ob-qty-select,
html.light-mode .ob-qty-select option {
  background: #FFFFFF !important;
  color: var(--t1) !important;
  border-color: var(--brd) !important;
}

html.light-mode table tbody tr:hover td,
html.light-mode .order-table tbody tr:nth-child(even) td {
  background: rgba(55, 114, 255, 0.045) !important;
}

html.light-mode .site-footer,
html.light-mode footer {
  background-color: #FFFFFF;
  border-color: var(--brd);
}

/* Keep live market direction values readable on white/light cards. */
html.light-mode .coin-table .num.green,
html.light-mode .ticker-chg.up,
html.light-mode .hero-stat-val.up,
html.light-mode .change-up {
  color: #087F5B !important;
}

html.light-mode .coin-table .num.red,
html.light-mode .ticker-chg.down,
html.light-mode .hero-stat-val.down,
html.light-mode .change-down {
  color: #B4233A !important;
}