/* ═══════════════════════════════════════════════════════════════════
   CYRIS MOBILE RESKIN — Trading Terminal Aesthetic
   Scope: max-width 768px only. Desktop is untouched.
   Injected by server.js into all pages via </head>.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── MOBILE DESIGN TOKENS ──────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    /* Backgrounds */
    --m-bg: #0e0e0e;
    --m-bg-surface: #171717;
    --m-chrome-bg: #0e0e0e;
    --m-bg-card: #171717;
    --m-bg-inset: #171717;
    --m-bg-elevated: #171717;

    /* Borders — muted green-gray */
    --m-border: rgba(120, 146, 132, .22);
    --m-border-strong: rgba(120, 146, 132, .34);
    --m-divider: rgba(120, 146, 132, .16);

    /* Text */
    --m-text: #e8e8e8;
    --m-text-secondary: rgba(194, 206, 199, .72);
    --m-text-tertiary: rgba(156, 174, 165, .54);
    --m-text-label: rgba(168, 188, 177, .62);

    /* Accent — muted Cyris green */
    --m-accent: #39c98f;
    --m-accent-dim: rgba(57, 201, 143, .16);
    --m-accent-glow: rgba(57, 201, 143, .08);

    /* Status */
    --m-green: #00e896;
    --m-red: #ff4757;
    --m-amber: #ffb830;
    --m-blue: #38b6ff;

    /* Shape */
    --m-radius: 14px;
    --m-radius-sm: 10px;
    --m-radius-lg: 18px;

    /* Spacing */
    --m-gap: 12px;
    --m-pad: 16px;
    --m-pad-sm: 10px;
    --m-pad-card: 16px;

    /* Typography */
    --m-font: 'Inter', sans-serif;
    --m-display: 'Inter', sans-serif;
    --m-fs-xs: .68rem;
    --m-fs-sm: .8rem;
    --m-fs-base: .875rem;
    --m-fs-lg: 1rem;
    --m-fs-xl: 1.3rem;
    --m-fs-num: 1.6rem;
    --m-fs-hero: 2rem;

    /* Transitions */
    --m-ease: cubic-bezier(.23, 1, .32, 1);
    --m-dur: .18s;

    /* Bottom nav height */
    --m-bnav-h: 56px;

    /* Override existing page-level font tokens */
    --font-display: 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'Inter', sans-serif;

    /* Override existing tokens for cascade compatibility */
    --bg-primary: #0e0e0e;
    --bg-elevated: #171717;
    --bg-card: #171717;
    --bg-subtle: #171717;
    --border: rgba(120, 146, 132, .22);
    --border-strong: rgba(120, 146, 132, .34);
    --accent: #39c98f;
    --accent-subtle: rgba(57, 201, 143, .16);
    --accent-hover: #4cd79d;
  }

  html.cyris-mobile-shell-pending body {
    opacity: 0 !important;
    visibility: hidden !important;
    overflow: hidden !important;
  }

  /* Light mode: force dark on mobile for terminal aesthetic */
  [data-theme="light"] {
    --bg-primary: #0e0e0e;
    --bg-elevated: #171717;
    --bg-card: #171717;
    --bg-subtle: #171717;
    --text-primary: #e8e8e8;
    --text-secondary: rgba(194, 206, 199, .72);
    --text-tertiary: rgba(156, 174, 165, .54);
    --border: rgba(120, 146, 132, .22);
    --border-strong: rgba(120, 146, 132, .34);
    --accent: #39c98f;
    --accent-subtle: rgba(57, 201, 143, .16);
    --accent-hover: #4cd79d;
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 48px rgba(0, 0, 0, 0.6);
  }
}

/* ─── SHELL — BODY, BACKGROUND ──────────────────────────────────── */
@media (max-width: 768px) {
  html {
    background: #0e0e0e !important;
  }

  body {
    background: #0e0e0e !important;
    color: var(--m-text) !important;
    font-family: var(--m-font) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-bottom: var(--m-bnav-h) !important;
  }

  [data-theme="light"] body {
    background: #0e0e0e !important;
    color: var(--m-text) !important;
  }

  /* Mobile typography system: UI defaults to Inter */
  body,
  body :where(
    p,
    span,
    a,
    button,
    input,
    select,
    textarea,
    label,
    li,
    dt,
    dd,
    small,
    strong,
    em,
    th,
    td,
    figcaption,
    caption
  ):not(.header-logo):not(.sb-logo-text):not(.sb-tag):not(.logo):not([class*="logo"]) {
    font-family: var(--m-font) !important;
  }

  /* Display typography: Inter for headings and key metrics */
  body :where(
    h1,
    h2,
    h3,
    .page-title,
    .section-title,
    .card-title,
    .dashboard-title,
    .panel-title,
    .metric-value,
    .stat-value,
    .value,
    .confidence-value,
    .pc-val,
    .pc-conf-pct,
    .sp-ticker,
    .total-value,
    .portfolio-value
  ) {
    font-family: var(--m-display) !important;
  }

  /* Suppress decorative background effects on mobile */
  .scene {
    opacity: 0 !important;
  }

  .scene .blob {
    animation-play-state: paused !important;
  }

  /* Mute the grid overlay */
  .grid-overlay {
    opacity: 0 !important;
    background-image: none !important;
  }

  [data-theme="light"] .scene {
    opacity: 0 !important;
  }

  [data-theme="light"] .grid-overlay {
    opacity: 0 !important;
    background-image: none !important;
  }
}

/* ─── TOP HEADER (.top-header pattern) ──────────────────────────── */
/* Mobile: logo left, notification bell right. Everything else hidden. */
@media (max-width: 768px) {
  .top-header {
    background: var(--m-chrome-bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid var(--m-border) !important;
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 var(--m-pad) !important;
    z-index: 300 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  [data-theme="light"] .top-header {
    background: var(--m-chrome-bg) !important;
    border-bottom-color: var(--m-border) !important;
  }

  .header-logo,
  .top-header .header-logo,
  header.top-header .header-logo,
  .topbar .header-logo {
    font-size: 1.1rem !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
    color: var(--m-text) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  .header-logo .r,
  .header-logo span {
    color: var(--m-accent) !important;
  }

  /* Hide burger — bottom nav replaces it */
  .mobile-burger {
    display: none !important;
  }

  /* Hide search in header */
  .header-search {
    display: none !important;
  }

  /* Header icons: hide all except notification bell via JS + CSS fallback */
  .header-icons {
    gap: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Hide broker bar, view mode, customize btn, theme toggle, admin toggle */
  .header-icons .broker-bar,
  .header-icons .view-mode-toggle,
  .header-icons .customize-btn,
  .header-icons .theme-toggle,
  .header-icons .cy-theme-btn,
  .header-icons .admin-vis-toggle {
    display: none !important;
  }

  /* Notification bell — the only visible header-icon item */
  .header-icons .notification-bell {
    display: flex !important;
  }

  .header-icons .cyris-notif-bell {
    display: flex !important;
  }

  .notification-bell {
    position: relative !important;
    cursor: pointer !important;
    min-width: 36px !important;
    min-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--m-radius) !important;
  }

  .notification-bell i {
    font-size: .95rem !important;
    color: var(--m-text-secondary) !important;
  }

  .notification-bell:active i {
    color: var(--m-accent) !important;
  }

  .notification-badge {
    background: var(--m-accent) !important;
    color: #000 !important;
    font-family: var(--m-font) !important;
  }

  .notification-badge.hidden,
  .cyris-notif-badge.hidden {
    display: none !important;
  }

  /* Notification dropdown */
  .notification-dropdown {
    border-radius: var(--m-radius-lg) !important;
    border: 1px solid var(--m-border-strong) !important;
    background: var(--m-bg-surface) !important;
  }

  /* Broker bar — hidden from header but keep styles if opened elsewhere */
  .broker-dropdown {
    border-radius: var(--m-radius-lg) !important;
    border: 1px solid var(--m-border-strong) !important;
    background: var(--m-bg-surface) !important;
  }
}

/* ─── TOPBAR (.topbar pattern — trade-finder, options-flow, etc.) ─ */
/* Mobile: keep page title + minimal context, hide hamburger/theme/clock */
@media (max-width: 768px) {
  .topbar {
    background: var(--m-chrome-bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid var(--m-border) !important;
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 var(--m-pad) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .topbar .tb-l {
    display: flex !important;
    align-items: center !important;
  }

  .topbar .tb-r {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    flex-shrink: 0 !important;
  }

  [data-theme="light"] .topbar {
    background: var(--m-chrome-bg) !important;
    border-bottom-color: var(--m-border) !important;
    color: var(--m-text) !important;
  }

  .tb-title {
    font-size: .85rem !important;
    color: var(--m-text) !important;
  }

  [data-theme="light"] .tb-title {
    color: var(--m-text) !important;
  }

  /* Hide hamburger — bottom nav replaces it */
  .tb-hamburger,
  .mob-menu-btn,
  .menu-btn {
    display: none !important;
  }

  /* Hide clock and theme toggle — declutter header */
  .tb-clk,
  .tb-date {
    display: none !important;
  }

  .topbar .theme-toggle,
  .topbar .cy-theme-btn {
    display: none !important;
  }

  .topbar .live-pill {
    display: none !important;
  }

  .tb-sub {
    color: var(--m-text-tertiary) !important;
  }
}

/* ─── SIDEBAR (mobile slide-out drawer) ─────────────────────────── */
@media (max-width: 768px) {
  .sidebar {
    background: var(--m-bg-surface) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-right: 1px solid var(--m-border) !important;
    width: 260px !important;
  }

  [data-theme="light"] .sidebar {
    background: var(--m-bg-surface) !important;
    border-right-color: var(--m-border) !important;
  }

  .sb-logo {
    border-bottom: 1px solid var(--m-divider) !important;
  }

  .sb-logo-text {
    color: var(--m-text) !important;
  }

  [data-theme="light"] .sb-logo-text {
    color: var(--m-text) !important;
  }

  .sb-tag {
    background: var(--m-accent-dim) !important;
    border: 1px solid var(--m-border-strong) !important;
    color: var(--m-accent) !important;
    border-radius: var(--m-radius-sm) !important;
  }

  .sb-sec {
    color: var(--m-text-tertiary) !important;
    font-size: .5rem !important;
    letter-spacing: .2em !important;
  }

  [data-theme="light"] .sb-sec {
    color: var(--m-text-tertiary) !important;
  }

  .sb-link {
    color: var(--m-text-secondary) !important;
    border-radius: var(--m-radius) !important;
    padding: 10px 12px !important;
    font-size: .78rem !important;
    min-height: 40px !important;
    border: 1px solid transparent !important;
    background: none !important;
  }

  .sb-link:hover,
  .sb-link:active {
    background: rgba(0, 232, 150, .06) !important;
    color: var(--m-text) !important;
  }

  .sb-link.active {
    background: var(--m-accent-dim) !important;
    color: var(--m-accent) !important;
    border-color: var(--m-border-strong) !important;
  }

  [data-theme="light"] .sb-link {
    color: var(--m-text-secondary) !important;
    background: none !important;
    border-color: transparent !important;
  }

  [data-theme="light"] .sb-link:hover {
    background: rgba(0, 232, 150, .06) !important;
    color: var(--m-text) !important;
  }

  [data-theme="light"] .sb-link.active {
    background: var(--m-accent-dim) !important;
    color: var(--m-accent) !important;
    border-color: var(--m-border-strong) !important;
  }

  .sb-sub {
    color: var(--m-text-tertiary) !important;
    border-radius: var(--m-radius) !important;
    min-height: 36px !important;
  }

  [data-theme="light"] .sb-sub {
    color: var(--m-text-tertiary) !important;
  }

  [data-theme="light"] .sb-sub:hover {
    background: rgba(0, 232, 150, .06) !important;
    color: var(--m-text) !important;
  }

  .sb-pill.n {
    background: rgba(168, 85, 247, .1) !important;
    border: 1px solid rgba(168, 85, 247, .2) !important;
    border-radius: var(--m-radius-sm) !important;
  }

  .sb-pill.l {
    background: var(--m-accent-dim) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius-sm) !important;
    color: var(--m-accent) !important;
  }

  .sb-bottom {
    border-top: 1px solid var(--m-divider) !important;
  }

  .sb-user {
    background: var(--m-bg-card) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius) !important;
  }

  [data-theme="light"] .sb-user {
    background: var(--m-bg-card) !important;
    border-color: var(--m-border) !important;
  }

  .sb-uname {
    color: var(--m-text) !important;
  }

  [data-theme="light"] .sb-uname {
    color: var(--m-text) !important;
  }

  .sb-uplan {
    color: var(--m-text-tertiary) !important;
  }

  [data-theme="light"] .sb-uplan {
    color: var(--m-text-tertiary) !important;
  }

  .sb-logout {
    color: var(--m-text-tertiary) !important;
  }

  .sb-logout:hover {
    color: var(--m-red) !important;
  }

  [data-theme="light"] .sb-logout {
    color: var(--m-text-tertiary) !important;
  }

  .sb-av {
    background: var(--m-bg-inset) !important;
    border: 1px solid var(--m-border-strong) !important;
    border-radius: var(--m-radius) !important;
    color: var(--m-accent) !important;
  }

  [data-theme="light"] .sb-av {
    background: var(--m-bg-inset) !important;
    border-color: var(--m-border-strong) !important;
  }

  /* Menu overlay — darker on mobile */
  .menu-overlay {
    background: rgba(0, 0, 0, .7) !important;
    backdrop-filter: none !important;
  }

  /* Side menu (autoplus, health, shop pattern) */
  .side-menu {
    background: var(--m-bg-surface) !important;
    border-right: 1px solid var(--m-border) !important;
  }

  [data-theme="light"] .side-menu {
    background: var(--m-bg-surface) !important;
    border-right-color: var(--m-border) !important;
  }

  .menu-item {
    color: var(--m-text-secondary) !important;
    border-radius: var(--m-radius) !important;
    min-height: 40px !important;
    padding: 10px 12px !important;
  }

  .menu-item:hover,
  .menu-item:active {
    background: rgba(0, 232, 150, .06) !important;
    color: var(--m-text) !important;
  }

  .menu-item.active {
    background: var(--m-accent-dim) !important;
    color: var(--m-accent) !important;
  }
}

/* ─── MAIN CONTENT AREA ─────────────────────────────────────────── */
/* Ensure bottom nav never overlaps page content */
@media (max-width: 768px) {
  .main-content,
  main.main-content {
    padding-top: 60px !important;
    padding-left: var(--m-pad) !important;
    padding-right: var(--m-pad) !important;
    padding-bottom: calc(var(--m-bnav-h) + 24px) !important;
    margin-left: 0 !important;
    max-width: 100% !important;
    background: transparent !important;
  }

  /* Intel pages: main.main wraps topbar + scrollable .body — no padding-top here */
  main.main {
    margin-left: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Catch-all: body itself gets bottom padding so even non-.main-content pages are safe */
  body {
    padding-bottom: calc(var(--m-bnav-h) + 16px) !important;
  }

  /* Options-flow / trade-finder use .body container */
  .body {
    padding-bottom: calc(var(--m-bnav-h) + 16px) !important;
  }

  /* Floating elements above the bottom nav */
  .chatbot-fab {
    bottom: calc(var(--m-bnav-h) + 16px) !important;
  }

  /* Hide floating refresh — header version is used instead */
  .refresh-btn {
    display: none !important;
  }

  .refresh-tooltip {
    display: none !important;
  }
}

/* ─── CARDS & PANELS ────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Universal card treatment */
  .dashboard-panel,
  .dashboard-card,
  .config-card,
  .status-card,
  .test-result-card,
  .broker-balance-card,
  .broker-card,
  .holdings-card,
  .guide-card,
  .post-card,
  .reply-card,
  .edge-card,
  .pick-card,
  .kalshi-market-card,
  .product-card,
  .player-card,
  .parlay-card,
  .verse-card,
  .hub-pick-card,
  .auth-card,
  .trade-type-card,
  .ts-card,
  .games-panel,
  .pm-card,
  .pm-signal-card,
  .comeback-card,
  .pm-pred-card,
  .form-card {
    background: var(--m-bg-card) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
  }

  [data-theme="light"] .dashboard-panel,
  [data-theme="light"] .dashboard-card,
  [data-theme="light"] .config-card,
  [data-theme="light"] .status-card,
  [data-theme="light"] .broker-balance-card,
  [data-theme="light"] .broker-card,
  [data-theme="light"] .holdings-card,
  [data-theme="light"] .guide-card,
  [data-theme="light"] .post-card,
  [data-theme="light"] .reply-card,
  [data-theme="light"] .edge-card,
  [data-theme="light"] .pick-card,
  [data-theme="light"] .product-card,
  [data-theme="light"] .player-card,
  [data-theme="light"] .form-card {
    background: var(--m-bg-card) !important;
    border-color: var(--m-border) !important;
    box-shadow: none !important;
  }

  /* Panel headers */
  .dashboard-panel-header,
  .panel-header {
    font-size: var(--m-fs-sm) !important;
    letter-spacing: .1em !important;
    color: var(--m-text-label) !important;
    padding-bottom: var(--m-pad-sm) !important;
    border-bottom: 1px solid var(--m-divider) !important;
    margin-bottom: var(--m-pad-sm) !important;
  }

  /* AI panel */
  .ai-panel {
    background: var(--m-bg-card) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius) !important;
  }

  /* Card padding consistency */
  .dashboard-panel,
  .dashboard-card,
  .config-card,
  .status-card {
    padding: var(--m-pad-card) !important;
  }
}

/* ─── BUTTONS ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Primary buttons */
  .btn-primary,
  .btn.btn-primary,
  button[class*="primary"],
  .cta-primary,
  .submit-btn,
  .upgrade-btn {
    background: var(--m-accent) !important;
    color: #000 !important;
    border: 1px solid transparent !important;
    border-radius: var(--m-radius) !important;
    font-family: var(--m-font) !important;
    font-weight: 600 !important;
    font-size: var(--m-fs-sm) !important;
    text-transform: none !important;
    letter-spacing: .01em !important;
    padding: 12px 16px !important;
    min-height: 44px !important;
    transition: background-color var(--m-dur) var(--m-ease), color var(--m-dur) var(--m-ease) !important;
  }

  .btn-primary:active,
  .cta-primary:active,
  .submit-btn:active {
    opacity: .85 !important;
  }

  /* Secondary buttons */
  .btn-secondary,
  .btn.btn-secondary,
  .cta-glass,
  .back-btn,
  .cy-gate-back {
    background: var(--m-bg-card) !important;
    color: var(--m-text) !important;
    border: 1px solid var(--m-border-strong) !important;
    border-radius: var(--m-radius) !important;
    font-family: var(--m-font) !important;
    font-weight: 500 !important;
    font-size: var(--m-fs-sm) !important;
    padding: 10px 16px !important;
    min-height: 44px !important;
    transition: background-color var(--m-dur) var(--m-ease), border-color var(--m-dur) var(--m-ease), color var(--m-dur) var(--m-ease) !important;
  }

  .btn-secondary:active,
  .cta-glass:active,
  .back-btn:active {
    background: var(--m-accent-dim) !important;
    border-color: var(--m-accent) !important;
    color: var(--m-accent) !important;
  }

  /* Danger buttons */
  .btn-danger,
  .btn.btn-danger {
    background: rgba(255, 71, 87, .12) !important;
    color: var(--m-red) !important;
    border: 1px solid rgba(255, 71, 87, .22) !important;
    border-radius: var(--m-radius) !important;
    font-size: var(--m-fs-sm) !important;
    min-height: 44px !important;
  }

  /* Icon-only action buttons */
  .quick-action,
  .refresh-btn,
  .copy-btn,
  .run-test-btn,
  .customize-btn {
    background: var(--m-bg-card) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius) !important;
    color: var(--m-text-secondary) !important;
    min-width: 36px !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    transition: all var(--m-dur) var(--m-ease) !important;
  }

  .quick-action:active,
  .refresh-btn:active,
  .customize-btn:active {
    background: var(--m-accent-dim) !important;
    border-color: var(--m-accent) !important;
    color: var(--m-accent) !important;
  }

  /* View mode toggle */
  .view-mode-toggle {
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius) !important;
    background: var(--m-bg-card) !important;
  }
}

