/* ==========================================================================
   QUANT TERMINAL · 量化终端 — dark exchange-grade terminal
   Pure CSS, no external fonts / images / CDN.
   ========================================================================== */

:root {
  --bg: #0b0e11;
  --bg-soft: #0e1217;
  --panel: #12161c;
  --panel-2: #161b22;
  --panel-3: #1a212b;
  --border: #1e2630;
  --border-2: #2a3441;
  --text: #e6edf3;
  --text-2: #c3cbd5;
  --muted: #8b98a9;
  --dim: #5d6b7d;
  --up: #0ecb81;
  --down: #f6465d;
  --accent: #f0b90b;
  --accent-2: #4aa8ff;
  --purple: #b07cff;
  --mono: ui-monospace, SFMono-Regular, Menlo, "SF Mono", Consolas, "Liberation Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --topbar-h: 46px;
  --acc-h: 64px;
  --radius: 5px;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.35;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button {
  font-family: var(--sans);
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

button:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2a3441; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #3a4656; }

.up { color: var(--up) !important; }
.down { color: var(--down) !important; }
.flat { color: var(--muted) !important; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.dim { color: var(--dim); }

/* ==========================================================================
   layout shell
   ========================================================================== */

.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

/* ==========================================================================
   top bar
   ========================================================================== */

.topbar {
  flex: 0 0 var(--topbar-h);
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 10px;
  background: linear-gradient(180deg, #151a21 0%, #10141a 100%);
  border-bottom: 1px solid var(--border);
  z-index: 20;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  user-select: none;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  background: linear-gradient(135deg, var(--accent), #c98f00);
  color: #151000;
  font-weight: 800;
  font-size: 14px;
}

.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-en { font-size: 12px; font-weight: 700; letter-spacing: 0.7px; color: var(--text); }
.brand-cn { font-size: 9px; letter-spacing: 2px; color: var(--muted); }

.symbol-tabs {
  display: flex;
  align-items: stretch;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.symbol-tabs::-webkit-scrollbar { display: none; }

.sym-tab {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  flex: 0 0 auto;
  min-width: 88px;
  padding: 3px 9px;
  border-radius: 4px;
  border: 1px solid transparent;
  background: transparent;
  text-align: left;
  transition: background 120ms ease, border-color 120ms ease;
}
.sym-tab:hover { background: #1a212b; }
.sym-tab.active { background: #1c2430; border-color: var(--border-2); }
.sym-tab .st-top { display: flex; align-items: baseline; gap: 5px; }
.sym-tab .st-sym { font-size: 10px; font-weight: 700; letter-spacing: 0.4px; color: var(--text-2); }
.sym-tab.active .st-sym { color: var(--accent); }
.sym-tab .st-price { font-family: var(--mono); font-size: 11px; color: var(--text); }
.sym-tab .st-chg { font-family: var(--mono); font-size: 10px; }

.top-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.conn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #12161c;
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
}
.conn-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dim);
  box-shadow: 0 0 0 0 rgba(14, 203, 129, 0.4);
}
.conn.status-online { color: var(--up); border-color: rgba(14, 203, 129, 0.3); }
.conn.status-online .conn-dot { background: var(--up); animation: pulse 2s infinite; }
.conn.status-degraded { color: var(--accent); border-color: rgba(240, 185, 11, 0.3); }
.conn.status-degraded .conn-dot { background: var(--accent); }
.conn.status-offline { color: var(--down); border-color: rgba(246, 70, 93, 0.35); }
.conn.status-offline .conn-dot { background: var(--down); }
.conn.status-connecting .conn-dot { background: var(--muted); }

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(14, 203, 129, 0.45); }
  70% { box-shadow: 0 0 0 5px rgba(14, 203, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(14, 203, 129, 0); }
}

.clock {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-2);
  padding: 3px 2px;
  white-space: nowrap;
}
.clock-zone { font-size: 8px; color: var(--dim); letter-spacing: 1px; }

.mode-badge {
  padding: 3px 7px;
  border-radius: 4px;
  background: rgba(240, 185, 11, 0.12);
  border: 1px solid rgba(240, 185, 11, 0.4);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
}

.btn {
  padding: 5px 10px;
  font-size: 11px;
  border-radius: 4px;
  border: 1px solid var(--border-2);
  background: var(--panel-2);
  color: var(--text-2);
  white-space: nowrap;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.btn:hover { background: var(--panel-3); color: var(--text); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn-primary { background: rgba(240, 185, 11, 0.12); border-color: rgba(240, 185, 11, 0.45); color: var(--accent); }
.btn-primary:hover { background: rgba(240, 185, 11, 0.2); color: var(--accent); }
.btn-danger { border-color: rgba(246, 70, 93, 0.4); color: #ff7b8a; }
.btn-danger:hover { background: rgba(246, 70, 93, 0.12); }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--muted); }

/* ==========================================================================
   account strip
   ========================================================================== */

.account-strip {
  flex: 0 0 var(--acc-h);
  height: var(--acc-h);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(108px, 1fr);
  align-items: stretch;
  gap: 1px;
  background: var(--border);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  overflow-y: hidden;
}

.acc-item {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  padding: 6px 11px;
  background: var(--bg-soft);
}
.acc-item.acc-risk { min-width: 150px; }

.acc-label {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.acc-value {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acc-value.up { color: var(--up); }
.acc-value.down { color: var(--down); }
.acc-sub {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gauge {
  position: relative;
  height: 4px;
  border-radius: 2px;
  background: #232c38;
  overflow: hidden;
  margin-top: 3px;
}
.gauge-fill {
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: var(--up);
  transition: width 300ms ease, background 300ms ease;
}
.gauge.warn .gauge-fill { background: var(--accent); }
.gauge.danger .gauge-fill { background: var(--down); }

/* ==========================================================================
   main grid
   ========================================================================== */

.main-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr) 296px;
  gap: 5px;
  padding: 5px;
}

.panel {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.panel-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}
.panel-head-gap { border-top: 1px solid var(--border); }
.panel-title { font-size: 11px; font-weight: 700; letter-spacing: 0.6px; color: var(--text-2); }
.panel-head-note { font-family: var(--mono); font-size: 10px; color: var(--dim); }

/* ----------------------------- left panel ----------------------------- */

.left-panel { overflow-y: auto; }

.watchlist { flex: 0 0 auto; }

.wl-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 58px;
  grid-template-rows: auto auto;
  column-gap: 6px;
  row-gap: 2px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background 120ms ease;
}
.wl-row:hover { background: #171d26; }
.wl-row.active { background: #1a222d; border-left-color: var(--accent); }
.wl-sym { grid-column: 1; grid-row: 1; white-space: nowrap; overflow: hidden; }
.wl-base { font-weight: 700; font-size: 12px; color: var(--text); }
.wl-quote { font-size: 9px; color: var(--dim); }
.wl-price {
  grid-column: 2; grid-row: 1;
  font-family: var(--mono);
  font-size: 12px;
  text-align: right;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
}
.wl-chg {
  grid-column: 3; grid-row: 1;
  font-family: var(--mono);
  font-size: 11px;
  text-align: right;
}
.wl-meta {
  grid-column: 1 / 4; grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 15px;
}
.wl-vol { font-family: var(--mono); font-size: 9px; color: var(--dim); }

.regime {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.3px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.regime.trend-up { color: var(--up); background: rgba(14, 203, 129, 0.1); border-color: rgba(14, 203, 129, 0.25); }
.regime.trend-down { color: var(--down); background: rgba(246, 70, 93, 0.1); border-color: rgba(246, 70, 93, 0.25); }
.regime.range { color: var(--muted); background: rgba(139, 152, 169, 0.08); border-color: rgba(139, 152, 169, 0.2); }

.market-stats { padding: 4px 10px 10px; }
.ms-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
  border-bottom: 1px dashed rgba(30, 38, 48, 0.7);
}
.ms-row:last-child { border-bottom: 0; }
.ms-label { font-size: 10px; color: var(--muted); white-space: nowrap; }
.ms-value { font-family: var(--mono); font-size: 11px; color: var(--text-2); text-align: right; white-space: nowrap; }
.ms-value.up { color: var(--up); }
.ms-value.down { color: var(--down); }

/* ----------------------------- center chart ----------------------------- */

.center-panel { position: relative; }

.chart-toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}

.tf-tabs { display: flex; align-items: center; gap: 2px; }
.tf-tab {
  padding: 3px 9px;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  border: 1px solid transparent;
}
.tf-tab:hover { color: var(--text); background: #1a212b; }
.tf-tab.active {
  color: var(--accent);
  background: rgba(240, 185, 11, 0.1);
  border-color: rgba(240, 185, 11, 0.35);
}

.chart-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-2);
  overflow: hidden;
  white-space: nowrap;
}
.chart-meta .cm-sym { color: var(--text); font-weight: 600; }
.chart-meta .cm-tf { color: var(--accent); }
.chart-meta .cm-price { font-size: 13px; }
.chart-meta .cm-chg { font-size: 11px; }

.chart-legend {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding: 4px 10px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  background: #0f1318;
  min-height: 22px;
}
.legend-item { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.legend-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.legend-dot.ema-fast { background: var(--accent); }
.legend-dot.ema-slow { background: var(--accent-2); }
.legend-dot.ema-trend { background: var(--purple); }
.legend-dot.donchian { background: var(--muted); }
.legend-sep { color: var(--border-2); }

.chart-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: #0b0e11;
}
#chart-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
}
.chart-empty {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 16px;
  border-radius: 5px;
  border: 1px dashed var(--border-2);
  background: rgba(14, 18, 23, 0.9);
  color: var(--dim);
  font-size: 11px;
  pointer-events: none;
}
.chart-tooltip {
  position: absolute;
  z-index: 15;
  min-width: 172px;
  max-width: 250px;
  padding: 7px 9px;
  border-radius: 5px;
  border: 1px solid var(--border-2);
  background: rgba(16, 21, 28, 0.96);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-2);
}
.tt-head {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  padding-bottom: 4px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.tt-grid { display: grid; grid-template-columns: auto 1fr; gap: 1px 12px; }
.tt-extra { margin-top: 4px; padding-top: 4px; border-top: 1px dashed var(--border); }
.tt-k { color: var(--dim); }
.tt-v { color: var(--text-2); text-align: right; white-space: nowrap; }

.status-line {
  flex: 0 0 auto;
  padding: 4px 10px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--dim);
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 22px;
}
.status-line.has-error { color: var(--down); }
.status-line.has-warn { color: var(--accent); }

/* ----------------------------- right panel ----------------------------- */

.right-panel { overflow-y: auto; overflow-x: hidden; }

.ob-head, .tr-head {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  padding: 4px 10px;
  font-size: 9px;
  color: var(--dim);
  letter-spacing: 0.4px;
  border-bottom: 1px solid var(--border);
}
.ob-head span:nth-child(2), .ob-head span:nth-child(3),
.tr-head span:nth-child(2), .tr-head span:nth-child(3) { text-align: right; }

.orderbook { flex: 0 0 auto; overflow: hidden; }
.ob-asks { display: flex; flex-direction: column; justify-content: flex-end; }
.ob-bids { display: flex; flex-direction: column; }

.ob-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  align-items: center;
  padding: 0 10px;
  font-family: var(--mono);
  font-size: 9.5px;
  line-height: 13px;
  overflow: hidden;
}
.ob-row .ob-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 0;
  pointer-events: none;
}
.ob-row.ask .ob-bar { background: rgba(246, 70, 93, 0.11); }
.ob-row.bid .ob-bar { background: rgba(14, 203, 129, 0.11); }
.ob-row.ask .ob-price { color: var(--down); }
.ob-row.bid .ob-price { color: var(--up); }
.ob-row .ob-price, .ob-row .ob-qty, .ob-row .ob-total {
  position: relative;
  z-index: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ob-row .ob-qty, .ob-row .ob-total { text-align: right; color: var(--text-2); }
.ob-row .ob-total { color: var(--muted); }

.ob-last {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 10px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: #0f1318;
}
.ob-last-label { font-size: 10px; color: var(--muted); }
.ob-last-price { font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--text); }
.ob-last-pct { font-family: var(--mono); font-size: 10px; margin-left: auto; }

.recent-trades { flex: 1 1 auto; min-height: 120px; overflow: visible; }

.tr-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  padding: 1px 10px;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 15px;
}
.tr-row span:nth-child(2), .tr-row span:nth-child(3) { text-align: right; color: var(--muted); }
.tr-row .tr-price { color: var(--text-2); }
.tr-row.buy .tr-price { color: var(--up); }
.tr-row.sell .tr-price { color: var(--down); }

.flash-up { animation: flashUp 600ms ease-out; }
.flash-down { animation: flashDown 600ms ease-out; }
@keyframes flashUp { from { background: rgba(14, 203, 129, 0.22); } to { background: transparent; } }
@keyframes flashDown { from { background: rgba(246, 70, 93, 0.22); } to { background: transparent; } }

/* ==========================================================================
   bottom tabs
   ========================================================================== */

.bottom-panel {
  flex: 0 0 auto;
  height: 230px; /* keep first paint identical to applyLayout default */
  display: flex;
  flex-direction: column;
  margin: 0 5px 5px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.bottom-tabs {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  gap: 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
  overflow-x: auto;
  scrollbar-width: none;
}
.bottom-tabs::-webkit-scrollbar { display: none; }

.tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 13px;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); background: rgba(240, 185, 11, 0.04); }

.tab-badge {
  display: none;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: #253040;
  color: var(--text-2);
  font-family: var(--mono);
  font-size: 9px;
  line-height: 15px;
  text-align: center;
}
.tab-badge.has { display: inline-block; }
.tab-badge.alert { background: rgba(246, 70, 93, 0.22); color: #ff8b97; }

.bottom-body {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
}

.pane {
  display: none;
  height: 100%;
  overflow: auto;
  padding: 0;
}
.pane.active { display: block; }

.pane-inner { padding: 8px 10px; }

.pane-head {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-2);
}
.pane-head-title { font-weight: 700; letter-spacing: 0.5px; }
.pane-head-note { font-family: var(--mono); font-size: 10px; color: var(--dim); }
.pane-head-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* tables */

.tbl-wrap { width: 100%; }
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.tbl th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 5px 10px;
  font-weight: 500;
  font-size: 10px;
  color: var(--dim);
  text-align: right;
  white-space: nowrap;
  background: #10141a;
  border-bottom: 1px solid var(--border);
}
.tbl th:first-child, .tbl td:first-child { text-align: left; padding-left: 12px; }
.tbl th.l, .tbl td.l { text-align: left; }
.tbl td {
  padding: 4px 10px;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid rgba(30, 38, 48, 0.6);
  font-family: var(--mono);
  color: var(--text-2);
}
.tbl tbody tr:hover td { background: rgba(255, 255, 255, 0.02); }
.tbl td.c { text-align: center; }
.tbl .sym { color: var(--text); font-weight: 600; }
.tbl .sub { color: var(--dim); font-size: 10px; }

.empty {
  padding: 26px 12px;
  text-align: center;
  color: var(--dim);
  font-size: 11px;
}
.empty .empty-sub { margin-top: 3px; font-size: 10px; color: #465364; }

.pane-split { display: flex; flex-direction: column; }
.section-title {
  padding: 8px 12px 4px;
  font-size: 10px;
  letter-spacing: 0.6px;
  color: var(--dim);
  text-transform: uppercase;
}

/* ==========================================================================
   backtest
   ========================================================================== */

.bt-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.bt-label { font-size: 10px; color: var(--muted); }
.select, .input {
  padding: 4px 7px;
  border-radius: 4px;
  border: 1px solid var(--border-2);
  background: var(--panel-2);
  color: var(--text);
  font-family: var(--mono);
  font-size: 11px;
  outline: none;
}
.select:focus, .input:focus { border-color: rgba(240, 185, 11, 0.55); }

.bt-status { padding: 8px 12px; font-family: var(--mono); font-size: 10px; color: var(--muted); }
.bt-status.error { color: var(--down); }
.bt-status.running { color: var(--accent); }

.bt-content { padding: 0 10px 12px; }

.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 5px;
  margin: 8px 0;
}
.metric-card {
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--bg-soft);
}
.metric-label { font-size: 9px; color: var(--muted); letter-spacing: 0.3px; }
.metric-value { font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--text); margin-top: 2px; }
.metric-value.up { color: var(--up); }
.metric-value.down { color: var(--down); }
.metric-sub { font-family: var(--mono); font-size: 9px; color: var(--dim); margin-top: 1px; }

.section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 12px 0 5px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--border);
}
.section-heading h4 { margin: 0; font-size: 11px; color: var(--text-2); letter-spacing: 0.5px; }
.section-heading .note { font-family: var(--mono); font-size: 10px; color: var(--dim); }

.equity-wrap {
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-soft);
  padding: 6px 8px 4px;
}
.equity-caption {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--dim);
  margin-bottom: 3px;
}
.equity-svg { display: block; width: 100%; height: 190px; }
.equity-x {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--dim);
  padding-top: 2px;
}

.monthly-list { display: flex; flex-direction: column; gap: 3px; }
.mo-row {
  display: grid;
  grid-template-columns: 66px minmax(60px, 1fr) 68px;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
}
.mo-name { color: var(--muted); }
.mo-track { height: 12px; background: #1a212b; border-radius: 2px; overflow: hidden; display: flex; }
.mo-bar { height: 100%; border-radius: 2px; min-width: 1px; }
.mo-bar.up { background: rgba(14, 203, 129, 0.75); }
.mo-bar.down { background: rgba(246, 70, 93, 0.75); }
.mo-val { text-align: right; }

.iso-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.iso-box {
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-soft);
  padding: 6px 9px;
}
.iso-title { font-size: 10px; color: var(--muted); margin-bottom: 3px; letter-spacing: 0.4px; }
.iso-row { display: flex; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: 10px; padding: 1px 0; }
.iso-row .k { color: var(--dim); }
.iso-row .v { color: var(--text-2); }

