:root {
  color-scheme: dark;
  --bg: #07100e;
  --sidebar: #091310;
  --surface: #0d1815;
  --surface-2: #111e1a;
  --surface-3: #16241f;
  --border: #22342e;
  --text: #edf7f3;
  --muted: #8fa59d;
  --accent: #17d39a;
  --accent-dark: #0c9e73;
  --positive: #20d49b;
  --negative: #ff6e7c;
  --warning: #f1bd64;
  --blue: #63a6ff;
  --radius: 15px;
  --shadow: 0 14px 40px rgba(0,0,0,.22);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 232px minmax(0,1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 24px 16px; border-right: 1px solid var(--border); background: var(--sidebar); display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 28px; }
.brand-mark { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--accent); color: #03110d; font-weight: 900; }
.brand strong, .brand small { display: block; }
.brand small { color: var(--muted); margin-top: 2px; }
nav { display: grid; gap: 7px; }
.nav-item { border: 0; background: transparent; color: var(--muted); text-align: left; padding: 12px 14px; border-radius: 11px; display: flex; align-items: center; gap: 12px; }
.nav-item:hover { background: var(--surface); color: var(--text); }
.nav-item.active { background: rgba(23,211,154,.12); color: var(--accent); }
.nav-item span { width: 20px; text-align: center; }


/*
 * Shared sidebar vector icon system.
 *
 * The legacy text glyph remains in the markup as a CSS-free
 * fallback. Classic and Aurora both render the same 22x22
 * local SVG masks.
 */
.nav-item > span:first-child {
  display: none;
}


.nav-item::before {
  content: "";

  width: 22px;
  height: 22px;
  flex: 0 0 22px;

  display: block;

  background-color: currentColor;

  -webkit-mask-image: var(--nav-icon);
  mask-image: var(--nav-icon);

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-position: center;
  mask-position: center;

  -webkit-mask-size: 22px 22px;
  mask-size: 22px 22px;

  transition:
    background-color .16s ease,
    filter .16s ease,
    transform .16s ease;
}


/* Dashboard / Overview */
.nav-item[data-tab="overview"] {
  --nav-icon:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7.5' height='7.5' rx='2'/%3E%3Crect x='13.5' y='3' width='7.5' height='7.5' rx='2'/%3E%3Crect x='3' y='13.5' width='7.5' height='7.5' rx='2'/%3E%3Crect x='13.5' y='13.5' width='7.5' height='7.5' rx='2'/%3E%3C/svg%3E");
}


/* Robot / Bots */
.nav-item[data-tab="bots"] {
  --nav-icon:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7V4'/%3E%3Ccircle cx='12' cy='3' r='1' fill='black' stroke='none'/%3E%3Crect x='4' y='7' width='16' height='12' rx='4'/%3E%3Ccircle cx='9' cy='12' r='1' fill='black' stroke='none'/%3E%3Ccircle cx='15' cy='12' r='1' fill='black' stroke='none'/%3E%3Cpath d='M9 16h6'/%3E%3Cpath d='M4 11H2.5v4H4M20 11h1.5v4H20'/%3E%3C/svg%3E");
}


/* Robot + Plus / Create Bot */
.nav-item[data-tab="bot-control"] {
  --nav-icon:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 8V5'/%3E%3Ccircle cx='10' cy='4' r='.9' fill='black' stroke='none'/%3E%3Crect x='3' y='8' width='14' height='11' rx='3.5'/%3E%3Ccircle cx='8' cy='13' r='.9' fill='black' stroke='none'/%3E%3Ccircle cx='13' cy='13' r='.9' fill='black' stroke='none'/%3E%3Cpath d='M8.5 16h4'/%3E%3Cpath d='M19 3v6M16 6h6' stroke-width='2'/%3E%3C/svg%3E");
}


/* Wallet */
.nav-item[data-tab="wallet"] {
  --nav-icon:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='M3 9h18'/%3E%3Cpath d='M16 12h5v4h-5a2 2 0 0 1 0-4Z'/%3E%3Ccircle cx='17' cy='14' r='.7' fill='black' stroke='none'/%3E%3C/svg%3E");
}


/* Candlesticks / Trading */
.nav-item[data-tab="trading"] {
  --nav-icon:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3v3M6 12v4M12 7v3M12 18v3M18 3v5M18 15v4'/%3E%3Crect x='4' y='6' width='4' height='6' rx='1'/%3E%3Crect x='10' y='10' width='4' height='8' rx='1'/%3E%3Crect x='16' y='8' width='4' height='7' rx='1'/%3E%3C/svg%3E");
}


/* Heart / Donate — starts the secondary menu group */
.nav-item[data-tab="donate"] {
  margin-top: 8px;

  --nav-icon:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.8a5.5 5.5 0 0 0-7.8 0L12 5.8l-1-1a5.5 5.5 0 0 0-7.8 7.8L12 21l8.8-8.4a5.5 5.5 0 0 0 0-7.8Z'/%3E%3C/svg%3E");
}


/* Bell / Alerts */
.nav-item[data-tab="alerts"] {
  --nav-icon:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 9a6 6 0 0 0-12 0c0 6-3 6.5-3 8h18c0-1.5-3-2-3-8Z'/%3E%3Cpath d='M10 21h4'/%3E%3Cpath d='M9.8 3.4A3.5 3.5 0 0 1 12 2.6a3.5 3.5 0 0 1 2.2.8'/%3E%3C/svg%3E");
}


/* Shield check / Security */
.nav-item[data-tab="security"] {
  --nav-icon:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 19 6v5c0 4.7-2.7 8.5-7 10-4.3-1.5-7-5.3-7-10V6l7-3Z'/%3E%3Cpath d='m8.5 12 2.2 2.2 4.8-5'/%3E%3C/svg%3E");
}


/* Gear / System */
.nav-item[data-tab="system"] {
  --nav-icon:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.2 2h-.4a2 2 0 0 0-2 2v.2a2 2 0 0 1-1 1.7l-.4.3a2 2 0 0 1-2 0l-.2-.1a2 2 0 0 0-2.7.7l-.2.4a2 2 0 0 0 .7 2.7l.2.1a2 2 0 0 1 1 1.7v.6a2 2 0 0 1-1 1.7l-.2.1a2 2 0 0 0-.7 2.7l.2.4a2 2 0 0 0 2.7.7l.2-.1a2 2 0 0 1 2 0l.4.3a2 2 0 0 1 1 1.7v.2a2 2 0 0 0 2 2h.4a2 2 0 0 0 2-2v-.2a2 2 0 0 1 1-1.7l.4-.3a2 2 0 0 1 2 0l.2.1a2 2 0 0 0 2.7-.7l.2-.4a2 2 0 0 0-.7-2.7l-.2-.1a2 2 0 0 1-1-1.7v-.6a2 2 0 0 1 1-1.7l.2-.1a2 2 0 0 0 .7-2.7l-.2-.4a2 2 0 0 0-2.7-.7l-.2.1a2 2 0 0 1-2 0l-.4-.3a2 2 0 0 1-1-1.7V4a2 2 0 0 0-2-2Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

.sidebar-footer { margin-top: auto; padding: 14px 8px 0; border-top: 1px solid var(--border); color: var(--muted); }
.connection { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.connection i { width: 8px; height: 8px; border-radius: 99px; background: var(--warning); }
.connection i.online { background: var(--positive); box-shadow: 0 0 12px rgba(32,212,155,.6); }
.connection i.offline { background: var(--negative); }
main { min-width: 0; padding: 24px clamp(18px,3vw,42px) 50px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 4px; font-size: 1.65rem; }
h2 { font-size: 1rem; margin-bottom: 4px; }
h3 { font-size: .95rem; }
.topbar p, .panel-header p, .dialog-header p { color: var(--muted); margin-bottom: 0; font-size: .87rem; }
.top-actions, .button-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.button { border: 1px solid var(--border); border-radius: 10px; padding: 9px 14px; color: var(--text); background: var(--surface-2); }
.button:hover { border-color: #3a534a; }
.button.primary { background: var(--accent); color: #06120e; border-color: var(--accent); font-weight: 700; }
.button.primary:hover { background: #36e2ad; }
.button.danger { background: rgba(255,110,124,.13); color: var(--negative); border-color: rgba(255,110,124,.45); }
.button:disabled { opacity: .5; cursor: not-allowed; }
.text-button, .raw-tab { border: 0; background: none; color: var(--accent); padding: 4px; }
.mode-badge, .status-badge, .type-badge { border: 1px solid var(--border); border-radius: 99px; padding: 5px 9px; color: var(--muted); font-size: .78rem; }
.mode-badge.demo { color: var(--warning); border-color: rgba(241,189,100,.38); background: rgba(241,189,100,.08); }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fade .18s ease; }
@keyframes fade { from { opacity: .4; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.metric-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-bottom: 14px; }
.metric-card { padding: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(145deg,var(--surface),rgba(13,24,21,.65)); }
.metric-card span, .metric-card small { color: var(--muted); display: block; }
.metric-card strong { display: block; font-size: clamp(1.3rem,2.2vw,1.8rem); margin: 10px 0 5px; letter-spacing: -.03em; }
.positive { color: var(--positive) !important; }
.negative { color: var(--negative) !important; }
.warning { color: var(--warning) !important; }
.dashboard-grid { display: grid; gap: 14px; margin-bottom: 14px; }
.dashboard-grid.wide-left { grid-template-columns: minmax(0,2fr) minmax(270px,.8fr); }
.dashboard-grid.equal { grid-template-columns: repeat(2,minmax(0,1fr)); }
.panel { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); padding: 18px; min-width: 0; }
.panel-header { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
select, input { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 9px; padding: 9px 10px; min-width: 0; }
input:focus, select:focus, button:focus-visible { outline: 2px solid rgba(23,211,154,.65); outline-offset: 2px; }
.chart-wrap { position: relative; height: 275px; }
.chart-wrap.small { height: 220px; }
canvas { width: 100%; height: 100%; display: block; }

/*
 * M4.42 Portfolio chart touch surface.
 *
 * iOS/iPadOS Safari can treat a long-press/drag over canvas
 * as selectable content, showing the blue selection rectangle,
 * handles and magnifier. Keep the chart interactive while
 * allowing normal vertical page scrolling and pinch zoom.
 */
#portfolioChart,
#portfolioChartTooltip,
#portfolioChartCrosshair,
#portfolioChartValuePoint,
#portfolioChartPnlPoint {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

#portfolioChart {
  touch-action: pan-y pinch-zoom;
  -webkit-tap-highlight-color: transparent;
}

.chart-legend { display: flex; gap: 20px; color: var(--muted); font-size: .8rem; margin-top: 8px; }
.chart-legend i { width: 18px; height: 3px; display: inline-block; margin-right: 6px; vertical-align: middle; }
.legend-value { background: var(--accent); }.legend-pnl { background: var(--blue); }
.status-ring-wrap { display: grid; place-items: center; padding: 4px 0 16px; }
.status-ring { --run: 0deg; --pause: 0deg; width: 142px; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--positive) 0 var(--run),var(--warning) var(--run) var(--pause),#53655e var(--pause) 360deg); display: grid; place-items: center; position: relative; }
.status-ring::after { content:""; position:absolute; inset:17px; border-radius:50%; background:var(--surface); }
.status-ring div { z-index:1; text-align:center; }.status-ring strong,.status-ring span { display:block; }.status-ring strong { font-size:1.55rem; }.status-ring span { color:var(--muted);font-size:.78rem; }
.status-list { display: grid; gap: 10px; }
.status-row { display: flex; justify-content: space-between; color: var(--muted); }
.status-row b { color: var(--text); }
.status-row .dot { width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:8px; }
.leader-list, .event-list, .rule-list, .sync-list { display: grid; gap: 10px; }
.leader { display: grid; grid-template-columns: 1fr auto; gap: 7px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.leader:last-child { border-bottom: 0; }.leader small { color:var(--muted); }.leader strong { text-align:right; }
.event, .rule, .sync-run { border: 1px solid var(--border); border-radius: 11px; padding: 12px; background: var(--surface-2); }
.event { display:grid;grid-template-columns:10px 1fr auto;gap:10px;align-items:start; }.event-dot { width:8px;height:8px;border-radius:50%;background:var(--warning);margin-top:6px; }.event p,.event small { margin:0; }.event small,.sync-run small { color:var(--muted); }.event button { align-self:center; }
.toolbar-panel { display:flex;justify-content:space-between;gap:16px;align-items:end;margin-bottom:14px; }.filters { display:grid;grid-template-columns:minmax(190px,1.4fr) repeat(4,minmax(120px,.7fr));gap:10px;flex:1; }.filters label,.form-grid label { color:var(--muted);font-size:.78rem;display:grid;gap:5px; }
.table-panel { padding:0;overflow:hidden; }.table-scroll { overflow-x:auto; }table { border-collapse:collapse;width:100%;font-size:.9rem; }th,td { padding:14px 15px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap; }th { color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;background:rgba(255,255,255,.012); }tbody tr:hover { background:rgba(255,255,255,.018); }.strategy-cell strong,.strategy-cell small { display:block; }.strategy-cell small { color:var(--muted);margin-top:3px; }.status-badge.running { color:var(--positive);border-color:rgba(32,212,155,.32); }.status-badge.stopped,.status-badge.error { color:var(--negative); }.status-badge.paused { color:var(--warning); }.row-button { background:none;border:0;color:var(--accent);padding:5px; }
.empty-state { color:var(--muted);text-align:center;padding:28px 10px; }.hidden { display:none !important; }
.rule { display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center; }.rule p,.rule small { margin:0; }.rule p { margin-bottom:4px; }.rule small { color:var(--muted); }.switch { position:relative;width:42px;height:24px; }.switch input { opacity:0;width:0;height:0; }.switch span { position:absolute;inset:0;background:#33443e;border-radius:99px;transition:.2s; }.switch span::before { content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:white;border-radius:50%;transition:.2s; }.switch input:checked + span { background:var(--accent-dark); }.switch input:checked + span::before { transform:translateX(18px); }
.inline-check { color:var(--muted);font-size:.8rem;display:flex;align-items:center;gap:7px; }.inline-check input { width:auto; }
.definition-list { display:grid;grid-template-columns:minmax(130px,.6fr) 1fr;margin:0;gap:0; }.definition-list dt,.definition-list dd { padding:10px 0;border-bottom:1px solid var(--border);margin:0; }.definition-list dt { color:var(--muted); }.definition-list dd { text-align:right;overflow-wrap:anywhere; }.raw-panel { margin-top:14px; }.raw-panel pre,.detail-columns pre { max-height:440px;overflow:auto;background:#07100e;border:1px solid var(--border);border-radius:10px;padding:14px;color:#b9d7cc;font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;word-break:break-word; }
.sync-run { display:grid;grid-template-columns:10px 1fr auto;gap:10px; }.sync-dot { width:8px;height:8px;border-radius:50%;margin-top:5px;background:var(--positive); }.sync-dot.error { background:var(--negative); }
.toast { position:fixed;right:26px;top:22px;background:var(--surface-3);border:1px solid var(--border);border-radius:10px;padding:11px 14px;box-shadow:var(--shadow);z-index:20;opacity:0;transform:translateY(-10px);pointer-events:none;transition:.2s;max-width:380px; }.toast.show { opacity:1;transform:none; }.toast.error { border-color:rgba(255,110,124,.5);color:var(--negative); }
dialog { color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:0; }dialog::backdrop { background:rgba(0,0,0,.68);backdrop-filter:blur(3px); }.bot-dialog { width:min(1050px,94vw);max-height:92vh; }.small-dialog { width:min(620px,94vw); }.dialog-header { position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--border);background:var(--surface); }.dialog-header h2 { margin-bottom:4px; }.icon-button { width:34px;height:34px;border:1px solid var(--border);border-radius:9px;background:var(--surface-2);color:var(--text);font-size:1.25rem; }.dialog-content { padding:20px;overflow:auto;max-height:calc(92vh - 75px); }.detail-metrics { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:18px; }.detail-stat { background:var(--surface-2);border:1px solid var(--border);padding:13px;border-radius:11px; }.detail-stat span,.detail-stat small { color:var(--muted);display:block; }.detail-stat strong { display:block;margin:7px 0 2px;font-size:1.15rem; }.detail-chart { margin-bottom:20px; }.detail-columns { display:grid;grid-template-columns:.8fr 1.2fr;gap:20px; }.raw-tabs { display:flex;gap:10px;margin-bottom:8px;flex-wrap:wrap; }.raw-tab { color:var(--muted); }.raw-tab.active { color:var(--accent);border-bottom:2px solid var(--accent); }.danger-zone { display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px;padding:14px;border:1px solid rgba(255,110,124,.35);border-radius:11px;background:rgba(255,110,124,.05); }.danger-zone p { color:var(--muted);margin:4px 0 0;font-size:.85rem; }
.form-grid { display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:20px; }.form-grid .full { grid-column:1/-1; }.form-actions { display:flex;justify-content:flex-end;gap:10px; }.form-error { margin:0;padding:10px 12px;border:1px solid rgba(255,110,124,.45);border-radius:9px;background:rgba(255,110,124,.08);color:var(--negative);font-size:.85rem; }.admin-help { margin:0;color:var(--muted);font-size:.82rem; }
@media (max-width:1100px) { .metric-grid { grid-template-columns:repeat(2,1fr); }.filters { grid-template-columns:repeat(3,1fr); }.detail-metrics { grid-template-columns:repeat(3,1fr); } }
@media (max-width:820px) { .app-shell { grid-template-columns:1fr; }.sidebar { position:static;height:auto;padding:12px 14px;display:grid;grid-template-columns:auto 1fr;align-items:center; }.brand { padding:0; }.brand small,.sidebar-footer { display:none; }nav { display:flex;justify-content:flex-end;overflow-x:auto; }.nav-item { padding:9px 11px;white-space:nowrap; }.nav-item span { display:none; }main { padding:18px 14px 42px; }.dashboard-grid.wide-left,.dashboard-grid.equal,.detail-columns { grid-template-columns:1fr; }.toolbar-panel { align-items:stretch;flex-direction:column; }.filters { grid-template-columns:repeat(2,1fr); }.detail-metrics { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .sidebar { grid-template-columns:1fr;gap:10px; }.brand { justify-content:center; }nav { justify-content:flex-start; }.topbar { align-items:flex-start;flex-direction:column; }.top-actions { width:100%; }.top-actions .button { flex:1; }.metric-grid { grid-template-columns:1fr; }.filters { grid-template-columns:1fr; }.chart-wrap { height:230px; }.detail-metrics { grid-template-columns:1fr 1fr; }.form-grid { grid-template-columns:1fr; }.form-grid .full { grid-column:auto; }.definition-list { grid-template-columns:1fr; }.definition-list dd { text-align:left;padding-top:0; }.danger-zone { align-items:flex-start;flex-direction:column; } }

.site-footer {
  margin-top: 3rem;
  padding: 1.5rem 1rem 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted, #8fa39d);
}

.site-footer .footer-separator {
  display: inline-block;
  margin: 0 0.4rem;
  opacity: 0.6;
}

.site-footer .footer-note {
  margin-top: 0.45rem;
  font-size: 0.75rem;
  opacity: 0.7;
}

/* Multi-account controls and status */
.account-selector { display:grid; gap:4px; color:var(--muted); font-size:.72rem; }
.account-selector select { min-width:170px; padding:7px 10px; }
.account-badge { display:inline-flex; align-items:center; border:1px solid rgba(84,167,255,.3); color:var(--blue); background:rgba(84,167,255,.08); border-radius:999px; padding:4px 8px; font-size:.75rem; }
.account-list { display:grid; gap:10px; }
.account-row { display:grid; grid-template-columns:10px minmax(0,1fr) auto; gap:10px; align-items:start; border:1px solid var(--border); border-radius:11px; padding:12px; background:var(--surface-2); }
.account-row strong,.account-row small { display:block; }
.account-row small { color:var(--muted); margin-top:3px; }
.account-dot { width:8px; height:8px; border-radius:50%; margin-top:6px; background:var(--muted); }
.account-dot.success { background:var(--positive); }
.account-dot.running { background:var(--warning); }
.account-dot.error { background:var(--negative); }
.account-dot.disabled { background:#53655e; }
.account-status { text-align:right; }
.account-status small { margin-top:6px; }
.account-error { grid-column:2/-1; margin:0; color:var(--negative); font-size:.78rem; overflow-wrap:anywhere; }
.status-badge.success { color:var(--positive); border-color:rgba(32,212,155,.32); }
.status-badge.disabled { color:var(--muted); }
.sync-dot.warning { background:var(--warning); }

@media (max-width:820px) {
  .account-selector { flex:1; }
  .account-selector select { min-width:0; width:100%; }
}
@media (max-width:560px) {
  .top-actions { flex-wrap:wrap; }
  .account-selector { flex-basis:100%; }
  .account-row { grid-template-columns:10px minmax(0,1fr); }
  .account-status { grid-column:2; text-align:left; }
}

/* Account-scoped action authentication */
.admin-identity { display:inline-flex; align-items:center; max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border:1px solid rgba(23,211,154,.28); color:var(--accent); background:rgba(23,211,154,.08); border-radius:999px; padding:7px 10px; font-size:.76rem; }
.admin-only-label { display:inline-flex; vertical-align:middle; margin-left:6px; border:1px solid var(--border); color:var(--muted); border-radius:999px; padding:2px 6px; font-size:.68rem; font-weight:400; }
.admin-help { margin:0; color:var(--muted); font-size:.84rem; line-height:1.5; }
button:disabled { cursor:not-allowed; opacity:.48; }
@media (max-width:820px) { .admin-identity { max-width:180px; } }

/* Compact desktop topbar */
@media (min-width: 1200px) {
  .topbar {
    align-items: flex-start;
    gap: 16px;
  }

  .topbar > div:first-child {
    flex: 0 1 360px;
    min-width: 250px;
  }

  .top-actions {
    flex: 1;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 7px;
  }

  .top-actions .button {
    padding: 7px 10px;
    border-radius: 9px;
    font-size: 0.82rem;
    line-height: 1.2;
    white-space: nowrap;
  }

  .top-actions .account-selector {
    flex: 0 0 auto;
    gap: 2px;
    font-size: 0.67rem;
  }

  .top-actions .account-selector select {
    width: 145px;
    min-width: 145px;
    padding: 6px 8px;
    font-size: 0.8rem;
  }

  .top-actions .mode-badge {
    flex: 0 0 auto;
    padding: 4px 7px;
    font-size: 0.71rem;
    white-space: nowrap;
  }

  .top-actions .admin-identity {
    flex: 0 1 auto;
    max-width: 175px;
    padding: 6px 8px;
    font-size: 0.71rem;
  }
}
/* End compact desktop topbar */

/* Gate trigger-waiting state inferred from bot position data. */
.status-badge.waiting-trigger {
  color: #f3c76a;
  border-color: rgba(243, 199, 106, 0.45);
  background: rgba(243, 199, 106, 0.08);
}

.status-badge.out-of-range {
  color: #ffad7c;
  border-color: rgba(255, 159, 110, 0.46);
  background: rgba(255, 159, 110, 0.09);
}

/* Portfolio status donut including trigger-waiting strategies. */
.status-ring {
  --run: 0deg;
  --range: 0deg;
  --wait: 0deg;
  --pause: 0deg;
  --stop: 0deg;

  background: conic-gradient(
    var(--positive) 0 var(--run),
    #ff9f6e var(--run) var(--range),
    #f3c76a var(--range) var(--wait),
    var(--warning) var(--wait) var(--pause),
    #53655e var(--pause) var(--stop),
    var(--negative) var(--stop) 360deg
  );
}

/* Readable dual-axis portfolio chart and hover values. */
.chart-wrap {
  height: 310px;
}

.chart-legend {
  align-items: center;
  flex-wrap: wrap;
}

.chart-legend small {
  margin-left: auto;
  color: var(--muted);
}

.chart-tooltip {
  position: absolute;
  z-index: 5;
  min-width: 190px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(8, 18, 15, 0.97);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .34);
  color: var(--text);
  font-size: .78rem;
  pointer-events: none;
}

.chart-tooltip-time {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-weight: 600;
}

.chart-tooltip span {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 7px;
  margin-top: 5px;
}

.chart-tooltip b {
  color: var(--text);
}

.tooltip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.tooltip-dot.value {
  background: var(--accent);
}

.tooltip-dot.pnl {
  background: var(--blue);
}

.chart-crosshair {
  position: absolute;
  z-index: 3;
  width: 1px;
  border-left: 1px dashed rgba(255, 255, 255, .42);
  pointer-events: none;
  transform: translateX(-.5px);
}

@media (max-width: 700px) {
  .chart-wrap {
    height: 285px;
  }

  .chart-legend small {
    width: 100%;
    margin-left: 0;
  }
}

/* Local stopped-bot archive */
.archived-bots-panel {
  margin-top: 18px;
  padding: 0;
  overflow: hidden;
}

.archived-bots-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.archived-bots-summary::-webkit-details-marker {
  display: none;
}

.archived-bots-summary::before {
  content: "▸";
  flex: 0 0 auto;
  color: var(--muted);
  transition: transform .15s ease;
}

.archived-bots-panel[open]
  > .archived-bots-summary::before {
  transform: rotate(90deg);
}

.archived-bots-summary > div {
  flex: 1 1 auto;
}

.archived-bots-summary strong,
.archived-bots-summary small {
  display: block;
}

.archived-bots-summary small {
  margin-top: 4px;
  color: var(--muted);
  font-weight: 400;
}

.archived-bots-content {
  border-top: 1px solid var(--border);
}

.bot-row-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bot-archive-action {
  color: var(--muted);
}

.bot-restore-action {
  white-space: nowrap;
}

@media (max-width: 560px) {
  .archived-bots-summary {
    align-items: flex-start;
  }

  .bot-row-actions {
    gap: 6px;
  }
}

/* 3J13 global design-system polish v1 */

:root {
  --surface-raised: #12201c;
  --surface-hover: #15261f;
  --surface-muted: #0a1512;

  --border-soft:
    rgba(143, 165, 157, .16);

  --border-strong:
    rgba(143, 165, 157, .30);

  --text-soft: #b8cbc4;

  --focus-ring:
    rgba(23, 211, 154, .18);

  --radius-sm: 9px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --shadow-sm:
    0 6px 20px rgba(0, 0, 0, .14);

  --shadow-lg:
    0 20px 55px rgba(0, 0, 0, .30);
}


/* -------------------------------------------------------
 * APP SHELL
 * ---------------------------------------------------- */

html {
  background: var(--bg);
}

body {
  background:
    radial-gradient(
      circle at 72% -20%,
      rgba(23, 211, 154, .055),
      transparent 34rem
    ),
    radial-gradient(
      circle at 15% 55%,
      rgba(99, 166, 255, .025),
      transparent 36rem
    ),
    var(--bg);

  line-height: 1.45;
}

main {
  width: 100%;
  max-width: 1760px;
  margin-inline: auto;
}

.sidebar {
  border-right-color: var(--border-soft);

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, .014),
      transparent 17rem
    ),
    var(--sidebar);
}

.brand {
  gap: 11px;
}

.brand-mark {
  border:
    1px solid rgba(255, 255, 255, .08);

  box-shadow:
    0 7px 22px rgba(23, 211, 154, .15);

  font-size: 1rem;
  letter-spacing: -.03em;
}

.brand strong {
  letter-spacing: -.015em;
}

.brand small {
  font-size: .72rem;
}


/* -------------------------------------------------------
 * PRIMARY NAVIGATION
 * ---------------------------------------------------- */

.nav-item {
  min-height: 43px;

  border:
    1px solid transparent;

  font-size: .88rem;
  font-weight: 600;

  transition:
    background-color .16s ease,
    border-color .16s ease,
    color .16s ease,
    transform .16s ease;
}

.nav-item:hover {
  border-color: var(--border-soft);
  background: var(--surface);
  transform: translateX(1px);
}

.nav-item.active {
  border-color:
    rgba(23, 211, 154, .18);

  background:
    linear-gradient(
      90deg,
      rgba(23, 211, 154, .14),
      rgba(23, 211, 154, .055)
    );

  box-shadow:
    inset 3px 0 0
    rgba(23, 211, 154, .76);
}

.nav-item.active span:first-child {
  color: var(--accent);
}

.sidebar-footer {
  border-top-color: var(--border-soft);
  font-size: .78rem;
}


/* -------------------------------------------------------
 * PAGE HEADER
 * ---------------------------------------------------- */

.topbar {
  padding-bottom: 18px;

  border-bottom:
    1px solid var(--border-soft);
}

.topbar h1 {
  margin-bottom: 5px;

  font-size:
    clamp(
      1.55rem,
      2vw,
      1.82rem
    );

  letter-spacing: -.035em;
  line-height: 1.12;
}

.topbar p {
  color: var(--muted);
  line-height: 1.45;
}


/* -------------------------------------------------------
 * PANELS / CARDS
 * ---------------------------------------------------- */

.panel,
.metric-card {
  border-color: var(--border-soft);

  box-shadow:
    inset 0 1px 0
      rgba(255, 255, 255, .018),
    0 1px 1px
      rgba(0, 0, 0, .12);
}

.panel {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, .009),
      transparent 72px
    ),
    var(--surface);
}

.metric-card {
  position: relative;
  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      rgba(17, 30, 26, .96),
      rgba(10, 21, 18, .88)
    );

  transition:
    border-color .16s ease,
    transform .16s ease,
    box-shadow .16s ease;
}

.metric-card::after {
  content: "";

  position: absolute;
  inset: 0 auto 0 0;

  width: 2px;

  background:
    linear-gradient(
      180deg,
      rgba(23, 211, 154, .75),
      rgba(23, 211, 154, .04)
    );

  opacity: .75;
}

.metric-card:hover {
  border-color: var(--border-strong);

  box-shadow:
    var(--shadow-sm);

  transform: translateY(-1px);
}

.metric-card span {
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .015em;
}

.metric-card strong {
  margin-top: 9px;
  margin-bottom: 4px;

  font-variant-numeric:
    tabular-nums;
}

.metric-card small {
  font-size: .75rem;
  line-height: 1.4;
}


/* -------------------------------------------------------
 * PANEL HEADERS
 * ---------------------------------------------------- */

.panel-header {
  margin-bottom: 15px;
}

.panel-header h2,
.panel-header h3 {
  color: var(--text);
  letter-spacing: -.015em;
}

.panel-header h2 {
  font-size: 1rem;
}

.panel-header p {
  margin-top: 3px;
  line-height: 1.45;
}


/* -------------------------------------------------------
 * BUTTONS / ACTIONS
 * ---------------------------------------------------- */

.button {
  min-height: 38px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  border-color: var(--border-soft);
  border-radius: var(--radius-sm);

  padding:
    8px 13px;

  font-size: .84rem;
  font-weight: 650;
  line-height: 1.15;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, .025);

  transition:
    background-color .15s ease,
    border-color .15s ease,
    color .15s ease,
    box-shadow .15s ease,
    transform .15s ease;
}

.button.secondary {
  background:
    rgba(255, 255, 255, .025);
}

.button:hover:not(:disabled) {
  border-color: var(--border-strong);
  background: var(--surface-hover);

  transform: translateY(-1px);
}

.button.primary {
  border-color: var(--accent);

  box-shadow:
    0 5px 18px
    rgba(23, 211, 154, .13);
}

.button.primary:hover:not(:disabled) {
  background: #37e0ad;

  box-shadow:
    0 8px 22px
    rgba(23, 211, 154, .18);
}

.button.danger:hover:not(:disabled) {
  border-color:
    rgba(255, 110, 124, .60);

  background:
    rgba(255, 110, 124, .17);
}

.row-button,
.text-button,
.raw-tab {
  border-radius: 7px;

  font-size: .82rem;
  font-weight: 650;

  transition:
    background-color .14s ease,
    color .14s ease;
}

.row-button:hover,
.text-button:hover,
.raw-tab:hover {
  background:
    rgba(23, 211, 154, .075);
}

.icon-button {
  display: inline-grid;
  place-items: center;

  transition:
    border-color .15s ease,
    background-color .15s ease;
}

.icon-button:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}


/* -------------------------------------------------------
 * INPUTS
 * ---------------------------------------------------- */

select,
input {
  min-height: 38px;

  border-color: var(--border-soft);
  border-radius: var(--radius-sm);

  background:
    rgba(17, 30, 26, .90);

  box-shadow:
    inset 0 1px 1px
    rgba(0, 0, 0, .16);

  transition:
    border-color .15s ease,
    background-color .15s ease,
    box-shadow .15s ease;
}

select:hover,
input:hover {
  border-color: var(--border-strong);
}

select:focus,
input:focus,
button:focus-visible {
  outline: none;

  border-color:
    rgba(23, 211, 154, .58);

  box-shadow:
    0 0 0 3px
    var(--focus-ring);
}

.filters label,
.form-grid label,
.account-selector {
  font-weight: 600;
  letter-spacing: .01em;
}


/* -------------------------------------------------------
 * BADGES
 * ---------------------------------------------------- */

.mode-badge,
.status-badge,
.type-badge,
.account-badge,
.admin-identity {
  font-weight: 650;
  letter-spacing: .005em;
}

.status-badge {
  background:
    rgba(255, 255, 255, .018);
}

.status-badge.running,
.status-badge.success {
  background:
    rgba(32, 212, 155, .075);
}

.status-badge.stopped,
.status-badge.error {
  border-color:
    rgba(255, 110, 124, .30);

  background:
    rgba(255, 110, 124, .065);
}

.status-badge.paused,
.status-badge.waiting-trigger {
  background:
    rgba(241, 189, 100, .065);
}

.account-badge {
  background:
    rgba(99, 166, 255, .065);
}


/* -------------------------------------------------------
 * TOOLBARS
 * ---------------------------------------------------- */

.toolbar-panel {
  padding: 14px 16px;

  border-color: var(--border-soft);

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, .015),
      rgba(255, 255, 255, .004)
    ),
    var(--surface);
}


