:root {
  color-scheme: dark;
  --bg: #181a1e; --panel: #222529; --panel2: #292c30; --line: #34363b;
  --text: #f0f1f3; --muted: #a1a3aa; --orange: #dfb267;
  --green: #20b68a; --red: #ec475c; --blue: #5d9ee9;
  --font: "PingFang SC", "Microsoft YaHei", -apple-system, sans-serif;
  --numbers: "Helvetica Neue", Arial, sans-serif;
  --nav-height: 64px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { background: #111315; }
body { margin: 0; color: var(--text); font: 14px/1.45 var(--font); -webkit-font-smoothing: antialiased; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { border: 0; background: none; color: inherit; cursor: pointer; }
button:disabled { opacity: .45; cursor: not-allowed; }
button:active, a:active { opacity: .75; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
input, textarea { min-width: 0; }
h1, h2, h3, p { margin-top: 0; }
.app-shell { width: 100%; max-width: 480px; min-height: 100dvh; margin: auto; background: var(--bg); padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom)); }
.app-shell:has(.bottom-nav[hidden]) { padding-bottom: 0; }
main { min-height: calc(100dvh - var(--nav-height)); }
.up { color: var(--red) !important; }
.down { color: var(--green) !important; }
.muted { color: var(--muted); font-size: 12px; }
.icon { display: inline-block; width: 22px; height: 22px; flex: 0 0 auto; background: currentColor; mask: var(--icon) center / contain no-repeat; -webkit-mask: var(--icon) center / contain no-repeat; vertical-align: middle; }
.tool-button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; color: #c4c6cc; }
.demo-badge { color: var(--muted); white-space: nowrap; font-size: 12px; }
.status-dot { display: none; }
.market-mode { display: inline-block; padding: 1px 6px; border: 1px solid var(--orange); border-radius: 3px; color: var(--orange); font: normal 12px/1.6 var(--font); white-space: nowrap; }
.bottom-nav { position: fixed; z-index: 10; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; width: min(100%,480px); height: calc(var(--nav-height) + env(safe-area-inset-bottom)); padding: 6px 0 calc(6px + env(safe-area-inset-bottom)); background: #202226; border-top: 1px solid var(--line); }
.bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 13px; text-decoration: none; color: #999ca4; }
.bottom-nav .icon { width: 24px; height: 24px; }
.bottom-nav a.active { color: var(--orange); }
.market-page { min-height: calc(100dvh - var(--nav-height) - env(safe-area-inset-bottom)); padding-top: env(safe-area-inset-top); display: flex; flex-direction: column; }
.market-top { display: flex; align-items: center; gap: 16px; height: 70px; padding: 7px 16px 0; flex: none; }
.market-top h1 { margin: 0; font-size: 24px; font-weight: 600; }
.market-top .tool-button { margin-left: auto; }
.market-tools { padding: 5px 16px 10px; }
.market-tools label { display: flex; align-items: center; height: 38px; padding: 0 12px; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; color: #a0a2ab; }
.market-tools input { width: 100%; padding: 0; background: none; color: var(--text); border: 0; outline: none; font-size: 14px; }
.market-tools .icon { width: 18px; height: 18px; }
input::placeholder, textarea::placeholder { color: #9699a2; }
.market-filters { display: flex; gap: 30px; align-items: center; height: 49px; flex: none; padding: 0 24px; border-bottom: 1px solid var(--line); }
.market-filters button { position: relative; height: 100%; padding: 0; color: #a3a5ad; font-size: 17px; }
.market-filters button.active { color: var(--orange); font-weight: 600; }
.market-filters .active::after { position: absolute; content: ""; left: 50%; transform: translateX(-50%); bottom: 0; width: 23px; height: 3px; background: var(--orange); }
.market-section { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; height: 41px; flex: none; color: #acaeb6; font-size: 13px; border-bottom: 1px solid var(--line); background: #1d1f23; }
.market-section > span:last-child { display: flex; gap: 8px; align-items: center; }
.market-section .icon { width: 14px; height: 14px; }
.market-row { width: 100%; display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr) 90px; gap: 14px; padding: 0 16px; align-items: center; min-height: 53px; border-bottom: 1px solid var(--line); text-align: left; }
.market-label { min-height: 37px; font-size: 13px; color: #9ea1a9; }
.market-label > span:not(:first-child) { text-align: right; }
.quote-row:hover { background: #202327; }
.contract-cell { min-width: 0; }
.contract-cell > span { display: block; font-size: 16px; white-space: nowrap; }
.contract-cell > small { display: block; color: #989ca6; margin-top: 3px; font: 11px var(--numbers); }
.market-row > b { font: 500 17px var(--numbers); letter-spacing: .1px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.percent-cell { text-align: right; }
.percent { display: inline-block; min-width: 74px; padding: 6px 4px; border-radius: 3px; text-align: center; color: #fff; font: 500 15px var(--numbers); font-variant-numeric: tabular-nums; }
.percent.positive { background: #dc3d50; }
.percent.negative { background: #179d76; }
.market-footnote { margin: auto 0 0; padding: 18px 12px 22px; text-align: center; color: #979ba4; font-size: 12px; }
.trade-head { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 8px; align-items: center; min-height: 72px; padding: calc(8px + env(safe-area-inset-top)) 12px 8px; border-bottom: 1px solid var(--line); }
.trade-head > .tool-button { width: 30px; }
.contract-name { font-size: 19px; font-weight: 500; }
.contract-name small { display: flex; align-items: center; gap: 8px; margin-top: 4px; color: #a9acb4; font: 12px var(--numbers); }
.contract-name .market-mode { font-size: 10px; line-height: 1.4; padding: 0 4px; }
.head-actions { display: flex; align-items: center; }
.favorite.selected { color: var(--orange); }
.order-head { grid-template-columns: 40px minmax(0,1fr) 40px; border: 0; }
.order-head .contract-name { text-align: center; }
.order-head .contract-name small { justify-content: center; }
.quote-info { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.2fr); gap: 16px 10px; padding: 16px 16px 0; }
.quote-main { display: flex; flex-direction: column; justify-content: center; }
.quote-main strong { font: 600 30px/1.15 var(--numbers); font-variant-numeric: tabular-nums; }
.quote-main > div { display: flex; gap: 9px; margin-top: 8px; font: 14px var(--numbers); }
.quote-stats { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 7px 12px; font-size: 11px; }
.quote-stats > span { display: flex; justify-content: space-between; gap: 4px; color: #a6a9b0; }
.quote-stats b { font: 11px var(--numbers); color: #eaebee; white-space: nowrap; }
.trading-time { grid-column: 1/-1; display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 -16px; padding: 7px 16px; border-block: 1px solid var(--line); font-size: 10px; color: #a5a8b0; }
.trading-time .demo-badge { font-size: 10px; }
.period-tabs { display: flex; align-items: center; gap: 5px; padding: 0 10px; min-height: 44px; border-bottom: 1px solid var(--line); }
.period-tabs > button { position: relative; padding: 0 6px; min-height: 43px; font-size: 13px; color: #a4a7af; white-space: nowrap; }
.period-tabs .active { color: var(--orange); }
.period-tabs .active::after { content: ""; position: absolute; height: 2px; bottom: 0; left: 4px; right: 4px; background: var(--orange); }
.period-tabs .expand-chart { margin-left: auto; width: 28px; padding: 0; }
.expand-chart .icon { width: 17px; height: 17px; }
.intraday-page .period-tabs > button:not(.expand-chart) { min-width: 62px; margin-right: 8px; font-size: 15px; }
.chart-layout { display: grid; grid-template-columns: minmax(0,1fr) 36%; }
.chart-panel { min-width: 0; border-right: 1px solid var(--line); }
.chart-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 9px 8px; min-height: 35px; font-size: 10px; color: #e4e5e8; }
.chart-meta b { color: var(--orange); font-weight: 400; }
.ma5 { color: #64a5ee; }
.ma10 { color: var(--orange); }
.ma20 { color: #bd74d9; }
.kline-page .chart-meta > span::before, .macd-meta > span::before { content: ""; display: inline-block; width: 10px; height: 2px; background: currentColor; vertical-align: middle; margin-right: 4px; }
.terminal-plot { height: clamp(220px,calc(100dvh - 610px),380px); padding: 0 3px 0 0; }
.intraday-page .terminal-plot { height: clamp(290px,calc(100dvh - 520px),460px); }
.terminal-plot svg { display: block; width: 100%; height: 100%; }
.grid path { fill: none; stroke: #303238; stroke-width: .65; vector-effect: non-scaling-stroke; }
.trend { fill: none; stroke: #ececee; stroke-width: 1; vector-effect: non-scaling-stroke; }
.average { fill: none; stroke: var(--orange); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ma-line { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
.ma-0 { stroke: #559cec; } .ma-1 { stroke: var(--orange); } .ma-2 { stroke: #ba6fd6; }
.axis-text { fill: #b0b3bc; font: 12px var(--numbers); }
.last-price-line { fill: none; stroke: currentColor; stroke-width: .75; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.last-price-label { fill: #c9f3e3; font: 12px var(--numbers); paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round; }
.candle path { stroke-width: .7; }
.candle.rise path, .candle.rise rect { stroke: var(--red); fill: var(--red); }
.candle.fall path, .candle.fall rect { stroke: var(--green); fill: var(--green); }
.indicator, .macd-indicator { border-top: 1px solid var(--line); padding: 9px 8px 0; font-size: 11px; color: #d4d6dc; }
.volume-chart { width: 100%; height: 80px; display: block; margin-top: 5px; }
.intraday-page .volume-chart { height: 105px; }
.volume-up { fill: #dc4355; } .volume-down { fill: #159e7d; }
.macd-meta { display: flex; gap: 10px; font-size: 10px; }
.macd-chart { width: 100%; height: 83px; display: block; margin-top: 4px; }
.chart-foot { margin: 0; padding: 7px 12px; color: #969ba5; font-size: 10px; border-top: 1px solid var(--line); }
.book { min-width: 0; font-size: 12px; }
.book h3 { font-size: 12px; font-weight: 400; padding: 10px; margin: 0; }
.depth-row { display: grid; grid-template-columns: 26px minmax(0,1fr) 19px; align-items: center; gap: 3px; padding: 5px 9px; color: #a8abb2; }
.depth-row b { font: 12px var(--numbers); text-align: right; white-space: nowrap; }
.depth-row em { font: normal 11px var(--numbers); text-align: right; color: #d4d5d9; }
.depth-row.depth-1, .depth-row.depth-3 { background: linear-gradient(to left,#1e3c3255 34%,transparent 34%) right center / 100% 13px no-repeat; }
.book-divider { height: 1px; margin: 8px 10px; background: #45474b; }
.tape { border-top: 1px solid var(--line); margin-top: 12px; }
.tape p { display: grid; grid-template-columns: 1fr 15px; gap: 4px; margin: 0; padding: 6px 10px; font: 11px var(--numbers); color: #a5a9b2; }
.tape p > span { grid-column: 1/-1; }
.tape b { font-weight: 400; font-size: 12px; } .tape small { text-align: right; }
.chart-expanded .chart-layout { grid-template-columns: minmax(0,1fr); }
.chart-expanded .book { display: none; }
.chart-expanded .terminal-plot { min-height: 420px; }
.account-bar { margin: 0 8px 8px; border-radius: 4px; background: var(--panel); }
.account-bar > button { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 41px; padding: 0 12px; border-bottom: 1px solid #3d3f44; color: #e0e1e6; font-size: 13px; }
.account-bar > button > span:last-child { color: #b9bbc4; }
.account-bar .icon { width: 14px; height: 14px; }
.balance-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 12px; }
.balance-grid > div > span { display: block; color: #acaeb7; font-size: 12px; }
.balance-grid b { display: block; margin-top: 5px; font: 500 19px var(--numbers); overflow-wrap: anywhere; }
.balance-grid .market-mode { font-size: 10px; padding-inline: 4px; }
.order-layout { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); margin: 0 8px; border-radius: 4px; background: var(--panel); }
.order-form { min-width: 0; padding: 12px 10px; }
.contract-input { display: flex; align-items: center; height: 38px; border: 1px solid #44464c; border-radius: 4px; background: #1b1d21; }
.contract-input input { width: 100%; padding-left: 8px; border: 0; background: none; color: #eeeef2; font-size: 15px; }
.contract-input .tool-button { flex: 0 0 32px; height: 36px; }
.contract-input .icon { width: 18px; height: 18px; }
.order-types { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 12px; border: 1px solid #44464c; border-radius: 3px; }
.order-types button { min-height: 32px; padding: 0; font-size: 12px; color: #abadb6; border-right: 1px solid #44464c; }
.order-types button:last-child { border-right: 0; }
.order-types button.selected { color: var(--orange); outline: 1px solid var(--orange); border-radius: 2px; background: #191b1f; }
.step-field { margin-top: 14px; }
.step-field label { display: flex; justify-content: space-between; margin-bottom: 8px; color: #b0b2bb; font-size: 13px; }
.step-field small { font-size: 12px; }
.step-field > div { display: grid; grid-template-columns: 29px minmax(0,1fr) 29px; height: 40px; border: 1px solid #494b51; border-radius: 3px; overflow: hidden; background: #1a1c20; }
.step-field button { display: flex; align-items: center; justify-content: center; padding: 0; color: #bdbfc8; }
.step-field button:first-child { border-right: 1px solid #44464c; }
.step-field button:last-child { border-left: 1px solid #44464c; }
.step-field .icon { width: 18px; height: 18px; }
.step-field input { width: 100%; padding: 0; border: 0; background: none; text-align: center; color: #edeef2; font: 16px var(--numbers); appearance: textfield; -moz-appearance: textfield; }
.step-field input::-webkit-inner-spin-button { -webkit-appearance: none; }
.order-validity { display: flex; justify-content: space-between; padding-top: 16px; font-size: 12px; color: #aeb0b9; }
.order-book { border-left: 1px solid #3d3f44; padding: 12px 10px; min-width: 0; }
.order-book h3 { font-size: 12px; font-weight: 400; color: #9fa2ac; margin: 0 0 9px; }
.order-book h3 b { display: block; font: 500 24px var(--numbers); margin-top: 7px; }
.order-book p { display: grid; grid-template-columns: 24px minmax(0,1fr) 17px; align-items: center; gap: 4px; padding: 7px 0; margin: 0; color: #a9acb5; font-size: 12px; }
.order-book b { font: 12px var(--numbers); text-align: right; white-space: nowrap; }
.order-book small { font: 11px var(--numbers); text-align: right; }
.order-book .book-divider { margin: 6px 0; }
.order-book p.ask { background: linear-gradient(to right,transparent 20%,#1c483555 20%,#1c483555 77%,transparent 77%); }
.order-book p.buy { background: linear-gradient(to right,transparent 20%,#522a3255 20%,#522a3255 65%,transparent 65%); }
.order-book p.ask, .order-book p.buy { background-size: 100% 13px; background-repeat: no-repeat; background-position: center; }
.order-book p:nth-of-type(3n + 2) { background-size: 75% 13px; background-position: right center; }
.order-book p:nth-of-type(3n) { background-size: 55% 13px; background-position: right center; }
.book-note { display: block; color: #9a9da7; font-size: 10px; text-align: right; margin-top: 12px; }
.trade-actions { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; padding: 9px 8px 0; }
.trade-actions button { height: 62px; color: white; border-radius: 4px; font-size: 20px; line-height: 1.3; }
.trade-actions small { display: block; font-size: 12px; margin-top: 4px; }
.buy-open { background: #dc3d51; }
.sell-open { background: #1fa778; }
.trade-actions .close-open { background: var(--panel); border: 1px solid var(--orange); }
.demo-note { margin: 9px 0; padding: 0 12px; color: #9c9fa9; font-size: 11px; }
.order-page > .demo-note { text-align: center; }
.order-tabs { display: flex; border-block: 1px solid var(--line); }
.order-tabs button { flex: 1; position: relative; min-height: 42px; padding: 0; color: #a6a9b2; font-size: 15px; }
.order-tabs .active { color: var(--orange); }
.order-tabs .active::after { content: ""; position: absolute; left: calc(50% - 15px); bottom: 0; width: 30px; height: 2px; background: var(--orange); }
.position-labels { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 5px; padding: 10px 14px; border-bottom: 1px solid var(--line); color: #9fa3ad; font-size: 11px; }
.position-labels > span:not(:first-child) { text-align: right; }
.position-empty, .empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 22px 14px; min-height: 122px; color: #9599a4; text-align: center; }
.position-empty > .icon, .empty > .icon { width: 35px; height: 35px; color: #737985; margin-bottom: 10px; }
.position-empty strong, .empty strong { font-size: 14px; font-weight: 400; }
.position-empty { min-height: 102px; padding-block: 14px; }
.empty p { font-size: 12px; margin: 8px 0; }
.account-title { display: flex; justify-content: space-between; align-items: center; padding: 24px 20px 14px; gap: 12px; }
.account-title h1 { margin: 0; font-size: 22px; font-weight: 500; }
.account-title button { color: var(--orange); font-size: 13px; }
.account-card { padding: 14px 20px 24px; border-bottom: 1px solid var(--line); }
.account-card > div:first-child span { display: block; color: var(--muted); font-size: 12px; }
.account-card > div:first-child b { display: block; margin-top: 10px; font: 500 30px var(--numbers); overflow-wrap: anywhere; }
.account-card p { color: var(--muted); font-size: 11px; margin: 10px 0 22px; }
.account-card > div:last-child { display: flex; gap: 10px; }
.account-card button { flex: 1; border: 1px solid #454b4b; min-height: 44px; border-radius: 5px; font-size: 12px; }
.account-card .orange-button { background: var(--orange); color: #171915; border-color: var(--orange); }
.account-list { padding: 8px 20px 20px; }
.account-list button, .account-list > div { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 54px; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); text-align: left; font-size: 14px; }
.account-list > div span { color: var(--muted); }
.account-list b { font-weight: 400; overflow-wrap: anywhere; min-width: 0; text-align: right; }
.account-list button span { color: var(--muted); font-size: 20px; }
.logout { display: block; margin: 14px 20px; width: calc(100% - 40px); padding: 13px; color: var(--red); background: var(--panel); border-radius: 4px; }
.record-list { padding: 0 20px; }
.record { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.record > div:last-child { text-align: right; }
.record b, .record strong { font-size: 13px; font-weight: 400; }
.record small, .record .status { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; }
.record .status.pending { color: var(--orange); }
.record .status.approved { color: var(--green); }
.record .status.rejected { color: var(--red); }
.small-link { color: var(--orange); padding: 4px 0; font-size: 11px; }
.paging { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 20px; font-size: 11px; color: var(--muted); }
.paging button { background: var(--panel); border-radius: 4px; padding: 9px 12px; }
.auth-page { display: flex; flex-direction: column; min-height: 100dvh; padding: calc(32px + env(safe-area-inset-top)) 28px calc(25px + env(safe-area-inset-bottom)); }
.auth-logo { display: flex; gap: 12px; align-items: center; font-size: 16px; font-weight: 600; }
.auth-logo > .icon { width: 40px; height: 40px; color: var(--orange); }
.auth-logo small { display: block; color: var(--muted); font-size: 8px; font-weight: 400; margin-top: 2px; }
.auth-heading { margin-top: 40px; }
.auth-heading h1 { margin: 7px 0 8px; font-size: 30px; font-weight: 500; }
.auth-heading p { color: var(--muted); font-size: 13px; margin-bottom: 30px; }
.auth-tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--line); margin-bottom: 25px; }
.auth-tabs button { padding: 0 0 12px; color: var(--muted); font-size: 15px; }
.auth-tabs button.active { border-bottom: 2px solid var(--orange); color: var(--text); }
.auth-page label { display: block; margin: 18px 0 0; color: #c3cbcd; font-size: 12px; }
.auth-page input, dialog input, dialog textarea { display: block; width: 100%; margin-top: 8px; padding: 12px; border: 1px solid #363d3f; border-radius: 5px; background: var(--panel); color: var(--text); font-size: 13px; }
.auth-page input { height: 48px; }
.error { min-height: 18px; color: var(--red); font-size: 11px; margin: 12px 0; }
.auth-submit, .primary { display: flex; justify-content: center; align-items: center; gap: 12px; width: 100%; min-height: 46px; border-radius: 5px; background: var(--orange); color: #1b1d19; font-weight: 600; }
.auth-submit .icon { width: 17px; height: 17px; }
.auth-footer { display: flex; align-items: center; justify-content: center; gap: 6px; color: #899698; font-size: 10px; padding-top: 45px; margin-top: auto; }
.auth-footer .icon { width: 15px; height: 15px; }
dialog { width: calc(100% - 32px); max-width: 420px; max-height: 88dvh; padding: 24px; color: var(--text); background: var(--panel); border: 1px solid #434b4d; border-radius: 8px; }
dialog::backdrop { background: #000a; }
.dialog-head { display: flex; justify-content: space-between; align-items: center; }
.dialog-head h2, dialog h2 { margin: 0; font-size: 18px; font-weight: 500; }
.icon-button { font-size: 25px; width: 36px; height: 36px; }
dialog label { display: block; margin-top: 18px; font-size: 12px; }
dialog textarea { resize: vertical; }
.action-row { display: flex; gap: 12px; margin-top: 18px; }
.action-row button { flex: 1; min-height: 42px; border-radius: 5px; }
.secondary { background: #343c3e; }
#toast { position: fixed; z-index: 30; bottom: calc(90px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: max-content; max-width: min(88vw,420px); padding: 12px 16px; background: #e6ebea; color: #1b2224; border-radius: 6px; font-size: 12px; box-shadow: 0 8px 30px #0005; }
.loading { padding: 100px 20px; color: var(--muted); text-align: center; font-size: 13px; }
.icon-chart-no-axes-combined { --icon: url("./icons/chart-no-axes-combined.svg"); }
.icon-list { --icon: url("./icons/list.svg"); }
.icon-chart-candlestick { --icon: url("./icons/chart-candlestick.svg"); }
.icon-arrow-left-right { --icon: url("./icons/arrow-left-right.svg"); }
.icon-arrow-left { --icon: url("./icons/arrow-left.svg"); }
.icon-user-round { --icon: url("./icons/user-round.svg"); }
.icon-refresh-cw { --icon: url("./icons/refresh-cw.svg"); }
.icon-search { --icon: url("./icons/search.svg"); }
.icon-chevron-right { --icon: url("./icons/chevron-right.svg"); }
.icon-star { --icon: url("./icons/star.svg"); }
.icon-shield-check { --icon: url("./icons/shield-check.svg"); }
.icon-inbox { --icon: url("./icons/inbox.svg"); }
.icon-minus { --icon: url("./icons/minus.svg"); }
.icon-plus { --icon: url("./icons/plus.svg"); }

.icon-chart-no-axes-column-increasing { --icon: url("./icons/chart-no-axes-column-increasing.svg"); }
.icon-activity { --icon: url("./icons/activity.svg"); }
.icon-notepad-text { --icon: url("./icons/notepad-text.svg"); }
.icon-info { --icon: url("./icons/info.svg"); }
.icon-maximize { --icon: url("./icons/maximize.svg"); }
@media(min-width:481px) { .app-shell { border-inline: 1px solid var(--line); } }
@media(max-width:360px) {
 .market-row { padding-inline: 12px; gap: 8px; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr) 72px; }
 .contract-cell > span { font-size: 14px; } .market-row > b { font-size: 15px; }
 .percent { min-width: 65px; font-size: 13px; } .market-top { padding-inline: 12px; }
 .trade-head { padding-inline: 8px; gap: 4px; }
 .contract-name { font-size: 16px; } .head-actions .tool-button { width: 32px; }
 .quote-info { padding: 14px 10px 0; grid-template-columns: minmax(0,.85fr) minmax(0,1.2fr); gap: 12px 8px; }
 .quote-main strong { font-size: 25px; } .quote-main > div { font-size: 11px; gap: 6px; }
 .quote-stats { gap: 6px; font-size: 10px; } .quote-stats b { font-size: 10px; }
 .trading-time { margin-inline: -10px; padding-inline: 10px; font-size: 9px; }
 .period-tabs { gap: 0; padding-inline: 6px; } .period-tabs > button { font-size: 11px; padding-inline: 5px; }
 .chart-layout { grid-template-columns: minmax(0,1fr) 37%; }
 .depth-row { padding-inline: 6px; grid-template-columns: 20px minmax(0,1fr) 14px; gap: 1px; font-size: 10px; }
 .depth-row b { font-size: 10px; } .book h3 { padding-inline: 6px; }
 .tape p { padding-inline: 6px; } .tape b { font-size: 11px; }
 .chart-meta { font-size: 9px; gap: 5px; padding-inline: 5px; }
 .order-form { padding: 10px 8px; } .order-book { padding: 10px 7px; }
 .order-book p { gap: 2px; grid-template-columns: 20px minmax(0,1fr) 13px; font-size: 10px; }
 .order-book b { font-size: 11px; } .order-book h3 b { font-size: 21px; }
 .step-field > div { grid-template-columns: 24px minmax(0,1fr) 24px; }
 .step-field input { font-size: 14px; } .order-types button { font-size: 10px; }
 .contract-input input { font-size: 13px; }
 .balance-grid { gap: 6px; padding-inline: 10px; } .balance-grid b { font-size: 16px; }
 .balance-grid .market-mode { font-size: 9px; }
}
@media(prefers-reduced-motion:no-preference) { button, a { transition: background-color .12s,color .12s; } }