:root {
  --bg: #0b0e14;
  --bg-panel: #10141d;
  --bg-card: #151a24;
  --border: #232937;
  --text: #e6e9ef;
  --text-muted: #8b93a7;
  --green: #22c55e;
  --green-dim: #14532d;
  --red: #ef4444;
  --red-dim: #4c1d1d;
  --amber: #f59e0b;
  --amber-dim: #4a3405;
  --blue: #3b82f6;
  --accent: #6366f1;
  --radius: 10px;
}

* { box-sizing: border-box; }

/* --- Sitewide motion polish (10 Sep 2026) ---
   Deliberately subtle: nothing here changes layout or reading order, it
   just makes state changes and interactions feel alive instead of
   instant/robotic. Respects reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .panel { animation: panel-fade-in 0.35s ease-out; }
  .signal-card, .trade-card, button, .nav-tab, .alerts-btn, input, select {
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
  }
  button:not(:disabled):active { transform: scale(0.96); }
  .nav-tab:hover { transform: translateY(-1px); }
}
@keyframes panel-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes card-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes modal-pop-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
@keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.conn-connected::before {
  content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); margin-right: 6px; animation: live-pulse 1.6s ease-in-out infinite;
}

/* The nav-tab view switcher toggles the `hidden` attribute on #view-home /
   #view-history / #view-gainers — but #view-home also carries the
   `.dashboard` class (display:grid), and an author-stylesheet rule always
   beats the browser's built-in `[hidden] { display: none }` regardless of
   selector specificity. Without this override, "hidden" views stayed
   visible (stacked underneath whichever view was actually selected) and
   scrolling far enough revealed them further down the page. This forces
   `hidden` to always win. */
[hidden] { display: none !important; }

html, body {
  /* Hard stop for "whole page drags left/right on mobile" (16 Sep 2026,
     round 2): whatever internal element is briefly wider than the
     viewport (a wide table mid-layout, a grid item before it settles,
     etc.), the page itself must never be draggable sideways — only
     individual scrollable containers (.table-wrap) should move
     horizontally, never <html>/<body>. This is the actual page-level
     fix; the 15 Sep topbar-wrap fix alone wasn't enough because it only
     addressed the topbar, not the page as a whole. */
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  min-height: 100vh;
}

/* Grid/flex children default to min-width:auto, which lets their content
   push the track wider than available space — a classic hidden cause of
   page-level horizontal overflow. Zeroing it out is safe everywhere here
   since every one of these already wraps/scrolls its own content. */
.dashboard > *, .trade-card, .topbar, .topbar-right, .table-wrap {
  min-width: 0;
}

.muted { color: var(--text-muted); }
.small { font-size: 0.85em; }

/* --- Login --- */
.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.login-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  width: 320px;
}
.login-card h1 { font-size: 1.3rem; margin: 0 0 4px; }
.login-card form { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.login-card label { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; color: var(--text-muted); }
input, select {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 9px 10px;
  font-size: 0.95rem;
}
button {
  cursor: pointer;
  border: none;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 0.9rem;
  font-weight: 600;
}
.btn-primary { background: var(--accent); color: white; }
.btn-ghost { background: transparent; color: var(--text-muted); border: 1px solid var(--border); }
.error { color: var(--red); font-size: 0.85rem; }

/* --- Top bar --- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
}
.brand { font-weight: 700; letter-spacing: 0.02em; }
.topnav { display: flex; gap: 4px; }
.nav-tab {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 0.85rem;
  font-weight: 600;
}
.nav-tab:hover { color: var(--text); }
.nav-tab.active { background: var(--bg-card); color: var(--text); border-color: var(--border); }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.alerts-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 12px 5px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
}
.conn-badge { font-size: 0.75rem; padding: 3px 9px; border-radius: 20px; }
.conn-connected { background: var(--green-dim); color: var(--green); }
.conn-connecting { background: var(--amber-dim); color: var(--amber); }
.conn-disconnected { background: var(--red-dim); color: var(--red); }

/* --- Dashboard layout --- */
.dashboard {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: auto auto;
  gap: 16px;
  padding: 18px;
  max-width: 1500px;
  margin: 0 auto;
}
.panel-swing { grid-column: 1 / -1; }
/* panel-momentum deliberately has NO grid-column override — it auto-places
   into the top-right slot next to Strong Setups (the space the retired 15M
   panel used to occupy, now hidden and out of grid flow), reusing that
   freed-up space rather than adding a new full-width row. */

@media (max-width: 980px) {
  .dashboard { grid-template-columns: 1fr; }
}

/* --- Hamburger menu button ---
   Hidden by default (desktop); shown only at phone width. Three-bar icon
   built from spans, no image asset needed. */
.menu-toggle-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 34px;
  height: 34px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0;
}
.menu-toggle-bar {
  display: block;
  width: 16px;
  height: 2px;
  background: var(--text);
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
/* Turns into an X when the menu is open */
.menu-toggle-btn.open .menu-toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle-btn.open .menu-toggle-bar:nth-child(2) { opacity: 0; }
.menu-toggle-btn.open .menu-toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --- Phone-width fixes (16 Sep 2026, round 2) ---
   Round 1 (15 Sep) only made the topbar wrap, which wasn't enough — the
   page could still be dragged sideways as a whole, and the nav was a
   horizontally-scrolling strip rather than a real menu. This round: a
   real hamburger menu (nav collapses into a dropdown list, opened via
   #menuToggleBtn/app.js) plus the html/body overflow-x:hidden hard-lock
   above, which is what actually stops the whole page from moving
   left/right regardless of what's inside it. Nothing here touches layout
   above 640px. */
@media (max-width: 640px) {
  .topbar {
    flex-wrap: wrap;
    row-gap: 10px;
    padding: 10px 14px;
    position: relative;
  }
  .brand { flex: 1 1 auto; }
  .menu-toggle-btn { display: flex; order: 2; }

  .topnav {
    order: 5;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.22s ease, opacity 0.18s ease;
  }
  .topnav.open {
    max-height: 320px;
    opacity: 1;
    margin-top: 4px;
  }
  .nav-tab { width: 100%; text-align: left; padding: 10px 12px; font-size: 0.88rem; }

  .topbar-right {
    order: 3;
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
  }

  .dashboard { padding: 12px; gap: 12px; }
  .panel { padding: 12px; }
  .login-card {
    width: calc(100vw - 40px);
    max-width: 320px;
  }
}

.pump-arrow {
  display: inline-block;
  font-size: 0.95rem;
  line-height: 1;
  transform: rotate(0deg);
}
/* Blink pulses both opacity and size so it reads as clearly "alive" rather
   than a subtle flicker (17 Sep 2026 correction: an earlier pass here only
   dipped to 0.6 to keep the arrow "always legible", but that made the blink
   barely perceptible — back to a strong, unmistakable dip, with the glow
   still giving it weight even at the dim point of the cycle). */
@keyframes pump-arrow-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(1.18); }
}
@keyframes coiling-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* --- Scanner hierarchy redesign (20 Sep 2026) ---
   Early Impulse / Early Momentum Watch / Confirmed Setup / Other
   Opportunities — 4 colour-coded sections replacing the old single MTF
   table. Reuses .mtf-cell (arrow/coiling-dot rendering, blink/glow/pulse)
   and .data-table/.table-wrap/.gain-pos/.gain-neg from above unchanged —
   only new layout/colour scaffolding lives here. */
:root {
  --impulse: #fb5a7a;
  --impulse-dim: rgba(251, 90, 122, 0.14);
  --watch-dim: rgba(99, 102, 241, 0.14);
  --confirmed-dim: rgba(34, 197, 94, 0.12);
  --other-dim: rgba(139, 147, 167, 0.12);
}
/* --- Trading Bot v1 (29 Sep 2026, paper trading only) --- */
.bot-status-wrap { display: flex; flex-direction: column; gap: 12px; }
.bot-status-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.bot-status-pill { display: inline-block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.03em; padding: 3px 10px; border-radius: 20px; }
.bot-status-pill.bot-running { background: var(--green-dim); color: var(--green); }
.bot-status-pill.bot-stopped { background: var(--red-dim); color: var(--red); }

/* --- Bot v1 "Performance Insights" (29 Sep 2026) --- */
.panel-header-text { display: flex; flex-direction: column; gap: 2px; }

.dir-pill {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 3px 9px;
  border-radius: 20px;
}
.dir-pill.dir-long { background: var(--green-dim); color: var(--green); }
.dir-pill.dir-short { background: var(--red-dim); color: var(--red); }
.dir-pill.dir-neutral { background: var(--other-dim); color: var(--text-muted); }
.dir-pill.tier-watch { background: var(--amber-dim); color: var(--amber); }

.chart-link { display: inline-flex; align-items: center; vertical-align: middle; color: var(--text-muted); text-decoration: none; }
.chart-link:hover { color: var(--accent); }

#view-history, #view-gainers, #view-pumpwatch {
  padding: 18px;
  max-width: 1500px;
  margin: 0 auto;
}

.panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.panel-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}
.panel-header h2 { margin: 0; font-size: 1.05rem; }
.panel-sub { font-size: 0.78rem; color: var(--text-muted); }
#forensicsReportBtn { background: var(--accent); color: #fff; height: 34px; }
#forensicsReportBtn:disabled { opacity: 0.6; cursor: wait; }
#forensicsReportStatus { margin-top: 10px; }
#forensicsReportStatus.error { color: var(--red); }
#forensicsReportStatus.ok { color: var(--green); }
.empty-state { color: var(--text-muted); font-size: 0.88rem; padding: 18px 4px; text-align: center; }
.taken-btn {
  background: var(--accent);
  color: white;
  font-size: 0.76rem;
  padding: 6px 14px;
  border-radius: 20px;
  letter-spacing: 0.02em;
}
.taken-btn:disabled, .taken-btn.taken-done {
  background: var(--green-dim);
  color: var(--green);
  cursor: default;
  opacity: 1;
}
.data-table .taken-btn { padding: 5px 12px; font-size: 0.72rem; white-space: nowrap; }

/* --- A+ Setups (14 Sep 2026) — separate, EXPERIMENTAL engine, own tab --- */
.experimental-tag {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--amber);
  background: var(--amber-dim);
  border-radius: 4px;
  padding: 2px 6px;
  margin-left: 8px;
  vertical-align: middle;
}
@keyframes crown-glow {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(255, 213, 74, 0.7)); }
  50% { transform: scale(1.18); filter: drop-shadow(0 0 8px rgba(255, 213, 74, 1)); }
}
.status-pill { padding: 3px 10px; border-radius: 20px; font-weight: 700; font-size: 0.75rem; text-align: center; }
.live-price { font-weight: 700; }
.live-price.muted { color: var(--text-muted); }

/* --- History / 24H Gainers tables --- */
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.data-table th, .data-table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.data-table th { color: var(--text-muted); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; }

/* Bot Live/Closed Trades scroll box (29 Sep 2026) — these two tables have no
   row cap (open trades keeps growing as sources fire) and were pushing the
   whole page down indefinitely. Cap the panel to a fixed on-screen height
   and scroll INSIDE it instead, with a sticky header so the column labels
   stay put while scrolling through however many rows exist. */
.bot-scroll-box { max-height: 560px; overflow-y: auto; }
.bot-scroll-box .data-table thead th { position: sticky; top: 0; background: var(--bg-panel); z-index: 1; }
.gain-pos { color: var(--green); font-weight: 700; }
.gain-neg { color: var(--red); font-weight: 700; }
@keyframes exit-bell-ring {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-14deg); }
  40% { transform: rotate(12deg); }
  60% { transform: rotate(-8deg); }
  80% { transform: rotate(4deg); }
}

