:root,
[data-theme="dark"] {
  --trade-bg: var(--color-bg-main, #0b0e11);
  --trade-surface: var(--color-bg-card, #181a20);
  --trade-surface-2: var(--color-bg-card, #181a20);
  --trade-surface-3: var(--color-bg-elevated, #2b313a);
  --trade-border: var(--color-border-subtle, rgba(255, 255, 255, .06));
  --trade-border-strong: rgba(184, 198, 220, .22);
  --trade-title: var(--color-text-primary, #eaecef);
  --trade-text: #c8cdd8;
  --trade-muted: var(--color-text-secondary, #848e9c);
  --trade-up: var(--color-up, #0ecb81);
  --trade-down: var(--color-down, #f6465d);
  --trade-warning: #f3b84b;
  --trade-shadow: 0 14px 34px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .025);
  --trade-row-hover: rgba(var(--account-accent-rgb), .10);
  --trade-row-active: rgba(var(--account-accent-rgb), .16);
  --trade-header-bg: rgba(11, 14, 17, .95);
  --trade-group-header-bg: #243044;
  --trade-group-header-fg: #f7f9fc;
  --trade-group-header-muted: #c9d3e2;
  --trade-sticky-col-bg: #1c2230;
  --header-height: 70px;
  --sidebar-width: 220px;
  --account-accent: #36d399;
  --account-accent-rgb: 54, 211, 153;
}

[data-theme="light"] {
  --trade-bg: var(--color-bg-main, #f5f5f5);
  --trade-surface: var(--color-bg-card, #fff);
  --trade-surface-2: var(--color-bg-card, #fff);
  --trade-surface-3: var(--color-bg-elevated, #e9edf2);
  --trade-border: var(--color-border-subtle, rgba(0, 0, 0, .06));
  --trade-border-strong: rgba(25, 28, 38, .16);
  --trade-title: var(--color-text-primary, #1e2329);
  --trade-text: #3A3F4B;
  --trade-muted: var(--color-text-secondary, #707a8a);
  --trade-up: var(--color-up, #03a66d);
  --trade-down: var(--color-down, #cf304a);
  --trade-shadow: 0 8px 24px rgba(25, 28, 38, .06);
  --trade-header-bg: rgba(255, 255, 255, .96);
  --trade-group-header-bg: #DDE3EE;
  --trade-group-header-fg: #141820;
  --trade-group-header-muted: #4E5968;
  --trade-sticky-col-bg: #F4F7FC;
  --trade-row-hover: rgba(var(--account-accent-rgb), .10);
  --trade-row-active: rgba(var(--account-accent-rgb), .16);
}

body[data-account-mode="standard"] {
  --account-accent: #2396ff;
  --account-accent-rgb: 35, 150, 255;
}

body[data-account-mode="practice"] {
  --account-accent: #36d399;
  --account-accent-rgb: 54, 211, 153;
}

* { box-sizing: border-box; }
html { background: var(--trade-bg); scroll-behavior: smooth; scrollbar-gutter: stable; }
body.trader-body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  color: var(--trade-text);
  background:
    radial-gradient(circle at 72% -20%, rgba(var(--account-accent-rgb), .09), transparent 38%),
    var(--trade-bg);
  font: 400 16px/1.55 var(--ccx-font-family, system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.trader-body:not(.session-ready) .trader-header,
body.trader-body:not(.session-ready) .watch-sidebar,
body.trader-body:not(.session-ready) .mobile-trader-nav,
body.trader-body:not(.session-ready) .support-launch { visibility: hidden; }
.trader-body a { color: inherit; text-decoration: none; }
.trader-body button, .trader-body input { font: inherit; }
.trader-body button, .trader-body a { -webkit-tap-highlight-color: transparent; }
.trader-body button { color: inherit; }
.trader-body h1, .trader-body h2, .trader-body h3, .trader-body p { margin-top: 0; }
.trader-body h1 { color: var(--trade-title); font-size: 26px; line-height: 1.2; font-weight: 850; }
.trader-body h2 { color: var(--trade-title); font-size: 20px; line-height: 1.25; font-weight: 800; }
.trader-body h3 { color: var(--trade-title); font-size: 16px; line-height: 1.35; }
.trader-body :focus-visible { outline: 2px solid var(--account-accent); outline-offset: 3px; }
[hidden] { display: none !important; }
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.skip-link {
  position: fixed;
  z-index: 300;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  color: #071017 !important;
  border-radius: 8px;
  background: var(--account-accent);
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

.trader-header {
  position: fixed;
  z-index: 60;
  inset: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(160px, var(--sidebar-width)) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  height: var(--header-height);
  padding: 0 18px;
  border-bottom: 1px solid var(--trade-border);
  background: var(--trade-header-bg, rgba(15, 17, 24, .95));
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  backdrop-filter: blur(16px);
}
.trader-header-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  padding: 4px;
  border: 1px solid var(--trade-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--trade-surface-3) 72%, transparent);
  justify-self: end;
}
@media (min-width: 901px) {
  .trader-header .account-session { display: none; }
}
.trader-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  width: max-content;
  line-height: 1;
  color: var(--trade-title);
  white-space: nowrap;
  text-decoration: none;
  cursor: default;
  pointer-events: none;
}
.trader-logo span { color: var(--account-accent); font-size: 30px; font-weight: 950; letter-spacing: -1.2px; line-height: 1; }
.trader-logo .ccx-brand-copy,
.trader-logo .ccx-brand-copy strong { color: #E6C15A; font-size: 15px; font-weight: 800; letter-spacing: .04em; }
.trader-logo .ccx-brand-copy small { color: #C9A24A; font-size: 9px; font-weight: 600; letter-spacing: .22em; }
.trader-logo small { color: var(--trade-muted); font-size: 10px; font-weight: 800; letter-spacing: .2px; line-height: 1.2; }
.trader-nav { display: flex; align-items: stretch; justify-content: center; min-width: 0; height: 100%; }
.trader-nav a {
  position: relative;
  display: grid;
  place-items: center;
  flex: 1 1 0;
  min-width: 58px;
  max-width: 108px;
  min-height: 46px;
  padding: 0 clamp(8px, 1vw, 14px);
  color: var(--trade-muted);
  font-size: 14px;
  font-weight: 750;
  white-space: nowrap;
  transition: color 160ms ease, background 160ms ease;
}
.trader-nav a::after {
  content: "";
  position: absolute;
  inset: auto 14px 0;
  height: 2px;
  border-radius: 999px;
  background: var(--account-accent);
  transform: scaleX(0);
  transition: transform 160ms ease;
}
.trader-nav a:hover, .trader-nav a.active { color: var(--trade-title); background: rgba(var(--account-accent-rgb), .055); }
.trader-nav a.active::after { transform: scaleX(1); }
.terminal-health {
  display: none !important;
}
.terminal-health span { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(var(--account-accent-rgb), .1); }
.terminal-health.offline { color: var(--trade-warning); border-color: rgba(243, 184, 75, .24); background: rgba(243, 184, 75, .08); }
.account-session {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px;
  border: 1px solid var(--trade-border);
  border-radius: 10px;
  background: var(--trade-bg);
  flex-shrink: 0;
}
.account-session > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 11px;
  border-radius: 7px;
  color: var(--trade-text);
  background: var(--trade-surface-3);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}
.account-chip, .snapshot-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 4px 9px;
  border: 1px solid rgba(var(--account-accent-rgb), .25);
  border-radius: 999px;
  color: var(--account-accent);
  background: rgba(var(--account-accent-rgb), .07);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.snapshot-label.offline { color: var(--trade-warning); border-color: rgba(243, 184, 75, .28); background: rgba(243, 184, 75, .08); }
.trader-account { display: flex; flex-shrink: 0; align-items: center; gap: 9px; min-width: 0; }
.trader-account > div { display: grid; gap: 1px; }
.trader-account small { color: var(--trade-muted); font-size: 12px; font-weight: 750; }
.trader-account > a {
  display: grid;
  place-items: center;
  min-width: 46px;
  min-height: 46px;
  margin-left: auto;
  padding: 0 8px;
  border: 1px solid rgba(var(--account-accent-rgb), .35);
  border-radius: 9px;
  color: var(--account-accent);
  background: rgba(var(--account-accent-rgb), .08);
  font-size: 11px;
  font-weight: 850;
}
.snapshot-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--account-accent); box-shadow: 0 0 0 4px rgba(var(--account-accent-rgb), .12); }

.watch-sidebar {
  position: fixed;
  z-index: 40;
  inset: var(--header-height) auto 0 0;
  width: var(--sidebar-width);
  overflow-y: auto;
  padding: 12px 10px 18px;
  border-right: 1px solid var(--trade-border);
  background: var(--trade-surface-2);
}
.watch-title { display: flex; justify-content: space-between; padding: 6px 8px 10px; color: var(--trade-muted); font-size: 11px; font-weight: 800; letter-spacing: .7px; }
.watch-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 54px;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 9px;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}
.watch-item:hover, .watch-item.active { border-color: rgba(var(--account-accent-rgb), .22); background: rgba(var(--account-accent-rgb), .07); transform: translateX(2px); }
.watch-item > span:first-child, .watch-price { display: grid; gap: 1px; }
.watch-item b, .watch-price strong { color: var(--trade-title); font-size: 12px; }
.watch-item small { color: var(--trade-muted); font-size: 10px; }
.watch-price { text-align: right; }
.watch-price strong,
.watch-price small {
  font-family: "Cascadia Mono", "SF Mono", "JetBrains Mono", Consolas, ui-monospace, monospace;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: 0;
}
.watch-all { display: block; min-height: 46px; margin: 8px; padding: 13px 8px; color: var(--account-accent); font-size: 12px; font-weight: 750; }

.trader-main {
  position: relative;
  z-index: 1;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100dvh;
  margin-left: var(--sidebar-width);
  padding-top: var(--header-height);
}
.trader-main::before {
  position: fixed;
  z-index: 0;
  top: 12%;
  left: calc(var(--sidebar-width) + 18%);
  color: var(--account-accent);
  font-size: clamp(42px, 7vw, 96px);
  font-weight: 950;
  letter-spacing: 7px;
  opacity: .018;
  transform: translate(-50%, -50%) rotate(-17deg);
  white-space: nowrap;
  pointer-events: none;
}
.trader-main > * {
  position: relative;
  z-index: 1;
}
body[data-account-mode="standard"] .trader-main::before,
body[data-account-mode="practice"] .trader-main::before { content: attr(data-account-label); }

body.onboarding-mode .trader-main{margin-left:0;min-height:calc(100vh - var(--trader-header-height,72px));}
body.onboarding-mode .trader-main::before{content:none;}
.onboarding-shell{width:min(960px,calc(100% - 32px));margin:32px auto 64px;display:grid;gap:24px;}
.onboarding-hero{text-align:center;padding:24px;}
.onboarding-hero>span{color:var(--accent,#299cff);font-size:12px;font-weight:800;letter-spacing:.16em;}
.onboarding-hero h1{margin:8px 0;font-size:clamp(28px,4vw,40px);}
.onboarding-hero p{max-width:680px;margin:0 auto;color:var(--muted,#8b96a8);line-height:1.7;}
.onboarding-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start;}
.onboarding-step,.onboarding-finish{border:1px solid rgba(255,255,255,.09);border-radius:16px;background:#181a20;padding:24px;box-shadow:0 18px 50px rgba(0,0,0,.18);}
.onboarding-step>header{display:flex;gap:14px;align-items:flex-start;margin-bottom:20px;}
.onboarding-step>header>span{display:grid;place-items:center;flex:0 0 32px;height:32px;border-radius:50%;background:#2b313a;color:#eaecef;font-weight:800;}
.onboarding-step.complete>header>span{background:rgba(14,203,129,.16);color:#0ecb81;}
.onboarding-step h3{margin:2px 0 4px;font-size:19px;}
.onboarding-step header p,.onboarding-finish p{margin:0;color:#848e9c;line-height:1.55;}
.onboarding-step form{display:grid;gap:14px;}
.onboarding-step form>label,.onboarding-code-row label{display:grid;gap:7px;color:#cbd2dc;font-weight:700;}
.onboarding-step input,.onboarding-step select{width:100%;min-height:48px;padding:0 14px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:#0b0e11;color:#eaecef;}
.onboarding-step input:focus,.onboarding-step select:focus{outline:2px solid rgba(41,156,255,.45);border-color:#299cff;}
.onboarding-code-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end;}
.onboarding-code-row .terminal-button{min-height:48px;white-space:nowrap;}
.onboarding-review-note{padding:12px;border-radius:10px;background:rgba(246,70,93,.1);color:#ff8191;}
.onboarding-identity-form{grid-template-columns:repeat(2,minmax(0,1fr));}
.onboarding-finish{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;}
.onboarding-finish .form-error{grid-column:1/-1;}
@media(max-width:760px){.onboarding-shell{width:min(100% - 20px,620px);margin-top:16px}.onboarding-grid{grid-template-columns:1fr}.onboarding-identity-form{grid-template-columns:1fr}.onboarding-finish{grid-template-columns:1fr}.onboarding-code-row{grid-template-columns:1fr}.onboarding-step,.onboarding-finish{padding:18px}}
body.quick-account [data-quick-hidden],
body[data-account-mode="practice"] [data-quick-hidden],
body.quick-account [data-open-fund-drawer],
body[data-account-mode="practice"] [data-open-fund-drawer],
body.quick-account [data-profile-tool],
body[data-account-mode="practice"] [data-profile-tool],
body.quick-account a[href="#/profile/identity"],
body[data-account-mode="practice"] a[href="#/profile/identity"] {
  display: none !important;
}
.trader-container { width: min(1320px, 100%); margin: 0 auto; padding: 16px 18px 30px; }
.terminal-loading { display: grid; min-height: calc(100vh - var(--header-height)); min-height: calc(100dvh - var(--header-height)); place-content: center; justify-items: center; padding: 30px; text-align: center; }
.terminal-loading h1 { margin: 16px 0 6px; }
.terminal-loading p { color: var(--trade-muted); }
.loading-spinner { width: 36px; height: 36px; border: 3px solid var(--trade-border); border-top-color: var(--account-accent); border-radius: 50%; animation: spin .8s linear infinite; }

.breadcrumb { display: flex; align-items: center; gap: 7px; min-height: 26px; margin-bottom: 6px; overflow-x: auto; color: var(--trade-muted); font-size: 12px; white-space: nowrap; scrollbar-width: none; }
.breadcrumb::-webkit-scrollbar, .terminal-subnav::-webkit-scrollbar, .filter-row::-webkit-scrollbar, .chart-intervals::-webkit-scrollbar { display: none; }
.breadcrumb a:hover { color: var(--account-accent); }
.breadcrumb strong { color: var(--trade-text); font-weight: 700; }
.trader-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.trader-page-head h1 { margin: 3px 0 4px; }
.trader-page-head p { max-width: 760px; margin-bottom: 0; color: var(--trade-muted); font-size: 14px; }
.eyebrow { color: var(--account-accent); font-size: 11px; font-weight: 850; letter-spacing: 1.05px; }
.terminal-subnav {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 10px 0 12px;
  padding: 5px;
  overflow-x: auto;
  border: 1px solid var(--trade-border);
  border-radius: 10px;
  background: rgba(20, 24, 35, .72);
  scrollbar-width: none;
}
.terminal-subnav a { flex: 0 0 auto; min-height: 38px; padding: 9px 13px; border-radius: 7px; color: var(--trade-muted); font-size: 12px; font-weight: 750; white-space: nowrap; }
.terminal-subnav a:hover, .terminal-subnav a.active { color: var(--trade-title); background: rgba(var(--account-accent-rgb), .09); }
.service-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
  padding: 11px 13px;
  border: 1px solid rgba(243, 184, 75, .28);
  border-radius: 11px;
  background: rgba(243, 184, 75, .08);
}
.service-notice b { color: #ffd375; }
.service-notice p { margin: 2px 0 0; color: var(--trade-text); font-size: 13px; }
.service-notice button { flex: 0 0 auto; min-height: 46px; padding: 0 15px; border: 1px solid rgba(243, 184, 75, .35); border-radius: 8px; color: #ffd375; background: rgba(243, 184, 75, .09); cursor: pointer; }

.account-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 82px;
  margin-bottom: 12px;
  padding: 13px 15px;
  overflow: hidden;
  border: 1px solid rgba(var(--account-accent-rgb), .28);
  border-radius: 13px;
  background: linear-gradient(110deg, rgba(var(--account-accent-rgb), .15), rgba(var(--account-accent-rgb), .025) 62%), var(--trade-surface);
  box-shadow: var(--trade-shadow);
}
.account-banner div { display: grid; gap: 2px; }
.account-banner small { color: var(--account-accent); font-size: 12px; font-weight: 800; }
.account-banner h2 { margin: 0; font-size: 18px; }
.account-banner p { margin: 0; color: var(--trade-muted); font-size: 13px; }
.account-banner > strong { color: rgba(var(--account-accent-rgb), .38); font-size: 31px; font-weight: 950; letter-spacing: 0; transform: none; }

.terminal-card-ui, .dashboard-metric, .market-card, .order-card, .instrument-overview, .chart-panel, .trade-launch-card, .asset-hero, .profile-card, .order-detail-card {
  border: 1px solid var(--trade-border);
  background: linear-gradient(145deg, rgba(255, 255, 255, .018), rgba(0, 0, 0, .025)), var(--trade-surface);
  box-shadow: var(--trade-shadow);
}
.terminal-card-ui, .market-card, .order-card, .instrument-overview, .chart-panel, .trade-launch-card, .asset-hero, .profile-card, .order-detail-card { border-radius: 13px; }
.card-pad { padding: 14px; }
.terminal-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.terminal-card-head > div { display: grid; gap: 1px; }
.terminal-card-head span { color: var(--account-accent); font-size: 10px; font-weight: 850; letter-spacing: .9px; }
.terminal-card-head h2 { margin: 0; }
.terminal-card-head > a { color: var(--account-accent); font-size: 12px; font-weight: 750; white-space: nowrap; }
.terminal-card-head > small { color: var(--trade-muted); }

.dashboard-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.dashboard-metric {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 124px;
  padding: 15px;
  overflow: hidden;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 12px;
  transition: transform 170ms ease, border-color 170ms ease, box-shadow 170ms ease;
}
.dashboard-metric::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--account-accent), transparent 76%);
  opacity: .72;
}
.dashboard-metric:hover, .market-card:hover, .order-card:hover { transform: translateY(-2px); border-color: rgba(var(--account-accent-rgb), .3); box-shadow: 0 17px 36px rgba(0, 0, 0, .29), 0 0 0 1px rgba(var(--account-accent-rgb), .04); }
.dashboard-metric small { display: block; margin-bottom: 8px; color: var(--trade-muted); font-size: 13px; }
.dashboard-metric strong { display: block; overflow: hidden; color: var(--trade-title); font-size: clamp(17px, 1.35vw, 23px); line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-metric em { display: block; margin-top: 8px; color: var(--trade-muted); font-size: 11px; font-style: normal; line-height: 1.4; }
.dashboard-focus { margin-bottom: 12px; padding: 15px; background: linear-gradient(135deg, rgba(var(--account-accent-rgb), .055), transparent 58%), var(--trade-surface); }
.quick-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.quick-flow a { display: flex; align-items: center; gap: 12px; min-height: 88px; padding: 13px; border: 1px solid var(--trade-border); border-radius: 11px; background: rgba(9, 12, 18, .38); box-shadow: inset 0 1px rgba(255, 255, 255, .025); transition: border-color 160ms ease, background 160ms ease, transform 160ms ease; }
.quick-flow a:hover { border-color: rgba(var(--account-accent-rgb), .3); background: rgba(var(--account-accent-rgb), .065); transform: translateY(-2px); }
.quick-flow a > b { display: grid; flex: 0 0 36px; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--account-accent); background: rgba(var(--account-accent-rgb), .09); }
.quick-flow span { display: grid; color: var(--trade-title); font-size: 14px; font-weight: 750; }
.quick-flow small { color: var(--trade-muted); font-size: 11px; font-weight: 400; }

.market-grid, .order-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.market-grid > .empty-state, .order-list > .empty-state { grid-column: 1 / -1; }
.market-card, .order-card { min-width: 0; padding: 13px; transition: transform 170ms ease, border-color 170ms ease, box-shadow 170ms ease; }
.market-card header, .order-card header, .order-detail-card > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.trader-instrument { display: flex; align-items: center; min-width: 0; gap: 8px; }
.trader-instrument > i { display: grid; flex: 0 0 38px; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(var(--account-accent-rgb), .18); border-radius: 10px; color: var(--account-accent); background: rgba(var(--account-accent-rgb), .07); font-size: 11px; font-style: normal; font-weight: 900; }
.market-instrument-icon { position: relative; display: grid; flex: 0 0 38px; place-items: center; width: 38px; height: 38px; overflow: hidden; border: 1px solid rgba(var(--account-accent-rgb), .2); border-radius: 10px; color: var(--account-accent); background: linear-gradient(145deg, rgba(var(--account-accent-rgb), .12), rgba(var(--account-accent-rgb), .035)); }
.market-instrument-icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.market-instrument-icon i { display: none; place-items: center; width: 100%; height: 100%; font-size: 11px; font-style: normal; font-weight: 900; }
.market-instrument-icon.icon-fallback img { display: none; }
.market-instrument-icon.icon-fallback i { display: grid; }
.trader-instrument > span { display: grid; min-width: 0; gap: 1px; }
.trader-instrument b { overflow: hidden; color: var(--trade-title); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.trader-instrument small { overflow: hidden; color: var(--trade-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.market-category { flex: 0 0 auto; padding: 4px 7px; border-radius: 6px; color: var(--trade-muted); background: var(--trade-surface-3); font-size: 10px; }
.market-price { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 13px 0 9px; }
.market-price strong { color: var(--trade-title); font-size: 23px; }
.market-price span { font-size: 13px; font-weight: 800; }
.market-card dl, .order-card dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin: 0; padding: 8px; border-radius: 8px; background: rgba(5, 8, 13, .3); }
.market-card dl div, .order-card dl div { min-width: 0; }
.market-card dt, .order-card dt { color: var(--trade-muted); font-size: 10px; }
.market-card dd, .order-card dd { margin: 2px 0 0; overflow: hidden; color: var(--trade-text); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.market-state { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 6px; border-radius: 999px; font-size: 9px; font-weight: 750; }
.market-state.open { color: var(--trade-up); background: rgba(54, 211, 153, .09); }
.market-state.stale { color: var(--trade-warning); background: rgba(243, 184, 75, .09); }
.market-card footer, .order-card footer, .order-detail-card footer { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 10px; }
.market-universe { margin-bottom: 12px; }
.market-category-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.market-category-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 4px 10px; min-height: 88px; padding: 11px 12px; border: 1px solid var(--trade-border); border-radius: 10px; color: var(--trade-text); background: rgba(5, 8, 13, .28); text-align: left; cursor: pointer; transition: transform 160ms ease, border-color 160ms ease, background 160ms ease; }
.market-category-summary:hover, .market-category-summary.active { border-color: rgba(var(--account-accent-rgb), .36); background: rgba(var(--account-accent-rgb), .07); transform: translateY(-1px); }
.market-category-summary > span { color: var(--trade-title); font-size: 14px; font-weight: 800; }
.market-category-summary > strong { display: grid; place-items: center; min-width: 28px; min-height: 24px; padding: 0 6px; border-radius: 999px; color: var(--account-accent); background: rgba(var(--account-accent-rgb), .09); font-size: 12px; }
.market-category-summary > small { grid-column: 1 / -1; display: -webkit-box; overflow: hidden; color: var(--trade-muted); font-size: 11px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.market-filter-row button span { display: inline-grid; place-items: center; min-width: 22px; min-height: 20px; margin-left: 4px; padding: 0 5px; border-radius: 999px; color: currentColor; background: rgba(255, 255, 255, .06); font-size: 10px; }
.market-filter-row button.active span { background: rgba(7, 16, 23, .15); }
.market-list-summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: -1px 0 11px; padding: 9px 11px; border: 1px solid var(--trade-border); border-radius: 9px; background: rgba(5, 8, 13, .22); }
.market-list-summary > div { display: grid; min-width: 0; gap: 2px; }
.market-list-summary b { color: var(--trade-title); font-size: 13px; }
.market-list-summary small { overflow: hidden; color: var(--trade-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.market-list-summary > span { flex: 0 0 auto; color: var(--account-accent); font-size: 10px; font-weight: 800; }
.market-catalog .market-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.terminal-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #071017 !important;
  background: var(--account-accent);
  font-size: 13px;
  font-weight: 850;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
}
.terminal-button.ghost { color: var(--trade-text) !important; border-color: var(--trade-border-strong); background: var(--trade-surface-3); }
.terminal-button:disabled, .trade-direction button:disabled { color: var(--trade-muted) !important; border-color: var(--trade-border); background: #20232c; cursor: not-allowed; opacity: .72; }
.filter-row { display: flex; gap: 7px; margin-bottom: 11px; overflow-x: auto; scrollbar-width: none; }
.filter-row button { flex: 0 0 auto; min-height: 46px; padding: 0 16px; border: 1px solid var(--trade-border); border-radius: 9px; color: var(--trade-muted); background: var(--trade-surface-2); font-weight: 750; cursor: pointer; }
.filter-row button.active { color: #071017; border-color: var(--account-accent); background: var(--account-accent); }
.load-more-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--trade-border); }
.load-more-row small { color: var(--trade-muted); }
.load-more-row .terminal-button { min-width: 168px; }

.order-card { border-left: 3px solid var(--account-accent); }
.order-status { padding: 4px 8px; border-radius: 999px; color: var(--account-accent); background: rgba(var(--account-accent-rgb), .09); font-size: 10px; font-weight: 800; white-space: nowrap; }
.order-status.settling, .order-status.pending { color: var(--trade-warning); background: rgba(243, 184, 75, .1); }
.order-status.won, .order-status.refunded, .order-status.settled { color: var(--trade-up); background: rgba(54, 211, 153, .1); }
.order-status.lost, .order-status.failed, .order-status.cancelled { color: var(--trade-down); background: rgba(239, 122, 75, .1); }
.order-core { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 8px; margin: 12px 0 9px; }
.order-core strong { font-size: 15px; }
.order-core b { color: var(--trade-title); }
.order-core > span { min-width: 70px; padding: 6px 8px; border-radius: 7px; color: var(--account-accent); background: rgba(var(--account-accent-rgb), .08); font-variant-numeric: tabular-nums; font-weight: 850; text-align: center; }

.empty-state { display: grid; place-items: center; min-height: 210px; padding: 24px 16px; border: 1px dashed var(--trade-border-strong); border-radius: 12px; background: rgba(26, 29, 41, .45); text-align: center; }
.empty-state > span { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 8px; border-radius: 50%; color: var(--account-accent); background: rgba(var(--account-accent-rgb), .08); }
.empty-state h2 { margin: 0 0 5px; }
.empty-state p { max-width: 460px; margin-bottom: 13px; color: var(--trade-muted); font-size: 13px; }

.instrument-overview { display: grid; grid-template-columns: minmax(250px, 1fr) auto; align-items: center; gap: 18px; min-height: 96px; padding: 13px 15px; }
.instrument-overview > div:first-child { display: grid; grid-template-columns: auto auto; align-items: end; gap: 3px 12px; }
.instrument-overview .trader-instrument { grid-column: 1 / -1; }
.instrument-overview > div > strong { color: var(--trade-title); font-size: 26px; }
.instrument-overview > div > span { font-weight: 800; }
.page-intro .trader-page-head.instrument-head { align-items: center; margin-bottom: 8px; gap: 8px; width: 100%; }
.page-intro .instrument-quote-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  width: 100%;
  min-width: 0;
}
.instrument-quote-board > .instrument-quote-inline {
  grid-area: name;
  width: auto;
}
.instrument-quote-board > .instrument-quote-inline .trader-instrument {
  flex: 0 1 auto;
}
.page-intro .instrument-quote-inline .trader-instrument { flex: 1 1 auto; min-width: 0; }
.page-intro .instrument-quote-inline .trader-instrument > i { flex-basis: 34px; width: 34px; height: 34px; border-radius: 9px; }
.page-intro .instrument-quote-inline .instrument-source {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid var(--trade-border);
  border-radius: 999px;
  background: var(--trade-surface-3);
  color: var(--trade-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
.page-intro .instrument-quote-inline .market-state {
  flex: 0 0 auto;
  margin-left: 0;
  min-height: 24px;
  padding: 2px 8px;
  font-size: 9px;
}
.page-intro .instrument-meta { display: grid; grid-template-columns: repeat(2, minmax(80px, 1fr)); gap: 8px; margin: 0; }
.page-intro .instrument-meta > div { padding: 8px 10px; border-radius: 8px; background: var(--trade-surface-3); display:flex; flex-direction:column; justify-content:center; min-height:48px; }
.page-intro .instrument-meta dt { color: var(--trade-muted); font-size: 10px; }
.page-intro .instrument-meta dd { max-width: 100%; margin: 3px 0 0; overflow: hidden; color: var(--trade-title); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.page-intro .instrument-meta-live dd.chart-live-quote { display: flex; align-items: baseline; gap: 8px; overflow: visible; white-space: nowrap; text-overflow: clip; }
.page-intro .instrument-meta-live .chart-live-quote strong { color: var(--trade-title); font-size: 18px; font-variant-numeric: tabular-nums; }
.page-intro .instrument-meta-live .chart-live-quote span { font-size: 13px; font-weight: 800; }

.page-intro-instrument {
  margin-bottom: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.page-intro-instrument .trader-page-head.instrument-head {
  margin-bottom: 8px;
}
.instrument-quote-board {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  grid-template-areas:
    "name main"
    "stats stats";
  gap: 8px 14px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--color-border-subtle, var(--trade-border));
  border-radius: 14px;
  background: var(--trade-surface);
  box-shadow: var(--trade-shadow);
}
.instrument-quote-main {
  grid-area: main;
  display: grid;
  justify-items: end;
  gap: 2px;
  min-width: 0;
  text-align: right;
}
.instrument-quote-main > small {
  color: var(--trade-muted);
  font-size: 11px;
  font-weight: 700;
}
.instrument-quote-main .chart-live-quote {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}
.instrument-quote-main .chart-live-quote strong {
  color: var(--trade-title);
  font-size: clamp(22px, 5vw, 30px);
  font-weight: 900;
  font-family: "DIN Pro", "Roboto Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: 0;
  line-height: 1.1;
}
.instrument-quote-main .chart-live-quote span {
  font-size: 14px;
  font-weight: 850;
  font-family: "DIN Pro", "Roboto Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;
  font-variant-numeric: tabular-nums lining-nums;
}
.instrument-quote-stats {
  grid-area: stats;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid var(--trade-border);
}
.instrument-quote-stats > div {
  min-width: 0;
  padding: 0;
  background: transparent;
}
.instrument-quote-stats dt {
  color: var(--trade-muted);
  font-size: 10px;
  font-weight: 700;
}
.instrument-quote-stats dd {
  margin: 3px 0 0;
  overflow: hidden;
  color: var(--trade-title);
  font-size: 13px;
  font-weight: 800;
  font-family: "DIN Pro", "Roboto Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;
  font-variant-numeric: tabular-nums lining-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.instrument-back {
  margin: 4px 0 0;
  text-align: center;
}
.instrument-back a {
  color: var(--trade-muted);
  font-size: 12px;
  font-weight: 700;
}
.instrument-back a:hover { color: var(--account-accent); }
.instrument-back-fab { display: none; }
.instrument-back-inline {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  margin-right: 2px;
  border: 1px solid var(--trade-border);
  border-radius: 9px;
  color: var(--trade-title);
  background: var(--trade-surface-3);
  text-decoration: none;
}
.instrument-back-inline:active { transform: scale(.96); }

.instrument-page { display: grid; gap: 0; min-width: 0; }
.instrument-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; margin: 10px 0 12px; }
.chart-panel { min-width: 0; padding: 12px; }
.chart-panel > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.chart-tools,
.chart-intervals {
  padding: 3px;
  border: 1px solid var(--trade-border);
  border-radius: 999px;
  background: var(--trade-surface-3);
}
.chart-tools { display: flex; flex: 0 0 auto; align-items: center; gap: 2px; }
.chart-tools button, .chart-intervals button {
  min-height: 36px;
  border: 0;
  border-radius: 999px;
  color: var(--trade-muted);
  background: transparent;
  cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.chart-tools button { min-width: 36px; padding: 0 10px; }
.chart-intervals { display: flex; flex: 1 1 auto; gap: 2px; margin: 0; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.chart-intervals button { flex: 0 0 auto; padding: 0 12px; font-size: 12px; font-weight: 750; }
.chart-intervals button.active,
.chart-tools button.active {
  color: #fff;
  background: rgba(var(--account-accent-rgb), .95);
  box-shadow: 0 4px 14px rgba(var(--account-accent-rgb), .24);
}
.chart-tools button:hover,
.chart-intervals button:hover { color: var(--trade-title); background: rgba(var(--account-accent-rgb), .12); }
.chart-tools button:active,
.chart-intervals button:active { transform: scale(.97); }
.chart-tools button[data-chart-draw="clear"] {
  margin-right: 2px;
}
.chart-ohlc { display: flex; gap: 12px; min-height: 22px; margin-top: 6px; overflow-x: auto; color: var(--trade-muted); font-size: 11px; white-space: nowrap; }
.chart-ohlc b { color: var(--trade-text); font-family: "DIN Pro", "Roboto Mono", "Cascadia Mono", Consolas, ui-monospace, monospace; font-variant-numeric: tabular-nums lining-nums; font-weight: 700; }
#marketChart { display: block; width: 100%; height: clamp(340px, 48vh, 520px); height: clamp(340px, 48dvh, 520px); border: 1px solid var(--color-border-subtle, var(--trade-border)); border-radius: 9px; background: var(--color-chart-bg, var(--trade-surface-2)); touch-action: none; cursor: crosshair; transition: background-color 160ms ease, border-color 160ms ease; }
#marketChart.dragging { cursor: grabbing; }
#marketChart.drawing-pen,
#marketChart.drawing-pen.dragging { cursor: crosshair; }
.chart-status,
.chart-help { display: none; }

/* Unified instrument page: one layout for every product / viewport */
body.instrument-view .page-intro-instrument {
  margin-bottom: 6px;
}
body.instrument-view .instrument-quote-board,
body.instrument-view .chart-panel {
  border-radius: 14px;
}
body.instrument-view .instrument-quote-board {
  padding: 10px 12px;
}
body.instrument-view .instrument-layout {
  grid-template-columns: 1fr;
  gap: 6px;
  margin: 4px 0 6px;
}
body.instrument-view .instrument-layout .trade-launch-card { display: none !important; }
body.instrument-view .instrument-back { display: none !important; }
body.instrument-view .chart-panel {
  order: 1;
  padding: 10px;
}
body.instrument-view .chart-panel > header {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
}
body.instrument-view .chart-intervals {
  width: auto;
  min-width: 0;
  gap: 2px;
}
body.instrument-view .chart-tools {
  width: auto;
  justify-self: end;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 2px;
  max-width: 100%;
}
body.instrument-view .chart-tools button,
body.instrument-view .chart-intervals button {
  min-height: 32px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 750;
}
body.instrument-view .chart-intervals button { padding: 0 9px; }
body.instrument-view .chart-tools button { min-width: 30px; padding: 0 7px; }
body.instrument-view .chart-ohlc {
  gap: 8px;
  margin-top: 6px;
  margin-bottom: 4px;
  font-size: 10px;
}
body.instrument-view #marketChart {
  height: clamp(300px, calc(100vh - 280px), 560px);
  height: clamp(300px, calc(100dvh - 280px), 560px);
  min-height: 280px;
  border-radius: 10px;
}
body.instrument-view .trader-container {
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}
body.instrument-view .mobile-trade-bar {
  position: fixed;
  z-index: 64;
  right: max(10px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  left: max(10px, env(safe-area-inset-left));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--trade-border-strong);
  border-radius: 13px;
  background: rgba(17, 20, 29, .96);
  box-shadow: 0 -10px 28px rgba(0, 0, 0, .34), 0 0 0 1px rgba(var(--account-accent-rgb), .04);
  backdrop-filter: blur(14px);
}
body.instrument-view .mobile-trade-bar > button {
  min-width: 0;
  min-height: 52px;
  border: 0;
  border-radius: 9px;
  color: #fff !important;
  font-size: 14px;
  font-weight: 850;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .22);
}
body.instrument-view .mobile-trade-bar .up,
body.instrument-view .mobile-trade-bar [data-open-order="up"] { background: linear-gradient(135deg, color-mix(in srgb, var(--trade-up) 86%, white), var(--trade-up)); box-shadow: 0 8px 22px color-mix(in srgb, var(--trade-up) 32%, transparent); }
body.instrument-view .mobile-trade-bar .down,
body.instrument-view .mobile-trade-bar [data-open-order="down"] { background: linear-gradient(135deg, color-mix(in srgb, var(--trade-down) 86%, white), var(--trade-down)); box-shadow: 0 8px 22px color-mix(in srgb, var(--trade-down) 30%, transparent); }
body.instrument-view .mobile-trade-bar button:disabled {
  color: var(--trade-muted) !important;
  background: #20232c;
  box-shadow: none;
  cursor: not-allowed;
  opacity: .78;
}
body.instrument-view .instrument-back-fab { display: none !important; }
body.instrument-view .support-launch {
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
}
body.order-dialog-open.instrument-view .mobile-trade-bar {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.trade-launch-card { display: flex; min-height: 100%; flex-direction: column; padding: 14px; }
.trade-launch-card > span { color: var(--account-accent); font-size: 10px; font-weight: 850; letter-spacing: .8px; }
.trade-launch-card h2 { margin: 0 0 8px; font-size: 18px; }
.trade-launch-card > p { margin-bottom: 4px; color: var(--trade-muted); font-size: 12px; }
.trade-launch-card dl { margin: 0 0 auto; }
.trade-launch-card dl div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--trade-border); font-size: 11px; }
.trade-launch-card dt { color: var(--trade-muted); }
.trade-launch-card dd { margin: 0; color: var(--trade-title); font-family: "DIN Pro", "Roboto Mono", "Cascadia Mono", Consolas, ui-monospace, monospace; font-variant-numeric: tabular-nums lining-nums; text-align: right; }
.trade-direction { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 13px; }
.trade-direction button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; border: 0; border-radius: 9px; color: white; font-weight: 850; cursor: pointer; transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease; }
.trade-direction button::before,
.mobile-trade-bar [data-open-order]::before { font-size: 17px; font-weight: 950; line-height: 1; }
.trade-direction button.up::before,
.mobile-trade-bar [data-open-order="up"]::before { content: "↑"; }
.trade-direction button.down::before,
.mobile-trade-bar [data-open-order="down"]::before { content: "↓"; }
.trade-direction .up { background: linear-gradient(135deg, color-mix(in srgb, var(--trade-up) 86%, white), var(--trade-up)); box-shadow: 0 9px 24px color-mix(in srgb, var(--trade-up) 30%, transparent); }
.trade-direction .down { background: linear-gradient(135deg, color-mix(in srgb, var(--trade-down) 86%, white), var(--trade-down)); box-shadow: 0 9px 24px color-mix(in srgb, var(--trade-down) 28%, transparent); }
.trade-direction button:hover { filter: brightness(1.06); transform: translateY(-1px); }
.trade-direction button:active { transform: translateY(0) scale(.98); }
.trade-direction button.up, .trade-direction button.down { color: #fff !important; }
.trade-launch-card > small { margin-top: 8px; color: var(--trade-muted); font-size: 10px; }
.instrument-notes .terminal-card-head { margin-bottom: 8px; }
.instrument-copy { margin: 0 0 10px; color: var(--trade-text); font-size: 13px; line-height: 1.5; }
.spec-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.spec-grid > div { min-width: 0; padding: 10px; border: 1px solid var(--trade-border); border-radius: 9px; background: rgba(5, 8, 13, .28); }
.spec-grid small { display: block; color: var(--trade-muted); font-size: 10px; }
.spec-grid b { display: block; margin-top: 3px; overflow: hidden; color: var(--trade-title); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

.asset-hero { display: grid; grid-template-columns: minmax(240px, .8fr) 1fr; align-items: center; gap: 20px; margin-bottom: 12px; padding: 18px; overflow: hidden; background: linear-gradient(110deg, rgba(var(--account-accent-rgb), .2), rgba(var(--account-accent-rgb), .025) 65%), var(--trade-surface); }
.asset-hero small { color: var(--account-accent); font-weight: 800; }
.asset-hero h2 { margin: 5px 0; font-size: clamp(28px, 4vw, 42px); }
.asset-hero p { margin: 0; color: var(--trade-muted); }
.asset-hero dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.asset-hero dl div { padding: 11px; border: 1px solid var(--trade-border); border-radius: 9px; background: rgba(5, 8, 13, .25); }
.asset-hero dt { color: var(--trade-muted); font-size: 11px; }
.asset-hero dd { margin: 4px 0 0; color: var(--trade-title); font-weight: 750; }
.ledger-list { display: grid; gap: 7px; }
.ledger-list > article { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(130px, auto); align-items: center; gap: 14px; min-height: 62px; padding: 9px 11px; border: 1px solid var(--trade-border); border-radius: 9px; background: rgba(5, 8, 13, .24); }
.ledger-list article > div { display: grid; }
.ledger-list b { color: var(--trade-title); }
.ledger-list small { color: var(--trade-muted); }
.ledger-list article > strong { font-size: 14px; }
.ledger-list article > span { color: var(--trade-muted); font-size: 12px; text-align: right; }

.profile-grid { display: grid; grid-template-columns: minmax(260px, .95fr) minmax(0, 1.15fr); gap: 12px; align-items: start; }
.profile-card { padding: 16px; }
.profile-card > span { color: var(--account-accent); font-size: 11px; font-weight: 850; }
.profile-card h2 { margin: 5px 0; }
.profile-card > p { margin-bottom: 10px; color: var(--trade-muted); font-size: 13px; overflow-wrap: anywhere; }
.profile-avatar { display: grid; place-items: center; width: 52px; height: 52px; margin: 0; border-radius: 14px; color: #071017; background: var(--account-accent); font-size: 22px; font-weight: 950; box-shadow: 0 10px 24px rgba(var(--account-accent-rgb), .2); }
.profile-card dl { display: grid; gap: 5px; margin: 13px 0 0; }
.profile-card dl div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--trade-border); }
.profile-card dt { color: var(--trade-muted); }
.profile-card dd { margin: 0; color: var(--trade-text); text-align: right; }
.settings-list { padding: 14px 16px; }
.settings-list h2 { margin: 0 0 6px; font-size: 16px; font-weight: 800; }
.settings-list a,
.settings-list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0 4px;
  border: 0;
  border-bottom: 1px solid var(--trade-border);
  border-radius: 0;
  color: var(--trade-text);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease, padding .15s ease;
}
.settings-list a:hover,
.settings-list button:hover,
.settings-list a:focus-visible,
.settings-list button:focus-visible {
  padding-inline: 8px;
  color: var(--trade-title);
  background: rgba(var(--account-accent-rgb), .07);
  outline: 0;
}
.settings-list a:last-child,
.settings-list button:last-child { border-bottom: 0; }
.settings-list span { display: grid; color: var(--trade-title); font-size: 14px; font-weight: 750; }
.settings-list small { color: var(--trade-muted); font-size: 11px; font-weight: 400; }
.settings-list b { flex: 0 0 auto; color: var(--account-accent); font-size: 13px; font-weight: 750; white-space: nowrap; }
.settings-list [data-logout] span { color: #ef8a7a; }
.settings-list [data-logout] b { color: #ef8a7a; }
.settings-list [data-logout]:hover,
.settings-list [data-logout]:focus-visible { background: rgba(239, 138, 122, .08); }

.order-detail-card { padding: 15px; }
.order-detail-hero { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px; margin: 13px 0 10px; padding: 11px; border-radius: 9px; background: rgba(5, 8, 13, .3); }
.order-detail-hero div { display: grid; }
.order-detail-hero small { color: var(--trade-muted); }
.order-detail-hero b { color: var(--trade-title); overflow-wrap: anywhere; }
.order-detail-hero > strong { font-size: 16px; }
.order-detail-hero > span { min-width: 78px; padding: 7px 9px; border-radius: 7px; color: var(--account-accent); background: rgba(var(--account-accent-rgb), .08); font-variant-numeric: tabular-nums; font-weight: 850; text-align: center; }
.order-detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin: 0; }
.order-detail-grid > div { min-width: 0; padding: 10px; border: 1px solid var(--trade-border); border-radius: 8px; background: rgba(5, 8, 13, .25); }
.order-detail-grid dt { color: var(--trade-muted); font-size: 10px; }
.order-detail-grid dd { margin: 4px 0 0; overflow: hidden; color: var(--trade-title); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

.order-dialog-backdrop {
  position: fixed;
  z-index: 140;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(5, 7, 11, .78);
  backdrop-filter: blur(8px);
}
.order-dialog {
  position: relative;
  width: min(680px, 100%);
  max-height: calc(100vh - 36px);
  max-height: calc(100dvh - 36px);
  overflow-y: auto;
  padding: 18px;
  border: 1px solid var(--trade-border-strong);
  border-radius: 16px;
  background: var(--trade-surface);
  box-shadow: 0 26px 74px rgba(0, 0, 0, .54);
}
.dialog-close { position: absolute; top: 12px; right: 12px; width: 46px; height: 46px; padding: 0; border: 1px solid var(--trade-border); border-radius: 9px; color: var(--trade-muted); background: var(--trade-surface-3); font-size: 22px; cursor: pointer; }
.order-dialog h2 { margin: 3px 50px 5px 0; }
.dialog-warning { margin-bottom: 13px; color: var(--trade-muted); font-size: 12px; }
.order-dialog fieldset { min-width: 0; margin: 0 0 13px; padding: 0; border: 0; }
.order-dialog legend { margin-bottom: 8px; color: var(--trade-title); font-weight: 750; }
.expiry-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.expiry-grid button { display: grid; place-items: center; min-height: 100px; padding: 7px; border: 1px solid var(--trade-border); border-radius: 9px; color: var(--trade-muted); background: var(--trade-surface-2); cursor: pointer; }
.expiry-grid button small { font-size: 10px; }
.expiry-grid button b { color: var(--trade-title); font: 700 26px/1.15 Georgia, serif; }
.expiry-grid button span { color: var(--trade-muted); font-size: 11px; }
.expiry-grid button .expiry-rate { margin-top: 4px; padding: 1px 7px; border-radius: 999px; color: var(--trade-up); background: rgba(var(--account-accent-rgb), .1); font-size: 12px; font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; }
.expiry-grid button.active .expiry-rate { color: var(--account-accent); background: rgba(var(--account-accent-rgb), .18); }
.expiry-grid button.active { border-color: var(--account-accent); background: rgba(var(--account-accent-rgb), .08); box-shadow: inset 0 0 0 1px rgba(var(--account-accent-rgb), .16); }
.amount-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-bottom: 9px; }
.amount-grid button { min-height: 46px; padding: 0 6px; border: 1px solid var(--trade-border); border-radius: 9px; color: var(--trade-text); background: var(--trade-surface-2); font-size: 11px; cursor: pointer; }
.amount-grid button.active { color: var(--account-accent); border-color: var(--account-accent); background: rgba(var(--account-accent-rgb), .08); }
.order-dialog label { display: block; margin-bottom: 5px; color: var(--trade-muted); font-size: 11px; }
.order-dialog input { width: 100%; min-height: 46px; padding: 0 12px; border: 1px solid var(--trade-border); border-radius: 9px; color: var(--trade-title); background: #0b0d12; }
.dialog-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 6px; margin: 10px 0; }
.dialog-summary div { min-width: 0; padding: 8px; border-radius: 7px; background: var(--trade-surface-2); text-align: center; }
.dialog-summary dt { color: var(--trade-muted); font-size: 10px; }
.dialog-summary dd { margin: 3px 0 0; overflow: hidden; color: var(--trade-title); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.form-error { min-height: 21px; margin: 0 0 6px; color: #ff9a73; font-size: 12px; text-align: center; }
.dialog-submit { width: 100%; min-height: 46px; }
.order-dialog-open { overflow: hidden; }

.mobile-trade-bar { display: none; }
.mobile-trader-nav { display: none; }
.up { color: var(--trade-up) !important; }
.down { color: var(--trade-down) !important; }

/* 涨跌配色模式：默认绿涨红跌，切到 red-up 即红涨绿跌。
   只换这两个变量，所有跟涨跌相关的颜色（数字、K 线、量柱、闪烁）一起跟随。 */
html[data-quote-color="red-up"] {
  --trade-up: var(--color-down, #f6465d);
  --trade-down: var(--color-up, #0ecb81);
}

/* 数字变色：涨绿跌红。只改字的颜色，不改背景。
   必须压过 .instrument-quote-main .chart-live-quote strong 的标题色。 */
.px-flash-up,
.px-tick-up,
.instrument-quote-main .chart-live-quote strong.px-flash-up,
.instrument-quote-main .chart-live-quote strong.px-tick-up,
.page-intro .instrument-meta-live .chart-live-quote strong.px-flash-up,
.page-intro .instrument-meta-live .chart-live-quote strong.px-tick-up,
[data-live-price].px-flash-up,
[data-live-price].px-tick-up,
[data-market-price].px-flash-up,
[data-market-price].px-tick-up {
  color: var(--trade-up) !important;
  background: transparent !important;
}
.px-flash-down,
.px-tick-down,
.instrument-quote-main .chart-live-quote strong.px-flash-down,
.instrument-quote-main .chart-live-quote strong.px-tick-down,
.page-intro .instrument-meta-live .chart-live-quote strong.px-flash-down,
.page-intro .instrument-meta-live .chart-live-quote strong.px-tick-down,
[data-live-price].px-flash-down,
[data-live-price].px-tick-down,
[data-market-price].px-flash-down,
[data-market-price].px-tick-down {
  color: var(--trade-down) !important;
  background: transparent !important;
}
[data-price-value],
[data-live-price],
[data-live-change],
[data-trade-available],
.market-price,
.market-change,
.dialog-summary dd,
.order-detail-grid dd {
  font-family: "DIN Pro", "Roboto Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.toast {
  position: fixed;
  z-index: 160;
  left: 50%;
  bottom: 24px;
  max-width: min(440px, calc(100% - 28px));
  padding: 11px 14px;
  border: 1px solid var(--trade-border-strong);
  border-radius: 10px;
  color: var(--trade-title);
  background: rgba(26, 29, 41, .97);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition: opacity 180ms ease, transform 180ms ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.no-script { position: fixed; z-index: 500; inset: 0; display: grid; place-items: center; margin: 0; color: white; background: #0f1118; }

@media (max-width: 1260px) {
  .trader-header { grid-template-columns: 148px minmax(0, 1fr) auto; }
  .terminal-health { display: none; }
  .trader-logo span { font-size: 27px; }
  .trader-logo small { font-size: 9px; }
  .trader-nav a { min-width: 50px; padding-inline: 7px; font-size: 12px; }
  .trader-account { min-width: 165px; }
  .dashboard-metrics { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .dashboard-metric { grid-column: span 2; }
  .dashboard-metric:nth-child(n + 4) { grid-column: span 3; }
}

@media (max-width: 1080px) and (min-width: 901px) {
  .trader-header { grid-template-columns: 148px minmax(0, 1fr) auto; gap: 7px; padding-inline: 12px; }
  .trader-nav a { min-width: 48px; padding-inline: 5px; font-size: 11px; }
  .trader-account { min-width: 46px; }
  .trader-account > div, .trader-account > .snapshot-dot { display: none; }
}

@media (max-width: 900px) {
  :root { --header-height: 60px; --sidebar-width: 0px; }
  html { scroll-padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  body.trader-body { font-size: 15px; }
  .market-compact-breadcrumb { display: none; }
  .trader-header {
    grid-template-columns: auto 1fr;
    padding: 0 12px;
  }
  .trader-nav, .watch-sidebar, .terminal-health, .trader-account { display: none; }
  .trader-header-tools {
    gap: 6px;
    max-width: none;
    min-width: 0;
    justify-self: end;
  }
  .trader-header .ccx-language-switcher-button {
    max-width: 96px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .trader-header .ccx-theme-toggle-header {
    position: relative !important;
    top: auto;
    right: auto;
    left: auto;
    bottom: auto;
    z-index: 1;
    flex: 0 0 auto;
    transform: none;
  }
  .trader-header .account-session {
    position: static;
    top: auto;
    right: auto;
    transform: none;
    z-index: 1;
    justify-self: end;
  }
  .account-session > a { min-height: 46px; }
  body.trader-body .support-launch {
    right: 12px;
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }
  .trader-main { margin-left: 0; }
  .trader-main::before { top: 10%; left: 18%; }
  .trader-container { padding: 12px 12px calc(82px + env(safe-area-inset-bottom)); }
  .terminal-subnav { display: none; }
  .mobile-trader-nav {
    position: fixed;
    z-index: 65;
    inset: auto 0 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: calc(72px + env(safe-area-inset-bottom));
    padding: 5px 8px env(safe-area-inset-bottom);
    border-top: 1px solid var(--trade-border);
    background: var(--trade-surface);
    box-shadow: 0 -8px 22px rgba(0, 0, 0, .24);
  }
  .mobile-trader-nav a { position: relative; display: grid; place-items: center; gap: 4px; min-width: 0; min-height: 62px; color: var(--trade-muted); font-size: 13px; }
  .mobile-trader-nav span { display: grid; place-items: center; width: 28px; height: 28px; font-size: 22px; line-height: 1; }
  .mobile-trader-nav a.active { color: var(--account-accent); }
  .mobile-trader-nav a.active::before { content: ""; position: absolute; top: -6px; width: 38px; height: 3px; border-radius: 3px; background: var(--account-accent); }
  .trader-container:has(.mobile-trade-bar) { padding-bottom: calc(158px + env(safe-area-inset-bottom)); }
  .mobile-trade-bar {
    position: fixed;
    z-index: 64;
    right: max(10px, env(safe-area-inset-right));
    bottom: calc(66px + env(safe-area-inset-bottom));
    left: max(10px, env(safe-area-inset-left));
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--trade-border-strong);
    border-radius: 13px;
    background: rgba(17, 20, 29, .96);
    box-shadow: 0 -10px 28px rgba(0, 0, 0, .34), 0 0 0 1px rgba(var(--account-accent-rgb), .04);
    backdrop-filter: blur(14px);
  }
  .mobile-trade-bar > button, .mobile-trade-bar > a, .mobile-trade-bar .terminal-button {
    min-width: 0;
    min-height: 52px;
    border: 0;
    border-radius: 9px;
    color: #fff !important;
    font-size: 14px;
    font-weight: 850;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .22);
  }
  .mobile-trade-bar .up, .mobile-trade-bar [data-open-order="up"] { color: #fff !important; background: linear-gradient(135deg, color-mix(in srgb, var(--trade-up) 86%, white), var(--trade-up)); box-shadow: 0 8px 22px color-mix(in srgb, var(--trade-up) 32%, transparent); }
  .mobile-trade-bar .down, .mobile-trade-bar [data-open-order="down"] { color: #fff !important; background: linear-gradient(135deg, color-mix(in srgb, var(--trade-down) 86%, white), var(--trade-down)); box-shadow: 0 8px 22px color-mix(in srgb, var(--trade-down) 30%, transparent); }
  .mobile-trade-bar button:disabled { color: var(--trade-muted) !important; background: #20232c; box-shadow: none; cursor: not-allowed; opacity: .78; }
  body.order-dialog-open .mobile-trade-bar { visibility: hidden; opacity: 0; pointer-events: none; }
  /* 资金抽屉在 .trader-main（isolation:isolate + z-index:1）内部，z-index:140 出不了这个层叠上下文；
     底部导航是 body 直接子元素 z-index:65，会盖住抽屉的提交按钮。规则须放在 900px 断点内，
     与 .mobile-trader-nav 的出现范围一致，否则 481–900px 的机型覆盖不到。 */
  body.asset-drawer-open .mobile-trader-nav,
  body.kyc-gate-open .mobile-trader-nav,
  body.identity-otp-open .mobile-trader-nav,
  body.asset-drawer-open .mobile-trade-bar,
  body.order-dialog-open .mobile-trader-nav { visibility: hidden; opacity: 0; pointer-events: none; }
  .instrument-overview { grid-template-columns: 1fr auto; }
  .page-intro .instrument-meta { grid-template-columns: repeat(2, 1fr); width: 100%; }
  .instrument-quote-board {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name main"
      "stats stats";
    gap: 8px 10px;
    padding: 12px;
  }
  .instrument-quote-main .chart-live-quote strong { font-size: 28px; }
  .instrument-quote-stats {
    padding-top: 8px;
    border-top: 1px solid var(--trade-border);
  }
  .instrument-layout { grid-template-columns: 1fr; gap: 8px; margin: 6px 0 8px; }
  .instrument-layout .trade-launch-card { display: none; }
  .chart-panel {
    order: 1;
    padding: 10px;
    border-radius: 14px;
  }
  .chart-panel > header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
  }
  .chart-intervals {
    gap: 4px;
    padding-bottom: 0;
  }
  .chart-intervals button,
  .chart-tools button {
    min-height: 32px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 750;
  }
  .chart-intervals button { padding: 0 9px; }
  .chart-tools {
    width: auto;
    justify-self: end;
    gap: 4px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    max-width: 100%;
  }
  .chart-tools button { min-width: 30px; padding: 0 7px; border-radius: 8px; }
  .chart-ohlc {
    gap: 8px;
    margin-top: 8px;
    margin-bottom: 6px;
    font-size: 10px;
  }
  .spec-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #marketChart {
    height: clamp(280px, calc(100vh - 300px), 520px);
    height: clamp(280px, calc(100dvh - 300px), 520px);
    min-height: 260px;
    border-radius: 10px;
  }
  body.trader-body:has(.mobile-trade-bar) .support-launch {
    bottom: calc(138px + env(safe-area-inset-bottom, 0px));
  }
  body.instrument-view .trader-container {
    padding-bottom: calc(158px + env(safe-area-inset-bottom, 0px));
  }
  body.instrument-view .mobile-trade-bar {
    bottom: calc(66px + env(safe-area-inset-bottom));
  }
  body.instrument-view .support-launch {
    bottom: calc(138px + env(safe-area-inset-bottom, 0px));
  }
  .instrument-back { display: none; }
  .instrument-back-fab { display: none !important; }
  .asset-hero { grid-template-columns: 1fr; }
  .profile-grid { grid-template-columns: 1fr; gap: 10px; }
  .profile-card { padding: 12px; }
  .profile-card.profile-summary { padding: 12px; }
}

@media (max-width: 680px) {
  .trader-page-head { align-items: flex-start; }
  .snapshot-label { display: none; }
  .account-banner > strong { display: none; }
  .dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .dashboard-metric { grid-column: auto; }
  .dashboard-metric:nth-child(5) { grid-column: 1 / -1; }
  .quick-flow { grid-template-columns: 1fr; }
  .quick-flow a { min-height: 78px; }
  .market-grid, .order-list { grid-template-columns: 1fr; }
  .spec-grid, .order-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .instrument-overview { grid-template-columns: 1fr; }
  .instrument-overview > .market-state { width: max-content; }
  .page-intro .instrument-meta { grid-template-columns: repeat(2, 1fr); }
  .page-intro .instrument-quote-inline {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
  }
  .page-intro .instrument-quote-inline .trader-instrument,
  .page-intro .instrument-quote-inline .instrument-source,
  .page-intro .instrument-quote-inline .market-state {
    grid-column: auto;
    grid-row: auto;
  }
  .page-intro .instrument-quote-inline .market-state { margin-left: 0; justify-self: auto; }
  .page-intro .instrument-quote-inline .instrument-source { justify-self: auto; padding: 2px 7px; }
  .ledger-list > article { grid-template-columns: 1fr auto; }
  .ledger-list article > span { grid-column: 1 / -1; text-align: left; }
  .order-detail-hero { grid-template-columns: 1fr auto; }
  .order-detail-hero > span { grid-column: 1 / -1; }
  .service-notice { align-items: flex-start; flex-direction: column; }
  .service-notice button { width: 100%; }
}

@media (max-width: 480px) {
  .trader-header { gap: 7px; padding-inline: 9px; }
  .trader-logo span { font-size: 26px; }
  .trader-logo small { font-size: 9px; }
  .account-session { gap: 4px; padding: 3px; }
  .account-session > a { padding-inline: 8px; font-size: 12px; }
  .account-session .account-chip { max-width: 92px; min-height: 34px; overflow: hidden; padding-inline: 7px; font-size: 9px; text-overflow: ellipsis; }
  .trader-container { padding-inline: 9px; }
  .breadcrumb { min-height: 23px; margin-bottom: 3px; font-size: 11px; }
  .market-compact-breadcrumb { display: none; }
  .market-board-controls.card-pad { padding: 8px; }
  .market-board-controls { gap: 5px; }
  .market-quote-ticker { min-height: 26px; padding-top: 2px; }
  .trader-page-head { margin-bottom: 9px; }
  .trader-page-head h1 { margin-bottom: 3px; font-size: 23px; }
  .trader-page-head p { font-size: 13px; }
  .eyebrow { font-size: 10px; }
  .account-banner { min-height: 70px; margin-bottom: 9px; padding: 10px; }
  .account-banner h2 { font-size: 16px; }
  .account-banner p { font-size: 12px; }
  .dashboard-metric { min-height: 108px; padding: 12px; }
  .dashboard-metric small { margin-bottom: 5px; font-size: 12px; }
  .dashboard-metric strong { font-size: 16px; }
  .dashboard-metric em { margin-top: 5px; font-size: 10px; }
  .card-pad, .market-card, .order-card { padding: 11px; }
  .market-card footer, .order-card footer, .order-detail-card footer { grid-template-columns: 1fr; }
  .instrument-overview { padding: 11px; }
  .instrument-overview > div > strong { font-size: 23px; }
  .chart-panel { padding: 8px; }
  .chart-panel > header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
  }
  .chart-tools {
    width: auto;
    justify-self: end;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 4px;
  }
  .chart-tools button { min-width: 30px; padding: 0 6px; }
  .instrument-quote-main .chart-live-quote strong { font-size: 26px; }
  #marketChart { height: clamp(300px, calc(100vh - 280px), 480px); height: clamp(300px, calc(100dvh - 280px), 480px); min-height: 280px; }
  .spec-grid { gap: 6px; }
  .asset-hero { padding: 14px; }
  .asset-hero dl { grid-template-columns: 1fr; }
  .order-dialog-backdrop { align-items: end; padding: 0; }
  body.order-dialog-open .mobile-trader-nav, body.order-dialog-open .mobile-trade-bar { visibility: hidden; opacity: 0; pointer-events: none; }
  .order-dialog { width: 100%; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); padding: 15px 11px calc(18px + env(safe-area-inset-bottom)); border-width: 1px 0 0; border-radius: 18px 18px 0 0; animation: sheet-in 180ms ease-out; overscroll-behavior: contain; }
  .dialog-submit { position: sticky; z-index: 2; bottom: 0; box-shadow: 0 -10px 20px rgba(15, 17, 24, .82); }
  .expiry-grid, .amount-grid { gap: 5px; }
  .expiry-grid button { min-height: 91px; padding: 5px 2px; }
  .expiry-grid button b { font-size: 22px; }
  .expiry-grid button span { font-size: 9px; }
  .expiry-grid button .expiry-rate { margin-top: 3px; padding: 1px 5px; font-size: 11px; }
  .amount-grid button { padding: 0 2px; font-size: 10px; }
  .dialog-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toast { bottom: calc(72px + env(safe-area-inset-bottom)); font-size: 12px; }
}

@media (max-width: 1100px) {
  .market-catalog .market-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .market-category-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .market-catalog .market-grid { grid-template-columns: 1fr; }
  .market-category-overview { gap: 7px; }
  .market-category-summary { min-height: 82px; padding: 9px 10px; }
  .market-list-summary { align-items: flex-start; padding: 8px 9px; }
  .market-list-summary small { white-space: normal; }
}

@media (max-width: 480px) {
  .market-category-summary > span { font-size: 13px; }
  .market-category-summary > small { font-size: 10px; }
  .market-catalog .market-price { margin-block: 10px 7px; }
  .market-catalog .market-price strong { font-size: 21px; }
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes sheet-in { from { transform: translateY(18px); opacity: .65; } to { transform: translateY(0); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ========================================================================== */
/* Professional terminal directory, funding and identity surfaces            */
/* Consolidated overrides: intentionally appended to protect chart/order UI.  */
/* ========================================================================== */

.market-board-page,
.market-board-toolbar,
.market-category-tabs,
.market-table-directory,
.market-table-group,
.market-table-scroll,
.asset-overview-grid,
.funding-account-grid,
.fund-action-grid,
.fund-form,
.identity-panel,
.identity-form,
.identity-status {
  min-width: 0;
  max-width: 100%;
}

.market-board-page {
  width: 100%;
  overflow-x: clip;
  overflow-y: visible;
}

.market-board-toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  padding: 8px 10px;
  border: 1px solid var(--trade-border);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .018), rgba(0, 0, 0, .035)), var(--trade-surface-2);
  box-shadow: var(--trade-shadow);
}

.market-board-toolbar > * { min-width: 0; }
.market-board-toolbar > label {
  flex: 1 1 auto;
  display: flex;
  min-width: 0;
}
.market-board-toolbar > div,
.market-board-toolbar > form {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
}
.market-board-toolbar [data-market-refresh-time] {
  color: var(--trade-muted);
  font-size: 11px;
  white-space: nowrap;
}
.market-board-toolbar [data-refresh-markets] {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 10px;
  font-size: 12px;
  white-space: nowrap;
}

.market-board-toolbar label,
.fund-form label,
.identity-form label {
  color: var(--trade-text);
  font-size: 12px;
  font-weight: 700;
}

.market-board-toolbar :where(input, select),
.fund-form :where(input, select, textarea),
.identity-form :where(input, select, textarea) {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--trade-border-strong);
  border-radius: 9px;
  color: var(--trade-title);
  background: #0c0f16;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .24);
  color-scheme: dark;
}

.market-board-toolbar :where(input, select) {
  width: auto;
  max-width: 100%;
  min-height: 36px;
  padding: 0 10px;
  font-size: 13px;
}
.market-board-toolbar input[type="search"] { width: 100%; max-width: none; flex: 1 1 auto; }
.market-board-toolbar :where(input, select)::placeholder,
.fund-form :where(input, textarea)::placeholder,
.identity-form :where(input, textarea)::placeholder { color: #697184; opacity: 1; }

.market-board-toolbar :where(input, select):focus,
.fund-form :where(input, select, textarea):focus,
.identity-form :where(input, select, textarea):focus {
  border-color: rgba(var(--account-accent-rgb), .72);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(var(--account-accent-rgb), .11), inset 0 1px 2px rgba(0, 0, 0, .22);
}

.market-board-toolbar :where(button, a) {
  min-height: 34px;
}
.market-category-tabs :where(button, a) {
  min-height: 36px;
}
.market-sort-button,
.funding-account-grid > button,
.fund-action-grid button,
.fund-form button,
.identity-panel button,
.identity-form button {
  min-height: 46px;
}

.market-category-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-bottom: 11px;
  padding: 2px 0 4px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.market-category-tabs :where(button, a) {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--trade-border-strong, var(--trade-border));
  border-radius: 999px;
  color: var(--trade-text);
  background: var(--trade-surface-2, var(--trade-surface));
  box-shadow: inset 0 1px rgba(255, 255, 255, .04);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.market-category-tabs :where(button, a) > span {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  min-height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  color: var(--trade-muted);
  background: rgba(255, 255, 255, .06);
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.market-category-tabs :where(button, a):hover {
  color: var(--trade-title);
  border-color: rgba(var(--account-accent-rgb), .42);
  background: rgba(var(--account-accent-rgb), .08);
}

.market-category-tabs :where(.active, [aria-selected="true"], [aria-current="page"]) {
  color: #fff;
  border-color: rgba(var(--account-accent-rgb), .7);
  background: rgba(var(--account-accent-rgb), .92);
  box-shadow: 0 6px 16px rgba(var(--account-accent-rgb), .28);
}

.market-category-tabs :where(.active, [aria-selected="true"], [aria-current="page"]) > span {
  color: #fff;
  background: rgba(255, 255, 255, .22);
}

.market-table-directory {
  display: grid;
  gap: 6px;
  margin-top: 6px;
}

.market-board-controls {
  display: grid;
  gap: 6px;
}

.market-board-controls.card-pad {
  padding: 10px;
}

.market-board-controls .market-board-toolbar {
  margin-bottom: 0;
}

.market-board-controls .market-category-tabs {
  margin: 0;
}

.market-quote-ticker {
  min-height: 28px;
  margin: 0;
  padding: 2px 0 0;
  overflow: hidden;
  border: 0;
  border-top: 1px solid var(--trade-border);
  border-radius: 0;
  background: transparent;
}

.market-quote-langs {
  display: block;
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.market-quote-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: max-content;
  will-change: transform;
  animation: market-quote-marquee-rtl 28s linear infinite;
}

.market-quote-ticker:hover .market-quote-track,
.market-quote-ticker:focus-within .market-quote-track {
  animation-play-state: paused;
}

.market-quote-segment {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  flex: 0 0 auto;
}

.market-quote-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 999px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.market-quote-mover {
  background: rgba(255, 255, 255, .03);
}

.market-quote-chip b,
.market-quote-chip strong {
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .2px;
  line-height: 1;
}

.market-quote-chip small {
  color: var(--trade-muted);
  font-size: 10px;
  font-weight: 650;
}

.market-quote-sep {
  flex: 0 0 auto;
  margin: 0 2px;
  color: rgba(184, 198, 220, .28);
  font-style: normal;
  font-weight: 700;
}

@keyframes market-quote-marquee-rtl {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .market-quote-track { animation: none; transform: none; }
  .market-quote-langs {
    overflow-x: auto;
    mask-image: none;
    -webkit-mask-image: none;
  }
}

.market-table-unified > header p {
  margin: 2px 0 0;
  color: var(--trade-muted);
  font-size: 12px;
}

.market-table-group {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--trade-border);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .018), rgba(0, 0, 0, .03)), var(--trade-surface);
  box-shadow: var(--trade-shadow);
}

.market-table-group > header,
.market-table-group > .market-table-group-title,
.market-table-group > :is(h2, h3) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  margin: 0;
  padding: 9px 13px;
  border-bottom: 1px solid var(--trade-border);
  color: var(--trade-group-header-fg);
  background: linear-gradient(90deg, rgba(var(--account-accent-rgb), .12), transparent 46%), var(--trade-group-header-bg);
}

.market-table-group > header :where(h2, h3),
.market-table-group > .market-table-group-title :where(h2, h3) {
  margin: 0;
  font-size: 14px;
  letter-spacing: .1px;
  color: var(--trade-group-header-fg);
}

.market-table-group > header :where(p, small),
.market-table-group > .market-table-group-title :where(p, small) {
  margin: 0;
  color: var(--trade-group-header-muted);
  font-size: 11px;
}

.market-table-group > header > span,
.market-table-group > header [data-market-group-count] {
  color: var(--trade-group-header-muted);
  font-size: 12px;
  font-weight: 700;
}

.market-table-scroll {
  width: 100%;
  overflow: auto;
  padding: 4px 6px 8px;
  background: var(--trade-surface-2);
  scrollbar-width: thin;
  scrollbar-color: rgba(184, 198, 220, .28) transparent;
  overscroll-behavior: contain;
}

.market-table-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.market-table-scroll::-webkit-scrollbar-thumb { border: 2px solid var(--trade-surface-2); border-radius: 999px; background: rgba(184, 198, 220, .25); }
.market-table-scroll::-webkit-scrollbar-corner { background: var(--trade-surface-2); }

.market-quote-table .trader-instrument-text .market-instrument-icon { display: none !important; }
.market-quote-table .trader-instrument-text { gap: 0; }

.market-quote-table {
  table-layout: fixed;
  width: 100%;
  min-width: 980px;
  max-width: none;
  border-collapse: separate;
  border-spacing: 0 4px;
  color: var(--trade-text);
  background: transparent;
  font-size: 12px;
  line-height: 1.25;
  font-variant-numeric: tabular-nums lining-nums;
}
.market-quote-table col.col-name { width: 158px; }
.market-quote-table col.col-num { width: 74px; }
.market-quote-table col.col-chg { width: 68px; }
.market-quote-table col.col-pct { width: 62px; }
.market-quote-table col.col-time { width: 96px; }
.market-quote-table col.col-unit { width: 44px; }
.market-quote-table col.col-act { width: 86px; }

.market-quote-table caption {
  padding: 0 2px 2px;
  color: var(--trade-muted);
  font-size: 11px;
  text-align: left;
}

.market-quote-table th,
.market-quote-table td {
  box-sizing: border-box;
  height: 40px;
  max-width: 0;
  padding: 4px 7px;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.market-quote-table th {
  position: sticky;
  z-index: 3;
  top: 0;
  height: 34px;
  border: 0;
  color: var(--trade-muted);
  background: var(--trade-surface-2);
  box-shadow: inset 0 -1px var(--trade-border);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .15px;
}

.market-quote-table th:first-child,
.market-quote-table td:first-child {
  position: sticky;
  z-index: 2;
  left: 0;
  max-width: none;
  text-align: left;
  color: var(--trade-title);
}

.market-quote-table th:first-child {
  z-index: 4;
  background: var(--trade-surface-2);
  color: var(--trade-muted);
  box-shadow: inset 0 -1px var(--trade-border);
}

.market-quote-table tbody tr td {
  border-top: 1px solid color-mix(in srgb, var(--account-accent) 16%, var(--trade-border));
  border-bottom: 1px solid color-mix(in srgb, var(--account-accent) 16%, var(--trade-border));
  background: var(--trade-surface);
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.market-quote-table tbody tr td:first-child {
  border-left: 1px solid color-mix(in srgb, var(--account-accent) 16%, var(--trade-border));
  border-radius: 8px 0 0 8px;
  background: color-mix(in srgb, var(--account-accent) 6%, var(--trade-surface));
  box-shadow: none;
}
.market-quote-table tbody tr td:last-child {
  border-right: 1px solid color-mix(in srgb, var(--account-accent) 16%, var(--trade-border));
  border-radius: 0 8px 8px 0;
}

.market-quote-table tbody tr:hover td,
.market-quote-table tbody tr:focus-within td {
  border-color: rgba(var(--account-accent-rgb), .62);
  background: rgba(var(--account-accent-rgb), .09);
  box-shadow: 0 4px 12px rgba(var(--account-accent-rgb), .12);
}
.market-quote-table tbody tr:hover td:first-child,
.market-quote-table tbody tr:focus-within td:first-child,
.market-quote-table tbody tr.active td:first-child {
  background: rgba(var(--account-accent-rgb), .14);
}
.market-quote-table tbody tr.active td {
  border-color: rgba(var(--account-accent-rgb), .72);
  background: rgba(var(--account-accent-rgb), .12);
}
.market-quote-table td:empty::after { content: "—"; color: var(--trade-muted); }
.market-quote-table td[colspan] {
  height: 96px;
  border: 1px dashed var(--trade-border) !important;
  border-radius: 11px !important;
  color: var(--trade-muted);
  background: transparent !important;
  text-align: center;
  box-shadow: none !important;
}

.market-quote-table td:nth-child(n + 2) :where(strong, span, time) {
  display: block;
  overflow: hidden;
  font-family: "Cascadia Mono", "SF Mono", "JetBrains Mono", Consolas, ui-monospace, monospace;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: 0;
  text-align: right;
  text-overflow: clip;
  white-space: nowrap;
}
.market-quote-table td:nth-child(2) :where(strong, span),
.market-quote-table td:nth-child(3) :where(strong, span),
.market-quote-table td:nth-child(4) :where(strong, span) {
  min-width: 8.5ch;
}
.market-quote-table td:nth-child(5) :where(strong, span),
.market-quote-table td:nth-child(6) :where(strong, span) {
  min-width: 7ch;
}
.market-quote-table td:nth-child(n + 7):nth-child(-n + 10) :where(strong, span) {
  min-width: 8ch;
}
.market-quote-table td:nth-child(11) time {
  min-width: 12ch;
  font-size: 11px;
}
.market-quote-table td strong.up,
.market-quote-table td span.up { color: var(--trade-up); }
.market-quote-table td strong.down,
.market-quote-table td span.down { color: var(--trade-down); }
.market-quote-table td :where(small, time) { color: var(--trade-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.market-quote-table td .trader-instrument { min-width: 0; max-width: 100%; gap: 6px; }
.market-quote-table td .trader-instrument b { color: var(--trade-title); font-size: 12px; }
.market-quote-table td .trader-instrument small { color: var(--trade-muted); font-size: 10px; }
.market-quote-table td .market-instrument-icon,
.market-quote-table td .trader-instrument > i { flex-basis: 28px; width: 28px; height: 28px; border-radius: 7px; }

.market-sort-button {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-align: right;
  cursor: pointer;
}

.market-quote-table th:first-child .market-sort-button { justify-content: flex-start; text-align: left; }
.market-sort-button:hover,
.market-sort-button[aria-sort]:not([aria-sort="none"]) { color: var(--account-accent); }
.market-sort-button::after { content: "↕"; color: #626b7e; font-size: 11px; }
.market-sort-button[aria-sort="ascending"]::after { content: "↑"; color: var(--account-accent); }
.market-sort-button[aria-sort="descending"]::after { content: "↓"; color: var(--account-accent); }

.market-quote-table td :where(a.terminal-button, button.terminal-button) {
  min-height: 28px;
  padding: 0 8px;
  font-size: 11px;
}

.quote-flash-up { color: var(--trade-up) !important; }
.quote-flash-down { color: var(--trade-down) !important; }
.market-quote-table tr.quote-flash-up > td,
.market-quote-table tr.quote-flash-down > td { animation: none; }

.asset-overview-grid,
.funding-account-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.asset-overview-grid > *,
.funding-account-grid > * {
  min-width: 0;
  padding: 14px;
  overflow: hidden;
  border: 1px solid var(--trade-border);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .02), rgba(0, 0, 0, .035)), var(--trade-surface);
  box-shadow: var(--trade-shadow);
}

.asset-overview-grid > * {
  position: relative;
  min-height: 118px;
}

.asset-overview-grid > *::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--account-accent), transparent 74%);
  opacity: .65;
}

.asset-overview-grid :where(small, dt),
.funding-account-grid :where(small, dt) { color: var(--trade-muted); font-size: 11px; }
.asset-overview-grid :where(strong, dd),
.funding-account-grid :where(strong, dd) { color: var(--trade-title); font-variant-numeric: tabular-nums; }
.asset-overview-grid > * > strong { display: block; margin-top: 10px; overflow: hidden; font-size: clamp(20px, 2vw, 29px); line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.asset-overview-grid > * > :where(p, em) { display: block; margin: 9px 0 0; color: var(--trade-muted); font-size: 11px; font-style: normal; }

.funding-account-grid { grid-template-columns: repeat(2, minmax(240px, 1fr)); }
.funding-account-grid > * { position: relative; min-height: 138px; }
.funding-account-grid > :where(button, label) { width: 100%; color: inherit; text-align: left; cursor: pointer; }
.funding-account-grid > :where(button, label):hover,
.funding-account-grid > :where(.active, [aria-current="true"], [aria-checked="true"]) {
  border-color: rgba(var(--account-accent-rgb), .42);
  background: linear-gradient(145deg, rgba(var(--account-accent-rgb), .105), rgba(0, 0, 0, .02)), var(--trade-surface);
}

.funding-account-grid :where(h2, h3) { margin: 3px 0 5px; font-size: 15px; }
.funding-account-grid p { margin: 0; color: var(--trade-muted); font-size: 12px; }
.funding-account-grid dl { display: grid; gap: 5px; margin: 12px 0 0; }
.funding-account-grid dl div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 6px; border-top: 1px solid var(--trade-border); }
.funding-account-grid dd { max-width: 68%; margin: 0; overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; }

.fund-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
}

.fund-action-grid > * { min-width: 0; }
.fund-action-grid > :where(article, section, div) {
  padding: 16px;
  border: 1px solid var(--trade-border);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .018), rgba(0, 0, 0, .035)), var(--trade-surface);
  box-shadow: var(--trade-shadow);
}

.fund-action-grid :where(h2, h3) { margin: 0 0 4px; }
.fund-action-grid :where(header p, header small) { margin: 0 0 13px; color: var(--trade-muted); font-size: 12px; }

.fund-form,
.identity-email-verify{
  display:grid;
  gap:10px;
  padding:14px;
  border:1px solid rgba(59,130,246,.28);
  border-radius:14px;
  background:rgba(59,130,246,.08);
}
.identity-email-verify-head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
}
.identity-email-verify-head strong{color:var(--trade-title,#eaecef);font-size:14px}
.identity-email-verify-head small{color:var(--trade-muted,#848e9c);font-size:12px}
.identity-email-verify .kyc-gate-otp,
.kyc-gate-otp{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:end;
}
.identity-local-otp{
  display:grid;
  gap:4px;
  margin-top:2px;
  padding:12px 10px;
  border:1px dashed rgba(201,162,74,.5);
  border-radius:10px;
  background:rgba(16,32,51,.92);
  text-align:center;
}
.identity-local-otp[hidden]{display:none!important}
.identity-local-otp span{color:var(--trade-muted,#848e9c);font-size:12px}
.identity-local-otp b{
  display:block;
  color:#f5e0a0;
  letter-spacing:.22em;
  font-size:28px;
  line-height:1.25;
  font-variant-numeric:tabular-nums;
}
.phone-drawer{
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(255,255,255,.03);
  padding:0;
}
.phone-drawer > summary{
  cursor:pointer;
  list-style:none;
  padding:12px 14px;
  color:var(--trade-title,#eaecef);
  font-weight:700;
}
.phone-drawer > summary::-webkit-details-marker{display:none}
.phone-drawer-body{
  display:grid;
  grid-template-columns:140px minmax(0,1fr);
  gap:10px;
  padding:0 14px 14px;
}
@media (max-width:720px){
  .identity-email-verify .kyc-gate-otp,
  .kyc-gate-otp,
  .phone-drawer-body{grid-template-columns:1fr}
  .identity-local-otp b{font-size:26px;letter-spacing:.16em}
}

.fund-form,
.identity-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 10px;
}

.fund-form > label,
.identity-form > label,
.fund-form .form-field,
.identity-form .form-field {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 6px;
}

.fund-form textarea,
.identity-form textarea { min-height: 112px; padding-block: 11px; resize: vertical; }
.fund-form :where(input, select, textarea):disabled,
.identity-form :where(input, select, textarea):disabled { color: #6d7483; background: #151820; cursor: not-allowed; opacity: .78; }

.fund-form > :where(button[type="submit"], .form-actions, .form-message, .form-error, .form-success),
.identity-form > :where(button[type="submit"], .form-actions, .form-message, .form-error, .form-success),
.fund-form .full-row,
.identity-form .full-row { grid-column: 1 / -1; }

.fund-form .form-actions,
.identity-form .form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.fund-form > button[type="submit"],
.identity-form > button[type="submit"] { width: 100%; }

.identity-file-control {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 52px;
}
.identity-file-control > input[type="file"] {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.identity-file-display {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 6px;
  border: 1px solid var(--trade-border-strong);
  border-radius: 9px;
  background: var(--trade-surface-2);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.18);
}
.identity-file-display b {
  flex: 0 0 auto;
  padding: 8px 11px;
  border-radius: 7px;
  color: var(--trade-title);
  background: var(--trade-surface-3);
  font-size: 12px;
}
.identity-file-display small {
  min-width: 0;
  overflow: hidden;
  color: var(--trade-muted);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.identity-file-control > input[type="file"]:focus-visible + .identity-file-display {
  outline: 2px solid var(--account-accent);
  outline-offset: 2px;
}
.identity-file-control > input[type="file"]:disabled { cursor: not-allowed; }
.identity-file-control > input[type="file"]:disabled + .identity-file-display { opacity: .62; }

.identity-panel {
  display: grid;
  grid-template-columns: minmax(250px, .72fr) minmax(0, 1.4fr);
  align-items: stretch;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--trade-border);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .018), rgba(0, 0, 0, .035)), var(--trade-surface);
  box-shadow: var(--trade-shadow);
}

.identity-panel > * { min-width: 0; }
.identity-panel > header { grid-column: 1 / -1; padding-bottom: 12px; border-bottom: 1px solid var(--trade-border); }
.identity-panel > header :where(h2, h3) { margin: 0 0 3px; }
.identity-panel > header p { margin: 0; color: var(--trade-muted); font-size: 12px; }

.identity-status {
  position: relative;
  align-self: stretch;
  padding: 16px;
  overflow: hidden;
  border: 1px solid rgba(var(--account-accent-rgb), .25);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(var(--account-accent-rgb), .09), rgba(5, 8, 13, .28));
}

.identity-status::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--account-accent);
}

.identity-status :where(h2, h3) { margin: 5px 0; font-size: 17px; }
.identity-status p { margin: 0; color: var(--trade-muted); font-size: 12px; overflow-wrap: anywhere; }
.identity-status > :where(span, strong):first-child {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 3px 9px;
  border-radius: 999px;
  color: var(--account-accent);
  background: rgba(var(--account-accent-rgb), .09);
  font-size: 10px;
  font-weight: 850;
}

.identity-status :where(dl, ul) { margin: 14px 0 0; padding: 0; }
.identity-status dl div,
.identity-status li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--trade-border); font-size: 11px; }
.identity-status dt { color: var(--trade-muted); }
.identity-status dd { margin: 0; color: var(--trade-title); text-align: right; }
.identity-status li { list-style: none; }

.identity-status:is(.verified, .approved, [data-status="verified"], [data-status="approved"]) { --identity-state: var(--trade-up); border-color: rgba(54, 211, 153, .28); }
.identity-status:is(.pending, .reviewing, [data-status="pending"], [data-status="reviewing"]) { --identity-state: var(--trade-warning); border-color: rgba(243, 184, 75, .28); }
.identity-status:is(.rejected, .failed, [data-status="rejected"], [data-status="failed"]) { --identity-state: var(--trade-down); border-color: rgba(239, 122, 75, .28); }
.identity-status:is(.verified, .approved, .pending, .reviewing, .rejected, .failed, [data-status])::after { background: var(--identity-state, var(--account-accent)); }
.identity-status:is(.verified, .approved, .pending, .reviewing, .rejected, .failed, [data-status]) > :where(span, strong):first-child { color: var(--identity-state, var(--account-accent)); background: color-mix(in srgb, var(--identity-state, var(--account-accent)) 10%, transparent); }

@media (max-width: 1100px) {
  .asset-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .market-board-toolbar {
    align-items: center;
    gap: 6px;
    padding: 7px 8px;
  }
  .market-board-toolbar > div,
  .market-board-toolbar > form {
    flex: 0 0 auto;
    width: auto;
  }
  .identity-panel { grid-template-columns: 1fr; }
  .identity-panel > header { grid-column: auto; }
}

@media (max-width: 680px) {
  /* Explicitly beats the desktop nth-child spans that created implicit columns. */
  .dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .dashboard-metrics > .dashboard-metric,
  .dashboard-metrics > .dashboard-metric:nth-child(n) { grid-column: auto; min-width: 0; }
  .dashboard-metrics > .dashboard-metric:nth-child(5):last-child { grid-column: 1 / -1; }

  .market-board-page { overflow: visible; }
  .market-board-toolbar {
    flex-wrap: nowrap;
    align-items: center;
    gap: 5px;
    margin-bottom: 6px;
    padding: 6px 7px;
  }
  .market-board-toolbar > label { flex: 1 1 auto; min-width: 0; }
  .market-board-toolbar > div,
  .market-board-toolbar > form {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    width: auto;
  }
  .market-board-toolbar :where(input, select) {
    width: 100%;
    max-width: none;
    min-height: 32px;
    padding: 0 8px;
    font-size: 12px;
  }
  .market-board-toolbar input[type="search"] { width: 100%; max-width: none; }
  .market-board-toolbar [data-market-refresh-time] {
    max-width: 7.5em;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 10px;
  }
  .market-board-toolbar [data-refresh-markets] {
    min-height: 32px;
    padding: 0 8px;
    font-size: 11px;
  }

  .market-category-tabs { margin-inline: 0; padding: 0; gap: 6px; overflow: visible; }
  .market-category-tabs :where(button, a) { min-height: 32px; padding-inline: 10px; font-size: 11px; }
  .market-table-directory { gap: 4px; margin-top: 4px; }
  .market-table-group { overflow: visible; border: 0; background: transparent; box-shadow: none; }

  .market-table-scroll { overflow: visible; background: transparent; }
  .market-quote-table { display: block; table-layout: auto; width: 100%; min-width: 0; max-width: none; background: transparent; }
  .market-quote-table thead {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  .market-quote-table tbody { display: grid; gap: 8px; width: 100%; }
  .market-quote-table tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 7px;
    width: 100%;
    min-width: 0;
    padding: 8px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--account-accent) 18%, var(--trade-border));
    border-radius: 11px;
    background: var(--trade-surface);
    box-shadow: 0 8px 20px rgba(var(--account-accent-rgb), .08);
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
  }
  .market-quote-table tbody tr:hover,
  .market-quote-table tbody tr:focus-within,
  .market-quote-table tbody tr.active {
    border-color: rgba(var(--account-accent-rgb), .62);
    background: rgba(var(--account-accent-rgb), .09);
    box-shadow: 0 10px 22px rgba(var(--account-accent-rgb), .14);
  }
  .market-quote-table tbody tr:hover td,
  .market-quote-table tbody tr:focus-within td,
  .market-quote-table tbody tr.active td,
  .market-quote-table tbody tr:hover td:first-child,
  .market-quote-table tbody tr:focus-within td:first-child,
  .market-quote-table tbody tr.active td:first-child {
    background: transparent;
    box-shadow: none;
  }
  .market-quote-table tbody td {
    position: static;
    display: grid;
    min-width: 0;
    max-width: none;
    height: auto;
    min-height: 42px;
    align-content: center;
    gap: 2px;
    padding: 5px 7px;
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--account-accent) 10%, var(--trade-border));
    border-radius: 0;
    color: var(--trade-text);
    background: color-mix(in srgb, var(--account-accent) 4%, var(--trade-surface-2));
    box-shadow: none;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .market-quote-table tbody td::before {
    display: block;
    color: var(--trade-muted);
    font-size: 9px;
    font-weight: 750;
    line-height: 1.2;
  }
  .market-quote-table tbody td[data-label]::before { content: attr(data-label); }
  .market-quote-table tbody td:not([data-label]):nth-child(1)::before { content: "Symbol"; }
  .market-quote-table tbody td:not([data-label]):nth-child(2)::before { content: "Last"; }
  .market-quote-table tbody td:not([data-label]):nth-child(3)::before { content: "Bid"; }
  .market-quote-table tbody td:not([data-label]):nth-child(4)::before { content: "Ask"; }
  .market-quote-table tbody td:not([data-label]):nth-child(5)::before { content: "Change"; }
  .market-quote-table tbody td:not([data-label]):nth-child(6)::before { content: "Change %"; }
  .market-quote-table tbody td:not([data-label]):nth-child(7)::before { content: "Open"; }
  .market-quote-table tbody td:not([data-label]):nth-child(8)::before { content: "High"; }
  .market-quote-table tbody td:not([data-label]):nth-child(9)::before { content: "Low"; }
  .market-quote-table tbody td:not([data-label]):nth-child(10)::before { content: "Prev close"; }
  .market-quote-table tbody td:not([data-label]):nth-child(11)::before { content: "Updated"; }
  .market-quote-table tbody td:not([data-label]):nth-child(12)::before { content: "Unit"; }
  .market-quote-table tbody td:not([data-label]):nth-child(n + 13)::before { content: "Action"; }

  .market-quote-table tbody td:first-child {
    grid-column: 1 / -1;
    min-width: 0;
    min-height: 54px;
    padding: 5px 6px 8px;
    border-top: 0;
    border-bottom: 1px solid var(--trade-border);
    background: transparent;
  }
  .market-quote-table tbody td:first-child::before { margin-bottom: 1px; }
  .market-quote-table tbody td:first-child .trader-instrument { min-width: 0; }
  .market-quote-table tbody td:has(:where(button, a)),
  .market-quote-table tbody td[colspan],
  .market-quote-table tbody td:last-child { grid-column: 1 / -1; }
  .market-quote-table tbody td:has(:where(button, a)) { display: flex; align-items: center; gap: 7px; padding-top: 8px; }
  .market-quote-table tbody td:has(:where(button, a))::before { margin-right: auto; }
  .market-quote-table tbody td :where(button, a) { min-height: 46px; }
  .market-quote-table tbody td[colspan] { display: grid; min-height: 96px; place-items: center; text-align: center; }

  .funding-account-grid,
  .fund-action-grid { grid-template-columns: 1fr; }
  .funding-account-grid > * { min-height: 0; }
  .fund-form,
  .identity-form { grid-template-columns: 1fr; }
  .fund-form > *,
  .identity-form > *,
  .fund-form > :where(button[type="submit"], .form-actions, .form-message, .form-error, .form-success),
  .identity-form > :where(button[type="submit"], .form-actions, .form-message, .form-error, .form-success),
  .fund-form .full-row,
  .identity-form .full-row { grid-column: auto; }
  .fund-form .form-actions,
  .identity-form .form-actions { display: grid; grid-template-columns: 1fr; }
  .identity-panel { padding: 11px; }
}

@media (max-width: 420px) {
  .asset-overview-grid { gap: 7px; }
  .asset-overview-grid > * { min-height: 104px; padding: 11px; }
  .asset-overview-grid > * > strong { font-size: 18px; }
  .market-quote-table tbody tr { gap-inline: 5px; padding: 7px; }
  .market-quote-table tbody td { padding-inline: 6px; }
}

@media (max-width: 340px) {
  .dashboard-metrics,
  .asset-overview-grid { grid-template-columns: 1fr; }
  .dashboard-metrics > .dashboard-metric:nth-child(5):last-child { grid-column: auto; }
}

/* Mobile compact flow: keep desktop layout untouched and stack modules one-by-one. */
@media (max-width: 680px) {
  .trader-container { padding-inline: 10px; }
  .trader-page-head { margin-bottom: 9px; }
  .trader-page-head h1 { margin-bottom: 3px; font-size: 21px; }
  .trader-page-head p { font-size: 13px; line-height: 1.4; }

  .dashboard-metrics,
  .asset-overview-grid { grid-template-columns: 1fr; gap: 7px; }
  .dashboard-metrics > .dashboard-metric,
  .dashboard-metrics > .dashboard-metric:nth-child(5):last-child { grid-column: auto; }
  .dashboard-metric,
  .asset-overview-grid > * { min-height: 0; padding: 10px 11px; }
  .dashboard-metric small { margin-bottom: 3px; font-size: 11px; }
  .dashboard-metric strong { font-size: 18px; }
  .dashboard-metric em { margin-top: 3px; font-size: 10px; }
  .asset-overview-grid > * > strong { margin-top: 5px; font-size: 19px; }
  .asset-overview-grid > * > :where(p, em) { margin-top: 4px; font-size: 10px; }

  .market-table-directory,
  .funding-account-grid,
  .fund-action-grid { gap: 7px; }
  .market-table-group > header,
  .market-table-group > .market-table-group-title,
  .market-table-group > :is(h2, h3) { min-height: 42px; padding: 7px 9px; }
  .market-quote-table tbody { gap: 4px; }
  .market-quote-table tbody tr { padding: 5px; border-radius: 9px; }
  .market-quote-table tbody td { min-height: 32px; padding: 3px 5px; font-size: 13px; }
  .market-quote-table tbody td:first-child { min-height: 40px; padding: 3px 4px 5px; }
  .market-quote-table tbody td:has(:where(button, a)) { padding-top: 5px; }
  .market-quote-table tbody td :where(button, a) { min-height: 36px; }
  .funding-account-grid > *,
  .fund-form,
  .identity-panel { padding: 10px; }
  .funding-account-grid > * { min-height: 0; }
}

/* Phone quote: 2-row strip — name/price/action on top, change figures below (no dead middle space). */
@media (max-width: 680px) {
  .dashboard-metrics,
  .asset-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-metric,
  .asset-overview-grid > * { padding: 9px; }
  .dashboard-metric strong,
  .asset-overview-grid > * > strong { font-size: 17px; }

  .market-quote-table tbody { gap: 6px; }
  .market-quote-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(78px, 0.9fr) auto;
    grid-template-areas:
      "name price act"
      "amt  pct   act";
    align-items: center;
    column-gap: 8px;
    row-gap: 4px;
    min-height: 0;
    padding: 9px 10px;
    border-radius: 10px;
  }
  .market-quote-table tbody td,
  .market-quote-table tbody td:first-child {
    display: block;
    grid-column: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    white-space: nowrap;
  }
  .market-quote-table tbody td::before { display: none; }
  .market-quote-table tbody td:nth-child(3),
  .market-quote-table tbody td:nth-child(4),
  .market-quote-table tbody td:nth-child(7),
  .market-quote-table tbody td:nth-child(8),
  .market-quote-table tbody td:nth-child(9),
  .market-quote-table tbody td:nth-child(10),
  .market-quote-table tbody td:nth-child(11),
  .market-quote-table tbody td:nth-child(12) { display: none; }
  .market-quote-table tbody td:nth-child(1) {
    grid-area: name;
    min-width: 0;
    overflow: hidden;
  }
  .market-quote-table tbody td:nth-child(2) {
    grid-area: price;
    text-align: right;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.02em;
    font-family: "Cascadia Mono", "SF Mono", "JetBrains Mono", Consolas, ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
  }
  .market-quote-table tbody td:nth-child(5) {
    grid-area: amt;
    display: block;
    text-align: left;
    font-size: 12px;
    line-height: 1.2;
    font-family: "Cascadia Mono", "SF Mono", "JetBrains Mono", Consolas, ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
  }
  .market-quote-table tbody td:nth-child(6) {
    grid-area: pct;
    display: block;
    text-align: right;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.2;
    font-family: "Cascadia Mono", "SF Mono", "JetBrains Mono", Consolas, ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
  }
  .market-quote-table tbody td:last-child {
    grid-area: act;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    align-self: stretch;
    padding: 0;
  }
  .market-quote-table tbody td:last-child :where(button, a) {
    min-height: 36px;
    min-width: 52px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 8px;
  }
  .market-quote-table tbody td:first-child .trader-instrument { overflow: hidden; gap: 6px; }
  .market-quote-table tbody td:first-child .trader-instrument strong,
  .market-quote-table tbody td:first-child .trader-instrument b,
  .market-quote-table tbody td:first-child .trader-instrument small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .market-quote-table tbody td:first-child .market-instrument-icon,
  .market-quote-table tbody td:first-child .trader-instrument > i { flex-basis: 28px; width: 28px; height: 28px; }
  .market-board-toolbar :where(input, select) { min-height: 34px; }
  .market-board-toolbar [data-refresh-markets] { min-height: 32px; padding: 0 8px; font-size: 11px; }
}

@keyframes terminal-quote-flash-up {
  0% { background-color: rgba(54, 211, 153, .26); box-shadow: inset 3px 0 var(--trade-up); }
  100% { background-color: transparent; box-shadow: inset 3px 0 transparent; }
}

@keyframes terminal-quote-flash-down {
  0% { background-color: rgba(239, 122, 75, .25); box-shadow: inset 3px 0 var(--trade-down); }
  100% { background-color: transparent; box-shadow: inset 3px 0 transparent; }
}

.practice-holding-board {
  position: fixed;
  right: 20px;
  bottom: 84px;
  z-index: 89;
  width: min(390px, calc(100vw - 24px));
  padding: 16px;
  border: 1px solid rgba(72, 162, 255, .5);
  border-radius: 16px;
  background: rgba(7, 14, 24, .97);
  color: #edf4fc;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .58);
  backdrop-filter: blur(16px);
}
.practice-holding-board[hidden] { display: none; }
.practice-holding-board > header,
.practice-holding-board > footer,
.holding-board-hero { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.practice-holding-board > header span,
.practice-holding-board > header b { display: block; }
.practice-holding-board > header span { color: #6baeea; font-size: 10px; letter-spacing: .13em; }
.practice-holding-board > header b { margin-top: 3px; font-size: 17px; }
.practice-holding-board > header button { border: 0; background: transparent; color: #aab8c8; font-size: 25px; }
.holding-board-hero { margin: 14px 0; padding: 12px; border-radius: 11px; background: #0d1926; }
.holding-board-hero > strong { font-size: 20px; }
.holding-board-hero > div { text-align: right; }
.holding-board-hero small,
.holding-board-hero b { display: block; }
.holding-board-hero small { color: #7e90a5; font-size: 10px; }
.holding-board-hero b { margin-top: 3px; font-size: 23px; font-variant-numeric: tabular-nums; }
.practice-holding-board dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 0 0 14px; }
.practice-holding-board dl div { padding: 9px; border: 1px solid #182a3e; border-radius: 9px; background: #09121d; }
.practice-holding-board dt { color: #788a9e; font-size: 10px; }
.practice-holding-board dd { margin: 4px 0 0; font-size: 13px; font-weight: 700; }
.practice-holding-board > footer { justify-content: flex-end; }
.practice-holding-board.settled { border-color: rgba(104, 216, 165, .58); }

@media (max-width: 700px) {
  .practice-holding-board { right: 12px; bottom: 126px; padding: 13px; }
}

/* 资产页：一套 DOM 同时服务 PC 与移动端，记录和表单按职责分区。 */
[data-trader-nav][hidden] { display: none !important; }

.asset-page {
  --asset-gap: 10px;
  min-width: 0;
  padding-bottom: 8px;
}

.asset-balance-summary,
.asset-record-index {
  margin-bottom: var(--asset-gap);
  padding: 12px 14px;
  border: 1px solid #2a3b50;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .018), rgba(0, 0, 0, .025)), var(--trade-surface);
  box-shadow: var(--trade-shadow);
}

.asset-balance-summary dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  margin: 0;
}

.asset-balance-summary dl > div {
  display: grid;
  min-width: 0;
  gap: 4px;
  padding: 2px 14px;
  border-right: 1px solid var(--trade-border);
}

.asset-balance-summary dl > div:first-child { padding-left: 0; }
.asset-balance-summary dl > div:last-child { padding-right: 0; border-right: 0; }
.asset-balance-summary dt { color: var(--trade-muted); font-size: 11px; }
.asset-balance-summary dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--trade-title);
  font-size: clamp(16px, 2vw, 24px);
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-account-list {
  margin-bottom: var(--asset-gap);
  padding: 12px 14px;
  border: 1px solid #2a3b50;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .018), rgba(0, 0, 0, .025)), var(--trade-surface);
  box-shadow: var(--trade-shadow);
}

.asset-account-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.asset-account-card {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--trade-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, .02);
}

.asset-account-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.asset-account-card h3 {
  margin: 0;
  color: var(--trade-title);
  font-size: 14px;
  font-weight: 800;
}

.asset-account-card p {
  margin: 3px 0 0;
  color: var(--trade-muted);
  font-size: 11px;
  line-height: 1.45;
}

.asset-account-card > header b {
  color: var(--trade-title);
  font-size: clamp(15px, 2vw, 19px);
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.asset-account-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid var(--trade-border);
}

.asset-account-card dl > div { display: grid; min-width: 0; gap: 3px; }
.asset-account-card dl > div:last-child { text-align: right; }
.asset-account-card dt { color: var(--trade-muted); font-size: 11px; }
.asset-account-card dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--trade-title);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-record-index > header,
.asset-record-list .terminal-card-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.asset-record-index > header { margin-bottom: 8px; }
.asset-record-index > header span,
.asset-record-list .terminal-card-head span,
.asset-action-card > header > span {
  color: var(--account-accent);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .14em;
}

.asset-record-index h2,
.asset-record-list h2,
.asset-action-card h3 { margin: 0; color: var(--trade-title); }
.asset-record-index > header p,
.asset-record-list .terminal-card-head > small { margin: 0; color: var(--trade-muted); font-size: 11px; }

.asset-record-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}

.asset-record-nav :where(a, button) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  min-height: 54px;
  padding: 10px 12px;
  border: 1px solid #2b3d52;
  border-radius: 10px;
  color: var(--trade-title);
  background: rgba(5, 10, 17, .26);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.asset-record-nav :where(a, button):hover,
.asset-record-nav :where(a, button):focus-visible {
  border-color: rgba(var(--account-accent-rgb), .52);
  background: rgba(var(--account-accent-rgb), .07);
  outline: 0;
}

.asset-record-nav :where(span, span small, span b, strong, strong small, strong em) { display: block; }
.asset-record-nav span { min-width: 0; }
.asset-record-nav span small { display: none; }
.asset-record-nav span b { overflow: hidden; font-size: 14px; font-weight: 750; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.asset-record-nav strong { color: var(--account-accent); font-size: 18px; font-variant-numeric: tabular-nums; text-align: right; line-height: 1.1; }
.asset-record-nav strong small { display: inline; margin-left: 2px; color: #8998aa; font-size: 10px; }
.asset-record-nav strong em { display: none; }

.asset-actions,
.asset-record-list { margin-bottom: var(--asset-gap); }
.asset-actions {
  padding: 10px 12px;
  border: 1px solid #2a3b50;
  border-radius: 12px;
  background: var(--trade-surface);
  box-shadow: var(--trade-shadow);
}
.asset-actions .terminal-card-head,
.asset-record-list .terminal-card-head { margin-bottom: 8px; }
.asset-actions .terminal-card-head h2,
.asset-record-list .terminal-card-head h2 { margin: 0; }
.asset-actions .terminal-card-head { align-items:center; gap:10px; padding-bottom:10px; border-bottom:1px solid #2b4057; }
.asset-actions .terminal-card-head p { margin:5px 0 0; color:#91a0b2; font-size:12px; line-height:1.5; }
.asset-action-status { flex:0 0 auto; padding:5px 9px; border:1px solid rgba(var(--account-accent-rgb),.48); border-radius:999px; background:rgba(var(--account-accent-rgb),.08); color:var(--account-accent); font-size:10px; font-weight:700; }

.asset-actions .fund-action-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 8px;
}

.asset-action-launcher {
  min-height: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "tag title cta";
  align-items: center;
  column-gap: 10px;
  row-gap: 0;
  padding: 11px 12px;
  border: 1px solid #31485f;
  border-radius: 10px;
  background: rgba(5, 10, 17, .22);
  color: var(--trade-title);
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
[data-locale]:not([data-locale="zh-TW"]) .asset-action-launcher > em { display: none; }
.asset-action-launcher::before { display: none; }
.asset-action-launcher:hover,.asset-action-launcher:focus-visible { border-color: rgba(var(--account-accent-rgb),.75); background: rgba(var(--account-accent-rgb),.07); outline: 0; }
.asset-action-launcher span { grid-area: tag; align-self: center; color: var(--account-accent); font-size: 11px; font-weight: 750; }
.asset-action-launcher b { grid-area: title; margin: 0; overflow: hidden; font-size: 14px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.asset-action-launcher small { display: none; }
.asset-action-launcher em { grid-area: cta; margin: 0; color: #c7d4e2; font-size: 12px; font-style: normal; font-weight: 700; white-space: nowrap; }

.asset-actions .asset-action-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  padding: 15px;
  border: 1px solid var(--trade-border);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .018), rgba(0, 0, 0, .035)), var(--trade-surface);
  box-shadow: var(--trade-shadow);
}

.asset-action-card > header {
  min-height: 76px;
  margin-bottom: 13px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--trade-border);
}

.asset-action-card > header p { margin: 6px 0 0; color: var(--trade-muted); font-size: 11px; line-height: 1.45; }
.asset-action-card > label { display: grid; gap: 6px; margin-bottom: 11px; color: var(--trade-text); font-size: 11px; font-weight: 700; }
.asset-action-card > label :where(input, select) { width: 100%; min-height: 44px; }
.asset-action-card > label > small { color: var(--trade-muted); font-size: 9px; font-weight: 500; }
.asset-action-card > .form-error { min-height: 18px; margin: 0 0 8px; }
.asset-action-card > button[type="submit"] { width: 100%; min-height: 44px; margin-top: auto; }
.asset-actions .compact-link { width: max-content; min-height: 36px; margin: 0 0 11px; }

.asset-record-sections { display: grid; gap: var(--asset-gap); }
.asset-record-list {
  min-width: 0;
  scroll-margin-top: 94px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.asset-record-list:focus { border-color: rgba(var(--account-accent-rgb), .46); outline: 0; box-shadow: 0 0 0 3px rgba(var(--account-accent-rgb), .08), var(--trade-shadow); }
.asset-record-list .empty-state { min-height: 104px; padding: 18px; }
.asset-record-list .fund-transactions article { min-width: 0; }
.asset-record-list .fund-transactions article > div { min-width: 0; }
.asset-record-list .fund-transactions article > strong { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.asset-page > .load-more-row { margin: 0 0 var(--asset-gap); }

.asset-drawer[hidden],.asset-action-card[hidden],.asset-filter-empty[hidden] { display: none !important; }
.asset-drawer { position: fixed; z-index: 140; inset: 0; display: grid; grid-template-columns:1fr minmax(360px,520px); }
.asset-drawer-backdrop { grid-column:1/-1; grid-row:1; border:0; background:rgba(0,0,0,.66); opacity:0; transition:opacity .22s ease; }
.asset-drawer-panel { grid-column:2; grid-row:1; min-width:0; height:100%; padding:20px; overflow:auto; border-left:1px solid #354a62; background:#0b111b; box-shadow:-28px 0 70px rgba(0,0,0,.55); transform:translateX(100%); transition:transform .24s ease; }
.asset-drawer.open .asset-drawer-backdrop { opacity:1; }
.asset-drawer.open .asset-drawer-panel { transform:translateX(0); }
.asset-drawer-panel>header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; padding-bottom:15px; border-bottom:1px solid #2b3d52; }
.asset-drawer-panel>header small { color:#8e9daf; font-size:11px; }
.asset-drawer-panel>header h2 { margin:4px 0 0; font-size:22px; }
.asset-drawer-panel>header>button { width:42px; height:42px; border:1px solid #33475e; border-radius:10px; background:#111b28; color:#e7eef6; font-size:25px; cursor:pointer; }
.asset-drawer-content .asset-action-card { min-height:0; padding:17px; border-color:#31465e; }
.asset-drawer-content .asset-action-card>header { min-height:0; }
.asset-drawer-content .asset-action-card>label { color:#d4dde7; font-size:13px; }
.asset-drawer-content .asset-action-card>label>small { font-size:11px; line-height:1.45; }
.asset-drawer-content .asset-action-card :where(input,select) { border-color:#304158; font-size:14px; }
.asset-drawer-open { overflow:hidden; }

.asset-record-query,.asset-record-page .asset-record-list { margin-bottom:var(--asset-gap); border:1px solid #2b3d52; }
.asset-record-query .terminal-card-head { align-items:center; margin-bottom:16px; }
.asset-record-query .terminal-card-head p { margin:5px 0 0; color:#8b9aac; font-size:12px; }
.asset-record-filter { display:grid; grid-template-columns:repeat(5,minmax(120px,1fr)) auto; align-items:end; gap:10px; padding-top:15px; border-top:1px solid #26384d; }
.asset-record-filter label { display:grid; gap:7px; color:#aebdcb; font-size:12px; font-weight:650; }
.asset-record-filter :where(input,select) { width:100%; min-height:44px; padding:0 11px; border:1px solid #30445b; border-radius:8px; background:#080e17; color:#edf3f9; font-size:13px; }
.asset-record-filter :where(input,select):focus { border-color:var(--account-accent); outline:0; box-shadow:0 0 0 3px rgba(var(--account-accent-rgb),.1); }
.asset-record-filter-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.asset-record-filter-actions .terminal-button { min-height:44px; padding-inline:14px; }
.asset-record-page .asset-record-list .terminal-card-head { align-items:center; padding-bottom:13px; border-bottom:1px solid #26384d; }
.asset-record-page .fund-transactions article { margin-bottom:8px; padding:13px 14px; border:1px solid #293b50; border-radius:9px; background:#0a111c; }
.asset-record-page .fund-transactions article:last-child { margin-bottom:0; }
.asset-record-page .fund-transactions article b { font-size:14px; }
.asset-record-page .fund-transactions article small { margin-top:5px; color:#91a0b2; font-size:11px; line-height:1.45; }
.asset-record-page .fund-transactions article>strong { min-width:120px; font-size:15px; font-variant-numeric:tabular-nums; text-align:right; }
.asset-filter-empty { padding:34px 16px; color:#91a0b2; font-size:14px; text-align:center; }

.profile-summary {
  display: grid;
  align-content: start;
  justify-items: stretch;
  gap: 0;
  min-height: 0;
  width: 100%;
}
.profile-summary .profile-user-head h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
}
.profile-identity-summary {
  display: grid;
  width: 100%;
  margin-top: 14px;
  padding: 13px;
  border: 1px solid #31506f;
  border-radius: 10px;
  background: rgba(10, 21, 35, .56);
  color: var(--trade-title);
  text-decoration: none;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.profile-identity-summary:hover,
.profile-identity-summary:focus-visible { border-color: var(--account-accent); background: rgba(var(--account-accent-rgb), .08); transform: translateY(-1px); }
.profile-identity-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.profile-identity-head strong { font-size: 15px; }
.profile-identity-head b { color: var(--account-accent); font-size: 12px; }
.profile-identity-summary dl { gap: 0; margin-top: 9px; }
.profile-identity-summary dl div { min-width: 0; padding: 7px 0; }
.profile-identity-summary dd { min-width: 0; overflow-wrap: anywhere; text-align: right; }
.identity-panel > header .identity-contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.identity-panel > header .identity-contact div { min-width: 0; padding: 10px 12px; border: 1px solid var(--trade-border); border-radius: 8px; background: rgba(5, 8, 13, .28); }
.identity-panel > header .identity-contact dt { color: var(--trade-muted); font-size: 11px; }
.identity-panel > header .identity-contact dd { margin-top: 4px; color: var(--trade-title); font-size: 13px; overflow-wrap: anywhere; }
.settings-list .identity-entry b { color: var(--trade-muted); font-size: 12px; font-weight: 650; }

@media (max-width: 1200px) and (min-width: 901px) {
  .asset-actions .fund-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .asset-actions .asset-action-card[data-fund-action="withdraw"] {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 12px;
  }
  .asset-action-card[data-fund-action="withdraw"] > :where(header, .form-error, button[type="submit"]) { grid-column: 1 / -1; }
  .asset-action-card[data-fund-action="withdraw"] > button[type="submit"] { margin-top: 2px; }
  .asset-record-filter { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width: 900px) {
  .asset-actions .fund-action-grid { grid-template-columns: 1fr; }
  .asset-actions .asset-action-card { min-height: 0; }
  .asset-action-launcher {
    grid-template-areas: "tag title cta";
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 48px;
    padding: 9px 11px;
  }
  .asset-record-filter { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .asset-page { padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
  .trader-container:has(.asset-page) { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
}

@media (max-width: 720px) {
  .asset-page { --asset-gap: 8px; }
  .asset-page .trader-page-head { margin-bottom: 6px; }
  .asset-page .trader-page-head h1 { margin: 0; font-size: 20px; }
  .asset-balance-summary,
  .asset-account-list,
  .asset-record-index,
  .asset-actions,
  .asset-record-list { padding: 9px 10px; }
  .asset-account-grid { grid-template-columns: 1fr; gap: 8px; }
  .asset-account-card { padding: 9px 10px; }
  .asset-account-card h3 { font-size: 13px; }
  .asset-account-card p { font-size: 10px; }
  .asset-account-card dd { font-size: 13px; }
  .asset-balance-summary dl { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
  .asset-balance-summary dl > div {
    gap: 2px;
    padding: 0 7px;
    border-right: 1px solid var(--trade-border);
    border-bottom: 0;
  }
  .asset-balance-summary dl > div:first-child { padding-top: 0; padding-left: 0; }
  .asset-balance-summary dl > div:last-child { padding-bottom: 0; padding-right: 0; border-right: 0; border-bottom: 0; }
  .asset-balance-summary dt { font-size: 10px; }
  .asset-balance-summary dd { font-size: clamp(13px, 3.6vw, 15px); }
  .asset-record-index > header { display: block; margin-bottom: 6px; }
  .asset-record-index > header p { margin-top: 6px; line-height: 1.45; }
  .asset-record-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .asset-record-nav :where(a, button) { min-height: 48px; padding: 8px 9px; }
  .asset-record-nav span b { font-size: 13px; }
  .asset-record-nav strong { font-size: 16px; }
  .asset-action-card > header { min-height: 0; }
  .asset-record-list .terminal-card-head { align-items: center; }
  .asset-record-list .fund-transactions article { align-items: flex-start; gap: 9px; }
  .asset-record-list .fund-transactions article small { white-space: normal; overflow-wrap: anywhere; }
  .asset-actions .terminal-card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:8px; }
  .asset-action-status { width:auto; }
  .asset-record-query .terminal-card-head { display:grid; grid-template-columns:1fr; }
  .asset-record-query .terminal-card-head .terminal-button { width:100%; }
  .asset-record-filter { grid-template-columns:1fr; }
  .asset-record-filter-actions { grid-template-columns:1fr 1fr; }
  .asset-drawer { grid-template-columns:1fr; align-items:end; }
  /* 底部抽屉：高度必须跟着内容走并限高，否则 scrollHeight==clientHeight，
     overflow:auto 无余量可滚，手势会传给 overflow:hidden 的 body 造成「滑不动+弹回」。
     dvh 前留 vh 回退；dvh 才会扣掉手机浏览器工具栏，避免提交按钮被压在工具栏后面。 */
  .asset-drawer-panel { grid-column:1; width:100%; height:auto; max-height:min(88vh,760px); max-height:min(88dvh,760px); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding-bottom:calc(20px + env(safe-area-inset-bottom)); border-top:1px solid #354a62; border-left:0; border-radius:18px 18px 0 0; transform:translateY(100%); }
  .asset-drawer.open .asset-drawer-panel { transform:translateY(0); }
  .profile-summary { min-height: 0; }
  .profile-identity-summary { margin-top: 10px; }
  .identity-panel { grid-template-columns: 1fr; }
  .identity-panel > header { grid-column: auto; }
}

@media (max-width: 420px) {
  .identity-panel > header .identity-contact { grid-template-columns: 1fr; }
  .asset-record-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .asset-record-nav :where(a, button) { min-height: 46px; }
  .asset-record-list .fund-transactions article { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .asset-record-list .fund-transactions article > strong { font-size: 12px; }
  .asset-record-page .fund-transactions article { grid-template-columns:1fr; }
  .asset-record-page .fund-transactions article>strong { min-width:0; text-align:left; }
  .asset-drawer-panel { height:auto; max-height:92vh; max-height:92dvh; padding:14px; padding-bottom:calc(14px + env(safe-area-inset-bottom)); }
}

/* 旧 iOS Safari(15.0–15.3) 不支持 <dialog>：无默认 display:none，表单会常驻页面。
   这里显式接管显示与定位，兼容有/无原生 dialog 的机型。 */
.kyc-gate-dialog:not([open]) { display: none !important; }
.kyc-gate-dialog[open] {
  position: fixed;
  z-index: 200;
  inset: 0;
  margin: auto;
}

.kyc-gate-dialog {
  width: min(560px, calc(100vw - 24px));
  /* 表单较长：小屏机型必须限高并可滚动，否则提交按钮触不可及。dvh 前留 vh 回退给旧机型。 */
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0;
  border: 1px solid var(--trade-border, #30445c);
  border-radius: 14px;
  background: var(--trade-surface, #111a28);
  color: var(--trade-text, #e8eef5);
}
.kyc-gate-dialog::backdrop { background: rgba(5, 7, 10, .72); }
.kyc-gate-dialog .kyc-gate-body { position: relative; padding: 20px; }
.kyc-gate-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--trade-surface, #111a28);
}
.kyc-gate-head h3 { margin: 0; flex: 1; font-size: 20px; padding-right: 4px; }
.kyc-gate-close,
.identity-otp-close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  background: rgba(255, 255, 255, .06);
  color: #a8b6c8;
  font-size: 20px;
  line-height: 1;
}
.kyc-gate-close:hover,
.identity-otp-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, .12);
}
.kyc-gate-dialog h3 { margin: 0 0 8px; font-size: 20px; padding-right: 8px; }
.kyc-gate-dialog .identity-form { display: grid; gap: 10px; grid-template-columns: 1fr; }

/* 身份认证本地验证码：与登录注册同一套弹出层，盖在 KYC 窗与手机底栏之上 */
.identity-otp-dialog:not([open]) { display: none !important; }
.identity-otp-dialog[open] {
  position: fixed;
  z-index: 360;
  inset: 0;
  margin: auto;
}
.identity-otp-dialog {
  width: min(400px, calc(100vw - 32px));
  max-height: min(88vh, 640px);
  max-height: min(88dvh, 640px);
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: #0d243c;
  color: #e8eef5;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.identity-otp-dialog::backdrop { background: rgba(2, 8, 18, .78); }
.identity-otp-body { padding: 22px; }
.identity-otp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.identity-otp-head h2 { margin: 0; font-size: 20px; color: #fff; }
.identity-otp-hint { margin: 0 0 10px; color: #8fa0b5; font-size: 13px; line-height: 1.5; }
.identity-otp-code {
  margin: 8px 0 14px;
  padding: 14px;
  border: 1px dashed rgba(201, 162, 74, .45);
  border-radius: 10px;
  background: #102033;
  text-align: center;
}
.identity-otp-code span { display: block; color: #8fa0b5; font-size: 12px; }
.identity-otp-code b {
  display: block;
  margin-top: 4px;
  color: #f5e0a0;
  letter-spacing: .22em;
  font-size: 28px;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.identity-otp-field { display: block; margin-bottom: 12px; }
.identity-otp-field input {
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid #2a4258;
  border-radius: 8px;
  background: #0c1a28;
  color: #edf2f8;
  font: inherit;
  letter-spacing: .18em;
}
.identity-otp-dialog .terminal-button { width: 100%; min-height: 46px; }
@media (max-width: 720px) {
  .identity-otp-code b { font-size: 26px; letter-spacing: .16em; }
}

/* 登录进入行情：会员欢迎卡片（固定层，兼容手机 Chrome） */
body.member-welcome-open { overflow: hidden; }
.member-welcome-backdrop{
  position: fixed;
  z-index: 150;
  inset: 0;
  display: grid;
  place-items: center;
  /* 卡片高于视口时遮罩层本身要能滚动，避免关闭按钮被挤出屏幕后无法退出。 */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  background: rgba(4,10,18,.62);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.member-welcome-dialog{
  width:min(380px,calc(100vw - 32px));
  padding:0;border:0;border-radius:16px;
  background:transparent;color:#E8EEF6;
}
.member-welcome-dialog::backdrop{
  background:rgba(4,10,18,.62);
  backdrop-filter:blur(5px);
}
.member-welcome-card{
  position:relative;
  width:min(380px,calc(100vw - 32px));
  max-height:calc(100vh - 48px);
  max-height:calc(100dvh - 48px);
  overflow:auto;
  padding:26px 22px 20px;
  border-radius:16px;
  border:1px solid rgba(201,162,74,.38);
  background:
    radial-gradient(420px 160px at 12% 0%,rgba(201,162,74,.14),transparent 55%),
    linear-gradient(165deg,#0d2138 0%,#0a1829 55%,#081421 100%);
  box-shadow:0 22px 48px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06);
  text-align:center;
  animation:memberWelcomeIn .36s ease-out;
}
@keyframes memberWelcomeIn{
  from{opacity:0;transform:translateY(10px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.member-welcome-mark{
  width:40px;height:40px;margin:0 auto 12px;
  border-radius:12px;
  border:1px solid rgba(201,162,74,.35);
  background:rgba(201,162,74,.1) center/22px no-repeat;
  background-image:url("../images/brand/ccx-mark-gold.svg");
}
.member-welcome-card .member-welcome-eyebrow{
  margin:0 0 8px;font-size:11px;letter-spacing:.14em;
  color:rgba(226,200,122,.78);font-weight:600;
}
.member-welcome-card h2{
  margin:0 0 10px;font-size:17px;font-weight:700;line-height:1.35;color:#F4F7FB;
}
.member-welcome-card p{
  margin:0 auto 18px;max-width:28em;
  font-size:13px;line-height:1.7;color:#9AA8BA;font-weight:400;
}
.member-welcome-card .member-welcome-actions{display:grid;gap:8px}
.member-welcome-card .member-welcome-go{
  min-height:42px;border:0;border-radius:10px;cursor:pointer;
  font:inherit;font-size:13px;font-weight:700;color:#071A2F;
  background:linear-gradient(180deg,#E2C87A 0%,#C9A24A 55%,#A8842E 100%);
}
.member-welcome-card .member-welcome-go:hover{filter:brightness(1.04)}
.member-welcome-card .member-welcome-close{
  position:absolute;top:10px;right:10px;
  width:32px;height:32px;border-radius:8px;cursor:pointer;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);
  color:#A8B6C8;font-size:18px;line-height:1;
}
.member-welcome-card .member-welcome-close:hover{color:#fff;border-color:rgba(201,162,74,.35)}

[data-theme="light"] .trader-header {
  background: var(--trade-header-bg);
  box-shadow: 0 8px 24px rgba(25, 28, 38, .06);
}
[data-theme="light"] .watch-sidebar,
[data-theme="light"] .account-session,
[data-theme="light"] .expiry-grid button,
[data-theme="light"] .amount-grid button,
[data-theme="light"] .dialog-summary div,
[data-theme="light"] .order-dialog,
[data-theme="light"] .practice-holding-board,
[data-theme="light"] .holding-board-hero,
[data-theme="light"] .practice-holding-board dl div {
  background: var(--trade-surface);
  color: var(--trade-text);
}
[data-theme="light"] .expiry-grid button,
[data-theme="light"] .amount-grid button {
  background: var(--trade-surface-2);
}
[data-theme="light"] .order-dialog input,
[data-theme="light"] .market-board-toolbar :where(input, select),
[data-theme="light"] .fund-form :where(input, select, textarea),
[data-theme="light"] .identity-form :where(input, select, textarea) {
  background: #fff;
  color-scheme: light;
}
[data-theme="light"] #marketChart {
  background: var(--color-chart-bg, #fff);
  border-color: var(--trade-border);
}
[data-theme="light"] .instrument-quote-board,
[data-theme="light"] .chart-panel {
  background: #fff;
  border-color: rgba(25, 28, 38, .1);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}
[data-theme="light"] .mobile-trade-bar,
[data-theme="light"] body.instrument-view .mobile-trade-bar {
  border-color: rgba(25, 28, 38, .12);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 -8px 24px rgba(15, 23, 42, .12);
}
[data-theme="light"] .instrument-back-inline {
  border-color: rgba(25, 28, 38, .12);
  color: var(--trade-title);
  background: #fff;
}
[data-theme="light"] .market-category-tabs :where(button, a) {
  color: var(--trade-text);
  border-color: rgba(25, 28, 38, .12);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
[data-theme="light"] .market-category-tabs :where(button, a) > span {
  color: var(--trade-muted);
  background: rgba(15, 23, 42, .06);
}
[data-theme="light"] .market-category-tabs :where(.active, [aria-selected="true"], [aria-current="page"]) {
  color: #fff;
  border-color: rgba(var(--account-accent-rgb), .75);
  background: rgba(var(--account-accent-rgb), .95);
}
[data-theme="light"] .market-quote-mover {
  background: rgba(15, 23, 42, .04);
}
[data-theme="light"] .market-board-toolbar {
  background: var(--trade-surface);
}
[data-theme="light"] .market-table-group {
  background: var(--trade-surface);
}
[data-theme="light"] .market-table-group > header,
[data-theme="light"] .market-table-group > .market-table-group-title,
[data-theme="light"] .market-table-group > :is(h2, h3) {
  color: var(--trade-group-header-fg);
  background: linear-gradient(90deg, rgba(35, 150, 255, .10), transparent 52%), var(--trade-group-header-bg);
}
[data-theme="dark"] .market-table-group > header,
[data-theme="dark"] .market-table-group > .market-table-group-title,
[data-theme="dark"] .market-table-group > :is(h2, h3) {
  color: var(--trade-group-header-fg);
  background: linear-gradient(90deg, rgba(54, 211, 153, .16), transparent 52%), var(--trade-group-header-bg);
}
[data-theme="light"] .market-quote-table td:first-child .trader-instrument b,
[data-theme="dark"] .market-quote-table td:first-child .trader-instrument b {
  color: var(--trade-title);
}
[data-theme="light"] .market-quote-table td:first-child .trader-instrument small,
[data-theme="dark"] .market-quote-table td:first-child .trader-instrument small {
  color: var(--trade-muted);
}
[data-theme="light"] .market-table-scroll::-webkit-scrollbar-thumb { border-color: var(--trade-surface); }
[data-order-detail] .payout-rate,
[data-order-detail] [data-payout-percent] { display: none !important; }
.watch-price strong,
[data-live-price],
[data-market-price],
[data-ohlc] {
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0;
  transform: none;
}
.trader-body .market-table-group > header h2 {
  font-weight: 800;
  letter-spacing: 0;
  color: var(--trade-group-header-fg);
}
.kyc-gate-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kyc-gate-otp { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
@media (max-width: 640px) {
  .kyc-gate-photos,
  .kyc-gate-otp { grid-template-columns: 1fr; }
}

/* Readable UI stays upright; password overlay/placeholder at 30% */
.trader-body :where(input, textarea, select, label) {
  letter-spacing: 0;
  transform: none;
}
.trader-body input[type="password"]::placeholder {
  opacity: .30;
  transform: none;
  letter-spacing: 0;
}
.trader-body input[type="password"]::-webkit-input-placeholder {
  opacity: .30;
  transform: none;
  letter-spacing: 0;
}
.trader-body input[type="password"]::-moz-placeholder {
  opacity: .30;
  transform: none;
  letter-spacing: 0;
}