/* VELANTHOR Mobile Fix Sheet — GODMODE v4 */

/* ===== GODMODE MOBILE v4 ===== */

/* ════════════════════════════════════════════════════════════════
   GODMODE MOBILE v4 — Full parity Desktop ↔ Mobile
   Strategy: Fix every broken inline-grid, every overflow, every
   unreadable font, every cramped touch target.
   ════════════════════════════════════════════════════════════════ */

/* ── 0. GLOBAL SAFETY NET ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { overflow-x: hidden; }
img, canvas, iframe, video, svg { max-width: 100%; }

/* ── 1. SAFE-AREA (iPhone notch / home-bar) ─────────────────────── */
body {
  padding-left:  env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.topbar {
  padding-left:  max(10px, env(safe-area-inset-left));
  padding-right: max(10px, env(safe-area-inset-right));
}

/* ── 2. ALERT CENTER — doesn't cover content on mobile ─────────── */
@media (max-width: 768px) {
  #alert-center {
    top: auto !important;
    bottom: 16px !important;
    right: 8px !important;
    left: 8px !important;
    max-width: calc(100vw - 16px) !important;
    pointer-events: none;
    z-index: 9999 !important;
  }
  #alert-center > * { pointer-events: auto; }
}

/* ── 3. TOPBAR — proper mobile layout ──────────────────────────── */
@media (max-width: 768px) {
  .topbar {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    height: auto !important;
    min-height: 52px !important;
    gap: 6px !important;
    padding: 6px 10px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
  }
  .logo { font-size: 13px !important; letter-spacing: 2px !important; flex-shrink: 0; }
  .coin-select-wrap { flex-shrink: 0 !important; }
  .ticker-strip {
    order: 10 !important;
    flex: 0 0 100% !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    scrollbar-width: none !important;
    padding: 4px 0 !important;
    border-top: 1px solid var(--b0) !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .ticker-strip::-webkit-scrollbar { display: none !important; }
  .controls { margin-left: auto !important; gap: 4px !important; display: flex !important; align-items: center !important; }
  .ctrl-btn { padding: 5px 8px !important; font-size: 11px !important; min-height: 36px !important; }
  #logoutBtn .btn-text { display: none !important; }
  .status-dot { display: none !important; }
  #themeLabel { display: none !important; }
  /* Nav dropdown: full width on mobile */
  .dropdown-menu {
    position: fixed !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-height: 75vh !important;
    overflow-y: auto !important;
    border-radius: 0 0 12px 12px !important;
    z-index: 9998 !important;
    -webkit-overflow-scrolling: touch !important;
  }
}
@media (max-width: 400px) {
  .logo { font-size: 11px !important; letter-spacing: 1.5px !important; }
  .coin-select-wrap select { max-width: 80px !important; font-size: 11px !important; }
}

/* ── 4. MAIN LAYOUT GRID ────────────────────────────────────────── */
.wrap {
  width: min(100%, 1400px) !important;
  margin-inline: auto !important;
  padding: 16px !important;
  overflow-x: hidden !important;
  min-width: 0 !important;
}
@media (max-width: 1024px) { .wrap { padding: 12px !important; } }
@media (max-width: 768px)  { .wrap { padding: 8px !important; } }
@media (max-width: 480px)  { .wrap { padding: 6px !important; } }

/* All grid classes: fluid on mobile */
@media (max-width: 768px) {
  .g4  { grid-template-columns: 1fr !important; }
  .g3  { grid-template-columns: 1fr !important; }
  .g22 { grid-template-columns: 1fr !important; }
  .g2  { grid-template-columns: 1fr !important; }
  .panel { padding: 14px !important; overflow-x: hidden !important; }
}
@media (max-width: 1024px) {
  .g4 { grid-template-columns: 1fr 1fr !important; }
  .g4 .span3 { grid-column: 1 / -1 !important; }
}
@media (max-width: 480px) {
  .panel { padding: 12px !important; border-radius: 6px !important; }
  .g3 { grid-template-columns: 1fr !important; }
}

/* ── 5. SMC CHART SECTION ───────────────────────────────────────── */
/* Chart+Metrics: stack on mobile */
@media (max-width: 768px) {
  #sec-chart { grid-template-columns: 1fr !important; }
  #sec-chart .span3 { grid-column: 1 !important; }
  #smc-chart-wrap { min-height: 260px !important; height: auto !important; }
  #smc-canvas { height: 260px !important; }
}
@media (max-width: 480px) {
  #smc-chart-wrap { min-height: 220px !important; }
  #smc-canvas { height: 220px !important; }
}

/* ── 6. CHART LEGEND — don't bleed off-screen ───────────────────── */
@media (max-width: 768px) {
  #smc-chart-wrap > div[style*="bottom:38px"],
  #smc-chart-wrap > div[style*="bottom: 38px"] {
    bottom: 44px !important;
    left: 6px !important;
    gap: 5px !important;
    flex-wrap: wrap !important;
    max-width: calc(100% - 12px) !important;
  }
  .chart-legend-item { font-size: 10px !important; white-space: nowrap !important; }
}