/* ─── TABS, CHIPS, FILTERS ──────────────────────────────────────── */
@media (max-width: 768px) {
  /* Horizontally scrollable tab/chip containers */
  .mode-tabs,
  .log-tabs,
  .sport-tabs,
  .filter-tabs,
  .range-tabs {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 8px !important;
    padding: 6px !important;
    background: var(--m-bg-inset) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius) !important;
  }

  .mode-tabs::-webkit-scrollbar,
  .log-tabs::-webkit-scrollbar,
  .sport-tabs::-webkit-scrollbar,
  .filter-tabs::-webkit-scrollbar,
  .range-tabs::-webkit-scrollbar {
    display: none;
  }

  /* Individual tab chip */
  .mode-tab,
  .log-tab,
  .sport-tab,
  .filter-tab,
  .range-tab,
  .stripe-filter-tab,
  .box-score-tab,
  .payload-tab {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 8px 14px !important;
    font-size: var(--m-fs-sm) !important;
    font-weight: 500 !important;
    color: var(--m-text-secondary) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    min-height: 32px !important;
    transition: all var(--m-dur) var(--m-ease) !important;
    cursor: pointer !important;
  }

  .mode-tab.active,
  .log-tab.active,
  .sport-tab.active,
  .filter-tab.active,
  .range-tab.active,
  .stripe-filter-tab.active,
  .box-score-tab.active,
  .payload-tab.active {
    background: var(--m-accent-dim) !important;
    color: var(--m-accent) !important;
    border-color: var(--m-border-strong) !important;
  }

  [data-theme="light"] .mode-tab,
  [data-theme="light"] .log-tab,
  [data-theme="light"] .filter-tab,
  [data-theme="light"] .range-tab {
    color: var(--m-text-secondary) !important;
    border-color: transparent !important;
  }

  [data-theme="light"] .mode-tab.active,
  [data-theme="light"] .log-tab.active,
  [data-theme="light"] .filter-tab.active,
  [data-theme="light"] .range-tab.active {
    background: var(--m-accent-dim) !important;
    color: var(--m-accent) !important;
  }

  /* Pill chips */
  .asset-pill,
  .sizing-mode-pill,
  .ratio-pill,
  .pm-filter-pill,
  .status-pill,
  .tape-chip,
  .stat-chip,
  .pos-chip,
  .odds-chip {
    font-family: var(--m-font) !important;
    font-size: var(--m-fs-xs) !important;
    letter-spacing: .04em !important;
    padding: 4px 8px !important;
    border-radius: var(--m-radius-sm) !important;
    border: 1px solid var(--m-border) !important;
    background: var(--m-bg-card) !important;
    color: var(--m-text-secondary) !important;
    white-space: nowrap !important;
  }

  /* Period buttons */
  .period-btn {
    background: none !important;
    border: 1px solid transparent !important;
    color: var(--m-text-tertiary) !important;
    font-size: var(--m-fs-xs) !important;
    padding: 4px 8px !important;
    border-radius: var(--m-radius-sm) !important;
    min-height: 28px !important;
  }

  .period-btn.active {
    color: var(--m-accent) !important;
    border-color: var(--m-border) !important;
    background: var(--m-bg-card) !important;
  }
}

