/* ============================================================
   Arbimax Mobile Pages — Unified Design System
   Build: 20260424_MOBILE_UNIFIED
   
   SCOPE: @media (max-width: 768px) ONLY
   PURPOSE: Apply compact dashboard design language to ALL pages
   ISOLATION: Every rule is scoped to mobile breakpoint — zero
              desktop bleed. Tablet (769px+) is fully unaffected.
   
   Design tokens (match mobile-dashboard.css):
     --mp-bg:        #0B0C10
     --mp-card:      rgba(255,255,255,0.02)
     --mp-border:    rgba(255,255,255,0.14)
     --mp-text:      #e2e8f0
     --mp-muted:     #9aa0b5
     --mp-accent:    #6AAEFF
     --mp-pos:       #10b981
     --mp-neg:       #ef4444
     --mp-warn:      #f59e0b
   ============================================================ */

/* ============================================================
   §0  ROOT TOKENS  (mobile-only injection)
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --mp-bg:       #0B0C10;
    --mp-card:     rgba(255,255,255,0.02);
    --mp-border:   rgba(255,255,255,0.14);
    --mp-text:     #e2e8f0;
    --mp-muted:    #9aa0b5;
    --mp-accent:   #6AAEFF;
    --mp-pos:      #10b981;
    --mp-neg:      #ef4444;
    --mp-warn:     #f59e0b;
    --mp-pad:      12px;
    --mp-radius:   10px;
    --mp-radius-sm: 7px;
    --mp-row-pad:  11px 12px;
    --mp-sec-font: 0.72rem;
    --mp-body-font: 0.84rem;
    --mp-val-font: 0.95rem;
    --mp-label-font: 0.7rem;
  }
}

/* ============================================================
   §1  WALLET PAGE  (.wallet-page, .trader-page-wallet)
   ============================================================ */
@media (max-width: 768px) {
  /* Page root */
  .wallet-page,
  .trader-page-wallet,
  .tw4-page {
    padding: var(--mp-pad) var(--mp-pad) 88px !important;
    direction: rtl !important;
    min-height: unset !important;
    background: transparent !important;
  }

  /* Page header — strip desktop title sizing */
  .wallet-page-header,
  .wallet-page .page-header,
  .trader-page-wallet .page-header,
  .tw4-header {
    margin-bottom: 12px !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }

  .wallet-page-title,
  .trader-page-wallet h2,
  .wallet-page h1,
  .wallet-page h2,
  .tw4-title {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    gap: 6px !important;
  }

  /* Remove huge icon from title */
  .wallet-page-title .icon,
  .wallet-page-title .wallet-icon,
  .trader-page-wallet h2 .icon,
  .tw4-title-icon {
    font-size: 16px !important;
  }

  /* Tab strip */
  .wallet-tabs,
  .wallet-page .tab-list,
  .trader-page-wallet .tab-list,
  .tw4-tabs {
    border: 1px solid var(--mp-border) !important;
    border-radius: var(--mp-radius) !important;
    overflow: hidden !important;
    display: flex !important;
    padding: 0 !important;
    background: transparent !important;
    gap: 0 !important;
    margin-bottom: 12px !important;
  }

  .wallet-tab,
  .wallet-page .tab-item,
  .trader-page-wallet .tab-item {
    flex: 1 !important;
    padding: 9px 6px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--mp-muted) !important;
    min-height: 44px !important;
  }

  .wallet-tab.active,
  .wallet-page .tab-item.active,
  .trader-page-wallet .tab-item.active {
    background: rgba(106,174,255,0.08) !important;
    color: var(--mp-accent) !important;
  }

  /* CEX account grid → single compact column */
  .cex-accounts-grid,
  .wallet-page .accounts-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .cex-account-card,
  .wallet-page .account-card {
    border-radius: var(--mp-radius) !important;
    transform: none !important;
  }

  .cex-account-card:hover,
  .wallet-page .account-card:hover {
    transform: none !important;
  }

  .cex-account-header,
  .wallet-page .account-card-header {
    padding: 10px 12px !important;
  }

  .cex-exchange-icon,
  .wallet-page .exchange-icon {
    width: 28px !important;
    height: 28px !important;
    font-size: 14px !important;
    border-radius: 7px !important;
  }

  .cex-account-name {
    font-size: 13px !important;
  }

  .cex-account-body,
  .wallet-page .account-card-body {
    padding: 10px 12px !important;
  }

  /* Balance rows */
  .cex-balance-row,
  .wallet-page .balance-row {
    padding: 8px 0 !important;
  }

  /* Asset row */
  .wallet-asset-row {
    padding: 10px 12px !important;
  }

  .wallet-asset-icon {
    width: 28px !important;
    height: 28px !important;
    font-size: 13px !important;
    border-radius: 50% !important;
  }

  .wallet-asset-amount {
    font-size: 13px !important;
  }

  .wallet-asset-name {
    font-size: 13px !important;
  }

  /* Assets empty state */
  .wallet-assets-empty .icon {
    font-size: 18px !important;
  }

  /* PnL grid → 2-col */
  .wallet-pnl-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .wallet-pnl-metric {
    padding: 10px !important;
  }

  .wallet-pnl-metric-value {
    font-size: 16px !important;
  }

  /* Modals → bottom sheet style */
  .wallet-modal-overlay {
    align-items: flex-end !important;
  }

  .wallet-modal {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: var(--mp-radius) var(--mp-radius) 0 0 !important;
    max-height: 88dvh !important;
  }

  .wallet-modal-header {
    padding: 14px 16px !important;
  }

  .wallet-modal-title {
    font-size: 15px !important;
  }

  .wallet-modal-body {
    padding: 16px !important;
  }

  .wallet-modal-footer {
    padding: 12px 16px !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  }

  /* DEX tab card */
  .dex-wallet-card,
  .wallet-page .dex-card {
    border-radius: var(--mp-radius) !important;
  }

  .dex-wallet-card:hover {
    transform: none !important;
  }

  /* Gas status rows */
  .wallet-gas-row,
  .gas-status-row {
    padding: 8px 12px !important;
    font-size: 0.76rem !important;
  }

  /* Summary KPI bar */
  .wallet-summary-bar,
  .wallet-kpi-bar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    border: 1px solid var(--mp-border) !important;
    border-radius: var(--mp-radius) !important;
    overflow: hidden !important;
    background: transparent !important;
    box-shadow: none !important;
    margin-bottom: 12px !important;
  }

  .wallet-summary-bar > *,
  .wallet-kpi-bar > * {
    border-left: 1px solid var(--mp-border) !important;
    border-bottom: 1px solid var(--mp-border) !important;
    padding: 10px 12px !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .wallet-summary-bar > *:nth-child(odd),
  .wallet-kpi-bar > *:nth-child(odd) {
    border-left: none !important;
  }

  .wallet-summary-bar > *:last-child,
  .wallet-summary-bar > *:nth-last-child(2),
  .wallet-kpi-bar > *:last-child,
  .wallet-kpi-bar > *:nth-last-child(2) {
    border-bottom: none !important;
  }
}