.cost-note {
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(240, 185, 11, 0.25);
  border-left: 3px solid var(--accent);
  border-radius: 3px;
  background: rgba(240, 185, 11, 0.05);
  font-size: 10px;
  line-height: 1.6;
  color: var(--muted);
}
.cost-note b { color: var(--text-2); }

/* ==========================================================================
   risk & reality audit
   ========================================================================== */

.risk-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 10px;
  padding: 8px 10px;
}
.rk-card {
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-soft);
  overflow: hidden;
}
.rk-card-title {
  padding: 6px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--text-2);
  background: #10141a;
  border-bottom: 1px solid var(--border);
}
.rk-body { padding: 4px 10px 8px; }
.rk-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 0;
  border-bottom: 1px dashed rgba(30, 38, 48, 0.65);
  font-size: 10px;
}
.rk-row:last-child { border-bottom: 0; }
.rk-key { color: var(--muted); }
.rk-val { font-family: var(--mono); color: var(--text-2); text-align: right; }
.rk-val.up { color: var(--up); }
.rk-val.down { color: var(--down); }
.rk-val.warn { color: var(--accent); }

.audit-banner {
  margin: 8px 10px 0;
  padding: 8px 10px;
  border: 1px solid rgba(246, 70, 93, 0.3);
  border-left: 3px solid var(--down);
  border-radius: 3px;
  background: rgba(246, 70, 93, 0.06);
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--muted);
}
.audit-banner b { color: #ff8b97; }

.audit-section { padding: 6px 10px 10px; }
.audit-sub {
  margin: 8px 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.audit-sub-title {
  padding: 5px 9px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-2);
  background: #10141a;
  border-bottom: 1px solid var(--border);
}
.audit-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 5px;
  padding: 8px;
}
.audit-card {
  padding: 5px 7px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg-soft);
}
.audit-card .ak { font-size: 9px; color: var(--dim); word-break: break-word; }
.audit-card .av { font-family: var(--mono); font-size: 12px; color: var(--text-2); margin-top: 2px; word-break: break-word; }
.audit-table { width: 100%; border-collapse: collapse; font-size: 10px; }
.audit-table th { padding: 3px 8px; text-align: left; color: var(--dim); font-weight: 500; background: #10141a; border-bottom: 1px solid var(--border); }
.audit-table td { padding: 3px 8px; border-bottom: 1px solid rgba(30, 38, 48, 0.6); font-family: var(--mono); color: var(--text-2); word-break: break-word; }
.audit-table td.k { color: var(--muted); font-family: var(--sans); }
.audit-json { max-height: 180px; overflow: auto; font-family: var(--mono); font-size: 9px; color: var(--muted); padding: 6px 8px; background: #0b0e11; }

/* ==========================================================================
   config form
   ========================================================================== */

.cfg-content { padding: 8px 10px 14px; }
.cfg-group {
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.cfg-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  background: #10141a;
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--text-2);
}
.cfg-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 6px 12px;
  padding: 8px 10px 10px;
}
.cfg-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cfg-field-label { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cfg-field-label .cfg-path { color: #465364; font-family: var(--mono); font-size: 9px; margin-left: 4px; }
.cfg-field .input { width: 100%; }
.cfg-dirty-note { color: var(--accent); font-size: 10px; }
.cfg-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0 4px;
}
.cfg-msg { font-size: 10px; font-family: var(--mono); }
.cfg-msg.ok { color: var(--up); }
.cfg-msg.err { color: var(--down); }
.cfg-hint { font-size: 9.5px; color: var(--dim); line-height: 1.6; margin: 2px 0 10px; }

/* ==========================================================================
   docs
   ========================================================================== */

.docs-pane { overflow: auto; }
.docs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 8px;
  padding: 10px;
  align-items: start;
}
#audit-card #audit-body { max-height: 420px; overflow-y: auto; }
#users-card .users-table-wrap { max-height: 360px; overflow-y: auto; }
.doc-card {
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-soft);
  padding: 9px 12px 10px;
}
.doc-card h3 {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: 0.4px;
  color: var(--accent);
}
.doc-card ul { margin: 0; padding-left: 16px; }
.doc-card li { margin: 3px 0; font-size: 10.5px; line-height: 1.65; color: var(--muted); }
.doc-card li b { color: var(--text-2); font-weight: 600; }
.doc-warn { border-color: rgba(246, 70, 93, 0.35); background: rgba(246, 70, 93, 0.04); }
.doc-warn h3 { color: #ff8b97; }

/* ==========================================================================
   gate connection (badge / modal / live panel)
   ========================================================================== */

.gate-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-2);
  background: #12161c;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.gate-badge:hover { background: #1a212b; }
.gate-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); flex: 0 0 auto; }
.gate-badge.gate-unconfigured { color: var(--muted); }
.gate-badge.gate-readonly { color: var(--accent-2); border-color: rgba(74, 168, 255, 0.4); }
.gate-badge.gate-readonly .gate-dot { background: var(--accent-2); }
.gate-badge.gate-armed { color: #ff8b97; border-color: rgba(246, 70, 93, 0.5); background: rgba(246, 70, 93, 0.09); }
.gate-badge.gate-armed .gate-dot { background: var(--down); animation: pulseRed 1.6s infinite; }
.gate-badge.gate-error { color: var(--accent); border-color: rgba(240, 185, 11, 0.45); background: rgba(240, 185, 11, 0.07); }
.gate-badge.gate-error .gate-dot { background: var(--accent); }
@keyframes pulseRed {
  0% { box-shadow: 0 0 0 0 rgba(246, 70, 93, 0.5); }
  70% { box-shadow: 0 0 0 5px rgba(246, 70, 93, 0); }
  100% { box-shadow: 0 0 0 0 rgba(246, 70, 93, 0); }
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.66);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.modal-overlay.hidden { display: none; }
.modal {
  width: 580px;
  max-width: 94vw;
  max-height: 88vh;
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--border-2);
  border-radius: 6px;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.65);
}
.gate-confirm-modal { width: 500px; }
.modal-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
}
.modal-title { font-size: 12px; font-weight: 700; letter-spacing: 0.5px; color: var(--text-2); }
.modal-close {
  width: 24px;
  height: 24px;
  line-height: 22px;
  border-radius: 4px;
  color: var(--muted);
  font-size: 17px;
}
.modal-close:hover { background: var(--panel-3); color: var(--text); }
.modal-body { padding: 12px 14px 14px; }
.modal-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 12px; }

.gate-form { display: flex; flex-direction: column; gap: 9px; }
.gate-field { display: flex; flex-direction: column; gap: 3px; }
.gate-field-label { font-size: 10px; color: var(--muted); }
.gate-field .input, .gate-field .select { width: 100%; }
.gate-field-hint { font-size: 9.5px; line-height: 1.65; color: var(--dim); }
.gate-form-actions { display: flex; align-items: center; gap: 8px; margin-top: 2px; flex-wrap: wrap; }
.gate-net-hint { color: var(--accent); font-size: 9.5px; margin-top: 2px; }
.gate-modal-msg { min-height: 14px; font-family: var(--mono); font-size: 10px; margin-top: 2px; }
.gate-modal-msg.err { color: var(--down); }
.gate-modal-msg.ok { color: var(--up); }

.gate-connected { border: 1px solid rgba(14, 203, 129, 0.25); border-radius: 5px; padding: 9px 10px; background: rgba(14, 203, 129, 0.04); }
.gate-connected-title { font-size: 10px; font-weight: 700; color: var(--up); letter-spacing: 0.4px; margin-bottom: 6px; }
.gate-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 2px 0; font-size: 10px; }
.gate-kv .k { color: var(--muted); white-space: nowrap; }
.gate-kv .v { font-family: var(--mono); color: var(--text-2); text-align: right; word-break: break-all; }
.gate-kv .v.ok { color: var(--up); }
.gate-kv .v.bad { color: var(--down); }
.gate-account-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 9px 0 2px; }
.gate-mini-card { padding: 6px 8px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-soft); min-width: 0; }
.gate-mini-label { font-size: 9px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gate-mini-value { font-family: var(--mono); font-size: 12px; color: var(--text-2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.confirm-warn {
  padding: 9px 10px;
  border: 1px solid rgba(246, 70, 93, 0.35);
  border-left: 3px solid var(--down);
  border-radius: 4px;
  background: rgba(246, 70, 93, 0.07);
  font-size: 10.5px;
  line-height: 1.7;
  color: var(--muted);
}
.confirm-warn b { color: #ff8b97; }
.confirm-phrase-box { margin-top: 10px; }
.confirm-phrase-label { font-size: 10px; color: var(--muted); margin-bottom: 4px; }
.confirm-phrase {
  display: block;
  padding: 6px 9px;
  border: 1px dashed rgba(246, 70, 93, 0.5);
  border-radius: 4px;
  background: #0b0e11;
  color: #ff8b97;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.5px;
}
.gate-confirm-input { width: 100%; margin-top: 9px; }
#gate-confirm-msg { min-height: 14px; margin-top: 4px; font-family: var(--mono); font-size: 10px; }

/* ---------------------------- gate pane --------------------------------- */

.gate-warn-banner {
  margin: 8px 10px 2px;
  padding: 9px 11px;
  border: 1px solid rgba(246, 70, 93, 0.4);
  border-left: 3px solid var(--down);
  border-radius: 4px;
  background: rgba(246, 70, 93, 0.07);
  font-size: 10.5px;
  line-height: 1.7;
  color: var(--muted);
}
.gate-warn-banner b { color: #ff8b97; }
.gate-warn-banner .gw-title { display: block; font-size: 11px; font-weight: 700; color: #ff8b97; letter-spacing: 0.5px; margin-bottom: 3px; }

.gate-body { padding: 8px 10px 16px; display: flex; flex-direction: column; gap: 8px; }
.gate-topline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gate-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
}
.gate-chip b { color: var(--text-2); font-weight: 600; }
.gate-chip.ok { color: var(--up); border-color: rgba(14, 203, 129, 0.3); }
.gate-chip.bad { color: var(--down); border-color: rgba(246, 70, 93, 0.35); }
.gate-chip.warn { color: var(--accent); border-color: rgba(240, 185, 11, 0.35); }
.gate-chip.info { color: var(--accent-2); border-color: rgba(74, 168, 255, 0.3); }

.gate-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 6px; }
.gate-card { padding: 6px 9px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-soft); }
.gate-card .g-label { font-size: 9px; color: var(--muted); letter-spacing: 0.3px; }
.gate-card .g-value { font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--text); margin-top: 2px; }
.gate-card .g-sub { font-family: var(--mono); font-size: 9px; color: var(--dim); margin-top: 1px; }

.gate-arm-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid rgba(246, 70, 93, 0.3);
  border-left: 3px solid var(--down);
  border-radius: 4px;
  background: rgba(246, 70, 93, 0.05);
}
.gate-arm-title { font-size: 10.5px; font-weight: 700; color: #ff8b97; letter-spacing: 0.4px; }
.gate-arm-desc { font-size: 10px; color: var(--muted); line-height: 1.6; margin-top: 2px; }
.gate-arm-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.gate-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.gate-status-line { font-family: var(--mono); font-size: 10px; color: var(--dim); min-height: 14px; }
.gate-status-line .ok { color: var(--up); }
.gate-status-line .err { color: var(--down); }
.gate-section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--border);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-2);
}
.gate-section-title .note { font-family: var(--mono); font-size: 10px; font-weight: 400; color: var(--dim); }

.gate-log { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-soft); overflow: hidden; }
.gate-log-row {
  display: grid;
  grid-template-columns: 74px 62px 88px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  padding: 3px 9px;
  border-bottom: 1px solid rgba(30, 38, 48, 0.6);
  font-family: var(--mono);
  font-size: 10px;
}
.gate-log-row:last-child { border-bottom: 0; }
.gate-log-row .g-time { color: var(--dim); }
.gate-log-row .g-act { color: var(--text-2); font-weight: 600; }
.gate-log-row .g-sym { color: var(--muted); }
.gate-log-row .g-detail { color: var(--muted); word-break: break-word; }
.gate-log-row .ok { color: var(--up); }
.gate-log-row .err { color: var(--down); }

.gate-connect-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(74, 168, 255, 0.3);
  border-radius: 4px;
  background: rgba(74, 168, 255, 0.05);
}
.gate-connect-cta .cta-text { font-size: 10.5px; color: var(--muted); line-height: 1.6; }

/* ==========================================================================
   responsive
   ========================================================================== */

@media (max-width: 1500px) {
  .main-grid { grid-template-columns: 236px minmax(0, 1fr) 276px; }
  .sym-tab { min-width: 80px; }
}

@media (max-width: 1280px) {
  .brand-cn { display: none; }
  .topbar { gap: 8px; }
  .clock-zone { display: none; }
  .main-grid { grid-template-columns: 222px minmax(0, 1fr) 258px; }
  .sym-tab { min-width: 74px; }
  .acc-item { padding: 6px 8px; }
  .acc-value { font-size: 14px; }
}

/* collapse side panels under 1100px */
@media (max-width: 1100px) {
  body { overflow: auto; }
  .app { height: auto; min-height: 100vh; overflow: visible; }
  .topbar { flex-wrap: wrap; height: auto; min-height: var(--topbar-h); padding: 6px 10px; }
  .symbol-tabs { order: 3; flex-basis: 100%; }
  .main-grid {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .center-panel { order: 1; height: 480px; flex: 0 0 auto; }
  .left-panel { order: 2; max-height: 300px; flex: 0 0 auto; }
  .right-panel { order: 3; max-height: 380px; flex: 0 0 auto; }
  .main-grid { gap: 5px; }
  .bottom-panel { height: 46vh; }
  .account-strip { grid-auto-columns: minmax(120px, 1fr); }
  .risk-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .gate-badge { font-size: 9px; padding: 3px 6px; }
  .gate-account-mini { grid-template-columns: 1fr 1fr; }
  .gate-log-row { grid-template-columns: 64px 52px minmax(0, 1fr); }
  .gate-log-row .g-sym { display: none; }
  .gate-arm-panel { flex-direction: column; align-items: stretch; }
  .gate-confirm-modal, .modal { width: 100%; }
  .top-right { gap: 5px; flex-wrap: wrap; }
  .brand-en { font-size: 11px; }
  .account-strip { height: auto; min-height: var(--acc-h); }
  .center-panel { height: 380px; }
  .bottom-panel { height: 55vh; }
  .iso-grid { grid-template-columns: 1fr; }
  .chart-meta .cm-sub { display: none; }
  .cfg-fields { grid-template-columns: 1fr; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ==========================================================================
   monthly goal (risk tab) + phone access card
   ========================================================================== */

.goal-hero {
  margin: 8px 10px 2px;
  padding: 10px 12px;
  border: 1px solid rgba(240, 185, 11, 0.32);
  border-left: 3px solid var(--accent);
  border-radius: 5px;
  background: rgba(240, 185, 11, 0.05);
}
.goal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.goal-title { font-size: 12px; font-weight: 700; letter-spacing: 0.5px; color: var(--accent); }
.goal-sub { font-family: var(--mono); font-size: 10px; color: var(--dim); margin-top: 2px; }
.goal-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.goal-badge.on { color: var(--up); background: rgba(14, 203, 129, 0.12); border: 1px solid rgba(14, 203, 129, 0.42); }
.goal-badge.off { color: var(--down); background: rgba(246, 70, 93, 0.12); border: 1px solid rgba(246, 70, 93, 0.42); }
.goal-progress {
  position: relative;
  height: 10px;
  margin: 9px 0 5px;
  border-radius: 5px;
  background: #232c38;
  overflow: hidden;
}
.goal-progress-fill {
  height: 100%;
  width: 0;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--up), var(--accent));
  transition: width 400ms ease;
}
.goal-progress-caption {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--dim);
}
.goal-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 6px; margin-top: 9px; }
.goal-metric { padding: 5px 8px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-soft); min-width: 0; }
.goal-metric .k { font-size: 9px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.goal-metric .v { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--text-2); margin-top: 2px; }
.goal-warn {
  margin-top: 9px;
  padding: 7px 9px;
  border: 1px solid rgba(246, 70, 93, 0.35);
  border-radius: 4px;
  background: rgba(246, 70, 93, 0.06);
  font-size: 10px;
  line-height: 1.65;
  color: var(--muted);
}
.goal-warn b { color: #ff8b97; }
.goal-presets { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.goal-preset-msg { font-family: var(--mono); font-size: 10px; }
.goal-preset-msg.ok { color: var(--up); }
.goal-preset-msg.err { color: var(--down); }
.goal-preset-msg.warn { color: var(--accent); }
.goal-scenarios { margin: 10px 10px 2px; }
.goal-scenario-block {
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-soft);
}
.goal-scenario-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 10px;
  background: #10141a;
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  color: var(--text-2);
}
.goal-scenario-head b { color: var(--accent); }
.goal-scenario-head .note { font-family: var(--mono); font-size: 9.5px; color: var(--dim); }
.goal-scenario-foot { padding: 6px 10px; font-size: 10px; line-height: 1.65; color: var(--muted); border-top: 1px dashed var(--border); }
.goal-scenario-foot b { color: var(--text-2); }
.goal-table-wrap { overflow-x: auto; }
.goal-table { width: 100%; border-collapse: collapse; font-size: 10px; min-width: 620px; }
.goal-table th { padding: 4px 8px; text-align: right; font-weight: 500; color: var(--dim); background: #10141a; border-bottom: 1px solid var(--border); white-space: nowrap; }
.goal-table th:first-child, .goal-table td:first-child { text-align: left; }
.goal-table td { padding: 4px 8px; text-align: right; font-family: var(--mono); color: var(--text-2); border-bottom: 1px solid rgba(30, 38, 48, 0.6); white-space: nowrap; }
.goal-table tr.neg td { color: #ff8b97; }
.goal-table tr.edgy td:first-child { color: var(--accent); }

.phone-access-card ul { margin: 0; padding-left: 16px; }
.phone-url-list { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 8px; }
.phone-url-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-soft);
}
.phone-url-main { flex: 1 1 auto; min-width: 0; }
.phone-url-label { font-size: 9px; color: var(--dim); letter-spacing: 0.4px; }
.phone-url-link { display: block; font-family: var(--mono); font-size: 11.5px; color: var(--accent-2); text-decoration: none; word-break: break-all; margin-top: 1px; }
.phone-url-link:hover { text-decoration: underline; }
.phone-copy-btn { flex: 0 0 auto; min-width: 52px; min-height: 32px; }
.phone-hint { font-size: 10px; line-height: 1.7; color: var(--muted); margin: 4px 0; }
.phone-hint b { color: var(--text-2); }
.phone-steps { margin: 4px 0 0; padding-left: 16px; font-size: 10px; line-height: 1.7; color: var(--muted); }
.phone-steps li { margin: 2px 0; }
.phone-error { color: var(--down); font-size: 10px; }