/* ─── STAT / METRIC / KPI BLOCKS ────────────────────────────────── */
@media (max-width: 768px) {
  /* Performance stat cells */
  .pstat {
    background: var(--m-bg-card) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius) !important;
    padding: var(--m-pad-sm) !important;
  }

  [data-theme="light"] .pstat {
    background: var(--m-bg-card) !important;
    border-color: var(--m-border) !important;
  }

  .pstat-label,
  .stat-label {
    font-size: var(--m-fs-xs) !important;
    letter-spacing: .12em !important;
    color: var(--m-text-label) !important;
    font-weight: 500 !important;
  }

  .pstat-sub,
  .stat-value {
    font-family: var(--m-display) !important;
    font-size: var(--m-fs-lg) !important;
    font-weight: 700 !important;
    color: var(--m-text) !important;
    letter-spacing: -.02em !important;
  }

  .health-metric {
    background: var(--m-bg-card) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius) !important;
    padding: var(--m-pad-sm) !important;
  }

  .account-stat,
  .account-value {
    font-family: var(--m-font) !important;
    color: var(--m-text) !important;
  }

  .broker-balance-value {
    font-family: var(--m-display) !important;
    font-size: var(--m-fs-num) !important;
    font-weight: 700 !important;
    color: var(--m-accent) !important;
    letter-spacing: -.03em !important;
  }

  /* Stat grids — responsive 2-col on mobile */
  .perf-stats-grid,
  .status-grid,
  .stat-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--m-gap) !important;
  }

  /* Single-column at very small */
  @media (max-width: 360px) {
    .perf-stats-grid,
    .status-grid {
      grid-template-columns: 1fr !important;
    }
  }

  /* KPI row: left-label / right-value pattern */
  .detail-row,
  .account-row,
  .info-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid var(--m-divider) !important;
    font-size: var(--m-fs-sm) !important;
  }

  .detail-row:last-child,
  .account-row:last-child,
  .info-row:last-child {
    border-bottom: none !important;
  }

  .detail-label {
    color: var(--m-text-label) !important;
    font-size: var(--m-fs-xs) !important;
    letter-spacing: .1em !important;
  }

  .detail-value {
    color: var(--m-text) !important;
    font-family: var(--m-font) !important;
    font-weight: 600 !important;
    text-align: right !important;
  }

  /* Balance displays */
  .balance {
    font-family: var(--m-display) !important;
    font-size: var(--m-fs-hero) !important;
    color: var(--m-text) !important;
    font-weight: 700 !important;
    letter-spacing: -.03em !important;
  }

  .change {
    font-family: var(--m-font) !important;
    font-size: var(--m-fs-sm) !important;
  }

  /* Hub performance ring readability */
  body.cyris-page-hub .perf-ring-box {
    margin: 8px 14px 12px !important;
    padding: 12px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.14) !important;
  }

  [data-theme="light"] body.cyris-page-hub .perf-ring-box {
    background: rgba(0,0,0,.03) !important;
    border-color: rgba(0,0,0,.08) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.06) !important;
  }

  body.cyris-page-hub .perf-ring-wrap {
    width: 100% !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }

  body.cyris-page-hub .ring-svg {
    width: 84px !important;
    height: 84px !important;
    margin: 0 !important;
  }

  body.cyris-page-hub .ring-svg text {
    fill: var(--m-text) !important;
  }

  body.cyris-page-hub #ringPct {
    font-size: 12px !important;
    font-weight: 700 !important;
  }

  body.cyris-page-hub .ring-legend {
    min-width: 0 !important;
    gap: 6px !important;
    padding-right: 4px !important;
  }

  body.cyris-page-hub .rl-row {
    gap: 8px !important;
    min-height: 20px !important;
    width: 100% !important;
  }

  body.cyris-page-hub #w-perfstats .perf-stats-grid {
    padding-bottom: 8px !important;
  }

  body.cyris-page-hub .rl-dot {
    width: 7px !important;
    height: 7px !important;
  }

  body.cyris-page-hub .rl-val {
    margin-right: 2px !important;
  }

  body.cyris-page-hub .rl-text {
    font-size: .86rem !important;
    line-height: 1.2 !important;
    color: var(--m-text-secondary) !important;
  }

  body.cyris-page-hub .rl-val {
    font-size: .96rem !important;
    line-height: 1 !important;
    font-weight: 700 !important;
  }

  body.cyris-page-hub .pstat-sub {
    font-size: .76rem !important;
    color: var(--m-text-secondary) !important;
  }

  /* Hub performance stat card spacing */
  body.cyris-page-hub .perf-stats-grid {
    gap: 10px !important;
    padding: 14px 14px 12px !important;
    align-items: stretch !important;
  }

  body.cyris-page-hub .pstat {
    padding: 12px 12px 11px !important;
    min-height: 88px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  body.cyris-page-hub .pstat-label {
    margin-bottom: 7px !important;
    line-height: 1.2 !important;
  }

  body.cyris-page-hub .pstat-val {
    margin-bottom: 5px !important;
    line-height: 1.05 !important;
  }

  body.cyris-page-hub .pstat-sub {
    margin-top: auto !important;
    line-height: 1.2 !important;
  }

  /* Hub market data tile readability */
  body.cyris-page-hub #marketDataPanel .dashboard-panel-title {
    font-size: .78rem !important;
    letter-spacing: .1em !important;
    color: var(--m-text-secondary) !important;
  }

  body.cyris-page-hub #w-perfstats .dashboard-panel-title {
    font-size: .78rem !important;
    letter-spacing: .1em !important;
    color: var(--m-text-secondary) !important;
  }

  body.cyris-page-hub .dashboard-panel-link {
    font-family: var(--m-font) !important;
    font-size: .74rem !important;
    font-weight: 700 !important;
    letter-spacing: .05em !important;
    line-height: 1 !important;
    color: var(--m-accent) !important;
  }

  body.cyris-page-hub .hub-index-grid {
    gap: 12px !important;
  }

  body.cyris-page-hub .hub-index-item {
    padding: 14px 12px !important;
    border-radius: 12px !important;
  }

  body.cyris-page-hub .hub-index-symbol {
    font-size: .8rem !important;
    letter-spacing: .05em !important;
    margin-bottom: 6px !important;
    color: var(--m-text-secondary) !important;
  }

  body.cyris-page-hub .hub-index-price {
    font-size: 1.35rem !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
  }

  body.cyris-page-hub .hub-index-change {
    font-size: .86rem !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
  }

  body.cyris-page-hub .hub-index-hl {
    font-size: .72rem !important;
    letter-spacing: .01em !important;
    margin-top: 5px !important;
    color: var(--m-text-secondary) !important;
  }

  /* Hub balance hero: remove card-within-card feel for headline balances */
  body.cyris-page-hub #w-performance .hero {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 6px 0 0 !important;
    box-shadow: none !important;
  }

  body.cyris-page-hub #w-performance .widget-body {
    display: flex !important;
    flex-direction: column !important;
  }

  body.cyris-page-hub #w-performance .aggregated-view,
  body.cyris-page-hub #w-performance .broker-balances-grid {
    order: 1 !important;
  }

  body.cyris-page-hub #individualView.broker-balances-grid.active {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 0 12px !important;
  }

  body.cyris-page-hub #individualView.single-card {
    grid-template-columns: 1fr !important;
    max-width: 210px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.cyris-page-hub #individualView .broker-balance-card {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: none !important;
    padding: 14px 10px !important;
  }

  body.cyris-page-hub .balance-view-toggle {
    order: 2 !important;
    display: grid !important;
    grid-template-columns: 1fr 44px 44px !important;
    gap: 8px !important;
    margin-top: 10px !important;
    margin-bottom: 0 !important;
    align-items: center !important;
  }

  body.cyris-page-hub .view-toggle-btn {
    min-height: 36px !important;
    border-radius: 11px !important;
    border: 1px solid var(--m-border) !important;
    background: var(--m-bg-surface) !important;
    color: var(--m-text-secondary) !important;
    font-size: .68rem !important;
    letter-spacing: .06em !important;
    font-weight: 700 !important;
    padding: 8px 10px !important;
    justify-content: center !important;
  }

  body.cyris-page-hub #viewToggleBtn {
    background: rgba(57, 201, 143, .1) !important;
    border-color: rgba(57, 201, 143, .24) !important;
    color: var(--m-accent) !important;
  }

  body.cyris-page-hub .view-toggle-btn i {
    font-size: .74rem !important;
  }

  body.cyris-page-hub .performance-values {
    gap: 10px !important;
    margin-bottom: 10px !important;
    padding: 2px 0 10px !important;
    border-bottom: 1px solid var(--m-divider) !important;
    align-items: stretch !important;
  }

  body.cyris-page-hub .perf-column {
    flex: 1 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 6px 2px 4px !important;
  }

  body.cyris-page-hub .perf-label {
    font-size: .68rem !important;
    letter-spacing: .12em !important;
    margin-bottom: 5px !important;
  }

  body.cyris-page-hub .perf-column:first-child .perf-label {
    color: var(--m-accent) !important;
  }

  body.cyris-page-hub .perf-column:last-child .perf-label {
    color: #38b6ff !important;
  }

  body.cyris-page-hub .perf-value {
    font-size: clamp(2.08rem, 8.9vw, 2.62rem) !important;
    line-height: 1.02 !important;
    font-weight: 700 !important;
    letter-spacing: -.03em !important;
  }

  body.cyris-page-hub .performance-values.single-value .perf-value {
    font-size: clamp(2.2rem, 9.4vw, 2.82rem) !important;
  }

  body.cyris-page-hub .perf-change {
    font-size: .98rem !important;
    font-weight: 700 !important;
    margin-top: 5px !important;
  }

  body.cyris-page-hub .ratio-pills {
    order: 3 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    justify-content: stretch !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    margin-top: 8px !important;
    padding-top: 0 !important;
    border-top: none !important;
    overflow: visible !important;
  }

  body.cyris-page-hub .ratio-pills::-webkit-scrollbar {
    display: none !important;
  }

  body.cyris-page-hub .ratio-pill {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    justify-content: center !important;
    gap: 4px !important;
    font-size: .66rem !important;
    padding: 7px 8px !important;
    border-radius: 999px !important;
    background: var(--m-bg-surface) !important;
    color: var(--m-text-secondary) !important;
    border-color: var(--m-border) !important;
    white-space: nowrap !important;
  }

  body.cyris-page-hub .ratio-label {
    font-size: .58rem !important;
    letter-spacing: .04em !important;
  }

  /* Hub Auto-Pilot readability */
  body.cyris-page-hub .ap-arm {
    padding: 14px 14px !important;
    border-bottom: none !important;
  }

  body.cyris-page-hub .ap-arm-title span[style*="Auto-Pilot"] {
    font-size: .84rem !important;
    letter-spacing: .05em !important;
  }

  body.cyris-page-hub .ap-arm-sub {
    font-size: .78rem !important;
    line-height: 1.2 !important;
    color: var(--m-text-secondary) !important;
  }

  body.cyris-page-hub .ap-badge {
    font-size: .66rem !important;
    letter-spacing: .05em !important;
    padding: 4px 10px !important;
  }

  body.cyris-page-hub .ap-bk {
    padding: 10px 10px !important;
  }

  body.cyris-page-hub .ap-brokers {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: var(--m-bg-surface) !important;
    margin: 8px 0 4px !important;
  }

  body.cyris-page-hub .ap-brokers .ap-bk {
    min-width: 0 !important;
    border-right: 1px solid var(--m-border) !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    text-align: center !important;
  }

  body.cyris-page-hub .ap-brokers .ap-bk:last-child {
    border-right: none !important;
  }

  body.cyris-page-hub .ap-brokers .ap-bk.on {
    background: var(--m-accent-dim) !important;
  }

  body.cyris-page-hub .ap-bk-name {
    font-size: .9rem !important;
    line-height: 1.2 !important;
    width: 100% !important;
  }

  body.cyris-page-hub .ap-bk-sub {
    font-size: .78rem !important;
    line-height: 1.35 !important;
    color: var(--m-text-secondary) !important;
    width: 100% !important;
  }

  body.cyris-page-hub .ap-ctrl-label {
    font-size: .7rem !important;
    letter-spacing: .08em !important;
    color: var(--m-text-label) !important;
  }

  body.cyris-page-hub .ap-controls {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    border-bottom: none !important;
    margin-top: 10px !important;
  }

  body.cyris-page-hub .ap-ctrl {
    padding: 12px 14px !important;
    border: 1px solid var(--m-border) !important;
    border-radius: 12px !important;
    background: var(--m-bg-surface) !important;
  }

  body.cyris-page-hub .ap-ctrl-border {
    border-right: none !important;
    border-bottom: none !important;
  }

  body.cyris-page-hub .ap-controls > .ap-ctrl:first-child {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 8px 2px 0 !important;
  }

  body.cyris-page-hub .ap-controls > .ap-ctrl:first-child .ap-pills {
    border: 1px solid var(--m-border) !important;
    border-radius: 10px !important;
    background: var(--m-bg-card) !important;
    padding: 3px !important;
  }

  body.cyris-page-hub .ap-pill {
    font-size: .78rem !important;
    letter-spacing: .01em !important;
    padding: 8px 6px !important;
  }

  body.cyris-page-hub .ap-gg {
    padding: 12px 16px !important;
    gap: 12px !important;
  }

  body.cyris-page-hub .ap-gg-name {
    font-size: .98rem !important;
    line-height: 1.2 !important;
    margin-bottom: 3px !important;
  }

  body.cyris-page-hub .ap-gg-hint {
    font-size: .78rem !important;
    line-height: 1.35 !important;
    color: var(--m-text-secondary) !important;
  }

  body.cyris-page-hub .ap-gg-track {
    width: 108px !important;
    height: 5px !important;
  }

  body.cyris-page-hub .ap-gg-val {
    font-size: .88rem !important;
    min-width: 34px !important;
  }

  body.cyris-page-hub .ap-foot {
    padding: 12px 16px !important;
  }

  body.cyris-page-hub .ap-foot-link {
    font-size: .72rem !important;
    letter-spacing: .05em !important;
  }

  body.cyris-page-hub .ap-foot-note {
    font-size: .76rem !important;
    line-height: 1.3 !important;
    color: var(--m-text-secondary) !important;
    text-align: right !important;
  }

  /* Hub Open Positions readability */
  body.cyris-page-hub #w-positions .dashboard-panel-title {
    font-size: .78rem !important;
    letter-spacing: .11em !important;
    color: var(--m-text-secondary) !important;
  }

  body.cyris-page-hub #w-positions #posCount {
    font-size: .62rem !important;
    letter-spacing: .06em !important;
    color: var(--m-text-secondary) !important;
    padding: 5px 10px !important;
  }

  body.cyris-page-hub .psi-label {
    font-size: .6rem !important;
    letter-spacing: .03em !important;
    color: var(--m-text-label) !important;
  }

  body.cyris-page-hub .psi-val {
    font-size: 1rem !important;
    line-height: 1.1 !important;
  }

  body.cyris-page-hub #w-positions .pos-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 8px 10px !important;
  }

  body.cyris-page-hub #w-positions .psi {
    padding: 8px 6px !important;
    border-radius: 10px !important;
  }

  body.cyris-page-hub #w-positions .psi-label {
    margin-bottom: 4px !important;
  }

  body.cyris-page-hub .main-content,
  body.cyris-page-hub main.main-content {
    padding-bottom: calc(var(--m-bnav-h) + 8px) !important;
  }

  body.cyris-page-hub #w-verse {
    margin-bottom: 0 !important;
  }

  body.cyris-page-hub .verse-card {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 8px 2px 2px !important;
  }

  body.cyris-page-hub .pos-tab {
    font-size: .6rem !important;
    letter-spacing: .07em !important;
    padding: 8px 13px !important;
  }

  body.cyris-page-hub .pos-tabs {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 10px 0 12px !important;
    padding: 0 8px !important;
  }

  body.cyris-page-hub .pos-tab {
    flex: 0 0 auto !important;
  }

  body.cyris-page-hub .pos-empty i {
    font-size: 20px !important;
    color: var(--m-text-secondary) !important;
  }

  body.cyris-page-hub .pos-empty-text {
    font-size: .86rem !important;
    line-height: 1.3 !important;
    color: var(--m-text) !important;
    font-weight: 600 !important;
  }

  body.cyris-page-hub .pos-empty-sub {
    font-size: .76rem !important;
    line-height: 1.35 !important;
    color: var(--m-text-secondary) !important;
  }
}

/* ─── TABLES ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Horizontal scroll wrapper for tables */
  .table-wrap,
  .box-score-table,
  .users-table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius) !important;
  }

  table {
    border-collapse: collapse !important;
    width: 100% !important;
    font-size: var(--m-fs-sm) !important;
  }

  th {
    background: var(--m-bg-inset) !important;
    color: var(--m-text-label) !important;
    font-size: var(--m-fs-xs) !important;
    letter-spacing: .1em !important;
    font-weight: 600 !important;
    padding: 8px 10px !important;
    border-bottom: 1px solid var(--m-border-strong) !important;
    white-space: nowrap !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1 !important;
  }

  td {
    padding: 8px 10px !important;
    border-bottom: 1px solid var(--m-divider) !important;
    color: var(--m-text) !important;
    white-space: nowrap !important;
  }

  tr:last-child td {
    border-bottom: none !important;
  }

  [data-theme="light"] th {
    background: var(--m-bg-inset) !important;
    color: var(--m-text-label) !important;
    border-bottom-color: var(--m-border-strong) !important;
  }

  [data-theme="light"] td {
    color: var(--m-text) !important;
    border-bottom-color: var(--m-divider) !important;
  }

  /* Trade log entries — stacked for mobile */
  .trade-entry,
  .trade-entry-wrap {
    border-bottom: 1px solid var(--m-divider) !important;
  }

  [data-theme="light"] .trade-entry:hover {
    background: var(--m-accent-glow) !important;
  }

  .trade-detail-grid {
    background: var(--m-bg-inset) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius) !important;
  }

  [data-theme="light"] .trade-detail-grid {
    background: var(--m-bg-inset) !important;
    border-color: var(--m-border) !important;
  }
}

