/* Extracted core variables and common styles from index.html to reduce HTML weight and enable browser CSS caching */

:root { 
  --bg-dark: #0b1020; 
  --bg-secondary: #0e1526; 
  --bg-card: #0f172a; 
  --bg-glass: rgba(255, 255, 255, 0.06); 
  --accent-primary: #7b86f8; 
  --accent-secondary: #9aa6ff; 
  --accent-tertiary: #66c2d5; 
  --text-primary: #e6ebf2; 
  --text-secondary: #c7cedb; 
  --text-muted: #a6afbf; 
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35); 
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.45); 
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55); 
  --shadow-glow: 0 0 30px rgba(123, 134, 248, 0.25); 
  --button-glow: rgba(123, 134, 248, 0.35); 
  --border-glass: rgba(255, 255, 255, 0.1); 
  --gradient-primary: linear-gradient(135deg, rgba(123, 134, 248, 0.28) 0%, rgba(154, 166, 255, 0.22) 50%, rgba(102, 194, 213, 0.2) 100%); 
  --gradient-secondary: linear-gradient(135deg, #111827 0%, #0b1020 100%); 
  --gradient-card: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%); 
  --btn-primary-start: #4f6ddf;
  --btn-primary-end: #3a539b;
  --btn-primary-hover-start: #5b79e8;
  --btn-primary-hover-end: #465cb0;
  --credits-gradient: linear-gradient(135deg, #facc15 0%, #f59e0b 50%, #ef4444 100%);
  --credits-glow: rgba(250, 204, 21, 0.35);
  --price-gradient: linear-gradient(135deg, #e6ebf2 0%, #c7cedb 100%);
  --title-gradient: linear-gradient(135deg, #aab4ff 0%, #7b86f8 50%, #66c2d5 100%);
}

@media (max-width: 768px) {
  html, body { overflow-x: hidden !important; }
  .container { overflow-x: hidden !important; overflow-y: visible !important; }
  #liveChart { touch-action: pan-y !important; }
}

/* Performance-friendly defaults */
img { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; }
.low-perf * { transition-duration: 0.2s !important; animation-duration: 0.2s !important; }
.low-perf .scanner-card::before, .low-perf .scanner-card::after { display: none !important; }


      .vip-header {
        background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(139,92,246,0.2));
        border-bottom: 1px solid rgba(99,102,241,0.3);
        padding: 2rem;
        position: relative;
        overflow: hidden;
      }

      .vip-header-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        z-index: 2;
      }

      .vip-title-section {
        flex: 1;
      }

      .vip-title {
        margin: 0 0 0.5rem 0;
        font-size: 2.5rem;
        font-weight: 900;
        background: linear-gradient(135deg, #fff, #a5b4fc, #c4b5fd);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-shadow: 0 0 30px rgba(255,255,255,0.3);
        letter-spacing: -0.02em;
      }

      .vip-subtitle {
        color: rgba(255,255,255,0.8);
        font-size: 1.1rem;
        font-weight: 500;
        margin-bottom: 1rem;
        letter-spacing: 0.02em;
      }

      .vip-token-info {
        display: flex;
        gap: 1rem;
        align-items: center;
      }

      .token-name {
        background: rgba(99,102,241,0.2);
        padding: 0.5rem 1rem;
        border-radius: 20px;
        font-weight: 600;
        font-size: 0.9rem;
        border: 1px solid rgba(99,102,241,0.3);
      }

      .token-address {
        font-family: 'Courier New', monospace;
        color: rgba(255,255,255,0.6);
        font-size: 0.85rem;
      }

      .vip-badge-premium {
        flex-shrink: 0;
      }

      .premium-badge {
        background: linear-gradient(135deg, rgba(255,215,0,0.2), rgba(255,165,0,0.2));
        border: 2px solid rgba(255,215,0,0.4);
        border-radius: 30px;
        padding: 1rem 1.5rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        animation: badgePulse 2s ease-in-out infinite;
      }

      .badge-stars {
        color: #ffd700;
        font-size: 1.2rem;
        animation: sparkle 1.5s ease-in-out infinite;
      }

      .badge-text {
        font-weight: 900;
        font-size: 1.1rem;
        color: #ffd700;
        text-shadow: 0 0 10px rgba(255,215,0,0.5);
      }

      .starry-background {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at 20% 30%, rgba(99,102,241,0.1) 0%, transparent 50%),
                    radial-gradient(circle at 80% 70%, rgba(139,92,246,0.1) 0%, transparent 50%),
                    radial-gradient(circle at 60% 20%, rgba(255,255,255,0.05) 0%, transparent 50%);
        z-index: 1;
        animation: starsMove 20s linear infinite;
      }

      .starry-background::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: 
          radial-gradient(1px 1px at 10px 20px, rgba(255,255,255,0.8), transparent),
          radial-gradient(1px 1px at 40px 60px, rgba(255,255,255,0.6), transparent),
          radial-gradient(1px 1px at 90px 30px, rgba(255,255,255,0.9), transparent),
          radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.5), transparent),
          radial-gradient(1px 1px at 160px 40px, rgba(255,255,255,0.7), transparent);
        background-size: 200px 100px;
        animation: starsMove 25s linear infinite reverse;
      }

      .vip-components-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
        gap: 2rem;
        padding: 2rem;
      }

      .component-card {
        background: rgba(255,255,255,0.05);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 20px;
        padding: 1.5rem;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
      }

      .component-card:hover {
        transform: translateY(-2px);
        border-color: rgba(99,102,241,0.4);
        box-shadow: 0 10px 40px rgba(99,102,241,0.2);
      }

      .component-card.full-width {
        grid-column: 1 / -1;
      }

      .component-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid rgba(255,255,255,0.1);
      }

      .component-title {
        margin: 0;
        font-size: 1.3rem;
        font-weight: 700;
        color: rgba(255,255,255,0.95);
      }

      .component-controls {
        display: flex;
        gap: 1rem;
        align-items: center;
      }

      .component-actions {
        display: flex;
        gap: 0.5rem;
      }

      .export-btn, .refresh-btn {
        background: linear-gradient(135deg, rgba(99,102,241,0.3), rgba(139,92,246,0.3));
        border: 1px solid rgba(99,102,241,0.4);
        color: white;
        padding: 0.5rem 1rem;
        border-radius: 12px;
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
      }

      .export-btn:hover, .refresh-btn:hover {
        background: linear-gradient(135deg, rgba(99,102,241,0.5), rgba(139,92,246,0.5));
        transform: translateY(-1px);
        box-shadow: 0 4px 15px rgba(99,102,241,0.3);
      }

      .time-filter {
        background: rgba(255,255,255,0.1);
        border: 1px solid rgba(255,255,255,0.2);
        color: white;
        padding: 0.5rem 1rem;
        border-radius: 8px;
        font-size: 0.9rem;
        cursor: pointer;
      }

      .component-content {
        position: relative;
      }

      /* Smart Money Analysis - New Design */
      .title-icon, .btn-icon {
        margin-right: 0.5rem;
        font-size: 1.1em;
      }

      .smart-money-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
        margin-bottom: 1.5rem;
      }

      .money-flow-visual {
        background: linear-gradient(135deg, rgba(15,23,42,0.8), rgba(30,41,59,0.8));
        border-radius: 16px;
        padding: 2rem;
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(99,102,241,0.2);
      }

      .flow-center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        z-index: 3;
      }

      .token-icon {
        font-size: 3rem;
        margin-bottom: 0.5rem;
        animation: pulse 2s ease-in-out infinite;
      }

      .token-label {
        color: white;
        font-weight: 700;
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 1px;
      }

      .money-streams {
        position: relative;
        width: 100%;
        height: 200px;
      }

      .money-stream {
        position: absolute;
        width: 3px;
        background: linear-gradient(45deg, #6366f1, #8b5cf6);
        border-radius: 2px;
        animation: streamFlow 3s ease-in-out infinite;
        box-shadow: 0 0 10px rgba(99,102,241,0.5);
      }

      .stream-node {
        position: absolute;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: linear-gradient(135deg, #22c55e, #16a34a);
        box-shadow: 0 0 15px rgba(34,197,94,0.6);
        animation: nodeGlow 2s ease-in-out infinite alternate;
      }

      .bundle-cards-container {
        display: flex;
        flex-direction: column;
        gap: 1rem;
      }

      .bundle-card {
        background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 12px;
        padding: 1rem;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
      }

      .bundle-card:hover {
        transform: translateY(-2px);
        border-color: rgba(99,102,241,0.4);
        box-shadow: 0 8px 32px rgba(99,102,241,0.2);
      }

      .bundle-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.75rem;
      }

      .bundle-type {
        font-weight: 600;
        color: white;
        font-size: 0.9rem;
      }

      .bundle-amount {
        color: #22c55e;
        font-weight: 700;
        font-size: 1rem;
      }

      .bundle-details {
        display: flex;
        justify-content: space-between;
        font-size: 0.8rem;
        color: rgba(255,255,255,0.7);
      }

      .bundle-indicator {
        position: absolute;
        top: 0;
        right: 0;
        width: 4px;
        height: 100%;
        border-radius: 0 12px 12px 0;
      }

      .bundle-indicator.whale { background: #ef4444; }
      .bundle-indicator.early { background: #22c55e; }
      .bundle-indicator.profit { background: #f59e0b; }

      .smart-insights-panel {
        background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(139,92,246,0.1));
        border: 1px solid rgba(99,102,241,0.2);
        border-radius: 16px;
        padding: 1.5rem;
        margin-top: 1.5rem;
      }

      .insight-header {
        display: flex;
        align-items: center;
        margin-bottom: 1rem;
      }

      .insight-icon {
        margin-right: 0.75rem;
        font-size: 1.2rem;
      }

      .insight-header h4 {
        margin: 0;
        color: white;
        font-size: 1.1rem;
        font-weight: 600;
      }

      .main-insight {
        color: rgba(255,255,255,0.9);
        line-height: 1.6;
        margin-bottom: 1.5rem;
        font-size: 0.95rem;
      }

      .insight-metrics {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
      }

      .metric {
        text-align: center;
        padding: 1rem;
        background: rgba(255,255,255,0.05);
        border-radius: 12px;
        border: 1px solid rgba(255,255,255,0.1);
      }

      .metric-value {
        display: block;
        font-size: 1.5rem;
        font-weight: 700;
        color: #22c55e;
        margin-bottom: 0.25rem;
      }

      .metric-label {
        font-size: 0.8rem;
        color: rgba(255,255,255,0.7);
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }

      /* AI Rug Prediction */
      .gauge-container {
        display: flex;
        justify-content: center;
        margin-bottom: 1.5rem;
      }

      .gauge-chart {
        width: 200px;
        height: 120px;
        position: relative;
      }

      .gauge-background {
        width: 100%;
        height: 60px;
        background: conic-gradient(from 180deg, #22c55e 0deg, #fbbf24 90deg, #ef4444 180deg);
        border-radius: 100px 100px 0 0;
        position: relative;
      }

      .gauge-background::after {
        content: '';
        position: absolute;
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: -5px;
        background: rgba(15,23,42,0.9);
        border-radius: 80px 80px 0 0;
      }

      .gauge-needle {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 3px;
        height: 70px;
        background: linear-gradient(180deg, white, #ff4444);
        transform-origin: bottom center;
        transform: translate(-50%, -90%) rotate(var(--angle, 0deg));
        border-radius: 1px;
        box-shadow: 0 0 15px rgba(255,255,255,0.9), 0 0 30px rgba(255,68,68,0.5);
        transition: transform 1s ease-out;
        z-index: 15;
      }

      .gauge-needle::after {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 50%;
        transform: translateX(-50%);
        width: 10px;
        height: 10px;
        background: white;
        border-radius: 50%;
        box-shadow: 0 0 15px rgba(255,255,255,0.9);
      }

      .gauge-center {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        z-index: 1;
      }

      .gauge-value {
        font-size: 1.5rem;
        font-weight: 900;
        color: white;
        text-shadow: 0 0 10px rgba(255,255,255,0.5);
      }

      .gauge-label {
        font-size: 0.8rem;
        color: rgba(255,255,255,0.7);
        margin-top: 0.25rem;
      }

      .rug-factors-list {
        background: rgba(255,255,255,0.05);
        border-radius: 12px;
        padding: 1rem;
        margin-bottom: 1rem;
      }

      .rug-factor-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 0;
        border-bottom: 1px solid rgba(255,255,255,0.1);
      }

      .rug-factor-item:last-child {
        border-bottom: none;
      }

      .factor-indicator {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
      }

      .rug-factor-item.high .factor-indicator { background: #ef4444; animation: anomalyPulse 1.5s ease-in-out infinite; }
      .rug-factor-item.medium .factor-indicator { background: #f59e0b; }
      .rug-factor-item.low .factor-indicator { background: #22c55e; }

      .factor-text {
        flex: 1;
        color: rgba(255,255,255,0.9);
        font-size: 0.9rem;
      }

      .factor-level {
        color: rgba(255,255,255,0.6);
        font-size: 0.8rem;
        font-weight: 600;
      }

      .rug-narrative {
        background: rgba(255,255,255,0.05);
        padding: 1rem;
        border-radius: 12px;
        border: 1px solid rgba(255,255,255,0.1);
      }

      .rug-narrative p {
        margin: 0;
        color: rgba(255,255,255,0.9);
        line-height: 1.5;
      }

      /* Enhanced Token Flow Dynamics */
      .flow-controls-group {
        display: flex;
        gap: 1.5rem;
        align-items: center;
      }

      .time-filter-group, .flow-type-group {
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }

      .filter-label, .control-label {
        font-size: 0.8rem;
        color: rgba(255,255,255,0.7);
        font-weight: 500;
        white-space: nowrap;
      }

      .time-filter.enhanced, .flow-type-filter {
        background: rgba(255,255,255,0.1);
        border: 1px solid rgba(255,255,255,0.2);
        color: white;
        padding: 0.5rem 1rem;
        border-radius: 8px;
        font-size: 0.9rem;
        cursor: pointer;
        transition: all 0.3s ease;
      }

      .time-filter.enhanced:hover, .flow-type-filter:hover {
        background: rgba(99,102,241,0.2);
        border-color: rgba(99,102,241,0.4);
      }

      .flow-metrics-bar {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
        margin-bottom: 2rem;
        padding: 1.5rem;
        background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(139,92,246,0.1));
        border-radius: 16px;
        border: 1px solid rgba(99,102,241,0.2);
      }

      .flow-metric {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1rem;
        background: rgba(255,255,255,0.05);
        border-radius: 12px;
        border: 1px solid rgba(255,255,255,0.1);
        transition: all 0.3s ease;
      }

      .flow-metric:hover {
        transform: translateY(-2px);
        border-color: rgba(99,102,241,0.4);
        box-shadow: 0 8px 32px rgba(99,102,241,0.15);
      }

      .metric-icon {
        font-size: 1.5rem;
        opacity: 0.8;
      }

      .metric-info {
        display: flex;
        flex-direction: column;
      }

      .flow-metric .metric-value {
        font-size: 1.2rem;
        font-weight: 700;
        color: white;
        line-height: 1;
        margin-bottom: 0.25rem;
      }

      .flow-metric .metric-label {
        font-size: 0.75rem;
        color: rgba(255,255,255,0.6);
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }

      .advanced-flow-container {
        background: linear-gradient(135deg, rgba(15,23,42,0.6), rgba(30,41,59,0.6));
        border: 1px solid rgba(99,102,241,0.2);
        border-radius: 16px;
        padding: 2rem;
        position: relative;
        min-height: 400px;
      }

      .flow-network {
        width: 100%;
        height: 350px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .flow-node-enhanced {
        position: absolute;
        background: linear-gradient(135deg, rgba(99,102,241,0.3), rgba(139,92,246,0.3));
        border: 2px solid rgba(99,102,241,0.6);
        border-radius: 16px;
        padding: 1rem 1.5rem;
        color: white;
        font-weight: 600;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
        min-width: 120px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.3);
      }

      .flow-node-enhanced:hover {
        transform: scale(1.05);
        border-color: rgba(99,102,241,0.8);
        box-shadow: 0 8px 32px rgba(99,102,241,0.4);
      }

      .flow-node-enhanced.central {
        background: linear-gradient(135deg, rgba(34,197,94,0.3), rgba(22,163,74,0.3));
        border-color: rgba(34,197,94,0.6);
        font-size: 1.1rem;
        padding: 1.5rem 2rem;
      }

      .flow-connection {
        position: absolute;
        background: linear-gradient(90deg, transparent, rgba(99,102,241,0.8), transparent);
        height: 3px;
        border-radius: 2px;
        animation: flowPulse 3s ease-in-out infinite;
        box-shadow: 0 0 10px rgba(99,102,241,0.5);
      }

      .flow-connection.inbound {
        background: linear-gradient(90deg, transparent, rgba(34,197,94,0.8), transparent);
        box-shadow: 0 0 10px rgba(34,197,94,0.5);
      }

      .flow-connection.outbound {
        background: linear-gradient(90deg, transparent, rgba(239,68,68,0.8), transparent);
        box-shadow: 0 0 10px rgba(239,68,68,0.5);
      }

      .flow-connection.large {
        height: 5px;
        background: linear-gradient(90deg, transparent, rgba(245,158,11,0.8), transparent);
        box-shadow: 0 0 15px rgba(245,158,11,0.5);
        animation: largePulse 2s ease-in-out infinite;
      }

      .flow-legend {
        position: absolute;
        bottom: 1rem;
        right: 1rem;
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 12px;
        padding: 1rem;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
      }

      .legend-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.8rem;
        color: rgba(255,255,255,0.8);
      }

      .legend-color {
        width: 12px;
        height: 3px;
        border-radius: 2px;
      }

      /* Whale Activity Analysis */
      .whale-overview-stats {
        margin-bottom: 2rem;
      }

      .whale-stats-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
        margin-bottom: 1.5rem;
      }

      .whale-stat-card {
        background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 12px;
        padding: 1.25rem;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
      }

      .whale-stat-card:hover {
        transform: translateY(-2px);
        border-color: rgba(99,102,241,0.4);
        box-shadow: 0 8px 32px rgba(99,102,241,0.15);
      }

      .whale-stat-card.large-whale { border-left: 4px solid #ef4444; }
      .whale-stat-card.medium-whale { border-left: 4px solid #f59e0b; }
      .whale-stat-card.small-whale { border-left: 4px solid #22c55e; }

      .stat-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.75rem;
      }

      .stat-title {
        font-size: 0.9rem;
        color: rgba(255,255,255,0.8);
        font-weight: 500;
      }

      .stat-count {
        font-size: 1.2rem;
        font-weight: 700;
        color: white;
      }

      .stat-details {
        text-align: center;
      }

      .stat-amount {
        font-size: 1.4rem;
        font-weight: 700;
        color: #3b82f6;
        margin-bottom: 0.25rem;
      }

      .stat-label {
        font-size: 0.8rem;
        color: rgba(255,255,255,0.6);
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }

      .whale-activity-feed {
        background: linear-gradient(135deg, rgba(15,23,42,0.6), rgba(30,41,59,0.6));
        border: 1px solid rgba(99,102,241,0.2);
        border-radius: 16px;
        padding: 1.5rem;
        margin-bottom: 2rem;
      }

      .feed-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid rgba(255,255,255,0.1);
      }

      .feed-header h4 {
        margin: 0;
        color: white;
        font-size: 1.1rem;
        font-weight: 600;
      }

      .activity-filters {
        display: flex;
        gap: 0.5rem;
      }

      .activity-filter {
        padding: 0.5rem 1rem;
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.1);
        color: rgba(255,255,255,0.7);
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
      }

      .activity-filter:hover {
        background: rgba(99,102,241,0.2);
        border-color: rgba(99,102,241,0.4);
        color: white;
      }

      .activity-filter.active {
        background: linear-gradient(135deg, rgba(99,102,241,0.3), rgba(139,92,246,0.3));
        border-color: rgba(99,102,241,0.5);
        color: white;
      }

      .activity-timeline {
        max-height: 300px;
        overflow-y: auto;
      }

      .activity-item {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1rem;
        margin-bottom: 0.75rem;
        background: rgba(255,255,255,0.03);
        border-radius: 12px;
        border: 1px solid rgba(255,255,255,0.05);
        transition: all 0.3s ease;
      }

      .activity-item:hover {
        background: rgba(255,255,255,0.05);
        border-color: rgba(99,102,241,0.3);
      }

      .activity-type {
        padding: 0.4rem 0.8rem;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        min-width: 60px;
        text-align: center;
      }

      .activity-type.buy {
        background: rgba(34,197,94,0.2);
        color: #86efac;
        border: 1px solid rgba(34,197,94,0.3);
      }

      .activity-type.sell {
        background: rgba(239,68,68,0.2);
        color: #fca5a5;
        border: 1px solid rgba(239,68,68,0.3);
      }

      .activity-details {
        flex: 1;
      }

      .activity-amount {
        font-size: 1rem;
        font-weight: 600;
        color: white;
        margin-bottom: 0.25rem;
      }

      .activity-wallet {
        font-size: 0.8rem;
        color: rgba(255,255,255,0.6);
        font-family: 'Courier New', monospace;
      }

      .activity-time {
        font-size: 0.8rem;
        color: rgba(255,255,255,0.5);
        text-align: right;
      }

      .whale-sentiment-panel {
        background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(139,92,246,0.1));
        border: 1px solid rgba(99,102,241,0.2);
        border-radius: 16px;
        padding: 1.5rem;
      }

      .sentiment-header h4 {
        margin: 0 0 1.5rem 0;
        color: white;
        font-size: 1.1rem;
        font-weight: 600;
      }

      .sentiment-metrics {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        align-items: center;
      }

      .sentiment-gauge {
        text-align: center;
      }

      .sentiment-indicator {
        position: relative;
        width: 120px;
        height: 60px;
        margin: 0 auto 1rem auto;
        background: linear-gradient(90deg, #ef4444 0%, #f59e0b 50%, #22c55e 100%);
        border-radius: 60px 60px 0 0;
        overflow: hidden;
      }

      .sentiment-needle {
        position: absolute;
        bottom: 0;
        left: calc(var(--sentiment, 50%) - 1.5px);
        width: 3px;
        height: 55px;
        background: linear-gradient(180deg, white, #6366f1);
        box-shadow: 0 0 15px rgba(255,255,255,0.9), 0 0 25px rgba(99,102,241,0.6);
        transition: left 1s ease-out;
        border-radius: 1px;
        z-index: 10;
      }

      .sentiment-needle::after {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 50%;
        transform: translateX(-50%);
        width: 8px;
        height: 8px;
        background: white;
        border-radius: 50%;
        box-shadow: 0 0 10px rgba(255,255,255,0.9);
      }

      .sentiment-labels {
        display: flex;
        justify-content: space-between;
        font-size: 0.7rem;
        color: rgba(255,255,255,0.6);
        margin-top: 0.5rem;
      }

      .sentiment-value {
        font-size: 1.2rem;
        font-weight: 700;
        color: #ef4444;
        margin-bottom: 0.5rem;
      }

      .sentiment-description {
        font-size: 0.9rem;
        color: rgba(255,255,255,0.8);
      }

      .sentiment-breakdown {
        display: flex;
        flex-direction: column;
        gap: 1rem;
      }

      .breakdown-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.75rem;
        background: rgba(255,255,255,0.05);
        border-radius: 8px;
      }

      .breakdown-label {
        font-size: 0.9rem;
        color: rgba(255,255,255,0.8);
      }

      .breakdown-value {
        font-weight: 600;
        color: white;
      }

      .breakdown-value.negative {
        color: #ef4444;
      }

      /* Click to Edit Functionality */
      .editable-text {
        cursor: pointer;
        position: relative;
        transition: all 0.3s ease;
        border-radius: 4px;
        padding: 2px 4px;
        margin: -2px -4px;
      }

      .editable-text:hover {
        background: rgba(99,102,241,0.1);
        border: 1px dashed rgba(99,102,241,0.4);
      }

      .editable-text.editing {
        background: rgba(99,102,241,0.2);
        border: 1px solid rgba(99,102,241,0.6);
      }

      .edit-input {
        background: rgba(15,23,42,0.9);
        border: 2px solid #6366f1;
        border-radius: 4px;
        color: white;
        font-family: inherit;
        font-size: inherit;
        font-weight: inherit;
        padding: 4px 8px;
        width: 100%;
        min-width: 100px;
        outline: none;
        box-shadow: 0 0 10px rgba(99,102,241,0.4);
      }

      .edit-input:focus {
        border-color: #8b5cf6;
        box-shadow: 0 0 15px rgba(139,92,246,0.6);
      }

      .edit-tooltip {
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0,0,0,0.9);
        color: white;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 0.7rem;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        z-index: 1000;
      }

      .editable-text:hover .edit-tooltip {
        opacity: 1;
      }

      .edit-mode-indicator {
        position: fixed;
        top: 20px;
        right: 20px;
        background: linear-gradient(135deg, #6366f1, #8b5cf6);
        color: white;
        padding: 8px 16px;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 600;
        z-index: 10000;
        opacity: 0;
        transform: translateX(100%);
        transition: all 0.3s ease;
        box-shadow: 0 4px 20px rgba(99,102,241,0.4);
      }

      .edit-mode-indicator.show {
        opacity: 1;
        transform: translateX(0);
      }

      /* Enhanced Tokenomics Lifecycle */
      .tokenomics-controls-group {
        display: flex;
        gap: 2rem;
        align-items: center;
        flex-wrap: wrap;
      }

      .timeline-control-enhanced {
        flex: 1;
        min-width: 300px;
      }

      .timeline-slider-enhanced {
        position: relative;
        margin-top: 0.5rem;
      }

      .timeline-slider {
        width: 100%;
        height: 6px;
        background: rgba(255,255,255,0.2);
        border-radius: 3px;
        outline: none;
        -webkit-appearance: none;
        appearance: none;
        position: relative;
        z-index: 2;
      }

      .timeline-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        background: linear-gradient(135deg, #6366f1, #8b5cf6);
        border-radius: 50%;
        cursor: pointer;
        box-shadow: 0 0 15px rgba(99,102,241,0.8);
        border: 2px solid white;
      }

      .timeline-progress-bar {
        position: absolute;
        top: 0;
        left: 0;
        height: 6px;
        background: linear-gradient(90deg, #22c55e, #6366f1);
        border-radius: 3px;
        transition: width 0.3s ease;
        pointer-events: none;
      }

      .timeline-markers {
        display: flex;
        justify-content: space-between;
        margin-top: 0.75rem;
        position: relative;
      }

      .marker {
        font-size: 0.75rem;
        color: rgba(255,255,255,0.6);
        text-align: center;
        padding: 0.25rem 0.5rem;
        background: rgba(255,255,255,0.05);
        border-radius: 12px;
        border: 1px solid rgba(255,255,255,0.1);
        transition: all 0.3s ease;
        cursor: pointer;
      }

      .marker.active {
        color: white;
        background: rgba(99,102,241,0.3);
        border-color: rgba(99,102,241,0.5);
        box-shadow: 0 0 10px rgba(99,102,241,0.3);
      }

      .view-controls {
        display: flex;
        gap: 0.5rem;
      }

      .view-btn {
        padding: 0.6rem 1.2rem;
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.1);
        color: rgba(255,255,255,0.7);
        border-radius: 12px;
        font-size: 0.8rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }

      .view-btn:hover {
        background: rgba(99,102,241,0.2);
        border-color: rgba(99,102,241,0.4);
        color: white;
      }

      .view-btn.active {
        background: linear-gradient(135deg, rgba(99,102,241,0.3), rgba(139,92,246,0.3));
        border-color: rgba(99,102,241,0.5);
        color: white;
      }

      .tokenomics-stats-overview {
        margin-bottom: 2rem;
      }

      .stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
      }

      .stat-card {
        background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 12px;
        padding: 1.25rem;
        display: flex;
        align-items: center;
        gap: 1rem;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
      }

      .stat-card:hover {
        transform: translateY(-2px);
        border-color: rgba(99,102,241,0.4);
        box-shadow: 0 8px 32px rgba(99,102,241,0.15);
      }

      .stat-card.supply { border-left: 4px solid #6366f1; }
      .stat-card.circulation { border-left: 4px solid #22c55e; }
      .stat-card.locked { border-left: 4px solid #f59e0b; }
      .stat-card.burned { border-left: 4px solid #ef4444; }

      .stat-icon {
        font-size: 2rem;
        opacity: 0.8;
      }

      .stat-content {
        display: flex;
        flex-direction: column;
      }

      .stat-value {
        font-size: 1.4rem;
        font-weight: 700;
        color: white;
        line-height: 1;
        margin-bottom: 0.25rem;
      }

      .stat-label {
        font-size: 0.8rem;
        color: rgba(255,255,255,0.7);
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }

      .tokenomics-visualization-container {
        position: relative;
        min-height: 400px;
        margin-bottom: 2rem;
      }

      .view-content {
        display: none;
      }

      .view-content.active {
        display: block;
      }

      .enhanced-tokenomics-flowchart {
        background: linear-gradient(135deg, rgba(15,23,42,0.6), rgba(30,41,59,0.6));
        border: 1px solid rgba(99,102,241,0.2);
        border-radius: 16px;
        padding: 2rem;
        min-height: 400px;
        position: relative;
        overflow-x: auto;
      }

      .tokenomics-timeline {
        background: linear-gradient(135deg, rgba(15,23,42,0.6), rgba(30,41,59,0.6));
        border: 1px solid rgba(99,102,241,0.2);
        border-radius: 16px;
        padding: 2rem;
        min-height: 400px;
      }

      .timeline-event {
        display: flex;
        align-items: center;
        margin-bottom: 2rem;
        position: relative;
      }

      .timeline-event::before {
        content: '';
        position: absolute;
        left: 2rem;
        top: 3rem;
        width: 2px;
        height: calc(100% + 1rem);
        background: linear-gradient(180deg, rgba(99,102,241,0.6), transparent);
      }

      .timeline-event:last-child::before {
        display: none;
      }

      .timeline-dot {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: linear-gradient(135deg, #6366f1, #8b5cf6);
        border: 3px solid rgba(255,255,255,0.2);
        margin-right: 2rem;
        flex-shrink: 0;
        box-shadow: 0 0 15px rgba(99,102,241,0.6);
      }

      .timeline-content {
        flex: 1;
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 12px;
        padding: 1.5rem;
      }

      .timeline-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: white;
        margin-bottom: 0.5rem;
      }

      .timeline-description {
        color: rgba(255,255,255,0.8);
        font-size: 0.9rem;
        line-height: 1.5;
      }

      .tokenomics-stage-enhanced {
        background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
        border: 2px solid rgba(99,102,241,0.4);
        border-radius: 16px;
        padding: 1.5rem;
        margin: 1rem;
        display: inline-block;
        min-width: 180px;
        text-align: center;
        color: white;
        position: relative;
        transition: all 0.3s ease;
        cursor: pointer;
      }

      .tokenomics-stage-enhanced:hover {
        transform: translateY(-5px);
        border-color: rgba(99,102,241,0.6);
        box-shadow: 0 10px 40px rgba(99,102,241,0.3);
      }

      .tokenomics-stage-enhanced.anomaly {
        border-color: #ef4444;
        background: linear-gradient(135deg, rgba(239,68,68,0.2), rgba(220,38,38,0.1));
        animation: anomalyPulse 2s ease-in-out infinite;
      }

      .stage-title {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
      }

      .stage-amount {
        font-size: 1.2rem;
        font-weight: 700;
        color: #22c55e;
        margin-bottom: 0.25rem;
      }

      .stage-percentage {
        font-size: 0.8rem;
        color: rgba(255,255,255,0.6);
      }

      .tokenomics-alerts {
        background: rgba(255,255,255,0.03);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 12px;
        padding: 1.5rem;
      }

      .alert-item {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        padding: 1rem;
        margin-bottom: 1rem;
        border-radius: 12px;
        transition: all 0.3s ease;
      }

      .alert-item:last-child {
        margin-bottom: 0;
      }

      .alert-item.warning {
        background: rgba(245,158,11,0.1);
        border: 1px solid rgba(245,158,11,0.2);
      }

      .alert-item.info {
        background: rgba(59,130,246,0.1);
        border: 1px solid rgba(59,130,246,0.2);
      }

      .alert-item.error {
        background: rgba(239,68,68,0.1);
        border: 1px solid rgba(239,68,68,0.2);
      }

      .alert-icon {
        font-size: 1.5rem;
        flex-shrink: 0;
      }

      .alert-content {
        flex: 1;
      }

      .alert-title {
        display: block;
        font-weight: 600;
        color: white;
        margin-bottom: 0.25rem;
      }

      .alert-message {
        color: rgba(255,255,255,0.8);
        font-size: 0.9rem;
        line-height: 1.4;
      }

      /* Developer Wallet Intelligence - New Design */
      .dev-analytics-overview {
        margin-bottom: 2rem;
      }

      .dev-summary-cards {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
        margin-bottom: 1.5rem;
      }

      .summary-card {
        background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 12px;
        padding: 1.25rem;
        display: flex;
        align-items: center;
        gap: 1rem;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
      }

      .summary-card:hover {
        transform: translateY(-2px);
        border-color: rgba(99,102,241,0.4);
        box-shadow: 0 8px 32px rgba(99,102,241,0.15);
      }

      .summary-card.risk {
        border-left: 4px solid #ef4444;
      }

      .summary-card.activity {
        border-left: 4px solid #3b82f6;
      }

      .summary-card.volume {
        border-left: 4px solid #22c55e;
      }

      .summary-card.trend {
        border-left: 4px solid #f59e0b;
      }

      .card-icon {
        font-size: 2rem;
        opacity: 0.8;
      }

      .card-content {
        display: flex;
        flex-direction: column;
      }

      .card-value {
        font-size: 1.5rem;
        font-weight: 700;
        color: white;
        line-height: 1;
        margin-bottom: 0.25rem;
      }

      .card-label {
        font-size: 0.8rem;
        color: rgba(255,255,255,0.7);
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }

      .dev-wallets-dashboard {
        background: linear-gradient(135deg, rgba(15,23,42,0.6), rgba(30,41,59,0.6));
        border: 1px solid rgba(99,102,241,0.2);
        border-radius: 16px;
        padding: 1.5rem;
      }

      .dashboard-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid rgba(255,255,255,0.1);
      }

      .dashboard-header h4 {
        margin: 0;
        color: white;
        font-size: 1.2rem;
        font-weight: 600;
      }

      .wallet-filters {
        display: flex;
        gap: 0.5rem;
      }

      .filter-btn {
        padding: 0.5rem 1rem;
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.1);
        color: rgba(255,255,255,0.7);
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
      }

      .filter-btn:hover {
        background: rgba(99,102,241,0.2);
        border-color: rgba(99,102,241,0.4);
        color: white;
      }

      .filter-btn.active {
        background: linear-gradient(135deg, rgba(99,102,241,0.3), rgba(139,92,246,0.3));
        border-color: rgba(99,102,241,0.5);
        color: white;
      }

      .wallets-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 1.5rem;
      }

      .advanced-wallet-card {
        background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 16px;
        padding: 1.5rem;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
      }

      .advanced-wallet-card:hover {
        transform: translateY(-3px);
        border-color: rgba(99,102,241,0.4);
        box-shadow: 0 12px 40px rgba(99,102,241,0.2);
      }

      .wallet-main-info {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 1rem;
      }

      .wallet-identity {
        flex: 1;
      }

      .wallet-address-display {
        font-family: 'Courier New', monospace;
        color: #6366f1;
        font-size: 0.9rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
      }

      .wallet-balance-display {
        font-size: 1.3rem;
        font-weight: 700;
        color: white;
        margin-bottom: 0.25rem;
      }

      .wallet-change {
        font-size: 0.8rem;
        font-weight: 600;
      }

      .wallet-change.positive { color: #22c55e; }
      .wallet-change.negative { color: #ef4444; }

      .wallet-risk-badge {
        padding: 0.4rem 0.8rem;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }

      .wallet-risk-badge.high {
        background: rgba(239,68,68,0.2);
        color: #fca5a5;
        border: 1px solid rgba(239,68,68,0.3);
        animation: riskPulse 2s ease-in-out infinite;
      }

      .wallet-risk-badge.medium {
        background: rgba(245,158,11,0.2);
        color: #fbbf24;
        border: 1px solid rgba(245,158,11,0.3);
      }

      .wallet-risk-badge.low {
        background: rgba(34,197,94,0.2);
        color: #86efac;
        border: 1px solid rgba(34,197,94,0.3);
      }

      .wallet-activity-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        margin: 1rem 0;
      }

      .activity-stat {
        background: rgba(255,255,255,0.05);
        border-radius: 8px;
        padding: 0.75rem;
        text-align: center;
      }

      .stat-value {
        display: block;
        font-size: 1.2rem;
        font-weight: 700;
        color: #3b82f6;
        margin-bottom: 0.25rem;
      }

      .stat-label {
        font-size: 0.75rem;
        color: rgba(255,255,255,0.6);
        text-transform: uppercase;
      }

      .wallet-transactions-preview {
        background: rgba(255,255,255,0.03);
        border-radius: 8px;
        padding: 1rem;
        margin-top: 1rem;
      }

      .transactions-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.75rem;
      }

      .transactions-title {
        font-size: 0.9rem;
        color: rgba(255,255,255,0.8);
        font-weight: 600;
      }

      .view-all-link {
        font-size: 0.75rem;
        color: #6366f1;
        text-decoration: none;
        font-weight: 500;
      }

      .view-all-link:hover {
        color: #8b5cf6;
      }

      .transaction-preview-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0;
        border-bottom: 1px solid rgba(255,255,255,0.05);
        font-size: 0.8rem;
      }

      .transaction-preview-item:last-child {
        border-bottom: none;
      }

      .transaction-type-display {
        color: rgba(255,255,255,0.7);
      }

      .transaction-amount-display {
        font-weight: 600;
        color: white;
      }

      .transaction-time {
        color: rgba(255,255,255,0.5);
        font-size: 0.7rem;
      }

      .vip-footer {
        padding: 1rem 2rem;
        border-top: 1px solid rgba(255,255,255,0.1);
        text-align: center;
      }

      .watermark {
        color: rgba(255,255,255,0.4);
        font-size: 0.8rem;
      }

      .loading-spinner {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: rgba(255,255,255,0.6);
        font-size: 0.9rem;
      }

      .loading-spinner::after {
        content: '';
        width: 20px;
        height: 20px;
        border: 2px solid rgba(255,255,255,0.3);
        border-top: 2px solid #6366f1;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-left: 0.5rem;
      }

      /* Animations */
      @keyframes vipPanelSlideIn {
        from {
          opacity: 0;
          transform: translateY(30px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @keyframes badgePulse {
        0%, 100% { transform: scale(1); box-shadow: 0 0 20px rgba(255,215,0,0.3); }
        50% { transform: scale(1.05); box-shadow: 0 0 30px rgba(255,215,0,0.5); }
      }

      @keyframes sparkle {
        0%, 100% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.7; transform: scale(1.1); }
      }

      @keyframes starsMove {
        0% { transform: translateX(0) translateY(0); }
        25% { transform: translateX(-10px) translateY(-5px); }
        50% { transform: translateX(-5px) translateY(-10px); }
        75% { transform: translateX(5px) translateY(-5px); }
        100% { transform: translateX(0) translateY(0); }
      }

      @keyframes bubbleFloat {
        0%, 100% { transform: translateY(0) scale(1); }
        50% { transform: translateY(-10px) scale(1.02); }
      }

      @keyframes anomalyPulse {
        0%, 100% { opacity: 1; box-shadow: 0 0 5px currentColor; }
        50% { opacity: 0.7; box-shadow: 0 0 15px currentColor; }
      }

      @keyframes statusPulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.7; }
      }

      @keyframes flowPulse {
        0%, 100% { opacity: 0.8; transform: translateY(-50%) scaleX(1); }
        50% { opacity: 1; transform: translateY(-50%) scaleX(1.1); }
      }

      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }

      @keyframes flowParticle {
        0% { transform: translateX(0); opacity: 1; }
        100% { transform: translateX(100px); opacity: 0; }
      }

      @keyframes streamFlow {
        0%, 100% { opacity: 0.6; transform: scaleY(1); }
        50% { opacity: 1; transform: scaleY(1.2); }
      }

      @keyframes nodeGlow {
        0% { box-shadow: 0 0 15px rgba(34,197,94,0.6); }
        100% { box-shadow: 0 0 25px rgba(34,197,94,0.9); }
      }

      @keyframes riskPulse {
        0%, 100% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.8; transform: scale(1.05); }
      }

      @keyframes pulse {
        0%, 100% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.8; transform: scale(1.1); }
      }

      @keyframes largePulse {
        0%, 100% { opacity: 0.8; transform: scaleY(1); }
        50% { opacity: 1; transform: scaleY(1.3); }
      }

      /* Mobile Responsive */
      @media (max-width: 768px) {
        .vip-analytics-panel {
          margin: 1rem 0;
          border-radius: 16px;
        }

        .vip-header {
          padding: 1.5rem;
        }

        .vip-header-content {
          flex-direction: column;
          gap: 1rem;
          text-align: center;
        }

        .vip-title {
          font-size: 2rem;
        }

        .vip-components-grid {
          grid-template-columns: 1fr;
          gap: 1.5rem;
          padding: 1rem;
        }

        .component-card {
          padding: 1rem;
        }

        .component-header {
          flex-direction: column;
          gap: 1rem;
          align-items: stretch;
        }

        .component-controls {
          justify-content: center;
        }

        .bubble-chart-container,
        .sankey-container {
          height: 250px;
        }

        .tokenomics-flowchart {
          min-height: 300px;
          padding: 1rem;
        }

        .smart-money-grid {
          grid-template-columns: 1fr;
          gap: 1rem;
        }

        .insight-metrics {
          grid-template-columns: 1fr;
        }

        .dev-summary-cards {
          grid-template-columns: repeat(2, 1fr);
        }

        .wallets-container {
          grid-template-columns: 1fr;
        }

        .wallet-activity-grid {
          grid-template-columns: 1fr;
        }

        .flow-metrics-bar {
          grid-template-columns: repeat(2, 1fr);
        }

        .stats-grid {
          grid-template-columns: repeat(2, 1fr);
        }

        .tokenomics-controls-group {
          flex-direction: column;
          gap: 1rem;
        }

        .timeline-control-enhanced {
          min-width: 100%;
        }

        .flow-controls-group {
          flex-direction: column;
          gap: 1rem;
          align-items: stretch;
        }

        .whale-stats-grid {
          grid-template-columns: 1fr;
        }

        .sentiment-metrics {
          grid-template-columns: 1fr;
          gap: 1rem;
        }

        .wallet-charts {
          grid-template-columns: 1fr;
        }

        .money-bubble {
          font-size: 0.7rem;
        }

        .gauge-chart {
          width: 150px;
          height: 90px;
        }

        .flow-visualization {
          padding: 1rem;
          flex-direction: column;
          gap: 1rem;
        }

        .timeline-slider-container {
          min-width: 150px;
        }
      }

      @media (max-width: 480px) {
        .vip-header {
          padding: 1rem;
        }

        .vip-title {
          font-size: 1.5rem;
        }

        .vip-components-grid {
          padding: 0.5rem;
          gap: 1rem;
        }

        .component-card {
          padding: 0.75rem;
        }

        .bubble-chart-container,
        .sankey-container {
          height: 200px;
        }

        .tokenomics-flowchart {
          min-height: 250px;
          padding: 0.75rem;
        }

        .dev-summary-cards {
          grid-template-columns: 1fr;
          gap: 0.75rem;
        }

        .summary-card {
          padding: 1rem;
        }

        .card-value {
          font-size: 1.2rem;
        }

        .money-flow-visual {
          padding: 1rem;
        }

        .token-icon {
          font-size: 2rem;
        }

        .wallet-filters {
          flex-wrap: wrap;
          gap: 0.25rem;
        }

        .filter-btn {
          padding: 0.4rem 0.8rem;
          font-size: 0.75rem;
        }

        .flow-metrics-bar {
          grid-template-columns: 1fr;
          gap: 0.75rem;
        }

        .stats-grid {
          grid-template-columns: 1fr;
        }

        .advanced-flow-container {
          padding: 1rem;
          min-height: 300px;
        }

        .enhanced-tokenomics-flowchart,
        .tokenomics-timeline {
          padding: 1rem;
          min-height: 300px;
        }

        .view-controls {
          flex-direction: column;
          gap: 0.5rem;
        }

        .view-btn {
          width: 100%;
          justify-content: center;
        }
      }

      * {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: default;
        -webkit-user-select: auto;
        -moz-user-select: auto;
        -ms-user-select: auto;
        user-select: auto;
        cursor: inherit;
      }
      input, textarea, [contenteditable] {
        -webkit-user-select: text !important;
        -moz-user-select: text !important;
        -ms-user-select: text !important;
        user-select: text !important;
        -webkit-touch-callout: default !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
      }

      .results-section {
        contain: none;
        will-change: auto;
        transform: none;
      }
      .modal, .menu-container {
        contain: none;
        will-change: auto;
        transform: none;
      }
      .button, .tool-button, .key-metric-card, .market-metric-card {
        contain: none;
        will-change: auto;
        backface-visibility: hidden;
      }
      .bubble-map-container {
        contain: none;
        content-visibility: auto;
      }
      .bundles-section, .bubble-maps-section {
        contain: none;
        content-visibility: auto;
      }

      .lazy-load {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.3s ease, transform 0.3s ease;
      }
      .loaded {
        opacity: 1;
        transform: translateY(0);
      }

      .results-section {
        min-height: auto;
        width: 100%;
        margin-bottom: 2rem;
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
      }
      
      .results-section.has-content,
      .results-section.visible {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
      }
      
      .results-section.hidden {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
      }
      
      .results-section.hidden {
        display: none !important;
      }

      .results-section.visible {
        display: block !important;
        opacity: 1 !important;
        transform: none !important;
      }
      
      @media (max-width: 768px) {
        .results-section.has-content,
        .results-section.visible {
          display: block !important;
          visibility: visible !important;
          opacity: 1 !important;
        }
        
        .results-section:not(.has-content):not(.visible) {
          display: none !important;
          visibility: hidden !important;
          opacity: 0 !important;
        }
        
        .results-section {
          transition: opacity 0.5s ease !important;
        }
      }
      
      :root {
        --vh: 1vh;
      }

      #resultsSection {
  min-height: auto !important;
  height: auto !important;
  overflow: hidden !important;
  contain: none !important;
  will-change: auto !important;
  transform: none !important;
}




      @media (max-width: 768px) {
        #resultsSection.visible {
          display: block !important;
          opacity: 1 !important;
          transform: translateY(0) !important;
          transition: opacity 0.5s ease !important;
        }
        
        
        #resultsSection:not(.visible):not(.has-content) {
          display: none !important;
          visibility: hidden !important;
          opacity: 0 !important;
        }
        
        #resultsSection {
          display: none !important;
          visibility: hidden !important;
          opacity: 0 !important;
        }
        
      }

      body, html, * {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
        font-optical-sizing: auto;
        font-style: normal;
      }
      

      .light-mode {
        --bg-dark: #ffffff;
        --bg-glass: rgba(255, 255, 255, 0.9);
        --text-primary: #1a1a1a;
        --text-secondary: #666666;
        --border-glass: rgba(0, 0, 0, 0.1);
        --accent-primary: #5560e8;
        --button-glow: rgba(85, 96, 232, 0.35);
        --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
        --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.2);
        --shadow-glow: 0 0 20px rgba(85, 96, 232, 0.28);
      }
      .light-mode body {
        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
      }
      .light-mode html, .light-mode body {
        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
      }
      

      .reduce-motion * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
      
      .low-bandwidth * {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
      }
      .low-bandwidth .particle-canvas {
        display: none !important;
      }

      .bubble-map-container svg {
        shape-rendering: optimizeSpeed;
        text-rendering: optimizeSpeed;
      }

      .transaction-item,
      .dex-pair-item,
      .key-metric-card {
        isolation: isolate;
      }
      @media (max-width: 768px) {

        .main-content {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-align: center;
          padding: 0 1rem;
        }
        .scanner-card {
          width: 100%;
          max-width: 400px;
          margin: 0 auto;
          box-sizing: border-box;
        }
        .search-container {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
        }
        .search-input {
          flex-grow: 1;
          max-width: none;
        }
        

        * {
          box-sizing: border-box !important;
        }
        

        .main-content {
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
          justify-content: center !important;
          width: 100% !important;
          text-align: center !important;
        }
        

        .scanner-card {
          width: 90% !important;
          max-width: 400px !important;
          margin: 0 auto !important;
          display: block !important;
          position: relative !important;
          left: auto !important;
          right: auto !important;
          transform: none !important;
        }
        

        .scanner-input-wrapper {
          width: 100% !important;
          margin: 0 auto !important;
          display: flex !important;
          justify-content: center !important;
          position: relative !important;
        }
        

        #contractInput {
          width: 100% !important;
          max-width: 350px !important;
          margin: 0 auto !important;
          display: block !important;
          text-align: center !important;
          padding: 1.25rem 4rem 1.25rem 1.5rem !important;
          background: rgba(255, 255, 255, 0.1) !important;
          border: 2px solid rgba(99, 102, 241, 0.3) !important;
          border-radius: 20px !important;
          color: #ffffff !important;
          font-size: 16px !important;
          position: relative !important;
          transform: none !important;
          left: auto !important;
          right: auto !important;
          text-overflow: ellipsis !important;
          white-space: nowrap !important;
          overflow: hidden !important;
        }
        

        input[placeholder*="contract"],
        input[placeholder*="Solana"],
        input[placeholder*="address"] {
          width: 100% !important;
          max-width: 350px !important;
          margin: 0 auto !important;
          display: block !important;
          text-align: center !important;
          padding: 1.25rem 4rem 1.25rem 1.5rem !important;
          background: rgba(255, 255, 255, 0.1) !important;
          border: 2px solid rgba(99, 102, 241, 0.3) !important;
          border-radius: 20px !important;
          color: #ffffff !important;
          font-size: 16px !important;
          position: relative !important;
          transform: none !important;
          left: auto !important;
          right: auto !important;
          box-sizing: border-box !important;
          text-overflow: ellipsis !important;
          white-space: nowrap !important;
          overflow: hidden !important;
        }
        

        .search-icon, #searchIcon {
          position: absolute !important;
          right: 1rem !important;
          top: 50% !important;
          transform: translateY(-50%) !important;
          color: #9ca3af !important;
          width: 20px !important;
          height: 20px !important;
        }
        

        .scanner-particle,
        .particle,
        .flow-particles,
        .bubble-glow {
          animation-duration: 8s !important;
          animation-iteration-count: 3 !important;
        }
        .loading-spinner::before {
          display: none;
        }
        .modal::before,
        .results-section::after {
          display: none;
        }

        .bubble-map-container svg animate,
        .bubble-map-container svg animateTransform {
          animation-play-state: paused !important;
        }

        .bubble-map-container {
          transform: translateZ(0);
          -webkit-transform: translateZ(0);
          contain: strict;
        }

        .modal::before,
        .results-section::before,
        .key-metrics::before {
          background: var(--bg-glass) !important;
        }

        .modal,
        .menu-container,
        .scanner-input-wrapper,
        .custom-chart-container,
        .analytics-card,
        .hero-card,
        .dashboard-card,
        .security-card,
        .trading-card,
        .live-trades-section {
          backdrop-filter: blur(8px) !important;
          -webkit-backdrop-filter: blur(8px) !important;
        }

        .button, .tool-button, .key-metric-card {
          min-height: 44px;
          min-width: 44px;
        }
        

        * {
          -webkit-font-smoothing: antialiased !important;
          -moz-osx-font-smoothing: grayscale !important;
          text-rendering: optimizeLegibility !important;
        }
        

        .token-name,
        .price-value,
        .stat-value,
        .metric-value,
        h1, h2, h3, h4, h5, h6,
        .trade-item,
        .pair-item,
        .dex-name,
        .pair-price {
          text-shadow: none !important;
          transform: translateZ(0) !important;
          will-change: auto !important;
        }
      }
      @media (prefers-reduced-motion: reduce) {

        *, *::before, *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
        }
        .bubble-map-container svg animate,
        .bubble-map-container svg animateTransform {
          display: none !important;
        }
        
        .credits-icon .sparkle {
          animation: none !important;
          opacity: 0 !important;
        }
        
        .credits-gem {
          animation: none !important;
        }
        
        .credits-icon [style*="animation"] {
          animation: none !important;
        }
      }
      html, body { 
        height: auto; 
        min-height: 100vh;
        margin: 0; 
        padding: 0; 
        background: radial-gradient(ellipse at top, #0f172a 0%, #000000 50%, #000000 100%); 
        color: var(--text-primary); 
        position: relative; 
        cursor: auto !important; 
        overflow-x: hidden;
      }
      body { 
        display: flex; 
        flex-direction: column; 
        min-height: 100vh; 
        background-attachment: fixed;
        cursor: auto !important; 
        padding-bottom: 80px;
        background-color: var(--bg-dark);
        margin: 0;
        padding: 0;
      }
      @media (min-width: 1025px) {
        html, body { -ms-overflow-style: none; scrollbar-width: none; }
        html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0 !important; height: 0 !important; }
      }
      * {
        cursor: inherit;
      }
      button, a, input, .button, .tool-button, .primary-btn, .secondary-btn {
        cursor: pointer !important;
      }
      body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(99, 102, 241, 0.12) 0%, transparent 50%);
        pointer-events: none;
        z-index: 1;
        transition: all 0.2s ease;
      }
      
      @media (max-width: 768px) {
        body::before {
          display: none !important;
        }
      }
      .container { 
        max-width: 1280px; 
        margin: 0 auto; 
        padding: 1rem; 
        padding-bottom: 0;
        position: relative; 
        z-index: 2; 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        justify-content: flex-start; 
        flex: 1;
      }
      .top-left-logo { position: absolute; top: 0.5rem; left: 0.5rem; width: 80px; height: auto; z-index: 3; }
      .menu-container {
        position: fixed;
        top: 50%;
        left: 100px;
        width: 280px;
        background: var(--bg-glass);
        backdrop-filter: blur(20px);
        transform: translateY(-50%);
        -webkit-backdrop-filter: blur(20px);
        border-radius: 16px;
        box-shadow: var(--shadow-lg), inset 0 1px 0 var(--border-glass);
        border: 1px solid var(--border-glass);
        z-index: 1000;
        padding: 1.5rem;
        transform-style: preserve-3d;
        perspective: 1000px;
        transition: transform 0.15s ease, box-shadow 0.3s ease;
        overflow: visible;
        will-change: opacity;
      }
      .menu-container.hiding {
        transform: translateY(-50%) translateX(-100%) scale(0.98);
        opacity: 0;
        filter: blur(5px);
      }
      .menu-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--gradient-card);
        opacity: 0.5;
        z-index: -1;
      }
