/* Tablet and phone styling; existing responsive grids and disclosure stay intact. */
@media (max-width: 1184px) {
  body.service-interface {
    --responsive-bg: #0d222d;
    --responsive-panel: #112b37;
    --responsive-rule: #284652;
    --responsive-text: #eef2f4;
    --responsive-muted: #b2c6d0;
    --responsive-positive: #b6ce82;
    --responsive-negative: #e57b68;
    --text: var(--responsive-text);
    --muted: var(--responsive-muted);
    --feed-positive: var(--responsive-positive);
    --feed-negative: var(--responsive-negative);
    --line-soft: var(--responsive-rule);
    --line-mid: var(--responsive-rule);
    background: var(--responsive-bg); color: var(--responsive-text);
    color-scheme: dark;
  }
  body.service-interface.theme-light {
    --responsive-bg: #f1f2ed;
    --responsive-panel: #e5e9e4;
    --responsive-rule: #cbd2ce;
    --responsive-text: #263133;
    --responsive-muted: #586c70;
    --responsive-positive: #486b37;
    --responsive-negative: #a74943;
    color-scheme: light;
  }
  body.service-interface :is(a, button, input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--responsive-positive); outline-offset: 3px;
  }
  body.service-interface ::selection { background: var(--responsive-rule); color: var(--responsive-text); }
  body.service-interface .mobile-menu-button {
    background: transparent; border-color: var(--responsive-rule); box-shadow: none;
  }
  body.service-interface .mobile-menu-panel {
    background: var(--responsive-bg); border-color: var(--responsive-rule);
    border-radius: 8px; box-shadow: none; backdrop-filter: none;
  }
  body.service-interface :is(.mobile-menu-link, .mobile-user-panel) {
    background: transparent; border: 0; border-bottom: 1px solid var(--responsive-rule);
    border-radius: 0; box-shadow: none;
  }
  body.service-interface .mobile-menu-link { font-weight: 500; }
  body.service-interface .mobile-menu-link-active { color: var(--responsive-text); font-weight: 600; }

  body.scanner-interface .filter-drawer-summary {
    background: transparent; border: 0; border-bottom: 1px solid var(--responsive-rule);
    border-radius: 0; box-shadow: none;
  }
  body.scanner-interface .filter-drawer-summary-copy strong { font-weight: 600; }
  body.scanner-interface .filter-drawer-summary-copy span { font-weight: 400; }
  body.scanner-interface .filter-drawer-summary-icon {
    background: transparent; border: 0; box-shadow: none; color: var(--responsive-muted);
  }
  body.scanner-interface .filter-panel {
    background: transparent; border: 0; border-bottom: 1px solid var(--responsive-rule);
    border-radius: 0; box-shadow: none;
  }
  body.scanner-interface .filter-drawer-title { border-color: var(--responsive-rule); font-weight: 600; }
  body.scanner-interface .preset-field { background: transparent; border: 0; box-shadow: none; }
  body.scanner-interface .preset-bubble,
  body.scanner-interface .preset-picker-trigger {
    background: transparent; border-color: var(--responsive-rule); box-shadow: none;
    color: var(--responsive-text); font-weight: 500; border-radius: 5px;
  }
  body.scanner-interface .preset-bubble.preset-bubble-active,
  body.scanner-interface .preset-bubble-button-mode.preset-bubble-active {
    background: var(--responsive-panel); border-color: var(--responsive-muted); box-shadow: none;
  }
  body.scanner-interface .preset-picker-menu { background: var(--responsive-bg); box-shadow: none; }
  body.scanner-interface .board-card {
    background: transparent; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none;
  }
  body.scanner-interface .section-head h2 { color: var(--responsive-text); font-weight: 600; }
  body.scanner-interface .board-mode-chip {
    background: transparent; border: 0; box-shadow: none; border-radius: 0;
    color: var(--responsive-muted); padding: 0; font-weight: 400; font-size: 12px;
  }
  body.scanner-interface .frame-indicator {
    background: transparent; border: 0; box-shadow: none;
    color: var(--responsive-muted); font-size: 11px; font-weight: 400;
  }
  body.scanner-interface .arb-list { gap: 0; }
  body.scanner-interface .arb-row,
  body.scanner-interface .arb-variant-row {
    background: transparent; border: 0; border-bottom: 1px solid var(--responsive-rule);
    border-radius: 0; box-shadow: none; transform: none;
  }
  body.scanner-interface .arb-table-head {
    border-color: var(--responsive-rule); color: var(--responsive-muted);
  }
  body.scanner-interface .sort-head-link { color: var(--responsive-muted); font-weight: 400; }
  body.scanner-interface .sort-head-active { color: var(--responsive-text); font-weight: 700; }
  body.scanner-interface .arb-group .group-toggle-chip,
  body.scanner-interface .arb-group .group-toggle-chip:hover,
  body.scanner-interface .arb-group.group-open .group-toggle-chip {
    background: transparent; border: 0; box-shadow: none;
    color: var(--responsive-muted); transform: none;
  }
  body.scanner-interface .arb-group.group-open .arb-variant-list {
    background: var(--responsive-panel); border-radius: 0;
  }
  body.scanner-interface :is(.numeric-cell-stack, .spread-cell, .funding-cell) {
    background: transparent; border: 0; border-radius: 0; box-shadow: none;
  }
  body.scanner-interface .board-card-compact :is(.numeric-cell-stack, .spread-cell, .funding-cell) {
    background: transparent; border: 0; border-radius: 0;
  }
  body.scanner-interface :is(.price-value, .spread-main, .funding-value) {
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: 0; font-weight: 600;
  }
  body.scanner-interface .ticker-name { font-weight: 600; }
  body.scanner-interface .mobile-cell-label {
    color: var(--responsive-muted); font-weight: 500; letter-spacing: .02em;
  }
  body.scanner-interface .compact-exchange-long { color: var(--responsive-positive); }
  body.scanner-interface .compact-exchange-short { color: var(--responsive-negative); }
  body.scanner-interface .scanner-note-card {
    background: transparent; border: 0; border-bottom: 1px solid var(--responsive-rule);
    border-radius: 0; box-shadow: none;
  }
}