/* ==========================================================================
   mobile chrome base (hidden on desktop)
   ========================================================================== */

.mobile-menu-btn,
.mobile-symbol,
.mobile-tabbar,
.mobile-sheet,
.collapse-btn { display: none; }

.mobile-menu-btn {
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  border: 1px solid var(--border-2);
  background: var(--panel-2);
  color: var(--text-2);
  flex: 0 0 auto;
}
.mobile-menu-btn:active { background: var(--panel-3); }
.mmb-bars,
.mmb-bars::before,
.mmb-bars::after {
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 1px;
  background: var(--text-2);
  position: relative;
}
.mmb-bars::before, .mmb-bars::after { content: ""; position: absolute; left: 0; }
.mmb-bars::before { top: -5px; }
.mmb-bars::after { top: 5px; }

.mobile-symbol {
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
  font-family: var(--mono);
}
.mobile-symbol .ms-sym { font-size: 11px; font-weight: 700; color: var(--text); }
.mobile-symbol .ms-price { font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; }
.mobile-symbol .ms-chg { font-size: 10px; }

/* ==========================================================================
   tablet: 641px – 1100px
   ========================================================================== */

@media (min-width: 641px) and (max-width: 1100px) {
  body { overflow: hidden; }
  .app { height: 100dvh; min-height: 0; overflow: hidden; }
  .topbar {
    flex-wrap: nowrap;
    height: 54px;
    min-height: 54px;
    padding: 6px 8px;
    padding-top: calc(6px + env(safe-area-inset-top));
    gap: 8px;
  }
  .mobile-menu-btn { display: inline-flex; }
  .mobile-symbol { display: flex; flex: 1 1 auto; }
  .brand-text { display: none; }
  .symbol-tabs { display: none; }
  .topbar .conn,
  .topbar .clock,
  .topbar .mode-badge,
  #btn-bot,
  #btn-close-all,
  #btn-reset { display: none; }
  .gate-badge { margin-left: auto; min-height: 36px; }
  .account-strip {
    height: 58px;
    grid-auto-columns: minmax(122px, 1fr);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .account-strip::-webkit-scrollbar { display: none; }
  .main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 268px;
    gap: 4px;
    padding: 4px;
    flex: 1 1 auto;
    min-height: 0;
  }
  .left-panel { display: none; }
  .center-panel { order: 0; height: auto; min-height: 0; flex: 1 1 auto; }
  .right-panel { order: 0; max-height: none; overflow-y: auto; }
  .bottom-panel { height: 32vh; min-height: 190px; margin: 0 4px 4px; }
  .mobile-tabbar { display: none; }
  .mobile-sheet:not(.hidden) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 90;
  }
  .phone-access-card { grid-column: 1 / -1; }
}

/* ==========================================================================
   phone: <= 640px
   ========================================================================== */

@media (max-width: 640px) {
  :root { --topbar-h: 54px; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .app {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
    padding-bottom: calc(62px + env(safe-area-inset-bottom));
  }
  .topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    flex-wrap: nowrap;
    height: 54px;
    min-height: 54px;
    padding: 6px 8px;
    padding-top: calc(6px + env(safe-area-inset-top));
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .topbar::-webkit-scrollbar { display: none; }
  .top-right { flex-wrap: nowrap; flex-shrink: 0; }
  .topbar #freshness-badge,
  .topbar #cmd-btn,
  .topbar #source-picker,
  .topbar #gate-badge,
  .topbar #role-badge,
  .topbar #current-user { display: none; }
  .topbar #settings-btn,
  .topbar #inbox-btn { padding: 0 7px; }
  .account-strip { max-width: 100vw; overflow-x: auto; }
  .mobile-menu-btn { display: inline-flex; }
  .mobile-symbol { display: flex; flex: 1 1 auto; overflow: hidden; }
  .brand-text { display: none; }
  .symbol-tabs { display: none; }
  .topbar .conn,
  .topbar .clock,
  .topbar .mode-badge,
  #btn-bot,
  #btn-close-all,
  #btn-reset { display: none; }
  .gate-badge { margin-left: auto; min-height: 34px; padding: 0 8px; font-size: 9px; }
  .gate-dot { width: 6px; height: 6px; }

  .account-strip {
    height: 58px;
    flex: 0 0 58px;
    grid-auto-columns: minmax(112px, 42vw);
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .account-strip::-webkit-scrollbar { display: none; }
  .acc-item { scroll-snap-align: start; padding: 6px 10px; }
  .acc-item.acc-risk { min-width: 132px; }
  .acc-value { font-size: 14px; }

  .main-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px;
    min-height: 0;
  }
  .left-panel { display: none; }
  .center-panel {
    order: 1;
    flex: 0 0 auto;
    height: 45dvh;
    min-height: 285px;
  }
  .right-panel {
    order: 2;
    flex: 0 0 auto;
    max-height: none;
    overflow: visible;
  }
  .bottom-panel {
    order: 3;
    flex: 0 0 auto;
    height: auto;
    min-height: 46vh;
    margin: 0;
  }
  .bottom-tabs { display: none; }
  .bottom-body { min-height: 240px; }
  .pane { height: auto; }

  /* collapsible order book / trades */
  .collapse-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    min-height: 30px;
    padding: 0 8px;
    font-size: 10px;
    border-radius: 4px;
    border: 1px solid var(--border-2);
    color: var(--muted);
    background: var(--panel-2);
  }
  .right-panel.ob-collapsed .ob-head,
  .right-panel.ob-collapsed #orderbook-asks,
  .right-panel.ob-collapsed .ob-last,
  .right-panel.ob-collapsed #orderbook-bids { display: none; }
  .right-panel.trades-collapsed .tr-head,
  .right-panel.trades-collapsed #recent-trades { display: none; }
  .right-panel .panel-title { font-size: 11px; }

  /* fixed bottom nav */
  .mobile-tabbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: rgba(14, 18, 23, 0.97);
    border-top: 1px solid var(--border-2);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mtab {
    flex: 1 1 0;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--muted);
    border-top: 2px solid transparent;
    padding: 6px 2px;
  }
  .mtab.active { color: var(--accent); border-top-color: var(--accent); background: rgba(240, 185, 11, 0.05); }
  .mtab:active { background: rgba(255, 255, 255, 0.03); }

  /* bottom sheets */
  .mobile-sheet:not(.hidden) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 90;
  }
  .mobile-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.62);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
  .mobile-sheet-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 86dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--panel);
    border-top: 1px solid var(--border-2);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.6);
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
  .mobile-sheet-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg-soft);
    border-bottom: 1px solid var(--border);
  }
  .mobile-sheet-title { font-size: 12px; font-weight: 700; letter-spacing: 0.5px; color: var(--text-2); }
  .mobile-sheet-close {
    width: 40px;
    height: 40px;
    font-size: 20px;
    color: var(--muted);
    border-radius: 6px;
  }
  .mobile-sheet-close:active { background: var(--panel-3); }
  .mobile-sheet-status { padding: 10px 14px 4px; font-size: 10.5px; color: var(--muted); line-height: 1.7; }
  .mobile-sheet-status .mss-row { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }
  .mobile-sheet-status .mss-row b { font-family: var(--mono); color: var(--text-2); font-weight: 500; text-align: right; }
  .mobile-symbol-list { padding: 4px 8px; }
  .mobile-symbol-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 50px;
    padding: 6px 8px;
    border-bottom: 1px solid rgba(30, 38, 48, 0.7);
    cursor: pointer;
  }
  .mobile-symbol-row.active { background: rgba(240, 185, 11, 0.07); border-left: 2px solid var(--accent); }
  .mobile-symbol-row .msl-left { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .mobile-symbol-row .msl-sym { font-size: 12px; font-weight: 700; color: var(--text); }
  .mobile-symbol-row .msl-regime { font-size: 9px; color: var(--dim); }
  .mobile-symbol-row .msl-right { text-align: right; font-family: var(--mono); }
  .mobile-symbol-row .msl-price { display: block; font-size: 12px; color: var(--text-2); }
  .mobile-symbol-row .msl-chg { display: block; font-size: 10px; }
  .mobile-sheet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 12px 4px; }
  .mobile-sheet-actions .btn { min-height: 44px; font-size: 11px; }
  .mobile-sheet-note { padding: 4px 14px 10px; font-size: 9.5px; line-height: 1.6; color: var(--dim); }
  .mobile-more-list { display: flex; flex-direction: column; padding: 4px 8px; }
  .mobile-more-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 50px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(30, 38, 48, 0.7);
    font-size: 12px;
    color: var(--text-2);
  }
  .mobile-more-item:active { background: rgba(255, 255, 255, 0.03); }
  .mobile-more-item .mm-arrow { color: var(--dim); font-family: var(--mono); }

  /* chart: touch interactions, no passive page scroll inside chart */
  #chart-canvas { touch-action: none; }
  .chart-tooltip { font-size: 10.5px; max-width: 62vw; }
  .chart-empty { font-size: 10px; }
  .status-line { white-space: normal; line-height: 1.5; max-height: 46px; }

  /* modals become full-screen sheets */
  .modal-overlay { padding: 0; align-items: stretch; }
  .modal,
  .gate-confirm-modal {
    width: 100%;
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    border: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .modal-head { padding-top: calc(10px + env(safe-area-inset-top)); }
  .modal-body { padding: 12px 14px 20px; }
  .gate-account-mini { grid-template-columns: 1fr 1fr; }
  .modal-actions { position: sticky; bottom: 0; background: var(--panel); padding: 10px 0 4px; }
  .gate-form-actions .btn,
  .modal-actions .btn { min-height: 44px; }

  /* tables -> 2-line cards with data-label */
  .pane .tbl-wrap { padding: 4px 0; }
  .pane .tbl,
  .pane .tbl tbody,
  .pane .tbl tr,
  .pane .tbl td { display: block; width: 100%; }
  .pane .tbl thead { display: none; }
  .pane .tbl tr {
    margin: 6px 8px;
    padding: 6px 9px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-soft);
  }
  .pane .tbl tr:hover td { background: transparent; }
  .pane .tbl td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
    border: 0;
    text-align: right;
    white-space: normal;
    word-break: break-word;
  }
  .pane .tbl td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-family: var(--sans);
    font-size: 10px;
    color: var(--dim);
    text-align: left;
  }
  .pane .tbl td:first-child { padding: 2px 0 4px; }
  .pane .tbl td:empty { display: none; }
  .audit-table, .goal-table { font-size: 9.5px; }

  /* goal + docs cards stack nicely */
  .goal-hero { margin: 8px 8px 2px; padding: 9px 10px; }
  .goal-metrics { grid-template-columns: 1fr 1fr; }
  .goal-scenarios { margin: 8px; }
  .goal-presets .btn { min-height: 44px; flex: 1 1 100%; }
  .phone-url-row { flex-wrap: wrap; }
  .phone-copy-btn { min-height: 40px; min-width: 64px; }
  .docs-grid { grid-template-columns: 1fr; padding: 8px; }
  .cfg-fields { grid-template-columns: 1fr; }
  .io-actions .btn, .cfg-actions .btn, .pane-head-actions .btn { min-height: 40px; }

  /* risk / reality cards single column */
  .risk-grid { grid-template-columns: 1fr; padding: 8px; }
  .iso-grid { grid-template-columns: 1fr; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .equity-svg { height: 150px; }
  .gate-log-row { grid-template-columns: 64px 56px minmax(0, 1fr); }
  .gate-log-row .g-sym { display: none; }
  .gate-arm-panel { flex-direction: column; align-items: stretch; }
  .gate-actions .btn { min-height: 42px; }
  .gate-cards { grid-template-columns: 1fr 1fr; }
  .bt-form { width: 100%; }
  .bt-form .select, .bt-form .btn { min-height: 40px; }
  .pane-head { flex-wrap: wrap; }
}

/* very narrow phones (320-360) */
@media (max-width: 360px) {
  .mobile-symbol .ms-sym { display: none; }
  .gate-badge { font-size: 8.5px; padding: 0 6px; }
  .goal-metrics { grid-template-columns: 1fr; }
  .account-strip { grid-auto-columns: minmax(104px, 46vw); }
}

/* tablet bottom sheets (symbol menu) */
@media (min-width: 641px) and (max-width: 1100px) {
  .mobile-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.62);
  }
  .mobile-sheet-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 80dvh;
    overflow-y: auto;
    background: var(--panel);
    border-top: 1px solid var(--border-2);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.6);
    padding-bottom: 14px;
  }
  .mobile-sheet-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bg-soft);
    border-bottom: 1px solid var(--border);
  }
  .mobile-sheet-title { font-size: 12px; font-weight: 700; color: var(--text-2); letter-spacing: 0.5px; }
  .mobile-sheet-close { width: 40px; height: 40px; font-size: 20px; color: var(--muted); border-radius: 6px; }
  .mobile-sheet-status { padding: 10px 16px 4px; font-size: 10.5px; color: var(--muted); line-height: 1.7; }
  .mobile-sheet-status .mss-row { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }
  .mobile-sheet-status .mss-row b { font-family: var(--mono); color: var(--text-2); font-weight: 500; }
  .mobile-symbol-list { padding: 4px 10px; }
  .mobile-symbol-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 50px;
    padding: 6px 8px;
    border-bottom: 1px solid rgba(30, 38, 48, 0.7);
    cursor: pointer;
  }
  .mobile-symbol-row.active { background: rgba(240, 185, 11, 0.07); border-left: 2px solid var(--accent); }
  .mobile-symbol-row .msl-left { display: flex; flex-direction: column; gap: 1px; }
  .mobile-symbol-row .msl-sym { font-size: 12px; font-weight: 700; color: var(--text); }
  .mobile-symbol-row .msl-regime { font-size: 9px; color: var(--dim); }
  .mobile-symbol-row .msl-right { text-align: right; font-family: var(--mono); }
  .mobile-symbol-row .msl-price { display: block; font-size: 12px; color: var(--text-2); }
  .mobile-symbol-row .msl-chg { display: block; font-size: 10px; }
  .mobile-sheet-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 10px 16px 4px; }
  .mobile-sheet-actions .btn { min-height: 44px; }
  .mobile-sheet-note { padding: 4px 16px 10px; font-size: 9.5px; color: var(--dim); }
  .mobile-more-list { display: flex; flex-direction: column; padding: 4px 10px; }
  .mobile-more-item { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 8px 10px; border-bottom: 1px solid rgba(30, 38, 48, 0.7); font-size: 12px; color: var(--text-2); }
}


/* bottom sheet open: lock background scroll */
@media (max-width: 1100px) {
  body.sheet-open { overflow: hidden !important; }
}

/* phone: keep audit tables from forcing horizontal page scroll */
@media (max-width: 640px) {
  .audit-table th,
  .audit-table td { padding: 3px 5px; white-space: normal; word-break: break-word; }
  .tbl-wrap,
  .iso-box,
  .audit-section,
  .rk-card { max-width: 100%; min-width: 0; }
  .bt-form .select { max-width: 100%; }
  .pane-head-actions { width: 100%; }
}

/* ==========================================================================
   paper manual test orders
   ========================================================================== */