/* -------------------------------------------------------
 * TABLES
 * ---------------------------------------------------- */

.table-panel {
  border-color: var(--border-soft);
}

.table-scroll {
  scrollbar-width: thin;

  scrollbar-color:
    var(--border-strong)
    transparent;
}

table {
  font-variant-numeric:
    tabular-nums;
}

th,
td {
  padding: 12px 14px;
}

th {
  color: var(--muted);

  font-size: .71rem;
  font-weight: 700;

  letter-spacing: .065em;

  background:
    rgba(255, 255, 255, .015);
}

tbody tr {
  transition:
    background-color .12s ease;
}

tbody tr:hover {
  background:
    rgba(255, 255, 255, .026);
}

tbody tr:last-child td {
  border-bottom: 0;
}

.strategy-cell strong {
  font-weight: 700;
  letter-spacing: -.01em;
}

.strategy-cell small {
  margin-top: 4px;
  font-size: .73rem;
}


/* -------------------------------------------------------
 * LIST CARDS
 * ---------------------------------------------------- */

.event,
.rule,
.sync-run,
.account-row {
  border-color: var(--border-soft);

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, .012),
      transparent
    ),
    var(--surface-2);

  transition:
    border-color .15s ease,
    background-color .15s ease;
}

.event:hover,
.rule:hover,
.sync-run:hover,
.account-row:hover {
  border-color: var(--border-strong);
}


