/* SRUS mobile shell — drawer nav + thumb-first layout */

/* Universal scroll chain (desktop + mobile) */
html, body {
  height: 100%;
  max-height: 100dvh;
}
.discord-layout {
  min-height: 0;
  max-height: 100dvh;
}
.main-content {
  min-height: 0 !important;
}
.main-content > .view.active,
.chat-channel-view.active {
  min-height: 0 !important;
}
.chat-channel-view.active {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
}
.chat-messages {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.chat-input-bar {
  flex-shrink: 0 !important;
  padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
}

/* Match _isMobileShell() (900px) so chart-as-hero + bottom sheets always win on phones/tablets */
@media (max-width: 900px) {
  html, body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    /* Keep native iOS rubber-band on the page edge */
    overscroll-behavior-y: auto;
  }

  /*
   * ONE scroll surface per tab (iOS-app feel).
   * The active view scrolls; inner shells grow with content.
   * Nested overflow:auto boxes steal center swipes and feel "extreme".
   */
  .main-content {
    min-height: 0 !important;
    overflow: hidden !important;
  }
  .main-content > .view.active {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: auto;
    overscroll-behavior-x: none;
    touch-action: pan-y;
    scroll-behavior: auto;
    contain: layout style;
  }

  /* While the user is actively scrolling, kill all transitions so the compositor
     isn't fighting layout-triggering animations (chrome hide, footer slide, etc.). */
  body.srus-scrolling .terminal-chrome,
  body.srus-scrolling #hud-ticker-tape,
  body.srus-scrolling .dev-footer,
  body.srus-scrolling .channel-item,
  body.srus-scrolling .top-header button,
  body.srus-scrolling .chat-send-btn,
  body.srus-scrolling .sig-card,
  body.srus-scrolling .nav-item {
    transition: none !important;
  }
  /* Pause heatmap tile animations while scrolling to keep the compositor free. */
  body.srus-scrolling .hm-tile,
  body.srus-scrolling .hm-signal-icon,
  body.srus-scrolling .hm-tile.signal-tile,
  body.srus-scrolling .hm-tile.flashing,
  body.srus-scrolling .hm-tile.pop-in {
    animation: none !important;
  }

  /* Tap targets: no double-tap zoom, no browser gestures stealing taps. */
  button, .sec-link, .nav-item, .tt-ind-btn, .majors-tab, .ag-btn, .channel-item,
  .top-header button, .chat-send-btn, .hm-tf-btn, .hm-filter-btn, .hm-sort-btn {
    touch-action: manipulation;
  }
  /* Children expand — do NOT become competing scroll panes */
  .main-content > .view.active > [style*="overflow-y"],
  .main-content > .view.active > .content-area,
  .main-content > .view.active > .profile-shell,
  .main-content > .view.active > .info-shell,
  .main-content > .view.active > .sig-shell,
  .main-content > .view.active > .support-page,
  .main-content > .view.active > .feed-shell,
  .main-content > .view.active > .oracle-shell,
  .main-content > .view.active > .majors-shell,
  .main-content > .view.active > .wave-view-container,
  .main-content > .view.active > .dev-page,
  .main-content > .view.active > .bots-full-area,
  .main-content > .view.active > .log-panel,
  #liq-magnet-mount {
    flex: 0 0 auto !important;
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    -webkit-overflow-scrolling: auto !important;
    overscroll-behavior: auto;
    touch-action: pan-y;
  }
  /* Trading terminal keeps its own sheet/chart scroll model */
  #view-tradingTerminal.view.active {
    overflow: hidden !important;
  }
  #view-tradingTerminal.view.active > .tt-shell {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }
  /* Trades tabs: outer view scrolls; inner panels shouldn't trap */
  #view-trades.view.active > div {
    overflow: visible !important;
    height: auto !important;
    flex: 0 0 auto !important;
  }
  /* Nested lists that used to trap scroll (signals log, etc.) */
  .sig-past-list,
  .sig-active-grid,
  .feed-stream,
  .feed-shell,
  .support-page,
  .dev-page,
  .psych-mind-feed {
    max-height: none !important;
    overflow: visible !important;
  }

  /* Chat: full remaining height under header, sticky composer */
  .chat-channel-view.active {
    height: 100% !important;
    max-height: 100% !important;
  }
  .chat-messages {
    padding: 12px 12px 8px !important;
  }
  .chat-input-bar {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .chat-input { font-size: 16px !important; } /* prevent iOS zoom */
  .chat-send-btn {
    min-height: 40px;
    padding: 8px 14px !important;
  }
  .discord-channel-header {
    flex-shrink: 0;
    padding: 10px 12px !important;
  }

  /* Feed / news: single column, denser */
  .feed-layout,
  .news-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .feed-sidebar,
  .news-sidebar {
    order: 2;
  }
  .feed-main,
  .news-main {
    order: 1;
  }

  /* Dev / workstation grids */
  #view-workstation [style*="grid-template-columns:repeat(4"],
  #view-workstation [style*="grid-template-columns:repeat(5"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .dev-grid {
    grid-template-columns: 1fr !important;
  }

  /* Fixed footer: leave room + don't steal taps; slides away with chrome */
  .dev-footer {
    height: 28px;
    font-size: 10px;
    gap: 10px;
    padding: 0 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    transition: transform var(--srus-chrome-ms, 280ms) var(--srus-ios-ease, cubic-bezier(0.32, 0.72, 0, 1));
    will-change: transform;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  body.mobile-chrome-hidden .dev-footer,
  .dev-footer.is-collapsed {
    transform: translate3d(0, 110%, 0) !important;
    pointer-events: none !important;
  }
  .main-content { padding-bottom: 28px !important; }
  .main-content:has(.chat-channel-view.active) { padding-bottom: 0 !important; }
  body.mobile-chrome-hidden .main-content { padding-bottom: 0 !important; }

  /* Collapsible top chrome — shorter, quieter than before (was 620ms + layout jump). */
  #hud-ticker-tape {
    transition: transform var(--srus-chrome-ms, 280ms) var(--srus-ios-ease, cubic-bezier(0.32, 0.72, 0, 1));
    will-change: transform;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  .terminal-chrome {
    flex-shrink: 0;
    z-index: 40;
    transition: transform var(--srus-chrome-ms, 280ms) var(--srus-ios-ease, cubic-bezier(0.32, 0.72, 0, 1));
    will-change: transform;
    transform: translate3d(0, 0, 0);
    margin-top: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  body.mobile-chrome-hidden #hud-ticker-tape,
  #hud-ticker-tape.is-collapsed {
    transform: translate3d(0, -100%, 0) !important;
    pointer-events: none !important;
  }
  body.mobile-chrome-hidden .terminal-chrome,
  .terminal-chrome.is-collapsed {
    transform: translate3d(0, -100%, 0) !important;
    margin-top: calc(-1 * var(--srus-chrome-h, 72px)) !important;
    pointer-events: none !important;
  }
  body.mobile-chrome-hidden #discordLayout {
    margin-top: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
  }

  /* Ecosystem feel — iOS app polish */
  * {
    -webkit-tap-highlight-color: transparent;
  }
  .main-content > .view,
  .chat-channel-view {
    -webkit-overflow-scrolling: touch;
  }
  .main-content > .view.active {
    animation: srusViewIn 0.28s var(--srus-ios-ease, cubic-bezier(0.32, 0.72, 0, 1));
  }
  @keyframes srusViewIn {
    from { opacity: 0.55; transform: translate3d(0, 6px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
  }
  .channel-item,
  .top-header button,
  .chat-send-btn,
  .sig-card,
  .nav-item {
    transition: transform 0.18s var(--srus-ios-ease, cubic-bezier(0.32, 0.72, 0, 1)),
                opacity 0.18s ease,
                background-color 0.18s ease;
  }
  .channel-item:active,
  .top-header button:active,
  .chat-send-btn:active {
    transform: scale(0.96);
  }
  @media (prefers-reduced-motion: reduce) {
    .main-content > .view.active { animation: none !important; }
    .channel-item:active,
    .top-header button:active,
    .chat-send-btn:active { transform: none !important; }
  }

  .top-header {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 8px 10px !important;
    min-height: 44px;
    gap: 8px !important;
  }
  .top-header::-webkit-scrollbar { display: none; }
  .top-header > div:last-child {
    display: flex;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    min-width: 0;
  }
  .top-header > div:last-child::-webkit-scrollbar { display: none; }
  .top-header button,
  .top-header #pass-badge {
    flex-shrink: 0;
    font-size: 10px !important;
    padding: 6px 8px !important;
  }

  #risk-ticker {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 10px !important;
    height: 26px !important;
    font-size: 9px !important;
  }
  #risk-ticker::-webkit-scrollbar { display: none; }

  /* Heatmap: one scroll surface, header scrolls away */
  #view-heatmap {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    min-height: 0 !important;
  }
  #view-heatmap .heatmap-header {
    flex-shrink: 0;
    position: relative;
    box-shadow: none;
  }
  #view-heatmap .heatmap-body {
    flex: none !important;
    min-height: auto !important;
    overflow: visible !important;
  }
  #view-heatmap .heatmap-container {
    min-height: 55vh;
    padding: 8px 6px 16px !important;
    gap: 5px !important;
  }
  #view-heatmap .hm-tile {
    min-width: 54px !important;
    min-height: 44px !important;
    padding: 4px 3px !important;
  }
  #view-heatmap .hm-tile-sym { font-size: 9px !important; }
  #view-heatmap .hm-tile-pct { font-size: 10px !important; }

  .heatmap-controls {
    padding: 8px 10px !important;
    gap: 8px !important;
  }
  .hm-controls-top { width: 100%; }
  .hm-controls-actions { margin-left: auto; }
  .hm-scroll-row {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100%;
    padding-bottom: 2px;
  }
  .hm-scroll-row::-webkit-scrollbar { display: none; }
  .hm-tf-btn, .hm-filter-btn {
    flex-shrink: 0;
    padding: 6px 11px !important;
    font-size: 11px !important;
  }
  .hm-controls-bottom {
    width: 100%;
    flex-wrap: nowrap;
    gap: 6px !important;
  }
  .hm-search {
    flex: 1;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
  }
  .hm-sort-group { margin-left: 0 !important; flex-shrink: 0; }
  .hm-legend-toggle { display: inline-flex !important; align-items: center; }
  .heatmap-legend {
    display: none !important;
    max-height: 140px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 10px !important;
    gap: 8px !important;
    font-size: 10px !important;
  }
  .heatmap-legend.is-open { display: flex !important; }
  .heatmap-legend .hm-clock,
  .heatmap-legend span:last-child { display: none; }

  .discord-main,
  .main-stage,
  #mainContent,
  .main-content,
  .app-main {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* Side panel becomes an off-canvas drawer — beats desktop collapsed width:0 */
  body.left-chrome-collapsed #discordSidebar.channel-sidebar,
  body.left-chrome-collapsed #discordSidebar,
  #discordSidebar.channel-sidebar,
  #discordSidebar {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: min(86vw, 300px) !important;
    min-width: min(86vw, 300px) !important;
    max-width: min(86vw, 300px) !important;
    z-index: 6000 !important;
    opacity: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 0 calc(40px + env(safe-area-inset-bottom, 0px)) 0 !important;
    margin: 0 !important;
    /* Closed drawer must NOT steal center swipes (iOS hit-tests transforms oddly) */
    pointer-events: none !important;
    visibility: hidden;
    transform: translateX(-105%) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, visibility 0s linear 0.25s !important;
    border-right: 1px solid var(--border) !important;
    box-shadow: none !important;
  }
  #discordSidebar .sidebar-user-area {
    padding-bottom: 16px !important;
    min-height: 72px !important;
  }

  /* Open when chrome is NOT collapsed */
  body:not(.left-chrome-collapsed) #discordSidebar.channel-sidebar,
  body:not(.left-chrome-collapsed) #discordSidebar {
    transform: translateX(0) !important;
    box-shadow: 12px 0 48px rgba(0, 0, 0, 0.55) !important;
    pointer-events: auto !important;
    visibility: visible;
    transition: transform 0.25s ease, box-shadow 0.25s ease, visibility 0s linear 0s !important;
  }

  /* Keep toggle usable inside the drawer (only when open) */
  body:not(.left-chrome-collapsed) #discordSidebar .channel-sidebar-toggle {
    right: 10px !important;
    top: 10px !important;
    width: 36px !important;
    height: 36px !important;
    z-index: 6001;
    pointer-events: auto !important;
  }
  body.left-chrome-collapsed #discordSidebar .channel-sidebar-toggle {
    pointer-events: none !important;
    visibility: hidden !important;
  }

  /* Scrim behind open drawer */
  #mobile-nav-scrim {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 5990;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
  }
  body:not(.left-chrome-collapsed) #mobile-nav-scrim {
    display: block;
  }

  /* Floating open button when drawer closed */
  #mobile-nav-fab {
    display: none;
    position: fixed;
    left: 12px;
    bottom: 18px;
    z-index: 5980;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    border: 1px solid rgba(34, 197, 94, 0.45);
    background: linear-gradient(160deg, rgba(16, 16, 22, 0.96), rgba(9, 9, 13, 0.92));
    color: #86efac;
    font-size: 22px;
    font-weight: 800;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    cursor: pointer;
  }
  body.left-chrome-collapsed #mobile-nav-fab {
    display: flex;
  }

  /* Touch-friendly controls */
  button, .sec-link, .nav-item, .tt-ind-btn, .majors-tab, .ag-btn, .channel-item {
    min-height: 44px;
  }
  .channel-item {
    padding: 10px 12px !important;
    font-size: 14px !important;
  }

  /* ═══ Trading Terminal — mobile-native (NOT a desktop stack) ═══
     Chart fills the screen. Trade / Positions are bottom sheets.
     Top chrome + bottom footer hide so Chart/Depth/Trade/Positions stay tappable. */
  body.tt-mobile-focus #hud-ticker-tape,
  body.tt-mobile-focus .terminal-chrome,
  body.tt-mobile-focus #risk-ticker,
  body.tt-mobile-focus #devFooter,
  body.tt-mobile-focus .dev-footer {
    display: none !important;
    height: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: none !important;
    pointer-events: none !important;
    transform: none !important;
    visibility: hidden !important;
  }
  body.tt-mobile-focus #discordLayout {
    margin-top: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
  body.tt-mobile-focus .main-content {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
  /* Keep nav fab above the tab bar, never on top of Trade/Positions */
  body.tt-mobile-focus #mobile-nav-fab {
    bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
    left: 10px !important;
    width: 44px !important;
    height: 44px !important;
    z-index: 35 !important; /* below .tt-mobile-tabs (50) */
  }

  #view-tradingTerminal.view.active,
  #view-tradingTerminal {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }
  #view-tradingTerminal > .tt-shell {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /* Compact header: symbol + TF only */
  .tt-topbar {
    flex-shrink: 0 !important;
    padding: 6px 10px !important;
    gap: 8px !important;
    align-items: center !important;
  }
  .tt-topbar > div:first-child { display: none !important; } /* title/sub */
  .tt-topbar .sec-link { display: none !important; }
  .tt-topbar #sh-chart-status {
    font-size: 10px !important;
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tt-topbar .srus-dd { min-width: 72px !important; }

  .tt-layout {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /* Chart = hero plane */
  #tt-chart-panel {
    order: 0 !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 1;
  }
  #tt-chart-panel .term-titlebar {
    flex-shrink: 0 !important;
    padding: 4px 8px !important;
    min-height: 36px !important;
  }
  #tt-chart-panel .term-titlebar .title-left { display: none !important; }
  #tt-ind-toggles {
    max-width: 100% !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #tt-ind-toggles::-webkit-scrollbar { display: none; }
  #tt-chart-panel .term-body,
  #sh-chart-wrap,
  #sh-chart-container {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
  }
  #sh-chart-container iframe {
    width: 100% !important;
    height: 100% !important;
  }

  /* Trade / Depth / Book: off-canvas bottom sheets (above tab bar, inside .tt-layout) */
  #tt-trade-panel,
  #tt-depth-panel,
  #tt-book-panel {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important; /* .tt-layout ends above .tt-mobile-tabs */
    top: auto !important;
    height: min(58dvh, 480px) !important;
    max-height: min(58dvh, 480px) !important;
    order: unset !important;
    grid-column: unset !important;
    grid-row: unset !important;
    z-index: 30 !important;
    border: none !important;
    border-top: 1px solid rgba(168, 85, 247, 0.35) !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.55) !important;
    background: #0b0b10 !important;
    transform: translate3d(0, 110%, 0) !important;
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1) !important;
    pointer-events: none !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }
  body.tt-sheet-trade #tt-trade-panel,
  body.tt-sheet-depth #tt-depth-panel,
  body.tt-sheet-book #tt-book-panel {
    transform: translate3d(0, 0, 0) !important;
    pointer-events: auto !important;
  }
  body.tt-sheet-depth #tt-depth-panel {
    height: min(72dvh, 620px) !important;
    max-height: min(72dvh, 620px) !important;
  }
  #tt-trade-panel .term-titlebar,
  #tt-depth-panel .term-titlebar,
  #tt-book-panel .term-titlebar {
    flex-shrink: 0 !important;
    padding: 10px 12px !important;
  }
  #tt-trade-panel .term-body,
  #tt-depth-panel .tt-depth-body,
  #tt-book-panel .tt-book-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #tt-book-panel .tt-levels-panel {
    max-height: 28%;
    overflow: auto;
  }
  .tt-book-table { font-size: 10px !important; }
  .tt-book-table th,
  .tt-book-table td { padding: 7px 6px !important; }
  /* Hide low-value columns on tiny screens inside book */
  .tt-book-table th:nth-child(n+5),
  .tt-book-table td:nth-child(n+5) {
    display: none;
  }
  .tt-book-table th:last-child,
  .tt-book-table td:last-child {
    display: table-cell !important;
  }

  /* Bottom tab bar — above fixed footer / fab so buttons stay visible */
  body.tt-mobile-focus .tt-mobile-tabs,
  .tt-mobile-tabs {
    display: flex !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 50 !important;
    background: #08080c !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    padding: 6px 6px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 4px;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45);
  }
  .tt-m-tab {
    flex: 1;
    appearance: none;
    border: none;
    background: transparent;
    color: var(--fg-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    min-height: 48px !important;
    border-radius: 10px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .tt-m-tab.active {
    color: #16C784;
    background: rgba(22, 199, 132, 0.12);
  }
  .tt-mobile-sheet-close {
    display: none;
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 45;
    appearance: none;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(20,20,28,0.92);
    color: var(--fg);
    font-size: 12px;
    font-weight: 800;
    padding: 8px 12px;
    border-radius: 999px;
    min-height: 36px !important;
  }
  body.tt-sheet-trade .tt-mobile-sheet-close,
  body.tt-sheet-depth .tt-mobile-sheet-close,
  body.tt-sheet-book .tt-mobile-sheet-close {
    display: block;
  }

  .tt-side-btn { min-height: 44px !important; font-size: 13px !important; }
  .tt-submit { min-height: 48px !important; font-size: 14px !important; }
  .tt-acct { margin-bottom: 10px !important; }
  .tt-field input { font-size: 16px !important; } /* no iOS zoom */

  .oracle-hero-row,
  .oracle-mid-grid,
  .home-bot-grid,
  .bd-kpi-grid,
  .sig-live-grid {
    grid-template-columns: 1fr !important;
  }

  /* Global page gutters — stop content kissing the bezel */
  .main-content > .view.active {
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
  }
  .oracle-shell,
  .majors-shell,
  .heatmap-controls,
  .sig-shell,
  .support-page,
  .dev-page,
  .profile-shell,
  .info-shell,
  .wave-view-container,
  .content-area,
  .bots-full-area,
  .feed-shell {
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Clear fixed footer + nav FAB so last cards aren't covered */
  .main-content > .view.active > .sig-shell,
  .main-content > .view.active > .feed-shell,
  .main-content > .view.active > .oracle-shell,
  .main-content > .view.active > .majors-shell,
  .main-content > .view.active > .dev-page,
  .main-content > .view.active > .support-page,
  .main-content > .view.active > .profile-shell,
  .main-content > .view.active > .info-shell,
  .main-content > .view.active > .wave-view-container,
  .main-content > .view.active > .content-area,
  .main-content > .view.active > .bots-full-area {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Feed mobile fit */
  #view-feed .feed-shell {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  #view-feed .feed-column {
    max-width: 100% !important;
    width: 100% !important;
  }
  #view-feed .feed-topbar .sec-title { font-size: 17px !important; }
  #view-feed .feed-compose {
    margin: 8px 0 10px !important;
    border-radius: 14px !important;
    padding: 12px !important;
  }
  #view-feed .feed-stream {
    border-radius: 14px !important;
    border-left: 1px solid rgba(255,255,255,0.06) !important;
    border-right: 1px solid rgba(255,255,255,0.06) !important;
  }
  #view-feed #feed-list .feed-post {
    padding: 12px !important;
    grid-template-columns: 36px minmax(0, 1fr) !important;
    gap: 0 10px !important;
  }
  #view-feed .feed-post-text {
    font-size: 14px !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  #view-feed .feed-post-meta {
    min-width: 0;
  }
  #view-feed .feed-post-author,
  #view-feed .feed-post-handle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }

  /* FAB above footer, clear of content */
  #mobile-nav-fab {
    left: 14px !important;
    bottom: calc(40px + env(safe-area-inset-bottom, 0px)) !important;
    width: 46px !important;
    height: 46px !important;
    font-size: 18px !important;
  }
  .dev-footer {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .term-titlebar, .oracle-topbar, .majors-top, .top-header {
    flex-wrap: wrap;
    gap: 8px;
  }

  .top-header #top-prices,
  .top-header #sniper-header-btn {
    display: none !important;
  }

  .hud-toast-container {
    left: 8px;
    right: 8px;
    width: auto;
    bottom: 78px;
  }

  .sig-card {
    padding: 12px !important;
  }

  /* ═══ Trade tabs — mobile-native card list ═══ */
  .tt-trade-tab-panel { display: none; }
  .tt-trade-tab-panel.active { display: block; }

  #view-trades .tt-mobile-kpi-wrap {
    padding: 12px 12px 0 !important;
  }
  #view-trades .tt-mobile-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  #view-trades .tt-mobile-kpi-grid .card {
    padding: 10px !important;
    min-height: 0 !important;
  }
  #view-trades .tt-mobile-kpi-grid .card-label {
    font-size: 9px !important;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
  }
  #view-trades .tt-mobile-kpi-grid .card-val {
    font-size: 17px !important;
  }
  #view-trades .tt-mobile-kpi-grid .card-sub {
    font-size: 10px !important;
    margin-top: 2px;
  }

  #view-trades .tt-mobile-tabs {
    position: sticky;
    top: 0;
    z-index: 5;
    margin-top: 10px !important;
    padding: 0 12px !important;
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
  }
  #view-trades .tt-mobile-tabs .fbtn {
    flex: 1;
    min-height: 44px;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 800;
    border-bottom: 2px solid transparent !important;
    background: transparent;
    color: var(--fg-muted);
  }
  #view-trades .tt-mobile-tabs .fbtn.active {
    color: var(--accent);
    border-bottom-color: var(--accent) !important;
  }

  #view-trades .tt-trade-tab-panel {
    padding: 12px !important;
  }
  #view-trades .tt-trade-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  #view-trades .tt-trade-grid .trades-empty {
    grid-column: auto;
    min-height: auto;
    padding: 24px 12px;
  }

  #view-trades .sniper-open-card,
  #view-trades .sh-card {
    border-radius: 12px;
    padding: 12px;
  }
  #view-trades .sniper-open-top,
  #view-trades .sh-top {
    margin-bottom: 8px;
  }
  #view-trades .sniper-open-meta,
  #view-trades .sh-fields {
    gap: 6px 10px;
    margin-top: 8px;
  }
  #view-trades .sniper-open-card .sec-link {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
  }

  #view-trades .tt-fills-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg);
  }
  #view-trades .tt-fills-scroll .tt-table {
    min-width: 480px;
    font-size: 11px;
  }
  #view-trades .tt-fills-scroll .tt-table th,
  #view-trades .tt-fills-scroll .tt-table td {
    padding: 8px 6px;
  }

  /* ═══ Stonks Hub — mobile-native vertical stack ═══ */
  #view-stonksHub {
    padding: 0 !important;
  }
  #view-stonksHub .sh-shell {
    padding: 12px !important;
  }
  #view-stonksHub .sec-hdr {
    margin-bottom: 12px !important;
    flex-wrap: wrap;
    gap: 8px;
  }
  #view-stonksHub .sec-title {
    font-size: 15px;
    line-height: 1.3;
  }
  #view-stonksHub .sec-sub {
    font-size: 11px;
  }

  /* ═══ Sentiment + Live — feed-style (single column cards) ═══ */
  #view-stonksHub .sh-feed-tab {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    min-height: auto !important;
    overflow: visible !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  #view-stonksHub .sh-feed,
  #view-stonksHub #sh-sentiment-feed {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    grid-template-columns: none !important;
    margin-bottom: 12px !important;
  }
  #view-stonksHub .sh-feed-card,
  #view-stonksHub #sh-tab-live > .term-win,
  #view-stonksHub #sh-tab-live .sh-two-col > .term-win {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    border-radius: 12px !important;
    background: var(--bg2) !important;
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
  }
  #view-stonksHub .sh-feed-card .term-body,
  #view-stonksHub .sh-feed-card .term-titlebar {
    overflow: visible !important;
  }
  #view-stonksHub .sh-feed-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
  }
  #view-stonksHub .sh-feed-card-sym {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.02em;
  }
  #view-stonksHub .sh-feed-card-stat {
    font-size: 14px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }
  #view-stonksHub .sh-feed-card-body {
    font-size: 13px;
    color: var(--fg-dim);
    line-height: 1.45;
    word-break: break-word;
  }
  #view-stonksHub .sh-live-price-card {
    padding: 12px 14px !important;
    min-height: 56px;
  }
  #view-stonksHub .sh-kpi-trio {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    grid-template-columns: none !important;
  }
  #view-stonksHub .sh-feed-mini {
    padding: 10px 12px !important;
    background: var(--bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    text-align: left !important;
    min-height: 52px;
  }
  #view-stonksHub #sh-live-prices.sh-feed {
    max-height: none !important;
  }
  #view-stonksHub #ch-focus-bots {
    grid-template-columns: 1fr !important;
  }

  #view-stonksHub #sh-market-banner {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  #view-stonksHub #sh-market-banner .ch-kpi-card {
    padding: 10px !important;
  }
  #view-stonksHub #sh-market-banner .ch-kpi-lbl {
    font-size: 10px;
  }
  #view-stonksHub #sh-market-banner .ch-kpi-val {
    font-size: 16px;
  }

  #view-stonksHub #sh-nyopen-playbook {
    margin-bottom: 12px !important;
  }
  #view-stonksHub #sh-nyopen-playbook > div:first-child {
    flex-wrap: wrap;
    gap: 8px;
  }
  #view-stonksHub #sh-playbook-factors {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
  }

  #view-stonksHub .sh-tab-row {
    position: sticky;
    top: 0;
    z-index: 5;
    margin-bottom: 12px !important;
  }
  #view-stonksHub .sh-tab {
    flex: 1;
    min-height: 44px;
    font-size: 12px;
    padding: 10px 6px !important;
    letter-spacing: 0.04em;
    justify-content: center;
  }

  #view-stonksHub #sh3d-wait-zone .sh3d-scene {
    width: 100% !important;
    height: 150px !important;
  }

  #view-stonksHub .sh-orb-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }

  #view-stonksHub #sh-sector-heatmap {
    margin-bottom: 12px !important;
  }

  #view-stonksHub #sh-top-picks {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  #view-stonksHub .sh-two-col {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
  }

  #view-stonksHub .sh-paper-kpi {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }

  #view-stonksHub .sh-main-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
  }
  #view-stonksHub .sh-main-grid .term-win {
    overflow: hidden;
  }
  #view-stonksHub .sh-main-grid #sh-watchlist,
  #view-stonksHub .sh-main-grid #sh-news-feed {
    max-height: 220px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #view-stonksHub .sh-bottom-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
  }

  /* Trade history → card rows (no horizontal squeeze table) */
  #view-stonksHub .sh-trade-history {
    overflow: visible !important;
    border: none !important;
    background: transparent !important;
  }
  #view-stonksHub .sh-trade-history table,
  #view-stonksHub .sh-trade-history thead {
    display: none !important;
  }
  #view-stonksHub .sh-trade-history tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  #view-stonksHub .sh-trade-history tbody tr {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 10px !important;
    padding: 12px 14px !important;
    background: var(--bg2) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    min-height: 56px;
  }
  #view-stonksHub .sh-trade-history tbody td {
    display: block !important;
    padding: 0 !important;
    border: none !important;
    font-size: 12px !important;
    width: auto !important;
  }
  #view-stonksHub .sh-trade-history tbody td:nth-child(1) {
    font-weight: 800;
    font-size: 14px !important;
    flex: 1 1 40%;
  }
  #view-stonksHub .sh-trade-history tbody td:nth-child(2) {
    font-weight: 800;
  }
  #view-stonksHub .sh-trade-history tbody td:last-child {
    flex: 1 1 100%;
    color: var(--fg-muted);
    font-size: 11px !important;
  }

  #view-stonksHub .term-win {
    border-radius: 12px;
  }
  #view-stonksHub .term-titlebar {
    padding: 10px 12px !important;
    min-height: 44px;
    flex-wrap: wrap;
    gap: 8px;
  }
  #view-stonksHub .term-titlebar .title-left,
  #view-stonksHub .term-titlebar .title-right {
    flex-wrap: wrap;
    min-width: 0;
  }
  #view-stonksHub .term-titlebar .win-btn {
    display: none !important;
  }

  #view-stonksHub #sh3d-btc-dom {
    height: 180px !important;
  }
  #view-stonksHub .sh-tab-panel:not(.active) {
    display: none;
  }

  #view-stonksHub .sh-inner-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Stock heatmap inside Stonks Hub */
  #view-stonksHub #sh-heatmap-grid {
    min-height: 36vh;
  }
  #view-stonksHub .sh-heatmap-controls {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #view-stonksHub .sh-heatmap-controls .hm-search {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  #view-stonksHub .sh-heatmap-controls .hm-filter-btn {
    flex: 1;
    min-height: 36px;
  }

  /* ═══ Wide desktop tables → horizontal scroll + sticky first column ═══ */
  /* Paper trade journal + backtested trade log: wrapper scrolls, edge
     shadows reveal scrollability, first column stays pinned. */
  #view-paper .term-body:has(> table),
  #view-charts .term-body:has(#bt-trade-log) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    background:
      linear-gradient(to right, var(--bg) 30%, rgba(0, 0, 0, 0)),
      linear-gradient(to left, var(--bg) 30%, rgba(0, 0, 0, 0)) 100% 0,
      radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0)),
      radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0)) 100% 0;
    background-repeat: no-repeat;
    background-color: var(--bg);
    background-size: 40px 100%, 40px 100%, 12px 100%, 12px 100%;
    background-attachment: local, local, scroll, scroll;
  }
  #view-paper .term-body > table,
  #view-charts .term-body:has(#bt-trade-log) > table {
    min-width: 640px;
  }
  #view-paper .term-body > table th:first-child,
  #view-paper .term-body > table td:first-child,
  #view-charts .term-body:has(#bt-trade-log) th:first-child,
  #view-charts .term-body:has(#bt-trade-log) td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--bg);
    box-shadow: 1px 0 0 var(--border);
  }
  #view-paper .term-body > table thead th:first-child,
  #view-charts .term-body:has(#bt-trade-log) thead th:first-child {
    background: var(--bg3);
    z-index: 3 !important;
  }

  /* Paper journal: drop the desktop calc(100vh - 360px) lock so the panel
     tracks the reclaimed chrome space on mobile instead of wasting it */
  #view-paper .term-win {
    height: auto !important;
  }
  #view-paper .term-win .term-body {
    max-height: 70dvh;
  }

  /* ═══ Touch targets: 12px window buttons get a ≥28px hit area ═══ */
  .term-titlebar .win-btn {
    position: relative;
  }
  .term-titlebar .win-btn::after {
    content: "";
    position: absolute;
    inset: -8px;
  }

  /* ═══ Card-ify wide mobile tables (paper journal + backtest log) ═══ */
  #view-paper .term-body:has(> table),
  #view-charts .term-body:has(#bt-trade-log) {
    overflow: visible !important;
    background: transparent !important;
    background-attachment: initial !important;
    background-size: initial !important;
  }
  #view-paper .term-body > table,
  #view-charts .term-body:has(#bt-trade-log) > table {
    min-width: 0 !important;
    width: 100% !important;
    display: block !important;
    border-collapse: collapse;
    background: transparent !important;
  }
  #view-paper .term-body > table thead,
  #view-charts .term-body:has(#bt-trade-log) thead {
    display: none !important;
  }
  #view-paper .term-body > table tbody,
  #view-charts .term-body:has(#bt-trade-log) tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  #view-paper .term-body > table tbody tr,
  #view-charts .term-body:has(#bt-trade-log) tbody tr {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 10px !important;
    padding: 12px 14px !important;
    background: var(--bg2) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    min-height: 56px;
  }
  #view-paper .term-body > table tbody td,
  #view-charts .term-body:has(#bt-trade-log) tbody td {
    display: block !important;
    padding: 0 !important;
    border: none !important;
    font-size: 12px !important;
    width: auto !important;
    flex: 0 0 auto;
  }
  #view-paper .term-body > table tbody td:first-child,
  #view-charts .term-body:has(#bt-trade-log) tbody td:first-child {
    position: static !important;
    background: transparent !important;
    box-shadow: none !important;
    z-index: auto !important;
  }
  #view-paper .term-body > table tbody td:nth-child(1),
  #view-charts .term-body:has(#bt-trade-log) tbody td:nth-child(1) {
    font-weight: 800;
    font-size: 14px !important;
    flex: 1 1 40%;
  }
  #view-paper .term-body > table tbody td:nth-child(2),
  #view-charts .term-body:has(#bt-trade-log) tbody td:nth-child(2) {
    font-weight: 800;
  }
  #view-paper .term-body > table tbody td:last-child,
  #view-charts .term-body:has(#bt-trade-log) tbody td:last-child {
    flex: 1 1 100%;
    color: var(--fg-muted);
    font-size: 11px !important;
  }

  /* ═══ Heatmap filters: never clip, compact buttons + full-width search ═══ */
  #view-heatmap .hm-controls-bottom {
    flex-wrap: wrap !important;
  }
  #view-heatmap .hm-search {
    flex: 1 1 100% !important;
    max-width: none !important;
    min-height: 40px;
  }
  #view-heatmap .hm-scroll-row {
    padding: 2px 0;
  }
  #view-heatmap .hm-tf-btn,
  #view-heatmap .hm-filter-btn {
    min-height: 40px !important;
    padding: 7px 12px !important;
  }
  #view-heatmap .hm-filter-row {
    gap: 6px !important;
  }
  #view-heatmap .hm-filter-btn {
    font-size: 10px !important;
    letter-spacing: 0.04em;
  }
  #view-heatmap .hm-sort-group {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 0 !important;
  }
  #view-heatmap .hm-sort-btn {
    min-height: 36px !important;
    min-width: 44px;
  }
  #view-heatmap .hm-legend-toggle {
    min-height: 36px !important;
  }

  /* Bigger touch targets for all small controls */
  .hm-filter-btn, .hm-tf-btn, .hm-sort-btn, .hm-legend-toggle,
  .sec-link, .sh-tab, .oracle-tab, .sig-filter, .tt-ind-btn {
    min-height: 40px !important;
  }
  .sec-link, .sh-tab, .oracle-tab {
    display: inline-flex;
    align-items: center;
  }
}

