/* Scheme 1: soft blue controls on the white frontend. No admin or chart changes. */
body.frontend-light{--action-blue:#2563eb;--action-blue-hover:#1d4ed8;--action-blue-soft:#eff6ff;--action-blue-line:#bfdbfe}
body.frontend-light .gold{background:var(--action-blue)!important;color:#fff!important;border-color:var(--action-blue)!important}
body.frontend-light button.gold:not(:disabled):hover{background:var(--action-blue-hover)!important;border-color:var(--action-blue-hover)!important}
body.frontend-light .selected,
body.frontend-light .spot-timeframes button.gold,
body.frontend-light .spot-buy-sell button.gold,
body.frontend-light .option-periods button.gold,
body.frontend-light .periods button.selected,
body.frontend-light .wide-tabs button.selected,
body.frontend-light .personal-tabs button.selected,
body.frontend-light .spot-order-filters button.gold,
body.frontend-light .home-tech-tabs button.selected{background:var(--action-blue-soft)!important;color:var(--action-blue)!important;border-color:var(--action-blue-line)!important}
body.frontend-light .spot-timeframes button.gold:not(:disabled):hover,
body.frontend-light .spot-buy-sell button.gold:not(:disabled):hover,
body.frontend-light .option-periods button.gold:not(:disabled):hover,
body.frontend-light button.selected:not(:disabled):hover{background:#dbeafe!important;color:var(--action-blue-hover)!important;border-color:#93c5fd!important}
body.frontend-light button:not(.gold):not(.selected):not(:disabled):hover{border-color:#93c5fd}
body.frontend-light button:focus-visible,
body.frontend-light a:focus-visible,
body.frontend-light input:focus-visible,
body.frontend-light select:focus-visible{outline:3px solid #bfdbfe;outline-offset:2px}
body.frontend-light input:focus,body.frontend-light select:focus{border-color:var(--action-blue)}
body.frontend-light .spot-unit{background:var(--action-blue-soft);color:var(--action-blue);border:1px solid var(--action-blue-line)}
body.frontend-light .spot-symbol-select i,
body.frontend-light .spot-picker-item>b,
body.frontend-light .trade-dialog-close,
body.frontend-light .option-confirm-panel>button{color:var(--action-blue)}
body.frontend-light .spot-picker-search,
body.frontend-light .spot-picker-item.selected{border-color:var(--action-blue)!important}
body.frontend-light #nav a.active{color:var(--action-blue)}
body.frontend-light #nav a.active img{filter:brightness(0) saturate(100%) invert(34%) sepia(95%) saturate(2850%) hue-rotate(203deg) brightness(98%) contrast(96%)}
body.frontend-light button.gold:disabled,
body.frontend-light button.selected:disabled,
body.frontend-light button:disabled{background:#e2e8f0!important;color:#64748b!important;border-color:#cbd5e1!important;cursor:not-allowed}

/* Spot chart screen only: trade action matches the rising candle green. */
body.frontend-light .spot-chart-page .spot-chart-trade.gold:not(:disabled){background:#14ba6c!important;border-color:#14ba6c!important;color:#063e23!important}
body.frontend-light .spot-chart-page .spot-chart-trade.gold:not(:disabled):hover{background:#10a95f!important;border-color:#10a95f!important;color:#063e23!important}


/* Spot buy/sell: solid green/red, white text and explicit selected checkmark. */
body.frontend-light .spot-deal-page .spot-buy-sell button{position:relative;justify-content:center;text-align:center;min-height:58px;padding:16px;border-width:2px;border-style:solid;border-radius:12px;font-weight:650;font-size:18px;opacity:1;box-shadow:none}
body.frontend-light .spot-deal-page .spot-buy-sell button:first-child{background:#14ba6c!important;border-color:#14ba6c!important;color:#fff!important}
body.frontend-light .spot-deal-page .spot-buy-sell button:last-child{background:#dc454f!important;border-color:#dc454f!important;color:#fff!important}
body.frontend-light .spot-deal-page .spot-buy-sell button:first-child.gold{background:#14ba6c!important;border-color:#0b8f51!important;color:#fff!important;box-shadow:inset 0 0 0 1px #0b8f51}
body.frontend-light .spot-deal-page .spot-buy-sell button:last-child.gold{background:#dc454f!important;border-color:#b3303c!important;color:#fff!important;box-shadow:inset 0 0 0 1px #b3303c}
body.frontend-light .spot-deal-page .spot-buy-sell button::after{content:'✓';position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:16px;font-weight:700;visibility:hidden}
body.frontend-light .spot-deal-page .spot-buy-sell button.gold::after{visibility:visible}
body.frontend-light .spot-deal-page .spot-buy-sell button i,
body.frontend-light .spot-deal-page .spot-buy-sell button em{display:none}
body.frontend-light .spot-deal-page form>button.gold.full:not(:disabled){background:#14ba6c!important;border-color:#14ba6c!important;color:#063e23!important}
body.frontend-light .spot-deal-page form>button.gold.full:not(:disabled):hover{background:#10a95f!important;border-color:#10a95f!important}

/* Follow the selected spot side without changing submit behavior or disabled styling. */
body.frontend-light .spot-deal-page:has(.spot-buy-sell button:last-child.gold) form>button.gold.full:not(:disabled){background:#dc454f!important;border-color:#dc454f!important;color:#fff!important}
body.frontend-light .spot-deal-page:has(.spot-buy-sell button:last-child.gold) form>button.gold.full:not(:disabled):hover{background:#c93843!important;border-color:#c93843!important;color:#fff!important}

/* Match the product symbol and the quantity unit typography on this spot screen. */
body.frontend-light .spot-deal-page .spot-quote b,
body.frontend-light .spot-deal-page .spot-unit{font-family:inherit;font-size:14px;font-weight:700;color:#18212f}

/* Slightly stronger typography for the marked spot order controls only. */
body.frontend-light .spot-deal-page label.field:has(select[aria-label="现货订单类型"]),
body.frontend-light .spot-deal-page select[aria-label="现货订单类型"],
body.frontend-light .spot-deal-page .spot-quantity input,
body.frontend-light .spot-deal-page .spot-quantity input::placeholder{font-weight:600}

/* Natural success notification: white surface, neutral copy, green accents only. */
body.frontend-light #tradeSuccessToast{background:#fff;color:#64748b;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 4px 18px rgba(15,23,42,.09)}
body.frontend-light #tradeSuccessToast>span{color:#1f2937;font-weight:700}
body.frontend-light #tradeSuccessToast>div b{color:#1f2937;font-weight:600}
body.frontend-light #tradeSuccessToast button{background:transparent;color:#1f2937;font-weight:600}
body.frontend-light #tradeSuccessToast button[aria-label="关闭"]{color:#1f2937;font-weight:400}
body.frontend-light #tradeSuccessToast button:not([aria-label]):hover{color:#1f2937;background:#f1f5f9}
body.frontend-light #tradeSuccessToast button[aria-label="关闭"]:hover{color:#1f2937;background:#f8fafc}


/* Spot confirmation actions remain neutral in every interaction state. */
body.frontend-light:has(.spot-deal-page) #modal .trade-dialog-actions button,
body.frontend-light:has(.spot-deal-page) #modal .trade-dialog-actions button.gold,
body.frontend-light:has(.spot-deal-page) #modal .trade-dialog-actions button:hover,
body.frontend-light:has(.spot-deal-page) #modal .trade-dialog-actions button:active,
body.frontend-light:has(.spot-deal-page) #modal .trade-dialog-actions button:focus,
body.frontend-light:has(.spot-deal-page) #modal .trade-dialog-actions button:focus-visible,
body.frontend-light:has(.spot-deal-page) #modal .trade-dialog-actions button:disabled{background:#f1f3f5!important;border-color:#d6dce3!important;color:#1f2937!important;box-shadow:none!important;font-weight:600;-webkit-tap-highlight-color:transparent}
body.frontend-light:has(.spot-deal-page) #modal .trade-dialog-actions button:focus-visible{outline:2px solid #cbd5e1;outline-offset:2px}

/* Trade-page candle intervals only: selected and pressed state is gray with white text. */
body.frontend-light .option-page .spot-timeframes button.gold:not(:disabled),
body.frontend-light .option-page .spot-timeframes button.gold:not(:disabled):hover,
body.frontend-light .option-page .spot-timeframes button:not(:disabled):active{background:#aeb7c2!important;border-color:#aeb7c2!important;color:#fff!important;font-weight:600}

/* Match trading-mode and expiry selections to the trade interval controls. */
body.frontend-light .option-page .spot-buy-sell button.gold:not(:disabled),
body.frontend-light .option-page .spot-buy-sell button.gold:not(:disabled):hover,
body.frontend-light .option-page .spot-buy-sell button:not(:disabled):active,
body.frontend-light .option-page .option-periods button.gold:not(:disabled),
body.frontend-light .option-page .option-periods button.gold:not(:disabled):hover,
body.frontend-light .option-page .option-periods button:not(:disabled):active{background:#219847!important;border-color:#219847!important;color:#fff!important;font-weight:600}

/* Option order actions only: green buy, red sell, white labels. */
body.frontend-light .option-page button[onclick^="submitOption('buy'"]:not(:disabled),
body.frontend-light .option-page button[onclick^="submitOption('buy'"]:not(:disabled):hover,
body.frontend-light .option-page button[onclick^="submitOption('buy'"]:not(:disabled):active{background:#219847!important;border-color:#219847!important;color:#fff!important;font-weight:600}
body.frontend-light .option-page button[onclick^="submitOption('sell'"]:not(:disabled),
body.frontend-light .option-page button[onclick^="submitOption('sell'"]:not(:disabled):hover,
body.frontend-light .option-page button[onclick^="submitOption('sell'"]:not(:disabled):active{background:#dc454f!important;border-color:#dc454f!important;color:#fff!important;font-weight:600}

/* Option confirmation actions match the neutral spot confirmation buttons. */
body.frontend-light .option-confirm-panel .option-confirm-actions button,
body.frontend-light .option-confirm-panel .option-confirm-actions button.gold,
body.frontend-light .option-confirm-panel .option-confirm-actions button:hover,
body.frontend-light .option-confirm-panel .option-confirm-actions button:active,
body.frontend-light .option-confirm-panel .option-confirm-actions button:focus,
body.frontend-light .option-confirm-panel .option-confirm-actions button:focus-visible,
body.frontend-light .option-confirm-panel .option-confirm-actions button:disabled{background:#f1f3f5!important;border-color:#d6dce3!important;color:#1f2937!important;box-shadow:none!important;font-weight:600;-webkit-tap-highlight-color:transparent}
body.frontend-light .option-confirm-panel .option-confirm-actions button:focus-visible{outline:2px solid #cbd5e1;outline-offset:2px}

/* Contract action buttons match the option buy/sell palette. */
body.frontend-light .option-page button[onclick^="submitContract('buy'"]:not(:disabled),
body.frontend-light .option-page button[onclick^="submitContract('buy'"]:not(:disabled):hover,
body.frontend-light .option-page button[onclick^="submitContract('buy'"]:not(:disabled):active{background:#219847!important;border-color:#219847!important;color:#fff!important;font-weight:600}
body.frontend-light .option-page button[onclick^="submitContract('sell'"]:not(:disabled),
body.frontend-light .option-page button[onclick^="submitContract('sell'"]:not(:disabled):hover,
body.frontend-light .option-page button[onclick^="submitContract('sell'"]:not(:disabled):active{background:#dc454f!important;border-color:#dc454f!important;color:#fff!important;font-weight:600}

/* Contract confirmation matches the neutral spot and option confirmation actions. */
body.frontend-light:has(.option-page) #modal .trade-dialog-actions button,
body.frontend-light:has(.option-page) #modal .trade-dialog-actions button.gold,
body.frontend-light:has(.option-page) #modal .trade-dialog-actions button:hover,
body.frontend-light:has(.option-page) #modal .trade-dialog-actions button:active,
body.frontend-light:has(.option-page) #modal .trade-dialog-actions button:focus,
body.frontend-light:has(.option-page) #modal .trade-dialog-actions button:focus-visible,
body.frontend-light:has(.option-page) #modal .trade-dialog-actions button:disabled{background:#f1f3f5!important;border-color:#d6dce3!important;color:#1f2937!important;box-shadow:none!important;font-weight:600;-webkit-tap-highlight-color:transparent}
body.frontend-light:has(.option-page) #modal .trade-dialog-actions button:focus-visible{outline:2px solid #cbd5e1;outline-offset:2px}

/* The metals entry shares the spot deal form and now shares its typography too. */
body.frontend-light .metals-spot-page select[aria-label="现货订单类型"] option{background:#f1f3f5;color:#1f2937;font-weight:600}
body.frontend-light .metals-spot-page select[aria-label="现货订单类型"] option:checked{background:#e2e8f0;color:#1f2937}

/* Positions quote notice toggle only: black pill and white arrow, open or closed. */
body.frontend-light .positions-page .spot-source-note summary::after{background:#000;color:#fff}

/* History screens only: neutral chart shortcut and buy/sell badge backgrounds. */
body.frontend-light .option-history-page .spot-trade-heading>a:last-child{display:grid;place-items:center;width:38px;height:38px;padding:0;border-radius:14px;background:#f1f3f5;color:#1f2937}
body.frontend-light .option-history-page .spot-side-tag.buy,
body.frontend-light .option-history-page .spot-side-tag.sell{background:#f1f3f5;border:1px solid #e2e8f0}

/* Spot history matches contract/option history shortcut and side badges. */
body.frontend-light .spot-orders-page .spot-trade-heading>a:last-child{display:grid;place-items:center;width:38px;height:38px;padding:0;border-radius:14px;background:#f1f3f5;color:#1f2937}
body.frontend-light .spot-orders-page .spot-side-tag.buy,
body.frontend-light .spot-orders-page .spot-side-tag.sell{background:#f1f3f5;border:1px solid #e2e8f0}

/* Deposit currency/network selectors fit the white frontend; withdrawal is unchanged. */
body.frontend-light .deposit-screen .withdraw-icon-picker{color:#1f2937}
body.frontend-light .deposit-screen .withdraw-icon-picker summary{background:#f1f3f5;color:#1f2937;border-color:#d6dce3}
body.frontend-light .deposit-screen .withdraw-icon-picker[open] summary{border-color:#94a3b8}
body.frontend-light .deposit-screen .withdraw-icon-picker summary::after,
body.frontend-light .deposit-screen .withdraw-picker-arrow{color:#64748b}
body.frontend-light .deposit-screen .withdraw-picker-options{background:#fff;border-color:#d6dce3;box-shadow:0 6px 18px rgba(15,23,42,.1)}
body.frontend-light .deposit-screen .withdraw-picker-options button{background:#fff;color:#1f2937}
body.frontend-light .deposit-screen .withdraw-picker-options button:hover,
body.frontend-light .deposit-screen .withdraw-picker-options button[aria-pressed="true"]{background:#eef1f4;color:#1f2937}
body.frontend-light .deposit-screen .withdraw-icon-picker .network-label small{color:#64748b}

/* Recharge upload and submit controls match the neutral white page. */
body.frontend-light .deposit-screen .localized-file-button{background:#eef1f4;border-color:#d6dce3;color:#1f2937;font-weight:600}
body.frontend-light .deposit-screen .localized-file-control:active .localized-file-button{background:#e5e9ee;color:#1f2937}
body.frontend-light .deposit-screen button.gold.full,
body.frontend-light .deposit-screen button.gold.full:hover,
body.frontend-light .deposit-screen button.gold.full:active,
body.frontend-light .deposit-screen button.gold.full:focus{background:#f1f3f5!important;border:1px solid #d6dce3!important;color:#1f2937!important;font-weight:600;box-shadow:none;-webkit-tap-highlight-color:transparent}
body.frontend-light .deposit-screen button.gold.full:focus-visible{outline:2px solid #94a3b8;outline-offset:2px}
body.frontend-light .deposit-screen button.gold.full:disabled{opacity:.6;cursor:not-allowed}

/* Withdrawal currency/network selectors match recharge selectors. */
body.frontend-light #configuredWithdrawal .withdraw-icon-picker{color:#1f2937}
body.frontend-light #configuredWithdrawal .withdraw-icon-picker summary{background:#f1f3f5;color:#1f2937;border-color:#d6dce3}
body.frontend-light #configuredWithdrawal .withdraw-icon-picker[open] summary{border-color:#94a3b8}
body.frontend-light #configuredWithdrawal .withdraw-icon-picker summary::after,
body.frontend-light #configuredWithdrawal .withdraw-picker-arrow{color:#64748b}
body.frontend-light #configuredWithdrawal .withdraw-picker-options{background:#fff;border-color:#d6dce3;box-shadow:0 6px 18px rgba(15,23,42,.1)}
body.frontend-light #configuredWithdrawal .withdraw-picker-options button{background:#fff;color:#1f2937}
body.frontend-light #configuredWithdrawal .withdraw-picker-options button:hover,
body.frontend-light #configuredWithdrawal .withdraw-picker-options button[aria-pressed="true"]{background:#eef1f4;color:#1f2937}
body.frontend-light #configuredWithdrawal .withdraw-icon-picker .network-label small{color:#64748b}


/* Recharge submit matches the blue withdrawal submit; upload stays neutral. */
body.frontend-light .deposit-screen button.gold.full,
body.frontend-light .deposit-screen button.gold.full:hover,
body.frontend-light .deposit-screen button.gold.full:active,
body.frontend-light .deposit-screen button.gold.full:focus{background:#2563eb!important;border-color:#2563eb!important;color:#fff!important;font-weight:600}

/* Only recharge address card and screenshot upload surface become white. */
body.frontend-light .deposit-screen .deposit-address-card,
body.frontend-light .deposit-screen .deposit-address-row,
body.frontend-light .deposit-screen .localized-file-control{background:#fff}

/* Silver rounded frame with white breathing room around the recharge QR. */
body.frontend-light .deposit-screen .deposit-address-qr{box-sizing:content-box;max-width:calc(100% - 26px);padding:12px;border:1px solid #c0c0c0;border-radius:14px;background:#fff}

/* Bank transfer and international wire share these recharge cards. */
body.frontend-light .bank-deposit>section.card{background:#fff}

/* Shared recharge header: digital wallet, bank transfer and wire transfer. */
body.frontend-light .deposit-screen .deposit-fixed-top{background:#fff}

/* ICO subscription: white surface and restrained, legible financial values. */
body.frontend-light .ico-detail-page>.card{background:#fff!important;color:#1f2937;border:1px solid #e2e8f0}
body.frontend-light .ico-detail-page>.card p,
body.frontend-light .ico-detail-page .muted{color:#64748b}
body.frontend-light .ico-detail-page>.card b,
body.frontend-light .ico-detail-page .balance .accent{color:#1f2937;font-weight:600;font-variant-numeric:tabular-nums}
body.frontend-light .ico-detail-page h3.accent{color:#1e3a5f;font-weight:700}
body.frontend-light .ico-detail-page>.card hr{border:0;border-top:1px solid #e2e8f0}
body.frontend-light .ico-detail-page .coin>span{color:#475569}

/* Five remaining home shortcuts: equal spacing and consistent touch targets. */
body.frontend-light .shortcuts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:20px 12px 18px;align-items:start;text-align:center;background:#fff}
body.frontend-light .shortcuts a{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;min-width:0;min-height:70px;padding:6px 2px;border-radius:12px;color:#1f2937;font-size:12px;font-weight:500;line-height:1.4;text-decoration:none;-webkit-tap-highlight-color:transparent}
body.frontend-light .shortcuts img{display:block;width:36px;height:36px;object-fit:contain;margin:0;flex-shrink:0}
body.frontend-light .shortcuts a:active{background:#f1f3f5}
body.frontend-light .shortcuts a:focus-visible{outline:2px solid #94a3b8;outline-offset:2px}

/* Refined home icon set: slightly larger to retain the two-tone details. */
body.frontend-light .shortcuts img{width:44px;height:44px}

/* Compensate logo artwork's internal whitespace without resizing the brand. */
body.frontend-light #home-content-area footer img{transform:translateX(-8px)!important}

body.frontend-light #app:has(#home-content-area) .frontend-tools-header img.home-header-brand{transform:translateX(clamp(-12px,calc((100vw - 701px) * 12),0px))!important}

/* Neutral navigation palette; layout and destination behavior remain unchanged. */
body.frontend-light #nav a{color:#8a94a3}
body.frontend-light #nav a img{filter:none!important;opacity:.52}
body.frontend-light #nav a.active{color:#334155;font-weight:600}
body.frontend-light #nav a.active img{filter:none!important;opacity:1}
body.frontend-light #nav a:active{background:#f1f3f5}

/* Dark gray idle navigation; selected and pressed items are deep black. */
body.frontend-light #nav a{color:#555}
body.frontend-light #nav a img{filter:brightness(0)!important;opacity:.667}
body.frontend-light #nav a.active,
body.frontend-light #nav a:active{color:#111}
body.frontend-light #nav a.active img,
body.frontend-light #nav a:active img{filter:brightness(0)!important;opacity:1}

/* White frontend language selector, with a restrained neutral selected state. */
body.frontend-light .unified-language-picker{background:#fff;color:#111}
body.frontend-light .unified-language-picker .language-picker-title{background:#fff;color:#111}
body.frontend-light .unified-language-picker .language-picker-close{color:#111!important}
body.frontend-light .unified-language-picker .language-picker-row{background:#fff!important;color:#111!important;border-color:#e2e5e9!important}
body.frontend-light .unified-language-picker .language-picker-row.selected,
body.frontend-light .unified-language-picker .language-picker-row:hover,
body.frontend-light .unified-language-picker .language-picker-row:active{background:#f1f3f5!important;color:#111!important;border-color:#cbd1d8!important}
body.frontend-light .unified-language-picker .language-choice-mark{color:#111}

/* Announcement typography matches the white dialog surface. */
body.frontend-light #modal .frontend-announcement h3{color:#18212f;font-weight:650}
body.frontend-light #modal .frontend-announcement p{color:#475569}

/* Restrained headings and headline metrics in the homepage information section. */
body.frontend-light #home-content-area .card h3.accent,
body.frontend-light #home-content-area .home-tech-card h3,
body.frontend-light #home-content-area .stats strong{color:#334155}

body.frontend-light .boot-splash img{width:200px;height:64px;max-width:70vw;object-fit:contain;opacity:1}

/* Account return control matches the light spot-chart return button. */
body.frontend-light .personal-top>a:first-child{display:grid;place-items:center;box-sizing:border-box;width:38px;height:38px;padding:0;background:#f1f3f5;color:#18212f;border:0;border-radius:14px;font-size:26px;line-height:1;text-decoration:none;flex-shrink:0}
body.frontend-light .personal-top>a:first-child:active{background:#e5e9ee}

/* Account explanatory text and shared frontend order-entry icons. */
body.frontend-light .personal-total>small{color:#555}
body.frontend-light .personal-total>small>span,
body.frontend-light .positions-summary>button,
body.frontend-light .deposit-orders-icon,
body.frontend-light #app a[href="#/spot-orders"],
body.frontend-light #app a[href="#/option-order-history"],
body.frontend-light #app a[href="#/records"],
body.frontend-light #app .option-page a[href="#/positions"]{color:#111}

/* Account funding shortcuts: black arrows on white rounded-square tiles. */
body.frontend-light .personal-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:20px 10px;background:#f5f5f5;border-radius:16px}
body.frontend-light .personal-actions>button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;background:transparent;border:0;padding:0;color:#111;font-size:15px;line-height:1.4}
body.frontend-light .personal-actions>button .account-action-icon{display:grid;place-items:center;box-sizing:border-box;width:68px;height:68px;margin:0;border-radius:20px;background:#fff;color:#111;font-size:30px}
body.frontend-light .personal-actions>button:active .account-action-icon{background:#e9ecef}
body.frontend-light .personal-actions .account-action-icon svg{display:block;width:30px;height:30px}

/* Compact account shortcuts with close icon-label spacing. */
body.frontend-light .personal-actions{padding:10px 8px;gap:8px}
body.frontend-light .personal-actions>button{background:transparent!important;gap:3px;min-height:0;height:auto;padding:0!important;font-size:13px;line-height:18px}
body.frontend-light .personal-actions>button .account-action-icon{width:44px;height:44px;min-width:44px;min-height:44px;flex:0 0 44px;border-radius:13px;margin:0;padding:0}
body.frontend-light .personal-actions .account-action-icon svg{width:24px;height:24px}

/* One continuous neutral surface behind the account overview, without moving its content. */
body.frontend-light .personal-overview{display:flow-root;background:#f5f5f5;box-shadow:0 0 0 16px #f5f5f5;margin-bottom:18px}
body.frontend-light .personal-overview .personal-top,
body.frontend-light .personal-overview .personal-total,
body.frontend-light .personal-overview .personal-actions{background:transparent}

/* Extend the same neutral background across the personal-center page only. */
body.frontend-light:has(.personal-center){background:#f5f5f5}
body.frontend-light #app:has(.personal-center),
body.frontend-light .personal-center,
body.frontend-light .personal-center .personal-tabs,
body.frontend-light .personal-center .personal-menu,
body.frontend-light .personal-center .personal-token{background:#f5f5f5}

/* Only the three account balance cards switch from yellow gradient to white. */
body.frontend-light .personal-center .personal-fund{background:#fff;color:#111}

/* Transfer labels share the account amount color with a modest semibold weight. */
body.frontend-light .personal-center .personal-fund-bottom button{color:#111;font-weight:600}

/* Soft mint badges match the supplied verified-state reference. */
body.frontend-light .personal-menu em.personal-badge-soft-green{background:#e7f5ef;color:#4e9e85;font-weight:500}

body.frontend-light .personal-menu em.personal-badge-rejected{background:#fdecee;color:#c93e4b;font-weight:500}

/* Invite code and credit score are plain black values; verification badges keep their status colors. */
body.frontend-light .personal-menu>button[onclick="go('invite')"] em,
body.frontend-light .personal-menu>button[onclick="go('credit-score')"] em{background:transparent;color:#111}

/* Verification detail uses the same status colors as the account badge. */
body.frontend-light .demo-verification-card button.verification-approved:disabled{background:#e7f5ef!important;color:#4e9e85!important;border-color:#d3eade!important;opacity:1}
body.frontend-light .demo-verification-card button.verification-rejected,
body.frontend-light .demo-verification-card button.verification-rejected:hover,
body.frontend-light .demo-verification-card button.verification-rejected:active{background:#fdecee!important;color:#c93e4b!important;border-color:#f3ced4!important}

/* Credit score is red below full marks and green at 100, without a badge fill. */
body.frontend-light .personal-menu>button[onclick="go('credit-score')"] em.credit-score-low,
body.frontend-light .credit-score-value.credit-score-low{color:#c93e4b;background:transparent}
body.frontend-light .personal-menu>button[onclick="go('credit-score')"] em.credit-score-full,
body.frontend-light .credit-score-value.credit-score-full{color:#219847;background:transparent}

/* Consistent neutral line icons for all personal-center menu actions. */
body.frontend-light .personal-menu .personal-menu-icon{box-sizing:border-box;width:38px;height:38px;flex:0 0 38px;border:0;border-radius:12px;background:#f1f3f5;color:#334155}
body.frontend-light .personal-menu .personal-menu-icon svg{display:block;width:22px;height:22px}

/* Remember-login control matches the neutral frontend rather than browser lime. */
body.frontend-light .login-options label{display:inline-flex;align-items:center;gap:8px;color:#334155}
body.frontend-light .login-options input[type="checkbox"][name="remember"]{width:16px;height:16px;min-width:16px;margin:0;padding:0;accent-color:#334155;vertical-align:middle;cursor:pointer}

/* Frontend authentication colors from the supplied reference. */
body.frontend-light #simAuthForm[data-auth-mode="login"] button[type="submit"].gold{background:#111!important;border-color:#111!important;color:#fff!important;font-weight:600}
body.frontend-light #simAuthForm[data-auth-mode="register"] button[type="submit"].gold{background:#ff9d28!important;border-color:#ff9d28!important;color:#111!important;font-weight:600}
body.frontend-light #simAuthForm[data-auth-mode="login"] button[type="submit"].gold:disabled,
body.frontend-light #simAuthForm[data-auth-mode="register"] button[type="submit"].gold:disabled{opacity:.6;cursor:not-allowed}

/* Login-page registration entry uses the same orange as the registration action. */
body.frontend-light .auth:has(#simAuthForm[data-auth-mode="login"]) #switchAuth{color:#ff9d28!important;font-weight:600}
body.frontend-light .auth:has(#simAuthForm[data-auth-mode="register"]) #switchAuth{color:#111!important;font-weight:600}

/* AI mining catalog: neutral page with white cards and restrained product marks. */
body.frontend-light:has(.staking-catalog),
body.frontend-light #app:has(.staking-catalog),
body.frontend-light .staking-catalog{background:#f6f7f9}
body.frontend-light .staking-catalog .stake-summary,
body.frontend-light .staking-catalog .grid>.card{background:#fff}
body.frontend-light .staking-catalog .grid>.card h3 .accent{color:#334155}

/* Subtle mint circular product mark, matching the supplied horizontal title layout. */
body.frontend-light .staking-catalog .staking-product-title{display:flex;align-items:center;gap:12px;color:#1f2937}
body.frontend-light .staking-catalog .staking-product-mark{display:inline-grid;place-items:center;width:40px;height:40px;flex:0 0 40px;border-radius:50%;background:#e2f5eb;color:#378967;font-size:17px;font-weight:650;line-height:1}

body.frontend-light .staking-catalog .staking-product-mark{background:transparent;padding:0;overflow:hidden}
body.frontend-light .staking-catalog .staking-product-mark>svg{display:block;width:40px;height:40px;flex-shrink:0}

/* Highlight only the mining catalog order-count number. */
body.frontend-light .staking-catalog .stake-orders>span{color:#219847;font-weight:700}

/* Active staking-order status uses the same bold green as the order count. */
body.frontend-light .staking-page .stake-order [data-stake-phase].accent{color:#219847;font-weight:700}

/* Market and lending disclosure controls match the positions-page toggle. */
body.frontend-light .spot-page .spot-source-note summary::after,
body.frontend-light .loan-description .loan-description-arrow{background:#000;color:#fff}

body.frontend-light .loan-product-value{color:#334155;font-weight:650}

/* Identity front/back upload controls match the recharge file chooser. */
body.frontend-light .page:has(form[onsubmit="submitDemoVerification(event)"]) .localized-file-button{background:#eef1f4;border-color:#d6dce3;color:#1f2937;font-weight:600}
body.frontend-light .page:has(form[onsubmit="submitDemoVerification(event)"]) .localized-file-control:active .localized-file-button{background:#e5e9ee;color:#1f2937}
body.frontend-light .page:has(form[onsubmit="submitDemoVerification(event)"]) .localized-file-name{color:#9aa0aa}

/* Metals pair label and non-tradable closed-market status. */
body.frontend-light .metals-spot-page .metal-pair-label{display:inline-flex;align-items:center;gap:0;letter-spacing:0;word-spacing:0;white-space:nowrap;font-kerning:normal}
body.frontend-light .metals-spot-page .metal-pair-chevron{margin-left:3px}
body.frontend-light .metals-spot-page button.metal-market-closed:disabled{background:#facc15!important;border-color:#facc15!important;color:#422006!important;font-weight:600;opacity:1!important;cursor:not-allowed;box-shadow:none}

/* Neutral funding-history direction icons. */
body.frontend-light .deposit-orders-page .deposit-order-direction{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:0 0 38px;border-radius:12px;background:#f1f3f5!important;color:#334155!important;border:0}
body.frontend-light .personal-total .account-funding-history-icon{display:inline-flex;align-items:center;justify-content:center;color:#111827}

/* Loan repayment records: gray page, white cards, soft semantic statuses. */
body.frontend-light:has(.loan-record-page){background:#f5f5f5}
body.frontend-light .loan-record-page{background:#f5f5f5}
body.frontend-light .loan-record-page .loan-record-fixed{background:#f5f5f5}
body.frontend-light .loan-record-page .loan-order-scroll{background:#f5f5f5}
body.frontend-light .loan-record-page .loan-order-card{background:#fff;box-shadow:none}
body.frontend-light .loan-record-page .loan-order-status{font-weight:600;border:0;opacity:1}
body.frontend-light .loan-record-page .loan-order-status.repaid{background:#e5f4ed!important;color:#267557!important}
body.frontend-light .loan-record-page .loan-order-status.rejected{background:#fbe9ec!important;color:#b43c50!important}
body.frontend-light .loan-record-page .loan-order-status.pending{background:#fff2dd!important;color:#996017!important}
body.frontend-light .loan-record-page .loan-order-status.active{background:#e8effa!important;color:#365f98!important}
body.frontend-light .loan-record-page .loan-order-status.overdue{background:#fde8e8!important;color:#b83232!important}

/* Shared customer-service channel selector. */
body.frontend-light .support-channel-page{background:#fff;min-height:65vh}
body.frontend-light .support-channel-heading{display:flex;align-items:center;gap:16px;margin-bottom:24px}
body.frontend-light .support-channel-heading a{display:grid;place-items:center;width:38px;height:38px;background:#f1f3f5;border-radius:12px;color:#111827}
body.frontend-light .support-channel-row{display:flex;align-items:center;gap:18px;width:100%;padding:20px 10px;background:#fff;border:0;border-bottom:1px solid #edf0f2;border-radius:0;color:#343b43;text-align:left;font-size:17px}
body.frontend-light .support-channel-row .support-channel-symbol{display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;border-radius:50%;color:white}
body.frontend-light .support-channel-row .support-channel-arrow{margin-left:auto;color:#87909a}
body.frontend-light .support-channel-row:active{background:#f5f7f9}

/* Cover the outer app gutters as well as the repayment-list interior. */
body.frontend-light:has(.loan-record-page) #app{background:#f5f5f5;min-height:100dvh}
body.frontend-light .loan-record-page .loan-status-tabs button{background:transparent}
body.frontend-light .loan-record-page .loan-online-support{background:transparent}

/* Full-page loan catalog: neutral outer background and white product cards. */
body.frontend-light:has(.loan-catalog-page){background:#f5f5f5}
body.frontend-light:has(.loan-catalog-page) #app{background:#f5f5f5;min-height:100dvh}
body.frontend-light .loan-catalog-page{background:#f5f5f5;min-height:calc(100dvh - 100px)}
body.frontend-light .loan-catalog-page .card{background:#fff}
body.frontend-light .loan-catalog-page .loan-description{background:#fff}

/* Personal-center support shortcut matches the home header headset. */
body.frontend-light .personal-top{position:relative}
body.frontend-light .personal-header-tools{display:flex;align-items:center;gap:12px}
body.frontend-light .personal-header-tools .personal-support{display:grid;place-items:center;width:34px;height:34px;padding:6px;background:transparent;border:0;color:#18212f;line-height:0}
body.frontend-light .personal-header-tools .personal-support:active{background:#e5e9ee}
body.frontend-light .personal-top h2{position:absolute;left:50%;transform:translateX(-50%);pointer-events:none}

/* Compact option order controls; keep all periods on one scrollable row. */
body.frontend-light .option-page .option-periods{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:thin}
body.frontend-light .option-page .option-periods button{flex:1 0 92px;min-width:0;white-space:nowrap;padding:11px 6px}
body.frontend-light .option-page .option-order-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}
body.frontend-light .option-page .option-order-actions button{width:100%;margin:0!important;text-align:center;padding:15px 8px}
body.frontend-light .option-page .option-order-meta{margin:14px 0 18px;font-size:12px;color:#61738b}
body.frontend-light .option-page .option-order-meta p{margin:8px 0;line-height:1.6}
body.frontend-light .option-page .option-order-meta .balance{margin-top:12px}

/* Match the precious-metals closed-market status without enabling trading. */
body.frontend-light .spot-chart-page button.spot-chart-trade.spot-market-closed:disabled{background:#facc15!important;border-color:#facc15!important;color:#422006!important;font-weight:600;opacity:1!important;cursor:not-allowed;box-shadow:none}

body.frontend-light .bind-email-form label{display:block;margin:12px 0}
body.frontend-light .bind-email-form input{box-sizing:border-box;width:100%;height:42px;min-height:42px;padding:10px 12px;margin-top:6px}
body.frontend-light .bind-email-form .registration-code-row{display:flex;align-items:center;gap:8px}
body.frontend-light .bind-email-form .registration-code-row input{flex:1 1 0;min-width:0;width:0;height:42px;min-height:42px;margin:6px 0 0}
body.frontend-light .bind-email-form .registration-code-row button{flex:0 0 auto;max-width:48%;height:auto;min-height:42px;margin-top:6px;padding:10px 12px;line-height:20px;white-space:normal}

/* Spot and metals: primary submit directly follows quantity percentages. */
body.frontend-light .spot-deal-page .spot-percent{margin-bottom:14px}
body.frontend-light .spot-deal-page form>button.gold.full[type=submit]{margin-top:0;margin-bottom:10px}

/* Keep pending spot/metals orders in the same content column as the wallet rows. */
body.frontend-light .spot-deal-page>.pending-limits{box-sizing:border-box;width:100%;max-width:none;margin:24px 0 0;padding:0}
body.frontend-light .spot-deal-page>.pending-limits h3{margin:0 0 12px;font-size:16px;line-height:1.5}
body.frontend-light .spot-deal-page>.pending-limits>p{margin:12px 0}
body.frontend-light .spot-deal-page form>.spot-fee-detail:last-child{margin-bottom:0}

/* Light financial charts: keep candles/labels legible on the white-blue website. */
body.frontend-light #spotCandlestickChart,body.frontend-light .option-subchart,body.frontend-light .option-chart-wrap{background:#f7faff;border-radius:10px}body.frontend-light .option-gear{background:#f7faff;color:#294563}body.frontend-light #spotCandlestickChart{outline:1px solid #e1eaf5;outline-offset:-1px}

/* Metals spacing: breathe below chart, reduce gap before order fields. */
body.frontend-light .metals-spot-page .spot-buy-sell{margin-top:14px!important;margin-bottom:16px!important}
body.frontend-light .metals-spot-page .spot-market-type{margin-top:12px!important;margin-bottom:16px!important}