/* ============================================================
   MEXC Bot dashboard — "instrument panel" theme
   ink base · sienna accent · semantic up/down
   ============================================================ */
:root{
  --ink:#0E1116; --panel:#161B22; --panel2:#1B212A; --line:#232A33;
  --text:#E6E8EB; --muted:#8A94A2; --faint:#5A6472;
  --sienna:#C2683B; --sienna-dim:#8f4d2c;
  --up:#3FB68B; --down:#E5604D;
  --radius:10px;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --disp:'Space Grotesk',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--ink); color:var(--text); font-family:var(--body);
  font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased;
}
a{color:var(--sienna)}
.mono{font-family:var(--mono)}
.up{color:var(--up)} .down{color:var(--down)}

/* ---- header -------------------------------------------------- */
header{
  display:flex; align-items:center; gap:18px;
  padding:14px 22px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#11151b,#0E1116);
  position:sticky; top:0; z-index:20;
}
.brand{font-family:var(--disp); font-weight:700; letter-spacing:.5px; font-size:17px}
.brand small{color:var(--sienna); font-weight:500}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;background:var(--faint)}
.dot.on{background:var(--up);box-shadow:0 0 0 3px rgba(63,182,139,.18)}
.run{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}
.spacer{flex:1}
.tick{color:var(--faint);font-size:12px;font-family:var(--mono)}

/* the mode badge is a safety device — make it impossible to miss */
.mode-badge{
  font-family:var(--disp); font-weight:700; letter-spacing:2px; font-size:13px;
  padding:7px 16px; border-radius:6px; border:1.5px solid;
}
.mode-badge.demo{color:var(--up); border-color:var(--up); background:rgba(63,182,139,.08)}
.mode-badge.live{color:#fff; border-color:var(--down); background:var(--down);
  animation:pulse 2.2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(229,96,77,.5)}50%{box-shadow:0 0 0 6px rgba(229,96,77,0)}}

/* ---- buttons ------------------------------------------------- */
button{font-family:var(--body);cursor:pointer;border-radius:7px;border:1px solid var(--line);
  background:var(--panel2);color:var(--text);padding:8px 14px;font-size:13px;font-weight:500;
  transition:.12s}
button:hover{border-color:var(--faint)}
button:disabled{opacity:.4;cursor:not-allowed}
button.primary{background:var(--sienna);border-color:var(--sienna);color:#0E1116;font-weight:600}
button.primary:hover{background:#d4754a}
button.danger{border-color:var(--sienna-dim);color:var(--sienna)}
button.danger:hover{background:rgba(194,104,59,.12)}
button.ghost{background:transparent}

/* ---- header dropdown menus (exchange picker, trading halts) --------- */
.menu-wrap{position:relative;display:inline-block}
.dropdown-panel{position:absolute;top:calc(100% + 6px);right:0;z-index:50;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 8px 24px rgba(0,0,0,.35);padding:8px;min-width:180px}
.dropdown-panel.wide{min-width:640px;right:0}
.dropdown-panel button{display:block;width:100%;text-align:left;margin-bottom:4px}
.dropdown-panel button:last-child{margin-bottom:0}
.dropdown-panel table{width:100%}


/* ---- layout -------------------------------------------------- */
main{max-width:1180px;margin:0 auto;padding:22px}
.grid{display:grid;gap:16px}
.cards{grid-template-columns:repeat(4,1fr)}
.cols{grid-template-columns:1fr 1fr}
@media(max-width:880px){.cards{grid-template-columns:repeat(2,1fr)}.cols{grid-template-columns:1fr}}
@media(max-width:520px){.cards{grid-template-columns:1fr}header{flex-wrap:wrap;gap:10px}}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.panel h3{margin:0 0 12px;font-family:var(--disp);font-size:12px;font-weight:600;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}

.card .label{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.card .value{font-family:var(--mono);font-size:26px;font-weight:600;margin-top:6px}
.card .sub{font-family:var(--mono);font-size:13px;margin-top:2px;color:var(--muted)}

/* ---- table --------------------------------------------------- */
table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:13px}
th{text-align:left;color:var(--faint);font-weight:500;font-size:11px;letter-spacing:.5px;
  text-transform:uppercase;padding:6px 8px;border-bottom:1px solid var(--line)}
td{padding:8px;border-bottom:1px solid #1c222b}
tr:last-child td{border-bottom:none}
.tag{font-size:11px;padding:2px 7px;border-radius:4px;text-transform:uppercase;letter-spacing:.5px}
.tag.long{color:var(--up);background:rgba(63,182,139,.12)}
.tag.short{color:var(--down);background:rgba(229,96,77,.12)}
.empty{color:var(--faint);text-align:center;padding:22px 0;font-family:var(--body)}

/* ---- log ----------------------------------------------------- */
#log{height:260px;overflow:auto;font-family:var(--mono);font-size:12px;line-height:1.7}
#log .row{display:flex;gap:10px}
#log .t{color:var(--faint)}
#log .INFO{color:var(--text)} #log .ERROR{color:var(--down)} #log .WARNING{color:var(--sienna)}

/* ---- equity curve ------------------------------------------- */
#curve{width:100%;height:120px;display:block}

/* ---- strip --------------------------------------------------- */
.strip{display:flex;flex-wrap:wrap;gap:26px;font-size:13px}
.strip div span{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:1px;display:block}
.strip div b{font-family:var(--mono);font-weight:600}

/* ---- halt banner -------------------------------------------- */
#halt{display:none;background:rgba(229,96,77,.12);border:1px solid var(--down);
  color:var(--down);padding:12px 16px;border-radius:var(--radius);margin-bottom:16px;
  font-weight:500;align-items:center;gap:12px}
#halt.show{display:flex}

/* ---- modal --------------------------------------------------- */
.modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:50;
  align-items:center;justify-content:center;padding:20px}
.modal-bg.show{display:flex}
.modal{background:var(--panel);border:1px solid var(--down);border-radius:12px;
  max-width:440px;padding:24px}
.modal h2{font-family:var(--disp);margin:0 0 8px;color:var(--down)}
.modal p{color:var(--muted);font-size:13px}
.modal input{width:100%;background:var(--ink);border:1px solid var(--line);color:var(--text);
  padding:10px;border-radius:7px;font-family:var(--mono);margin:10px 0}
.modal .actions{display:flex;gap:10px;justify-content:flex-end}

/* ---- login --------------------------------------------------- */
.login-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh}
.login{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:32px;width:340px}
.login h1{font-family:var(--disp);font-size:20px;margin:0 0 4px}
.login p{color:var(--muted);font-size:13px;margin:0 0 20px}
.login input{width:100%;background:var(--ink);border:1px solid var(--line);color:var(--text);
  padding:11px;border-radius:7px;margin-bottom:12px;font-family:var(--body)}