/* ============================================================
   §2  BOTS PAGE  (.bots-page)
   ============================================================ */
@media (max-width: 768px) {
  .bots-page {
    padding: var(--mp-pad) var(--mp-pad) 88px !important;
    min-height: unset !important;
    direction: rtl !important;
    background: transparent !important;
  }

  .bots-page-header {
    margin-bottom: 12px !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }

  .bots-page-title {
    font-size: 0.9rem !important;
    margin: 0 !important;
  }

  /* Bots grid → single column compact */
  .bots-page .bots-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Bot card compact */
  .bots-page .bot-card {
    border-radius: var(--mp-radius) !important;
    transform: none !important;
    animation: none !important;
  }

  .bots-page .bot-card:hover {
    transform: none !important;
  }

  /* Status bar thin */
  .bots-page .bot-card .status-bar {
    height: 2px !important;
  }

  .bots-page .bot-card-content {
    padding: 12px !important;
  }

  .bots-page .bot-card-header {
    margin-bottom: 10px !important;
  }

  .bots-page .bot-card-name {
    font-size: 14px !important;
  }

  .bots-page .bot-card-id {
    font-size: 9px !important;
    padding: 2px 6px !important;
  }

  /* Stats row within bot card */
  .bots-page .bot-stats-row,
  .bots-page .bot-metrics-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-top: 10px !important;
  }

  .bots-page .bot-stat,
  .bots-page .bot-metric {
    padding: 8px 10px !important;
    border-radius: var(--mp-radius-sm) !important;
  }

  .bots-page .bot-stat-label,
  .bots-page .bot-metric-label {
    font-size: 0.68rem !important;
  }

  .bots-page .bot-stat-value,
  .bots-page .bot-metric-value {
    font-size: 0.88rem !important;
  }

  /* Action buttons inside card */
  .bots-page .bot-card-actions,
  .bots-page .bot-actions {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    margin-top: 10px !important;
  }

  .bots-page .btn-bot,
  .bots-page .bot-action-btn {
    flex: 1 !important;
    font-size: 0.75rem !important;
    padding: 8px 4px !important;
    min-height: 36px !important;
    border-radius: var(--mp-radius-sm) !important;
  }

  /* Modal → bottom sheet */
  .bot-inspection-modal .modal-backdrop,
  .bot-modal-backdrop {
    align-items: flex-end !important;
  }

  .bot-modal-dialog {
    width: 100% !important;
    max-height: 92dvh !important;
    border-radius: var(--mp-radius) var(--mp-radius) 0 0 !important;
    margin: 0 !important;
  }

  .bot-modal-header {
    padding: 14px 16px !important;
  }

  .bot-modal-title {
    font-size: 15px !important;
  }

  .bot-modal-section {
    padding: 14px 16px !important;
  }

  .bot-modal-stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .bot-modal-stat {
    padding: 10px !important;
    border-radius: var(--mp-radius-sm) !important;
  }

  .bot-modal-stat-label {
    font-size: 0.68rem !important;
  }

  .bot-modal-stat-value {
    font-size: 15px !important;
  }

  .bot-modal-footer {
    padding: 12px 16px !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .bot-modal-footer .btn-bot {
    flex: 1 1 40% !important;
    font-size: 0.78rem !important;
    min-height: 40px !important;
  }

  .bot-modal-account-icon {
    width: 28px !important;
    height: 28px !important;
    font-size: 13px !important;
    border-radius: 7px !important;
  }

  /* Filters strip */
  .bots-page .bots-filters,
  .bots-page .filter-row {
    gap: 8px !important;
    margin-bottom: 10px !important;
  }

  .bots-page .filter-btn,
  .bots-page .status-filter-btn {
    font-size: 0.75rem !important;
    padding: 6px 10px !important;
    min-height: 36px !important;
    border-radius: 999px !important;
  }

  /* Summary stats strip */
  .bots-page .bots-summary,
  .bots-page .summary-row {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    border: 1px solid var(--mp-border) !important;
    border-radius: var(--mp-radius) !important;
    overflow: hidden !important;
    margin-bottom: 12px !important;
    background: transparent !important;
  }

  .bots-page .bots-summary > *,
  .bots-page .summary-row > * {
    border-left: 1px solid var(--mp-border) !important;
    padding: 8px 6px !important;
    border-radius: 0 !important;
    background: transparent !important;
    text-align: center !important;
  }

  .bots-page .bots-summary > *:first-child,
  .bots-page .summary-row > *:first-child {
    border-left: none !important;
  }
}

/* ============================================================
   §3  MARKETS PAGE  (.am-markets-v3)
   ============================================================ */
