/* ============================================================
   Imperial Trading Platform - Mobile Stylesheet
   Activates only on phones (<= 640px)
   Loaded AFTER styles.css/pages.css so these rules win.
   ============================================================ */

@media (max-width: 640px) {

  /* ---------- Base ---------- */
  html, body {
    overflow: auto;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: contain;
  }

  body {
    font-size: 13px;
    background: #0d0e12;
    /* Reserve space for fixed bottom nav */
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  /* Prevent iOS auto-zoom on inputs (must be >=16px) */
  input, select, textarea, button {
    font-size: 16px !important;
  }

  /* Smaller font allowed for compact data displays */
  .mobile-compact, .mobile-compact * {
    font-size: 13px !important;
  }

  /* ---------- Hide desktop chrome ---------- */
  .nav-bar { display: none !important; }
  .global-watchlist { display: none !important; }
  .order-panel { display: none !important; } /* desktop right-side panel */
  .scalper-layout { display: none !important; }
  .rithmic-branding { display: none !important; }
  .template-controls { display: none !important; }
  .layout-controls { display: none !important; } /* multi-chart layouts hidden on phone */
  /* Hide global bottom positions/orders/trades panel - we have dedicated pages */
  .global-positions { display: none !important; }
  #globalPositionsPanel { display: none !important; }
  .bottom-panel-resize-handle { display: none !important; }
  #refreshSessionBtn span,
  #refreshSessionBtn { font-size: 11px !important; padding: 4px 6px; }

  /* Override desktop :has() rules that force overflow: hidden on certain pages.
     Mobile pages need to scroll vertically. Charts is the exception. */
  .page-content-wrapper:has(#page-options.active),
  .page-content-wrapper:has(#page-journaling.active) {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: block !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Hide desktop content of pages that have a mobile rebuild.
     The mobile cards are inserted as the FIRST child with class .mobile-only
     (.mobile-orders, .mobile-positions, .mobile-dashboard, .mobile-options).
     All sibling children of those pages are hidden. We match ALL element types
     (not just div) so optionsPage.js's dynamically inserted content also stays
     hidden regardless of when it gets added. */
  body.is-mobile #page-orders > *:not(.mobile-only),
  body.is-mobile #page-positions > *:not(.mobile-only),
  body.is-mobile #page-dashboard > *:not(.mobile-only),
  body.is-mobile #page-options > *:not(.mobile-only) {
    display: none !important;
  }

  /* ---------- App layout overrides ---------- */
  .main-app-layout {
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
  }

  .main-app-middle {
    flex-direction: column;
    overflow: hidden;
  }

  .main-content-area {
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  .page-content-wrapper {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 64px; /* reserve space for bottom nav */
  }

  .page {
    padding: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .page.container {
    padding: 12px !important;
  }

  /* ---------- Mobile Top Bar (account snapshot) ---------- */
  .mobile-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #1a1b1f;
    border-bottom: 1px solid #2b2d35;
    padding: 8px 12px;
    height: 52px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 100;
  }

  .mobile-top-bar .mtb-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  .mobile-top-bar .mtb-menu-btn {
    background: none;
    border: none;
    color: #d1d4dc;
    font-size: 22px;
    cursor: pointer;
    padding: 4px 8px;
    display: flex;
    align-items: center;
  }

  .mobile-top-bar .mtb-title {
    color: #d1d4dc;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-top-bar .mtb-stats {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
  }

  .mobile-top-bar .mtb-net-liq {
    color: #d1d4dc;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.1;
  }

  .mobile-top-bar .mtb-pnl {
    font-size: 11px;
    line-height: 1.1;
  }
  .mobile-top-bar .mtb-pnl.positive { color: #00e676; }
  .mobile-top-bar .mtb-pnl.negative { color: #ff1744; }

  /* Hide the desktop top bar elements when mobile equivalent exists */
  body.is-mobile .nav-account-info,
  body.is-mobile .nav-user-info { display: none !important; }

  /* ---------- Mobile Bottom Nav ---------- */
  .mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: #1a1b1f;
    border-top: 1px solid #2b2d35;
    display: flex;
    z-index: 1000;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  .mobile-bottom-nav .mbn-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #808080;
    text-decoration: none;
    cursor: pointer;
    border: none;
    background: none;
    padding: 6px 4px;
    transition: color 0.15s;
    min-height: 44px;
  }

  .mobile-bottom-nav .mbn-item:active {
    background: rgba(255, 255, 255, 0.04);
  }

  .mobile-bottom-nav .mbn-item.active {
    color: #2962ff;
  }

  .mobile-bottom-nav .mbn-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mobile-bottom-nav .mbn-icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
  }

  .mobile-bottom-nav .mbn-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2px;
  }

  /* ---------- Mobile Drawer (hamburger menu) ---------- */
  .mobile-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1500;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .mobile-drawer-overlay.open {
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 80%;
    max-width: 320px;
    background: #1a1b1f;
    border-right: 1px solid #2b2d35;
    z-index: 1600;
    transform: translateX(-100%);
    transition: transform 0.28s ease;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-drawer.open {
    transform: translateX(0);
  }

  .mobile-drawer-header {
    padding: 20px 18px 14px;
    border-bottom: 1px solid #2b2d35;
    background: #131417;
  }
  .mobile-drawer-header .md-brand {
    color: #d1d4dc;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
  }
  .mobile-drawer-header .md-user {
    color: #808080;
    font-size: 12px;
  }

  .mobile-drawer-section {
    padding: 12px 0;
    border-bottom: 1px solid #2b2d35;
  }
  .mobile-drawer-section:last-child { border-bottom: none; }

  .mobile-drawer-section-title {
    color: #6b6e76;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 6px 18px;
  }

  .mobile-drawer-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    color: #d1d4dc;
    font-size: 15px;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
  }
  .mobile-drawer-link:active {
    background: rgba(41, 98, 255, 0.08);
  }
  .mobile-drawer-link.active {
    color: #2962ff;
    background: rgba(41, 98, 255, 0.08);
  }
  .mobile-drawer-link svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
  }

  .mobile-drawer-account {
    padding: 12px 18px;
    background: #131417;
    border-bottom: 1px solid #2b2d35;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .mobile-drawer-account .mda-label {
    color: #808080;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    flex-shrink: 0;
  }
  .mobile-drawer-account .mda-select {
    flex: 1;
    background: #1f2127;
    border: 1px solid #2b2d35;
    color: #d1d4dc;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2.4'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
  }
  .mobile-drawer-account .mda-select:focus {
    outline: none;
    border-color: #2962ff;
  }

  .mobile-drawer-stats {
    padding: 14px 18px;
    background: #131417;
    border-bottom: 1px solid #2b2d35;
  }
  .mobile-drawer-stats .mds-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 13px;
  }
  .mobile-drawer-stats .mds-label { color: #808080; }
  .mobile-drawer-stats .mds-value { color: #d1d4dc; font-weight: 600; }
  .mobile-drawer-stats .mds-value.positive { color: #00e676; }
  .mobile-drawer-stats .mds-value.negative { color: #ff1744; }

  .mobile-drawer-logout {
    margin: 14px 18px;
    padding: 12px;
    background: rgba(255, 23, 68, 0.1);
    border: 1px solid rgba(255, 23, 68, 0.3);
    color: #ff5470;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
  }

  /* ---------- Generic page card layout ---------- */
  .mobile-card {
    background: #1a1b1f;
    border: 1px solid #2b2d35;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 10px;
  }
  .mobile-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    font-size: 13px;
  }
  .mobile-card-row .mcr-label {
    color: #808080;
    font-weight: 500;
  }
  .mobile-card-row .mcr-value {
    color: #d1d4dc;
    font-weight: 600;
  }
  .mobile-card-row .mcr-value.positive { color: #00e676; }
  .mobile-card-row .mcr-value.negative { color: #ff1744; }

  .mobile-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #2b2d35;
  }
  .mobile-card-header .mch-symbol {
    color: #d1d4dc;
    font-size: 16px;
    font-weight: 700;
  }
  .mobile-card-header .mch-side-buy {
    color: #fff;
    background: #00c853;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
  }
  .mobile-card-header .mch-side-sell {
    color: #fff;
    background: #d32f2f;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
  }

  .mobile-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #2b2d35;
  }
  .mobile-card-actions button {
    flex: 1;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #3a3c45;
    background: #2b2d35;
    color: #d1d4dc;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
  }
  .mobile-card-actions button.danger {
    background: rgba(255, 23, 68, 0.12);
    border-color: rgba(255, 23, 68, 0.4);
    color: #ff5470;
  }
  .mobile-card-actions button.primary {
    background: #2962ff;
    border-color: #2962ff;
    color: #fff;
  }

  /* Hide desktop tables on mobile, show mobile cards */
  body.is-mobile #page-orders .account-table,
  body.is-mobile #page-positions .account-table,
  body.is-mobile #page-dashboard .account-table {
    display: none;
  }
  body.is-mobile #page-orders [style*="overflow"],
  body.is-mobile #page-positions [style*="overflow"] {
    overflow: visible !important;
    max-height: none !important;
  }

  .mobile-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #d1d4dc;
    font-size: 14px;
    font-weight: 700;
    margin: 18px 0 10px;
    padding: 0 2px;
  }

  .mobile-section-header h2,
  .mobile-section-header h3 {
    margin: 0 !important;
    color: #d1d4dc !important;
    font-size: 16px !important;
  }

  .mobile-empty {
    text-align: center;
    color: #6b6e76;
    padding: 32px 16px;
    font-size: 13px;
  }

  /* Override inline desktop H2/H3 sizes inside pages */
  body.is-mobile .page h1 { font-size: 20px !important; }
  body.is-mobile .page h2 { font-size: 18px !important; }
  body.is-mobile .page h3 { font-size: 15px !important; }

  /* ---------- Charts page ---------- */
  .charts-page-header {
    flex-wrap: wrap;
    gap: 6px !important;
    padding: 8px !important;
    height: auto !important;
    min-height: 48px;
  }
  #addChartBtn { display: none !important; } /* mobile = single chart only */

  .charts-main-wrapper {
    flex-direction: column !important;
    height: 100% !important;
  }
  .charts-grid-container {
    flex: 1 !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
    width: 100% !important;
    overflow: hidden;
  }
  .charts-grid-container[data-layout] {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
  }

  .chart-module {
    border-radius: 0 !important;
    border: none !important;
    border-top: 1px solid #2b2d35 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  .chart-toolbar {
    flex-wrap: wrap;
    gap: 4px !important;
    padding: 6px 8px !important;
    height: auto !important;
    min-height: 38px;
  }
  .chart-toolbar .toolbar-section { gap: 4px !important; }
  .chart-toolbar label { font-size: 11px !important; }
  .chart-symbol-input { width: 70px !important; font-size: 13px !important; }
  .chart-timeframe-btn { font-size: 13px !important; min-width: 40px !important; }

  /* Hide DOM toggle on phone (no horizontal room) */
  .chart-toolbar .dom-toggle-label { display: none !important; }
  .dom-container { display: none !important; }

  .chart-content-area { flex-direction: column !important; }
  .chart-canvas-wrapper {
    width: 100% !important;
    height: 100% !important;
    touch-action: none; /* enables our custom touch handlers */
  }

  /* Hide chart price label since space is tight */
  .chart-toolbar .chart-price-display { font-size: 13px !important; padding: 0 4px; }
  .chart-toolbar .chart-close-btn { display: none !important; } /* only one chart */

  /* Inline chart trade bar (sits between chart and bottom nav).
     Shown only when the Charts page is active. Includes a quantity stepper,
     BUY/SELL market buttons, and a "..." button that opens the full order sheet
     for advanced order types (limit/stop/etc). */
  .mobile-chart-trade-bar {
    flex-shrink: 0;
    background: #1a1b1f;
    border-top: 1px solid #2b2d35;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
  }
  .mctb-qty {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
  }
  .mctb-qty button {
    width: 38px;
    height: 42px;
    border-radius: 8px;
    border: 1px solid #3a3c45;
    background: #2b2d35;
    color: #d1d4dc;
    font-size: 22px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
  }
  .mctb-qty input {
    width: 64px;
    height: 42px;
    text-align: center;
    background: #131417;
    border: 1px solid #3a3c45;
    border-radius: 8px;
    color: #d1d4dc;
    font-size: 16px !important;
    font-weight: 700;
  }
  .mctb-buy, .mctb-sell {
    flex: 1;
    height: 42px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    letter-spacing: 0.4px;
  }
  .mctb-buy { background: #00c853; }
  .mctb-sell { background: #d32f2f; }
  .mctb-more {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 8px;
    border: 1px solid #3a3c45;
    background: #2b2d35;
    color: #d1d4dc;
    cursor: pointer;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    padding: 0;
  }

  /* ---------- Mobile Order Sheet (replaces side panel) ---------- */
  .mobile-order-sheet-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1700;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
  }
  .mobile-order-sheet-overlay.open {
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-order-sheet {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: #1a1b1f;
    border-top: 1px solid #2b2d35;
    border-radius: 16px 16px 0 0;
    z-index: 1800;
    transform: translateY(100%);
    transition: transform 0.28s ease;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
  }
  .mobile-order-sheet.open { transform: translateY(0); }

  .mos-grabber {
    width: 40px;
    height: 4px;
    background: #3a3c45;
    border-radius: 2px;
    margin: 10px auto 6px;
  }

  .mos-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 18px 12px;
    border-bottom: 1px solid #2b2d35;
  }
  .mos-symbol {
    color: #d1d4dc;
    font-size: 18px;
    font-weight: 700;
  }
  .mos-close {
    background: none;
    border: none;
    color: #808080;
    font-size: 28px;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
  }

  .mos-body {
    padding: 14px 18px;
    overflow-y: auto;
    flex: 1;
  }

  .mos-bidask {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
  }
  .mos-bidask .mba-cell {
    flex: 1;
    padding: 12px;
    border-radius: 10px;
    background: #131417;
    border: 1px solid #2b2d35;
    text-align: center;
  }
  .mos-bidask .mba-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #808080;
    margin-bottom: 4px;
  }
  .mos-bidask .mba-value { font-size: 18px; font-weight: 700; }
  .mos-bidask .mba-cell.bid .mba-value { color: #ef5350; }
  .mos-bidask .mba-cell.ask .mba-value { color: #26a69a; }

  .mos-field {
    margin-bottom: 12px;
  }
  .mos-field label {
    display: block;
    color: #808080;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .mos-field input {
    width: 100%;
    padding: 14px;
    background: #131417;
    border: 1px solid #3a3c45;
    border-radius: 8px;
    color: #d1d4dc;
    font-size: 16px !important;
    font-weight: 600;
  }

  .mos-qty-stepper {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .mos-qty-stepper input { flex: 1; text-align: center; }
  .mos-qty-stepper button {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    border: 1px solid #3a3c45;
    background: #2b2d35;
    color: #d1d4dc;
    font-size: 22px;
    font-weight: 700;
    cursor: pointer;
  }

  .mos-order-types {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 14px;
  }
  .mos-order-types button {
    padding: 12px 4px;
    background: #131417;
    border: 1px solid #3a3c45;
    border-radius: 8px;
    color: #d1d4dc;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
  }
  .mos-order-types button.active {
    background: rgba(41, 98, 255, 0.18);
    border-color: #2962ff;
    color: #fff;
  }

  .mos-position-info {
    background: #131417;
    border: 1px solid #2b2d35;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
  }
  .mos-position-info .mpi-row {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    font-size: 13px;
  }
  .mos-position-info .mpi-row .mpi-label { color: #808080; }
  .mos-position-info .mpi-row .mpi-value { color: #d1d4dc; font-weight: 600; }

  .mos-actions {
    padding: 14px 18px;
    background: #131417;
    border-top: 1px solid #2b2d35;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .mos-actions .ma-btn {
    padding: 16px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    letter-spacing: 0.3px;
  }
  .mos-actions .ma-btn.buy { background: #00c853; }
  .mos-actions .ma-btn.sell { background: #d32f2f; }
  .mos-actions .ma-btn:active { transform: scale(0.98); }

  .mos-secondary {
    display: flex;
    gap: 10px;
    padding: 0 18px 14px;
  }
  .mos-secondary button {
    flex: 1;
    padding: 12px;
    background: #2b2d35;
    border: 1px solid #3a3c45;
    border-radius: 8px;
    color: #d1d4dc;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
  }
  .mos-secondary button.close-pos { background: rgba(255,23,68,0.12); border-color: rgba(255,23,68,0.4); color: #ff5470; }

  /* ---------- Watchlist sheet (shares drawer-like styling) ---------- */
  .mobile-watchlist-sheet {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    max-height: 80vh;
    background: #1a1b1f;
    border-top: 1px solid #2b2d35;
    border-radius: 16px 16px 0 0;
    z-index: 1750;
    transform: translateY(100%);
    transition: transform 0.28s ease;
    display: flex;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .mobile-watchlist-sheet.open { transform: translateY(0); }

  .mobile-watchlist-sheet .mws-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #2b2d35;
  }
  .mobile-watchlist-sheet .mws-title {
    font-size: 16px; font-weight: 700; color: #d1d4dc;
  }
  .mobile-watchlist-sheet .mws-list {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-watchlist-sheet .watchlist-item {
    padding: 14px 18px !important;
    font-size: 14px !important;
  }

  /* ---------- Dashboard ---------- */
  .mobile-dashboard-hero {
    background: linear-gradient(135deg, #1a2332 0%, #131417 100%);
    border: 1px solid #2b2d35;
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 14px;
    text-align: center;
  }
  .mdh-label {
    color: #808080;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .mdh-value {
    color: #fff;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.5px;
  }
  .mdh-pnl {
    margin-top: 6px;
    font-size: 14px;
    font-weight: 600;
  }
  .mdh-pnl.positive { color: #00e676; }
  .mdh-pnl.negative { color: #ff1744; }

  .mobile-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
  }
  .mobile-dashboard-grid .mdg-tile {
    background: #1a1b1f;
    border: 1px solid #2b2d35;
    border-radius: 10px;
    padding: 12px;
  }
  .mdg-tile .mdg-label {
    color: #808080;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
  }
  .mdg-tile .mdg-value {
    color: #d1d4dc;
    font-size: 16px;
    font-weight: 700;
    margin-top: 4px;
  }
  .mdg-tile .mdg-value.positive { color: #00e676; }
  .mdg-tile .mdg-value.negative { color: #ff1744; }

  /* ---------- Robinhood-style options page ---------- */
  body.is-mobile #page-options {
    background: #0d0e12;
    padding: 12px !important;
  }
  /* Override the desktop flex container so the page scrolls on mobile */
  body.is-mobile #page-options.active {
    display: block !important;
    overflow: visible !important;
    height: auto !important;
    min-height: 100% !important;
  }
  /* Same for journaling page */
  body.is-mobile #page-journaling.active {
    display: block !important;
    overflow: visible !important;
    height: auto !important;
  }

  .mob-options-header {
    background: #1a1b1f;
    padding: 14px;
    border-bottom: 1px solid #2b2d35;
    margin: -12px -12px 12px;
  }
  .moh-symbol-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
  }
  .moh-symbol-input {
    flex: 1;
    background: #131417;
    border: 1px solid #2b2d35;
    border-radius: 8px;
    padding: 10px 14px;
    color: #d1d4dc;
    font-size: 16px !important;
    font-weight: 700;
    text-transform: uppercase;
    margin-right: 10px;
  }
  .moh-price {
    color: #d1d4dc;
    font-size: 22px;
    font-weight: 700;
  }
  .moh-price-change {
    font-size: 12px;
    font-weight: 600;
    margin-top: 2px;
  }
  .moh-price-change.positive { color: #00e676; }
  .moh-price-change.negative { color: #ff1744; }

  /* Call/Put toggle */
  .mob-cp-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #131417;
    border-radius: 10px;
    padding: 4px;
    gap: 4px;
    margin-bottom: 14px;
  }
  .mob-cp-toggle button {
    padding: 10px;
    border: none;
    background: none;
    color: #808080;
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    letter-spacing: 0.4px;
  }
  .mob-cp-toggle button.active {
    background: #1a1b1f;
    color: #d1d4dc;
  }
  .mob-cp-toggle button.active.calls { color: #00e676; box-shadow: inset 0 -2px 0 #00c853; }
  .mob-cp-toggle button.active.puts { color: #ff5470; box-shadow: inset 0 -2px 0 #d32f2f; }

  /* Expiration chip selector */
  .mob-exp-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 2px 12px;
    margin: 0 -12px 0;
    padding-left: 12px;
    padding-right: 12px;
    scrollbar-width: none;
  }
  .mob-exp-chips::-webkit-scrollbar { display: none; }
  .mob-exp-chip {
    flex-shrink: 0;
    padding: 8px 14px;
    background: #1a1b1f;
    border: 1px solid #2b2d35;
    border-radius: 20px;
    color: #d1d4dc;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
  }
  .mob-exp-chip.active {
    background: rgba(41, 98, 255, 0.18);
    border-color: #2962ff;
    color: #fff;
  }
  .mob-exp-chip-dte {
    color: #808080;
    margin-left: 4px;
    font-size: 11px;
  }

  /* Strike list */
  .mob-strike-list {
    background: #1a1b1f;
    border: 1px solid #2b2d35;
    border-radius: 12px;
    overflow: hidden;
  }
  .mob-strike-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 8px;
    padding: 14px;
    border-bottom: 1px solid #2b2d35;
    cursor: pointer;
    transition: background 0.12s;
    align-items: center;
  }
  .mob-strike-row:last-child { border-bottom: none; }
  .mob-strike-row:active { background: rgba(41, 98, 255, 0.08); }
  .mob-strike-row.atm {
    background: rgba(41, 98, 255, 0.08);
    border-left: 3px solid #2962ff;
  }
  .mob-strike-row.leg-buy {
    background: rgba(0, 200, 83, 0.18) !important;
    border-left: 4px solid #00c853;
  }
  .mob-strike-row.leg-sell {
    background: rgba(211, 47, 47, 0.18) !important;
    border-left: 4px solid #d32f2f;
  }
  .mob-strike-row .msr-leg-badge {
    display: none;
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.6px;
    padding: 2px 6px;
    border-radius: 4px;
    color: #fff;
  }
  .mob-strike-row { position: relative; }
  .mob-strike-row.leg-buy .msr-leg-badge {
    display: block;
    background: #00c853;
  }
  .mob-strike-row.leg-buy .msr-leg-badge::before { content: 'BUY'; }
  .mob-strike-row.leg-sell .msr-leg-badge {
    display: block;
    background: #d32f2f;
  }
  .mob-strike-row.leg-sell .msr-leg-badge::before { content: 'SELL'; }

  /* Hint text shown above the chain when no legs are selected */
  .mob-leg-hint {
    color: #6b6e76;
    font-size: 12px;
    text-align: center;
    padding: 8px 4px 4px;
  }
  .mob-leg-hint b { color: #d1d4dc; }

  /* Floating confirm bar (visible when >=1 leg selected) */
  .mob-opt-confirm-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 60px; /* sits above the mobile bottom nav */
    background: linear-gradient(180deg, #1a1b1f, #131417);
    border-top: 1px solid #2b2d35;
    padding: 12px 14px;
    z-index: 1100;
    display: none;
    flex-direction: column;
    gap: 8px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.45);
  }
  .mob-opt-confirm-bar.show { display: flex; }
  .mob-opt-confirm-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
  }
  .mob-opt-confirm-summary .mocs-left {
    color: #d1d4dc;
    font-weight: 600;
  }
  .mob-opt-confirm-summary .mocs-net {
    font-size: 15px;
    font-weight: 800;
  }
  .mob-opt-confirm-summary .mocs-net.debit { color: #ff5470; }
  .mob-opt-confirm-summary .mocs-net.credit { color: #00e676; }
  .mob-opt-confirm-buttons {
    display: flex;
    gap: 8px;
  }
  .mob-opt-confirm-buttons button {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
  }
  .mob-opt-confirm-buttons .mocb-clear {
    background: #2b2d35;
    border: 1px solid #3a3c45;
    color: #d1d4dc;
  }
  .mob-opt-confirm-buttons .mocb-review {
    background: #2962ff;
    color: #fff;
  }

  /* Full-screen confirmation overlay */
  .mob-opt-confirm-screen {
    position: fixed;
    inset: 0;
    background: #0d0e12;
    z-index: 1900;
    display: none;
    flex-direction: column;
    overflow: hidden;
  }
  .mob-opt-confirm-screen.show { display: flex; }

  .mocs-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 14px;
    background: #1a1b1f;
    border-bottom: 1px solid #2b2d35;
    flex-shrink: 0;
  }
  .mocs-back {
    background: none;
    border: none;
    color: #d1d4dc;
    font-size: 26px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
  }
  .mocs-title {
    color: #d1d4dc;
    font-size: 17px;
    font-weight: 700;
  }
  .mocs-strategy-tag {
    margin-left: auto;
    background: rgba(41, 98, 255, 0.16);
    color: #6ea7ff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 6px;
    letter-spacing: 0.3px;
  }

  .mocs-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px;
  }

  .mocs-leg-card {
    background: #1a1b1f;
    border: 1px solid #2b2d35;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .mocs-leg-card.buy { border-left: 4px solid #00c853; }
  .mocs-leg-card.sell { border-left: 4px solid #d32f2f; }
  .mocs-leg-card .mlc-side {
    font-size: 11px;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 5px;
    color: #fff;
    letter-spacing: 0.4px;
    flex-shrink: 0;
  }
  .mocs-leg-card.buy .mlc-side { background: #00c853; }
  .mocs-leg-card.sell .mlc-side { background: #d32f2f; }
  .mocs-leg-card .mlc-info {
    flex: 1;
    min-width: 0;
  }
  .mocs-leg-card .mlc-title {
    color: #d1d4dc;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 2px;
  }
  .mocs-leg-card .mlc-sub {
    color: #6b6e76;
    font-size: 11px;
  }
  .mocs-leg-card .mlc-price {
    text-align: right;
    color: #d1d4dc;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
  }

  .mocs-block {
    background: #1a1b1f;
    border: 1px solid #2b2d35;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 10px;
  }
  .mocs-block-title {
    color: #6b6e76;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 10px;
  }
  .mocs-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 14px;
  }
  .mocs-row .mr-label { color: #808080; }
  .mocs-row .mr-value { color: #d1d4dc; font-weight: 600; }
  .mocs-row .mr-value.big {
    font-size: 20px;
    font-weight: 800;
  }
  .mocs-row .mr-value.debit { color: #ff5470; }
  .mocs-row .mr-value.credit { color: #00e676; }

  .mocs-order-type {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 8px;
  }
  .mocs-order-type button {
    padding: 10px 4px;
    border: 1px solid #3a3c45;
    background: #131417;
    color: #d1d4dc;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
  }
  .mocs-order-type button.active {
    background: rgba(41, 98, 255, 0.18);
    border-color: #2962ff;
    color: #fff;
  }

  .mocs-qty-row {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .mocs-qty-row label {
    color: #d1d4dc;
    font-size: 14px;
    flex: 1;
  }
  .mocs-qty-row .mocs-qty-stepper {
    display: flex;
    gap: 6px;
    align-items: center;
  }
  .mocs-qty-row .mocs-qty-stepper button {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 1px solid #3a3c45;
    background: #2b2d35;
    color: #d1d4dc;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
  }
  .mocs-qty-row .mocs-qty-stepper input {
    width: 60px;
    text-align: center;
    background: #131417;
    border: 1px solid #3a3c45;
    color: #d1d4dc;
    border-radius: 8px;
    height: 38px;
    font-size: 16px !important;
    font-weight: 700;
  }

  .mocs-footer {
    padding: 14px;
    background: #131417;
    border-top: 1px solid #2b2d35;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0));
    flex-shrink: 0;
  }
  .mocs-place-btn {
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    background: #00c853;
    letter-spacing: 0.5px;
  }
  .mocs-place-btn.credit { background: #00c853; }
  .mocs-place-btn.debit { background: #ff5470; }
  .mocs-place-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .mob-strike-row .msr-strike {
    font-size: 16px; font-weight: 700; color: #d1d4dc;
  }
  .mob-strike-row .msr-cell {
    text-align: right;
    font-size: 13px;
    color: #d1d4dc;
  }
  .mob-strike-row .msr-cell-label {
    font-size: 9px;
    color: #6b6e76;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 2px;
  }
  .mob-strike-row .msr-cell-value {
    font-size: 14px;
    font-weight: 600;
  }

  /* Robinhood underline tabs (in/at/out the money) */
  .mob-moneyness-tabs {
    display: flex;
    gap: 18px;
    padding: 0 4px 12px;
    border-bottom: 1px solid #2b2d35;
    margin-bottom: 12px;
  }
  .mob-moneyness-tabs button {
    background: none;
    border: none;
    color: #808080;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 0;
    cursor: pointer;
    border-bottom: 2px solid transparent;
  }
  .mob-moneyness-tabs button.active {
    color: #d1d4dc;
    border-bottom-color: #2962ff;
  }

  /* ---------- Orders / Positions card variants ---------- */
  .mobile-order-card .moc-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 11px;
    color: #6b6e76;
  }

  .mobile-position-card .mpc-pnl-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 8px 0;
  }
  .mpc-pnl-value {
    font-size: 22px;
    font-weight: 700;
  }
  .mpc-pnl-value.positive { color: #00e676; }
  .mpc-pnl-value.negative { color: #ff1744; }
  .mpc-pnl-pct {
    font-size: 13px;
    font-weight: 600;
  }
  .mpc-pnl-pct.positive { color: #00e676; }
  .mpc-pnl-pct.negative { color: #ff1744; }

  /* ---------- Settings page ---------- */
  body.is-mobile #page-settings .settings-container,
  body.is-mobile #page-settings > div {
    padding: 0 !important;
  }

  .mobile-settings-section {
    background: #1a1b1f;
    border: 1px solid #2b2d35;
    border-radius: 10px;
    margin-bottom: 12px;
    overflow: hidden;
  }
  .mobile-settings-section-header {
    padding: 12px 14px;
    border-bottom: 1px solid #2b2d35;
    color: #d1d4dc;
    font-size: 14px;
    font-weight: 700;
    background: #131417;
  }
  .mobile-settings-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px;
    border-bottom: 1px solid #2b2d35;
  }
  .mobile-settings-row:last-child { border-bottom: none; }
  .mobile-settings-row .msr-label {
    color: #d1d4dc;
    font-size: 14px;
  }
  .mobile-settings-row .msr-sub {
    color: #808080;
    font-size: 11px;
    margin-top: 2px;
  }

  /* ---------- Modals: full-screen on mobile ---------- */
  .modal,
  .copy-modal,
  .stop-target-modal,
  .timeframe-modal,
  .indicators-modal {
    align-items: stretch !important;
    padding: 0 !important;
  }
  .modal-content,
  .copy-modal-content,
  .stop-target-modal-content,
  .timeframe-modal-content,
  .indicators-modal-content {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 16px !important;
    overflow-y: auto !important;
  }

  /* ---------- Copy trading ---------- */
  body.is-mobile #page-copy-trading .copy-trading-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  body.is-mobile #page-copy-trading .setup-step {
    padding: 14px !important;
  }
  body.is-mobile #page-copy-trading select,
  body.is-mobile #page-copy-trading input[type="text"],
  body.is-mobile #page-copy-trading input[type="number"] {
    font-size: 16px !important;
    padding: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ---------- Journal ---------- */
  body.is-mobile #page-journaling table { display: none; }
  body.is-mobile #page-journaling .journal-card {
    background: #1a1b1f;
    border: 1px solid #2b2d35;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 10px;
  }

  /* ---------- Notifications: smaller and bottom-positioned ---------- */
  .notification, .notification-container {
    bottom: 80px !important;
    top: auto !important;
    left: 12px !important;
    right: 12px !important;
    max-width: none !important;
    font-size: 13px !important;
  }

  /* ---------- Login (wider mobile padding) ---------- */
  /* Login already has its own @media query; nothing needed here */

  /* ---------- Misc ---------- */
  /* Prevent text selection on tap */
  .mobile-bottom-nav, .mobile-top-bar, .mos-header, .mos-actions {
    -webkit-user-select: none;
    user-select: none;
  }

  /* Force any flex row of inline-styled stat boxes to wrap */
  body.is-mobile [style*="display: flex"][style*="justify-content: space-between"] {
    flex-wrap: wrap;
  }

}

/* ============================================================
   Mobile-only helpers (NOT scoped by media query so JS can toggle)
   ============================================================ */

/* These elements are inserted into the DOM by mobile.js and should never
   be visible on desktop. We use the body.is-mobile class as a guard. */
.mobile-only { display: none; }
body.is-mobile .mobile-only { display: initial; }

.mobile-top-bar,
.mobile-bottom-nav,
.mobile-drawer,
.mobile-drawer-overlay,
.mobile-order-sheet,
.mobile-order-sheet-overlay,
.mobile-watchlist-sheet,
.mobile-chart-trade-bar {
  display: none;
}

body.is-mobile .mobile-top-bar { display: flex; }
body.is-mobile .mobile-bottom-nav { display: flex; }
body.is-mobile .mobile-drawer { display: flex; }
body.is-mobile .mobile-drawer-overlay { display: block; }
body.is-mobile .mobile-order-sheet { display: flex; }
body.is-mobile .mobile-order-sheet-overlay { display: block; }
body.is-mobile .mobile-watchlist-sheet { display: flex; }

/* Show inline chart trade bar only when Charts page is active */
body.is-mobile.page-charts-active .mobile-chart-trade-bar { display: flex; }