/* ─── FORM CONTROLS ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .form-input,
  .form-select,
  .form-textarea,
  .search-box,
  .search-bar,
  .search-input,
  .chatbot-input {
    background: var(--m-bg-inset) !important;
    color: var(--m-text) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius) !important;
    font-family: var(--m-font) !important;
    font-size: var(--m-fs-base) !important;
    padding: 10px 12px !important;
    min-height: 42px !important;
    outline: none !important;
    transition: border-color var(--m-dur) var(--m-ease) !important;
  }

  input:focus,
  select:focus,
  textarea:focus,
  .form-input:focus,
  .search-box:focus,
  .chatbot-input:focus {
    border-color: var(--m-accent) !important;
    box-shadow: none !important;
  }

  input::placeholder,
  textarea::placeholder,
  .search-box::placeholder {
    color: var(--m-text-tertiary) !important;
    font-size: var(--m-fs-sm) !important;
  }

  [data-theme="light"] input:not([type="checkbox"]):not([type="radio"]),
  [data-theme="light"] select,
  [data-theme="light"] textarea {
    background: var(--m-bg-inset) !important;
    color: var(--m-text) !important;
    border-color: var(--m-border) !important;
  }

  [data-theme="light"] input::placeholder,
  [data-theme="light"] textarea::placeholder {
    color: var(--m-text-tertiary) !important;
  }

  .form-group {
    margin-bottom: var(--m-gap) !important;
  }

  .form-label {
    font-size: var(--m-fs-xs) !important;
    letter-spacing: .1em !important;
    color: var(--m-text-label) !important;
    font-weight: 500 !important;
    margin-bottom: 4px !important;
  }

  /* Header search */
  .header-search input {
    background: var(--m-bg-card) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius) !important;
    color: var(--m-text) !important;
  }

  .header-search input:focus {
    border-color: var(--m-accent) !important;
  }
}

/* ─── MODALS & DRAWERS ──────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Full-screen modal overlays on mobile */
  .modal-overlay,
  .trade-modal,
  .confirm-modal,
  .results-modal,
  .risk-modal,
  .terms-modal,
  .whitelist-modal {
    background: rgba(0, 0, 0, .85) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .modal-content,
  .modal-body {
    background: var(--m-bg-surface) !important;
    border: 1px solid var(--m-border-strong) !important;
    border-radius: var(--m-radius-lg) !important;
    color: var(--m-text) !important;
    max-width: calc(100vw - 32px) !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }

  /* Gate/paywall overlays */
  .cy-gate-overlay {
    background: rgba(0, 0, 0, .92) !important;
  }

  [data-theme="light"] .cy-gate-overlay {
    background: rgba(0, 0, 0, .92) !important;
  }

  .cy-gate-card {
    background: var(--m-bg-surface) !important;
    border: 1px solid var(--m-border-strong) !important;
    border-radius: var(--m-radius-lg) !important;
    padding: 32px 24px !important;
  }

  [data-theme="light"] .cy-gate-card {
    background: var(--m-bg-surface) !important;
    border-color: var(--m-border-strong) !important;
  }

  .cy-gate-heading {
    color: var(--m-text) !important;
  }

  .cy-gate-body {
    color: var(--m-text-secondary) !important;
  }

  .cy-gate-info {
    background: var(--m-bg-card) !important;
    border-radius: var(--m-radius) !important;
    border: 1px solid var(--m-border) !important;
  }

  .cy-gate-info-label {
    color: var(--m-text-tertiary) !important;
  }

  /* Drawers — slide up from bottom on mobile */
  .drawer,
  .mob-drawer {
    background: var(--m-bg-surface) !important;
    border: 1px solid var(--m-border-strong) !important;
    border-radius: var(--m-radius-lg) var(--m-radius-lg) 0 0 !important;
    transition: transform .25s var(--m-ease) !important;
  }

  [data-theme="light"] .drawer {
    background: var(--m-bg-surface) !important;
    border-color: var(--m-border-strong) !important;
  }

  /* Loading overlay */
  .loading-overlay {
    background: rgba(0, 0, 0, .9) !important;
  }

  /* Locked overlay */
  .locked-overlay {
    background: rgba(0, 0, 0, .8) !important;
    backdrop-filter: none !important;
  }
}

/* ─── TYPOGRAPHY ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Section headers — Inter for display emphasis */
  h1, .page-title {
    font-family: var(--m-display) !important;
    font-size: var(--m-fs-xl) !important;
    font-weight: 700 !important;
    letter-spacing: -.03em !important;
    color: var(--m-text) !important;
  }

  h2, .section-title {
    font-family: var(--m-display) !important;
    font-size: var(--m-fs-lg) !important;
    font-weight: 600 !important;
    letter-spacing: -.02em !important;
    color: var(--m-text) !important;
  }

  h3 {
    font-family: var(--m-font) !important;
    font-size: var(--m-fs-base) !important;
    font-weight: 600 !important;
    color: var(--m-text) !important;
  }

  .section-title {
    border-bottom: 1px solid var(--m-divider) !important;
    padding-bottom: 8px !important;
  }

  /* Numeric data values — Inter with tabular numbers */
  .mono,
  [class*="value"],
  [class*="balance"],
  [class*="price"],
  [class*="pnl"] {
    font-family: var(--m-font) !important;
  }

  /* Empty / error / loading states */
  .empty-state,
  .error-state,
  .loading-state,
  .placeholder {
    color: var(--m-text-tertiary) !important;
    font-size: var(--m-fs-sm) !important;
  }

  /* Hints */
  .hint {
    color: var(--m-text-tertiary) !important;
    font-size: var(--m-fs-xs) !important;
  }

  /* Coming soon badge */
  .coming-soon-badge {
    background: var(--m-accent-dim) !important;
    border: 1px solid var(--m-border) !important;
    color: var(--m-accent) !important;
    border-radius: var(--m-radius-sm) !important;
    font-family: var(--m-font) !important;
    font-size: var(--m-fs-xs) !important;
  }
}

/* ─── STATUS COLORS ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Positive / green */
  .positive,
  .profit,
  .win,
  .success,
  .bullish {
    color: var(--m-green) !important;
  }

  /* Negative / red */
  .negative,
  .loss,
  .fail,
  .bearish {
    color: var(--m-red) !important;
  }

  /* Warning / amber */
  .warning,
  .caution {
    color: var(--m-amber) !important;
  }
}

/* ─── PROGRESS BARS & TRACKS ────────────────────────────────────── */
@media (max-width: 768px) {
  .conf-track,
  .prog-track,
  .mood-track,
  .risk-bar-bg {
    background: var(--m-bg-inset) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius-sm) !important;
    overflow: hidden !important;
  }

  [data-theme="light"] .conf-track,
  [data-theme="light"] .prog-track,
  [data-theme="light"] .mood-track,
  [data-theme="light"] .risk-bar-bg {
    background: var(--m-bg-inset) !important;
    border-color: var(--m-border) !important;
  }
}

/* ─── CHARTS ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  canvas {
    border-radius: var(--m-radius) !important;
  }

  .cyris-notif-bell {
    position: relative !important;
    cursor: pointer !important;
    min-width: 36px !important;
    min-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--m-radius) !important;
  }

  .cyris-notif-bell i {
    font-size: .95rem !important;
    color: var(--m-text-secondary) !important;
  }

  .cyris-notif-bell:active i {
    color: var(--m-accent) !important;
  }
}

/* ─── MOBILE HEADER UNDERLINE REMOVAL (SELECTED PAGES) ─────────── */
@media (max-width: 768px) {
  body.cyris-page-help .top-header,
  body.cyris-page-help .topbar {
    border-bottom: none !important;
  }

  body.cyris-page-help .top-header::before,
  body.cyris-page-help .topbar::before {
    display: none !important;
    content: none !important;
  }
}

/* ─── GRIDS — PRODUCT, BROKER, ACCOUNT ──────────────────────────── */
@media (max-width: 768px) {
  .product-grid,
  .broker-grid,
  .account-grid {
    grid-template-columns: 1fr !important;
    gap: var(--m-gap) !important;
  }
}

/* ─── SKELETON LOADERS ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .skeleton-card {
    background: var(--m-bg-card) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius) !important;
  }

  /* Preserve shimmer loaders on mobile (Hub uses .skeleton + .skeleton-value). */
  .skeleton,
  .skeleton-value,
  .skeleton-change {
    background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.04) 75%) !important;
    background-size: 200% 100% !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* Hub loading skeleton layout: tighter and aligned with hero section. */
  body.cyris-page-hub #loadingState {
    display: none !important;
  }

  body.cyris-page-hub .loading-hero {
    display: none !important;
  }

  body.cyris-page-hub .skeleton-value {
    width: min(78vw, 248px) !important;
    height: 44px !important;
    margin: 0 auto 10px !important;
    border-radius: 12px !important;
  }

  body.cyris-page-hub .skeleton-change {
    width: min(48vw, 150px) !important;
    height: 16px !important;
    margin: 0 auto !important;
    border-radius: 999px !important;
  }

  /* Loading spinner */
  .loading-spinner,
  .spinner {
    border-color: var(--m-border) !important;
    border-top-color: var(--m-accent) !important;
  }
}

/* ─── SCROLLBARS ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  * {
    scrollbar-width: none !important;
    scrollbar-color: transparent transparent !important;
  }

  *::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }

  *::-webkit-scrollbar-track {
    background: transparent;
  }

  *::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 0;
  }
}

/* ─── BOTTOM NAV (6 items — injected by mobile-bottom-nav.js) ───── */
@media (max-width: 768px) {
  .cyris-bnav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 400;
    height: var(--m-bnav-h);
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    background: var(--m-chrome-bg) !important;
    opacity: 1 !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-top: 1px solid var(--m-border);
    box-shadow: none !important;
    padding: 0 2px;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  .cyris-bnav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    text-decoration: none;
    color: var(--m-text-tertiary);
    font-family: var(--m-font);
    font-weight: 500;
    transition: color var(--m-dur) var(--m-ease);
    -webkit-tap-highlight-color: transparent;
    min-height: 44px;
    position: relative;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
  }

  .cyris-bnav-item i {
    font-size: 1.1rem;
    transition: color var(--m-dur) var(--m-ease),
                transform var(--m-dur) var(--m-ease);
  }

  .cyris-bnav-icon-svg {
    width: 1.1rem;
    height: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .cyris-bnav-icon-svg svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
  }

  .cyris-bnav-item span {
    display: none;
  }

  .cyris-bnav-item.active {
    color: var(--m-accent);
  }

  .cyris-bnav-item:active {
    color: var(--m-accent);
  }

  .cyris-bnav-item:active i {
    transform: scale(.9);
  }
}

/* ─── DAILY BRIEF (MARKET PREP) DE-VIBECODE ────────────────────── */
@media (max-width: 768px) {
  body.cyris-page-market-prep .verdict,
  body.cyris-page-market-prep .verdict.bull,
  body.cyris-page-market-prep .verdict.bear,
  body.cyris-page-market-prep .verdict.mixed {
    background: var(--m-bg-card) !important;
    border: 1px solid var(--m-border) !important;
    box-shadow: none !important;
  }

  body.cyris-page-market-prep .verdict::after,
  body.cyris-page-market-prep .verdict.bull::after,
  body.cyris-page-market-prep .verdict.bear::after,
  body.cyris-page-market-prep .verdict.mixed::after,
  body.cyris-page-market-prep .card-ttl::before {
    display: none !important;
    content: none !important;
  }

  body.cyris-page-market-prep .pill,
  body.cyris-page-market-prep .mkt-pill,
  body.cyris-page-market-prep .nc-imp,
  body.cyris-page-market-prep .signal {
    background: var(--m-bg-inset) !important;
    border: 1px solid var(--m-border) !important;
    color: var(--m-text-secondary) !important;
    border-radius: var(--m-radius-sm) !important;
    box-shadow: none !important;
  }

  body.cyris-page-market-prep .mkt-pill.open,
  body.cyris-page-market-prep .mkt-pill.closed,
  body.cyris-page-market-prep .nc-imp.high,
  body.cyris-page-market-prep .nc-imp.med,
  body.cyris-page-market-prep .nc-imp.low {
    background: var(--m-bg-inset) !important;
    border: 1px solid var(--m-border) !important;
  }

  body.cyris-page-market-prep .signal.up,
  body.cyris-page-market-prep .signal.wn,
  body.cyris-page-market-prep .signal.dn {
    border-top: 1px solid var(--m-border) !important;
  }

  body.cyris-page-market-prep .kn-bar,
  body.cyris-page-market-prep .kn-bar.up,
  body.cyris-page-market-prep .kn-bar.dn,
  body.cyris-page-market-prep .kn-bar.wn {
    background: var(--m-divider) !important;
    height: 1px !important;
  }

  body.cyris-page-market-prep .sent-fill,
  body.cyris-page-market-prep .prog-fill {
    background: var(--m-accent) !important;
    box-shadow: none !important;
  }

  body.cyris-page-market-prep .ci,
  body.cyris-page-market-prep .ci.done,
  body.cyris-page-market-prep .all-clear {
    background: var(--m-bg-inset) !important;
    border: 1px solid var(--m-border) !important;
  }
}

/* Hide bottom nav + intel drawer on desktop */
@media (min-width: 769px) {
  .cyris-bnav,
  .cyris-intel-overlay,
  .cyris-intel-drawer,
  .cyris-social-overlay,
  .cyris-social-modal {
    display: none !important;
  }
}

