body.modal-open {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
    height: 100%;
  }
  @font-face {
    font-family: 'Saira Stencil';
    font-weight: 400;
    src: url('/saira-stencil.woff2') format('woff2'), url('/saira-stencil.ttf') format('truetype'); font-display: swap;
    font-weight: 400;
    font-style: normal;
  }

  :root {
    /* ═══ M3 REFERENCE TOKENS ═══ */
    --md-ref-typeface-brand: 'Saira Stencil', sans-serif;
    --md-ref-typeface-plain: 'Inter', sans-serif;

    /* ═══ M3 SYSTEM TOKENS — COLOR ═══ */
    --md-sys-color-surface: #141314;
    --md-sys-color-surface-dim: #141314;
    --md-sys-color-surface-container-lowest: #19181a;
    --md-sys-color-surface-container-low: #141314;
    --md-sys-color-surface-container: #1c1b1d;
    --md-sys-color-surface-container-high: #2b292c;
    --md-sys-color-surface-container-highest: #44404c;
    --md-sys-color-on-surface: #e6e1e3;
    --md-sys-color-on-surface-variant: #e6e1e3;
    --md-sys-color-primary: #4A9EFF;
    --md-sys-color-on-primary: #e6e1e3;
    --md-sys-color-primary-container: #553f5d;
    --md-sys-color-on-primary-container: #e6e1e3;
    --md-sys-color-secondary: #4d4256;
    --md-sys-color-on-secondary: #e6e1e3;
    --md-sys-color-tertiary: #6b4f75;
    --md-sys-color-error: #EF4444;
    --md-sys-color-on-error: #EAF2FF;
    --md-sys-color-outline: #4d4256;
    --md-sys-color-outline-variant: rgba(220, 220, 220, 0.12);
    --md-sys-color-inverse-surface: #EAF2FF;
    --md-sys-color-inverse-on-surface: #141314;
    --md-sys-color-success: #22C55E;
    --md-sys-color-success-dim: rgba(34, 197, 94, 0.1);
    --md-sys-color-error-dim: rgba(239, 68, 68, 0.1);
    --md-sys-color-warning: #FFAB00;

    /* ═══ M3 SYSTEM TOKENS — SHAPE ═══ */
    --md-sys-shape-corner-none: 0px;
    --md-sys-shape-corner-extra-small: 4px;
    --md-sys-shape-corner-small: 8px;
    --md-sys-shape-corner-medium: 12px;
    --md-sys-shape-corner-large: 16px;
    --md-sys-shape-corner-extra-large: 18px;
    --md-sys-shape-corner-full: 9999px;

    /* ═══ M3 SYSTEM TOKENS — MOTION ═══ */
    --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
    --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
    --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
    --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
    --md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
    --md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
    --md-sys-motion-duration-short1: 50ms;
    --md-sys-motion-duration-short2: 100ms;
    --md-sys-motion-duration-short3: 150ms;
    --md-sys-motion-duration-short4: 200ms;
    --md-sys-motion-duration-medium1: 250ms;
    --md-sys-motion-duration-medium2: 300ms;
    --md-sys-motion-duration-medium3: 350ms;
    --md-sys-motion-duration-medium4: 400ms;
    --md-sys-motion-duration-long1: 450ms;
    --md-sys-motion-duration-long2: 500ms;

    /* ═══ M3 SYSTEM TOKENS — ELEVATION (glow for dark theme) ═══ */
    --md-sys-elevation-1: 0 0 8px rgba(74, 158, 255, 0.12);
    --md-sys-elevation-2: 0 0 12px rgba(74, 158, 255, 0.18);
    --md-sys-elevation-3: 0 0 18px rgba(74, 158, 255, 0.25);

    /* ═══ LEGACY ALIASES (mapped to M3 tokens) ═══ */
    --bg-void: var(--md-sys-color-surface);
    --bg-primary: var(--md-sys-color-surface);
    --bg-secondary: var(--md-sys-color-surface-container);
    --bg-surface: var(--md-sys-color-surface-container-high);
    --bg-hover: var(--md-sys-color-surface-container-highest);
    --bg-elevated: var(--md-sys-color-surface-container-high);
    --sidebar-bg: var(--md-sys-color-surface-container-low);
    --header: var(--md-sys-color-surface-container);
    --card: var(--md-sys-color-surface-container-high);
    --hover: var(--md-sys-color-surface-container-highest);
    --phantom-purple: var(--md-sys-color-primary);
    --phantom-purple-dim: rgba(74, 158, 255, 0.12);
    --phantom-purple-glow: rgba(74, 158, 255, 0.20);
    --text-primary: var(--md-sys-color-on-surface);
    --text-secondary: var(--md-sys-color-on-surface-variant);
    --text-tertiary: #9e9a9c;
    --green: var(--md-sys-color-success);
    --green-dim: var(--md-sys-color-success-dim);
    --red: var(--md-sys-color-error);
    --red-dim: var(--md-sys-color-error-dim);
    --amber: var(--md-sys-color-warning);
    --border: var(--md-sys-color-outline-variant);
    --border-strong: rgba(220, 220, 220, 0.22);
    --glow-sm: var(--md-sys-elevation-1);
    --glow-md: var(--md-sys-elevation-2);
    --glow-lg: var(--md-sys-elevation-3);
  }

  /* ═══ M3 UNIFIED MODAL & PANEL ANIMATIONS ═══ */
  /* Enter: emphasized-decelerate 400ms (from M3 spec table) */
  @keyframes m3ModalIn {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1); }
  }
  /* Enter for translate-centered modals */
  @keyframes m3ModalInCentered {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  }
  /* Exit: emphasized-accelerate 200ms */
  @keyframes m3ModalOut {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.85); }
  }
  @keyframes m3ModalOutCentered {
    from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    to { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
  }
  /* Overlay fade */
  @keyframes m3OverlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes m3OverlayOut {
    from { opacity: 1; }
    to { opacity: 0; }
  }

  /* Panels (side-anchored, scale from top-right) */
  @keyframes m3PanelIn {
    from { opacity: 0; transform: scale(0.92) translateY(-8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  html {
    background: var(--md-sys-color-surface);
  }
  body {
    overflow-y: auto;
    background: var(--md-sys-color-surface);
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    min-height: 100vh;
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Custom scrollbar */
  ::-webkit-scrollbar { width: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: rgba(74, 158, 255, 0.15); border-radius: 5px; }
  ::-webkit-scrollbar-thumb:hover { background: rgba(74, 158, 255, 0.25); }

  /* Ambient glow */
  body::before {
    display: none;
    content: '';
    position: fixed;
    top: -300px;
    left: 50%;
    transform: translateX(-50%);
    width: 1000px;
    height: 600px;
    background: radial-gradient(ellipse, rgba(74, 158, 255, 0.035) 0%, rgba(74, 158, 255, 0.01) 40%, transparent 70%);
    pointer-events: none;
    z-index: 0;
  }

  body::after {
    display: none;
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.03;
    background-image:
      radial-gradient(1px 1px at 10% 15%, #4A9EFF 50%, transparent 100%),
      radial-gradient(1px 1px at 25% 40%, #fff 50%, transparent 100%),
      radial-gradient(1.5px 1.5px at 45% 10%, #4A9EFF 50%, transparent 100%),
      radial-gradient(1px 1px at 60% 65%, #fff 50%, transparent 100%),
      radial-gradient(1px 1px at 80% 25%, #4A9EFF 50%, transparent 100%),
      radial-gradient(1.5px 1.5px at 15% 70%, #fff 50%, transparent 100%),
      radial-gradient(1px 1px at 90% 50%, #4A9EFF 50%, transparent 100%),
      radial-gradient(1px 1px at 35% 85%, #fff 50%, transparent 100%),
      radial-gradient(1.5px 1.5px at 70% 80%, #4A9EFF 50%, transparent 100%),
      radial-gradient(1px 1px at 50% 35%, #fff 50%, transparent 100%),
      radial-gradient(1px 1px at 5% 90%, #4A9EFF 50%, transparent 100%),
      radial-gradient(1px 1px at 85% 70%, #fff 50%, transparent 100%),
      radial-gradient(1.5px 1.5px at 30% 20%, #4A9EFF 50%, transparent 100%),
      radial-gradient(1px 1px at 95% 10%, #fff 50%, transparent 100%),
      radial-gradient(1px 1px at 55% 55%, #4A9EFF 50%, transparent 100%);
    animation: particleDrift 60s linear infinite;
  }
  @keyframes particleDrift {
    0% { transform: translate(0, 0); }
    25% { transform: translate(-12px, -18px); }
    50% { transform: translate(8px, -30px); }
    75% { transform: translate(-6px, -15px); }
    100% { transform: translate(0, 0); }
  }

  .app {
    display: flex;
    position: relative;
    z-index: 1;
    animation: appFadeIn 0.4s ease-out;
  }
  @keyframes appFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }


  .connect-btn, .filter-btn, .filter-pill, .topbar-btn, .chain-filter-chip {
    transition: background var(--md-sys-motion-duration-short2) linear;
    -webkit-tap-highlight-color: transparent;
    position: relative;
  }
  .connect-btn:active, .filter-btn:active, .filter-pill:active, .topbar-btn:active, .chain-filter-chip:active {
    background-image: linear-gradient(rgba(255,255,255,0.12), rgba(255,255,255,0.12));
  }


  .token-badges {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    margin-right: -6px;
  }

  .token-badge-icon {
    width: 19px;
    height: 19px;
    min-width: 19px;
    min-height: 19px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.12);
  }

  /* === iOS FEEL — global === */
  * {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
  }
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overscroll-behavior: none;
  }
  
  /* Smooth momentum scrolling everywhere */
  .table-container,
  .bubble-modal,
  .search-modal {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* M3 state-layer press feedback on rows */
  tbody tr {
    -webkit-tap-highlight-color: transparent;
    transition: background var(--md-sys-motion-duration-short2) linear;
  }
  tbody tr:active:not(:has(.token-dots:active)) {
    background: rgba(255, 255, 255, 0.12) !important;
  }

  /* M3 state-layer transitions on interactive elements */
  button, a, .dropdown-item, .nav-item, .pagination-btn {
    -webkit-tap-highlight-color: transparent;
  }

  /* Smoother scrollbar - hide on iOS style */
  ::-webkit-scrollbar {
    width: 0px;
    background: transparent;
  }

    /* ---- MAIN CONTENT ---- */
  .main {
    background: linear-gradient(to bottom, var(--md-sys-color-surface-container-low) 0px, var(--md-sys-color-surface-container-low) 60px, var(--md-sys-color-surface) 60px);
    margin-left: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: visible;
    min-height: 100vh;
    min-height: 100dvh;
  }

  /* TOPBAR */
  .topbar {
    display: flex;
    align-items: center;
    padding: 0;
    gap: 0;
    height: 56px;
    background: rgba(17, 17, 19, 0.80);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    position: relative;
    flex-shrink: 0;
  }
  .topbar::after {
    display: none;
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--phantom-purple) 50%, transparent 100%);
    opacity: 0.08;
  }
  .topbar-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 20px;
    height: 100%;
    border-right: 1px solid var(--border);
    flex: 1;
    min-width: 0;
    transition: box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
  }
  .topbar-stat:hover {
    box-shadow: inset 0 -2px 12px rgba(74, 158, 255, 0.08);
  }
  .topbar-stat:last-child { border-right: none; }
  .topbar-stat-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex-shrink: 0;
  }
  .topbar-stat-label {
    font-size: 10px;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
  }
  .topbar-stat-value {
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
  }
  .topbar-stat-change {
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
    font-size: 10px;
    font-weight: 600;
  }
  .topbar-stat-change.up { color: var(--green); }
  .topbar-stat-change.down { color: var(--red); }
  .topbar-spark {
    flex: 1;
    height: 30px;
    min-width: 60px;
    display: block;
  }

  .topbar-actions {
    display: flex;
    gap: 8px;
  }

  .topbar-btn {
    padding: 12px 16px;
    border-radius: var(--md-sys-shape-corner-full);
    background: var(--md-sys-color-surface-container-highest);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: none;
    color: var(--md-sys-color-on-surface-variant);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  }

  .topbar-btn:hover {
    color: var(--md-sys-color-on-surface);
    background: #37353e;
    box-shadow: none;
  }

  /* FILTER BAR */
  .x-trending-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .x-trending-bar::-webkit-scrollbar { display: none; }
  .x-trending-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .x-trending-label svg { flex-shrink: 0; }
  .x-trending-item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: rgba(255,255,255,0.06);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
    white-space: nowrap;
    flex-shrink: 0;
  }
  .x-trending-item:hover {
    background: rgba(255,255,255,0.10);
  }
  .x-trending-num {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
  }
  .x-trending-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
  }
  .x-trending-pct {
    font-size: 11px;
    font-weight: 600;
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
  }
  .x-trending-pct.up { color: var(--green); }
  .x-trending-pct.down { color: var(--red); }

  .sticky-nav-wrap {
    position: sticky;
    top: 0;
    z-index: 960;
    background: var(--md-sys-color-surface-container-low);
    box-shadow: none;
  }
  .sticky-nav-wrap::before {
    content: '';
    position: absolute;
    top: -100px;
    left: 0;
    right: 0;
    height: 100px;
    background: var(--md-sys-color-surface-container-low);
    z-index: -1;
  }
  .filter-bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px 10px 24px;
    border-bottom: none;
    background: #2b2930;
    margin: 0 8px 0 8px;
    border-radius: 0;
    flex-wrap: wrap;
    transition: transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized), opacity var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
  }
  .filter-bar.hidden-scroll {
    /* disabled — filter bar is now part of bubble card, not sticky */
  }

  .filter-group {
    display: flex;
    gap: 0;
    background: var(--md-sys-color-surface-container-highest);
    border-radius: var(--md-sys-shape-corner-full);
    padding: 0;
    border: none;
    position: relative;
    align-items: stretch;
  }

  .filter-btn {
    padding: 12px 16px;
    border-radius: var(--md-sys-shape-corner-full);
    border: none;
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    position: relative;
    z-index: 1;
    cursor: pointer;
    transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  }

  .filter-slider {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #4a4fd8;
    border-radius: var(--md-sys-shape-corner-full);
    z-index: 0;
  }
  /* Transition is enabled only after the initial position is set (via the
     .tf-anim class), so the slider paints directly at the preset timeframe
     on refresh instead of sliding in from the first pill. */
  .filter-group.tf-anim .filter-slider {
    transition: left var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized), width var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
  }
  .filter-btn.active {
    background: transparent;
    color: #e6e1e3;
    font-weight: 600;
    box-shadow: none;
  }

  .filter-btn:not(.active):hover {
    color: #e6e1e3;
    background: #37353e;
  }

  .filter-chip {
    padding: 12px 16px;
    border-radius: var(--md-sys-shape-corner-full);
    border: none;
    background: var(--md-sys-color-surface-container-highest);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--md-sys-color-on-surface-variant);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
    position: relative;
    overflow: hidden;
    z-index: 0;
  }
  .filter-chip::after {
    content: '';
    position: absolute;
    width: 0;
    height: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: var(--md-sys-shape-corner-full);
    background: #4a4fd8;
    pointer-events: none;
    z-index: -1;
  }
  .filter-chip.chip-animate::after {
    animation: chipPillGrow 0.35s cubic-bezier(0.2, 0, 0, 1) forwards;
  }
  .filter-chip.chip-animate.active-chip {
    background: var(--md-sys-color-surface-container-highest);
  }
  @keyframes chipPillGrow {
    from { width: 0; }
    to { width: 100%; }
  }
  .filter-chip:hover {
    color: var(--md-sys-color-on-surface);
    background: #37353e;
  }
  .filter-chip.active-chip {
    background: #4a4fd8;
    color: var(--md-sys-color-on-surface);
    font-weight: 600;
  }

  .filter-pill {
    padding: 6px 14px;
    border-radius: var(--md-sys-shape-corner-full);
    border: 1px solid rgba(255,255,255,0.12);
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  }

  .filter-pill:hover {
    color: var(--md-sys-color-on-surface);
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.2);
  }
  .filter-pill.pill-gainers:hover {
    color: var(--green);
    background: rgba(0, 200, 83, 0.08);
    border-color: rgba(0, 200, 83, 0.3);
  }
  .filter-pill.pill-losers:hover {
    color: var(--red);
    background: rgba(234, 57, 67, 0.08);
    border-color: rgba(234, 57, 67, 0.3);
  }

  .filter-pill.active-pill {
    color: var(--md-sys-color-on-surface);
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.25);
  }
  .filter-pill.active-pill.cat-gainers {
    color: var(--green);
    background: rgba(0, 200, 83, 0.1);
    border-color: rgba(0, 200, 83, 0.35);
  }
  .filter-pill.active-pill.cat-losers {
    color: var(--red);
    background: rgba(234, 57, 67, 0.1);
    border-color: rgba(234, 57, 67, 0.35);
  }

  .filter-spacer { flex: 1; }

  .chain-filter-dropdown {
    display: flex;
    gap: 6px;
    padding: 8px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    position: sticky;
    z-index: 9;
    animation: fadeSlide var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard)-out;
  }
  @keyframes fadeSlide {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .chain-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    border: none;
    background: rgba(255,255,255,0.06);
    color: var(--text-primary);
    font-size: 12px;
    cursor: pointer;
    transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  }
  .chain-filter-chip:hover {
    background: rgba(255,255,255,0.10);
    box-shadow: none;
  }
  .chain-filter-chip.active {
    background: rgba(74, 158, 255, 0.15);
    color: var(--text-primary);
    box-shadow: none;
  }

  .filter-right {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    color: var(--text-primary);
  }

  .filter-dropdown-wrap {
    position: relative;
    z-index: 201;
  }
  .filter-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 160px;
    background: #211f21;
    border: none;
    border-radius: 10px;
    padding: 0;
    z-index: 200;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    transform-origin: top right;
  }
  .filter-dropdown-menu.open { display: flex; flex-direction: column; gap: 0; animation: m3PanelIn var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate); }
  @keyframes dropdownFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 0;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    transition: all var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
    white-space: nowrap;
  }
  .dropdown-item:first-child {
    border-radius: 10px 10px 0 0;
  }
  .dropdown-item:last-child {
    border-radius: 0 0 10px 10px;
  }
  .dropdown-item:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text-primary);
  }
  .dropdown-item:active {
    background: rgba(255,255,255,0.12);
  }
  .dropdown-item.active {
    background: #4a4fd8;
    color: var(--text-primary);
    font-weight: 600;
  }
  .dropdown-item img, .dropdown-item .launchpad-icon-sm {
    flex-shrink: 0;
    display: inline-block;
    width: 16px;
    height: 16px;
    object-fit: cover;
  }

  /* TABLE */
  .table-container {
    background: #1c1b1d;
    flex: 1;
    padding: 0;
    border-radius: var(--md-sys-shape-corner-extra-large);
    margin: 8px 8px;
    overflow: clip;
    border: 1px solid rgba(255,255,255,0.08);
  }

  table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 1100px;
  }

  /* Balanced column widths. Value columns (vol / mcap / % changes) share one
     width so they line up; price is a touch wider for its swap-icon header;
     age and dots are narrow; token flexes to fill the rest. */
  thead th[data-col="vol"], thead th[data-col="mcap"],
  thead th[data-col="p5m"], thead th[data-col="p1h"],
  thead th[data-col="p6h"], thead th[data-col="p24h"],
  tbody td[data-col="vol"], tbody td[data-col="mcap"],
  tbody td[data-col="p5m"], tbody td[data-col="p1h"],
  tbody td[data-col="p6h"], tbody td[data-col="p24h"] {
    width: 112px;
    min-width: 112px;
  }
  thead th[data-col="price"], tbody td[data-col="price"] { width: 128px; min-width: 128px; }
  thead th[data-col="age"], tbody td[data-col="age"] { width: 76px; min-width: 76px; }
  thead th[data-col="dots"], tbody td[data-col="dots"] { width: 40px; min-width: 40px; padding-left: 8px; padding-right: 8px; text-align: center; }
  thead th[data-col="token"], tbody td[data-col="token"] { width: 340px; min-width: 240px; }
  thead th {
    position: sticky;
    top: 52px;
    background: #2b2930;
    padding: 12px 14px;
    text-align: right;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    z-index: 18;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  thead th:first-child {
    text-align: left;
    padding-left: 24px;
  }
  th.sortable {
    cursor: pointer;
    user-select: none;
    transition: color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  }
  th.sortable:hover {
    color: var(--text-primary);
  }

  tbody tr {
    transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
    cursor: pointer;
    height: 44px;
  }
  @keyframes rowFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes cellFlashGreen {
    0% { background: rgba(0, 255, 100, 0.25); }
    100% { background: transparent; }
  }
  @keyframes cellFlashRed {
    0% { background: rgba(255, 50, 50, 0.25); }
    100% { background: transparent; }
  }
  .cell-flash-green { animation: cellFlashGreen 1s ease-out; }
  .cell-flash-red { animation: cellFlashRed 1s ease-out; }
  tbody tr:nth-child(even) {
    background: transparent;
  }

  tbody tr:hover {
    background: rgba(255,255,255,0.04);
  }

  tbody td {
    padding: 3px 14px;
    text-align: right;
    font-size: 13px;
    font-weight: 400;
    font-style: normal;
    white-space: nowrap;
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
    color: #f9f9fb;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  tbody td:last-child { border-right: none; }
  tbody tr:last-child td { border-bottom: none; }

  tbody td:first-child {
    text-align: left;
    font-family: 'Inter', sans-serif;
  }

  .token-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: -14px;
  }

  .star-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    transition: all 0.2s var(--md-sys-motion-easing-emphasized);
    opacity: 0.4;
    display: flex;
    align-items: center;
  }
  .star-btn img {
    width: 12px;
    height: 12px;
    transition: transform 0.3s var(--md-sys-motion-easing-emphasized);
  }
  .star-btn .star-outline { display: inline; }
  .star-btn .star-filled { display: none; }
  .star-btn.active .star-outline { display: none; }
  .star-btn.active .star-filled { display: inline; }
  .star-btn:hover { opacity: 0.9; transform: scale(1.2); }
  .star-btn.active { opacity: 1; }
  .star-btn.active img { filter: drop-shadow(0 0 6px rgba(255, 193, 7, 0.5)); }
  tr:hover .star-btn { opacity: 0.7; }
  tr:hover .star-btn.active { opacity: 1; }
  @keyframes starPop {
    0% { transform: scale(1); }
    30% { transform: scale(1.5) rotate(22deg); }
    50% { transform: scale(0.9) rotate(-5deg); }
    70% { transform: scale(1.2) rotate(3deg); }
    100% { transform: scale(1); }
  }
  .star-btn.pop img { animation: starPop 0.4s var(--md-sys-motion-easing-emphasized); }

  /* WATCHLIST PANEL - FLOATING POPUP */
  .popup-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    cursor: grab;
    user-select: none;
    border-bottom: 1px solid var(--border);
    background: rgba(43, 42, 51, 0.6);
    flex-shrink: 0;
  }
  .popup-titlebar:active { cursor: grabbing; }
  .popup-titlebar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.3px;
  }
  .popup-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 19px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    transition: color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
    border-radius: 4px;
  }
  .popup-close:hover { color: #EF4444; background: rgba(239,68,68,0.1); }
  .popup-body {
    background-image: radial-gradient(ellipse at 50% 0%, rgba(74, 158, 255,0.06) 0%, transparent 60%);
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px;
    scrollbar-width: thin;
  }
  .watchlist-header { display: none; }
  .watchlist-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
  }
  /* ALERTS PANEL */
  /* ALERTS PANEL - FLOATING POPUP */
  .alerts-panel {
    display: none;
    position: fixed;
    top: 140px;
    right: 40px;
    width: 360px;
    max-height: 400px;
    background: rgba(43, 42, 51, 0.95);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(74, 158, 255, 0.15);
    border-radius: 9px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 20px rgba(74, 158, 255, 0.08);
    z-index: 100;
    overflow: hidden;
    resize: both;
  }
  .alerts-panel.open { display: flex; flex-direction: column; animation: m3PanelIn var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate); }

  /* ALERT TOAST NOTIFICATIONS */
  .alert-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
  }
  .alert-toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: #2b2930;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(34,197,94,0.25);
    border-radius: 7px;
    box-shadow: none;
    min-width: 300px;
    max-width: 400px;
    pointer-events: auto;
    animation: toastSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    transition: all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
  }
  .alert-toast.closing {
    animation: toastSlideOut 0.35s cubic-bezier(0.4, 0, 1, 1) forwards;
  }
  .alert-toast.down {
    border-color: rgba(239,68,68,0.25);
    box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 20px rgba(239,68,68,0.1);
  }
  .alert-toast-icon {
    font-size: 23px;
    flex-shrink: 0;
  }
  .alert-toast-body {
    background-image: radial-gradient(ellipse at 50% 0%, rgba(74, 158, 255,0.06) 0%, transparent 60%);
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
  }
  .alert-toast-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
  }
  .alert-toast-detail {
    font-size: 12px;
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
  }
  .alert-toast-price {
    font-weight: 600;
  }
  .alert-toast-price.up { color: var(--green); }
  .alert-toast-price.down { color: var(--red); }
  .alert-toast-close {
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 17px;
    padding: 2px;
    transition: color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
    flex-shrink: 0;
  }
  .alert-toast-close:hover { color: var(--text-primary); }
  .alert-toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--green);
    border-radius: 1 1 7px 7px;
    animation: toastProgress 4s linear forwards;
  }
  .alert-toast.down .alert-toast-progress { background: var(--red); }
  @keyframes toastSlideIn {
    from { opacity: 0; transform: translateX(60px) scale(0.95); }
    to { opacity: 1; transform: translateX(0) scale(1); }
  }
  @keyframes toastSlideOut {
    from { opacity: 1; transform: translateX(0) scale(1); }
    to { opacity: 0; transform: translateX(60px) scale(0.9); }
  }
  @keyframes toastProgress {
    from { width: 100%; }
    to { width: 0%; }
  }
  .alerts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
  }
  .alerts-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
  }
  .alerts-count {
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
    font-size: 10px;
    color: var(--text-primary);
  }
  .alerts-empty {
    font-size: 12px;
    color: var(--text-primary);
    text-align: center;
    padding: 16px 0;
    line-height: 1.6;
  }
  .alerts-empty a {
    color: var(--phantom-purple);
    cursor: pointer;
    text-decoration: none;
    font-weight: 600;
  }
  .alerts-empty a:hover { text-decoration: underline; }
  .alerts-form {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
    flex-wrap: wrap;
    align-items: center;
  }
  .alerts-form select, .alerts-form input {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    padding: 6px 8px;
    outline: none;
    transition: border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  }
  .alerts-form select:focus, .alerts-form input:focus {
    border-color: var(--phantom-purple);
    box-shadow: none;
  }
  .alerts-form select { min-width: 80px; cursor: pointer; }
  .alerts-form input { width: 80px; }
  .alerts-form input::placeholder { color: var(--text-primary); }
  .alert-create-btn {
    padding: 6px 12px;
    border-radius: 6px;
    border: none;
    background: var(--phantom-purple);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
    box-shadow: none;
  }
  .alert-create-btn:hover { filter: brightness(1.15); box-shadow: var(--glow-md); }
  .alert-create-btn:active { background-image: linear-gradient(rgba(255,255,255,0.12), rgba(255,255,255,0.12)); }
  .alerts-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 140px;
    overflow-y: auto;
    scrollbar-width: none;
  }
  .alerts-list::-webkit-scrollbar { display: none; }
  .alert-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
    
  }
  .alert-item-info {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
  }
  .alert-item-sym {
    font-weight: 700;
    color: var(--text-primary);
  }
  .alert-item-cond {
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
    font-size: 11px;
    color: var(--phantom-purple);
  }
  .alert-item-remove {
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 12px;
    padding: 0;
    line-height: 1;
  }
  .alert-item-remove:hover { color: var(--red); }

  
  .token-rank { display: none; }
  .row-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 19px;
    padding: 0 5px;
    border-radius: 5px;
    background: #363436;
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    margin-right: 4px;
    flex-shrink: 0;
  }
  @media (min-width: 769px) {
    .row-num { margin-left: 6px; margin-right: -4px; }
    .filter-btn,
    .filter-chip,
    .topbar-btn {
      padding: 10px 16px;
    }
    tbody tr {
      height: 43px;
    }
  }
  td.row-dots-col {
    border-right: none !important;
  }
  .row-dots-col {
    width: 40px;
    min-width: 40px;
    text-align: center;
    padding: 0 !important;
  }
  .token-dots {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.15s, color 0.15s;
  }
  .token-dots:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text-primary);
  }
  .token-dots:active {
    background: rgba(255,255,255,0.12);
  }
  .token-dots.active {
    background: rgba(255,255,255,0.08);
    color: var(--text-primary);
  }
  /* Outline/filled toggle for row dots icon */
  .token-dots .dots-filled { display: none !important; }
  .token-dots.active .dots-filled { display: block !important; }
  .token-dots.active .dots-outline { display: none !important; }

  .row-chrome-menu {
    position: fixed;
    background: #211f21;
    border: none;
    border-radius: 10px;
    padding: 0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    z-index: 10000;
    opacity: 0;
    transform: scale(0.92) translateY(-8px);
    transform-origin: top left;
    transition: opacity var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate), transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate);
    min-width: 180px;
  }
  .row-chrome-menu.open {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  .row-chrome-menu a, .row-chrome-menu span {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 0;
    color: var(--text-secondary);
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    transition: all var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
  }
  .row-chrome-menu a:first-child, .row-chrome-menu span:first-child {
    border-radius: 10px 10px 0 0;
  }
  .row-chrome-menu a:last-child, .row-chrome-menu span:last-child {
    border-radius: 0 0 10px 10px;
  }
  .row-chrome-menu a:hover, .row-chrome-menu span:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text-primary);
  }
  .row-chrome-menu a:active, .row-chrome-menu span:active {
    background: rgba(255,255,255,0.12);
  }
  .row-chrome-menu svg, .row-chrome-menu img {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    object-fit: contain;
    border-radius: 0;
  }
  .row-chrome-menu svg { color: rgba(255,255,255,0.4); }
  .row-chrome-menu svg.ico-globe, .row-chrome-menu svg.ico-search { width: 18px; height: 18px; }
  .row-chrome-menu .copy-text { font-size: 13px; font-weight: 400; }

  .token-avatar {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    color: var(--text-primary);
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  }

  .token-avatar::after { display: none; }

  .token-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: visible;
    min-width: 0;
  }

  .token-symbol {
    font-weight: 600;
    font-size: 13px;
    color: #f9f9fb;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.2px;
  }

  .token-name {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-secondary);
    letter-spacing: 0.1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
  }

  .social-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--phantom-purple-dim);
    color: var(--phantom-purple);
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 4px;
  }

  .price-col {
    color: #f9f9fb;
  }

  .positive { color: var(--green); }
  .negative { color: var(--red); }

  .change-cell {
    font-size: 13.5px;
    font-weight: 500;
  }

  .change-cell.positive {
    padding: 3px 6px;
  }

  .change-cell.negative {
    padding: 3px 6px;
  }

  .mcap-col, .liq-col {
    color: #f9f9fb;
  }

  /* Social column - unique to DexSocial */
  .social-score {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
  }

  .social-bar {
    width: 40px;
    height: 4px;
    background: var(--bg-elevated);
    border-radius: 4px;
    overflow: hidden;
  }

  .social-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: var(--phantom-purple);
    transition: width var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
  }

  .social-hot {
    color: #FFD700;
  }

  /* Live pulse */
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
  }

  .live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    display: inline-block;
    animation: pulse 1.5s ease-in-out infinite;
    margin-right: 4px;
  }

  /* Fade in rows */
  @keyframes fadeInRow {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }

  tbody tr {
    animation: fadeInRow var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized) forwards;
    opacity: 0;
  }

  tbody tr:nth-child(1) { animation-delay: 0.03s; }
  tbody tr:nth-child(2) { animation-delay: 0.06s; }
  tbody tr:nth-child(3) { animation-delay: 0.09s; }
  tbody tr:nth-child(4) { animation-delay: 0.12s; }
  tbody tr:nth-child(5) { animation-delay: 0.15s; }
  tbody tr:nth-child(6) { animation-delay: 0.18s; }
  tbody tr:nth-child(7) { animation-delay: 0.21s; }
  tbody tr:nth-child(8) { animation-delay: 0.24s; }
  tbody tr:nth-child(9) { animation-delay: 0.27s; }
  tbody tr:nth-child(10) { animation-delay: 0.30s; }
  tbody tr:nth-child(n+11) { animation-delay: 0.33s; }

  /* Scrollbar */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  ::-webkit-scrollbar-track {
    background: var(--bg-primary);
  }
  ::-webkit-scrollbar-thumb {
    background: var(--bg-elevated);
    border-radius: 5px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--phantom-purple);
  }

  /* Glow line under topbar */
  /* ========== SOCIAL FEED POPUP ========== */
  .social-feeds-row {
    display: none;
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: 560px;
    max-height: 420px;
    background: rgba(43, 42, 51, 0.95);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(74, 158, 255, 0.15);
    border-radius: 9px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 20px rgba(74, 158, 255, 0.08);
    z-index: 100;
    overflow: hidden;
    flex-direction: column;
    resize: both;
  }
  .social-feeds-row.open { display: flex; }
  .social-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    background: rgba(43, 42, 51, 0.5);
    flex-shrink: 0;
  }
  .social-search-bar input {
    flex: 1;
    background: rgba(145, 180, 220, 0.052);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 10px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--text-primary);
    outline: none;
    transition: border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  }
  .social-search-bar input::placeholder {
    color: var(--text-secondary);
  }
  .social-search-bar input:focus {
    border-color: rgba(74, 158, 255, 0.3);
  }
  .social-feeds-body {
    background-image: radial-gradient(ellipse at 50% 0%, rgba(74, 158, 255,0.06) 0%, transparent 60%);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: rgba(145, 180, 220, 0.052);
    flex: 1;
    overflow: hidden;
  }
  .social-box {
    background: rgba(43, 42, 51, 0.95);
    display: flex;
    flex-direction: column;
    height: 340px;
    overflow: hidden;
    transition: transform var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard), box-shadow var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  }
  .social-box:hover {
    box-shadow: none;
  }
  .social-box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    background: rgba(14, 13, 22, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .social-box-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
  }
  .social-box-count {
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
    font-size: 10px;
    color: var(--text-primary);
  }
  .social-box-scroll {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: none;
    position: relative;
  }
  .social-box-scroll::-webkit-scrollbar { display: none; }
  .social-box {
    position: relative;
  }
  .social-box::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 24px;
    background: linear-gradient(to bottom, transparent, rgba(14, 17, 34, 0.95));
    pointer-events: none;
    z-index: 1;
  }

  @keyframes feedSlide {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .feed-item {
    display: flex;
    gap: 8px;
    padding: 7px 14px;
    font-size: 12px;
    animation: feedSlide var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized)-out;
    border-bottom: 1px solid var(--border);
    align-items: flex-start;
  }
  .feed-item-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
    color: white;
  }
  .feed-item-body {
    background-image: radial-gradient(ellipse at 50% 0%, rgba(74, 158, 255,0.06) 0%, transparent 60%);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
  }
  .feed-item-header {
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .feed-item-user {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 11px;
  }
  .feed-item-time {
    margin-left: auto;
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
    font-size: 9px;
    color: var(--text-primary);
    flex-shrink: 0;
  }
  .feed-item-text {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.35;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .feed-item-text .mention { color: var(--phantom-purple); font-weight: 600; }
  .feed-item-text .hashtag { color: var(--phantom-purple); }
  .feed-item-text .ca { color: var(--amber); font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums; font-size: 10px; }
  .feed-item-sentiment {
    display: flex;
    gap: 8px;
    margin-top: 1px;
  }
  .feed-item-sentiment span {
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
    font-size: 9px;
    font-weight: 600;
  }
  .feed-item-sentiment .bull { color: var(--green); }
  .feed-item-sentiment .bear { color: var(--red); }

  /* ========== FLOATING APPBOX - CERNER STYLE ========== */
  .appbox {
    display: none !important;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    width: 340px;
    background: var(--md-sys-color-surface);
    border: 1px solid var(--border-strong);
    border-radius: 7px;
    box-shadow: 0 12px 48px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
    overflow: hidden;
    user-select: none;
    font-family: 'Inter', sans-serif;
    transition: none;
  }

  .appbox-titlebar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 12px 16px;
    background: var(--md-sys-color-surface);
    cursor: grab;
    border-bottom: 1px solid var(--border);
  }
  .appbox-titlebar:active {
    cursor: grabbing;
  }
  .appbox-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 0.6px;
    text-transform: uppercase;
  }
  .appbox-minimize {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 15px;
    cursor: pointer;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  }
  .appbox-minimize:hover {
    background: rgba(145, 180, 220, 0.104);
    color: var(--text-primary);
  }
  .appbox-minimize .min-icon { display: inline; }
  .appbox-minimize .plus-icon { display: none; }
  .appbox.minimized .appbox-minimize .min-icon { display: none; }
  .appbox.minimized .appbox-minimize .plus-icon { display: inline; }

  .appbox-body {
    background-image: radial-gradient(ellipse at 50% 0%, rgba(74, 158, 255,0.06) 0%, transparent 60%);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    padding: 6px;
    background: rgba(0,0,0,0.15);
  }
  .appbox.minimized .appbox-body {
    background-image: radial-gradient(ellipse at 50% 0%, rgba(74, 158, 255,0.06) 0%, transparent 60%);
    display: none;
  }
  .appbox.minimized {
    border-radius: 7px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    width: auto;
    border: none;
    background: linear-gradient(#0e0d18, #0e0d18) padding-box,
                linear-gradient(90deg, #4A9EFF, #a78bfa, #f093fb, #fb7185, #fbbf24, #22C55E, #38bdf8, #4A9EFF) border-box;
    border: 2px solid transparent;
    background-size: 100% 100%, 300% 100%;
    animation: borderGlow 3s linear infinite;
  }
  @keyframes borderGlow {
    0% { background-position: 0 0, 0% 50%; }
    100% { background-position: 0 0, 300% 50%; }
  }
  .appbox.minimized .appbox-titlebar {
    padding: 8px 14px;
    gap: 8px;
    border-bottom: none;
  }
  .appbox.minimized .appbox-title {
    font-size: 13px;
  }
  .appbox.minimized .appbox-titlebar img {
    height: 14px;
  }
  .appbox-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 4px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.16,1,0.3,1);
    position: relative;
    background: transparent;
  }
  .appbox-tile:hover {
    background: rgba(145, 180, 220, 0.065);
    transform: translateY(-1px);
  }
  .appbox-tile:active {
    background: rgba(145, 180, 220, 0.12) !important;
  }

  .appbox-tile.active {
    background: rgba(145, 180, 220, 0.091);
  }
  .appbox-tile.active::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 2px;
    background: var(--phantom-purple);
    border-radius: 4px;
  }

  .appbox-tile-icon {
    width: 44px;
    height: 44px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  }
  .appbox-tile:hover .appbox-tile-icon {
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    transform: scale(1.05);
  }

  .appbox-tile-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.2;
    letter-spacing: 0.1px;
    transition: color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  }

  .appbox-tile-badge {
    display: none;
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 6px;
    background: #fbbf24;
    color: #141314;
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(251,191,36,0.4);
    animation: badgePop 0.3s var(--md-sys-motion-easing-emphasized);
  }
  .appbox-tile-badge.visible {
    display: inline-block;
  }
  .appbox-tile:hover .appbox-tile-label {
    color: var(--text-primary);
  }
  .appbox-tile.active .appbox-tile-label {
    color: var(--text-primary);
  }


  /* ========== TOP HEADER BAR ========== */
  .top-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 24px 10px 24px;
    background: #2b2930;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
    z-index: 950;
    position: relative;
    top: auto;
    margin: 8px 8px 0 8px;
    border-radius: var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0;
  }
  .top-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .top-header-logo-UNUSED {
    height: 26px;
    width: auto;
    opacity: 0.9;
  }
  .top-header-name {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.2px;
  }
  .top-header-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--md-sys-color-surface-container-highest);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: none;
    border-radius: var(--md-sys-shape-corner-full);
    padding: 10px 18px;
    width: 700px;
    max-width: 700px;
    flex-shrink: 1;
    margin-left: -32px;
    min-width: 0;
    transition: background var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
  }
  .top-header-search:hover {
    background: #494550;
    outline: 1px solid #4a4fd8;
    outline-offset: -1px;
  }
  .top-header-search svg {
    color: var(--text-secondary);
    flex-shrink: 0;
    transition: color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
    opacity: 0.7;
  }
  .top-header-search:focus-within svg {
    color: var(--text-secondary);
    opacity: 1;
  }
  .top-header-search input {
    background: none;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    width: 100%;
  }
  .top-header-search input::placeholder {
    color: var(--text-secondary);
  }
  .top-header-search kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    box-sizing: border-box;
    background: rgba(255,255,255,0.10);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 0 7px;
    border: 1px solid rgba(255,255,255,0.20);
    border-radius: 6px;
    line-height: 1;
    flex-shrink: 0;
    opacity: 0.9;
    pointer-events: none;
  }
  .top-header-search:focus-within kbd { opacity: 0; }

  .search-icons-left {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
  }
  .search-x-icon {
    color: var(--text-secondary);
    transition: color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  }
  .search-mag-icon {
    color: var(--text-secondary);
    transition: color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  }
  .top-header-search:hover .search-x-icon {
    color: var(--text-primary);
  }
  .top-header-search:hover .search-mag-icon {
    color: var(--text-primary);
  }
  .search-divider {
    width: 1px;
    height: 14px;
    background: var(--bg-hover);
  }


  /* ========== SETTINGS PANEL ========== */
  .settings-panel {
    display: none;
    position: fixed;
    top: 120px;
    right: 40px;
    width: 380px;
    max-height: 480px;
    background: rgba(43, 42, 51, 0.95);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(74, 158, 255, 0.15);
    border-radius: 9px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 20px rgba(74, 158, 255, 0.08);
    z-index: 100;
    overflow: hidden;
    flex-direction: column;
    resize: both;
  }
  .settings-panel.open { display: flex; animation: m3PanelIn var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate); }

  .settings-body {
    background-image: radial-gradient(ellipse at 50% 0%, rgba(74, 158, 255,0.06) 0%, transparent 60%);
    padding: 14px;
    overflow-y: auto;
    flex: 1;
  }

  .settings-section {
    margin-bottom: 18px;
  }
  .settings-section-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    margin-bottom: 10px;
  }

  .settings-theme-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }

  .settings-theme-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    border: 2px solid transparent;
    transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  }
  .settings-theme-swatch:hover {
    background: rgba(145, 180, 220, 0.078);
  }
  .settings-theme-swatch.active {
    border-color: var(--phantom-purple);
    background: rgba(145, 180, 220, 0.091);
  }

  .swatch-preview {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
  }
  .swatch-accent {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    border-radius: 0 0 50% 50%;
  }

  .settings-theme-swatch span {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
  }
  .settings-theme-swatch.active span {
    color: var(--text-primary);
  }

  /* Toggle switch */
  .settings-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
  }
  .settings-toggle-row:last-child { border-bottom: none; }
  .settings-toggle-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
  }

  .settings-toggle {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
  }
  .settings-toggle input { opacity: 0; width: 0; height: 0; }
  .settings-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--bg-hover);
    border-radius: 11px;
    transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
  }
  .settings-toggle-slider::before {
    content: '';
    position: absolute;
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background: rgba(255,255,255,0.5);
    border-radius: 50%;
    transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
  }
  .settings-toggle input:checked + .settings-toggle-slider {
    background: var(--phantom-purple);
  }
  .settings-toggle input:checked + .settings-toggle-slider::before {
    transform: translateX(18px);
    background: #fff;
  }


  .sort-icon {
    display: none;
  }


  /* ========== LIGHT THEME OVERRIDES ========== */
  body.light-theme .token-symbol,
  body.light-theme .price-col,
  body.light-theme tbody td,
  body.light-theme .topbar-stat-value,
  body.light-theme .x-trending-name,
  body.light-theme .search-modal-input,
  body.light-theme .search-modal-item-name,
  body.light-theme .search-modal-item-price,
  body.light-theme .popup-titlebar-left,
  body.light-theme .watchlist-title,
  body.light-theme .alerts-title,
  body.light-theme .social-box-title,
  body.light-theme .feed-item-user,
  body.light-theme .alert-item-sym {
    color: var(--text-primary);
  }
  body.light-theme .token-name,
  body.light-theme .mcap-col,
  body.light-theme .liq-col,
  body.light-theme .search-modal-item-sub,
  body.light-theme .topbar-stat-label,
  body.light-theme .filter-right,
  body.light-theme .x-trending-num,
  body.light-theme .feed-item-text,
  body.light-theme .feed-item-time {
    color: var(--text-secondary);
  }
  body.light-theme .appbox-tile-label {
    color: rgba(0,0,0,0.5);
  }
  body.light-theme .appbox-tile:hover .appbox-tile-label {
    color: rgba(0,0,0,0.8);
  }
  body.light-theme .appbox-tile.active .appbox-tile-label {
    color: var(--text-primary);
  }
  body.light-theme .appbox-title {
    color: rgba(0,0,0,0.5);
  }
  body.light-theme .appbox-minimize {
    color: rgba(0,0,0,0.35);
  }
  body.light-theme .popup-close {
    color: rgba(0,0,0,0.4);
  }
  body.light-theme .search-modal-esc {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    padding: 4px 8px;
    transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  }
  body.light-theme .search-modal-input::placeholder {
    color: rgba(0,0,0,0.3);
  }
  body.light-theme .search-modal-footer span,
  body.light-theme .search-modal-footer kbd {
    color: rgba(0,0,0,0.3);
  }
  body.light-theme .search-modal-section-title {
    color: rgba(0,0,0,0.4);
  }
  body.light-theme .settings-section-title {
    color: rgba(0,0,0,0.4);
  }
  body.light-theme .settings-toggle-label {
    color: var(--text-primary);
  }
  body.light-theme .settings-toggle-slider {
    background: rgba(0,0,0,0.12);
  }
  body.light-theme .settings-theme-swatch span {
    color: rgba(0,0,0,0.5);
  }
  body.light-theme .filter-btn {
    color: var(--text-secondary);
  }
  body.light-theme .filter-pill {
    color: var(--text-secondary);
    border-color: rgba(0,0,0,0.1);
    background: var(--bg-surface);
  }
  body.light-theme .nav-item {
    color: var(--text-secondary);
  }
  body.light-theme tbody tr:hover {
    box-shadow: inset 0 0 30px rgba(74, 158, 255,0.03);
    background: rgba(0,0,0,0.03);
  }
  body.light-theme .search-modal {
    box-shadow: 0 24px 80px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.06);
  }
  body.light-theme .search-modal-input-wrap::after {
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.06), transparent);
  }
  body.light-theme .search-modal-item:hover,
  body.light-theme .search-modal-item.highlighted {
    background: rgba(0,0,0,0.04);
    border-left-color: var(--phantom-purple);
  }
  body.light-theme .sort-icon {
    filter: invert(1);
  }
  body.light-theme .top-header-search svg {
    color: rgba(0,0,0,0.3);
  }
  body.light-theme .top-header-search kbd {
    background: rgba(0,0,0,0.04);
    color: rgba(0,0,0,0.25);
    border-color: rgba(0,0,0,0.08);
  }
  body.light-theme body::before,
  body.light-theme body::after {
    display: none;
  }


  .search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: 1000;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 150ms ease-out, visibility 0s linear 150ms;
  }
  .search-overlay.open {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transition: opacity 150ms ease-out, visibility 0s linear 0s;
  }
  .search-modal {
    width: 560px;
    max-height: 75vh;
    position: fixed;
    top: 56px;
    left: 50%;
    transform: translateX(-50%);
    transform-origin: top center;
    z-index: 1001;
    background: var(--md-sys-color-surface-container-highest);
    border: none;
    border-radius: 28px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  /* Search modal drop animation — matches multichart */
  @media (min-width: 769px) {
    .search-overlay.open .search-modal {
      animation: searchDrop 300ms cubic-bezier(0.05, 0.7, 0.1, 1);
    }
  }
  @keyframes searchDrop {
    from { max-height: 46px; opacity: 0.8; }
    to { max-height: 75vh; opacity: 1; }
  }

  .search-modal-input-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px 12px;
    position: relative;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background: none;
    border-radius: 0;
  }
  .search-modal-input-wrap svg {
    color: var(--text-secondary);
    flex-shrink: 0;
    opacity: 0.7;
  }
  .search-modal-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.2px;
  }
  .search-modal-input::placeholder {
    color: var(--text-secondary);
    font-weight: 400;
    opacity: 0.7;
  }
  .search-modal-esc {
    background: var(--md-sys-color-surface-container-highest);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  }
  .search-modal-esc:hover {
    background: rgba(255,255,255,0.12);
    color: var(--text-primary);
  }

  /* Chain filter (desktop): globe replaces the X; pick a chain to filter
     search results to that chain only. Hidden on mobile (X stays there). */
  .search-chain-wrap {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }
  .search-modal-esc { display: none; }
  .search-chain-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    background: rgba(255,255,255,0.12);
    transition: background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard), box-shadow var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  }
  .search-chain-btn:hover { background: rgba(255,255,255,0.18); }
  .search-chain-btn img {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
  }
  .search-chain-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    max-height: 360px;
    overflow-y: auto;
    background: var(--md-sys-color-surface-container-highest);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 12px 12px 14px;
    z-index: 100;
    box-shadow: 0 12px 36px rgba(0,0,0,0.55);
  }
  .search-chain-menu {
    transform-origin: top right;
  }
  .search-chain-menu.open {
    display: block;
    animation: m3PanelIn var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate);
  }
  .search-chain-title {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    text-align: center;
    padding: 2px 4px 10px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .search-chain-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
  }
  .search-chain-opt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 4px 8px;
    background: transparent;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    color: var(--text-secondary);
    font-family: 'Inter', sans-serif;
    transition: background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard), color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  }
  .search-chain-opt:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); }
  .search-chain-opt.active { background: rgba(255,255,255,0.10); color: var(--text-primary); }
  .search-chain-ic {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #333039;
    transition: box-shadow var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  }
  .search-chain-ic img {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
  }
  .search-chain-lbl {
    font-size: 10px;
    font-weight: 500;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
  }
  @media (max-width: 768px) {
    .search-chain-wrap { display: none; }
    .search-modal-esc { display: flex; }
  }

  .search-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 12px 12px;
    scrollbar-width: none;
    background: rgba(0,0,0,0.25);
  }
  .search-modal-body::-webkit-scrollbar { display: none; }

  .search-modal-section {
    padding: 4px 0;
    border-bottom: none;
  }
  #search-recent {
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  #search-boosted {
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .search-boosted-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 12px 10px;
  }
  .boosted-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 5px;
    background: var(--md-sys-color-surface-container-highest);
    border: none;
    border-radius: var(--md-sys-shape-corner-full);
    cursor: pointer;
    transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
  }
  .boosted-chip:hover {
    background: rgba(255,255,255,0.1);
  }
  .boosted-chip-img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
  }
  .boosted-chip-sym {
    font-weight: 600;
    color: var(--text-primary);
  }
  .boosted-chip-count {
    font-size: 11px;
    color: #f5a623;
    font-weight: 500;
  }
  .recent-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 12px 10px;
  }
  .recent-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 5px;
    background: var(--md-sys-color-surface-container-highest);
    border: none;
    border-radius: var(--md-sys-shape-corner-full);
    cursor: pointer;
    transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
  }
  .recent-chip:hover {
    background: rgba(255,255,255,0.1);
  }
  .search-modal-section-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-secondary);
    padding: 12px 12px 8px;
    display: flex;
    align-items: center;
  }
  .search-clear-recent {
    margin-left: auto;
    cursor: pointer;
    color: #e3e3e3;
    transition: opacity 0.15s, color 0.15s;
    display: flex;
    align-items: center;
  }
  .search-clear-recent:hover {
    color: #ff4d4d;
  }

  .search-modal-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    padding: 10px 12px;
    cursor: pointer;
    transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
    border-bottom: none;
    border-radius: 14px;
  }
  .search-modal-item:hover,
  .search-modal-item.highlighted {
    background: rgba(255,255,255,0.06);
  }
  .search-modal-item:last-child { border-bottom: none; }
  .smi-mcap-inline {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    opacity: 0.7;
    margin-left: 2px;
  }
  .search-modal-cols {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    padding: 8px 12px 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-secondary);
    opacity: 0.5;
  }
  .search-modal-cols .smc-token { text-align: left; }
  .search-modal-cols .smc-price { text-align: left; }
  .search-modal-cols .smc-mcap { text-align: left; }
  .search-modal-cols .smc-pct { text-align: left; }
  .search-modal-cols .smc-vol { text-align: left; }
  .search-modal-item .smi-top {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 0;
  }
  .search-modal-item .smi-top .smi-token-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }
  .smi-col-price {
    text-align: left;
    font-family: 'Inter', sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
  }
  .smi-col-mcap {
    text-align: left;
    font-family: 'Inter', sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
  }
  .smi-col-pct {
    text-align: left;
    font-family: 'Inter', sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    font-weight: 600;
  }
  .smi-col-pct.up { color: var(--green); }
  .smi-col-pct.down { color: var(--red); }
  .smi-col-vol {
    text-align: left;
    font-family: 'Inter', sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
  }

  .smi-data-pair {
    display: contents;
  }
  .smi-label {
    font-size: 9px;
    font-weight: 500;
    color: var(--text-secondary);
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }
  /* Row 1: Avatar + Name + Price + Percentages */
  .smi-top {
    width: 100%;
  }
  .smi-left {
    position: relative;
    flex-shrink: 0;
  }
  .search-modal-item-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    color: var(--text-primary);
    flex-shrink: 0;
  }
  .search-modal-item-chain {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    position: absolute;
    bottom: -1px;
    right: -3px;
    border: 1.5px solid var(--bg-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  }
  .smi-name-block {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
  }
  .smi-sym {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
  }
  .smi-ca-inline {
    display: none;
    font-size: 10px;
    font-weight: 400;
    color: var(--text-secondary);
    font-family: 'Inter', monospace;
    margin-left: 6px;
  }
  .smi-fullname {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .smi-price-block {
    display: none;
  }
  .smi-price {
    font-family: 'Inter', sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1;
  }
  .smi-pct-group {
    display: flex;
    gap: 14px;
  }
  .smi-pct-item {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    font-family: 'Inter', sans-serif;
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }
  .smi-pct-label {
    font-size: 9px;
    color: var(--text-secondary);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }
  .smi-pct-val {
    font-size: 12px;
    font-weight: 600;
  }
  .smi-pct-val.up { color: var(--green); }
  .smi-pct-val.down { color: var(--red); }

  /* Row 2: Tags for MCap, Liq, Vol + Addresses */
  .smi-bottom {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 46px;
    flex-wrap: wrap;
  }
  .smi-tag {
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    background: var(--md-sys-color-surface-container-high);
    padding: 3px 8px;
    border-radius: 8px;
    white-space: nowrap;
  }
  .smi-tag-label {
    color: var(--text-secondary);
    font-size: 11px;
    margin-right: 2px;
  }
  .smi-addr {
    font-size: 11px;
    font-family: 'Inter', monospace;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    margin-left: auto;
    display: flex;
    gap: 8px;
  }
  .smi-addr span {
    opacity: 0.6;
  }

  .search-modal-empty {
    padding: 24px 20px;
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
  }

  .search-modal-footer {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 12px 24px;
    border-top: none;
    background: none;
    font-size: 11px;
    color: var(--text-primary);
  }
  .search-modal-footer span {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 500;
  }
  .search-modal-footer kbd {
    background: var(--md-sys-color-surface-container-highest);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 6px;
    border: none;
    margin: 0 1px;
  }


  .appbox-closed-icon {
    display: none;
    width: 16px;
    height: 16px;
    opacity: 0.6;
  }
  .appbox.minimized .appbox-closed-icon {
    display: inline;
  }
  .appbox.minimized .appbox-titlebar > img:first-child {
    display: none;
  }
  .appbox.minimized .appbox-minimize {
    display: none;
  }
  .appbox.minimized .appbox-title {
    cursor: pointer;
  }

  /* ========== PAGINATION ========== */
  .pagination-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    padding-right: 56px;
    border-top: none;
    background: transparent;
    z-index: 8;
    width: 100%;
    box-sizing: border-box;
  }
  .pag-center {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .pag-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    border: none;
    border-radius: var(--md-sys-shape-corner-full);
    background: var(--md-sys-color-surface-container-highest);
    color: var(--md-sys-color-on-surface-variant);
    cursor: pointer;
    transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
  }
  .pag-btn:hover:not(:disabled) {
    background: #3a383a;
    color: var(--md-sys-color-on-surface);
  }
  .pag-btn:disabled {
    background: var(--md-sys-color-surface-container);
    border: none;
    color: var(--text-secondary);
    box-shadow: none;
    opacity: 0.4;
    cursor: default;
  }
  .pag-pages { display: flex; gap: 4px; }
  .disclaimer-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
  }
  .disclaimer-footer span {
    color: var(--text-secondary);
    font-size: 11px;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.3px;
  }
  .pag-num {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: rgba(145, 180, 220, 0.033);
    color: var(--text-secondary);
    font-family: 'Inter', sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
    padding: 0 6px;
  }
  .pag-num:hover { 
    background: rgba(74, 158, 255,0.1);
    border-color: rgba(74, 158, 255,0.3);
    color: var(--text-primary); 
  }
  .pag-num.active {
    background: var(--phantom-purple);
    color: var(--text-primary);
    font-weight: 700;
    border-color: var(--phantom-purple);
    box-shadow: 0 2px 10px rgba(74, 158, 255,0.3);
  }
  .pag-rows:hover { border-color: var(--phantom-purple); }


  /* Column info tooltips */
  .col-info-wrap {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-left: 2px;
  }
  .col-info-icon {
    width: 13px;
    height: 13px;
    opacity: 0.25;
    vertical-align: 0px;
    cursor: help;
    transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  }
  .col-info-wrap:hover .col-info-icon {
    opacity: 0.6;
  }
  .col-info-tip {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    text-transform: none;
    letter-spacing: 0;
    padding: 8px 12px;
    border-radius: 6px;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    z-index: 100;
    pointer-events: none;
  }
  .col-info-tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--bg-surface);
  }
  .col-info-wrap:hover {
    z-index: 100;
  }
  thead th:hover {
    z-index: 19;
  }
  .col-info-wrap:hover .col-info-tip {
    display: block;
  }


  /* Search modal tabs */
  .search-modal-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: 0 18px;
  }
  .search-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  }
  .search-tab:hover {
    color: var(--text-secondary);
  }
  .search-tab.active {
    color: var(--phantom-purple);
    border-bottom-color: var(--phantom-purple);
  }
  .search-tab svg {
    opacity: 0.5;
  }
  .search-tab.active svg {
    opacity: 1;
  }

  /* X post items */
  .x-post-item {
    display: flex;
    gap: 10px;
    padding: 10px 20px;
    cursor: pointer;
    transition: background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
    border-left: 2px solid transparent;
  }
  .x-post-item:hover {
    background: rgba(74, 158, 255,0.08);
    border-left-color: var(--phantom-purple);
  }
  .x-post-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
  }
  .x-post-body {
    background-image: radial-gradient(ellipse at 50% 0%, rgba(74, 158, 255,0.06) 0%, transparent 60%);
    flex: 1;
    min-width: 0;
  }
  .x-post-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
  }
  .x-post-user {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
  }
  .x-post-handle {
    font-size: 11px;
    color: var(--text-primary);
  }
  .x-post-time {
    font-size: 10px;
    color: var(--text-primary);
    margin-left: auto;
  }
  .x-post-text {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .x-post-text .mention { color: var(--phantom-purple); font-weight: 600; }
  .x-post-text .hashtag { color: var(--phantom-purple); }
  .x-post-stats {
    display: flex;
    gap: 14px;
    margin-top: 4px;
  }
  .x-post-stat {
    font-size: 10px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 5px;
  }


  .token-globe-icon {
    width: 12px;
    height: 12px;
    opacity: 0.35;
    vertical-align: -1px;
    margin-left: 4px;
    cursor: pointer;
    transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  }
  .token-globe-icon:hover {
    opacity: 0.8 !important;
  }
  .token-website {
    text-decoration: none;
  }


  .token-search-x {
    text-decoration: none;
    margin-left: -1px;
  }
  .token-search-icon {
    width: 12px;
    height: 12px;
    opacity: 0.35;
    vertical-align: -1px;
    cursor: pointer;
    transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
    filter: invert(1);
  }
  .token-search-icon:hover {
    opacity: 0.8 !important;
  }

  /* Token X search dropdown */
  .token-x-menu {
    position: fixed;
    z-index: 200;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 7px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    padding: 4px;
    min-width: 200px;
    animation: dropdownFadeIn var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard)-out;
  }
  .token-x-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
    text-decoration: none;
    border: none;
    background: none;
    width: 100%;
    font-family: 'Inter', sans-serif;
  }
  .token-x-menu-item:hover {
    background: var(--phantom-purple-dim);
    color: var(--text-primary);
  }
  .token-x-menu-item svg {
    flex-shrink: 0;
    opacity: 0.6;
  }
  .token-x-menu-item:hover svg {
    opacity: 1;
  }


  @keyframes hintBob {
    0%,100%{transform:translateX(-50%) translateY(0)}
    50%{transform:translateX(-50%) translateY(6px)}
  }

  /* ========== WALLET CONNECT MODAL ========== */
  .wc-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 3000;
  }
  .wc-overlay.open { display: flex; align-items: center; justify-content: center; animation: m3OverlayIn var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard); }
  .wc-overlay.closing { display: flex; align-items: center; justify-content: center; animation: m3OverlayOut var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-accelerate) forwards; pointer-events: none; }
  .wc-modal {
    width: 380px;
    background: #211f21;
    border: none;
    border-radius: 28px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    animation: m3ModalIn var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized-decelerate);
    overflow: hidden;
  }
  .wc-overlay.closing .wc-modal { animation: m3ModalOut var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-accelerate) forwards; }
  .wc-modal.connecting { width: 380px; }
  .wc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 24px 8px;
  }
  .wc-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.2px;
  }
  .wc-close {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--md-sys-color-surface-container-highest);
    color: var(--text-secondary);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
  }
  .wc-close:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); }
  .wc-close:active { background: rgba(255,255,255,0.12); }
  .wc-section {
    padding: 16px 24px 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.8px;
  }
  .wc-list {
    padding: 4px 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .wc-wallet {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    border: none;
    background: none;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 150ms ease;
    width: 100%;
    text-align: left;
  }
  .wc-wallet:hover { background: rgba(255,255,255,0.08); }
  .wc-wallet:active { background: rgba(255,255,255,0.12); }
  .wc-wallet img {
    width: 36px; height: 36px;
    border-radius: 10px;
  }
  .wc-wallet-name { flex: 1; }
  .wc-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--md-sys-shape-corner-full);
    letter-spacing: 0.3px;
  }
  .wc-badge-installed {
    background: rgba(34,197,94,0.12);
    color: #22C55E;
  }
  .wc-divider {
    height: 1px;
    background: rgba(255,255,255,0.06);
    margin: 4px 24px;
  }
  .wc-footer {
    padding: 16px 24px 20px;
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary);
    border-top: none;
  }
  .wc-footer a {
    color: #4A9EFF;
    text-decoration: none;
    font-weight: 600;
  }
  .wc-footer a:hover { text-decoration: underline; }

  /* Connecting animation state */
  .wc-connecting {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 24px 56px;
    gap: 16px;
    animation: wcFadeIn 250ms ease-out;
  }
  @keyframes wcFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .wc-connecting-icon {
    width: 64px; height: 64px;
    border-radius: 16px;
    animation: wcIconPulse 2s ease-in-out infinite;
  }
  @keyframes wcIconPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.85; }
  }
  .wc-connecting-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
  }
  .wc-connecting-sub {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: -6px;
  }
  .wc-spinner {
    width: 20px; height: 20px;
    border: 2px solid rgba(255,255,255,0.06);
    border-top-color: rgba(255,255,255,0.35);
    border-radius: 50%;
    animation: wcSpin 0.8s linear infinite;
    margin-top: 4px;
  }
  @keyframes wcSpin {
    to { transform: rotate(360deg); }
  }

  /* Connected state in header */
  .ms-header-connect.connected {
    background: rgba(34,197,94,0.08);
    border-color: rgba(34,197,94,0.25);
  }
  .ms-header-connect.connected:hover {
    border-color: rgba(239,68,68,0.4);
    background: rgba(239,68,68,0.08);
  }
  .ms-header-connect .wc-addr {
    font-family: 'Inter', sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: 13px;
  }
  .ms-header-connect .wc-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #22C55E;
    flex-shrink: 0;
  }
  .ms-header-connect .wc-jazzicon {
    width: 18px; height: 18px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
  }
  .ms-header-connect .wc-jazzicon svg {
    display: block;
    opacity: 1;
  }


  /* ========== BUBBLE MODAL ========== */
  .bubble-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 2000;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard), visibility 0s linear var(--md-sys-motion-duration-short4);
  }
  .bubble-modal-overlay.open {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard), visibility 0s linear 0s;
  }
  .bubble-modal-overlay.closing {
    visibility: visible;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-accelerate), visibility 0s linear var(--md-sys-motion-duration-short4);
  }
  .bubble-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1060px;
    max-height: 96vh;
    background: #211f21;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    overflow: hidden;
    overflow-y: auto;
    z-index: 2001;
    display: flex;
    flex-direction: column;
    animation: m3ModalInCentered var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized-decelerate);
  }
  .bubble-modal-overlay.closing .bubble-modal {
    animation: m3ModalOutCentered var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-accelerate) forwards;
  }

  /* ── Top bar: avatar + name + price + close ── */
  .bm-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    background: #211f21;
    border-bottom: 1px solid rgba(0,0,0,0.4);
    box-shadow: 0 1px 0 rgba(255,255,255,0.05);
    transition: background var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-emphasized);
  }
  .bm-header::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-emphasized);
    pointer-events: none;
    z-index: 0;
  }
  .bm-header.glow-up::before {
    opacity: 1;
    background: rgba(34,197,94,0.4);
    animation: headerPulseUp 2s ease-out forwards;
  }
  .bm-header.glow-down::before {
    opacity: 1;
    background: rgba(239,68,68,0.4);
    animation: headerPulseDown 2s ease-out forwards;
  }
  @keyframes headerPulseUp {
    0% { opacity: 0; }
    15% { opacity: 1; }
    100% { opacity: 0; }
  }
  @keyframes headerPulseDown {
    0% { opacity: 0; }
    15% { opacity: 1; }
    100% { opacity: 0; }
  }
  .bm-header > * { position: relative; z-index: 1; }
  .bm-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
  }
  .bm-avatar {
    width: 36px; height: 36px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800;
    color: var(--text-primary);
    overflow: hidden;
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
  }
  .bm-avatar.boosted-avatar { overflow: visible; }
  .bm-avatar.boosted-avatar::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 9px;
    background: conic-gradient(from var(--boost-angle), #ffd700, #ffb627, #fff8d1, transparent 30%, transparent 70%, #fff8d1, #ffb627, #ffd700);
    animation: goldSpin 4s linear infinite;
    z-index: 0;
  }
  .bm-avatar.boosted-avatar img {
    position: relative;
    z-index: 1;
    outline: none !important;
  }
  .bm-banner-overlay {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 10;
    border-radius: 14px 14px 0 0;
    overflow: hidden;
    animation: bannerSlideDown var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized)-out;
  }
  .bm-banner-overlay img {
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: contain;
    display: block;
    background: #000;
  }
  .bm-banner-overlay .bm-banner-close {
    position: absolute;
    top: 8px; right: 8px;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
  .bm-banner-overlay .bm-banner-close:hover { background: rgba(0,0,0,0.7); }
  @keyframes bannerSlideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .bm-header-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
  }
  .bm-header-name { display: flex; align-items: center; gap: 6px; }
  .bm-sym {
    font-size: 15px; font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.3px;
  }
  .bm-fullname {
    font-size: 12px; color: var(--text-secondary);
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .bm-chain-badge {
    font-size: 11px; font-weight: 500;
    color: var(--text-secondary);
  }
  .bm-age-badge {
    font-size: 10px; padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255,255,255,0.05);
    color: var(--text-secondary);
    font-weight: 600;
  }
  .bm-price-big {
    font-size: 20px; font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.5px;
    white-space: nowrap;
    margin-left: auto;
    padding-right: 12px;
    flex-shrink: 0;
    cursor: pointer;
    transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  }
  .bm-price-big:hover { opacity: 0.75; }
  .bm-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 0;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
    margin-left: 0px;
    flex-shrink: 0;
    padding: 0;
    vertical-align: middle;
  }
  .bm-star:hover {
    color: #fff;
  }
  .bm-star.active {
    color: #fff;
  }
  .bm-star .bm-star-filled { display: none !important; }
  .bm-star.active .bm-star-filled { display: block !important; }
  .bm-star.active .bm-star-outline { display: none !important; }
  .bm-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.12s;
    margin-left: -5px;
    flex-shrink: 0;
    vertical-align: middle;
  }
  .bm-dots:hover, .bm-dots.active {
    color: var(--text-primary);
    background: none;
  }
  .bm-dots .dots-filled { display: none !important; }
  .bm-dots.active .dots-filled { display: block !important; }
  .bm-dots.active .dots-outline { display: none !important; }
  /* Visually match the bookmark and dots: the dots glyph is a filled circle
     (reads large, shrink it); the bookmark is a tall narrow shape (grow it). */
  .bm-star svg { width: 21px; height: 21px; }
  .bm-dots svg { width: 18px; height: 18px; }
  .bm-dropdown {
    position: absolute;
    background: #211f21;
    border: none;
    border-radius: 10px;
    padding: 0;
    min-width: 180px;
    z-index: 2010;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    opacity: 0;
    transform: scale(0.92) translateY(-8px);
    transform-origin: top right;
    transition: opacity var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate), transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate);
    pointer-events: none;
  }
  .bm-dropdown.open {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
  }
  .bm-dropdown a, .bm-dropdown span {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
    white-space: nowrap;
  }
  .bm-dropdown a:first-child, .bm-dropdown span:first-child {
    border-radius: 10px 10px 0 0;
  }
  .bm-dropdown a:hover, .bm-dropdown span:hover {
    background: rgba(255,255,255,0.05);
    color: var(--text-primary);
  }
  .bm-dropdown svg, .bm-dropdown img {
    width: 16px; height: 16px;
    flex-shrink: 0;
    color: rgba(255,255,255,0.4);
  }
  .bm-dropdown svg[viewBox="0 0 151 97"] {
    width: 18px; height: 12px;
  }
  .bm-dropdown svg.ico-globe, .bm-dropdown svg.ico-search { width: 18px; height: 18px; }
  .bm-close {
    background: var(--md-sys-color-surface-container-highest);
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
    flex-shrink: 0;
  }
  .bm-close:hover {
    color: var(--text-primary);
    background: rgba(255,255,255,0.08);
  }
  .bm-close:active {
    background: rgba(255,255,255,0.12);
  }

  /* ── Horizontal stats bar ── */
  .bm-stats-bar {
    display: flex;
    flex-shrink: 0;
  }
  .bm-stat-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 0;
  }
  .bm-stat-label {
    font-size: 10px; font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }
  .bm-stat-value {
    font-size: 13px; font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
  }

  /* ── Chart ── */
  .bm-chart {
    position: relative;
    height: 540px;
    flex-shrink: 0;
    background: #18171A;
  }
  .bm-chart iframe { border: none !important; background: #18171A !important; }
  .bm-chart-loading {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: #18171A;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: opacity 0.3s ease;
  }
  .bm-chart-loading.hidden {
    opacity: 0;
    pointer-events: none;
  }
  .bm-chart-loading-lbl {
    font-size: 13px;
    font-weight: 400;
    color: #f4f1ea;
    letter-spacing: .005em;
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    line-height: 1;
  }
  .bm-chart-loading .ms-load-spinner {
    position: relative;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }
  .bm-chart-loading .ms-load-spinner i {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1.4px;
    height: 4px;
    margin: -2px 0 0 -.7px;
    border-radius: 1px;
    background: #f4f1ea;
    opacity: .08;
    animation: bmChartFade 1s linear infinite;
  }
  @keyframes bmChartFade { 0% { opacity: 1; } 100% { opacity: .08; } }
  .bm-chart-loading .ms-load-spinner i:nth-child(1)  { transform: rotate(0deg) translateY(-5.5px);   animation-delay: -1s; }
  .bm-chart-loading .ms-load-spinner i:nth-child(2)  { transform: rotate(30deg) translateY(-5.5px);  animation-delay: -.917s; }
  .bm-chart-loading .ms-load-spinner i:nth-child(3)  { transform: rotate(60deg) translateY(-5.5px);  animation-delay: -.833s; }
  .bm-chart-loading .ms-load-spinner i:nth-child(4)  { transform: rotate(90deg) translateY(-5.5px);  animation-delay: -.75s; }
  .bm-chart-loading .ms-load-spinner i:nth-child(5)  { transform: rotate(120deg) translateY(-5.5px); animation-delay: -.667s; }
  .bm-chart-loading .ms-load-spinner i:nth-child(6)  { transform: rotate(150deg) translateY(-5.5px); animation-delay: -.583s; }
  .bm-chart-loading .ms-load-spinner i:nth-child(7)  { transform: rotate(180deg) translateY(-5.5px); animation-delay: -.5s; }
  .bm-chart-loading .ms-load-spinner i:nth-child(8)  { transform: rotate(210deg) translateY(-5.5px); animation-delay: -.417s; }
  .bm-chart-loading .ms-load-spinner i:nth-child(9)  { transform: rotate(240deg) translateY(-5.5px); animation-delay: -.333s; }
  .bm-chart-loading .ms-load-spinner i:nth-child(10) { transform: rotate(270deg) translateY(-5.5px); animation-delay: -.25s; }
  .bm-chart-loading .ms-load-spinner i:nth-child(11) { transform: rotate(300deg) translateY(-5.5px); animation-delay: -.167s; }
  .bm-chart-loading .ms-load-spinner i:nth-child(12) { transform: rotate(330deg) translateY(-5.5px); animation-delay: -.083s; }

  /* ── No-data chart overlay ── */
  .chart-nodata-overlay {
    position: absolute; inset: 0; z-index: 5;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: #131118;
  }
  /* Token page: overlay is a sibling, not inside chart container */
  .tp-center .chart-nodata-overlay {
    position: relative; flex: none; height: 60vh; min-height: 200px;
  }
  .chart-nodata-overlay svg { margin-bottom: 16px; opacity: 0.65; }
  .chart-nodata-label {
    font-size: 18px; color: var(--text-secondary); font-weight: 500; opacity: 0.65;
  }

  /* ── Bubblemaps iframe overlay ── */
  .bm-bubblemaps-overlay {
    flex: 1 1 0; display: flex; flex-direction: column; min-height: 0;
    opacity: 0; transition: opacity 0.25s ease;
  }
  .bm-bubblemaps-overlay.open { opacity: 1; }
  .bm-bubblemaps-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
  }
  .bm-bubblemaps-back {
    display: flex; align-items: center; gap: 6px;
    background: none; border: none; color: var(--text-secondary); font-size: 13px;
    cursor: pointer; padding: 4px 8px; border-radius: 6px;
    transition: background 0.15s, color 0.15s;
  }
  .bm-bubblemaps-back:hover { background: rgba(255,255,255,0.08); color: #fff; }
  .bm-bubblemaps-badge {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--text-secondary); font-weight: 600;
    letter-spacing: 0.3px;
  }
  .bm-bubblemaps-frame {
    flex: 1 1 0; width: 100%; border: none; min-height: 0;
    background: #0d0d11; border-radius: 0 0 16px 16px;
  }
  .bubble-modal.bm-bubblemaps-active {
    overflow: hidden;
  }

  /* ── Footer: timeframes + CA + converter ── */
  .bm-footer {
    flex-shrink: 0;
  }

  /* Timeframes row — M3 Segmented Button */
  .bm-timeframes {
    display: flex;
    margin: 10px 12px 0;
    padding: 0;
    gap: 0;
    background: rgba(255,255,255,0.04);
    border-radius: 100px;
    overflow: hidden;
  }
  .bm-tf {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 0;
    min-height: 40px;
    justify-content: center;
    border-radius: 100px;
  }
  .bm-tf-label {
    font-size: 10px; font-weight: 500;
    color: var(--text-secondary);
  }
  .bm-tf-val {
    font-size: 12px; font-weight: 700;
    font-variant-numeric: tabular-nums;
  }


  /* Converter V3 */
  .bm-converter {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: #292729;
    border-radius: 0;
    margin: 0;
    font-family: 'Inter', system-ui, sans-serif;
    color: #E2E2E6;
  }
  .bm-conv-left, .bm-conv-right {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }
  .bm-conv-right {
    align-items: flex-end;
    text-align: right;
  }
  .bm-conv-label {
    font-size: 9px;
    color: #C3C7CF;
    font-weight: 500;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .bm-conv-rate {
    color: #C3C7CF;
    text-transform: none;
    letter-spacing: 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 9px;
    font-variant-numeric: tabular-nums;
  }
  .bm-conv-left-row, .bm-conv-right-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }
  .bm-conv-right-row {
    justify-content: flex-end;
  }
  .bm-conv-unit {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 10px;
    background: #404659;
    color: #DBE2F9;
    border-radius: 999px;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    font-family: 'Inter', system-ui, sans-serif;
  }
  .bm-conv-hero-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: 0;
    color: #E2E2E6;
    font-size: 15px;
    font-weight: 600;
    font-family: 'Inter', system-ui, sans-serif;
    padding: 0;
    letter-spacing: -0.2px;
    font-variant-numeric: tabular-nums;
  }
  .bm-conv-hero-input::-webkit-inner-spin-button { display: none; }
  .bm-conv-hero-output {
    font-size: 15px;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 600;
    color: #A8C7FA;
    letter-spacing: -0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
  }
  .bm-conv-presets {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
  }
  .bm-conv-chip {
    font-size: 10px;
    padding: 0 8px;
    height: 22px;
    line-height: 1;
    background: transparent;
    color: #C3C7CF;
    border: 1px solid #42474E;
    border-radius: 999px;
    cursor: pointer;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 500;
  }
  .bm-conv-chip:hover {
    background: rgba(255,255,255,0.05);
  }
  .bm-conv-max.disabled {
    opacity: 0.4;
    pointer-events: none;
  }
  .bm-conv-unit-click {
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
  }
  .bm-conv-unit-click:hover {
    background: #4f5469;
  }
  .bm-conv-fab {
    width: 34px;
    height: 34px;
    border-radius: 17px;
    background: #A8C7FA;
    color: #0A305F;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    flex-shrink: 0;
  }
  .bm-conv-fab:hover {
    filter: brightness(1.1);
  }



  /* ========== BUBBLE HERO ========== */
  .bubble-hero {
    position: relative;
    width: auto;
    height: 200px;
    background: var(--md-sys-color-surface-container);
    overflow: hidden;
    border-radius: 0 0 var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large);
    margin: 0 8px 0 8px;
  }
  .bubble-world {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity 200ms ease-out;
  }
  #bubbleCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
  }
  .bubble-world.ready {
    opacity: 1;
  }
  .bubble-empty-state {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    pointer-events: none;
    text-align: center;
    padding: 20px;
    background: #1c1b1d;
    contain: layout paint style;
    isolation: isolate;
  }
  .bubble-empty-shrug {
    font-size: 48px;
    font-weight: 400;
    color: rgba(230,225,227,0.85);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    animation: shrugEntry 0.8s ease-out both;
  }
  .shrug-face {
    display: inline-block;
    animation: shrugFaceBob 2.5s ease-in-out infinite;
  }
  .shrug-arm {
    display: inline-block;
  }
  .shrug-left {
    animation: shrugArmLeft 2.5s ease-in-out infinite;
    transform-origin: right center;
  }
  .shrug-right {
    animation: shrugArmRight 2.5s ease-in-out infinite;
    transform-origin: left center;
  }
  @keyframes shrugEntry {
    0% { opacity: 0; transform: scale(0.5) translateY(20px); }
    60% { opacity: 1; transform: scale(1.05) translateY(-4px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
  }
  @keyframes shrugFaceBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
  }
  @keyframes shrugArmLeft {
    0%, 100% { transform: rotate(0deg) translateY(0); }
    30% { transform: rotate(-8deg) translateY(-6px); }
    60% { transform: rotate(0deg) translateY(0); }
  }
  @keyframes shrugArmRight {
    0%, 100% { transform: rotate(0deg) translateY(0); }
    30% { transform: rotate(8deg) translateY(-6px); }
    60% { transform: rotate(0deg) translateY(0); }
  }
  @media (max-width: 768px) {
    .bubble-empty-shrug {
      font-size: 36px;
    }
  }
  .bubble-empty-text {
    color: rgba(230, 225, 227, 0.85);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.2px;
  }
  .bubble-empty-sub {
    color: rgba(230, 225, 227, 0.45);
    font-size: 13px;
  }
  .bubble-scroll-hint {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    animation: hintBob 2s ease-in-out infinite;
    pointer-events: none;
    z-index: 5;
  }

  /* Individual bubble */
  .hm-bubble {
    position: absolute;
    border-radius: 50%;
    display: block;
    cursor: pointer;
    user-select: none;
    text-align: center;
    will-change: transform;
    transition: filter 0.15s, width 0.8s ease-out, height 0.8s ease-out;
  }
  .hm-bubble:hover {
    filter: brightness(1.25);
    z-index: 50;
    transform-origin: center center;
  }

  /* Soft ambient glow */
  .hm-glow {
    position: absolute;
    inset: -10%;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.7;
  }

  /* Main lens body */
  .hm-inner {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
  }

  /* Outer lens barrel ring — thick scope housing */
  .hm-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
  }

  /* Crosshair overlay — real scope reticle */
  .hm-crosshair {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.20;
  }
  .hm-crosshair::before,
  .hm-crosshair::after {
    content: '';
    position: absolute;
    background: #fff;
  }
  /* Horizontal line — gap in the middle */
  .hm-crosshair::before {
    top: 50%;
    left: 8%;
    right: 8%;
    height: 1px;
    transform: translateY(-0.5px);
    background: linear-gradient(90deg, 
      rgba(255,255,255,0.8) 0%, 
      rgba(255,255,255,0.8) 30%, 
      transparent 38%, 
      transparent 62%, 
      rgba(255,255,255,0.8) 70%, 
      rgba(255,255,255,0.8) 100%
    );
  }
  /* Vertical line — gap in the middle */
  .hm-crosshair::after {
    left: 50%;
    top: 8%;
    bottom: 8%;
    width: 1px;
    transform: translateX(-0.5px);
    background: linear-gradient(180deg, 
      rgba(255,255,255,0.8) 0%, 
      rgba(255,255,255,0.8) 25%, 
      transparent 35%, 
      transparent 65%, 
      rgba(255,255,255,0.8) 75%, 
      rgba(255,255,255,0.8) 100%
    );
  }

  /* Inner scope ring — the reticle circle */
  .hm-scope-ring {
    position: absolute;
    inset: 22%;
    border-radius: 50%;
    border: 1px solid var(--border);
    pointer-events: none;
  }

  /* Tick marks on the scope */
  .hm-ticks {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.08;
  }
  .hm-ticks::before,
  .hm-ticks::after {
    content: '';
    position: absolute;
    background: #fff;
  }
  /* Tick marks hidden — only existed on top+left, causing asymmetry */
  .hm-ticks::before,
  .hm-ticks::after {
    display: none;
  }

  /* Text content */
  .hm-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 90%;
  }
  .hm-logo {
    border-radius: 50%;
    margin-bottom: 2px;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
    background: rgba(145, 180, 220, 0.078);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: var(--text-secondary);
    border: 1px solid var(--border);
  }
  .hm-ticker {
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    letter-spacing: 0.3px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    font-family: 'Inter', sans-serif;
  }
  .hm-pct {
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
    font-family: 'Inter', sans-serif;
    font-variant-numeric: tabular-nums;
  }

  /* Token image inside bubble */
  .hm-token-img {
    border-radius: 6px;
    margin-bottom: 3px;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.7));
    object-fit: cover;
  }


  /* Bubble enter/exit animations */
  @keyframes bubbleEnter {
    0% { clip-path: circle(0%); opacity: 0; }
    60% { clip-path: circle(55%); opacity: 0.8; }
    100% { clip-path: circle(50%); opacity: 1; }
  }
  @keyframes bubbleExit {
    0% { filter: brightness(1); clip-path: circle(50%); opacity: 1; }
    10% { filter: brightness(3); clip-path: circle(53%); opacity: 1; }
    25% { filter: brightness(2); clip-path: circle(50%); opacity: 0.9; }
    100% { filter: brightness(0.5); clip-path: circle(0%); opacity: 0; }
  }
  @keyframes exitFlash {
    0% { transform: scale(1); opacity: 0; }
    15% { transform: scale(1.3); opacity: 0.6; }
    100% { transform: scale(2); opacity: 0; }
  }
  .hm-bubble.entering {
    animation: bubbleEnter 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  .hm-bubble.exiting {
    animation: bubbleExit var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-emphasized)-out forwards;
    pointer-events: none;
  }
  .hm-bubble.exiting::after {
    content: "";
    position: absolute;
    inset: -10%;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.4);
    animation: exitFlash var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-emphasized)-out forwards;
    pointer-events: none;
  }


  .memescope-logo {
    font-family: 'Saira Stencil', sans-serif;
    font-weight: 400;
    font-size: 30px;
    color: var(--text-primary);
    letter-spacing: 2px;
    cursor: default;
    user-select: none;
  }
  .memescope-scope {
    color: var(--text-primary);
  }


  .memescope-icon {
    height: 17px;
    width: 17px;
    vertical-align: -1px;
    margin: 0 1px;
    filter: brightness(0) invert(1);
  }


  .pct-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
  }
  .pct-bar {
    width: 100%;
    height: 2px;
    background: rgba(145, 180, 220, 0.052);
    border-radius: 2px;
    overflow: hidden;
  }
  .pct-bar-fill {
    height: 100%;
    border-radius: 2px;
    opacity: 0.5;
    transition: width var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
  }


  /* Boosted bubble - hybrid: golden interior + rotating ring + badge */
  .hm-bubble.boosted {
    z-index: 3;
    filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.4));
  }
  .hm-bubble.boosted::before { display: none; }
  /* Golden glass interior — stronger at edges, clear in center */
  .hm-bubble.boosted .hm-inner {
    background: radial-gradient(circle at 50% 45%,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0) 40%,
      rgba(255, 195, 0, 0.12) 65%,
      rgba(255, 215, 0, 0.25) 100%) !important;
  }
  /* Soft golden ambient glow */
  .hm-bubble.boosted .hm-glow {
    background: radial-gradient(circle,
      rgba(255, 215, 0, 0.3) 25%,
      rgba(255, 185, 0, 0.12) 50%,
      transparent 70%) !important;
  }
  /* Gold-tinted crosshairs */
  .hm-bubble.boosted .hm-crosshair {
    opacity: 0.2 !important;
  }
  .hm-bubble.boosted .hm-crosshair::before {
    background: linear-gradient(90deg, 
      rgba(255,215,0,0.8) 0%, rgba(255,215,0,0.8) 30%, 
      transparent 38%, transparent 62%, 
      rgba(255,215,0,0.8) 70%, rgba(255,215,0,0.8) 100%
    ) !important;
  }
  .hm-bubble.boosted .hm-crosshair::after {
    background: linear-gradient(180deg, 
      rgba(255,215,0,0.8) 0%, rgba(255,215,0,0.8) 25%, 
      transparent 35%, transparent 65%, 
      rgba(255,215,0,0.8) 75%, rgba(255,215,0,0.8) 100%
    ) !important;
  }
  /* Gold scope ring */
  .hm-bubble.boosted .hm-scope-ring {
    border-color: rgba(255, 215, 0, 0.25) !important;
  }
  /* Static inner ring */
  .hm-bubble.boosted .hm-ring {
    border: 2px solid rgba(255, 215, 0, 0.3) !important;
  }
  /* Badge centered at bottom */
  .hm-boosted-badge {
    background: linear-gradient(135deg, #FFD740, #FF8F00);
    color: #141314;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 5px;
    letter-spacing: 0.5px;
    line-height: 1;
    white-space: nowrap;
    margin-top: 2px;
  }

  @media (min-width: 769px) {
    .hm-boosted-badge {
      font-size: 13px;
      padding: 4px 11px;
    }
  }

  @media (max-width: 768px) {
    .hm-bubble.boosted::before { display: none; }
    .hm-boosted-badge {
      font-size: 6px;
      padding: 1px 3px;
      border-radius: 3px;
    }
  }


  /* Boost CTA in bubble modal */
  .bm-boost-cta {
    padding: 0 20px 18px;
  }
  .bm-boost-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(255,215,0,0.08), rgba(255,150,0,0.04), rgba(255,215,0,0.06));
    background-size: 200% 200%;
    animation: boostGradient 3s ease infinite;
    border: 1px solid rgba(255,215,0,0.15);
    border-radius: 9px;
    position: relative;
    overflow: hidden;
  }
  .bm-boost-inner:hover {
    border-color: rgba(255,215,0,0.3);
    box-shadow: 0 0 20px rgba(255,215,0,0.08);
  }
  @keyframes boostGradient {
    0%,100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
  }
  .bm-boost-shimmer {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,215,0,0.06), transparent);
    animation: boostShimmer 4s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes boostShimmer {
    0% { left: -100%; }
    50% { left: 100%; }
    100% { left: 100%; }
  }
  .bm-boost-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
  }
  .bm-particle {
    position: absolute;
    color: rgba(255,215,0,0.3);
    font-size: 8px;
    animation: particleFloat 6s ease-in-out infinite;
  }
  .bm-particle:nth-child(1) { left: 10%; top: 20%; animation-delay: 0s; animation-duration: 5s; }
  .bm-particle:nth-child(2) { left: 30%; top: 60%; animation-delay: 1.2s; animation-duration: 7s; }
  .bm-particle:nth-child(3) { left: 55%; top: 30%; animation-delay: 0.6s; animation-duration: 6s; }
  .bm-particle:nth-child(4) { left: 75%; top: 70%; animation-delay: 2s; animation-duration: 5.5s; }
  .bm-particle:nth-child(5) { left: 90%; top: 40%; animation-delay: 0.3s; animation-duration: 8s; }
  @keyframes particleFloat {
    0%,100% { transform: translateY(0) scale(1); opacity: 0.2; }
    50% { transform: translateY(-12px) scale(1.4); opacity: 0.5; }
  }
  .bm-boost-left {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 1;
  }
  .bm-boost-icon {
    font-size: 22px;
    flex-shrink: 0;
    animation: boostRocket 2s ease-in-out infinite;
  }
  @keyframes boostRocket {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
  }
  .bm-boost-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .bm-boost-title {
    font-size: 13px;
    font-weight: 700;
    color: #FFD740;
    letter-spacing: 0.3px;
  }
  .bm-boost-desc {
    font-size: 13px;
    color: rgba(255,215,0,0.45);
    line-height: 1.3;
  }
  .bm-boost-btn {
    flex-shrink: 0;
    padding: 10px 20px;
    background: linear-gradient(135deg, #FFD740, #FF8F00);
    border: none;
    border-radius: 7px;
    color: #141314;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16,1,0.3,1);
    letter-spacing: 0.5px;
    position: relative;
    z-index: 1;
    overflow: hidden;
  }
  .bm-boost-btn-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
  }
  .bm-boost-btn:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 6px 24px rgba(255,215,0,0.35), 0 0 40px rgba(255,215,0,0.15);
  }
  .bm-boost-btn:hover .bm-boost-btn-glow {
    opacity: 1;
  }
  .bm-boost-btn:active {
    filter: brightness(0.85);
  }


  /* ========== BOOST MODAL ========== */
  .boost-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 3000;
  }
  .boost-modal-overlay.open { display: flex; align-items: center; justify-content: center; animation: m3OverlayIn var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard); }
  .boost-modal-overlay.closing { display: flex; align-items: center; justify-content: center; animation: m3OverlayOut var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-accelerate) forwards; pointer-events: none; }
  .boost-modal {
    width: 420px;
    max-height: 90vh;
    background: #211f21;
    border: none;
    border-radius: 28px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    overflow-y: auto;
    animation: m3ModalIn var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized-decelerate);
    position: relative;
  }
  .boost-modal-overlay.closing .boost-modal { animation: m3ModalOut var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-accelerate) forwards; }
  .boost-modal::-webkit-scrollbar { width: 4px; }
  .boost-modal::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }

  .boost-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 24px 24px 0;
    border-bottom: none;
  }
  .boost-modal-title-row {
    display: flex; align-items: center; gap: 10px;
  }
  .boost-modal-title {
    font-size: 22px; font-weight: 600; color: var(--text-primary);
    letter-spacing: -0.2px;
  }
  .boost-modal-token {
    font-size: 11px; font-weight: 600; color: var(--text-primary);
    background: var(--md-sys-color-surface-container-highest);
    padding: 4px 10px; border-radius: var(--md-sys-shape-corner-full);
  }
  .boost-modal-close {
    width: 32px; height: 32px;
    background: var(--md-sys-color-surface-container-highest);
    border: none; border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background 150ms ease, color 150ms ease;
  }
  .boost-modal-close:hover { background: #3a383a; color: var(--text-primary); }

  .boost-modal-subtitle {
    padding: 12px 24px 4px; font-size: 13px; color: var(--text-secondary);
    line-height: 1.55;
  }

  .boost-tiers {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 8px; padding: 16px 24px;
  }
  .boost-tier-card {
    position: relative;
    background: var(--md-sys-color-surface-container-high);
    border: 2px solid transparent;
    border-radius: 16px;
    padding: 16px;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease;
    overflow: hidden;
  }
  .boost-tier-card:hover {
    background: #302e31;
  }
  .boost-tier-card.selected {
    border-color: #4a4fd8;
    background: rgba(45,63,122,0.12);
  }
  .boost-tier-card.selected::after {
    content: '✓';
    position: absolute; top: 10px; right: 12px;
    width: 20px; height: 20px;
    background: #4a4fd8; color: var(--text-primary);
    border-radius: 50%; font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
  }
  .boost-tier-count {
    font-size: 20px; font-weight: 700; color: #FFD740;
    display: flex; align-items: center; gap: 4px;
  }
  .boost-tier-count svg { width: 18px; height: 18px; }
  .boost-tier-usd {
    font-size: 16px; font-weight: 600; color: var(--text-primary);
    margin-top: 6px;
  }
  .boost-tier-sol {
    font-size: 11px; color: var(--text-secondary);
    margin-top: 3px;
    font-variant-numeric: tabular-nums;
  }
  .boost-tier-popular {
    position: absolute; top: 0; right: 14px;
    background: #FFD740;
    color: #141314; font-size: 9px; font-weight: 700;
    padding: 3px 8px; border-radius: 0 0 8px 8px;
    letter-spacing: 0.5px; text-transform: uppercase;
  }

  .boost-wallet-section {
    padding: 12px 24px 8px;
    border-top: none;
    margin-top: 0;
  }
  .boost-wallet-label {
    font-size: 11px; font-weight: 600; color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 0.8px;
    margin-bottom: 10px;
  }
  .boost-connect-btn {
    width: 100%;
    padding: 14px;
    background: var(--md-sys-color-surface-container-highest);
    border: none;
    border-radius: 14px;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: background 150ms ease;
  }
  .boost-connect-btn:hover {
    background: #3a383a;
  }
  .boost-connect-btn:disabled {
    opacity: 0.4; cursor: not-allowed;
  }
  .boost-connect-btn img { width: 20px; height: 20px; }

  .boost-wallet-connected {
    display: flex; align-items: center; gap: 10px;
    background: var(--md-sys-color-surface-container-high);
    border: none;
    border-radius: 14px;
    padding: 12px 14px;
  }
  .boost-wallet-addr {
    font-size: 13px; color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
    flex: 1;
  }
  .boost-wallet-disconnect {
    font-size: 11px; color: var(--red);
    background: none; border: none; cursor: pointer;
    font-weight: 600;
  }
  .boost-wallet-disconnect:hover { text-decoration: underline; }

  .boost-pay-btn {
    width: 100%;
    padding: 14px;
    background: #FFD740;
    border: none;
    border-radius: 14px;
    color: #141314;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 150ms ease;
    letter-spacing: 0.3px;
    margin-top: 10px;
    display: none;
  }
  .boost-pay-btn:hover {
    background: #FFE066;
  }
  .boost-pay-btn:disabled {
    opacity: 0.4; cursor: not-allowed;
  }

  .boost-status {
    padding: 10px 24px 20px;
    font-size: 13px; color: var(--text-secondary);
    text-align: center;
    min-height: 24px;
  }
  .boost-status.success { color: var(--green); }
  .boost-status.error { color: var(--red); }
  .boost-status.pending { color: #FFD740; }

  /* Boost badge in table */
  .boost-badge {
    display: inline-flex; align-items: center; gap: 0px;
    background: none;
    border: none;
    color: #FFD740;
    font-size: 13px; font-weight: 700;
    padding: 0;
    margin-left: 5px;
    align-self: center;
    overflow: visible;
  }
  .boosted-row td:first-child {
    overflow: visible;
  }
  .boost-badge-icon {
    width: 34px; height: 34px;
    flex-shrink: 0;
    margin-top: -6px;
    margin-bottom: -10px;
    overflow: visible;
  }
  .boost-bob {
    animation: boostBob 2s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
    will-change: transform;
  }
  .boost-fire {
    animation: boostFire 0.4s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
    will-change: transform;
  }
  @keyframes boostHalo {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(255,213,57,0.55)) drop-shadow(0 0 8px rgba(255,170,30,0.25)); }
    50%      { filter: drop-shadow(0 0 6px rgba(255,213,57,0.85)) drop-shadow(0 0 12px rgba(255,170,30,0.45)); }
  }
  @keyframes boostBob {
    0%   { transform: translateY(0) rotate(0deg); }
    23%  { transform: translateY(-6px) rotate(1.5deg); }
    50%  { transform: translateY(0) rotate(0deg); }
    75%  { transform: translateY(-6px) rotate(-1.5deg); }
    100% { transform: translateY(0) rotate(0deg); }
  }
  @keyframes boostFire {
    0%   { transform: scale(1); }
    25%  { transform: scale(0.84); }
    50%  { transform: scale(0.95); }
    75%  { transform: scale(0.91); }
    100% { transform: scale(1); }
  }
  /* Body shine sweep — moving highlight along rocket silhouette */
  .boost-shine {
    stroke: rgba(255,255,255,0.95);
    stroke-width: 5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 70 720;
    animation: boostShine 3.2s linear infinite;
    mix-blend-mode: screen;
    pointer-events: none;
  }
  @keyframes boostShine {
    0%   { stroke-dashoffset: 800; opacity: 0; }
    8%   { opacity: 0.9; }
    50%  { opacity: 0.9; }
    60%  { stroke-dashoffset: 0;   opacity: 0; }
    100% { stroke-dashoffset: 0;   opacity: 0; }
  }
  /* Nose sparkle — twinkling star on rocket tip */
  .boost-sparkle {
    transform-box: fill-box;
    transform-origin: center;
    animation: boostSparkle 2.6s ease-in-out infinite 0.4s;
  }
  @keyframes boostSparkle {
    0%, 70%, 100% { transform: scale(0) rotate(0deg);   opacity: 0; }
    78%           { transform: scale(1.4) rotate(45deg);  opacity: 1; }
    86%           { transform: scale(0.9) rotate(90deg);  opacity: 0.85; }
    94%           { transform: scale(0)   rotate(135deg); opacity: 0; }
  }

  /* Boosted token row — gold background tint */
  .boosted-row td {
    background: transparent !important;
  }
  /* Boosted token cell — minimal, let the rocket badge speak */
  .boosted-cell .token-symbol {
    color: #FFD740 !important;
  }
  .boosted-cell .token-pair {
    color: rgba(255,215,64,0.4) !important;
  }

  /* Bug Report & Contact Modals */
  .bugreport-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 3000;
  }
  .bugreport-overlay.open { display: flex; align-items: center; justify-content: center; animation: m3OverlayIn var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard); }
  .bugreport-overlay.closing { display: flex; align-items: center; justify-content: center; animation: m3OverlayOut var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-accelerate) forwards; pointer-events: none; }
  .bugreport-modal {
    width: 420px;
    max-width: 94vw;
    background: #211f21;
    border: none;
    border-radius: 28px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    overflow: hidden;
    animation: m3ModalIn var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized-decelerate);
    position: relative;
  }
  .bugreport-overlay.closing .bugreport-modal { animation: m3ModalOut var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-accelerate) forwards; }
  .bugreport-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 24px 24px 0;
    border-bottom: none;
  }
  .bugreport-title {
    font-size: 22px; font-weight: 600; color: var(--text-primary);
    display: flex; align-items: center; gap: 10px;
    letter-spacing: -0.2px;
  }
  .bugreport-title svg {
    width: 20px; height: 20px;
    color: var(--text-secondary);
  }
  .bugreport-close {
    width: 32px; height: 32px;
    background: var(--md-sys-color-surface-container-highest);
    border: none; border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background 150ms ease, color 150ms ease;
  }
  .bugreport-close:hover { background: #3a383a; color: var(--text-primary); }
  .bugreport-body { padding: 16px 24px 24px; }
  .bugreport-desc {
    font-size: 13px; color: var(--text-secondary); line-height: 1.55;
    margin-bottom: 20px;
  }
  .bugreport-label {
    display: block; font-size: 11px; font-weight: 600;
    color: var(--text-secondary); margin-bottom: 8px;
    text-transform: uppercase; letter-spacing: 0.8px;
  }
  .bugreport-input, .bugreport-textarea {
    width: 100%; box-sizing: border-box;
    background: var(--md-sys-color-surface-container-high);
    border: none;
    border-radius: 14px;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    padding: 14px 16px;
    outline: none;
    transition: background 150ms ease;
  }
  .bugreport-input:focus, .bugreport-textarea:focus {
    background: #302e31;
  }
  .bugreport-input::placeholder, .bugreport-textarea::placeholder {
    color: var(--text-secondary);
  }
  .bugreport-textarea {
    resize: vertical; min-height: 110px; line-height: 1.55;
  }
  .bugreport-field { margin-bottom: 14px; }
  .bugreport-submit {
    width: 100%;
    padding: 14px;
    border: none; border-radius: 14px;
    background: var(--md-sys-color-surface-container-highest);
    color: var(--text-primary); font-family: 'Inter', sans-serif;
    font-size: 13px; font-weight: 600;
    cursor: pointer;
    transition: background 150ms ease;
    margin-top: 6px;
  }
  .bugreport-submit:hover {
    background: #3a383a;
  }
  .bugreport-submit:disabled {
    opacity: 0.4; cursor: not-allowed;
  }
  .bugreport-status {
    text-align: center; font-size: 13px;
    margin-top: 12px; min-height: 20px;
    color: var(--text-secondary);
  }
  .bugreport-status.success { color: var(--green); }
  .bugreport-status.error { color: var(--red); }

  .token-avatar-img {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    flex-shrink: 0;
    object-fit: cover;
    background: var(--bg-surface);
  }


  .token-avatar-wrap {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    position: relative;
  }
  .token-avatar-wrap .token-avatar-img {
    position: absolute;
    inset: 0;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: cover;
    background: var(--bg-surface);
  }
  .token-avatar-wrap .token-avatar {
    position: absolute;
    inset: 0;
  }

  /* Boosted token gold sparkle border */
  @property --boost-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
  }
  .token-avatar-wrap.boosted-avatar::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 7px;
    background: conic-gradient(from var(--boost-angle), #ffd700, #ffb627, #fff8d1, transparent 30%, transparent 70%, #fff8d1, #ffb627, #ffd700);
    animation: goldSpin 4s linear infinite;
    z-index: 0;
  }
  .token-avatar-wrap.boosted-avatar .token-avatar-img {
    position: relative;
    z-index: 1;
    outline: none !important;
  }
  @keyframes goldSpin {
    to { --boost-angle: 360deg; }
  }




  th.sort-asc .sort-icon {
    transform: rotate(180deg);
    opacity: 1;
    filter: brightness(2);
  }
  th.sort-desc .sort-icon {
    opacity: 1;
    filter: brightness(2);
  }
  th.sortable:hover .sort-icon {
    opacity: 0.7;
  }

  .loading-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-strong);
    border-top: 2px solid var(--phantom-purple);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
  .skeleton-box {
    background: rgba(145, 180, 220, 0.078);
    animation: skeletonPulse 1.5s ease-in-out infinite;
  }
  .skeleton-row { height: 44px; }
  @keyframes skeletonPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
  }

  /* Enhanced Modal */
  .bm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
  }
  .bm-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .bm-header-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .bm-header-name {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .bm-chain-badge {
    font-size: 16px;
    font-weight: 400;
    color: var(--text-secondary);
    margin-left: -4px;
  }
  .bm-age-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(145, 180, 220, 0.065);
    color: var(--text-secondary);
    font-weight: 600;
  }
  .bm-fullname {
    font-size: 13px;
    color: var(--text-primary);
  }
  /* price flash animations */
  .bm-price-big.flash-up { animation: priceFlashUp 1s ease-out; }
  .bm-price-big.flash-down { animation: priceFlashDown 1s ease-out; }
  @keyframes priceFlashUp {
    0% { color: var(--text-primary); }
    15% { color: #22C55E; }
    100% { color: var(--text-primary); }
  }
  @keyframes priceFlashDown {
    0% { color: var(--text-primary); }
    15% { color: #EF4444; }
    100% { color: var(--text-primary); }
  }
  .bm-conv-title {
    font-size: 11px;
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 8px;
  }
  .bm-conv-row {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .bm-conv-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0 10px;
  }
  .bm-conv-input {
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 600;
    width: 100%;
    padding: 8px 0;
    outline: none;
    font-variant-numeric: tabular-nums;
  }
  .bm-conv-input::-webkit-inner-spin-button { display: none; }
  .bm-conv-sym {
    font-size: 12px;
    color: var(--phantom-purple);
    font-weight: 700;
    white-space: nowrap;
  }
  .bm-conv-eq {
    color: var(--text-primary);
    font-size: 18px;
  }
  .bm-conv-result {
    flex: 1;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--green);
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .bm-tf {
    cursor: pointer;
    transition: background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  }
  .bm-tf:hover {
    background: rgba(255,255,255,0.08);
  }
  .bm-tf.active {
    background: #45455a;
  }

  /* Buy/Sell panel under timeframes */
  .bm-buysell {
    display: block;
    padding: 10px 18px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    opacity: 1;
  }
  .bm-bs-row {
    display: flex;
    gap: 16px;
  }
  .bm-bs-group {
    flex: 1;
  }
  .bm-bs-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
  }
  .bm-bs-label {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .bm-bs-vals {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
  }
  .bm-bs-val {
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  .bm-bs-val.green { color: var(--green); }
  .bm-bs-val.red { color: var(--red); }
  .bm-bs-bar {
    height: 4px;
    border-radius: 2px;
    background: var(--red);
    overflow: hidden;
  }
  .bm-bs-bar-fill {
    height: 100%;
    border-radius: 2px;
    background: var(--green);
    transition: width var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
  }

  .bm-chart-tooltip {
    position: absolute;
    font-size: 12px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    font-variant-numeric: tabular-nums;
    padding: 4px 8px;
    background: rgba(43,42,51,0.95);
    border: 1px solid var(--border);
    border-radius: 6px;
    pointer-events: none;
    z-index: 10;
    white-space: nowrap;
  }
  .bm-chart-crosshair-v {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 1px dashed;
    pointer-events: none;
    z-index: 5;
  }
  .bm-chart-crosshair-h {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 1px dashed;
    pointer-events: none;
    z-index: 5;
  }
  .bm-chart-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 10;
    box-shadow: 0 0 8px currentColor;
  }

  .bm-conv-swap {
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--phantom-purple);
    font-size: 16px;
    cursor: pointer;
    padding: 6px 10px;
    transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
    flex-shrink: 0;
  }
  .bm-conv-swap:hover {
    background: var(--phantom-purple-dim);
    border-color: var(--phantom-purple);
  }

  .token-top-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .token-icons {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 1px;
  }

  .ti-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    background: none;
    border: none;
    cursor: pointer;
    transition: color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
    text-decoration: none;
    padding: 0;
  }
  .ti-icon:hover {
    color: var(--text-primary);
  }
  .token-icons {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
  }

  .age-col, .vol-col {
    color: #f9f9fb !important;
  }

  .refresh-progress-wrap {
    width: auto;
    height: 1px;
    background: #1a191c;
    position: relative;
    overflow: hidden;
    margin: 0 8px;
  }
  .refresh-progress-bar {
    height: 100%;
    width: 0%;
    background: #4A9EFF;
    border-radius: 2 2px 1px 1;
    transition: width 1s linear;
  }
  .refresh-progress-bar.fetching {
    width: 100% !important;
    background: linear-gradient(90deg, #4A9EFF, #8FCFFF, #4A9EFF);
    background-size: 200% 100%;
    animation: progressShimmer 1s ease infinite;
  }
  @keyframes progressShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  /* ═══════════════════════════════════════ */
  /* MOBILE RESPONSIVE STYLES               */
  /* ═══════════════════════════════════════ */

  /* Tablets and below */
  @media (max-width: 1024px) {
    .main { margin-left: 0 !important; }
    .top-header-bar { left: 0 !important; }
    .filter-bar { flex-wrap: wrap; gap: 6px; }
  }

  /* Phones */
  @media (max-width: 768px) {
    .ms-header-connect-split,
    .ms-header-connect-wrap { display: none !important; }
    .ms-header-ens-btn { display: none !important; }

    /* === MODAL WIDTHS — all edge-to-edge on mobile === */
    .wc-modal { width: calc(100vw - 24px) !important; }
    .wl-modal { width: calc(100vw - 24px) !important; left: 50% !important; transform: translate(-50%, -50%) !important; }

    /* === PREVENT HORIZONTAL PAGE SCROLL === */
    html, body {
      overflow-x: hidden !important;
      max-width: 100vw !important;
    }
    .app {
      max-width: 100vw !important;
      overflow: visible !important;
    }
    .main {
      max-width: 100vw !important;
      overflow: visible !important;
      background: #141314 !important;
    }

    /* === LAYOUT === */
    .main { margin-left: 0 !important; }
    .bubble-hero {
      margin: 0 8px !important;
      border-radius: 0 0 var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) !important;
    }

    /* === HEADER — clean minimal === */
    .sticky-nav-wrap {
      background: #141314 !important;
      position: relative;
      z-index: 10;
    }
    .sticky-nav-wrap::before {
      background: #141314 !important;
    }
    .top-header-bar {
      left: 0 !important;
      padding: 8px 14px 8px !important;
      border-bottom: 1px solid rgba(255,255,255,0.08) !important;
      margin: 8px 8px 0 8px !important;
      border-radius: var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0 !important;
      background: #2b2930 !important;
    }
    .memescope-logo { font-size: 26px !important; letter-spacing: 0.5px; }
    .memescope-icon { height: 15px !important; width: 15px !important; vertical-align: -1px !important; margin: 0 1px !important; }
    .top-header-search {
      display: none !important;
    }

    /* Multichart on mobile: Clear All + X on the top header bar; the
       Columns/Height/Spacing controls in the bar below (scrolls horizontally).
       The overlay's top is aligned to the header bottom in JS so the two bars
       are flush (no see-through gap). The main page filter pills are hidden so
       they can't peek above the overlay. */
    body.mc-open .mc-topbar-actions { display: inline-flex !important; }
    body.mc-open .memescope-logo { display: none !important; }
    body.mc-open .filter-bar { display: none !important; }
    body.mc-open .mc-filterbar .mc-combo-pill,
    body.mc-open .mc-filterbar .mc-combo-close { display: none !important; }
    /* Match the main page's two top bars: header 54px, controls bar ~44px */
    body.mc-open .top-header-bar { min-height: 54px; }
    body.mc-open .mc-filterbar {
      justify-content: flex-start;
      gap: 6px;
      height: 44px;
      padding: 6px 12px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      border-top: none;
    }
    body.mc-open .mc-filterbar::-webkit-scrollbar { display: none; width: 0; height: 0; }
    body.mc-open .mc-filterbar .mc-controls { flex-shrink: 0; margin-right: 0; overflow: visible; }
    body.mc-open .mc-filterbar .mc-ctrl { height: 32px; padding: 0 4px; gap: 3px; flex-shrink: 0; }
    body.mc-open .mc-filterbar .mc-ctrl-btn { width: 22px; height: 22px; font-size: 14px; }
    body.mc-open .mc-filterbar .mc-ctrl-label { font-size: 13px; }
    body.mc-open .mc-topbar-actions .mc-combo-clear { height: 32px; }
    body.mc-open .mc-topbar-actions .mc-combo-close { width: 32px; height: 32px; }

    .dexhub-btn { display: none !important; }
    .top-header-right { gap: 0 !important; }
    .top-header-right-group { gap: 0 !important; margin-left: -8px !important; }
    .ms-mobile-btn { margin-left: -8px !important; }
    .top-header-right .topbar-btn[onclick*="toggleTheme"] { display: none !important; }
    .ms-mobile-btn {
      width: 40px !important;
      height: 40px !important;
      background: transparent !important;
      border: none !important;
      border-radius: 50% !important;
      margin-left: 0 !important;
      color: #e6e1e3 !important;
    }
    .ms-mobile-btn svg { opacity: 1; }
    .ms-mobile-btn:hover { background: transparent !important; color: var(--text-secondary) !important; border-color: transparent !important; }
    .ms-mobile-btn:active { background: rgba(255,255,255,0.08) !important; }

    /* === BUBBLES — tall, contained to screen === */
    #bubbleHero {
      min-height: 63svh !important;
      max-height: 72svh !important;
      height: 68svh !important;
      width: auto !important;
      max-width: 100vw !important;
      overflow: hidden !important;
      margin: 0 8px !important;
      border-radius: 0 0 var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) !important;
      box-sizing: border-box !important;
    }

    /* === FILTER BAR — cohesive card with bubbles === */
    .filter-bar {
      padding: 6px 14px 6px 10px !important;
      gap: 8px !important;
      overflow-x: auto !important;
      flex-wrap: nowrap !important;
      background: #2b2930 !important;
      align-items: center !important;
      -webkit-overflow-scrolling: touch;
      border-bottom: none !important;
      margin: 0 8px 0 !important;
      border-radius: 0 !important;
    }
    .filter-bar::-webkit-scrollbar { display: none; }

    .filter-spacer { display: none !important; }
    .filter-right { flex-shrink: 0; }
    
    /* Timeframe group — M3 segmented button */
    .filter-group {
      position: relative !important;
      padding: 0 !important;
      gap: 0 !important;
      border: none !important;
      background: var(--md-sys-color-surface-container-highest) !important;
      border-radius: var(--md-sys-shape-corner-full) !important;
      overflow: hidden !important;
      flex-shrink: 0;
      display: flex !important;
      flex-direction: row !important;
      align-items: stretch !important;
    }
    .filter-group .filter-btn {
      display: flex !important;
      font-size: 13px !important;
      font-weight: 500 !important;
      padding: 8px 10px !important;
      border-radius: var(--md-sys-shape-corner-full) !important;
      white-space: nowrap;
      letter-spacing: 0.3px;
      background: transparent !important;
      color: #e6e1e3 !important;
    }
    .filter-group .filter-btn.active {
      font-size: 13px !important;
      padding: 8px 10px !important;
      background: transparent !important;
      color: #e6e1e3 !important;
      font-weight: 600 !important;
    }
    .filter-group .filter-btn.active::after {
      content: '' !important;
    }
    .filter-group.mobile-expanded {
      position: relative !important;
      top: auto !important;
      left: auto !important;
      z-index: auto;
      flex-direction: row !important;
      background: var(--md-sys-color-surface-container-highest) !important;
      border: none !important;
      border-radius: var(--md-sys-shape-corner-full) !important;
      padding: 0 !important;
      box-shadow: none;
      gap: 0 !important;
    }
    .filter-group.mobile-expanded .filter-btn {
      font-size: 13px !important;
      padding: 8px 10px !important;
      border-radius: var(--md-sys-shape-corner-full) !important;
      width: auto;
      justify-content: center;
    }
    .filter-group.mobile-expanded .filter-btn.active::after {
      content: '';
    }

    /* Category chips — M3 filter chips */
    .filter-chip {
      font-size: 13px !important;
      font-weight: 500 !important;
      padding: 8px 10px !important;
      white-space: nowrap;
      border-radius: var(--md-sys-shape-corner-full) !important;
      flex-shrink: 0;
      letter-spacing: 0.2px;
      background: var(--md-sys-color-surface-container-highest) !important;
      border: none !important;
      position: relative;
      overflow: hidden;
      z-index: 0;
    }
    .filter-chip.chip-animate.active-chip {
      background: var(--md-sys-color-surface-container-highest) !important;
    }
    .filter-chip.active-chip {
      background: #4a4fd8 !important;
      color: var(--md-sys-color-on-surface) !important;
      font-weight: 600 !important;
    }
    .filter-pill {
      font-size: 11px !important;
      font-weight: 600 !important;
      padding: 8px 10px !important;
      white-space: nowrap;
      border-radius: var(--md-sys-shape-corner-full) !important;
      flex-shrink: 0;
      letter-spacing: 0.2px;
      background: var(--md-sys-color-surface-container-highest) !important;
      border: none !important;
    }
    .topbar-btn {
      font-size: 11px !important;
      font-weight: 500 !important;
      padding: 8px 10px !important;
      white-space: nowrap;
      border-radius: var(--md-sys-shape-corner-full) !important;
      flex-shrink: 0;
      letter-spacing: 0.2px;
      background: var(--md-sys-color-surface-container-highest) !important;
      border: none !important;
    }
    .filter-left, .filter-right { flex-shrink: 0; }

    /* === CHAIN DROPDOWN — positioned outside filter-bar overflow === */
    #chain-dropdown-mobile {
      position: absolute;
      top: 100%;
      right: 10px;
      z-index: 200;
    }

    /* === TABLE — simple horizontal scroll, TOKEN column pinned === */
    .table-container {
      overflow-x: auto !important;
      -webkit-overflow-scrolling: touch;
      width: auto !important;
      margin: 8px 8px;
    }
    table { 
      width: auto !important;
      min-width: 950px !important;
      table-layout: auto !important;
    }
    thead th {
      font-size: 11px !important;
      padding: 5px 4px !important;
      white-space: nowrap;
      position: static !important;
      top: auto !important;
      box-shadow: none !important;
      z-index: auto !important;
      height: 36px !important;
      vertical-align: middle !important;
    }
    /* Pin TOKEN column */
    thead th:first-child,
    tbody td:first-child {
      position: sticky !important;
      left: 0 !important;
      z-index: 2 !important;
      background: #1c1b1d !important;
      /* Match the row's bg transition (line ~284) so the sticky column changes
         color at the same time as the scrolling columns, not instantly before them. */
      transition: background var(--md-sys-motion-duration-short2) linear !important;
    }
    tbody tr:hover td:first-child {
      background: #252527 !important;
    }
    /* Opaque match for the row's 0.12 active tint over #1c1b1d, so the sticky token
       column doesn't go a different shade than the rest of the row on tap. */
    tbody tr:active:not(:has(.token-dots:active)) td:first-child {
      background: #373638 !important;
    }
    thead th:first-child {
      background: #2b2930 !important;
      z-index: 3 !important;
    }
    /* Border on sticky token column edge — rows only */
    thead th:first-child::after { display: none !important; }
    tbody td:first-child::after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 1px;
      background: var(--border);
      pointer-events: none;
    }
    tbody td {
      font-size: 13px !important;
      padding: 8px 4px !important;
      border-right: none !important;
      box-shadow: inset -1px 0 0 rgba(255,255,255,0.08) !important;
    }
    thead th:first-child { padding-left: 14px !important; }
    /* Give non-TOKEN columns breathing room */
    thead th:not(:first-child),
    tbody td:not(:first-child) {
      padding-left: 10px !important;
      padding-right: 10px !important;
    }
    tbody td:last-child {
      box-shadow: none !important;
    }
    tbody td:first-child {
      box-shadow: none !important;
    }
    .boost-badge {
      display: none !important;
    }
    .boosted-row td {
      background: transparent !important;
    }
    .boosted-row td:first-child {
      background: #1c1b1d !important;
    }
    .token-cell { gap: 8px !important; margin-left: -3px !important; padding-left: 6px !important; }
    .row-num { margin-right: 0px !important; }
    .token-badges { margin-right: -2px !important; }
    .token-rank { font-size: 14px !important; font-weight: 400 !important; }
    .token-symbol { font-size: 14px !important; font-weight: 600 !important; }
    .token-pair { font-size: 14px !important; font-weight: 400 !important; }
    .token-name { font-size: 14px !important; font-weight: 400 !important; max-width: 100px !important; }
    .token-avatar-wrap { width: 24px !important; height: 24px !important; }
    .token-avatar-img { width: 24px !important; height: 24px !important; }
    .token-avatar-wrap.boosted-avatar::before { border-radius: 7px; }
    .token-avatar { width: 22px !important; height: 22px !important; font-size: 11px !important; }
    /* Shrink sticky TOKEN column width */
    thead th:first-child,
    tbody td:first-child {
      max-width: 220px !important;
      width: 220px !important;
    }
    tbody tr { height: auto !important; }

    /* === PAGINATION === */
    .pagination-bar {
      padding: 8px 10px !important;
    }

    /* === TOKEN MODAL — full screen === */
    .bubble-modal-overlay {
      background: rgba(0, 0, 0, 0.3) !important;
    }
    .bubble-modal {
      width: 100vw !important;
      max-width: 100vw !important;
      height: calc(100% - 28px) !important;
      max-height: calc(100% - 28px) !important;
      border-radius: 28px 28px 0 0 !important;
      bottom: 0 !important;
      left: 0 !important;
      right: 0 !important;
      top: auto !important;
      padding-bottom: env(safe-area-inset-bottom) !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch;
      display: flex !important;
      flex-direction: column !important;
      transition: transform 420ms var(--md-sys-motion-easing-emphasized-decelerate) !important;
      transform: translateY(100%) !important;
      will-change: transform !important;
    }
    .bubble-modal-overlay.open .bubble-modal {
      transform: translateY(0) !important;
      animation: none !important;
      transition: transform 420ms var(--md-sys-motion-easing-emphasized-decelerate) !important;
    }
    .bubble-modal-overlay.closing .bubble-modal {
      transform: translateY(100%) !important;
      animation: none !important;
      transition: transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-accelerate) !important;
    }
    .bubble-modal-overlay:not(.open):not(.closing) .bubble-modal {
      transform: translateY(100%) !important;
      animation: none !important;
      transition: none !important;
    }
    /* Lock background scroll when modal is open on iOS */
    body.modal-scroll-lock {
      position: fixed !important;
      width: 100% !important;
      overflow: hidden !important;
      touch-action: none !important;
    }

    /* Search modal — full bottom sheet like coin modal */
    .search-modal {
      width: 100vw !important;
      max-width: 100vw !important;
      height: calc(100% - 28px) !important;
      max-height: none !important;
      position: fixed !important;
      top: auto !important;
      bottom: 0 !important;
      left: 0 !important;
      right: 0 !important;
      border-radius: 28px 28px 0 0 !important;
      border: none !important;
      border-top: none !important;
      padding-bottom: env(safe-area-inset-bottom) !important;
      box-shadow: 0 -4px 30px rgba(0,0,0,0.3) !important;
      transition: transform 420ms var(--md-sys-motion-easing-emphasized-decelerate) !important;
      transform: translateY(100%) !important;
      will-change: transform !important;
    }
    .search-overlay.open .search-modal {
      transform: translateY(0) !important;
      transition: transform 420ms var(--md-sys-motion-easing-emphasized-decelerate) !important;
    }
    .search-overlay:not(.open) .search-modal {
      transform: translateY(100%) !important;
      transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    .bm-header { padding: 10px 12px !important; gap: 8px !important; }
    .bm-star { display: inline-flex !important; }
    .bm-sym { font-size: 14px !important; }
    .bm-fullname { display: none !important; }
    .bm-price-big { font-size: 16px !important; padding-right: 6px !important; }
    .bm-stats-bar { flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; border-top: none !important; border-bottom: none !important; }
    .bm-stats-bar::-webkit-scrollbar { display: none !important; }
    .bm-stat-item { min-width: 25% !important; flex: 0 0 25% !important; padding: 8px 16px !important; box-sizing: border-box !important; }
    .bm-stat-item + .bm-stat-item { border-left: none !important; }
    .bm-stat-label { font-size: 9px !important; }
    .bm-stat-value { font-size: 12px !important; }
    .bm-chart { height: auto !important; flex: 1 1 0 !important; min-height: 200px !important; flex-shrink: 1 !important; }
    #bmTvChartContainer { height: 100% !important; }
    .bm-tf { padding: 6px 0 !important; min-height: 36px !important; border-radius: 100px !important; }
    .bm-timeframes { margin: 10px 8px 0 !important; border-radius: 100px !important; padding: 0 !important; gap: 0 !important; overflow: hidden !important; }
    .bm-tf-label { font-size: 9px !important; }
    .bm-tf-val { font-size: 11px !important; }
    .bm-buysell { padding: 8px 12px 10px !important; }
    .bm-bs-val { font-size: 12px !important; }
    .bm-bs-label { font-size: 9px !important; }
    .bm-converter { padding: 5px 12px 7px !important; }
    .bm-conv-left, .bm-conv-right { gap: 2px !important; }
    /* Mobile: hide the quickset preset chips (type the amount) + the rate text,
       so the YOU RECEIVE label reads just "YOU RECEIVE". */
    .bm-conv-presets, .bm-conv-rate { display: none !important; }
    /* Left side: USD pill hugs the number (instead of the input stretching full width
       and shoving the pill to the far edge) — mirrors the ticker pill on the right. */
    .bm-conv-left-row { justify-content: flex-start !important; }
    .bm-conv-hero-input {
      flex: 0 0 auto !important;
      min-width: 1ch !important;
      max-width: 62% !important;
    }

    /* === BOOST MODAL === */
    .boost-modal {
      width: 95vw !important;
      max-width: 95vw !important;
      border-radius: 24px !important;
    }
    .boost-modal-header { padding: 20px 20px 0 !important; }
    .boost-modal-title { font-size: 18px !important; }
    .boost-tiers { gap: 6px !important; padding: 12px 16px !important; }
    .boost-tier-card { padding: 14px !important; border-radius: 14px !important; }
    .boost-tier-count { font-size: 18px !important; }
    .boost-tier-usd { font-size: 15px !important; }
    .boost-connect-btn { padding: 12px !important; font-size: 13px !important; border-radius: 14px !important; }

    /* === SEARCH MODAL — mobile adjustments === */
    .search-modal-cols { display: none !important; }
    .search-modal-item { padding: 10px 12px !important; }
    .search-modal-item-avatar { width: 34px !important; height: 34px !important; font-size: 12px !important; }
    .smi-sym { font-size: 13px !important; }
    .smi-fullname { font-size: 11px !important; }

    .search-modal-item .smi-top {
      display: flex !important;
      align-items: center !important;
      gap: 10px !important;
    }
    .smi-data-pair {
      display: flex !important;
      flex-direction: column !important;
      align-items: flex-end !important;
      gap: 1px !important;
      flex-shrink: 0 !important;
    }
    .smi-col-price {
      font-size: 12px !important;
      font-weight: 600 !important;
      color: var(--text-primary) !important;
      text-align: right !important;
    }
    .smi-col-mcap {
      font-size: 10px !important;
      font-weight: 400 !important;
      color: var(--text-secondary) !important;
      text-align: right !important;
    }
    .smi-col-pct {
      font-size: 12px !important;
      font-weight: 600 !important;
      text-align: right !important;
    }
    .smi-col-vol {
      font-size: 10px !important;
      font-weight: 400 !important;
      color: var(--text-secondary) !important;
      text-align: right !important;
    }
    .smi-token-info {
      flex: 1 !important;
      min-width: 0 !important;
    }
    .smi-name-block {
      min-width: 0 !important;
    }
    .smi-sym {
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
    }

    /* === PANELS === */
    .social-panel, .watchlist-panel, .alerts-panel {
      width: 100vw !important;
      right: 0 !important;
    }
    .settings-panel { width: 90vw !important; max-width: 320px !important; }
    .appbox { display: none !important; }
  }

  /* === VERY SMALL PHONES === */
  @media (max-width: 480px) {
    .top-header-bar { padding: 6px 8px 6px 12px !important; }
    .memescope-logo { font-size: 26px !important; }
    .memescope-icon { height: 15px !important; width: 15px !important; vertical-align: -1px !important; margin: 0 1px !important; }
    #bubbleHero {
      min-height: 59svh !important;
      max-height: 68svh !important;
      height: 64svh !important;
    }
    table { min-width: 550px; }
    .filter-btn, .tf-pill, .cat-pill, .filter-pill, .topbar-btn {
      font-size: 13px !important;
      padding: 6px 8px !important;
    }
    .bm-ca-link span { display: none; }
    .boost-tiers { grid-template-columns: 1fr !important; }
    .bm-key-stats { flex-wrap: wrap; gap: 8px; }
    .bm-key-stat { min-width: 40%; }
  }

  /* Disclaimer */

  /* ============ HOVER SIDEBAR (DESKTOP ONLY) ============ */
  .ms-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 64px;
    background: #211f21;
    border-right: none;
    z-index: 1000;
    transition: width var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-emphasized), border-radius var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-emphasized);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 0;
  }
  .ms-sidebar:hover { width: 275px; border-radius: 0 var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0; }
  .sidebar-lock-btn {
    background: #553f5d;
    border: none;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: background 0.2s;
  }
  .sidebar-lock-btn:hover { background: #654b6e; }
  @keyframes lockRotateBounce {
    0% { transform: rotate(0deg) scale(1); }
    40% { transform: rotate(360deg) scale(1.3); }
    60% { transform: rotate(360deg) scale(0.85); }
    80% { transform: rotate(360deg) scale(1.1); }
    100% { transform: rotate(360deg) scale(1); }
  }
  .sidebar-lock-btn.lock-animate {
    animation: lockRotateBounce 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .sidebar-lock-btn .lock-closed { display: none; }
  .sidebar-lock-btn .lock-open { display: block; }
  .ms-sidebar.sidebar-locked .sidebar-lock-btn .lock-closed { display: block; }
  .ms-sidebar.sidebar-locked .sidebar-lock-btn .lock-open { display: none; }

  .ms-sidebar-header {
    height: 85px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 20px 0 0 0;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
  }
  .ms-sidebar:hover .ms-sidebar-header {
    padding: 20px 0 0 0;
  }

  /* ENS sidebar button */
  .ens-sidebar-btn {
    display: grid;
    grid-template-columns: 64px 1fr;
    align-items: center;
    width: 100%;
    height: 100%;
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s;
  }
  .ens-sidebar-icon {
    justify-self: center;
    opacity: 0.7;
    transition: opacity 0.15s;
  }
  .ens-sidebar-btn:hover .ens-sidebar-icon { opacity: 1; }
  .ens-sidebar-label {
    display: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.15s;
  }
  .ms-sidebar:hover .ens-sidebar-label { display: block; opacity: 1; }
  .ens-sidebar-name {
    grid-column: 2;
    font-size: 11px;
    color: #4A9EFF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ENS claim modal */
  .ens-body {
    padding: 8px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .ens-preview {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    padding: 20px 16px;
    background: rgba(74,158,255,0.06);
    border-radius: 16px;
    letter-spacing: -0.3px;
    transition: opacity 0.15s;
    word-break: break-all;
  }
  .ens-input-wrap {
    display: flex;
    align-items: center;
    background: var(--md-sys-color-surface-container-highest);
    border-radius: 14px;
    padding: 0 16px;
    border: none;
    transition: background 0.15s;
  }
  .ens-input-wrap:hover {
    outline: 1px solid #4a4fd8;
    outline-offset: -1px;
  }
  .ens-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    padding: 14px 0;
    min-width: 0;
  }
  .ens-input::placeholder {
    color: var(--text-secondary);
    opacity: 0.5;
  }
  .ens-input-suffix {
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .ens-status {
    font-size: 13px;
    font-weight: 500;
    min-height: 18px;
    padding: 0 4px;
  }
  .ens-status-available { color: #22C55E; }
  .ens-status-taken { color: #EF4444; }
  .ens-status-error { color: #EF4444; }
  .ens-status-checking { color: var(--text-secondary); }
  .ens-register-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 14px;
    background: #4a4fd8;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
  }
  .ens-register-btn:hover:not(:disabled) { background: #364a8f; }
  .ens-register-btn:disabled { opacity: 1; cursor: not-allowed; background: #4a4fd8; }
  .ens-register-btn.ens-registering { background: #4a4fd8; opacity: 1; }
  .ens-register-btn.ens-success { background: #22C55E; opacity: 1; }
  .ens-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    padding: 0 4px;
  }
  .ens-info svg { flex-shrink: 0; opacity: 0.5; }
  .ens-tagline {
    font-size: 12px;
    color: rgba(167,180,198,0.5);
    text-align: center;
    padding-top: 4px;
  }
  .ens-description {
    font-size: 13px;
    color: rgba(167,180,198,0.65);
    text-align: center;
    margin: 0 0 16px 0;
    line-height: 1.5;
  }
  .ens-benefits {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  .ens-benefit {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: rgba(167,180,198,0.55);
  }
  .ens-benefit span {
    font-size: 15px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
  }

  /* ENS search result row (clickable) */
  .ens-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--md-sys-color-surface-container-highest);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s;
  }
  .ens-result:hover { background: #3a383a; }
  .ens-result-name {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    animation: ens-cursor-blink 0.6s step-end infinite;
  }
  @keyframes ens-cursor-blink {
    0%, 100% { border-color: #22C55E; }
    50% { border-color: transparent; }
  }
  .ens-result-badge {
    font-size: 12px;
    font-weight: 600;
    color: #22C55E;
    background: rgba(34,197,94,0.12);
    padding: 4px 10px;
    border-radius: 20px;
  }

  /* ENS register modal (step 2) */
  .ens-back-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    transition: color 0.2s;
  }
  .ens-back-btn:hover { color: var(--text-primary); }
  .ens-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
  }
  .ens-price-row:last-of-type { border-bottom: none; }
  .ens-price-label { color: var(--text-secondary); }
  .ens-price-value { color: var(--text-primary); font-weight: 600; }
  .ens-reg-status {
    font-size: 13px;
    text-align: center;
    min-height: 20px;
    padding: 4px 0;
  }

  .ms-spacer { flex: 0; }

  /* NEW CLEAN NAV — uses CSS grid for predictable layout */
  .ms-nav { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  .ms-nav-chains { flex: 1; overflow: hidden; min-height: 0; scrollbar-width: none; -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 32px), transparent); mask-image: linear-gradient(to bottom, black calc(100% - 32px), transparent); }
  .ms-nav-chains::-webkit-scrollbar { display: none; }
  .ms-sidebar:hover .ms-nav-chains { overflow-y: auto; }

  .ms-nav-link {
    display: grid;
    grid-template-columns: 64px 1fr;
    align-items: center;
    height: 40px;
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s;
    overflow: visible;
    position: relative;
    background: transparent;
  }
  .ms-nav-link > svg {
    grid-column: 1;
    justify-self: center;
    color: inherit;
    width: 22px;
    height: 22px;
  }
  #navMultichart > svg {
    width: 24px;
    height: 24px;
  }
  .ms-nav-icon-wrap {
    grid-column: 1;
    justify-self: center;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ms-nav-icon-wrap > svg:not(.nav-wl-outline):not(.nav-wl-filled) {
    width: 22px;
    height: 22px;
  }
  .ms-nav-icon-wrap > .nav-wl-filled { display: none !important; }
  .has-items .ms-nav-icon-wrap > .nav-wl-filled { display: block !important; }
  .has-items .ms-nav-icon-wrap > .nav-wl-outline { display: none !important; }
  .ms-watchlist-nav.active .ms-nav-icon-wrap > .nav-wl-filled { display: block !important; }
  .ms-watchlist-nav.active .ms-nav-icon-wrap > .nav-wl-outline { display: none !important; }
  .watchlist-badge {
    display: none;
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    background: #EF4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    border-radius: 9px;
    padding: 0 4px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    border: 2px solid #211f21;
  }
  .watchlist-badge.visible {
    display: flex;
  }
  .ms-nav-chain-icon {
    grid-column: 1;
    justify-self: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
  }
  .ms-nav-leaf-icon {
    border-radius: 0;
    object-fit: contain;
    width: 25px;
    height: 25px;
  }
  .ms-nav > .ms-nav-sep:first-child {
    margin-top: 17px;
  }

  .ms-nav-text {
    grid-column: 2;
    font-size: 13px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard) 0.05s;
  }
  .ms-sidebar:hover .ms-nav-text { opacity: 1; }
  .ms-nav-link:hover { background: transparent; color: var(--text-primary); }
  .ms-nav-link.active:not([onclick*="toggleChain"]) { background: transparent; color: var(--text-primary); }
  .ms-nav-link[onclick*="toggleChain"].active { background: transparent; color: var(--text-primary); }

  /* Collapsed state: pill indicator behind icon only */
  .ms-nav-link > svg,
  .ms-nav-chain-icon {
    position: relative;
    z-index: 1;
  }
  .ms-nav-text { position: relative; z-index: 1; }
  .ms-nav-link::before {
    content: '';
    position: absolute;
    width: 48px;
    height: 32px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: var(--md-sys-shape-corner-full);
    background: transparent;
    transition: background 150ms ease, width 200ms ease, height 200ms ease;
    z-index: 0;
  }
  .ms-nav-link:hover::before {
    background: #2e2c2e;
  }
  .ms-nav-link.active::before {
    background: #45455a;
  }
  .ms-nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 32px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: var(--md-sys-shape-corner-full);
    background: #45455a;
    pointer-events: none;
  }
  @keyframes pillGrow {
    from { width: 0; }
    to { width: 48px; }
  }
  @keyframes pillGrowExpanded {
    from { width: 0; }
    to { width: 100%; }
  }
  .ms-nav-link.pill-animate::before {
    background: #2e2c2e !important;
  }
  .ms-nav-link.pill-animate::after {
    animation: pillGrow 0.35s cubic-bezier(0.2, 0, 0, 1) forwards;
  }
  .ms-sidebar:hover .ms-nav-link::after {
    height: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .ms-sidebar:hover .ms-nav-link.pill-animate::after {
    animation: pillGrowExpanded 0.35s cubic-bezier(0.2, 0, 0, 1) forwards;
  }

  /* Expanded state: pill stretches full width */
  .ms-sidebar:hover .ms-nav { padding: 0 8px; }
  .ms-sidebar:hover .ms-nav-link {
    border-radius: var(--md-sys-shape-corner-full);
    grid-template-columns: 48px 1fr;
  }
  .ms-sidebar:hover .ms-nav-link::before {
    width: 100%;
    height: 100%;
  }
  .ms-sidebar:hover .ms-nav-link:hover::before {
    background: #2e2c2e;
  }
  .ms-sidebar:hover .ms-nav-link.active::before {
    background: #45455a;
  }
  .ms-watchlist-nav > svg { width: 22px; height: 22px; }
  /* Sidebar watchlist bookmark outline/filled toggle */
  .nav-wl-filled { display: none !important; }
  .has-items .nav-wl-filled { display: block !important; }
  .has-items .nav-wl-outline { display: none !important; }

  .ms-nav-sep {
    height: 1px;
    background: rgba(220,220,220,0.08);
    margin: 4px 8px;
  }

  /* Hide header logo when sidebar is hovered */
  .top-header-bar .memescope-logo {
    transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  }
  body.ms-sb-open .top-header-bar .memescope-logo {
    opacity: 0;
  }

  /* WATCHLIST MODAL */
  .wl-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 3000;
  }
  .wl-modal-overlay.open { display: block; animation: m3OverlayIn var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard); }
  .wl-modal-overlay.closing { display: block; animation: m3OverlayOut var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-accelerate) forwards; pointer-events: none; }
  .wl-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 620px;
    max-height: 70vh;
    background: #211f21;
    border: none;
    border-radius: 28px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 3001;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    animation: m3ModalInCentered var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized-decelerate);
  }
  .wl-modal-overlay.closing .wl-modal { animation: m3ModalOutCentered var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-accelerate) forwards; }
  .wl-modal-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 24px 24px 12px;
    border-bottom: none;
  }
  .wl-modal-header svg { flex-shrink: 0; color: var(--text-secondary); width: 20px; height: 20px; }
  .wl-modal-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.2px;
  }
  .wl-modal-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--md-sys-color-surface-container-highest);
    padding: 4px 10px;
    border-radius: var(--md-sys-shape-corner-full);
  }
  .wl-share-btn {
    margin-left: auto;
    width: 32px; height: 32px;
    background: var(--md-sys-color-surface-container-highest);
    border: none; border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 150ms ease, color 150ms ease;
    position: relative;
  }
  .wl-share-btn:hover { background: #3a383a; color: var(--text-primary); }
  .wl-share-menu {
    display: none;
    position: fixed;
    background: #2b2930;
    border-radius: 12px;
    padding: 6px 0;
    min-width: 170px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    z-index: 99999;
  }
  .wl-share-menu.open { display: block; }
  .wl-share-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    color: #e6e1e3;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 150ms ease;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
  }
  .wl-share-option:hover { background: #37353e; }
  .wl-share-option svg { flex-shrink: 0; }
  .wl-modal-close {
    width: 32px; height: 32px;
    background: var(--md-sys-color-surface-container-highest);
    border: none; border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 150ms ease, color 150ms ease;
  }
  .wl-modal-close:hover { background: #3a383a; color: var(--text-primary); }
  .wl-modal-cols {
    display: grid;
    grid-template-columns: 1fr 80px 60px 60px 60px 60px;
    padding: 8px 24px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-bottom: none;
  }
  .wl-modal-cols span:not(:first-child) { text-align: right; }
  .wl-modal-body {
    overflow-y: auto;
    flex: 1;
    padding: 0 12px 12px;
  }
  .wl-modal-row {
    display: grid;
    grid-template-columns: 1fr 80px 60px 60px 60px 60px;
    align-items: center;
    padding: 10px 12px;
    cursor: pointer;
    border-radius: 14px;
    transition: background 150ms ease;
  }
  .wl-modal-row:hover { background: rgba(255,255,255,0.08); }
  .wl-modal-row:active { background: rgba(255,255,255,0.12); }
  .wl-modal-row + .wl-modal-row { border-top: none; }
  .wl-modal-token {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }
  .wl-modal-token-img {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
  }
  .wl-modal-token-sym {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
  }
  .wl-modal-token-star {
    color: #fff;
    font-size: 12px;
    margin-left: 2px;
    cursor: pointer;
  }
  .wl-modal-token-delete {
    color: rgba(255,255,255,0.35);
    margin-left: 3px;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
    display: inline-flex;
    align-items: center;
  }
  .wl-modal-token-delete:hover {
    color: #ff4d4d;
    transform: scale(1.2);
  }
  .wl-modal-val {
    text-align: right;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
  }
  .wl-modal-val.up { color: var(--green); }
  .wl-modal-val.down { color: var(--red); }
  .wl-modal-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 56px 24px;
    color: var(--text-secondary);
    font-size: 13px;
    gap: 6px;
  }
  .wl-modal-empty svg { opacity: 0.32; margin-bottom: 8px; }
  .wl-modal-empty .wl-empty-title {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255,255,255,0.82);
  }
  .wl-modal-empty .wl-empty-sub {
    font-size: 12.5px;
    color: rgba(255,255,255,0.45);
  }

  .ms-utility {
    border-top: 1px solid rgba(220,220,220,0.08);
    padding: 12px 0;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ms-sidebar:hover .ms-utility {
    padding: 12px 16px;
    justify-content: space-between;
  }
  .ms-utility-collapsed { display: flex; justify-content: center; }
  .ms-utility-collapsed svg { animation: gearSpin 30s linear infinite; }
  @keyframes gearSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
  .ms-utility-expanded {
    display: none;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    opacity: 0;
    transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard) 0.05s;
  }
  .ms-sidebar:hover .ms-utility-collapsed { display: none; }
  .ms-sidebar:hover .ms-utility-expanded { display: flex; opacity: 1; }

  /* Sound on/off toggle — sits in the expanded utility, right of the flags */
  .ms-sound-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: #e6e1e3;
    opacity: 1;
    flex-shrink: 0;
    transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  }
  .ms-sound-toggle:hover { opacity: 0.8; }
  .ms-sound-toggle svg { width: 24px; height: 24px; display: block; }
  .ms-sound-toggle .sound-off { display: none; }
  .ms-sound-toggle.muted .sound-on { display: none; }
  .ms-sound-toggle.muted .sound-off { display: block; }

  .ms-sidebar-version {
    font-size: 11px;
    color: rgba(167,180,198,0.3);
    text-align: center;
    padding: 8px 0 12px;
    font-family: 'Inter', sans-serif;
    opacity: 0;
    transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
    display: flex;
    justify-content: center;
    gap: 8px;
  }
  .ms-sidebar:hover .ms-sidebar-version { opacity: 1; }

  /* Locked sidebar: suppress all hover expansion */
  .ms-sidebar.sidebar-locked { transition: none; }
  .ms-sidebar.sidebar-locked:hover { width: 64px; border-radius: 0; }
  .ms-sidebar.sidebar-locked:hover .ms-nav-text { opacity: 0; }
  .ms-sidebar.sidebar-locked:hover .ens-sidebar-label { display: none; opacity: 0; }
  .ms-sidebar.sidebar-locked:hover .ms-nav { padding: 0; }
  .ms-sidebar.sidebar-locked:hover .ms-nav-link { grid-template-columns: 64px 1fr; }
  .ms-sidebar.sidebar-locked:hover .ms-nav-link::before { width: 48px; height: 32px; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  .ms-sidebar.sidebar-locked:hover .ms-nav-link:hover::before { width: 48px; }
  .ms-sidebar.sidebar-locked:hover .ms-nav-link.active::before { width: 48px; }
  .ms-sidebar.sidebar-locked:hover .ms-nav-link::after { height: 32px; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  .ms-sidebar.sidebar-locked:hover .ms-nav-link.pill-animate::after { animation: pillGrow 0.35s cubic-bezier(0.2, 0, 0, 1) forwards; }
  .ms-sidebar.sidebar-locked:hover .ms-utility { padding: 12px 0; justify-content: center; }
  .ms-sidebar.sidebar-locked:hover .ms-utility-collapsed { display: flex; }
  .ms-sidebar.sidebar-locked:hover .ms-utility-expanded { display: none; }
  .ms-sidebar.sidebar-locked:hover .ms-sidebar-version { opacity: 0; }
  .ms-sidebar.sidebar-locked:hover .ms-sidebar-header { padding: 20px 0 0 0; }

  .ms-flags { display: flex; gap: 8px; }
  .ms-flag {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    padding: 1px;
    box-sizing: border-box;
    opacity: 0.65;
    transition: opacity 0.15s, border-color 0.15s;
  }
  .ms-flag:hover { opacity: 1; border-color: rgba(74,158,255,0.5); }
  .ms-flag.active { opacity: 1; border-color: #4A9EFF; }
  .ms-flag img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }

  .ms-theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  .ms-brightness-slider {
    width: 60px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(220,220,220,0.12);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    margin-left: 6px;
    flex-shrink: 0;
  }
  .ms-brightness-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s;
  }
  .ms-brightness-slider::-webkit-slider-thumb:hover {
    background: var(--text-primary);
  }
  .ms-brightness-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--text-secondary);
    cursor: pointer;
    border: none;
  }

  .main { margin-left: 64px; }

  /* Mobile menu button (shown only on mobile) */
  .ms-mobile-btn {
    display: none;
    width: 32px;
    height: 32px;
    background: rgba(220,220,220,0.06);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-secondary);
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-left: 6px;
    flex-shrink: 0;
  }
  .ms-mobile-btn:hover {
    background: rgba(74,158,255,0.12);
    border-color: rgba(74,158,255,0.3);
    color: #4A9EFF;
  }

  .top-header-right-group {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  /* Connect Wallet button in top header (desktop only) — matches search bar style */
  .ms-header-connect {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    background: var(--md-sys-color-surface-container-highest);
    border: none;
    border-radius: var(--md-sys-shape-corner-full);
    cursor: pointer;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 500;
    flex-shrink: 0;
    transition: all 0.25s cubic-bezier(0.16,1,0.3,1);
    -webkit-tap-highlight-color: transparent;
  }
  .ms-header-connect svg { flex-shrink: 0; opacity: 0.7; color: var(--text-secondary); }
  .ms-header-connect:hover {
    background: #37353e;
  }
  .ms-header-connect:hover svg { color: var(--phantom-purple); opacity: 1; }
  .ms-header-connect:active { background-image: linear-gradient(rgba(255,255,255,0.12), rgba(255,255,255,0.12)); }

  .ms-header-ens-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--md-sys-color-surface-container-highest);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--md-sys-motion-duration-short2) linear;
    -webkit-tap-highlight-color: transparent;
  }
  .ms-header-ens-btn img { height: 24px; width: 24px; }
  .ms-header-ens-btn:hover { background: #37353e; }
  .ms-header-ens-btn:active { background-image: linear-gradient(rgba(255,255,255,0.12), rgba(255,255,255,0.12)); }

  .ms-header-connect-wrap {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    gap: 2px;
    flex-shrink: 0;
  }
  .ms-header-connect-split {
    display: inline-flex;
    align-items: stretch;
    border-radius: 19px 4px 4px 19px;
    overflow: hidden;
    flex-shrink: 0;
    cursor: pointer;
    background: var(--md-sys-color-surface-container-highest);
    transition: background 0.25s ease;
    border: none;
    outline: none;
  }
  .ms-header-connect-split:hover {
    background: #37353e;
  }
  .ms-header-connect-split:active {
    background-image: linear-gradient(rgba(255,255,255,0.12), rgba(255,255,255,0.12));
  }
  .connect-split-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 6px 10px 14px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    transition: color 0.25s ease;
  }
  .ms-header-connect-split:hover .connect-split-icon {
    color: var(--text-primary);
  }
  .connect-split-icon svg { flex-shrink: 0; }
  .connect-split-label {
    display: flex;
    align-items: center;
    padding: 10px 14px 10px 0;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
  }
  .connect-split-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    padding: 0;
    background: var(--md-sys-color-surface-container-highest);
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    border-radius: 4px 19px 19px 4px;
    transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
  }
  .connect-split-chevron:hover {
    background: #3a383a;
    color: var(--text-primary);
  }
  .connect-split-chevron:active {
    background-image: linear-gradient(rgba(255,255,255,0.12), rgba(255,255,255,0.12));
  }
  .connect-split-chevron.open svg {
    transform: rotate(180deg);
  }
  .connect-split-chevron svg {
    transition: transform 0.2s ease;
    flex-shrink: 0;
  }

  .wallet-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 200px;
    background: var(--md-sys-color-surface-container-high, #2a282a);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.2);
    display: none;
    flex-direction: column;
    z-index: 1500;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
  }
  .wallet-dropdown.open {
    display: flex;
    opacity: 1;
    transform: translateY(0);
  }
  .wallet-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    border-radius: 8px;
    transition: background 0.15s ease;
    white-space: nowrap;
  }
  .wallet-dropdown-item:hover {
    background: rgba(255,255,255,0.06);
  }
  .wallet-dropdown-item svg {
    color: var(--text-secondary);
    flex-shrink: 0;
  }
  .wallet-dropdown-item:hover svg {
    color: var(--text-primary);
  }
  .wallet-dropdown-danger {
    color: #ff6b6b;
  }
  .wallet-dropdown-danger svg {
    color: #ff6b6b;
  }
  .wallet-dropdown-danger:hover {
    background: rgba(255, 107, 107, 0.08);
  }
  .wallet-dropdown-danger:hover svg {
    color: #ff6b6b;
  }
  .wallet-dropdown-divider {
    height: 1px;
    background: rgba(255,255,255,0.08);
    margin: 4px 8px;
  }
  .wallet-dropdown-label {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-secondary);
    padding: 8px 12px 4px;
  }
  .wallet-dropdown-empty {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--text-secondary);
    padding: 12px;
    text-align: center;
  }
  .wallet-dropdown-badge {
    margin-left: auto;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #4ade80;
    background: rgba(74, 222, 128, 0.12);
    padding: 2px 6px;
    border-radius: 4px;
  }

  .ms-mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized), visibility 0s linear 0.3s;
  }
  .ms-mobile-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized), visibility 0s linear 0s;
  }

  .ms-mobile-menu {
    display: none;
    visibility: hidden;
  }
  .ms-mobile-menu.open {
    display: none;
    visibility: hidden;
  }

  .ms-mobile-header {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    border-bottom: none;
    flex-shrink: 0;
  }
  .ms-mobile-brand { display: flex; align-items: center; gap: 10px; }
  .ms-mobile-close {
    width: 32px;
    height: 32px;
    background: #2b2930;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  }
  .ms-mobile-close svg { opacity: 0.8; }
  .ms-mobile-close:active { background: rgba(255,255,255,0.12); }

  .ms-mobile-items {
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
  }
  .ms-mobile-spacer { flex: 1; }
  .mob-menu-actions {
    display: flex;
    justify-content: space-evenly;
    padding: 16px 8px 8px;
  }
  .mob-menu-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-menu-circle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    color: #e6e1e3;
    transition: background 0.2s ease;
    position: relative;
  }
  .mob-menu-circle-icon > .watchlist-badge { top: 2px; right: 2px; }
  .mob-menu-circle:active .mob-menu-circle-icon {
    background: rgba(255,255,255,0.16);
  }
  .mob-menu-circle-icon img,
  .mob-menu-circle-icon svg {
    width: 26px !important;
    height: 26px !important;
  }
  .mob-menu-circle-icon img {
    border-radius: 0;
  }
  .mob-menu-circle-label {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: rgba(255,255,255,0.7);
    white-space: nowrap;
  }
  .mob-menu-chains-section {
    background: #141314;
    border-radius: 28px;
    margin: 10px 2px 4px;
    padding: 16px 4px 12px;
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 6px 20px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
  }
  .mob-menu-section-title {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 0 12px 8px;
    text-align: center;
  }
  .mob-menu-chains-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 0;
    padding: 4px 0;
    justify-items: center;
  }
  .mob-menu-chain {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-menu-chain-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    transition: background 0.2s ease;
  }
  .mob-menu-chain:active .mob-menu-chain-icon {
    background: rgba(255,255,255,0.14);
  }
  .mob-menu-chain.active .mob-menu-chain-icon {
    background: rgba(255,255,255,0.14);
    box-shadow: 0 0 0 2px rgba(255,255,255,0.2);
  }
  .mob-menu-chain.active .mob-menu-circle-label {
    color: #fff;
    font-weight: 600;
  }
  .mob-menu-chain-icon img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
  }
  .ms-mobile-divider {
    height: 0;
    background: none;
    margin: 4px 0;
  }
  .ms-mobile-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    color: #e6e1e3;
    font-size: 14px;
    font-weight: 450;
    cursor: pointer;
    text-decoration: none;
    border-radius: 100px;
    transition: background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  }
  .ms-mobile-item:hover, .ms-mobile-item:active { background: #37353e; }
  .ms-mobile-item.active {
    background: #44404c;
    font-weight: 600;
  }
  .ms-mobile-chain-icon {
    width: 23px;
    height: 23px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
  }

  .ms-mobile-utility {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
  }
  .ms-mobile-version {
    font-size: 11px;
    color: rgba(255,255,255,0.2);
    text-align: center;
    padding: 0 0 14px;
    font-family: 'Inter', sans-serif;
  }

  @media (max-width: 1024px) {
    .ms-sidebar { display: none; }
    .main { margin-left: 0; }
    .ms-mobile-btn { display: inline-flex; }
    .ms-header-connect { display: none !important; }
  }


  @keyframes scopePulse {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
  }
  @keyframes scopeSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  /* ═══ TABLE CUSTOMIZER MODAL ═══ */
  .tc-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 3000;
    overflow: hidden;
  }
  .tc-overlay.open { display: flex; align-items: center; justify-content: center; animation: m3OverlayIn var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard); }
  .tc-overlay.closing { display: flex; align-items: center; justify-content: center; animation: m3OverlayOut var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-accelerate) forwards; pointer-events: none; }
  .tc-modal {
    width: 380px;
    max-width: 90vw;
    background: #211f21;
    border-radius: 28px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 3001;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.25);
    animation: m3ModalIn var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized-decelerate);
  }
  .tc-overlay.closing .tc-modal { animation: m3ModalOut var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-accelerate) forwards; }
  .tc-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 20px 0;
  }
  .tc-header > svg { flex-shrink: 0; color: var(--text-secondary); width: 20px; height: 20px; }
  .tc-title {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: 0;
    flex: 1;
  }
  .tc-close {
    width: 32px; height: 32px;
    background: #2b2930;
    border: none; border-radius: 50%;
    color: #e3e3e3;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 150ms ease, color 150ms ease;
  }
  .tc-close:hover { background: #3a383a; color: var(--text-primary); }
  .tc-desc {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: var(--text-secondary);
    padding: 6px 20px 0;
    margin: 0;
    line-height: 1.4;
  }
  .tc-list {
    padding: 12px 8px 4px;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .tc-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 16px;
    background: transparent;
    cursor: grab;
    transition: background 150ms ease;
    user-select: none;
    -webkit-user-select: none;
  }
  .tc-row:hover { background: rgba(255,255,255,0.06); }
  .tc-row.tc-dragging {
    position: fixed;
    z-index: 9999;
    background: #2a282d;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05);
    border-radius: 16px;
    pointer-events: none;
    cursor: grabbing;
    width: var(--tc-row-width);
    transition: none;
  }
  .tc-list.is-dragging .tc-row:not(.tc-dragging) {
    transition: transform 200ms cubic-bezier(0.2, 0, 0, 1);
  }
  .tc-placeholder-gap {
    background: rgba(255,255,255,0.02);
    border: 1.5px dashed rgba(255,255,255,0.08);
    border-radius: 16px;
    cursor: default;
    pointer-events: none;
    transition: none;
  }
  .tc-drag-handle {
    color: rgba(255,255,255,0.25);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    transition: color 150ms ease;
  }
  .tc-row:hover .tc-drag-handle { color: rgba(255,255,255,0.5); }
  .tc-num { display: none; }
  .tc-col-name {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--text-primary);
    flex: 1;
    letter-spacing: 0.01em;
  }
  .tc-row.disabled .tc-col-name { color: var(--text-secondary); opacity: 0.45; }
  .tc-toggle {
    position: relative;
    width: 40px;
    height: 24px;
    flex-shrink: 0;
  }
  .tc-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
  }
  .tc-toggle-track {
    position: absolute;
    inset: 0;
    background: transparent;
    border: 2px solid rgba(255,255,255,0.25);
    border-radius: 12px;
    cursor: pointer;
    transition: background 300ms cubic-bezier(0.2, 0, 0, 1), border-color 300ms cubic-bezier(0.2, 0, 0, 1);
  }
  .tc-toggle-track::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 4px;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    background: rgba(255,255,255,0.35);
    border-radius: 50%;
    transition: all 300ms cubic-bezier(0.2, 0, 0, 1);
  }
  .tc-toggle input:checked + .tc-toggle-track {
    background: #4a4fd8;
    border-color: #4a4fd8;
  }
  .tc-toggle input:checked + .tc-toggle-track::after {
    left: 2px;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    transform: translateX(18px);
    background: #fff;
  }
  .tc-sep {
    height: 0;
    margin: 2px 12px;
  }
  .tc-footer {
    display: flex;
    gap: 8px;
    padding: 8px 20px 20px;
  }
  .tc-btn {
    flex: 1;
    padding: 10px 16px;
    border: none;
    border-radius: var(--md-sys-shape-corner-full);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 150ms ease, box-shadow 150ms ease;
    letter-spacing: 0.02em;
  }
  .tc-btn:active { background-image: linear-gradient(rgba(255,255,255,0.12), rgba(255,255,255,0.12)); }
  .tc-btn-reset {
    background: rgba(255,255,255,0.06);
    color: var(--text-secondary);
  }
  .tc-btn-reset:hover { background: rgba(255,255,255,0.1); }
  .tc-btn-apply {
    background: #4a4fd8;
    color: #fff;
  }
  .tc-btn-apply:hover { background: #5a5fe8; }
  .tc-locked {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: rgba(255,255,255,0.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .embed-popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 3000;
  }
  .embed-popup-overlay.open { display: flex; align-items: center; justify-content: center; animation: m3OverlayIn var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard); }
  .embed-popup-overlay.closing { display: flex; align-items: center; justify-content: center; animation: m3OverlayOut var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-accelerate) forwards; pointer-events: none; }
  .embed-popup {
    background: #26262E;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    width: 520px;
    max-width: 90vw;
    box-shadow: 0 32px 80px rgba(0,0,0,0.6);
    animation: m3ModalIn var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized-decelerate);
  }
  .embed-popup-overlay.closing .embed-popup { animation: m3ModalOut var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-accelerate) forwards; }
  .embed-popup h3 {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 6px;
  }
  .embed-popup p {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0 0 16px;
  }
  .embed-popup label {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 6px;
  }
  .embed-popup textarea {
    width: 100%;
    height: 80px;
    background: rgba(145, 180, 220, 0.052);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    color: var(--text-primary);
    font-family: monospace;
    font-size: 12px;
    padding: 10px;
    resize: none;
    margin-bottom: 8px;
  }
  .embed-popup textarea:focus { outline: none; border-color: rgba(74, 158, 255,0.5); }
  .embed-popup-link {
    width: 100%;
    background: rgba(145, 180, 220, 0.052);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    color: var(--text-primary);
    font-family: monospace;
    font-size: 12px;
    padding: 10px;
    margin-bottom: 16px;
  }
  .embed-popup-link:focus { outline: none; border-color: rgba(74, 158, 255,0.5); }
  .embed-popup-btns {
    display: flex;
    gap: 8px;
  }
  .embed-popup-btn {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  }
  .embed-popup-btn.copy {
    background: #4A9EFF;
    color: var(--text-primary);
  }
  .embed-popup-btn.copy:hover { background: #e04400; }
  .embed-popup-btn.close {
    background: rgba(145, 180, 220, 0.078);
    color: var(--text-secondary);
  }
  .embed-popup-btn.close:hover { background: var(--bg-hover); }

  /* ═══════════════════════════════════════ */
  /* TOKEN PAGE STYLES */
  /* ═══════════════════════════════════════ */
  .token-page {
    position: fixed;
    top: 0;
    left: 64px;
    right: 0;
    bottom: 0;
    z-index: 900;
    background: var(--bg-primary);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: auto;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  @keyframes tpSlideIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

  .tp-subbar {
    display:flex; align-items:center; gap:10px;
    padding:0 16px; height:44px;
    background:var(--bg-secondary); border-bottom:1px solid var(--border);
  }
  .tp-back-btn {
    display:flex; align-items:center; gap:5px;
    background:none; border:none; color:var(--text-secondary);
    font:500 13px/1 'Inter',sans-serif; cursor:pointer;
    padding:6px 10px; border-radius:6px; transition:all 0.12s;
  }
  .tp-back-btn:hover { background:var(--bg-hover); color:var(--text-primary); }
  .tp-subbar-token { display:flex; align-items:center; gap:7px; }
  .tp-subbar-avatar {
    width:26px; height:26px; border-radius:6px; overflow:hidden;
    background:var(--bg-hover); display:flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:700;
  }
  .tp-subbar-avatar img { width:100%; height:100%; object-fit:cover; }
  .tp-subbar-sym { font-size:14px; font-weight:700; }
  .tp-subbar-name { font-size:12px; color:var(--text-secondary); }
  .tp-subbar-chain { font-size:10px; color:var(--text-secondary); font-weight:500; background:var(--bg-hover); padding:2px 7px; border-radius:4px; }
  .tp-subbar-age { font-size:10px; color:var(--text-secondary); font-weight:500; background:var(--bg-hover); padding:2px 7px; border-radius:4px; }
  .tp-subbar-price { font:700 14px/1 'JetBrains Mono',monospace; margin-left:8px; }
  .tp-subbar-change { font-size:12px; font-weight:600; padding:2px 8px; border-radius:4px; }
  .tp-subbar-spacer { flex:1; }
  .tp-subbar-actions { display:flex; align-items:center; gap:5px; }
  .tp-act-btn {
    display:flex; align-items:center; gap:4px;
    background:var(--bg-hover); border:1px solid var(--border);
    color:var(--text-secondary); font:500 12px/1 'Inter',sans-serif;
    padding:6px 10px; border-radius:6px; cursor:pointer; transition:all 0.12s;
  }
  .tp-act-btn:hover { border-color:var(--phantom-purple); color:var(--phantom-purple); }
  .tp-boost-btn { background:linear-gradient(135deg,#FF8C00,#FFB800); border:none; color:#000; font-weight:700; }
  .tp-boost-btn:hover { filter:brightness(1.1); color:#000; }

  .tp-body {
    display:flex; flex:1;
    overflow:hidden;
    overscroll-behavior: none;
  }
  .tp-center { flex:1; display:flex; flex-direction:column; min-width:0; }
  .tp-chart-area { flex:none; height:60vh; min-height:200px; }
  .tp-bottom {
    flex:1; min-height:140px;
    border-top:1px solid var(--border);
    display:flex; flex-direction:column;
    background:var(--bg-primary);
    overflow:hidden;
  }
  .tp-bottom-handle {
    height:6px; cursor:ns-resize;
    display:flex; align-items:center; justify-content:center;
    background:var(--bg-secondary);
    flex-shrink:0;
    transition: background 0.15s;
  }
  .tp-bottom-handle:hover { background:var(--bg-hover); }
  .tp-bottom-handle::after { content:''; width:24px; height:1.5px; border-radius:1px; background:rgba(255,255,255,0.15); display:block; }
  .tp-bottom-handle:hover::after { background:rgba(255,255,255,0.8); }
  .tp-bottom-tabs {
    display:flex; gap:0; padding:0 12px;
    border-bottom:1px solid var(--border);
    background:var(--bg-secondary);
    flex-shrink:0;
  }
  .tp-tab {
    padding:10px 16px; font-size:13px; font-weight:600;
    color:var(--text-secondary); cursor:pointer;
    border-bottom:2px solid transparent; transition:all 0.12s;
    font-family:'Inter',sans-serif; white-space:nowrap;
  }
  .tp-tab:hover { color:var(--text-secondary); }
  .tp-tab.active { color:var(--phantom-purple); border-bottom-color:var(--phantom-purple); }
  .tp-tab-count { font-size:10px; background:var(--bg-hover); padding:1px 6px; border-radius:8px; margin-left:4px; font-weight:600; }
  .tp-tab-body { flex:1; overflow:hidden; min-height:0; }
  .tp-tab-pane { height:100%; display:flex; flex-direction:column; overflow:hidden; }
  .tp-tab-pane[style*="display:none"] { display:none !important; }
  .tp-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; gap:8px; color:var(--text-secondary); font-size:13px; }
  .tp-placeholder svg { opacity:0.3; }
  .tp-txn-header-row { flex-shrink:0; overflow:hidden; padding-right:6px; }
  .tp-txn-header-row .tp-txn-tbl { margin-bottom:0; }
  .tp-txn-scroll { flex:1; overflow-y:auto; min-height:0; }
  .tp-txn-tbl { width:100%; border-collapse:collapse; min-width:700px; table-layout:fixed; }
  .tp-txn-tbl th {
    background:#222229;
    padding:8px 10px; font-size:12px; font-weight:600;
    color:var(--text-primary); text-transform:uppercase;
    letter-spacing:0.8px; text-align:right;
    font-family:'Inter',sans-serif;
    -webkit-font-smoothing:antialiased;
    border-bottom:1px solid var(--border);
    white-space:nowrap;
  }
  .tp-txn-tbl th:first-child { text-align:left; }
  .tp-txn-tbl th:nth-child(2) { text-align:center; }
  .tp-txn-tbl th:last-child { text-align:center; }
  .tp-txn-tbl tr { height:36px; }
  .tp-txn-tbl td {
    padding:2px 10px; border-bottom:1px solid var(--border);
    border-right:1px solid var(--border);
    font-family:'Inter',sans-serif; font-variant-numeric:tabular-nums;
    font-size:14px; font-weight:400; color:#f9f9fb;
    white-space:nowrap; text-align:right;
  }
  .tp-txn-tbl td:first-child { text-align:left; color:var(--text-secondary); }
  .tp-txn-tbl td:nth-child(2) { text-align:center; font-weight:500; }
  .tp-txn-tbl td:last-child { text-align:center; border-right:none; }
  .tp-txn-tbl tr:hover td { background:rgba(145,180,220,0.033); }
  .tp-txn-link { color:var(--text-secondary); text-decoration:none; transition:color 0.12s; }
  .tp-txn-link:hover { color:var(--phantom-purple); }

  /* Right panel */
  .tp-right {
    width:360px; border-left:1px solid var(--border);
    background:var(--md-sys-color-surface); overflow-y:auto;
    display:flex; flex-direction:column;
    font-family:'Inter',sans-serif;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }
  .tp-r-banner {
    width:100%; overflow:hidden; flex-shrink:0;
    border-bottom:1px solid var(--border);
    position:relative;
    background:var(--bg-primary);
  }
  .tp-r-banner img { width:100%; height:auto; display:block; }
  .tp-r-banner-empty {
    width:100%; height:100%; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:6px;
    color:var(--text-secondary); font-size:11px;
  }
  .tp-r-identity {
    display:flex; align-items:center; gap:10px;
    padding:14px 16px; border-bottom:1px solid var(--border);
  }
  .tp-r-avatar {
    width:40px; height:40px; border-radius:8px; overflow:hidden;
    background:var(--bg-hover); display:flex; align-items:center; justify-content:center;
    font-size:16px; font-weight:700; flex-shrink:0; position:relative;
  }
  .tp-r-avatar img { width:100%; height:100%; object-fit:cover; }
  .tp-r-avatar.boosted-avatar { overflow:visible; }
  .tp-r-avatar.boosted-avatar::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 9px;
    background: conic-gradient(from var(--boost-angle), #ffd700, #ffb627, #fff8d1, transparent 30%, transparent 70%, #fff8d1, #ffb627, #ffd700);
    animation: goldSpin 4s linear infinite;
    z-index: 0;
  }
  .tp-r-avatar.boosted-avatar img {
    position: relative;
    z-index: 1;
    outline: none !important;
    border-radius: 6px;
  }
  .tp-r-id-info { flex:1; min-width:0; }
  .tp-r-id-top { display:flex; align-items:center; gap:6px; }
  .tp-r-id-sym { font-size:16px; font-weight:700; }
  .tp-r-id-chain { font-size:11px; color:var(--text-secondary); font-weight:500; background:var(--bg-hover); padding:2px 7px; border-radius:4px; }
  .tp-r-id-age { font-size:11px; color:var(--text-secondary); font-weight:500; background:var(--bg-hover); padding:2px 7px; border-radius:4px; }
  .tp-r-id-name { font-size:13px; color:var(--text-secondary); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tp-r-price-row { display:flex; border-bottom:1px solid var(--border); }
  .tp-r-price-col { flex:1; padding:10px 16px; }
  .tp-r-price-col-right { border-left:1px solid var(--border); }
  .tp-r-price-label { font-size:12px; font-weight:500; color:var(--text-secondary); margin-bottom:2px; }
  .tp-r-price-big { font:800 16px/1.3 'Inter',sans-serif; letter-spacing:-0.3px; font-variant-numeric:tabular-nums; }
  .tp-r-price-pair { font:700 14px/1.3 'Inter',sans-serif; font-variant-numeric:tabular-nums; color:var(--text-primary); }
  .tp-r-links { display:flex; gap:4px; padding:8px 16px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
  .tp-r-link {
    display:flex; align-items:center; gap:5px;
    padding:5px 10px; border-radius:6px;
    background:var(--bg-hover); border:1px solid var(--border);
    color:var(--text-secondary); font-size:12px; font-weight:500;
    text-decoration:none; transition:all 0.12s;
  }
  .tp-r-link:hover { border-color:var(--phantom-purple); color:var(--phantom-purple); }
  .tp-r-grid {
    display:grid; grid-template-columns:1fr 1fr;
    border-bottom:1px solid var(--border);
  }
  .tp-r-cell { background:var(--md-sys-color-surface); padding:10px 12px; border-right:1px solid var(--border); border-bottom:1px solid var(--border); }
  .tp-r-cell:nth-child(2n) { border-right:none; }
  .tp-r-cell:nth-child(n+3) { border-bottom:none; }
  .tp-r-cell-label { font-size:12px; font-weight:600; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.4px; margin-bottom:3px; }
  .tp-r-cell-val { font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; }
  .tp-r-tfs { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; padding:10px 16px; border-bottom:1px solid var(--border); }
  .tp-r-tf { text-align:center; padding:7px 4px; border-radius:6px; border:1px solid var(--border); }
  .tp-r-tf-lbl { font-size:12px; font-weight:500; color:var(--text-secondary); text-transform:uppercase; display:block; margin-bottom:2px; }
  .tp-r-tf-val { font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; }
  .tp-r-txn-section { padding:10px 16px; border-bottom:1px solid var(--border); }
  .tp-r-txn-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
  .tp-r-txn-lbl { font-size:12px; font-weight:600; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.4px; }
  .tp-r-txn-total { font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; }
  .tp-r-bar { height:5px; border-radius:3px; background:var(--red); overflow:hidden; margin-bottom:6px; }
  .tp-r-bar-fill { height:100%; border-radius:3px; background:var(--green); transition:width 0.3s; }
  .tp-r-bs-row { display:flex; justify-content:space-between; }
  .tp-r-bs-lbl { font-size:12px; color:var(--text-secondary); text-transform:uppercase; font-weight:500; }
  .tp-r-bs-val { font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; }
  .tp-r-converter { padding:10px 16px; border-bottom:1px solid var(--border); }
  .tp-r-conv-title { font-size:12px; font-weight:600; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.4px; margin-bottom:8px; }
  .tp-r-conv-row {
    display:flex; align-items:center; gap:8px;
    background:var(--bg-primary); border:1px solid var(--border);
    border-radius:8px; padding:6px 10px;
  }
  .tp-r-conv-input {
    flex:1; background:transparent; border:none; outline:none;
    color:var(--text-primary); font-size:15px; font-weight:600;
    font-family:'Inter',sans-serif; font-variant-numeric:tabular-nums;
    min-width:0;
  }
  .tp-r-conv-input::placeholder { color:var(--text-secondary); }
  .tp-r-conv-input::-webkit-inner-spin-button,
  .tp-r-conv-input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
  .tp-r-conv-input[type=number] { -moz-appearance:textfield; }
  .tp-r-conv-token {
    font-size:12px; font-weight:600; color:var(--text-secondary);
    background:var(--bg-hover); padding:3px 8px; border-radius:5px;
    white-space:nowrap;
  }
  .tp-r-conv-eq { text-align:center; color:var(--text-secondary); font-size:12px; padding:2px 0; }
  .tp-r-ca-section { padding:10px 16px; border-bottom:1px solid var(--border); }
  .tp-r-ca-lbl { font-size:12px; font-weight:600; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.4px; margin-bottom:4px; }
  .tp-r-ca-row { display:flex; align-items:center; gap:6px; }
  .tp-r-ca-val { font-size:12px; font-weight:400; color:var(--text-secondary); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-variant-numeric:tabular-nums; }
  .tp-r-ca-copy { background:var(--bg-hover); border:1px solid var(--border); color:var(--text-secondary); padding:4px 10px; border-radius:5px; font-size:12px; font-weight:500; cursor:pointer; transition:all 0.12s; }
  .tp-r-ca-copy:hover { border-color:var(--phantom-purple); color:var(--phantom-purple); }
  .tp-r-pair-section { padding:10px 16px; border-bottom:1px solid var(--border); }
  .tp-r-pair-row { display:flex; justify-content:space-between; margin-bottom:3px; }
  .tp-r-pair-lbl { font-size:12px; color:var(--text-secondary); }
  .tp-r-pair-val { font-size:13px; color:var(--text-primary); font-weight:500; }


  @media(max-width:900px) {
    .token-page { left: 0; }
    .tp-body { flex-direction:column; overflow-y:auto; flex:1; }
    .tp-right { width:100%; border-left:none; border-top:1px solid var(--border); flex:none; }
    .tp-chart-area { min-height:250px; height:40vh; flex:none; }
    .tp-center .chart-nodata-overlay { height: 40vh; min-height: 250px; }
    .tp-bottom { height:auto; min-height:auto; flex:none; }
    .tp-bottom .tp-tab-body { max-height:300px; }
    .tp-txn-scroll { max-height:250px; }
    .tp-subbar {
      flex-wrap:wrap; height:auto; padding:8px 12px; gap:4px;
    }
    .tp-subbar-token { order:1; width:100%; }
    .tp-subbar-price { order:2; }
    .tp-subbar-change { order:3; }
    .tp-subbar-spacer { display:none; }
    .tp-back-btn { order:0; }
    .tp-subbar-actions { order:4; margin-left:auto; }
    .tp-r-grid { margin:8px 12px; }
    .tp-r-ext-links { grid-template-columns:1fr 1fr; gap:4px; padding:8px 12px; }
    .tp-txn-header-row { font-size:10px; }
    .tp-txn-th { padding:5px 6px; font-size:10px; }
    .tp-txn-tbl td { padding:5px 6px; font-size:10px; }
  }

  /* ─── BUBBLE FILTER MODAL ─── */
  .bf-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1000;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 150ms ease-out, visibility 0s linear 150ms;
  }
  .bf-overlay.open {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transition: opacity 150ms ease-out, visibility 0s linear 0s;
  }
  .bf-modal {
    width: 600px;
    max-height: 80vh;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
    background: #211f21;
    border: none;
    border-radius: 28px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  @media (min-width: 769px) {
    .bf-overlay.open .bf-modal {
      animation: bfExpand 200ms ease-out;
    }
  }
  @keyframes bfExpand {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  }
  .bf-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 12px;
    background: #292729;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .bf-title {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
  }
  .bf-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .bf-reset-btn.has-filters { color: var(--md-sys-color-primary); }

  .bf-reset-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    color: #908c8e;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: var(--md-sys-shape-corner-full);
    transition: background 150ms ease;
  }
  .bf-reset-btn:hover {
    background: rgba(74,158,255,0.1);
  }
  .bf-close-btn {
    background: none;
    border: none;
    color: var(--md-sys-color-on-surface-variant);
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 150ms ease;
  }
  .bf-close-btn:hover {
    background: rgba(255,255,255,0.08);
  }
  .bf-body {
    overflow-y: auto;
    padding: 8px 24px 16px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
  }
  .bf-body::-webkit-scrollbar { width: 6px; }
  .bf-body::-webkit-scrollbar-track { background: transparent; }
  .bf-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }
  .bf-section {
    padding: 16px 0 8px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
  }
  .bf-section:last-child { border-bottom: none; }
  .bf-section-title {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--md-sys-color-on-surface-variant);
    opacity: 0.6;
    margin-bottom: 10px;
  }
  .bf-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .bf-chip {
    padding: 8px 16px;
    border-radius: var(--md-sys-shape-corner-full);
    background: var(--md-sys-color-surface-container-highest);
    border: none;
    color: var(--md-sys-color-on-surface-variant);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 150ms ease;
    white-space: nowrap;
  }
  .bf-chip:hover {
    background: #2e2c2e;
    color: var(--md-sys-color-on-surface);
  }
  .bf-chip.active {
    background: #4a4fd8;
    color: var(--md-sys-color-on-surface);
    font-weight: 600;
  }
  .bf-chip.active:hover {
    background: #354a8c;
  }
  .bf-chip-green.active {
    background: rgba(34, 197, 94, 0.15);
    color: var(--md-sys-color-success);
  }
  /* M3-style double-thumb range slider */
  .bf-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .bf-range-readout {
    font-size: 12px;
    font-weight: 500;
    color: var(--md-sys-color-on-surface-variant);
    margin-left: auto;
    font-feature-settings: 'tnum';
    letter-spacing: 0.2px;
  }
  .bf-range {
    position: relative;
    width: 100%;
    height: 36px;
    margin: 4px 0 8px;
  }
  .bf-range-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    background: #004a77;
    border-radius: 2px;
    transform: translateY(-50%);
  }
  .bf-range-fill {
    position: absolute;
    top: 50%;
    height: 4px;
    background: #a7c6f9;
    border-radius: 2px;
    transform: translateY(-50%);
    pointer-events: none;
    left: 0%;
    right: 0%;
  }
  .bf-range-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 36px;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    margin: 0;
    pointer-events: none;
  }
  .bf-range-input::-webkit-slider-runnable-track {
    background: transparent;
    height: 36px;
  }
  .bf-range-input::-moz-range-track {
    background: transparent;
    height: 36px;
  }
  .bf-range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #a8c7fa;
    border: none;
    box-shadow: 0 0 0 0 rgba(168,199,250,0);
    cursor: pointer;
    transition: box-shadow 150ms ease, transform 150ms ease;
    margin-top: 8px;
    position: relative;
    z-index: 2;
  }
  .bf-range-input::-moz-range-thumb {
    pointer-events: auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #a8c7fa;
    border: none;
    cursor: pointer;
    transition: box-shadow 150ms ease;
  }
  .bf-range-input:hover::-webkit-slider-thumb,
  .bf-range-input:focus::-webkit-slider-thumb,
  .bf-range-input:active::-webkit-slider-thumb {
    box-shadow: 0 0 0 10px rgba(168,199,250,0.18);
  }
  .bf-range-input:hover::-moz-range-thumb,
  .bf-range-input:active::-moz-range-thumb {
    box-shadow: 0 0 0 10px rgba(168,199,250,0.18);
  }

  /* M3 Segmented buttons (for Bubble Count) */
  .bf-segmented {
    display: flex;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: var(--md-sys-shape-corner-full);
    overflow: hidden;
    background: transparent;
  }
  .bf-seg {
    flex: 1;
    padding: 8px 0;
    background: transparent;
    border: none;
    color: var(--md-sys-color-on-surface-variant);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 150ms ease;
    border-right: 1px solid rgba(255,255,255,0.10);
    white-space: nowrap;
  }
  .bf-seg:last-child { border-right: none; }
  .bf-seg:hover { background: rgba(255,255,255,0.05); color: var(--md-sys-color-on-surface); }
  .bf-seg.active {
    background: #4a4fd8;
    color: var(--md-sys-color-on-surface);
    font-weight: 600;
  }
  /* Live count footer (replaces Apply button) */
  .bf-footer-live {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    border-top: 1px solid rgba(255,255,255,0.08);
    background: #292729;
    font-size: 13px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
  }
  .bf-live-pin {
    color: #4A9EFF;
    font-size: 18px;
    line-height: 1;
  }
  .bf-live-text { color: rgba(230, 225, 227, 0.92); }
  button.bf-apply-btn.has-filters { color: var(--md-sys-color-primary); }

  button.bf-apply-btn {
    all: unset;
    display: inline-block;
    padding: 6px 12px;
    color: #908c8e;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    border-radius: var(--md-sys-shape-corner-full);
    transition: background 150ms ease;
  }
  button.bf-apply-btn:hover {
    background: rgba(74,158,255,0.1);
  }
  #bfLiveCount {
    color: #4A9EFF;
    font-feature-settings: 'tnum';
    font-weight: 700;
    margin-right: 2px;
  }
  /* Quick Presets section — distinct from regular filter chips */
  .bf-presets {
    background: transparent;
    margin: -8px -20px 8px -20px;
    padding: 14px 20px 16px 20px;
    border-radius: 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .bf-presets .bf-chip-group {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .bf-presets .bf-chip-group::-webkit-scrollbar { display: none; }
  .bf-presets .bf-preset-chip { flex-shrink: 0; }
  .bf-preset-chip {
    background: rgba(74, 158, 255, 0.10);
    color: #cfd9e8;
    border: 1px solid rgba(74, 158, 255, 0.20);
    font-weight: 600;
  }
  .bf-preset-chip:hover {
    background: rgba(74, 158, 255, 0.18);
    border-color: rgba(74, 158, 255, 0.35);
    color: #fff;
  }
  /* Dim the "All" chips so they recede visually until selected */
  .bf-chip[data-value="all"]:not(.active) {
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    opacity: 0.55;
    padding: 8px 12px;
    font-size: 12px;
  }
  .bf-chip[data-value="all"]:not(.active):hover {
    opacity: 1;
    background: rgba(255,255,255,0.04);
  }
  .bf-chip-red.active {
    background: rgba(239, 68, 68, 0.15);
    color: var(--md-sys-color-error);
  }
  .bf-footer {
    padding: 12px 24px 20px;
    background: #211f21;
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  .bf-apply-btn {
    width: 100%;
    padding: 14px;
    border-radius: var(--md-sys-shape-corner-full);
    background: #4a4fd8;
    border: none;
    color: var(--md-sys-color-on-surface);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms ease;
    letter-spacing: 0.3px;
  }
  .bf-apply-btn:hover {
    background: #354a8c;
  }

  /* ─── BUBBLE FILTER MODAL MOBILE ─── */
  @media (max-width: 768px) {
    .bf-overlay { z-index: 9500 !important; }
    .bf-modal {
      width: 100vw !important;
      max-width: 100vw !important;
      height: calc(100% - 28px) !important;
      max-height: none !important;
      position: fixed !important;
      top: auto !important;
      bottom: 0 !important;
      left: 0 !important;
      right: 0 !important;
      border-radius: 28px 28px 0 0 !important;
      padding-bottom: env(safe-area-inset-bottom) !important;
      box-shadow: 0 -4px 30px rgba(0,0,0,0.3) !important;
      transform: translateY(100%) !important;
      transition: transform 420ms var(--md-sys-motion-easing-emphasized-decelerate) !important;
      will-change: transform !important;
    }
    .bf-overlay.open .bf-modal {
      transform: translateY(0) !important;
      transition: transform 420ms var(--md-sys-motion-easing-emphasized-decelerate) !important;
    }
    .bf-overlay:not(.open) .bf-modal {
      transform: translateY(100%) !important;
      transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    .bf-header { padding: 16px 20px 10px; }
    .bf-body { padding: 4px 20px 12px; }
    .bf-footer { padding: 10px 20px 16px; }
    .bf-footer-live { padding: 12px 20px; }
    .bf-chip { padding: 7px 14px; font-size: 12px; }
    .bf-presets .bf-section-title { padding-left: 20px; }
    .bf-section { padding: 12px 0 6px; }
  }

  /* ─── WATCHLIST MODAL MOBILE ─── */
  @media (max-width: 768px) {
    .wl-modal-overlay {
      display: none !important;
    }
    .wl-modal-cols {
      grid-template-columns: 1fr 65px 50px 50px;
      padding: 8px 16px;
      font-size: 10px;
    }
    .wl-modal-cols > span:nth-child(3),
    .wl-modal-cols > span:nth-child(5) { display: none; }
    .wl-modal-row {
      grid-template-columns: 1fr 65px 50px 50px;
      padding: 8px 10px;
    }
    .wl-modal-row > *:nth-child(3),
    .wl-modal-row > *:nth-child(5) { display: none; }
    .wl-modal-header {
      padding: 18px 16px 10px;
    }
    .wl-modal-body {
      padding: 0 8px 8px;
    }
    .wl-modal-val {
      font-size: 11px;
    }
    .wl-modal-token-sym {
      font-size: 12px;
    }
    .wl-modal-token-img {
      width: 28px;
      height: 28px;
    }
  }

  /* ============================================================
     MULTICHART — individual cards on blurred overlay (no wrapper)
     ============================================================ */
  /* Multichart confirmation dialog (delete chart / clear all) */
  .mc-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity 200ms var(--md-sys-motion-easing-standard);
  }
  .mc-confirm-overlay.open { opacity: 1; }
  .mc-confirm-overlay.closing { opacity: 0; }
  .mc-confirm {
    position: relative;
    width: 460px;
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
    background: #2b2930;
    border-radius: 20px;
    padding: 60px 32px 28px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.5);
    text-align: center;
    transform: scale(0.85);
    opacity: 0;
    transition: transform var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized-decelerate), opacity var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized-decelerate);
  }
  .mc-confirm-overlay.open .mc-confirm { transform: scale(1); opacity: 1; }
  .mc-confirm-overlay.closing .mc-confirm { transition-duration: var(--md-sys-motion-duration-short4); transition-timing-function: var(--md-sys-motion-easing-emphasized-accelerate); }
  .mc-confirm-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    background: rgba(255,255,255,0.06);
    color: var(--text-secondary);
    transition: background 150ms ease, color 150ms ease;
  }
  .mc-confirm-close:hover { background: rgba(255,255,255,0.12); color: var(--text-primary); }
  .mc-confirm-msg {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
    margin-bottom: 26px;
  }
  .mc-confirm-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
  }
  .mc-confirm-yes, .mc-confirm-no {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 26px;
    border: none;
    border-radius: var(--md-sys-shape-corner-full);
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
  }
  .mc-confirm-yes { background: #e53935; color: #fff; }
  .mc-confirm-yes:hover { background: #c62828; }
  .mc-confirm-no { background: var(--md-sys-color-surface-container-highest); color: var(--text-primary); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); }
  .mc-confirm-no:hover { background: rgba(255,255,255,0.08); }

  .mc-overlay {
    display: none;
    position: fixed;
    top: 76px;
    right: 0;
    bottom: 0;
    left: 64px;
    background: var(--md-sys-color-surface);
    z-index: 955;
  }
  .mc-overlay.open { display: flex; flex-direction: column; overflow: hidden; animation: m3OverlayIn var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized-decelerate); }
  .mc-overlay.closing { display: flex; flex-direction: column; overflow: hidden; animation: m3OverlayOut var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-accelerate) forwards; pointer-events: none; }

  /* Top-right actions (clear pill + exit button) */
  .mc-filterbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    height: 58px;
    box-sizing: border-box;
    padding: 10px 24px 10px 24px;
    background: #2b2930;
    margin: 0 8px;
    border-top: none;
    border-radius: 0;
    flex-shrink: 0;
  }
  /* Multichart divider — ONE line between the top bar and the filter bar (DESKTOP only).
     Desktop Firefox only renders the filter bar's border here (not the header's), so put
     the line on the filter bar and drop the header's so Chrome/Safari don't double it.
     Mobile keeps its own divider (the header's border-bottom) — adding the filter bar's
     border there doubled it on mobile Firefox, so this stays desktop-scoped. */
  @media (min-width: 769px) {
    body.mc-open .top-header-bar { border-bottom: none; }
    body.mc-open .mc-filterbar { border-top: 1px solid rgba(255,255,255,0.08); }
  }
  /* Layout controls (columns / card height / spacing) — right side of bar */
  .mc-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: auto;
  }
  .mc-ctrl {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 36px;
    padding: 0 6px;
    background: var(--md-sys-color-surface-container-highest);
    border-radius: var(--md-sys-shape-corner-full);
  }
  .mc-ctrl-label {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
    padding: 0 2px;
  }
  .mc-ctrl-label b { color: var(--text-primary); font-weight: 700; }
  .mc-ctrl-btn {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    color: var(--text-primary);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background 150ms ease;
  }
  .mc-ctrl-btn:hover { background: rgba(255,255,255,0.16); }
  /* Chart interval dropdown pill */
  .mc-interval { position: relative; padding: 0; }
  .mc-interval-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 100%;
    padding: 0 10px;
    background: transparent;
    border: none;
    border-radius: var(--md-sys-shape-corner-full);
    cursor: pointer;
    color: var(--text-secondary);
    font-family: 'Inter', sans-serif;
  }
  .mc-interval-caret { opacity: 0.6; flex-shrink: 0; }
  .mc-clock { flex-shrink: 0; }
  .mc-interval .mc-clock-filled { display: none; }
  .mc-interval.open .mc-clock-outline { display: none; }
  .mc-interval.open .mc-clock-filled { display: inline-block; }
  .mc-interval-menu {
    display: none;
    position: fixed;
    min-width: 190px;
    background: var(--md-sys-color-surface-container-highest);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 6px;
    z-index: 9999;
    box-shadow: 0 16px 44px rgba(0,0,0,0.6);
    transform-origin: top left;
  }
  .mc-interval.open .mc-interval-menu { display: block; animation: m3PanelIn var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate); }
  .mc-interval-menu-title {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    opacity: 0.7;
    padding: 8px 12px 6px;
  }
  .mc-interval-menu button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    text-align: left;
    padding: 9px 12px;
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    color: var(--text-secondary);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    transition: background 120ms ease, color 120ms ease;
  }
  .mc-interval-menu button:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); }
  .mc-interval-menu button.active { background: rgba(255,255,255,0.09); color: #fff; font-weight: 600; }
  .mc-iv-check { flex-shrink: 0; opacity: 0; transition: opacity 120ms ease; }
  .mc-interval-menu button.active .mc-iv-check { opacity: 1; }
  .mc-panel-title {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.01em;
  }
  .mc-panel {
    background: #1c1b1d;
    border-radius: 0 0 var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large);
    border: none;
    margin: 0 8px 8px;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }
  .mc-combo-pill {
    display: inline-flex;
    align-items: stretch;
    height: 36px;
    background: transparent;
    border: none;
    border-radius: var(--md-sys-shape-corner-full);
  }
  /* Multichart nav icon: outline by default, filled when active (multichart open) */
  #navMultichart .mc-nav-icon-filled { display: none; }
  body.mc-open #navMultichart .mc-nav-icon-outline { display: none; }
  body.mc-open #navMultichart .mc-nav-icon-filled { display: inline-block; }
  /* Keep mc icons at 24px now that they live inside .ms-nav-icon-wrap */
  .mc-nav-icon-wrap > .mc-nav-icon { width: 24px !important; height: 24px !important; }
  /* Match the watchlist wrap box (28px) so the badge anchors identically. */
  .mc-nav-icon-wrap { width: 28px; height: 28px; }

  /* Top-bar Clear All + X are MOBILE ONLY (see mobile media query below).
     On desktop the controls live in the .mc-filterbar bar. */
  .mc-topbar-actions { display: none; align-items: center; gap: 8px; }
  .mc-topbar-actions .mc-combo-clear { height: 32px; font-size: 13px; padding: 0 12px; }
  .mc-topbar-actions .mc-combo-close { width: 32px; height: 32px; }
  .mc-combo-clear {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    background: #e53935;
    border: none;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: color 150ms ease, background 150ms ease;
    border-radius: var(--md-sys-shape-corner-full);
  }
  .mc-combo-clear:hover { color: #fff; background: #c62828; }
  .mc-combo-clear svg { opacity: 1; }
  .mc-combo-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--md-sys-color-surface-container-highest);
    border: none;
    color: var(--md-sys-color-on-surface-variant);
    cursor: pointer;
    border-radius: var(--md-sys-shape-corner-full);
    transition: background 160ms ease, color 160ms ease, transform 160ms ease;
  }
  .mc-combo-close svg { transition: transform 200ms cubic-bezier(0.2,0,0,1); }
  .mc-combo-close:hover {
    background: #37353e;
    color: var(--md-sys-color-on-surface);
  }
  .mc-combo-close:hover svg { transform: rotate(90deg); }
  .mc-combo-close:active { transform: scale(0.92); }
  .mc-exit:hover { background: #55515e; color: var(--text-primary); }

  /* ---- Card grid — cards float directly on overlay ---- */
  .mc-grid {
    padding: 20px 24px 32px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 14px;
    align-content: start;
  }

  /* ---- Add-slot card (dashed placeholder) ---- */
  .mc-add-slot {
    background: #211f21;
    border: none;
    border-radius: 28px;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: calc(320px * var(--mc-card-h, 1));
    cursor: pointer;
    transition: background 150ms ease;
    color: var(--text-secondary);
  }
  .mc-add-slot:hover {
    background: #211f21;
  }
  .mc-add-slot svg { opacity: 0.3; }
  .mc-add-btn {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: #fff;
    background: var(--md-sys-color-surface-container-highest);
    border: none;
    border-radius: var(--md-sys-shape-corner-full);
    padding: 9px 20px;
    cursor: pointer;
    transition: background 150ms ease;
  }
  .mc-add-btn:hover { background: #37353e; }
  .mc-add-slot span {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2px;
  }
  .mc-add-slot .mc-slot-count {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    opacity: 0.5;
    margin-top: 2px;
  }

  /* ---- Chart card (matches boost-modal style) ---- */
  .mc-card {
    background: #211f21;
    border-radius: 28px;
    border: none;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: calc(320px * var(--mc-card-h, 1));
    animation: mcCardIn 200ms ease-out;
  }
  @keyframes mcCardIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
  }
  .mc-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    flex-shrink: 0;
  }
  .mc-card-info { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .mc-card-logo { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
  .mc-card-info-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .mc-card-info-row { display: flex; align-items: center; gap: 4px; }
  .mc-card-sym { font-size: 13px; font-weight: 700; color: var(--text-primary); }
  .mc-card-pair { font-size: 13px; color: var(--text-secondary); }
  .mc-card-pct { font-size: 13px; font-weight: 600; margin-left: 2px; }
  .mc-pct-up { color: #22C55E; }
  .mc-pct-down { color: #EF4444; }
  .mc-card-name { font-size: 13px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mc-card-right-text { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex-shrink: 0; }
  .mc-card-right-row { display: flex; align-items: center; gap: 8px; }
  .mc-card-price { font-size: 13px; font-weight: 700; color: var(--text-primary); }
  .mc-card-pct-label { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
  .mc-card-chart-wrap {
    flex: 1;
    margin: 0 10px;
    border-radius: 10px;
    overflow: hidden;
    background: #111116;
    min-height: 240px;
    position: relative;
  }
  .mc-card-chart { width: 100%; height: 100%; position: absolute; inset: 0; }
  .mc-card-chart iframe { border: none !important; }
  .mc-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    flex-shrink: 0;
  }
  .mc-card-footer-left { display: flex; align-items: center; gap: 6px; }
  .mc-card-mcap { font-size: 13px; font-weight: 600; color: var(--text-secondary); font-family: 'Inter', sans-serif; }
  .mc-card-footer-right { display: flex; align-items: center; position: relative; }
  .mc-card-dots {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; border-radius: 50%;
    color: rgba(255,255,255,0.4);
    transition: background 150ms ease, color 150ms ease;
  }
  .mc-card-dots:hover { background: rgba(255,255,255,0.1); color: #fff; }
  .mc-card-expand {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; border-radius: 50%;
    color: rgba(255,255,255,0.4);
    transition: background 150ms ease, color 150ms ease;
  }
  .mc-card-expand:hover { background: rgba(255,255,255,0.1); color: #fff; }
  .mc-card-fullscreen {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; border-radius: 50%;
    color: rgba(255,255,255,0.4);
    transition: background 150ms ease, color 150ms ease;
  }
  .mc-card-fullscreen:hover { background: rgba(255,255,255,0.1); color: #fff; }
  .mc-card.mc-card-fullscreen-active {
    position: fixed;
    inset: 0;
    z-index: 9999;
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    margin: 0;
    animation: none;
  }
  .mc-card.mc-card-fullscreen-active .mc-card-chart-wrap {
    min-height: 0;
    border-radius: 0;
    margin: 0;
  }
  .mc-card-trash {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; border-radius: 50%;
    color: rgba(255,255,255,0.4);
    transition: background 150ms ease, color 150ms ease;
  }
  .mc-card-trash:hover { background: rgba(239,68,68,0.15); color: #EF4444; }
  /* Visually match the footer control icons. Same box size looks uneven
     because each glyph fills its viewBox differently, so tune per-icon:
     the trash fills its box (shrink it), the open-modal arrows have padding
     (grow them), dots are the reference. */
  .mc-card-dots svg { width: 18px; height: 18px; }
  .mc-card-expand svg { width: 21px; height: 21px; }
  .mc-card-trash svg { width: 15px; height: 15px; }

  /* ---- Search panel (matches main page search modal) ---- */
  .mc-search-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(12,11,14,0.45);
    z-index: 3050;
  }
  .mc-search-backdrop.open {
    display: block;
  }
  .mc-search-float {
    display: none;
    position: fixed;
    top: 56px;
    left: 50%;
    transform: translateX(-50%);
    transform-origin: top center;
    width: 560px;
    max-height: 75vh;
    flex-direction: column;
    z-index: 3100;
    background: var(--md-sys-color-surface-container-highest);
    border-radius: 28px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    overflow: hidden;
  }
  .mc-search-float.open {
    display: flex;
    animation: mcSearchDrop 200ms ease-out;
  }
  @keyframes mcSearchDrop {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .mc-search-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px 8px;
    flex-shrink: 0;
  }

  /* ---- Add mode: search surface mirrors the top bar and lights up ---- */
  body.mc-add-mode .mc-search-float {
    border-radius: 24px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  }
  body.mc-add-mode .mc-search-wrap {
    height: 42px;
    padding: 0 18px;
    gap: 8px;
    box-sizing: border-box;
    border-radius: 9999px;
    outline: 1px solid #4a4fd8;
    outline-offset: -1px;
  }
  /* Once results drop down, the outline goes away — bar reads as part of the open modal */
  body.mc-add-mode .mc-search-float.has-results .mc-search-wrap {
    outline: none;
  }
  body.mc-add-mode .mc-search-icon { opacity: 1; width: 22px; height: 22px; }
  body.mc-add-mode .mc-search { font-size: 15px; font-weight: 400; letter-spacing: normal; }
  body.mc-add-mode .mc-search-close { width: 28px; height: 28px; }
  body.mc-add-mode .mc-search-results { padding: 4px 12px 12px; }

  .mc-search-icon {
    flex-shrink: 0;
    opacity: 0.7;
    color: var(--text-secondary);
  }
  .mc-search {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.2px;
    padding: 0;
  }
  .mc-search::placeholder { color: var(--text-secondary); font-weight: 400; opacity: 0.7; }
  .mc-search-close {
    width: 32px; height: 32px;
    background: var(--md-sys-color-surface-container-highest);
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: background 150ms ease;
    flex-shrink: 0;
  }
  .mc-search-close:hover { background: rgba(255,255,255,0.12); color: var(--text-primary); }

  /* Search results inside the panel */
  .mc-search-results {
    flex: 1;
    overflow-y: auto;
    padding: 0 12px 12px;
    scrollbar-width: none;
  }
  .mc-search-results::-webkit-scrollbar { display: none; }
  .mc-search-loading, .mc-search-empty {
    padding: 20px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
  }
  .mc-result {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    border-radius: 12px;
    transition: background 0.15s;
  }
  .mc-result:hover { background: none; }
  .mc-result-added { opacity: 0.5; cursor: default; }
  .mc-result-added:hover { background: none; }
  .mc-result-chain { border-radius: 50%; flex-shrink: 0; }
  .mc-result-img { border-radius: 50%; flex-shrink: 0; }
  .mc-result-info {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 1px;
  }
  .mc-result-sym { font-size: 13px; font-weight: 600; color: var(--text-primary); }
  .mc-result-name {
    font-size: 11px; color: var(--text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .mc-result-mcap { font-size: 12px; color: var(--text-secondary); font-weight: 500; }
  .mc-result-pct { font-size: 12px; font-weight: 600; min-width: 55px; text-align: right; }
  .mc-result-add { font-size: 12px; font-weight: 600; color: #4A9EFF; min-width: 40px; text-align: right; }
  .mc-result-check { font-size: 12px; font-weight: 500; color: var(--text-secondary); min-width: 40px; text-align: right; }

  /* ---- Mobile ---- */
  @media (max-width: 768px) {
    .mc-overlay { left: 0; top: 60px; bottom: 54px; }
    .mc-filterbar { padding: 10px 14px; margin: 0 8px; }
    .mc-panel { margin: 0 8px 8px; }
    .mc-grid {
      grid-template-columns: 1fr;
      padding: 12px 14px 20px;
      gap: 12px;
    }
    .mc-card, .mc-add-slot { min-height: 300px; border-radius: 28px; }
    .mc-search-float { width: calc(100vw - 32px); top: 16px; }
    .mc-exit { top: 12px; right: 12px; width: 32px; height: 32px; }
  }

  /* ── Mobile bottom navigation bar ── */
  .mobile-bottom-nav {
    display: none;
  }
  @media (max-width: 768px) {
    .mobile-bottom-nav {
      display: flex;
      flex-direction: column;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 9000;
      height: 54px;
      background: #141314;
      border-radius: 0;
      border-top: 1px solid rgba(255,255,255,0.1);
      padding-bottom: env(safe-area-inset-bottom, 0px);
      overflow: hidden;
      transition: height 420ms var(--md-sys-motion-easing-emphasized-decelerate);
    }
    /* Scrim behind the bottom-nav Watchlist/Menu panels (dims the page above) */
    .mob-nav-scrim {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.3);
      opacity: 0;
      pointer-events: none;
      z-index: 8999;
      transition: opacity var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
    }
    .mobile-bottom-nav.menu-open ~ .mob-nav-scrim,
    .mobile-bottom-nav.watchlist-open ~ .mob-nav-scrim,
    .mobile-bottom-nav.coin-open ~ .mob-nav-scrim,
    .mobile-bottom-nav.search-open ~ .mob-nav-scrim {
      opacity: 1;
      pointer-events: auto;
    }
    .mobile-bottom-nav.menu-open {
      height: calc(100% - 28px);
      background: #211f21;
      border-radius: 28px 28px 0 0;
      border-top: 1px solid rgba(255,255,255,0.06);
    }
    .mob-nav-icons {
      display: flex;
      align-items: center;
      justify-content: space-around;
      height: 54px;
      padding: 0 8px;
      flex-shrink: 0;
    }
    .mobile-bottom-nav.menu-open .mob-nav-icons {
      display: none;
    }
    .mob-nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      background: none;
      border: none;
      color: rgba(255,255,255,0.6);
      cursor: pointer;
      padding: 0 12px;
      height: 100%;
      -webkit-tap-highlight-color: transparent;
    }
    .mob-nav-item svg {
      width: 24px;
      height: 24px;
    }
    .mob-nav-green-circle svg {
      width: 20px;
      height: 20px;
    }
    .mob-nav-label {
      font-family: 'Inter', sans-serif;
      font-size: 10px;
      font-weight: 500;
      line-height: 1;
    }
    .mob-nav-green-circle {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: #1a1a1a;
      border: 2px solid #00c600;
      box-shadow: none;
    }
    .mob-nav-newpairs {
      padding: 0 8px !important;
    }
    /* Mobile watchlist badge */
    .mob-wl-badge {
      display: none;
      position: absolute;
      top: -2px;
      right: 8px;
      width: 14px;
      height: 14px;
      background: #EF4444;
      color: #fff;
      font-size: 8px;
      font-weight: 700;
      text-align: center;
      border-radius: 50%;
      padding: 0;
      box-sizing: border-box;
      align-items: center;
      justify-content: center;
      font-family: 'Inter', sans-serif;
      line-height: 14px;
    }
    .mob-wl-badge.visible {
      display: flex;
    }
    .menu-wl-badge {
      position: absolute;
      top: 50%;
      right: 12px;
      transform: translateY(-50%);
      width: 18px !important;
      height: 18px !important;
      font-size: 10px !important;
      line-height: 18px !important;
    }
    /* Outline/filled icon toggle */
    .mob-nav-item .mob-icon-filled { display: none !important; }
    .mob-nav-item .mob-icon-outline { display: inline; }
    .mob-nav-item.active .mob-icon-filled { display: inline !important; }
    .mob-nav-item.active .mob-icon-outline { display: none !important; }
    .mob-nav-pill {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 28px;
      border-radius: 14px;
      transition: background 0.2s;
    }
    .mob-nav-item.active {
      color: #fff;
    }
    .mob-nav-item.active .mob-nav-pill {
      background: none;
    }

    /* Menu panel inside nav */
    .mob-nav-menu {
      display: none;
      flex-direction: column;
      flex: 1;
      overflow: hidden;
    }
    .mobile-bottom-nav.menu-open .mob-nav-menu {
      display: flex;
    }
    .mob-nav-menu-header {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px 20px 12px;
      flex-shrink: 0;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .mob-menu-header-actions {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .mob-menu-header-actions .mob-menu-circle { flex-direction: row; gap: 0; }
    .mob-menu-header-actions .mob-menu-circle-icon { width: 40px; height: 40px; }
    .mob-menu-header-actions .mob-menu-circle-icon img,
    .mob-menu-header-actions .mob-menu-circle-icon svg { width: 21px !important; height: 21px !important; }
    .mob-menu-header-actions .mob-menu-circle-label { display: none; }
    .mob-nav-menu-close {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      width: 32px;
      height: 32px;
      background: #2b2930;
      border: none;
      border-radius: 50%;
      color: #e3e3e3;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    .mob-nav-menu-items {
      flex: 1;
      overflow-y: auto;
      padding: 0 8px 16px;
      -webkit-overflow-scrolling: touch;
    }
    .mob-menu-footer-circles {
      display: flex;
      justify-content: space-evenly;
      padding: 12px 8px 16px;
    }
    .mob-menu-footer-circles .mob-menu-circle-icon {
      width: 32px;
      height: 32px;
    }
    .mob-menu-footer-circles .mob-menu-circle-icon svg {
      width: 16px !important;
      height: 16px !important;
    }

    /* Watchlist panel inside nav */
    .mob-nav-watchlist {
      display: none;
      flex-direction: column;
      flex: 1;
      overflow: hidden;
    }
    .mobile-bottom-nav.watchlist-open {
      height: calc(100% - 28px);
      background: #211f21;
      border-radius: 28px 28px 0 0;
      border-top: 1px solid rgba(255,255,255,0.06);
    }
    .mobile-bottom-nav.watchlist-open .mob-nav-icons {
      display: none;
    }
    .mobile-bottom-nav.watchlist-open .mob-nav-watchlist {
      display: flex;
    }
    /* Watchlist modal when inside nav bar */
    .mob-nav-watchlist .wl-modal {
      position: static !important;
      transform: none !important;
      width: 100% !important;
      max-width: 100% !important;
      height: 100% !important;
      max-height: 100% !important;
      border-radius: 0 !important;
      border: none !important;
      box-shadow: none !important;
      animation: none !important;
      background: transparent !important;
    }

    /* Search panel inside nav */
    .mob-nav-search {
      display: none;
      flex-direction: column;
      flex: 1;
      overflow: hidden;
    }
    .mobile-bottom-nav.search-open {
      height: calc(100% - 28px);
      background: #44404c;
      border-radius: 28px 28px 0 0;
      border-top: none;
      box-shadow: 0 -4px 30px rgba(0,0,0,0.4);
    }
    .mobile-bottom-nav.search-open .mob-nav-icons {
      display: none;
    }
    .mobile-bottom-nav.search-open .mob-nav-search {
      display: flex;
    }
    /* Search modal when inside nav bar */
    .mob-nav-search .search-modal {
      position: static !important;
      transform: none !important;
      width: 100% !important;
      max-width: 100% !important;
      height: 100% !important;
      max-height: 100% !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      border: none !important;
      background: transparent !important;
    }

    /* Coin sheet hosted inside the nav (mirrors search/watchlist) */
    .mob-nav-coin {
      display: none;
      flex-direction: column;
      flex: 1;
      overflow: hidden;
    }
    .mobile-bottom-nav.coin-open {
      height: calc(100% - 28px);
      background: #1c1b1d;
      border-radius: 28px 28px 0 0;
      border-top: 1px solid rgba(255,255,255,0.06);
      box-shadow: 0 -4px 30px rgba(0,0,0,0.4);
    }
    .mobile-bottom-nav.coin-open .mob-nav-icons { display: none; }
    .mobile-bottom-nav.coin-open .mob-nav-coin { display: flex; }
    .mob-nav-coin .bubble-modal {
      position: static !important;
      transform: none !important;
      width: 100% !important;
      max-width: 100% !important;
      height: 100% !important;
      max-height: 100% !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      border: none !important;
      animation: none !important;
    }
  }


/* Desktop: restore the original darker modal scrim (mobile keeps the lighter 0.3 scrim). */
@media (min-width: 769px) {
  .search-overlay,
  .wc-overlay,
  .bubble-modal-overlay,
  .boost-modal-overlay,
  .bugreport-overlay,
  .wl-modal-overlay,
  .ms-mobile-overlay,
  .tc-overlay,
  .bf-overlay {
    background: radial-gradient(ellipse at center, rgba(16,15,16,0.85) 0%, rgba(6,6,7,0.93) 100%);
  }
}