/* ── 7. BIAS SECTION ────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Main display grid: stack icon + factors */
  #sec-bias > div > div[style*="grid-template-columns:auto 1fr"],
  #sec-bias [style*="grid-template-columns:auto 1fr;gap:16px"] {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 12px !important;
  }
  /* Factor scores: 3 columns instead of 5 */
  #sec-bias [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns:repeat(5,1fr)"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  /* Preset header: stack label above buttons */
  #sec-bias > div > div[style*="display:flex;align-items:center;justify-content:space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  /* Preset buttons row: scroll horizontally if needed */
  #sec-bias [style*="display:flex;gap:6px;align-items:center"] {
    flex-wrap: wrap !important;
    gap: 5px !important;
  }
  /* Bias recommendation: smaller text, full width */
  #bias-rec { font-size: 11px !important; line-height: 1.65 !important; }
  /* Factors grid: 2 columns */
  #bias-factors { grid-template-columns: 1fr 1fr !important; }
  /* Confidence icon: center */
  #bias-icon { margin: 0 auto 6px !important; }
}
@media (max-width: 480px) {
  #sec-bias [style*="grid-template-columns:repeat(5,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  #bias-factors { grid-template-columns: 1fr !important; }
  .bias-score-card { padding: 8px 6px !important; }
}

/* ── 8. INLINE 1fr/1fr GRIDS: stack on mobile ──────────────────── */
@media (max-width: 768px) {
  /* Any 2-col inline grid: stack */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* 2-col Charts */
  [style*="grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px"],
  [style*="grid-template-columns:1fr 1fr;gap:8px"],
  [style*="grid-template-columns:1fr 1fr;gap:16px;margin-bottom"] {
    grid-template-columns: 1fr !important;
  }
  /* 3-col inline grids: stack */
  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  }
  /* 4-col → 2-col */
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Weekday heatmap: 7 → scroll */
  #weekdayHeatmap[style*="grid-template-columns:repeat(7,1fr)"] {
    grid-template-columns: repeat(7, minmax(36px, 1fr)) !important;
    overflow-x: auto !important;
  }
}

/* ── 9. ANALYTICS SECTION ───────────────────────────────────────── */
@media (max-width: 768px) {
  /* Header padding */
  #sec-analytics > div:first-child > div[style*="padding:22px 28px"],
  #sec-analytics > div:first-child > div[style*="padding: 22px 28px"] {
    padding: 14px 12px !important;
  }
  /* Stats bar: horizontal scroll */
  [style*="display:flex;gap:0;margin-top:16px"] {
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }
  [style*="display:flex;gap:0;margin-top:16px"]::-webkit-scrollbar { display: none !important; }
  [style*="display:flex;gap:0;margin-top:16px"] > div {
    min-width: 80px !important;
    flex-shrink: 0 !important;
  }
  /* Calendar summary: 2×2 */
  [style*="grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Charts 2-up inside analytics/backtest */
  #sec-analytics [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Daily cal: compact cells */
  #daily-cal-grid > div { padding: 4px 2px !important; min-height: 36px !important; }
  /* Weekday heatmap: scrollable */
  #weekdayHeatmap { overflow-x: auto !important; }
}

/* ── 10. BACKTEST SECTION ───────────────────────────────────────── */
@media (max-width: 768px) {
  /* Strategy cards: stack */
  [style*="grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px"],
  #tab-backtest [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  /* Drawdown label row: stack */
  #sec-analytics [style*="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
  /* Backtest tab padding */
  #tab-backtest { padding: 14px 12px !important; }
  #tab-replay   { padding: 14px 12px !important; }
  /* Tab header buttons: equal width */
  #sec-replay > div:first-child {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }
  #sec-replay > div:first-child button {
    padding: 12px 8px !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  /* Stats grid */
  #backtest-stats [style*="grid-template-columns:repeat(auto-fit"] {
    grid-template-columns: 1fr 1fr !important;
  }
  /* Backtest perf by symbol */
  #symbolBreakdown { max-height: none !important; }
}
@media (max-width: 480px) {
  #tab-backtest > div:first-child > div[style*="grid-template-columns:repeat(auto-fit"] {
    grid-template-columns: 1fr !important;
  }
  /* All 4-stat rows */
  [style*="grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  [style*="grid-template-columns:repeat(4,1fr);gap:8px"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── 11. REPLAY SECTION ─────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Controls: label+input aligned grid */
  .replay-controls {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    gap: 6px 10px !important;
    align-items: center !important;
  }
  .replay-controls > button,
  .replay-controls > span { grid-column: 1 / -1 !important; }
  .replay-speed { grid-column: 1 / -1 !important; display: flex !important; gap: 4px !important; }
  .spd-btn { flex: 1 !important; }
  /* Canvas height */
  #replayChart { height: 220px !important; max-height: 220px !important; }
  /* Trade buttons: 2×2 grid */
  #replayTradePanel {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
  #replayTradePanel button { min-width: 0 !important; width: 100% !important; }
  /* Equity display in trade panel: full row */
  #replayTradePanel > div[style*="white-space:nowrap"] {
    grid-column: 1 / -1 !important;
    text-align: center !important;
  }
  /* Live PnL bar: wrap nicely */
  #replay-live-pnl {
    flex-wrap: wrap !important;
    font-size: 11px !important;
    gap: 4px !important;
    padding: 6px 10px !important;
  }
  #replay-live-pnl > span { flex-shrink: 0 !important; }
}