/* ─── INTELLIGENCE DRAWER (slide-up from bottom) ────────────────── */
@media (max-width: 768px) {
  .cyris-intel-overlay {
    position: fixed;
    inset: 0;
    z-index: 450;
    background: rgba(0, 0, 0, .6);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s var(--m-ease);
  }

  .cyris-intel-overlay.open {
    opacity: 1;
    pointer-events: all;
  }

  .cyris-intel-drawer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 460;
    background: var(--m-bg-surface);
    border-top: 1px solid var(--m-border-strong);
    border-radius: 12px 12px 0 0;
    padding: 8px 16px calc(var(--m-bnav-h) + env(safe-area-inset-bottom, 0) + 12px);
    transform: translateY(100%);
    transition: transform .25s var(--m-ease);
  }

  .cyris-intel-drawer.open {
    transform: translateY(0);
  }

  .cyris-social-overlay {
    position: fixed;
    inset: 0;
    z-index: 450;
    background: rgba(0, 0, 0, .62);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s var(--m-ease);
  }

  .cyris-social-overlay.open {
    opacity: 1;
    pointer-events: all;
  }

  .cyris-social-modal {
    position: fixed;
    left: 50%;
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%) scale(.98);
    width: min(92vw, 360px);
    max-height: calc(100vh - 32px);
    overflow: auto;
    background: var(--m-bg-surface);
    border: 1px solid var(--m-border-strong);
    border-radius: 18px;
    padding: 18px 16px 16px;
    z-index: 460;
    opacity: 0;
    pointer-events: none;
    box-shadow: none;
    transition: opacity .2s var(--m-ease), transform .2s var(--m-ease);
    text-align: center;
  }

  .cyris-social-modal.open {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
  }

  .cyris-social-kicker {
    font-family: var(--m-font);
    font-size: .54rem;
    letter-spacing: .18em;
    color: var(--m-accent);
    margin-bottom: 10px;
    text-align: center;
  }

  .cyris-social-modal h2 {
    font-family: var(--m-display);
    font-size: 1.25rem;
    line-height: 1.15;
    margin-bottom: 8px;
    color: var(--m-text);
    text-align: center;
  }

  .cyris-social-modal p {
    font-size: .8rem;
    line-height: 1.6;
    color: var(--m-text-secondary);
    margin-bottom: 14px;
    text-align: center;
  }

  .cyris-social-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }

  .cyris-social-discord-btn {
    border: 1px solid rgba(57, 201, 143, .36);
    background: rgba(57, 201, 143, .12);
    color: var(--m-accent);
    border-radius: var(--m-radius);
    min-height: 40px;
    padding: 0 14px;
    font-family: var(--m-font);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .04em;
  }

  .cyris-social-close-btn {
    border: 1px solid var(--m-border);
    background: var(--m-bg-card);
    color: var(--m-text);
    border-radius: var(--m-radius);
    min-height: 40px;
    padding: 0 14px;
    font-family: var(--m-font);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .06em;
  }

  /* Drag handle */
  .cyris-intel-handle {
    width: 36px;
    height: 4px;
    background: var(--m-border-strong);
    border-radius: 2px;
    margin: 0 auto 12px;
  }

  .cyris-intel-title {
    font-family: var(--m-font);
    font-size: var(--m-fs-xs);
    font-weight: 600;
    letter-spacing: .14em;
    color: var(--m-text-tertiary);
    margin-bottom: 8px;
    padding: 0 4px;
  }

  .cyris-intel-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 12px;
    border-radius: 0;
    color: var(--m-text-secondary);
    text-decoration: none;
    font-family: var(--m-font);
    font-size: var(--m-fs-base);
    font-weight: 500;
    transition: background var(--m-dur) var(--m-ease), color var(--m-dur) var(--m-ease);
    min-height: 48px;
  }

  .cyris-intel-link + .cyris-intel-link {
    border-top: 1px solid var(--m-divider);
  }

  .cyris-intel-link i:first-child {
    width: 20px;
    text-align: center;
    font-size: .85rem;
    color: var(--m-text-tertiary);
    flex-shrink: 0;
  }

  .cyris-intel-link span {
    flex: 1;
  }

  .cyris-intel-arrow {
    font-size: .6rem !important;
    color: var(--m-text-tertiary) !important;
    width: auto !important;
    margin-left: auto;
  }

  .cyris-intel-link:active {
    background: var(--m-accent-dim);
    color: var(--m-accent);
  }

  .cyris-intel-link:active i {
    color: var(--m-accent);
  }

  .cyris-intel-link.active {
    background: var(--m-accent-dim);
    color: var(--m-accent);
  }

  .cyris-intel-link.active i:first-child {
    color: var(--m-accent);
  }
}

/* ─── HEADER REFRESH BUTTON (hub.html) ──────────────────────────── */
@media (max-width: 768px) {
  .cyris-header-refresh {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    background: none;
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
    color: var(--m-text-secondary);
    font-size: .85rem;
    cursor: pointer;
    transition: all var(--m-dur) var(--m-ease);
    padding: 0;
    -webkit-tap-highlight-color: transparent;
  }

  .cyris-header-refresh:active {
    background: var(--m-accent-dim);
    border-color: var(--m-accent);
    color: var(--m-accent);
  }

  .cyris-header-refresh.loading i {
    animation: cyris-spin .7s linear infinite;
  }

  @keyframes cyris-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
}

/* ─── HUB MOBILE: REMOVE REFRESH BUTTON ─────────────────────────── */
@media (max-width: 768px) {
  .refresh-btn#refreshBtn,
  .refresh-tooltip#refreshTooltip,
  .cyris-header-refresh {
    display: none !important;
  }
}

/* ─── INJECTED NOTIFICATION BELL (pages that lack one) ──────────── */
@media (max-width: 768px) {
  .cyris-injected-bell {
    position: relative;
    cursor: pointer;
    min-width: 36px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--m-radius);
    -webkit-tap-highlight-color: transparent;
  }

  .cyris-injected-bell i {
    font-size: .95rem;
    color: var(--m-text-secondary);
    transition: color var(--m-dur) var(--m-ease);
  }

  .cyris-injected-bell:active i {
    color: var(--m-accent);
  }

  .cyris-injected-bell .notification-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 14px;
    height: 14px;
    font-size: 8px;
    font-weight: 700;
    background: var(--m-accent);
    color: #000;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
    font-family: var(--m-font);
  }
}

/* ─── COMMUNITY: COMING SOON OVERLAY ────────────────────────────── */
@media (max-width: 768px) {
  .cyris-coming-soon {
    position: fixed;
    top: 50px; /* below header */
    left: 0;
    right: 0;
    bottom: var(--m-bnav-h);
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 32px 24px;
    background: var(--m-bg);
    text-align: center;
  }

  .cyris-cs-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--m-accent-dim);
    border: 1px solid var(--m-border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
  }

  .cyris-cs-icon i {
    font-size: 1.6rem;
    color: var(--m-accent);
  }

  .cyris-cs-title {
    font-family: var(--m-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--m-text);
    letter-spacing: -.02em;
  }

  .cyris-cs-body {
    font-family: var(--m-font);
    font-size: var(--m-fs-base);
    color: var(--m-text-secondary);
    max-width: 280px;
    line-height: 1.5;
  }

  .cyris-cs-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 12px 24px;
    background: transparent;
    border: 1px solid var(--m-border-strong);
    border-radius: var(--m-radius);
    color: var(--m-text);
    font-family: var(--m-font);
    font-size: var(--m-fs-sm);
    font-weight: 500;
    text-decoration: none;
    letter-spacing: .06em;
    transition: all var(--m-dur) var(--m-ease);
    min-height: 44px;
  }

  .cyris-cs-btn:active {
    background: var(--m-accent-dim);
    border-color: var(--m-accent);
    color: var(--m-accent);
  }
}

/* ─── INDEX / LANDING PAGE MOBILE OVERRIDES ─────────────────────── */
@media (max-width: 768px) {
  /* Floating nav — terminal style (index.html landing page nav only) */
  nav:not(.cyris-bnav) {
    background: var(--m-chrome-bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius-lg) !important;
    height: 46px !important;
    top: 8px !important;
    padding: 0 14px !important;
  }

  .nav-logo {
    color: var(--m-text) !important;
    font-size: .85rem !important;
  }

  .nav-logo .g {
    color: var(--m-accent) !important;
  }

  .nav-burger {
    color: var(--m-text-secondary) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius) !important;
    background: var(--m-bg-card) !important;
    width: 34px !important;
    height: 34px !important;
  }

  .nav-burger:active {
    background: var(--m-accent-dim) !important;
    border-color: var(--m-accent) !important;
    color: var(--m-accent) !important;
  }

  /* Mobile nav menu */
  .nav-mobile {
    background: var(--m-bg-surface) !important;
    border: 1px solid var(--m-border-strong) !important;
    border-radius: var(--m-radius-lg) !important;
  }

  .nav-mobile a {
    color: var(--m-text-secondary) !important;
    border-bottom: 1px solid var(--m-divider) !important;
    padding: 12px 16px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Reduce nested card look in Hub performance blocks */
  body.cyris-page-hub #w-performance .perf-column {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 8px 4px !important;
  }

  body.cyris-page-hub #w-perfstats .pstat {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    min-height: 0 !important;
    padding: 8px 6px !important;
  }

  .nav-mobile a:active {
    background: var(--m-accent-dim) !important;
    color: var(--m-accent) !important;
  }

  /* Stat cards on landing */
  .stat-card {
    background: var(--m-bg-card) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius) !important;
  }

  .stat-n {
    font-family: var(--m-display) !important;
    color: var(--m-accent) !important;
    font-weight: 700 !important;
  }

  /* Feature cards */
  .feat-card {
    background: var(--m-bg-card) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius) !important;
  }

  /* TradeStream preview section */
  .ts-card {
    background: var(--m-bg-card) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius) !important;
  }

  /* More features grid */
  .mf-item {
    background: var(--m-bg-card) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius) !important;
  }

  /* FAQ items */
  .faq-item {
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius) !important;
    background: var(--m-bg-card) !important;
  }

  /* Footer */
  footer {
    border-top: 1px solid var(--m-divider) !important;
    background: transparent !important;
    color: var(--m-text-tertiary) !important;
  }

  .foot-links a {
    color: var(--m-text-secondary) !important;
  }
}

/* ─── MOBILE OPAQUE CHROME ENFORCEMENT ─────────────────────────── */
@media (max-width: 768px) {
  .top-header,
  .topbar,
  .cyris-bnav,
  .bottom-nav,
  .mobile-nav,
  footer {
    background: var(--m-chrome-bg) !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ─── SETTINGS PAGE CHROME STABILITY FIX ───────────────────────── */
@media (max-width: 768px) {
  body.cyris-page-settings,
  body.cyris-page-settings main,
  body.cyris-page-settings .settings-shell,
  body.cyris-page-settings .top-header,
  body.cyris-page-settings .cyris-bnav {
    background: var(--m-bg) !important;
    background-color: var(--m-bg) !important;
    background-image: none !important;
  }

  body.cyris-page-settings .settings-list-wrap,
  body.cyris-page-settings .settings-modal {
    background: var(--m-bg-surface) !important;
    border-color: var(--m-border) !important;
    box-shadow: none !important;
  }

  body.cyris-page-settings .settings-item:active {
    background: var(--m-accent-dim) !important;
  }

  /* Keep all settings row copy consistently left-aligned on mobile */
  body.cyris-page-settings .settings-item,
  body.cyris-page-settings .settings-copy,
  body.cyris-page-settings .settings-copy strong,
  body.cyris-page-settings .settings-copy small {
    text-align: left !important;
  }

  body.cyris-page-settings .settings-copy {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
  }

  body.cyris-page-settings .settings-modal,
  body.cyris-page-settings .settings-modal-title,
  body.cyris-page-settings .settings-modal-sub,
  body.cyris-page-settings .settings-modal-actions {
    text-align: left !important;
  }

  body.cyris-page-settings .settings-modal-actions {
    align-items: stretch !important;
  }

  body.cyris-page-settings .settings-item .chev {
    margin-left: 10px !important;
    flex-shrink: 0 !important;
  }

  body.cyris-page-settings .settings-title {
    display: none !important;
  }

  body.cyris-page-settings .signout-btn {
    background: rgba(255,95,95,.08) !important;
    border-color: rgba(255,95,95,.24) !important;
  }
}

/* ─── MAIN PAGE MOBILE HIERARCHY ───────────────────────────────── */
@media (max-width: 768px) {
  body[class*="cyris-page-"] .main-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  body[class*="cyris-page-"] .main-content > * {
    margin-bottom: 0 !important;
  }

  body.cyris-page-hub #contentState,
  body.cyris-page-portfolio #contentState,
  body.cyris-page-cyris-sports .main-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  body.cyris-page-hub .widget,
  body.cyris-page-portfolio .portfolio-grid > .dashboard-panel,
  body.cyris-page-cyris-sports .main-body > * {
    margin-bottom: 0 !important;
  }
}

/* ─── SITE-WIDE HERO PROMOTION (TOP BLOCK OUTSIDE CARD) ───────── */
@media (max-width: 768px) {
  body[class*="cyris-page-"] .main-content > :first-child:is(
    .dashboard-panel,
    .status-card,
    .account-card,
    .broker-card,
    .config-card,
    .guide-card,
    .post-card,
    .reply-card,
    .ts-card,
    .trade-type-card,
    .pm-card,
    .pm-pred-card,
    .comeback-card,
    .games-panel,
    .verse-card,
    .product-card,
    .edge-card,
    .pick-card,
    .kalshi-market-card,
    .player-card,
    .form-card,
    .holdings-card
  ),
  body[class*="cyris-page-"] #contentState > :first-child:is(
    .dashboard-panel,
    .status-card,
    .account-card,
    .broker-card,
    .config-card,
    .guide-card,
    .post-card,
    .reply-card,
    .ts-card,
    .trade-type-card,
    .pm-card,
    .pm-pred-card,
    .comeback-card,
    .games-panel,
    .verse-card,
    .product-card,
    .edge-card,
    .pick-card,
    .kalshi-market-card,
    .player-card,
    .form-card,
    .holdings-card
  ),
  body[class*="cyris-page-"] #contentState > .widget:first-child .dashboard-panel {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body[class*="cyris-page-"] .main-content > :first-child:is(.dashboard-panel, .status-card, .account-card, .broker-card, .holdings-card),
  body[class*="cyris-page-"] #contentState > :first-child:is(.dashboard-panel, .status-card, .account-card, .broker-card, .holdings-card),
  body[class*="cyris-page-"] #contentState > .widget:first-child .dashboard-panel {
    padding-top: 4px !important;
    padding-bottom: 10px !important;
  }

  body[class*="cyris-page-"] .main-content > :first-child:is(.dashboard-panel, .status-card, .account-card, .broker-card, .holdings-card) .dashboard-panel-header,
  body[class*="cyris-page-"] #contentState > :first-child:is(.dashboard-panel, .status-card, .account-card, .broker-card, .holdings-card) .dashboard-panel-header,
  body[class*="cyris-page-"] #contentState > .widget:first-child .dashboard-panel .dashboard-panel-header {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 8px !important;
  }
}