@media (min-width: 901px) {
  #mobile-nav-fab,
  #mobile-nav-scrim { display: none !important; }
  .tt-mobile-tabs,
  .tt-mobile-sheet-close { display: none !important; }
}

/* Default: hide mobile terminal chrome until the mobile media query enables it */
.tt-mobile-tabs,
.tt-mobile-sheet-close { display: none; }

@media (max-width: 390px) {
  .home-glass-val, .oracle-score-ring { font-size: 24px !important; }
  .sig-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .sig-active-grid { grid-template-columns: 1fr !important; }
  .sig-past-row { grid-template-columns: 1fr 1fr !important; }
  .sig-past-title { grid-column: 1 / -1; }

  /* Heatmap: smaller tiles so the grid never pushes filters off screen */
  #view-heatmap .hm-tile { min-width: 48px !important; min-height: 40px !important; }
  #view-heatmap .hm-tile-sym { font-size: 8px !important; }
  #view-heatmap .hm-tile-pct { font-size: 9px !important; }
  #view-heatmap .hm-filter-row { gap: 4px !important; }
  #view-heatmap .hm-filter-btn { padding: 6px 8px !important; font-size: 9px !important; min-height: 36px !important; }
  #view-heatmap .hm-tf-btn { padding: 6px 9px !important; font-size: 10px !important; min-height: 36px !important; }

  /* Stock heatmap: two-column filter buttons */
  #view-stonksHub .sh-heatmap-controls {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
  #view-stonksHub .sh-heatmap-controls .hm-search {
    grid-column: 1 / -1;
  }
  #view-stonksHub .sh-heatmap-controls .hm-filter-btn {
    flex: none !important;
    min-height: 38px !important;
    font-size: 10px !important;
  }

  /* Trade / Stonks Hub cards: single column, bigger tap targets */
  #view-trades .tt-mobile-kpi-grid { grid-template-columns: 1fr !important; }
  #view-stonksHub .sh-tab { font-size: 10px !important; padding: 8px 4px !important; }
  #view-stonksHub .sh-market-banner { grid-template-columns: 1fr !important; }
  #view-stonksHub .sh-paper-kpi { grid-template-columns: 1fr !important; }
  #view-stonksHub .sh-orb-row { grid-template-columns: 1fr !important; }
  #view-stonksHub .sh-playbook-factors { grid-template-columns: 1fr !important; }
  #view-stonksHub .sh-main-grid #sh-watchlist,
  #view-stonksHub .sh-main-grid #sh-news-feed { max-height: 180px; }

  /* Paper / charts card rows: full-width stacked */
  #view-paper .term-body > table tbody td,
  #view-charts .term-body:has(#bt-trade-log) tbody td {
    flex: 1 1 100% !important;
  }

  /* Terminal bottom sheet tabs */
  .tt-m-tab { font-size: 10px !important; min-height: 44px !important; }
  .tt-side-btn { font-size: 12px !important; }
  .tt-submit { font-size: 13px !important; }
}