/* -------------------------------------------------------
 * EMPTY STATES
 * ---------------------------------------------------- */

.empty-state {
  padding:
    30px 14px;

  color: var(--muted);

  font-size: .82rem;
  line-height: 1.55;
}


/* -------------------------------------------------------
 * DIALOGS
 * ---------------------------------------------------- */

dialog {
  border-color: var(--border-strong);

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, .015),
      transparent 90px
    ),
    var(--surface);

  box-shadow:
    var(--shadow-lg);
}

dialog::backdrop {
  background:
    rgba(0, 8, 6, .74);

  backdrop-filter:
    blur(5px);
}

.dialog-header {
  border-bottom-color:
    var(--border-soft);

  background:
    rgba(13, 24, 21, .94);

  backdrop-filter:
    blur(12px);
}

.dialog-header h2 {
  letter-spacing: -.02em;
}

.dialog-content {
  scrollbar-width: thin;

  scrollbar-color:
    var(--border-strong)
    transparent;
}

.detail-stat {
  border-color: var(--border-soft);

  background:
    rgba(255, 255, 255, .018);
}

.detail-stat strong {
  font-variant-numeric:
    tabular-nums;
}

.raw-panel pre,
.detail-columns pre {
  border-color: var(--border-soft);

  background:
    var(--surface-muted);
}


