/* ═══════════════════════════════════════════════════════════════════
   BOTS.CSS
═══════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════
   PAGE LAYOUT
════════════════════════════════════════════════════════════ */
.bots-page {
  display: grid;
  grid-template-columns: 220px 1fr;
  align-items: start;
  gap: var(--sp-6);
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--sp-10) var(--sp-6) var(--sp-16);
  min-height: calc(100vh - 68px);
}

/* ════════════════════════════════════════════════════════════
   CLOSE CONFIRMATION MODALS  (CSS :target)
════════════════════════════════════════════════════════════ */
.close-modal-wrap {
  display: none;
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(0,0,0,.6);
  align-items: center; justify-content: center;
  padding: var(--sp-4);
}
.close-modal-wrap:target { display: flex; }

.close-modal {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: var(--sp-8) var(--sp-8) var(--sp-6);
  max-width: 360px; width: 100%; box-shadow: var(--shadow-xl); text-align: center;
}
.close-modal__icon { font-size: 2rem; margin-bottom: var(--sp-3); display: block; }
.close-modal h3   { font-size: 1.125rem; margin-bottom: var(--sp-3); }
.close-modal p    { font-size: 0.9rem; color: var(--c-text-2); margin-bottom: var(--sp-6); }
.close-modal__btns { display: flex; gap: var(--sp-3); justify-content: center; }

/* ════════════════════════════════════════════════════════════
   LEVERAGE OVERLAY  (fixed centre-screen, JS-toggled)
════════════════════════════════════════════════════════════ */
.lev-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 4000;
  background: rgba(0,0,0,.55);
  align-items: center; justify-content: center;
  padding: var(--sp-4);
}
.lev-overlay.lev-overlay--open { display: flex; }

.lev-popup__inner {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: var(--sp-6);
  width: 100%; max-width: 340px;
  box-shadow: var(--shadow-xl);
  display: flex; flex-direction: column; gap: var(--sp-4);
}

.lev-popup__header {
  display: flex; align-items: center; justify-content: space-between;
}
.lev-popup__header span { font-size: 1rem; font-weight: 700; color: var(--c-text); }

.lev-popup__close {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-border);
  background: var(--c-surface-2);
  color: var(--c-muted); font-size: 1rem; cursor: pointer;
  font-family: var(--font-body);
  transition: color var(--t-fast), background var(--t-fast);
}
.lev-popup__close:hover { color: var(--c-text); background: var(--c-border); }

.lev-display { text-align: center; padding: var(--sp-2) 0; }
.lev-display__val {
  font-family: var(--font-mono); font-size: 2.5rem; font-weight: 800;
  color: var(--c-teal); line-height: 1;
}

.lev-controls {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.lev-btn-step {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%;
  background: var(--c-surface-2); border: 1px solid var(--c-border);
  color: var(--c-text); font-size: 1.375rem; font-weight: 700; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  font-family: var(--font-body);
}
.lev-btn-step:hover { background: var(--c-teal-light); border-color: var(--c-teal); color: var(--c-teal); }

.lev-slider {
  flex: 1;
  height: 5px;
  max-width: 45vw;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background: var(--c-border);
  border-radius: var(--r-full);
  outline: none;
}
.lev-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--c-teal); border: 2px solid #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,.25); cursor: pointer;
}
.lev-slider::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--c-teal); border: 2px solid #fff; cursor: pointer;
}

.lev-presets { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; }

.lev-preset {
  padding: 0.3rem 0.6rem; border-radius: var(--r-sm);
  font-size: 0.8125rem; font-weight: 700;
  background: var(--c-surface-2); border: 1px solid var(--c-border);
  color: var(--c-text-2); cursor: pointer; font-family: var(--font-body);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.lev-preset:hover { background: var(--c-teal-light); color: var(--c-teal); border-color: var(--c-teal); }

.lev-confirm { width: 100%; justify-content: center; }

/* ════════════════════════════════════════════════════════════
   SIDEBAR
════════════════════════════════════════════════════════════ */
.api-sidebar {
  position: sticky; top: calc(68px + var(--sp-4));
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: var(--sp-5) var(--sp-4);
  overflow-y: auto; max-height: calc(100vh - 68px - var(--sp-8));
}
.api-sidebar__header { margin-bottom: var(--sp-5); }
.api-sidebar__title {
  font-size: 1rem; font-weight: 700; color: var(--c-text);
  letter-spacing: var(--ls-tight); margin-top: var(--sp-1);
}
.api-radio { display: none; }

.api-all-label {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3); border-radius: var(--r-md);
  cursor: pointer; font-size: 0.875rem; font-weight: 600; color: var(--c-text-2);
  margin-bottom: var(--sp-4);
  transition: background var(--t-fast), color var(--t-fast);
  border: 1.5px solid transparent;
}
.api-all-label:hover { background: var(--c-surface-2); color: var(--c-text); }
#api-all:checked + .api-all-label { background: var(--c-teal-light); border-color: var(--c-teal); color: var(--c-teal); }
.api-all-icon { font-size: 1.1rem; color: var(--c-teal); }

