/**
 * EO Trading Bot v8.0.0 — Design System CSS
 *
 * BEM architecture: eotb-* namespace
 * Mobile-first, dark navy palette, accent #E94560
 * Breakpoint: ≤768px → mobile layout
 *
 * Components:
 *   Shell · Header · Nav · Panels · Trade layout · Symbols · BotBar
 *   Console · Stats · Controls · Marketplace cards · My Bots list
 *   Backtester · History table · Community/Wall · Modals · Toasts
 *   Inputs · Buttons · Chips · Labels · Tags · Avatars · Utilities
 */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=JetBrains+Mono:wght@400;500&display=swap');

/* ══════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS
══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Backgrounds */
  --bg0: #080F1C;
  --bg1: #0D1726;
  --bg2: #121F32;
  --bg3: #192A42;
  --bg4: #1E3250;

  /* Borders */
  --bd:  #1E3354;
  --bds: #152844;

  /* Text */
  --t1: #E8EDF5;
  --t2: #8FAAC8;
  --t3: #4E6D8C;

  /* Accents */
  --ac:     #E94560;
  --acd:    rgba(233,69,96,.14);
  --ac-hov: #F0526D;

  /* Semantic */
  --win: #22C55E;
  --los: #EF4444;
  --wrn: #F59E0B;
  --inf: #38BDF8;

  /* Transparent semantic */
  --win-bg: rgba(34,197,94,.12);
  --los-bg: rgba(239,68,68,.12);
  --wrn-bg: rgba(245,158,11,.12);
  --inf-bg: rgba(56,189,248,.12);

  /* Typography */
  --font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
  --fz:   13.5px;
  --lh:   1.55;

  /* Radius */
  --rsm: 6px;
  --rmd: 10px;
  --rlg: 14px;
  --rxl: 18px;

  /* Spacing */
  --sp1: 4px;
  --sp2: 8px;
  --sp3: 12px;
  --sp4: 16px;
  --sp5: 20px;
  --sp6: 24px;

  /* Layout */
  --nav-h:     52px;
  --bot-nav-h: 60px;
  --sidebar-w: 260px;
}

/* ══════════════════════════════════════════════════════════════════════════
   RESET & BASE
══════════════════════════════════════════════════════════════════════════ */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg0);
  color: var(--t1);
  font-family: var(--font);
  font-size: var(--fz);
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 99px; }
::-webkit-scrollbar-track { background: transparent; }

button { cursor: pointer; font-family: var(--font); }
input, select, textarea { font-family: var(--font); }
a { color: var(--ac); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════════════
   APP SHELL
══════════════════════════════════════════════════════════════════════════ */
.eotb-app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg0);
  position: relative;
}

/* ══════════════════════════════════════════════════════════════════════════
   HEADER
══════════════════════════════════════════════════════════════════════════ */
.eotb-header {
  display: flex;
  align-items: center;
  padding: 0 var(--sp4);
  height: var(--nav-h);
  background: var(--bg1);
  border-bottom: 1px solid var(--bd);
  gap: var(--sp3);
  flex-shrink: 0;
  z-index: 20;
}

/* Brand */
.eotb-brand {
  display: flex;
  align-items: center;
  gap: var(--sp2);
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: -.3px;
  white-space: nowrap;
  flex-shrink: 0;
}
.eotb-brand__icon {
  width: 28px;
  height: 28px;
  border-radius: var(--rsm);
  background: var(--ac);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.eotb-brand__text { color: var(--t1); }

/* Desktop nav */
.eotb-nav {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 2px;
}
.eotb-nav__item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: var(--t3);
  padding: 7px 13px;
  border-radius: var(--rsm);
  font: 500 13px var(--font);
  transition: color .15s, background .15s;
  white-space: nowrap;
}
.eotb-nav__item:hover { color: var(--t2); background: var(--bg2); }
.eotb-nav__item.is-active { color: var(--t1); background: var(--bg3); }
.eotb-nav__item.is-active svg { stroke: var(--ac); }

