:root {
  --bg: #0b0e11;
  --bg-2: #11151b;
  --panel: #161a20;
  --panel-2: #1e2329;
  --line: #2b3139;
  --text: #eaecef;
  --muted: #848e9c;
  --yellow: #f0b90b;
  --green: #0ecb81;
  --red: #f6465d;
  --amber: #f8d12f;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: "Segoe UI", Tahoma, Arial, sans-serif; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.terminal-page { --panel-radius: 0px; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { border: 0; cursor: pointer; }
input { outline: none; }
.muted { color: var(--muted); }
.green-text { color: var(--green); }
.red-text { color: var(--red); }
.yellow-text { color: var(--yellow); }

.exchange-app { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; }
.exchange-topbar {
  height: 100px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; border-bottom: 1px solid var(--line); background: #0f1318;
}
.top-logo { height: 24px; }
.exchange-tab { padding: 7px 10px; border-radius: 4px; font-size: 13px; }
.status-chip { padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; }
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 14px; }
.top-logo { height: 30px; }
.brand-lockup { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; flex: 0 0 100px; min-width: 100px; }
.custom-brand-logo { height: 65px; width: auto; max-width: 100%; object-fit: contain; border-radius: 4px; }
.exchange-tabs { display: flex; gap: 6px; }
.exchange-tab { padding: 9px 12px; border-radius: 8px; color: var(--muted); font-weight: 600; }
.exchange-tab.active, .exchange-tab:hover { background: rgba(240,185,11,.12); color: var(--yellow); }
.status-chip { padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.status-chip.warning { background: rgba(240,185,11,.14); color: var(--yellow); }
.status-chip.success { background: rgba(14,203,129,.14); color: var(--green); }
.status-chip.danger { background: rgba(246,70,93,.14); color: var(--red); }

.market-summary-shell {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 8px;
  padding: 2px 8px;
  border-bottom: 1px solid var(--line);
  background: #0d1217;
  overflow: hidden;
  align-items: center;
  min-height: 0;
}
.market-summary-left { display: grid; align-content: center; gap: 2px; }
.pair-line { display: flex; align-items: center; gap: 6px; }
.pair-line h1 { margin: 0; font-size: 15px; font-weight: 700; }
.pair-pill { font-size: 9px; color: #c8d1dc; background: #2a313d; padding: 1px 5px; border-radius: 3px; }
.price-line { display: flex; align-items: baseline; gap: 6px; }
.terminal-last-price { font-size: 22px; font-weight: 800; color: var(--red); line-height: 1; }
.terminal-price-change { font-size: 11px; font-weight: 700; color: var(--red); }
.market-summary-stats {
  display: grid;
  grid-template-columns: repeat(7, minmax(0,1fr));
  gap: 6px;
  align-items: center;
}
.stat-item { display: grid; gap: 1px; min-width: 0; }
.stat-item span { color: #8b96a7; font-size: 10px; }
.stat-item strong { font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ticker-strip.compact {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 8px;
  border-bottom: 1px solid var(--line);
  background: #12171d;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  overflow-x: auto;
  min-height: 0;
}

.exchange-main-grid {
  display: grid;
  grid-template-columns: minmax(0,1.7fr) minmax(280px,330px) minmax(320px,360px);
  grid-template-rows: 76px 28px minmax(520px, auto) minmax(420px, 52vh);
  gap: 1px;
  background: var(--line);
  min-height: 0;
  height: calc(100vh - 100px);
  overflow: visible;
}
.chart-column, .book-column, .trade-column { background: var(--bg); min-width: 0; min-height: 0; }
.chart-column {
  grid-column: 1;
  grid-row: 3;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.book-column { grid-column: 2; grid-row: 1 / 4; display: grid; grid-template-rows: 1fr 1fr; gap: 1px; background: var(--line); min-height: 0; }
.book-column .panel-flat { min-height: 0; display: flex; flex-direction: column; }
.book-column .dense-table { display: block; width: 100%; overflow: auto; flex: 1; }
.book-column .dense-table thead, .book-column .dense-table tbody { display: table; width: 100%; table-layout: fixed; }
.trade-column { grid-column: 3; grid-row: 1 / 5; overflow: visible; border-left: 1px solid var(--line); }
.market-bottom-panel {
  grid-column: 1 / 3;
  grid-row: 4;
  background: var(--panel);
  padding: 6px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: visible;
}
.panel-flat { background: var(--panel); padding: 6px; border-radius: var(--panel-radius); }
.panel-tight { padding: 6px; border-radius: var(--panel-radius); }
.panel-flat-header { margin-bottom: 6px; }
.panel-flat-header h2 { font-size: 12px; font-weight: 700; }
.panel-flat-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.panel-flat-header h2 { margin: 0; font-size: 13px; }
.chart-toolbar { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.chart-toolbar-better { align-items: center; flex-wrap: wrap; }
.toolbar-left-group, .toolbar-right-group { display: flex; gap: 8px; flex-wrap: wrap; }
.panel-tab-group, .timeframe-group {
  background: #12171d;
  border: 1px solid #2b3139;
  border-radius: 10px;
  padding: 4px;
}
.timeframe-group { gap: 4px; }
.toolbar-btn {
  color: var(--muted);
  font-size: 13px;
  padding: 7px 10px;
  border-radius: 8px;
  background: transparent;
  transition: background .15s ease, color .15s ease;
}
.toolbar-btn:hover { color: var(--text); background: #1b222b; }
.toolbar-btn.active { color: var(--text); background: #20262e; }
.chart-panel-body { display: none; }
.chart-panel-body.active { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.chart-hint-row { display: flex; gap: 16px; margin-top: 10px; font-size: 12px; flex-wrap: wrap; align-items: center; }
.chart-y-controls { display: inline-flex; gap: 6px; align-items: center; }
.chart-y-controls .toolbar-btn { padding: 5px 8px; font-size: 12px; }
.info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.compact-info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.info-item, .data-card {
  background: #12171d;
  border: 1px solid #2b3139;
  border-radius: 12px;
  padding: 12px;
}
.info-item span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.info-item strong { font-size: 15px; color: var(--text); }
.trading-data-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.terminal-chart-area {
  position: relative;
  height: 100%;
  min-height: 420px;
  flex: 1;
  border: 1px solid #1f252d;
  background: linear-gradient(180deg, #13181f 0%, #11161b 100%);
  overflow: hidden;
}
.chart-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
}
.terminal-chart-area {
  cursor: crosshair;
  touch-action: none;
}
.chart-watermark {
  position: absolute; left: 18px; bottom: 16px; color: rgba(132,142,156,.18);
  font-size: 32px; font-weight: 800; letter-spacing: 1px;
}
.chart-line {
  position: absolute; left: 4%; right: 4%; top: 50%; height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--yellow) 10%, #e8b70a 55%, var(--green) 100%);
  transform: skewY(-8deg); box-shadow: 0 0 22px rgba(240,185,11,.35);
}
.flat-tabs { margin-top: 0; }
.bottom-tab-row { display: flex; gap: 16px; margin-bottom: 10px; color: var(--muted); font-size: 13px; flex: 0 0 auto; padding-left: 18px; }
.bottom-tab { padding: 0 0 8px; background: transparent; color: var(--muted); cursor: pointer; }
.bottom-tab.active { color: var(--text); border-bottom: 2px solid var(--yellow); }
.bottom-tab-panel { display: none; min-height: 0; }
.bottom-tab-panel.active { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.panel-placeholder { color: var(--muted); padding: 18px 4px; }
.compact-wrap {
  overflow-x: auto;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  max-height: 100%;
}

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 6px 6px; border-bottom: 1px solid #1f252d; font-size: 11px; }
th { color: var(--muted); font-weight: 600; }
#tab-positions { overflow: visible; }
#tab-positions .terminal-table-wrap {
  padding-left: 18px;
  padding-right: 12px;
  overflow: visible;
  flex: 0 0 auto;
  min-height: auto;
  max-height: none;
}
#tab-positions table { width: 100%; table-layout: fixed; }
#tab-positions th, #tab-positions td { width: auto; overflow: visible; }
#tab-positions th:last-child, #tab-positions td:last-child { width: 220px; }
.dense-table th, .dense-table td { padding: 5px 3px; font-size: 11px; }

.trade-column { padding: 12px; display: grid; gap: 14px; align-content: start; min-width: 0; min-height: 0; overflow: visible; }
.trade-column > * { min-width: 0; }
.table-action-stack { display: grid; gap: 6px; align-content: start; }
.table-symbol-stack { display: grid; gap: 2px; }
.position-close-box { display: grid; gap: 6px; min-width: 0; width: 100%; max-width: 100%; position: relative; z-index: 2; overflow: visible; }
.position-close-inline-actions { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.position-close-link { background: transparent; color: var(--yellow); font-weight: 700; padding: 0; font-size: 12px; }
.position-close-link.active { text-decoration: underline; }
.position-close-sep { color: var(--muted); }
.position-close-inline-fields { display: grid; grid-template-columns: minmax(0,1fr) 52px; gap: 6px; width: 100%; }
.position-close-inline-fields input { width: 100%; min-width: 0; background: #11161d; color: var(--text); border: 1px solid #343b45; border-radius: 8px; padding: 6px 8px; }
.position-close-hint { position: absolute; z-index: 80; top: calc(100% + 6px); left: 0; width: max-content; min-width: 280px; max-width: 360px; background: #2b3139; border: 1px solid #3b424d; border-radius: 10px; padding: 10px 12px; color: var(--text); font-size: 12px; line-height: 1.35; box-shadow: 0 10px 24px rgba(0,0,0,.35); white-space: normal; overflow-wrap: anywhere; }
#tab-positions tr:hover { position: relative; z-index: 3; }
#tab-positions td { overflow: visible; }
.trade-mode-row, .trade-side-toggle, .trade-type-row { display: flex; gap: 8px; }
.table-symbol-stack { display: grid; gap: 2px; }
.mode-separation-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.mini-btn { padding: 5px 8px; background: #262c35; color: var(--text); border-radius: 4px; font-size: 11px; }
.mini-btn.active { border: 1px solid #4a5363; }
.close-btn { background: rgba(246,70,93,.14); color: var(--red); }
.trade-side-btn { flex: 1; padding: 12px 10px; border-radius: 8px; font-weight: 700; color: white; }
.trade-side-btn.buy { background: rgba(14,203,129,.20); color: var(--green); }
.trade-side-btn.sell { background: rgba(246,70,93,.16); color: var(--red); }
.trade-side-btn.active.buy { background: var(--green); color: white; }
.trade-type-row { padding-bottom: 10px; border-bottom: 1px solid #1f252d; color: var(--muted); font-size: 13px; }
.trade-type { cursor: pointer; user-select: none; }
.trade-type.active { color: var(--text); border-bottom: 2px solid var(--yellow); padding-bottom: 8px; }
.stop-limit-notice { font-size: 12px; line-height: 1.4; padding: 8px 10px; background: rgba(240,185,11,.08); border: 1px solid rgba(240,185,11,.2); border-radius: 8px; }
.trade-balance-line { color: var(--muted); font-size: 13px; }
.trade-balance-line strong { color: var(--text); }
.trade-form-clean { display: grid; gap: 9px; }
.field-block { display: grid; gap: 6px; }
.field-block span { font-size: 12px; color: var(--muted); }
.field-input-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: center; }
.field-input-wrap {
  display: grid; grid-template-columns: 1fr auto; align-items: center; background: var(--panel-2);
  border: 1px solid #2c333b; border-radius: 8px; overflow: hidden;
}
.field-side-btn {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 8px;
  background: #171d25;
  border: 1px solid #2b3139;
  color: #d5dbe3;
  font-weight: 700;
}
.field-side-btn:hover { background: #222a34; }
.field-input-wrap input { background: transparent; border: 0; color: var(--text); padding: 11px 12px; }
.field-input-wrap span { padding: 0 12px; color: var(--text); font-weight: 700; }
.size-input-shell { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: center; min-width: 0; }
.size-input-main { display: flex; align-items: center; gap: 8px; background: #11161d; border: 1px solid #343b45; border-radius: 10px; padding: 0 14px; min-height: 48px; min-width: 0; overflow: hidden; }
.size-input-main input { flex: 1; min-width: 0; width: 100%; background: transparent; border: 0; color: var(--text); padding: 11px 0; font-size: 26px; font-weight: 800; letter-spacing: .2px; }
.size-input-suffix { color: var(--muted); font-weight: 700; font-size: 18px; flex: 0 0 auto; }
.size-unit-btn { background: #11161d; color: var(--text); border: 1px solid #343b45; border-radius: 10px; padding: 12px 14px; font-weight: 700; min-height: 48px; white-space: nowrap; }
.size-ticket-box { display: grid; gap: 10px; padding: 8px 0 4px; }
.size-track-wrap { position: relative; display: grid; gap: 8px; }
.size-slider {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 2px;
  background: #3a4452;
  border-radius: 3px;
  outline: none;
}
.size-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  background: #d7dbe2;
  border: 1px solid #0b0e11;
  transform: rotate(45deg);
}
.size-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: #d7dbe2;
  border: 1px solid #0b0e11;
  transform: rotate(45deg);
}
.size-track-pips { display: grid; grid-template-columns: repeat(5,1fr); align-items: center; pointer-events: none; padding: 0 2px; }
.size-track-pips span { justify-self: center; width: 7px; height: 7px; background: #566070; transform: rotate(45deg); }
.percent-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.percent-btn { text-align: center; font-size: 12px; color: var(--muted); padding: 9px 0; background: #171d25; border: 1px solid #2b3139; border-radius: 8px; }
.percent-btn:hover { color: var(--text); background: #222a34; }
.size-side-estimates { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; padding-top: 2px; flex-wrap: wrap; }
.size-side-estimates strong { color: var(--text); }
.check-line { display: flex; gap: 8px; align-items: center; font-size: 13px; min-width: 0; }
.trade-extra-line { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.submit-order-btn { width: 100%; max-width: 100%; padding: 11px 10px; border-radius: 4px; font-size: 14px; font-weight: 800; color: white; }
.buy-submit { background: var(--green); }
.sell-submit { background: var(--red); }
.trade-feedback { font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.dual-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid #1f252d;
}
.side-summary {
  background: #12171d;
  border: 1px solid #2b3139;
  border-radius: 10px;
  padding: 10px;
  display: grid;
  gap: 6px;
}
.side-summary-title { font-weight: 800; font-size: 14px; }
.side-summary-row { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.side-summary-row span { color: var(--muted); }
.buy-side .side-summary-title { color: var(--green); }
.sell-side .side-summary-title { color: var(--red); }
.account-box-row { display: flex; justify-content: space-between; gap: 8px; min-width: 0; }
.account-box-row span, .account-box-header { color: var(--muted); font-size: 12px; }
.account-box-flat { display: grid; gap: 10px; padding-top: 8px; border-top: 1px solid #1f252d; }

body.terminal-page .cards-6,
body.terminal-page .main,
body.terminal-page .topbar,
body.terminal-page .sidebar,
body.terminal-page .app-shell,
body.terminal-page .nav-item,
body.terminal-page .card,
body.terminal-page .main-grid,
body.terminal-page .bottom-grid,
body.terminal-page .action-grid,
body.terminal-page .form-grid { display: none !important; }

.app-shell.terminal-shell {
  display: block;
}
.terminal-topbar {
  min-height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: #0f1318;
}
.brand-row { display: flex; align-items: center; gap: 18px; }
.top-tabs { display: flex; gap: 8px; }
.top-tab {
  color: var(--text);
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 10px;
}
.top-tab.active, .top-tab:hover { background: rgba(240,185,11,.12); color: var(--yellow); }
.top-status { display: flex; gap: 8px; flex-wrap: wrap; }
.main { padding: 20px; display: grid; gap: 16px; }
.full-width-main { max-width: 100%; }
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
}
.topbar {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
.topbar h1 { margin: 0 0 6px; font-size: 21px; }
.status-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.pill.yellow { background: rgba(240,185,11,.16); color: var(--yellow); }
.pill.green { background: rgba(14,203,129,.16); color: var(--green); }
.pill.amber { background: rgba(248,209,47,.12); color: var(--amber); }
.pill.red { background: rgba(246,70,93,.14); color: var(--red); }
.account-box .label { color: var(--muted); font-size: 12px; }
.account-box .value { font-weight: 700; }
.right { display: flex; align-items: center; gap: 16px; }
.cards-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.metric .label { color: var(--muted); display: block; margin-bottom: 8px; font-size: 13px; }
.metric strong { font-size: 22px; }
.metric-subvalue { margin-top: 6px; font-size: 11px; color: var(--muted); line-height: 1.2; }
.main-grid { display: grid; grid-template-columns: 1.45fr 0.95fr; gap: 16px; }
.strategy-main-grid { grid-template-columns: 1.2fr 1fr; }
.strategy-runtime-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.story-timeline-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.95fr);
  gap: 16px;
  align-items: stretch;
}
.story-timeline-left-stack {
  display: grid;
  gap: 16px;
}
.story-timeline-left-stack > .card {
  min-height: 0;
}
.story-timeline-side-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.story-timeline-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}
.performance-card {
  display: flex;
  flex-direction: column;
}
.performance-chart-wrap {
  margin-top: 10px;
  border: 1px solid #2a3340;
  border-radius: 10px;
  background: #0f141a;
  padding: 8px 8px 0 8px;
  position: relative;
  overflow: hidden;
  flex: 1;
  min-height: 500px;
}
.performance-chart {
  width: 100%;
  height: 100%;
  min-height: 500px;
  display: block;
}
.performance-tooltip {
  position: absolute;
  z-index: 20;
  min-width: 140px;
  max-width: 220px;
  background: rgba(11, 14, 17, 0.96);
  border: 1px solid #3a4452;
  border-radius: 10px;
  padding: 8px 10px;
  color: var(--text);
  font-size: 12px;
  line-height: 1.45;
  pointer-events: none;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  transform: translateY(-100%);
}
.control-chart-card { overflow: hidden; }
.control-chart-toolbar { margin-bottom: 12px; }
.control-chart-area { height: 360px; border-radius: 12px; }
.chart-order-controls { display: flex; gap: 10px; margin-top: 10px; font-size: 12px; flex-wrap: wrap; align-items: center; padding: 10px 12px; background: #12171d; border: 1px solid #2b3139; border-radius: 10px; }
.chart-order-count-label { color: var(--muted); }
.chart-order-count-select { background: #11161d; color: var(--text); border: 1px solid #343b45; border-radius: 8px; padding: 5px 8px; }
.strategy-mode-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.strategy-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 12px; }
.strategy-form-grid-single { grid-template-columns: 1fr; }
.strategy-form-grid input {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
}
.strategy-form-grid input[type="file"] {
  padding: 8px 10px;
  cursor: pointer;
}
.hidden-file-input { display: none; }
.custom-file-row { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }
.custom-file-display {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  min-height: 46px;
  display: flex;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.strategy-wide { grid-column: span 2; }
.strategy-action-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.strategy-preview-panel { display: grid; gap: 8px; }
.strategy-preview-meta { margin-bottom: 4px; }
#tradingResultSummary .info-item strong,
#tradingResultDetail .info-item strong { font-size: 14px; }
.strategy-table-wrap { max-height: 280px; }
.story-timeline-left-stack .strategy-table-wrap { max-height: 300px; }
.story-timeline-side-card { max-height: 616px; }
.control-positions-wrap { max-height: 320px; }
.threshold-help { display: grid; gap: 6px; margin-bottom: 12px; font-size: 12px; line-height: 1.45; }
.strategy-decision-banner {
  margin-bottom: 8px;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  font-weight: 700;
}
.strategy-decision-banner.ok { background: rgba(14,203,129,.10); border-color: rgba(14,203,129,.28); color: var(--green); }
.strategy-decision-banner.warn { background: rgba(240,185,11,.10); border-color: rgba(240,185,11,.28); color: var(--yellow); }
.strategy-decision-banner.danger { background: rgba(246,70,93,.10); border-color: rgba(246,70,93,.28); color: var(--red); }
.panel-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.panel-header h2 { margin: 0; font-size: 16px; }
.price-box { display: flex; gap: 8px; align-items: baseline; }
.price-box .big { font-size: 24px; font-weight: 800; }
.fake-chart {
  height: 280px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(240,185,11,.08), rgba(240,185,11,.02));
  border: 1px solid rgba(240,185,11,.15);
  position: relative;
  overflow: hidden;
}
.chart-meta { display: flex; gap: 8px; margin-top: 8px; color: var(--muted); font-size: 11px; }
.action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.primary-btn { background: var(--yellow); color: #111; border-radius: 12px; padding: 12px 14px; font-weight: 700; }
.secondary-btn { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-weight: 700; }
.danger-btn { background: var(--red); color: white; border-radius: 12px; padding: 12px 14px; font-weight: 700; }
.danger-btn.ghost { background: rgba(246,70,93,.14); color: var(--red); }
.divider { height: 1px; background: var(--line); margin: 16px 0; }
.bottom-grid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 10px; }
.risk-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.risk-card { display: grid; gap: 10px; }
.risk-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.risk-form-grid label { display: grid; gap: 5px; }
.risk-form-grid label span { color: var(--muted); font-size: 11px; }
.risk-form-grid input[type="text"], .risk-form-grid input[type="number"] {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px;
}
.risk-check, .check-line { display: flex !important; align-items: center; gap: 8px; }
.risk-action-row, .risk-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.risk-form-grid .risk-wide { grid-column: span 2; }
.logs { display: grid; gap: 8px; }
.log { padding: 8px 10px; border-radius: 9px; font-family: Consolas, monospace; font-size: 12px; border: 1px solid var(--line); }
.log.ok { color: var(--green); background: rgba(14,203,129,.08); }
.log.warn { color: var(--amber); background: rgba(248,209,47,.08); }
.log.danger { color: var(--red); background: rgba(246,70,93,.08); }

@media (max-width: 1400px) {
  .exchange-main-grid { grid-template-columns: minmax(0,1fr) 290px 330px; }
  .market-summary-stats { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 1100px) {
  .exchange-main-grid { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto auto; }
  .market-summary-shell { grid-column: 1; grid-row: 1; grid-template-columns: 1fr; }
  .ticker-strip.compact { grid-column: 1; grid-row: 2; }
  .chart-column { grid-column: 1; grid-row: 3; }
  .book-column { grid-column: 1; grid-row: 4; grid-template-rows: auto auto; }
  .trade-column { grid-column: 1; grid-row: 5; overflow: visible; }
  .market-bottom-panel { grid-column: 1; grid-row: 6; }
  .market-summary-stats { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .trading-data-grid, .info-grid, .strategy-runtime-grid, .strategy-main-grid, .strategy-form-grid, .story-timeline-layout { grid-template-columns: 1fr; }
  .story-timeline-side-card { max-height: none; }
  .story-timeline-scroll { max-height: 420px; }
  .strategy-wide { grid-column: span 1; }
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal-card {
  width: min(540px, 92vw);
  background: #161a20;
  border: 1px solid #2b3139;
  border-radius: 12px;
  padding: 14px;
  display: grid;
  gap: 12px;
}
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.modal-head h3 { margin: 0; font-size: 18px; }
.modal-body-grid { display: grid; gap: 10px; }
.modal-body-grid input,
.modal-select {
  background: #1e2329;
  color: var(--text);
  border: 1px solid #2b3139;
  border-radius: 8px;
  padding: 10px 12px;
}
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; }

.leverage-modal-card { width: min(460px, 92vw); }
.confirm-modal-card { width: min(440px, 92vw); }
.load-progress-modal-card { width: min(460px, 92vw); }
.preview-modal-card { width: min(980px, 96vw); max-height: 88vh; display: flex; flex-direction: column; }
.confirm-modal-body { display: grid; gap: 10px; }
.preview-modal-body {
  overflow: auto;
  padding-right: 2px;
}
.preview-modal-body .strategy-preview-panel {
  background: transparent;
  border: 0;
  padding: 0;
}
.load-progress-track {
  width: 100%;
  height: 12px;
  border-radius: 999px;
  background: #1e2329;
  border: 1px solid #364153;
  overflow: hidden;
}
.load-progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #f0b90b 0%, #ffd666 100%);
  transition: width .22s ease;
}
.load-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.confirm-modal-body p { margin: 0; line-height: 1.6; }
.leverage-stepper {
  display: grid;
  grid-template-columns: 46px 1fr 46px;
  align-items: center;
  background: #1e2329;
  border: 1px solid #364153;
  border-radius: 10px;
  min-height: 46px;
}
.lev-btn {
  background: transparent;
  color: #cfd6e4;
  font-size: 22px;
  font-weight: 700;
}
#levDisplay { text-align: center; font-size: 28px; letter-spacing: .5px; }
.lev-marks { display: grid; grid-template-columns: repeat(6,1fr); gap: 6px; font-size: 12px; color: #7f8a99; margin-top: 6px; }
.lev-marks span { text-align: center; }
.lev-notes { font-size: 13px; line-height: 1.5; display: grid; gap: 4px; }
.leverage-modal-card .modal-footer { justify-content: stretch; }
.leverage-modal-card .modal-footer .primary-btn { width: 100%; }

.terminal-chart-controls {
  margin-top: 10px;
}
.story-timeline {
  display: grid;
  gap: 10px;
}
.story-timeline-item {
  border: 1px solid #2b3139;
  background: #12171d;
  border-radius: 12px;
  padding: 12px;
}
.story-timeline-item.success { border-color: rgba(14,203,129,0.45); }
.story-timeline-item.warn { border-color: rgba(240,185,11,0.45); }
.story-timeline-item.neutral { border-color: rgba(132,142,156,0.35); }
.story-timeline-item.danger { border-color: rgba(246,70,93,0.45); }
.story-timeline-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.story-timeline-time {
  font-size: 12px;
  color: #848e9c;
}
.story-timeline-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.story-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  border: 1px solid transparent;
}
.story-badge.source-system { background: rgba(132,142,156,0.12); color: #c9d1db; border-color: rgba(132,142,156,0.28); }
.story-badge.source-binance { background: rgba(14,203,129,0.12); color: #7ee2b7; border-color: rgba(14,203,129,0.28); }
.story-badge.source-user { background: rgba(246,70,93,0.12); color: #ff9aa6; border-color: rgba(246,70,93,0.28); }
.story-badge.source-event { background: rgba(240,185,11,0.12); color: #f6d56f; border-color: rgba(240,185,11,0.28); }
.story-badge.tone-success { background: rgba(14,203,129,0.10); color: #9ae9c8; }
.story-badge.tone-warn { background: rgba(240,185,11,0.10); color: #f4d87a; }
.story-badge.tone-neutral { background: rgba(132,142,156,0.10); color: #d3dae2; }
.story-badge.tone-danger { background: rgba(246,70,93,0.10); color: #ffb0b9; }
.story-badge.tone-info { background: rgba(76,138,255,0.12); color: #9dbfff; }
.story-timeline-title {
  font-weight: 700;
  margin-bottom: 6px;
  line-height: 1.35;
}
.story-timeline-detail {
  color: #eaecef;
  line-height: 1.5;
  white-space: pre-wrap;
}
.terminal-story-timeline-scroll {
  flex: 1;
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}
.padded-story {
  padding: 12px 0;
}

@media (max-width: 768px) {
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
  }

  body {
    overflow-x: hidden;
    min-width: 0;
  }

  .app-shell,
  .app-shell.terminal-shell,
  .main,
  .full-width-main,
  .card,
  .topbar,
  .left,
  .right,
  .panel-header,
  .price-box,
  .chart-toolbar,
  .chart-toolbar-better,
  .toolbar-left-group,
  .toolbar-right-group,
  .panel-tab-group,
  .timeframe-group,
  .chart-panel-body,
  .chart-order-controls,
  .strategy-mode-toggle,
  .strategy-action-grid,
  .custom-file-row,
  .risk-actions,
  .status-row,
  .top-status,
  .brand-row,
  .topbar-left,
  .topbar-right,
  .market-summary-shell,
  .market-summary-left,
  .market-summary-stats,
  .ticker-strip.compact,
  .bottom-tab-row,
  .terminal-table-wrap,
  .control-chart-card,
  .quick-actions,
  .performance-card,
  .risk-card,
  .grid,
  section,
  header,
  main,
  aside,
  div {
    max-width: 100%;
    min-width: 0;
  }

  .main {
    padding: 12px;
    gap: 12px;
    width: 100%;
  }

  .main > *,
  .terminal-topbar > *,
  .exchange-topbar > * {
    max-width: 100%;
    min-width: 0;
  }

  .terminal-topbar,
  .exchange-topbar,
  .topbar,
  .market-summary-shell {
    padding-left: 12px;
    padding-right: 12px;
  }

  .terminal-topbar,
  .exchange-topbar,
  .topbar,
  .brand-row,
  .topbar-left,
  .topbar-right,
  .right,
  .top-status,
  .status-row,
  .exchange-tabs,
  .top-tabs,
  .ticker-strip.compact,
  .bottom-tab-row {
    flex-wrap: wrap;
  }

  .terminal-topbar,
  .exchange-topbar,
  .topbar {
    align-items: flex-start;
    gap: 10px;
  }

  .terminal-topbar,
  .exchange-topbar {
    display: grid;
    grid-template-columns: 1fr;
  }

  .brand-row,
  .topbar-left,
  .right {
    width: 100%;
    justify-content: space-between;
    gap: 10px;
  }

  .brand-row,
  .topbar-left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .topbar.card,
  .card,
  .control-chart-card,
  .quick-actions,
  .performance-card,
  .risk-card,
  .topbar,
  .main > section,
  .main > header,
  .main > div {
    width: 100%;
  }

  .left,
  .right,
  .panel-header,
  .price-box {
    flex: 1 1 100%;
  }

  .right {
    justify-content: flex-start;
  }

  .right > * {
    max-width: 100%;
  }

  .panel-header {
    flex-wrap: wrap;
  }

  .panel-header h2,
  .topbar h1,
  #marketTitle {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .brand-lockup {
    flex: 0 0 auto;
    min-width: 72px;
  }

  .custom-brand-logo {
    height: 42px;
  }

  .top-tabs,
  .exchange-tabs {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
  }

  .top-tab,
  .exchange-tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .top-status,
  .topbar-right {
    width: 100%;
    gap: 6px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .top-status .pill,
  .topbar-right .status-chip {
    flex: 0 0 auto;
    max-width: 100%;
    white-space: nowrap;
  }

  .market-summary-shell {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .market-summary-stats,
  .cards-6,
  .risk-form-grid,
  .trading-data-grid,
  .info-grid,
  .strategy-runtime-grid,
  .strategy-main-grid,
  .strategy-form-grid,
  .story-timeline-layout {
    grid-template-columns: 1fr;
  }

  .strategy-wide,
  .risk-form-grid .risk-wide {
    grid-column: span 1;
  }

  .terminal-last-price,
  .price-box .big {
    font-size: 24px;
  }

  .panel-header,
  .chart-order-controls,
  .risk-actions,
  .action-grid,
  .strategy-action-grid,
  .dual-summary-grid,
  .custom-file-row,
  .trade-extra-line,
  .percent-row {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

  .chart-toolbar,
  .chart-toolbar-better {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    justify-content: stretch;
    gap: 8px;
    overflow: hidden;
  }

  .toolbar-left-group,
  .toolbar-right-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .panel-tab-group,
  .timeframe-group {
    max-width: 100%;
    display: inline-flex;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .toolbar-left-group {
    flex: 1 1 100%;
  }

  .toolbar-right-group {
    flex: 1 1 100%;
    justify-content: flex-start;
  }

  .toolbar-left-group .toolbar-btn,
  .toolbar-right-group .toolbar-btn,
  .panel-tab-group .toolbar-btn,
  .timeframe-group .toolbar-btn {
    flex: 0 0 auto;
    width: auto;
    min-width: max-content;
    white-space: nowrap;
  }

  .toolbar-btn {
    white-space: nowrap;
  }

  .control-chart-area,
  .terminal-chart-area {
    min-height: 320px;
    height: 52vh;
    max-height: 460px;
  }

  .control-chart-toolbar {
    margin-bottom: 10px;
  }

  .chart-toolbar .panel-tab-group,
  .chart-toolbar .timeframe-group,
  .chart-toolbar-better .panel-tab-group,
  .chart-toolbar-better .timeframe-group {
    background: #12171d;
    border: 1px solid #2b3139;
    border-radius: 10px;
    padding: 4px;
  }

  .chart-watermark {
    font-size: 20px;
    left: 12px;
    bottom: 12px;
  }

  .position-close-hint {
    min-width: 0;
    max-width: min(88vw, 320px);
  }

  .bottom-tab-row {
    gap: 8px;
    padding-left: 0;
    overflow-x: auto;
  }

  .bottom-tab {
    white-space: nowrap;
  }

  .risk-form-grid label,
  .risk-form-grid input,
  .risk-form-grid .risk-wide,
  .risk-form-grid .risk-wide input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .card {
    padding: 12px;
    border-radius: 14px;
  }
}