.paper-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 8px 10px 4px;
  padding: 8px 10px;
  border: 1px dashed rgba(240, 185, 11, 0.42);
  border-radius: 5px;
  background: rgba(240, 185, 11, 0.05);
}
.paper-tag {
  padding: 2px 8px;
  border-radius: 3px;
  background: rgba(240, 185, 11, 0.14);
  border: 1px solid rgba(240, 185, 11, 0.5);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
}
.paper-toolbar-sym { font-family: var(--mono); font-size: 11px; color: var(--text-2); }
.btn-paper-long {
  border-color: rgba(14, 203, 129, 0.5);
  background: rgba(14, 203, 129, 0.1);
  color: var(--up);
}
.btn-paper-long:hover { background: rgba(14, 203, 129, 0.18); color: var(--up); }
.btn-paper-short {
  border-color: rgba(246, 70, 93, 0.5);
  background: rgba(246, 70, 93, 0.1);
  color: var(--down);
}
.btn-paper-short:hover { background: rgba(246, 70, 93, 0.18); color: var(--down); }
.btn-paper-close {
  min-width: 48px;
  min-height: 26px;
  padding: 2px 8px;
  border-color: rgba(246, 70, 93, 0.42);
  color: #ff8b97;
  font-size: 10px;
}
.btn-paper-close:hover { background: rgba(246, 70, 93, 0.14); color: #ff8b97; }
.paper-hint {
  flex: 1 1 100%;
  font-size: 9.5px;
  line-height: 1.6;
  color: var(--muted);
}
.paper-hint b { color: var(--accent); font-weight: 600; }
.paper-msg { flex: 1 1 100%; font-family: var(--mono); font-size: 10px; line-height: 1.5; }
.paper-msg.ok { color: var(--up); }
.paper-msg.err { color: var(--down); }
.paper-src {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid rgba(240, 185, 11, 0.4);
  background: rgba(240, 185, 11, 0.1);
  color: var(--accent);
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
}
.order-type { font-family: var(--mono); font-size: 10.5px; font-weight: 600; }
.order-type.up { color: var(--up); }
.order-type.down { color: var(--down); }
.order-status { font-family: var(--mono); font-size: 10px; font-weight: 600; }
.order-status.warn { color: var(--accent); }
.order-status.up { color: var(--up); }
.order-status.dim { color: var(--dim); }
.order-status.down { color: var(--down); }

@media (max-width: 640px) {
  .paper-toolbar { margin: 8px 8px 4px; padding: 8px; }
  .paper-toolbar .btn { flex: 1 1 calc(50% - 8px); min-height: 42px; }
  .paper-toolbar-sym { display: none; }
  .btn-paper-close { min-height: 36px; min-width: 64px; }
}

/* ==========================================================================
   market source picker
   ========================================================================== */

.source-picker { position: relative; flex: 0 0 auto; }
.source-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 8px;
  border-radius: 4px;
  border: 1px solid var(--border-2);
  background: var(--panel-2);
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}
.source-btn:hover { background: var(--panel-3); color: var(--text); }
.source-picker.has-error .source-btn { border-color: rgba(246, 70, 93, 0.6); color: #ff8b97; }
.src-label { font-size: 9px; color: var(--dim); letter-spacing: 0.5px; }
.src-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); flex: 0 0 auto; }
.src-dot.ok { background: var(--up); }
.src-dot.bad { background: var(--down); }
.src-dot.warn { background: var(--accent); }
.src-dot.unknown { background: var(--dim); }
.src-current { font-family: var(--mono); font-weight: 700; font-size: 10px; color: var(--text-2); }
.src-caret { font-size: 9px; color: var(--dim); }

.source-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 70;
  width: 300px;
  max-width: 84vw;
  padding: 4px;
  background: var(--panel);
  border: 1px solid var(--border-2);
  border-radius: 6px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
}
.source-menu.hidden { display: none; }
.source-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: 7px 8px;
  border-radius: 4px;
  text-align: left;
  color: var(--text-2);
}
.source-item:hover { background: var(--panel-3); }
.source-item.active { background: rgba(240, 185, 11, 0.06); }
.source-item .si-main { flex: 1 1 auto; min-width: 0; }
.si-name { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--text-2); }
.si-note { font-size: 9px; line-height: 1.5; color: var(--dim); margin-top: 2px; word-break: break-word; }
.si-note.bad { color: var(--down); }
.si-active { color: var(--accent); font-size: 9px; }
.source-error {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 69;
  width: 280px;
  max-width: 84vw;
  padding: 7px 9px;
  border: 1px solid rgba(246, 70, 93, 0.45);
  border-radius: 5px;
  background: rgba(30, 12, 16, 0.97);
  color: #ff8b97;
  font-size: 10px;
  line-height: 1.55;
  display: none;
}
.source-error.has { display: block; }
.source-error.hidden { display: none; }

/* ==========================================================================
   multi-exchange pane
   ========================================================================== */

.exch-warn-banner {
  margin: 8px 10px 2px;
  padding: 9px 11px;
  border: 1px solid rgba(240, 185, 11, 0.35);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  background: rgba(240, 185, 11, 0.05);
  font-size: 10.5px;
  line-height: 1.7;
  color: var(--muted);
}
.exch-warn-banner b { color: var(--accent); }
.exch-warn-banner .bad { color: #ff8b97; }
.exch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; padding: 8px 10px; }
.exch-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 9px 11px 10px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg-soft);
}
.exch-card-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.exch-name { font-size: 12px; font-weight: 700; color: var(--text); letter-spacing: 0.3px; }
.exch-kind { font-family: var(--mono); font-size: 9px; color: var(--dim); }
.exch-spacer { flex: 1 1 auto; }
.exch-badge {
  padding: 1px 7px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 600;
  border: 1px solid var(--border-2);
  color: var(--muted);
  white-space: nowrap;
}
.exch-badge.ok { color: var(--up); border-color: rgba(14, 203, 129, 0.42); background: rgba(14, 203, 129, 0.08); }
.exch-badge.bad { color: var(--down); border-color: rgba(246, 70, 93, 0.42); background: rgba(246, 70, 93, 0.08); }
.exch-badge.warn { color: var(--accent); border-color: rgba(240, 185, 11, 0.42); background: rgba(240, 185, 11, 0.07); }
.exch-badge.ro { color: var(--accent-2); border-color: rgba(74, 168, 255, 0.4); background: rgba(74, 168, 255, 0.07); }
.exch-market {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
  font-size: 10px;
  color: var(--muted);
  line-height: 1.55;
}
.exch-market .em-lat { font-family: var(--mono); color: var(--text-2); }
.exch-market .em-note.bad { color: #ff8b97; }
.exch-account { border-top: 1px dashed var(--border); padding-top: 5px; }
.exch-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 1px 0; font-size: 10px; }
.exch-kv .k { color: var(--muted); white-space: nowrap; }
.exch-kv .v { font-family: var(--mono); color: var(--text-2); text-align: right; word-break: break-all; }
.exch-kv .v.bad { color: var(--down); }
.exch-kv .v.ok { color: var(--up); }
.exch-err { margin-top: 3px; font-size: 9.5px; line-height: 1.55; color: #ff8b97; word-break: break-word; }
.exch-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.exch-actions .btn { min-height: 30px; }
.exch-msg { font-family: var(--mono); font-size: 9.5px; line-height: 1.5; }
.exch-msg.ok { color: var(--up); }
.exch-msg.err { color: #ff8b97; }
.exch-msg.warn { color: var(--accent); }

/* comparison */
.exch-compare { padding: 2px 10px 14px; }
.exch-compare-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; padding-bottom: 3px; border-bottom: 1px solid var(--border); }
.exch-compare-head h4 { margin: 0; font-size: 11px; color: var(--text-2); letter-spacing: 0.5px; }
.exch-compare-head .note { font-family: var(--mono); font-size: 9.5px; color: var(--dim); }
.cmp-table { width: 100%; border-collapse: collapse; font-size: 10.5px; }
.cmp-table th { padding: 4px 9px; text-align: right; font-size: 9.5px; font-weight: 500; color: var(--dim); background: #10141a; border-bottom: 1px solid var(--border); white-space: nowrap; }
.cmp-table th:first-child, .cmp-table td:first-child { text-align: left; }
.cmp-table td { padding: 4px 9px; text-align: right; font-family: var(--mono); color: var(--text-2); border-bottom: 1px solid rgba(30, 38, 48, 0.6); white-space: nowrap; }
.cmp-table td.cmp-best-buy { color: var(--up); background: rgba(14, 203, 129, 0.08); font-weight: 600; }
.cmp-table td.cmp-best-sell { color: var(--down); background: rgba(246, 70, 93, 0.08); font-weight: 600; }
.cmp-table td.cmp-both { color: var(--accent); background: rgba(240, 185, 11, 0.08); }
.cmp-missing { color: var(--dim); }
.cmp-stale { color: var(--accent); font-size: 9px; }
.cmp-errors { margin-top: 6px; padding: 6px 9px; border: 1px solid rgba(246, 70, 93, 0.3); border-radius: 4px; background: rgba(246, 70, 93, 0.05); font-size: 9.5px; line-height: 1.6; color: #ff8b97; }
.cmp-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 5px; font-size: 9px; color: var(--dim); }
.cmp-legend .lg-buy { color: var(--up); }
.cmp-legend .lg-sell { color: var(--down); }
.cmp-legend .lg-missing { color: var(--dim); }

/* connect modal */
.exch-modal { width: 520px; }
.exch-modal .gate-field { margin-bottom: 8px; }
.exch-modal-warn {
  padding: 8px 10px;
  border: 1px solid rgba(240, 185, 11, 0.35);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  background: rgba(240, 185, 11, 0.05);
  font-size: 10px;
  line-height: 1.7;
  color: var(--muted);
}
.exch-modal-warn b { color: var(--accent); }
.exch-modal-warn .bad { color: #ff8b97; }

@media (max-width: 1500px) {
  .src-label { display: none; }
}
@media (max-width: 1280px) {
  .source-btn { padding: 0 6px; }
}
@media (max-width: 640px) {
  .source-picker { position: static; }
  .source-btn { padding: 0 6px; height: 32px; }
  .source-menu { position: fixed; top: 64px; right: 8px; left: 8px; width: auto; max-width: none; }
  .source-error { position: fixed; top: 64px; right: 8px; left: 8px; width: auto; max-width: none; }
  .exch-grid { grid-template-columns: 1fr; padding: 8px; }
  .exch-actions .btn { min-height: 40px; flex: 1 1 calc(50% - 6px); }
  .exch-card { padding: 9px 10px; }
  .cmp-table th, .cmp-table td { padding: 3px 7px; }
  .cmp-table { font-size: 9.5px; }
  .exch-modal { width: 100%; }
}

/* ==========================================================================
   network proxy card (multi-exchange pane)
   ========================================================================== */

.proxy-card {
  margin: 8px 10px 2px;
  padding: 9px 11px 10px;
  border: 1px solid rgba(74, 168, 255, 0.3);
  border-left: 3px solid var(--accent-2);
  border-radius: 5px;
  background: rgba(74, 168, 255, 0.04);
}
.proxy-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.proxy-title { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; color: var(--accent-2); }
.proxy-current { font-family: var(--mono); font-size: 10.5px; color: var(--text-2); word-break: break-all; }
.proxy-form { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.proxy-input { flex: 1 1 240px; min-width: 0; }
.proxy-form .btn { min-height: 30px; white-space: nowrap; }
.proxy-note { margin-top: 7px; font-size: 9.5px; line-height: 1.7; color: var(--muted); }
.proxy-note b { color: var(--text-2); }
.proxy-note code { font-family: var(--mono); color: var(--accent-2); font-size: 9.5px; }
.proxy-msg { margin-top: 6px; font-family: var(--mono); font-size: 10px; line-height: 1.55; word-break: break-word; }
.proxy-msg.ok { color: var(--up); }
.proxy-msg.err { color: #ff8b97; }
.proxy-results {
  margin-top: 7px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-soft);
  overflow: hidden;
}
.proxy-result-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 9px;
  border-bottom: 1px solid rgba(30, 38, 48, 0.6);
  font-size: 10px;
}
.proxy-result-row:last-child { border-bottom: 0; }
.proxy-result-row .pr-name { color: var(--muted); }
.proxy-result-row .pr-val { font-family: var(--mono); color: var(--text-2); text-align: right; word-break: break-word; }
.proxy-result-row .pr-val.ok { color: var(--up); }
.proxy-result-row .pr-val.err { color: #ff8b97; }

@media (max-width: 640px) {
  .proxy-card { margin: 8px 8px 2px; padding: 9px 10px; }
  .proxy-form .btn { flex: 1 1 calc(50% - 6px); min-height: 40px; }
  .proxy-input { flex: 1 1 100%; min-height: 40px; }
  .proxy-form .btn:last-child { flex: 1 1 100%; }
}

/* ==========================================================================
   review / 复盘
   ========================================================================== */

.review-body { padding: 0 0 14px; }
.review-hero {
  margin: 8px 10px 2px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg-soft);
}
.review-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.review-title-block { display: flex; flex-direction: column; gap: 1px; }
.review-title { font-size: 12px; font-weight: 700; letter-spacing: 0.5px; color: var(--accent); }
.review-sub { font-family: var(--mono); font-size: 9.5px; color: var(--dim); }
.review-counts { display: flex; align-items: baseline; gap: 14px; font-size: 10px; color: var(--muted); }
.review-count b { font-family: var(--mono); font-size: 16px; color: var(--text); margin-right: 3px; }
.review-pass-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 9px; }
.review-pass {
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel);
  min-width: 0;
}
.review-pass .rp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.review-pass .rp-name { font-size: 10px; color: var(--muted); }
.review-pass .rp-score { font-family: var(--mono); font-size: 18px; font-weight: 700; color: var(--text-2); }
.review-pass .rp-bar { height: 4px; border-radius: 2px; background: #232c38; margin: 5px 0; overflow: hidden; }
.review-pass .rp-bar span { display: block; height: 100%; border-radius: 2px; background: var(--muted); }
.review-pass .rp-detail { font-size: 9px; line-height: 1.5; color: var(--dim); word-break: break-word; }
.review-pass.good { border-color: rgba(14, 203, 129, 0.4); background: rgba(14, 203, 129, 0.05); }
.review-pass.good .rp-score { color: var(--up); }
.review-pass.good .rp-bar span { background: var(--up); }
.review-pass.mid { border-color: rgba(240, 185, 11, 0.4); background: rgba(240, 185, 11, 0.04); }
.review-pass.mid .rp-score { color: var(--accent); }
.review-pass.mid .rp-bar span { background: var(--accent); }
.review-pass.bad { border-color: rgba(246, 70, 93, 0.42); background: rgba(246, 70, 93, 0.05); }
.review-pass.bad .rp-score { color: var(--down); }
.review-pass.bad .rp-bar span { background: var(--down); }

.review-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; padding: 8px 10px 2px; }
.review-card {
  min-width: 0;
  padding: 8px 10px 10px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg-soft);
}
.review-card-title { font-size: 10.5px; font-weight: 700; letter-spacing: 0.5px; color: var(--text-2); margin-bottom: 6px; }
.review-kv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 4px 10px; }
.review-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 2px 0; border-bottom: 1px dashed rgba(30, 38, 48, 0.65); font-size: 10px; }
.review-kv .k { color: var(--muted); white-space: nowrap; }
.review-kv .v { font-family: var(--mono); color: var(--text-2); text-align: right; }
.review-kv .v.strong { color: var(--text); font-weight: 700; }
.review-kv .v.warn { color: var(--accent); }
.review-kv .v.down { color: var(--down); }
.review-account-row { margin-top: 6px; padding-top: 4px; border-top: 1px solid var(--border); }
.review-note { margin-top: 7px; padding: 6px 9px; border-radius: 4px; font-size: 9.5px; line-height: 1.65; }
.review-note.warn { border: 1px solid rgba(240, 185, 11, 0.35); background: rgba(240, 185, 11, 0.05); color: var(--accent); }

.review-diag-list { display: flex; flex-direction: column; gap: 5px; }
.review-diag { padding: 6px 8px; border: 1px solid var(--border); border-left: 3px solid var(--muted); border-radius: 4px; background: var(--panel); }
.review-diag .rd-head { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.review-diag .rd-level { font-size: 8.5px; font-weight: 700; padding: 1px 5px; border-radius: 3px; border: 1px solid var(--border-2); color: var(--muted); }
.review-diag .rd-title { font-size: 10.5px; font-weight: 600; color: var(--text-2); }
.review-diag .rd-detail { margin-top: 3px; font-size: 9.5px; line-height: 1.6; color: var(--muted); }
.review-diag.diag-ok { border-left-color: var(--up); }
.review-diag.diag-ok .rd-level { color: var(--up); border-color: rgba(14, 203, 129, 0.4); }
.review-diag.diag-info { border-left-color: var(--accent-2); }
.review-diag.diag-info .rd-level { color: var(--accent-2); border-color: rgba(74, 168, 255, 0.4); }
.review-diag.diag-warn { border-left-color: var(--accent); }
.review-diag.diag-warn .rd-level { color: var(--accent); border-color: rgba(240, 185, 11, 0.4); }
.review-diag.diag-bad { border-left-color: var(--down); }
.review-diag.diag-bad .rd-level { color: var(--down); border-color: rgba(246, 70, 93, 0.45); }

.review-exec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); gap: 6px; }
.review-exec { padding: 6px 8px; border: 1px solid var(--border); border-radius: 4px; background: var(--panel); min-width: 0; }
.review-exec .re-k { font-size: 9px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.review-exec .re-v { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--text-2); margin-top: 2px; }
.review-exec .re-v.up { color: var(--up); }