/* Header right */
.eotb-header__right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
}

/* Mode switch */
.eotb-mode-switch {
  display: flex;
  background: var(--bg2);
  border: 1px solid var(--bd);
  border-radius: var(--rsm);
  padding: 2px;
  gap: 2px;
}
.eotb-mode-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: var(--t3);
  font: 500 12px var(--font);
  transition: all .15s;
}
.eotb-mode-btn.is-active { background: var(--bg4); color: var(--t1); }
.eotb-mode-btn__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--t3);
}
.eotb-mode-btn__dot--paper  { background: var(--inf); }
.eotb-mode-btn__dot--live   { background: var(--win); }
.eotb-mode-btn__dot--backtest { background: var(--wrn); }

/* ══════════════════════════════════════════════════════════════════════════
   CHIPS
══════════════════════════════════════════════════════════════════════════ */
.eotb-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 99px;
  font: 600 11px var(--font);
  border: 1px solid var(--bd);
  background: var(--bg2);
  white-space: nowrap;
  color: var(--t2);
}
.eotb-chip--paper    { background: var(--inf-bg); border-color: rgba(56,189,248,.28); color: var(--inf); }
.eotb-chip--live     { background: var(--win-bg); border-color: rgba(34,197,94,.28);  color: var(--win); }
.eotb-chip--backtest { background: var(--wrn-bg); border-color: rgba(245,158,11,.28); color: var(--wrn); }

.eotb-chip__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.eotb-chip__dot.is-pulse {
  animation: eotb-pulse 1.4s ease-in-out infinite;
}
@keyframes eotb-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .45; transform: scale(.7); }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE BOTTOM NAV
══════════════════════════════════════════════════════════════════════════ */
.eotb-mob-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--bot-nav-h);
  background: var(--bg1);
  border-top: 1px solid var(--bd);
  z-index: 30;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.eotb-mob-nav__inner {
  display: flex;
  height: 100%;
  align-items: stretch;
}
.eotb-mob-nav__btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: transparent;
  border: none;
  color: var(--t3);
  font: 500 10px var(--font);
  padding: 6px 2px;
  transition: color .15s;
}
.eotb-mob-nav__btn.is-active { color: var(--ac); }
.eotb-mob-nav__btn.is-active svg { stroke: var(--ac); }

/* ══════════════════════════════════════════════════════════════════════════
   MAIN AREA & PANELS
══════════════════════════════════════════════════════════════════════════ */
.eotb-app__main {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.eotb-panel {
  display: none;
  height: 100%;
  overflow: hidden;
  flex-direction: column;
}
.eotb-panel.is-active { display: flex; }

/* ══════════════════════════════════════════════════════════════════════════
   TRADE LAYOUT (3-column desktop)
══════════════════════════════════════════════════════════════════════════ */
.eotb-trade {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr var(--sidebar-w);
  height: 100%;
  overflow: hidden;
}

.eotb-trade__sidebar {
  display: flex;
  flex-direction: column;
  background: var(--bg1);
  border-color: var(--bd);
  overflow: hidden;
}
.eotb-trade__sidebar--left  { border-right: 1px solid var(--bd); }
.eotb-trade__sidebar--right { border-left: 1px solid var(--bd); }

.eotb-trade__stage {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg0);
}

/* ══════════════════════════════════════════════════════════════════════════
   BOT BAR (active bot pill in trade stage header)
══════════════════════════════════════════════════════════════════════════ */
.eotb-botbar {
  display: flex;
  align-items: center;
  gap: var(--sp3);
  padding: var(--sp3) var(--sp4);
  background: var(--bg1);
  border-bottom: 1px solid var(--bd);
  flex-shrink: 0;
}
.eotb-botbar__pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--t3);
  flex-shrink: 0;
  transition: background .3s;
}
.eotb-botbar__pulse.is-running { background: var(--win); animation: eotb-pulse 1.2s ease-in-out infinite; }
.eotb-botbar__pulse.is-paused  { background: var(--wrn); }
.eotb-botbar__name {
  font-weight: 600;
  font-size: 13px;
  color: var(--t1);
}
.eotb-botbar__meta {
  font-size: 11px;
  color: var(--t3);
}