/* ─── PORTFOLIO HERO HIERARCHY (METRICS OUTSIDE CARD) ─────────── */
@media (max-width: 768px) {
  body.cyris-page-portfolio .portfolio-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  body.cyris-page-portfolio .grid-overview {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 14px !important;
  }

  body.cyris-page-portfolio .grid-overview .dashboard-panel-header {
    border-bottom: none !important;
    margin-bottom: 8px !important;
    padding-bottom: 0 !important;
  }

  body.cyris-page-portfolio .grid-overview .perf-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.cyris-page-portfolio .grid-overview .pstat:nth-child(-n + 2) {
    background: var(--m-bg-card) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: 12px !important;
    padding: 10px 10px 9px !important;
  }

  body.cyris-page-portfolio .grid-overview .pstat:nth-child(-n + 2) .pstat-label {
    font-size: .6rem !important;
    letter-spacing: .12em !important;
    margin-bottom: 6px !important;
  }

  body.cyris-page-portfolio .grid-overview .pstat:nth-child(-n + 2) .pstat-val {
    font-size: clamp(1.32rem, 6.4vw, 1.72rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -.02em !important;
  }

  body.cyris-page-portfolio .grid-overview .pstat:nth-child(-n + 2) .pstat-sub {
    margin-top: 6px !important;
  }

  body.cyris-page-portfolio .grid-overview .pstat:nth-child(n + 3) {
    background: var(--m-bg-card) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: 12px !important;
    padding: 10px 10px 9px !important;
  }

}

/* ─── PORTFOLIO FILTER ROUNDING + SPACING CONSISTENCY ──────────── */
@media (max-width: 768px) {
  body.cyris-page-portfolio .grid-performance,
  body.cyris-page-portfolio .grid-risk,
  body.cyris-page-portfolio .grid-tradelog {
    background: var(--m-bg-card) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: 14px !important;
    padding: 14px !important;
  }

  body.cyris-page-portfolio .grid-performance .dashboard-panel-header,
  body.cyris-page-portfolio .grid-risk .dashboard-panel-header,
  body.cyris-page-portfolio .grid-tradelog .dashboard-panel-header {
    margin-bottom: 10px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid var(--m-divider) !important;
  }

  body.cyris-page-portfolio .grid-performance .dashboard-panel-header,
  body.cyris-page-portfolio .grid-risk .dashboard-panel-header {
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }

  body.cyris-page-portfolio .grid-performance .perf-layout {
    display: grid !important;
    grid-template-columns: 104px 1fr !important;
    gap: 12px !important;
    align-items: center !important;
    margin-bottom: 0 !important;
    padding: 12px !important;
    border: 1px solid var(--m-border) !important;
    border-radius: 12px !important;
    background: var(--m-bg-inset) !important;
  }

  body.cyris-page-portfolio .grid-performance .donut-wrap {
    width: 96px !important;
    height: 96px !important;
    margin: 0 auto !important;
  }

  body.cyris-page-portfolio .grid-performance .perf-row {
    padding: 7px 0 !important;
    border-bottom: 1px solid var(--m-divider) !important;
  }

  body.cyris-page-portfolio .grid-performance .perf-row:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }

  body.cyris-page-portfolio .grid-risk .risk-row {
    margin-bottom: 8px !important;
    padding: 11px 12px !important;
    border: 1px solid var(--m-border) !important;
    border-radius: 12px !important;
    background: var(--m-bg-inset) !important;
  }

  body.cyris-page-portfolio .grid-risk .risk-row:last-child {
    margin-bottom: 0 !important;
  }

  body.cyris-page-portfolio .grid-risk .risk-bar-bg {
    height: 6px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .06) !important;
  }

  body.cyris-page-portfolio .grid-tradelog .log-header {
    margin-bottom: 10px !important;
  }

  body.cyris-page-portfolio .grid-tradelog #tradeLogBody {
    margin-top: 4px !important;
  }

  body.cyris-page-portfolio .grid-tradelog .trade-entry-wrap {
    border: 1px solid var(--m-border) !important;
    border-radius: 12px !important;
    background: var(--m-bg-inset) !important;
    margin-bottom: 8px !important;
    overflow: hidden !important;
  }

  body.cyris-page-portfolio .grid-tradelog .trade-entry-wrap:last-child {
    margin-bottom: 0 !important;
  }

  body.cyris-page-portfolio .grid-tradelog .trade-entry {
    margin: 0 !important;
    padding: 10px !important;
    border-bottom: none !important;
  }

  body.cyris-page-portfolio .grid-tradelog .trade-detail-panel {
    display: none !important;
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    border-top: none !important;
    margin: 0 !important;
    background: transparent !important;
  }

  body.cyris-page-portfolio .grid-tradelog .trade-detail-panel.open {
    display: block !important;
    max-height: 400px !important;
    overflow-y: auto !important;
    border-top: 1px solid var(--m-divider) !important;
    padding: 10px !important;
    background: rgba(255, 255, 255, .01) !important;
  }

  body.cyris-page-portfolio .grid-tradelog .empty-state {
    border: 1px solid var(--m-border) !important;
    border-radius: 12px !important;
    background: var(--m-bg-inset) !important;
    padding: 16px !important;
  }

  body.cyris-page-portfolio .log-filter-groups {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 10px !important;
    overflow: visible !important;
  }

  body.cyris-page-portfolio .log-tabs {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    gap: 8px !important;
    padding: 10px !important;
    overflow: hidden !important;
    background: var(--m-bg-card) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius) !important;
  }

  body.cyris-page-portfolio .log-tab-label {
    margin: 0 !important;
    font-size: .58rem !important;
    letter-spacing: .12em !important;
    color: var(--m-text-label) !important;
  }

  /* Track is the scroll container — constrained width lets buttons overflow */
  body.cyris-page-portfolio .log-tab-track {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x !important;
    overscroll-behavior-x: contain !important;
    scrollbar-width: none !important;
    padding-bottom: 3px !important;
  }

  body.cyris-page-portfolio .log-tab-track::-webkit-scrollbar {
    display: none !important;
  }

  body.cyris-page-portfolio .log-tab {
    flex: 0 0 auto !important;
    min-height: 34px !important;
    padding: 7px 12px !important;
    border-radius: var(--m-radius-sm) !important;
    border: 1px solid var(--m-border) !important;
    background: var(--m-bg-inset) !important;
    color: var(--m-text-secondary) !important;
    font-size: .66rem !important;
    font-weight: 700 !important;
    letter-spacing: .05em !important;
    white-space: nowrap !important;
  }

  body.cyris-page-portfolio .log-tab.active {
    background: var(--m-accent-dim) !important;
    border-color: var(--m-border-strong) !important;
    color: var(--m-accent) !important;
    box-shadow: none !important;
  }
}

/* ─── CENTERED KPI CARDS (HUB + PORTFOLIO) ─────────────────────── */
@media (max-width: 768px) {
  body.cyris-page-hub .pstat,
  body.cyris-page-portfolio .pstat {
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.cyris-page-hub .pstat-label,
  body.cyris-page-hub .pstat-val,
  body.cyris-page-hub .pstat-sub,
  body.cyris-page-portfolio .pstat-label,
  body.cyris-page-portfolio .pstat-val,
  body.cyris-page-portfolio .pstat-sub {
    width: 100% !important;
    text-align: center !important;
  }

  body.cyris-page-hub .pstat-sub,
  body.cyris-page-portfolio .pstat-sub {
    margin-top: 6px !important;
  }
}

/* ─── SPORTS HUB HEADER OPAQUE FIX ─────────────────────────────── */
@media (max-width: 768px) {
  body.cyris-page-hub .top-header::before,
  body.cyris-page-hub .top-header::after,
  body.cyris-page-cyris-sports .top-header::before,
  body.cyris-page-cyris-sports .top-header::after,
  body.cyris-page-portfolio .top-header::before,
  body.cyris-page-portfolio .top-header::after {
    display: none !important;
    content: none !important;
    background: none !important;
  }

  body.cyris-page-cyris-sports .top-header {
    background: var(--m-chrome-bg) !important;
    background-color: var(--m-chrome-bg) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--m-border) !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.cyris-page-cyris-sports .top-header::before,
  body.cyris-page-cyris-sports .top-header::after {
    display: none !important;
    content: none !important;
  }
}

/* ─── LOGIN PAGE ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .auth-card {
    background: var(--m-bg-surface) !important;
    border: 1px solid var(--m-border-strong) !important;
    border-radius: var(--m-radius-lg) !important;
    padding: 28px 20px !important;
  }

  .auth-form input {
    background: var(--m-bg-inset) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius) !important;
    color: var(--m-text) !important;
  }

  .auth-form input:focus {
    border-color: var(--m-accent) !important;
  }
}

/* ─── BROKER PAGE OVERRIDES ─────────────────────────────────────── */
/* Broker pages use a different design system (warm tones).
   Force them into the terminal aesthetic on mobile. */
@media (max-width: 768px) {
  /* Override broker-specific custom properties */
  .broker-page,
  [data-page="broker"],
  body {
    --bg-primary: #000 !important;
    --bg-elevated: #0d0d0d !important;
    --bg-card: #0d0d0d !important;
    --bg-subtle: #060606 !important;
    --bg-button: #0d0d0d !important;
    --text-primary: #e8e8e8 !important;
    --text-secondary: rgba(180, 210, 195, .55) !important;
    --text-tertiary: rgba(140, 180, 160, .35) !important;
  }

  /* Broker page cards */
  .holdings-card,
  .account-card {
    background: var(--m-bg-card) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius) !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }

  /* Broker page headers */
  .broker-header,
  .account-header {
    background: var(--m-bg-surface) !important;
    border-bottom: 1px solid var(--m-border) !important;
  }

  /* Broker account value prominent display */
  .total-value,
  .portfolio-value {
    font-family: var(--m-display) !important;
    font-size: var(--m-fs-hero) !important;
    font-weight: 700 !important;
    color: var(--m-text) !important;
    letter-spacing: -.03em !important;
  }
}