@media (min-width: 821px) and (max-width: 1184px) {
  body.scanner-interface .board-card :is(.arb-row, .arb-variant-row) {
    background: transparent; border-radius: 0;
  }
}

@media (max-width: 820px) {
  body.scanner-interface .board-card :is(.numeric-cell-stack, .spread-cell, .funding-cell) {
    background: transparent; border: 0; border-radius: 0; box-shadow: none;
  }
  body.scanner-interface .board-card-compact :is(.numeric-cell-stack, .spread-cell, .funding-cell) {
    background: transparent; border: 0; border-radius: 0;
  }
}

@media (max-width: 1184px) {
  body.service-interface .mobile-menu-panel {
    padding: 16px; gap: 16px; background: var(--responsive-bg);
    border: 1px solid var(--responsive-rule); border-radius: 8px;
    box-shadow: none; backdrop-filter: none;
  }
  body.service-interface .mobile-menu-panel .mobile-menu-nav { gap: 0; }
  body.service-interface .mobile-menu-panel .mobile-menu-link {
    padding: 0 4px; min-height: 42px; font-size: 14px;
    background: transparent; border: 0; border-bottom: 1px solid var(--responsive-rule);
    border-radius: 0; font-weight: 400;
  }
  body.service-interface .mobile-menu-panel .mobile-menu-link-active {
    color: var(--responsive-text); font-weight: 600;
  }
  body.service-interface .mobile-menu-panel .mobile-user-panel {
    padding: 0; border: 0; background: transparent; gap: 10px;
  }
  body.service-interface .mobile-menu-panel .mobile-user-head {
    padding-bottom: 12px; border-color: var(--responsive-rule);
  }
  body.service-interface .mobile-menu-panel .user-avatar {
    background: transparent; border: 1px solid var(--responsive-rule);
    color: var(--responsive-muted); box-shadow: none;
  }
  body.service-interface .mobile-menu-panel .mobile-user-name strong { font-size: 14px; font-weight: 600; }
  body.service-interface .mobile-menu-panel .mobile-user-name span { font-size: 12px; font-weight: 400; }
  body.service-interface .mobile-menu-panel .user-menu-row {
    min-height: 26px; padding: 0; font-size: 12px; color: var(--responsive-muted);
  }
  body.service-interface .mobile-menu-panel .user-menu-row strong {
    color: var(--responsive-text); font-size: 13px; font-weight: 600;
    font-variant-numeric: tabular-nums lining-nums;
  }
  body.service-interface .mobile-menu-panel :is(.user-menu-action, .user-menu-link) {
    background: transparent; border: 1px solid var(--responsive-rule);
    border-radius: 5px; box-shadow: none; min-height: 42px;
    padding: 0 12px; color: var(--responsive-text); font-size: 13px; font-weight: 500;
  }
  body.service-interface .mobile-menu-panel :is(.user-menu-action, .user-menu-link):hover {
    background: transparent; border-color: var(--responsive-muted); text-decoration: none;
  }
  body.service-interface .mobile-menu-panel form .user-menu-link {
    padding: 0; border: 0; justify-content: flex-start; color: var(--responsive-muted);
  }
  body.service-interface .mobile-menu-panel .mobile-menu-preferences {
    padding: 12px 0 0; border-color: var(--responsive-rule);
  }
  body.service-interface .mobile-menu-panel .user-menu-toggle {
    background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; gap: 8px;
  }
  body.service-interface .mobile-menu-panel .user-menu-toggle a {
    background: transparent; border: 0; border-bottom: 1px solid transparent;
    border-radius: 0; box-shadow: none; width: 38px; min-height: 42px;
    color: var(--responsive-muted); font-size: 12px; font-weight: 500;
  }
  body.service-interface .mobile-menu-panel .user-menu-toggle .user-menu-toggle-active {
    background: transparent; color: var(--responsive-text); font-weight: 700;
    border-bottom-color: #c8a56d;
  }
  body.service-interface .mobile-menu-panel .user-menu-toggle-display { display: none; }
}