/* ══════════════════════════════════════════════════════════════════════════
   CHART AREA
══════════════════════════════════════════════════════════════════════════ */
.eotb-chart {
  flex: 1;
  min-height: 0;
  background: var(--bg0);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--t3);
  font-size: 12px;
  border-bottom: 1px solid var(--bd);
  position: relative;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════════════════
   STATS ROW
══════════════════════════════════════════════════════════════════════════ */
.eotb-stats {
  display: flex;
  gap: var(--sp3);
  padding: var(--sp3) var(--sp4);
  border-bottom: 1px solid var(--bd);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.eotb-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.eotb-stat__label {
  font: 500 10px var(--font);
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.eotb-stat__value {
  font: 600 14px var(--font);
  color: var(--t1);
  white-space: nowrap;
}
.eotb-stat--win .eotb-stat__value { color: var(--win); }
.eotb-stat--loss .eotb-stat__value { color: var(--los); }

/* ══════════════════════════════════════════════════════════════════════════
   CONTROLS (right sidebar trading controls)
══════════════════════════════════════════════════════════════════════════ */
.eotb-controls {
  display: flex;
  flex-direction: column;
  gap: var(--sp4);
  padding: var(--sp4);
  overflow-y: auto;
  flex: 1;
}

/* ══════════════════════════════════════════════════════════════════════════
   SYMBOL GRID (left sidebar)
══════════════════════════════════════════════════════════════════════════ */
.eotb-symbols {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  flex: 1;
}
.eotb-symbol {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px var(--sp4);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--bds);
  color: var(--t2);
  font: 500 12.5px var(--font);
  text-align: left;
  transition: background .12s, color .12s;
  cursor: pointer;
  width: 100%;
}
.eotb-symbol:hover  { background: var(--bg2); color: var(--t1); }
.eotb-symbol.is-active { background: var(--acd); color: var(--ac); border-left: 2px solid var(--ac); padding-left: calc(var(--sp4) - 2px); }
.eotb-symbol__sub { font-size: 10px; color: var(--t3); }

/* ══════════════════════════════════════════════════════════════════════════
   BOT LIST (left sidebar)
══════════════════════════════════════════════════════════════════════════ */
.eotb-botlist {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex: 1;
}
.eotb-botitem {
  display: flex;
  align-items: center;
  gap: var(--sp3);
  padding: 10px var(--sp4);
  border-bottom: 1px solid var(--bds);
  cursor: pointer;
  transition: background .12s;
}
.eotb-botitem:hover    { background: var(--bg2); }
.eotb-botitem.is-active { background: var(--acd); border-left: 2px solid var(--ac); }
.eotb-botitem__icon   { font-size: 18px; flex-shrink: 0; }
.eotb-botitem__info   { min-width: 0; }
.eotb-botitem__name   { font: 600 13px var(--font); color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eotb-botitem__meta   { font-size: 11px; color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ══════════════════════════════════════════════════════════════════════════
   CONSOLE / LOG
══════════════════════════════════════════════════════════════════════════ */
.eotb-console {
  display: flex;
  flex-direction: column;
  background: var(--bg0);
  border-top: 1px solid var(--bd);
  flex-shrink: 0;
  min-height: 0;
}
.eotb-console__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px var(--sp4);
  border-bottom: 1px solid var(--bds);
  flex-shrink: 0;
}
.eotb-console__body {
  overflow-y: auto;
  max-height: 160px;
  padding: 6px var(--sp4);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.eotb-console__line {
  display: flex;
  gap: var(--sp2);
  font: 400 11.5px var(--mono);
  line-height: 1.6;
  color: var(--t2);
}
.eotb-console__time { color: var(--t3); flex-shrink: 0; }
.eotb-console__text--info   { color: var(--inf); }
.eotb-console__text--warn   { color: var(--wrn); }
.eotb-console__text--error  { color: var(--los); }
.eotb-console__text--success{ color: var(--win); }

/* ══════════════════════════════════════════════════════════════════════════
   CARD
══════════════════════════════════════════════════════════════════════════ */
.eotb-card {
  background: var(--bg2);
  border: 1px solid var(--bd);
  border-radius: var(--rmd);
  overflow: hidden;
}
.eotb-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp3) var(--sp4);
  border-bottom: 1px solid var(--bd);
}
.eotb-card__title {
  font: 600 13px var(--font);
  color: var(--t1);
}
.eotb-card__body {
  padding: var(--sp4);
}

/* ══════════════════════════════════════════════════════════════════════════
   MARKETPLACE CARDS
══════════════════════════════════════════════════════════════════════════ */
.eotb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: var(--sp4);
  padding: var(--sp4);
  overflow-y: auto;
  align-content: start;
}