.api-group { margin-bottom: var(--sp-4); }
.api-group__broker {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-1);
  border-radius: var(--r-sm); cursor: pointer;
  border: 1.5px solid transparent;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.api-group__broker:hover { background: var(--c-surface-2); }
.api-group__name { font-size: 0.75rem; font-weight: 700; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--c-muted); }
.api-radio:checked + .api-group__broker { background: var(--c-teal-light); border-color: var(--c-teal); }
.api-radio:checked + .api-group__broker .api-group__name { color: var(--c-teal); }

.api-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.4rem var(--sp-3); border-radius: var(--r-sm); cursor: pointer;
  transition: background var(--t-fast); border: 1.5px solid transparent; margin-bottom: 2px;
}
.api-item:hover { background: var(--c-surface-2); }
.api-item__name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-text-2);
}
.api-item__prod {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  padding: 0.15rem 0.4rem;
  border-radius: var(--r-full);
}
.api-radio:checked + .api-item { background: var(--c-teal-light); border-color: var(--c-teal); }
.api-radio:checked + .api-item .api-item__name { color: var(--c-teal); font-weight: 600; }
.api-radio:checked + .api-item .api-item__prod  { background: rgba(46,204,204,.15); color: var(--c-teal); border-color: var(--c-teal); }
.api-group + .api-group { border-top: 1px solid var(--c-border-light); padding-top: var(--sp-3); }

.api-card__broker-icon {
  width: 48px;
  height: 36px;
}

/* ════════════════════════════════════════════════════════════════
   BROKER ICON COLOURS  (shared with modal)
════════════════════════════════════════════════════════════════ */
[class*="broker-icon--"] {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.04em;
  border-radius: var(--r-md);
  flex-shrink: 0;
}


/* ════════════════════════════════════════════════════════════
   MAIN HEADER
════════════════════════════════════════════════════════════ */
.bots-main__header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-4); margin-bottom: var(--sp-6);
}
.bots-main__title { font-size: clamp(1.6rem, 3vw, 2rem); margin-top: var(--sp-1); }

/* ════════════════════════════════════════════════════════════
   HIDDEN CHECKBOXES
════════════════════════════════════════════════════════════ */
.bot-pause-chk { display: none; }

/* ════════════════════════════════════════════════════════════
   BOT GRID
════════════════════════════════════════════════════════════ */
.bots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: var(--sp-5);
}

/* ════════════════════════════════════════════════════════════
   BOT TILE WRAPPER
   filter/opacity for paused state live here
════════════════════════════════════════════════════════════ */
.bot-tile-wrap {
  position: relative;
  transition: opacity 0.3s ease, filter 0.3s ease;
}

/* Paused: wrapper goes grey */
.bot-pause-chk:checked + .bot-tile-wrap {
  opacity: 0.5;
  filter: grayscale(1) brightness(0.75);
}

/* Paused badge punches through in bright yellow */
.bot-pause-chk:checked + .bot-tile-wrap .bot-active--paused {
  filter: brightness(2.5) saturate(3);
  background: #fbbf24;
  color: #422006;
  border-color: #fbbf24;
  box-shadow: 0 0 0 2px rgba(251,191,36,.5), 0 2px 8px rgba(251,191,36,.4);
}

/* ════════════════════════════════════════════════════════════
   BOT TILE
   No 3D transforms — JS-driven opacity/scale flip instead
════════════════════════════════════════════════════════════ */
.bot-tile {
  background: linear-gradient(160deg, var(--c-surface) 0%, var(--c-surface-2) 100%);
  border-radius: 20px;
  height: 260px;
  position: relative;
  overflow: hidden;
}
.bot-tile--long {
  border: 4px solid #4ade80;
}
.bot-tile--short {
  border: 4px solid #fb693c;
}
.bot-tile--idle {
  border: 4px solid #888888;
}