.review-sub-title { margin: 8px 0 4px; font-size: 9.5px; color: var(--dim); letter-spacing: 0.4px; }
.review-bars { display: flex; flex-direction: column; gap: 4px; }
.review-bar-row { display: grid; grid-template-columns: 96px minmax(50px, 1fr) 42px; align-items: center; gap: 7px; font-size: 9.5px; }
.review-bar-row .rb-label { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.review-bar-row .rb-track { height: 8px; border-radius: 3px; background: #1a212b; overflow: hidden; }
.review-bar-row .rb-fill { display: block; height: 100%; border-radius: 3px; background: rgba(246, 70, 93, 0.6); }
.review-bar-row .rb-fill.sym { background: rgba(74, 168, 255, 0.6); }
.review-bar-row .rb-count { font-family: var(--mono); text-align: right; color: var(--text-2); }

.review-stats td.review-manual, .review-trades .review-manual { color: var(--dim); }
.review-manual-badge { font-size: 8.5px; padding: 1px 5px; border-radius: 3px; color: var(--dim); border: 1px solid var(--border-2); }
.review-auto-badge { font-size: 8.5px; padding: 1px 5px; border-radius: 3px; color: var(--accent-2); border: 1px solid rgba(74, 168, 255, 0.35); }
.review-suggest { margin: 0; padding-left: 18px; }
.review-suggest li { margin: 4px 0; font-size: 10px; line-height: 1.7; color: var(--muted); }
.review-trades td { font-size: 9.5px; }

@media (max-width: 640px) {
  .review-hero { margin: 8px 8px 2px; padding: 9px 10px; }
  .review-pass-grid { grid-template-columns: 1fr; }
  .review-grid { grid-template-columns: 1fr; padding: 8px; }
  .review-kv-grid { grid-template-columns: 1fr 1fr; }
  .review-exec-grid { grid-template-columns: 1fr 1fr; }
  .review-bar-row { grid-template-columns: 84px minmax(40px, 1fr) 36px; }
  .review-body { padding-bottom: 10px; }
}

/* ==========================================================================
   review: auto-review timeline + trade tags
   ========================================================================== */

.review-auto {
  margin: 8px 10px 2px;
  padding: 9px 11px 10px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-2);
  border-radius: 5px;
  background: var(--bg-soft);
}
.review-auto-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.review-auto-head .ra-title-block { display: flex; flex-direction: column; gap: 2px; }
.review-auto-sub { font-size: 9px; color: var(--dim); line-height: 1.5; }
.review-auto-time { font-family: var(--mono); font-size: 9.5px; color: var(--muted); white-space: nowrap; }
.review-auto-empty { margin-top: 7px; padding: 10px 8px; text-align: center; font-size: 10px; color: var(--dim); border: 1px dashed var(--border); border-radius: 4px; }
.review-auto-list { display: flex; flex-direction: column; gap: 5px; margin-top: 7px; max-height: 280px; overflow-y: auto; }
.review-auto-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel);
}
.review-auto-item .ra-level {
  flex: 0 0 auto;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 8.5px;
  font-weight: 700;
  border: 1px solid var(--border-2);
  color: var(--muted);
  margin-top: 1px;
}
.review-auto-item .ra-main { flex: 1 1 auto; min-width: 0; }
.review-auto-item .ra-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.review-auto-item .ra-item-title { font-size: 10.5px; font-weight: 600; color: var(--text-2); }
.review-auto-item .ra-time { font-family: var(--mono); font-size: 9px; color: var(--dim); white-space: nowrap; }
.review-auto-item .ra-detail { margin-top: 2px; font-size: 9.5px; line-height: 1.6; color: var(--muted); word-break: break-word; }
.review-auto-item.ra-warn { border-left: 2px solid var(--accent); }
.review-auto-item.ra-warn .ra-level { color: var(--accent); border-color: rgba(240, 185, 11, 0.4); }
.review-auto-item.ra-bad { border-left: 2px solid var(--down); }
.review-auto-item.ra-bad .ra-level { color: var(--down); border-color: rgba(246, 70, 93, 0.45); }
.review-auto-item.ra-info { border-left: 2px solid var(--accent-2); }
.review-auto-item.ra-info .ra-level { color: var(--accent-2); border-color: rgba(74, 168, 255, 0.4); }
.review-auto-item.ra-ok { border-left: 2px solid var(--up); }
.review-auto-item.ra-ok .ra-level { color: var(--up); border-color: rgba(14, 203, 129, 0.4); }

.trade-tag-wrap { display: inline-flex; flex-wrap: wrap; gap: 3px; justify-content: flex-end; }
.trade-tag {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid rgba(240, 185, 11, 0.3);
  background: rgba(240, 185, 11, 0.07);
  color: var(--accent);
  font-family: var(--sans);
  font-size: 8.5px;
  line-height: 1.4;
  white-space: nowrap;
}
.review-tags-cell { white-space: normal !important; min-width: 160px; }
@media (max-width: 640px) {
  .review-auto { margin: 8px 8px 2px; padding: 8px 9px; }
  .review-auto-list { max-height: none; }
  .review-auto-head { gap: 4px; }
  .review-auto-time { white-space: normal; }
  .trade-tag { font-size: 9px; padding: 2px 6px; }
  .trade-tag-wrap { justify-content: flex-start; }
  .review-tags-cell { min-width: 0; }
}

/* ==========================================================================
   review deep link row
   ========================================================================== */

.review-link-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 10px 0;
  padding: 6px 10px;
  border: 1px dashed var(--border-2);
  border-radius: 4px;
  background: rgba(74, 168, 255, 0.03);
}
.review-link-label { font-size: 9.5px; color: var(--muted); letter-spacing: 0.4px; white-space: nowrap; }
.review-link-url {
  flex: 1 1 220px;
  min-width: 0;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--accent-2);
  word-break: break-all;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg-soft);
}
.review-copy-btn { min-height: 28px; flex: 0 0 auto; }
.review-link-hint { font-size: 9px; color: var(--dim); line-height: 1.5; }
@media (max-width: 640px) {
  .review-link-row { margin: 8px 8px 0; padding: 6px 8px; }
  .review-link-url { flex: 1 1 100%; }
  .review-copy-btn { min-height: 38px; min-width: 88px; }
}

/* ==========================================================================
   chart UX: toolbar actions, OHLC legend, countdown, latest button
   ========================================================================== */

.chart-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.chart-actions .btn { min-height: 26px; padding: 2px 8px; font-size: 10px; white-space: nowrap; }
.chart-latest.hidden { display: none; }
.chart-latest {
  border-color: rgba(240, 185, 11, 0.55);
  color: var(--accent);
  background: rgba(240, 185, 11, 0.1);
  animation: pulseGold 2s infinite;
}
@keyframes pulseGold {
  0% { box-shadow: 0 0 0 0 rgba(240, 185, 11, 0.35); }
  70% { box-shadow: 0 0 0 5px rgba(240, 185, 11, 0); }
  100% { box-shadow: 0 0 0 0 rgba(240, 185, 11, 0); }
}
.chart-meta .cm-countdown { font-family: var(--mono); font-size: 10px; color: var(--dim); white-space: nowrap; }
.chart-meta .cm-countdown.urgent { color: var(--accent); }
#chart-legend .legend-ohlc { gap: 3px; }
#chart-legend .legend-ohlc b { font-weight: 600; }
#chart-legend .legend-ohlc .lg-k { color: var(--dim); }
#chart-legend .legend-ohlc .lg-up { color: var(--up); }
#chart-legend .legend-ohlc .lg-down { color: var(--down); }

@media (max-width: 640px) {
  .chart-actions { gap: 4px; }
  .chart-actions .btn { min-height: 34px; padding: 0 6px; font-size: 9px; }
  .chart-toolbar { flex-wrap: wrap; row-gap: 4px; }
  .chart-meta .cm-countdown { font-size: 9px; }
}

/* ==========================================================================
   review: long/short analytics
   ========================================================================== */

.review-sides-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.review-side {
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel);
}
.review-side.side-long { border-left: 3px solid var(--up); }
.review-side.side-short { border-left: 3px solid var(--down); }
.review-side .rs-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.review-side .rs-title { font-size: 11px; font-weight: 700; color: var(--text-2); }
.review-side.side-long .rs-title { color: var(--up); }
.review-side.side-short .rs-title { color: var(--down); }
.review-side .rs-count { font-family: var(--mono); font-size: 10px; color: var(--muted); }
.review-side .rs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 8px; margin-top: 5px; }
.review-side .rs-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding: 1px 0; border-bottom: 1px dashed rgba(30, 38, 48, 0.6); font-size: 9.5px; }
.review-side .rs-kv .k { color: var(--dim); white-space: nowrap; }
.review-side .rs-kv .v { font-family: var(--mono); color: var(--text-2); text-align: right; }
.review-side.empty { opacity: 0.72; }
.review-side .rs-empty { margin-top: 6px; padding: 9px 6px; text-align: center; font-size: 9.5px; color: var(--dim); border: 1px dashed var(--border); border-radius: 3px; }

.review-side-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.review-side-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 7px;
  border: 1px solid var(--border-2);
  border-radius: 4px;
  font-size: 9.5px;
  color: var(--muted);
  background: var(--panel);
}
.review-side-chip b { font-weight: 700; }
.review-side-chip span { font-family: var(--mono); font-size: 9.5px; color: var(--text-2); }
.review-side-chip.side-long { border-color: rgba(14, 203, 129, 0.4); }
.review-side-chip.side-long b { color: var(--up); }
.review-side-chip.side-short { border-color: rgba(246, 70, 93, 0.4); }
.review-side-chip.side-short b { color: var(--down); }
.review-side-chip.side-none { border-color: var(--border-2); }
.review-side-chip.side-none b { color: var(--muted); }

@media (max-width: 640px) {
  .review-sides-grid { grid-template-columns: 1fr; }
  .review-side .rs-grid { grid-template-columns: 1fr 1fr; }
  .review-side-chip { font-size: 9px; padding: 3px 6px; }
}


/* offline / reconnect banner */
.offline-banner {
  position: fixed;
  top: var(--topbar-h, 46px);
  left: 0;
  right: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 6px 12px;
  background: rgba(246, 70, 93, 0.16);
  border-bottom: 1px solid rgba(246, 70, 93, 0.5);
  color: #ffd7dd;
  font-size: 12px;
}
.offline-banner.hidden { display: none; }
.offline-banner .ob-btn {
  border: 1px solid rgba(246, 70, 93, 0.7);
  background: rgba(246, 70, 93, 0.25);
  color: #fff;
  border-radius: 6px;
  padding: 3px 10px;
  cursor: pointer;
  font-size: 12px;
}
.offline-banner .ob-btn:hover { background: rgba(246, 70, 93, 0.4); }

/* ==========================================================================
   review: monthly 40% feasibility (Monte Carlo)
   ========================================================================== */

.review-monthly-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.rm-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 2px 7px;
  border: 1px solid var(--border-2);
  border-radius: 4px;
  background: var(--panel);
  font-size: 9.5px;
}
.rm-chip .k { color: var(--dim); }
.rm-chip b { font-family: var(--mono); font-weight: 600; color: var(--text-2); }
.rm-conf {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 9.5px;
  font-weight: 700;
  border: 1px solid var(--border-2);
  color: var(--muted);
}
.rm-conf.conf-low { border-color: rgba(246, 70, 93, 0.5); background: rgba(246, 70, 93, 0.1); color: var(--down); }
.rm-conf.conf-medium { border-color: rgba(240, 185, 11, 0.5); background: rgba(240, 185, 11, 0.1); color: var(--accent); }
.rm-conf.conf-ok { border-color: rgba(14, 203, 129, 0.5); background: rgba(14, 203, 129, 0.1); color: var(--up); }
.review-monthly-warn {
  margin: 5px 0 6px;
  padding: 5px 8px;
  border: 1px solid rgba(246, 70, 93, 0.35);
  border-left: 3px solid var(--down);
  border-radius: 4px;
  background: rgba(246, 70, 93, 0.06);
  color: #ff8b97;
  font-size: 9.5px;
  line-height: 1.55;
}
.review-monthly-empty {
  margin: 5px 0;
  padding: 10px 8px;
  text-align: center;
  font-size: 9.5px;
  color: var(--dim);
  border: 1px dashed var(--border);
  border-radius: 4px;
}
.review-monthly-tbl td { font-size: 9.5px; }
.review-monthly-tbl td.sc-label { min-width: 150px; }
.review-monthly-tbl .sc-name { font-size: 10px; color: var(--text-2); display: block; }
.review-monthly-tbl .sc-edge { display: inline-block; margin-top: 1px; font-family: var(--mono); font-size: 8.5px; color: var(--muted); }
.review-monthly-tbl .sc-detail { display: block; margin-top: 1px; font-size: 8.5px; color: var(--dim); line-height: 1.35; }
.review-monthly-tbl td.hit-good { color: var(--up); font-weight: 700; }
.review-monthly-tbl td.hit-mid { color: var(--accent); font-weight: 700; }
.review-monthly-tbl td.hit-bad { color: var(--down); font-weight: 700; }
.review-monthly-caveat {
  margin-top: 6px;
  padding-top: 5px;
  border-top: 1px dashed var(--border);
  font-size: 9px;
  line-height: 1.6;
  color: var(--dim);
}
@media (max-width: 640px) {
  .review-monthly-chips { gap: 4px; }
  .rm-chip { font-size: 9px; padding: 3px 6px; }
  .review-monthly-tbl td.sc-label { min-width: 0; }
}

/* ==========================================================================
   auth / login / roles / security
   ========================================================================== */

.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: radial-gradient(circle at 30% 20%, rgba(74, 168, 255, 0.12), transparent 55%), rgba(5, 7, 10, 0.94);
  backdrop-filter: blur(4px);
}
.login-overlay.hidden { display: none; }
.login-card {
  width: 100%;
  max-width: 380px;
  padding: 22px 22px 18px;
  border: 1px solid var(--border-2);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6);
}
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.login-logo {
  width: 44px; height: 44px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: linear-gradient(135deg, #2a5cff, #0ecb81);
  color: #fff; font-weight: 800; font-size: 16px; letter-spacing: 0.5px;
}
.login-title { font-size: 14px; font-weight: 700; color: var(--text); }
.login-sub { margin-top: 2px; font-size: 10px; color: var(--muted); }
.login-label { display: block; margin-bottom: 5px; font-size: 10px; color: var(--muted); }
.login-input { width: 100%; min-height: 40px; margin-bottom: 10px; font-family: var(--mono); }
.login-btn { width: 100%; min-height: 40px; font-size: 13px; }
.login-error {
  margin-top: 9px;
  padding: 7px 9px;
  border: 1px solid rgba(246, 70, 93, 0.4);
  border-radius: 4px;
  background: rgba(246, 70, 93, 0.07);
  color: #ff8b97;
  font-size: 10px;
  line-height: 1.5;
  word-break: break-word;
}
.login-error.hidden { display: none; }
.login-hint { margin-top: 12px; font-size: 9px; line-height: 1.65; color: var(--dim); }

.role-badge {
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid var(--border-2);
  font-size: 9.5px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}
.role-badge.role-admin { color: var(--up); border-color: rgba(14, 203, 129, 0.45); background: rgba(14, 203, 129, 0.08); }
.role-badge.role-control { color: var(--accent); border-color: rgba(240, 185, 11, 0.45); background: rgba(240, 185, 11, 0.08); }
.role-badge.role-view { color: #9fb0c3; border-color: rgba(159, 176, 195, 0.4); background: rgba(159, 176, 195, 0.08); }
.role-badge.hidden, #btn-logout.hidden { display: none; }

[data-role-denied] { opacity: 0.42; cursor: not-allowed !important; }
body.role-view .role-write-hint { display: block; }

.sec-role { font-size: 10px; color: var(--muted); margin-bottom: 8px; }
.sec-role b { color: var(--text-2); }
.sec-block { margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--border); }
.sec-title { font-size: 10.5px; font-weight: 700; color: var(--text-2); margin-bottom: 5px; }
.sec-row { display: flex; flex-wrap: wrap; gap: 5px; }
.sec-row .input { flex: 1 1 150px; min-width: 0; min-height: 30px; }
.sec-hours { flex: 0 1 76px !important; }
.sec-hint { margin-top: 4px; font-size: 8.5px; color: var(--dim); }
.sec-msg { margin-top: 6px; padding: 5px 8px; border-radius: 4px; font-size: 9.5px; line-height: 1.55; word-break: break-all; }
.sec-msg.ok { border: 1px solid rgba(14, 203, 129, 0.35); background: rgba(14, 203, 129, 0.06); color: var(--up); }
.sec-msg.err { border: 1px solid rgba(246, 70, 93, 0.4); background: rgba(246, 70, 93, 0.06); color: #ff8b97; }
.sec-empty { padding: 9px; text-align: center; font-size: 9.5px; color: var(--dim); border: 1px dashed var(--border); border-radius: 4px; }
.sec-shares td { font-size: 9.5px; }
.security-card.hidden { display: none; }

@media (max-width: 640px) {
  .login-card { padding: 18px 16px; }
  .login-input, .login-btn { min-height: 44px; }
  .sec-row .input { flex: 1 1 100%; min-height: 38px; }
  .sec-row .btn { min-height: 38px; }
  .role-badge { font-size: 9px; padding: 2px 6px; }
}

/* ==========================================================================
   paper / live mode separation
   ========================================================================== */

.mode-switch {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border-2);
  border-radius: 6px;
  overflow: hidden;
  flex: 0 0 auto;
}
.mode-btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 4px 10px;
  font-size: 10.5px;
  cursor: pointer;
  white-space: nowrap;
}
.mode-btn.active[data-mode="paper"] { background: rgba(14, 203, 129, 0.16); color: var(--up); font-weight: 700; }
.mode-btn.active[data-mode="live"] { background: rgba(246, 70, 93, 0.18); color: var(--down); font-weight: 700; }
.mode-btn:hover { color: var(--text); }

