:root{--bg-0:#080a0f;--bg-1:#0d1117;--bg-2:#111827;--bg-3:#1e293b;--text-1:#f1f5f9;--text-2:#94a3b8;--text-3:#64748b;--green:#34d399;--red:#f87171;--yellow:#fbbf24;--blue:#60a5fa;--border:#1e293b;--mono:'SF Mono','Fira Code',monospace;--accent:#34d399;--accent-rgb:52,211,153}
*{box-sizing:border-box;margin:0;padding:0}
.platform-nav{background:#050709;border-bottom:1px solid #0d1117;padding:0 10px;display:flex;align-items:center;gap:2px;height:38px;overflow-x:auto;-webkit-overflow-scrolling:touch;flex-shrink:0}
.platform-nav a{padding:6px 12px;border-radius:5px;font-size:11px;font-weight:600;letter-spacing:.04em;text-decoration:none;color:#475569;white-space:nowrap;min-height:28px;display:inline-flex;align-items:center}
.platform-nav a:hover{color:#94a3b8}
.platform-nav a.nav-paper{color:#94a3b8}
.platform-nav a.nav-live{color:#34d399}
.platform-nav a.nav-cb{color:#f0a500}
.platform-nav a.nav-active{background:rgba(var(--accent-rgb),.1);color:var(--accent);border:1px solid rgba(var(--accent-rgb),.2)}
.platform-nav a.nav-status{color:#60a5fa;font-size:11px;font-weight:700;letter-spacing:.04em;background:rgba(96,165,250,.08);border:1px solid rgba(96,165,250,.2);padding:4px 10px;border-radius:4px}
.platform-nav a.nav-status:hover{color:#93c5fd;background:rgba(96,165,250,.14)}
.platform-nav .nav-div{width:1px;height:14px;background:#1e293b;margin:0 2px;flex-shrink:0}

html,body{height:100%;overflow:hidden}
body{background:var(--bg-0);color:var(--text-1);font-family:'Inter',system-ui,sans-serif;font-size:13px;display:flex;flex-direction:column;height:100vh;overflow:hidden}

/* ── Platform Nav ── */

/* ── Topbar ── */

.gate-chip{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.05em;padding:3px 8px;border-radius:4px;border:1px solid var(--border);color:var(--text-3);background:var(--bg-2);cursor:help}
.gate-chip.gate-open{color:#3fb950;border-color:rgba(63,185,80,.35);background:rgba(63,185,80,.08)}
.gate-chip.gate-paused{color:#f85149;border-color:rgba(248,81,73,.4);background:rgba(248,81,73,.10);animation:gatePulse 2s ease-in-out infinite}
@keyframes gatePulse{0%,100%{opacity:1}50%{opacity:.55}}
.topbar{background:var(--bg-1);border-bottom:1px solid var(--border);padding:0 14px;display:flex;align-items:center;gap:8px;height:46px;flex-shrink:0}
.topbar-logo{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.live-badge{background:rgba(var(--accent-rgb),.12);color:var(--accent);border:1px solid rgba(var(--accent-rgb),.3);padding:2px 7px;border-radius:4px;font-size:10px;font-weight:700;letter-spacing:.07em}
.topbar-spacer{flex:1}
.wallet-chip{background:var(--bg-3);border:1px solid var(--border);padding:3px 9px;border-radius:5px;font-size:11px;font-family:var(--mono);color:var(--text-2);white-space:nowrap}
.wallet-chip span{color:var(--text-1);font-weight:600}
#clock{font-size:10px;color:var(--text-3);font-family:var(--mono);white-space:nowrap}

/* ── Content ── */
.content{padding:12px;flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}

/* ── Stat row ── */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.stat-box{background:var(--bg-1);border:1px solid var(--border);border-radius:7px;padding:10px 12px;position:relative;overflow:hidden}
.stat-box label{font-size:9px;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;display:block;position:relative;z-index:1}
.stat-box .val{font-size:20px;font-weight:700;margin-top:3px;font-family:var(--mono);position:relative;z-index:1}
.stat-spark{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0.22;display:block}

/* ── Table ── */
.table-wrap{background:var(--bg-1);border:1px solid var(--border);border-radius:8px;overflow:hidden;flex:0 0 auto;max-height:52vh;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}
.table-wrap::-webkit-scrollbar{display:none}
table{width:100%;border-collapse:collapse}
th{padding:5px 10px;text-align:left;font-size:10px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border);background:var(--bg-0);white-space:nowrap}
td{padding:5px 10px;border-bottom:1px solid #0d0f14;font-family:var(--mono);font-size:12px}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--bg-2);cursor:pointer}
.name-cell{font-family:'Inter',sans-serif;font-weight:600;color:var(--text-1);font-size:12px;max-width:160px}.name-primary{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex-shrink:1}
.pnl-pos{color:var(--green)}
.pnl-neg{color:var(--red)}
.pnl-zero{color:var(--text-3)}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:5px}
.dot-live{background:var(--green);box-shadow:0 0 5px rgba(52,211,153,.6)}
.dot-off{background:var(--text-3)}

/* ── Feed ── */
.pane-resizer{height:8px;margin:4px 0;border-radius:4px;cursor:row-resize;flex-shrink:0;display:flex;align-items:center;justify-content:center;user-select:none;transition:background .15s}
.pane-resizer:hover{background:var(--bg-2)}
.pane-resizer::after{content:'';width:48px;height:3px;background:var(--border);border-radius:2px;transition:background .15s}
.pane-resizer:hover::after{background:var(--text-3)}
.feed-wrap{background:var(--bg-1);border:1px solid var(--border);border-radius:8px;overflow:hidden;flex:1 1 auto;display:flex;flex-direction:column;min-height:160px}
.feed-head{padding:8px 12px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);border-bottom:1px solid var(--border);background:var(--bg-0);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px}

.feed-view-tab{padding:3px 10px;border-radius:4px;font-size:10px;font-weight:700;letter-spacing:.05em;cursor:pointer;border:1px solid transparent;color:var(--text-3);background:none;transition:all .15s}
.feed-view-tab:hover{color:var(--text-2)}
.feed-view-tab.active{background:var(--bg-3);color:var(--text-1);border-color:var(--border)}
.feed-blocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px;padding:10px;height:100%;align-content:stretch}
.feed-col{background:var(--bg-1);border:1px solid var(--border);border-radius:6px;padding:8px;min-height:60px;display:flex;flex-direction:column;gap:4px;max-height:520px;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}
.feed-col::-webkit-scrollbar{display:none;width:0;height:0}
.feed-col-head{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-2);padding:2px 4px 6px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;background:var(--bg-1);z-index:1}
.feed-col-pnl{font-family:var(--mono);font-size:10px;font-weight:600}
.feed-block{display:grid;grid-template-columns:38px 1fr auto;gap:6px;align-items:center;padding:5px 7px;border-radius:4px;font-size:11px;border-left:3px solid transparent;background:var(--bg-2)}
.feed-block.win{border-left-color:#3fb950;background:rgba(63,185,80,.06)}
.feed-block.loss{border-left-color:#f85149;background:rgba(248,81,73,.06)}
.feed-block.open{border-left-color:#58a6ff;background:rgba(88,166,255,.06)}
.feed-block .b-age{font-family:var(--mono);font-size:9px;color:var(--text-3);text-align:right}
.feed-block .b-sym{font-weight:600;color:var(--text-1);font-size:10px}
.feed-block .b-pct{font-family:var(--mono);font-size:11px;font-weight:600;text-align:right}
.feed-block.win .b-pct{color:#3fb950}
.feed-block.loss .b-pct{color:#f85149}
.feed-block.open .b-pct{color:#58a6ff}

.gate-pill{display:inline-block;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.04em;padding:2px 6px;border-radius:3px;border:1px solid var(--border)}
.gate-pill.gate-open{color:#3fb950;background:rgba(63,185,80,.10);border-color:rgba(63,185,80,.35)}
.gate-pill.gate-blocked{color:#f85149;background:rgba(248,81,73,.10);border-color:rgba(248,81,73,.4)}
.gate-pill.gate-bypass{color:#bc8cff;background:rgba(188,140,255,.10);border-color:rgba(188,140,255,.4)}
.feed-tabs{display:flex;gap:2px}
.feed-tab{padding:3px 10px;border-radius:4px;font-size:10px;font-weight:700;letter-spacing:.05em;cursor:pointer;border:1px solid transparent;color:var(--text-3);background:none;transition:all .15s}
.feed-tab:hover{color:var(--text-2)}
.feed-tab.active{background:var(--bg-3);color:var(--text-1);border-color:var(--border)}
.feed-body{flex:1 1 auto;overflow-y:auto;min-height:0;scrollbar-width:none;-ms-overflow-style:none}
.feed-body::-webkit-scrollbar{display:none;width:0;height:0}
.feed-row{display:flex;align-items:center;gap:10px;padding:13px 12px;border-bottom:1px solid #0d0f14;overflow:hidden}
.feed-row:last-child{border-bottom:none}
.feed-row.open{border-left:3px solid rgba(96,165,250,.5)}
.feed-row.open.orphan{opacity:0.5;border-left:3px solid rgba(148,163,184,.4)}
.feed-row.closed-tp{border-left:3px solid rgba(52,211,153,.6)}
.feed-row.closed-sl{border-left:3px solid rgba(248,113,113,.6)}
.feed-row.closed{border-left:3px solid rgba(100,116,139,.25)}
.feed-age{font-family:var(--mono);font-size:12px;font-weight:700;width:38px;text-align:right;flex-shrink:0;white-space:nowrap}
.feed-age.fresh{color:var(--green)}
.feed-age.recent{color:var(--yellow)}
.feed-age.old{color:var(--text-3)}
.feed-sym{color:var(--text-1);font-weight:700;font-size:12px;font-family:var(--mono);flex-shrink:0;width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feed-pnl{font-family:var(--mono);font-size:11px;font-weight:600;flex-shrink:0;width:58px;text-align:right}
.feed-sz{font-family:var(--mono);font-size:10px;color:var(--text-3);flex-shrink:0;width:42px;text-align:right}
.feed-strat{color:var(--text-3);font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-left:auto;min-width:0;text-align:right}
/* Badge — fixed width so all rows align */
.badge-open,.badge-tp,.badge-sl,.badge-sig{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:34px;border-radius:3px;font-size:9px;font-weight:700}
.badge-open{background:rgba(96,165,250,.1);color:var(--blue);border:1px solid rgba(96,165,250,.2)}
.badge-tp{background:rgba(52,211,153,.1);color:var(--green);border:1px solid rgba(52,211,153,.2)}
.badge-sl{background:rgba(248,113,113,.1);color:var(--red);border:1px solid rgba(248,113,113,.2)}
.badge-sig{color:var(--text-3);border:1px solid transparent;width:auto;min-width:34px;max-width:96px;padding:0 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box}
.feed-empty{padding:20px;text-align:center;color:var(--text-3);font-size:12px}

/* ── Sort ── */
th[data-col]{cursor:pointer;user-select:none}
th[data-col]:hover{color:var(--text-2)}
.sort-arrow{font-size:9px;margin-left:3px;opacity:.4}
th.sort-asc .sort-arrow::after{content:'▲';opacity:1}
th.sort-desc .sort-arrow::after{content:'▼';opacity:1}
th.sort-asc,.sort-desc{color:var(--text-1)}
.spark-cell{font-family:var(--mono);font-size:13px;letter-spacing:0;line-height:1;padding-left:0;padding-right:0;text-align:center;white-space:nowrap}
.spark-up{color:#34d399}
.spark-down{color:#f87171}
.spark-flat{color:#6b7280}
.spark-empty{color:#374151;font-size:10px}
.table-toolbar{display:flex;justify-content:flex-end;align-items:center;padding:6px 0;margin-bottom:4px}
.paused-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#94a3b8;background:rgba(148,163,184,.06);border:1px solid rgba(148,163,184,.18);border-radius:14px;cursor:pointer;transition:all .15s;font-family:inherit}
.paused-chip:hover{color:#cbd5e1;border-color:rgba(94,234,212,.45);background:rgba(94,234,212,.04)}
.paused-chip.active{color:#5eead4;border-color:rgba(94,234,212,.7);background:rgba(94,234,212,.08)}
.paused-chip .chip-dot{width:6px;height:6px;border-radius:50%;background:#475569}
.paused-chip.active .chip-dot{background:#5eead4;box-shadow:0 0 6px rgba(94,234,212,.6)}
tr.row-paused{opacity:.45}
tr.row-paused td{background:repeating-linear-gradient(45deg,transparent 0 8px,rgba(255,255,255,.02) 8px 9px)}

/* ── Mobile ── */
@media(max-width:900px){ /*2026-05-17: match shared-nav 900px bottom-nav bp; fixes nav floating over feed in 641-900 dead zone*/
  .platform-nav{display:none !important}
  .topbar{padding:0 10px;gap:6px;height:42px}
  .topbar-logo{font-size:11px}
  #clock{display:none}
  .wallet-chip{font-size:10px;padding:2px 7px;flex-shrink:0}
  /* 2026-05-18 mobile top-bar tidy + uniform badge height */
  .topbar{flex-wrap:nowrap;overflow-x:auto;height:auto;min-height:42px;-webkit-overflow-scrolling:touch}
  .topbar::-webkit-scrollbar{display:none}
  .topbar-logo{display:none}
  .topbar-spacer{display:none}
  .live-badge,.gate-chip,#showPausedBtn{display:inline-flex;align-items:center;height:24px;padding:0 8px;line-height:1;font-size:9px;letter-spacing:.04em;white-space:nowrap;flex-shrink:0;box-sizing:border-box}

  .content{padding:8px}

  /* ── Mobile: revert viewport-lock — let full page scroll ── */
  html,body{height:auto !important;overflow-y:auto !important;overflow-x:hidden !important}
  body{height:auto !important;min-height:100vh}
  .content{display:block !important;overflow:visible !important;min-height:auto !important}
  .table-wrap{max-height:none !important;overflow:visible !important;flex:none !important;height:auto !important}
  .feed-wrap{flex:none !important;min-height:200px !important;margin-top:12px}
  .feed-body{overflow:visible !important;max-height:none !important}
  .pane-resizer{display:none !important}

  .stat-row{grid-template-columns:repeat(2,1fr);gap:6px;margin-bottom:8px}
  .stat-box{padding:8px 10px}
  .stat-box .val{font-size:17px}

  /* Mobile table — shared by Coinbase (14-col) + Kraken/index (16-col); cols 1-11 identical:
       1 Strategy | 2 Days | 3 $/Tr | 4 Open | 5 Trades | 6 🕒 last_trade
       7 24h P&L | 8 Today P&L | 9 24h % | 10 Today % | 11 WR | 12+ Sharpe/SL-TP/Pairs/BL/Gate
     2026-06-06 (Mike): mobile shows ONLY name + size + #trades + $today + %today + WR.
       SHOW 1,3,5,8,10,11 ; HIDE 2,4,6,7,9 and everything from col 12 onward (n+12 covers both pages). */
  th:nth-child(2),td:nth-child(2),
  th:nth-child(4),td:nth-child(4),
  th:nth-child(6),td:nth-child(6),
  th:nth-child(7),td:nth-child(7),
  th:nth-child(9),td:nth-child(9),
  th:nth-child(n+12),td:nth-child(n+12){display:none}

  table{table-layout:fixed;width:100%}
  /* col 1 (name) grabs remaining space after the fixed-width metric columns. */
  th:nth-child(1),td:nth-child(1){width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:8px;padding-right:4px}
  th:nth-child(3),td:nth-child(3){width:48px;min-width:48px;max-width:48px;text-align:right;padding-left:2px;padding-right:6px}
  th:nth-child(5),td:nth-child(5){width:44px;min-width:44px;max-width:44px;text-align:right;padding-left:2px;padding-right:6px}
  th:nth-child(8),td:nth-child(8){width:62px;min-width:62px;max-width:62px;text-align:right;padding-left:2px;padding-right:6px}
  th:nth-child(10),td:nth-child(10){width:54px;min-width:54px;max-width:54px;text-align:right;padding-left:2px;padding-right:6px}
  th:nth-child(11),td:nth-child(11){width:48px;min-width:48px;max-width:48px;text-align:right;padding-left:2px;padding-right:6px}
  /* hide all-time WR superscript ('NN%all') on mobile — clips + adds noise (WR is col 11). */
  td:nth-child(11) sup{display:none}
  td{padding:8px 4px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  th{padding:8px 3px;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .name-cell{font-size:11px;max-width:90px}
  .spark-cell{font-size:13px;letter-spacing:.5px}
}

/* ── Mobile nav: 2x2 grid + STATUS full-width ── */

@media (min-width:901px){.nav-status-fixed{display:none}}

/* ── Bottom Nav (mobile only) ── */
.bottom-nav{display:none}
@media(max-width:640px){
  .bottom-nav{
    display:flex;position:fixed;bottom:0;left:0;right:0;z-index:1000;
    background:#080a0f;border-top:1px solid #1e293b;
    height:62px;align-items:stretch;
  }
  .bn-item{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-decoration:none;color:#475569;font-size:9px;font-weight:600;
    letter-spacing:.04em;text-transform:uppercase;padding:6px 2px;
    border-right:1px solid #0d1117;transition:background .15s;gap:3px;
    text-align:center;line-height:1.2;
  }
  .bn-item:last-child{border-right:none}
  .bn-item:hover,.bn-item:active{background:#0d1117}
  .bn-item.bn-live{color:#34d399}
  .bn-item.bn-status{color:#60a5fa}
  .bn-item.bn-active{background:#111827;color:#f1f5f9}
  .bn-item.bn-active.bn-live{background:rgba(52,211,153,.08);color:#34d399}
  .bn-item.bn-active.bn-status{background:rgba(96,165,250,.08);color:#60a5fa}
  .bn-more-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;background:none;border:none;border-right:none;color:#60a5fa;font-size:9px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:6px 2px;cursor:pointer;gap:3px;line-height:1.2}
  .bn-more-btn:active{background:#0d1117}
}
/* Drawer styles — GLOBAL (must be outside @media so display:none applies on desktop too) */
.bn-drawer-overlay{display:none;position:fixed;inset:0;z-index:1500;background:rgba(0,0,0,.5)}
.bn-drawer-overlay.open{display:block}
.bn-drawer{display:none;position:fixed;bottom:62px;left:0;right:0;z-index:1501;background:#0d1117;border-top:1px solid #1e293b;border-radius:12px 12px 0 0;padding:8px 0 4px}
.bn-drawer.open{display:block}
.bn-drawer-handle{width:36px;height:3px;background:#1e293b;border-radius:2px;margin:0 auto 10px}
.bn-drawer-item{display:flex;align-items:center;gap:12px;padding:13px 20px;text-decoration:none;color:#94a3b8;font-size:13px;font-weight:500;border-bottom:1px solid #111827}
.bn-drawer-item:last-child{border-bottom:none}
.bn-drawer-item .bn-di-icon{font-size:16px;width:24px;text-align:center}
.bn-drawer-item.live{color:#34d399}
.bn-drawer-item.sys{color:#60a5fa}

.hours-pill{display:inline-block;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.04em;padding:2px 5px;border-radius:3px;margin-left:5px;vertical-align:middle}
.hours-on{color:#3fb950;background:rgba(63,185,80,.12);border:1px solid rgba(63,185,80,.3)}
.hours-off{color:#484f58;background:rgba(72,79,88,.12);border:1px solid rgba(72,79,88,.3)}

/* 2026-06-08 (Mike): Two-column feed split (Open | Closed). Stacks on mobile. */
.feed-split{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.feed-col{display:flex;flex-direction:column;min-width:0}
.feed-col-hdr{font-size:10px;font-weight:700;color:var(--text-2);padding:6px 8px;letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.feed-col-n{font-family:var(--mono);font-weight:400;font-size:10px;color:var(--text-3)}
@media (max-width: 900px){.feed-split{grid-template-columns:1fr}}