.eotb-mktcard {
  background: var(--bg2);
  border: 1px solid var(--bd);
  border-radius: var(--rmd);
  padding: var(--sp4);
  display: flex;
  flex-direction: column;
  gap: var(--sp3);
  transition: border-color .15s, transform .15s;
}
.eotb-mktcard:hover { border-color: var(--bg4); transform: translateY(-1px); }

.eotb-mktcard__head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp3);
}
.eotb-mktcard__icon {
  font-size: 22px;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg3);
  border-radius: var(--rsm);
}
.eotb-mktcard__title  { font: 600 13.5px var(--font); color: var(--t1); }
.eotb-mktcard__author { font-size: 11.5px; color: var(--t3); margin-top: 2px; }
.eotb-mktcard__desc   { font-size: 12px; color: var(--t2); line-height: 1.5; flex: 1; }
.eotb-mktcard__tags   { display: flex; flex-wrap: wrap; gap: 4px; }
.eotb-mktcard__foot   { display: flex; align-items: center; justify-content: space-between; gap: var(--sp2); margin-top: auto; }
.eotb-mktcard__stats  { display: flex; align-items: center; gap: var(--sp2); font-size: 12px; color: var(--t3); }

/* ══════════════════════════════════════════════════════════════════════════
   TAGS
══════════════════════════════════════════════════════════════════════════ */
.eotb-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 99px;
  font: 500 11px var(--font);
  background: var(--bg3);
  color: var(--t2);
  border: 1px solid var(--bd);
  white-space: nowrap;
}
.eotb-tag.risk-low    { background: var(--win-bg); color: var(--win); border-color: rgba(34,197,94,.25); }
.eotb-tag.risk-medium { background: var(--wrn-bg); color: var(--wrn); border-color: rgba(245,158,11,.25); }
.eotb-tag.risk-high   { background: var(--los-bg); color: var(--los); border-color: rgba(239,68,68,.25); }

/* Stars */
.eotb-stars { color: var(--wrn); font-size: 12px; letter-spacing: 1px; }

/* ══════════════════════════════════════════════════════════════════════════
   BACKTESTER
══════════════════════════════════════════════════════════════════════════ */
.eotb-backtest {
  display: flex;
  flex-direction: column;
  gap: var(--sp4);
  padding: var(--sp5);
  overflow-y: auto;
  height: 100%;
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
}
.eotb-backtest__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp3);
}
.eotb-backtest__field { display: flex; flex-direction: column; gap: 5px; }

/* Progress */
.eotb-progress {
  height: 6px;
  background: var(--bg3);
  border-radius: 99px;
  overflow: hidden;
}
.eotb-progress__bar {
  height: 100%;
  background: var(--ac);
  border-radius: 99px;
  transition: width .3s ease;
  width: 0%;
}