/* -------------------------------------------------------
 * TOAST
 * ---------------------------------------------------- */

.toast {
  top: 20px;
  right: 22px;

  border-color:
    var(--border-strong);

  border-radius:
    var(--radius-md);

  padding:
    12px 15px;

  background:
    rgba(18, 32, 28, .97);

  box-shadow:
    var(--shadow-lg);

  font-size: .82rem;
  line-height: 1.4;

  backdrop-filter:
    blur(12px);
}

.toast.show {
  transform: none;
}


/* -------------------------------------------------------
 * ARCHIVED BOTS
 * ---------------------------------------------------- */

.archived-bots-panel {
  border-color: var(--border-soft);

  background:
    rgba(10, 21, 18, .70);
}

.archived-bots-summary {
  transition:
    background-color .15s ease;
}

.archived-bots-summary:hover {
  background:
    rgba(255, 255, 255, .018);
}

.archived-bots-summary strong {
  font-size: .9rem;
}

.archived-bots-summary small {
  max-width: 680px;

  font-size: .75rem;
  line-height: 1.45;
}

.archived-bots-content {
  border-top-color:
    var(--border-soft);
}

.bot-row-actions {
  justify-content: flex-end;
}


/* -------------------------------------------------------
 * ACCESSIBILITY / MOTION
 * ---------------------------------------------------- */