/* ─── PLANS PAGE ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .plan-card {
    background: var(--m-bg-card) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius) !important;
  }

  .plan-card.featured,
  .plan-card.popular {
    border-color: var(--m-accent) !important;
    box-shadow: 0 0 20px var(--m-accent-glow) !important;
  }

  .plan-price {
    font-family: var(--m-display) !important;
    font-size: var(--m-fs-hero) !important;
    color: var(--m-accent) !important;
    font-weight: 700 !important;
  }
}

/* ─── SPORTS PAGE SPECIFICS ─────────────────────────────────────── */
@media (max-width: 768px) {
  .edge-card,
  .pick-card,
  .parlay-card,
  .comeback-card {
    padding: var(--m-pad-card) !important;
  }

  body.cyris-page-cyris-sports .gc.parlay-card,
  body.cyris-page-cyris-sports .parlay-card {
    background: var(--m-bg-card) !important;
    border-color: var(--m-border) !important;
  }

  body.cyris-page-cyris-sports .parlay-card .gc-title {
    background: transparent !important;
  }

  /* Sports card readability: raise minimum type sizes for mobile */
  .pc-eye,
  .hub-pc-eye,
  .pc-conf-label,
  .hub-pc-conf-label,
  .pc-trend-lbl,
  .pc-extra-lbl,
  .hub-pc-extra-lbl,
  .line-label,
  .confidence-label,
  .edge-label {
    font-size: .66rem !important;
    letter-spacing: .08em !important;
    color: var(--m-text-secondary) !important;
  }

  .pc-badge {
    font-size: .62rem !important;
    padding: 4px 9px !important;
  }

  .hub-pc-badge {
    font-size: .62rem !important;
    padding: 4px 9px !important;
  }

  .pc-name,
  .hub-pc-name,
  .edge-player-name {
    font-size: 1.22rem !important;
    line-height: 1.2 !important;
  }

  .pc-matchup,
  .hub-pc-matchup,
  .edge-player-team {
    font-size: .8rem !important;
    color: var(--m-text-secondary) !important;
  }

  .pc-extra-val,
  .hub-pc-extra-val,
  .line-value,
  .edge-pct {
    font-size: .92rem !important;
  }

  .pc-stat-abbr,
  .hub-pc-stat-abbr,
  .market-name {
    font-size: .84rem !important;
    color: var(--m-text-secondary) !important;
  }

  .pc-pill,
  .hub-pc-pill,
  .market-direction {
    font-size: .72rem !important;
    padding: 4px 10px !important;
  }

  .pc-val,
  .hub-pc-val,
  .confidence-value {
    font-size: 1.95rem !important;
    line-height: 1 !important;
  }

  .pc-conf-pct,
  .hub-pc-conf-pct {
    font-size: 1rem !important;
  }

  /* Parlay builder readability */
  .parlay-card .gc-title {
    font-size: .7rem !important;
    letter-spacing: .12em !important;
    line-height: 1.2 !important;
    padding: 14px 16px !important;
  }

  .parlay-card .gc-title i {
    font-size: .82rem !important;
  }

  .parlay-card .pb-count {
    font-size: .66rem !important;
    padding: 3px 8px !important;
  }

  .parlay-card .pb-empty {
    font-size: .95rem !important;
    line-height: 1.45 !important;
    color: var(--m-text-secondary) !important;
    padding: 24px 12px !important;
  }

  .parlay-card .pb-empty i {
    font-size: 1.55rem !important;
    margin-bottom: 10px !important;
  }

  .parlay-card .pb-legs {
    gap: 8px !important;
    padding: 12px 14px !important;
  }

  .parlay-card .pb-leg {
    padding: 10px 12px !important;
    gap: 10px !important;
    border-radius: 10px !important;
  }

  .parlay-card .pb-leg-name {
    font-size: .9rem !important;
    line-height: 1.28 !important;
  }

  .parlay-card .pb-leg-detail {
    font-size: .72rem !important;
    line-height: 1.3 !important;
    color: var(--m-text-secondary) !important;
    margin-top: 2px !important;
  }

  .parlay-card .pb-leg-conf {
    font-size: .88rem !important;
  }

  .parlay-card .pb-leg-rm {
    width: 22px !important;
    height: 22px !important;
    font-size: .65rem !important;
  }

  .parlay-card .pb-footer {
    gap: 10px !important;
    padding: 0 14px 14px !important;
  }

  .parlay-card .pb-clear,
  .parlay-card .pb-ai {
    font-size: .8rem !important;
    padding: 10px !important;
  }

  /* Centering pass: keep card content on one visual center axis */
  .pc-eye,
  .hub-pc-eye,
  .pc-badge-row,
  .hub-pc-badge-row,
  .pc-name,
  .hub-pc-name,
  .pc-matchup,
  .hub-pc-matchup,
  .pc-conf-label,
  .hub-pc-conf-label {
    width: 100% !important;
    text-align: center !important;
  }

  .pc-extra,
  .hub-pc-extra {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: center !important;
    justify-items: center !important;
    column-gap: 6px !important;
    margin-bottom: 10px !important;
  }

  .pc-extra-item,
  .hub-pc-extra-item {
    width: 100% !important;
    align-items: center !important;
    text-align: center !important;
  }

  .pc-divider,
  .hub-pc-divider {
    display: none !important;
  }

  .pc-stat,
  .hub-pc-stat {
    justify-content: center !important;
    width: 100% !important;
  }

  /* Hub-specific hard overrides to guarantee centered pick cards */
  body.cyris-page-hub .hub-pick-card {
    text-align: center !important;
  }

  body.cyris-page-hub .hub-pc-eye,
  body.cyris-page-hub .hub-pc-badge-row,
  body.cyris-page-hub .hub-pc-name,
  body.cyris-page-hub .hub-pc-matchup,
  body.cyris-page-hub .hub-pc-conf-label {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  body.cyris-page-hub .hub-pc-extra {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    justify-items: center !important;
    align-items: center !important;
    column-gap: 6px !important;
  }

  body.cyris-page-hub .hub-pc-extra-item {
    width: 100% !important;
    align-items: center !important;
    text-align: center !important;
  }

  body.cyris-page-hub .hub-pc-divider {
    display: none !important;
  }

  body.cyris-page-hub .hub-pc-stat {
    justify-content: center !important;
  }

  /* De-vibecode sports cards: remove decorative variants and badge chips */
  .pc-badge-row,
  .hub-pc-badge-row {
    display: none !important;
  }

  .pick-card.c0,
  .pick-card.c1,
  .pick-card.c2,
  .hub-pick-card.c0,
  .hub-pick-card.c1,
  .hub-pick-card.c2 {
    background: var(--m-bg-card) !important;
    border-color: var(--m-border) !important;
    box-shadow: none !important;
  }

  .pick-card::before,
  .pick-card::after,
  .hub-pick-card::before,
  .hub-pick-card::after {
    display: none !important;
    content: none !important;
  }

  .pc-pill,
  .hub-pc-pill {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }

  .pc-pill.over,
  .pc-pill.under,
  .hub-pc-pill.over,
  .hub-pc-pill.under {
    background: transparent !important;
    border: none !important;
  }

  .live-indicator,
  .live-dot {
    color: var(--m-green) !important;
  }

  /* Spotlight / hero sections */
  .spotlight,
  .hero {
    background: var(--m-bg-card) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius) !important;
  }

  [data-theme="light"] .spotlight {
    background: var(--m-bg-card) !important;
    border-color: var(--m-border) !important;
  }

  .sp-seg {
    background: var(--m-bg-inset) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius-sm) !important;
  }

  [data-theme="light"] .sp-seg {
    background: var(--m-bg-inset) !important;
    border-color: var(--m-border) !important;
  }

  /* Sports mobile: use one outer page scroll, disable nested inner scroller */
  body.cyris-page-cyris-sports,
  body.cyris-page-cyris-sports html {
    overflow-y: auto !important;
  }

  body.cyris-page-cyris-sports .main-content {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }

  body.cyris-page-cyris-sports .main-body {
    overflow: visible !important;
    max-height: none !important;
  }

  body.cyris-page-cyris-sports .main-content,
  body.cyris-page-cyris-sports .main-body,
  body.cyris-page-cyris-sports #sportsContent,
  body.cyris-page-cyris-sports .bottom-grid,
  body.cyris-page-cyris-sports .games-panel,
  body.cyris-page-cyris-sports .gc.parlay-card,
  body.cyris-page-cyris-sports .parlay-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.cyris-page-cyris-sports .bottom-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.cyris-page-cyris-sports .parlay-card,
  body.cyris-page-cyris-sports .gc.parlay-card {
    position: static !important;
    top: auto !important;
  }

  /* Today's Games readability pass */
  body.cyris-page-cyris-sports .section-title {
    font-size: .92rem !important;
    letter-spacing: .02em !important;
    font-weight: 700 !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }

  body.cyris-page-cyris-sports #topPicksLeague {
    display: none !important;
  }

  body.cyris-page-cyris-sports .game-row {
    grid-template-columns: 52px minmax(0, 1fr) 72px 64px !important;
    gap: 0 !important;
    margin: 0 0 8px !important;
    padding: 12px 12px !important;
    border: 1px solid var(--m-border) !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, var(--m-bg-card) 0%, rgba(23, 23, 23, .92) 100%) !important;
    box-shadow: none !important;
  }

  body.cyris-page-cyris-sports .game-row:last-child {
    margin-bottom: 0 !important;
  }

  body.cyris-page-cyris-sports .game-row.active,
  body.cyris-page-cyris-sports .game-row.selected {
    background: linear-gradient(180deg, rgba(57, 201, 143, .08) 0%, rgba(23, 23, 23, .96) 100%) !important;
    box-shadow: inset 0 0 0 1px rgba(57, 201, 143, .18) !important;
  }

  body.cyris-page-cyris-sports .gr-time span {
    font-size: .66rem !important;
    line-height: 1.35 !important;
    color: var(--m-text-secondary) !important;
  }

  body.cyris-page-cyris-sports .gr-time span + span {
    font-size: .6rem !important;
  }

  body.cyris-page-cyris-sports .gr-live {
    font-size: .58rem !important;
    letter-spacing: .08em !important;
    padding: 3px 7px !important;
    border-radius: 999px !important;
  }

  body.cyris-page-cyris-sports .gr-team {
    font-size: .94rem !important;
    line-height: 1.28 !important;
    font-weight: 600 !important;
  }

  body.cyris-page-cyris-sports .gr-odds {
    font-size: .82rem !important;
    font-weight: 700 !important;
    color: var(--m-text-tertiary) !important;
  }

  body.cyris-page-cyris-sports .gr-odds.fav {
    color: var(--m-accent) !important;
  }

  body.cyris-page-cyris-sports .gr-matchup {
    gap: 4px !important;
    padding: 0 8px !important;
  }

  body.cyris-page-cyris-sports .gr-lines {
    gap: 4px !important;
    padding-left: 10px !important;
    border-left-color: var(--m-divider) !important;
  }

  body.cyris-page-cyris-sports .gr-spread {
    font-size: .68rem !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
    color: var(--m-text) !important;
    background: var(--m-bg-inset) !important;
    border-color: var(--m-border) !important;
  }

  body.cyris-page-cyris-sports .gr-total {
    font-size: .62rem !important;
    color: var(--m-text-secondary) !important;
  }

  body.cyris-page-cyris-sports .gr-right {
    gap: 7px !important;
    min-width: 0 !important;
  }

  body.cyris-page-cyris-sports .gr-picks-badge {
    font-size: .62rem !important;
    font-weight: 700 !important;
    padding: 4px 9px !important;
    letter-spacing: .06em !important;
    background: rgba(57, 201, 143, .08) !important;
    border-color: rgba(57, 201, 143, .18) !important;
  }

  body.cyris-page-cyris-sports .gr-league-badge {
    font-size: .55rem !important;
    padding: 2px 6px !important;
    border-radius: 999px !important;
    opacity: .9 !important;
  }

  body.cyris-page-cyris-sports .games-panel {
    background: var(--m-bg-card) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  body.cyris-page-cyris-sports .game-list {
    gap: 0 !important;
    padding: 10px !important;
  }

  body.cyris-page-cyris-sports .games-container-loading {
    padding: 28px 16px !important;
  }

  body.cyris-page-cyris-sports .section-hdr {
    margin-bottom: 10px !important;
  }

  body.cyris-page-cyris-sports .section-title {
    align-items: center !important;
  }

  /* Game details popup: mobile-friendly bottom sheet and content rhythm */
  body.cyris-page-cyris-sports .modal-container {
    left: 0 !important;
    right: 0 !important;
    top: calc(50px + env(safe-area-inset-top, 0px)) !important;
    bottom: calc(var(--m-bnav-h) + env(safe-area-inset-bottom, 0px)) !important;
    max-height: none !important;
    border-radius: 0 !important;
    background: var(--m-bg-surface) !important;
    border: 1px solid var(--m-border) !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
  }

  body.cyris-page-cyris-sports .modal-header {
    padding: 12px 14px !important;
    background: var(--m-bg-surface) !important;
    border-bottom: 1px solid var(--m-divider) !important;
  }

  body.cyris-page-cyris-sports .modal-title {
    font-size: 1rem !important;
    line-height: 1.3 !important;
    padding-right: 10px !important;
  }

  body.cyris-page-cyris-sports .modal-close {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    border: 1px solid var(--m-border) !important;
    background: var(--m-bg-card) !important;
    color: var(--m-text-secondary) !important;
  }

  body.cyris-page-cyris-sports .modal-body {
    max-width: none !important;
    max-height: none !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    padding: 12px 12px 18px !important;
    text-align: left !important;
  }

  body.cyris-page-cyris-sports .modal-game-info {
    padding: 12px 10px !important;
    border-radius: 12px !important;
    border-color: var(--m-border) !important;
    margin-bottom: 6px !important;
    gap: 6px !important;
  }

  body.cyris-page-cyris-sports .modal-team-name {
    font-size: .98rem !important;
    line-height: 1.25 !important;
  }

  body.cyris-page-cyris-sports .modal-team-odds {
    font-size: .9rem !important;
  }

  body.cyris-page-cyris-sports .box-score-hint {
    text-align: left !important;
    margin-bottom: 12px !important;
    font-size: .74rem !important;
  }

  body.cyris-page-cyris-sports .box-score-container {
    margin: 10px 0 14px !important;
    border-color: var(--m-border) !important;
    border-radius: 12px !important;
  }

  body.cyris-page-cyris-sports .box-score-header {
    padding: 10px 12px !important;
  }

  body.cyris-page-cyris-sports .box-score-content.expanded {
    max-height: 46vh !important;
  }

  body.cyris-page-cyris-sports .live-wp-section,
  body.cyris-page-cyris-sports .edge-section,
  body.cyris-page-cyris-sports .kalshi-section,
  body.cyris-page-cyris-sports .projections-section {
    margin-bottom: 14px !important;
    text-align: left !important;
  }

  body.cyris-page-cyris-sports .live-wp-title,
  body.cyris-page-cyris-sports .edge-title,
  body.cyris-page-cyris-sports .kalshi-title,
  body.cyris-page-cyris-sports .projections-title {
    font-size: .98rem !important;
    line-height: 1.25 !important;
  }

  body.cyris-page-cyris-sports .edge-predictions,
  body.cyris-page-cyris-sports .kalshi-markets {
    gap: 8px !important;
  }

  body.cyris-page-cyris-sports .edge-card,
  body.cyris-page-cyris-sports .kalshi-market-card {
    padding: 12px !important;
    border-radius: 12px !important;
    border-color: var(--m-border) !important;
  }

  body.cyris-page-cyris-sports .kalshi-connect-btn {
    width: 100% !important;
    min-height: 42px !important;
    justify-content: center !important;
    border-radius: 11px !important;
    font-size: .84rem !important;
  }

  /* Sports game modal: remove section card-in-card framing */
  body.cyris-page-cyris-sports #gameModal .live-wp-section,
  body.cyris-page-cyris-sports #gameModal .edge-section,
  body.cyris-page-cyris-sports #gameModal .kalshi-section,
  body.cyris-page-cyris-sports #gameModal .projections-section {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }

  /* TradeStream (options-flow) mobile structure cleanup */
  body.cyris-page-options-flow .main {
    padding-left: 0 !important;
    max-width: 100% !important;
  }

  body.cyris-page-options-flow .body {
    padding: 8px 10px calc(var(--m-bnav-h) + 14px) !important;
    gap: 10px !important;
  }

  body.cyris-page-options-flow .feed-col {
    gap: 10px !important;
  }

  body.cyris-page-options-flow .rpanel,
  body.cyris-page-options-flow .hero,
  body.cyris-page-options-flow .fbar,
  body.cyris-page-options-flow .feed,
  body.cyris-page-options-flow .ticker-section,
  body.cyris-page-options-flow .pie-widget {
    background: var(--m-bg-card) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius) !important;
    box-shadow: none !important;
  }

  body.cyris-page-options-flow .rpanel {
    border: 1px solid var(--m-border) !important;
    order: 1 !important;
    margin-bottom: 0 !important;
    padding: 10px !important;
    gap: 10px !important;
  }

  /* TradeStream right panel: flatten inner cards inside the outer panel */
  body.cyris-page-options-flow .rpanel .pie-widget,
  body.cyris-page-options-flow .rpanel .ticker-section {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  body.cyris-page-options-flow .rpanel .pie-widget {
    margin-bottom: 10px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid var(--m-divider) !important;
  }

  body.cyris-page-options-flow .pie-widget,
  body.cyris-page-options-flow .ticker-section {
    padding: 10px !important;
  }

  body.cyris-page-options-flow .pie-widget {
    border-bottom: 1px solid var(--m-divider) !important;
  }

  body.cyris-page-options-flow .pie-canvas-wrap {
    display: none !important;
  }

  body.cyris-page-options-flow .pie-body {
    display: block !important;
  }

  body.cyris-page-options-flow .pie-legend {
    gap: 6px !important;
  }

  body.cyris-page-options-flow .pl-row {
    padding: 6px 8px !important;
    border: 1px solid var(--m-divider) !important;
    border-radius: 10px !important;
    background: var(--m-bg-inset) !important;
  }

  body.cyris-page-options-flow .hero {
    padding: 10px !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body.cyris-page-options-flow .mood-bar {
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }

  body.cyris-page-options-flow .mood-label {
    font-size: .58rem !important;
    letter-spacing: .08em !important;
  }

  body.cyris-page-options-flow .mood-c,
  body.cyris-page-options-flow .mood-p {
    font-size: .66rem !important;
  }

  body.cyris-page-options-flow .mood-track {
    order: 4 !important;
    flex: 1 1 100% !important;
    height: 8px !important;
    border-radius: 999px !important;
  }

  body.cyris-page-options-flow .mood-word {
    width: auto !important;
    font-size: .76rem !important;
  }

  body.cyris-page-options-flow .mood-stats {
    display: flex !important;
    width: 100% !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-top: 2px !important;
  }

  body.cyris-page-options-flow .ms {
    flex: 1 1 0 !important;
  }

  body.cyris-page-options-flow .ms-lbl {
    font-size: .5rem !important;
  }

  body.cyris-page-options-flow .ms-val {
    font-size: .76rem !important;
  }

  body.cyris-page-options-flow .preview-area {
    display: none !important;
  }

  body.cyris-page-options-flow .spotlight,
  body.cyris-page-options-flow .spotlight.call,
  body.cyris-page-options-flow .spotlight.put,
  body.cyris-page-options-flow .spotlight.empty {
    background: var(--m-bg-inset) !important;
    border: 1px solid var(--m-border) !important;
  }

  body.cyris-page-options-flow .spotlight {
    padding: 12px !important;
    gap: 4px !important;
  }

  body.cyris-page-options-flow .sp-row {
    margin-top: 0 !important;
  }

  body.cyris-page-options-flow .sp-ticker {
    font-size: 1.55rem !important;
    line-height: 1.05 !important;
  }

  body.cyris-page-options-flow .sp-prem {
    font-size: .78rem !important;
  }

  body.cyris-page-options-flow .sp-badge {
    padding: 4px 10px !important;
  }

  body.cyris-page-options-flow .spotlight::after {
    display: none !important;
  }

  body.cyris-page-options-flow .fbar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 10px 10px 11px !important;
  }

  body.cyris-page-options-flow .f-gap,
  body.cyris-page-options-flow .f-ct {
    display: none !important;
  }

  body.cyris-page-options-flow .ticker-search-wrap {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  body.cyris-page-options-flow .pause-btn {
    margin-left: auto !important;
    min-height: 40px !important;
    padding: 0 12px !important;
  }

  body.cyris-page-options-flow .ticker-search {
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px 34px 8px 12px !important;
  }

  body.cyris-page-options-flow .ticker-dropdown {
    min-width: 100% !important;
  }

  body.cyris-page-options-flow .fc {
    min-height: 34px !important;
    padding: 7px 11px !important;
    border-radius: 999px !important;
    font-size: .72rem !important;
  }

  body.cyris-page-options-flow .feed {
    padding: 8px !important;
    gap: 8px !important;
  }

  body.cyris-page-options-flow .row {
    min-height: 54px !important;
    height: auto !important;
    border-radius: 12px !important;
    border: 1px solid var(--m-divider) !important;
    background: var(--m-bg-inset) !important;
  }

  body.cyris-page-options-flow .r-gap {
    width: 10px !important;
  }

  body.cyris-page-options-flow .r-arr {
    width: 18px !important;
    font-size: .92rem !important;
  }

  body.cyris-page-options-flow .r-sym {
    width: 54px !important;
    font-size: .8rem !important;
  }

  body.cyris-page-options-flow .r-prem {
    width: 70px !important;
    font-size: .76rem !important;
  }

  body.cyris-page-options-flow .r-pill {
    width: 40px !important;
  }

  body.cyris-page-options-flow .r-bar {
    padding: 0 8px !important;
    gap: 2px !important;
  }

  body.cyris-page-options-flow .bseg {
    height: 3px !important;
  }

  body.cyris-page-options-flow .r-strike {
    width: 108px !important;
    font-size: .58rem !important;
    padding-right: 8px !important;
  }

  body.cyris-page-options-flow .r-time {
    width: 60px !important;
    font-size: .54rem !important;
  }

  body.cyris-page-options-flow .rpill {
    font-size: .5rem !important;
    padding: 3px 7px !important;
    border-radius: 999px !important;
  }

  body.cyris-page-options-flow .ticker-hdr {
    padding: 0 0 8px !important;
  }

  body.cyris-page-options-flow .ticker-list {
    padding: 0 !important;
    gap: 6px !important;
  }

  body.cyris-page-options-flow .ti {
    border: 1px solid var(--m-divider) !important;
    border-radius: 10px !important;
    background: var(--m-bg-inset) !important;
    padding: 10px 10px !important;
  }

  body.cyris-page-options-flow .drawer {
    margin-top: 0 !important;
    padding: 10px !important;
  }

  body.cyris-page-options-flow .dr-hdr {
    padding: 0 0 10px !important;
  }

  body.cyris-page-options-flow .dr-grid {
    gap: 8px !important;
  }

  body.cyris-page-options-flow .mob-modal {
    padding: 12px !important;
  }

  body.cyris-page-options-flow .mob-modal .mob-drawer {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px !important;
    gap: 10px !important;
    border-radius: 16px !important;
  }

  /* TradeFinder mobile reskin */
  body.cyris-page-trade-finder .main {
    padding-left: 0 !important;
    max-width: 100% !important;
  }

  body.cyris-page-trade-finder .body {
    padding: 10px 12px calc(var(--m-bnav-h) + 18px) !important;
    gap: 12px !important;
  }

  body.cyris-page-trade-finder .scene::before,
  body.cyris-page-trade-finder .scene::after,
  body.cyris-page-trade-finder .blob {
    display: none !important;
    content: none !important;
  }

  body.cyris-page-trade-finder .scene {
    background: var(--m-bg) !important;
  }

  body.cyris-page-trade-finder .hcard,
  body.cyris-page-trade-finder #chartView .hcard {
    background: var(--m-bg-card) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius) !important;
    box-shadow: none !important;
  }

  body.cyris-page-trade-finder .hcard::before {
    display: none !important;
  }

  body.cyris-page-trade-finder .hc-filters {
    padding: 12px 12px 10px !important;
    gap: 6px !important;
  }

  body.cyris-page-trade-finder .ftile {
    padding: 6px 10px 6px 8px !important;
    border-radius: 12px !important;
    background: var(--m-bg-inset) !important;
    border-color: var(--m-border) !important;
  }

  body.cyris-page-trade-finder .ftile-name {
    font-size: .62rem !important;
    letter-spacing: .08em !important;
  }

  body.cyris-page-trade-finder .ftile-status {
    font-size: .56rem !important;
  }

  body.cyris-page-trade-finder .hc-bottom {
    flex-wrap: wrap !important;
  }

  body.cyris-page-trade-finder .hc-stats {
    width: 100% !important;
  }

  body.cyris-page-trade-finder .hstat {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 10px 12px !important;
  }

  body.cyris-page-trade-finder .hc-search {
    width: 100% !important;
    flex: 1 1 100% !important;
    padding: 10px 12px !important;
    border-right: none !important;
    border-top: 1px solid var(--m-divider) !important;
  }

  body.cyris-page-trade-finder .hc-search input {
    font-family: var(--m-font) !important;
    font-size: .88rem !important;
  }

  body.cyris-page-trade-finder .srtab {
    min-height: 34px !important;
    padding: 7px 12px !important;
    border-radius: 999px !important;
    font-size: .72rem !important;
  }

  body.cyris-page-trade-finder .card-grid {
    gap: 10px !important;
  }

  body.cyris-page-trade-finder .tcard {
    border: 1px solid var(--m-border) !important;
    border-radius: 14px !important;
    background: var(--m-bg-card) !important;
    box-shadow: none !important;
  }

  body.cyris-page-trade-finder .tc-body {
    padding: 12px 14px 10px 14px !important;
  }

  body.cyris-page-trade-finder .tc-dash {
    margin: 10px 14px 0 14px !important;
  }

  body.cyris-page-trade-finder .scan-loading,
  body.cyris-page-trade-finder .empty {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* ─── ADMIN PAGE ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .jump-menu {
    background: var(--m-bg-card) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius) !important;
  }
}