/* ── 12. TRADE JOURNAL ──────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Input row: wrap to 2-col grid */
  #sec-journal > div[style*="display:flex;gap:8px;flex-wrap:wrap"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
  #sec-journal .inp, #sec-journal .sel {
    width: 100% !important;
    min-height: 40px !important;
    font-size: 13px !important; /* prevents iOS zoom */
  }
  /* Buttons: 3-column */
  #sec-journal .btn-wh,
  #sec-journal .btn-ghost,
  #sec-journal .btn-danger {
    min-height: 40px !important;
    font-size: 12px !important;
  }
  /* Table: horizontal scroll */
  #sec-journal .ovx {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  table { min-width: 560px; width: max-content; }
  .ttbl th, .ttbl td { font-size: 11px !important; padding: 6px 5px !important; white-space: nowrap; }
  /* Summary stats row: wrap */
  #sec-journal > div[style*="margin-top:12px"] {
    flex-wrap: wrap !important;
    gap: 8px 20px !important;
  }
}
@media (max-width: 480px) {
  #sec-journal > div[style*="display:flex;gap:8px;flex-wrap:wrap"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── 13. ALERTS SECTION ─────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Alert mode bar: wrap */
  #sec-alerts > div:first-of-type > div[style*="display:flex;align-items:center;gap:10px"] {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  /* Alert rule rows: stacked */
  .alert-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    align-items: center !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid var(--b0) !important;
  }
  .alert-row .alert-type-label {
    width: 100% !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    color: var(--t-lo) !important;
    letter-spacing: 1px !important;
  }
  .alert-row .alert-condition,
  .alert-row .alert-type { min-height: 36px !important; font-size: 12px !important; }
  .alert-row .num-input-wrap { flex: 1 1 100px !important; }
  .alert-row .alert-value   { width: 100% !important; }
  .alert-row .alert-label   { flex: 1 1 100px !important; min-height: 36px !important; }
  #alertLog { font-size: 11px !important; }
}

/* ── 14. POSITION CALCULATOR ────────────────────────────────────── */
@media (max-width: 768px) {
  #sec-calc .g22 { grid-template-columns: 1fr !important; }
  .ccard { padding: 14px !important; }
  .ccard h2 { font-size: 16px !important; }
  .inp.w100 { font-size: 16px !important; } /* prevent iOS zoom */
}

/* ── 15. SMART MONEY LAYER PANELS ───────────────────────────────── */
@media (max-width: 1024px) {
  #sec-sml.g3 { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 768px) {
  #sec-sml.g3 { grid-template-columns: 1fr !important; }
  .sml-panel { padding: 12px !important; }
  .sml-event, .sml-event-title  { font-size: 11px !important; }
  .sml-event-detail, .sml-explain { font-size: 11px !important; }
}

/* ── 16. OI + FUNDING CHARTS ────────────────────────────────────── */
@media (max-width: 768px) {
  #oiChartCanvas, #fundingChartCanvas {
    max-height: 70px !important;
    height: 70px !important;
  }
}

/* ── 17. MULTI-CHART TV IFRAMES ─────────────────────────────────── */
@media (max-width: 768px) {
  /* TV iframe height: readable on mobile */
  [style*="height:300px;background:#0d0d12"],
  [style*="height: 300px; background: #0d0d12"] {
    height: 200px !important;
    min-height: 200px !important;
  }
  /* TF buttons bar: scrollable */
  .panel > div[style*="display:flex;gap:4px;margin-bottom:12px"] {
    overflow-x: auto !important;
    scrollbar-width: none !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
  }
}
@media (max-width: 480px) {
  [style*="height:300px;background:#0d0d12"],
  [style*="height: 300px; background: #0d0d12"] {
    height: 160px !important;
    min-height: 160px !important;
  }
}

/* ── 18. TOUCH TARGETS — min 44px (WCAG) ───────────────────────── */
@media (max-width: 768px) {
  button, a, select, input[type="checkbox"], input[type="radio"] {
    min-height: 36px;
  }
  /* Tight buttons are ok at 34px if they're in rows */
  .tf-btn, .ctrl-btn, .spd-btn, .preset-btn, .exch-btn,
  .draw-tool-btn, .auth-tab, .replay-btn,
  .num-step-btn { min-height: 34px !important; }
  .auth-btn-primary { min-height: 48px !important; }
  .auth-input { min-height: 48px !important; font-size: 16px !important; }
}

/* ── 19. NEWSLETTER ─────────────────────────────────────────────── */
@media (max-width: 600px) {
  .nl-form {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .nl-form input, .nl-form button {
    width: 100% !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
  }
  .nl-inner { padding: 24px 16px !important; }
  .nl-inner > div[style*="font-size:clamp"],
  .nl-inner > div[style*="42px"] {
    font-size: clamp(22px, 6vw, 34px) !important;
    letter-spacing: 3px !important;
  }
}

/* ── 20. FOOTER ─────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .footer { padding: 18px 14px !important; font-size: 11px !important; }
  .footer-links {
    gap: 10px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
}

/* ── 21. AUTH CARD ──────────────────────────────────────────────── */
#auth-overlay {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow-y: auto !important;
  padding: 16px !important;
  z-index: 10000 !important;
}
#auth-card {
  width: 100% !important;
  max-width: 480px !important;
  max-height: calc(100vh - 32px) !important;
  overflow-y: auto !important;
  margin: auto !important;
}
@media (max-width: 480px) {
  #auth-overlay { padding: 8px !important; }
  #auth-card { max-height: calc(100svh - 16px) !important; }
  #auth-card-body { padding: 18px 14px !important; }
  .auth-plans { flex-direction: column !important; gap: 10px !important; }
  .auth-plan { min-width: unset !important; width: 100% !important; }
  .pw-guarantee { flex-wrap: wrap !important; gap: 8px !important; justify-content: center !important; }
}

