/* ══════════════════════════════════════════════════════════════════
   VELANTHOR — style-godmode.css — v8 FINAL
   Complete mobile overhaul. Pixel-perfect. No compromises.
   ══════════════════════════════════════════════════════════════════ */

/* ── CSS RESET LAYER (mobile baseline) ──────────────────────────── */
@media (max-width: 768px) {
  *, *::before, *::after {
    box-sizing: border-box !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   1 — MOBILE HEADER
   Exakt 3 Spalten: Logo | Coin-Select (zentriert) | Preis
   Kein Overflow, kein Wrapping, alles sauber auf einer Linie.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #m-hdr {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    padding: 0 12px !important;
    height: 48px !important;
    min-height: 48px !important;
    gap: 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 900 !important;
    background: var(--bg, #0d0d12) !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
  }

  /* Logo — links */
  .m-hdr-logo {
    font-size: 11px !important;
    letter-spacing: 2.5px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    justify-self: start !important;
    color: var(--t-hi, #f0f0f8) !important;
  }
  .m-hdr-logo em {
    font-style: normal !important;
    color: var(--accent, #00e5a0) !important;
  }

  /* Coin-Select — Mitte */
  #m-coin-select-wrap {
    display: flex !important;
    align-items: center !important;
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 20px !important;
    padding: 0 10px 0 8px !important;
    height: 28px !important;
    gap: 5px !important;
    justify-self: center !important;
    transition: border-color .2s !important;
  }
  #m-coin-select-wrap:focus-within {
    border-color: var(--accent, #00e5a0) !important;
  }
  #m-coin-select-wrap::before {
    content: '' !important;
    display: inline-block !important;
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: var(--accent, #00e5a0) !important;
    flex-shrink: 0 !important;
    box-shadow: 0 0 4px var(--accent, #00e5a0) !important;
  }
  #m-coin-sel {
    background: transparent !important;
    border: none !important;
    color: var(--t-hi, #f0f0f8) !important;
    font-family: 'DM Mono', monospace !important;
    font-size: 10.5px !important;
    letter-spacing: .5px !important;
    outline: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    max-width: 72px !important;
  }
  #m-coin-select-wrap::after {
    content: '▾' !important;
    color: var(--t-mute, #444466) !important;
    font-size: 9px !important;
    flex-shrink: 0 !important;
    pointer-events: none !important;
  }

  /* Preis — rechts */
  .m-hdr-price {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    justify-self: end !important;
    white-space: nowrap !important;
    font-family: 'DM Mono', monospace !important;
    font-size: 11px !important;
    color: var(--t-hi, #f0f0f8) !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
  }
  .m-ldot {
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: var(--accent, #00e5a0) !important;
    flex-shrink: 0 !important;
    animation: pulse-dot 2s ease-in-out infinite !important;
  }
  @keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: .4; }
  }
}


/* ══════════════════════════════════════════════════════════════════
   2 — BOTTOM NAVIGATION
   5 gleichmäßige Tabs. Icons groß genug, Labels klein & sauber.
   Kein Overflow, kein Text-Clipping.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #m-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    height: 56px !important;
    background: var(--bg, #0d0d12) !important;
    border-top: 1px solid rgba(255,255,255,.07) !important;
    z-index: 950 !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
  }

  .m-nb {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    color: var(--t-mute, #444466) !important;
    width: 100% !important;
    height: 100% !important;
    transition: color .15s !important;
    -webkit-tap-highlight-color: transparent !important;
    position: relative !important;
  }

  .m-nb::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) scaleX(0) !important;
    width: 28px !important;
    height: 2px !important;
    background: var(--accent, #00e5a0) !important;
    border-radius: 0 0 2px 2px !important;
    transition: transform .2s cubic-bezier(.34,1.56,.64,1) !important;
  }

  .m-nb.active::before {
    transform: translateX(-50%) scaleX(1) !important;
  }

  .m-nb.active {
    color: var(--accent, #00e5a0) !important;
  }

  .m-ni {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    font-size: 0 !important;
  }

  .m-ni svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor !important;
    flex-shrink: 0 !important;
    transition: transform .15s !important;
  }

  .m-nb.active .m-ni svg {
    transform: translateY(-1px) !important;
  }

  .m-nl {
    font-family: 'DM Mono', monospace !important;
    font-size: 8.5px !important;
    letter-spacing: .5px !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 52px !important;
  }
}


/* ══════════════════════════════════════════════════════════════════
   3 — DRAWER (Slide-in Panel)
   Sauber strukturiert. Links als kompakte, touch-freundliche Zeilen.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #m-dr {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    width: min(280px, 82vw) !important;
    height: 100dvh !important;
    background: var(--bg-card, #12121e) !important;
    border-left: 1px solid rgba(255,255,255,.07) !important;
    z-index: 1000 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 20px 16px 32px !important;
    transition: right .28s cubic-bezier(.4,0,.2,1) !important;
    scrollbar-width: none !important;
  }
  #m-dr::-webkit-scrollbar { display: none !important; }
  #m-dr.open { right: 0 !important; }

  #m-ov {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,.6) !important;
    z-index: 999 !important;
    opacity: 0 !important;
    transition: opacity .25s !important;
    display: none !important;
    backdrop-filter: blur(2px) !important;
  }
  #m-ov.open { opacity: 1 !important; }
}

/* Drawer Links */
.m-drl {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 8px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: background .12s !important;
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent !important;
  margin: 0 -8px !important;
}
.m-drl:hover,
.m-drl:active {
  background: rgba(255,255,255,.04) !important;
}
.m-drl:hover .m-drl-icon,
.m-drl:active .m-drl-icon {
  color: var(--accent, #00e5a0) !important;
}
.m-drl:hover > span:last-child,
.m-drl:active > span:last-child {
  color: var(--t-hi, #f0f0f8) !important;
}

.m-drl-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
  color: var(--t-lo, #666688) !important;
  transition: color .12s !important;
}
.m-drl-icon svg {
  width: 15px !important;
  height: 15px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 1.7 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  display: block !important;
}

.m-drl > span:last-child {
  font-family: 'DM Mono', monospace !important;
  font-size: 11.5px !important;
  letter-spacing: .3px !important;
  color: var(--t-lo, #8888aa) !important;
  transition: color .12s !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}


/* ══════════════════════════════════════════════════════════════════
   4 — SMC TOOLBAR: 2 ZEILEN (mobile)
   Zeile 1: Timeframe-Buttons
   Zeile 2: SMC-Legende + Clear-Button (rechts)
   Kein Draw-Row, kein Overflow auf 350px.
   ══════════════════════════════════════════════════════════════════ */
#smc-toolbar {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}
#smc-toolbar::-webkit-scrollbar { display: none !important; }
#smc-toolbar > * { flex-shrink: 0 !important; }

/* Grouped rows injected by smcToolbarRegroup JS */
.smct-row {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  width: 100% !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
.smct-row::-webkit-scrollbar { display: none !important; }

.smct-row-nowrap {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  width: 100% !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}
.smct-row-nowrap::-webkit-scrollbar { display: none !important; }

/* Legend beneath chart */
#smc-chart-wrap > div[style*="position:absolute;bottom:38px"] {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}
#smc-chart-wrap > div[style*="position:absolute;bottom:38px"]::-webkit-scrollbar {
  display: none !important;
}
.chart-legend-item {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  font-size: 10px !important;
}

@media (max-width: 768px) {
  /* SMC chart canvas */
  #smc-chart-wrap {
    min-height: 260px !important;
  }

  /* ── MOBILE: Toolbar auf exakt 2 Zeilen reduzieren ── */
  #smc-toolbar {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    overflow-x: hidden !important;
    padding: 5px 8px !important;
    gap: 0 !important;
  }

  /* Zeile 1: Timeframe-Buttons */
  #smc-toolbar .smct-row:first-child {
    order: 1 !important;
    justify-content: flex-start !important;
    gap: 3px !important;
    padding-bottom: 4px !important;
    border-bottom: 1px solid rgba(255,255,255,.05) !important;
  }

  /* Zeile 2 (Legende + Remove-Button) */
  #smc-toolbar .smct-row:nth-child(2),
  #smc-toolbar .smct-row-legend {
    order: 2 !important;
    justify-content: space-between !important;
    padding-top: 4px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    gap: 4px !important;
  }
  #smc-toolbar .smct-row:nth-child(2)::-webkit-scrollbar,
  #smc-toolbar .smct-row-legend::-webkit-scrollbar { display: none !important; }

  /* Row 3+ (draw tools etc.) → ausblenden auf 350px */
  #smc-toolbar .smct-row:nth-child(3),
  #smc-toolbar .smct-row-nowrap {
    display: none !important;
  }

  /* Zeile 1: Titel + Bot-Status → zusammen mit TF in row1 */
  #smc-toolbar .smct-row:first-child > span[style*="font-weight:700"],
  #smc-toolbar .smct-row:first-child > #smc-bot-status,
  #smc-toolbar .smct-row:first-child > #smc-refresh-btn {
    display: none !important;
  }

  /* Timeframe buttons: compact */
  #tf-btns {
    display: flex !important;
    gap: 3px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    flex: 1 !important;
  }
  #tf-btns::-webkit-scrollbar { display: none !important; }
  #tf-btns button {
    flex-shrink: 0 !important;
    padding: 3px 7px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }

  /* SMC toggle labels: pill style, flex-shrink */
  .smc-toggle-wrap {
    flex-shrink: 0 !important;
    font-size: 10px !important;
  }
  .smc-tog-label {
    font-size: 10px !important;
    padding: 2px 5px !important;
  }

  /* Legende + Clear im Inline-Toolbar (nicht chart-overlay) */
  /* Legende (chart overlay) auf mobile ausblenden — Zeile 2 der Toolbar übernimmt */
  #smc-chart-wrap > div[style*="position:absolute;bottom:38px"] {
    display: none !important;
  }

  /* Zeile 2 = Legende-Row: Toggles + rechts ein kleiner Clear-Button */
  .smct-row-legend-clear {
    background: none !important;
    border: 1px solid rgba(255,59,92,.35) !important;
    color: var(--red, #ff3b5c) !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
    font-size: 10px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
  }
}