.login button{width:100%;margin-top:6px}
.err{color:var(--down);font-size:13px;margin-bottom:10px}
.controls{display:flex;gap:8px;flex-wrap:wrap}

/* scrollable table box (recent trades) — matches the activity log */
.tblscroll{max-height:260px;overflow-y:auto}
.tblscroll thead th{position:sticky;top:0;background:var(--panel);z-index:1}

/* HORIZONTAL scroll wrapper for wide tables (Open positions, Live signals).
   Without this, a table wider than the viewport forces the WHOLE PAGE to
   scroll sideways on mobile - header, buttons, everything - instead of
   just the table itself staying put while only its rows scroll. */
.tblscroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.tblscroll-x table{min-width:640px}  /* keeps columns readable instead of illegibly squished */
/* keep the performance panel compact (just the stats, no wasted height) */
#perfStats{min-height:0}

/* ---- market context ----------------------------------------- */
.ctx-gauges{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:14px}
.gauge{flex:1;min-width:150px;background:var(--panel2);border:1px solid var(--line);
  border-radius:8px;padding:12px 14px}
.gauge .g-label{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}
.gauge .g-value{font-family:var(--mono);font-size:22px;font-weight:600;margin-top:4px}
.gauge .g-sub{font-size:12px;color:var(--muted);margin-top:2px}
.meter{height:6px;border-radius:3px;background:linear-gradient(90deg,#E5604D,#C2683B,#3FB68B);
  margin-top:10px;position:relative}
.meter .pin{position:absolute;top:-3px;width:3px;height:12px;background:#fff;border-radius:2px;
  transform:translateX(-50%)}
.ctx-bias{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.bias-chip{font-family:var(--mono);font-size:12px;padding:6px 11px;border-radius:6px;
  border:1px solid var(--line);background:var(--panel2)}
.bias-chip b{font-family:var(--disp)}
.bias-chip.long{border-color:rgba(63,182,139,.5)} .bias-chip.long b{color:var(--up)}
.bias-chip.short{border-color:rgba(229,96,77,.5)} .bias-chip.short b{color:var(--down)}
.bias-chip.neutral b{color:var(--muted)}
.headlines{display:flex;flex-direction:column;gap:1px}
.hl{display:flex;gap:10px;align-items:baseline;padding:7px 0;border-top:1px solid #1c222b;font-size:13px}
.hl .hl-dot{width:7px;height:7px;border-radius:50%;flex:none;margin-top:5px}
.hl a{color:var(--text);text-decoration:none}
.hl a:hover{color:var(--sienna)}
.hl .hl-src{color:var(--faint);font-size:11px;font-family:var(--mono);flex:none}
.ctx-updated{color:var(--faint);font-size:11px;font-family:var(--mono);margin-top:10px}
.ctx-off{color:var(--faint);font-family:var(--body);padding:8px 0}

/* settings panel */
.settings-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:700px){.settings-grid{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.settings-grid{grid-template-columns:1fr}}
.settings-grid label{display:flex;flex-direction:column;gap:6px;font-size:11px;
  letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
.settings-grid input,.settings-grid select{background:var(--ink);border:1px solid var(--line);
  color:var(--text);padding:9px 10px;border-radius:7px;font-family:var(--mono);font-size:14px}
.settings-grid input:focus,.settings-grid select:focus{outline:none;border-color:var(--sienna)}