/* ── 22. STRATEGIES & TUTORIALS ────────────────────────────────── */
@media (max-width: 768px) {
  .sg { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 480px) {
  .sg { grid-template-columns: 1fr !important; }
  .si { padding: 12px 10px !important; }
  .si-name { font-size: 12px !important; }
  .si-desc { font-size: 11px !important; }
  .tut-item { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; }
  .tut-title { font-size: 12px !important; }
}

/* ── 23. GENERAL OVERFLOW PROTECTION ───────────────────────────── */
@media (max-width: 768px) {
  .panel, [id^="sec-"] { overflow-x: hidden !important; max-width: 100% !important; }
  iframe { max-width: 100% !important; width: 100% !important; }
  canvas { max-width: 100% !important; }
  /* Panel headings: don't let long text bleed */
  .stitle, .ssub, .mlabel, .mval { word-break: break-word; }
}

/* ── 24. FONT FLOORS — nothing below 11px on mobile ────────────── */
@media (max-width: 768px) {
  .slabel  { font-size: 11px !important; }
  .ssub    { font-size: 11px !important; }
  .stitle  { font-size: 12px !important; }
  .sval    { font-size: clamp(13px, 3vw, 16px) !important; }
  .mval    { font-size: clamp(12px, 2.8vw, 15px) !important; }
  .mono9   { font-size: 9px !important; }
  .mono10  { font-size: 11px !important; }
  .mono11  { font-size: 11px !important; }
  .bsc-label, .bsc-val { font-size: 11px !important; }
  .bf-item, .bf-name, .bf-score { font-size: 11px !important; }
  .vp-label, .vp-bar { font-size: 11px !important; }
  .session-name, .session-time { font-size: 11px !important; }
  .narrative-text { font-size: 12px !important; }
  .narrative-sub  { font-size: 11px !important; }
  .zone-price     { font-size: 11px !important; }
  .ticker-item, .ticker-val { font-size: 11px !important; }
  #newsContainer a { font-size: 12px !important; }
  #liquidations > div { font-size: 11px !important; }
  .mr-card  { font-size: 11px !important; }
  .smb      { font-size: 11px !important; }
  .price-main { font-size: clamp(18px, 5vw, 28px) !important; }
}
@media (max-width: 480px) {
  .scard { padding: 8px 10px !important; }
  .price-main { font-size: 20px !important; }
  .mrow { font-size: 11px !important; }
  .mval { font-size: 12px !important; }
}

/* ── 25. INPUTS — prevent iOS zoom (font-size ≥ 16px) ──────────── */
@media (max-width: 768px) {
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="password"],
  input[type="date"],
  select,
  textarea {
    font-size: 16px !important;
  }
  /* But keep display text at 11-12px where already set */
  .tf-btn, .ctrl-btn, .preset-btn, .exch-btn,
  .draw-tool-btn, .smc-tog-label { font-size: 11px !important; }
}

/* ── 26. SCROLLBAR STYLING — thin on mobile ─────────────────────── */
@media (max-width: 768px) {
  ::-webkit-scrollbar { width: 3px; height: 3px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--b1, #2a2a3a); border-radius: 2px; }
}

/* ── 27. SCARD / METRIC ROWS: wrap on tiny screens ─────────────── */
@media (max-width: 480px) {
  .mrow { flex-wrap: wrap !important; gap: 2px !important; }
  .mlabel { min-width: 0 !important; flex: 1 1 100px !important; }
  .mval   { flex: 0 0 auto !important; }
  .zone-item { flex-wrap: wrap !important; gap: 6px !important; }
}

/* ── 28. BOT IFRAME ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  #sec-bot iframe { height: 680px !important; width: 100% !important; }
}
@media (max-width: 480px) {
  #sec-bot iframe { height: 560px !important; }
  .hframe { height: 360px !important; }
}

/* ── 29. TOAST NOTIFICATIONS ────────────────────────────────────── */
@media (max-width: 480px) {
  .toast { font-size: 12px !important; padding: 10px 12px !important; }
  .toast-title { font-size: 11px !important; }
}

/* ── 30. LOADING PULSE ──────────────────────────────────────────── */
.loading-pulse { overflow: hidden !important; max-width: 100% !important; }
@media (max-width: 768px) {
  .loading-pulse { gap: 3px !important; }
}


/* ===== AUTH OVERLAY ===== */

/* ── AUTH OVERLAY: perfect centering on all screens ─────────── */
#auth-overlay {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow-y: auto !important;
  padding: 16px !important;
  z-index: 10000 !important;
}
#auth-card {
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  margin: auto;
}
@media (max-width: 480px) {
  #auth-overlay { padding: 8px !important; }
  #auth-card { max-height: calc(100vh - 16px); }
}

/* ── PREVENT horizontal scroll on .wrap ─────────────────────── */
.wrap {
  overflow-x: hidden;
  min-width: 0;
  width: min(100%, 1400px);
  margin-inline: auto;
  padding: 16px;
  box-sizing: border-box;
}

/* ── TOPBAR: prevent logo bleed ─────────────────────────────── */
.topbar {
  min-width: 0;
  overflow: hidden;
}
.logo { white-space: nowrap; }