/* --- Alert toasts (10 Sep 2026) --- */
.toast-container {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(340px, calc(100vw - 32px));
}
.toast {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--blue);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.82rem;
  color: var(--text);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  animation: card-fade-in 0.25s ease-out;
}
.toast.toast-crown { border-left-color: #ffd54a; }
.toast.toast-exit { border-left-color: var(--red); }
.toast.toast-out { opacity: 0; transform: translateX(12px); transition: opacity 0.28s ease, transform 0.28s ease; }

/* --- Two-board Home + Forensic Lab panels (cleanup step 2, 4 Oct 2026) --- */
.board-home {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 6 Oct 2026: four boards = a 2 x 2 grid (two cards per row), Live Trades full width below */
  gap: 18px;
  padding: 18px;
  max-width: 1500px;
  margin: 0 auto;
}
.board-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px;
  min-height: 230px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.board-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.board-card-head h2 { margin: 0 0 4px; font-size: 1.15rem; }
.board-card-body { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.board-status-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.board-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.board-stat {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.board-stat-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-muted); }
.board-stat-value { font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.board-open-btn { align-self: flex-start; }
#spotForensicsWrap, #burstForensicsWrap { display: flex; flex-direction: column; gap: 14px; }
#emaForensicsWrap, #hunterCompareWrap { display: flex; flex-direction: column; gap: 14px; }
.board-live-trades { grid-column: 1 / -1; }
.board-live-trades .table-wrap { overflow-x: auto; }
/* Boards: Future Hunter | EMA Crossover on row 1, Swing Momentum | Pump Hunter on row 2; they stack on a phone-width screen. */
@media (max-width: 900px) {
  .board-home { padding: 12px; gap: 10px; }
  .board-card { padding: 12px; }
  .board-stats { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
  .board-stat-value { font-size: 1rem; }
}
@media (max-width: 900px) {
  .board-home { grid-template-columns: minmax(0, 1fr); } /* 14 Oct 2026: plain 1fr let wide content stretch the whole column (phone had to be turned sideways) */
  .board-home > * { min-width: 0; max-width: 100%; }
}

/* --- Admin Manager (4 Oct 2026) --- */
.admin-view { padding: 18px; max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.admin-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.admin-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
.admin-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.admin-form { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.admin-form label { display: flex; flex-direction: column; gap: 6px; font-size: 0.82rem; color: var(--text-muted); }
.admin-form input[type="text"], .admin-form input[type="password"], .admin-pw-input {
  background: var(--bg-card); color: var(--text); border: 1px solid var(--border); border-radius: 8px;
  padding: 9px 11px; font-size: 0.9rem; min-width: 0; width: 100%;
}
.admin-form input:focus, .admin-pw-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.pw-row { display: flex; gap: 6px; align-items: stretch; }
.pw-btn { padding: 0 12px; font-size: 0.75rem; white-space: nowrap; }
.pw-strength { min-height: 1em; }
.admin-form .admin-show { flex-direction: row; align-items: center; gap: 8px; }
.admin-form .admin-show input { width: auto; }
.admin-form button[type="submit"] { align-self: flex-start; }
.admin-msg { margin: 10px 0 0; overflow-wrap: anywhere; }
.admin-actions { white-space: normal !important; }
.admin-actions .taken-btn { margin: 2px 4px 2px 0; }
.admin-pw-inline { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.admin-pw-inline .admin-pw-input { width: 190px; }
.admin-role-user { background: var(--bg-card); color: var(--text-muted); border: 1px solid var(--border); }
.admin-activity { display: flex; flex-direction: column; }
.admin-activity-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--border); font-size: 0.85rem; }
.admin-activity-row:last-child { border-bottom: 0; }
@media (max-width: 900px) {
  .admin-view { padding: 12px; }
  .admin-grid { grid-template-columns: 1fr; }
}

/* --- Pump Hunter (8 Oct 2026): state pills on the dedicated page's watched-coins board (Gul Khan's pills kept for the rollback layout) --- */
.gk-pill, .ph-pill { display: inline-block; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.gk-pill.gk-st-wait, .ph-pill.ph-st-cool { background: rgba(139, 147, 167, 0.14); color: var(--text-muted); }
.gk-pill.gk-st-forming, .ph-pill.ph-st-pullback { background: var(--amber-dim); color: var(--amber); }
.gk-pill.gk-st-active, .ph-pill.ph-st-pumping { background: var(--green-dim); color: var(--green); }
.gk-pill.gk-st-invalid, .ph-pill.ph-st-roll { background: var(--red-dim); color: var(--red); }
.ph-pill.ph-st-intrade { background: rgba(59, 130, 246, 0.18); color: var(--blue); }
tr.ph-row-cooling td { opacity: 0.72; }

/* Manual close button on open paper positions (6 Oct 2026, admin only) */
.btn-close-pos { padding: 3px 12px; font-size: 0.75rem; font-weight: 700; color: var(--red); border: 1px solid var(--red-dim); border-radius: 6px; white-space: nowrap; }
.btn-close-pos:hover:not(:disabled) { background: var(--red-dim); }
.btn-close-pos:disabled { opacity: 0.6; cursor: wait; }

/* --- Stop-danger watch (7 Oct 2026): display only --- */
.risk-toolbar { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin: 0 0 8px; }
.risk-alerts-btn { padding: 3px 12px; font-size: 0.75rem; font-weight: 700; border: 1px solid var(--border); border-radius: 6px; white-space: nowrap; }
.risk-banner { margin: 0 0 10px; padding: 10px 14px; border-radius: 8px; font-size: 0.85rem; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.risk-banner[hidden] { display: none; }
.risk-banner-warn { background: var(--amber-dim); border: 1px solid var(--amber); color: var(--amber); }
.risk-banner-danger { background: var(--red-dim); border: 1px solid var(--red); color: var(--red); }
.risk-banner-item { color: var(--text); font-weight: 600; }
.risk-chip { display: inline-block; margin-top: 3px; padding: 1px 8px; border-radius: 10px; font-size: 0.72rem; font-weight: 700; }
.risk-chip-warn { background: var(--amber-dim); color: var(--amber); }
.risk-chip-danger { background: var(--red-dim); color: var(--red); }
.risk-row-warn td { background: rgba(245, 158, 11, 0.07); }
.risk-row-danger td { background: rgba(239, 68, 68, 0.12); }
@media (prefers-reduced-motion: no-preference) {
  .risk-row-danger .risk-chip { animation: risk-pulse 1.2s ease-in-out infinite; }
  @keyframes risk-pulse { 50% { opacity: 0.55; } }
}

/* --- Home: Overall P&L (8 Oct 2026) --- */
.board-overall { grid-column: 1 / -1; }
.overall-range { display: flex; gap: 6px; flex-wrap: wrap; }
.overall-range-btn { padding: 4px 10px; font-size: 0.78rem; }
.overall-range-btn.active { border-color: var(--accent); color: var(--text); background: rgba(99, 102, 241, 0.14); }
.overall-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.overall-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.overall-card-label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.overall-card-value { display: block; margin-top: 4px; font-size: 1.9rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.15; }
.overall-card-sub { display: block; margin-top: 4px; font-size: 0.78rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.overall-card.is-profit { border-color: var(--green-dim); }
.overall-card.is-loss { border-color: var(--red-dim); }
.overall-card.is-net-profit { border-color: var(--green); }
.overall-card.is-net-loss { border-color: var(--red); }
.overall-table-wrap { overflow-x: auto; }
.overall-table td, .overall-table th { font-variant-numeric: tabular-nums; white-space: nowrap; }
.overall-table tr.overall-total td { border-top: 2px solid var(--border); font-weight: 800; }
@media (max-width: 640px) {
  .overall-cards { grid-template-columns: 1fr; gap: 8px; }
  .overall-card-value { font-size: 1.5rem; }
}

/* Engine ON/OFF switches (8 Oct 2026) - Home cards + EMA20 Pair page. Admin: clickable switch. Users: read-only pill. */
.engine-toggle { display: inline-flex; align-items: center; margin-left: auto; margin-right: 8px; }
.engine-switch { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px 3px 4px; border-radius: 20px; border: 1px solid var(--border, rgba(139,147,167,0.35)); background: transparent; cursor: pointer; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; }
.engine-switch:disabled { opacity: 0.6; cursor: wait; }
.engine-switch-knob { width: 16px; height: 16px; border-radius: 50%; background: currentColor; display: inline-block; }
.engine-switch.is-on { color: var(--green); background: var(--green-dim); border-color: transparent; }
.engine-switch.is-off { color: var(--red); background: var(--red-dim); border-color: transparent; flex-direction: row-reverse; padding: 3px 4px 3px 10px; }
.engine-switch-pill { display: inline-block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; padding: 3px 10px; border-radius: 20px; }
.engine-switch-pill.is-on { color: var(--green); background: var(--green-dim); }
.engine-switch-pill.is-off { color: var(--red); background: var(--red-dim); }
.panel-header .engine-toggle { margin-left: 12px; }

/* Sudden Drop candle track (9 Oct 2026) */
.ct-wrap { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; }
.ct-label { color: var(--text-muted, inherit); white-space: nowrap; }
.ct-dots { display: inline-flex; align-items: center; gap: 3px; }
.ct-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; box-sizing: border-box; }
.ct-same { background: var(--green); }
.ct-opp { background: var(--red, #ef4444); }
.ct-forming { background: transparent; border: 2px solid var(--green); margin-left: 3px; }
.ct-forming.ct-f-opp { border-color: var(--red, #ef4444); }
.ct-note { font-weight: 700; white-space: nowrap; }
.ct-note-warn { color: #f59e0b; }
.ct-note-bad { color: var(--red, #ef4444); }

/* Binance feed heartbeat (9 Oct 2026): ECG monitor line + pumping heart beside the Risk alerts button. Display only. */
.ecg-wrap { flex: 1 1 auto; min-width: 0; height: 34px; }
.ecg-canvas { display: block; width: 100%; height: 100%; }
.heart-box { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; color: var(--text-muted, #8a93a6); }
.heart-svg { display: block; transform-origin: 50% 55%; }
.heart-label { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.heart-box.is-live { color: var(--green); }
.heart-box.is-live .heart-svg { filter: drop-shadow(0 0 5px rgba(34, 197, 94, 0.65)); }
.heart-box.is-down { color: var(--red); }
.heart-box.is-down .heart-svg { opacity: 0.75; }
.heart-svg.is-pump { animation: heart-pump 0.62s ease-out 1; }
@keyframes heart-pump {
  0% { transform: scale(1); }
  16% { transform: scale(1.28); }
  32% { transform: scale(1); }
  48% { transform: scale(1.16); }
  100% { transform: scale(1); }
}
@media (max-width: 520px) { .heart-label { display: none; } }
@media (prefers-reduced-motion: reduce) { .heart-svg.is-pump { animation: none; } }

/* Good-trade touches (9 Oct 2026): risk-free badge, progress bar toward the next TP, P&L in R, green edge, new-TP glow, flame */
.tg-badge { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 10px; font-size: 0.72rem; font-weight: 700; background: rgba(34, 197, 94, 0.14); color: var(--green); }
.tg-bar { height: 4px; margin-top: 6px; border-radius: 2px; background: rgba(148, 163, 184, 0.18); overflow: hidden; max-width: 190px; }
.tg-bar i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, rgba(34, 197, 94, 0.55), var(--green)); transition: width 0.6s ease; }
.tg-r { margin-top: 2px; font-size: 0.72rem; font-weight: 700; }
tr.trade-good > td:first-child { box-shadow: inset 3px 0 0 var(--green); }
.ct-flame { margin-left: 2px; }
tr.row-tp-flash > td { animation: tp-flash 1.8s ease-out 1; }
@keyframes tp-flash { 0% { background: rgba(34, 197, 94, 0.38); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { tr.row-tp-flash > td { animation: none; } .tg-bar i { transition: none; } }

/* Per-system active-trades box (9 Oct 2026) */
.board-active-totals { grid-column: 1 / -1; min-height: 0; }
.sys-live-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; } /* 10 Oct: auto-fit so six systems sit in one row on a wide screen (was 5 + 1 orphan) */
@media (max-width: 1000px) { .sys-live-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
.slb-name { font-weight: 800; font-size: 0.9rem; }
.sys-live-box { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: rgba(148, 163, 184, 0.05); }
.sys-live-box.slb-up { border-color: rgba(34, 197, 94, 0.45); background: rgba(34, 197, 94, 0.07); }
.sys-live-box.slb-down { border-color: rgba(239, 68, 68, 0.4); background: rgba(239, 68, 68, 0.06); }
.sys-live-box.slb-empty { justify-content: flex-start; gap: 10px; }
.slb-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.slb-label { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted, #8a93a6); }
.slb-pnl { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.btn-close-all { padding: 4px 14px; font-size: 0.78rem; font-weight: 700; border: 1px solid var(--red); border-radius: 6px; color: var(--red); white-space: nowrap; }
.btn-close-all:disabled { opacity: 0.6; }

/* Close-selected tick boxes on Home Live Trades (9 Oct 2026) */
.sel-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 8px 12px; margin-bottom: 8px; border: 1px solid var(--border); border-radius: 8px; background: rgba(148, 163, 184, 0.05); }
.btn-close-selected { padding: 4px 14px; font-size: 0.8rem; font-weight: 700; border: 1px solid var(--red); border-radius: 6px; color: var(--red); white-space: nowrap; }
.btn-close-selected:disabled { opacity: 0.4; }
.data-table .sel-cell { width: 28px; text-align: center; padding-left: 8px; padding-right: 4px; }
.sel-pos, #selAllPos { width: 16px; height: 16px; cursor: pointer; accent-color: var(--red); }
tr.row-selected > td { background: rgba(239, 68, 68, 0.08); }

/* Overall P&L now lives in the Forensic Lab; Harvest Log on Home (9 Oct 2026) */
.board-overall-lab { margin-bottom: 16px; }
.board-harvest, .board-real-harvest { grid-column: 1 / -1; min-height: 0; }
.hv-list { margin-top: 10px; max-height: 260px; overflow-y: auto; }
.hv-list table { width: 100%; }
.hv-day td { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted, #8a93a6); padding-top: 10px; }

/* REAL TRADING page (9 Oct 2026) */
.real-top .real-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.real-card { border: 1px solid var(--border, rgba(139,147,167,0.35)); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.real-k { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted, inherit); }
.real-v { font-size: 1.3rem; font-weight: 800; }
.real-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.real-actions button { padding: 6px 12px; border-radius: 8px; cursor: pointer; }
.real-actions button:disabled { opacity: 0.5; cursor: not-allowed; }
.real-card-kill { border-color: rgba(239,68,68,0.5); }
.btn-danger { background: var(--red); color: #fff; border: 0; border-radius: 8px; padding: 9px 14px; font-weight: 800; cursor: pointer; }
.btn-danger:hover { filter: brightness(1.1); }
.real-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; align-items: start; }
.real-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; }
.real-form input { padding: 7px 9px; border-radius: 8px; border: 1px solid var(--border, rgba(139,147,167,0.35)); background: transparent; color: inherit; font-size: 1rem; max-width: 100%; box-sizing: border-box; }
.real-form .real-actions { grid-column: 1 / -1; }
.real-mode-paper_only { color: var(--text-muted, inherit); }
.real-mode-testnet { color: #f59e0b; }
.real-mode-live { color: #fff; background: var(--red); }
.real-warn { color: #f59e0b; }
.real-panel + .real-panel { margin-top: 14px; }
.real-panel .engine-switch.is-off { color: var(--text-muted, #8b93a7); background: transparent; border-color: var(--border, rgba(139,147,167,0.35)); }

.real-site-link { display: inline-block; padding: 4px 12px; font-size: 0.8rem; text-decoration: none; border: 1px solid var(--border, #334); border-radius: 6px; margin-left: 12px; }

.hv-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 10px; }
.hv-tile { padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; background: rgba(148,163,184,0.06); min-width: 0; }
.hv-tile-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.hv-tile-big { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; margin: 2px 0; }
.hv-tile-sub { font-size: 0.75rem; color: var(--text-muted); }

.et-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.et-bar .is-active { border-color: var(--accent, #4da3ff); color: var(--text, #e6edf3); }
.et-dim { margin: 14px 0 6px; font-size: 0.9rem; }

/* DEMO CONTROL strip (9 Oct 2026) */
.demo-strip { grid-column: 1 / -1; min-height: 0; padding: 12px 16px; }
.demo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.demo-pill { display: inline-block; padding: 4px 12px; border-radius: 999px; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.04em; }
.demo-on { background: rgba(34, 197, 94, 0.18); color: #22c55e; border: 1px solid rgba(34, 197, 94, 0.5); }
.demo-off { background: rgba(239, 68, 68, 0.16); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.5); }
.demo-stat strong { font-variant-numeric: tabular-nums; }
.demo-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.demo-estop { background: #b91c1c; color: #fff; border: 1px solid #ef4444; font-weight: 800; letter-spacing: 0.04em; padding: 8px 16px; border-radius: 8px; cursor: pointer; }
.demo-estop:hover { background: #dc2626; }
.demo-estop:disabled { opacity: 0.6; cursor: wait; }

/* USER SIGNALS page (9 Oct 2026) */
body.user-mode .topnav, body.user-mode .menu-toggle-btn { display: none !important; }
.us-wrap { max-width: 640px; margin: 0 auto; padding: 16px; }
.us-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.us-head h2 { margin: 0; }
.us-live { font-size: 0.8rem; color: var(--green, #22c55e); }
.us-live.us-stale { color: var(--amber, #f59e0b); }
.us-sub { color: var(--muted, #94a3b8); margin: 6px 0 14px; font-size: 0.9rem; }
.us-list { display: flex; flex-direction: column; gap: 10px; }
.us-card { background: var(--bg-card, #111827); border: 1px solid var(--border, #1f2937); border-left: 5px solid var(--blue, #3b82f6); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.us-card.us-strong { border-left-color: var(--green, #22c55e); }
.us-card.us-normal { border-left-color: var(--blue, #3b82f6); }
.us-card.us-weak { border-left-color: var(--amber, #f59e0b); }
.us-card.us-exit { border-left-color: var(--red, #ef4444); opacity: 0.92; }
.us-row1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.us-coin { font-weight: 800; font-size: 1.15rem; }
.us-dir { font-size: 0.72rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.us-long { background: rgba(34,197,94,0.15); color: var(--green, #22c55e); }
.us-short { background: rgba(239,68,68,0.15); color: var(--red, #ef4444); }
.us-badge { margin-left: auto; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.05em; padding: 3px 10px; border-radius: 6px; }
.us-b-strong { background: var(--green, #22c55e); color: #052e13; }
.us-b-normal { background: var(--blue, #3b82f6); color: #fff; }
.us-b-weak { background: var(--amber, #f59e0b); color: #2a1b00; }
.us-b-exit { background: var(--red, #ef4444); color: #fff; }
.us-row3 { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.us-meta { font-size: 0.82rem; color: var(--muted, #94a3b8); }
.us-meta strong { color: inherit; font-variant-numeric: tabular-nums; }
.us-open { font-size: 0.82rem; font-weight: 700; color: var(--blue, #3b82f6); text-decoration: none; border: 1px solid var(--blue, #3b82f6); border-radius: 6px; padding: 5px 10px; }
.us-disclaimer { margin-top: 8px; text-align: center; font-size: 0.75rem; color: var(--muted, #94a3b8); }
.us-empty { padding: 24px 8px; text-align: center; }
body.user-mode #connStatus, body.user-mode #calcBtn, body.user-mode #alertsBtn, body.user-mode #testAlertBtn { display: none !important; }
.demo-binance { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--blue, #3b82f6); color: var(--blue, #3b82f6); text-decoration: none; font-weight: 700; font-size: 0.85rem; white-space: nowrap; }
.demo-binance:hover { background: rgba(59,130,246,0.12); }

/* USER SIGNALS: Web Push button (9 Oct 2026) */
.us-alerts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; }
.us-alert-btn { background: var(--blue, #3b82f6); color: #fff; border: 0; border-radius: 8px; padding: 9px 14px; font-weight: 700; font-size: 0.9rem; cursor: pointer; }
.us-alert-btn.us-alert-on { background: transparent; color: var(--green, #22c55e); border: 1px solid var(--green, #22c55e); }
.us-alert-btn:disabled { opacity: 0.6; cursor: default; }
.us-alert-btn:focus-visible { outline: 2px solid var(--blue, #3b82f6); outline-offset: 2px; }
.us-alert-note { font-size: 0.82rem; color: var(--muted, #94a3b8); }

/* LIVE account section on the Real Trading page (9 Oct 2026) */
.live-panel { border-left: 4px solid var(--red, #ef4444); }

/* REAL account P&L strip (10 Oct 2026) */
.real-pnl-strip { grid-column: 1 / -1; min-height: 0; padding: 12px 16px; border-color: rgba(239, 68, 68, 0.45); }
.rp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.rp-slots { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.rp-slot { background: var(--bg-panel); color: var(--text-muted); border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px; font: inherit; font-size: 0.85rem; cursor: pointer; }
.rp-slot:hover { color: var(--text); }
.rp-slot.is-active { color: var(--text); border-color: var(--accent); background: rgba(99, 102, 241, 0.16); }
.rp-slot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rp-body { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 24px; margin-top: 10px; }
.rp-main { display: flex; flex-direction: column; gap: 2px; }
.rp-label { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.rp-big { font-size: 2.1rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rp-chip { display: flex; flex-direction: column; gap: 2px; min-width: 96px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-panel); }
.rp-chip strong { font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.board-real-trades, .board-real-harvest { grid-column: 1 / -1; }

/* Queue for REAL (10 Oct 2026) */
.pos-actions { white-space: nowrap; width: 1%; }
.pos-actions-in { display: flex; flex-direction: column; align-items: stretch; gap: 3px; }
.pos-actions-in .btn-queue-pos, .pos-actions-in .btn-close-pos, .pos-actions-in .btn-release-pos, .pos-actions-in .btn-addsize-pos, .pos-actions-in .q-tag { margin: 0; text-align: center; padding-left: 8px; padding-right: 8px; }
.btn-queue-pos { padding: 3px 10px; font-size: 0.75rem; font-weight: 700; color: var(--accent); border: 1px solid var(--accent); border-radius: 6px; white-space: nowrap; margin-right: 6px; }
.btn-queue-pos:hover:not(:disabled) { background: rgba(99, 102, 241, 0.18); }
.btn-queue-cancel { padding: 2px 10px; font-size: 0.75rem; border-radius: 6px; }
.q-tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; margin-right: 6px; white-space: nowrap; }
.q-real { color: #f87171; border: 1px solid rgba(239, 68, 68, 0.5); background: rgba(239, 68, 68, 0.12); }
.q-wait { color: var(--amber); border: 1px solid var(--amber-dim); background: rgba(245, 158, 11, 0.1); }
.q-manual { color: var(--accent); border: 1px solid var(--accent); background: rgba(99, 102, 241, 0.12); }
.queue-box { margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--border); border-radius: 8px; }
.queue-box[hidden] { display: none; }
.q-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 4px 0; }
.q-title { margin-bottom: 4px; }
.rt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; justify-content: flex-end; }
.board-real-active { grid-column: 1 / -1; border-color: rgba(239, 68, 68, 0.35); }
.btn-close-all-real { padding: 4px 14px; font-size: 0.78rem; font-weight: 700; border: 1px solid var(--red); border-radius: 6px; color: var(--red); white-space: nowrap; }
.btn-close-all-real:disabled { opacity: 0.6; }
.hv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 12px; }
.hv-box { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-panel); }
.hv-big { font-size: 1.5rem; font-variant-numeric: tabular-nums; }

/* Per-system Profit Lock panel (10 Oct 2026) */
.pl-panel { margin-bottom: 12px; }
.pl-state { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; vertical-align: middle; }
.pl-state.is-on { color: var(--green); background: var(--green-dim); }
.pl-state.is-off { color: var(--text-muted, #8b93a7); border: 1px solid var(--border, rgba(139,147,167,0.35)); }
.pl-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 8px 0 6px; }
.pl-usd-label { display: inline-flex; align-items: center; gap: 8px; font-size: 0.82rem; }
.pl-usd-label input { width: 90px; }
.pl-last { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.pl-live-note { grid-column: 1 / -1; margin: 4px 0; }

/* Entry to REAL switch: one-line segmented control (11 Oct 2026). Still four check boxes (exactly one is ticked); the labels are the pills. */
.rt-mode { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 2px; margin: 0; padding: 3px; min-width: 0; border: 1px solid var(--border, #2a3142); border-radius: 999px; background: rgba(148,163,184,0.07); }
.rt-mode[hidden] { display: none; }
.rt-mode legend { display: none; }
.rt-mode-title { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted, #8b93a7); padding: 0 10px 0 12px; white-space: nowrap; }
.rt-mode-opt { position: relative; display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 12px; letter-spacing: .02em; white-space: nowrap; padding: 6px 13px; border-radius: 999px; cursor: pointer; border: 1px solid transparent; color: var(--text-muted, #8b93a7); transition: background .15s, color .15s, border-color .15s; user-select: none; }
.rt-mode-opt:hover { color: var(--text, #e6e9f2); background: rgba(148,163,184,0.12); }
.rt-mode-opt input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.rt-mode-opt:focus-within { outline: 2px solid var(--accent, #6366f1); outline-offset: 1px; }
.rt-mode-opt small { font-weight: 600; opacity: .75; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; }
.rt-mode-opt::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .35; }
.rt-mode-opt.is-sel { opacity: 1; }
.rt-mode-opt.is-sel::before { opacity: 1; box-shadow: 0 0 0 3px rgba(255,255,255,0.08); }
.rt-opt-auto.is-sel { color: var(--green, #22c55e); background: rgba(34,197,94,0.14); border-color: rgba(34,197,94,0.55); }
.rt-opt-pair.is-sel { color: #38bdf8; background: rgba(56,189,248,0.14); border-color: rgba(56,189,248,0.55); }
.rt-opt-emaf.is-sel { color: #fbbf24; background: rgba(251,191,36,0.14); border-color: rgba(251,191,36,0.55); }
.rt-opt-both.is-sel { color: #a78bfa; background: rgba(167,139,250,0.14); border-color: rgba(167,139,250,0.55); }
.rt-opt-direct.is-sel { color: #f87171; background: rgba(239,68,68,0.14); border-color: rgba(239,68,68,0.55); }
.rt-opt-manual.is-sel { color: var(--amber, #f59e0b); background: rgba(245,158,11,0.14); border-color: rgba(245,158,11,0.55); }
.rt-opt-off.is-sel { color: #cbd5e1; background: rgba(148,163,184,0.2); border-color: rgba(148,163,184,0.6); }
@media (max-width: 760px) { .rt-mode { flex-wrap: wrap; border-radius: 14px; } .rt-mode-title { flex-basis: 100%; padding: 4px 10px; } }

/* positions on Binance that the system does not track (10 Oct 2026) */
.ext-box { margin-top: 12px; padding: 10px 12px; border: 1px dashed var(--amber, #f59e0b); border-radius: 8px; }
.ext-title { margin-bottom: 6px; }
.q-ext { color: var(--amber, #f59e0b); border-color: currentColor; }

/* REAL account balance block (10 Oct 2026): the top part of the Binance Futures app, live, in the middle of the Real account strip */
.rp-acct { flex: 1 1 320px; min-width: 260px; max-width: 520px; display: flex; flex-direction: column; gap: 6px; padding: 8px 14px; border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
.rp-acct-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rp-margin { font-size: 1.7rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rp-acct-pnl strong { font-variant-numeric: tabular-nums; }
.rp-acct-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 14px; }
.rp-acct-grid > div { display: flex; flex-direction: column; gap: 2px; }
.rp-acct-grid strong { font-variant-numeric: tabular-nums; font-size: 1.02rem; }
.rp-acct.is-stale { opacity: 0.6; }
@media (max-width: 720px) { .rp-lock { border: 0; padding: 8px 0; flex-basis: 100%; } .rp-acct { border: 0; padding: 8px 0; max-width: none; } .rp-acct-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- Home cleanup (10 Oct 2026): REAL first, DEMO zone below, systems as a compact grid --- */
.rp-head .rp-actions { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.rp-main { align-items: flex-start; gap: 6px; }
.rp-main .rp-slots { margin-left: 0; margin-top: 2px; }
.rp-main .rp-chip { min-width: 0; flex-direction: row; align-items: baseline; gap: 8px; padding: 5px 10px; }
.zone-bar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 14px; margin: 6px 0 0; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-panel); color: var(--text); font: inherit; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-align: left; }
.zone-bar .muted { font-weight: 500; letter-spacing: 0; }
.zone-demo { cursor: pointer; border-left: 4px solid #818cf8; }
.zone-demo:hover { border-color: #818cf8; }
.zone-demo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.zone-bar-chev { transition: transform 0.18s ease; }
.zone-demo.is-closed .zone-bar-chev { transform: rotate(-90deg); }
.zone-sys { border-left: 4px solid var(--border); }
.demo-zone { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.demo-zone[hidden] { display: none; }
.demo-zone > .board-card { min-height: 0; }
.demo-zone .board-live-trades, .demo-zone .board-active-totals, .demo-zone .board-harvest, .demo-zone .demo-strip { grid-column: auto; }
@media (max-width: 600px) { .rp-head .rp-actions { margin-left: 0; width: 100%; } }
/* the REAL block reads as ONE card: Active boxes on top, the trades table directly under it */
.board-home { --home-gap: 18px; }
@media (max-width: 900px) { .board-home { --home-gap: 10px; } }
.board-real-active { margin-bottom: calc(-1 * var(--home-gap)); border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: transparent; min-height: 0; }
.board-real-trades { border-top-left-radius: 0; border-top-right-radius: 0; border-color: rgba(239, 68, 68, 0.35); min-height: 0; }
.board-real-active[hidden] + .board-real-trades { border-top-left-radius: 12px; border-top-right-radius: 12px; }

/* --- Real Trading page tabs (10 Oct 2026) --- */
.rt-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.rt-tab { background: var(--bg-panel); color: var(--text-muted); border: 1px solid var(--border); border-radius: 8px; padding: 7px 14px; font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; }
.rt-tab:hover { color: var(--text); }
.rt-tab.is-active { color: var(--text); border-color: var(--red, #ef4444); background: rgba(239, 68, 68, 0.12); }
.rt-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#liveWrap[data-tab="trades"] [data-rt-tab]:not([data-rt-tab="trades"]),
#liveWrap[data-tab="settings"] [data-rt-tab]:not([data-rt-tab="settings"]),
#liveWrap[data-tab="harvest"] [data-rt-tab]:not([data-rt-tab="harvest"]),
#liveWrap[data-tab="safety"] [data-rt-tab]:not([data-rt-tab="safety"]) { display: none; }

/* --- Systems drop-down in the menu (10 Oct 2026) --- */
.nav-group { position: relative; }
.nav-menu { display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 60; min-width: 190px; flex-direction: column; gap: 2px; padding: 4px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4); }
.nav-group.open .nav-menu { display: flex; }
.nav-menu .nav-tab { width: 100%; text-align: left; }
.nav-group-btn.active { background: var(--bg-card); color: var(--text); border-color: var(--border); }
@media (max-width: 640px) {
  .nav-group-btn { display: none; }
  .nav-menu { display: flex; position: static; box-shadow: none; border: 0; padding: 0 0 0 12px; background: transparent; min-width: 0; }
  .topnav.open { max-height: 640px; overflow-y: auto; }
}

#liveWrap { padding: 4px 18px 18px; max-width: 1500px; margin: 0 auto; }

/* folded forensic panels on the system pages (10 Oct 2026) */
.panel[data-fold] > .panel-header { cursor: pointer; }
.panel[data-fold] > .panel-header h2::after { content: ' \25B4'; font-size: 0.7em; color: var(--text-muted); }
.panel[data-fold].is-folded > .panel-header h2::after { content: ' \25BE'; }
.panel[data-fold].is-folded > :not(.panel-header) { display: none; }


/* Period buttons (Hub range) */
.kp-range { display: inline-flex; gap: 4px; }
.kp-range-btn { padding: 4px 12px; font-size: 12px; font-weight: 700; border-radius: 999px; }
.kp-range-btn.is-active { background: rgba(99,102,241,0.2); border-color: var(--accent, #6366f1); color: var(--text, #e6e9f2); }

/* Harvest Log time range buttons (11 Oct 2026): reuse the .rp-slot look */
.hv-ranges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.hv-range-tiles .hv-tile { border-color: var(--accent); }

/* USER SIGNAL CARD: live support / resistance block (11 Oct 2026) */
.us-sr { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; border-top: 1px solid var(--border, #1f2937); }
.us-sr-levels { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.us-sr-lv { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; border-radius: 8px; background: rgba(148, 163, 184, 0.07); }
.us-sr-name { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted, #94a3b8); }
.us-sr-px { font-weight: 700; font-variant-numeric: tabular-nums; }
.us-sr-pct { font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.us-sr-res .us-sr-pct { color: var(--red, #ef4444); }
.us-sr-sup .us-sr-pct { color: var(--green, #22c55e); }
.us-sr-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.us-sr-badge { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; padding: 2px 8px; border-radius: 999px; background: rgba(148, 163, 184, 0.16); color: var(--muted, #94a3b8); }
.us-sr-testing { background: rgba(59, 130, 246, 0.18); color: #60a5fa; }
.us-sr-rejected { background: rgba(245, 158, 11, 0.18); color: #fbbf24; }
.us-sr-breaking { background: rgba(168, 85, 247, 0.18); color: #c084fc; }
.us-sr-broke { background: rgba(239, 68, 68, 0.18); color: #f87171; }
.us-sr-retest { background: rgba(34, 197, 94, 0.18); color: #4ade80; }
.us-sr-at { font-size: 0.78rem; color: var(--muted, #94a3b8); font-variant-numeric: tabular-nums; }
.us-sr-text { margin: 0; font-size: 0.85rem; line-height: 1.4; }
/* FEE RULE panel */
.fr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 10px 0; }
.fr-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: var(--muted, #94a3b8); }
.fr-field input { padding: 6px 8px; border-radius: 6px; border: 1px solid var(--border, #1f2937); background: var(--bg-card, #111827); color: inherit; }
.fr-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fr-on { color: var(--green, #22c55e); font-weight: 700; }
.fr-off { color: var(--amber, #f59e0b); font-weight: 700; }
.fr-master-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 8px 0 12px; }
.fr-master { border: 1px solid var(--border, #1f2937); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.fr-master-title { font-weight: 700; font-size: 0.9rem; }
.fr-rules { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 12px; }
.fr-rules.fr-dim { opacity: 0.55; }
.fr-rule { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 4px; align-items: start; border: 1px solid var(--border, #1f2937); border-radius: 8px; padding: 10px 12px; }
.fr-rule > input[type=checkbox] { margin-top: 4px; width: 16px; height: 16px; }
.fr-rule > span:nth-of-type(2) { grid-column: 2; }
.fr-inline { width: 72px; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--border, #1f2937); background: var(--bg-card, #111827); color: inherit; font-size: 0.85rem; }

/* SECTION GLOW (11 Oct 2026, user request): every section (panel / board card) is its own glowing, slightly raised box so it is obvious where one section ends and the next begins.
   Each neighbour gets a different colour (6 colours repeating). Pure styling: nothing else changes. */
.panel, .board-card {
  --glow: 56, 189, 248; /* r, g, b of this section's colour (cyan default) */
  border: 1px solid rgba(var(--glow), 0.55);
  background-image: linear-gradient(180deg, rgba(var(--glow), 0.07) 0%, rgba(var(--glow), 0) 38%);
  box-shadow:
    0 0 0 1px rgba(var(--glow), 0.12),
    0 0 18px rgba(var(--glow), 0.30),
    0 0 46px rgba(var(--glow), 0.14),
    0 14px 28px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -10px 24px rgba(0, 0, 0, 0.28);
  margin-bottom: 22px; /* room so the glows of two stacked sections never run into each other */
}
.panel:nth-of-type(6n+1), .board-card:nth-of-type(6n+1) { --glow: 56, 189, 248; }   /* cyan */
.panel:nth-of-type(6n+2), .board-card:nth-of-type(6n+2) { --glow: 167, 139, 250; }  /* violet */
.panel:nth-of-type(6n+3), .board-card:nth-of-type(6n+3) { --glow: 251, 191, 36; }   /* amber */
.panel:nth-of-type(6n+4), .board-card:nth-of-type(6n+4) { --glow: 52, 211, 153; }   /* green */
.panel:nth-of-type(6n+5), .board-card:nth-of-type(6n+5) { --glow: 244, 114, 182; }  /* pink */
.panel:nth-of-type(6n+6), .board-card:nth-of-type(6n+6) { --glow: 96, 165, 250; }   /* blue */
/* a box inside a box (and the big grid layout's own gaps) keeps the plain look */
.panel .panel, .board-card .panel, .panel .board-card, .board-card .board-card {
  border: 1px solid var(--border); background-image: none; box-shadow: none; margin-bottom: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .panel, .board-card { transition: box-shadow 0.25s ease; }
  .panel:hover, .board-card:hover { box-shadow: 0 0 0 1px rgba(var(--glow), 0.2), 0 0 24px rgba(var(--glow), 0.42), 0 0 60px rgba(var(--glow), 0.2), 0 16px 30px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 -10px 24px rgba(0, 0, 0, 0.28); }
}

/* HUB (11 Oct 2026): system tags, filter chips, route pills */
.hub-tag { display: inline-block; min-width: 48px; text-align: center; padding: 2px 8px; border-radius: 6px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; color: var(--hub-c, #94a3b8); border: 1px solid var(--hub-c, #94a3b8); background: color-mix(in srgb, var(--hub-c, #94a3b8) 14%, transparent); white-space: nowrap; }
.hub-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.hub-chip { background: var(--bg-panel); color: var(--text-muted); border: 1px solid var(--border); border-radius: 20px; padding: 5px 12px; font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; }
.hub-chip:hover { color: var(--text); }
.hub-chip.is-active { color: var(--hub-c, var(--text)); border-color: var(--hub-c, var(--text)); background: color-mix(in srgb, var(--hub-c, #94a3b8) 14%, transparent); }
.hub-name { font-weight: 600; }
.hub-table td, .hub-feed td { vertical-align: middle; }
.hub-splits { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin: 14px 0; align-items: start; }
.hub-split { min-width: 0; overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px 4px; background: rgba(148,163,184,0.04); }
.hub-split h3 { margin: 0 0 4px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.72rem; }
.hub-split-table { width: 100%; table-layout: auto; }
.hub-split-table th, .hub-split-table td { padding: 6px 8px; }
.hub-split-table th:not(:first-child), .hub-split-table td:not(:first-child) { text-align: right; }
.hub-split-name { white-space: normal !important; overflow-wrap: anywhere; }
.hub-route { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
.hub-route-real { color: var(--red); background: var(--red-dim); }
.hub-route-demo { color: var(--blue, #38bdf8); background: rgba(56,189,248,0.12); }
.hub-route-paper { color: var(--text-muted); background: rgba(148,163,184,0.12); }
.hub-route-refused { color: var(--amber, #f59e0b); background: rgba(245,158,11,0.12); }
@media (max-width: 640px) { .hub-feed th:nth-child(5), .hub-feed td:nth-child(5), .hub-feed th:nth-child(9), .hub-feed td:nth-child(9) { display: none; } }

.zone-sys { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }


/* Hub Real / Demo columns (14 Oct 2026) */
.hub-table .hub-c { text-align: center; white-space: nowrap; }
.hub-table .hub-sep-l { border-left: 1px solid var(--border, rgba(127,127,127,.25)); }
.hub-real-c { color: #f59e0b; font-weight: 600; }
.hub-demo-c { color: #38bdf8; font-weight: 600; }
.hub-grp th { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; text-align: center; padding-bottom: 2px; border-bottom: 0; }
.hub-g-open { color: var(--muted, #8a99b0); border-bottom: 2px solid rgba(127,127,127,.45) !important; }
.hub-g-real { color: #f59e0b; border-bottom: 2px solid #f59e0b !important; }
.hub-g-demo { color: #38bdf8; border-bottom: 2px solid #38bdf8 !important; }
.hub-gross { font-size: 11px; opacity: .85; margin-top: 1px; }
.hub-row-total td { font-weight: 700; background: rgba(127,127,127,.08); }

/* Harvest Log: coin names under each row (14 Oct 2026) */
.hv-coins { margin-top: 2px; line-height: 1.5; color: var(--text-muted, #8a93a6); }
.hv-coin { white-space: nowrap; margin-right: 2px; }
.hv-coin b { color: var(--text, #e6edf6); font-weight: 700; }

/* NEW LISTING WATCH (12 Oct 2026, watch-only) */
.nl-tiles { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.nl-tile { display: flex; flex-direction: column; gap: 2px; min-width: 130px; padding: 8px 12px; border: 1px solid var(--border, rgba(139, 147, 167, 0.25)); border-radius: 8px; }
.nl-tile b { font-size: 1.05rem; }
.nl-tile span { font-size: 0.72rem; color: var(--text-muted); }
.nl-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 0 10px; }
.nl-add input { min-width: 220px; padding: 7px 10px; border-radius: 6px; border: 1px solid var(--border, rgba(139, 147, 167, 0.35)); background: transparent; color: inherit; }

/* PER-SYSTEM COOLDOWN box (17 Oct 2026) */
.cooldown-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; padding: 9px 12px; border: 1px solid var(--border, rgba(139,147,167,0.35)); border-radius: 10px; }
.cooldown-bar input[type="number"] { width: 84px; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border, rgba(139,147,167,0.45)); background: transparent; color: inherit; font: inherit; }
.cooldown-bar .cd-built { flex: 1 1 100%; }
.coinlist-bar textarea { flex: 1 1 100%; min-height: 54px; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--border, rgba(139,147,167,0.45)); background: transparent; color: inherit; font: inherit; resize: vertical; }
.coinlist-bar .cl-note { flex: 1 1 100%; }

.slb-pl { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; color: #16a34a; background: rgba(34,197,94,0.14); border: 1px solid rgba(34,197,94,0.5); white-space: nowrap; }


/* LIVE settings (13 Oct 2026): clean cards - system table + limit tiles */
.ls-form { display: grid; gap: 14px; }
.ls-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.ls-title { margin: 0 0 10px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.ls-tablewrap { overflow-x: auto; }
.ls-table { width: 100%; border-collapse: collapse; }
.ls-table thead th { text-align: left; font-size: 0.72rem; font-weight: 600; color: var(--text-muted); padding: 0 8px 6px; white-space: nowrap; }
.ls-table tbody tr + tr th, .ls-table tbody tr + tr td { border-top: 1px solid var(--border); }
.ls-table tbody th { text-align: left; font-weight: 600; font-size: 0.9rem; padding: 7px 12px 7px 0; white-space: nowrap; }
.ls-table td { padding: 5px 8px; }
.ls-table input { width: 84px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font: inherit; font-variant-numeric: tabular-nums; }
.ls-table input:focus, .ls-tile input[type="number"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(99,102,241,0.25); }
.ls-size { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--green); white-space: nowrap; }
.ls-foot { margin-top: 10px; }
.ls-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.ls-tile { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); font-size: 0.78rem; color: var(--text-muted); }
.ls-tile input[type="number"] { width: 100%; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.ls-tile small { font-size: 0.7rem; }
.ls-sw { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.ls-sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.ls-sw i { width: 34px; height: 18px; border-radius: 999px; background: var(--red-dim); border: 1px solid var(--border); position: relative; transition: background 0.15s; }
.ls-sw i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--text-muted); transition: transform 0.15s, background 0.15s; }
.ls-sw input:checked + i { background: var(--green-dim); }
.ls-sw input:checked + i::after { transform: translateX(16px); background: var(--green); }
.ls-sw input:focus-visible + i { box-shadow: 0 0 0 2px var(--accent); }
.ls-sw em::before { content: 'OFF'; }
.ls-sw input:checked ~ em::before { content: 'ON'; }
.ls-sw input:checked ~ em { color: var(--green); }
.ls-sw em { font-style: normal; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; }
.ls-sw-solo { margin-top: 4px; }
.ls-actions { margin-top: 0; }

/* Real Fee Rule (13 Oct 2026): compact rule cards */
.fr-master { flex-direction: row; align-items: center; justify-content: space-between; background: var(--bg-card); border-radius: 12px; padding: 12px 16px; }
.fr-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.fr-rule2 { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.fr-rule2 .ls-sw b { font-size: 0.95rem; }
.fr-fields { display: flex; flex-wrap: wrap; gap: 10px; }
.fr-f { display: flex; flex-direction: column; gap: 4px; font-size: 0.72rem; color: var(--text-muted); }
.fr-f input { width: 86px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font: inherit; font-size: 0.95rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.fr-f input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(99,102,241,0.25); }
.fr-actions { margin: 12px 0; }

/* --- HOURLY page (18 Oct 2026): hourly target settings + 24-hour record + calendar --- */
.hr-panel { margin-bottom: 14px; }
.hr-now { display: flex; align-items: center; gap: 16px; padding: 12px 14px; margin-bottom: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); }
.hr-now-big { font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 6.5ch; letter-spacing: -0.01em; }
.hr-now-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hr-now-title { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.hr-bar { height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; margin-top: 4px; }
.hr-bar span { display: block; height: 100%; background: var(--green); border-radius: 999px; transition: width 0.4s; }
.hr-datebar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hr-datebar input[type="date"] { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); font-size: 0.9rem; color-scheme: dark; }
.hr-datebar .btn-ghost { padding: 6px 12px; }
.hr-datebar .btn-ghost:disabled { opacity: 0.35; cursor: default; }
.hr-monthlabel { min-width: 9.5em; text-align: center; font-weight: 700; }
.hr-summary { margin: 4px 0 12px; }
.hr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.hr-hour { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); text-align: left; cursor: pointer; font-family: inherit; position: relative; }
.hr-hour .hr-h { font-size: 0.72rem; font-weight: 700; color: var(--text-muted); letter-spacing: 0.04em; }
.hr-hour .hr-v { font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.hr-hour .hr-n { font-size: 0.68rem; color: var(--text-muted); min-height: 1em; }
.hr-hit { background: rgba(34,197,94,0.20); border-color: var(--green); }
.hr-hit .hr-v { color: var(--green); }
.hr-plus { background: rgba(245,158,11,0.13); border-color: rgba(245,158,11,0.55); }
.hr-plus .hr-v { color: var(--amber); }
.hr-minus { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.6); }
.hr-minus .hr-v { color: var(--red); }
.hr-none .hr-v { color: var(--text-muted); }
.hr-hour.is-now::after { content: 'NOW'; position: absolute; top: 6px; right: 8px; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.06em; color: var(--accent); }
.hr-hour.is-sel, .hr-day.is-sel { outline: 2px solid var(--accent); outline-offset: 1px; }
.hr-hour:focus-visible, .hr-day:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.hr-detail { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); }
.hr-detail-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 0.95rem; }
.hr-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; border: 1px solid var(--border); }
.hr-detail .hr-pill.hr-hit { color: var(--green); }
.hr-detail .hr-pill.hr-plus { color: var(--amber); }
.hr-detail .hr-pill.hr-minus { color: var(--red); }
.hr-table td, .hr-table th { white-space: nowrap; text-align: left; }
.hr-actions { margin-top: 12px; display: flex; justify-content: flex-end; }
.hr-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.hr-cal-h { text-align: center; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); padding-bottom: 2px; }
.hr-day { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; min-height: 62px; padding: 6px 7px; border-radius: 9px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); font-family: inherit; cursor: pointer; text-align: left; }
.hr-day:disabled { opacity: 0.35; cursor: default; }
.hr-day .hr-dn { font-size: 0.78rem; font-weight: 700; color: var(--text-muted); }
.hr-day .hr-dv { font-size: 0.78rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.hr-day.hr-plus { background: rgba(34,197,94,0.16); border-color: rgba(34,197,94,0.55); }
.hr-day.hr-plus .hr-dv { color: var(--green); }
.hr-day.hr-minus { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.6); }
.hr-day.hr-minus .hr-dv { color: var(--red); }
.hr-day.is-now .hr-dn { color: var(--accent); }
.hr-dh { position: absolute; top: 5px; right: 6px; font-size: 0.62rem; font-weight: 800; color: var(--green); }
@media (max-width: 640px) {
  .hr-now { flex-direction: column; align-items: flex-start; gap: 6px; }
  .hr-now-body { width: 100%; }
  .hr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hr-cal { gap: 4px; }
  .hr-day { min-height: 54px; padding: 5px; }
  .hr-day .hr-dv { font-size: 0.66rem; }
  .hr-datebar { width: 100%; }
}
.hr-c-why { white-space: normal !important; }
@media (max-width: 640px) { .hr-c-t { display: none; } .hr-table td, .hr-table th { padding-left: 6px; padding-right: 6px; } }
@media (max-width: 640px) { .hr-table { font-size: 0.74rem; } .hr-c-why { font-size: 0.7rem; } }
.hr-dl { position: absolute; bottom: 5px; right: 6px; font-size: 0.62rem; font-weight: 800; color: var(--red); }

/* --- HOURLY power button + Home window (18 Oct 2026) --- */
.hr-power-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.hr-power { padding: 6px 16px 6px 6px; font-size: 0.9rem; gap: 9px; }
.hr-power.is-off { padding: 6px 6px 6px 16px; }
.hr-power .engine-switch-knob { width: 22px; height: 22px; }
.hr-power-label { font-weight: 700; font-size: 0.95rem; }
.hr-bar span.is-full { background: var(--green); }
@media (max-width: 760px) { .hr-home { grid-template-columns: 1fr; gap: 6px; } .hrh-open { justify-self: start; } }

/* ===== REAL ACCOUNT strip, live look (19 Oct 2026): glass panels, a candle tape that keeps moving, a heartbeat line, count-up numbers, flashes on change. Pure decoration + the same numbers as before. ===== */
.real-pnl-strip { position: relative; overflow: hidden; padding: 16px 18px 14px; border-radius: 18px; isolation: isolate;
  background: radial-gradient(900px 260px at 12% -10%, rgba(99,102,241,0.16), transparent 60%), radial-gradient(700px 260px at 100% 110%, rgba(239,68,68,0.10), transparent 60%), linear-gradient(180deg, #0f1320, #0a0d17);
  border: 1px solid rgba(129,140,248,0.35); box-shadow: 0 0 0 1px rgba(255,255,255,0.02) inset, 0 10px 40px -12px rgba(0,0,0,0.8), 0 0 36px -10px var(--rp-glow, rgba(129,140,248,0.45)); transition: box-shadow 0.8s ease, border-color 0.8s ease; }
.real-pnl-strip[data-mood="up"] { --rp-glow: rgba(34,197,94,0.55); border-color: rgba(34,197,94,0.45); }
.real-pnl-strip[data-mood="down"] { --rp-glow: rgba(239,68,68,0.5); border-color: rgba(239,68,68,0.45); }
.real-pnl-strip::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.5;
  background-image: linear-gradient(rgba(148,163,184,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,0.07) 1px, transparent 1px); background-size: 34px 34px; animation: rpGrid 24s linear infinite;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%); }
.real-pnl-strip::after { content: ''; position: absolute; left: -30%; top: 0; width: 30%; height: 2px; z-index: 0; pointer-events: none; background: linear-gradient(90deg, transparent, var(--rp-glow, rgba(129,140,248,0.9)), transparent); animation: rpSweep 5.5s ease-in-out infinite; }
@keyframes rpGrid { to { background-position: 34px 34px, 34px 34px; } }
@keyframes rpSweep { 0% { left: -30%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.real-pnl-strip > .rp-head, .real-pnl-strip > .rp-body, .real-pnl-strip > .rp-note { position: relative; z-index: 1; }
/* head: a live heartbeat next to the pills */
.rp-head { gap: 8px 12px; }
.rp-head .real-mode-live { letter-spacing: 0.08em; font-weight: 800; background: linear-gradient(110deg, #ef4444 30%, #fb7185 50%, #ef4444 70%); background-size: 220% 100%; animation: rpShine 4.5s linear infinite; box-shadow: 0 0 16px -2px rgba(239,68,68,0.6); }
@keyframes rpShine { to { background-position: -220% 0; } }
#rpMaster { position: relative; padding-left: 24px; }
#rpMaster::before { content: ''; position: absolute; left: 10px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #64748b; }
#rpMaster.demo-on::before { background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,0.7); animation: rpPulse 1.8s ease-out infinite; }
@keyframes rpPulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.65); } 100% { box-shadow: 0 0 0 10px rgba(34,197,94,0); } }
@keyframes rpEcg { from { stroke-dashoffset: 34; } to { stroke-dashoffset: -190; } }
/* three glass panels */
.rp-body { align-items: stretch; gap: 14px; margin-top: 14px; }
.real-pnl-strip .rp-main, .real-pnl-strip .rp-acct, .real-pnl-strip .rp-lock { background: linear-gradient(160deg, rgba(30,36,58,0.5), rgba(15,19,32,0.42)); border: 1px solid rgba(148,163,184,0.16); border-radius: 14px; padding: 14px 16px; backdrop-filter: blur(6px); box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset; }
.real-pnl-strip .rp-main { flex: 1 1 280px; justify-content: space-between; }
.real-pnl-strip .rp-acct { flex: 1.5 1 360px; max-width: none; justify-content: space-between; border-left: 1px solid rgba(148,163,184,0.16); border-right: 1px solid rgba(148,163,184,0.16); }
.rp-label { letter-spacing: 0.12em; font-size: 0.72rem; }
.rp-big { font-size: 2.5rem; font-weight: 800; letter-spacing: -0.02em; text-shadow: 0 0 22px currentColor; }
.rp-margin { font-size: 2.3rem; font-weight: 800; letter-spacing: -0.02em; background: linear-gradient(180deg, #fff, #c7d2fe); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rp-slot { border-radius: 999px; padding: 5px 12px; transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease; }
.rp-slot:hover { transform: translateY(-1px); }
.rp-slot.is-active { box-shadow: 0 0 14px -2px rgba(99,102,241,0.7); }
.rp-main .rp-chip { border-radius: 999px; background: rgba(15,19,32,0.7); }
.rp-acct-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rp-margin-row { display: flex; align-items: baseline; gap: 8px; }
.rp-acct-grid > div { padding: 6px 10px; border-radius: 10px; background: rgba(8,11,20,0.45); border: 1px solid rgba(148,163,184,0.1); }
#rpUnreal.gain-pos, #rpUnreal.gain-neg { position: relative; }
.real-pnl-strip.has-open #rpUnreal { animation: rpBreath 2.2s ease-in-out infinite; }
@keyframes rpBreath { 50% { text-shadow: 0 0 12px currentColor; opacity: 0.85; } }
@keyframes rpBar { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.demo-estop { box-shadow: 0 0 18px -4px rgba(239,68,68,0.7); }
@media (max-width: 720px) {
  .real-pnl-strip { padding: 14px 12px; border-radius: 14px; }
  .real-pnl-strip .rp-main, .real-pnl-strip .rp-acct, .real-pnl-strip .rp-lock { border: 1px solid rgba(148,163,184,0.16); padding: 12px; flex-basis: 100%; max-width: none; }
  .rp-big { font-size: 2.1rem; } .rp-margin { font-size: 1.9rem; } .rp-ecg { width: 90px; }
}
@media (prefers-reduced-motion: reduce) {
  .real-pnl-strip::before, .real-pnl-strip::after, .rp-head .real-mode-live, #rpMaster.demo-on::before, .rp-ecg-live, .rp-lock-bar > i::after, .real-pnl-strip.has-open #rpUnreal { animation: none !important; }
}

/* --- HOURLY strip glow (19 Oct 2026, user request): green breathing glow while in profit, red while in loss, plain at zero. Decoration only. --- */
@keyframes hrhBreathe { 0%, 100% { box-shadow: 0 0 8px 0 var(--hrh-glow), inset 0 0 14px -10px var(--hrh-glow); } 50% { box-shadow: 0 0 26px 3px var(--hrh-glow), inset 0 0 30px -6px var(--hrh-glow); } }
@keyframes hrhNum { 0%, 100% { text-shadow: 0 0 6px var(--hrh-glow); } 50% { text-shadow: 0 0 16px var(--hrh-glow), 0 0 4px var(--hrh-glow); } }
@media (prefers-reduced-motion: no-preference) {
}

/* BASKET $1 mode switch + comparison chart (14 Oct 2026) */


/* --- PHONE VIEW of Home (14 Oct 2026, user request): everything visible with the phone held upright, no sideways turn. Only below 700px; desktop is untouched. --- */
@media (max-width: 700px) {
  .board-home { padding: 8px; gap: 8px; }
  .board-card { padding: 10px; gap: 10px; min-height: 0; }
  .rp-big { font-size: 1.8rem; }
  .rp-body, .rp-main, .rp-side, .rp-head { min-width: 0; max-width: 100%; }
  .rp-acct, .rp-lock { flex: 1 1 100%; min-width: 0; max-width: 100%; }
  .rp-head .rp-actions { width: 100%; }
  .rp-head .rp-actions > * { flex: 1 1 auto; }
  .board-card-head { flex-wrap: wrap; }
  .panel-sub { display: block; }
  .rt-actions { justify-content: flex-start; }
  .sel-bar { flex-wrap: wrap; gap: 6px; }
  /* each trade = one card */
  .board-home .table-wrap { overflow-x: visible; }
  table.data-table.cards, .cards tbody { display: block; width: 100%; }
  .cards thead { display: none; }
  .cards tbody { display: flex; flex-direction: column; gap: 8px; }
  .cards tr { display: grid; grid-template-columns: 26px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "sel coin coin pnl" ". dir src age" ". pct size px" ". status status status" ". act act act"; gap: 4px 8px; align-items: center; padding: 10px; border: 1px solid var(--border); border-radius: 10px; }
  .cards td { display: block; padding: 0; border: 0; white-space: normal; min-width: 0; width: auto; overflow-wrap: anywhere; }
  .cards .c-sel { grid-area: sel; text-align: left; padding: 0; width: auto; }
  .cards .c-coin { grid-area: coin; font-weight: 800; font-size: 1rem; }
  .cards .c-pnl { grid-area: pnl; text-align: right; font-size: 1.05rem; font-weight: 800; }
  .cards .c-dir { grid-area: dir; }
  .cards .c-src { grid-area: src; }
  .cards .c-age { grid-area: age; text-align: right; }
  .cards .c-type { display: none; }
  .cards .c-pct { grid-area: pct; }
  .cards .c-px { grid-area: px; text-align: right; }
  .cards .c-size { grid-area: size; text-align: center; }
  .cards .c-size::before { content: 'Size '; color: var(--text-muted); font-size: 0.7rem; font-weight: 500; }
  .cards .c-pct::before { content: 'Move '; color: var(--text-muted); font-size: 0.7rem; }
  .cards .c-px::before { content: 'Price '; color: var(--text-muted); font-size: 0.7rem; font-weight: 500; }
  .cards .c-status { grid-area: status; padding-top: 4px; border-top: 1px dashed var(--border); }
  .cards .c-act { grid-area: act; width: auto; }
  .cards .pos-actions-in { flex-direction: row; flex-wrap: wrap; }
  .cards .pos-actions-in > * { flex: 1 1 0; }
  .cards .pos-actions-in .btn-close-pos { padding: 8px 10px; }
  .cards tr.hv-day { display: block; }
  .cards td { background: transparent !important; }
  .cards tr[class*="risk-row"] { background: rgba(239, 68, 68, 0.10); }
  .cards tr.trade-good { background: rgba(34, 197, 94, 0.07); }
  .cards .c-pct { white-space: nowrap; }
  /* Harvest list rows */
  .hv-list table.data-table, .hv-list tbody { display: block; width: 100%; }
  .hv-list tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "t n p" ". n c"; gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
  .hv-list tr.hv-day { display: block; padding: 6px 0 2px; }
  .hv-list td { display: block; padding: 0; border: 0; white-space: normal; overflow-wrap: anywhere; }
  .hv-list td:nth-child(1) { grid-area: t; }
  .hv-list td:nth-child(2) { grid-area: n; }
  .hv-list td:nth-child(3) { grid-area: c; text-align: right; }
  .hv-list td:nth-child(4) { grid-area: p; text-align: right; }
  .hv-list tr.hv-day td { grid-area: auto; text-align: left; }
}

/* v57 (20 Oct 2026): stop loss unit toggle ($ | %) in the Real settings size table */
.ls-stop { white-space: nowrap; }
.ls-seg { display: inline-flex; margin-left: 6px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; vertical-align: middle; }
.ls-seg button { background: var(--bg); color: var(--text-muted); border: 0; padding: 6px 10px; font: inherit; font-weight: 600; cursor: pointer; }
.ls-seg button + button { border-left: 1px solid var(--border); }
.ls-seg button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.ls-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ls-stop input[hidden] { display: none; }

.real-gates-line { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.gate-chip { display: inline-block; padding: 3px 9px; border: 1px solid var(--border, rgba(139,147,167,0.45)); border-radius: 999px; font-size: 12px; line-height: 1.4; }
.gate-panel { flex-direction: column; align-items: stretch; }
.gate-panel .gate-panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px 14px; }
.gate-panel .gate-panel-grid label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.gate-panel .gate-panel-grid label.real-check { flex-direction: row; flex-wrap: wrap; align-items: center; }
.gate-panel .gate-panel-foot { display: flex; align-items: center; gap: 10px; }
.gate-chip-off { opacity: 0.6; border-style: dashed; }

/* TRADES-SO-FAR counter (23 Oct 2026): top bar of every system page; Top Sniper shows N / 100 with a progress track. */
.trade-counter { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0 0 12px; padding: 10px 14px; border: 1px solid rgba(148,163,184,0.2); border-radius: 12px; background: rgba(30,36,58,0.35); }
.trade-counter[hidden] { display: none; }
.tc-label { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: #94a3b8; }
.tc-num { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.tc-of { font-size: 1rem; font-weight: 500; color: #94a3b8; }
.tc-track { flex: 1 1 140px; min-width: 120px; height: 8px; border-radius: 999px; background: rgba(148,163,184,0.18); overflow: hidden; align-self: center; }
.tc-track > i { display: block; height: 100%; border-radius: 999px; background: #38bdf8; transition: width 0.4s ease; }
.trade-counter.tc-done .tc-track > i { background: #22c55e; }
.ts-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 8px; }
.ts-res-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.ts-res { padding: 10px 12px; border: 1px solid rgba(148,163,184,0.18); border-radius: 10px; }
.ts-res h3 { margin: 0 0 8px; font-size: 0.95rem; }
.ts-res-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; margin-bottom: 6px; }
.ts-res-grid > div { display: flex; flex-direction: column; }
.ts-res-grid strong { font-variant-numeric: tabular-nums; }

/* --- CALENDAR (24 Oct 2026): full-screen month, one figure per day --- */
.cal-wrap { display: flex; flex-direction: column; gap: 10px; min-height: calc(100vh - 140px); padding: 4px 2px 12px; }
.cal-head { display: flex; align-items: center; gap: 10px; }
.cal-title { flex: 1; text-align: center; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cal-total { font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.cal-arrow, .cal-today { background: var(--bg-card); color: var(--text); border: 1px solid var(--border); border-radius: 10px; font-weight: 700; cursor: pointer; }
.cal-arrow { width: 44px; height: 44px; font-size: 1.6rem; line-height: 1; }
.cal-today { height: 44px; padding: 0 14px; font-size: 0.85rem; }
.cal-arrow:hover, .cal-today:hover { border-color: var(--accent); }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.cal-grid { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(92px, 1fr); gap: 6px; }
.cal-cell { position: relative; display: flex; align-items: center; justify-content: center; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; min-width: 0; overflow: hidden; }
.cal-empty { background: transparent; border-color: transparent; }
.cal-day { position: absolute; top: 8px; left: 10px; font-size: 0.85rem; font-weight: 700; color: var(--text-muted); }
.cal-fig { font-size: clamp(0.85rem, 2.2vw, 1.7rem); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; padding-top: 14px; }
.cal-cell.cal-pos { background: rgba(34, 197, 94, 0.13); border-color: rgba(34, 197, 94, 0.45); }
.cal-cell.cal-neg { background: rgba(239, 68, 68, 0.13); border-color: rgba(239, 68, 68, 0.45); }
.cal-cell.cal-pos .cal-fig, .cal-total.cal-pos { color: var(--green); }
.cal-cell.cal-neg .cal-fig, .cal-total.cal-neg { color: var(--red); }
.cal-cell.cal-today-cell { box-shadow: 0 0 0 2px var(--accent) inset; }
.cal-note { text-align: center; }
@media (max-width: 640px) { .cal-grid { grid-auto-rows: minmax(64px, 1fr); gap: 4px; } .cal-dow { gap: 4px; font-size: 0.62rem; } .cal-day { top: 4px; left: 6px; font-size: 0.7rem; } .cal-fig { font-size: 0.66rem; padding-top: 12px; } .cal-title { font-size: 1.15rem; } }

/* ===== v81 REAL COCKPIT (25 Oct 2026, user): everything about the REAL account fits ONE screen on Home - no scrolling to see it. DEMO starts below. ===== */
.board-home { padding-top: 10px; }
.real-cockpit { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.real-cockpit > .board-card { min-height: 0; margin: 0; }
.real-cockpit .board-real-active, .real-cockpit .board-real-trades { border-radius: 12px; border-color: rgba(239, 68, 68, 0.35); }
/* strip */
.real-cockpit .real-pnl-strip { padding: 8px 12px; border-radius: 12px; gap: 0; flex: none; }
.real-cockpit .rp-head { gap: 6px 10px; }
.real-cockpit .rp-head .btn-ghost, .real-cockpit .rp-head .btn-danger { padding: 4px 10px; font-size: 0.74rem; }
.real-cockpit .rp-body { flex-wrap: wrap; align-items: stretch; gap: 8px; margin-top: 6px; }
.real-cockpit .real-pnl-strip .rp-main { flex: 1 1 340px; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 4px 12px; padding: 5px 12px; border-radius: 10px; }
.real-cockpit .rp-label { font-size: 0.64rem; letter-spacing: 0.1em; }
.real-cockpit .rp-big { font-size: 1.65rem; text-shadow: none; }
.real-cockpit .rp-main .rp-slots { margin: 0 0 0 auto; gap: 4px; }
.real-cockpit .rp-slot { padding: 2px 9px; font-size: 0.72rem; }
.real-cockpit .real-pnl-strip .rp-acct { flex: 2 1 480px; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 5px 12px; border-radius: 10px; max-width: none; min-width: 0; }
.real-cockpit .rp-acct-top { gap: 8px; }
.real-cockpit .rp-margin { font-size: 1.45rem; }
.real-cockpit .rp-acct-pnl { white-space: nowrap; }
.real-cockpit .rp-acct-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.real-cockpit .rp-acct-grid > div { padding: 3px 9px; border-radius: 8px; }
.real-cockpit .rp-acct-grid strong { font-size: 0.95rem; }
/* one row of system boxes */
.real-cockpit .board-real-active { padding: 6px 10px 8px; gap: 6px; flex: none; }
.real-cockpit .board-real-active .board-card-head { align-items: center; }
.real-cockpit .board-real-active .board-card-head h2, .real-cockpit .board-real-trades .board-card-head h2 { margin: 0; font-size: 0.92rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.real-cockpit .board-card-head .panel-sub, .real-cockpit .board-real-active .experimental-tag { display: none; }
.real-cockpit .sys-live-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.real-cockpit .sys-live-box { gap: 3px; padding: 5px 8px; border-radius: 8px; }
.real-cockpit .slb-main { gap: 0 8px; }
.real-cockpit .slb-name { font-size: 0.76rem; }
.real-cockpit .slb-label { font-size: 0.62rem; }
.real-cockpit .slb-pnl { font-size: 1rem; }
.real-cockpit .slb-split { display: none; }
.real-cockpit .slb-pl { margin-left: 0; padding: 0 6px; font-size: 10px; }
.real-cockpit .btn-close-all-real { padding: 2px 10px; font-size: 0.7rem; }
.real-cockpit .sys-live-box.slb-empty { gap: 2px; }
@media (min-width: 1280px) { .real-cockpit .sys-live-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
/* real trades table: takes what is left of the screen and scrolls inside itself */
.real-cockpit .board-real-trades { padding: 6px 10px 8px; gap: 6px; flex: 1 1 auto; min-height: 0; }
.real-cockpit .board-real-trades .board-card-head { align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.real-cockpit .rt-actions { gap: 4px 8px; }
.real-cockpit .rt-mode-opt { padding: 3px 10px; font-size: 11px; }
.real-cockpit .rt-mode-title { font-size: 9.5px; padding: 0 6px 0 8px; }
.real-cockpit .real-gates-line { margin: 0; font-size: 0.72rem; }
.real-cockpit .board-real-trades .table-wrap { overflow: auto; }
.real-cockpit .board-real-trades .data-table { font-size: 0.8rem; }
.real-cockpit .board-real-trades .data-table th, .real-cockpit .board-real-trades .data-table td { padding: 4px 9px; }
.real-cockpit .board-real-trades .data-table thead th { position: sticky; top: 0; z-index: 2; background: var(--bg-panel); }
.real-cockpit .board-real-trades .empty-state { padding: 10px 0; margin: 0; }
@media (min-width: 1000px) {
  .real-cockpit.is-fit { height: var(--cockpit-h); }
  .real-cockpit.is-fit .board-real-trades { display: flex; flex-direction: column; }
  .real-cockpit.is-fit .board-real-trades .table-wrap { flex: 1 1 0; min-height: 0; }
  .real-cockpit.is-fit .board-real-trades .queue-box { flex: none; max-height: 22%; overflow: auto; }
}
@media (max-width: 999px) { .real-cockpit .board-real-trades .table-wrap { overflow-x: auto; } }
/* v81: compact real rows - buttons side by side, slim select bar, tight rows (about 12 rows fit a laptop screen) */
.real-cockpit .pos-actions-in { flex-direction: row; flex-wrap: nowrap; gap: 4px; justify-content: flex-end; align-items: center; }
.real-cockpit .pos-actions-in .btn-ghost { padding: 2px 8px; font-size: 0.7rem; line-height: 1.2; }
.real-cockpit .sel-bar { padding: 3px 10px; margin-bottom: 4px; border-radius: 6px; }
.real-cockpit .sel-bar .btn-close-selected { padding: 2px 10px; font-size: 0.72rem; }
.real-cockpit .board-real-trades .data-table td { line-height: 1.2; }
.real-cockpit .board-real-trades .data-table .pos-actions { padding-top: 2px; padding-bottom: 2px; }
.real-cockpit .board-real-trades .data-table th, .real-cockpit .board-real-trades .data-table td { padding: 3px 6px; }
.real-cockpit .board-real-trades .data-table td:nth-child(5) { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.real-cockpit .board-real-trades .experimental-tag { display: none; }
.real-cockpit .board-real-trades .board-card-head > div:first-child { flex: none; }
.real-cockpit .board-real-trades .rt-actions { flex: 1 1 auto; justify-content: flex-start; }
.real-cockpit .board-real-trades .board-card-head { flex-wrap: nowrap; }
@media (max-width: 1200px) { .real-cockpit .board-real-trades .board-card-head { flex-wrap: wrap; } }
.real-cockpit .slb-pnl { flex-basis: 100%; line-height: 1.15; }

/* v84 PUMP LONG SETTINGS MENU: SCALPING / HOLDING toggle */
.plm-tabs { display: flex; gap: 0; margin: 8px 0 4px; max-width: 420px; border: 1px solid var(--border, #2a3140); border-radius: 8px; overflow: hidden; }
.plm-tab { flex: 1; padding: 8px 10px; background: transparent; color: inherit; border: 0; font-weight: 600; font-size: 0.85rem; cursor: pointer; letter-spacing: 0.04em; }
.plm-tab + .plm-tab { border-left: 1px solid var(--border, #2a3140); }
.plm-tab.is-sel { background: var(--accent, #2f81f7); color: #fff; }
.plm-run { margin-left: 6px; font-size: 0.62rem; padding: 1px 5px; border-radius: 4px; background: rgba(255,255,255,0.22); }
.plm-tab:not(.is-sel) .plm-run { background: rgba(46,160,67,0.22); color: #3fb950; }

/* ===================================================================================================================
   v85 (25 Oct 2026, user): ONE CLEAN LOOK. Calm graphite + a single gold accent, one neutral card style (the 6-colour rainbow glow is gone),
   a glass top bar with the brand (always goes Home) and the live Binance MARKET HERO on Home. Pure styling - no logic.
   =================================================================================================================== */
:root { --gold: #f0b90b; --gold-soft: #f7d36a; --ink: #e8ebf2; --line: rgba(148, 163, 184, 0.14); --surface: rgba(255, 255, 255, 0.028); }
body {
  background:
    radial-gradient(1100px 460px at 8% -12%, rgba(240, 185, 11, 0.075), transparent 62%),
    radial-gradient(900px 480px at 100% -6%, rgba(99, 102, 241, 0.085), transparent 58%),
    var(--bg);
  background-attachment: fixed;
}

/* --- top bar: glass, sticky, brand + gold active tab --- */
.topbar { position: sticky; top: 0; z-index: 60; padding: 10px 22px; gap: 14px; background: rgba(11, 14, 20, 0.74); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid var(--line); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35); }
.topbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(240, 185, 11, 0.55), rgba(99, 102, 241, 0.45), transparent); opacity: 0.7; pointer-events: none; }
.brand { display: inline-flex; align-items: center; gap: 10px; background: transparent; border: 0; padding: 2px 6px 2px 0; color: var(--ink); cursor: pointer; font: inherit; text-align: left; flex: none; border-radius: 10px; }
.brand:hover .brand-name { color: var(--gold-soft); }
.brand:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.brand-logo { flex: none; filter: drop-shadow(0 4px 12px rgba(240, 185, 11, 0.35)); }
.brand-text { display: flex; flex-direction: column; line-height: 1.12; }
.brand-name { font-weight: 800; font-size: 1.02rem; letter-spacing: 0.01em; transition: color 0.2s ease; white-space: nowrap; }
.brand-sub { font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-top: 2px; white-space: nowrap; }
.nav-tab { border-radius: 8px; }
.nav-tab:hover { color: var(--ink); background: rgba(255, 255, 255, 0.05); }
.nav-tab.active { background: rgba(240, 185, 11, 0.12); color: var(--gold-soft); border-color: rgba(240, 185, 11, 0.38); }

/* --- one neutral card style everywhere (no rainbow) --- */
.panel, .board-card, .panel:nth-of-type(n), .board-card:nth-of-type(n) {
  --glow: 148, 163, 184;
  border: 1px solid var(--line); border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012)), var(--bg-panel);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 32px rgba(0, 0, 0, 0.38);
}
.panel:hover, .board-card:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 14px 36px rgba(0, 0, 0, 0.45); border-color: rgba(148, 163, 184, 0.24); }
.panel .panel, .board-card .panel, .panel .board-card, .board-card .board-card { border: 1px solid var(--line); background-image: none; box-shadow: none; }
/* the REAL money cards keep ONE meaning-colour: a thin gold edge */
.real-cockpit .board-real-active, .real-cockpit .board-real-trades { border-color: rgba(240, 185, 11, 0.30); }
.real-cockpit .board-real-active { background-image: linear-gradient(180deg, rgba(240, 185, 11, 0.06), rgba(255, 255, 255, 0.01)); }
.real-pnl-strip { border-radius: 16px; }
.board-card-head h2, .panel-header h2 { letter-spacing: 0.01em; }
.sys-live-box { border-radius: 12px; }
table th { letter-spacing: 0.06em; }

/* --- MARKET HERO (Home) --- */
.mkt-hero { grid-column: 1 / -1; position: relative; display: grid; grid-template-columns: auto minmax(150px, 250px) minmax(0, 1fr) auto; align-items: center; gap: 16px; height: 68px; padding: 0 16px; margin-bottom: 8px; overflow: hidden; border-radius: 16px; isolation: isolate;
  border: 1px solid rgba(240, 185, 11, 0.22);
  background: linear-gradient(115deg, rgba(240, 185, 11, 0.10), rgba(99, 102, 241, 0.07) 42%, rgba(255, 255, 255, 0.02)), var(--bg-panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 14px 36px rgba(0, 0, 0, 0.42); }
.mkt-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(420px 120px at 0% 50%, rgba(240, 185, 11, 0.10), transparent 70%); }
.mkt-hero[data-mood="up"]::after, .mkt-hero[data-mood="dn"]::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 3px; }
.mkt-hero[data-mood="up"]::after { background: linear-gradient(180deg, #22c55e, rgba(34, 197, 94, 0.2)); }
.mkt-hero[data-mood="dn"]::after { background: linear-gradient(180deg, #ef4444, rgba(239, 68, 68, 0.2)); }
.mh-lead { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mh-diamond { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #0b0e14; background: linear-gradient(135deg, #ffd75e, #e8a600); box-shadow: 0 6px 16px rgba(240, 185, 11, 0.3); flex: none; }
.mh-id { display: flex; flex-direction: column; line-height: 1.15; }
.mh-sym { font-weight: 800; font-size: 0.98rem; letter-spacing: 0.02em; }
.mh-sym small { font-weight: 600; color: var(--text-muted); font-size: 0.74rem; margin-left: 1px; }
.mh-tag { font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-soft); }
.mh-px { display: flex; align-items: baseline; gap: 8px; }
.mh-px strong { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.mh-chg { font-size: 0.82rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.mh-chg.up, .mh-c.up { color: var(--green); } .mh-chg.dn, .mh-c.dn { color: var(--red); }
.mh-chg.up { background: rgba(34, 197, 94, 0.14); } .mh-chg.dn { background: rgba(239, 68, 68, 0.14); }
.mh-chart { display: block; width: 100%; height: 56px; }
.mh-ticker { position: relative; overflow: hidden; min-width: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.mh-track { display: flex; width: max-content; animation: mh-scroll 60s linear infinite; }
.mh-ticker:hover .mh-track { animation-play-state: paused; }
.mh-set { display: flex; flex: none; }
.mh-it { display: inline-flex; align-items: baseline; gap: 7px; padding: 0 16px; white-space: nowrap; font-size: 0.82rem; border-right: 1px solid var(--line); }
.mh-it b { font-weight: 700; color: var(--ink); } .mh-it i { font-style: normal; color: var(--text-muted); font-variant-numeric: tabular-nums; } .mh-it em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
@keyframes mh-scroll { to { transform: translateX(-50%); } }
.mh-feed { display: inline-flex; align-items: center; gap: 7px; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.mh-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); animation: mh-pulse 1.8s ease-out infinite; }
.mkt-hero.is-down .mh-dot { background: var(--red); animation: none; }
@keyframes mh-pulse { 70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
@media (prefers-reduced-motion: reduce) { .mh-track, .mh-dot { animation: none; } }
@media (max-width: 1100px) { .mkt-hero { grid-template-columns: auto minmax(120px, 200px) minmax(0, 1fr); } .mh-feed { display: none; } }
@media (max-width: 760px) { .mkt-hero { grid-template-columns: 1fr; height: auto; padding: 10px 12px; gap: 6px; } .mh-chart { height: 44px; } .mh-ticker { height: 22px; } .brand-sub { display: none; } .brand-name { font-size: 0.92rem; } .topbar { padding: 8px 12px; } }
.nav-tab, .btn-ghost, .conn-badge { white-space: nowrap; }
.topnav { flex-wrap: nowrap; }
.nav-tab { padding: 7px 11px; }
.topbar-right { gap: 10px; flex: none; }
@media (max-width: 1500px) { .brand-sub { display: none; } }
@media (max-width: 1280px) { .nav-tab { padding: 7px 8px; font-size: 0.8rem; } #username { display: none; } }
/* v87 DRIFT ALERT banner: global, under the top bar */
.drift-banner { margin: 8px 16px 0; position: relative; z-index: 40; }

/* ===================================================================================================================
   v90 (25 Oct 2026, user): NEXT-LEVEL 3D HOME. 3D background floor + star dust (canvas), a tall 3D hero (live BTC candle skyline +
   spinning gold coin), 3D key-style menu buttons, tilting boxes with glare, glass cards, rising entrance. Styling only.
   =================================================================================================================== */
.fx-bg { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; display: block; }

/* --- 3D menu keys --- */
.topnav { perspective: 800px; }
.nav-tab { position: relative; transform-style: preserve-3d; background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.015)); border: 1px solid rgba(255, 255, 255, 0.09); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.55), 0 8px 14px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.13); transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
@media (hover: hover) {
  .nav-tab:hover, .nav-menu .nav-tab:hover { transform: translateY(-2px) translateZ(14px) rotateX(16deg); color: var(--gold-soft); border-color: rgba(240, 185, 11, 0.45); box-shadow: 0 5px 0 rgba(0, 0, 0, 0.55), 0 16px 24px rgba(0, 0, 0, 0.45), 0 0 20px rgba(240, 185, 11, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
}
button.nav-tab:not(:disabled):active { transform: translateY(2px) translateZ(0) rotateX(0deg); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.55), 0 3px 6px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
.nav-tab.active { background: linear-gradient(180deg, rgba(247, 211, 106, 0.34), rgba(240, 185, 11, 0.10)); color: #ffe9a3; border-color: rgba(240, 185, 11, 0.6); box-shadow: 0 3px 0 rgba(120, 80, 0, 0.75), 0 10px 20px rgba(0, 0, 0, 0.4), 0 0 24px rgba(240, 185, 11, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.28); }
.nav-menu .nav-tab { box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
.btn-ghost, .btn-danger { transform-style: preserve-3d; }
.brand { perspective: 260px; }
.brand-logo { transform-style: preserve-3d; animation: v90-brand-spin 9s ease-in-out infinite; }
@keyframes v90-brand-spin { 0%, 58% { transform: rotateY(0deg); } 82%, 100% { transform: rotateY(360deg); } }
.topbar { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(240, 185, 11, 0.25); }

/* --- glass cards on Home so the 3D floor shows through --- */
.board-home .board-card:nth-of-type(n), .board-home .panel:nth-of-type(n) { background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012)), rgba(13, 17, 26, 0.74); -webkit-backdrop-filter: blur(9px) saturate(1.25); backdrop-filter: blur(9px) saturate(1.25); }
.board-home .board-card .board-card, .board-home .board-card .panel { background-image: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* --- 3D hero --- */
.mkt-hero.v3d { display: block; position: relative; height: 340px; padding: 0; margin-bottom: 16px; border-radius: 24px; overflow: hidden; border: 1px solid rgba(240, 185, 11, 0.30); background: radial-gradient(900px 340px at 72% 115%, rgba(240, 185, 11, 0.20), transparent 70%), radial-gradient(700px 320px at 8% -25%, rgba(99, 102, 241, 0.28), transparent 65%), linear-gradient(180deg, #080b13, #0c1220 62%, #090c14); box-shadow: 0 34px 80px rgba(0, 0, 0, 0.6), 0 0 70px rgba(240, 185, 11, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.08); grid-template-columns: none; }
.mkt-hero.v3d::before { background: radial-gradient(420px 160px at var(--mx, 70%) var(--my, 40%), rgba(240, 185, 11, 0.10), transparent 70%); z-index: 0; }
.mkt-hero.v3d .mh-chart { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; }
.mkt-hero.v3d.is-drag .mh-chart { cursor: grabbing; }
.mh-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(7, 9, 15, 0.9) 0, rgba(7, 9, 15, 0.55) 26%, rgba(7, 9, 15, 0) 52%), linear-gradient(0deg, rgba(7, 9, 15, 0.9), rgba(7, 9, 15, 0) 26%); }
.mh-over { position: absolute; left: 30px; top: 26px; z-index: 2; display: flex; flex-direction: column; gap: 14px; pointer-events: none; max-width: 46%; }
.mh-kicker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mh-over .mh-diamond { width: 30px; height: 30px; border-radius: 9px; animation: v90-bob 3.4s ease-in-out infinite; }
.mh-over .mh-sym { font-size: 1.05rem; }
.mkt-hero.v3d .mh-px { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; }
.mkt-hero.v3d .mh-px strong { font-size: clamp(2.1rem, 4.4vw, 3.5rem); line-height: 1; font-weight: 900; letter-spacing: -0.02em; color: #fff6d6; text-shadow: 0 1px 0 #d9a313, 0 2px 0 #b98906, 0 3px 0 #946c05, 0 4px 0 #7a5904, 0 12px 20px rgba(0, 0, 0, 0.65), 0 0 34px rgba(240, 185, 11, 0.38); }
.mkt-hero.v3d .mh-chg { font-size: 1rem; padding: 4px 11px; }
.mh-stats { display: flex; gap: 10px; flex-wrap: wrap; pointer-events: auto; }
.mh-stat { display: flex; flex-direction: column; gap: 2px; padding: 8px 13px; border-radius: 12px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025)); border: 1px solid rgba(255, 255, 255, 0.10); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); position: relative; }
.mh-stat span { font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.mh-stat b { font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.mh-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 14px; height: 40px; padding: 0 16px; background: rgba(6, 8, 14, 0.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid rgba(240, 185, 11, 0.22); }
.mh-bar .mh-ticker { flex: 1 1 auto; }
.mh-bar .mh-feed { flex: none; }
@keyframes v90-bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-3px) rotate(6deg); } }

/* --- the spinning 3D gold coin --- */
.mh-coin { position: absolute; right: clamp(24px, 5vw, 84px); top: 44px; width: 96px; height: 96px; z-index: 2; perspective: 700px; pointer-events: none; }
.mh-coin-spin { position: relative; width: 96px; height: 96px; transform-style: preserve-3d; animation: v90-coin 7.5s linear infinite, v90-float 4s ease-in-out infinite; }
.mh-coin-spin i { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; backface-visibility: hidden; }
.mh-coin-spin i.edge { background: linear-gradient(90deg, #8a6508, #e8a600 40%, #8a6508); box-shadow: inset 0 0 0 2px #6f5206; backface-visibility: visible; }
.mh-coin-spin i.face { color: #5a3d00; background: radial-gradient(circle at 34% 28%, #fff4bd, #f7d36a 28%, #e8a600 62%, #a87305); box-shadow: inset 0 0 0 5px rgba(120, 80, 0, 0.40), inset 0 0 0 7px rgba(255, 233, 150, 0.55), 0 0 30px rgba(240, 185, 11, 0.45); }
.mh-coin-shadow { position: absolute; left: 50%; bottom: -26px; width: 80px; height: 14px; margin-left: -40px; border-radius: 50%; background: radial-gradient(ellipse, rgba(240, 185, 11, 0.5), transparent 70%); animation: v90-shadow 4s ease-in-out infinite; }
@keyframes v90-coin { from { transform: rotateX(-12deg) rotateY(0deg); } to { transform: rotateX(-12deg) rotateY(360deg); } }
@keyframes v90-float { 0%, 100% { margin-top: 0; } 50% { margin-top: -10px; } }
@keyframes v90-shadow { 0%, 100% { transform: scaleX(1); opacity: 0.8; } 50% { transform: scaleX(0.78); opacity: 0.45; } }

/* --- tilt + glare --- */
.sys-live-box, .rp-main, .rp-acct, .mh-stat { position: relative; transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.28s ease; }
.sys-live-box::after, .rp-main::after, .rp-acct::after, .mh-stat::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.25s ease; background: radial-gradient(200px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.17), transparent 62%); }
.tilt-on { transform: perspective(620px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(12px); transition: transform 0.08s linear; box-shadow: 0 18px 34px rgba(0, 0, 0, 0.5), 0 0 22px rgba(240, 185, 11, 0.16); z-index: 4; }
.tilt-on::after { opacity: 1; }

/* --- big numbers get depth --- */
.real-cockpit .rp-big { text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6), 0 2px 0 rgba(0, 0, 0, 0.5), 0 3px 0 rgba(0, 0, 0, 0.4), 0 6px 10px rgba(0, 0, 0, 0.5), 0 0 20px currentColor; }
.real-pnl-strip { box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 40px rgba(240, 185, 11, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.07); }
.rp-slot { box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.10); }
.rp-slot.is-active { box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5), 0 0 14px rgba(240, 185, 11, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.18); }

/* --- rising entrance (from-state only; nothing stays hidden) --- */
@media (prefers-reduced-motion: no-preference) {
  #view-home:not([hidden]) .mkt-hero { animation: v90-rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
  #view-home:not([hidden]) .real-cockpit > * { animation: v90-rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
  #view-home:not([hidden]) .real-cockpit > :nth-child(1) { animation-delay: 0.12s; } #view-home:not([hidden]) .real-cockpit > :nth-child(2) { animation-delay: 0.22s; } #view-home:not([hidden]) .real-cockpit > :nth-child(3) { animation-delay: 0.32s; }
  #view-home:not([hidden]) .demo-zone { animation: v90-rise 0.8s 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
}
@keyframes v90-rise { from { opacity: 0; transform: perspective(900px) translateY(34px) rotateX(10deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .brand-logo, .mh-coin-spin, .mh-over .mh-diamond, .mh-coin-shadow { animation: none; } .mh-coin-spin { transform: rotateX(-12deg) rotateY(-24deg); } }

/* --- phone / small screens --- */
@media (max-width: 900px) { .mh-coin { display: none; } .mh-over { max-width: 70%; } }
@media (max-width: 760px) {
  .mkt-hero.v3d { height: 330px; border-radius: 18px; }
  .mh-shade { background: linear-gradient(180deg, rgba(7, 9, 15, 0.88) 0, rgba(7, 9, 15, 0.5) 42%, rgba(7, 9, 15, 0) 62%), linear-gradient(0deg, rgba(7, 9, 15, 0.9), rgba(7, 9, 15, 0) 22%); }
  .mh-over { left: 16px; top: 16px; max-width: calc(100% - 32px); gap: 10px; }
  .mkt-hero.v3d .mh-px strong { font-size: 2.1rem; }
  .mh-stat { padding: 6px 10px; } .mh-stat b { font-size: 0.82rem; }
  .mh-bar { padding: 0 10px; }
}

/* --- v91 (25 Oct 2026, user): COIN PEEK popup (live Binance chart on coin-name hover) --- */
.mtf-symbol { cursor: zoom-in; }
.coin-peek { position: fixed; z-index: 400; width: 420px; max-width: calc(100vw - 16px); padding: 10px 12px 8px; border-radius: 16px; background: linear-gradient(180deg, rgba(24, 30, 44, 0.97), rgba(11, 14, 22, 0.98)); border: 1px solid rgba(240, 185, 11, 0.4); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.7), 0 0 36px rgba(240, 185, 11, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.08); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); animation: cp-in 0.16s cubic-bezier(0.2, 0.8, 0.2, 1); transform-origin: top left; }
@keyframes cp-in { from { opacity: 0; transform: perspective(700px) rotateX(-10deg) scale(0.94); } to { opacity: 1; transform: none; } }
.cp-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.cp-sym { font-size: 1rem; font-weight: 800; }
.cp-px { font-weight: 800; font-variant-numeric: tabular-nums; color: #fff0b8; }
.cp-chg { white-space: nowrap; font-size: 0.74rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cp-chg.up, .cp-info.up { color: var(--green); } .cp-chg.dn, .cp-info.dn { color: var(--red); }
.cp-tf { margin-left: auto; display: inline-flex; gap: 3px; }
.cp-tf button { padding: 2px 9px; font-size: 0.7rem; border-radius: 7px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.05); color: var(--text-muted); cursor: pointer; }
.cp-tf button.on { color: #ffe9a3; border-color: rgba(240, 185, 11, 0.6); background: rgba(240, 185, 11, 0.16); }
.cp-open { color: var(--text-muted); text-decoration: none; font-size: 0.95rem; padding: 0 2px; } .cp-open:hover { color: var(--gold-soft); }
.cp-cv { display: block; width: 100%; height: 210px; border-radius: 10px; background: rgba(0, 0, 0, 0.28); }
.cp-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font-size: 0.68rem; color: var(--text-muted); }
.cp-info { font-weight: 700; }
.cp-live { display: inline-flex; align-items: center; gap: 6px; letter-spacing: 0.08em; text-transform: uppercase; } .cp-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: mh-pulse 1.8s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .coin-peek, .cp-live i { animation: none; } }

/* --- v92 (25 Oct 2026, user's idea): BTC EXPRESS page - BTC engine + 12 carriages --- */
.bx-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.08em; }
.bx-switch input { position: absolute; opacity: 0; pointer-events: none; }
.bx-switch-track { position: relative; width: 38px; height: 20px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.16); transition: background 0.2s; }
.bx-switch-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #cfd5e3; transition: transform 0.2s, background 0.2s; }
.bx-switch input:checked + .bx-switch-track { background: rgba(34, 197, 94, 0.35); border-color: rgba(34, 197, 94, 0.7); }
.bx-switch input:checked + .bx-switch-track::after { transform: translateX(18px); background: #22c55e; }
.bx-switch input:focus-visible + .bx-switch-track { outline: 2px solid var(--gold); outline-offset: 2px; }
.bx-train { display: flex; flex-direction: column; gap: 10px; }
.bx-loco { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 14px 18px; border-radius: 16px; border: 1px solid rgba(240, 185, 11, 0.4); background: linear-gradient(135deg, rgba(240, 185, 11, 0.16), rgba(255, 255, 255, 0.025) 55%), rgba(12, 16, 25, 0.9); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.09); }
.bx-loco.bx-up { border-color: rgba(34, 197, 94, 0.6); background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(255, 255, 255, 0.02) 55%), rgba(12, 16, 25, 0.9); }
.bx-loco.bx-down { border-color: rgba(239, 68, 68, 0.6); background: linear-gradient(135deg, rgba(239, 68, 68, 0.18), rgba(255, 255, 255, 0.02) 55%), rgba(12, 16, 25, 0.9); }
.bx-loco-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; }
.bx-loco-head b { font-size: 1.5rem; font-weight: 900; letter-spacing: 0.02em; }
.bx-loco-head strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; color: #fff0b8; }
.bx-loco-tag { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.2em; padding: 3px 8px; border-radius: 6px; background: linear-gradient(135deg, #ffd75e, #e8a600); color: #1a1405; }
.bx-mode { font-weight: 800; letter-spacing: 0.04em; padding: 3px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); }
.bx-up .bx-mode { background: rgba(34, 197, 94, 0.2); color: #4ade80; } .bx-down .bx-mode { background: rgba(239, 68, 68, 0.2); color: #f87171; } .bx-flat .bx-mode { color: #fbbf24; }
.bx-loco-stats { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 0.82rem; color: var(--text-muted); }
.bx-loco-stats b { color: var(--ink); font-variant-numeric: tabular-nums; } .bx-why { margin-left: auto; }
.bx-chip { display: inline-block; font-size: 0.7rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); }
.bx-chip.ok { background: rgba(34, 197, 94, 0.18); color: #4ade80; } .bx-chip.warn { background: rgba(245, 158, 11, 0.2); color: #fbbf24; }
.bx-rail { height: 6px; margin: 0 6px; border-radius: 3px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.28) 0 14px, transparent 14px 28px); opacity: 0.55; }
.bx-rail.rail-up { background-image: repeating-linear-gradient(90deg, rgba(74, 222, 128, 0.7) 0 14px, transparent 14px 28px); animation: bx-roll 1s linear infinite; }
.bx-rail.rail-dn { background-image: repeating-linear-gradient(90deg, rgba(248, 113, 113, 0.7) 0 14px, transparent 14px 28px); animation: bx-roll 1s linear infinite reverse; }
@keyframes bx-roll { to { background-position: 28px 0; } }
.bx-cars { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.bx-car { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.bx-car b { font-size: 0.95rem; cursor: zoom-in; } .bx-car span { font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); } .bx-car strong { font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.bx-car.in.win { border-color: rgba(34, 197, 94, 0.6); background: rgba(34, 197, 94, 0.1); } .bx-car.in.win strong { color: var(--green); }
.bx-car.in.loss { border-color: rgba(239, 68, 68, 0.6); background: rgba(239, 68, 68, 0.1); } .bx-car.in.loss strong { color: var(--red); }
.bx-car.skip { border-style: dashed; border-color: rgba(245, 158, 11, 0.5); } .bx-car.wait { opacity: 0.75; }
.bx-bk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); margin-bottom: 6px; background: rgba(255, 255, 255, 0.03); }
.bx-bk.long { border-left: 4px solid var(--green); } .bx-bk.short { border-left: 4px solid var(--red); } .bx-bk-dir { font-weight: 800; } .bx-bk-pnl { margin-left: auto; font-size: 1.15rem; font-weight: 800; }
.bx-set-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.bx-set { display: flex; flex-direction: column; gap: 4px; font-size: 0.74rem; color: var(--text-muted); } .bx-set input[type=number] { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.25); color: var(--ink); font: inherit; font-size: 0.9rem; }
.bx-set-chk { flex-direction: row; align-items: center; gap: 10px; }
.bx-set-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.bx-events { display: flex; flex-direction: column; gap: 2px; max-height: 340px; overflow: auto; }
.bx-ev { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding: 5px 8px; border-radius: 8px; font-size: 0.8rem; background: rgba(255, 255, 255, 0.02); }
.bx-ev.ok { border-left: 3px solid var(--green); } .bx-ev.warn { border-left: 3px solid var(--amber); } .bx-ev-t { color: var(--text-muted); font-variant-numeric: tabular-nums; } .bx-ev-s { font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .bx-rail.rail-up, .bx-rail.rail-dn { animation: none; } }
@media (max-width: 760px) { .bx-why { margin-left: 0; } .bx-cars { grid-template-columns: repeat(3, 1fr); } }

/* --- BTC Express hero: live BTC candles --- */
.bx-hero { position: relative; margin-bottom: 14px; padding: 14px 16px 10px; border-radius: 22px; border: 1px solid rgba(240, 185, 11, 0.32); background: radial-gradient(800px 260px at 85% 120%, rgba(240, 185, 11, 0.16), transparent 70%), radial-gradient(600px 240px at 0% -30%, rgba(99, 102, 241, 0.24), transparent 65%), linear-gradient(180deg, #080b13, #0c1220 70%, #090c14); box-shadow: 0 28px 64px rgba(0, 0, 0, 0.55), 0 0 60px rgba(240, 185, 11, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.bx-hero-top { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 6px; }
.bx-hero-id { display: flex; align-items: center; gap: 10px; } .bx-hero-id b { font-size: 1.1rem; font-weight: 800; } .bx-hero-id b small { color: var(--text-muted); font-weight: 600; font-size: 0.8rem; }
.bx-hero-px { display: flex; align-items: baseline; gap: 12px; }
.bx-hero-px strong { font-size: clamp(1.8rem, 3.6vw, 2.8rem); font-weight: 900; letter-spacing: -0.02em; color: #fff6d6; font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 #d9a313, 0 2px 0 #b98906, 0 3px 0 #946c05, 0 8px 16px rgba(0, 0, 0, 0.6), 0 0 28px rgba(240, 185, 11, 0.32); }
.bx-hero-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; font-size: 0.8rem; color: var(--text-muted); } .bx-hero-meta b { color: var(--ink); font-variant-numeric: tabular-nums; }
.bx-hero-tf { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.bx-hero-tf button { padding: 3px 12px; font-size: 0.74rem; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.05); color: var(--text-muted); cursor: pointer; }
.bx-hero-tf button.on { color: #ffe9a3; border-color: rgba(240, 185, 11, 0.65); background: rgba(240, 185, 11, 0.16); }
.bx-hero-live { display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.bx-hero-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: mh-pulse 1.8s ease-out infinite; }
.bx-hero-chart { display: block; width: 100%; height: 320px; }
.bx-hero-legend { padding: 2px 4px 0; }
@media (max-width: 760px) { .bx-hero { padding: 12px 10px 8px; border-radius: 18px; } .bx-hero-chart { height: 260px; } .bx-hero-tf { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .bx-hero-live i { animation: none; } }

/* v97: position size (margin x leverage) under the coin name in the trade tables */
.tg-size { font-size: 11px; font-weight: 600; color: #8b93a7; letter-spacing: .02em; margin-top: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ===== v99 CALENDAR FLIP CARDS (25 Oct 2026, user): big date + day on the face; hover (tap on a phone) flips the card to that day's profit / loss ===== */
.cal-cell.cal-flip { background: transparent; border: 0; overflow: visible; perspective: 900px; cursor: default; outline: none; padding: 0; }
.cal-flip .cal-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2, .75, .25, 1); }
.cal-flip:hover .cal-inner, .cal-flip.flipped .cal-inner, .cal-flip:focus-visible .cal-inner { transform: rotateY(180deg); }
.cal-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border); -webkit-backface-visibility: hidden; backface-visibility: hidden; min-width: 0; overflow: hidden; }
.cal-back { transform: rotateY(180deg); }
.cal-flip.cal-pos .cal-face { background: rgba(34, 197, 94, 0.13); border-color: rgba(34, 197, 94, 0.45); }
.cal-flip.cal-neg .cal-face { background: rgba(239, 68, 68, 0.13); border-color: rgba(239, 68, 68, 0.45); }
.cal-flip.cal-today-cell .cal-face { box-shadow: 0 0 0 2px var(--accent) inset; }
.cal-bigday { font-size: clamp(1.5rem, 4.4vw, 3.1rem); font-weight: 800; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--text); }
.cal-wd { font-size: clamp(0.62rem, 1.3vw, 0.85rem); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.cal-bd { font-size: clamp(0.58rem, 1.1vw, 0.72rem); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.cal-flip .cal-fig { padding-top: 0; }
.cal-flip.cal-pos .cal-fig { color: var(--green); }
.cal-flip.cal-neg .cal-fig { color: var(--red); }
.cal-sub, .cal-nil { font-size: clamp(0.6rem, 1.1vw, 0.75rem); font-weight: 600; color: var(--text-muted); }
.cal-flip:focus-visible .cal-face { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 640px) { .cal-bigday { font-size: 1.25rem; } .cal-wd { font-size: 0.55rem; letter-spacing: 0.08em; } .cal-flip .cal-fig { font-size: 0.7rem; } }
@media (prefers-reduced-motion: reduce) { .cal-flip .cal-inner { transition: none; } }

/* ===================================================================================================================
   v100 (26 Oct 2026, user): HOME REAL COCKPIT REDESIGN - wide, roomy blocks. Hero untouched. The one-screen squeeze (v81) is gone:
   REAL ACCOUNT card -> one big box per system -> Real Trades (entry mode + gates + a roomy table). Pure styling + one new Size column.
   =================================================================================================================== */
.real-cockpit { gap: 26px; }
.real-cockpit.is-fit { height: auto !important; }
.real-cockpit > .board-card { position: relative; padding: 24px 28px 26px; border-radius: 22px; gap: 20px; border: 1px solid var(--line); background: linear-gradient(165deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012) 55%), rgba(10, 13, 22, 0.78); box-shadow: 0 18px 44px -22px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.02) inset; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.real-cockpit .board-real-active, .real-cockpit .board-real-trades { margin: 0; border-radius: 22px; border-color: var(--line); }
.real-cockpit .board-card-head { align-items: center; gap: 12px 24px; flex-wrap: wrap; }
.real-cockpit .board-real-active .board-card-head h2, .real-cockpit .board-real-trades .board-card-head h2 { margin: 0 0 4px; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.01em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.real-cockpit .board-card-head .panel-sub, .real-cockpit .board-real-active .experimental-tag { display: block; font-size: 0.82rem; line-height: 1.45; color: var(--text-muted); max-width: 70ch; }
.real-cockpit .board-real-active .experimental-tag, .real-cockpit .board-real-trades .experimental-tag { display: none; }
.real-cockpit .rc-total { font-size: 1.05rem; font-weight: 800; }

/* --- 1. REAL ACCOUNT --- */
.real-cockpit .real-pnl-strip { padding: 24px 28px 28px; gap: 0; border-radius: 22px; }
.real-cockpit .rp-head { gap: 10px 14px; align-items: center; }
.real-cockpit .rp-head .btn-ghost, .real-cockpit .rp-head .btn-danger { padding: 10px 18px; font-size: 0.85rem; border-radius: 12px; font-weight: 700; }
.real-cockpit .rp-head .real-mode-live { font-size: 0.95rem; padding: 7px 18px; letter-spacing: 0.1em; }
.real-cockpit #rpMaster { font-size: 0.85rem; padding: 7px 16px; }
.real-cockpit #rpOpenCount { font-size: 0.95rem; font-weight: 700; color: var(--ink); padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); }
.real-cockpit .rp-body { display: grid; grid-template-columns: minmax(340px, 1.05fr) minmax(0, 2fr); gap: 18px; margin-top: 22px; align-items: stretch; }
.real-cockpit .real-pnl-strip .rp-main { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 22px 24px; border-radius: 18px; min-width: 0; flex: none; }
.real-cockpit .rp-label { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.real-cockpit .rp-big { font-size: clamp(2.6rem, 4.6vw, 4rem); line-height: 1; font-weight: 800; letter-spacing: -0.03em; text-shadow: 0 0 34px currentColor; margin: 2px 0 4px; }
.real-cockpit .rp-main .rp-slots { margin: 0; gap: 8px; }
.real-cockpit .rp-slot { padding: 7px 16px; font-size: 0.82rem; font-weight: 700; }
.real-cockpit .real-pnl-strip .rp-acct { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; flex: none; max-width: none; min-width: 0; padding: 0; border: 0; background: none; align-content: stretch; }
.real-cockpit .rp-tile { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; padding: 20px 22px; border-radius: 18px; background: rgba(6, 9, 18, 0.55); border: 1px solid var(--line); min-width: 0; }
.real-cockpit .rp-tile-margin { background: linear-gradient(150deg, rgba(240, 185, 11, 0.13), rgba(240, 185, 11, 0.02) 70%), rgba(6, 9, 18, 0.55); border-color: rgba(240, 185, 11, 0.32); }
.real-cockpit .rp-margin-row, .real-cockpit .rp-val-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.real-cockpit .rp-margin { font-size: clamp(1.9rem, 3vw, 2.7rem); line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.real-cockpit .rp-val { font-size: clamp(1.35rem, 2vw, 1.9rem); line-height: 1.1; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.real-cockpit .rp-unit { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; color: var(--text-muted); }
.real-cockpit .rp-acct.is-stale { opacity: 0.6; }
@media (max-width: 1100px) { .real-cockpit .rp-body { grid-template-columns: 1fr; } }

/* --- 2. REAL ACTIVE TRADES: one big box per system --- */
.real-cockpit .sys-live-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.real-cockpit .sys-live-box { position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 14px; min-height: 150px; padding: 18px 20px 18px; border-radius: 18px; background: rgba(6, 9, 18, 0.5); border: 1px solid var(--line); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.real-cockpit .sys-live-box:hover { transform: translateY(-3px); border-color: rgba(240, 185, 11, 0.4); box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.8); }
.real-cockpit .sys-live-box.slb-up { border-color: rgba(34, 197, 94, 0.5); background: linear-gradient(160deg, rgba(34, 197, 94, 0.14), rgba(34, 197, 94, 0.02) 65%), rgba(6, 9, 18, 0.55); }
.real-cockpit .sys-live-box.slb-empty { justify-content: flex-start; gap: 8px; opacity: 0.88; }
.real-cockpit .slb-main { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.real-cockpit .slb-name { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.005em; }
.real-cockpit .slb-label { font-size: 0.72rem; letter-spacing: 0.1em; }
.real-cockpit .slb-pnl { font-size: clamp(1.7rem, 2.4vw, 2.2rem); font-weight: 800; line-height: 1.05; flex-basis: auto; font-variant-numeric: tabular-nums; }
.real-cockpit .slb-pl { align-self: flex-start; margin: 0; padding: 4px 11px; font-size: 0.72rem; font-weight: 700; }
.real-cockpit .btn-close-all-real { width: 100%; padding: 10px 14px; font-size: 0.85rem; font-weight: 700; border-radius: 12px; }
.real-cockpit .sys-live-box.slb-empty .slb-main .muted { font-size: 0.85rem; }

/* --- 3. REAL TRADES --- */
.real-cockpit .board-real-trades { padding: 24px 28px 28px; gap: 18px; }
.real-cockpit .board-real-trades .board-card-head { flex-wrap: wrap; align-items: flex-start; }
.real-cockpit .rt-actions { flex: 1 1 100%; display: flex; flex-direction: column; align-items: stretch; gap: 14px; justify-content: flex-start; }
.real-cockpit .rt-mode { display: grid; grid-template-columns: auto repeat(4, minmax(0, 1fr)); align-items: center; gap: 6px; padding: 6px; border-radius: 16px; background: rgba(6, 9, 18, 0.55); border: 1px solid var(--line); width: 100%; max-width: 860px; }
.real-cockpit .rt-mode-title { display: block; padding: 0 16px 0 12px; font-size: 0.74rem; letter-spacing: 0.14em; color: var(--text-muted); white-space: nowrap; }
.real-cockpit .rt-mode-opt { justify-content: center; padding: 12px 14px; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.06em; border-radius: 12px; }
.real-cockpit .real-gates-line { gap: 8px 10px; margin: 0; font-size: 0.85rem; }
.real-cockpit .real-gates-line .gate-chip { padding: 8px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.045); border: 1px solid var(--line); font-size: 0.82rem; line-height: 1.35; }
.real-cockpit .real-gates-line .gate-chip b { color: var(--gold-soft); }
.real-cockpit .board-real-trades .table-wrap { overflow-x: auto; overflow-y: visible; }
.real-cockpit .sel-bar { padding: 10px 16px; margin-bottom: 8px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }
.real-cockpit .sel-bar .btn-close-selected { padding: 8px 16px; font-size: 0.82rem; border-radius: 10px; }
.real-cockpit .queue-box { padding: 16px 20px; border-radius: 16px; font-size: 0.95rem; }
.real-cockpit .tg-size { display: inline-block; margin: 0; padding: 4px 11px; border-radius: 999px; font-size: 0.85rem; font-weight: 800; letter-spacing: 0; color: var(--ink); background: rgba(240, 185, 11, 0.12); border: 1px solid rgba(240, 185, 11, 0.3); }
.tg-size { display: inline-block; margin: 0; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; color: var(--ink); background: rgba(240, 185, 11, 0.1); border: 1px solid rgba(240, 185, 11, 0.28); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 1000px) {
  .real-cockpit .board-real-trades .data-table { border-collapse: separate; border-spacing: 0 10px; font-size: 0.95rem; width: 100%; }
  .real-cockpit .board-real-trades .data-table thead th { position: static; background: transparent; padding: 0 12px 4px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); border: 0; white-space: nowrap; }
  .real-cockpit .board-real-trades .data-table tbody td { padding: 15px 12px; line-height: 1.35; background: rgba(255, 255, 255, 0.035); border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); vertical-align: middle; transition: background .2s ease; }
  .real-cockpit .board-real-trades .data-table tbody td:first-child { border-left: 1px solid var(--line); border-radius: 14px 0 0 14px; }
  .real-cockpit .board-real-trades .data-table tbody td:last-child { border-right: 1px solid var(--line); border-radius: 0 14px 14px 0; }
  .real-cockpit .board-real-trades .data-table tbody tr:hover td { background: rgba(255, 255, 255, 0.07); }
  .real-cockpit .board-real-trades .data-table td.c-type { max-width: 150px; overflow: visible; white-space: normal; font-size: 0.85rem; }
  .real-cockpit .board-real-trades .data-table td.c-status { min-width: 190px; white-space: normal; font-size: 0.85rem; }
  .real-cockpit .board-real-trades .data-table td.c-age { white-space: nowrap; }
  .real-cockpit .board-real-trades .data-table th { white-space: normal; line-height: 1.25; }
  .real-cockpit .board-real-trades .data-table .mtf-symbol { font-size: 1.12rem; font-weight: 800; letter-spacing: -0.005em; }
  .real-cockpit .board-real-trades .data-table .mtf-price { font-variant-numeric: tabular-nums; font-weight: 600; }
  .real-cockpit .board-real-trades .data-table .pos-actions-in { gap: 8px; }
  .real-cockpit .board-real-trades .data-table .pos-actions-in .btn-ghost { padding: 8px 14px; font-size: 0.8rem; font-weight: 700; border-radius: 10px; }
  .real-cockpit .board-real-trades .data-table tr.row-selected td { background: rgba(99, 102, 241, 0.14); border-color: rgba(99, 102, 241, 0.4); }
}
@media (max-width: 760px) {
  .real-cockpit { gap: 16px; }
  .real-cockpit > .board-card, .real-cockpit .real-pnl-strip, .real-cockpit .board-real-trades { padding: 16px 14px 18px; border-radius: 18px; }
  .real-cockpit .rp-tile, .real-cockpit .real-pnl-strip .rp-main { padding: 14px 16px; }
  .real-cockpit .rt-mode { grid-template-columns: 1fr 1fr; }
  .real-cockpit .rt-mode-title { grid-column: 1 / -1; padding: 4px 10px; }
  .real-cockpit .sys-live-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .real-cockpit .sys-live-box { min-height: 130px; padding: 14px; }
}
@media (prefers-reduced-motion: reduce) { .real-cockpit .sys-live-box { transition: none; } .real-cockpit .sys-live-box:hover { transform: none; } }
/* v100 polish: equal-height account tiles, 4 x 2 system boxes */
.real-cockpit .real-pnl-strip .rp-acct { align-items: stretch; grid-auto-rows: 1fr; }
.real-cockpit .rp-tile { height: 100%; justify-content: center; gap: 14px; }
.real-cockpit .sys-live-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .real-cockpit .sys-live-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.real-cockpit .sys-live-box { min-height: 138px; }
.real-cockpit .board-real-trades .data-table tbody td.c-type, .real-cockpit .board-real-trades .data-table tbody td.c-age { box-shadow: none; filter: none; }
.real-cockpit .sys-live-box { min-height: 120px; }
@media (min-width: 1000px) {
  .real-cockpit .board-real-trades .data-table td.c-type { max-width: 190px; min-width: 120px; }
  .real-cockpit .board-real-trades .data-table td.c-status { min-width: 170px; }
  .real-cockpit .board-real-trades .data-table tbody td { padding: 14px 10px; }
  .real-cockpit .board-real-trades .data-table thead th { padding: 0 10px 4px; }
}
@media (min-width: 1000px) and (max-width: 1440px) { .real-cockpit .board-real-trades .data-table .c-type { display: none; } .real-cockpit .board-real-trades .data-table { font-size: 0.9rem; } }
.real-cockpit .board-card-head .panel-sub { overflow-wrap: anywhere; }
@media (min-width: 1000px) and (max-width: 1340px) {
  .real-cockpit > .board-card, .real-cockpit .real-pnl-strip, .real-cockpit .board-real-trades { padding-left: 20px; padding-right: 20px; }
  .real-cockpit .board-real-trades .data-table tbody td { padding: 12px 6px; }
  .real-cockpit .board-real-trades .data-table thead th { padding: 0 6px 4px; letter-spacing: 0.06em; }
  .real-cockpit .board-real-trades .data-table td.c-status { min-width: 140px; }
  .real-cockpit .board-real-trades .data-table .pos-actions-in .btn-ghost { padding: 7px 10px; }
}