::selection {
  color: #04100c;
  background: rgba(23, 211, 154, .86);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* -------------------------------------------------------
 * RESPONSIVE POLISH
 * ---------------------------------------------------- */

@media (max-width: 1100px) {
  main {
    padding-inline:
      clamp(16px, 2.2vw, 26px);
  }
}

@media (max-width: 820px) {
  .sidebar {
    border-right: 0;

    border-bottom:
      1px solid var(--border-soft);

    box-shadow:
      0 6px 24px
      rgba(0, 0, 0, .14);
  }

  nav {
    gap: 4px;
  }

  .nav-item {
    min-height: 39px;
  }

  .nav-item:hover {
    transform: none;
  }

  .topbar {
    margin-bottom: 18px;
    padding-bottom: 16px;
  }
}

@media (max-width: 560px) {
  main {
    padding:
      16px 12px 38px;
  }

  .topbar {
    gap: 14px;
  }

  .topbar h1 {
    font-size: 1.46rem;
  }

  .top-actions {
    gap: 7px;
  }

  .top-actions .button {
    min-height: 40px;
  }

  .panel {
    padding: 15px;
  }

  .metric-card {
    padding: 16px;
  }

  th,
  td {
    padding:
      11px 12px;
  }

  .toast {
    top: 12px;
    left: 12px;
    right: 12px;

    max-width: none;
  }

  .dialog-header {
    padding:
      15px 16px;
  }

  .dialog-content {
    padding: 16px;
  }

  .archived-bots-summary {
    padding:
      15px 16px;
  }
}

/* End 3J13 global design-system polish v1 */

/* 3J13 Overview-specific polish v1 */

/*
 * The lower Overview panels should size to their content.
 * A tall Recent alerts panel must not force Performance
 * leaders to become a large empty card.
 */
#tab-overview .dashboard-grid.equal {
  align-items: start;
}