/* ── NAV DROPDOWN: full-width on mobile ─────────────────────── */
@media (max-width: 480px) {
  .dropdown-menu {
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    position: fixed !important;
    top: auto !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    border-radius: 0 0 12px 12px !important;
  }
}

/* ── CHART LEGEND: scrollable on tiny screens ───────────────── */
@media (max-width: 480px) {
  #smc-chart-wrap > div[style*="bottom:38px"] {
    bottom: 42px !important;
    left: 6px !important;
    gap: 6px !important;
    font-size: 11px !important;
  }
  .chart-legend-item { font-size: 11px !important; }
}

/* ── ANALYTICS: header padding fix ──────────────────────────── */
@media (max-width: 768px) {
  #sec-analytics > div:first-child > div[style*="padding:22px 28px"] {
    padding: 16px 14px 14px !important;
  }
  #sec-analytics > div:last-child[style*="padding:20px 24px"] {
    padding: 14px 12px !important;
  }
  /* Stats header bar: allow horizontal scroll */
  #sec-analytics [style*="border-top:1px solid var(--b0)"] + div,
  [style*="flex:1;padding:10px 16px;border-right:1px solid var(--b0)"] {
    min-width: 80px;
    padding: 8px 10px !important;
  }
  [style*="flex:1;padding:10px 16px"]:first-of-type > div:last-child,
  [style*="flex:1;padding:10px 16px"] > div:last-child {
    font-size: 13px !important;
  }
}

/* ── SECTION: AI Bot iframe ──────────────────────────────────── */
@media (max-width: 768px) {
  #sec-bot iframe { height: 700px !important; }
}
@media (max-width: 480px) {
  #sec-bot iframe { height: 600px !important; }
  .hframe { height: 380px !important; }
}

/* ── COT iframe ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  #sec-analytics + div iframe,
  .panel:has([style*="cot.html"]) iframe { height: 480px !important; }
}

/* ── MR CARDS (Market Read) ──────────────────────────────────── */
@media (max-width: 480px) {
  .mr-card {
    padding: 10px 12px !important;
    font-size: 11px !important;
  }
}

/* ── NARRATIVE CARDS ─────────────────────────────────────────── */
@media (max-width: 480px) {
  .narrative-card { padding: 12px !important; }
  .narrative-text { font-size: 12px !important; }
  .narrative-sub { font-size: 11px !important; }
}

/* ── ZONE ITEMS ──────────────────────────────────────────────── */
@media (max-width: 480px) {
  .zone-item { flex-wrap: wrap !important; gap: 6px !important; }
  .zone-price { font-size: 12px !important; }
  .zone-type { flex-shrink: 0 !important; }
}

/* ── SML EVENTS ──────────────────────────────────────────────── */
@media (max-width: 480px) {
  .sml-event { font-size: 11px !important; }
  .sml-event-title { font-size: 11px !important; }
  .sml-event-detail { font-size: 11px !important; }
  .sml-explain { font-size: 11px !important; }
}

/* ── BIAS FACTORS ────────────────────────────────────────────── */
@media (max-width: 480px) {
  .bf-item { font-size: 11px !important; }
  .bf-name { font-size: 11px !important; }
  .bf-score { font-size: 11px !important; }
  .bias-score-card { padding: 8px 6px !important; }
  .bsc-label { font-size: 11px !important; }
  .bsc-val { font-size: 12px !important; }
}

/* ── REPLAY LIVE PNL BAR ─────────────────────────────────────── */
@media (max-width: 480px) {
  #replay-live-pnl {
    flex-wrap: wrap !important;
    gap: 4px !important;
    font-size: 11px !important;
  }
}

/* ── STRATEGIES GRID ─────────────────────────────────────────── */
@media (max-width: 480px) {
  .si { padding: 12px 10px !important; }
  .si-name { font-size: 11px !important; }
  .si-desc { font-size: 11px !important; }
}

/* ── TUTORIAL LIST ───────────────────────────────────────────── */
@media (max-width: 480px) {
  .tut-title { font-size: 11px !important; }
  .tut-num { font-size: 12px !important; }
}

/* ── POSITION CALCULATOR result ──────────────────────────────── */
@media (max-width: 480px) {
  #calcResult > div:first-of-type {
    font-size: 26px !important;
  }
  #calcResult [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ── NEWS CONTAINER ──────────────────────────────────────────── */
@media (max-width: 480px) {
  #newsContainer a { font-size: 11px !important; line-height: 1.45 !important; }
}

/* ── LIVE LIQUIDATIONS ───────────────────────────────────────── */
@media (max-width: 480px) {
  #liquidations > div {
    font-size: 11px !important;
    padding: 5px 8px !important;
  }
}

/* ── EXCHANGE SPLIT bars ─────────────────────────────────────── */
@media (max-width: 480px) {
  .exch-split-row { margin-bottom: 8px !important; }
}

/* ── SESSION ITEMS ───────────────────────────────────────────── */
@media (max-width: 480px) {
  .session-item { padding: 8px 10px !important; gap: 8px !important; }
  .session-name { font-size: 11px !important; }
  .session-time { font-size: 11px !important; }
}

/* ── VP BARS ─────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .vp-bar { font-size: 11px !important; }
  .vp-label { font-size: 11px !important; min-width: 48px !important; }
}

/* ── PREVENT text overflow in panels ────────────────────────── */
@media (max-width: 768px) {
  .stitle, .ssub, .mlabel, .mval { word-break: break-word; }
  #bias-rec { font-size: 9.5px !important; line-height: 1.65 !important; }
}