@media (max-width: 480px) {
  #smc-chart-wrap {
    min-height: 220px !important;
  }
}


/* ══════════════════════════════════════════════════════════════════
   5 — BUTTONS: Nie zu breit
   Buttons bekommen max-content width. Full-width nur explizit.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Alle Action-Buttons: auto width, nie volle Breite ungewollt */
  button:not([class*="auth-btn"]):not([class*="m-nb"]):not(.m-drl):not(#logoutBtn) {
    max-width: 100% !important;
  }

  /* Backtest: Start-Button kompakt */
  #tab-backtest button[onclick="startBacktest()"],
  button[onclick="startBacktest()"] {
    width: auto !important;
    min-width: 90px !important;
    max-width: 160px !important;
    padding: 8px 16px !important;
    font-size: 11px !important;
    letter-spacing: .8px !important;
    white-space: nowrap !important;
  }

  /* Generic action buttons inside panels: auto width */
  [id^="sec-"] button:not(.auth-btn-primary):not(.auth-btn-ghost):not([class*="tab"]) {
    width: auto !important;
    min-width: 0 !important;
  }

  /* Buttons that SHOULD be full-width (submit-style) */
  .auth-btn-primary,
  .auth-btn-ghost {
    width: 100% !important;
  }

  /* Logout in drawer */
  #m-dr button[onclick*="logout"],
  #m-dr button[onclick*="Logout"] {
    width: 100% !important;
  }
}


