:root {
  color-scheme: dark;
  --bg: #10130f;
  --surface: #171b16;
  --surface-raised: #1d231b;
  --surface-soft: #20261e;
  --line: #2b3228;
  --line-soft: #222820;
  --text: #f1f4ed;
  --muted: #879082;
  --dim: #5f695b;
  --green: #b7f36b;
  --green-deep: #26391b;
  --red: #ff827c;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
}

* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; background: radial-gradient(ellipse at 45% -18%, #202b18 0, transparent 38%), var(--bg); }
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.app-frame { width: min(100%, 1720px); margin: 0 auto; padding: 0 32px; }
.topbar { height: 78px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line-soft); gap: 24px; }
.brand { min-width: 255px; display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); }
.brand-icon { width: 38px; height: 38px; display: grid; place-items: center; position: relative; border: 1px solid #627747; border-radius: 12px; background: linear-gradient(145deg, #29381f, #1b2418); color: var(--green); font-size: 19px; font-weight: 800; letter-spacing: -2px; }
.brand-icon span { position: absolute; bottom: 2px; right: 5px; color: #f1f4ed; font-size: 9px; letter-spacing: -.5px; }
.brand-copy { display: grid; gap: 2px; }
.brand-copy strong { font-size: 12px; letter-spacing: .12em; }
.brand-copy strong span { color: var(--green); }
.brand-copy small { color: var(--dim); font-family: var(--mono); font-size: 8px; letter-spacing: .2em; }
.main-nav { align-self: stretch; display: flex; align-items: center; gap: 6px; }
.nav-button { height: 100%; position: relative; padding: 0 17px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 13px; font-weight: 650; transition: color .18s; }
.nav-button:hover, .nav-button.active { color: var(--text); }
.nav-button.active::after { position: absolute; right: 15px; bottom: -1px; left: 15px; height: 2px; background: var(--green); content: ""; }
.top-actions { min-width: 255px; display: flex; justify-content: flex-end; align-items: center; gap: 15px; }
.connection-pill { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }
.connection-pill i, .live-label i, .feed-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: #e0a756; box-shadow: 0 0 11px #e0a75666; }
.connection-pill.connected i, .live-label i, .feed-dot.connected { background: var(--green); box-shadow: 0 0 11px #b7f36b77; }
.connection-pill.error i, .feed-dot.error { background: var(--red); box-shadow: 0 0 11px #ff827c77; }
.profile-button { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--muted); cursor: pointer; font-size: 20px; transition: .18s; }
.profile-button:hover { border-color: #647b4b; color: var(--green); transform: rotate(-18deg); }
.demo-ribbon { height: 39px; display: flex; align-items: center; justify-content: center; gap: 9px; margin: 18px 0 20px; border: 1px solid #314124; border-radius: 10px; background: linear-gradient(90deg, #192217, #1d2718, #192217); color: #c9e5a2; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; }
.demo-icon { color: var(--green); font-size: 15px; }
.ribbon-divider { width: 1px; height: 13px; margin: 0 3px; background: #46543c; }
main { min-height: 550px; }
.view[hidden] { display: none !important; }
.terminal-grid { display: grid; grid-template-columns: 256px minmax(0, 1fr) 304px; gap: 16px; align-items: start; }
.panel { border: 1px solid var(--line); border-radius: 15px; background: linear-gradient(145deg, #191d18, #161a15); }
.watch-panel { min-height: 669px; padding: 21px 15px 0; overflow: hidden; }
.panel-heading, .order-heading, .portfolio-strip-title, .table-heading { display: flex; justify-content: space-between; align-items: center; }
.watch-heading { padding: 0 2px 17px; }
.eyebrow { color: var(--dim); font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: .13em; }
h1, h2, p { margin-top: 0; }
.watch-heading h2, .order-heading h2, .portfolio-strip-title h2, .table-heading h2 { margin: 5px 0 0; font-size: 16px; letter-spacing: -.035em; }
.live-label { display: inline-flex; align-items: center; gap: 6px; color: #c1d1aa; font-family: var(--mono); font-size: 9px; letter-spacing: .09em; }
.live-label i { width: 6px; height: 6px; }
.search-box { height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 9px; border: 1px solid var(--line); border-radius: 9px; background: #111510; color: var(--dim); }
.search-box > span { font-size: 21px; line-height: 1; }
.search-box input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 11px; }
.search-box input::placeholder { color: #697363; }
.search-box kbd { flex: none; padding: 2px 4px; border: 1px solid #343b31; border-radius: 4px; color: #6d7668; font-family: var(--mono); font-size: 8px; }
.market-labels { display: flex; justify-content: space-between; margin: 19px 5px 9px; color: #586153; font-family: var(--mono); font-size: 8px; letter-spacing: .09em; }
.asset-list { display: grid; gap: 3px; }
.asset-row { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 7px; border: 1px solid transparent; border-radius: 9px; background: transparent; cursor: pointer; text-align: left; transition: background .16s, border-color .16s; }
.asset-row:hover { background: #1c2219; }
.asset-row.selected { border-color: #35462a; background: linear-gradient(90deg, #222e1b, #1a2017); }
.asset-left { min-width: 0; display: flex; align-items: center; gap: 9px; }
.coin-icon { width: 29px; height: 29px; display: grid; flex: none; place-items: center; border: 1px solid #394432; border-radius: 9px; background: #252d20; color: #cad6be; font-family: var(--mono); font-size: 10px; font-weight: 500; }
.coin-large { width: 43px; height: 43px; border-radius: 13px; font-size: 16px; }
.coin-copy { min-width: 0; display: grid; gap: 3px; }
.coin-copy strong { overflow: hidden; color: #e4e9df; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.coin-copy small { color: #6f796a; font-family: var(--mono); font-size: 9px; }
.asset-right { min-width: 78px; display: grid; justify-items: end; gap: 4px; }
.asset-price { color: #e7ebe3; font-family: var(--mono); font-size: 10px; }
.asset-change { font-family: var(--mono); font-size: 9px; }
.positive { color: var(--green) !important; }
.negative { color: var(--red) !important; }
.market-foot { height: 43px; display: flex; align-items: center; gap: 7px; margin: 15px -15px 0; padding: 0 17px; border-top: 1px solid var(--line-soft); color: #687263; font-size: 9px; }
.exchange-mark { width: 15px; height: 15px; display: grid; place-items: center; border: 1px solid #c8ab52; border-radius: 4px; color: #e1c76e; font-family: var(--mono); font-size: 10px; font-weight: 700; }
.feed-dot { width: 6px; height: 6px; margin-left: auto; background: #5b6456; box-shadow: none; }
.market-main { min-width: 0; display: grid; gap: 14px; }
.asset-heading { min-height: 91px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 20px; }
.asset-title-wrap { min-width: 0; display: flex; align-items: center; gap: 13px; }
.asset-title-line { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.asset-title-line h1 { margin: 0; font-size: 20px; font-weight: 750; letter-spacing: -.05em; }
.asset-symbol { color: #a0a99a; font-family: var(--mono); font-size: 10px; }
.spot-chip, .market-order-chip, .count-chip { padding: 4px 6px; border: 1px solid #343d31; border-radius: 5px; color: #9db688; font-family: var(--mono); font-size: 8px; letter-spacing: .06em; }
.asset-subtitle { margin: 5px 0 0; color: #687263; font-size: 10px; }
.price-block { flex: none; display: grid; justify-items: end; gap: 5px; }
.current-price { font-size: 23px; letter-spacing: -.07em; }
.price-change { color: var(--muted); font-size: 10px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.chart-panel { min-width: 0; padding: 19px 18px 13px; overflow: hidden; }
.chart-topline { display: flex; align-items: end; gap: 22px; }
.chart-context { margin-top: 6px; color: #e7ebdf; font-size: 12px; font-weight: 700; }
.chart-period { color: #737e6d; font-size: 10px; font-weight: 500; }
.chart-stat { display: grid; gap: 5px; margin-left: auto; }
.chart-stat + .chart-stat { margin-left: 0; }
.chart-stat span { color: #65705f; font-family: var(--mono); font-size: 8px; letter-spacing: .08em; }
.chart-stat strong { color: #c7cfc0; font-size: 10px; font-weight: 500; }
.chart-wrap { height: 254px; position: relative; margin: 16px -5px 0; }
.price-chart { width: 100%; height: 100%; overflow: visible; }
.chart-grid path { fill: none; stroke: #293027; stroke-dasharray: 3 6; stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-fill { fill: url(#chartFill); }
.chart-line { fill: none; stroke: var(--green); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart-dot { fill: var(--green); stroke: #10130f; stroke-width: 3; vector-effect: non-scaling-stroke; }
.chart-empty { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 7px; color: #7b8574; pointer-events: none; }
.chart-empty[hidden] { display: none; }
.chart-empty strong { color: #abb4a4; font-size: 11px; }
.chart-empty span:last-child { font-size: 9px; }
.chart-empty-icon { width: 30px; height: 30px; display: grid; place-items: center; margin-bottom: 2px; border: 1px solid #35442c; border-radius: 10px; color: var(--green); font-size: 18px; }
.chart-tooltip { position: absolute; top: 8px; right: 4px; color: #697362; font-size: 9px; }
.chart-footer { display: flex; justify-content: space-between; gap: 8px; color: #66705f; font-family: var(--mono); font-size: 8px; }
.chart-footer > span:first-child { display: flex; align-items: center; gap: 6px; }
.legend-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.source-note { color: #899579; letter-spacing: .08em; }
.portfolio-strip { padding: 2px 1px; }
.portfolio-strip-title { padding: 0 3px 11px; }
.portfolio-strip-title h2 { font-size: 15px; }
.text-button, .secondary-action { border: 0; background: none; color: #99ae81; cursor: pointer; font-size: 10px; }
.text-button span, .secondary-action span { padding-left: 4px; color: var(--green); }
.positions-table-wrap { width: 100%; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; white-space: nowrap; }
.data-table th { padding: 11px 10px; border-bottom: 1px solid var(--line); color: #687263; font-family: var(--mono); font-size: 8px; font-weight: 400; letter-spacing: .08em; text-align: left; }
.data-table td { padding: 12px 10px; border-bottom: 1px solid #222820; color: #c5cdc0; font-family: var(--mono); font-size: 10px; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.empty-row { color: #697362 !important; font-family: var(--sans) !important; font-size: 10px !important; text-align: center; }
.table-asset { display: flex; align-items: center; gap: 8px; color: #e0e6da; font-family: var(--sans); font-weight: 650; }
.table-asset .coin-icon { width: 25px; height: 25px; border-radius: 7px; font-size: 9px; }
.order-panel { position: sticky; top: 16px; padding: 20px 17px 0; overflow: hidden; }
.order-heading { margin-bottom: 17px; }
.order-heading h2 { font-size: 16px; }
.market-order-chip { color: #7c8b72; }
.balance-card { display: grid; grid-template-columns: 1fr auto; gap: 14px; padding: 14px; border: 1px solid #3b4b2f; border-radius: 11px; background: linear-gradient(135deg, #222e1c 0%, #1a2117 75%); }
.balance-card > div:first-child { display: grid; gap: 6px; }
.balance-card span { color: #849078; font-family: var(--mono); font-size: 8px; letter-spacing: .08em; }
.balance-card > div:first-child strong { color: #eaf4df; font-size: 17px; font-weight: 500; letter-spacing: -.04em; }
.balance-symbol { color: #a5c879; font-size: 21px; }
.balance-bottom { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px solid #36432e; }
.balance-bottom span { font-family: var(--sans); font-size: 9px; letter-spacing: 0; }
.balance-bottom strong { color: #c6d3ba; font-size: 10px; font-weight: 500; }
.side-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 18px 0 19px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: #111510; }
.side-button { height: 34px; border: 0; border-radius: 7px; background: transparent; color: #77816f; cursor: pointer; font-size: 11px; font-weight: 700; transition: .15s; }
.side-button.buy.active { background: #283820; color: var(--green); }
.side-button.sell.active { background: #3b2623; color: #ffaaa3; }
.order-form { display: grid; gap: 10px; }
.form-label-row { display: flex; justify-content: space-between; color: #b2bcaa; font-size: 10px; }
.form-label-row span { color: #6d7867; font-family: var(--mono); font-size: 9px; }
.amount-input { height: 43px; display: flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid #363f32; border-radius: 9px; background: #111510; color: #829078; }
.amount-input:focus-within { border-color: #647e48; box-shadow: 0 0 0 2px #b7f36b14; }
.amount-input > span { font-family: var(--mono); font-size: 13px; }
.amount-input input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #edf1e9; font-family: var(--mono); font-size: 14px; }
.amount-input input::-webkit-inner-spin-button, .amount-input input::-webkit-outer-spin-button { margin: 0; appearance: none; }
.amount-input input { appearance: textfield; }
.amount-input button { padding: 5px 6px; border: 1px solid #37402f; border-radius: 5px; background: #20291b; color: #adc98a; cursor: pointer; font-family: var(--mono); font-size: 8px; }
.quick-amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.quick-amounts button { padding: 6px 0; border: 1px solid #2b3228; border-radius: 6px; background: #1a1e18; color: #8c9783; cursor: pointer; font-family: var(--mono); font-size: 8px; }
.quick-amounts button:hover { border-color: #526640; color: var(--green); }
.order-preview { display: grid; gap: 9px; margin: 5px 0 2px; padding: 13px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.order-preview div { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.order-preview span { color: #77816f; font-size: 9px; }
.order-preview strong { color: #c9d1c2; font-size: 9px; font-weight: 500; }
.submit-order { width: 100%; height: 42px; display: flex; align-items: center; justify-content: space-between; padding: 0 13px; border: 1px solid #b7f36b; border-radius: 9px; background: var(--green); color: #17200f; cursor: pointer; font-size: 11px; font-weight: 800; transition: .15s; }
.submit-order:hover:not(:disabled) { background: #cbff8c; box-shadow: 0 6px 24px #b7f36b22; transform: translateY(-1px); }
.submit-order.sell-mode { border-color: #ff827c; background: #ff827c; color: #291514; }
.submit-order.sell-mode:hover:not(:disabled) { background: #ffaaa3; }
.submit-order:disabled { border-color: #343a30; background: #242920; color: #747d6d; cursor: not-allowed; }
.submit-order > span:last-child { font-size: 16px; }
.order-disclaimer { margin: 0; color: #626c5d; font-size: 8px; line-height: 1.55; text-align: center; }
.order-feedback { min-height: 13px; color: #b6e57c; font-size: 9px; text-align: center; }
.order-feedback.error { color: var(--red); }
.order-panel-foot { height: 43px; display: flex; align-items: center; gap: 8px; margin: 12px -17px 0; padding: 0 17px; border-top: 1px solid var(--line-soft); color: #6c7666; font-size: 8px; }
.order-panel-foot span { color: #9db781; font-size: 13px; }
.secondary-view { max-width: 1120px; min-height: 650px; margin: 0 auto; padding: 20px 0 55px; }
.secondary-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 22px; }
.secondary-heading h1 { margin: 7px 0 8px; font-size: clamp(27px, 4vw, 38px); letter-spacing: -.06em; }
.secondary-heading p { margin: 0; color: #7d8876; font-size: 12px; }
.secondary-action { padding: 10px 12px; border: 1px solid #3a4632; border-radius: 8px; background: #20271c; font-size: 10px; }
.summary-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.summary-card { display: grid; gap: 11px; padding: 18px; border: 1px solid var(--line); border-radius: 13px; background: linear-gradient(145deg, #191d18, #161a15); }
.summary-card span { color: #788370; font-family: var(--mono); font-size: 8px; letter-spacing: .1em; }
.summary-card strong { font-size: 22px; font-weight: 500; letter-spacing: -.05em; }
.summary-card small { color: #687263; font-size: 9px; }
.wide-table-panel { overflow: hidden; }
.table-heading { padding: 18px 19px 15px; }
.table-heading h2 { font-size: 15px; }
.count-chip { color: #adbf9b; }
.wide-table-panel .data-table { min-width: 710px; }
.wide-table-panel .data-table th:first-child, .wide-table-panel .data-table td:first-child { padding-left: 19px; }
.wide-table-panel .data-table th:last-child, .wide-table-panel .data-table td:last-child { padding-right: 19px; }
.wide-table-panel .data-table tbody tr:hover { background: #1c2219; }
.side-badge { display: inline-block; padding: 4px 6px; border-radius: 5px; font-family: var(--sans); font-size: 8px; }
.side-badge.buy { background: #27371e; color: var(--green); }
.side-badge.sell { background: #3a2422; color: #ffaaa3; }
.quiet-note { margin-top: 15px; color: #697362; font-size: 9px; }
.app-footer { display: flex; justify-content: space-between; gap: 16px; margin-top: 30px; padding: 18px 0 22px; border-top: 1px solid var(--line-soft); color: #56604f; font-family: var(--mono); font-size: 8px; letter-spacing: .06em; }
.app-footer a { color: #829173; text-decoration: none; }
.app-footer a:hover { color: var(--green); }
.toast { position: fixed; z-index: 20; right: 22px; bottom: 22px; max-width: min(360px, calc(100vw - 44px)); padding: 12px 15px; border: 1px solid #52673d; border-radius: 10px; background: #202a1b; color: #d9edc8; box-shadow: 0 12px 40px #0008; font-size: 11px; opacity: 0; pointer-events: none; transform: translateY(10px); transition: .2s; }
.toast.show { opacity: 1; transform: translateY(0); }

/* Bull Residence visual refinement */
:root {
  --bg: #090d0b;
  --surface: #111714;
  --surface-raised: #17201a;
  --surface-soft: #1b251d;
  --line: #26342a;
  --line-soft: #1b251e;
  --text: #edf3eb;
  --muted: #95a294;
  --dim: #6c7a6c;
  --green: #c7f77a;
  --green-deep: #26371c;
  --red: #ff7e78;
}
body { background: radial-gradient(ellipse at 50% -24%, #1b2b1b 0, transparent 45%), radial-gradient(ellipse at 100% 48%, #0b1a14 0, transparent 34%), var(--bg); }
.app-frame { width: min(100%, 1800px); padding-right: clamp(14px, 2.4vw, 38px); padding-left: clamp(14px, 2.4vw, 38px); }
.topbar { position: sticky; z-index: 15; top: 0; height: 72px; background: #090d0be8; backdrop-filter: blur(18px); }
.brand-icon { width: 40px; height: 40px; border-color: #648244; border-radius: 14px; background: linear-gradient(145deg, #304326, #182318); box-shadow: inset 0 1px #ffffff12, 0 5px 24px #b7f36b13; }
.brand-copy strong { letter-spacing: .14em; }
.nav-button { font-size: 12px; }
.nav-button.active::after { right: 13px; left: 13px; height: 3px; border-radius: 3px 3px 0 0; box-shadow: 0 0 12px #c7f77a55; }
.demo-ribbon { border-color: #2d4325; background: linear-gradient(90deg, #131d14, #1b2917 50%, #131d14); box-shadow: inset 0 1px #ffffff08; }
.terminal-grid { grid-template-columns: minmax(216px, 260px) minmax(0, 1fr) minmax(282px, 322px); gap: 18px; }
.panel { border-color: #27362b; border-radius: 17px; background: linear-gradient(150deg, #131a16, #0f1512 76%); box-shadow: 0 10px 34px #00000018, inset 0 1px #ffffff05; }
.watch-panel { min-height: 620px; }
.asset-row { padding-top: 11px; padding-bottom: 11px; }
.asset-row.selected { border-color: #465f34; background: linear-gradient(100deg, #22311d, #161e17); box-shadow: inset 2px 0 var(--green); }
.coin-icon { border-color: #334535; background: linear-gradient(145deg, #202e22, #151d17); }
.asset-heading { min-height: 96px; }
.asset-title-line h1 { font-size: 22px; }
.current-price { font-size: 25px; }
.chart-panel { padding: 18px 19px 14px; }
.chart-wrap { height: clamp(240px, 25vw, 330px); }
.chart-grid path { stroke: #253029; stroke-dasharray: 2 7; }
.chart-line { stroke-width: 2.2; filter: drop-shadow(0 0 5px #c7f77a44); }
.timeframe-bar { display: flex; gap: 4px; margin-top: 13px; }
.timeframe-button { min-width: 34px; padding: 6px 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #7e8c7e; cursor: pointer; font-family: var(--mono); font-size: 9px; transition: .16s; }
.timeframe-button:hover { color: var(--text); background: #1b251e; }
.timeframe-button.active { border-color: #34452d; background: #202c1c; color: var(--green); }
.order-panel { top: 88px; padding: 18px 17px 0; }
.balance-card { border-color: #405531; background: linear-gradient(135deg, #25331e, #151d16 82%); box-shadow: inset 0 1px #ffffff08; }
.product-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0 0 13px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: #0a0e0b; }
.product-button { min-height: 32px; border: 0; border-radius: 7px; background: transparent; color: #7c887b; cursor: pointer; font-size: 10px; font-weight: 700; }
.product-button.active { background: #202b1d; color: #e4f3d1; box-shadow: inset 0 0 0 1px #34462a; }
.product-button span { margin-left: 3px; color: var(--green); font-family: var(--mono); font-size: 7px; }
.side-button.long.active { background: #27371d; color: var(--green); }
.side-button.short.active { background: #3b2522; color: #ffaaa3; }
.side-button small { display: block; margin-top: 1px; color: #83907f; font-size: 8px; font-weight: 500; }
.futures-controls { display: grid; gap: 9px; padding: 10px; border: 1px solid #27342a; border-radius: 10px; background: #0d120f; }
.futures-controls[hidden], .futures-risk-summary[hidden], .futures-side-switch[hidden] { display: none !important; }
.futures-controls .form-label-row { font-size: 8px; }
.futures-controls .form-label-row span:last-child { font-family: var(--sans); font-size: 8px; letter-spacing: 0; }
.leverage-options { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.leverage-options button { padding: 7px 0; border: 1px solid #283329; border-radius: 6px; background: #151c17; color: #93a18f; cursor: pointer; font-family: var(--mono); font-size: 9px; }
.leverage-options button.active { border-color: #607946; background: #26351e; color: var(--green); }
.risk-label { margin-top: 2px; }
.risk-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.risk-inputs label { display: grid; gap: 5px; padding: 7px 8px; border: 1px solid #29342b; border-radius: 7px; background: #131a15; }
.risk-inputs label span { color: #778675; font-family: var(--mono); font-size: 7px; letter-spacing: .06em; }
.risk-inputs input { width: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: #e5eee1; font-family: var(--mono); font-size: 11px; }
.futures-risk-summary { display: grid; gap: 5px; padding: 9px 10px; border: 1px solid #29352a; border-radius: 8px; background: #101612; color: #899688; font-size: 8px; }
.futures-risk-summary span { display: flex; justify-content: space-between; gap: 8px; }
.futures-risk-summary strong { color: #dce8d5; font-family: var(--mono); font-weight: 500; text-align: right; }
.submit-order { min-height: 45px; border-radius: 10px; box-shadow: 0 5px 20px #b7f36b1b; }
.submit-order.sell-mode { border-color: #ff817a; background: #ff817a; box-shadow: 0 5px 20px #ff817a1b; }
.order-disclaimer { line-height: 1.65; }
.portfolio-strip { padding-top: 5px; }
.futures-strip { margin-top: 2px; }
.futures-strip .portfolio-strip-title h2 { display: flex; align-items: center; gap: 8px; }
.futures-position-list { display: grid; gap: 9px; padding: 0 14px 14px; }
.futures-strip .futures-position-list { padding: 0; }
.futures-position-card { padding: 14px; border: 1px solid #29372c; border-radius: 12px; background: linear-gradient(145deg, #121915, #0e1411); }
.futures-position-card.compact { padding: 11px 12px; }
.futures-card-main { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.future-asset { min-width: 0; display: flex; align-items: center; gap: 9px; }
.future-asset > span:last-child { display: grid; gap: 5px; }
.future-asset strong { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: #e7eee4; font-size: 10px; }
.future-asset em { padding: 3px 5px; border-radius: 4px; font-family: var(--mono); font-size: 7px; font-style: normal; }
.future-asset em.long { background: #25351d; color: var(--green); }
.future-asset em.short { background: #392522; color: #ffaaa3; }
.future-asset small, .future-pnl small { color: #798779; font-size: 8px; }
.future-pnl { display: grid; justify-items: end; gap: 4px; }
.future-pnl strong { color: #dfe9dc; font-family: var(--mono); font-size: 12px; }
.future-levels { display: flex; flex-wrap: wrap; gap: 7px 15px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #202a22; }
.future-levels span { display: grid; gap: 4px; color: #768275; font-size: 7px; }
.future-levels b { color: #cbd6c8; font-family: var(--mono); font-size: 8px; font-weight: 500; }
.future-actions { display: flex; gap: 7px; margin-top: 11px; }
.future-actions button { min-height: 31px; padding: 0 10px; border: 1px solid #344136; border-radius: 7px; background: #18211a; color: #aab9a7; cursor: pointer; font-size: 8px; }
.future-actions button:hover { border-color: #738b58; color: var(--text); }
.future-actions .close-all { border-color: #4a302b; background: #241715; color: #ffaaa3; }
.empty-position { padding: 16px 12px; border: 1px dashed #2b372d; border-radius: 10px; color: #788578; font-size: 9px; text-align: center; }
.portfolio-futures-panel { margin-top: 15px; }
.liquidation-note { margin: 0; padding: 0 15px 14px; color: #687567; font-size: 8px; }
.mobile-nav { display: none; }
.toast { z-index: 25; border-color: #52683d; background: #182218; }
.app-footer { color: #687468; }

@media (max-width: 1190px) {
  .terminal-grid { grid-template-columns: minmax(205px, 235px) minmax(0, 1fr); }
  .order-panel { position: static; }
}
@media (max-width: 760px) {
  .app-frame { padding-right: 11px; padding-left: 11px; }
  .topbar { position: relative; height: 59px; }
  .top-actions { gap: 7px; }
  .connection-pill { font-size: 8px; }
  .demo-ribbon { margin: 10px 0; }
  .watch-panel { border-radius: 13px; }
  .asset-row { min-width: 132px; }
  .asset-heading { border-radius: 13px; }
  .chart-panel { border-radius: 13px; }
  .chart-wrap { height: 205px; }
  .timeframe-bar { margin-top: 10px; }
  .timeframe-button { min-width: 31px; padding: 6px; font-size: 8px; }
  .order-panel { padding-top: 14px; }
  .futures-controls { padding: 9px; }
  .futures-risk-summary span { font-size: 7px; }
  .future-levels { gap: 8px 13px; }
  .futures-position-card.compact { padding: 10px; }
  .portfolio-futures-panel { border-radius: 13px; }
  .mobile-nav { position: fixed; z-index: 18; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(3, 1fr); padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid #29352b; background: #0b100df2; backdrop-filter: blur(18px); }
  .mobile-nav button { display: grid; justify-items: center; gap: 3px; border: 0; background: transparent; color: #7f8d7d; cursor: pointer; font-size: 8px; }
  .mobile-nav button span { font-size: 17px; line-height: 1; }
  .mobile-nav button.active { color: var(--green); }
  .app-footer { padding-bottom: calc(75px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* Midnight / aqua visual theme */
:root {
  --bg: #080a12;
  --surface: #10131e;
  --surface-raised: #171b2a;
  --surface-soft: #1c2132;
  --line: #292e43;
  --line-soft: #1c2030;
  --text: #f1f3fc;
  --muted: #9ba2b9;
  --dim: #707992;
  --green: #78efd2;
  --green-deep: #18332f;
  --red: #ff7891;
}
body { background: radial-gradient(ellipse at 48% -20%, #29254b 0, transparent 39%), radial-gradient(ellipse at 100% 38%, #102c35 0, transparent 32%), #080a12; }
.topbar { background: #080a12e8; border-bottom-color: #22263a; }
.brand-icon { border-color: #4f5a82; background: linear-gradient(145deg, #292c4c, #141827); box-shadow: inset 0 1px #ffffff14, 0 5px 24px #9b8cff20; }
.brand-copy strong span { color: var(--green); }
.brand-copy small { color: #8189a3; }
.nav-button.active::after { background: linear-gradient(90deg, #8c8bff, #78efd2); box-shadow: 0 0 14px #78efd255; }
.demo-ribbon { border-color: #343151; background: linear-gradient(90deg, #141524, #1d2033 50%, #141524); color: #c7c8ec; }
.demo-icon, .source-note { color: #a6a3ff; }
.ribbon-divider { background: #454463; }
.panel { border-color: #292e43; background: linear-gradient(150deg, #141827, #10131e 78%); box-shadow: 0 12px 34px #00000020, inset 0 1px #ffffff07; }
.eyebrow { color: #8189a5; }
.watch-heading h2, .order-heading h2, .portfolio-strip-title h2, .table-heading h2 { color: #f0f2fc; }
.asset-row:hover { background: #1a1e2d; }
.asset-row.selected { border-color: #3e4666; background: linear-gradient(100deg, #20283b, #171b2a); box-shadow: inset 2px 0 #78efd2; }
.coin-icon { border-color: #343b56; background: linear-gradient(145deg, #232940, #171c2b); color: #d0d4e9; }
.market-foot { border-top-color: #25293a; color: #77809a; }
.exchange-mark { border-color: #625ca0; color: #b0a8ff; }
.asset-heading, .chart-panel, .futures-position-card { border-color: #292f45; background: linear-gradient(145deg, #151a29, #10141f); }
.spot-chip, .count-chip { border-color: #354059; color: #9ca8c4; }
.asset-subtitle, .chart-stat span, .chart-tooltip { color: #7f89a4; }
.chart-context { color: #e8eafa; }
.chart-grid path { stroke: #2a3041; }
.chart-line { stroke: #78efd2; filter: drop-shadow(0 0 6px #78efd255); }
.chart-dot, .legend-dot { fill: #78efd2; background: #78efd2; }
.text-button, .secondary-action { color: #aaa9f4; }
.text-button span, .secondary-action span { color: #78efd2; }
.order-panel { border-color: #343853; background: linear-gradient(155deg, #171a2a, #10131e 68%); box-shadow: 0 18px 48px #00000030, inset 0 1px #ffffff0a; }
.market-order-chip { border-color: #343853; color: #a3a9c1; }
.balance-card { border-color: #3b4661; background: radial-gradient(ellipse at 100% 0, #36315a66, transparent 56%), linear-gradient(135deg, #21283a, #151a27 82%); }
.balance-card span, .balance-symbol { color: #9ea7c2; }
.balance-card > div:first-child strong { color: #eef1ff; }
.balance-bottom { border-top-color: #343950; }
.balance-bottom strong { color: #d7def1; }
.product-switch, .side-switch { border-color: #2d3246; background: #0c0e17; }
.product-button { color: #8f96ad; }
.product-button.active { background: linear-gradient(100deg, #22263a, #1c2b30); color: #eef2fb; box-shadow: inset 0 0 0 1px #414663; }
.product-button span { color: #78efd2; }
.side-button { color: #9199b0; }
.side-button.buy.active, .side-button.long.active { background: #18352f; color: #86f2d5; }
.side-button.sell.active, .side-button.short.active { background: #3a222e; color: #ff9aad; }
.side-button small { color: #98a2b5; }
.futures-controls { border-color: #2d3449; background: #0d111b; }
.leverage-options button { border-color: #2c3247; background: #171b29; color: #a2abc0; }
.leverage-options button.active { border-color: #53736e; background: #17342f; color: #85f0d4; }
.risk-inputs label, .amount-input { border-color: #30364b; background: #0d111a; }
.risk-inputs label span, .form-label-row span { color: #8b95ac; }
.risk-inputs input, .amount-input input { color: #edf0fd; }
.amount-input button { border-color: #3b4561; background: #1b2233; color: #aaa9f4; }
.quick-amounts button { border-color: #2c3245; background: #171b28; color: #9aa3b7; }
.quick-amounts button:hover { border-color: #536d67; color: #78efd2; }
.order-preview { border-color: #252a3b; }
.order-preview span { color: #8992a9; }
.order-preview strong { color: #e2e6f6; }
.submit-order { border-color: #91f5db; background: linear-gradient(110deg, #91f5db, #68d9d7); color: #0a1918; box-shadow: 0 6px 22px #78efd225; }
.submit-order:hover:not(:disabled) { background: linear-gradient(110deg, #b2ffe9, #83ece9); }
.submit-order.sell-mode { border-color: #ff8ca0; background: linear-gradient(110deg, #ff94a7, #f4718d); color: #240e16; }
.submit-order.sell-mode:hover:not(:disabled) { background: #ffb0bd; }
.submit-order:disabled { border-color: #34394d; background: #242838; color: #858da4; box-shadow: none; }
.order-disclaimer, .order-panel-foot { color: #7b849a; }
.order-panel-foot { border-top-color: #292d40; }
.order-panel-foot span { color: #9e9bff; }
.chart-empty-icon { border-color: #3a4560; color: #78efd2; }
.summary-card { border-color: #292e43; background: linear-gradient(145deg, #151a29, #10131e); }
.summary-card span, .summary-card small { color: #8690a7; }
.wide-table-panel .data-table tbody tr:hover { background: #191d2b; }
.data-table th { border-color: #2b3041; color: #818ba1; }
.data-table td { border-color: #222739; color: #cbd1e3; }
.table-asset { color: #e6e9f5; }
.future-asset strong { color: #e7eafd; }
.future-asset em.long { background: #18352f; color: #86f2d5; }
.future-asset em.short { background: #3a222e; color: #ff9aad; }
.future-levels { border-top-color: #282d3e; }
.future-levels span, .future-asset small, .future-pnl small { color: #8791a7; }
.future-levels b, .future-pnl strong { color: #e1e6f5; }
.future-actions button { border-color: #353b51; background: #1a1f2d; color: #bac3d7; }
.future-actions button:hover { border-color: #52706b; color: #fff; }
.future-actions .close-all { border-color: #53313c; background: #281820; color: #ff9cad; }
.empty-position { border-color: #34394a; color: #8992a7; }
.secondary-action { border-color: #363b55; background: #1b2030; }
.app-footer { border-color: #25293a; color: #737d93; }
.app-footer a { color: #aaa8ef; }
.mobile-nav { border-color: #272c40; background: #090b14f5; }
.mobile-nav button { color: #8d96ad; }
.mobile-nav button.active { color: #85f0d4; }
.toast { border-color: #466a64; background: #141f22; color: #d1fff1; }
::selection { background: #8e8af855; color: #fff; }
.spot-position-list { display: grid; gap: 10px; padding: 14px; }
.spot-position-card { padding: 15px; border: 1px solid #2b3044; border-radius: 12px; background: linear-gradient(145deg,#171b2a,#121622); }
.spot-position-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.spot-position-pnl { display: grid; justify-items: end; gap: 3px; font-family: var(--mono); }
.spot-position-pnl strong { font-size: 14px; }
.spot-position-pnl small { color: #8992a9; font-size: 10px; }
.spot-position-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-top: 15px; padding: 12px 0; border-top: 1px solid #292e41; border-bottom: 1px solid #292e41; }
.spot-position-metrics span { display: grid; gap: 5px; color: #8992a9; font-size: 9px; }
.spot-position-metrics b { color: #e5e8f4; font: 11px var(--mono); }
.spot-position-actions { display: flex; align-items: center; gap: 7px; margin-top: 12px; }
.spot-position-actions button { min-height: 30px; padding: 0 10px; border: 1px solid #34394e; border-radius: 7px; background: #1a1e2d; color: #b7bfd2; cursor: pointer; font-size: 9px; }
.spot-position-actions button:hover { border-color: #555b7c; color: #fff; }
.spot-position-actions button[data-sell-spot] { border-color: #3f4b57; color: #91e8d1; }
.spot-position-actions .sell-all { border-color: #593440; background: #281a22; color: #ff9aab; }
html[data-theme="light"] .spot-position-card { border-color: #e2e5ee; background: linear-gradient(145deg,#fff,#f8f9fc); }
html[data-theme="light"] .spot-position-metrics { border-color: #e5e8f0; }
html[data-theme="light"] .spot-position-metrics b { color: #252b3e; }
html[data-theme="light"] .spot-position-actions button { border-color: #e0e4ed; background: #f6f7fa; color: #59637a; }
html[data-theme="light"] .spot-position-actions .sell-all { border-color: #f0d4dc; background: #fff3f5; color: #b8455d; }
html[data-theme="light"] .ticker-tape { border-bottom-color: #e3e6ef; background: #f5f6fa; }
html[data-theme="light"] .ticker-tape::before { background: linear-gradient(90deg,#f5f6fa,transparent); }
html[data-theme="light"] .ticker-tape::after { background: linear-gradient(270deg,#f5f6fa,transparent); }
html[data-theme="light"] .ticker-item strong { color: #58627a; }
html[data-theme="light"] .ticker-price { color: #242a3d; }
html[data-theme="light"] .position-level-label { stroke: #fff; }
html[data-theme="light"] .position-level-label.spot-entry { fill: #594dc4; stroke: #fff; }
html[data-theme="light"] .position-level-label.long-entry, html[data-theme="light"] .position-level-label.take-level { fill: #138167; stroke: #fff; }
html[data-theme="light"] .position-level-label.short-entry, html[data-theme="light"] .position-level-label.stop-level { fill: #bd4b63; stroke: #fff; }

.brand-icon-image { width: 42px; height: 42px; flex: none; object-fit: cover; object-position: center; border-radius: 12px; mix-blend-mode: screen; }
.ticker-tape { height: 32px; position: relative; overflow: hidden; margin: 0 -32px 13px; border-bottom: 1px solid #202438; background: #0d1019; }
.ticker-tape::before, .ticker-tape::after { position: absolute; z-index: 1; top: 0; bottom: 0; width: 38px; content: ""; pointer-events: none; }
.ticker-tape::before { left: 0; background: linear-gradient(90deg,#0d1019,transparent); }
.ticker-tape::after { right: 0; background: linear-gradient(270deg,#0d1019,transparent); }
.ticker-track { width: max-content; height: 100%; display: flex; animation: ticker-marquee 30s linear infinite; will-change: transform; }
.ticker-group { height: 100%; display: flex; flex: none; align-items: center; gap: 28px; padding: 0 20px; }
.ticker-item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-size: 9px; }
.ticker-item strong { color: #b6bdd1; font: 700 9px var(--mono); }
.ticker-price { color: #e3e6f1; font-size: 9px; }
.ticker-change { font-size: 8px; }
.ticker-item i { width: 3px; height: 3px; margin-left: 7px; border-radius: 50%; background: #454b62; }
@keyframes ticker-marquee { to { transform: translateX(-50%); } }
.theme-toggle { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--muted); cursor: pointer; }
.theme-toggle:hover { border-color: var(--green); color: var(--green); }
.theme-icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sun-icon { display: none; }
.chart-tools { min-height: 34px; display: flex; align-items: center; gap: 7px; margin-top: 12px; }
.chart-display-switch { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.chart-mode-button, .chart-tool-button { height: 27px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; font: 10px var(--mono); }
.chart-mode-button { width: 29px; padding: 0; }
.chart-mode-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.chart-mode-button.active, .chart-tool-button.active { border-color: #414663; background: #20263a; color: var(--green); }
.chart-tool-button { border-color: var(--line); background: var(--surface); }
.measure-result { margin-left: auto; color: var(--green); font: 10px var(--mono); }
.chart-sma { fill: none; stroke: #f1bc6c; stroke-width: 1.5; stroke-dasharray: 5 3; vector-effect: non-scaling-stroke; }
.candle-wick { stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.candle-wick.up, .candle-body.up { stroke: #78efd2; fill: #78efd2; }
.candle-wick.down, .candle-body.down { stroke: #ff7891; fill: #ff7891; }
.chart-crosshair { stroke: #a9b0c7; stroke-width: 1; stroke-dasharray: 3 4; opacity: .65; vector-effect: non-scaling-stroke; pointer-events: none; }
.position-level { stroke-width: 1; stroke-dasharray: 6 5; opacity: .82; vector-effect: non-scaling-stroke; }
.position-level-label { font: 700 15px var(--mono); paint-order: stroke; stroke: #10131e; stroke-width: 5px; stroke-linejoin: round; pointer-events: none; }
.position-level.spot-entry { stroke: #9d8dff; }
.position-level-label.spot-entry { fill: #c0b8ff; stroke: #10131e; }
.position-level.long-entry, .position-level.take-level { stroke: #78efd2; }
.position-level-label.long-entry, .position-level-label.take-level { fill: #9cf5df; stroke: #10131e; }
.position-level.short-entry, .position-level.stop-level { stroke: #ff9caa; }
.position-level-label.short-entry, .position-level-label.stop-level { fill: #ffb0bc; stroke: #10131e; }
.chart-wrap.measuring { cursor: crosshair; }
html[data-theme="light"] { color-scheme: light; }
html[data-theme="light"] body { background: radial-gradient(ellipse at 48% -20%, #e2e6fa 0, transparent 40%), #f3f5fa; }
html[data-theme="light"] .topbar { background: #f3f5fae8; border-bottom-color: #e0e4ee; }
html[data-theme="light"] .brand-icon-image { mix-blend-mode: multiply; }
html[data-theme="light"] .moon-icon { display: none; }
html[data-theme="light"] .sun-icon { display: block; }
html[data-theme="light"] .demo-ribbon { border-color: #e0e2f1; background: linear-gradient(90deg,#f1f1fa,#fff,#f1f1fa); color: #575b82; }
html[data-theme="light"] .ribbon-divider { background: #d9dbea; }
html[data-theme="light"] .panel, html[data-theme="light"] .asset-heading, html[data-theme="light"] .chart-panel, html[data-theme="light"] .futures-position-card, html[data-theme="light"] .summary-card { border-color: #e2e5ee; background: linear-gradient(150deg,#fff,#f8f9fc 80%); box-shadow: 0 10px 30px #2933540a; }
html[data-theme="light"] .order-panel { border-color: #dfe3ef; background: linear-gradient(155deg,#fff,#f7f8fc 68%); }
html[data-theme="light"] .watch-heading h2, html[data-theme="light"] .order-heading h2, html[data-theme="light"] .portfolio-strip-title h2, html[data-theme="light"] .table-heading h2, html[data-theme="light"] .chart-context, html[data-theme="light"] .coin-copy strong, html[data-theme="light"] .asset-price, html[data-theme="light"] .asset-title-line h1, html[data-theme="light"] .balance-card > div:first-child strong, html[data-theme="light"] .balance-bottom strong, html[data-theme="light"] .order-preview strong, html[data-theme="light"] .future-levels b, html[data-theme="light"] .future-pnl strong, html[data-theme="light"] .future-asset strong { color: #1c2233; }
html[data-theme="light"] .coin-copy small, html[data-theme="light"] .asset-subtitle, html[data-theme="light"] .chart-stat span, html[data-theme="light"] .chart-tooltip { color: #788198; }
html[data-theme="light"] .search-box, html[data-theme="light"] .risk-inputs label, html[data-theme="light"] .amount-input, html[data-theme="light"] .futures-controls { border-color: #e0e4ef; background: #f7f8fc; }
html[data-theme="light"] .search-box input, html[data-theme="light"] .risk-inputs input, html[data-theme="light"] .amount-input input { color: #22283a; }
html[data-theme="light"] .asset-row:hover, html[data-theme="light"] .wide-table-panel .data-table tbody tr:hover { background: #f2f4fa; }
html[data-theme="light"] .asset-row.selected { border-color: #cbd2e5; background: #eef1fa; box-shadow: inset 2px 0 #665feb; }
html[data-theme="light"] .coin-icon { border-color: #e0e4ef; background: #f0f2f8; color: #48516a; }
html[data-theme="light"] .chart-grid path { stroke: #e4e7ef; }
html[data-theme="light"] .chart-line { stroke: #655de5; filter: drop-shadow(0 0 4px #655de533); }
html[data-theme="light"] .chart-dot, html[data-theme="light"] .legend-dot { fill: #655de5; background: #655de5; }
html[data-theme="light"] .chart-fill { fill: url(#chartFill); }
html[data-theme="light"] #chartFill stop:first-child { stop-color: #655de5; }
html[data-theme="light"] .chart-mode-button.active, html[data-theme="light"] .chart-tool-button.active { border-color: #d5d8ee; background: #eceeff; color: #5650cc; }
html[data-theme="light"] .chart-display-switch, html[data-theme="light"] .chart-tool-button { border-color: #e0e4ef; background: #fff; }
html[data-theme="light"] .product-switch, html[data-theme="light"] .side-switch { border-color: #e0e4ef; background: #f0f2f8; }
html[data-theme="light"] .product-button.active { background: #fff; color: #22283a; box-shadow: inset 0 0 0 1px #dce1ed; }
html[data-theme="light"] .side-button { color: #626c83; }
html[data-theme="light"] .side-button.buy.active, html[data-theme="light"] .side-button.long.active { background: #e1f6ee; color: #147755; }
html[data-theme="light"] .side-button.sell.active, html[data-theme="light"] .side-button.short.active { background: #ffeaee; color: #ba445b; }
html[data-theme="light"] .balance-card { border-color: #dce1ef; background: radial-gradient(ellipse at 100% 0,#e9e7ff,transparent 56%),linear-gradient(135deg,#f0f2fb,#fff 82%); }
html[data-theme="light"] .balance-card span, html[data-theme="light"] .balance-symbol { color: #707a93; }
html[data-theme="light"] .data-table th { border-color: #e5e7ef; color: #7c8498; }
html[data-theme="light"] .data-table td { border-color: #e9ebf2; color: #4c556a; }
html[data-theme="light"] .table-asset { color: #242a3d; }
html[data-theme="light"] .future-levels { border-top-color: #e5e8f0; }
html[data-theme="light"] .future-levels span, html[data-theme="light"] .future-asset small, html[data-theme="light"] .future-pnl small { color: #788198; }
html[data-theme="light"] .future-actions button { border-color: #e0e4ed; background: #f6f7fa; color: #59637a; }
html[data-theme="light"] .app-footer { border-color: #e1e4ed; color: #81899c; }
html[data-theme="light"] .mobile-nav { border-color: #e0e4ed; background: #f8f9fcf5; }
html[data-theme="light"] .toast { border-color: #b5e3d6; background: #effbf7; color: #215b4d; }

@media (max-width: 1190px) {
  .app-frame { padding: 0 20px; }
  .terminal-grid { grid-template-columns: 230px minmax(0, 1fr); }
  .order-panel { position: static; grid-column: 2; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; padding-bottom: 0; }
  .order-heading { grid-column: 1 / -1; }
  .balance-card { align-self: start; }
  .side-switch { margin-top: 0; }
  .order-form { grid-column: 2; grid-row: 2 / span 4; }
  .order-panel-foot { grid-column: 1 / -1; }
  .order-disclaimer { align-self: center; }
}
@media (max-width: 760px) {
  .app-frame { padding: 0 12px; }
  .topbar { height: 64px; gap: 6px; }
  .brand { min-width: 0; gap: 8px; }
  .brand-icon { width: 33px; height: 33px; border-radius: 10px; }
  .brand-copy strong { font-size: 10px; letter-spacing: .06em; }
  .brand-copy small { font-size: 7px; }
  .main-nav { display: none; }
  .top-actions { min-width: 0; gap: 9px; }
  .connection-pill { gap: 5px; font-size: 9px; }
  .profile-button { width: 31px; height: 31px; }
  .demo-ribbon { height: 34px; gap: 6px; margin: 12px 0; font-size: 8px; letter-spacing: .02em; }
  .terminal-grid { display: flex; flex-direction: column; gap: 11px; }
  .market-main { display: contents; }
  .market-main > * { width: 100%; }
  #terminalView .asset-heading { order: 1; }
  #terminalView .chart-panel { order: 2; }
  #terminalView .order-panel { order: 3; }
  #terminalView .portfolio-strip { order: 4; }
  #terminalView .futures-strip { order: 5; }
  .watch-panel { width: 100%; min-height: 0; padding: 12px 11px 0; border-radius: 12px; }
  .watch-heading { padding-bottom: 9px; }
  .watch-heading h2 { display: none; }
  .watch-heading .eyebrow { font-size: 8px; }
  .search-box { height: 33px; }
  .market-labels { display: none; }
  .asset-list { display: flex; gap: 6px; margin: 8px -11px 0; padding: 0 11px 10px; overflow-x: auto; scrollbar-width: none; }
  .asset-list::-webkit-scrollbar { display: none; }
  .asset-row { width: auto; min-width: 128px; flex: none; padding: 7px; border-color: #272f24; background: #151913; }
  .asset-row.selected { border-color: #596f40; background: #20291b; }
  .asset-right { min-width: 0; }
  .asset-price { font-size: 9px; }
  .market-foot { display: none; }
  .market-main { width: 100%; gap: 10px; }
  .asset-heading { min-height: 73px; padding: 12px; border-radius: 12px; }
  .coin-large { width: 36px; height: 36px; border-radius: 11px; }
  .asset-title-wrap { gap: 9px; }
  .asset-title-line { gap: 5px 7px; }
  .asset-title-line h1 { font-size: 15px; }
  .asset-symbol { font-size: 8px; }
  .spot-chip { font-size: 7px; padding: 3px 4px; }
  .asset-subtitle { font-size: 8px; }
  .current-price { font-size: 17px; }
  .price-change { font-size: 8px; }
  .chart-panel { padding: 14px 11px 10px; border-radius: 12px; }
  .chart-topline { gap: 12px; }
  .chart-stat { gap: 4px; }
  .chart-stat span { font-size: 7px; }
  .chart-stat strong { font-size: 8px; }
  .volume-stat { display: none; }
  .chart-wrap { height: 205px; margin-top: 11px; }
  .chart-footer { font-size: 7px; }
  .portfolio-strip { width: 100%; }
  .positions-table-wrap { margin: 0 -3px; }
  .portfolio-strip .data-table { min-width: 600px; }
  .portfolio-strip-title h2 { font-size: 13px; }
  .order-panel { width: 100%; display: block; padding: 16px 13px 0; border-radius: 12px; }
  .order-heading { margin-bottom: 13px; }
  .balance-card { margin-bottom: 13px; }
  .side-switch { margin: 0 0 12px; }
  .order-form { gap: 9px; }
  .order-panel-foot { margin-right: -13px; margin-left: -13px; padding: 0 13px; }
  .secondary-view { min-height: 55vh; padding-top: 10px; }
  .secondary-heading { align-items: start; gap: 10px; }
  .secondary-heading h1 { font-size: 26px; }
  .secondary-heading p { max-width: 240px; font-size: 10px; line-height: 1.5; }
  .secondary-action { flex: none; padding: 8px; font-size: 9px; }
  .summary-cards { grid-template-columns: 1fr; gap: 8px; }
  .summary-card { grid-template-columns: 1fr auto; align-items: center; gap: 6px 10px; padding: 13px; }
  .summary-card span { grid-column: 1; }
  .summary-card strong { grid-column: 2; grid-row: 1 / span 2; font-size: 18px; }
  .summary-card small { grid-column: 1; }
  .table-heading { padding: 14px 13px; }
  .app-footer { flex-wrap: wrap; gap: 8px 15px; margin-top: 18px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); font-size: 7px; }
  .app-footer span:nth-child(2) { order: 3; width: 100%; }
  .toast { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); }
  .ticker-tape { height: 29px; margin: 0 -12px 10px; }
  .spot-position-list { padding: 9px; }
  .spot-position-card { padding: 11px; }
  .spot-position-metrics { gap: 7px; }
  .spot-position-metrics span { font-size: 8px; }
  .spot-position-metrics b { font-size: 9px; }
  .spot-position-actions { flex-wrap: wrap; }
  .spot-position-actions span { flex: 1; }
}