/* Signals command deck (all breakpoints) */
#view-signals { background: linear-gradient(180deg, rgba(8,8,12,0.98), rgba(5,5,8,1)); }
.sig-shell {
  padding: 16px 18px 28px;
  flex: 1;
  overflow-y: auto;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}
.sig-hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.sig-hdr-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sig-title {
  font-size: 17px;
  font-weight: 900;
  color: #e9d5ff;
  letter-spacing: 0.08em;
  text-shadow: 0 0 18px rgba(168,85,247,0.25);
}
.sig-sub { font-size: 12px; color: var(--fg-muted); margin-top: 4px; }

.sig-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.sig-stat {
  border: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(160deg, rgba(16,16,22,0.95), rgba(9,9,13,0.98));
  border-radius: 12px;
  padding: 10px 12px;
  text-align: center;
}
.sig-stat-val {
  display: block;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.1;
  color: var(--fg);
}
.sig-stat-lbl {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.sig-stat-active .sig-stat-val { color: #86efac; text-shadow: 0 0 12px rgba(34,197,94,0.35); }
.sig-stat-long .sig-stat-val { color: #22c55e; }
.sig-stat-short .sig-stat-val { color: #f87171; }
.sig-stat-watch .sig-stat-val { color: #fbbf24; }
.sig-stat-past .sig-stat-val { color: #a855f7; }

.sig-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.sig-filter {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(12,12,16,0.9);
  color: var(--fg-muted);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.sig-filter.active {
  color: #e9d5ff;
  border-color: rgba(168,85,247,0.45);
  background: rgba(168,85,247,0.12);
  box-shadow: 0 0 14px rgba(168,85,247,0.12);
}

.sig-board { display: flex; flex-direction: column; gap: 16px; }
.sig-zone {
  border: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(14,14,18,0.72), rgba(8,8,11,0.88));
  border-radius: 16px;
  padding: 12px;
}
.sig-zone-active {
  border-color: rgba(34,197,94,0.18);
  box-shadow: inset 0 1px 0 rgba(34,197,94,0.08);
}
.sig-zone-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.sig-zone-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-dim);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sig-zone-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 10px rgba(34,197,94,0.65);
}
.sig-zone-meta {
  margin-left: auto;
  font-size: 11px;
  color: var(--fg-muted);
}
.sig-zone-count {
  font-size: 11px;
  font-weight: 800;
  color: #c4b5fd;
  border: 1px solid rgba(168,85,247,0.25);
  background: rgba(168,85,247,0.08);
  border-radius: 999px;
  padding: 2px 8px;
}

.sig-active-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.sig-card {
  border: 1px solid rgba(255,255,255,0.07);
  background: linear-gradient(155deg, rgba(18,18,24,0.96), rgba(10,10,14,0.98));
  border-radius: 14px;
  padding: 12px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sig-card-active {
  box-shadow: 0 4px 18px rgba(0,0,0,0.35);
}
.sig-card-active.long {
  border-color: rgba(34,197,94,0.35);
  box-shadow: 0 0 0 1px rgba(34,197,94,0.08), 0 8px 24px rgba(0,0,0,0.35);
}
.sig-card-active.short {
  border-color: rgba(239,68,68,0.35);
  box-shadow: 0 0 0 1px rgba(239,68,68,0.08), 0 8px 24px rgba(0,0,0,0.35);
}
.sig-card-active.watch {
  border-color: rgba(245,158,11,0.35);
}
.sig-card:hover { border-color: rgba(168,85,247,0.28); }
.sig-card-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 8px;
}
.sig-card-ident { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sig-sym { font-weight: 900; font-size: 15px; color: #67e8f9; letter-spacing: 0.02em; }
.sig-bot { font-size: 10px; font-weight: 700; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.sig-side {
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.08em;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 3px 7px;
  flex-shrink: 0;
}
.sig-side.LONG { color: #22c55e; border-color: rgba(34,197,94,0.35); background: rgba(34,197,94,0.1); }
.sig-side.SHORT { color: #f87171; border-color: rgba(239,68,68,0.35); background: rgba(239,68,68,0.08); }
.sig-side.WATCH { color: #fbbf24; border-color: rgba(245,158,11,0.35); background: rgba(245,158,11,0.08); }
.sig-side.EXIT { color: #a855f7; border-color: rgba(168,85,247,0.35); background: rgba(168,85,247,0.08); }
.sig-card-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.sig-age {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #c4b5fd;
}
.sig-dist-up { color: #4ade80 !important; border-color: rgba(74,222,128,0.3) !important; }
.sig-dist-up strong { color: #86efac !important; }
.sig-dist-dn { color: #f87171 !important; border-color: rgba(248,113,113,0.3) !important; }
.sig-dist-dn strong { color: #fca5a5 !important; }
.sig-lvl strong { color: #f2f2fa !important; }
.sig-title-line {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  line-height: 1.45;
  margin-bottom: 8px;
}
.sig-levels {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.sig-lvl {
  font-size: 10px;
  color: var(--fg-muted);
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.25);
  border-radius: 6px;
  padding: 3px 7px;
}
.sig-lvl strong { color: var(--fg-dim); font-weight: 800; }
.sig-lvl-score { color: #c4b5fd; border-color: rgba(168,85,247,0.25); }
.sig-lvl-muted { opacity: 0.85; }
.sig-card-foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.sig-past-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 420px;
  overflow-y: auto;
}
.sig-past-row {
  display: grid;
  grid-template-columns: 56px 72px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: rgba(0,0,0,0.18);
  font-size: 11px;
  cursor: pointer;
}
.sig-past-row:hover {
  border-color: rgba(168,85,247,0.18);
  background: rgba(168,85,247,0.05);
}
.sig-past-side { font-weight: 800; letter-spacing: 0.06em; }
.sig-past-row.long .sig-past-side { color: #22c55e; }
.sig-past-row.short .sig-past-side { color: #f87171; }
.sig-past-row.watch .sig-past-side { color: #fbbf24; }
.sig-past-row.exit .sig-past-side { color: #a855f7; }
.sig-past-sym { font-weight: 800; color: #67e8f9; }
.sig-past-title { color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sig-past-bot { color: var(--fg-subtle); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.sig-past-time { color: var(--fg-subtle); white-space: nowrap; }

.sig-empty { text-align: center; color: var(--fg-muted); padding: 28px 12px; font-size: 13px; }
.sig-empty-compact { padding: 16px 12px; font-size: 12px; }
.sig-badge-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #86efac;
  border: 1px solid rgba(34,197,94,0.4);
  background: rgba(34,197,94,0.1);
  border-radius: 999px;
  padding: 4px 8px;
}
.sig-badge-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  display: inline-block;
}

@media (max-width: 900px) {
  .sig-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sig-past-row {
    grid-template-columns: 52px 64px 1fr;
    grid-template-rows: auto auto;
  }
  .sig-past-bot, .sig-past-time { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .sig-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sig-active-grid { grid-template-columns: 1fr; }
  .sig-zone-meta { display: none; }
}