/* ══════════════════════════════════════════════════════════════════
   6 — BACKTESTING GRID
   2-col compact on mobile, 1-col on tiny.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #tab-backtest [style*="display:grid"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  #tab-backtest [style*="grid-template-columns:repeat(3,1fr)"],
  #tab-backtest [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
  #tab-backtest [style*="grid-template-columns:repeat(4,1fr)"],
  #tab-backtest [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
}
@media (max-width: 400px) {
  #tab-backtest [style*="display:grid"] {
    grid-template-columns: 1fr !important;
  }
}

/* Browse File hover */
#tab-backtest label:has(#strategyFile) {
  transition: border-color .15s, background .15s !important;
  max-width: 100% !important;
}
#tab-backtest label:has(#strategyFile):hover {
  border-color: var(--accent, #00e5a0) !important;
  background: rgba(0,229,160,.05) !important;
}
#tab-backtest label:has(#strategyFile):hover span,
#tab-backtest label:has(#strategyFile):hover svg {
  color: var(--accent, #00e5a0) !important;
  stroke: var(--accent, #00e5a0) !important;
}


/* ══════════════════════════════════════════════════════════════════
   7 — LIQUIDATION HEATMAP IFRAME
   ══════════════════════════════════════════════════════════════════ */
.hframe {
  width: 100% !important;
  min-height: 580px !important;
  border: none !important;
  display: block !important;
}
@media (max-width: 480px) {
  .hframe { min-height: 360px !important; }
}


/* ══════════════════════════════════════════════════════════════════
   8 — ADVANCED ANALYTICS: Kalender / Controls sichtbar
   ══════════════════════════════════════════════════════════════════ */
#sec-analytics,
#sec-analytics > div,
#sec-analytics > div:first-child,
#sec-analytics > div:first-child > div[style*="background:linear-gradient"],
#sec-analytics > div:first-child > div[style*="background:linear-gradient"] > div[style*="padding"] {
  overflow: visible !important;
}

