: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; }

@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)); }
}