/* ══════════════════════════════════════════════════════════════════════════
   HISTORY TABLE
══════════════════════════════════════════════════════════════════════════ */
.eotb-table-wrap {
  overflow-x: auto;
  width: 100%;
}
.eotb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.eotb-table th {
  padding: 8px 12px;
  text-align: left;
  font: 600 11px var(--font);
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .5px;
  border-bottom: 1px solid var(--bd);
  white-space: nowrap;
  background: var(--bg1);
  position: sticky;
  top: 0;
  z-index: 1;
}
.eotb-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--bds);
  color: var(--t2);
  white-space: nowrap;
}
.eotb-table tr:last-child td { border-bottom: none; }
.eotb-table tr:hover td { background: var(--bg2); }
.eotb-text-win  { color: var(--win) !important; }
.eotb-text-loss { color: var(--los) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   COMMUNITY & WALL
══════════════════════════════════════════════════════════════════════════ */
.eotb-community {
  display: grid;
  grid-template-columns: 1fr 280px;
  height: 100%;
  overflow: hidden;
}
.eotb-community__feed {
  overflow-y: auto;
  padding: var(--sp4);
  display: flex;
  flex-direction: column;
  gap: var(--sp4);
}
.eotb-community__sidebar {
  border-left: 1px solid var(--bd);
  overflow-y: auto;
  padding: var(--sp4);
  display: flex;
  flex-direction: column;
  gap: var(--sp4);
}

/* Posts */
.eotb-post {
  background: var(--bg2);
  border: 1px solid var(--bd);
  border-radius: var(--rmd);
  padding: var(--sp4);
  display: flex;
  flex-direction: column;
  gap: var(--sp3);
}
.eotb-post__head   { display: flex; align-items: center; gap: var(--sp3); }
.eotb-post__author { font: 600 13px var(--font); color: var(--t1); }
.eotb-post__badge  { margin-left: auto; display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 600; background: var(--acd); color: var(--ac); }
.eotb-post__body   { font-size: 13px; color: var(--t2); line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.eotb-post__actions { display: flex; align-items: center; gap: var(--sp3); padding-top: var(--sp2); border-top: 1px solid var(--bds); }
.eotb-post__action {
  display: flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: none;
  color: var(--t3);
  font: 500 12px var(--font);
  padding: 4px 8px;
  border-radius: var(--rsm);
  transition: color .15s, background .15s;
}
.eotb-post__action:hover { color: var(--t2); background: var(--bg3); }
.eotb-post__action.is-liked { color: var(--ac); }

/* Post meta card */
.eotb-post__meta {
  background: var(--bg3);
  border: 1px solid var(--bd);
  border-radius: var(--rsm);
  padding: var(--sp3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp3);
}
.eotb-post__meta-item  { display: flex; flex-direction: column; gap: 2px; }
.eotb-post__meta-label { font: 500 10px var(--font); color: var(--t3); text-transform: uppercase; letter-spacing: .4px; }
.eotb-post__meta-value { font: 600 13px var(--font); color: var(--t1); }

/* Compose */
.eotb-compose {
  background: var(--bg2);
  border: 1px solid var(--bd);
  border-radius: var(--rmd);
  padding: var(--sp4);
  display: flex;
  flex-direction: column;
  gap: var(--sp3);
}

/* Leaderboard */
.eotb-lb-row {
  display: flex;
  align-items: center;
  gap: var(--sp3);
  padding: 8px 0;
  border-bottom: 1px solid var(--bds);
  cursor: pointer;
  transition: background .12s;
  border-radius: var(--rsm);
  padding: 8px var(--sp2);
}
.eotb-lb-row:hover { background: var(--bg2); }
.eotb-lb-rank {
  font: 700 12px var(--mono);
  width: 22px;
  text-align: center;
  flex-shrink: 0;
  color: var(--t3);
}
.eotb-lb-rank.is-gold   { color: #F59E0B; }
.eotb-lb-rank.is-silver { color: #94A3B8; }
.eotb-lb-rank.is-bronze { color: #92400E; }
.eotb-lb-val {
  font: 600 12px var(--mono);
  color: var(--t1);
  margin-left: auto;
}
.eotb-lb-val.is-pos { color: var(--win); }
.eotb-lb-val.is-neg { color: var(--los); }

/* Sort buttons */
.eotb-wall-sort {
  display: flex;
  gap: 4px;
}
.eotb-sort-btn {
  padding: 5px 12px;
  background: transparent;
  border: 1px solid var(--bd);
  border-radius: 99px;
  color: var(--t3);
  font: 500 12px var(--font);
  cursor: pointer;
  transition: all .15s;
}
.eotb-sort-btn:hover    { color: var(--t2); border-color: var(--bg4); }
.eotb-sort-btn.is-active { color: var(--t1); background: var(--bg3); border-color: var(--bg4); }

/* ══════════════════════════════════════════════════════════════════════════
   MODALS
══════════════════════════════════════════════════════════════════════════ */
.eotb-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8,15,28,.75);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp4);
}
.eotb-modal {
  background: var(--bg2);
  border: 1px solid var(--bd);
  border-radius: var(--rlg);
  width: 100%;
  max-width: 500px;
  max-height: 90dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.5);
}
.eotb-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp4) var(--sp5);
  border-bottom: 1px solid var(--bd);
  flex-shrink: 0;
}
.eotb-modal__body {
  padding: var(--sp5);
  overflow-y: auto;
  flex: 1;
}
.eotb-modal__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp3);
  padding: var(--sp4) var(--sp5);
  border-top: 1px solid var(--bd);
  flex-shrink: 0;
}