@media (max-width: 768px) {
  .am-markets-v3 {
    padding: var(--mp-pad) var(--mp-pad) 88px !important;
    gap: 12px !important;
    background: transparent !important;
  }

  /* Header */
  .am-markets-v3 .am-header,
  .am-markets-v3 .am-title {
    font-size: 0.9rem !important;
    margin-bottom: 0 !important;
  }

  /* KPI strip */
  .am-markets-v3 .am-kpis {
    grid-template-columns: repeat(2, 1fr) !important;
    border: 1px solid var(--mp-border) !important;
    border-radius: var(--mp-radius) !important;
    overflow: hidden !important;
    gap: 0 !important;
    background: transparent !important;
  }

  .am-markets-v3 .am-kpi {
    padding: 10px 12px !important;
    border-left: 1px solid var(--mp-border) !important;
    border-bottom: 1px solid var(--mp-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .am-markets-v3 .am-kpi:nth-child(odd) {
    border-left: none !important;
  }

  .am-markets-v3 .am-kpi:nth-last-child(1),
  .am-markets-v3 .am-kpi:nth-last-child(2) {
    border-bottom: none !important;
  }

  /* Filters single column */
  .am-markets-v3 .am-filters {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* Table → card list */
  .am-markets-v3 .am-table thead { display: none !important; }

  .am-markets-v3 .am-table,
  .am-markets-v3 .am-table tbody,
  .am-markets-v3 .am-table tr,
  .am-markets-v3 .am-table td {
    display: block !important;
    width: 100% !important;
    border: none !important;
  }

  .am-markets-v3 .am-table tr {
    border: 1px solid var(--mp-border) !important;
    border-radius: var(--mp-radius) !important;
    padding: 10px 12px !important;
    margin-bottom: 8px !important;
    background: var(--mp-card) !important;
  }

  .am-markets-v3 .am-table td {
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    padding: 7px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 0.8rem !important;
  }

  .am-markets-v3 .am-table td:last-child {
    border-bottom: none !important;
  }

  .am-markets-v3 .am-table td::before {
    content: attr(data-label) !important;
    font-size: 0.68rem !important;
    color: var(--mp-muted) !important;
    font-weight: 600 !important;
  }

  .am-markets-v3 .pair-cell {
    gap: 8px !important;
  }

  /* Pair icon */
  .am-markets-v3 .pair-icon,
  .am-markets-v3 .coin-icon {
    width: 24px !important;
    height: 24px !important;
    font-size: 12px !important;
    border-radius: 50% !important;
  }

  /* Spread badges */
  .am-markets-v3 .spread-badge {
    padding: 3px 8px !important;
    font-size: 0.72rem !important;
  }

  /* Market modal → bottom sheet */
  .am-modal-backdrop {
    align-items: flex-end !important;
  }

  .am-modal-dialog {
    width: 100% !important;
    max-height: 92dvh !important;
    border-radius: var(--mp-radius) var(--mp-radius) 0 0 !important;
    margin: 0 !important;
  }

  .am-modal-header {
    padding: 14px 16px !important;
  }

  .am-modal-title {
    font-size: 15px !important;
  }

  .am-modal-stats-section,
  .am-modal-chart-section {
    padding: 12px 16px !important;
  }

  .am-modal-stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
}

/* ============================================================
   §4  OPERATIONS PAGE  (.operations-page)
   ============================================================ */
@media (max-width: 768px) {
  .operations-page {
    padding: var(--mp-pad) var(--mp-pad) 88px !important;
    min-height: unset !important;
    direction: rtl !important;
  }

  /* Header */
  .operations-page .ops-page-header {
    flex-direction: row !important;
    align-items: center !important;
    margin-bottom: 12px !important;
    flex-wrap: nowrap !important;
  }

  .operations-page .ops-page-title {
    font-size: 0.9rem !important;
    margin: 0 !important;
  }

  /* Summary stats */
  .operations-page .ops-summary-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    border: 1px solid var(--mp-border) !important;
    border-radius: var(--mp-radius) !important;
    overflow: hidden !important;
    gap: 0 !important;
    background: transparent !important;
    margin-bottom: 12px !important;
  }

  .operations-page .ops-summary-stat {
    padding: 10px 12px !important;
    border-left: 1px solid var(--mp-border) !important;
    border-bottom: 1px solid var(--mp-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .operations-page .ops-summary-stat:nth-child(odd) {
    border-left: none !important;
  }

  /* Filters */
  .operations-page .ops-filters-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
  }

  /* Operations table → compact list */
  .operations-page .op-table,
  .operations-page table {
    display: block !important;
    overflow-x: hidden !important;
  }

  .operations-page .op-table thead,
  .operations-page table thead {
    display: none !important;
  }

  .operations-page .op-table tbody,
  .operations-page table tbody {
    display: block !important;
    border: 1px solid var(--mp-border) !important;
    border-radius: var(--mp-radius) !important;
    overflow: hidden !important;
  }

  .operations-page .op-row,
  .operations-page tbody tr {
    display: flex !important;
    flex-direction: column !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--mp-border) !important;
    background: transparent !important;
    gap: 4px !important;
  }

  .operations-page .op-row:last-child,
  .operations-page tbody tr:last-child {
    border-bottom: none !important;
  }

  /* Op row internal */
  .operations-page .op-row-primary,
  .operations-page .op-primary {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
  }

  .operations-page .op-row-meta,
  .operations-page .op-meta {
    font-size: 0.7rem !important;
    color: var(--mp-muted) !important;
  }

  /* Status capsule */
  .operations-page .op-status-capsule,
  .operations-page .op-status {
    padding: 2px 8px !important;
    border-radius: 999px !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
  }

  /* Op modal → bottom sheet */
  .op-modal-backdrop {
    align-items: flex-end !important;
  }

  .op-modal-dialog {
    width: 100% !important;
    max-height: 92dvh !important;
    border-radius: var(--mp-radius) var(--mp-radius) 0 0 !important;
    margin: 0 !important;
  }

  .op-modal-header,
  .op-modal-section,
  .op-modal-footer {
    padding: 12px 16px !important;
  }

  .op-modal-footer {
    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  }

  .op-modal-info-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
}

/* ============================================================
   §5  TRADES PAGE  (.trades-pro, .tp-*)
   ============================================================ */
@media (max-width: 768px) {
  .trades-pro {
    padding: var(--mp-pad) var(--mp-pad) 88px !important;
    direction: rtl !important;
    gap: 12px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Header */
  .tp-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 12px !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }

  .tp-header h2,
  .tp-header-left h2 {
    font-size: 0.9rem !important;
    margin: 0 !important;
  }

  /* KPI row compact */
  .tp-kpi-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    border: 1px solid var(--mp-border) !important;
    border-radius: var(--mp-radius) !important;
    overflow: hidden !important;
    gap: 0 !important;
    background: transparent !important;
  }

  .tp-kpi {
    padding: 10px 12px !important;
    border-left: 1px solid var(--mp-border) !important;
    border-bottom: 1px solid var(--mp-border) !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .tp-kpi:nth-child(odd) {
    border-left: none !important;
  }

  .tp-kpi:nth-last-child(1),
  .tp-kpi:nth-last-child(2) {
    border-bottom: none !important;
  }

  .tp-kpi-label {
    font-size: 0.68rem !important;
  }

  .tp-kpi-value {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
  }

  /* Tabs */
  .tp-tabs {
    display: flex !important;
    border: 1px solid var(--mp-border) !important;
    border-radius: var(--mp-radius) !important;
    overflow: hidden !important;
    gap: 0 !important;
    background: transparent !important;
  }

  .tp-tab {
    flex: 1 !important;
    padding: 9px 4px !important;
    font-size: 0.75rem !important;
    border: none !important;
    border-radius: 0 !important;
    min-height: 44px !important;
    background: transparent !important;
    color: var(--mp-muted) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
  }

  .tp-tab.active {
    background: rgba(106,174,255,0.08) !important;
    color: var(--mp-accent) !important;
  }

  .tp-tab-count {
    font-size: 0.65rem !important;
    padding: 1px 5px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.08) !important;
  }

  /* Venue icon */
  .tp-venue-icon {
    font-size: 12px !important;
  }

  /* Filters */
  .tp-filters {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .tp-filter {
    width: 100% !important;
  }

  .tp-input,
  .tp-select {
    width: 100% !important;
    font-size: 16px !important;
    min-height: 44px !important;
    border-radius: var(--mp-radius-sm) !important;
  }

  /* Panel / table wrapper */
  .tp-panel {
    border-radius: var(--mp-radius) !important;
    border: 1px solid var(--mp-border) !important;
    overflow: hidden !important;
    background: var(--mp-card) !important;
  }

  /* Trades table → compact rows */
  .tp-panel table thead {
    display: none !important;
  }

  .tp-panel table,
  .tp-panel table tbody {
    display: block !important;
    width: 100% !important;
  }

  .tp-panel table tbody tr {
    display: flex !important;
    flex-direction: column !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--mp-border) !important;
    gap: 4px !important;
    background: transparent !important;
  }

  .tp-panel table tbody tr:last-child {
    border-bottom: none !important;
  }

  .tp-panel table tbody td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 3px 0 !important;
    font-size: 0.78rem !important;
    border: none !important;
  }

  .tp-panel table tbody td::before {
    content: attr(data-label) !important;
    font-size: 0.68rem !important;
    color: var(--mp-muted) !important;
  }

  /* Compact button */
  .tp-btn {
    min-height: 36px !important;
    padding: 6px 12px !important;
    font-size: 0.78rem !important;
    border-radius: var(--mp-radius-sm) !important;
  }
}