#sec-analytics [style*="display:flex;gap:8px;align-items:center"] {
  flex-wrap: wrap !important;
  overflow: visible !important;
  gap: 6px !important;
}

#sec-analytics button[onclick="toggleDailyCalendar()"] {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
  min-height: 30px !important;
  width: auto !important;
  padding: 5px 12px !important;
}

@media (max-width: 600px) {
  #sec-analytics [style*="display:flex;gap:0;margin-top:16px"] {
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #sec-analytics [style*="display:flex;gap:0;margin-top:16px"]::-webkit-scrollbar {
    display: none !important;
  }
  #sec-analytics [style*="display:flex;gap:0;margin-top:16px"] > div {
    min-width: 75px !important;
    flex-shrink: 0 !important;
  }
}


/* ══════════════════════════════════════════════════════════════════
   8b — WEEKDAY HEATMAP: "Trades" darf nicht aus den Boxen ragen
   Kein overflow auf 350px. Inhalt bleibt in der Box.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Container: 7 gleiche schmale Spalten */
  #weekdayHeatmap {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 3px !important;
  }
  /* Jede Box: kleines festes Padding, kein overflow */
  #weekdayHeatmap > div {
    padding: 6px 2px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  /* Tag-Kürzel */
  #weekdayHeatmap > div > div:first-child {
    font-size: 9px !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }
  /* P&L-Zahl */
  #weekdayHeatmap > div > div:nth-child(2) {
    font-size: 9px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  /* "X Trades" Zeile — Hauptproblem behoben */
  #weekdayHeatmap > div > div:nth-child(3) {
    font-size: 7.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    letter-spacing: 0 !important;
  }
}


/* ══════════════════════════════════════════════════════════════════
   9 — NUM-STEPPER: Kompakt, enger Abstand zwischen ▲ und ▼
   Gilt für Backtest, Journal, Alerts, Positionsrechner.
   ══════════════════════════════════════════════════════════════════ */
.ctrl-num-wrap,
.num-input-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: stretch !important;
}

.ctrl-num-wrap .num-stepper,
.num-input-wrap .num-stepper,
.num-stepper {
  position: absolute !important;
  right: 1px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  height: auto !important;
  width: 14px !important;
}

.num-step-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 14px !important;
  height: 10px !important;       /* ← feste kleine Höhe, kein 50% stretch */
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  color: var(--t-lo, #8888aa) !important;
  font-size: 6px !important;     /* ← kleiner Pfeil-Font */
  line-height: 1 !important;
  cursor: pointer !important;
  border-radius: 2px !important;
  transition: color .12s, background .12s !important;
}
.num-step-btn:hover {
  color: var(--accent, #00e5a0) !important;
  background: rgba(0,229,160,.08) !important;
}

.ctrl-num-wrap input[type="number"],
.num-input-wrap input[type="number"] {
  padding-right: 18px !important;
  -moz-appearance: textfield !important;
}
.ctrl-num-wrap input[type="number"]::-webkit-inner-spin-button,
.ctrl-num-wrap input[type="number"]::-webkit-outer-spin-button,
.num-input-wrap input[type="number"]::-webkit-inner-spin-button,
.num-input-wrap input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
}


/* ══════════════════════════════════════════════════════════════════
   10 — GRIDS: Inline-Style Overrides via JS-patch Unterstützung
   Alle häufigen repeat()-Muster für mobile korrigiert.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* 2-col chart grids → 1-col */
  [style*="grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px"],
  [style*="grid-template-columns:1fr 1fr;gap:16px;margin-bottom"],
  [style*="grid-template-columns: 1fr 1fr; gap: 16px"] {
    grid-template-columns: 1fr !important;
  }
  /* 4-col stat bars → 2-col */
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
  /* 5-col → 3-col */
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns: repeat(5, 1fr)"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  /* Strategy 3-col cards → 1-col */
  [style*="grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px"] {
    grid-template-columns: 1fr !important;
  }
  /* Auto 2-col hero */
  [style*="grid-template-columns:auto 1fr;gap:16px;align-items:center;padding:16px"] {
    grid-template-columns: 1fr !important;
  }
  /* Replay canvas */
  #replayChart {
    height: 220px !important;
  }
  /* Multi-chart iframes */
  [style*="height:300px;background:#0d0d12"] {
    height: 200px !important;
  }
}

