/* Phone & tablet layer. Loaded last; only applies at small widths. */
@media (max-width: 850px) {
  html, body { overflow-x: hidden; }
  input, select, textarea { font-size: 16px !important; } /* stops iOS zoom on focus */
  button, .btn, .table-action, [data-action] { min-height: 40px; }
  .table-wrap, .terminal-table #tradeTable { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 560px; }
  .modal, .dialog, [role="dialog"] { max-width: calc(100vw - 24px) !important; max-height: calc(100dvh - 24px); overflow-y: auto; }
  .nav { position: relative; }
  .navlinks.open { display: grid !important; grid-template-columns: 1fr; align-content: start; gap: 0; top: 74px; padding: 12px 18px 18px; border-bottom: 1px solid var(--line); box-shadow: 0 18px 35px color-mix(in oklab, var(--bg) 80%, transparent); }
  .navlinks.open > a { display: flex; align-items: center; min-height: 45px; padding: 0 4px; border-bottom: 1px solid var(--line); }
  .vx-mobile-account-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
  .vx-mobile-account-links .btn { min-height: 48px; padding: 10px 12px; font-size: 13px; }
}

@media (min-width: 851px) { .vx-mobile-account-links { display: none !important; } }

@media (max-width: 700px) {
  /* ---------- Terminal ---------- */
  .terminal-page .app-content { padding: 8px !important; }
  .terminal-page { --button-on-accent: #182413; }
  .terminal-page .pro-terminal { border-radius: 6px; overflow: visible; }
  .terminal-page .workspace-bar { flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
  .terminal-page .terminal-brand .workspace-divider, .terminal-page .terminal-brand > .label, .terminal-page .terminal-brand > .tag, .terminal-page .terminal-tools > .table-action { display: none !important; }
  .terminal-page .terminal-tools { width: 100%; justify-content: space-between; }
  .terminal-page .terminal-tools .mh-bar { flex: 1; min-width: 0; font-size: 12px; }
  .terminal-page .terminal-accountline { display: grid; grid-template-columns: minmax(0, 1fr); padding: 14px; gap: 12px; }
  .terminal-page .terminal-accountline strong { font-family: Sora, Manrope, var(--font), sans-serif; font-size: 28px; letter-spacing: 0; }
  .terminal-page #terminalMetrics { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; width: 100%; }
  .terminal-page #terminalMetrics .label { width: auto !important; font-size: 11px; }
  .terminal-page #terminalMetrics b { font-size: 14px; }

  #vxMobileTerminalNav { position: sticky; top: 0; z-index: 12; padding: 12px; background: var(--panel); border-bottom: 1px solid var(--line); font-family: Manrope, var(--font), sans-serif; }
  .vx-market-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 10px; }
  .vx-market-categories { display: grid; grid-template-columns: 1fr 1fr; min-width: 142px; padding: 3px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; }
  .vx-market-categories button { min-height: 38px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font: 600 12px/1 Manrope, var(--font), sans-serif; }
  .vx-market-categories button.active { background: var(--lime); color: var(--button-on-accent) !important; }
  .vx-symbol-picker { display: block; min-width: 0; color: var(--muted); font-size: 10px; }
  .vx-symbol-picker span { display: block; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0; }
  .vx-symbol-picker select { width: 100%; height: 44px; padding: 0 32px 0 10px; border: 1px solid var(--line); border-radius: 5px; background: var(--bg); color: var(--text); font: 650 15px/1 Sora, Manrope, sans-serif; }
  .vx-terminal-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 12px; border-bottom: 1px solid var(--line); }
  .vx-terminal-tabs button { min-width: 0; min-height: 43px; padding: 0 3px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font: 600 12px/1 Manrope, var(--font), sans-serif; }
  .vx-terminal-tabs button.active { color: var(--text); border-bottom-color: var(--lime); }
  .vx-terminal-tabs button span { display: inline-grid; min-width: 18px; height: 18px; margin-left: 2px; place-items: center; border-radius: 9px; background: var(--line); color: var(--text); font-size: 10px; }

  .terminal-page .pro-terminal .terminal-layout { display: block !important; }
  .terminal-page .watch-column, .terminal-page .chart-workspace, .terminal-page .order-panel, .terminal-page .terminal-table { display: none !important; }
  .terminal-page.vx-view-market .watch-column { display: block !important; min-height: 340px; }
  .terminal-page.vx-view-chart .chart-workspace { display: block !important; }
  .terminal-page.vx-view-trade .order-panel { display: flex !important; }
  .terminal-page.vx-view-positions .terminal-table { display: block !important; }
  .terminal-page .watch-head, .terminal-page .symbol-search, .terminal-page .watch-columns, .terminal-page .watch-detail { display: none !important; }
  .terminal-page .watchlist { display: grid !important; grid-template-columns: 1fr; overflow: visible; }
  .terminal-page .watchlist .symbol { width: 100%; min-height: 64px; padding: 12px 14px; }
  .terminal-page .watchlist .symbol strong { font: 650 14px/1 Sora, Manrope, sans-serif; }
  .terminal-page .watchlist .symbol small { margin-top: 5px; font-size: 11px; }
  .terminal-page .watchlist .quote-price { font-size: 15px; }

  .terminal-page .chart-controls { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); overflow: visible; gap: 5px !important; }
  .terminal-page .chart-controls > button { min-width: 0; padding-inline: 4px; }
  .terminal-page .chart-controls > .workspace-divider { display: none; }
  .terminal-page .chart-controls > button[data-action="indicator"], .terminal-page .chart-controls > button[data-pro="levels"] { grid-column: span 3; }
  .terminal-page .chart-title { padding: 14px !important; }
  .terminal-page .interactive-chart { height: 340px !important; min-height: 0 !important; touch-action: none !important; }
  .terminal-page .ohlc-line { font-size: 12px; overflow-x: auto; white-space: nowrap; }
  .terminal-page .chart-bottom span:last-child, .terminal-page .execution-strip > .label:last-child { display: none; }

  /* Order ticket full width, guardrails below it */
  .terminal-page .order-panel { flex-direction: column; gap: 18px; padding: 18px 14px; scroll-margin-top: 12px; }
  .terminal-page .order-panel > div, .terminal-page .order-panel .ticket-risk { width: 100% !important; max-width: none !important; border-left: 0 !important; padding-left: 0 !important; }
  .terminal-page .order-panel .ticket-risk { border-top: 1px solid var(--line); padding-top: 16px; }
  .terminal-page .ticket-title h3 { font: 650 17px/1.2 Sora, Manrope, sans-serif; }
  .terminal-page .buy-sell button { min-height: 72px; border-radius: 6px; }
  .terminal-page .buy-sell b { font-size: 22px; }
  .terminal-page .order-panel input, .terminal-page .order-panel select { min-height: 48px; }
  .terminal-page #orderForm button[type="submit"], .terminal-page #orderForm .btn { min-height: 52px; font-size: 15px; }

  /* Positions: bigger tabs and touch-friendly actions */
  .terminal-page .terminal-table { margin: 0; border: 0; border-radius: 0; scroll-margin-top: 12px; }
  .terminal-page .terminal-table .tabs { overflow-x: auto; flex-wrap: nowrap; }
  .terminal-page .terminal-table .tabs button { flex: 0 0 auto; padding: 0 14px; }
  .terminal-page #tradeTable td button, .terminal-page #tradeTable .table-action { min-height: 36px; padding: 6px 12px; }
  .terminal-page #tradeTable td:last-child, .terminal-page #tradeTable th:last-child { position: sticky; right: 0; background: var(--panel); }
  .terminal-page .terminal-status { display: none; }

  /* Room for the sticky action bar */
  body.vx-mobile-bar { padding-bottom: 86px; }
}

