:root {
  --bg: #0b0e11;
  --bg-elev: #12161c;
  --bg-panel: #161a21;
  --bg-hover: #1c222b;
  --line: #2b3139;
  --text: #eaecef;
  --muted: #848e9c;
  --green: #0ecb81;
  --green-dim: rgba(14, 203, 129, 0.12);
  --red: #f6465d;
  --red-dim: rgba(246, 70, 93, 0.12);
  --yellow: #f0b90b;
  --yellow-dim: rgba(240, 185, 11, 0.12);
  --blue: #3b82f6;
  --radius: 10px;
  --font: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
}

button, input, select { font-family: inherit; }

.app {
  display: grid;
  grid-template-rows: 56px 1fr 28px;
  height: 100%;
  min-height: 100vh;
}

/* Header */
.header {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-elev);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 180px;
}

.logo {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--yellow), #c99400);
  display: grid;
  place-items: center;
  font-weight: 700;
  color: #111;
  font-size: 14px;
}

.brand h1 {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0.2px;
}

.brand small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.stats {
  display: flex;
  gap: 22px;
  flex: 1;
  overflow-x: auto;
}

.stat label {
  display: block;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 2px;
}

.stat strong {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
}

.up { color: var(--green); }
.down { color: var(--red); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn {
  border: 1px solid var(--line);
  background: var(--bg-panel);
  color: var(--text);
  border-radius: 6px;
  padding: 7px 12px;
  cursor: pointer;
  font-size: 12px;
}

.btn:hover { background: var(--bg-hover); }

.btn-ghost {
  background: transparent;
}

/* Layout */
.workspace {
  display: grid;
  grid-template-columns: 380px 1fr 320px;
  min-height: 0;
}

.panel {
  border-right: 1px solid var(--line);
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.panel:last-child { border-right: none; border-left: 1px solid var(--line); }

.panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.tabs {
  display: flex;
  gap: 4px;
}

.tab {
  background: transparent;
  border: 0;
  color: var(--muted);
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
}

.tab.active {
  background: var(--bg-hover);
  color: var(--text);
}

.search {
  flex: 1;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 6px;
  padding: 7px 10px;
  outline: none;
}

.search:focus { border-color: #3f4a57; }

.markets {
  overflow: auto;
  flex: 1;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th {
  position: sticky;
  top: 0;
  background: var(--bg-elev);
  color: var(--muted);
  font-weight: 500;
  text-align: left;
  padding: 8px 10px;
  font-size: 11px;
  cursor: pointer;
  user-select: none;
}

td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(43, 49, 57, 0.5);
  font-family: var(--mono);
  font-size: 12px;
}

tr.market-row { cursor: pointer; }
tr.market-row:hover { background: var(--bg-hover); }
tr.market-row.selected { background: rgba(240, 185, 11, 0.08); }

.pair {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font);
}

.pair img, .coin-fallback {
  width: 18px;
  height: 18px;
  border-radius: 50%;
}

.coin-fallback {
  background: #2b3139;
  display: grid;
  place-items: center;
  font-size: 8px;
  color: var(--muted);
}

.star {
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  padding: 0 2px;
}

.star.on { color: var(--yellow); }

.right { text-align: right; }

/* Chart / trade */
.chart-wrap {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 0;
}

.pair-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  gap: 12px;
}

.pair-main {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.pair-main h2 { font-size: 18px; }
.pair-main .price { font-family: var(--mono); font-size: 20px; }

.intervals { display: flex; gap: 4px; }

.intervals button {
  background: transparent;
  border: 0;
  color: var(--muted);
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
}

.intervals button.active {
  background: var(--bg-hover);
  color: var(--yellow);
}

.chart-box {
  position: relative;
  min-height: 280px;
}

#chart {
  width: 100%;
  height: 100%;
}

.trade-box {
  border-top: 1px solid var(--line);
  padding: 12px 14px 16px;
  background: var(--bg-elev);
}

.mode-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}

.mode-tabs button {
  background: transparent;
  border: 0;
  color: var(--muted);
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
}

.mode-tabs button.active {
  background: var(--bg-hover);
  color: var(--text);
}

.bot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.bot-grid .field { margin-bottom: 0; }

.bot-grid input, .bot-grid select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: var(--mono);
  outline: none;
}

.check {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  margin: 10px 0;
}

.bot-status {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  margin: 10px 0;
  font-family: var(--mono);
  font-size: 11px;
}

.bot-status span { color: var(--muted); }

.bot-on {
  background: var(--green);
  color: #06291c;
}

.bot-off {
  background: var(--bg-panel);
  color: var(--text);
  border: 1px solid var(--line);
}

.live-pill {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--green);
  border: 1px solid rgba(14, 203, 129, 0.35);
  background: var(--green-dim);
  border-radius: 999px;
  padding: 5px 10px;
}

.live-pill.on { display: flex; }

.live-pill i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse 1.2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.log-item {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(43,49,57,.45);
  font-size: 12px;
}

.log-item time {
  display: block;
  color: var(--muted);
  font-size: 10px;
  margin-top: 2px;
}

.side-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 12px;
}

.side-toggle button {
  border: 1px solid var(--line);
  background: var(--bg-panel);
  color: var(--muted);
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}

.side-toggle button.buy.active {
  background: var(--green-dim);
  color: var(--green);
  border-color: rgba(14, 203, 129, 0.4);
}

.side-toggle button.sell.active {
  background: var(--red-dim);
  color: var(--red);
  border-color: rgba(246, 70, 93, 0.4);
}

.field { margin-bottom: 10px; }

.field label {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  margin-bottom: 5px;
  font-size: 11px;
}

.field input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 6px;
  padding: 9px 10px;
  font-family: var(--mono);
  outline: none;
}

.pct-row { display: flex; gap: 6px; margin-bottom: 12px; }

.pct-row button {
  flex: 1;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 4px;
  padding: 5px;
  cursor: pointer;
}

.submit-trade {
  width: 100%;
  border: 0;
  border-radius: 6px;
  padding: 11px;
  font-weight: 650;
  cursor: pointer;
  font-size: 13px;
}

.submit-trade.buy { background: var(--green); color: #06291c; }
.submit-trade.sell { background: var(--red); color: #fff; }

.hint {
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
}

/* Right column */
.holdings, .history {
  overflow: auto;
}

.card-list { padding: 8px; }

.pos {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 8px;
}

.pos-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.pos-meta {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 11px;
  font-family: var(--mono);
}

.empty {
  color: var(--muted);
  text-align: center;
  padding: 32px 16px;
}

.hist-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(43,49,57,.45);
  font-size: 12px;
}

.badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.badge.buy { background: var(--green-dim); color: var(--green); }
.badge.sell { background: var(--red-dim); color: var(--red); }

.status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  background: var(--bg-elev);
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  display: inline-block;
  margin-right: 6px;
}

.toast {
  position: fixed;
  right: 16px;
  bottom: 44px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  padding: 10px 14px;
  border-radius: 8px;
  display: none;
  z-index: 20;
}

.modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: none;
  place-items: center;
  z-index: 30;
}

.modal {
  width: min(420px, calc(100% - 24px));
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
}

.modal h3 { margin-bottom: 8px; }
.modal p { color: var(--muted); line-height: 1.5; margin-bottom: 14px; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; }

@media (max-width: 1100px) {
  .workspace {
    grid-template-columns: 1fr;
    grid-template-rows: 320px 1fr auto;
  }
  .panel { border-right: 0; border-bottom: 1px solid var(--line); }
  .panel:last-child { border-left: 0; }
}