.menu-container.hidden {
  display: none !important;
}

.menu-container:not(.hidden) {
  display: block !important;
  opacity: 1;
  visibility: visible !important;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.hamburger.active div:nth-child(1) {
  transform: rotate(-45deg) translate(-9px, 6px);
}

.hamburger.active div:nth-child(2) {
  opacity: 0;
}

.hamburger.active div:nth-child(3) {
  transform: rotate(45deg) translate(-8px, -8px);
}

@media (max-width: 768px) {
  .menu-container:not(.hidden) {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 280px !important;
    max-width: calc(100vw - 2rem) !important;
    max-height: 240px !important;
    background: var(--bg-glass) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-radius: 16px !important;
    border: 1px solid var(--border-glass) !important;
    box-shadow: var(--shadow-lg) !important;
    z-index: 1000 !important;
    display: block !important;
    overflow: visible !important;
    opacity: 1 !important;
    padding: 0.5rem !important;
    box-sizing: border-box !important;
    margin: 4rem auto !important;
  }
}
@media (max-width: 768px) {
  .menu-container:not(.hidden) {
    height: 240px !important;
    max-height: 240px !important;
  }
  .menu-container:not(.hidden) .menu {
    height: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: repeat(3, 1fr) !important;
    gap: 0.15rem !important;
    align-items: center !important;
    justify-items: center !important;
    align-content: center !important;
    justify-content: center !important;
  }
  .menu-container:not(.hidden) .menu li,
  .menu-container:not(.hidden) .menu li a {
    height: 100% !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    min-height: 60px !important;
    line-height: 1.2 !important;
  }
  .menu-container:not(.hidden) .menu li a .menu-icon {
    width: 22px !important;
    height: 22px !important;
    margin-bottom: 0.3rem !important;
    flex-shrink: 0 !important;
  }
  .menu li a {
  will-change: transform;
}

.menu li a:hover {
  transform: translateX(6px) scale(1.02);
}
  .credits-icon {
    width: 28px !important;
    height: 28px !important;
  }
  
  .credits-icon .credits-gem {
    width: 24px !important;
    height: 24px !important;
  }
  
  .credits-icon .sparkle {
    animation-duration: 4s !important;
  }
  
  @keyframes creditsPulse {
    0%, 100% { 
      transform: rotate(45deg) scale(1);
      box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
    }
    50% { 
      transform: rotate(45deg) scale(1.01);
      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
    }
  }
  .menu-container:not(.hidden) .menu li a span {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
  }
  .menu-container:not(.hidden) .beta-tag {
    position: absolute !important;
    top: -14px !important;
    right: -12px !important;
    background: var(--gradient-primary) !important;
    color: white !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    text-transform: uppercase !important;
    z-index: 10000 !important;
    transform: rotate(45deg) !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    animation: betaPulse 2s infinite !important;
    pointer-events: none !important;
  }
}
      .menu-container.collapsed {
        width: 250px;
        transform: translateX(-100%);
        opacity: 0;
        pointer-events: none;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .menu-container.collapsed.show {
        transform: translateX(0);
        opacity: 1;
        pointer-events: all;
      }
      @media (max-width: 768px) {
        .menu-container.collapsed {
          position: fixed;
          top: 100px;
          left: 1rem;
          right: 1rem;
          width: calc(100% - 2rem);
          z-index: 1001;
          background: var(--bg-glass);
          backdrop-filter: blur(30px);
          -webkit-backdrop-filter: blur(30px);
          border-radius: 16px;
          box-shadow: var(--shadow-lg);
          border: 1px solid var(--border-glass);
          transform: translateY(-20px);
        }
        .menu-container.collapsed.show {
          transform: translateY(0);
        }
      }
@media (max-width: 768px) {
  .menu-container {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    width: 280px;
    max-width: calc(100vw - 2rem);
    max-height: 240px;
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    border: 1px solid var(--border-glass);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    display: block;
    overflow: hidden;
    transition: all 0.3s ease;
    padding: 0.5rem;
    box-sizing: border-box;
    margin: 4rem auto;
  }
}
.hidden {
  display: none !important;
}
.menu-container:hover {
  box-shadow: var(--shadow-glow), var(--shadow-lg), inset 0 1px 0 var(--border-glass);
  border-color: var(--accent-primary);
  
}


@media (min-width: 769px) {
  .menu-container {
    top: 50% !important;
    left: 100px !important;
    transform-origin: center !important;
    transform: translateY(-50%) !important;
  }
}
      .menu-icon {
        width: 20px;
        height: 20px;
        margin-right: 10px;
        vertical-align: middle;
      }
      .beta-tag {
          position: absolute;
          top: -8px;
          right: -8px;
          background: linear-gradient(135deg, #facc15, #f59e0b);
          color: #1a1a1a;
          font-size: 0.75rem;
          font-weight: 800;
          letter-spacing: 0.5px;
          padding: 4px 8px;
          border-radius: 6px;
          text-transform: uppercase;
          z-index: 1002;
          transform: rotate(45deg);
          box-shadow: 0 4px 14px rgba(250, 204, 21, 0.35);
          border: 1px solid rgba(250, 204, 21, 0.6);
          animation: betaPulse 2s infinite;
          pointer-events: none;
          overflow: visible;
      }
      @keyframes betaPulse {
        0%, 100% { transform: rotate(45deg) scale(1); box-shadow: var(--shadow-md); }
        50% { transform: rotate(45deg) scale(1.05); box-shadow: var(--shadow-glow), var(--shadow-md); }
      }
      
      
      @keyframes creditsPulse {
        0%, 100% { 
          transform: rotate(45deg) scale(1);
          box-shadow: 
            inset 0 1px 0 rgba(255,255,255,0.3),
            inset 0 -1px 0 rgba(0,0,0,0.2),
            0 4px 12px rgba(99, 102, 241, 0.4),
            0 0 0 1px rgba(255,255,255,0.1);
        }
        50% { 
          transform: rotate(45deg) scale(1.02);
          box-shadow: 
            inset 0 1px 0 rgba(255,255,255,0.4),
            inset 0 -1px 0 rgba(0,0,0,0.3),
            0 6px 20px rgba(99, 102, 241, 0.6),
            0 0 0 1px rgba(255,255,255,0.2);
        }
      }
      
      @keyframes centerSparkle {
        0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) rotate(-45deg) scale(1); }
        50% { opacity: 1; transform: translate(-50%, -50%) rotate(-45deg) scale(1.2); }
      }
      
      @keyframes sparkle1 {
        0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
        20%, 80% { opacity: 1; transform: scale(1) rotate(180deg); }
      }
      
      @keyframes sparkle2 {
        0%, 100% { opacity: 0; transform: scale(0) translateY(0); }
        25%, 75% { opacity: 0.8; transform: scale(1.2) translateY(-4px); }
      }
      
      @keyframes sparkle3 {
        0%, 100% { opacity: 0; transform: scale(0) translateX(0); }
        30%, 70% { opacity: 0.9; transform: scale(1) translateX(3px); }
      }
      
      @keyframes sparkle4 {
        0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
        35%, 65% { opacity: 0.7; transform: scale(1.1) rotate(90deg); }
      }
      .menu { list-style: none; padding: 0; margin: 0; }
      .menu li { margin: 0.5rem 0; }
      .menu li a { 
        display: block; 
        padding: 0.875rem 1.25rem; 
        color: var(--text-primary); 
        text-decoration: none; 
        font-size: 0.95rem; 
        font-weight: 500;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
        border-radius: 12px;
        position: relative;
        overflow: hidden;
      }
      .menu li a::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: var(--gradient-primary);
        opacity: 0.1;
        transition: left 0.5s ease;
        z-index: -1;
      }
      .menu li a:hover { 
        background: var(--bg-glass); 
        color: var(--accent-primary); 
        box-shadow: var(--shadow-md);
      }
      .menu li a:hover::before {
        left: 0;
      }
      .hamburger { 
        display: none; 
        background: var(--bg-glass); 
        border: 1px solid var(--border-glass); 
        cursor: pointer; 
        padding: 0.75rem; 
        position: fixed; 
        top: 1rem; 
        left: 1rem; 
        z-index: 1002; 
        border-radius: 12px;
        transition: all 0.3s ease;
        -webkit-transition: all 0.3s ease;
        -webkit-tap-highlight-color: transparent;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        box-shadow: var(--shadow-md);
      }
      .hamburger.visible {
        display: block;
      }
      .hamburger span { 
        display: block; 
        width: 20px; 
        height: 2px; 
        background: var(--text-primary); 
        margin: 4px 0; 
        transition: all 0.3s ease;
        -webkit-transition: all 0.3s ease;
        border-radius: 1px;
      }
      .hamburger:active {
        transform: scale(0.95) translateZ(0);
        -webkit-transform: scale(0.95) translateZ(0);
        background: rgba(99, 102, 241, 0.1);
      }
      #toolsBar {
  display: none !important;
}
      #toolsBar.visible {
  display: grid !important;
}
      .hamburger.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
        -webkit-transform: rotate(45deg) translate(5px, 5px);
      }
      .hamburger.active span:nth-child(2) {
        opacity: 0;
      }
      .hamburger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
        -webkit-transform: rotate(-45deg) translate(7px, -6px);
      }
      @media (max-width: 768px) { 
        .hamburger { display: block; } 
        
        
        .footer-links { 
          gap: 0.75rem !important; 
          padding: 1rem 0.5rem !important; 
          flex-wrap: wrap !important;
          justify-content: center !important;
        }
        
        .footer-links a { 
          font-size: 0.85rem !important; 
          padding: 0.4rem 0.8rem !important;
          white-space: nowrap !important;
        }
        
        .social-links { 
          gap: 0.5rem !important; 
          justify-content: center !important;
          flex-wrap: wrap !important;
        }
        
        .social-links a { 
          width: 40px !important; 
          height: 40px !important; 
        }
        
        .social-links img { 
          width: 18px !important; 
          height: 18px !important; 
        }
        
        
        .menu-container .menu {
          grid-template-columns: repeat(3, 1fr) !important;
          gap: 0.25rem !important;
          padding: 0 !important;
          margin: 0 !important;
        }
        
        .menu-container .menu li {
          margin: 0 !important;
          padding: 0 !important;
        }
        
        .menu-container .menu li a {
          padding: 0.4rem 0.2rem !important;
          font-size: 0.6rem !important;
          min-height: auto !important;
          height: auto !important;
        }
        
        .menu-container .menu li a .menu-icon {
          width: 14px !important;
          height: 14px !important;
          margin-bottom: 0.1rem !important;
        }
      }
      .footer-links { 
        display: flex; 
        flex-wrap: wrap; 
        align-items: center; 
        justify-content: center; 
        gap: 1.5rem; 
        padding: 1.5rem 0; 
        z-index: 3; 
        width: 100%; 
        border-top: 1px solid var(--border-glass);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        background: var(--bg-dark);
        margin-top: 2rem;
      }
      .footer-links a { 
        color: var(--text-secondary); 
        font-size: 0.95rem; 
        font-weight: 500;
        text-decoration: none; 
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
        padding: 0.5rem 1rem;
        border-radius: 8px;
        position: relative;
      }
      .footer-links a::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--gradient-primary);
        opacity: 0;
        border-radius: 8px;
        transition: opacity 0.3s ease;
        z-index: -1;
      }
      .footer-links a:hover { 
        color: var(--accent-primary); 
        transform: translateY(-3px) scale(1.05);
      }
      .footer-links a:hover::before {
        opacity: 0.1;
      }
      .social-links { display: flex; gap: 1rem; }
      .social-links a { 
        display: inline-flex; 
        align-items: center; 
        justify-content: center; 
        width: 44px; 
        height: 44px; 
        background: var(--bg-glass);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-radius: 12px;
        border: 1px solid var(--border-glass);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
      }
      .social-links a::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--gradient-primary);
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: -1;
      }
      .social-links img { width: 20px; height: 20px; filter: none; transition: all 0.3s ease; }
      .social-links a:hover { 
        transform: translateY(-4px) scale(1.08) rotate(5deg); 
        box-shadow: var(--shadow-glow), 0 8px 25px rgba(99, 102, 241, 0.4);
        border-color: var(--accent-primary);
      }
      .social-links a:hover::before {
        opacity: 0.2;
      }
      .social-links a:hover img { 
        filter: brightness(1.2) drop-shadow(0 0 8px rgba(99, 102, 241, 0.5)); 
        transform: scale(1.1);
      }
      .logo { width: 120px; height: auto; margin: 0.5rem auto; display: block; }
      .modal-logo { width: 120px; height: auto; margin: 0 auto 0.5rem; display: block; animation: float 3s ease-in-out infinite; position: relative; }
      .modal-logo::after { content: ''; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%); transform: translate(-50%, -50%); opacity: 0.5; animation: glow 3s ease-in-out infinite; z-index: -1; }
      @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
      @keyframes glow { 0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.1); } }
      .main-content { 
        text-align: center; 
        position: relative; 
        width: 100%; 
        max-width: 800px;
        flex-grow: 1; 
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        margin: 0 auto;
        padding-top: 2rem;
      }
      .main-content h1 { 
        font-size: 3.5rem; 
        font-weight: 900; 
        margin-bottom: 1rem; 
        background: var(--gradient-primary);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-align: center;
        letter-spacing: -0.025em;
        line-height: 1.1;
        animation: titleGlow 3s ease-in-out infinite;
        position: relative;
        text-shadow: 0 0 30px rgba(99, 102, 241, 0.3);
      }
      @keyframes titleGlow {
        0%, 100% { filter: drop-shadow(0 0 20px rgba(99, 102, 241, 0.3)); }
        50% { filter: drop-shadow(0 0 30px rgba(99, 102, 241, 0.5)); }
      }
      .main-content p { 
        color: var(--text-secondary); 
        font-size: 1.125rem; 
        max-width: 600px; 
        margin: 0 auto 2rem; 
        line-height: 1.6;
        font-weight: 400;
      }

      .scanner-card {
        position: sticky;
        top: 0;
        z-index: 10;
        background: transparent !important;
        padding: 1rem;
        transition: background 0.3s ease;
        width: 100%; 
        max-width: 600px; 
        margin: 0 auto 3rem;
        border: none; 
        box-shadow: none;
      }

      @media (max-width: 768px) {
        .scanner-card {
          padding: 1rem !important;
          width: 100% !important;
          max-width: none !important;
          margin: 0 auto 2rem !important;
          display: flex !important;
          justify-content: center !important;
        }
      }
      .scanner-input-wrapper { 
        position: relative !important; 
        display: block !important; 
        background: var(--bg-glass); 
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid var(--border-glass); 
        border-radius: 20px; 
        overflow: visible !important; 
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
        box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.1);
        isolation: isolate;
        pointer-events: auto !important;
        touch-action: manipulation !important;
        margin: 0 auto !important;
        max-width: 600px !important;
      }
      .scanner-input-wrapper::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--gradient-primary);
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: -1;
      }
      .scanner-input-wrapper:hover, .scanner-input-wrapper:focus-within { 
        border-color: var(--accent-primary); 
        box-shadow: none !important; 
        transform: none !important; 
      }
      .scanner-input-wrapper:focus-within::before {
        opacity: 0 !important;
      }
      .search-input { 
        display: block !important;
        width: 100% !important; 
        background: transparent !important; 
        border: none !important; 
        padding: 1.25rem 4rem 1.25rem 1.5rem !important; 
        color: var(--text-primary) !important; 
        font-size: 1rem !important; 
        font-weight: 500;
        outline: none !important; 
        transition: none !important; 
        letter-spacing: 0.5px;
        position: relative !important; 
        z-index: 1000 !important; 
        resize: none !important;
      }
      

      .scanner-input-wrapper input.search-input#contractInput {
        display: block !important; 
        margin: 0 auto !important; 
        width: 100% !important; 
        max-width: 320px !important;
        text-align: center !important; 
        position: relative !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        appearance: none !important;
        -webkit-appearance: textfield !important;
        -moz-appearance: textfield !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
        -webkit-user-select: text !important;
        -moz-user-select: text !important;
        -ms-user-select: text !important;
        user-select: text !important;
        -webkit-touch-callout: default !important;
        box-sizing: border-box !important;
      }
      .search-input::placeholder { 
        color: var(--text-muted); 
        font-weight: 400;
      }
      .search-input:focus::placeholder {
        opacity: 0.5;
      }
      .search-icon { 
        position: absolute !important; 
        right: 1.25rem !important; 
        top: 50% !important;
        transform: translateY(-50%) !important;
        color: var(--text-secondary); 
        font-size: 1.25rem; 
        cursor: pointer; 
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
        padding: 0.5rem;
        border-radius: 8px;
        z-index: 999 !important;
        pointer-events: auto !important;
      }
      .search-icon:hover { 
        color: var(--accent-primary); 
        transform: scale(1.15) rotate(8deg); 
        background: rgba(99, 102, 241, 0.15);
        box-shadow: 0 0 15px rgba(99, 102, 241, 0.3);
      }
      .scanner-input-wrapper:focus-within .search-icon { 
        color: var(--accent-primary); 
        animation: searchPulse 2s infinite;
      }
      @keyframes searchPulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.05); }
      }
      .scanner-effects { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; }
      .scanner-glow { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%); transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.5s ease; }
      .scanner-input-wrapper:focus-within ~ .scanner-effects .scanner-glow { opacity: 0 !important; }
      .scanner-particles { position: absolute; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s ease; }
      .scanner-input-wrapper:focus-within ~ .scanner-effects .scanner-particles { opacity: 0 !important; }
      .scanner-particle { position: absolute; width: 3px; height: 3px; background: var(--accent-primary); border-radius: 50%; animation: scannerParticle 2s infinite ease-in-out; }
      @keyframes scannerParticle { 0% { transform: translate(0, 0); opacity: 0; } 50% { opacity: 0.8; } 100% { transform: translate(20px, -20px); opacity: 0; } }
      .button { 
        position: relative; 
        padding: 1rem 2rem; 
        border-radius: 16px; 
        font-weight: 600; 
        font-size: 0.95rem; 
        text-transform: uppercase; 
        letter-spacing: 0.5px; 
        overflow: hidden; 
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
        border: none; 
        outline: none; 
        display: inline-flex; 
        align-items: center; 
        justify-content: center; 
        background: transparent; 
        color: inherit; 
        cursor: pointer !important; 
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
      }
      .primary-btn { 
        background: linear-gradient(135deg, var(--btn-primary-start), var(--btn-primary-end));
        color: white; 
        box-shadow: 0 8px 20px rgba(79, 109, 223, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12); 
        position: relative; 
        font-weight: 700;
      }
      .primary-btn::before { 
        content: ''; 
        position: absolute; 
        top: 0; 
        left: -100%; 
        width: 100%; 
        height: 100%; 
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); 
        transition: left 0.6s ease; 
      }
      .primary-btn:hover::before { left: 100%; }
      .primary-btn:hover { 
        background: linear-gradient(135deg, var(--btn-primary-hover-start), var(--btn-primary-hover-end));
        box-shadow: 0 10px 28px rgba(79, 109, 223, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.22); 
        transform: translateY(-2px) scale(1.02); 
      }
      .primary-btn:active { 
        transform: translateY(0) scale(0.98); 
        box-shadow: var(--shadow-sm); 
      }
      .secondary-btn { 
        background: var(--bg-glass); 
        color: var(--text-primary); 
        border: 1px solid var(--border-glass); 
        box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.1); 
        position: relative; 
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        min-width: 140px;
      }
      .secondary-btn::before { 
        content: ''; 
        position: absolute; 
        top: 0; 
        left: -100%; 
        width: 100%; 
        height: 100%; 
        background: var(--gradient-primary); 
        opacity: 0.1;
        transition: left 0.6s ease; 
      }
      .secondary-btn:hover::before { left: 100%; }
      .secondary-btn:hover { 
        background: rgba(99, 102, 241, 0.1); 
        color: var(--accent-primary); 
        transform: translateY(-3px) scale(1.03); 
        box-shadow: var(--shadow-glow), var(--shadow-lg); 
        border-color: var(--accent-primary);
      }
      .secondary-btn:active { 
        transform: translateY(0) scale(0.98); 
        box-shadow: var(--shadow-sm); 
      }
      .back-btn { background: transparent; color: var(--text-primary); border: 2px solid rgba(255, 255, 255, 0.3); padding: 0.5rem 1rem; font-size: 0.85rem; font-weight: 500; border-radius: 10px; box-shadow: 0 0 5px rgba(255, 255, 255, 0.2); position: relative; }
      .back-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s ease; }
      .back-btn:hover::before { left: 100%; }
      .back-btn:hover { color: var(--accent-primary); border-color: var(--accent-primary); background: rgba(255, 255, 255, 0.1); transform: translateY(-2px) scale(1.03); box-shadow: 0 0 15px rgba(255, 255, 255, 0.3); }
      .back-btn:active { transform: translateY(0) scale(0.98); box-shadow: 0 0 5px rgba(255, 255, 255, 0.1); }
      .modal-container { 
        position: fixed; 
        top: 0; 
        left: 0; 
        width: 100vw; 
        height: 100vh; 
        background: transparent !important; 
        backdrop-filter: blur(0px) !important;
        -webkit-backdrop-filter: blur(0px) !important;
        z-index: 1001; 
        opacity: 0; 
        pointer-events: none; 
        transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
        will-change: opacity, background-color;
        padding: 0 !important;
        margin: 0 !important;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      

      #registerModal, #welcomeModal, #insufficientCreditsModal {
        align-items: center !important;
        justify-content: center !important;
        padding-top: 0 !important;
      }
      
      @media (max-width: 768px) {
        #registerModal, #welcomeModal, #insufficientCreditsModal {
          align-items: center !important;
          justify-content: center !important;
          padding-top: 0 !important;
        }
        #registerModal .modal, #welcomeModal .modal, #insufficientCreditsModal .modal {
          width: 90vw;
          max-width: none;
          transform: scale(0.9);
          transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        #registerModal.active .modal, #welcomeModal.active .modal, #insufficientCreditsModal.active .modal {
          transform: scale(1);
          opacity: 1;
        }
        #registerModal.hiding .modal, #welcomeModal.hiding .modal, #insufficientCreditsModal.hiding .modal {
          transform: scale(0.9);
          opacity: 0;
        }
      }
      
      .modal-container.active { 
        opacity: 1; 
        pointer-events: all; 
        z-index: 1001; 
        background: rgba(0, 0, 0, 0.65) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
      }
      
      .modal-container.hiding {
        opacity: 0;
        background: transparent !important;
        backdrop-filter: blur(0px) !important;
        -webkit-backdrop-filter: blur(0px) !important;
        pointer-events: none;
        transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), backdrop-filter 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      }
      

      body.modal-active .container,
      body.modal-active .menu-container,

      body.modal-active .hamburger,
      body.modal-active .footer-links {
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
      }
      
      .container, .menu-container, .hamburger, .footer-links {
        transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
        -webkit-transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
        will-change: opacity;
      }
      
      body.modal-active body::before {
        display: none !important;
      }
      .modal {
        background: var(--bg-glass);
        backdrop-filter: blur(30px);
        -webkit-backdrop-filter: blur(30px);
        max-width: 500px;
        width: 90%;
        border-radius: 24px !important;
        padding: 3rem;
        position: relative;
        box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.1);
        transform: none;
        transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        border: 1px solid var(--border-glass);
        z-index: 1000;
        text-align: center;
        overflow: hidden;
        will-change: transform, opacity;
        opacity: 0;
        
        -webkit-transform: none;
        -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-border-radius: 24px !important;
      }
      
      
      @media (max-width: 768px) {
        .modal {
          transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
          -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
      }
      .modal::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--gradient-card);
        opacity: 0.3;
        z-index: -1;
        border-radius: 24px !important;
        -webkit-border-radius: 24px !important;
      }
      
      .pro-register { 
        padding: 1.5rem; 
        max-width: 420px; 
        width: calc(100vw - 2rem); 
        position: relative; 
        overflow: hidden;
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: transform, opacity;
        transform-origin: center center;
        backface-visibility: hidden;
      }
      .modal.pro-register.no-css-transitions { transition: none !important; }
      .pro-register::after { content: ""; position: absolute; inset: 0; border-radius: 24px; pointer-events: none; box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 12px 30px rgba(0,0,0,0.25); }
      .register-ribbon { position: absolute; top: -40%; left: -10%; width: 140%; height: 60%; background: linear-gradient(90deg, rgba(99,102,241,0.25), rgba(56,189,248,0.2), rgba(236,72,153,0.2)); filter: blur(40px); transform: rotate(-6deg); pointer-events: none; }
      .register-logo { width: 40px; height: 40px; margin: 0 auto 0.5rem; display: block; opacity: 0.95; }
      .register-title { font-size: 1.15rem; margin: 0.15rem 0 0.2rem; letter-spacing: 0.2px; }
      .register-subtitle { margin: 0 0 0.6rem; color: var(--text-secondary); font-size: 0.9rem; }
      .feature-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; margin-bottom: 0.5rem; }
      .chip { padding: 0.35rem 0.6rem; font-size: 0.8rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); }
      .chip.blue { background: rgba(99,102,241,0.15); border-color: rgba(99,102,241,0.35); color: #c7d2fe; }
      .chip.green { background: rgba(34,197,94,0.15); border-color: rgba(34,197,94,0.35); color: #bbf7d0; }
      .chip.amber { background: rgba(245,158,11,0.15); border-color: rgba(245,158,11,0.35); color: #fde68a; }
      .chip.pink { background: rgba(236,72,153,0.15); border-color: rgba(236,72,153,0.35); color: #fbcfe8; }
      .chip.cyan { background: rgba(6,182,212,0.15); border-color: rgba(6,182,212,0.35); color: #a5f3fc; }
      .chip.red { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.35); color: #fecaca; }
      .register-input { margin: 0.75rem 0 0.25rem; }
      .register-input .username-input { width: 100%; max-width: 100%; box-sizing: border-box; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); }
      .register-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent); margin: 0.5rem 0 0.75rem; }
      .register-actions { display: flex; gap: 0.5rem; justify-content: center; margin-top: 0.6rem; }
      .register-actions .button { flex: 1 1 0; max-width: 220px; }
      @media (max-width: 420px) { .register-actions { flex-direction: column; } .register-actions .button { max-width: 100%; } }
      .register-submit {
        min-width: 140px;
        font-weight: 700;
        letter-spacing: 0.2px;
        border-radius: 12px !important;
        position: relative;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.06) !important; 
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        color: var(--text-primary) !important;
        isolation: isolate;
      }
      
      .register-submit::before {
        content: "";
        position: absolute;
        inset: -3px; 
        padding: 3.5px; 
        border-radius: inherit;
        
        background: conic-gradient(
          from -90deg,
          #60a5fa 0deg,
          #3b82f6 40deg,
          #8b5cf6 80deg,
          #a78bfa 120deg,
          #06b6d4 160deg,
          #22c55e 200deg,
          #f59e0b 240deg,
          #ec4899 280deg,
          #60a5fa 360deg
        );
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
                mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
                mask-composite: exclude; 
        animation: ringSpin 0.7s linear infinite; 
        pointer-events: none;
        z-index: -1;
        filter: saturate(1.4);
        will-change: transform;
      }
      
      .register-submit::after {
        content: "";
        position: absolute;
        inset: -6px;
        border-radius: inherit;
        background: conic-gradient(
          from -90deg,
          rgba(96,165,250,0.85) 0deg,
          rgba(59,130,246,0.8) 40deg,
          rgba(139,92,246,0.85) 80deg,
          rgba(167,139,250,0.8) 120deg,
          rgba(6,182,212,0.85) 160deg,
          rgba(34,197,94,0.8) 200deg,
          rgba(245,158,11,0.8) 240deg,
          rgba(236,72,153,0.85) 280deg,
          rgba(96,165,250,0.85) 360deg
        );
        filter: blur(18px) saturate(1.3);
        opacity: 0.6;
        animation: ringSpin 0.7s linear infinite;
        pointer-events: none;
        z-index: -2;
      }
      @keyframes ringSpin { to { transform: rotate(360deg); } }
      .register-extra { margin-top: 0.5rem; text-align: center; opacity: 0.85; }
      .link-btn { background: transparent; border: none; color: var(--accent-primary); cursor: pointer; font-weight: 600; }
      .note { font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.25rem; }

      
      .animated-title {
        position: relative;
        display: inline-block;
        line-height: 1.1;
        letter-spacing: 0.2px;
        filter: contrast(1.02) saturate(1.1);
      }
      .animated-title .title-solid {
        color: #eef2ff;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.35);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
      .animated-title .title-gradient {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 1;
        background-image: linear-gradient(
          90deg,
          #10b981,
          #66c2d5,
          #7b86f8,
          #aab4ff,
          #f59e0b,
          #ef4444,
          #10b981
        );
        background-size: 600% 100% !important;
        will-change: background-position;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        filter: saturate(1.2) brightness(1.08);
        background-position: var(--wave-pos, 0%) 50% !important;
      }

      
      .animated-title.scanner-title .title-solid {
        color: #7b86f8; 
        text-shadow: 0 2px 10px rgba(123, 134, 248, 0.3), 0 1px 2px rgba(123, 134, 248, 0.2);
      }
      .animated-title.scanner-title .title-gradient {
        background-image: linear-gradient(
          90deg,
          #7b86f8,
          #9aa6ff,
          #66c2d5,
          #7b86f8
        );
      }

      .animated-title.security-title .title-solid {
        color: #10b981; 
        text-shadow: 0 2px 10px rgba(16, 185, 129, 0.3), 0 1px 2px rgba(16, 185, 129, 0.2);
      }
      .animated-title.security-title .title-gradient {
        background-image: linear-gradient(
          90deg,
          #10b981,
          #34d399,
          #6ee7b7,
          #10b981
        );
      }

      .animated-title.risk-title .title-solid {
        color: #f59e0b; 
        text-shadow: 0 2px 10px rgba(245, 158, 11, 0.3), 0 1px 2px rgba(245, 158, 11, 0.2);
      }
      .animated-title.risk-title .title-gradient {
        background-image: linear-gradient(
          90deg,
          #f59e0b,
          #fbbf24,
          #fcd34d,
          #f59e0b
        );
      }

      .animated-title.price-title .title-solid {
        color: #66c2d5; 
        text-shadow: 0 2px 10px rgba(102, 194, 213, 0.3), 0 1px 2px rgba(102, 194, 213, 0.2);
      }
      .animated-title.price-title .title-gradient {
        background-image: linear-gradient(
          90deg,
          #66c2d5,
          #7dd3fc,
          #a5f3fc,
          #66c2d5
        );
      }

      .animated-title.volume-title .title-solid {
        color: #8b5cf6; 
        text-shadow: 0 2px 10px rgba(139, 92, 246, 0.3), 0 1px 2px rgba(139, 92, 246, 0.2);
      }
      .animated-title.volume-title .title-gradient {
        background-image: linear-gradient(
          90deg,
          #8b5cf6,
          #a78bfa,
          #c4b5fd,
          #8b5cf6
        );
      }

      .animated-title.pressure-title .title-solid {
        color: #ef4444; 
        text-shadow: 0 2px 10px rgba(239, 68, 68, 0.3), 0 1px 2px rgba(239, 68, 68, 0.2);
      }
      .animated-title.pressure-title .title-gradient {
        background-image: linear-gradient(
          90deg,
          #ef4444,
          #f87171,
          #fca5a5,
          #ef4444
        );
      }

      .animated-title.holder-title .title-solid {
        color: #06b6d4; 
        text-shadow: 0 2px 10px rgba(6, 182, 212, 0.3), 0 1px 2px rgba(6, 182, 212, 0.2);
      }
      .animated-title.holder-title .title-gradient {
        background-image: linear-gradient(
          90deg,
          #06b6d4,
          #22d3ee,
          #67e8f9,
          #06b6d4
        );
      }

      .animated-title.insights-title .title-solid {
        color: #aab4ff; 
        text-shadow: 0 2px 10px rgba(170, 180, 255, 0.3), 0 1px 2px rgba(170, 180, 255, 0.2);
      }
      .animated-title.insights-title .title-gradient {
        background-image: linear-gradient(
          90deg,
          #aab4ff,
          #c7d2fe,
          #e0e7ff,
          #aab4ff
        );
      }

      
      .animated-title .title-sparkles {
        position: absolute;
        inset: -10px -14px;
        pointer-events: none;
        overflow: visible;
        z-index: 2;
        filter: drop-shadow(0 0 6px rgba(123, 134, 248, 0.4));
      }
      .animated-title .title-sparkles .sparkle {
        position: absolute;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(123,134,248,0.85) 50%, rgba(255,255,255,0) 70%);
        opacity: 0.85;
        animation: sparkleFloat 4s ease-in-out infinite;
      }
      .animated-title .title-sparkles .sparkle.s1 { top: -6px; left: 10%; animation-delay: 0s; }
      .animated-title .title-sparkles .sparkle.s2 { top: 12%; left: -8px; width: 8px; height: 8px; animation-delay: 0.7s; }
      .animated-title .title-sparkles .sparkle.s3 { top: -10px; right: 8%; animation-delay: 1.4s; }
      .animated-title .title-sparkles .sparkle.s4 { bottom: -8px; left: 18%; width: 7px; height: 7px; animation-delay: 2.1s; }
      .animated-title .title-sparkles .sparkle.s5 { bottom: -10px; right: 12%; animation-delay: 2.8s; }
      @keyframes sparkleFloat {
        0%, 100% { transform: translateY(0) scale(1); opacity: 0.8; }
        50% { transform: translateY(-6px) scale(1.2); opacity: 1; }
      }
      @keyframes gradient-pan {
        0% { background-position: 0% 50%; }
        100% { background-position: 600% 50%; }
      }

      
      @media (hover: none) and (pointer: coarse) {
        .register-submit::before,
        .register-submit::after {
          animation: none !important;
          transform: none !important;
        }
      }

      
      .wallet-connection {
        text-align: center;
      }
      
      .wallet-ribbon {
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.25) 0%, rgba(56, 189, 248, 0.2) 50%, rgba(34, 197, 94, 0.15) 100%);
      }
      
      .wallet-title {
        background: var(--title-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        color: transparent;
        text-shadow: 0 0 24px rgba(123, 134, 248, 0.35);
        margin-bottom: 0.5rem;
      }
      
      .wallet-subtitle {
        color: var(--text-secondary);
        margin-bottom: 1.5rem;
        line-height: 1.4;
      }
      
      .wallet-status {
        margin: 1rem 0;
      }
      
      .wallet-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        min-height: 120px;
        justify-content: center;
      }
      
      .wallet-spinner {
        position: relative;
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      .spinner-ring {
        position: absolute;
        width: 100%;
        height: 100%;
        border: 4px solid transparent;
        border-radius: 50%;
        animation: walletSpin 1.2s linear infinite;
        animation-play-state: running !important;
        opacity: 0.9;
      }
      
      .spinner-ring:nth-child(1) {
        border-top: 4px solid #60a5fa;
        border-right: 1px solid rgba(96, 165, 250, 0.3);
        animation-delay: 0s;
        opacity: 1;
      }
      
      .spinner-ring:nth-child(2) {
        border-right: 4px solid #3b82f6;
        border-bottom: 1px solid rgba(59, 130, 246, 0.3);
        animation-delay: -0.4s;
        animation-duration: 1s;
        opacity: 0.85;
      }
      
      .spinner-ring:nth-child(3) {
        border-bottom: 4px solid #22c55e;
        border-left: 1px solid rgba(34, 197, 94, 0.3);
        animation-delay: -0.8s;
        animation-duration: 1.4s;
        opacity: 0.9;
      }
      
      @keyframes walletSpin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }

      
      .reduce-motion .wallet-connection .spinner-ring {
        animation: walletSpin 1.2s linear infinite !important;
        animation-play-state: running !important;
      }
      
      .wallet-actions {
        width: 100%;
        display: flex;
        justify-content: center;
      }
      
      .wallet-actions .button {
        min-width: 160px;
        font-weight: 600;
        letter-spacing: 0.3px;
      }
      
      .checking-text {
        color: var(--text-secondary);
        font-size: 0.95rem;
        margin: 0;
        font-weight: 500;
      }
      
      .wallet-error-icon {
        margin-bottom: 1rem;
        animation: errorShake 0.5s ease-in-out;
      }
      
      @keyframes errorShake {
        0%, 100% { transform: translateX(0); }
        25% { transform: translateX(-5px); }
        75% { transform: translateX(5px); }
      }
      
      .error-title {
        color: #ef4444;
        font-size: 1.1rem;
        margin: 0 0 0.5rem 0;
        font-weight: 600;
      }
      
      .error-message {
        color: var(--text-secondary);
        font-size: 0.9rem;
        margin: 0 0 1.5rem 0;
        line-height: 1.4;
      }
      
      .error-btn {
        background: rgba(239, 68, 68, 0.15) !important;
        border: 1px solid rgba(239, 68, 68, 0.35) !important;
        color: #fecaca !important;
      }
      
      .error-btn:hover {
        background: rgba(239, 68, 68, 0.25) !important;
        border-color: rgba(239, 68, 68, 0.5) !important;
      }

      
      .insufficient-ribbon {
        background: linear-gradient(135deg, rgba(239, 68, 68, 0.25) 0%, rgba(220, 38, 38, 0.15) 100%);
      }

      .insufficient-title {
        color: #e57373;
        opacity: 0.8;
      }

      .insufficient-highlight {
        color: #dc2626;
        font-weight: 600;
        background: rgba(239, 68, 68, 0.05);
        padding: 2px 6px;
        border-radius: 6px;
        border: 1px solid rgba(239, 68, 68, 0.15);
      }

      .insufficient-bonus {
        color: #10b981;
        font-weight: 600;
        background: rgba(16, 185, 129, 0.1);
        padding: 2px 6px;
        border-radius: 6px;
        border: 1px solid rgba(16, 185, 129, 0.3);
      }
      .register-close { position: absolute; top: 8px; right: 8px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: var(--text-primary); border-radius: 10px; width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer; }
      .register-close:hover { background: rgba(99,102,241,0.12); border-color: var(--accent-primary); }
      
      #welcomeModal:not(.active),
      #registerModal:not(.active),
      #insufficientCreditsModal:not(.active) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
      }
      
      .modal-container.active .modal { 
        transform: scale(1); 
        opacity: 1;
        -webkit-transform: scale(1);
        transition: all 0.55s cubic-bezier(0.22, 1, 0.36, 1);
      }
      
      .modal-container .modal {
        transform: scale(0.9);
        opacity: 0;
        transition: all 0.45s cubic-bezier(0.22, 1, 0.36, 1);
      }
      
      .modal-container.hiding .modal {
        transform: scale(0.95);
        opacity: 0;
        -webkit-transform: scale(0.95);
        transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
      }
      

      @media (max-width: 768px) {
        .modal-container {
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          backdrop-filter: none !important;
          -webkit-backdrop-filter: none !important;
          background: rgba(0, 0, 0, 0.3) !important;
        }
        
        .modal {
          width: 95%;
          padding: 2rem 1.5rem;
          max-height: 90vh;
          overflow-y: auto;
          border-radius: 24px !important;
          will-change: transform, opacity;
          -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
          -webkit-border-radius: 24px !important;
        }
        
        .modal-container.hiding {
          opacity: 0;
          transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
          -webkit-transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
          background: transparent !important;
        }
        
        .modal-container.hiding .modal {
          transform: scale(0.95) !important;
          -webkit-transform: scale(0.95) !important;
          opacity: 0;
          transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
        }
      }
      

      .button, .upgrade-btn, .timeframe-btn, .primary-btn, .secondary-btn {
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        -webkit-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        will-change: transform, background-color;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
      }
      
      .button:active, .upgrade-btn:active, .timeframe-btn:active, .primary-btn:active, .secondary-btn:active {
        transform: scale(0.95) translateZ(0);
        -webkit-transform: scale(0.95) translateZ(0);
        transition: transform 0.1s ease;
        -webkit-transition: -webkit-transform 0.1s ease;
      }
      

      @media (hover: none) and (pointer: coarse) {
        .button:hover, .upgrade-btn:hover, .timeframe-btn:hover, .primary-btn:hover, .secondary-btn:hover {
          transform: translateZ(0);
          -webkit-transform: translateZ(0);
          box-shadow: var(--shadow-md);
        }
        
        .live-trade:hover {
          transform: translateZ(0);
          -webkit-transform: translateZ(0);
        }
        
        .market-cap-overlay:hover {
          transform: translateZ(0);
          -webkit-transform: translateZ(0);
        }
        
        .key-metric-card:hover, .market-metric-card:hover {
          transform: translateZ(0);
          -webkit-transform: translateZ(0);
        }
        
        .social-links a:hover {
          transform: translateZ(0);
          -webkit-transform: translateZ(0);
        }
      }
      

      @media (max-width: 768px) {
        .button, .upgrade-btn, .timeframe-btn, .primary-btn, .secondary-btn {
          min-height: 44px;
          min-width: 44px;
          padding: 1rem 1.5rem;
          font-size: 1rem;
          border-radius: 12px;
        }
        

        .modal-buttons .button {
          width: 100%;
          max-width: none;
          padding: 1.25rem 2rem;
          margin-bottom: 1rem;
          font-size: 1.1rem;
          font-weight: 600;
        }
        

        .modal-buttons .button:active {
          transform: scale(0.98) translateZ(0);
          -webkit-transform: scale(0.98) translateZ(0);
          background-color: rgba(99, 102, 241, 0.2);
        }
        
        .modal-buttons .primary-btn:active {
          background: linear-gradient(135deg, #5856eb 0%, #7c3aed 50%, #0891b2 100%);
        }
      }
      .modal-container.hiding .modal {
        transform: scale(0.95) !important;
        opacity: 0;
        transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
      }
      @keyframes modalGlow { 
        0%, 100% { 
          border-color: var(--border-glass); 
          box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.1); 
          transform: scale(1);
        } 
        50% { 
          border-color: var(--accent-primary); 
          box-shadow: var(--shadow-glow), var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.2); 
          transform: scale(1.01);
        } 
      }

      @keyframes fastFlash {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.7; transform: scale(1.05); }
      }
      .modal h2 { 
        font-size: 2rem; 
        background: var(--gradient-primary);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 1rem; 
        font-weight: 800;
        letter-spacing: -0.025em;
      }
      .modal p { 
        color: var(--text-secondary); 
        font-size: 1.125rem; 
        margin-bottom: 2rem; 
        line-height: 1.6;
        font-weight: 400;
      }
      .modal-buttons { display: flex; flex-direction: column; gap: 0.5rem; align-items: center; }
      .modal-buttons .button { width: 100%; max-width: 250px; padding: 0.7rem 2rem; color: var(--text-primary); }
      .register-form { display: flex; flex-direction: column; gap: 0.5rem; align-items: center; }
      .username-input { width: 100%; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.3); padding: 0.8rem 1rem; border-radius: 12px; color: var(--text-primary); font-size: 0.9rem; outline: none; transition: all 0.3s ease; }
      .username-input:focus { border-color: var(--accent-primary); box-shadow: 0 0 15px var(--button-glow); }
      .results-section {
        margin: 0.5rem auto 0; 
        background: var(--bg-glass);
        backdrop-filter: blur(30px);
        -webkit-backdrop-filter: blur(30px);
        border-radius: 32px;
        padding: 3rem 2rem;
        display: none;
        box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.1);
        border: 1px solid var(--border-glass);
        width: 100%;
        max-width: 100%;
        visibility: hidden;
        opacity: 0;
        z-index: auto;
        position: relative;
        overflow: hidden;
        margin-left: auto;
        margin-right: auto;
      }
      .results-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--gradient-card);
        opacity: 0.1;
        z-index: -1;
      }
      .results-section::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle at center, rgba(99, 102, 241, 0.1) 0%, transparent 50%);
        animation: resultsGlow 8s ease-in-out infinite;
        z-index: -1;
      }
      @keyframes resultsGlow {
        0%, 100% { transform: rotate(0deg) scale(1); opacity: 0.1; }
        50% { transform: rotate(180deg) scale(1.1); opacity: 0.3; }
      }
      @media (max-width: 768px) {
        .results-section {
          padding: 0.5rem;
          margin-top: 8rem; 
          border-radius: 16px;
          width: 100% !important;
          max-width: 100% !important;
          margin-left: auto !important;
          margin-right: auto !important;
          transform: none !important;
          
          display: none;
          visibility: hidden;
          opacity: 0;
        }
        

        .live-mode-header {
          flex-direction: column;
          gap: 1rem;
          padding: 1rem;
        }
        
        .live-mode-controls {
          justify-content: center;
        }
        
        .live-mode-toggle-container span {
          font-size: 0.9rem;
        }
        
        .tooltip-content {
          width: 200px;
          white-space: normal;
          text-align: center;
          opacity: 1 !important;
          visibility: visible !important;
        }
      }
      .results-title { 
        background: var(--gradient-primary);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-size: 2rem; 
        margin-bottom: 2rem; 
        text-align: center; 
        position: relative; 
        z-index: 10; 
        font-weight: 800;
        letter-spacing: -0.025em;
        text-shadow: 0 0 30px rgba(99, 102, 241, 0.3);
      }
      .token-header { 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        gap: 1.5rem; 
        margin-bottom: 3rem; 
        box-shadow: var(--shadow-lg); 
        background: var(--bg-glass); 
        backdrop-filter: blur(30px);
        -webkit-backdrop-filter: blur(30px);
        border-radius: 24px; 
        padding: 3rem; 
        overflow: hidden; 
        position: relative; 
        z-index: 1; 
        border: 1px solid var(--border-glass);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .token-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--gradient-card);
        opacity: 0.2;
        z-index: -1;
      }
      .token-header::after {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        background: var(--gradient-primary);
        border-radius: 24px;
        z-index: -2;
        opacity: 0;
        transition: opacity 0.3s ease;
      }
      .token-header:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-glow), 0 20px 60px rgba(0, 0, 0, 0.3);
      }
      .token-header:hover::after {
        opacity: 0.2;
      }
      .token-icon { 
        width: 60px; 
        height: 60px; 
        border-radius: 50%; 
        box-shadow: var(--shadow-md);
        border: 2px solid var(--border-glass);
        animation: tokenIconFloat 3s ease-in-out infinite;
      }
      @keyframes tokenIconFloat {
        0%, 100% { transform: translateY(0) scale(1); }
        50% { transform: translateY(-4px) scale(1.02); }
      }
      .token-name { 
        font-size: 1.5rem; 
        font-weight: 700; 
        background: var(--gradient-primary);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-align: center;
      }

      
      .token-name.token-title {
        background: linear-gradient(135deg, #7b86f8 0%, #9aa6ff 50%, #66c2d5 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-shadow: 0 2px 10px rgba(123, 134, 248, 0.3);
        filter: drop-shadow(0 0 12px rgba(123, 134, 248, 0.2));
        animation: tokenNamePulse 4s ease-in-out infinite;
      }

      @keyframes tokenNamePulse {
        0%, 100% { 
          filter: drop-shadow(0 0 12px rgba(123, 134, 248, 0.2));
          transform: scale(1);
        }
        50% { 
          filter: drop-shadow(0 0 20px rgba(123, 134, 248, 0.4));
          transform: scale(1.01);
        }
      }
      .key-metrics { 
        margin-bottom: 2rem; 
        box-shadow: var(--shadow-md); 
        background: var(--bg-glass); 
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-radius: 20px; 
        padding: 1.5rem; 
        overflow: hidden; 
        border: 1px solid var(--border-glass);
        position: relative;
      }
      .key-metrics::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--gradient-card);
        opacity: 0.2;
        z-index: -1;
      }
      .key-metrics-grid { 
        display: grid; 
        grid-template-columns: repeat(2, 1fr); 
        gap: 1rem; 
        margin-bottom: 0; 
      }
      .key-metric-card { 
        background: var(--bg-glass); 
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-radius: 16px; 
        padding: 1.5rem; 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        gap: 0.75rem; 
        text-align: center; 
        box-shadow: var(--shadow-sm); 
        overflow: hidden; 
        border: 1px solid var(--border-glass);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
      }
      .key-metric-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--gradient-primary);
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: -1;
      }
      .key-metric-card:hover {
        transform: translateY(-6px) scale(1.03) rotateX(3deg);
        box-shadow: var(--shadow-glow), 0 12px 40px rgba(0, 0, 0, 0.4);
        border-color: var(--accent-primary);
      }
      .key-metric-card:hover::before {
        opacity: 0.05;
      }
      .key-metric-card div { display: flex; flex-direction: column; align-items: center; }
      .key-metric-card .icon { 
        font-size: 2rem; 
        margin-bottom: 0.5rem; 
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
      }
      .key-metric-card .label { 
        color: var(--text-muted); 
        font-size: 0.875rem; 
        margin-bottom: 0.5rem; 
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
      .key-metric-card .value { 
        color: var(--text-primary); 
        font-size: 1.25rem; 
        font-weight: 700; 
        margin-bottom: 0; 
        letter-spacing: -0.025em;
      }
      .contract-info { display: grid; gap: 0.5rem; margin-bottom: 1rem; }
      .info-row { display: flex; align-items: center; padding: 0.5rem; background: rgba(255, 255, 255, 0.02); border-radius: 10px; transition: transform 0.3s ease; overflow: hidden; }
      .info-row:hover { transform: translateX(5px); }
      .info-label { width: 150px; color: var(--text-secondary); font-weight: 500; font-size: 0.8rem; }
      .info-value { flex: 1; color: var(--text-primary); font-size: 0.8rem; }
      .transaction-list { display: grid; gap: 0.5rem; }
      .transaction-item { 
        background: var(--bg-glass); 
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-radius: 12px; 
        padding: 1rem; 
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
        box-shadow: var(--shadow-sm); 
        overflow: hidden; 
        position: relative; 
        border: 1px solid var(--border-glass);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        margin-bottom: 0.5rem;
      }
      .transaction-item:hover { 
        transform: translateY(-2px) scale(1.01); 
        box-shadow: var(--shadow-glow), var(--shadow-md); 
        border-color: var(--accent-primary);
      }
      .transaction-item::before { 
        content: ''; 
        position: absolute; 
        left: 0; 
        top: 0; 
        width: 3px; 
        height: 100%; 
        background: var(--gradient-primary); 
        opacity: 0; 
        transition: opacity 0.3s ease; 
      }
      .transaction-item:hover::before { opacity: 1; }
      .market-metrics, .recent-trades, .dex-pairs, .bundles-section, .bubble-maps-section { 
        margin-bottom: 2rem; 
        box-shadow: var(--shadow-md); 
        background: var(--bg-glass); 
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-radius: 20px; 
        padding: 1.5rem; 
        overflow: hidden; 
        border: 1px solid var(--border-glass);
        position: relative;
      }
      .market-metrics::before, .recent-trades::before, .dex-pairs::before, 
      .bundles-section::before, .bubble-maps-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--gradient-card);
        opacity: 0.2;
        z-index: -1;
      }
      .trades-dex-container { 
        display: flex; 
        gap: 1.5rem; 
        margin-bottom: 2rem; 
        box-shadow: var(--shadow-md); 
        background: var(--bg-glass); 
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-radius: 20px; 
        padding: 1.5rem; 
        overflow: hidden; 
        border: 1px solid var(--border-glass);
        position: relative;
      }
      .trades-dex-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--gradient-card);
        opacity: 0.2;
        z-index: -1;
      }
      .recent-trades, .dex-pairs { 
        flex: 1; 
        background: transparent; 
        border-radius: 16px; 
        padding: 0; 
        overflow: hidden; 
      }
      .dex-pairs-grid { display: grid; gap: 0.5rem; }
      .dex-pair-item { 
        background: var(--bg-glass); 
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-radius: 12px; 
        padding: 1rem; 
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
        box-shadow: var(--shadow-sm); 
        overflow: hidden; 
        border: 1px solid var(--border-glass);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        margin-bottom: 0.5rem;
      }
      .dex-pair-item h4, .dex-pair-item .dex-symbol, .dex-pair-item .dex-liquidity, .dex-pair-item .dex-volume { color: var(--text-primary); }
      .dex-pairs .section-title, .recent-trades .section-title { 
        background: var(--title-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        color: transparent;
        text-shadow: 0 0 16px rgba(123, 134, 248, 0.25);
      }
      .dex-pair-item:hover {
        transform: translateY(-2px) scale(1.01);
        box-shadow: var(--shadow-glow), var(--shadow-md);
        border-color: var(--accent-primary);
      }
      .bundles-section { 
        position: relative; 
        padding: 2rem; 
        background: var(--bg-glass); 
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-radius: 24px; 
        box-shadow: var(--shadow-lg); 
        border: 1px solid var(--border-glass); 
      }
      .bubble-maps-section { 
        position: relative; 
        padding: 2rem; 
        border-radius: 24px; 
        box-shadow: var(--shadow-lg); 
        border: 1px solid var(--border-glass); 
        width: 100%; 
        max-width: 100%; 
        overflow: hidden; 
        margin-bottom: 2rem;
        background: var(--bg-glass);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        contain: layout style paint;
      }
      .bubble-map-section {
        position: relative; 
        padding: 2rem; 
        border-radius: 24px; 
        box-shadow: var(--shadow-lg); 
        border: 1px solid var(--border-glass); 
        width: 100%; 
        max-width: 100%; 
        overflow: hidden; 
        margin-bottom: 2rem;
        background: var(--bg-glass);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        contain: none;
      }
      .bubble-map-content {
        position: relative;
        contain: none;
      }
      .bubble-map-blur {
        position: relative;
        filter: blur(5px);
        pointer-events: none;
        user-select: none;
      }
      .bubble-map-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 2;
        background: rgba(0, 0, 0, 0.5);
      }
      .bundles-content { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; z-index: 1; }
      .bundles-blur { position: relative; filter: blur(5px); pointer-events: none; user-select: none; }
      .bundles-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 2; }
      .bubble-maps-header { position: relative; display: flex; justify-content: center; align-items: center; gap: 0.5rem; z-index: 1; margin-bottom: 0.5rem; }
      .bubble-maps-title { color: var(--accent-primary); font-size: 1.2rem; font-weight: 600; display: inline-block; }
      .bubble-maps-content { position: relative; z-index: 1; }
      .bubble-maps-blur { position: relative; filter: blur(5px); pointer-events: none; user-select: none; }
      .bubble-maps-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 2; background: rgba(0, 0, 0, 0.5); }
      .bubble-map-container {
        position: relative;
        width: 100%;
        height: 400px;
        background: var(--bg-glass);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-radius: 20px;
        border: 1px solid var(--border-glass);
        overflow: hidden;
        padding: 1rem;
        contain: layout style paint size;
        max-width: 100%;
        box-sizing: border-box;
      }
      .bubble-map-network {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .bubble {
        position: absolute;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 2px solid var(--border-glass);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;
        z-index: 5;
      }
      .bubble:hover {
        transform: scale(1.1);
        box-shadow: var(--shadow-glow), var(--shadow-md);
        border-color: var(--accent-primary);
      }
      .central-bubble {
        width: 120px;
        height: 120px;
        background: var(--gradient-primary);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
      }
      .large-bubble {
        width: 80px;
        height: 80px;
        background: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);
        top: 20%;
        right: 15%;
      }
      .hidden {
  display: none !important;
}
      .medium-bubble {
        width: 65px;
        height: 65px;
        background: linear-gradient(135deg, #06b6d4 0%, #10b981 100%);
        top: 15%;
        left: 15%;
      }
      .medium-bubble-2 {
        width: 65px;
        height: 65px;
        background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
        bottom: 15%;
        right: 20%;
      }
      .small-bubble {
        width: 50px;
        height: 50px;
        background: linear-gradient(135deg, #10b981 0%, #6366f1 100%);
        bottom: 25%;
        left: 20%;
      }
      .small-bubble-2 {
        width: 50px;
        height: 50px;
        background: linear-gradient(135deg, #ef4444 0%, #8b5cf6 100%);
        top: 60%;
        left: 10%;
      }
      .tiny-bubble {
        width: 40px;
        height: 40px;
        background: linear-gradient(135deg, #06b6d4 0%, #6366f1 100%);
        bottom: 10%;
        left: 50%;
      }
      .bubble-glow {
        position: absolute;
        top: -5px;
        left: -5px;
        right: -5px;
        bottom: -5px;
        background: radial-gradient(circle, rgba(99, 102, 241, 0.3) 0%, transparent 70%);
        border-radius: 50%;
        opacity: 0;
        transition: opacity 0.3s ease;
        animation: bubbleGlow 3s ease-in-out infinite;
      }
      @keyframes bubbleGlow {
        0%, 100% { opacity: 0.3; transform: scale(1); }
        50% { opacity: 0.6; transform: scale(1.1); }
      }
      .bubble-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: white;
        font-size: 0.75rem;
        font-weight: 600;
        z-index: 1;
      }
      .bubble-icon {
        font-size: 1.5rem;
        margin-bottom: 0.25rem;
      }
      .bubble-label {
        font-size: 0.7rem;
        opacity: 0.9;
        margin-bottom: 0.1rem;
      }
      .bubble-value {
        font-size: 0.65rem;
        opacity: 0.8;
      }
      .connection-line {
        position: absolute;
        width: 2px;
        background: linear-gradient(to bottom, var(--accent-primary), transparent);
        opacity: 0.4;
        animation: connectionPulse 2s ease-in-out infinite;
      }
      @keyframes connectionPulse {
        0%, 100% { opacity: 0.4; }
        50% { opacity: 0.7; }
      }
      

      .trade-item {
        background: var(--bg-glass);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-radius: 8px;
        padding: 0.75rem;
        margin-bottom: 0.5rem;
        border: 1px solid var(--border-glass);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        animation: tradeSlideIn 0.5s ease-out;
      }
      
      .trade-item.buy-trade {
        border-left: 3px solid #10b981;
        background: linear-gradient(90deg, rgba(16, 185, 129, 0.1) 0%, var(--bg-glass) 20%);
      }
      
      .trade-item.sell-trade {
        border-left: 3px solid #ef4444;
        background: linear-gradient(90deg, rgba(239, 68, 68, 0.1) 0%, var(--bg-glass) 20%);
      }
      

      .trade-item.whale-trade {
        border: 2px solid #fbbf24;
        background: linear-gradient(90deg, rgba(251, 191, 36, 0.15) 0%, var(--bg-glass) 30%);
        box-shadow: 0 0 20px rgba(251, 191, 36, 0.3);
        animation: whaleGlow 3s ease-in-out infinite;
      }
      
      @keyframes whaleGlow {
        0%, 100% {
          box-shadow: 0 0 20px rgba(251, 191, 36, 0.3);
        }
        50% {
          box-shadow: 0 0 30px rgba(251, 191, 36, 0.5);
        }
      }
      
      .trade-item:hover {
        transform: translateY(-2px) scale(1.01);
        box-shadow: var(--shadow-glow), var(--shadow-md);
        border-color: var(--accent-primary);
      }
      
      @keyframes tradeSlideIn {
        0% {
          opacity: 0;
          transform: translateX(-20px);
        }
        100% {
          opacity: 1;
          transform: translateX(0);
        }
      }
      
      @keyframes livePulse {
        0%, 100% {
          opacity: 0.6;
          transform: scale(1);
        }
        50% {
          opacity: 1;
          transform: scale(1.1);
        }
      }
      
      @keyframes priceFlash {
        0% {
          background-color: rgba(16, 185, 129, 0.3);
          transform: scale(1);
        }
        50% {
          background-color: rgba(16, 185, 129, 0.6);
          transform: scale(1.02);
        }
        100% {
          background-color: transparent;
          transform: scale(1);
        }
      }
      .flow-particles {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
      }
      .particle {
        position: absolute;
        width: 3px;
        height: 3px;
        background: var(--accent-primary);
        border-radius: 50%;
        opacity: 0.8;
      }
      .particle-1 {
        top: 50%;
        left: 20%;
        animation: particleFloat1 4s ease-in-out infinite;
      }
      .particle-2 {
        top: 30%;
        left: 60%;
        animation: particleFloat2 3s ease-in-out infinite 0.5s;
      }
      .particle-3 {
        top: 70%;
        left: 40%;
        animation: particleFloat3 5s ease-in-out infinite 1s;
      }
      .particle-4 {
        top: 40%;
        left: 80%;
        animation: particleFloat4 3.5s ease-in-out infinite 1.5s;
      }
      .particle-5 {
        top: 60%;
        left: 15%;
        animation: particleFloat5 4.5s ease-in-out infinite 2s;
      }
      @keyframes particleFloat1 {
        0%, 100% { transform: translate(0, 0); opacity: 0.4; }
        50% { transform: translate(20px, -30px); opacity: 1; }
      }
      @keyframes particleFloat2 {
        0%, 100% { transform: translate(0, 0); opacity: 0.4; }
        50% { transform: translate(-25px, 20px); opacity: 1; }
      }
      @keyframes particleFloat3 {
        0%, 100% { transform: translate(0, 0); opacity: 0.4; }
        50% { transform: translate(15px, -20px); opacity: 1; }
      }
      @keyframes particleFloat4 {
        0%, 100% { transform: translate(0, 0); opacity: 0.4; }
        50% { transform: translate(-20px, -15px); opacity: 1; }
      }
      @keyframes particleFloat5 {
        0%, 100% { transform: translate(0, 0); opacity: 0.4; }
        50% { transform: translate(25px, 10px); opacity: 1; }
      }
      .bubble-stats {
        position: absolute;
        bottom: 1rem;
        right: 1rem;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        background: var(--bg-glass);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        padding: 1rem;
        border-radius: 12px;
        border: 1px solid var(--border-glass);
      }
      .stat-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        font-size: 0.85rem;
      }
      .stat-label {
        color: var(--text-secondary);
        font-weight: 500;
      }
      .stat-value {
        color: var(--text-primary);
        font-weight: 700;
      }
      .risk-medium {
        color: #f59e0b;
      }
      .premium-unlock {
        text-align: center;
        color: white;
      }
      .premium-unlock h3 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
        background: var(--gradient-primary);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
      .premium-unlock p {
        margin-bottom: 1.5rem;
        color: var(--text-secondary);
        font-size: 1rem;
      }
      a:hover, input:hover, button:hover { transition: transform 0.2s ease; }
      .tooltip { position: relative; display: inline-block; cursor: help; margin-left: 0.5rem; z-index: 10; }
      .tooltip img { width: 16px; height: 16px; vertical-align: middle; filter: brightness(2) invert(1); display: inline-block; }
      
      
      .credits-tooltip {
        position: absolute;
        top: 50%;
        right: -55px;
        transform: translateY(-50%);
        z-index: 1000;
      }
      
      
      @media (max-width: 768px) {
        .credits-badge {
          min-width: 280px !important;
          max-width: 320px !important;
          padding: 1.5rem !important;
          margin: 0 auto !important;
          position: relative !important;
          overflow: visible !important;
        }
        
        
        .credits-tooltip {
          top: 100% !important;
          left: 0 !important;
          right: 0 !important;
          transform: none !important;
          margin-top: 20px !important;
          width: 100% !important;
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
        }
        
        .credits-tooltip .tooltip-line {
          position: absolute !important;
          top: -25px !important;
          left: 50% !important;
          transform: translateX(-50%) !important;
          width: 1px !important;
          height: 25px !important;
          background: linear-gradient(180deg, rgba(99,102,241,0.6), rgba(99,102,241,0.3)) !important;
        }
        
        .credits-tooltip .tooltip-box {
          position: relative !important;
          top: auto !important;
          left: auto !important;
          transform: none !important;
          width: 100% !important;
          display: flex !important;
          justify-content: center !important;
        }
        
        .credits-tooltip .tooltip-content {
          width: 280px !important;
          max-width: calc(100vw - 40px) !important;
          margin: 0 !important;
          left: auto !important;
          right: auto !important;
          transform: none !important;
          position: relative !important;
          box-sizing: border-box !important;
          opacity: 1 !important;
          visibility: visible !important;
          display: block !important;
        }
        
        .credits-tooltip .tooltip-content::before { display: none !important; }
        
        .credits-tooltip .tooltip-content::after {
          content: '';
          position: absolute;
          top: -6px;
          left: 50%;
          transform: translateX(-50%);
          width: 0;
          height: 0;
          border-left: 6px solid transparent;
          border-right: 6px solid transparent;
          border-bottom: 6px solid rgba(99, 102, 241, 0.3);
        }
        
        #creditsSection {
          margin: 2rem auto !important;
          padding: 0 1rem !important;
          width: 100% !important;
          display: flex !important;
          justify-content: center !important;
          align-items: center !important;
          position: relative !important;
          overflow: visible !important;
        }
        
        
        #expandArrow {
          position: absolute !important;
          top: auto !important;
          bottom: -15px !important;
          right: auto !important;
          left: 50% !important;
          transform: translateX(-50%) !important;
          background: var(--bg-glass) !important;
          backdrop-filter: blur(10px) !important;
          box-shadow: var(--shadow-sm) !important;
          border-radius: 50% !important;
          width: 30px !important;
          height: 30px !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          font-size: 0.8rem !important;
          padding: 0 !important;
        }
        
        #expandArrow:hover {
          background: rgba(99, 102, 241, 0.15) !important;
          transform: translateX(-50%) scale(1.1) !important;
          box-shadow: var(--shadow-md) !important;
        }
        
        
        .credits-tooltip .tooltip-content::after {
          display: none !important;
        }
        
        
        .redeem-section {
          padding: 1rem 0.5rem !important;
        }
        
        .redeem-inline {
          gap: 1rem !important;
        }
        
        
        #redeemInput {
          font-size: 16px !important; 
          height: 44px !important; 
        }
        
        .button.secondary-btn {
          height: 44px !important; 
          font-size: 0.9rem !important;
          font-weight: 600 !important;
        }
        
        .register-actions .secondary-btn {
          height: 48px !important;
          display: inline-flex !important;
          align-items: center !important;
          justify-content: center !important;
        }
        
        
        .menu-container {
          z-index: 500 !important; 
        }
        
        
        body {
          min-height: 120vh !important; 
        }
        
        .container {
          padding-bottom: 20vh !important; 
        }
      }
      
      .credits-tooltip .tooltip-line {
        position: absolute;
        top: 50%;
        left: -55px;
        transform: translateY(-50%);
        width: 55px;
        height: 1px;
        background: linear-gradient(90deg, rgba(99,102,241,0.6), rgba(99,102,241,0.3));
        z-index: -1;
      }
      
      .credits-tooltip .tooltip-box {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        z-index: 1001;
      }
      
      .credits-tooltip .tooltip-content {
        background: rgba(15, 23, 42, 0.95);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(99, 102, 241, 0.3);
        border-radius: 12px;
        padding: 12px 16px;
        color: var(--text-primary);
        font-size: 0.85rem;
        line-height: 1.4;
        text-align: left;
        width: 280px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
        position: relative;
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
      }
      
      .credits-tooltip .tooltip-content::before {
        content: '';
        position: absolute;
        left: -6px;
        top: 50%;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-right: 6px solid rgba(99, 102, 241, 0.3);
      }
      .metrics-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin-bottom: 1rem; }
      .metric-card, .market-metric-card, .bundle-card { background: rgba(255, 255, 255, 0.03); border-radius: 12px; padding: 0.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; text-align: center; box-shadow: 0 0 0 rgba(255, 255, 255, 0); overflow: hidden; }
      .metric-card div, .market-metric-card div, .bundle-card div { display: flex; flex-direction: column; align-items: center; }
      .metric-card .icon, .market-metric-card .icon, .bundle-card .icon { font-size: 1.2rem; margin-bottom: 0.3rem; }
      .metric-card .label, .market-metric-card .label { color: var(--text-secondary); font-size: 0.8rem; margin-bottom: 0.3rem; }
      .metric-card .value, .market-metric-card .value { color: var(--text-primary); font-size: 0.9rem; font-weight: 600; margin-bottom: 0.3rem; }
      .bundle-card .label, .bundle-card .value, .bundle-card .sub-value { color: red; font-size: 0.8rem; margin-bottom: 0.3rem; }
      .bundle-card .value { font-size: 0.9rem; font-weight: 600; }
      .bundle-card .sub-value { font-size: 0.7rem; }
      .market-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 1rem; }
      .bundles-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-bottom: 1rem; }