.mode-banner {
  margin: 6px 10px 0;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 10px;
  line-height: 1.55;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.mode-banner.paper {
  border: 1px solid rgba(14, 203, 129, 0.3);
  background: rgba(14, 203, 129, 0.05);
  color: var(--up);
}
.mode-banner.live {
  border: 1px solid rgba(246, 70, 93, 0.45);
  background: rgba(246, 70, 93, 0.08);
  color: #ff8b97;
}
.mode-banner .mb-sep { color: var(--dim); }
.mode-banner .mb-note { color: var(--muted); }
.mode-banner .mb-cta { margin-left: auto; }

.live-account.hidden { display: none; }
.live-account { border-color: rgba(246, 70, 93, 0.3); }
.live-account .acc-item { border-color: rgba(246, 70, 93, 0.14); }
.live-controls { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 10px; align-items: center; }
.live-controls .btn { min-height: 28px; font-size: 10px; }
.live-controls .live-hint { font-size: 9px; color: var(--dim); }
body.mode-live .mode-badge { color: var(--down); border-color: rgba(246, 70, 93, 0.45); }

/* shared strategy panels keep working in live mode */
body.mode-live #pane-signals::before,
body.mode-live #pane-review::before,
body.mode-live #pane-backtest::before,
body.mode-live #pane-risk::before,
body.mode-live #pane-config::before,
body.mode-live #pane-docs::before {
  content: "实盘模式下：策略统计与复盘基于模拟盘";
  display: block;
  margin: 8px 10px 0;
  padding: 4px 8px;
  border: 1px dashed rgba(240, 185, 11, 0.35);
  border-radius: 4px;
  background: rgba(240, 185, 11, 0.05);
  color: var(--accent);
  font-size: 9px;
}

@media (max-width: 640px) {
  .mode-switch { order: 2; }
  .mode-btn { padding: 3px 8px; font-size: 10px; }
  .mode-banner { margin: 6px 6px 0; font-size: 9.5px; }
  .live-controls { padding: 6px; }
  .live-controls .btn { flex: 1 1 calc(50% - 6px); min-height: 36px; }
}

/* generic hide helper (mode switch / paper-live separation relies on it) */
.hidden { display: none !important; }

/* ==========================================================================
   product UX upgrade: watch tools, freshness, skeleton, errors, cmdk, about
   ========================================================================== */

/* skeletons */
.sk { display: inline-block; height: 10px; border-radius: 4px; background: linear-gradient(90deg, #1b222c 25%, #26303c 37%, #1b222c 63%); background-size: 400% 100%; animation: skShimmer 1.4s ease infinite; }
.sk-line { height: 9px; }
.sk-w20 { width: 20%; } .sk-w30 { width: 30%; } .sk-w40 { width: 40%; } .sk-w60 { width: 60%; } .sk-w80 { width: 80%; }
.sk-row { display: flex; align-items: center; gap: 8px; padding: 9px 10px; }
.sk-row .sk { flex: 1 1 auto; }
@keyframes skShimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.chart-skeleton { position: absolute; inset: 12px; display: flex; flex-direction: column; gap: 10px; justify-content: center; pointer-events: none; }
.chart-skeleton.hidden { display: none; }
.chart-skeleton .sk { height: 12px; }
.skeleton-loading { opacity: 0.5; }
.chart-summary { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* freshness */
.freshness { padding: 2px 8px; border-radius: 10px; font-family: var(--mono); font-size: 9.5px; border: 1px solid var(--border-2); color: var(--muted); white-space: nowrap; }
.freshness.fresh { color: var(--up); border-color: rgba(14, 203, 129, 0.4); background: rgba(14, 203, 129, 0.08); }
.freshness.warn { color: var(--accent); border-color: rgba(240, 185, 11, 0.45); background: rgba(240, 185, 11, 0.09); }
.freshness.stale { color: var(--down); border-color: rgba(246, 70, 93, 0.5); background: rgba(246, 70, 93, 0.1); }

/* watchlist tools */
.watch-tools { display: flex; gap: 4px; flex-wrap: wrap; padding: 4px 8px 6px; border-bottom: 1px solid var(--border); }
.watch-tools .watch-search { flex: 1 1 100%; min-height: 28px; font-size: 10px; }
.watch-tools .watch-select { flex: 1 1 80px; min-height: 26px; font-size: 9.5px; padding: 1px 4px; }
.watch-tools .watch-show-all { flex: 1 1 90px; min-height: 26px; font-size: 9.5px; padding: 1px 6px; }
.watchlist { overscroll-behavior: contain; }

/* pane-level error */
.pane-error-banner {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 8px 10px; padding: 7px 10px;
  border: 1px solid rgba(246, 70, 93, 0.4);
  border-left: 3px solid var(--down);
  border-radius: 4px; background: rgba(246, 70, 93, 0.06);
  font-size: 10px; color: #ff8b97;
}
.pane-error-banner .peb-icon { width: 16px; height: 16px; border-radius: 50%; background: rgba(246, 70, 93, 0.2); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.pane-error-banner .peb-text { flex: 1 1 220px; line-height: 1.5; word-break: break-word; }
.pane-error-banner .peb-retry { min-height: 26px; }

/* command palette */
.cmdk-overlay, .help-overlay { position: fixed; inset: 0; z-index: 260; display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; background: rgba(4, 6, 9, 0.66); backdrop-filter: blur(3px); }
.cmdk-overlay.hidden, .help-overlay.hidden { display: none; }
.cmdk-card { width: 100%; max-width: 520px; border: 1px solid var(--border-2); border-radius: 9px; background: var(--panel); overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55); }
.cmdk-input { width: 100%; min-height: 46px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; padding: 0 14px; font-size: 13px; }
.cmdk-input:focus { outline: none; }
.cmdk-list { max-height: 46vh; overflow-y: auto; padding: 5px; }
.cmdk-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 38px; padding: 6px 10px; border: 0; border-radius: 5px; background: transparent; color: var(--text-2); font-size: 11.5px; text-align: left; cursor: pointer; }
.cmdk-item:hover, .cmdk-item.active { background: rgba(74, 168, 255, 0.12); color: var(--text); }
.cmdk-item .ci-hint { font-size: 9px; color: var(--dim); font-family: var(--mono); }
.cmdk-empty { padding: 18px; text-align: center; color: var(--dim); font-size: 10px; }
.cmdk-hint { padding: 6px 12px; border-top: 1px solid var(--border); font-size: 9px; color: var(--dim); }

/* help */
.help-card { width: 100%; max-width: 430px; border: 1px solid var(--border-2); border-radius: 9px; background: var(--panel); padding: 14px 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55); }
.help-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.help-head h3 { margin: 0; font-size: 13px; color: var(--text); }
.help-list { list-style: none; margin: 12px 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.help-list li { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--muted); }
.help-list kbd { min-width: 26px; padding: 2px 6px; border: 1px solid var(--border-2); border-bottom-width: 2px; border-radius: 4px; background: var(--bg-soft); color: var(--text-2); font-family: var(--mono); font-size: 9.5px; text-align: center; }
.help-list li span { margin-left: auto; }
.help-foot { font-size: 9px; color: var(--dim); }

/* about */
.about-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 12px; }
.about-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 2px 0; border-bottom: 1px dashed rgba(30, 38, 48, 0.6); font-size: 10px; }
.about-kv .k { color: var(--muted); }
.about-kv .v { font-family: var(--mono); color: var(--text-2); }
.about-note { margin-top: 6px; font-size: 9.5px; color: var(--dim); }
.about-disclaimer { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); font-size: 9.5px; color: var(--accent); line-height: 1.6; }

/* focus visibility + touch targets + mobile consistency */
button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
body { padding-bottom: env(safe-area-inset-bottom, 0px); }
@media (max-width: 640px) {
  .cmd-btn { display: inline-flex; min-height: 34px; }
  .mttab, .mtab, .mode-btn { min-height: 40px; }
  .btn, .input, .watch-select { min-height: 36px; }
  .watch-tools { padding: 4px 6px 6px; }
  .watch-tools .watch-search { min-height: 36px; }
  .watch-tools .watch-select, .watch-tools .watch-show-all { min-height: 34px; }
  .cmdk-overlay, .help-overlay { padding: 8vh 10px 10px; }
  .cmdk-item { min-height: 44px; }
  .main-grid { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .pane-error-banner { margin: 8px 8px; }
  .chart-shell { min-height: 0; }
  .freshness { font-size: 8.5px; padding: 2px 6px; }
}

/* ==========================================================================
   product v2: settings / notifications / pins / onboarding / changelog
   ========================================================================== */

.toast-stack { position: fixed; right: 14px; bottom: 18px; z-index: 320; display: flex; flex-direction: column; gap: 6px; max-width: 320px; pointer-events: none; }
.toast { padding: 8px 11px; border-radius: 6px; border: 1px solid var(--border-2); background: var(--panel); color: var(--text-2); font-size: 10.5px; line-height: 1.5; box-shadow: 0 8px 26px rgba(0,0,0,0.45); animation: toastIn 0.18s ease; }
.toast.notify { border-color: rgba(74,168,255,0.45); color: var(--accent-2); }
.toast.ok { border-color: rgba(14,203,129,0.45); color: var(--up); }
.toast.warn { border-color: rgba(240,185,11,0.5); color: var(--accent); }
@keyframes toastIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.settings-overlay, .onboarding-overlay, .changelog-overlay { position: fixed; inset: 0; z-index: 250; display: flex; align-items: flex-start; justify-content: center; padding: 7vh 14px 14px; background: rgba(4,6,9,0.66); backdrop-filter: blur(3px); overflow-y: auto; }
.settings-overlay.hidden, .onboarding-overlay.hidden, .changelog-overlay.hidden { display: none; }
.settings-card { width: 100%; max-width: 560px; border: 1px solid var(--border-2); border-radius: 10px; background: var(--panel); padding: 14px 16px; box-shadow: 0 22px 70px rgba(0,0,0,0.55); }
.settings-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.settings-head h3 { margin: 0; font-size: 14px; color: var(--text); }
.settings-body { margin-top: 10px; }
.settings-block { padding: 8px 0; border-bottom: 1px solid var(--border); }
.settings-block:last-child { border-bottom: 0; }
.settings-title { font-size: 10.5px; font-weight: 700; color: var(--accent-2); letter-spacing: 0.4px; margin-bottom: 6px; }
.settings-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 5px; }
.settings-label { font-size: 9.5px; color: var(--muted); }
.settings-select, .settings-input { min-height: 30px; font-size: 10px; flex: 1 1 100px; max-width: 190px; }
.settings-check { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; color: var(--muted); cursor: pointer; }
.settings-hint { font-size: 9px; color: var(--dim); line-height: 1.6; }
.accent-presets { display: inline-flex; gap: 5px; }
.accent-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.accent-dot.active { border-color: var(--text); box-shadow: 0 0 0 2px rgba(255,255,255,0.15); }
.alert-list, .pinned-list { margin-top: 5px; }
.alert-row, .pinned-row { display: flex; align-items: center; gap: 7px; padding: 4px 0; border-bottom: 1px dashed var(--border); font-size: 10px; }
.alert-sym, .pinned-sym { font-family: var(--mono); color: var(--text-2); min-width: 80px; }
.alert-cond { color: var(--muted); flex: 1 1 auto; }
.alert-row .btn, .pinned-row .btn { min-height: 24px; padding: 0 6px; font-size: 9px; }
.diag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 3px 10px; margin-bottom: 6px; }
.diag-kv { display: flex; justify-content: space-between; gap: 8px; font-size: 9.5px; border-bottom: 1px dashed var(--border); padding: 2px 0; }
.diag-kv .k { color: var(--dim); }
.diag-kv .v { font-family: var(--mono); color: var(--text-2); }
.settings-danger { padding-top: 10px; }
.density-compact .pane, .density-compact .panel { --density-gap: 4px; }
.density-compact .wl-row { padding-top: 4px; padding-bottom: 4px; }
.density-compact .pane-head { padding-top: 5px; padding-bottom: 4px; }

.onboarding-card, .changelog-card { width: 100%; max-width: 460px; border: 1px solid var(--border-2); border-radius: 10px; background: var(--panel); padding: 16px 18px; box-shadow: 0 22px 70px rgba(0,0,0,0.55); }
.onboarding-step { font-family: var(--mono); font-size: 9.5px; color: var(--accent); }
.onboarding-card h3 { margin: 6px 0 8px; font-size: 15px; color: var(--text); }
.onboarding-card p { margin: 0; font-size: 11px; line-height: 1.75; color: var(--muted); }
.onboarding-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.onboarding-foot .btn { min-height: 32px; }
.changelog-build { font-size: 9.5px; color: var(--dim); margin-bottom: 8px; }
.changelog-block { margin-top: 8px; }
.changelog-ver { font-size: 11px; font-weight: 700; color: var(--accent-2); }
.changelog-block ul { margin: 4px 0 0; padding-left: 18px; }
.changelog-block li { font-size: 10px; line-height: 1.7; color: var(--muted); }

.watchlist { position: relative; }
.wl-row { position: relative; }
.wl-pin { position: absolute; right: 2px; top: 2px; z-index: 2; border: 0; background: transparent; color: var(--dim); font-size: 11px; cursor: pointer; padding: 1px 3px; line-height: 1; }
.wl-pin:hover { color: var(--accent); }
.wl-row.pinned .wl-pin { color: var(--accent); }
.wl-row.pinned { background: rgba(240,185,11,0.045); }
.wl-divider { padding: 4px 10px 2px; font-size: 8.5px; letter-spacing: 0.6px; color: var(--dim); border-top: 1px solid var(--border); }
.empty-actions { margin-top: 8px; display: flex; gap: 6px; justify-content: center; }
.chart-empty .empty-actions .btn { min-height: 26px; font-size: 9.5px; }

@media (max-width: 640px) {
  .settings-overlay, .onboarding-overlay, .changelog-overlay { padding: 4vh 8px 10px; }
  .settings-card, .onboarding-card, .changelog-card { padding: 12px; }
  .settings-card { max-height: calc(100dvh - 6vh - 24px); overflow-y: auto; }
  .settings-select, .settings-input { max-width: none; flex: 1 1 100%; min-height: 38px; }
  .toast-stack { left: 10px; right: 10px; bottom: 12px; max-width: none; }
  .alert-row, .pinned-row { flex-wrap: wrap; }
}

/* ==========================================================================
   v3: inbox / signal history / audit / watchlist groups
   ========================================================================== */

.inbox-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 15px; height: 15px; padding: 0 4px; margin-left: 3px;
  border-radius: 8px; background: var(--down); color: #fff;
  font-size: 8.5px; font-family: var(--mono); font-weight: 700;
}
.inbox-badge.hidden { display: none; }

.inbox-overlay { position: fixed; inset: 0; z-index: 255; display: flex; align-items: flex-start; justify-content: flex-end; padding: 58px 12px 12px; background: rgba(4,6,9,0.45); }
.inbox-overlay.hidden { display: none; }
.inbox-card { width: 100%; max-width: 400px; max-height: 76vh; display: flex; flex-direction: column; border: 1px solid var(--border-2); border-radius: 9px; background: var(--panel); box-shadow: 0 18px 60px rgba(0,0,0,0.55); }
.inbox-head-actions { display: flex; gap: 4px; }
.inbox-head-actions .btn { min-height: 26px; font-size: 9px; padding: 0 7px; }
.inbox-unread { margin-left: 4px; color: var(--down); font-family: var(--mono); font-size: 11px; }
.inbox-list { overflow-y: auto; padding: 4px; }
.inbox-empty { padding: 22px 12px; text-align: center; color: var(--dim); font-size: 10px; line-height: 1.6; }
.inbox-item { display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 7px 8px; border: 0; border-bottom: 1px solid var(--border); border-radius: 4px; background: transparent; text-align: left; cursor: pointer; }
.inbox-item:hover { background: rgba(74,168,255,0.08); }
.inbox-item.unread { background: rgba(74,168,255,0.055); }
.ii-type { flex: 0 0 auto; padding: 1px 5px; border-radius: 3px; border: 1px solid var(--border-2); font-size: 8.5px; color: var(--muted); margin-top: 1px; }
.ii-type.ii-risk, .ii-type.ii-stop { color: var(--down); border-color: rgba(246,70,93,0.45); }
.ii-type.ii-price { color: var(--accent); border-color: rgba(240,185,11,0.45); }
.ii-type.ii-trade, .ii-type.ii-close { color: var(--up); border-color: rgba(14,203,129,0.4); }
.ii-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ii-title { font-size: 10.5px; color: var(--text-2); }
.ii-body { font-size: 9.5px; color: var(--muted); line-height: 1.45; word-break: break-word; }
.ii-time { flex: 0 0 auto; font-family: var(--mono); font-size: 8.5px; color: var(--dim); }

.watch-groups { display: flex; gap: 3px; flex: 1 1 100%; margin-bottom: 2px; }
.wg-btn { flex: 1 1 auto; min-height: 24px; padding: 1px 3px; border: 1px solid var(--border-2); border-radius: 4px; background: transparent; color: var(--muted); font-size: 9px; cursor: pointer; }
.wg-btn.active { color: var(--accent); border-color: rgba(240,185,11,0.5); background: rgba(240,185,11,0.08); font-weight: 700; }

.signals-filter { min-height: 26px; max-width: 110px; font-size: 9.5px; }
.signals-more { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px; }
.signals-more .btn { min-height: 28px; font-size: 10px; }
.signals-count { font-family: var(--mono); font-size: 9px; color: var(--dim); }