/* Miniprofile in modals */
.eotb-miniprof {
  display: flex;
  flex-direction: column;
  gap: var(--sp3);
}
.eotb-miniprof__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp3);
}

/* ══════════════════════════════════════════════════════════════════════════
   PAGE LAYOUT (full-panel pages: marketplace, backtester, etc.)
══════════════════════════════════════════════════════════════════════════ */
.eotb-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.eotb-page__hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp4);
  padding: var(--sp4) var(--sp5);
  border-bottom: 1px solid var(--bd);
  background: var(--bg1);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.eotb-page__actions {
  display: flex;
  align-items: center;
  gap: var(--sp2);
  flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   TOASTS
══════════════════════════════════════════════════════════════════════════ */
.eotb-toast-container {
  position: fixed;
  bottom: calc(var(--bot-nav-h) + 12px);
  right: 16px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.eotb-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--sp3);
  padding: 11px var(--sp4);
  border-radius: var(--rmd);
  font-size: 13px;
  font-weight: 500;
  max-width: 340px;
  border: 1px solid var(--bd);
  background: var(--bg3);
  color: var(--t1);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  pointer-events: auto;
  animation: eotb-toast-in .25s ease forwards;
}
.eotb-toast--info    { border-color: rgba(56,189,248,.3);  background: rgba(56,189,248,.1);  color: var(--inf); }
.eotb-toast--success { border-color: rgba(34,197,94,.3);   background: rgba(34,197,94,.1);   color: var(--win); }
.eotb-toast--warning { border-color: rgba(245,158,11,.3);  background: rgba(245,158,11,.1);  color: var(--wrn); }
.eotb-toast--error   { border-color: rgba(239,68,68,.3);   background: rgba(239,68,68,.1);   color: var(--los); }

@keyframes eotb-toast-in {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ══════════════════════════════════════════════════════════════════════════
   FORM ELEMENTS
══════════════════════════════════════════════════════════════════════════ */
.eotb-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp3);
}
.eotb-form-grid__full { grid-column: 1 / -1; }

.eotb-form-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.eotb-form-field__label {
  font: 500 12px var(--font);
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .4px;
}