/* ── ALERT ROWS: horizontal scroll on mobile ─────────────────── */
@media (max-width: 480px) {
  .alert-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    align-items: center !important;
    padding: 8px 0 !important;
  }
  .alert-row .alert-type-label {
    width: 100% !important;
    font-weight: 700 !important;
  }
  .alert-row .num-input-wrap,
  .alert-row .alert-value { flex: 1 1 80px !important; }
  .alert-row .alert-label { flex: 1 1 100px !important; }
}

/* ── REPLAY CONTROLS: label+input grid ──────────────────────── */
@media (max-width: 768px) {
  .replay-controls {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    gap: 6px 10px !important;
    align-items: center !important;
  }
  .replay-controls > button,
  .replay-controls > span { grid-column: 1 / -1 !important; }
  .replay-speed { grid-column: 1 / -1 !important; }
}

/* ── TOAST ALERTS ────────────────────────────────────────────── */
@media (max-width: 480px) {
  .toast { font-size: 12px !important; padding: 10px 12px !important; }
  .toast-title { font-size: 11px !important; }
}

/* ── LOADING PULSE FIXES ─────────────────────────────────────── */
.loading-pulse {
  overflow: hidden;
  max-width: 100%;
}


/* ===== MOBILE TOPBAR/HEADER ===== */

/* ── NUR Mobile: Topbar durch Mobile-Header ersetzen ───────────── */
@media (max-width: 768px) {

  /* Originale Topbar ausblenden */
  .topbar { display: none !important; }

  /* Platz für Mobile-Header (52px oben) + Bottom Nav (64px unten) */
  body {
    padding-top:    52px !important;
    padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important;
  }

  /* Globaler Overflow-Schutz */
  html, body { overflow-x: hidden !important; }

  /* Panels nie breiter als Viewport */
  .panel, [id^="sec-"] {
    overflow-x: hidden !important;
    max-width:  100vw !important;
    box-sizing: border-box !important;
  }

  /* Canvas + iframes: volle Breite */
  canvas, iframe { max-width: 100% !important; }

  /* Tabellen: horizontal scrollen statt überlaufen */
  table { min-width: 480px; }
  .ovx  { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

  /* Ticker: horizontal scrollbar */
  .ticker-strip {
    overflow-x: auto !important; white-space: nowrap !important;
    scrollbar-width: none !important;
  }
  .ticker-strip::-webkit-scrollbar { display: none; }

  /* Grid-Fixes: mehrspaltige Inline-Grids zusammenklappen */
  .g4  { grid-template-columns: 1fr 1fr !important; }
  .g3  { grid-template-columns: 1fr 1fr !important; }
  .g22 { grid-template-columns: 1fr !important; }
  .g2  { grid-template-columns: 1fr !important; }
  .span3 { grid-column: 1 !important; }

  /* Inline-Style Grids: per Attribut-Selektor fangen */
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(4, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns:repeat(5, 1fr)"] {
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)) !important;
  }
  [style*="grid-template-columns:2fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns:1fr 1fr;gap:16px"],
  [style*="grid-template-columns:1fr 1fr;gap:8px"] {
    grid-template-columns: 1fr !important;
  }

  /* Chart: volle Breite, angemessene Höhe */
  #sec-chart { grid-template-columns: 1fr !important; }
  #smc-chart-wrap { min-height: 260px !important; height: auto !important; }
  #smc-vol-canvas { height: 42px !important; }

  /* Schriftgrößen-Mindestgröße */
  .slabel, .ssub, .mono9, .mono10 { font-size: 11px !important; }
  .stitle   { font-size: 12px !important; }
  .sval     { font-size: clamp(13px, 3vw, 16px) !important; }
  .price-main { font-size: clamp(18px, 5vw, 28px) !important; }

  /* Touch-Targets */
  button, select, input { min-height: 36px; }
  .tf-btn, .ctrl-btn, .draw-tool-btn { min-height: 34px !important; }

  /* Wrap: Abstände */
  .wrap { padding: 8px !important; gap: 8px !important; }
  .panel { padding: 12px !important; }
}

@media (max-width: 480px) {
  .g3 { grid-template-columns: 1fr !important; }
  .scard { padding: 8px 10px !important; }
}