@media (min-width: 821px) and (max-width: 1184px) {
  body.scanner-interface .board-card .arb-table-head,
  body.scanner-interface .board-card .arb-row,
  body.scanner-interface .board-card .arb-variant-row {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .75fr);
    column-gap: 20px; padding-left: 12px; padding-right: 12px;
  }
  body.scanner-interface .board-card .arb-row,
  body.scanner-interface .board-card .arb-variant-row {
    grid-template-rows: auto; min-height: 46px; padding-top: 8px; padding-bottom: 8px;
    align-items: center;
  }
  body.scanner-interface .board-card :is(.arb-row, .arb-variant-row) > .arb-cell:nth-child(-n+4) {
    grid-row: 1; min-height: 0; align-self: center;
  }
  body.scanner-interface .board-card .ticker-block {
    display: flex; justify-content: center; align-items: stretch;
  }
  body.scanner-interface .board-card .ticker-primary,
  body.scanner-interface .board-card .ticker-title-row {
    width: 100%; display: flex; align-items: center; justify-content: flex-start;
  }
  body.scanner-interface .board-card .ticker-title-row { flex-wrap: nowrap; gap: 8px; }
  body.scanner-interface .board-card .ticker-name {
    font-size: 14px; text-align: left; white-space: nowrap;
  }
  body.scanner-interface .board-card .group-toggle-chip { margin-left: auto; flex-shrink: 0; }
  body.scanner-interface .board-card :is(.spot-cell, .futures-cell) {
    display: flex; align-items: stretch; justify-content: center;
  }
  body.scanner-interface .board-card :is(.spot-cell, .futures-cell) .cell-primary {
    display: grid; grid-template-columns: minmax(0, 1fr) 8.5ch;
    align-items: center; justify-content: stretch; gap: 8px;
    width: 100%; font-size: 10px;
  }
  body.scanner-interface .board-card :is(.spot-cell, .futures-cell) .price-value {
    width: 100%; text-align: right; font-size: 14px; line-height: 1.2;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums lining-nums; white-space: nowrap;
  }
  body.scanner-interface .board-card .compact-exchange-label {
    display: inline-flex; width: 8.5ch; justify-content: flex-start;
    font-size: 10px; font-weight: 500; letter-spacing: 0; white-space: nowrap;
  }
  body.scanner-interface .board-card .arb-row .secondary-bubble-track,
  body.scanner-interface .board-card .arb-variant-row .secondary-bubble-track,
  body.scanner-interface .board-card .mobile-cell-label { display: none; }
  body.scanner-interface .board-card .spread-cell { display: flex; align-items: center; justify-content: flex-end; }
  body.scanner-interface .board-card .spread-cell .cell-primary {
    display: flex; align-items: center; justify-content: flex-end; width: 100%;
  }
  body.scanner-interface .board-card .spread-main {
    font: 600 16px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums lining-nums;
  }
  body.scanner-interface .board-card .arb-table-head > :first-child { text-align: left; }
  body.scanner-interface .board-card .arb-table-head > :nth-child(2),
  body.scanner-interface .board-card .arb-table-head > :nth-child(3) {
    text-align: right; padding-right: calc(8.5ch + 8px); font-size: 10px;
  }
  body.scanner-interface .board-card .arb-table-head > :nth-child(2) .label-with-info,
  body.scanner-interface .board-card .arb-table-head > :nth-child(3) .label-with-info {
    justify-content: flex-end; font-size: 12px;
  }
  body.scanner-interface .board-card .arb-table-head > :nth-child(4) {
    text-align: right; justify-content: flex-end;
  }
  body.scanner-interface .board-card .arb-table-head > :nth-child(4) .label-with-info {
    justify-content: flex-end;
  }
}