.eotb-input,
.eotb-select,
.eotb-textarea {
  background: var(--bg3);
  border: 1px solid var(--bd);
  border-radius: var(--rsm);
  color: var(--t1);
  font: 400 13.5px var(--font);
  padding: 8px 11px;
  width: 100%;
  outline: none;
  transition: border-color .15s;
  appearance: none;
  -webkit-appearance: none;
}
.eotb-input:focus,
.eotb-select:focus,
.eotb-textarea:focus { border-color: var(--ac); }
.eotb-input::placeholder,
.eotb-textarea::placeholder { color: var(--t3); }
.eotb-input--mono { font-family: var(--mono); font-size: 13px; }

.eotb-textarea { resize: vertical; min-height: 80px; }

.eotb-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234E6D8C' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
}
.eotb-select option { background: var(--bg2); }

/* Range slider */
.eotb-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 99px;
  background: var(--bg4);
  outline: none;
}
.eotb-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ac);
  cursor: pointer;
  border: 2px solid var(--bg2);
  transition: transform .15s;
}
.eotb-range::-webkit-slider-thumb:hover { transform: scale(1.2); }

/* Toggle */
.eotb-toggle {
  position: relative;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}
.eotb-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.eotb-toggle__track {
  position: absolute;
  inset: 0;
  background: var(--bg4);
  border-radius: 99px;
  cursor: pointer;
  transition: background .2s;
}
.eotb-toggle__track::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--t2);
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: transform .2s, background .2s;
}
.eotb-toggle input:checked + .eotb-toggle__track { background: var(--ac); }
.eotb-toggle input:checked + .eotb-toggle__track::after { transform: translateX(16px); background: #fff; }

/* Settings rows */
.eotb-setting__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp3);
  padding: 10px 0;
  border-bottom: 1px solid var(--bds);
}
.eotb-setting__label { font: 500 13px var(--font); color: var(--t2); }
.eotb-setting__value { font: 600 13px var(--font); color: var(--t1); }

/* Search */
.eotb-search {
  position: relative;
  flex-shrink: 0;
}
.eotb-search__icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--t3);
  pointer-events: none;
}
.eotb-search__input {
  padding-left: 32px;
}

/* ══════════════════════════════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════════════════════════════ */
.eotb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--rsm);
  border: 1px solid transparent;
  font: 600 13px var(--font);
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
  flex-shrink: 0;
  background: var(--bg3);
  color: var(--t2);
}
.eotb-btn:hover { background: var(--bg4); color: var(--t1); }

.eotb-btn--accent {
  background: var(--ac);
  color: #fff;
  border-color: transparent;
}
.eotb-btn--accent:hover { background: var(--ac-hov); }

.eotb-btn--ghost {
  background: transparent;
  border-color: var(--bd);
  color: var(--t2);
}
.eotb-btn--ghost:hover { background: var(--bg3); color: var(--t1); border-color: var(--bg4); }

.eotb-btn--danger {
  background: var(--los-bg);
  border-color: rgba(239,68,68,.3);
  color: var(--los);
}
.eotb-btn--danger:hover { background: rgba(239,68,68,.2); }

.eotb-btn--sm  { padding: 5px 11px; font-size: 12px; }
.eotb-btn--lg  { padding: 11px 22px; font-size: 14px; }
.eotb-btn--full { width: 100%; }
.eotb-btn--icon { padding: 6px; width: 32px; height: 32px; }

/* Type buttons (even/odd) */
.eotb-type-btn {
  flex: 1;
  padding: 10px;
  background: var(--bg3);
  border: 1px solid var(--bd);
  border-radius: var(--rsm);
  color: var(--t2);
  font: 600 13px var(--font);
  cursor: pointer;
  transition: all .15s;
  text-align: center;
}
.eotb-type-btn:hover    { border-color: var(--ac); color: var(--t1); }
.eotb-type-btn.is-active { background: var(--acd); border-color: var(--ac); color: var(--ac); }

/* ══════════════════════════════════════════════════════════════════════════
   LABELS & TITLES
══════════════════════════════════════════════════════════════════════════ */
.eotb-label {
  font: 600 10.5px var(--font);
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .6px;
  padding: var(--sp3) var(--sp4) var(--sp2);
}