/* ============================================================
   §6  ADMIN PANEL  (.admin-panel-root)
   ============================================================ */
@media (max-width: 768px) {
  .admin-panel-root {
    padding: var(--mp-pad) var(--mp-pad) 88px !important;
    min-height: unset !important;
  }

  /* Remove pseudo-element background effects (perf on mobile) */
  .admin-panel-root::before {
    display: none !important;
  }

  /* Admin panel tabs → strip */
  .admin-panel-root .ap-tabs,
  .admin-panel-root .tab-nav {
    display: flex !important;
    border: 1px solid var(--mp-border) !important;
    border-radius: var(--mp-radius) !important;
    overflow: hidden !important;
    gap: 0 !important;
    background: transparent !important;
    margin-bottom: 12px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  .admin-panel-root .ap-tab,
  .admin-panel-root .tab-nav-item {
    flex: 1 1 auto !important;
    padding: 9px 8px !important;
    font-size: 0.72rem !important;
    white-space: nowrap !important;
    border: none !important;
    border-radius: 0 !important;
    min-height: 44px !important;
    background: transparent !important;
    color: var(--mp-muted) !important;
  }

  .admin-panel-root .ap-tab.active,
  .admin-panel-root .tab-nav-item.active {
    background: rgba(106,174,255,0.08) !important;
    color: var(--mp-accent) !important;
  }

  /* Admin stat grid */
  .admin-panel-root .ap-stats-grid,
  .admin-panel-root .admin-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    border: 1px solid var(--mp-border) !important;
    border-radius: var(--mp-radius) !important;
    overflow: hidden !important;
    gap: 0 !important;
    background: transparent !important;
    margin-bottom: 12px !important;
  }

  .admin-panel-root .ap-stat,
  .admin-panel-root .admin-stat {
    padding: 10px 12px !important;
    border-left: 1px solid var(--mp-border) !important;
    border-bottom: 1px solid var(--mp-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .admin-panel-root .ap-stat:nth-child(odd),
  .admin-panel-root .admin-stat:nth-child(odd) {
    border-left: none !important;
  }

  /* Admin tables → compact */
  .admin-panel-root table:not(.keep-desktop) thead {
    display: none !important;
  }

  .admin-panel-root table:not(.keep-desktop),
  .admin-panel-root table:not(.keep-desktop) tbody {
    display: block !important;
    width: 100% !important;
  }

  .admin-panel-root table:not(.keep-desktop) tbody tr {
    display: flex !important;
    flex-direction: column !important;
    padding: 10px 12px !important;
    border: 1px solid var(--mp-border) !important;
    border-radius: var(--mp-radius) !important;
    margin-bottom: 8px !important;
    background: var(--mp-card) !important;
    gap: 4px !important;
  }

  .admin-panel-root table:not(.keep-desktop) tbody td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 3px 0 !important;
    font-size: 0.78rem !important;
    border: none !important;
  }

  .admin-panel-root table:not(.keep-desktop) tbody td::before {
    content: attr(data-label) !important;
    font-size: 0.68rem !important;
    color: var(--mp-muted) !important;
  }

  /* Admin section headers */
  .admin-panel-root .ap-section-title,
  .admin-panel-root .section-title {
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    color: var(--mp-muted) !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    padding: 0 0 8px !important;
    margin-bottom: 10px !important;
    border-bottom: 1px solid var(--mp-border) !important;
  }
}

/* ============================================================
   §7  ADMIN OVERVIEW  (.admin-overview, .ap-overview)
   ============================================================ */
@media (max-width: 768px) {
  .admin-overview,
  .ap-overview-root {
    padding: var(--mp-pad) var(--mp-pad) 88px !important;
    gap: 12px !important;
  }

  /* Charts shrink to avoid overflow */
  .admin-overview .chart-container,
  .admin-overview canvas {
    max-height: 180px !important;
    width: 100% !important;
  }

  /* Overview KPI row */
  .admin-overview .kpi-row,
  .admin-overview .metrics-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    border: 1px solid var(--mp-border) !important;
    border-radius: var(--mp-radius) !important;
    overflow: hidden !important;
    gap: 0 !important;
    background: transparent !important;
    margin-bottom: 12px !important;
  }

  .admin-overview .kpi-item,
  .admin-overview .metric-item {
    padding: 10px 12px !important;
    border-left: 1px solid var(--mp-border) !important;
    border-bottom: 1px solid var(--mp-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .admin-overview .kpi-item:nth-child(odd),
  .admin-overview .metric-item:nth-child(odd) {
    border-left: none !important;
  }
}

/* ============================================================
   §8  ADMIN USERS  (.admin-users, .users-page)
   ============================================================ */
@media (max-width: 768px) {
  .admin-users,
  .users-page {
    padding: var(--mp-pad) var(--mp-pad) 88px !important;
  }

  /* User table → card per row */
  .admin-users .users-table,
  .users-page table {
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .admin-users .users-table thead,
  .users-page table thead {
    display: none !important;
  }

  .admin-users .users-table tbody,
  .users-page table tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .admin-users .user-row,
  .users-page table tbody tr {
    display: flex !important;
    flex-direction: column !important;
    padding: 10px 12px !important;
    border: 1px solid var(--mp-border) !important;
    border-radius: var(--mp-radius) !important;
    background: var(--mp-card) !important;
    gap: 6px !important;
  }

  /* User name + role header row */
  .admin-users .user-row-header,
  .users-page .user-name-cell {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
  }

  /* User avatar → small */
  .admin-users .user-avatar,
  .users-page .avatar {
    width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
    border-radius: 50% !important;
  }

  /* Action buttons */
  .admin-users .user-actions,
  .users-page .row-actions {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }

  .admin-users .btn-user,
  .users-page .action-btn {
    font-size: 0.72rem !important;
    padding: 6px 10px !important;
    min-height: 34px !important;
    border-radius: var(--mp-radius-sm) !important;
  }
}

/* ============================================================
   §9  ADMIN AUDIT / SECURITY LOGS  (.audit-logs-page)
   ============================================================ */
@media (max-width: 768px) {
  .audit-logs-page,
  .admin-audit {
    padding: var(--mp-pad) var(--mp-pad) 88px !important;
  }

  /* Audit table → compact rows */
  .audit-logs-page .audit-table thead,
  .admin-audit table thead {
    display: none !important;
  }

  .audit-logs-page .audit-table,
  .audit-logs-page .audit-table tbody,
  .admin-audit table,
  .admin-audit table tbody {
    display: block !important;
    width: 100% !important;
  }

  .audit-logs-page .audit-row,
  .admin-audit table tbody tr {
    display: flex !important;
    flex-direction: column !important;
    padding: 10px 12px !important;
    border: 1px solid var(--mp-border) !important;
    border-radius: var(--mp-radius) !important;
    margin-bottom: 8px !important;
    background: var(--mp-card) !important;
    gap: 4px !important;
  }

  /* Audit event header */
  .audit-logs-page .audit-row-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
  }

  /* Audit badge */
  .audit-logs-page .audit-badge,
  .audit-badge {
    padding: 2px 7px !important;
    font-size: 0.68rem !important;
    border-radius: 999px !important;
  }

  /* Audit filters */
  .audit-logs-page .audit-filters {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
  }
}

/* ============================================================
   §10  OPS CONTROL  (.admin-operations-control, .aoc-*, actual class from opsControl.js)
   ============================================================ */
@media (max-width: 768px) {
  .admin-operations-control,
  .ops-control-page,
  .ops-root,
  .oc-root {
    padding: var(--mp-pad) var(--mp-pad) 88px !important;
    gap: 12px !important;
    direction: rtl !important;
  }

  /* Ops header */
  .admin-operations-control .aoc-header,
  .ops-control-page .oc-header,
  .oc-header {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    margin-bottom: 12px !important;
  }

  .oc-title,
  .aoc-title {
    font-size: 0.9rem !important;
  }

  /* Ops stat row */
  .aoc-global-grid,
  .oc-stats-row,
  .ops-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    border: 1px solid var(--mp-border) !important;
    border-radius: var(--mp-radius) !important;
    overflow: hidden !important;
    gap: 0 !important;
    background: transparent !important;
  }

  .oc-stat,
  .ops-stat {
    padding: 10px 12px !important;
    border-left: 1px solid var(--mp-border) !important;
    border-bottom: 1px solid var(--mp-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .oc-stat:nth-child(odd),
  .ops-stat:nth-child(odd) {
    border-left: none !important;
  }

  /* Ops log table → compact rows */
  .oc-log-table,
  .ops-log table {
    display: block !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  .oc-log-table thead,
  .ops-log table thead {
    display: none !important;
  }

  .oc-log-table tbody,
  .ops-log table tbody {
    display: block !important;
    border: 1px solid var(--mp-border) !important;
    border-radius: var(--mp-radius) !important;
    overflow: hidden !important;
  }

  .oc-log-row,
  .ops-log table tbody tr {
    display: flex !important;
    align-items: center !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--mp-border) !important;
    font-size: 0.78rem !important;
    gap: 8px !important;
  }

  .oc-log-row:last-child,
  .ops-log table tbody tr:last-child {
    border-bottom: none !important;
  }

  /* Ops action panels */
  .oc-action-panel,
  .ops-action-card {
    border-radius: var(--mp-radius) !important;
    padding: 12px !important;
  }

  .oc-action-title {
    font-size: 0.8rem !important;
    margin-bottom: 8px !important;
  }

  /* Override huge charts */
  .oc-chart-container,
  .ops-chart {
    max-height: 200px !important;
    width: 100% !important;
  }
}

/* ============================================================
   §11  SYSTEM / DIAGNOSTICS  (.system-page-root, inline-styled — class added via system.js)
   ============================================================ */
@media (max-width: 768px) {
  .system-page-root,
  .diagnostics-page,
  .system-page {
    padding: var(--mp-pad) var(--mp-pad) 88px !important;
    gap: 12px !important;
    direction: rtl !important;
  }

  /* Diag header */
  .system-page-root > div[style*="max-width"] > div:first-child,
  .diagnostics-page .page-header,
  .system-page .page-header {
    margin-bottom: 12px !important;
    flex-wrap: nowrap !important;
  }

  .diagnostics-page h1,
  .system-page h1,
  .diagnostics-page .page-title,
  .system-page .page-title {
    font-size: 0.9rem !important;
    margin: 0 !important;
  }

  /* Health grid */
  .diagnostics-page .health-grid,
  .system-page .health-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* system-page-root: override inline-styled KPI grid */
  .system-page-root > div[style*="grid-template-columns"],
  .system-page-root > div[style*="grid-template-columns:repeat"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* system-page-root: compact inline stat cards */
  .system-page-root > div[style*="grid-template-columns"] > div,
  .system-page-root > div[style*="grid-template-columns:repeat"] > div {
    padding: 10px 12px !important;
    border-radius: var(--mp-radius) !important;
  }

  /* system-page-root: stat values */
  .system-page-root div[style*="font-size:22px"],
  .system-page-root div[style*="font-size: 22px"] {
    font-size: 1.1rem !important;
  }

  /* system-page-root: service table */
  .system-page-root table {
    font-size: 0.78rem !important;
    width: 100% !important;
  }

  .system-page-root table thead {
    display: none !important;
  }

  .system-page-root table tbody tr {
    display: flex !important;
    flex-wrap: wrap !important;
    padding: 8px 10px !important;
    border-bottom: 1px solid var(--mp-border) !important;
    gap: 6px !important;
  }

  .system-page-root table td {
    display: block !important;
    border: none !important;
    padding: 0 !important;
  }

  /* Health card */
  .diagnostics-page .health-card,
  .system-page .health-card,
  .diag-card {
    padding: 10px 12px !important;
    border-radius: var(--mp-radius) !important;
  }

  /* Health card icon */
  .diagnostics-page .health-icon,
  .system-page .health-icon,
  .diag-icon {
    font-size: 16px !important;
    width: 28px !important;
    height: 28px !important;
  }

  /* Log/event sections */
  .diagnostics-page .log-section,
  .system-page .log-section {
    border-radius: var(--mp-radius) !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--mp-border) !important;
  }

  .diagnostics-page .log-row,
  .system-page .log-row {
    display: flex !important;
    padding: 9px 12px !important;
    font-size: 0.78rem !important;
    border-bottom: 1px solid var(--mp-border) !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  /* Charts */
  .diagnostics-page canvas,
  .system-page canvas {
    max-height: 160px !important;
    max-width: 100% !important;
  }
}

/* ============================================================
   §12  PORTFOLIO ADVANCED  (.pfa-container — actual class from portfolioAdvanced.js)
   ============================================================ */
@media (max-width: 768px) {
  .pfa-container,
  .portfolio-advanced-page,
  .portfolio-page {
    padding: var(--mp-pad) var(--mp-pad) 88px !important;
    gap: 12px !important;
    direction: rtl !important;
  }

  .pfa-container .pfa-header,
  .portfolio-advanced-page .page-header,
  .portfolio-page .page-header {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    margin-bottom: 12px !important;
  }

  .pfa-header-title,
  .portfolio-advanced-page h1,
  .portfolio-page h1 {
    font-size: 0.9rem !important;
    margin: 0 !important;
  }

  /* PFA filter select + actions */
  .pfa-header-actions {
    gap: 6px !important;
    flex-wrap: wrap !important;
  }

  .pfa-filter-select,
  .pfa-btn {
    font-size: 0.78rem !important;
    padding: 6px 10px !important;
  }

  /* Allocation chart container */
  .portfolio-advanced-page .chart-wrap,
  .portfolio-page .chart-wrap,
  .portfolio-chart {
    max-height: 200px !important;
    width: 100% !important;
  }

  /* Holdings table */
  .portfolio-advanced-page .holdings-table thead,
  .portfolio-page table thead {
    display: none !important;
  }

  .portfolio-advanced-page .holdings-table,
  .portfolio-advanced-page .holdings-table tbody,
  .portfolio-page table,
  .portfolio-page table tbody {
    display: block !important;
    width: 100% !important;
  }

  .portfolio-advanced-page .holding-row,
  .portfolio-page table tbody tr {
    display: flex !important;
    align-items: center !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--mp-border) !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
  }

  /* Holding icon */
  .portfolio-advanced-page .holding-icon {
    width: 28px !important;
    height: 28px !important;
    font-size: 13px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
  }

  .portfolio-advanced-page .holding-name {
    font-size: 0.84rem !important;
  }

  .portfolio-advanced-page .holding-value {
    font-size: 0.84rem !important;
    font-weight: 700 !important;
  }
}

/* ============================================================
   §13  SETTINGS  (.admin-settings, .settings-page)
   ============================================================ */
@media (max-width: 768px) {
  .admin-settings,
  .settings-page {
    padding: var(--mp-pad) var(--mp-pad) 88px !important;
    gap: 12px !important;
    direction: rtl !important;
  }

  /* Settings section card */
  .admin-settings .settings-section,
  .settings-page .settings-section {
    border: 1px solid var(--mp-border) !important;
    border-radius: var(--mp-radius) !important;
    overflow: hidden !important;
    margin-bottom: 12px !important;
  }

  /* Section header */
  .admin-settings .settings-section-header,
  .settings-page .settings-section-header {
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--mp-border) !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    color: var(--mp-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
  }

  /* Settings row */
  .admin-settings .settings-row,
  .settings-page .settings-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px !important;
    border-bottom: 1px solid var(--mp-border) !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
  }

  .admin-settings .settings-row:last-child,
  .settings-page .settings-row:last-child {
    border-bottom: none !important;
  }

  .admin-settings .settings-label,
  .settings-page .settings-label {
    font-size: 0.84rem !important;
    flex: 1 !important;
  }

  .admin-settings .settings-meta,
  .settings-page .settings-meta {
    font-size: 0.7rem !important;
    color: var(--mp-muted) !important;
  }

  /* Toggle switches maintain size */
  .admin-settings .toggle,
  .settings-page .toggle {
    flex-shrink: 0 !important;
  }

  /* Settings form: full width inputs */
  .admin-settings .form-group,
  .settings-page .form-group {
    padding: 12px !important;
    border-bottom: 1px solid var(--mp-border) !important;
  }

  .admin-settings .form-input,
  .settings-page .form-input,
  .admin-settings input,
  .settings-page input,
  .admin-settings select,
  .settings-page select {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
    min-height: 44px !important;
  }

  /* Save button */
  .admin-settings .save-btn,
  .settings-page .save-btn {
    width: 100% !important;
    min-height: 46px !important;
    font-size: 0.9rem !important;
    border-radius: var(--mp-radius) !important;
    margin: 12px 0 !important;
  }
}

/* ============================================================
   §14  ADMIN DRAWER PAGES  (crown-opened admin routes)
         Apply same compact system for all admin-panel sub-pages
   ============================================================ */
@media (max-width: 768px) {
  /* Exchange accounts */
  .exchange-accounts-page {
    padding: var(--mp-pad) var(--mp-pad) 88px !important;
    gap: 12px !important;
  }

  .exchange-accounts-page .accounts-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .exchange-accounts-page .exchange-card {
    border-radius: var(--mp-radius) !important;
  }

  .exchange-accounts-page .exchange-icon {
    width: 28px !important;
    height: 28px !important;
    font-size: 14px !important;
    border-radius: 7px !important;
  }

  /* Risk control */
  .risk-control-page {
    padding: var(--mp-pad) var(--mp-pad) 88px !important;
    gap: 12px !important;
  }

  .risk-control-page .risk-params-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .risk-control-page .risk-param-card {
    padding: 12px !important;
    border-radius: var(--mp-radius) !important;
  }

  /* Bots admin */
  .bots-admin-page {
    padding: var(--mp-pad) var(--mp-pad) 88px !important;
  }

  .bots-admin-page .admin-bots-table thead {
    display: none !important;
  }

  .bots-admin-page .admin-bots-table,
  .bots-admin-page .admin-bots-table tbody {
    display: block !important;
    width: 100% !important;
  }

  .bots-admin-page .admin-bots-table tbody tr {
    display: flex !important;
    flex-direction: column !important;
    padding: 10px 12px !important;
    border: 1px solid var(--mp-border) !important;
    border-radius: var(--mp-radius) !important;
    margin-bottom: 8px !important;
    gap: 4px !important;
  }

  /* Wallet advanced */
  .wallet-advanced-page {
    padding: var(--mp-pad) var(--mp-pad) 88px !important;
    gap: 12px !important;
  }

  .wallet-advanced-page .wa-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

/* ============================================================
   §15  MODALS — GLOBAL BOTTOM SHEET BEHAVIOR
   ============================================================ */
@media (max-width: 768px) {
  /* All modal overlays → align to bottom */
  .modal-backdrop,
  .modal-overlay,
  [class*="-modal-backdrop"],
  [class*="-modal-overlay"] {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  /* All modal dialogs → full width bottom sheet */
  .modal,
  .modal-dialog,
  .modal-inner,
  [class*="-modal-dialog"]:not(.keep-center) {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: var(--mp-radius) var(--mp-radius) 0 0 !important;
    max-height: 92dvh !important;
    margin: 0 !important;
    animation-duration: 0.2s !important;
  }

  /* Modal footers — safe area padding */
  .modal-footer,
  [class*="-modal-footer"] {
    padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  }

  /* Scrollable modal bodies */
  .modal-body,
  [class*="-modal-body"],
  [class*="-modal-section"] {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ============================================================
   §16  TABLES — GLOBAL ANTI-OVERFLOW
   ============================================================ */
@media (max-width: 768px) {
  /* Any unwrapped table that hasn't been card-ified */
  #main-content table:not([class]) {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: var(--mp-radius) !important;
  }

  /* Data tables in scroll wrappers */
  .table-wrap,
  .table-responsive,
  .dp-table-wrap,
  .wallet-table-wrap,
  .data-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: var(--mp-radius) !important;
  }

  /* Prevent any table from expanding wider than viewport */
  table {
    max-width: 100% !important;
    word-break: break-word !important;
  }

  /* Table cells font scaling */
  td, th {
    font-size: clamp(0.7rem, 3vw, 0.84rem) !important;
    padding: 8px 10px !important;
  }
}

/* ============================================================
   §17  ICONS — GLOBAL SIZE CAPS
   ============================================================ */
@media (max-width: 768px) {
  /* Large decorative icon containers */
  .empty-state-icon,
  .page-hero-icon,
  .hero-icon,
  .icon-hero,
  .icon-xl,
  [class*="icon-big"],
  [class*="icon-large"] {
    font-size: 18px !important;
    width: 32px !important;
    height: 32px !important;
    line-height: 1 !important;
  }

  /* Empty state icons */
  .empty-icon,
  .no-data-icon,
  .empty-state .icon,
  .empty-state svg {
    width: 24px !important;
    height: 24px !important;
    font-size: 18px !important;
    opacity: 0.4 !important;
  }

  /* Oversized emoji-like icons */
  .emoji-icon,
  .status-icon-large {
    font-size: 18px !important;
  }

  /* Exchange/coin logos */
  .exchange-logo,
  .exchange-img,
  .coin-logo {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
  }

  /* Page title adjacent icons */
  .page-title .icon,
  h1 .icon,
  h2 .icon {
    font-size: 16px !important;
  }
}

/* ============================================================
   §18  CARDS — GLOBAL COMPACT TREATMENT
   ============================================================ */
@media (max-width: 768px) {
  /* Desktop cards that don't have a specific mobile class */
  .card:not([class*="m-"]):not([class*="am-"]) {
    border-radius: var(--mp-radius) !important;
    padding: 12px !important;
    margin-bottom: 10px !important;
    transform: none !important;
  }

  .card:not([class*="m-"]):not([class*="am-"]):hover {
    transform: none !important;
  }

  /* Card headers */
  .card-header {
    padding: 10px 12px !important;
    font-size: 0.84rem !important;
  }

  /* Card bodies */
  .card-body {
    padding: 12px !important;
  }

  /* Metric/KPI cards */
  .kpi-card,
  .metric-card,
  .stat-card {
    padding: 10px 12px !important;
    border-radius: var(--mp-radius) !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .kpi-card:hover,
  .metric-card:hover,
  .stat-card:hover {
    transform: none !important;
  }

  /* Large value text in cards */
  .kpi-value,
  .metric-value,
  .stat-value,
  .card-value-lg {
    font-size: clamp(1rem, 5vw, 1.3rem) !important;
  }

  /* Small labels */
  .kpi-label,
  .metric-label,
  .stat-label,
  .card-label {
    font-size: 0.7rem !important;
  }
}

/* ============================================================
   §19  BUTTONS — TOUCH-FRIENDLY COMPACT
   ============================================================ */
@media (max-width: 768px) {
  /* All page action buttons */
  .page-action-btn,
  .header-action-btn {
    font-size: 0.8rem !important;
    padding: 8px 14px !important;
    min-height: 40px !important;
    border-radius: var(--mp-radius-sm) !important;
  }

  /* Filter/tab buttons */
  .filter-btn,
  .tab-btn,
  .seg-btn {
    font-size: 0.75rem !important;
    padding: 7px 10px !important;
    min-height: 36px !important;
  }

  /* Destructive/primary CTAs */
  .btn-primary-mobile,
  .cta-btn {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 0.9rem !important;
    border-radius: var(--mp-radius) !important;
    margin-top: 8px !important;
  }

  /* Icon-only buttons */
  .icon-btn,
  .btn-icon-only {
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border-radius: var(--mp-radius-sm) !important;
  }
}

/* ============================================================
   §20  FORMS — MOBILE INPUT SAFETY
   ============================================================ */
@media (max-width: 768px) {
  /* Prevent iOS zoom on focus */
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  textarea,
  select {
    font-size: 16px !important;
    min-height: 44px !important;
  }

  /* Full width in forms */
  .form-row,
  .form-cols,
  .form-grid {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .form-group {
    margin-bottom: 12px !important;
  }

  /* Labels */
  .form-label,
  label {
    font-size: 0.8rem !important;
    margin-bottom: 6px !important;
  }

  /* Inline form action bar */
  .form-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .form-actions .btn {
    width: 100% !important;
    min-height: 46px !important;
  }
}

/* ============================================================
   §21  STATUS PILLS / BADGES — COMPACT UNIFORM
   ============================================================ */
@media (max-width: 768px) {
  .status-pill,
  .status-badge,
  .role-badge,
  .type-badge,
  [class*="-badge"]:not(.notification-badge) {
    padding: 2px 8px !important;
    font-size: 0.68rem !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
  }
}

/* ============================================================
   §22  CHARTS — OVERFLOW GUARD
   ============================================================ */
@media (max-width: 768px) {
  canvas,
  .chart-container,
  [id*="chart"]:not([id*="chartjs"]),
  [id*="Chart"]:not([class*="chartjs"]),
  .recharts-wrapper,
  .apexcharts-canvas {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Cap height to prevent charts from dominating mobile screen */
  .chart-container,
  .chart-wrap {
    max-height: 220px !important;
    overflow: hidden !important;
  }
}

/* ============================================================
   §23  NOTIFICATIONS / TOASTS — MOBILE POSITIONING
   ============================================================ */
@media (max-width: 768px) {
  .toast-container,
  .notification-container,
  #toast-container,
  [class*="toast-"] {
    left: var(--mp-pad) !important;
    right: var(--mp-pad) !important;
    bottom: calc(var(--mobnav-h, 64px) + var(--safe-bottom, 0px) + 12px) !important;
    top: auto !important;
    width: auto !important;
  }

  .toast,
  .notification {
    max-width: 100% !important;
    border-radius: var(--mp-radius) !important;
    font-size: 0.84rem !important;
  }
}

/* ============================================================
   §24  FLOATING CONTROLS — NON-BLOCKING
   ============================================================ */
@media (max-width: 768px) {
  /* Ensure floating action buttons clear the bottom nav */
  .fab,
  .floating-action-btn,
  [class*="fab-"] {
    bottom: calc(var(--mobnav-h, 64px) + var(--safe-bottom, 0px) + 12px) !important;
  }

  /* Scroll-to-top button */
  .scroll-to-top,
  #scroll-to-top,
  .back-to-top {
    bottom: calc(var(--mobnav-h, 64px) + var(--safe-bottom, 0px) + 12px) !important;
    right: var(--mp-pad) !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
  }
}

/* ============================================================
   §25  EMPTY STATES — COMPACT
   ============================================================ */
@media (max-width: 768px) {
  .empty-state,
  .no-data,
  .placeholder-state {
    padding: 24px var(--mp-pad) !important;
    text-align: center !important;
  }

  .empty-state .empty-icon,
  .empty-state .icon,
  .no-data .icon {
    font-size: 18px !important;
    margin-bottom: 8px !important;
    opacity: 0.4 !important;
  }

  .empty-state .empty-title,
  .no-data .title {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
  }

  .empty-state .empty-desc,
  .no-data .desc {
    font-size: 0.78rem !important;
    color: var(--mp-muted) !important;
    margin-bottom: 12px !important;
  }
}

/* ============================================================
   §26  SKELETON / LOADING STATES
   ============================================================ */
@media (max-width: 768px) {
  .skeleton-line {
    height: 12px !important;
    margin-bottom: 8px !important;
    border-radius: 4px !important;
  }

  .skeleton-card {
    height: 64px !important;
    border-radius: var(--mp-radius) !important;
  }

  .skeleton-row {
    height: 44px !important;
    border-radius: var(--mp-radius-sm) !important;
  }
}

/* ============================================================
   §27  UTILITY OVERRIDES — CLEANUP
   ============================================================ */
@media (max-width: 768px) {
  /* Kill any horizontal scroll at page level */
  #main-content > * {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* Kill hover transforms on touch devices */
  @media (hover: none) {
    *:hover {
      transform: none !important;
    }
  }

  /* Prevent grid children from overflowing */
  [class*="grid"] > * {
    min-width: 0 !important;
  }

  /* Flex children can shrink */
  [class*="flex"] > * {
    min-width: 0 !important;
  }

  /* Stop absolute/fixed elements going off-screen horizontally */
  .dropdown-menu,
  .popover,
  .tooltip-content {
    max-width: calc(100vw - 24px) !important;
  }

  /* Ensure all page-level padding handles safe area */
  [class*="-page"],
  [class*="-root"],
  [class*="-container"] {
    padding-inline: var(--mp-pad) !important;
  }
}

/* ============================================================
   §28  RTL CORRECTIONS — MOBILE SPECIFIC
   ============================================================ */
@media (max-width: 768px) {
  /* Direction lock on all page roots */
  .wallet-page,
  .trader-page-wallet,
  .bots-page,
  .am-markets-v3,
  .operations-page,
  .trades-pro,
  .admin-panel-root,
  .diagnostics-page,
  .system-page,
  .portfolio-advanced-page,
  .admin-settings,
  .settings-page {
    direction: rtl !important;
  }

  /* Flex rows: correct RTL direction */
  .wallet-page [class*="-row"],
  .bots-page [class*="-row"],
  .operations-page [class*="-row"],
  .trades-pro [class*="-row"] {
    direction: rtl !important;
  }

  /* Numeric/LTR values */
  .kpi-value,
  .stat-value,
  .metric-value,
  .tp-kpi-value,
  .m-kpi-value,
  .price,
  .amount,
  .pnl {
    direction: ltr !important;
    text-align: right !important;
    unicode-bidi: plaintext !important;
  }

  /* Monospace values */
  .hash,
  .address,
  .tx-id,
  .uid,
  [class*="hash"],
  [class*="address"] {
    direction: ltr !important;
    text-align: left !important;
    font-family: var(--font-mono, 'SFMono-Regular', 'Consolas', monospace) !important;
    font-size: 0.7rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 160px !important;
  }

  /* chevron arrows — flip for RTL navigation */
  .nav-chevron,
  .row-chevron {
    transform: scaleX(-1) !important;
  }
}

/* ============================================================
   §29  ACCOUNT PAGE  (.account-page-root)
   Inline-styled page — override via class added in account.js
   ============================================================ */
@media (max-width: 768px) {
  .account-page-root {
    max-width: unset !important;
    margin: 0 !important;
    padding: var(--mp-pad) var(--mp-pad) 88px !important;
    direction: rtl !important;
  }

  /* Section cards — compact */
  .account-page-root > div[style*="background:#131924"],
  .account-page-root > div[style*="background: #131924"] {
    background: var(--mp-card) !important;
    border: 1px solid var(--mp-border) !important;
    border-radius: var(--mp-radius) !important;
    padding: 14px !important;
    margin-bottom: 12px !important;
  }

  /* Section headings */
  .account-page-root h2[style] {
    font-size: 0.82rem !important;
    margin-bottom: 12px !important;
    color: var(--mp-muted) !important;
    font-weight: 600 !important;
  }

  /* 2-col grids — stay 2-col on mobile (small enough) */
  .account-page-root div[style*="grid-template-columns:1fr 1fr"],
  .account-page-root div[style*="grid-template-columns: 1fr 1fr"] {
    gap: 10px !important;
  }

  /* Labels */
  .account-page-root div[style*="color:#888"],
  .account-page-root div[style*="color: #888"] {
    font-size: 0.68rem !important;
    color: var(--mp-muted) !important;
  }

  /* Values */
  .account-page-root div[style*="font-size:15px"],
  .account-page-root div[style*="font-size: 15px"],
  .account-page-root div[style*="font-size:16px"] {
    font-size: 0.88rem !important;
  }

  /* Inputs */
  .account-page-root input[style] {
    font-size: 16px !important; /* prevent iOS zoom */
    padding: 10px 12px !important;
    border-radius: var(--mp-radius-sm) !important;
  }

  /* Buttons */
  .account-page-root button[style] {
    min-height: 40px !important;
    font-size: 0.82rem !important;
  }
}

/* ============================================================
   §30  SAFE AREA — CONTENT BOTTOM PADDING
   ============================================================ */
@media (max-width: 768px) {
  /* All page containers must clear bottom nav + safe area */
  [class*="-page"]:not(.modal):not(.overlay),
  [class*="-root"]:not(#am-mobile-nav):not(#am-admin-drawer) {
    padding-bottom: max(
      88px,
      calc(var(--mobnav-h, 64px) + var(--safe-bottom, 0px) + 16px)
    ) !important;
  }
}

/* ============================================================
   END OF FILE
   Build: 20260424_MOBILE_UNIFIED
   Pages covered: Wallet · Bots · Markets · Operations ·
                  Trades · Admin · Users · Audit · OpsControl ·
                  System · Portfolio · Settings · ExchangeAccounts ·
                  Account
   ============================================================ */