@media (max-width: 480px) {
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns: repeat(5, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
  [style*="grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px"] {
    grid-template-columns: 1fr !important;
  }
  #replayChart {
    height: 180px !important;
  }
  [style*="height:300px;background:#0d0d12"] {
    height: 160px !important;
  }
}


/* ══════════════════════════════════════════════════════════════════
   11 — JOURNAL INPUTS
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #sec-journal > div[style*="display:flex;gap:8px;flex-wrap:wrap"],
  #sec-journal > div[style*="display:flex;gap:8px"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
  #sec-journal > div[style*="display:flex;gap:8px;flex-wrap:wrap"] input,
  #sec-journal > div[style*="display:flex;gap:8px;flex-wrap:wrap"] select,
  #sec-journal > div[style*="display:flex;gap:8px"] input,
  #sec-journal > div[style*="display:flex;gap:8px"] select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}
@media (max-width: 400px) {
  #sec-journal > div[style*="display:flex;gap:8px;flex-wrap:wrap"],
  #sec-journal > div[style*="display:flex;gap:8px"] {
    grid-template-columns: 1fr !important;
  }
}


/* ══════════════════════════════════════════════════════════════════
   12 — BIAS SECTION HEADER
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #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;
  }
  #bias-factors {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 400px) {
  #bias-factors {
    grid-template-columns: 1fr !important;
  }
}


/* ══════════════════════════════════════════════════════════════════
   13 — DRAWDOWN ROW: Stack on mobile
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  [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;
  }
}


/* ══════════════════════════════════════════════════════════════════
   14 — GLOBAL MOBILE POLISH
   Touch targets, spacing, overflow control
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Page scroll anchor for fixed header + bottom nav */
  body {
    padding-top: 48px !important;
    padding-bottom: 56px !important;
  }

  /* Sections: horizontal overflow guard */
  section,
  [id^="sec-"] {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Input & select: minimum touch target height */
  input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
  select,
  textarea {
    min-height: 36px !important;
    font-size: 14px !important; /* prevent iOS zoom */
  }

  /* Font size on selects/inputs prevents iOS auto-zoom (must be ≥16px for iOS) */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  select {
    font-size: max(14px, 1em) !important;
  }

  /* Compact section headings on mobile */
  [style*="font-size:22px"],
  [style*="font-size: 22px"] {
    font-size: 16px !important;
  }
  [style*="font-size:18px"],
  [style*="font-size: 18px"] {
    font-size: 14px !important;
  }

  /* Tab bar overflow: scroll not wrap */
  [style*="display:flex"] > [style*="border-bottom"] {
    flex-shrink: 0 !important;
  }

  /* Replay/Backtest tab header: equal columns */
  #sec-replay > div:first-child {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 480px) {
  /* Even tighter padding for tiny phones */
  [style*="padding:20px"],
  [style*="padding: 20px"] {
    padding: 14px !important;
  }
  [style*="padding:16px"],
  [style*="padding: 16px"] {
    padding: 12px !important;
  }
}


/* ══════════════════════════════════════════════════════════════════
   15 — AUTH OVERLAY: Sauber auf Mobile
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  #auth-card {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    min-height: 100dvh !important;
  }
  #auth-overlay {
    padding: 0 !important;
    align-items: flex-start !important;
  }
  .auth-plans {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .auth-plan {
    width: 100% !important;
  }
}


/* ══════════════════════════════════════════════════════════════════
   16 — SAFE AREA (iPhone notch / home bar)
   ══════════════════════════════════════════════════════════════════ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width: 768px) {
    #m-nav {
      padding-bottom: env(safe-area-inset-bottom) !important;
      height: calc(56px + env(safe-area-inset-bottom)) !important;
    }
    body {
      padding-bottom: calc(56px + env(safe-area-inset-bottom)) !important;
    }
    #m-hdr {
      padding-top: env(safe-area-inset-top) !important;
    }
  }
}