/* Sticky quick-trade bar (terminal only, phones) */
#vxMobileBar { display: none; }
@media (max-width: 700px) {
  body.vx-mobile-bar #vxMobileBar {
    display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: color-mix(in oklab, var(--bg) 96%, transparent); border-top: 1px solid var(--line);
    backdrop-filter: blur(10px);
  }
  #vxMobileBar button { border: 0; border-radius: 6px; min-height: 56px; font-family: Manrope, var(--font), sans-serif; font-weight: 700; font-size: 12px; line-height: 1.15; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  #vxMobileBar button b { font-size: 16px; font-variant-numeric: tabular-nums; }
  #vxMobileBar .vx-sell { background: color-mix(in oklab, var(--red) 20%, var(--panel)); color: var(--red); }
  #vxMobileBar .vx-buy { background: color-mix(in oklab, var(--green) 20%, var(--panel)); color: var(--green); }
  #vxMobileBar .vx-pos { background: var(--panel); color: var(--text); border: 1px solid var(--line); padding: 0 12px; }
}

/* ---------- General pages ---------- */
@media (max-width: 600px) {
  .wrap { padding: 0 18px; }
  h1 { word-break: break-word; }
  .grid2, .grid3, .grid4 { grid-template-columns: 1fr !important; }
  .btn { white-space: normal; text-align: center; }
  .auth-status .card { padding: 32px 22px; }
  .vx-mobile-account-links { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .terminal-page #tradeTable table { min-width: 0; width: 100%; font-size: 13px; }
  .terminal-page #tradeTable th, .terminal-page #tradeTable td { padding: 10px 8px; }
  .terminal-page #tradeTable table:has(td[data-quote]) th:nth-child(4),
  .terminal-page #tradeTable td[data-quote] { display: none; }
}