:root {
  color-scheme: dark;
  --bg: #08111f;
  --panel: #101c2f;
  --line: #24344d;
  --muted: #91a3bd;
  --text: #edf4ff;
  --accent: #39d98a;
  --danger: #ff6b81;
  --surface-raised: #132239;
  --yellow: #f1c40f;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: Inter, "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  background: radial-gradient(circle at top left, #152c49 0, var(--bg) 42%);
  color: var(--text);
  min-height: 100vh;
}

header, main {
  width: min(1180px, calc(100% - 32px));
  margin-inline: auto;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 48px 0 28px;
}

h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(2rem, 5vw, 3.7rem); letter-spacing: -.05em; }
h2 { margin-bottom: 0; }
.eyebrow { color: #64b5f6; text-transform: uppercase; letter-spacing: .13em; font-size: .72rem; font-weight: 800; margin-bottom: 8px; }
.badge { border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px; font-weight: 700; }
.badge.online { color: var(--accent); background: #123326; }
.badge.offline { color: #ffcf66; background: #332911; }
.summary-grid, .tick-grid, .feature-grid { display: grid; gap: 14px; }
.summary-grid { grid-template-columns: repeat(4, 1fr); margin-bottom: 22px; }
.card, .panel, .tick-card, .feature { background: color-mix(in srgb, var(--panel) 92%, transparent); border: 1px solid var(--line); border-radius: 16px; }
.card { padding: 20px; }
.card span, small { display: block; color: var(--muted); font-size: .82rem; }
.card strong { display: block; font-size: 1.2rem; margin-top: 10px; }
.panel { padding: 24px; margin-bottom: 22px; box-shadow: 0 18px 50px rgba(0, 0, 0, .16); }
.panel-heading { display: flex; justify-content: space-between; gap: 20px; align-items: end; }
form { display: flex; gap: 8px; }
input, button { border-radius: 9px; border: 1px solid var(--line); padding: 10px 12px; font: inherit; }
input { background: #091424; color: var(--text); text-transform: uppercase; }
button { background: #2878ff; color: white; cursor: pointer; font-weight: 700; }
button.remove { background: transparent; color: var(--danger); padding: 5px 8px; font-size: .72rem; }
#message { min-height: 1.3rem; margin: 14px 0; color: #ffcf66; }
.tick-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.tick-card { padding: 18px; }
.tick-card { cursor: pointer; transition: border-color .15s ease, transform .15s ease; }
.tick-card:hover { border-color: #4c7fc4; transform: translateY(-2px); }
.tick-card > div { display: flex; align-items: center; justify-content: space-between; }
.price { font-size: 1.65rem; margin: 22px 0 8px; font-variant-numeric: tabular-nums; }
.feature-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: 18px; }
.feature { padding: 14px; text-transform: capitalize; }
.feature strong { display: block; margin-top: 7px; color: #ffcf66; }
.feature.complete strong { color: var(--accent); }
button.secondary { background: transparent; color: var(--text); }
.detail-actions { display: flex; gap: 8px; }
button.secondary.active { color: #f1c40f; border-color: #f1c40f; background: rgba(241, 196, 15, .08); }
.market-tabs { display: flex; gap: 4px; overflow-x: auto; margin: -24px -24px 0; padding: 0 12px; background: #070e18; border-bottom: 1px solid var(--line); }
.market-tab { flex: 0 0 auto; border: 0; border-radius: 0; padding: 13px 12px; background: transparent; color: var(--muted); font-size: .78rem; }
.market-tab:hover { color: var(--text); }
.market-tab.active { color: var(--text); box-shadow: inset 0 -2px #f1c40f; }
.market-heading { display: grid; grid-template-columns: auto 1fr auto; align-items: center; margin: 0 -24px; padding: 18px 24px; background: #0c1829; border-bottom: 1px solid var(--line); }
.market-heading .eyebrow { margin-bottom: 4px; }
.market-title-row { display: flex; align-items: center; gap: 8px; }
.market-title-row h2 { font-size: 1.35rem; letter-spacing: -.02em; }
.market-type { padding: 3px 7px; border-radius: 5px; background: #25344b; color: #b6c2d3; font-size: .68rem; font-weight: 700; }
.market-price-block { margin-left: 32px; }
.market-price-block strong { display: block; font-size: 1.65rem; line-height: 1.05; font-variant-numeric: tabular-nums; }
.market-price-block span { display: block; margin-top: 6px; color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; }
.market-price-block .positive { color: var(--accent); }
.market-price-block .negative { color: var(--danger); }
.trading-workspace { display: grid; grid-template-columns: minmax(0, 2.25fr) minmax(390px, 1fr); gap: 8px; margin-top: 18px; }
.chart-pane, .book-pane { min-width: 0; background: #091424; border: 1px solid #2a3a52; border-radius: 10px; overflow: hidden; box-shadow: 0 14px 28px rgba(0, 0, 0, .18); }
.chart-toolbar { display: flex; align-items: center; gap: 6px; min-height: 48px; padding: 7px 14px; border-bottom: 1px solid var(--line); background: #0b1421; overflow-x: auto; }
.strategy-quantity { display: flex; align-items: center; gap: 6px; margin-left: auto; padding: 4px 7px; border: 1px solid #293a53; border-radius: 6px; color: #8190a5; font-size: .7rem; white-space: nowrap; }
.strategy-quantity:focus-within { border-color: #4c7fc4; }
.strategy-quantity input { width: 92px; border: 0; padding: 3px 2px; background: transparent; color: var(--text); font: inherit; font-variant-numeric: tabular-nums; outline: none; }
.strategy-quantity strong { color: #b8c5d6; font-size: .67rem; }
.strategy-quantity-status { min-width: 36px; color: var(--accent); font-size: .66rem; white-space: nowrap; }
.strategy-runtime-status { max-width:280px; overflow:hidden; color:var(--muted); font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.strategy-runtime-status.error { color:var(--danger); }
.chart-tool.strategy-live.active { color:var(--accent); border-color:rgba(14,203,129,.35); background:rgba(14,203,129,.07); }
.toolbar-label { flex: 0 0 auto; margin-right: 3px; color: #75849a; font-size: .76rem; }
.timeframe-options { display: flex; align-self: stretch; gap: 1px; }
.timeframe-button, .chart-tool { position: relative; border: 0; border-radius: 5px; padding: 6px 8px; background: transparent; color: #75849a; font-size: .76rem; font-weight: 650; white-space: nowrap; }
.timeframe-button:hover, .chart-tool:hover { color: var(--text); background: rgba(255, 255, 255, .045); }
.timeframe-button.active { color: var(--text); }
.timeframe-button.active::after { content: ""; position: absolute; left: 7px; right: 7px; bottom: -7px; height: 2px; border-radius: 2px; background: var(--yellow); }
.toolbar-divider { flex: 0 0 auto; width: 1px; height: 20px; margin: 0 5px; background: var(--line); }
.chart-tool { display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; }
.chart-tool.active { color: var(--yellow); border-color: rgba(241, 196, 15, .42); background: rgba(241, 196, 15, .07); }
.chart-tool:disabled { cursor: not-allowed; opacity: .45; }
.indicator-icon { color: inherit; font-size: 1rem; line-height: 1; }
.indicator-legend { display: flex; flex-wrap: wrap; gap: 20px; padding: 10px 16px; color: var(--muted); font-size: .76rem; border-bottom: 1px solid var(--line); background: #0c1829; }
.indicator-legend span { display: flex; align-items: center; gap: 5px; }
.indicator-legend i { width: 8px; height: 8px; border-radius: 50%; }
.sma-dot { background: #f1c40f; }
.ema-dot { background: #d66efd; }
.indicator-legend strong { color: var(--text); }
.indicator-legend strong.buy { color: var(--accent); }
.indicator-legend strong.exit { color: var(--danger); }
.candle-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 0; background: var(--line); border-bottom: 1px solid var(--line); }
.candle-grid > div { padding: 12px 14px; background: #0b1727; border-radius: 0; }
.candle-grid span { display: block; color: var(--muted); font-size: .75rem; margin-bottom: 7px; }
.price-chart { width: 100%; height: 500px; }
.chart-attribution { margin: 0; padding: 8px 14px; color: var(--muted); font-size: .72rem; border-top: 1px solid var(--line); }
.chart-attribution a { color: #64b5f6; }
.book-heading { display: flex; justify-content: space-between; align-items: end; padding: 15px 14px; border-bottom: 1px solid var(--line); background: #0c1829; }
.book-heading h3 { margin: 0; }
.book-heading > span { color: var(--muted); font-size: .78rem; }
.book-heading-actions, .ticket-title-actions { display: flex; align-items: center; gap: 7px; }
.book-heading-actions span, .ticket-title-actions span { color: var(--muted); font-size: .68rem; }
.book-heading-actions button, .ticket-title-actions button { padding: 5px 7px; background: transparent; color: var(--text); font-size: .68rem; }
.order-book { display: block; }
.book-tables { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }
table { width: 100%; border-collapse: collapse; background: #091424; border-radius: 10px; overflow: hidden; font-variant-numeric: tabular-nums; }
caption { text-align: left; font-weight: 800; padding: 11px 12px; background: var(--surface-raised); }
th, td { text-align: right; padding: 8px 11px; border-top: 1px solid rgba(36, 52, 77, .72); }
th { color: var(--muted); font-size: .72rem; text-transform: uppercase; }
td { font-size: .78rem; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: rgba(100, 181, 246, .06); }
tr.bid td:first-child { color: var(--accent); }
tr.ask td:first-child { color: var(--danger); }
.depth-actions { width: 58px; padding-inline: 3px; white-space: nowrap; opacity: 0; transition: opacity .12s ease; }
tr:hover .depth-actions, tr:focus-within .depth-actions { opacity: 1; }
.depth-action { border: 0; border-radius: 4px; padding: 3px 5px; background: transparent; font-size: .65rem; }
.depth-action.buy { color: var(--accent); }
.depth-action.sell { color: var(--danger); }
.depth-action:hover { background: rgba(255, 255, 255, .08); }
.mid-price { padding: 13px 14px; color: var(--accent); font-size: 1.35rem; font-weight: 800; border-block: 1px solid var(--line); background: #0d1b2d; font-variant-numeric: tabular-nums; }
.order-ticket, .order-manager { padding: 14px; border-top: 1px solid var(--line); background: #0d1522; }
.order-ticket[hidden] { display: none; }
.ticket-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; }
.ticket-heading > span { color: #ffcf66; font-size: .68rem; }
.ticket-heading > span.enabled { color: var(--accent); }
.ticket-heading button { padding: 4px 7px; background: transparent; color: var(--muted); font-size: .68rem; }
.side-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.side-switch button { padding: 8px; background: #172235; color: var(--muted); }
.side-switch .buy.active { border-color: var(--accent); color: var(--accent); background: rgba(57, 217, 138, .08); }
.side-switch .sell.active { border-color: var(--danger); color: var(--danger); background: rgba(255, 77, 109, .08); }
kbd { padding: 1px 4px; border: 1px solid #3b4a60; border-radius: 3px; background: #111b2b; color: var(--muted); font: inherit; font-size: .62rem; }
.order-form { display: grid; gap: 9px; }
.credential-panel { display: grid; gap: 9px; margin-bottom: 10px; padding: 12px; border: 1px solid #3b4a60; border-radius: 8px; background: #101a2a; }
.credential-panel[hidden] { display: none; }
.credential-panel small { color: var(--muted); }
.credential-panel label { display: grid; gap: 4px; color: var(--muted); font-size: .7rem; }
.credential-panel input { width: 100%; background: #091424; color: var(--text); text-transform: none; }
.credential-panel > div { display: flex; gap: 6px; }
.order-type-tabs { display: flex; gap: 12px; border-bottom: 1px solid var(--line); }
.order-type-tabs button { border: 0; border-radius: 0; padding: 7px 1px 9px; background: transparent; color: var(--muted); font-size: .76rem; }
.order-type-tabs button.active { color: var(--text); box-shadow: inset 0 -2px var(--yellow); }
.order-form label { position: relative; display: grid; gap: 5px; color: var(--muted); font-size: .7rem; }
.order-form label > span { position: absolute; right: 10px; bottom: 10px; color: var(--text); font-weight: 700; }
.order-form input, .order-form select { width: 100%; border: 1px solid #3a4960; border-radius: 7px; padding: 10px; background: #101925; color: var(--text); font: inherit; }
.order-form label > span + input { padding-right: 55px; }
.submit-order { margin-top: 3px; border: 0; color: #07111d; }
.submit-order.buy { background: var(--accent); }
.submit-order.sell { background: var(--danger); color: white; }
.submit-order:disabled { cursor: not-allowed; opacity: .55; }
.shortcut-hint { text-align: center; font-size: .65rem; }
.order-message { min-height: 1rem; margin: 0; color: #ffcf66; font-size: .7rem; overflow-wrap: anywhere; }
.management-list { display: grid; gap: 6px; margin-top: 7px; }
.pnl-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-bottom: 10px; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: var(--line); }
.pnl-summary > div { padding: 8px; background: #101a29; }
.pnl-summary span { display: block; color: var(--muted); font-size: .61rem; }
.pnl-summary strong { display: block; margin-top: 4px; font-size: .72rem; font-variant-numeric: tabular-nums; }
.pnl-positive { color: var(--accent); }
.pnl-negative { color: var(--danger); }
.manager-subheading { margin: 14px 0 4px; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.management-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; font-size: .7rem; }
.management-row span { color: var(--muted); }
.management-row button { padding: 5px 7px; background: transparent; color: var(--danger); font-size: .66rem; }
.order-status { padding: 3px 6px; border-radius: 999px; color: var(--muted); background: #182438; font-size: .62rem; }
.order-status.filled { color: var(--accent); background: rgba(57, 217, 138, .1); }
.order-status.rejected, .order-status.canceled, .order-status.expired { color: var(--danger); background: rgba(255, 77, 109, .1); }
.order-status.strategy { color: var(--accent); background: rgba(57, 217, 138, .1); }
.order-status.manual { color: var(--muted); background: #182438; }
.order-row-actions { display: flex; align-items: center; gap: 5px; }
.order-row-actions button { white-space: nowrap; }

body.trading-mode { overflow-x: hidden; }
body.trading-mode > header,
body.trading-mode main > .summary-grid,
body.trading-mode main > .panel:not(#market-detail) { display: none; }
body.trading-mode main { width: min(1500px, calc(100% - 16px)); margin: 8px auto; }
body.trading-mode #market-detail { min-height: calc(100vh - 16px); margin: 0; padding: 24px; background: #0a1423; }
body.trading-mode .price-chart { height: calc(100vh - 250px); min-height: 480px; }

@media (max-width: 760px) {
  .summary-grid { grid-template-columns: repeat(2, 1fr); }
  .panel-heading { align-items: stretch; flex-direction: column; }
  form input { min-width: 0; flex: 1; }
  .trading-workspace { grid-template-columns: 1fr; }
  .candle-grid { grid-template-columns: 1fr 1fr; }
  .price-chart { height: 420px; }
  .book-tables { grid-template-columns: 1fr 1fr; }
  body.trading-mode .price-chart { height: 460px; min-height: 0; }
  .market-heading { grid-template-columns: 1fr auto; }
  .market-price-block { grid-column: 1 / -1; margin: 14px 0 0; }
}

/* Header user area */
.header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
#user-area { display: flex; align-items: center; gap: 8px; }
#auth-user { color: var(--accent); max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sign in / sign up gate */
.auth-overlay {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center; padding: 24px;
  background: radial-gradient(circle at top left, #152c49 0, #050b14 55%);
  overflow-y: auto;
}
.auth-overlay[hidden] { display: none; }
.auth-card {
  width: min(420px, 100%);
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 18px; padding: 26px; box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
}
.auth-brand h2 { font-size: 1.6rem; letter-spacing: -.03em; }
.auth-tabs { display: flex; gap: 6px; margin: 18px 0 4px; }
.auth-tabs button { flex: 1; background: transparent; color: var(--muted); }
.auth-tabs button.active { color: var(--text); background: #1a2c47; }
.auth-form { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.auth-form label { display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: .86rem; font-weight: 600; }
.auth-form label small { font-weight: 400; }
.auth-form input { text-transform: none; }
.auth-form button { padding: 12px; }
.auth-message { min-height: 1.2rem; margin: 10px 0 0; color: #ffcf66; font-size: .86rem; }
.auth-message.error { color: var(--danger); }
.auth-footnote { display: block; margin-top: 16px; color: var(--muted); font-size: .76rem; line-height: 1.45; }
.credential-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.credential-actions button { flex: 1; }

/* Institutional terminal theme */
:root { --bg:#0b0e11; --panel:#181a20; --line:#23262f; --muted:#848e9c; --text:#eaecef; --accent:#0ecb81; --danger:#f6465d; --surface-raised:#1e2329; --yellow:#fcd535; --blue:#316ecd; }
html { background:var(--bg); }
body { font-family:Inter,"Segoe UI",system-ui,sans-serif; background:var(--bg); color:var(--text); font-size:13px; }
button,input,select,table,.price,.market-price-block,.candle-grid strong,.card strong,.badge,.management-list,.strategy-quantity,#last-update { font-family:"JetBrains Mono","Roboto Mono","Cascadia Code",Consolas,monospace; font-variant-numeric:tabular-nums slashed-zero; }
header,main { width:min(1440px,calc(100% - 32px)); }
header { min-height:64px; padding:12px 0; border-bottom:1px solid var(--line); }
.brand-lockup { display:flex; align-items:center; gap:12px; }
.brand-mark { display:grid; place-items:center; width:32px; height:32px; border:1px solid #4d461c; border-radius:4px; background:rgba(252,213,53,.08); color:var(--yellow); font:700 12px/1 "JetBrains Mono",Consolas,monospace; }
h1 { font-size:17px; letter-spacing:-.02em; line-height:1.2; }
h2 { font-size:16px; letter-spacing:-.01em; }
h3 { font-size:14px; }
.eyebrow { margin-bottom:3px; color:var(--muted); letter-spacing:.1em; font-size:9px; }
.badge { border-radius:4px; padding:6px 9px; font-size:11px; }
.badge.online { color:var(--accent); background:rgba(14,203,129,.08); border-color:rgba(14,203,129,.28); }
.badge.offline { color:var(--yellow); background:rgba(252,213,53,.06); border-color:rgba(252,213,53,.25); }
.summary-grid,.tick-grid,.feature-grid { gap:8px; }
.summary-grid { margin:16px 0 8px; }
.card,.panel,.tick-card,.feature { background:var(--panel); border-color:var(--line); border-radius:4px; }
.card { padding:12px 14px; border-top:2px solid #30333c; }
.card span,small { font-size:11px; }
.card strong { margin-top:6px; font-size:15px; }
.panel { margin-bottom:8px; padding:16px; box-shadow:none; }
.panel-heading { gap:16px; }
input,button,select { border-radius:4px; }
input { background:#0f1115; }
input:focus,select:focus { outline:1px solid var(--blue); border-color:var(--blue); }
button { background:var(--blue); }
button:hover { filter:brightness(1.12); }
button.secondary { background:var(--surface-raised); }
#message { margin:8px 0; color:var(--yellow); }
.tick-card { padding:12px; }
.tick-card:hover { border-color:#474d57; transform:none; background:#1e2026; }
.price { margin:14px 0 5px; font-size:20px; }
.feature { padding:10px 12px; }
.feature-grid { margin-top:12px; }
.market-tabs { margin:-16px -16px 0; background:#0f1115; }
.market-tab { padding:10px 12px; }
.market-heading { margin:0 -16px; padding:12px 16px; background:#121419; }
.market-type { border:1px solid var(--line); background:var(--surface-raised); }
.trading-workspace { margin-top:8px; }
.chart-pane,.book-pane { background:var(--bg); border-color:var(--line); border-radius:4px; box-shadow:none; }
.chart-toolbar,.book-heading,.indicator-legend { background:#121419; }
.chart-toolbar { min-height:40px; padding:4px 8px; }
.strategy-quantity { border-color:var(--line); border-radius:4px; }
.timeframe-button,.chart-tool { border-radius:3px; }
.candle-grid>div { padding:8px 10px; background:#111318; }
.candle-grid span { margin-bottom:3px; font-size:10px; text-transform:uppercase; }
.chart-attribution { padding:5px 10px; }
.chart-attribution a { color:var(--yellow); }
.closed-positions { padding:10px 12px 14px; border-top:1px solid var(--line); background:#0d1522; }
.closed-positions .management-list { margin-top:8px; }
.closed-positions .ticket-heading { margin-bottom:0; }
.book-heading { padding:10px 12px; }
.mid-price { padding:9px 10px; background:#111814; color:var(--accent); font-size:17px; }
.book-tables { background:var(--line); }
table { background:var(--bg); border-radius:0; }
caption { padding:8px 10px; background:#15171c; font-size:11px; text-transform:uppercase; }
th,td { padding:6px 8px; border-top-color:rgba(35,38,47,.7); }
th { font-size:9px; letter-spacing:.05em; }
td { font-size:11px; }
tbody tr:hover { background:var(--surface-raised); }
.order-ticket,.order-manager { padding:12px; background:#121419; }
.side-switch { gap:4px; }
.side-switch button { background:var(--surface-raised); }
.side-switch .buy.active { background:rgba(14,203,129,.1); }
.side-switch .sell.active { background:rgba(246,70,93,.1); }
.order-form input,.order-form select { border-radius:4px; background:#0f1115; border-color:var(--line); }
.credential-panel { border-radius:4px; background:#15171c; border-color:var(--line); }
.pnl-summary,.management-row { border-radius:4px; }
.pnl-summary>div,.management-row { background:#15171c; }
.order-status { border-radius:3px; }
.auth-overlay { background:#0b0e11; }
.auth-overlay::before { content:"SECURE ACCESS  /  DEMO ENVIRONMENT"; position:fixed; top:18px; left:24px; color:#5e6673; font:10px/1 "JetBrains Mono",Consolas,monospace; letter-spacing:.12em; }
.auth-card { width:min(400px,100%); padding:24px; background:var(--panel); border-radius:6px; box-shadow:none; }
.auth-card::before { content:"CT"; display:grid; place-items:center; width:36px; height:36px; margin-bottom:18px; border:1px solid #4d461c; border-radius:4px; color:var(--yellow); font:700 13px "JetBrains Mono",Consolas,monospace; }
.auth-brand h2 { font-size:20px; }
.auth-tabs { gap:0; margin-top:20px; border-bottom:1px solid var(--line); }
.auth-tabs button { border:0; border-radius:0; }
.auth-tabs button.active { color:var(--yellow); background:transparent; box-shadow:inset 0 -2px var(--yellow); }
.auth-form { gap:10px; }
.auth-form label { font-size:11px; }
.auth-form input { padding:11px; }
.auth-form button[type="submit"] { background:var(--blue); }
.auth-footnote { padding-top:12px; border-top:1px solid var(--line); }
body.trading-mode main { width:min(1600px,calc(100% - 16px)); }
body.trading-mode #market-detail { padding:16px; background:var(--bg); }
@media (max-width:760px) { header,main { width:min(100% - 16px,1440px); } header { align-items:flex-start; } .summary-grid { margin-top:8px; } .auth-overlay { padding:16px; } }

.settings-overlay { position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:16px; background:rgba(5,7,9,.82); backdrop-filter:blur(3px); }
.settings-card { width:min(460px,100%); padding:20px; border:1px solid var(--line); border-radius:6px; background:var(--panel); }
.settings-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.settings-heading button { padding:6px 8px; }
.settings-copy { margin:14px 0; color:var(--muted); font-size:11px; line-height:1.55; }
.settings-form { display:grid; gap:12px; }
.settings-form label { display:grid; gap:5px; color:var(--muted); font-size:11px; font-weight:600; }
.settings-form input { width:100%; color:var(--text); text-transform:none; }
.settings-form>button { margin-top:4px; padding:11px; }
#auth-user { color:var(--accent); }

.account-balance-strip { display:flex; align-items:center; gap:7px; padding:7px 9px; border:1px solid var(--line); border-radius:4px; background:#15171c; color:var(--muted); font:10px/1.2 "JetBrains Mono",Consolas,monospace; white-space:nowrap; }
.account-balance-strip strong { color:var(--text); font-size:11px; }
.account-balance-strip i { width:1px; height:14px; background:var(--line); }
.account-metric { display:grid; gap:3px; }
.account-metric span { color:var(--muted); font-size:8px; letter-spacing:.06em; text-transform:uppercase; }
.account-balance-strip #account-free-balance { color:var(--accent); }
.account-balance-strip #account-utilization.warning { color:var(--danger); }
body.trading-mode .market-heading { grid-template-columns:auto auto 1fr auto; column-gap:24px; }
body.trading-mode .market-price-block { margin-left:0; }
body.trading-mode .account-balance-strip { justify-self:start; align-self:stretch; margin-left:0; padding:6px 12px; background:#15171c; }
body.trading-mode .account-balance-strip strong { font-size:11px; }
body.trading-mode .detail-actions { justify-self:end; }
@media (max-width:760px) { .account-balance-strip { justify-content:center; flex-wrap:wrap; } body.trading-mode .market-heading { grid-template-columns:1fr auto; } body.trading-mode .account-balance-strip { grid-column:1 / -1; grid-row:3; width:100%; margin-top:8px; } }