.tools-bar {
  display: none !important;
  flex-wrap: wrap !important;        
  justify-content: center !important; 
  align-items: center !important;
  gap: 0.5rem 0.75rem !important;     
  background: transparent !important;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.tools-bar.visible { 
  display: grid !important; 
  background: none !important; 
  opacity: 1;
  transform: translateY(0);
}


@media (max-width: 768px) {
  .tools-bar {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  
  .tools-bar.visible {
    transform: translateY(0) scale(1);
  }
}
.tool-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  padding: 0.6rem 1rem !important;
  color: var(--text-primary) !important;
  background: var(--bg-glass) !important;
  border: 1px solid var(--border-glass) !important;
  border-radius: 12px !important;
  width: auto !important;
  max-width: 220px !important;
  min-height: 40px !important;
  box-shadow: var(--shadow-sm) !important;
}
.tool-button svg,
.tool-button img {
  width: 18px !important;
  height: 18px !important;
}
.tool-button:hover {
  background: rgba(99,102,241,0.15) !important;
  border-color: var(--accent-primary) !important;
}
.tool-button:focus {
  outline: none !important;
}
.tool-button:hover {
  background: var(--accent-primary) !important;
}
      .loading { 
        display: none; 
        text-align: center; 
        padding: 3rem; 
        margin-top: 1.5rem; 
        position: relative;
        background: var(--bg-glass);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-radius: 24px;
        border: 1px solid var(--border-glass);
        box-shadow: var(--shadow-lg), 0 0 30px rgba(99, 102, 241, 0.1);
        opacity: 0;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        transform: scale(0.95);
      }
      
      
      .loading.visible {
        display: block !important;
        opacity: 1 !important;
        transform: scale(1) !important;
      }
      .loading-spinner { 
        width: 50px; 
        height: 50px; 
        border: 4px solid rgba(255, 255, 255, 0.3); 
        border-top: 4px solid #6366f1; 
        border-radius: 50%; 
        animation: loadingSpin 1s linear infinite !important; 
        margin: 0 auto 1rem; 
        position: relative; 
        will-change: transform;
        transform-origin: center;
      }
      
      
      .reduce-motion .loading-spinner {
        animation: loadingSpin 1s linear infinite !important;
        transform: rotate(0deg) !important;
      }
      
      
      .loading-spinner {
        animation: loadingSpin 1s linear infinite !important;
      }
      
      
      .loading .loading-spinner {
        animation: loadingSpin 1s linear infinite !important;
      }
      .loading-spinner::before { 
        content: ''; 
        position: absolute; 
        top: 50%; 
        left: 50%; 
        width: 60px; 
        height: 60px; 
        background: radial-gradient(circle, rgba(99, 102, 241, 0.2) 0%, transparent 70%); 
        transform: translate(-50%, -50%); 
        z-index: -1; 
        animation: spinGlow 2s ease-in-out infinite;
      }
      
      
      .loading-spinner-enhanced {
        width: 60px;
        height: 60px;
        position: relative;
        margin: 0 auto 1rem;
        animation: loadingSpin 1.5s linear infinite !important;
      }
      
      .loading-spinner-enhanced::before,
      .loading-spinner-enhanced::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: conic-gradient(from 0deg, transparent, #6c78f4, transparent);
        animation: loadingSpin 1.5s linear infinite !important;
      }
      
      .loading-spinner-enhanced::after {
        width: 80%;
        height: 80%;
        top: 10%;
        left: 10%;
        background: conic-gradient(from 180deg, transparent, #6c78f4, transparent);
        animation: loadingSpin 1.5s linear infinite reverse !important;
      }
      
      
      .loading-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin: 0 auto 1rem;
      }
      
      .loading-dots .dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #6366f1;
        animation: loadingDot 1.4s ease-in-out infinite both !important;
      }
      
      .loading-dots .dot:nth-child(1) { animation-delay: -0.32s !important; }
      .loading-dots .dot:nth-child(2) { animation-delay: -0.16s !important; }
      .loading-dots .dot:nth-child(3) { animation-delay: 0s !important; }
      
      @keyframes loadingDot {
        0%, 80%, 100% {
          transform: scale(0.8);
          opacity: 0.5;
        }
        40% {
          transform: scale(1);
          opacity: 1;
        }
      }
      .loading p {
        color: var(--text-secondary);
        font-size: 1.125rem;
        font-weight: 500;
        margin: 0;
      }
      .bundles-content { position: relative; overflow: hidden; }
      @keyframes loadingSpin { 
        0% { transform: rotate(0deg); } 
        100% { transform: rotate(360deg); } 
      }
      @keyframes spin { 
        from { transform: rotate(0deg) !important; } 
        to { transform: rotate(360deg) !important; } 
      }
      @keyframes pulse {
        0%, 100% { box-shadow: var(--shadow-glow); }
        50% { box-shadow: 0 0 40px rgba(99, 102, 241, 0.8), var(--shadow-glow); }
      }
      @keyframes spinGlow {
        0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
        50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.1); }
      }
      .clipboard-suggestion { display: flex; justify-content: center; align-items: center; width: 100%; max-width: 500px; margin: 0.75rem auto; padding: 0 1rem; }
      .clipboard-button { 
        background: var(--bg-glass); 
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid var(--border-glass); 
        border-radius: 16px; 
        padding: 1rem 1.5rem; 
        color: var(--text-primary); 
        font-size: 1rem; 
        font-weight: 500;
        display: flex; 
        align-items: center; 
        gap: 0.75rem; 
        cursor: pointer; 
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
        width: auto; 
        max-width: 400px; 
        box-shadow: var(--shadow-sm);
        position: relative;
        overflow: hidden;
      }
      .clipboard-button::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: var(--gradient-primary);
        opacity: 0.1;
        transition: left 0.5s ease;
        z-index: -1;
      }
      .clipboard-button:hover { 
        background: rgba(99, 102, 241, 0.15); 
        transform: translateY(-3px) scale(1.03); 
        box-shadow: var(--shadow-glow), 0 8px 25px rgba(99, 102, 241, 0.3);
        border-color: var(--accent-primary);
      }
      .clipboard-button:hover::before {
        left: 0;
      }
      .ai-analyzer-btn {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.7rem 1.2rem;
        border-radius: 12px;
        background: var(--bg-glass);
        border: 2px solid transparent;
        color: var(--text-primary);
        font-size: 0.8rem;
        font-weight: 600;
        letter-spacing: 0.3px;
        text-transform: uppercase;
        white-space: nowrap;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: var(--shadow-sm);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        overflow: visible;
        -webkit-tap-highlight-color: transparent;
        isolation: isolate;
      }
      .ai-analyzer-btn::before {
        content: '';
        position: absolute;
        inset: -2px;
        border-radius: inherit;
        background: linear-gradient(135deg, var(--accent-primary), #8b5cf6, var(--accent-primary));
        mask: 
          linear-gradient(#fff 0 0) content-box, 
          linear-gradient(#fff 0 0);
        mask-composite: xor;
        -webkit-mask: 
          linear-gradient(#fff 0 0) content-box, 
          linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        padding: 2px;
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: 0;
        pointer-events: none;
      }
      .ai-analyzer-btn::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.3), transparent);
        transition: transform 0.6s ease;
        border-radius: inherit;
        z-index: 1;
        pointer-events: none;
        transform: translateX(-100%);
        opacity: 0;
      }
      .ai-analyzer-btn:hover::before {
        opacity: 0.8;
      }
      .ai-analyzer-btn:hover::after { 
        transform: translateX(100%);
        opacity: 1;
      }
      .ai-analyzer-btn:hover { 
        background: rgba(99, 102, 241, 0.1);
        color: var(--text-primary);
        box-shadow: var(--shadow-glow), var(--shadow-md);
        transform: translateY(-2px) scale(1.02);
      }
      .ai-analyzer-btn:active { 
        transform: translateY(0) scale(0.98);
        box-shadow: var(--shadow-sm);
      }
      .ai-analyzer-btn .ai-beta {
        position: absolute;
        top: -8px;
        right: -8px;
        background: var(--gradient-primary);
        color: white;
        font-size: 0.65rem;
        font-weight: 700;
        padding: 3px 8px;
        border-radius: 12px;
        text-transform: uppercase;
        z-index: 9999 !important;
        transform: rotate(15deg);
        box-shadow: var(--shadow-glow), var(--shadow-md);
        animation: betaPulse 2s infinite;
        pointer-events: none;
        border: 1px solid rgba(255, 255, 255, 0.2);
        isolation: isolate;
      }
      @keyframes betaPulse {
        0%, 100% { 
          transform: rotate(15deg) scale(1); 
          box-shadow: var(--shadow-glow), var(--shadow-md); 
        }
        50% { 
          transform: rotate(15deg) scale(1.05); 
          box-shadow: 0 0 30px rgba(99, 102, 241, 0.8), var(--shadow-glow), var(--shadow-md); 
        }
      }
      .clipboard-button .token-icon { width: 20px; height: 20px; border-radius: 50%; }
      #dexscreener-embed { position: relative; width: 100%; padding-bottom: 75%; margin-bottom: 1rem; }
      @media (min-width: 1400px) { #dexscreener-embed { padding-bottom: 40%; } }

      @media (min-width: 1024px) {
        .modal {
          max-width: 480px !important;
          width: auto !important;
          margin: 0 auto !important;
        }
      }

      @media (max-width: 1024px) and (min-width: 769px) {
        .results-section { max-width: 98%; padding: 2rem; }
        .bubble-map-container svg { height: 350px; }
        
        .chart-canvas { height: 220px !important; }
        #liveChart { height: 220px !important; }
        .key-metrics-grid { grid-template-columns: repeat(2, 1fr); }
        .market-metrics-grid { grid-template-columns: repeat(2, 1fr); }
        .bundles-grid { grid-template-columns: repeat(2, 1fr); }
      }
      #dexscreener-embed iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: 0; }
      @media (max-width: 768px) { 
        html, body { cursor: auto; font-size: 16px; } 
        .container { padding: 0.75rem 0.75rem 100px 0.75rem; max-width: 100%; overflow-x: hidden; overflow-y: visible; } 
        .top-left-logo { width: 45px; top: 0.75rem; left: 0.75rem; }
        
        
        * {
          animation-duration: 0.3s !important;
          transition-duration: 0.3s !important;
        }
        
        
        .beta-tag,
        .betaPulse,
        .searchPulse,
        .titleGlow,
        .tokenNamePulse,
        .bubbleGlow,
        .connectionPulse,
        .whaleGlow,
        .status-indicator.active,
        .livePulse {
          animation-duration: 6s !important;
        }
        
        
        .status-indicator.active {
          animation: livePulse 6s infinite !important;
        }
        
        
        .results-section,
        .trading-integration,
        .live-trades-section {
          contain: none !important;
          will-change: auto !important;
        }
        
        
        body { overflow: hidden !important; }
        .container { overflow: hidden !important; }
        
        
        .trades-container {
          overflow: hidden !important;
          max-height: none !important;
          height: auto !important;
        }
        
        .trades-container::-webkit-scrollbar {
          display: none !important;
        }
        
        .trades-container::-webkit-scrollbar-thumb {
          display: none !important;
        }
        
        
        .results-section {
          overflow: hidden !important;
        }
        
        .live-trades-section {
          overflow: visible !important;
        }
        
        
        .results-section * {
          animation-play-state: paused !important;
        }
        
        .results-section:hover * {
          animation-play-state: running !important;
        }
        
        
        .results-section {
          transform: translateZ(0) !important;
          backface-visibility: hidden !important;
          -webkit-backface-visibility: hidden !important;
        }
        
        
        .chart-container,
        .custom-chart-container,
        #liveChart,
        .trades-container,
        .live-trades-section,
        .trading-integration {
          animation: none !important;
          transition: none !important;
          will-change: auto !important;
          transform: none !important;
          filter: none !important;
          backdrop-filter: none !important;
          -webkit-backdrop-filter: none !important;
        }
        
        
        .results-section * {
          animation: none !important;
          transition: none !important;
          will-change: auto !important;
          transform: none !important;
          filter: none !important;
        }
        
        
        .chart-container::before,
        .chart-container::after,
        .custom-chart-container::before,
        .custom-chart-container::after {
          display: none !important;
        }
        
        
        .results-section::before,
        .results-section::after {
          display: none !important;
        }
        
        
        .modal::before,
        .key-metrics::before {
          display: none !important;
        }
        
        
        .results-section {
          backdrop-filter: blur(5px) !important;
          -webkit-backdrop-filter: blur(5px) !important;
        }
        
        
        #liveChart {
  contain: none !important;
  will-change: auto !important;
  transform: none !important;
  touch-action: pan-y !important;
  pointer-events: auto !important;
}
        
        .custom-chart-container {
          pointer-events: auto !important;
          touch-action: pan-y !important;
          overflow: visible !important;
        }
        
        
        .chart-container,
        .custom-chart-container {
          
          pointer-events: auto !important;
          touch-action: pan-y !important;
        }

        .scanner-card.sticky {
          position: -webkit-sticky;
          position: sticky;
          top: 56px; 
          z-index: 100;
          background: var(--bg-dark);
          backdrop-filter: blur(20px);
          -webkit-backdrop-filter: blur(20px);
          border-bottom: 1px solid var(--border-glass);
          padding: 1rem;
          margin-bottom: 0;
          will-change: transform;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);

          width: 100%;
          max-width: none;
          margin-left: 0;
          margin-right: 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          min-height: 80px;
        }
        

        .scanner-card.sticky .scanner-input-wrapper {
          width: 100%;
          max-width: 400px;
          margin: 0 auto;
          display: flex;
          justify-content: center;
          position: relative;
          background: rgba(255, 255, 255, 0.1);
          border: 2px solid rgba(99, 102, 241, 0.3);
          border-radius: 15px;
        }
        
        .scanner-card.sticky .search-input,
        .scanner-card.sticky #contractInput {
          width: 100% !important;
          padding: 1rem 3rem 1rem 1.5rem !important;
          background: transparent !important;
          border: none !important;
          outline: none !important;
          color: #ffffff !important;
          font-size: 16px !important;
          text-align: center !important;
          border-radius: 15px !important;
          box-sizing: border-box !important;
          display: block !important;
          margin: 0 !important;
        }
        
        .scanner-card.sticky .search-icon,
        .scanner-card.sticky #searchIcon {
          position: absolute !important;
          right: 1rem !important;
          top: 50% !important;
          transform: translateY(-50%) !important;
          color: #9ca3af !important;
          width: 20px !important;
          height: 20px !important;
          cursor: pointer !important;
          z-index: 101 !important;
        }
        

        .scanner-card.sticky h1,
        .scanner-card.sticky p {
          display: none;
        }
        

        .scanner-card.sticky {
          padding: 0.75rem 1rem;
          min-height: 70px;
        }
        

        .scanner-card.sticky .search-container {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
        }
        
        .scanner-card.sticky .search-input {
          flex-grow: 1;
          max-width: none;
        }
        
        .scanner-card.sticky .scanner-input-wrapper {
          width: 100%;
          margin: 0 auto;
          display: flex;
          justify-content: center;
          position: relative;
        }
        

        .scanner-card.sticky::before {
          display: none;
        }
        
        
        .tools-bar.visible {
          position: sticky;
          top: 0;
          z-index: 1000;
          background: transparent !important;
          backdrop-filter: none !important;
          -webkit-backdrop-filter: none !important;
          padding: 0.5rem;
          margin: 0;
          display: grid;
          grid-template-columns: repeat(2, minmax(0, auto));
          grid-template-rows: auto auto;
          justify-content: center;
          justify-items: center;
          align-items: center;
          gap: 0.5rem 0.75rem;
          border-bottom: none !important;
        }
        
        .scanner-card .tools-bar,
        .scanner-card .tools-bar.visible {
          position: static !important;
          top: auto !important;
          left: auto !important;
          right: auto !important;
          z-index: auto !important;
          margin: 0 0 0.75rem 0 !important;
          display: grid !important;
          grid-template-columns: 1fr 1fr !important;
          grid-template-rows: auto auto !important;
          justify-content: center !important;
          justify-items: center !important;
          align-items: center !important;
          gap: 0.5rem 0.75rem !important;
          flex-wrap: unset !important;
        }
        .scanner-card .tools-bar .tool-button {
          width: 100% !important;        
          min-width: 0 !important;       
          max-width: none !important;    
          padding: 0.6rem 0.8rem !important; 
          white-space: nowrap !important;    
          flex: unset !important;         
          display: inline-flex !important; 
        }
        
        .scanner-card .tools-bar .tool-button:nth-child(1) { 
          grid-column: 1 !important;
          grid-row: 1 !important;
        }
        .scanner-card .tools-bar .tool-button:nth-child(2) { 
          grid-column: 2 !important;
          grid-row: 1 !important;
        }
        .scanner-card .tools-bar .tool-button:nth-child(3) { 
          grid-column: 1 / -1 !important;
          grid-row: 2 !important;
          justify-self: center !important;
        }

        
        @media (min-width: 769px) {
          .scanner-card .tools-bar .tool-button:nth-child(3) { 
            width: 60% !important;
          }
          .scanner-card .tools-bar {
            grid-template-columns: 0.9fr 1.1fr !important;
            max-width: 640px !important;
            margin-left: auto !important;
            margin-right: auto !important;
          }
        }

        
        @media (max-width: 768px) {
          .scanner-card .tools-bar .tool-button:nth-child(1) { 
            grid-column: 1 !important;
            grid-row: 1 !important;
            justify-self: end !important;
          }
          .scanner-card .tools-bar .tool-button:nth-child(2) { 
            grid-column: 2 !important;
            grid-row: 1 !important;
            justify-self: start !important;
          }
          .scanner-card .tools-bar .tool-button:nth-child(3) { 
            grid-column: 1 / -1 !important;
            grid-row: 2 !important;
            justify-self: center !important;
            width: 48% !important; 
          }
        }
        #resultsSection { padding-top: 0; }
        .menu-container { 
          position: fixed !important;
          top: 50% !important;
          left: 100px !important;
          right: auto !important;
          transform: translateY(-50%) !important;
          width: 280px;
          height: 280px;
          max-width: calc(100vw - 2rem);
          max-height: 280px;
          overflow-y: auto;
          padding: 1rem;
          border-radius: 16px;
          margin: 0 !important;
          z-index: 500; 
          display: grid !important;
          grid-template-columns: repeat(3, 1fr);
          gap: 0.5rem;
          order: 2;
        }
        .menu-container .beta-tag {
          position: absolute;
          top: -8px;
          right: -8px;
          background: linear-gradient(135deg, #facc15, #f59e0b);
          color: #1a1a1a;
          font-size: 0.75rem;
          font-weight: 700;
          padding: 4px 8px;
          border-radius: 6px;
          text-transform: uppercase;
          z-index: 1002;
          transform: rotate(45deg);
          box-shadow: 0 4px 14px rgba(250, 204, 21, 0.35);
          border: 1px solid rgba(250, 204, 21, 0.6);
          animation: betaPulse 2s infinite;
          pointer-events: none;
          overflow: visible;
        }
        .menu-container .menu {
          grid-column: 1 / -1;
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          grid-template-rows: repeat(3, 1fr);
          gap: 0.25rem;
          height: 100%;
          width: 100%;
          overflow: hidden;
          align-items: center;
          justify-items: center;
          align-content: center;
          justify-content: center;
        }
        .menu-container .menu li {
          margin: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100%;
        }
        .menu-container .menu li a {
          padding: 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-align: center;
          font-size: 0.8rem;
          font-weight: 600;
          border-radius: 12px;
          width: 100%;
          height: 100%;
          min-height: 60px;
          line-height: 1.2;
        }
        .menu-container .menu li a .menu-icon {
          width: 22px;
          height: 22px;
          margin-bottom: 0.3rem;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
        }
        .menu-container .menu li a span {
          text-align: center;
          width: 100%;
          display: block;
        } 
        .main-content { 
          padding: 1rem;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          flex-direction: column;
          padding-top: 2rem;
        }
        .main-content h1 { font-size: 2.25rem; line-height: 1.1; margin-bottom: 0.75rem; } 
        .main-content p { font-size: 1rem; max-width: 100%; margin-bottom: 1.5rem; } 
        .scanner-card { 
          width: 90% !important;
          max-width: 400px !important;
          margin: 0 auto !important;
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
          justify-content: center !important;
          border: none !important;
          box-shadow: none !important;
          order: 1 !important; 
          transform: none !important;
          position: relative !important;
          left: auto !important;
          right: auto !important;
        } 
        .scanner-card * { transform: none !important; }
        .scanner-card.sticky { 
          order: 0;

          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
          justify-content: center !important;
        }
        
        #resultsSection.has-sticky {
          margin-top: 100px;
          padding-top: 1rem;
        } 
        .scanner-input-wrapper { 
          border-radius: 14px; 
          margin: 0 auto !important; 
          position: relative;
          isolation: isolate;
          pointer-events: auto !important;
          touch-action: manipulation !important;
          width: 100% !important;
          padding: 0;
        } 
        .search-input { 
          display: block;
          width: 100%;
          padding: 1.125rem 4rem 1.125rem 1.5rem !important; 
          font-size: 16px; 
          line-height: 1.5;
          background: transparent;
          border: none;
          outline: none;
          color: var(--text-primary);
          font-family: inherit;
          font-weight: 500;
          letter-spacing: 0.5px;
          position: relative;
          z-index: 10;
          box-sizing: border-box;
          -webkit-user-select: text !important; 
          -moz-user-select: text !important;
          -ms-user-select: text !important;
          user-select: text !important; 
          -webkit-touch-callout: default !important; 
          touch-action: manipulation;
          -webkit-appearance: textfield !important;
          appearance: textfield !important;
          -webkit-tap-highlight-color: transparent;
          -webkit-text-size-adjust: 100%;
          -webkit-font-smoothing: antialiased;
          caret-color: var(--accent-primary);
          
          resize: none;
          border-radius: 0;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
        .search-input:focus {
          outline: none !important;
          border: none !important;
          -webkit-user-select: text !important;
          -moz-user-select: text !important;
          -ms-user-select: text !important;
          user-select: text !important;
          -webkit-touch-callout: default !important;
          touch-action: manipulation !important;
          z-index: 1001;
          position: relative;
        }
        

        .scanner-input-wrapper input.search-input#contractInput {
          display: block !important; 
          margin: 0 auto !important; 
          width: 100% !important; 
          text-align: center !important; 
          position: relative !important;
          left: auto !important;
          right: auto !important;
          transform: none !important;
          color: #ffffff !important;
          background: transparent !important;
        }
        .search-input:active {
          -webkit-touch-callout: default !important;
          -webkit-user-select: text !important;
          user-select: text !important;
          touch-action: manipulation !important;
        }
        .search-input::selection {
          background: var(--accent-primary);
          color: white;
        }
        .search-input::-webkit-selection {
          background: var(--accent-primary);
          color: white;
        }
        
        .search-icon {
          position: absolute !important; 
          top: 50% !important;
          right: 1rem !important;
          transform: translateY(-50%) !important;
          color: var(--text-secondary); 
          font-size: 1.25rem; 
          cursor: pointer; 
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
          padding: 0.75rem !important;
          border-radius: 8px;
          z-index: 999 !important;
          pointer-events: auto !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          width: 18px !important;
          height: 18px !important;
          min-width: 18px !important;
          min-height: 18px !important;
          background: transparent !important;
          border: none !important;
          outline: none !important;
        }
        
        .search-icon:hover {
          transform: translateY(-50%) scale(1.1) !important;
          color: var(--accent-primary) !important;
          background: rgba(99, 102, 241, 0.15) !important;
        }
        
        .search-icon:active {
          transform: translateY(-50%) scale(0.95) !important;
        }
        
        .scanner-input-wrapper:focus-within .search-icon {
          animation: none !important;
          transform: translateY(-50%) !important;
          color: var(--accent-primary) !important;
        }
        .search-input::-webkit-selection {
          background: var(--accent-primary);
          color: white;
        } 
        .search-icon { 
          right: 1rem !important; 
          top: 50% !important;
          transform: translateY(-50%) !important;
          font-size: 1rem !important; 
          padding: 0.75rem !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
        } 

        .modal-container {
          position: fixed;
          inset: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          background: rgba(0, 0, 0, 0.9);
          backdrop-filter: blur(20px);
          -webkit-backdrop-filter: blur(20px);
          padding: 1rem;
          box-sizing: border-box;
        }
        .modal { padding: 1.5rem; border-radius: 18px; max-width: 92%; width: auto; margin: 0; transform: none !important; } 
        .modal h2 { font-size: 1.625rem; margin-bottom: 0.75rem; } 
        .modal p { font-size: 0.95rem; margin-bottom: 1.5rem; } 
        .modal-buttons .button { max-width: 100%; padding: 1rem 1.5rem; font-size: 1rem; margin-bottom: 0.75rem; } 
        .username-input { padding: 1rem; font-size: 1rem; border-radius: 10px; } 

        @media (max-width: 480px) {
          .scanner-card {
            width: 95% !important;
            max-width: 350px !important;
          }
          
          .scanner-input-wrapper {
            width: 100% !important;
            margin: 0 auto !important;
          }
          
          #contractInput {
            padding: 1rem 3rem 1rem 1.5rem !important;
            font-size: 16px !important;
          }
        }
        

        .beta-tag {
          position: absolute;
          top: -6px;
          right: -6px;
          font-size: 0.65rem;
          padding: 2px 6px;
          border-radius: 4px;
          transform: rotate(0deg);
          z-index: 1003;
          background: linear-gradient(135deg, #facc15, #f59e0b) !important;
          color: #111827 !important;
          box-shadow: 0 4px 12px rgba(250, 204, 21, 0.3);
          border: 1px solid rgba(250, 204, 21, 0.5);
          pointer-events: none;
        }
        .tool-button {
          position: relative;
          padding: 1rem 1.5rem;
        }
        .tool-button .beta-tag {
          top: -8px;
          right: -8px;
          transform: rotate(20deg);
          z-index: 1003;
        }

        .dex-icon .beta-tag {
          top: -4px;
          right: -4px;
          font-size: 0.6rem;
          padding: 1px 4px;
          transform: rotate(15deg);
          z-index: 1003;
        }

        .menu li .beta-tag {
          top: -4px;
          right: -4px;
          font-size: 0.6rem;
          padding: 2px 4px;
          transform: rotate(15deg);
          z-index: 1003;
        } 
        .results-section { 
          padding: 1rem; 
          margin: 0.5rem auto 0; 
          border-radius: 16px; 
          width: calc(100% - 1rem); 
          max-width: none;
          margin-left: auto;
          margin-right: auto;
          overflow: hidden;
          box-sizing: border-box;
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
          transform: translateZ(0);
          will-change: auto;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }

        .results-section .key-metrics-grid { 
          grid-template-columns: repeat(3, 1fr); 
          max-width: 100%;
          margin: 0 auto;
        }
        .results-section .market-metrics-grid { 
          grid-template-columns: repeat(4, 1fr); 
          max-width: 100%;
          margin: 0 auto;
        }
        .results-section .bundles-grid { 
          grid-template-columns: repeat(3, 1fr); 
          max-width: 100%;
          margin: 0 auto;
        }
        .results-section .trades-dex-container { 
          display: flex;
          flex-direction: column;
          max-width: 100%;
          margin: 0 auto;
        }
        .results-section .key-metrics,
        .results-section .market-metrics,
        .results-section .token-holder-insights,
        .results-section .recent-trades,
        .results-section .dex-pairs {
          max-width: 100%;
          margin: 0 auto 1rem auto;
        } 
        .results-title { font-size: 1.375rem; margin-bottom: 1rem; text-align: center; } 
        .token-header { gap: 0.75rem; margin-bottom: 1.5rem; padding: 1.5rem; border-radius: 16px; } 
        .token-icon { width: 50px; height: 50px; } 
        .token-name { font-size: 1.25rem; } 
        .key-metrics { padding: 1rem; border-radius: 16px; margin-bottom: 1.5rem; } 
        .key-metrics-grid { grid-template-columns: 1fr; gap: 0.75rem; } 
        .key-metric-card { padding: 1.125rem; border-radius: 12px; gap: 0.625rem; min-height: 90px; text-align: center; } 
        .key-metric-card .icon { font-size: 1.75rem; } 
        .key-metric-card .label { font-size: 0.8rem; } 
        .key-metric-card .value { font-size: 1.1rem; } 
        .market-metrics, .bundles-section { padding: 1rem; border-radius: 16px; margin-bottom: 1.5rem; }
        .bubble-maps-section { padding: 1rem; border-radius: 16px; margin-bottom: 1.5rem; }
        .bubble-map-container svg { width: 100%; height: 300px; }
        .bubble-stats { position: static; width: 100%; margin-top: 1rem; }
        .bubble-maps-content { overflow-x: auto; } 
        .market-metrics-grid, .bundles-grid { grid-template-columns: 1fr; gap: 0.75rem; } 
        .market-metric-card, .bundle-card { padding: 1.25rem; border-radius: 12px; gap: 0.5rem; } 
        .trades-dex-container { flex-direction: column; gap: 1rem; padding: 1rem; border-radius: 16px; margin-bottom: 1.5rem; overflow: visible; } 
        .transaction-item, .dex-pair-item { padding: 0.75rem; font-size: 0.9rem; border-radius: 10px; margin-bottom: 0.5rem; overflow: hidden; text-overflow: ellipsis; max-width: 100%; box-sizing: border-box; } 
.tools-bar {
    flex-wrap: wrap !important;
  }
.tool-button {
  flex: 0 0 auto !important;
  min-width: 150px !important;
  background: var(--bg-glass) !important;
  color: var(--text-primary) !important;
  text-align: center !important;
  padding: 0.75rem 1rem !important;
  border-radius: 8px !important;
  border: none !important;
  outline: none !important;
}

.scanner-card .tools-bar {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, auto)) !important;
  grid-template-rows: auto auto !important;
  flex-wrap: unset !important;
}
.scanner-card .tools-bar .tool-button {
  flex: unset !important;
  min-width: 0 !important;
  width: 100% !important;
}
        .footer-links {
          position: relative;
          bottom: 0;
          left: 0;
          right: 0;
          background: var(--bg-dark);
          border-top: 1px solid var(--border-glass);
          padding: 1rem;
          z-index: 3;
          gap: 0.5rem;
          margin-top: 2rem;
        }
        .footer-links a { font-size: 0.7rem; padding: 0.25rem 0.5rem; } 
        .social-links { gap: 0.5rem; } 
        .social-links a { width: 30px; height: 30px; border-radius: 8px; } 
        .social-links img { width: 14px; height: 14px; } 
        .clipboard-suggestion { margin: 1rem auto; padding: 0 1rem; } 
        .clipboard-button { width: 100%; max-width: 350px; padding: 0.875rem 1.25rem; } 
        .settings-menu { width: 260px; padding: 1.25rem; border-radius: 16px; top: 3.5rem; right: 0.75rem; max-height: 60vh; overflow-y: auto; }
        .settings-menu input[type="color"] {
          width: 40px;
          height: 40px;
          border-radius: 8px;
          border: 2px solid var(--border-glass);
        } 
      }

      





        
        #settings-icon {
          transition: all 0.3s ease !important;
        }

        #settings-icon:hover {
          transform: rotate(90deg) scale(1.1) !important;
          background: rgba(99, 102, 241, 0.2) !important;
          border-color: #6366f1 !important;
          box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3) !important;
        }

        #settings-icon:active {
          transform: scale(0.95) !important;
        }

      @keyframes settingsFadeIn {
        from { opacity: 0; transform: translateX(20px); }
        to { opacity: 1; transform: translateX(0); }
      }
      @keyframes settingsGlow {
        0%, 100% { box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
        50% { box-shadow: var(--shadow-glow), var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
      }

      .settings-menu {
        position: fixed;
        top: 3.5rem;
        right: 1rem;
        background: #000000;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid var(--border-glass);
        border-radius: 20px;
        padding: 1.5rem;
        box-shadow: var(--shadow-lg), 0 0 40px rgba(99, 102, 241, 0.1);
        z-index: 1002;
        width: 350px;
        max-height: 70vh;
        overflow-y: auto;
        color: var(--text-primary);
        display: none;
        transform: scale(0.95);
        opacity: 0;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .settings-menu::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--gradient-card);
        opacity: 0.15;
        z-index: -1;
      }
      .settings-menu h3 {
        font-size: 1.25rem;
        margin-bottom: 1rem;
        background: var(--title-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        color: transparent;
        text-shadow: 0 0 24px rgba(123, 134, 248, 0.35);
        font-weight: 700;
      }
      .settings-menu ul {
        list-style: none;
        padding: 0;
        margin: 0;
      }
      .settings-menu li {
        margin: 0.5rem 0;
      }
      .settings-menu label {
        display: flex;
        align-items: center;
        font-size: 0.9rem;
        cursor: pointer;
      }
      .settings-menu input[type="checkbox"] {
        margin-right: 0.5rem;
        accent-color: var(--accent-primary);
      }
      .settings-menu input[type="range"],
      .settings-menu input[type="color"],
      .settings-menu select {
        width: 100%;
        margin-top: 0.2rem;
      }
      .settings-menu input[type="color"] {
        height: 30px;
        padding: 2px;
        border: none;
        background: none;
        cursor: pointer;
      }
      .settings-menu select {
        background: var(--bg-glass);
        color: var(--text-primary);
        border: 1px solid var(--border-glass);
        border-radius: 6px;
        padding: 0.5rem;
        cursor: pointer;
      }
      .settings-menu select:focus {
        border-color: var(--accent-primary);
        outline: none;
      }

      
      @media (min-width: 769px) {
        .menu-container .menu {
          will-change: transform;
          transform-style: preserve-3d;
        }
      }

      
      @media (max-width: 768px) {
        .settings-menu {
          background: #000000 !important; 
          backdrop-filter: none !important; 
          -webkit-backdrop-filter: none !important;
          border-color: var(--border-glass);
          box-shadow: var(--shadow-lg), 0 0 40px rgba(0, 0, 0, 0.3) !important;
        }
        .settings-menu::before {
          opacity: 0.1 !important; 
        }
      }

      .settings-menu .settings-btn {
        background: linear-gradient(135deg, #6c78f4, #8d98ff);
        color: white;
        border: none;
        padding: 8px 16px;
        border-radius: 8px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.3s ease;
        width: 100%;
        margin-top: 8px;
      }

      .settings-menu .settings-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(123, 134, 248, 0.28);
        background: linear-gradient(135deg, #616eea, #7e8cff);
      }

      .settings-menu .settings-btn:active {
        transform: translateY(0);
      }

      
      .no-cursor-effects {
        --mouse-x: 50% !important;
        --mouse-y: 50% !important;
      }

      .no-lazy-loading .lazy-load {
        opacity: 1 !important;
        transform: none !important;
      }

      .no-tooltips [title]::after,
      .no-tooltips [data-tooltip]::after {
        display: none !important;
      }

      .no-smooth-scroll {
        scroll-behavior: auto !important;
      }

      .reduce-animations * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }

      .reduce-motion * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }

      .low-bandwidth {
        background-image: none !important;
        backdrop-filter: none !important;
      }

      .low-bandwidth * {
        background-image: none !important;
        backdrop-filter: none !important;
        filter: none !important;
      }
      .settings-menu .setting-group {
        margin-bottom: 1.5rem;
        padding: 1rem;
        background: var(--bg-glass);
        border-radius: 12px;
        border: 1px solid var(--border-glass);
      }
      .settings-menu .setting-group h4 {
        font-size: 1rem;
        margin-bottom: 0.75rem;
        color: var(--text-primary);
        font-weight: 600;
      }

      .results-section .key-metrics-grid { 
        grid-template-columns: repeat(6, 1fr); 
        gap: 1.5rem; 
        justify-content: center;
        max-width: 1400px;
        margin: 0 auto;
        perspective: 1000px;
      }
      .results-section .market-metrics-grid { 
        grid-template-columns: repeat(8, 1fr); 
        gap: 1.5rem; 
        justify-content: center;
        max-width: 1600px;
        margin: 0 auto;
      }
      .results-section .bundles-grid { 
        grid-template-columns: repeat(6, 1fr); 
        gap: 1.5rem; 
        justify-content: center;
        max-width: 1400px;
        margin: 0 auto;
      }
      .results-section .trades-dex-container { 
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 2rem;
        max-width: 1600px;
        margin: 0 auto;
      }
      .results-section .token-header {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 2rem;
        text-align: center;
        max-width: 1200px;
        margin: 0 auto;
      }
      .results-section .bubble-map-container {
        height: 500px;
        max-width: 1400px;
        margin: 0 auto;
      }
      .results-section #dexscreener-embed {
        height: 600px;
        max-width: 1400px;
        margin: 0 auto;
      }

      .results-section .key-metrics,
      .results-section .market-metrics,
      .results-section .token-holder-insights,
      .results-section .recent-trades,
      .results-section .dex-pairs,
      .results-section .bundles-section,
      .results-section .bubble-maps-section {
        max-width: 1400px;
        margin: 0 auto 3rem auto;
        position: relative;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
      
      .results-section .key-metrics::before,
      .results-section .market-metrics::before,
      .results-section .token-holder-insights::before {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        background: var(--gradient-primary);
        border-radius: 22px;
        z-index: -1;
        opacity: 0;
        transition: opacity 0.3s ease;
      }
      
      .results-section .key-metrics:hover::before,
      .results-section .market-metrics:hover::before,
      .results-section .token-holder-insights:hover::before {
        opacity: 0.1;
      }
      
      .results-section .key-metrics:hover,
      .results-section .market-metrics:hover,
      .results-section .token-holder-insights:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-glow), var(--shadow-lg);
      }
      
      .results-section .results-title {
        position: relative;
        display: inline-block;
        margin-bottom: 2.5rem;
      }
      
      .results-section .results-title::after {
        content: '';
        position: absolute;
        bottom: -8px;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 3px;
        background: var(--gradient-primary);
        border-radius: 2px;
      }
      
      .results-section .key-metric-card,
      .results-section .market-metric-card {
        position: relative;
        overflow: hidden;
        transform-style: preserve-3d;
        backface-visibility: hidden;
      }
      
      .results-section .key-metric-card::after,
      .results-section .market-metric-card::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        transition: left 0.6s ease;
      }
      
      .results-section .key-metric-card:hover::after,
      .results-section .market-metric-card:hover::after {
        left: 100%;
      }
      
      .results-section .token-header {
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(139, 92, 246, 0.05));
        border: 1px solid rgba(99, 102, 241, 0.2);
        margin-bottom: 3rem;
        position: relative;
        overflow: hidden;
      }
      
      .results-section .token-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.1), transparent);
        animation: shimmer 3s ease-in-out infinite;
      }
      
      @keyframes shimmer {
        0% { left: -100%; }
        50% { left: 100%; }
        100% { left: 100%; }
      }
      
      .results-section .transaction-item,
      .results-section .dex-pair-item {
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        position: relative;
        overflow: hidden;
      }
      
      .results-section .transaction-item:hover,
      .results-section .dex-pair-item:hover {
        background: rgba(99, 102, 241, 0.08);
        transform: translateY(-2px) scale(1.01);
        border-color: var(--accent-primary);
      }
      

      .results-section .key-metrics-grid > *,
      .results-section .market-metrics-grid > * {
        animation: fadeInUp 0.6s ease-out;
        animation-fill-mode: backwards;
      }
      
      .results-section .key-metrics-grid > *:nth-child(1) { animation-delay: 0.05s; }
      .results-section .key-metrics-grid > *:nth-child(2) { animation-delay: 0.1s; }
      .results-section .key-metrics-grid > *:nth-child(3) { animation-delay: 0.15s; }
      .results-section .key-metrics-grid > *:nth-child(4) { animation-delay: 0.2s; }
      .results-section .key-metrics-grid > *:nth-child(5) { animation-delay: 0.25s; }
      .results-section .key-metrics-grid > *:nth-child(6) { animation-delay: 0.3s; }
      
      @keyframes fadeInUp {
        from {
          opacity: 0;
          transform: translateY(30px) scale(0.95);
        }
        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }
      

      .hero-card {
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.05));
        border: 1px solid var(--border-glass);
        border-radius: 32px;
        padding: 3rem;
        margin-bottom: 3rem;
        position: relative;
        overflow: hidden;
        backdrop-filter: blur(30px);
        -webkit-backdrop-filter: blur(30px);
        box-shadow: var(--shadow-lg), 0 0 40px rgba(99, 102, 241, 0.1);
      }
      
      .hero-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--gradient-primary);
        opacity: 0.03;
        z-index: -1;
      }
      
      .hero-content {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 3rem;
        max-width: 1200px;
        margin: 0 auto;
      }
      
      .token-avatar {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      .token-avatar img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        border: 3px solid var(--accent-primary);
        box-shadow: var(--shadow-glow), var(--shadow-md);
        transition: all 0.3s ease;
      }
      
      .avatar-glow {
        position: absolute;
        top: -10px;
        left: -10px;
        right: -10px;
        bottom: -10px;
        background: var(--gradient-primary);
        border-radius: 50%;
        opacity: 0.2;
        z-index: -1;
        animation: avatarPulse 3s ease-in-out infinite;
      }
      
      @keyframes avatarPulse {
        0%, 100% { transform: scale(1); opacity: 0.2; }
        50% { transform: scale(1.1); opacity: 0.4; }
      }
      
      .token-info {
        text-align: left;
      }
      
      .token-name {
        font-size: 3rem;
        font-weight: 900;
        background: var(--gradient-primary);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 0.5rem;
        line-height: 1.1;
      }
      
      .token-symbol {
        font-size: 1.25rem;
        color: var(--text-secondary);
        font-weight: 500;
        margin-bottom: 1rem;
        text-transform: uppercase;
        letter-spacing: 2px;
      }
      
      .token-price {
        display: flex;
        align-items: center;
        gap: 1rem;
      }
      
      .price-value {
        font-size: 2rem;
        font-weight: 700;
        color: var(--text-primary);
      }
      
      .price-change {
        background: linear-gradient(135deg, #10b981, #22c55e);
        color: white !important;
        padding: 0.5rem 1rem;
        border-radius: 12px;
        font-weight: 600;
        font-size: 0.9rem;
      }
      
      .hero-stats {
        display: flex;
        flex-direction: column;
        gap: 1rem;
      }
      
      .stat-bubble {
        background: var(--bg-glass);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        border: 1px solid var(--border-glass);
        border-radius: 16px;
        padding: 1.5rem;
        text-align: center;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
      }
      
      .stat-bubble::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.1), transparent);
        transition: left 0.8s ease;
      }
      
      .stat-bubble:hover {
        transform: translateY(-2px) scale(1.02);
        border-color: var(--accent-primary);
        box-shadow: var(--shadow-glow), var(--shadow-md);
      }
      
      .stat-bubble:hover::before {
        left: 100%;
      }
      
      .stat-value {
        display: block;
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 0.5rem;
      }
      
      .stat-label {
        display: block;
        font-size: 0.875rem;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }

      .reduce-animations * {
        animation-duration: 0.1s !important;
        transition-duration: 0.1s !important;
      }
      .reduce-motion * {
        animation: none !important;
        transition: none !important;
      }
      .low-bandwidth .bubble-map-container svg animate,
      .low-bandwidth .bubble-map-container svg animateTransform {
        display: none !important;
      }
      .hide-advanced-metrics .market-metrics-grid .market-metric-card:nth-child(n+4) {
        display: none;
      }
      .layout-compact .key-metric-card {
        padding: 1rem;
        gap: 0.5rem;
      }
      .layout-minimal .key-metrics-grid {
        grid-template-columns: repeat(4, 1fr);
      }
      .layout-minimal .market-metrics-grid {
        grid-template-columns: repeat(6, 1fr);
      }
      .reduce-animations * {
        animation-duration: 0.1s !important;
        transition-duration: 0.1s !important;
      }
      .reduce-motion * {
        animation: none !important;
        transition: none !important;
      }
      .low-bandwidth .bubble-map-container svg animate,
      .low-bandwidth .bubble-map-container svg animateTransform {
        display: none !important;
      }
      .hide-advanced-metrics .market-metrics-grid .market-metric-card:nth-child(n+4) {
        display: none;
      }
      .layout-compact .key-metric-card {
        padding: 1rem;
        gap: 0.5rem;
      }
      .layout-minimal .key-metrics-grid {
        grid-template-columns: repeat(4, 1fr);
      }
      .layout-minimal .market-metrics-grid {
        grid-template-columns: repeat(6, 1fr);
      }

        .settings-menu {
          top: 3.5rem;
          right: 1rem;
          width: 280px;
          max-height: 70vh;
          background: #000000 !important;
          backdrop-filter: none !important;
          -webkit-backdrop-filter: none !important;
      }
      

      .metrics-dashboard {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 2rem;
        margin-bottom: 3rem;
        max-width: 1400px;
        margin-left: auto;
        margin-right: auto;
      }
      
      .dashboard-card {
        background: var(--bg-glass);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid var(--border-glass);
        border-radius: 24px;
        padding: 2rem;
        position: relative;
        overflow: hidden;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: var(--shadow-md);
      }
      
      .dashboard-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--gradient-card);
        opacity: 0.1;
        z-index: -1;
      }
      
      .dashboard-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-glow), var(--shadow-lg);
        border-color: var(--accent-primary);
      }
      
      .card-header {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1.5rem;
      }
      
      .card-icon {
        width: 48px;
        height: 48px;
        background: var(--gradient-primary);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        box-shadow: var(--shadow-glow);
      }
      
      .card-header h3 {
        font-size: 1.25rem;
        font-weight: 800;
        margin: 0;
        background: var(--title-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        color: transparent;
        text-shadow: 0 0 16px rgba(123, 134, 248, 0.25);
      }
      
      .price-display {
        text-align: center;
      }
      
      .current-price {
        font-size: 2.5rem;
        font-weight: 900;
        background: var(--price-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 1rem;
      }
      
      .price-range {
        display: flex;
        justify-content: space-between;
        padding: 1rem;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 12px;
        border: 1px solid var(--border-glass);
      }
      
      .price-range .high,
      .price-range .low {
        font-size: 0.9rem;
        font-weight: 600;
      }
      
      .price-range .high {
        color: #22c55e;
      }
      
      .price-range .low {
        color: #ef4444;
      }
      
      .volume-display {
        text-align: center;
      }
      
      .volume-amount {
        font-size: 2rem;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 0.5rem;
      }
      .volume-change {
        font-size: 1rem;
        font-weight: 600;
        color: var(--accent-tertiary);
      }
      
      .pressure-display {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
      }
      
      .pressure-item {
        text-align: center;
        padding: 1rem;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 12px;
        border: 1px solid var(--border-glass);
      }
      
      .buy-pressure {
        border-left: 3px solid #22c55e;
      }
      
      .sell-pressure {
        border-left: 3px solid #ef4444;
      }
      .pressure-label {
        display: block;
        font-size: 0.8rem;
        color: var(--text-secondary);
        margin-bottom: 0.5rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
      .pressure-value {
        display: block;
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--text-primary);
      }
      
      .holders-display {
        text-align: center;
      }
      
      .holder-stat {
        margin-bottom: 1.5rem;
      }
      
      .holder-value {
        display: block;
        font-size: 2rem;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 0.5rem;
      }
      
      .holder-label {
        display: block;
        font-size: 0.9rem;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
      
      .holder-breakdown {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
      }
      
      .breakdown-item {
        padding: 0.75rem;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 8px;
        border: 1px solid var(--border-glass);
      }
      
      .breakdown-item .label {
        display: block;
        font-size: 0.75rem;
        color: var(--text-secondary);
        margin-bottom: 0.25rem;
      }
      
      .breakdown-item .value {
        display: block;
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-primary);
      }
      

      .analytics-section,
      .trading-section,
      .chart-section,
      .security-section {
        margin-bottom: 3rem;
        max-width: 1400px;
        margin-left: auto;
        margin-right: auto;
      }
      
      .section-header {
        text-align: center;
        margin-bottom: 2rem;
      }
      
      .section-header h2 {
        font-size: 2.5rem;
        font-weight: 900;
        background: var(--gradient-primary);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 0.5rem;
        line-height: 1.1;
      }
      
      .section-header p {
        font-size: 1.1rem;
        color: var(--text-secondary);
        max-width: 600px;
        margin: 0 auto;
      }
      
      .analytics-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        gap: 2rem;
      }
      
      .analytics-card {
        background: var(--bg-glass);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid var(--border-glass);
        border-radius: 24px;
        padding: 2rem;
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
        box-shadow: var(--shadow-md);
      }
      
      .analytics-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--gradient-card);
        opacity: 0.1;
        z-index: -1;
      }
      
      .analytics-header {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1.5rem;
      }
      
      .analytics-icon {
        width: 60px;
        height: 60px;
        background: var(--gradient-primary);
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        box-shadow: var(--shadow-glow);
      }
      
      .analytics-title {
        flex: 1;
      }
      
      .analytics-title h3 {
        font-size: 1.5rem;
        font-weight: 800;
        margin: 0 0 0.25rem 0;
        background: var(--title-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        color: transparent;
        text-shadow: 0 0 16px rgba(123, 134, 248, 0.25);
      }
      
      .premium-badge {
        background: var(--gradient-primary);
        color: white;
        padding: 0.25rem 0.75rem;
        border-radius: 12px;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
      
      .analytics-content {
        position: relative;
        z-index: 1;
      }
      
      .bundle-status {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 1rem;
      }
      
      .status-indicator {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #22c55e;
        box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
      }
      
      .status-indicator.safe {
        background: #22c55e;
      }
      
      .status-indicator.warning {
        background: #f59e0b;
      }
      
      .status-indicator.danger {
        background: #ef4444;
      }
      
      .bundle-metrics {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
      }
      
      .metric {
        padding: 1rem;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 12px;
        border: 1px solid var(--border-glass);
        text-align: center;
      }
      
      .metric-label {
        display: block;
        font-size: 0.8rem;
        color: var(--text-secondary);
        margin-bottom: 0.5rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
      
      .metric-value {
        display: block;
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--text-primary);
      }
      
      .metric-value.low {
        color: #22c55e;
      }
      
      .metric-value.medium {
        color: #f59e0b;
      }
      
      .metric-value.high {
        color: #ef4444;
      }
      
      .flow-preview {
        position: relative;
        height: 200px;
        margin-bottom: 1rem;
        background: rgba(255, 255, 255, 0.02);
        border-radius: 16px;
        border: 1px solid var(--border-glass);
        overflow: hidden;
      }
      
      .flow-node {
        position: absolute;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        color: white;
        transition: all 0.3s ease;
      }
      
      .flow-node.central {
        background: var(--gradient-primary);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 3;
      }
      
      .flow-node.whale {
        background: linear-gradient(135deg, #8b5cf6, #06b6d4);
        top: 25%;
        right: 25%;
        animation: nodeFloat 3s ease-in-out infinite;
      }
      
      .flow-node.smart {
        background: linear-gradient(135deg, #10b981, #22c55e);
        bottom: 25%;
        left: 25%;
        animation: nodeFloat 3s ease-in-out infinite 1s;
      }
      
      @keyframes nodeFloat {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
      }
      
      .flow-connections {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
      
      .connection {
        position: absolute;
        background: linear-gradient(to right, var(--accent-primary), transparent);
        height: 2px;
        opacity: 0.6;
        animation: flowPulse 2s ease-in-out infinite;
      }
      
      .connection.line-1 {
        top: 50%;
        left: 50%;
        width: 100px;
        transform: rotate(-45deg) translateX(-50px);
      }
      
      .connection.line-2 {
        bottom: 50%;
        left: 50%;
        width: 100px;
        transform: rotate(45deg) translateX(-50px);
      }
      
      @keyframes flowPulse {
        0%, 100% { opacity: 0.3; }
        50% { opacity: 0.8; }
      }
      
      .flow-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
      }
      
      .stat {
        padding: 1rem;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 12px;
        border: 1px solid var(--border-glass);
        text-align: center;
      }
      
      .stat-label {
        display: block;
        font-size: 0.8rem;
        color: var(--text-secondary);
        margin-bottom: 0.5rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
      
      .stat-value {
        display: block;
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--text-primary);
      }
      
      .analytics-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 24px;
        z-index: 2;
      }
      
      .upgrade-btn {
        background: var(--gradient-primary);
        color: white;
        border: none;
        padding: 1rem 2rem;
        border-radius: 16px;
        font-size: 1rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.3s ease;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        box-shadow: var(--shadow-glow);
      }
      
      .upgrade-btn:hover {
        transform: translateY(-2px) scale(1.05);
        box-shadow: 0 0 30px rgba(99, 102, 241, 0.6);
      }
      

      .trading-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
      }
      
      .trading-card {
        background: var(--bg-glass);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid var(--border-glass);
        border-radius: 24px;
        padding: 2rem;
        position: relative;
        overflow: hidden;
        box-shadow: var(--shadow-md);
      }
      
      .trading-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--gradient-card);
        opacity: 0.1;
        z-index: -1;
      }
      
      .trading-card .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
      }
      
      .trading-card h3 {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--text-primary);
        margin: 0;
      }
      
      .trade-count,
      .pair-count {
        font-size: 0.9rem;
        color: var(--text-secondary);
        background: rgba(255, 255, 255, 0.1);
        padding: 0.5rem 1rem;
        border-radius: 12px;
        border: 1px solid var(--border-glass);
      }
      
      .trades-list,
      .pairs-list {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
      }
      
      .trade-item {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 1rem;
        padding: 1rem;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 12px;
        border: 1px solid var(--border-glass);
        transition: all 0.3s ease;
      }
      
      .trade-item:hover {
        background: rgba(255, 255, 255, 0.08);
        transform: translateX(4px);
      }
      
      .trade-type {
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }
      
      .trade-indicator {
        width: 8px;
        height: 8px;
        border-radius: 50%;
      }
      
      .trade-indicator.buy {
        background: #22c55e;
        box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
      }
      
      .trade-indicator.sell {
        background: #ef4444;
        box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
      }
      
      .trade-action {
        font-size: 0.8rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
      
      .trade-action.buy {
        color: #22c55e;
      }
      
      .trade-action.sell {
        color: #ef4444;
      }
      
      .trade-details {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
      }
      
      .trade-amount {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--text-primary);
      }
      
      .trade-price {
        font-size: 0.8rem;
        color: var(--text-secondary);
      }
      
      .trade-time {
        font-size: 0.8rem;
        color: var(--text-muted);
      }
      
      .pair-item {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: 1rem;
        padding: 1rem;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 12px;
        border: 1px solid var(--border-glass);
        transition: all 0.3s ease;
      }
      
      .pair-item:hover {
        background: rgba(255, 255, 255, 0.08);
        transform: translateX(4px);
      }
      
      .pair-dex {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        min-width: 120px;
        flex: 0 0 auto;
        max-width: 140px;
      }
      
      .dex-icon {
        width: 32px;
        height: 32px;
        background: var(--gradient-primary);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.7rem;
        font-weight: 700;
        color: white;
        text-transform: uppercase;
        flex: 0 0 32px;
        position: relative;
      }
      
      .dex-name {
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
        min-width: 0;
      }
      

      .expand-toggle-trades:hover,
      .expand-toggle-pairs:hover {
        background: rgba(99, 102, 241, 0.1) !important;
        border-color: var(--accent-primary) !important;
        transform: translateY(-1px);
        box-shadow: var(--shadow-sm);
      }
      
      .expand-toggle-trades:active,
      .expand-toggle-pairs:active {
        transform: translateY(0);
      }
      
      .trades-expanded,
      .pairs-expanded {
        animation: expandSlide 0.3s ease-out;
      }
      
      @keyframes expandSlide {
        from {
          opacity: 0;
          transform: translateY(-10px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      
      .pair-data {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        text-align: right;
      }
      
      .pair-price {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--text-primary);
      }
      

      .live-mode-switch.active {
        background: var(--accent-primary) !important;
        border-color: var(--accent-primary) !important;
      }
      
      .live-mode-switch.active .live-mode-slider {
        transform: translateX(22px) !important;
        background: white !important;
      }
      
      .live-mode-switch:hover {
        background: rgba(99, 102, 241, 0.2) !important;
        border-color: var(--accent-primary) !important;
      }
      
      .live-mode-tooltip:hover .tooltip-content {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(-50%) translateY(-2px) !important;
      }
      
      .status-indicator.active {
        background: #10b981 !important;
        box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
        animation: livePulse 6s infinite;
      }
      
      @keyframes livePulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.6; }
      }
      
      @keyframes flash {
        0%, 100% { background-color: transparent; }
        25% { background-color: rgba(16, 185, 129, 0.3); }
        75% { background-color: rgba(16, 185, 129, 0.1); }
      }
      
      @keyframes fastFlash {
        0%, 100% { background-color: transparent; transform: scale(1); }
        50% { background-color: rgba(16, 185, 129, 0.4); transform: scale(1.02); }
      }
      
      @keyframes slideInFromRight {
        0% {
          transform: translateX(100%) scale(0.9);
          opacity: 0;
        }
        100% {
          transform: translateX(0) scale(1);
          opacity: 1;
        }
      }
      

      .trades-container::-webkit-scrollbar {
        display: none !important;
      }
      
      .trades-container::-webkit-scrollbar-track {
        display: none !important;
      }
      
      .trades-container::-webkit-scrollbar-thumb {
        display: none !important;
      }
      
      .trades-container::-webkit-scrollbar-thumb:hover {
        display: none !important;
      }
      

      .live-trade {
        position: relative;
        overflow: hidden;
      }
      
      .live-trade::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        transition: left 0.5s ease;
      }
      
      .live-trade:hover::before {
        left: 100%;
      }
      
      .live-trade:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
      }
      

      @keyframes liveTradePulse {
        0%, 100% {
          box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7);
        }
        50% {
          box-shadow: 0 0 0 10px rgba(99, 102, 241, 0);
        }
      }
      
      .trade-count-badge {
        animation: liveTradePulse 2s infinite;
      }
      @media (max-width: 768px) {
        .custom-chart-container {
          padding: 1rem !important;
          height: 420px !important; 
          border-radius: 16px !important;
        }
        
        .chart-metrics {
          gap: 0.75rem !important;
          justify-content: center !important;
          flex-wrap: wrap !important;
        }
        
        .metric-item {
          min-width: 60px !important;
          flex: 1 1 30% !important;
          max-width: 90px !important;
        }
        
        .metric-label {
          font-size: 0.7rem !important;
        }
        
        .buy-volume-value, .sell-volume-value, .net-flow-value {
          font-size: 1rem !important;
        }
        
        .chart-header {
          flex-direction: column !important;
          align-items: center !important;
          text-align: center !important;
          gap: 0.75rem !important;
          margin-bottom: 1rem !important;
          padding-bottom: 0.75rem !important;
        }
        .ai-analyzer-btn { 
          width: 100%; 
          justify-content: center;
          padding: 0.8rem 1.2rem;
          font-size: 0.8rem;
          font-weight: 700;
        }
        .ai-analyzer-btn .ai-beta {
          top: -6px;
          right: -6px;
          font-size: 0.6rem;
          padding: 2px 6px;
          transform: rotate(12deg);
          z-index: 9999 !important;
          isolation: isolate;
        }
        
        .chart-controls-left {
          flex-direction: column !important;
          gap: 1rem !important;
          width: 100% !important;
        }
        
        .chart-type-controls {
          order: -1;
          width: fit-content;
          margin: 0 auto;
        }
        
        .chart-type-btn {
          padding: 0.5rem 1rem !important;
          font-size: 0.85rem !important;
        }
        
        .market-cap-overlay {
          position: static !important;
          width: fit-content !important;
          margin: 0 auto !important;
          order: 2;
        }
        
         .chart-canvas { height: 350px !important; }
         #liveChart { height: 350px !important; }
        
        .chart-legend {
          gap: 0.75rem !important;
          flex-wrap: wrap !important;
          justify-content: center !important;
          margin-top: 0.75rem !important;
          padding-top: 0.75rem !important;
        }
        
        .legend-item {
          font-size: 0.8rem !important;
        }
        
        .analytics-content.live-content p {
          font-size: 0.9rem !important;
          margin-bottom: 1rem !important;
        }
        
        .analytics-card.live-trading-flow {
          padding: 1rem !important;
          margin: 0 !important;
          width: 100% !important;
          max-width: 100% !important;
          overflow: hidden !important;
          box-sizing: border-box !important;
        }
        
        .trading-integration {
          height: auto !important;
          min-height: 300px !important;
          margin-top: 1rem !important;
          gap: 1rem !important;
          overflow: visible !important;
          width: 100% !important;
          max-width: 100% !important;
          box-sizing: border-box !important;
        }
        
.live-trades-section {
  height: auto !important; 
  display: flex !important; 
  flex-direction: column !important; 
  flex-grow: 1 !important; 
  min-height: auto !important; 
  overflow: visible !important; 
}
        
.trades-container {
  flex-grow: 1 !important; 
  height: auto !important; 
  min-height: 200px !important;
  max-height: none !important;
  overflow-y: visible !important; 
}
        
        .trade-item {
          font-size: 0.85rem !important;
          padding: 0.75rem !important;
          margin-bottom: 0.5rem !important;
          word-wrap: break-word !important;
          overflow-wrap: break-word !important;
          max-width: 100% !important;
          box-sizing: border-box !important;
        }
        
        .trade-stats {
          font-size: 0.75rem !important;
          gap: 0.5rem !important;
        }
      }
      

      @keyframes gradientShift {
        0%, 100% { 
          filter: hue-rotate(0deg) brightness(1);
          transform: scale(1);
        }
        33% { 
          filter: hue-rotate(60deg) brightness(1.1);
          transform: scale(1.02);
        }
        66% { 
          filter: hue-rotate(-60deg) brightness(0.9);
          transform: scale(0.98);
        }
      }
      
      @keyframes floatUp {
        0%, 100% { 
          transform: translateY(0) scale(1);
          opacity: 0.3;
        }
        50% { 
          transform: translateY(-20px) scale(1.2);
          opacity: 0.8;
        }
      }
      
      @keyframes chartGlow {
        0%, 100% { 
          box-shadow: 
            0 8px 32px rgba(0, 0, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.1),
            0 0 40px rgba(99, 102, 241, 0.1);
        }
        50% { 
          box-shadow: 
            0 8px 32px rgba(0, 0, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.1),
            0 0 60px rgba(99, 102, 241, 0.2);
        }
      }
      

      .metric-item:hover {
        transform: translateY(-2px) scale(1.05) !important;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2) !important;
      }
      
      .pair-volume {
        font-size: 0.8rem;
        color: var(--text-secondary);
      }
      

      .chart-container {
        background: var(--bg-glass);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid var(--border-glass);
        border-radius: 24px;
        touch-action: none !important;
        pointer-events: none !important;
        padding: 1rem;
        height: 600px;
        overflow: hidden;
        box-shadow: var(--shadow-md);
        position: relative;
      }
      
      .chart-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--gradient-card);
        opacity: 0.05;
        z-index: -1;
      }
      
      .chart-container iframe {
        width: 100%;
        height: 100%;
        border: none;
        border-radius: 20px;
      }
      

      .security-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
      }
      
      .security-card {
        background: var(--bg-glass);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid var(--border-glass);
        border-radius: 24px;
        padding: 2rem;
        position: relative;
        overflow: hidden;
        box-shadow: var(--shadow-md);
      }
      /* Moved core variables and common rules to styles.css for caching. Keep component-specific CSS inline as needed. */

      
      .security-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--gradient-card);
        opacity: 0.1;
        z-index: -1;
      }
      
      .security-header {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1.5rem;
      }
      
      .security-icon {
        width: 48px;
        height: 48px;
        background: var(--gradient-primary);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        box-shadow: var(--shadow-glow);
      }
      
      .security-header h3 {
        font-size: 1.25rem;
        font-weight: 800;
        margin: 0;
        background: var(--title-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        color: transparent;
        text-shadow: 0 0 16px rgba(123, 134, 248, 0.25);
      }
      .security-item .label, .security-item .value { color: var(--text-primary); }
      
      .security-items {
        display: flex;
        flex-direction: column;
        gap: 1rem;
      }
      
      .security-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 12px;
        border: 1px solid var(--border-glass);
      }
      
      .item-label {
        font-size: 0.9rem;
        color: var(--text-secondary);
        font-weight: 500;
      }
      
      .item-value {
        font-size: 0.9rem;
        font-weight: 600;
        padding: 0.25rem 0.75rem;
        border-radius: 8px;
      }
      
      .item-value.safe {
        color: #22c55e;
        background: rgba(34, 197, 94, 0.1);
      }
      
      .item-value.warning {
        color: #f59e0b;
        background: rgba(245, 158, 11, 0.1);
      }
      
      .item-value.danger {
        color: #ef4444;
        background: rgba(239, 68, 68, 0.1);
      }
      
      .item-value.neutral {
        color: var(--text-primary);
        background: rgba(255, 255, 255, 0.1);
      }
      
      .risk-score {
        text-align: center;
      }
      
      .score-display {
        margin-bottom: 1.5rem;
      }
      
      .score-value {
        font-size: 2.5rem;
        font-weight: 900;
        margin-bottom: 0.5rem;
        padding: 1rem;
        border-radius: 16px;
        border: 2px solid;
      }
      
      .score-value.low {
        color: #22c55e;
        border-color: #22c55e;
        background: rgba(34, 197, 94, 0.1);
      }
      
      .score-value.medium {
        color: #f59e0b;
        border-color: #f59e0b;
        background: rgba(245, 158, 11, 0.1);
      }
      
      .score-value.high {
        color: #ef4444;
        border-color: #ef4444;
        background: rgba(239, 68, 68, 0.1);
      }
      
      .score-label {
        font-size: 0.9rem;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
      
      .score-breakdown {
        display: flex;
        flex-direction: column;
        gap: 1rem;
      }
      
      .score-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 12px;
        border: 1px solid var(--border-glass);
      }
      

      @media (max-width: 768px) {
        .hero-content {
          grid-template-columns: 1fr;
          gap: 2rem;
          text-align: center;
        }
        
        .token-name {
          font-size: 2rem;
        }
        
        .metrics-dashboard {
          grid-template-columns: 1fr;
          gap: 1rem;
        }
        
        .analytics-grid,
        .trading-grid,
        .security-grid {
          grid-template-columns: 1fr;
          gap: 1rem;
        }
        
        .dashboard-card,
        .analytics-card,
        .trading-card,
        .security-card {
          padding: 1.5rem;
        }
        
        .chart-container {
          height: 400px;
        }
        
        .hero-stats {
          flex-direction: row;
          justify-content: space-between;
        }
        
        .stat-bubble {
          flex: 1;
          padding: 1rem;
        }
      }
      

      @keyframes livePulse {
        0%, 100% { 
          opacity: 1;
          transform: scale(1);
        }
        50% { 
          opacity: 0.6;
          transform: scale(1.1);
        }
      }
      
      @keyframes slideInFromRight {
        0% {
          transform: translateX(100%);
          opacity: 0;
        }
        100% {
          transform: translateX(0);
          opacity: 1;
        }
      }
      

      #liveChart {
        cursor: default !important;
        pointer-events: auto !important;
        touch-action: pan-y !important;
      }
      
      #liveChart:active {
        cursor: default !important;
        pointer-events: auto !important;
      }
      

      .trades-container::-webkit-scrollbar {
        display: none !important;
      }
      
      .trades-container::-webkit-scrollbar-track {
        display: none !important;
      }
      
      .trades-container::-webkit-scrollbar-thumb {
        display: none !important;
      }
      
      .trades-container::-webkit-scrollbar-thumb:hover {
        display: none !important;
      }
      

      .live-trade {
        transition: all 0.3s ease;
      }
      
      .live-trade:hover {
        transform: translateX(5px);
        background: rgba(255, 255, 255, 0.05) !important;
      }
      

      .market-cap-display {
        transition: all 0.3s ease;
      }
      
      .market-cap-overlay {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
      
      .market-cap-overlay:hover {
        transform: scale(1.05);
        box-shadow: var(--shadow-lg);
      }
      

      .timeframe-controls {
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
      }
      
      .timeframe-btn {
        font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        min-width: 32px;
      }
      
      .timeframe-btn:hover {
        transform: translateY(-1px);
      }
      
      .timeframe-btn:active {
        transform: translateY(0) scale(0.95);
      }
      

      .trading-integration {
        gap: 1.5rem;
      }
      
      @media (max-width: 768px) {
        .trading-integration {
          grid-template-columns: 1fr;
          height: auto;
        }
        
        .chart-controls-left {
          flex-direction: column;
          gap: 1rem !important;
          align-items: flex-start !important;
        }
        
        .timeframe-controls {
          order: -1;
        }
      }
      

      #volumeChart {
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.02) 0%, rgba(16, 185, 129, 0.01) 50%, rgba(239, 68, 68, 0.02) 100%);
        border-radius: 8px;
      }
      

      .trade-item {
        border-radius: 8px !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
      }
      
      .trade-item:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }
      

      .trades-container::-webkit-scrollbar {
        display: none !important;
      }
      
      .trades-container::-webkit-scrollbar-track {
        display: none !important;
      }
      
      .trades-container::-webkit-scrollbar-thumb {
        display: none !important;
      }
      
      .trades-container::-webkit-scrollbar-thumb:hover {
        display: none !important;
      }
      

      @keyframes priceFlash {
        0% { 
          opacity: 0.5; 
          transform: scale(1);
        }
        50% { 
          opacity: 1; 
          transform: scale(1.05);
        }
        100% { 
          opacity: 1; 
          transform: scale(1);
        }
      }
      
      @keyframes slideInFromBottom {
        0% {
          transform: translateY(100%);
          opacity: 0;
        }
        100% {
          transform: translateY(0);
          opacity: 1;
        }
      }
      
      @keyframes fadeInUp {
        0% {
          transform: translateY(20px);
          opacity: 0;
        }
        100% {
          transform: translateY(0);
          opacity: 1;
        }
      }
      

      .price-change-flash {
        animation: priceFlash 0.6s ease-out;
      }
      

      @media (max-width: 768px) {
        .modal-container.active .modal {
          animation: slideInFromBottom 0.3s ease-out;
        }
      }
      
@media (max-width: 768px) {
  #resultsSection.has-content,
  #resultsSection.visible {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}