/* Performance leaders */

#tab-overview .leader-list {
  gap: 0;
}

#tab-overview .leader {
  width: 100%;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items: center;
  gap: 20px;

  padding: 13px 4px;

  border-radius: 0;

  color: var(--text);
  text-align: left;
}

#tab-overview .leader:first-child {
  padding-top: 5px;
}

#tab-overview .leader:last-child {
  padding-bottom: 5px;
}

#tab-overview .leader:hover {
  background:
    rgba(255, 255, 255, .018);
}

#tab-overview .leader-copy {
  min-width: 0;

  display: grid;
  gap: 4px;
}

#tab-overview .leader-name {
  overflow: hidden;

  color: var(--text);

  font-size: .86rem;
  font-weight: 700;
  line-height: 1.3;

  text-overflow: ellipsis;
  white-space: nowrap;
}

#tab-overview .leader-meta {
  overflow: hidden;

  color: var(--muted);

  font-size: .72rem;
  font-weight: 500;
  line-height: 1.35;

  text-overflow: ellipsis;
  white-space: nowrap;
}

#tab-overview .leader-result {
  min-width: 82px;

  display: grid;
  justify-items: end;
  gap: 3px;

  font-variant-numeric:
    tabular-nums;

  text-align: right;
}

#tab-overview .leader-result strong {
  font-size: .86rem;
  font-weight: 750;
  line-height: 1.2;
}