/* ════════════════════════════════════════════════════════════════
   FIX 1 — SMC TOOLBAR: alle Toggles in EINER scrollbaren Zeile
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #smc-toolbar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 4px !important;
    padding: 6px 8px !important;
    scrollbar-width: none !important;
    align-items: center !important;
  }
  #smc-toolbar::-webkit-scrollbar { display: none; }

  /* Divider-Linien ausblenden → spart Platz */
  #smc-toolbar > div[style*="width:1px"] { display: none !important; }

  /* Timeframe-Gruppe: kompakt */
  #tf-btns { gap: 2px !important; flex-shrink: 0; }
  #tf-btns .tf-btn {
    padding: 3px 6px !important;
    font-size: 10px !important;
    min-height: 26px !important;
    flex-shrink: 0;
  }

  /* SMC Toggle-Labels: kompakt, kein Umbrechen */
  .smc-toggle-wrap {
    padding: 3px 6px !important;
    gap: 3px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
  .smc-tog-label { font-size: 10px !important; }

  /* Zeichenwerkzeuge + Bot-Status + Refresh ausblenden auf Mobile → spart Platz */
  #smc-toolbar > span[style*="DRAW"],
  #draw-none, #draw-hline, #draw-tline, #draw-rect,
  #draw-fib, #draw-text, #draw-long, #draw-short,
  #draw-color-pick,
  #smc-toolbar > button[onclick*="clearDrawings"],
  #smc-bot-status,
  #smc-refresh-btn,
  #smc-toolbar > div[style*="flex:1"] { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════
   FIX 2 — MOBILE HEADER: Coin-Select + kleinerer Preis
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Mobile Header: Logo · Coin-Select · Preis */
  #m-hdr {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 0 10px !important;
  }

  /* Coin-Select direkt im Mobile-Header anzeigen */
  #m-coin-select-wrap {
    display: flex !important;
    align-items: center !important;
    background: var(--bg3, #12121c) !important;
    border: 1px solid var(--b1, rgba(255,255,255,.1)) !important;
    border-radius: 6px !important;
    padding: 0 8px !important;
    height: 32px !important;
  }
  #m-coin-select-wrap select {
    background: transparent !important;
    border: none !important;
    color: var(--t-hi, #f0f0f8) !important;
    font-family: var(--mono, 'DM Mono', monospace) !important;
    font-size: 11px !important;
    letter-spacing: .5px !important;
    outline: none !important;
    cursor: pointer !important;
    height: 100% !important;
    padding: 0 !important;
  }

  /* Preis-Pill kleiner */
  .m-hdr-price {
    padding: 4px 8px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
  }
  .m-hdr-logo { font-size: 11px !important; letter-spacing: 2px !important; }
}

/* ════════════════════════════════════════════════════════════════
   FIX 3 — NAV BUTTONS: SVG-Icons statt Emojis
   (Icons werden per JS nach dem Laden ersetzt — CSS blendet Emoji aus)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .m-ni { font-size: 0 !important; } /* Emoji verstecken */
  .m-ni svg { display: inline-block !important; }
}

/* ════════════════════════════════════════════════════════════════
   FIX 4 — ADVANCED ANALYTICS: Stats-Bar horizontal scrollbar
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Stats-Bar scrollbar */
  #sec-analytics [style*="display:flex;gap:0;margin-top:16px"],
  #sec-analytics [style*="display:flex;gap:0;background:rgba(0,0,0,.3)"] {
    overflow-x: auto !important;
    scrollbar-width: none !important;
    flex-wrap: nowrap !important;
  }
  #sec-analytics [style*="display:flex;gap:0;margin-top:16px"] > div,
  #sec-analytics [style*="display:flex;gap:0;background:rgba(0,0,0,.3)"] > div {
    min-width: 90px !important;
    flex-shrink: 0 !important;
    padding: 8px 10px !important;
  }
  #sec-analytics [style*="display:flex;gap:0"]::-webkit-scrollbar { display: none; }

  /* Header-Bereich: Padding reduzieren */
  #sec-analytics [style*="padding:22px 28px"] {
    padding: 12px 14px !important;
  }
  /* Chart-Grids stapeln */
  #sec-analytics .g22,
  #sec-analytics [style*="grid-template-columns:1fr 1fr;gap:16px"] {
    grid-template-columns: 1fr !important;
  }
  /* KPI-Karten: 2-spaltig */
  #sec-analytics [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
  /* Analytics-Hauptbereich Padding */
  #sec-analytics [style*="padding:20px 24px"],
  #sec-analytics [style*="padding:24px"] {
    padding: 12px !important;
  }
  /* Kalender: horizontal scrollbar */
  #daily-cal-grid {
    grid-template-columns: repeat(7, minmax(36px,1fr)) !important;
    overflow-x: auto !important;
  }
  /* Wochentage-Header */
  #daily-calendar-modal [style*="grid-template-columns:repeat(7,1fr)"] {
    overflow-x: auto !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   FIX 5 — ALERT SYSTEM: Inputs richtig umbrechen
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Alert-Modus-Leiste */
  #sec-alerts > div > div[style*="display:flex;align-items:center;gap:10px;padding:12px"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  /* Alert-Regeln: umbrechen */
  .alert-row {
    flex-wrap: wrap !important;
    gap: 5px !important;
    padding: 8px 0 !important;
  }
  .alert-condition, .alert-type, .alert-label,
  .num-input-wrap, .alert-value {
    flex: 1 1 calc(50% - 5px) !important;
    min-width: 0 !important;
  }
  /* Sound-Toggle: volle Breite */
  #sec-alerts .ts { flex-shrink: 0 !important; }
  /* Test-Button */
  #sec-alerts button[onclick*="fireTestAlert"] {
    padding: 6px 12px !important;
    font-size: 11px !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   FIX 6 — LIQUIDATION HEATMAP: lesbare Höhe
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .hframe { height: 320px !important; min-height: 260px !important; }
  #sec-heatmap .hframe { width: 100% !important; }
}
@media (max-width: 480px) {
  .hframe { height: 260px !important; }
}