/* Complete narrow-screen coverage outside the scanner and navigation. */
@media (max-width: 1184px) {
  body.service-interface .home-splash-card { padding: 24px 16px; }
  body.service-interface .home-splash-title { font-size: 32px; }
  body.service-interface .home-splash-copy { max-width: 65ch; }
  body.service-interface .home-splash-actions { gap: 12px; }
  body.service-interface .home-splash-action { min-height: 44px; font-size: 14px; }
  body.service-interface .login-shell > .login-card,
  body.service-interface .payment-shell > .payment-card { padding: 16px 0; }
  body.service-interface .card.auth-modal-card { padding: 22px; }
  body.service-interface .auth-modal-close { width: 40px; height: 40px; }
  body.service-interface .login-brand { margin-bottom: 4px; padding-right: 32px; }
  body.service-interface .login-brand h1 { font-size: 22px; }
  body.service-interface .login-field { gap: 6px; }
  body.service-interface .login-field input { min-height: 42px; padding: 8px 2px; font-size: 16px; }
  body.service-interface .login-submit { min-height: 42px; }
  body.service-interface .login-alt-link { font-size: 13px; color: var(--service-muted); }
  body.service-interface .profile-section { padding: 12px 0 18px; }
  body.service-interface .profile-section h2 { font-size: 15px; }
  body.service-interface .profile-form { gap: 12px; }
  body.service-interface .profile-history-block { padding: 10px 0; }
  body.service-interface .profile-history-row { padding: 10px 0; }
  body.service-interface .profile-history-empty { padding: 8px 0; }
  body.service-interface .profile-subscription-row { font-size: 12px; }
  body.service-interface .profile-subscription-row strong { font-size: 13px; }
  body.service-interface .profile-pay-action {
    background: transparent; border: 1px solid var(--service-rule); border-radius: 5px;
    color: var(--service-text); box-shadow: none; min-height: 42px;
    font-size: 13px; font-weight: 500; text-decoration: none;
  }
  body.service-interface .profile-pay-action:hover {
    background: transparent; border-color: var(--service-muted); text-decoration: none;
  }
  body.service-interface .settings-section { padding: 12px 0; }
  body.service-interface .setting-panel :is(.route-toggle-row, .route-setting-row) {
    border-radius: 0; padding: 10px 0;
  }
  body.service-interface .settings-exchange-grid .route-toggle-row { border: 0; min-height: 42px; }
  body.service-interface .settings-exchange-grid .settings-exchange-name {
    font-size: 13px; font-weight: 400; gap: 8px;
  }
  body.service-interface .settings-exchange-grid .exchange-logo {
    width: 16px; min-width: 16px; height: 16px;
    background: transparent; border-radius: 3px; padding: 0; box-shadow: none;
  }
  body.service-interface .settings-inner-form { flex: 0 0 auto; }
  body.service-interface .settings-modal .settings-modal-card {
    height: auto; max-height: calc(100dvh - 48px); overflow-x: hidden; overflow-y: auto;
  }
  body.service-interface .settings-modal :is(.settings-exchange-grid, .settings-fees-grid, .pair-list-content) {
    max-height: none; overflow: visible;
  }
  body.service-interface .settings-submit { min-height: 42px; }
  body.service-interface :is(.system-count-chip, .system-freshness-chip, .profile-history-status,
    .profile-history-badge, .admin-subscription-chip) { font-size: 12px; font-weight: 500; padding: 0; }
  body.service-interface .admin-foldout-title { font-size: 18px; font-weight: 600; }
  body.service-interface .system-runtime-chip strong {
    font: 600 15px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }
  body.service-interface .system-table { font-size: 12px; }
  body.service-interface .frame-indicator { background: transparent; border: 0; box-shadow: none; font-size: 11px; }
  body.service-interface .metric-card span { font-size: 12px; color: var(--service-muted); }
  body.service-interface .metric-card strong {
    font: 600 24px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--service-text); font-variant-numeric: tabular-nums lining-nums;
  }
  body.service-interface .service-links { overflow-wrap: anywhere; }
}
@media (max-width: 820px) {
  body.service-interface .home-splash-card { padding: 20px 8px; }
  body.service-interface .home-splash-title { font-size: 28px; }
  body.service-interface .home-splash-copy { font-size: 14px; }
}