.eotb-title {
  font: 700 18px var(--font);
  color: var(--t1);
  letter-spacing: -.3px;
}
.eotb-title--sm { font-size: 15px; }

.eotb-subtitle {
  font: 400 13px var(--font);
  color: var(--t3);
}

.eotb-divider {
  height: 1px;
  background: var(--bd);
  width: 100%;
}

/* ══════════════════════════════════════════════════════════════════════════
   AVATAR
══════════════════════════════════════════════════════════════════════════ */
.eotb-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ac);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 14px var(--font);
  color: #fff;
  flex-shrink: 0;
  text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════════════════════
   EMPTY STATE
══════════════════════════════════════════════════════════════════════════ */
.eotb-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp3);
  padding: var(--sp6) var(--sp4);
  text-align: center;
  flex: 1;
}
.eotb-empty__icon  { font-size: 32px; opacity: .5; }
.eotb-empty__title { font: 600 15px var(--font); color: var(--t2); }
.eotb-empty__text  { font-size: 13px; color: var(--t3); max-width: 260px; line-height: 1.5; }

/* ══════════════════════════════════════════════════════════════════════════
   SKELETON LOADER
══════════════════════════════════════════════════════════════════════════ */
.eotb-skeleton {
  background: linear-gradient(90deg, var(--bg3) 25%, var(--bg4) 50%, var(--bg3) 75%);
  background-size: 200% 100%;
  border-radius: var(--rsm);
  animation: eotb-shimmer 1.4s ease-in-out infinite;
  display: block;
  height: 14px;
}
@keyframes eotb-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   UTILITY CLASSES
══════════════════════════════════════════════════════════════════════════ */
.eotb-flex         { display: flex; }
.eotb-items-center { align-items: center; }
.eotb-justify-between { justify-content: space-between; }
.eotb-gap-2        { gap: var(--sp2); }
.eotb-scroll-x     { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE (≤ 768px)
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .eotb-desktop-only { display: none !important; }
  .eotb-mob-nav      { display: flex; }

  /* App scrolls on mobile */
  .eotb-app       { height: 100dvh; }
  .eotb-app__main { padding-bottom: var(--bot-nav-h); overflow-y: auto; }
  .eotb-panel     { height: auto; min-height: calc(100dvh - var(--nav-h) - var(--bot-nav-h)); }

  /* Trade goes single-column */
  .eotb-trade {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
  }
  .eotb-trade__sidebar--left,
  .eotb-trade__sidebar--right { border: none; border-bottom: 1px solid var(--bd); }

  /* Console shorter on mobile */
  .eotb-console__body { max-height: 120px; }

  /* Community full-width */
  .eotb-community { grid-template-columns: 1fr; }
  .eotb-community__sidebar { border-left: none; border-top: 1px solid var(--bd); }

  /* Grid single column */
  .eotb-grid { grid-template-columns: 1fr; }

  /* Backtest grid single */
  .eotb-backtest__row { grid-template-columns: 1fr; }
  .eotb-form-grid     { grid-template-columns: 1fr; }

  /* Modals full-screen on small phones */
  .eotb-modal-overlay { padding: 0; align-items: flex-end; }
  .eotb-modal { max-width: 100%; border-bottom-left-radius: 0; border-bottom-right-radius: 0; max-height: 88dvh; }

  /* Toast above bottom nav */
  .eotb-toast-container { bottom: calc(var(--bot-nav-h) + 16px); right: 12px; left: 12px; }
  .eotb-toast { max-width: 100%; }

  /* Hide sidebar in mode switch on very small screens */
  .eotb-mode-switch { display: none; }

  /* Page hero stacks */
  .eotb-page__hero { flex-direction: column; align-items: flex-start; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE-ONLY SHOW
══════════════════════════════════════════════════════════════════════════ */
.eotb-mobile-only {
  display: none;
}
@media (max-width: 768px) {
  .eotb-mobile-only { display: revert; }
}