/* ─── RESEARCH DESK ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .stat,
  .stat-grid .stat {
    background: var(--m-bg-card) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius) !important;
  }

  [data-theme="light"] .stat,
  [data-theme="light"] .stat-grid .stat {
    background: var(--m-bg-card) !important;
    border-color: var(--m-border) !important;
  }
}

/* ─── MARKET PREP — VERDICT CARDS ───────────────────────────────── */
@media (max-width: 768px) {
  .verdict {
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius) !important;
    background: var(--m-bg-card) !important;
  }

  [data-theme="light"] .verdict {
    border-color: var(--m-border) !important;
  }

  .verdict-label,
  .verdict-title {
    color: var(--m-text) !important;
  }

  [data-theme="light"] .verdict-label,
  [data-theme="light"] .verdict-title {
    color: var(--m-text) !important;
  }
}

/* ─── FEED / COMMUNITY ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .post-card {
    padding: var(--m-pad-card) !important;
  }

  .reply-card {
    background: var(--m-bg-inset) !important;
    border: 1px solid var(--m-divider) !important;
    border-radius: var(--m-radius) !important;
  }
}

/* ─── THEME TOGGLE OVERRIDE ─────────────────────────────────────── */
@media (max-width: 768px) {
  .theme-toggle,
  .cy-theme-btn {
    color: var(--m-text-secondary) !important;
    border-radius: var(--m-radius) !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }

  .theme-toggle:active,
  .cy-theme-btn:active {
    background: var(--m-accent-dim) !important;
    color: var(--m-accent) !important;
  }

  /* Force dark mode icon on mobile since we override to dark */
  .cy-theme-btn .fa-sun {
    display: none !important;
  }

  .cy-theme-btn .fa-moon {
    display: inline !important;
  }

  [data-theme="light"] .cy-theme-btn .fa-sun {
    display: none !important;
  }

  [data-theme="light"] .cy-theme-btn .fa-moon {
    display: inline !important;
  }
}

/* ─── SUPPORT BUBBLE ────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Push support bubble above bottom nav */
  .cyris-support-bubble,
  [class*="support-bubble"],
  [id*="supportBubble"] {
    bottom: calc(var(--m-bnav-h) + 12px) !important;
  }
}

/* ─── NOTIFICATION BELL (injected component) ────────────────────── */
@media (max-width: 768px) {
  .notification-bell {
    border-radius: var(--m-radius) !important;
  }
}

/* ─── FOCUS VISIBILITY (Accessibility) ──────────────────────────── */
@media (max-width: 768px) {
  *:focus-visible {
    outline: 2px solid var(--m-accent) !important;
    outline-offset: 2px !important;
  }

  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    outline: 2px solid var(--m-accent) !important;
    outline-offset: 2px !important;
  }
}

/* ─── SELECTION ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  ::selection {
    background: rgba(0, 232, 150, .25);
    color: #fff;
  }
}

/* ─── SAFE AREA INSETS (notch devices) ──────────────────────────── */
@media (max-width: 768px) {
  .top-header,
  .topbar {
    padding-top: env(safe-area-inset-top, 0) !important;
  }

  .cyris-bnav {
    padding-bottom: env(safe-area-inset-bottom, 0) !important;
  }
}

/* ─── VERY SMALL SCREENS (320-360px) ────────────────────────────── */
@media (max-width: 360px) {
  :root {
    --m-pad: 10px;
    --m-pad-card: 10px;
    --m-fs-num: 1.3rem;
    --m-fs-hero: 1.6rem;
  }

  .header-icons {
    gap: 4px !important;
  }

  .broker-bar {
    padding: 3px 6px !important;
  }

  .cyris-bnav-item {
    font-size: .5rem !important;
  }

  .cyris-bnav-item i {
    font-size: 1.08rem !important;
  }
}

/* ─── MEDIUM TABLETS (up to 768px) ──────────────────────────────── */
@media (min-width: 481px) and (max-width: 768px) {
  /* Allow 2-column grids where there's room */
  .product-grid,
  .broker-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ─── HUB MOBILE UI CLEANUP ─────────────────────────────────────── */
@media (max-width: 768px) {

  /* 1. Remove divider under account value number */
  body.cyris-page-hub .performance-values {
    border-bottom: none !important;
    padding-bottom: 6px !important;
    margin-bottom: 6px !important;
  }

  /* 2. Hide Options / Stocks / Forex / You ratio-pill buttons */
  body.cyris-page-hub .ratio-pills {
    display: none !important;
  }

  /* 3. Remove both dividers in Open Positions box */
  body.cyris-page-hub #w-positions .dashboard-panel-header {
    border-bottom: none !important;
    margin-bottom: 6px !important;
    padding-bottom: 0 !important;
  }
  body.cyris-page-hub #w-perfstats .dashboard-panel-header,
  body.cyris-page-hub #marketDataPanel .dashboard-panel-header {
    border-bottom: none !important;
    margin-bottom: 6px !important;
    padding-bottom: 0 !important;
  }
  body.cyris-page-hub #w-positions .pos-summary {
    border-bottom: none !important;
  }

  /* 4. Remove both dividers in Performance box */
  body.cyris-page-hub #w-perfstats .perf-stats-grid {
    border-bottom: none !important;
    padding-bottom: 8px !important;
  }

  /* 5. Restore card styling on performance stats (match market data cards) */
  body.cyris-page-hub #w-perfstats .pstat {
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 12px !important;
    padding: 12px 10px !important;
    min-height: 0 !important;
  }
  [data-theme="light"] body.cyris-page-hub #w-perfstats .pstat {
    background: rgba(0,0,0,.03) !important;
    border-color: rgba(0,0,0,.08) !important;
  }

  body.cyris-page-hub #w-perfstats .perf-ring-box {
    margin: 8px 14px 12px !important;
  }

  /* 6. Remove divider in Market Data box */
  body.cyris-page-hub #marketDataPanel .dashboard-panel-header {
    border-bottom: none !important;
    margin-bottom: 6px !important;
    padding-bottom: 0 !important;
  }

  /* 7. Remove divider under "Cyris Top Sports" text */
  body.cyris-page-hub #sportsPicksPanel .dashboard-panel-header {
    border-bottom: none !important;
    margin-bottom: 6px !important;
    padding-bottom: 0 !important;
  }
}