/* Flipped state — toggled by JS on .bot-tile-wrap */

/* ── Front & back: both absolutely fill the tile ── */
.bot-tile__front,
.bot-tile__back {
  position: absolute; inset: 0;
  border-radius: 16px;
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
}

/* Front visible by default, back hidden */
.bot-tile__front {
  opacity: 1;
  visibility: visible;
  z-index: 2;
  pointer-events: auto;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.bot-tile__back {
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  pointer-events: none;
  background: rgba(8, 8, 16, 0.96);
  justify-content: flex-start;
  gap: var(--sp-3);
  overflow-y: auto;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

/* Flipped: hide front, show back */
.bot-tile-wrap.is-flipped .bot-tile__front {
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  pointer-events: none;
}
.bot-tile-wrap.is-flipped .bot-tile__back {
  opacity: 1;
  visibility: visible;
  z-index: 2;
  pointer-events: auto;
}

/* Front overlay — removed; tile now uses a neutral theme-aware surface */

/* ── Front face content ── */
.bot-tile__top,
.bot-tile__stats,
.bot-tile__margin,
.bot-tile__actions { position: relative; z-index: 1; }

.bot-tile__name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-1);
}
.bot-tile__name {
  color: var(--c-text);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  white-space: nowrap;
  max-width: calc(100% - 60px);
  overflow-x: auto;
  overflow-y: hidden;
}

.bot-tile__sname-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-1);
}
.bot-tile__sname {
  color: var(--c-text-2);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  white-space: nowrap;
  max-width: calc(100% - 60px);
  overflow-x: auto;
  overflow-y: hidden;
}

.bot-modal__edit-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--c-muted);
  text-decoration: none;
  transition: color var(--t-fast);
  cursor: pointer;
}
.bot-modal__edit-link:hover {
  color: var(--c-teal);
}

/* Status label / pause toggle */
.bot-active-label { cursor: pointer; user-select: none; flex-shrink: 0; }
.bot-active-label .bot-active--paused  { display: none; }
.bot-active-label .bot-active--running { display: inline-block; }

.bot-pause-chk:checked + .bot-tile-wrap .bot-active-label .bot-active--running { display: none; }
.bot-pause-chk:checked + .bot-tile-wrap .bot-active-label .bot-active--paused  { display: inline-block; }

.bot-active {
  display: inline-block; padding: 0.2rem 0.55rem; border-radius: var(--r-full);
  font-size: 0.68rem; font-weight: 700; letter-spacing: var(--ls-wide); text-transform: uppercase;
}
.bot-active--running { background: rgba(34,197,94,.2);   color: #4ade80; border: 1px solid rgba(74,222,128,.4); }
.bot-active--paused  { background: rgba(251,191,36,.2);  color: #fbbf24; border: 1px solid rgba(251,191,36,.4); }
.bot-active--stopped { background: var(--c-surface-2); color: var(--c-muted); border: 1px solid var(--c-border-light); }

.bot-tile__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  margin-bottom: var(--sp-1);
  flex-wrap: nowrap;
  overflow: hidden;
}
.bot-tile__pair     {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  color: #fff;
  background: var(--tile-grad, var(--grad-1));
  padding: 0.15rem 0.5rem;
  border-radius: var(--r-sm);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  white-space: nowrap;
  overflow: hidden;
}
.bot-tile__price     {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--c-text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
}
.bot-tile__broker   {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  color: var(--c-text-2);
  background: transparent;
  border: 1px solid var(--c-border);
  padding: 0.15rem 0.5rem;
  border-radius: var(--r-sm);
  white-space: nowrap;
  overflow: hidden;
}
.bot-tile__dot      { color: var(--c-border); font-size: 0.7rem; }

/* Stats row */
.bot-tile__stats { display: flex; gap: var(--sp-4); margin-bottom: var(--sp-2); }
.bot-stat { display: flex; flex-direction: column; gap: 1px; }
.bot-stat__label {
  font-size: 0.62rem; font-weight: 700; letter-spacing: var(--ls-widest);
  text-transform: uppercase; color: var(--c-muted);
}
.bot-stat__value {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--c-text);
  white-space: nowrap;
  overflow-x: hidden;
}
.bot-stat__value--pos { color: #16a34a; }
.bot-stat__value--neg { color: #ea580c; }
.bot-stat__value--idl { color: var(--c-muted); }

/* Margin bar section */
.bot-tile__margin { margin-bottom: var(--sp-3); }

.margin-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 5px;
}
.margin-label {
  font-size: 0.62rem; font-weight: 700; letter-spacing: var(--ls-widest);
  text-transform: uppercase; color: var(--c-muted);
}
.margin-right {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.margin-pct {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--c-text);
}
.margin-total {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--c-text-2);
}