.audit-card.hidden { display: none; }
.audit-table td { font-size: 9.5px; }
.audit-lvl { display: inline-block; padding: 1px 5px; border-radius: 3px; border: 1px solid var(--border-2); font-size: 8.5px; color: var(--muted); }
.audit-lvl.audit-warn { color: var(--accent); border-color: rgba(240,185,11,0.4); }
.audit-lvl.audit-error { color: var(--down); border-color: rgba(246,70,93,0.45); }
.audit-lvl.audit-info { color: var(--accent-2); border-color: rgba(74,168,255,0.35); }

@media (max-width: 640px) {
  .inbox-overlay { padding: 50px 6px 6px; justify-content: center; }
  .inbox-card { max-height: 82vh; max-width: none; }
  .inbox-item { min-height: 44px; }
  .wg-btn { min-height: 32px; font-size: 9.5px; }
  .signals-more .btn { min-height: 38px; }
}

/* ==========================================================================
   v4: exchange-grade layout / order ticket / position ops
   ========================================================================== */

@media (min-width: 1101px) {
  .main-grid { grid-template-columns: 280px minmax(0,1fr) 320px; }
}
.resizer { flex: 0 0 auto; position: relative; z-index: 5; }
.resizer.rv { width: 4px; cursor: col-resize; background: transparent; }
.resizer.rv:hover, .resizer.rv.dragging { background: rgba(74,168,255,0.55); }
.resizer.rh { height: 4px; cursor: row-resize; background: transparent; }
.resizer.rh:hover { background: rgba(74,168,255,0.55); }
.resizer.hidden { display: none; }
.left-panel.layout-collapsed { display: none; }
.bottom-panel { overflow: hidden; }

body.chart-fullscreen .left-panel,
body.chart-fullscreen #right-panel,
body.chart-fullscreen .bottom-panel,
body.chart-fullscreen .resizer,
body.chart-fullscreen .account-strip,
body.chart-fullscreen .mode-banner { display: none !important; }
body.chart-fullscreen .main-grid { grid-template-columns: minmax(0,1fr) !important; }
body.chart-fullscreen .center-panel { height: calc(100vh - 120px); }

.order-ticket { margin: 8px 8px 10px; border: 1px solid var(--border-2); border-radius: 6px; background: var(--bg-soft); padding: 8px 9px; }
.ticket-live-note { margin: 8px; padding: 10px; font-size: 10px; color: var(--muted); border: 1px dashed var(--border); border-radius: 5px; text-align: center; }
.ticket-mini { margin: 8px; padding: 8px; font-size: 10px; color: var(--muted); border: 1px dashed var(--border); border-radius: 5px; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.tk-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.tk-title { font-size: 10.5px; font-weight: 700; color: var(--accent-2); letter-spacing: 0.4px; }
.tk-head .btn { min-height: 20px; padding: 0 5px; font-size: 9px; }
.tk-sym { margin: 4px 0 6px; font-family: var(--mono); font-size: 11px; color: var(--text-2); display: flex; gap: 6px; flex-wrap: wrap; }
.tk-ref { color: var(--dim); font-size: 8.5px; }
.tk-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 6px; }
.tk-sides .btn { min-height: 38px; font-size: 12px; font-weight: 700; }
.tk-buy { border: 1px solid rgba(14,203,129,0.55); color: var(--up); background: rgba(14,203,129,0.08); }
.tk-buy.active { background: rgba(14,203,129,0.22); color: #fff; }
.tk-sell { border: 1px solid rgba(246,70,93,0.55); color: var(--down); background: rgba(246,70,93,0.08); }
.tk-sell.active { background: rgba(246,70,93,0.24); color: #fff; }
.tk-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 3px 0; }
.tk-row .k { font-size: 9px; color: var(--muted); white-space: nowrap; }
.tk-row .v { display: flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 9.5px; color: var(--text-2); }
.tk-range { width: 86px; accent-color: var(--accent); }
.tk-num { min-height: 24px; width: 92px; font-size: 9.5px; text-align: right; }
.tk-quick { display: flex; gap: 4px; margin: 2px 0 5px; }
.tk-quick .btn { flex: 1 1 auto; min-height: 22px; padding: 0 4px; font-size: 9px; }
.tk-preview { margin-top: 6px; padding: 6px; border: 1px solid var(--border); border-radius: 4px; background: var(--panel); }
.tk-preview .tk-row .v { color: var(--text); }
.tk-msg { margin-top: 5px; padding: 4px 6px; border-radius: 3px; font-size: 9px; line-height: 1.5; }
.tk-msg.ok { border: 1px solid rgba(14,203,129,0.35); color: var(--up); }
.tk-msg.err { border: 1px solid rgba(246,70,93,0.4); color: #ff8b97; }
.tk-submit { width: 100%; margin-top: 7px; min-height: 34px; font-size: 11px; }
.tk-hint { margin-top: 4px; font-size: 8px; color: var(--dim); text-align: center; }

.pos-ops { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.pos-ops .pos-pct { min-height: 22px; width: 58px; font-size: 9px; padding: 0 2px; }
.pos-ops .btn { min-height: 22px; padding: 0 5px; font-size: 8.5px; }

.ob-row { cursor: pointer; }
.ob-row:hover { background: rgba(74,168,255,0.09) !important; }
.ob-last { cursor: pointer; }


@media (max-width: 640px) {
  .main-grid { grid-template-columns: minmax(0,1fr) !important; }
  .resizer { display: none; }
  .left-panel.layout-collapsed { display: none; }
  #ticket-open-btn { display: inline-flex; min-height: 34px; font-size: 10px; }
  .order-ticket {
    position: fixed; left: 8px; right: 8px; bottom: calc(58px + env(safe-area-inset-bottom, 0px));
    z-index: 240; max-height: 64vh; overflow-y: auto;
    display: none; box-shadow: 0 18px 60px rgba(0,0,0,0.6);
  }
  body.ticket-drawer-open .order-ticket { display: block; }
  .ticket-mini { display: none; }
  .tk-sides .btn { min-height: 44px; }
  .tk-submit { min-height: 44px; }
  .tk-quick .btn { min-height: 36px; }
}

/* ==========================================================================
   v5: limit order ticket + limit orders / cancel
   ========================================================================== */

.tk-type { display: inline-flex; border: 1px solid var(--border-2); border-radius: 4px; overflow: hidden; margin-bottom: 6px; }
.tk-type-btn { border: 0; background: transparent; color: var(--muted); padding: 3px 12px; font-size: 10px; cursor: pointer; }
.tk-type-btn.active { background: rgba(240,185,11,0.14); color: var(--accent); font-weight: 700; }
.tk-note { margin: 3px 0 5px; font-size: 8.5px; line-height: 1.5; color: var(--dim); }
.tk-note.limit { color: var(--accent); }
.tk-note-input { width: 120px; }
.limit-orders td, .limit-orders th { font-size: 9.5px; }
.section-title + .tbl-wrap { margin-bottom: 8px; }
.cancel-limit { min-height: 22px; padding: 0 7px; font-size: 8.5px; }

@media (max-width: 640px) {
  .tk-type-btn { min-height: 32px; font-size: 11px; }
  .limit-orders td, .limit-orders th { font-size: 9px; }
  .cancel-limit { min-height: 34px; }
}

/* ==========================================================================
   v6: live account parity (stats strip / gate orders / history)
   ========================================================================== */

.gate-open-orders td, .gate-open-orders th,
.gate-price-orders td, .gate-price-orders th,
.gate-closed-positions td, .gate-closed-positions th,
.gate-recent-trades td, .gate-recent-trades th { font-size: 9.5px; }
.gate-cancel-btn { min-height: 22px; padding: 0 7px; font-size: 8.5px; }
.gate-closed-positions td[data-label="盈亏"], .gate-recent-trades td[data-label="方向"] { font-family: var(--mono); }
.live-account .gate-section-title { margin: 8px 10px 4px; }
.live-account .tbl-wrap, .live-account .empty { margin: 0 10px 10px; }
#pane-history .gate-section-title, #pane-gate .gate-section-title { margin: 10px 10px 4px; }

@media (max-width: 640px) {
  .gate-cancel-btn { min-height: 34px; padding: 0 8px; }
  .gate-open-orders td, .gate-price-orders td,
  .gate-closed-positions td, .gate-recent-trades td { font-size: 9px; }
}

/* ==========================================================================
   v7: live stats baseline + reset
   ========================================================================== */

.gate-stats-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 8px 10px 4px; padding: 6px 8px;
  border: 1px dashed var(--border-2); border-radius: 4px; background: rgba(74,168,255,0.03);
}
.gate-stats-since { font-size: 10px; font-weight: 700; color: var(--accent-2); }
.gate-stats-note { font-size: 9px; color: var(--dim); flex: 1 1 auto; }
.gate-reset-stats { min-height: 26px; font-size: 9.5px; }
.acc-since .acc-sub { font-size: 9px; line-height: 1.5; white-space: normal; }

@media (max-width: 640px) {
  .gate-stats-head { margin: 8px 8px 4px; }
  .gate-reset-stats { min-height: 34px; flex: 1 1 100%; }
}

/* ==========================================================================
   v8: multi-user login / user management
   ========================================================================== */

.user-chip {
  padding: 2px 8px; border-radius: 10px; border: 1px solid var(--border-2);
  font-family: var(--mono); font-size: 9.5px; color: var(--text-2); background: var(--bg-soft); white-space: nowrap;
}
.user-chip.hidden { display: none; }
.account-scope-note {
  margin: 4px 10px 0; padding: 4px 9px; border: 1px solid rgba(74,168,255,0.35);
  border-radius: 4px; background: rgba(74,168,255,0.05); color: var(--accent-2); font-size: 9.5px;
}
.account-scope-note.hidden { display: none; }
.users-card.hidden { display: none; }
.users-table td { font-size: 9.5px; }
.admin-tag { font-size: 8px; padding: 1px 4px; border-radius: 3px; border: 1px solid rgba(240,185,11,0.45); color: var(--accent); }
.user-create-row { margin-bottom: 6px; }
.user-create-row .input { flex: 1 1 140px; min-height: 28px; font-size: 9.5px; }
@media (max-width: 640px) {
  .user-create-row .input, .user-create-row .btn { flex: 1 1 100%; min-height: 38px; }
  .user-chip { font-size: 9px; padding: 2px 6px; }
}

/* ==========================================================================
   v9: subscriptions / expiry
   ========================================================================== */

.user-chip.sub-warn { color: var(--accent); border-color: rgba(240,185,11,0.55); background: rgba(240,185,11,0.1); }
.user-chip.sub-expired { color: var(--down); border-color: rgba(246,70,93,0.6); background: rgba(246,70,93,0.1); }
.users-table tr.row-expired td { color: #ff8b97 !important; background: rgba(246,70,93,0.06); }
.users-table tr.row-soon td { background: rgba(240,185,11,0.045); }
.user-days-input { flex: 0 1 86px !important; min-height: 28px; font-size: 9.5px; }
.user-days-quick { display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0 6px; }
.user-days-quick .btn { min-height: 22px; padding: 0 7px; font-size: 9px; }
@media (max-width: 640px) {
  .user-days-quick .btn { min-height: 32px; }
  .users-table tr.row-expired td { font-size: 9px; }
}

/* diagnostic-only: emulate the <=1100px layout at any window width */
body.force-tablet { overflow: auto; }
body.force-tablet .app { height: auto; min-height: 100vh; overflow: visible; }
body.force-tablet .main-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 268px !important;
  gap: 4px; padding: 4px; flex: 1 1 auto; min-height: 0;
}
body.force-tablet .left-panel { display: none !important; }
body.force-tablet .center-panel { order: 0; height: auto; min-height: 0; flex: 1 1 auto; }
body.force-tablet .right-panel { order: 0; max-height: none; overflow-y: auto; }
body.force-tablet .bottom-panel { height: 32vh; min-height: 190px; margin: 0 4px 4px; }
body.force-tablet .resizer { display: none !important; }

/* ==========================================================================
   v10: responsive layout fix (blank main grid on tablet breakpoints)
   The JS 5-column template (252/1fr/296 desktop) must never apply while the
   tablet CSS hides the left panel and uses a 2-column grid, otherwise the
   center/right panels are auto-placed into the 4px resizer columns.
   ========================================================================== */

@media (max-width: 1100px) {
  .resizer { display: none !important; }
}
body.force-tablet .resizer { display: none !important; }

/* ==========================================================================
   v11: audit fixes (config label truncation / table overflow / mobile panes)
   ========================================================================== */

.cfg-field-label {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.35;
  word-break: break-word;
}
.cfg-field-label .cfg-path { display: inline; white-space: nowrap; }

.tbl-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tbl-wrap .tbl { min-width: 0; }

@media (max-width: 760px) {
  /* long history/signal lists should scroll inside the bottom pane instead of
     stretching the whole document to tens of thousands of pixels */
  .pane.active { max-height: 68vh; overflow-y: auto; overflow-x: hidden; }
  .doc-card .btn,
  .doc-card button,
  #pane-docs .btn { min-height: 34px; }
  .tbl-wrap { overflow-x: auto; }
}

/* touch targets on tablet/phone: compact desktop rows become >=34px tall */
@media (max-width: 1100px) {
  .pane .btn,
  .pane button,
  .topbar .btn,
  .mobile-tabbar .mtab { min-height: 34px; }
}
@media (pointer: coarse) {
  .pane .btn, .pane button { min-height: 34px; }
}

/* Safari sign-off: keep the phone symbol fully legible on a separate topbar row */
@media (max-width: 480px) {
  .topbar { flex-wrap: wrap; height: auto; min-height: 94px; row-gap: 4px; align-content: center; }
  .mobile-symbol { order: -1; flex: 1 1 100%; min-width: 0; }
  .topbar .top-right { flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
}

/* ==========================================================================
   v12: premium visual system (Bloomberg/Linear/Robinhood-Gold restraint)
   Layered dark surfaces, glass chrome, tabular numerics, quieter accents.
   ========================================================================== */

:root {
  --bg: #07090d;
  --bg-soft: #0b0e13;
  --panel: #0e1218;
  --panel-2: #121821;
  --panel-3: #18212b;
  --border: #1d2632;
  --border-2: #2b3646;
  --text: #e9eef6;
  --text-2: #c7d0dc;
  --muted: #8b98aa;
  --dim: #606d7e;
  --accent: #e8b84b;
  --accent-2: #5aa9ff;
  --up: #22c58b;
  --down: #ef5b6e;
  --radius: 8px;
  --premium-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
}

body {
  background:
    radial-gradient(1200px 520px at 18% -10%, rgba(90, 169, 255, 0.055), transparent 62%),
    radial-gradient(900px 460px at 88% -16%, rgba(232, 184, 75, 0.045), transparent 60%),
    var(--bg);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
  color: var(--text);
}

/* all numeric UI uses tabular figures */
.acc-value, .acc-sub, .tbl, .mono, .sym-tab .st-price, .sym-tab .st-chg,
.clock, .order-ticket, .tk-preview, .depth-row, .ob-row, .tr-row,
.gate-card .av, .pos-ops, .users-table, .chart-legend, .chart-meta {
  font-variant-numeric: tabular-nums;
}

/* ------------------------------ topbar ------------------------------ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(9, 12, 17, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.065);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.028) inset;
  transition: background 180ms ease, box-shadow 180ms ease;
}
body.scrolled .topbar {
  background: rgba(7, 9, 13, 0.9);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 14px 36px rgba(0, 0, 0, 0.42);
}
.brand-mark {
  border-radius: 8px;
  background: linear-gradient(145deg, #f4ca63 0%, #d9a338 55%, #b78323 100%);
  color: #141008;
  box-shadow: 0 3px 14px rgba(232, 184, 75, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.38);
}
.brand-en { letter-spacing: 1.8px; font-weight: 800; }

/* compact status capsules */
.conn, .mode-badge, .clock, .role-badge, .user-chip, .mode-switch {
  border-radius: 999px;
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
}
.conn { padding: 3px 9px; }
.mode-badge { letter-spacing: 0.8px; background: rgba(232, 184, 75, 0.09); border-color: rgba(232, 184, 75, 0.26); }
.mode-switch { overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); }
.mode-btn.active { background: rgba(232, 184, 75, 0.14); color: var(--accent); }

/* ------------------------------ buttons ------------------------------ */
.btn {
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)), var(--panel-2);
  border-color: rgba(255, 255, 255, 0.09);
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.btn:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)), var(--panel-3);
  border-color: rgba(232, 184, 75, 0.28);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.btn:active { transform: translateY(0); box-shadow: none; }
.btn-primary { background: linear-gradient(180deg, rgba(232, 184, 75, 0.2), rgba(232, 184, 75, 0.09)); border-color: rgba(232, 184, 75, 0.42); color: #f4cf78; }
.btn-primary:hover { background: linear-gradient(180deg, rgba(232, 184, 75, 0.28), rgba(232, 184, 75, 0.13)); }

/* --------------------------- account strip --------------------------- */
.account-strip {
  gap: 1px;
  background: rgba(255, 255, 255, 0.055);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.acc-item {
  position: relative;
  padding: 7px 12px;
  background: linear-gradient(180deg, #0c1015 0%, #0a0d12 100%);
}
.acc-item:first-child .acc-value { font-size: 19px; letter-spacing: -0.3px; }
.acc-label { font-size: 9.5px; letter-spacing: 0.7px; color: var(--dim); }
.acc-value { font-size: 15px; font-weight: 600; letter-spacing: -0.15px; }
.acc-sub { color: var(--dim); }
.acc-value.up { color: var(--up); }
.acc-value.down { color: var(--down); }
.gauge { height: 3px; background: rgba(255, 255, 255, 0.07); border-radius: 999px; }
.gauge-fill { border-radius: 999px; }

/* ------------------------------ panels ------------------------------ */
.panel {
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 10px;
  background: linear-gradient(180deg, #0f141b 0%, #0b0f15 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 10px 28px rgba(0, 0, 0, 0.16);
}
.panel-head {
  padding: 8px 12px;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}
.panel-title { font-size: 10.5px; font-weight: 600; letter-spacing: 0.8px; color: var(--text-2); }
.panel-head-note { color: var(--dim); }
.section-title { letter-spacing: 0.6px; color: var(--dim); }

/* ------------------------------ tables ------------------------------ */
.tbl-wrap { border-radius: 7px; }
.tbl th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #0d1117;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  color: var(--dim);
  font-weight: 600;
  letter-spacing: 0.45px;
}
.tbl td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.035);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.tbl td.l, .tbl th.l { text-align: left; }
.tbl tbody tr { transition: background 140ms ease; }
.tbl tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.012); }
.tbl tbody tr:hover td { background: rgba(232, 184, 75, 0.04); }