#tab-overview .leader-result small {
  color: var(--muted);

  font-size: .71rem;
  font-weight: 550;
}


/* Recent alerts */

#tab-overview #overviewAlerts {
  gap: 8px;
}

#tab-overview #overviewAlerts .event {
  grid-template-columns:
    9px
    minmax(0, 1fr)
    auto;

  padding: 11px 12px;
}

#tab-overview #overviewAlerts .event p {
  color: var(--text-soft);

  font-size: .79rem;
  line-height: 1.48;
}

#tab-overview #overviewAlerts .event small {
  display: block;

  margin-top: 5px;

  font-size: .70rem;
}

#tab-overview #overviewAlerts .status-badge {
  align-self: center;
}


/* Metric semantic hierarchy */

#tab-overview #currentValue {
  color: var(--text) !important;
}


/* Small screens */

@media (max-width: 560px) {
  #tab-overview .leader {
    gap: 12px;

    padding:
      12px 2px;
  }

  #tab-overview .leader-result {
    min-width: 68px;
  }

  #tab-overview .leader-meta {
    white-space: normal;
  }

  #tab-overview #overviewAlerts .event {
    grid-template-columns:
      8px
      minmax(0, 1fr);
  }

  #tab-overview #overviewAlerts
  .event > :last-child {
    grid-column: 2;
    justify-self: start;
  }
}

/* End 3J13 Overview-specific polish v1 */

/* 3J13 Bots-specific polish v1 */


/* -------------------------------------------------------
 * FILTER TOOLBAR
 * ---------------------------------------------------- */

#tab-bots .toolbar-panel {
  padding:
    14px 16px;

  gap: 14px;
}

#tab-bots .filters {
  grid-template-columns:
    minmax(240px, 1.45fr)
    repeat(
      4,
      minmax(125px, .72fr)
    );

  gap: 11px;
}

#tab-bots .filters label {
  gap: 6px;

  color: var(--muted);

  font-size: .71rem;
  font-weight: 650;
}

#tab-bots .filters input,
#tab-bots .filters select {
  width: 100%;
}

#tab-bots #botSearch {
  padding-left: 12px;
}

#tab-bots #exportCsv {
  flex: 0 0 auto;

  min-width: 105px;

  white-space: nowrap;
}


/* -------------------------------------------------------
 * ACTIVE BOT TABLE
 * ---------------------------------------------------- */

#tab-bots .table-panel table {
  min-width: 980px;

  font-size: .84rem;
}

#tab-bots .table-panel th,
#tab-bots .table-panel td {
  padding:
    12px 14px;
}

#tab-bots .table-panel th {
  font-size: .69rem;
}

/*
 * Financial values and runtime scan more naturally
 * when their decimal/value edges line up.
 */
#tab-bots .table-panel
:is(
  th:nth-child(4),
  th:nth-child(5),
  th:nth-child(6),
  th:nth-child(7),
  th:nth-child(8),
  td:nth-child(4),
  td:nth-child(5),
  td:nth-child(6),
  td:nth-child(7),
  td:nth-child(8)
) {
  text-align: right;

  font-variant-numeric:
    tabular-nums;
}

#tab-bots .table-panel
th:last-child,
#tab-bots .table-panel
td:last-child {
  text-align: right;
}

#tab-bots .table-panel
.strategy-cell {
  min-width: 180px;
}

#tab-bots .table-panel
.strategy-cell strong {
  color: var(--text);

  font-size: .83rem;
  font-weight: 700;
  line-height: 1.3;
}

#tab-bots .table-panel
.strategy-cell small {
  margin-top: 4px;

  font-size: .70rem;
  line-height: 1.35;
}

#tab-bots .table-panel
tbody tr {
  transition:
    background-color .14s ease,
    box-shadow .14s ease;
}

#tab-bots .table-panel
tbody tr:hover {
  background:
    rgba(255, 255, 255, .025);

  box-shadow:
    inset 2px 0 0
    rgba(23, 211, 154, .30);
}


/* -------------------------------------------------------
 * ROW ACTIONS
 * ---------------------------------------------------- */

#tab-bots .bot-row-actions {
  justify-content: flex-end;

  gap: 5px;

  white-space: nowrap;
}

#tab-bots .bot-row-actions
.row-button {
  color: var(--text-soft);

  font-size: .76rem;
  font-weight: 600;

  padding:
    5px 6px;
}

#tab-bots .bot-row-actions
.row-button:hover {
  color: var(--accent);

  background:
    rgba(23, 211, 154, .065);
}

#tab-bots .bot-archive-action {
  color: var(--muted);

  font-size: .76rem;
}

#tab-bots .bot-archive-action:hover {
  color: var(--text);
}

#tab-bots .bot-restore-action {
  border-radius: 7px;

  padding:
    5px 7px;

  color: var(--accent);

  background:
    rgba(23, 211, 154, .055);
}

#tab-bots .bot-restore-action:hover {
  background:
    rgba(23, 211, 154, .10);
}


/* -------------------------------------------------------
 * ACCOUNT / STATUS BADGES
 * ---------------------------------------------------- */

#tab-bots .account-badge,
#tab-bots .status-badge {
  padding:
    4px 8px;

  font-size: .71rem;
}

#tab-bots .status-badge {
  min-width: 0;
}


/* -------------------------------------------------------
 * ARCHIVED BOTS
 * ---------------------------------------------------- */

#tab-bots .archived-bots-panel {
  margin-top: 16px;

  border-color:
    rgba(143, 165, 157, .13);

  background:
    rgba(7, 16, 14, .72);
}

#tab-bots .archived-bots-summary {
  padding:
    15px 17px;
}

#tab-bots .archived-bots-summary::before {
  font-size: .70rem;
}

#tab-bots .archived-bots-summary strong {
  color: var(--text-soft);

  font-size: .83rem;
}

#tab-bots .archived-bots-summary small {
  max-width: 720px;

  margin-top: 4px;

  font-size: .70rem;
  line-height: 1.4;
}

#tab-bots #archivedBotsCount {
  color: var(--muted);

  border-color:
    rgba(143, 165, 157, .18);

  background:
    rgba(255, 255, 255, .018);

  font-size: .69rem;
}

#tab-bots .archived-bots-content {
  border-top-color:
    rgba(143, 165, 157, .13);

  background:
    rgba(0, 0, 0, .055);
}