/* ════════════════════════════════════════════════════════════════
   FIX 7 — BACKTEST ENGINE: Buttons + Kapital-Eingabe
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Eingabe-Grid: 2-spaltig */
  #tab-backtest > div > div[style*="grid-template-columns:repeat(auto-fit"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  /* Kapital-Input: volle Breite */
  #bt-capital { width: 100% !important; }
  /* Strategie-Upload Button: volle Breite, kein Überlauf */
  #tab-backtest input[type="file"],
  #tab-backtest label[for] {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 11px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  /* Starten + CSV Buttons: nebeneinander */
  #tab-backtest button[onclick*="startBacktest"],
  #tab-backtest button[onclick*="exportBacktest"] {
    width: 100% !important;
    padding: 10px !important;
    font-size: 12px !important;
  }
  /* Stats-Grid: 2-spaltig */
  #backtest-stats [style*="repeat(auto-fit"] {
    grid-template-columns: 1fr 1fr !important;
  }
  /* Strategie-Karten: 1-spaltig */
  #tab-backtest [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   FIX 8 — TRADING REPLAY: Buttons im Container
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Replay-Controls: 2-Zeilen Grid */
  #tab-replay > div:first-child > div:first-child {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    align-items: end !important;
    flex-wrap: wrap !important;
  }
  /* Symbol + Datum: 1 Zeile */
  #replay-symbol, #replay-date {
    width: 100% !important;
  }
  /* Speed-Buttons: volle Breite ihrer Zelle */
  .replay-speed { width: 100% !important; }
  .spd-btn { flex: 1 !important; }

  /* Replay-Aktionsbuttons: 2x2 Grid */
  #replayTradePanel {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
  #replayTradePanel > button { width: 100% !important; min-width: 0 !important; }

  /* Lade + Play + +1 + Reset in gleicher Zeile */
  #replayLoadBtn, #replayPlayBtn, #replayStepBtn {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 7px 4px !important;
    font-size: 11px !important;
  }

  /* Replay Canvas: angemessene Höhe */
  #replayChart { height: 200px !important; min-height: 200px !important; }

  /* g22 im Replay: stapeln */
  #tab-replay .g22 { grid-template-columns: 1fr !important; }

  /* Trade-Log: max Höhe */
  #replayLog { max-height: 160px !important; }
}

/* ── Mobile Header ─────────────────────────────────────────────── */
#m-hdr { display: none; }

@media (max-width: 768px) {
  #m-hdr {
    display:         flex;
    position:        fixed;
    top: 0; left: 0; right: 0;
    height:          52px;
    background:      var(--bg1, #08080d);
    border-bottom:   1px solid var(--b0, rgba(255,255,255,.06));
    align-items:     center;
    justify-content: space-between;
    padding:         0 14px;
    padding-top:     env(safe-area-inset-top);
    z-index:         150;
    box-sizing:      border-box;
  }
}

.m-hdr-logo {
  font-family:   var(--disp, 'Syne', sans-serif);
  font-size:     13px; font-weight: 800; letter-spacing: 3px;
  color:         var(--t-hi, #f0f0f8);
  white-space:   nowrap;
}
.m-hdr-logo em { color: var(--accent, #00e5a0); font-style: normal; }

.m-hdr-price {
  display: flex; align-items: center; gap: 6px;
  background:    var(--bg3, #12121c);
  border:        1px solid var(--b1, rgba(255,255,255,.1));
  border-radius: 20px; padding: 5px 12px;
  font-family:   var(--mono, 'DM Mono', monospace);
  font-size:     13px; font-weight: 600; color: var(--t-hi, #f0f0f8);
}
.m-ldot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent, #00e5a0);
  animation: pulse 2s infinite; flex-shrink: 0;
}

.m-hdr-btn {
  display:         flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background:      var(--bg3, #12121c);
  border:          1px solid var(--b1, rgba(255,255,255,.1));
  border-radius:   6px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ── Bottom Navigation ─────────────────────────────────────────── */
#m-nav { display: none; }

@media (max-width: 768px) {
  #m-nav {
    display:         flex;
    position:        fixed;
    bottom: 0; left: 0; right: 0;
    height:          64px;
    background:      var(--bg1, #08080d);
    border-top:      1px solid var(--b0, rgba(255,255,255,.06));
    align-items:     center;
    justify-content: space-around;
    z-index:         150;
    padding-bottom:  env(safe-area-inset-bottom);
  }
}

.m-nb {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 8px; flex: 1; text-align: center;
  background: none; border: none; cursor: pointer;
  color: var(--t-mute, #444466);
  font-family: var(--mono, 'DM Mono', monospace);
  -webkit-tap-highlight-color: transparent;
  transition: color .12s;
}
.m-nb.active { color: var(--accent, #00e5a0); }
.m-ni { font-size: 19px; line-height: 1; }
.m-nl { font-size: 10px; letter-spacing: .3px; }

/* ── Drawer ────────────────────────────────────────────────────── */
#m-ov {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.6); z-index: 300;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
#m-ov.open { opacity: 1; pointer-events: all; display: block; }

#m-dr {
  position: fixed; top: 0; right: 0;
  width: min(85vw, 300px); height: 100%;
  background: var(--bg2, #0d0d15);
  border-left: 1px solid var(--b1, rgba(255,255,255,.1));
  z-index: 400; transform: translateX(100%);
  transition: transform .3s cubic-bezier(.32,.72,0,1);
  overflow-y: auto; padding: 20px 16px 40px;
}
#m-dr.open { transform: translateX(0); }

.m-drl {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 4px;
  border-bottom: 1px solid var(--b0, rgba(255,255,255,.06));
  font-family: var(--mono, 'DM Mono', monospace);
  font-size: 13px; color: var(--t-lo, #8888aa);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.m-drl:hover, .m-drl:active { color: var(--t-hi, #f0f0f8); }
.m-drl:last-of-type { border-bottom: none; }