/* selected watchlist row: subtle gold rail */
.wl-row { border-left: 2px solid transparent; transition: background 140ms ease, border-color 140ms ease; }
.wl-row.active {
  background: linear-gradient(90deg, rgba(232, 184, 75, 0.11), rgba(232, 184, 75, 0.015));
  border-left-color: var(--accent);
}
.wl-row:hover { background: rgba(255, 255, 255, 0.035); }

/* ------------------------------- tabs ------------------------------- */
.tab { border-radius: 6px 6px 0 0; transition: color 150ms ease, border-color 150ms ease, background 150ms ease; }
.tab:hover { background: rgba(255, 255, 255, 0.03); }
.tab.active { background: linear-gradient(180deg, transparent, rgba(232, 184, 75, 0.07)); }

/* -------------------------- overlays / toast ------------------------- */
.settings-overlay, .onboarding-overlay, .changelog-overlay, .inbox-overlay, .cmdk-overlay {
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  backdrop-filter: blur(8px) saturate(1.2);
  background: rgba(4, 6, 9, 0.62);
}
.settings-card, .onboarding-card, .cmdk-card, .inbox-card {
  border-radius: 14px;
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.toast {
  border-radius: 9px;
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(15, 20, 27, 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.55);
}

/* ------------------------------ chart chrome ------------------------ */
.chart-toolbar { gap: 6px; }
.chart-toolbar .btn, .chart-toolbar .tf-btn, .chart-toolbar .chip {
  border-radius: 999px;
  padding-left: 9px;
  padding-right: 9px;
}
.chart-wrap { background: var(--panel, #0e1218); }

/* --------------------------- mobile polish --------------------------- */
@media (max-width: 760px) {
  .bottom-tabs {
    background: rgba(9, 12, 17, 0.72);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    backdrop-filter: blur(16px) saturate(1.2);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }
  .mobile-tabbar {
    background: rgba(8, 11, 15, 0.78);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
    backdrop-filter: blur(20px) saturate(1.3);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 -12px 34px rgba(0, 0, 0, 0.38);
  }
  body.ticket-drawer-open .order-ticket {
    border-radius: 18px 18px 0 0;
    border-color: rgba(255, 255, 255, 0.1);
    background: linear-gradient(180deg, #11161e 0%, #0a0d12 100%);
    box-shadow: 0 -22px 60px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
  .account-strip { background: rgba(255, 255, 255, 0.05); }
  .acc-item { padding: 7px 10px; }
}

/* ----------------------- motion (reduced-motion safe) ---------------- */
@media (prefers-reduced-motion: no-preference) {
  .wl-row, .tbl tbody tr, .acc-item, .panel, #ticket-host, .order-ticket {
    transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
  }
  .toast { animation: toastIn 180ms cubic-bezier(0.22, 0.8, 0.3, 1); }
}

/* ==========================================================================
   v13: analytics, indicator toggles, trade journal
   ========================================================================== */

.indicator-toggles { display: inline-flex; align-items: center; gap: 3px; margin-right: 6px; padding: 2px; border: 1px solid var(--border); border-radius: 999px; background: rgba(255,255,255,0.02); }
.ind-toggle { border: 0; border-radius: 999px; padding: 3px 8px; font-size: 9px; letter-spacing: 0.3px; color: var(--dim); background: transparent; transition: color 150ms ease, background 150ms ease; }
.ind-toggle:hover { color: var(--text-2); }
.ind-toggle.active { color: var(--accent); background: rgba(232,184,75,0.12); }

.acct-analytics { margin: 8px 10px 10px; border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; background: linear-gradient(180deg, #0e131a, #0a0e13); padding: 9px 11px; }
.an-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.an-title { font-size: 11px; font-weight: 700; letter-spacing: 0.6px; color: var(--text-2); }
.an-sub { font-size: 9px; color: var(--dim); font-weight: 400; margin-left: 5px; }
.an-ranges { display: inline-flex; gap: 3px; }
.an-range { border: 1px solid var(--border); background: transparent; color: var(--dim); border-radius: 999px; padding: 2px 8px; font-size: 9px; cursor: pointer; }
.an-range.active { color: var(--accent); border-color: rgba(232,184,75,0.35); background: rgba(232,184,75,0.08); }
.an-metrics { display: grid; grid-template-columns: repeat(8, minmax(72px, 1fr)); gap: 1px; background: rgba(255,255,255,0.045); border-radius: 6px; overflow: hidden; margin-bottom: 8px; }
.an-metric { background: #0b0f14; padding: 5px 7px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.an-label { font-size: 8.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-value { font-family: var(--mono); font-size: 11px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.an-chart { min-width: 0; border: 1px solid rgba(255,255,255,0.045); border-radius: 6px; background: rgba(0,0,0,0.14); padding: 5px 6px; }
.an-chart-cap { font-size: 8.5px; color: var(--dim); margin-bottom: 3px; letter-spacing: 0.3px; }
.an-chart canvas { display: block; width: 100%; }

.journal-overlay { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 14px; background: rgba(4,6,9,0.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.journal-overlay.hidden { display: none; }
.journal-card { width: 100%; max-width: 460px; border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; background: linear-gradient(180deg, #11161e, #0b0f14); box-shadow: 0 30px 90px rgba(0,0,0,0.62); padding: 13px 15px; }
.journal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.journal-head h3 { margin: 0; font-size: 13px; color: var(--text); }
.journal-sub { font-size: 9.5px; color: var(--dim); margin: 5px 0 8px; }
.journal-text { width: 100%; min-height: 120px; resize: vertical; font-size: 11px; line-height: 1.6; }
.journal-actions { display: flex; align-items: center; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.journal-hint { font-size: 8.5px; color: var(--dim); margin-left: auto; }
.journal-cell { text-align: left !important; }
.journal-btn { border: 1px dashed rgba(255,255,255,0.12); background: transparent; color: var(--dim); border-radius: 5px; padding: 1px 5px; font-size: 9px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.journal-btn:hover { color: var(--accent); border-color: rgba(232,184,75,0.35); }
.journal-btn.has-note { color: var(--text-2); border-style: solid; border-color: rgba(232,184,75,0.25); }

@media (max-width: 1100px) {
  .an-metrics { grid-template-columns: repeat(4, minmax(72px, 1fr)); }
}
@media (max-width: 760px) {
  .indicator-toggles { order: 3; margin: 2px 0 2px auto; }
  .an-charts { display: flex; overflow-x: auto; gap: 8px; scrollbar-width: none; }
  .an-charts::-webkit-scrollbar { display: none; }
  .an-chart { flex: 0 0 280px; }
  .an-metrics { grid-template-columns: repeat(2, minmax(86px, 1fr)); }
  .journal-card { max-width: 100%; }
}

/* ==========================================================================
   v16: bot status card + chart drawings/alerts
   ========================================================================== */

.bot-card {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 6px 10px 8px; padding: 8px 10px;
  border: 1px solid rgba(255,255,255,0.065); border-radius: 9px;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(0,0,0,0.08)), #0b0f14;
}
.bot-card-main { min-width: 0; flex: 1 1 auto; }
.bot-card-status { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.bot-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); }
.bot-dot.up { background: var(--up); box-shadow: 0 0 0 3px rgba(34,197,139,0.12); }
.bot-dot.warn { background: var(--accent); box-shadow: 0 0 0 3px rgba(232,184,75,0.12); }
.bot-state { font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px; }
.bot-state.up { color: var(--up); }
.bot-state.warn { color: var(--accent); }
.bot-state.dim { color: var(--dim); }
.bot-strategy { font-size: 9px; color: var(--muted); padding: 1px 6px; border: 1px solid rgba(255,255,255,0.08); border-radius: 999px; }
.bot-card-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bot-kv { display: inline-flex; align-items: baseline; gap: 4px; font-size: 9px; color: var(--dim); min-width: 0; }
.bot-kv b { font-family: var(--mono); font-size: 10px; color: var(--text-2); font-weight: 600; }
.bot-kv.bot-signal { flex: 1 1 180px; min-width: 0; }
.bot-kv.bot-signal b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.bot-card-actions { display: flex; gap: 5px; flex-wrap: wrap; flex: 0 0 auto; }
.bot-card-actions .btn { min-height: 26px; font-size: 9.5px; }

/* chart drawing layer */
.chart-draw-layer { position: absolute; inset: 0; pointer-events: none; z-index: 6; overflow: hidden; }
.draw-line { position: absolute; left: 0; right: 0; height: 18px; margin-top: -9px; pointer-events: auto; border-top: 1px dashed rgba(232,184,75,0.8); cursor: pointer; }
.draw-line:hover { border-top-color: var(--accent); background: rgba(232,184,75,0.035); }
.draw-label { position: absolute; right: 3px; top: -9px; padding: 1px 5px; border-radius: 4px; background: rgba(232,184,75,0.16); border: 1px solid rgba(232,184,75,0.4); color: var(--accent); font: 9px/1.4 var(--mono); white-space: nowrap; }
.draw-mini { display: none; position: absolute; top: -8px; width: 17px; height: 17px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.14); background: #0d1117; color: var(--muted); font-size: 10px; line-height: 15px; text-align: center; padding: 0; cursor: pointer; }
.draw-alert { right: 92px; }
.draw-del { right: 112px; color: var(--down); }
.draw-line:hover .draw-mini { display: inline-block; }
.draw-line:hover .draw-alert { display: inline-block; }
.chart-wrap.draw-mode canvas { cursor: crosshair; }
#btn-draw-line.active { color: var(--accent); border-color: rgba(232,184,75,0.42); background: rgba(232,184,75,0.1); }

@media (max-width: 760px) {
  .bot-card { flex-direction: column; align-items: stretch; gap: 7px; margin: 6px 8px 8px; }
  .bot-card-line { gap: 8px 10px; }
  .bot-kv.bot-signal { flex-basis: 100%; }
  .bot-card-actions { justify-content: stretch; }
  .bot-card-actions .btn { flex: 1 1 auto; min-height: 34px; }
  .draw-alert { right: 78px; }
  .draw-del { right: 96px; }
}

/* ==========================================================================
   v17: backtest parameter optimization (research)
   ========================================================================== */

.opt-card { margin: 8px 10px 10px; border: 1px solid rgba(255,255,255,0.065); border-radius: 10px; background: linear-gradient(180deg,#0e131a,#0a0e13); padding: 9px 11px; }
.opt-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.opt-title { font-size: 11.5px; font-weight: 700; color: var(--text-2); letter-spacing: 0.4px; }
.opt-tag { font-size: 8px; color: var(--accent); border: 1px solid rgba(232,184,75,0.35); border-radius: 999px; padding: 1px 6px; margin-left: 4px; }
.opt-head-note { font-size: 9px; color: var(--accent); }
.opt-form { margin-top: 7px; }
.opt-form-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.opt-form-label { font-size: 9px; color: var(--dim); }
.opt-pill { font: 9px/1.4 var(--mono); color: var(--text-2); border: 1px solid rgba(255,255,255,0.09); border-radius: 999px; padding: 1px 7px; }
.opt-count { font: 9px/1.4 var(--mono); color: var(--up); }
.opt-count.err { color: var(--down); }
.opt-fields { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: 8px; }
.opt-field { min-width: 0; border: 1px solid rgba(255,255,255,0.05); border-radius: 7px; background: rgba(0,0,0,0.12); padding: 6px 7px; }
.opt-field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 5px; font-size: 9px; color: var(--muted); margin-bottom: 4px; }
.opt-field-unit { font-size: 8px; color: var(--dim); }
.opt-checks { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 4px; }
.opt-check { display: inline-flex; align-items: center; gap: 3px; border: 1px solid rgba(255,255,255,0.1); border-radius: 999px; padding: 1px 7px; font: 9px/1.5 var(--mono); color: var(--muted); cursor: pointer; }
.opt-check.checked { color: var(--accent); border-color: rgba(232,184,75,0.35); background: rgba(232,184,75,0.08); }
.opt-check input { width: 10px; height: 10px; margin: 0; accent-color: var(--accent); }
.opt-custom { width: 100%; min-height: 24px; font-size: 9px; }
.opt-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.opt-hint { font-size: 8.5px; color: var(--dim); }
.opt-status { margin-top: 6px; font-size: 9.5px; color: var(--dim); }
.opt-status.err { color: var(--down); }
.opt-status.running { color: var(--accent); }
.opt-progress { margin-top: 7px; }
.opt-progress-meta { font: 9px/1.5 var(--mono); color: var(--dim); margin-bottom: 3px; }
.opt-bar { height: 4px; border-radius: 999px; background: rgba(255,255,255,0.07); overflow: hidden; }
.opt-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); }
.opt-table-wrap { margin-top: 6px; max-height: 260px; }
.opt-table th, .opt-table td { font-size: 9px; }
.opt-row.best td { background: rgba(232,184,75,0.075) !important; border-top: 1px solid rgba(232,184,75,0.25); border-bottom: 1px solid rgba(232,184,75,0.25); }
.opt-row.err td { color: var(--down); }
.opt-oos-neg { color: var(--down) !important; font-weight: 600; }
.opt-foot-note { font-size: 8.5px; color: var(--dim); margin-top: 5px; }

@media (max-width: 1100px) {
  .opt-fields { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .opt-fields { grid-template-columns: 1fr; }
  .opt-card { margin: 6px 8px 8px; }
  .opt-head-note { flex-basis: 100%; }
  .opt-actions .btn { min-height: 34px; }
}

/* ==========================================================================
   v18: drawing tool menu, trendline, Fibonacci, measure
   ========================================================================== */

.draw-tools { position: relative; display: inline-flex; align-items: center; gap: 3px; }
.draw-menu { position: absolute; top: 30px; right: 0; z-index: 40; min-width: 170px; padding: 4px; border: 1px solid rgba(255,255,255,0.1); border-radius: 9px; background: rgba(12,16,22,0.97); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 16px 42px rgba(0,0,0,0.55); }
.draw-menu.hidden { display: none; }
.draw-menu button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 5px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--text-2); font-size: 10px; cursor: pointer; text-align: left; }
.draw-menu button:hover, .draw-menu button.active { background: rgba(232,184,75,0.1); color: var(--accent); }
.draw-menu .dm-k { color: var(--dim); font-size: 9px; margin-left: 12px; }
.draw-clear { font-size: 9px; }

.dw-item { position: absolute; inset: 0; pointer-events: none; }
.tl-line { position: absolute; height: 1px; background: var(--accent); transform-origin: 0 0; pointer-events: auto; opacity: 0.85; }
.tl-line:hover { opacity: 1; box-shadow: 0 0 0 1px rgba(232,184,75,0.25); }
.dw-dot { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--accent); border: 1px solid rgba(10,12,16,0.9); pointer-events: auto; }
.dw-pending { background: var(--accent-2); }
.dw-del { position: absolute; width: 17px; height: 17px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.15); background: #0d1117; color: var(--down); font-size: 11px; line-height: 14px; padding: 0; cursor: pointer; opacity: 0; pointer-events: auto; }
.dw-item:hover .dw-del { opacity: 1; }
.fib-item { pointer-events: none; }
.fib-line { position: absolute; height: 0; border-top: 1px dashed rgba(232,184,75,0.62); pointer-events: auto; }
.fib-line:hover { border-top-color: var(--accent); }
.fib-label { position: absolute; right: 2px; top: -8px; font: 8.5px/1.3 var(--mono); color: var(--accent); background: rgba(12,16,22,0.86); padding: 0 3px; border-radius: 3px; white-space: nowrap; transform: translateX(100%); }
.measure-wrap { position: absolute; inset: 0; pointer-events: none; }
.measure-line { position: absolute; height: 1px; background: var(--accent-2); transform-origin: 0 0; border-top: 1px dashed rgba(90,169,255,0.9); }
.measure-dot { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--accent-2); }
.measure-box { position: absolute; z-index: 2; padding: 2px 6px; border-radius: 5px; border: 1px solid rgba(90,169,255,0.35); background: rgba(10,14,20,0.92); color: var(--accent-2); font: 9px/1.4 var(--mono); white-space: nowrap; }
.measure-box.up { color: var(--up); border-color: rgba(34,197,139,0.35); }
.measure-box.down { color: var(--down); border-color: rgba(239,91,110,0.35); }
@media (max-width: 760px) {
  .draw-menu button { min-height: 34px; font-size: 11px; }
  .draw-clear { display: none; }
  .dw-del { opacity: 1; width: 22px; height: 22px; }
  .fib-label { font-size: 8px; }
}