#tab-bots .archived-bots-content
table {
  min-width: 1060px;

  font-size: .81rem;
}

#tab-bots .archived-bots-content
th,
#tab-bots .archived-bots-content
td {
  padding:
    11px 14px;
}

#tab-bots .archived-bots-content
th {
  color:
    rgba(143, 165, 157, .88);

  font-size: .68rem;
}

/*
 * Archived financial values remain fully readable,
 * while the row itself is visually secondary to
 * active trading strategies.
 */
#tab-bots .archived-bots-content
:is(
  th:nth-child(4),
  th:nth-child(5),
  th:nth-child(6),
  th:nth-child(7),
  td:nth-child(4),
  td:nth-child(5),
  td:nth-child(6),
  td:nth-child(7)
) {
  text-align: right;

  font-variant-numeric:
    tabular-nums;
}

#tab-bots .archived-bots-content
th:last-child,
#tab-bots .archived-bots-content
td:last-child {
  text-align: right;
}

#tab-bots .archived-bots-content
tbody tr {
  background:
    rgba(255, 255, 255, .004);

  transition:
    background-color .14s ease;
}

#tab-bots .archived-bots-content
tbody tr:hover {
  background:
    rgba(255, 255, 255, .018);
}

#tab-bots .archived-bots-content
.strategy-cell strong {
  color: var(--text-soft);

  font-size: .81rem;
}

#tab-bots .archived-bots-content
.strategy-cell small {
  font-size: .69rem;
}

#tab-bots .archived-bots-content
.account-badge {
  opacity: .90;
}


/* -------------------------------------------------------
 * RESPONSIVE
 * ---------------------------------------------------- */

@media (max-width: 1100px) {
  #tab-bots .filters {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }

  #tab-bots .filters
  label:first-child {
    grid-column:
      span 2;
  }
}

@media (max-width: 820px) {
  #tab-bots .toolbar-panel {
    gap: 12px;
  }

  #tab-bots #exportCsv {
    width: fit-content;
  }
}

@media (max-width: 560px) {
  #tab-bots .filters {
    grid-template-columns: 1fr;
  }

  #tab-bots .filters
  label:first-child {
    grid-column: auto;
  }

  #tab-bots #exportCsv {
    width: 100%;
  }

  #tab-bots .archived-bots-summary {
    gap: 12px;

    padding:
      14px 15px;
  }

  #tab-bots .archived-bots-summary small {
    max-width: none;
  }
}

/* End 3J13 Bots-specific polish v1 */

/* 3J16 Compact shared account selector */

.top-actions
.account-selector {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  flex: 0 0 auto;

  color: var(--muted);

  font-size: .62rem;
  font-weight: 650;
  line-height: 1;

  white-space: nowrap;
}

.top-actions
.account-selector-label {
  display: inline-block;

  opacity: .78;

  letter-spacing: .015em;
}

.top-actions
.account-selector select {
  width: 156px;
  min-width: 156px;
  height: 32px;

  padding:
    4px
    26px
    4px
    9px;

  border-radius: 8px;

  font-size: .76rem;
  font-weight: 600;
  line-height: 1.1;
}

@media (max-width: 820px) {
  .top-actions
  .account-selector {
    display: grid;

    grid-template-columns:
      auto
      minmax(0, 1fr);

    flex:
      1
      1
      180px;

    gap: 6px;

    align-items: center;
  }

  .top-actions
  .account-selector select {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 560px) {
  .top-actions
  .account-selector {
    flex-basis: 100%;
  }
}

/* End 3J16 Compact shared account selector */


/* =========================================================
   M4.21C — Native bot Open Orders / Trades
   ========================================================= */

.bot-native-activity {
  margin: 0 0 20px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
}

.bot-native-activity-header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}

.bot-native-activity-header h3 {
  margin: 0;
}

.bot-native-activity-header p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: .78rem;
}

.bot-native-activity-header p.error {
  color: var(--negative);
}

.bot-native-summary {
  display: grid;
  grid-template-columns:
    repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.bot-native-summary > div {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.bot-native-summary span {
  display: block;
  color: var(--muted);
  font-size: .68rem;
}

.bot-native-summary strong {
  display: block;
  margin-top: 5px;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.bot-native-activity-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.bot-native-activity-section {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 11px;
  overflow: hidden;
  background: var(--surface);
}

.bot-native-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 13px;
  border-bottom: 1px solid var(--border);
}

.bot-native-section-head strong,
.bot-native-section-head small {
  display: block;
}

.bot-native-section-head small {
  margin-top: 3px;
  color: var(--muted);
  font-size: .7rem;
}

.bot-native-table-wrap {
  overflow-x: auto;
}

.bot-native-table {
  width: 100%;
  min-width: 820px;
}

.bot-native-table th,
.bot-native-table td {
  padding: 10px 12px;
  font-size: .75rem;
}

.bot-native-table td.numeric,
.bot-native-table td.mono {
  font-variant-numeric: tabular-nums;
}

.bot-native-table td.mono {
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;
  font-size: .69rem;
}

.bot-native-table td.positive {
  color: var(--positive);
}

.bot-native-side {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 3px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: .67rem;
  font-weight: 700;
}

.bot-native-side.buy {
  color: var(--positive);
  border-color: rgba(32, 212, 155, .3);
  background: rgba(32, 212, 155, .06);
}

.bot-native-side.sell {
  color: var(--negative);
  border-color: rgba(255, 110, 124, .3);
  background: rgba(255, 110, 124, .06);
}

.bot-native-empty {
  padding: 22px 12px !important;
  color: var(--muted);
  text-align: center !important;
}

@media (max-width: 820px) {
  .bot-native-summary {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .bot-native-activity-header {
    flex-direction: column;
  }

  .bot-native-summary {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

/*
 * M4.50C1 — shared Gate Bots trading-mark identity.
 *
 * Classic owns the default green/blue presentation.
 * Aurora overrides only the decorative logo tokens.
 */
.brand-mark {
  --brand-logo-bg:
    var(--surface-2);
  --brand-logo-primary:
    var(--accent);
  --brand-logo-secondary:
    var(--blue);

  overflow: hidden;

  border: 0;
  background: transparent;
  color: inherit;

  box-shadow:
    0 8px 22px
    rgba(23, 211, 154, .16);
}

.brand-logo {
  display: block;

  width: 100%;
  height: 100%;
}

.brand-logo-bg {
  fill:
    var(--brand-logo-bg);
}

.brand-logo-ring {
  fill: none;

  stroke:
    var(--brand-logo-primary);

  stroke-width: 9.8;
  stroke-linecap: round;
}

.brand-logo-bar {
  fill:
    var(--brand-logo-primary);
}

.brand-logo-trend {
  fill: none;

  stroke:
    var(--brand-logo-secondary);

  stroke-width: 4.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brand-logo-arrow {
  fill:
    var(--brand-logo-secondary);
}

/* End M4.50C1 shared Gate Bots trading-mark identity */