/* Position badge */
.status-badge {
  display: inline-block; padding: 1px 7px; border-radius: var(--r-full);
  font-size: 0.62rem; font-weight: 700; letter-spacing: var(--ls-wide); text-transform: uppercase;
}
.status-badge--idle  { background: var(--c-surface-2); color: var(--c-muted); border: 1px solid var(--c-border-light); }
.status-badge--long  { background: rgba(34,197,94,.2); color: #4ade80; border: 1px solid rgba(74,222,128,.35); }
.status-badge--short { background: rgba(235, 52, 6, 0.2); color: #fb693c; border: 1px solid rgba(235, 60, 6, 0.35); }

.margin-bar {
  height: 4px; background: var(--c-surface-2);
  border-radius: var(--r-full); overflow: hidden;
}
.margin-bar__fill {
  height: 100%; background: var(--c-muted);
  border-radius: var(--r-full);
  transition: width 0.4s var(--ease-out);
}
.margin-bar__fill--long  { background: #4ade80; }
.margin-bar__fill--short { background: #fb693c; }

/* Action buttons */
.bot-tile__actions {
  display: flex; gap: var(--sp-2); flex-wrap: wrap;
  position: relative; z-index: 1;
}

.btn--xs {
  padding: 0.25rem 0.6rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  border-radius: var(--r-full);
  cursor: pointer;
  border: none;
  font-family: var(--font-body);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: background var(--t-fast);
}
.btn--xs-right {
  margin-left: auto;
  margin-top: 2px;
}
.btn--icon-only {
  padding: 0.2rem 0.55rem;
  border-radius: var(--r-full);
  background: var(--c-surface-2);
  color: var(--c-muted);
  border: 1px solid var(--c-border-light);
  justify-content: center;
}
.btn--icon-only:hover {
  background: var(--c-teal-light);
  border-color: var(--c-teal);
  color: var(--c-teal);
}
.btn--icon-only svg {
  display: block;
  transition: transform 0.45s ease;
}
.btn--icon-only:hover svg {
  transform: rotate(90deg);
}

/* TX button — scoped over the neutral tile background (global .btn--ghost-light is white-on-dark) */
.bot-tile__actions .btn--ghost-light {
  background: var(--c-surface-2);
  color: var(--c-text-2);
  border: 1px solid var(--c-border-light);
  backdrop-filter: none;
}
.bot-tile__actions .btn--ghost-light:hover {
  background: var(--c-teal-light);
  color: var(--c-teal);
  border-color: var(--c-teal);
}
.btn--close-quarter { background: rgba(202, 138, 4, 0.16); color: #a16207; }
.btn--close-quarter:hover { background: rgba(202, 138, 4, 0.28); }
.btn--close-half {    background: rgba(217, 119, 6, 0.16); color: #b45309; }
.btn--close-half:hover {    background: rgba(217, 119, 6, 0.28); }
.btn--close-all  {    background: rgba(234, 88, 12, 0.16); color: #c2410c; }
.btn--close-all:hover  {    background: rgba(234, 88, 12, 0.28); }
.btn--close-idle  {    background: var(--c-surface-2); color: var(--c-muted); }
.btn--close-idle:hover  {    background: var(--c-border-light); }

/* ════════════════════════════════════════════════════════════
   BACK FACE
════════════════════════════════════════════════════════════ */
.back-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid rgba(255,255,255,.1);
  flex-shrink: 0;
}
.back-title { font-size: 0.875rem; font-weight: 700; color: #fff; }
.back-pair  { font-family: var(--font-mono); font-size: 0.75rem; color: rgba(255,255,255,.55); }

.back-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex-shrink: 0;
}

.back-label {
  display: flex;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
}

.back-label-right {
  display: flex;
  justify-content: center;
  margin-left: auto;
  margin-top:-24px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
}

/* Order type toggles */
.toggle-group { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.tog-chk { display: none; }
.tog-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.18rem 0.5rem;
  border-radius: var(--r-full);
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  background: rgba(255,255,255,.1);
  color: var(--c-orange);
  text-decoration: line-through;
  border: 1px solid var(--c-orange);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.tog-btn:hover {
  background: rgba(255,255,255,.18);
  color: rgba(255,255,255,.85);
  border-color: rgba(255,255,255,.5);
  text-decoration: none;
}
.tog-btn-sc {
  margin-left: -20%;
}
.tog-chk:checked + .tog-btn {
  background: var(--c-teal);
  color: #0a2222;
  border-color: var(--c-teal);
  text-decoration: none;
}

/* Execution rows */
.exec-rows { display: flex; flex-direction: column; gap: 4px; }
.exec-row  { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.exec-row__lbl { font-size: 0.72rem; font-weight: 600; color: rgba(255,255,255,.65); min-width: 34px; }
.exec-radios { display: flex; gap: 3px; }
.exec-radio { display: none; }
.exec-opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.18rem 0.5rem;
  border-radius: var(--r-full);
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.4);
  border: 1px solid rgba(255,255,255,.13);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.exec-opt:hover { background: rgba(255,255,255,.15); color: rgba(255,255,255,.8); }
.exec-radio:checked + .exec-opt { background: rgba(46,204,204,.22); color: var(--c-teal); border-color: rgba(46,204,204,.45); }

/* Leverage open button (back face) */
.lev-open-btn {
  margin-top: 0px;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.3rem 0.75rem;
  border-radius: var(--r-full);
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background var(--t-fast);
  width: 75px;
  height:40px;
}
.lev-open-btn:hover { background: rgba(255,255,255,.22); }

/* Done button */
.back-done {
  margin-top: -51px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  background: rgba(255,255,255,.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  padding: 0.3rem 0.75rem;
  border-radius: var(--r-full);
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background var(--t-fast);
  width: calc(100% - 145px);
  height:40px;
  margin-left: 85px;
}
.back-done:hover { background: rgba(255,255,255,.2); }

/* Destroy button */
.back-destroy {
  margin-top: -51px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  background: rgba(255,255,255,.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  padding: 0.3rem 0.75rem;
  border-radius: var(--r-full);
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background var(--t-fast);
  width: 50px;
  height:40px;
  margin-left: auto;
}
.back-destroy:hover { background: rgba(255,255,255,.2); }

/* ════════════════════════════════════════════════════════════
   SHARED BUTTONS
════════════════════════════════════════════════════════════ */
.btn { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-family: var(--font-body); text-decoration: none; }
.btn--sm { padding: 0.45rem 1rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: var(--ls-wide); border-radius: var(--r-full); }
.btn--ghost  { background: transparent; color: var(--c-text-2); border: 1.5px solid var(--c-border); font-weight: 600; }
.btn--ghost:hover  { background: var(--c-surface-2); }

/* ════════════════════════════════════════════════════════════
   EMPTY STATE
════════════════════════════════════════════════════════════ */
.bots-empty {
  display: none; grid-column: 1/-1;
  text-align: center; padding: var(--sp-16) var(--sp-8);
  color: var(--c-muted); font-size: 0.9375rem;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .bots-page { grid-template-columns: 1fr; padding-inline: var(--sp-4); }
  .api-sidebar {
    position: static; max-height: none; overflow: visible;
    background: transparent; border: none;
    border-bottom: 1px solid var(--c-border); border-radius: 0;
    padding: 0 0 var(--sp-4);
    display: flex; flex-wrap: nowrap; gap: var(--sp-2);
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .api-sidebar__header { display: none; }
  .api-group { display: contents; margin: 0; }
  .api-group__broker { display: none; }
  .api-group + .api-group { border-top: none; padding-top: 0; }
  .api-all-label {
    white-space: nowrap; margin-bottom: 0; padding: 0.4rem var(--sp-4);
    flex-shrink: 0; border-radius: var(--r-full); font-size: 0.8125rem;
  }
  .api-item {
    white-space: nowrap; flex-shrink: 0; border-radius: var(--r-full);
    padding: 0.4rem var(--sp-4); font-size: 0.8125rem; margin-bottom: 0;
  }
  .api-item__prod { display: none; }
}

@media (max-width: 480px) {
  .bots-grid { grid-template-columns: 1fr; }
  .bots-main__header { flex-wrap: wrap; }
  .bot-tile { height: 280px; }
}