:root{
  --bg:#000000;
  --fg:#f2f2f2;
  --muted:#9a9a9a;
}
*{box-sizing:border-box}

/* Custom Scrollbar */
*::-webkit-scrollbar{
  width:6px;
  height:6px;
}
*::-webkit-scrollbar-track{
  background:rgba(0,0,0,0.3);
}
*::-webkit-scrollbar-thumb{
  background:rgba(242,242,242,0.15);
  border-radius:3px;
}
*::-webkit-scrollbar-thumb:hover{
  background:rgba(242,242,242,0.25);
}
*{
  scrollbar-width:thin;
  scrollbar-color:rgba(242,242,242,0.15) rgba(0,0,0,0.3);
}
html{
  height:100%;
  height:100dvh;
  height:-webkit-fill-available;
  overflow:visible; /* Allow background to extend beyond viewport */
  /* Force black background on html element */
  background: var(--bg);
  margin:0;
  padding:0;
  /* Extend background to safe areas */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  /* Fallback */
  padding:0;
}
body{
  margin:0;
  padding:0;
  /* Background is now handled by .full-screen-bg element */
  background:transparent;
  color:var(--fg);
  font-family: Helvetica, Arial, sans-serif;
  width:100%;
  max-width:100vw;
  height:100vh;
  /* Fix for mobile viewport height - multiple fallbacks */
  height:100dvh;
  height:100svh;
  height:-webkit-fill-available;
  min-height:-webkit-fill-available;
  overflow:visible; /* Allow content to flow */
  position:relative; /* Establish positioning context */
}

/* Full screen background to cover safe areas */
.full-screen-bg{
  position:fixed;
  /* Extend beyond viewport to cover safe areas */
  top: calc(-1 * env(safe-area-inset-top, 0px));
  left: calc(-1 * env(safe-area-inset-left, 0px));
  right: calc(-1 * env(safe-area-inset-right, 0px));
  bottom: calc(-1 * env(safe-area-inset-bottom, 0px));
  width: calc(100vw + env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px));
  height: calc(100vh + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px));
  /* Fallback for browsers that don't support env() */
  width: 100vw;
  height: 100vh;
  margin:0;
  padding:0;
  background:linear-gradient(135deg, var(--bg) 0%, rgba(5,5,5,0.98) 50%, var(--bg) 100%);
  background-attachment:fixed;
  background-size:cover;
  z-index:-9999; /* Way behind everything */
  pointer-events:none;
}

/* Texture overlay */
.full-screen-bg::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E");
  opacity:0.08;
  filter:blur(0.5px);
}

/* Radial gradient overlay */
.full-screen-bg::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:radial-gradient(circle at center, transparent 40%, rgba(0,0,0,0.3) 100%);
}

/* Additional safe area coverage - cover browser UI areas */
.safe-area-bg{
  position:fixed;
  /* Cover status bar area (top) */
  top: 0;
  left: 0;
  width: 100vw;
  height: env(safe-area-inset-top, 44px); /* iOS status bar height */
  margin:0;
  padding:0;
  background: var(--bg);
  z-index: 9999; /* Above browser UI */
  pointer-events:none;
}

/* Cover navigation bar area (bottom) */
.safe-area-bg::before{
  content:"";
  position:fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: env(safe-area-inset-bottom, 34px); /* iOS home indicator height */
  margin:0;
  padding:0;
  background: var(--bg);
  z-index: 9999;
  pointer-events:none;
}

/* Hide safe area elements when dynamic background extends to safe areas */
body.mobile-dynamic-bg .safe-area-bg {
  display: none !important;
}

body.mobile-dynamic-bg .full-screen-bg {
  display: none !important;
}

body::after{
  content:"";
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  height:100dvh;
  pointer-events:none;
  background:radial-gradient(circle at center, transparent 40%, rgba(0,0,0,0.3) 100%);
  z-index:-1;
}

/* Mobile background adjustments - simplified */
@media (max-width:640px){
  /* Prevent horizontal scroll - fix right space issue */
  html, body{
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Mobile adjustments for background */
  .full-screen-bg{
    background:linear-gradient(135deg, var(--bg) 0%, rgba(5,5,5,0.95) 50%, var(--bg) 100%);
    background-attachment:fixed;
    background-size:cover;
  }

  /* Adjust texture and overlay for mobile */
  .full-screen-bg::before{
    opacity: 0.05; /* More subtle texture on mobile */
  }

  .full-screen-bg::after{
    background:radial-gradient(circle at center, transparent 60%, rgba(0,0,0,0.2) 100%);
    opacity: 0.5; /* More subtle overlay on mobile */
  }

  /* Mobile adjustments already handled in .full-screen-bg */
}

/* Dynamic mobile background - applied directly to body */
body.mobile-dynamic-bg{
  background-color: #000 !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important; /* Use scroll for mobile compatibility */
  /* Extend background to cover safe areas */
  margin: 0 !important;
  padding: 0 !important;
  /* Extend background to safe areas */
  padding-top: env(safe-area-inset-top) !important;
  padding-bottom: env(safe-area-inset-bottom) !important;
  padding-left: env(safe-area-inset-left) !important;
  padding-right: env(safe-area-inset-right) !important;
}

body.mobile-dynamic-bg::before,
body.mobile-dynamic-bg::after{
  display:none !important;
}

body.mobile-dynamic-bg .monolith{
  display:none !important;
}

body.mobile-dynamic-bg .wrap{
  background: transparent !important;
}

body.mobile-dynamic-bg .title{
  z-index: 10;
}
body.mobile-dynamic-bg .query-interface{
  z-index: 10;
}

@media (max-width:640px){
  .wrap{
    position:relative;
    z-index:1;
  }
  .title{
    z-index:2;
  }
  .query-interface{
    z-index:2;
  }
}

.wrap{position:relative;width:100%;height:100vh;height:100dvh;overflow:visible;z-index:1;/* Allow background to show through */}

.monolith{
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:default;
  z-index:-2;
  mix-blend-mode: luminosity;
  opacity:0.6;
  filter:contrast(1.1) brightness(0.95) saturate(1.2);
  /* Prevent movement on mobile zoom */
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform-origin:center center;
}
.monolith img{
  min-height:100%;
  min-width:100%;
  width:auto;
  height:auto;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
  image-rendering:-webkit-optimize-contrast;
  -ms-interpolation-mode:bicubic;
  object-fit:cover;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  filter:blur(0.3px) contrast(1.05);
}
/* Rare visual anomaly */
.anomaly .monolith{
  opacity:0.75;
  filter:contrast(1.15) brightness(0.88) saturate(1.3) hue-rotate(5deg);
}
.anomaly .title{
  opacity:0.88;
  letter-spacing:0.15em;
  filter:drop-shadow(0 0 20px rgba(255,255,255,0.1));
}

.title{
  position:absolute;
  left:50%;
  top:42%;
  transform:translate(-50%,-50%);
  font-size:clamp(65px, 13vw, 170px);
  font-weight:900;
  letter-spacing:0.12em;
  z-index:10;
  text-align:center;
  /* Make letters wider/bolder */
  -webkit-text-stroke:1.5px currentColor;
  /* Strong shadow for visibility on any background */
  text-shadow:
    0 0 10px rgba(0,0,0,0.8),
    0 0 20px rgba(0,0,0,0.6),
    0 0 40px rgba(0,0,0,0.4),
    0 2px 4px rgba(0,0,0,0.9);
}

/* Query Interface */
.query-interface{
  position:absolute;
  left:50%;
  top:55%;
  transform:translateX(-50%);
  width:min(600px, calc(100% - 150px));
  z-index:10;
  /* Glass effect container */
  background:rgba(0,0,0,0.5);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-radius:16px;
  padding:16px;
  border:1px solid rgba(255,255,255,0.1);
  box-shadow:0 8px 32px rgba(0,0,0,0.4);
}
.query-form{
  display:flex;
  gap:12px;
  margin-bottom:0;
  flex-direction:row;
  align-items:center;
}
.query-input{
  flex:1;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.2);
  border-radius:10px;
  color:rgba(255,255,255,0.95);
  padding:12px 16px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:14px;
  outline:none;
  transition:all 0.2s ease;
}
.query-input:focus{
  border-color:rgba(255,255,255,0.4);
  background:rgba(255,255,255,0.12);
  box-shadow:0 0 0 3px rgba(255,255,255,0.1);
}
.query-input::placeholder{
  color:rgba(255,255,255,0.5);
}

/* Search history dropdown */
.search-history-dropdown{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  background:rgba(15,15,15,0.95);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:8px;
  margin-top:4px;
  z-index:1500;
  max-height:240px;
  overflow-y:auto;
  backdrop-filter:blur(12px);
  display:none;
}
.search-history-item{
  padding:10px 16px;
  color:rgba(255,255,255,0.7);
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:13px;
  cursor:pointer;
  transition:background 0.15s;
}
.search-history-item:hover{
  background:rgba(255,255,255,0.08);
  color:rgba(255,255,255,0.95);
}
.query-submit{
  background:rgba(255,255,255,0.15);
  border:1px solid rgba(255,255,255,0.25);
  border-radius:10px;
  color:rgba(255,255,255,0.9);
  padding:12px 20px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.1em;
  cursor:pointer;
  transition:all 0.2s ease;
  white-space:nowrap;
  font-weight:600;
}
.query-submit:hover{
  background:rgba(255,255,255,0.25);
  border-color:rgba(255,255,255,0.4);
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,0,0,0.3);
}
.query-response{
  margin-top:20px;
  margin-bottom:40px;
  padding:16px 20px;
  border:1px solid rgba(242,242,242,0.12);
  background:rgba(255,255,255,0.02);
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:13px;
  line-height:1.6;
  color:rgba(242,242,242,0.88);
  opacity:0;
  transform:translateY(10px);
  transition:opacity 0.6s ease, transform 0.6s ease;
  max-height:50vh;
  overflow-y:auto;
  overflow-x:hidden;
  display:block;
}
/* Custom scrollbar styling */
.query-response::-webkit-scrollbar{
  width:6px;
}
.query-response::-webkit-scrollbar-track{
  background:rgba(242,242,242,0.06);
  border-radius:3px;
}
.query-response::-webkit-scrollbar-thumb{
  background:rgba(242,242,242,0.2);
  border-radius:3px;
}
.query-response::-webkit-scrollbar-thumb:hover{
  background:rgba(242,242,242,0.3);
}
/* Firefox scrollbar */
.query-response{
  scrollbar-width:thin;
  scrollbar-color:rgba(242,242,242,0.2) rgba(242,242,242,0.05);
}
.query-response.show{
  opacity:1;
  transform:translateY(0);
}
.response-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(242,242,242,0.08);
}
.response-label{
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:rgba(154,154,154,0.8);
}
.response-timestamp{
  font-size:11px;
  color:rgba(154,154,154,0.6);
}
.chart-btn{
  display:inline-flex;
  align-items:center;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.08em;
  color:rgba(100,180,255,0.9);
  padding:6px 12px;
  border:1px solid rgba(100,180,255,0.3);
  border-radius:10px;
  background:rgba(100,180,255,0.1);
  margin-left:8px;
  text-decoration:none;
  transition:all 0.2s ease;
}
.chart-btn:hover{
  background:rgba(100,180,255,0.2);
  border-color:rgba(100,180,255,0.5);
  color:rgba(140,200,255,1);
  cursor:pointer;
}

/* Social Media Buttons */
.social-btn{
  display:inline-flex;
  align-items:center;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.08em;
  padding:6px 12px;
  border-radius:10px;
  margin-left:8px;
  text-decoration:none;
  transition:all 0.2s ease;
  cursor:pointer;
}
.social-website{
  color:rgba(76,217,100,0.9);
  border:1px solid rgba(76,217,100,0.3);
  background:rgba(76,217,100,0.1);
  margin-left:8px;
}
.social-website:hover{
  background:rgba(76,217,100,0.2);
  border-color:rgba(76,217,100,0.5);
}
.social-twitter{
  color:rgba(200,200,200,0.9);
  border:1px solid rgba(200,200,200,0.3);
  background:rgba(200,200,200,0.1);
  margin-left:8px;
}
.social-twitter:hover{
  background:rgba(200,200,200,0.2);
  border-color:rgba(200,200,200,0.5);
}
.social-telegram{
  color:rgba(0,136,204,0.9);
  border:1px solid rgba(0,136,204,0.3);
  background:rgba(0,136,204,0.1);
  margin-left:8px;
}
.social-telegram:hover{
  background:rgba(0,136,204,0.2);
  border-color:rgba(0,136,204,0.5);
}
.social-discord{
  color:rgba(114,137,218,0.9);
  border:1px solid rgba(114,137,218,0.3);
  background:rgba(114,137,218,0.1);
  margin-left:8px;
}
.social-discord:hover{
  background:rgba(114,137,218,0.2);
  border-color:rgba(114,137,218,0.5);
}
.social-tiktok{
  color:rgba(255,0,80,0.9);
  border:1px solid rgba(255,0,80,0.3);
  background:rgba(255,0,80,0.1);
  margin-left:8px;
}
.social-tiktok:hover{
  background:rgba(255,0,80,0.2);
  border-color:rgba(255,0,80,0.5);
}

/* Chart Modal */
.chart-modal{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(0,0,0,0.9);
  z-index:2000;
  display:flex;
  align-items:center;
  justify-content:center;
  backdrop-filter:blur(5px);
}
.chart-modal-content{
  width:90vw;
  max-width:1200px;
  height:80vh;
  background:#0a0a0a;
  border:1px solid rgba(242,242,242,0.08);
  border-radius:14px;
  border-radius:8px;
  display:flex;
  flex-direction:column;
  box-shadow:0 0 80px rgba(0,0,0,0.9);
  overflow:hidden;
}
.chart-modal-header{
  display:flex;
  align-items:center;
  padding:12px 16px;
  border-bottom:1px solid rgba(242,242,242,0.06);
  background:#0a0a0a;
  gap:12px;
}
.chart-modal-title{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:rgba(154,154,154,0.8);
}
.chart-external-link{
  margin-left:auto;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:11px;
  color:rgba(100,180,255,0.8);
  text-decoration:none;
  padding:4px 10px;
  border:1px solid rgba(100,180,255,0.3);
  border-radius:3px;
  transition:all 0.2s ease;
}
.chart-external-link:hover{
  background:rgba(100,180,255,0.1);
  color:rgba(140,200,255,1);
}
.chart-modal-close{
  background:rgba(242,242,242,0.03);
  border:none;
  color:rgba(242,242,242,0.6);
  font-size:28px;
  cursor:pointer;
  border-radius:10px;  padding:0 8px;
  line-height:1;
  transition:all 0.2s ease;
}
.chart-modal-close:hover{
  color:rgba(242,242,242,1);
  transform:scale(1.1);
}
.chart-container{
  flex:1;
  overflow:hidden;
  background:#0a0a0a;
}
.chart-container iframe{
  width:100%;
  height:100%;
  border:none;
  outline:none;
  display:block;
  background:#0a0a0a;
  border-radius:0 0 7px 7px;
}
.response-content{
  color:rgba(242,242,242,0.9);
  white-space:pre-wrap;
  word-wrap:break-word;
}
.response-content a.analysis-link{
  color:rgba(100,180,255,0.9);
  text-decoration:none;
  border-bottom:1px solid rgba(100,180,255,0.3);
  transition:all 0.2s ease;
}
.response-content a.analysis-link:hover{
  color:rgba(140,200,255,1);
  border-bottom-color:rgba(140,200,255,0.6);
}
.token-image-container{
  display:flex;
  justify-content:center;
  margin-bottom:16px;
}
.token-image-container img{
  width:64px;
  height:64px;
  border-radius:50%;
  border:2px solid rgba(242,242,242,0.15);
  background:rgba(0,0,0,0.5);
  object-fit:cover;
}
.response-share{
  margin-top:12px;
  background:rgba(242,242,242,0.03);
  border:1px solid rgba(242,242,242,0.2);
  color:rgba(242,242,242,0.7);
  padding:6px 14px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.1em;
  cursor:pointer;
  border-radius:10px;  transition:all 0.2s ease;
}
.response-share:hover{
  background:rgba(242,242,242,0.1);
  border-color:rgba(242,242,242,0.25);
  color:rgba(242,242,242,0.9);
}

.status{
  position:absolute;
  bottom:80px;
  left:28px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:13px;
  color:var(--muted);
  line-height:1.5;
  z-index:1;
  display:none;
}

.signal{
  position:absolute;
  bottom:28px;
  right:56px;
  width:min(280px, calc(100% - 280px));
  padding:14px 16px;
  border:1px solid rgba(242,242,242,0.08);
  border-radius:14px;
  background:rgba(255,255,255,0.02);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:13px;
  line-height:1.45;
  color:rgba(242,242,242,0.88);
  opacity:0;
  transform:translateY(6px);
  transition:opacity 900ms ease, transform 900ms ease;
  z-index:1;
}
.signal.show{opacity:0.86;transform:translateY(0)}
.signal-close-btn{
  position:absolute;
  top:8px;
  right:8px;
  background:rgba(242,242,242,0.03);
  border:none;
  color:rgba(242,242,242,0.5);
  font-size:20px;
  line-height:1;
  width:24px;
  height:24px;
  cursor:pointer;
  border-radius:10px;  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 0.2s ease;
  z-index:2;
}
.signal-close-btn:hover{
  color:rgba(242,242,242,0.9);
  transform:scale(1.1);
}
.signal .label{
  display:block;
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:rgba(154,154,154,0.8);
  margin-bottom:10px;
}
.signal .meta{
  margin-top:10px;
  font-size:11px;
  color:rgba(154,154,154,0.75);
  display:flex;
  justify-content:space-between;
  gap:10px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.xlink{
  position:fixed;
  bottom:16px;
  right:24px;
  display:flex;
  flex-direction:row;
  gap:16px;
  align-items:center;
  justify-content:flex-start;
  opacity:1;
  transition:opacity 220ms ease;
  z-index:1000;
}
.xlink:hover{opacity:0.8}

/* X Social Link next to ART SIGNAL */
.x-social-link{
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  opacity:0.6;
  transition:opacity 220ms ease;
  border-radius:6px;
  background:rgba(255,255,255,0.05);
  flex-shrink:0;
}

.x-social-link:hover{
  opacity:1;
  background:rgba(255,255,255,0.1);
}

.x-social-icon{
  width:20px;
  height:20px;
  flex-shrink:0;
}

.xlink img{
  width:28px;
  height:28px;
  flex-shrink:0;
}

.chrome-logo{
  width:240px !important;
  height:240px !important;
  object-fit: contain !important;
  filter: grayscale(100%) !important;
}

.art-trigger-btn{
  background:rgba(242,242,242,0.03);
  border:1px solid rgba(242,242,242,0.12);
  color:rgba(242,242,242,0.78);
  padding:7px 10px;
  border-radius:10px;
  cursor:pointer;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:11px;
  font-weight:600;
  transition:all 0.18s ease;
}
.art-trigger-btn:hover{
  border-color:rgba(242,242,242,0.25);
  color:rgba(242,242,242,0.95);
  background:rgba(242,242,242,0.06);
}
.art-trigger-btn{
  z-index:100;
}

/* Server Status */
.server-status-container{
  position:absolute;
  top:28px;
  right:28px;
  z-index:100;
}

/* Corner controls (Search + UI + Art + Status) */
.corner-controls{
  position:absolute;
  top:28px;
  right:28px;
  z-index:1200;
  display:flex;
  align-items:center;
  gap:10px;
}
.corner-controls .v2-search-btn,
.corner-controls .v2-toggle-btn,
.corner-controls .status-trigger-btn,
.corner-controls .art-trigger-btn,
.corner-controls .x-social-link,
.corner-controls .server-status-btn{
  opacity:0.85;
}
.corner-controls .v2-search-btn:hover,
.corner-controls .v2-toggle-btn:hover,
.corner-controls .status-trigger-btn:hover,
.corner-controls .art-trigger-btn:hover,
.corner-controls .x-social-link:hover,
.corner-controls .server-status-btn:hover{
  opacity:1;
}

.server-status-btn{
  background:rgba(242,242,242,0.03);
  border:1px solid rgba(242,242,242,0.12);
  color:rgba(242,242,242,0.78);
  padding:6px 12px;
  font-size:11px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-transform:uppercase;
  letter-spacing:0.1em;
  cursor:pointer;
  border-radius:10px;  border-radius:10px;
  transition:all 180ms ease;
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  min-width:168px;
  justify-content:space-between;
}
.server-status-btn:hover{
  border-color:rgba(242,242,242,0.25);
  background:rgba(242,242,242,0.06);
  color:rgba(242,242,242,0.95);
}
.server-status-label{
  color:rgba(242,242,242,0.6);
  font-weight:400;
}
.server-status-indicator{
  color:rgba(154,154,154,0.8);
  font-weight:normal;
}
.server-status-indicator.online{
  color:rgba(76,175,80,0.8);
}
.server-status-indicator.offline{
  color:rgba(244,67,54,0.8);
}

/* Server Status Panel */
.server-status-panel{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:min(600px, calc(100% - 100px));
  max-height:70vh;
  background:rgba(5,5,5,0.95) url('../assets/monolith.webp') center/cover no-repeat;
  background:rgba(5,5,5,0.95) -webkit-image-set(url('../assets/monolith.webp') type('image/webp'), url('../assets/monolith.png') type('image/png')) center/cover no-repeat;
  backdrop-filter:blur(10px);
  border:1px solid rgba(242,242,242,0.15);
  border-radius:12px;  padding:24px;
  display:none;
  z-index:1003;
  box-shadow:0 0 40px rgba(242,242,242,0.15);
  overflow-y:auto;
}
.server-status-panel.show{
  display:block;
  animation:serverPanelAppear 0.6s ease-out;
}
@keyframes serverPanelAppear{
  0%{opacity:0;transform:translate(-50%,-50%) scale(0.95)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
.server-panel-close-btn{
  position:absolute;
  top:12px;
  right:12px;
  background:rgba(242,242,242,0.03);
  border:none;
  color:rgba(242,242,242,0.6);
  font-size:28px;
  line-height:1;
  width:32px;
  height:32px;
  cursor:pointer;
  border-radius:10px;  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 0.2s ease;
  z-index:1004;
}
.server-panel-close-btn:hover{
  color:rgba(242,242,242,0.9);
  transform:scale(1.1);
}
.server-panel-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
  padding-bottom:12px;
  padding-right:40px;
  border-bottom:1px solid rgba(242,242,242,0.1);
}
.server-panel-label{
  font-size:14px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:rgba(154,154,154,0.8);
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.server-panel-timestamp{
  font-size:11px;
  color:rgba(154,154,154,0.6);
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.server-metrics{
  display:flex;
  flex-direction:column;
  gap:20px;
  margin-bottom:20px;
}
.metric-item{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.metric-label{
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:rgba(154,154,154,0.8);
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.metric-bar-container{
  width:100%;
  height:8px;
  background:rgba(242,242,242,0.06);
  border:1px solid rgba(242,242,242,0.1);
  position:relative;
  overflow:hidden;
}
.metric-bar{
  height:100%;
  background:rgba(242,242,242,0.3);
  transition:width 0.6s ease, background-color 0.3s ease;
  width:0%;
}
.metric-bar.good{
  background:rgba(76,175,80,0.6);
}
.metric-bar.warning{
  background:rgba(255,152,0,0.6);
}
.metric-bar.error{
  background:rgba(244,67,54,0.6);
}
.metric-value{
  font-size:12px;
  color:rgba(242,242,242,0.8);
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.server-details{
  margin-top:20px;
  padding-top:20px;
  border-top:1px solid rgba(242,242,242,0.1);
  font-size:11px;
  color:rgba(154,154,154,0.7);
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  line-height:1.6;
}

@media (min-width:1920px){
  .monolith{right:-5%}
}
@media (max-width:640px){
  /* Body adjustments for mobile BASIC UI - no scroll by default */
  /* Using multiple viewport height units for maximum browser compatibility */
  html, body{
    height:100vh;
    height:100dvh;
    height:100svh;
    height:-webkit-fill-available;
    overflow:hidden;
  }

  body{
    height:100vh;
    height:100dvh;
    height:100svh;
    max-height:-webkit-fill-available;
    min-height:-webkit-fill-available;
    padding-top:0;
    padding-bottom:0;
  }

  /* Wrap adjustments for mobile BASIC UI */
  .wrap{
    height:100vh;
    height:100dvh;
    height:100svh;
    max-height:-webkit-fill-available;
    min-height:-webkit-fill-available;
    overflow:hidden;
  }

  /* Allow scroll for UI PRO on mobile */
  html.ui-v2,
  html.ui-v2 body,
  body.ui-v2{
    height:auto !important;
    min-height:100dvh;
    min-height:100svh;
    max-height:none !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }

  body.ui-v2 .wrap{
    height:auto !important;
    min-height:100vh;
    max-height:none !important;
    overflow:visible !important;
  }

  /* Hide monolith in UI PRO mobile */
  body.ui-v2 .monolith{
    display:none !important;
  }

  /* Force black background in UI PRO - no dynamic bg */
  body.ui-v2{
    background: #000 !important;
    background-image: none !important;
  }
  body.ui-v2.mobile-dynamic-bg{
    background: #000 !important;
    background-image: none !important;
  }

  /* Ensure v2 content is visible on mobile */
  body.ui-v2 .v2-hero,
  body.ui-v2 .v2-data{
    display:block !important;
    position:relative;
    z-index:10;
  }

  /* Monolith adjustments - prevent movement on zoom */
  .monolith{
    right:0;
    height:100%;
    min-height:100vh;
    max-height:none;
    overflow:hidden;
    /* Lock position on mobile zoom */
    position:fixed;
    top:0;
    left:0;
    width:100%;
    transform:none;
    will-change:auto;
  }
  .monolith img{
    height:100%;
    width:100%;
    max-width:none;
    object-fit:cover;
    transform:none;
  }
  /* UI v2 monolith on mobile */
  body.ui-v2 .monolith{
    right:0;
  }

  /* Title adjustments */
  .title{
    font-size:clamp(95px, 26vw, 240px);
    letter-spacing:0.18em;
    top:42%;
    text-align:center;
    -webkit-text-stroke:3.5px currentColor;
    font-weight:900;
  }
  
  /* Status adjustments */
  .status{
    bottom:auto;
    top:28px;
    left:24px;
    font-size:12px;
  }

  /* Signal box adjustments */
  .signal{
    right:24px;
    bottom:64px;
    width:min(280px, calc(100% - 80px));
    padding:12px 14px;
    font-size:12px;
  }
  .signal-close-btn{
    top:6px;
    right:6px;
    width:20px;
    height:20px;
    font-size:18px;
  }
  
  /* Query interface adjustments - closer to title */
  .query-interface{
    top:55%;
    transform:translate(-50%, 0);
    width:min(600px, calc(100% - 40px));
    padding:14px;
    background:rgba(0,0,0,0.6);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border-radius:14px;
    border:1px solid rgba(255,255,255,0.15);
  }
  .query-form{
    flex-direction:row;
    gap:10px;
    align-items:center;
  }
  .query-input{
    width:100%;
    font-size:16px;
    padding:12px 14px;
    background:rgba(255,255,255,0.1);
    border:1px solid rgba(255,255,255,0.2);
  }
  .query-submit{
    width:auto;
    padding:12px 16px;
    font-size:12px;
    background:rgba(255,255,255,0.15);
    border:1px solid rgba(255,255,255,0.25);
  }
  .query-response{
    margin-top:16px;
    margin-bottom:32px;
    padding:14px 16px;
    font-size:12px;
    max-height:40vh;
  }
  .response-header{
    /* Keep everything in a single line on mobile when possible */
    flex-direction:row;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;
  }
  
  /* Art trigger button adjustments */
  .art-trigger-btn{
    top:24px;
    right:24px;
    padding:6px 10px;
    font-size:9px;
  }
  
  /* Server status adjustments */
  .server-status-container{
    display:none;
  }
  .corner-controls{
    top:24px;
    right:24px;
    gap:8px;
  }

  .x-social-link{
    width:28px;
    height:28px;
  }

  .x-social-icon{
    width:16px;
    height:16px;
  }

  /* Status button in mobile V2 */
  body.ui-v2 .status-trigger-btn{
    padding:6px 8px;
    font-size:10px;
  }
  .server-status-btn{
    padding:6px 10px;
    font-size:9px;
    gap:4px;
    display:flex;
    min-width:140px;
    justify-content:space-between;
  }
  /* Hide chrome store badge on mobile */
  .chrome-store-badge{
    display:none !important;
  }
  .server-status-panel{
    width:calc(100% - 60px);
    padding:20px;
    max-height:80vh;
  }
  
  /* Hide Chrome Web Store icon on mobile - only show on desktop */
  .xlink{
    display: none !important;
  }

  .xlink img{
    width:24px;
    height:24px;
  }

  .chrome-logo{
    width:180px !important;
    height:180px !important;
    filter: grayscale(100%) !important;
  }
  
  /* Prevent horizontal scroll - fix right space issue */
  html, body{
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }
  .wrap{
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Fix elements that might cause horizontal overflow */
  .monolith,
  .monolith img{
    max-width: 100vw;
  }

  .corner-controls{
    max-width: calc(100vw - 20px);
  }
}

/* ========== INTERACTIVE FEATURES STYLES ========== */

/* 1. Cursor Trail */
.cursor-particle{
  position:absolute;
  width:4px;
  height:4px;
  background:rgba(242,242,242,0.3);
  border-radius:50%;
  pointer-events:none;
  z-index:9999;
  animation:cursorFade 1s ease-out forwards;
}
@keyframes cursorFade{
  0%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(0)}
}

/* 2. Background Particles */
.bg-particle{
  position:absolute;
  width:2px;
  height:2px;
  background:rgba(242,242,242,0.15);
  border-radius:50%;
  pointer-events:none;
  z-index:1;
  animation:particleFloat 3s ease-out forwards;
}
@keyframes particleFloat{
  0%{opacity:0;transform:translateY(0)}
  50%{opacity:1}
  100%{opacity:0;transform:translateY(-100px)}
}

/* 3. Scan Line Effect */
.scan-line{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:2px;
  background:linear-gradient(to bottom, transparent, rgba(242,242,242,0.3), transparent);
  pointer-events:none;
  z-index:9998;
  animation:scanDown 2s ease-out forwards;
}
@keyframes scanDown{
  0%{top:0;opacity:1}
  100%{top:100%;opacity:0}
}

/* 4. Title Glitch Effect */
.title.glitch{
  animation:glitch 0.2s;
}
@keyframes glitch{
  0%,100%{transform:translate(-50%,-50%)}
  20%{transform:translate(calc(-50% + 2px),calc(-50% - 2px))}
  40%{transform:translate(calc(-50% - 2px),calc(-50% + 2px))}
  60%{transform:translate(calc(-50% + 2px),calc(-50% + 2px))}
  80%{transform:translate(calc(-50% - 2px),calc(-50% - 2px))}
}

/* 5. Title Glow Animation */
.title{
  animation:titleGlow 4s ease-in-out infinite;
}
@keyframes titleGlow{
  0%,100%{text-shadow:0 0 10px rgba(242,242,242,0.1)}
  50%{text-shadow:0 0 20px rgba(242,242,242,0.2)}
}

/* 6. Monolith Breathing - Applied only if feature is enabled via class */
.monolith.breathing img{
  animation:breathing 6s ease-in-out infinite;
}
@keyframes breathing{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.01)}
}

/* 7. Konami Code Activation */
.konami-activated{
  animation:konamiPulse 0.5s;
}
@keyframes konamiPulse{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.2) hue-rotate(90deg)}
}

/* 8. Combo Click Activation */
.combo-activated{
  animation:comboFlash 0.3s;
}
@keyframes comboFlash{
  0%,100%{filter:contrast(1)}
  50%{filter:contrast(1.3)}
}

/* 9. Time-based Modes */
.night-mode .monolith{opacity:0.7}
.evening-mode .monolith{opacity:0.85}

/* 10. Signal Strength Indicators */
.signal[data-signal-strength="strong"]{
  border-color:rgba(242,242,242,0.2);
  box-shadow:0 0 10px rgba(242,242,242,0.1);
}
.signal[data-signal-strength="moderate"]{
  border-color:rgba(242,242,242,0.12);
}
.signal[data-signal-strength="weak"]{
  border-color:rgba(242,242,242,0.06);
  opacity:0.7;
}

/* 11. Tweet Expand */
.signal.expanded{
  width:min(600px, calc(100% - 120px));
  max-height:80vh;
  overflow-y:auto;
}
.signal.expanded #signalText{
  white-space:pre-wrap;
  word-wrap:break-word;
}

/* 12. Debug Mode */
.debug-mode *{
  outline:1px solid rgba(255,0,0,0.1);
}
.debug-mode::after{
  content:"DEBUG MODE";
  position:absolute;
  top:10px;
  right:10px;
  font-size:10px;
  color:rgba(255,0,0,0.5);
  z-index:10000;
  font-family:ui-monospace;
}

/* 13. Ambient Night Mode */
.ambient-night{
  /* Modo nocturno desactivado */
  /* filter:brightness(0.95) contrast(1.05); */
}

/* 14. Smooth Transitions */
.monolith, .title, .status, .signal{
  transition:opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease;
}

/* 15. Status Typing Effect */
.status{
  transition:opacity 0.3s ease;
}

/* 16. Pattern Visualization */
body[data-pattern-count]::before{
  opacity:calc(0.07 + var(--pattern-count, 0) * 0.001);
}

/* 17. Parallax Scroll Support */
@media (prefers-reduced-motion: no-preference){
  .monolith{
    will-change:transform;
  }
}

/* ========== VIRAL FEATURES STYLES ========== */

/* Future Messages */
.future-message{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:min(500px, calc(100% - 120px));
  padding:20px 24px;
  border:1px solid rgba(242,242,242,0.15);
  border-radius:12px;  background:rgba(5,5,5,0.95);
  backdrop-filter:blur(10px);
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:14px;
  line-height:1.6;
  color:rgba(242,242,242,0.9);
  opacity:0;
  pointer-events:none;
  z-index:1000;
  box-shadow:0 0 30px rgba(242,242,242,0.1);
}
.future-message.show{
  opacity:1;
  pointer-events:all;
  animation:futureMessageAppear 0.8s ease-out;
}
@keyframes futureMessageAppear{
  0%{opacity:0;transform:translate(-50%,-50%) scale(0.9)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
.future-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:16px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(242,242,242,0.1);
}
.future-label{
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:rgba(154,154,154,0.8);
}
.future-timestamp{
  font-size:11px;
  color:rgba(242,242,242,0.6);
  font-family:ui-monospace;
}
.future-content{
  margin-bottom:16px;
  color:rgba(242,242,242,0.95);
}
.future-share{
  background:rgba(242,242,242,0.03);
  border:1px solid rgba(242,242,242,0.2);
  color:rgba(242,242,242,0.8);
  padding:8px 16px;
  font-family:ui-monospace;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.1em;
  cursor:pointer;
  border-radius:10px;  transition:all 0.2s ease;
}
.future-share:hover{
  background:rgba(242,242,242,0.1);
  border-color:rgba(242,242,242,0.25);
}

/* Live Transmission */
.live-transmission{
  position:absolute;
  bottom:120px;
  right:56px;
  width:min(400px, calc(100% - 120px));
  max-height:300px;
  padding:16px 20px;
  border:1px solid rgba(242,242,242,0.12);
  background:rgba(5,5,5,0.9);
  backdrop-filter:blur(10px);
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12px;
  opacity:0;
  pointer-events:none;
  z-index:999;
}
.live-transmission.active{
  pointer-events:all;
  animation:transmissionAppear 0.6s ease-out;
}
@keyframes transmissionAppear{
  0%{opacity:0;transform:translateY(10px)}
}
.transmission-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(242,242,242,0.08);
}
.transmission-status{
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:rgba(154,154,154,0.8);
  animation:statusPulse 2s ease-in-out infinite;
}
@keyframes statusPulse{
  0%,100%{opacity:0.8}
  50%{opacity:1}
}
.transmission-freq{
  font-size:11px;
  color:rgba(242,242,242,0.6);
  font-family:ui-monospace;
}
.transmission-log{
  max-height:200px;
  overflow-y:auto;
  font-size:11px;
  line-height:1.8;
}
.transmission-entry{
  margin-bottom:8px;
  color:rgba(242,242,242,0.7);
  animation:entryFadeIn 0.5s ease-out;
}
@keyframes entryFadeIn{
  0%{opacity:0;transform:translateX(-10px)}
  100%{opacity:1;transform:translateX(0)}
}
.trans-time{
  color:rgba(154,154,154,0.6);
  margin-right:8px;
}
.trans-msg{
  color:rgba(242,242,242,0.85);
}

/* Art Generator */
.art-generator{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background:rgba(5,5,5,0.95);
  backdrop-filter:blur(10px);
  border:1px solid rgba(242,242,242,0.15);
  border-radius:12px;  padding:24px;
  opacity:0;
  pointer-events:none;
  z-index:1001;
  box-shadow:0 0 40px rgba(242,242,242,0.15);
}
.art-close-btn{
  position:absolute;
  top:12px;
  right:12px;
  background:rgba(242,242,242,0.03);
  border:none;
  color:rgba(242,242,242,0.6);
  font-size:28px;
  line-height:1;
  width:32px;
  height:32px;
  cursor:pointer;
  border-radius:10px;  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 0.2s ease;
  z-index:1002;
}
.art-close-btn:hover{
  color:rgba(242,242,242,0.9);
  transform:scale(1.1);
}
.art-generator.show{
  opacity:1;
  pointer-events:all;
  animation:artGeneratorAppear 0.8s ease-out;
}
@keyframes artGeneratorAppear{
  0%{opacity:0;transform:translate(-50%,-50%) scale(0.95)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
#artCanvas{
  display:block;
  width:100%;
  max-width:800px;
  height:auto;
  border:1px solid rgba(242,242,242,0.1);
  margin-bottom:16px;
}
.art-controls{
  display:flex;
  gap:12px;
  margin-bottom:12px;
}
.art-controls button{
  background:rgba(242,242,242,0.03);
  border:1px solid rgba(242,242,242,0.2);
  color:rgba(242,242,242,0.8);
  padding:8px 16px;
  font-family:ui-monospace;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.1em;
  cursor:pointer;
  border-radius:10px;  transition:all 0.2s ease;
}
.art-controls button:hover{
  background:rgba(242,242,242,0.1);
  border-color:rgba(242,242,242,0.25);
}
.art-info{
  font-size:11px;
  color:rgba(154,154,154,0.7);
  font-family:ui-monospace;
  text-align:center;
}

/* Global Signals Map */
.signals-map{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:min(800px, calc(100% - 120px));
  max-height:500px;
  background:rgba(5,5,5,0.95);
  backdrop-filter:blur(10px);
  border:1px solid rgba(242,242,242,0.15);
  border-radius:12px;  padding:20px 24px;
  opacity:0;
  pointer-events:none;
  z-index:1002;
  box-shadow:0 0 40px rgba(242,242,242,0.15);
}
.signals-map.show{
  opacity:1;
  pointer-events:all;
  animation:mapAppear 0.8s ease-out;
}
@keyframes mapAppear{
  0%{opacity:0;transform:translate(-50%,-50%) scale(0.95)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
.map-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:16px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(242,242,242,0.1);
}
.map-label{
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:rgba(154,154,154,0.8);
  font-family:ui-monospace;
}
.map-count{
  font-size:14px;
  color:rgba(242,242,242,0.9);
  font-family:ui-monospace;
  font-weight:bold;
}
.map-container{
  margin-bottom:12px;
}
#mapCanvas{
  display:block;
  width:100%;
  height:400px;
  border:1px solid rgba(242,242,242,0.1);
}
.map-legend{
  display:flex;
  gap:20px;
  font-size:10px;
  color:rgba(154,154,154,0.7);
  font-family:ui-monospace;
  justify-content:center;
}

/* Tools Navigation */
.tools-nav{
  position:absolute;
  top:28px;
  left:40px;
  display:flex;
  gap:8px;
  z-index:10;
  flex-wrap:wrap;
  max-width:calc(100% - 80px);
}
.tool-tab{
  background:rgba(242,242,242,0.03);
  border:1px solid rgba(242,242,242,0.12);
  color:rgba(242,242,242,0.78);
  padding:8px 12px;
  font-size:11px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  cursor:pointer;
  border-radius:10px;  transition:all 0.18s ease;
  letter-spacing:0.08em;
  text-transform:uppercase;
  border-radius:10px;
}
.tool-tab:hover{
  border-color:rgba(242,242,242,0.25);
  color:rgba(242,242,242,0.95);
  background:rgba(242,242,242,0.06);
  opacity:1;
}
.tool-tab.active{
  background:rgba(139,92,246,0.10);
  border-color:rgba(139,92,246,0.28);
  color:#8b5cf6;
  opacity:1;
}

/* Tool Sections */
.tool-section{
  position:absolute;
  top:180px;
  left:40px;
  width:min(500px, calc(100% - 80px));
  max-height:calc(100vh - 280px);
  background:rgba(10,10,10,0.95);
  border:1px solid rgba(242,242,242,0.1);
  border-radius:4px;
  z-index:10;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.tool-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 16px;
  border-bottom:1px solid rgba(242,242,242,0.1);
  background:rgba(20,20,20,0.5);
}
.tool-title{
  font-size:12px;
  font-family:ui-monospace,monospace;
  letter-spacing:1px;
  color:#f2f2f2;
}
.tool-refresh{
  background:none;
  border:1px solid rgba(242,242,242,0.2);
  color:rgba(242,242,242,0.6);
  padding:4px 8px;
  font-size:14px;
  cursor:pointer;
  border-radius:10px;  transition:all 0.2s ease;
}
.tool-refresh:hover{
  border-color:rgba(242,242,242,0.5);
  color:#f2f2f2;
}

/* Sub Navigation */
.sub-nav{
  display:flex;
  padding:8px;
  gap:6px;
  border-bottom:1px solid rgba(242,242,242,0.1);
  background:rgba(0,0,0,0.2);
}
.sub-section-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 12px;
  border-bottom:1px solid rgba(242,242,242,0.08);
  background:rgba(0,0,0,0.15);
}
.sub-section-title{
  font-size:11px;
  font-weight:600;
  color:rgba(242,242,242,0.8);
  font-family:ui-monospace,monospace;
  letter-spacing:0.5px;
}
.sub-tab{
  flex:1;
  background:rgba(242,242,242,0.03);
  border:1px solid rgba(242,242,242,0.08);
  border-radius:14px;
  border-radius:3px;
  color:rgba(242,242,242,0.5);
  padding:8px 12px;
  font-size:9px;
  font-family:ui-monospace,monospace;
  cursor:pointer;
  border-radius:10px;  transition:all 0.2s ease;
  letter-spacing:0.8px;
  text-transform:uppercase;
}
.sub-tab:hover{
  color:rgba(242,242,242,0.8);
  background:rgba(242,242,242,0.06);
  border-color:rgba(242,242,242,0.15);
}
.sub-tab.active{
  color:#f2f2f2;
  background:rgba(139,92,246,0.08);
  border-color:rgba(139,92,246,0.2);
}
.sub-content{
  flex:1;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.sub-content > div{
  flex:1;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* Trending Tabs */
.trending-tabs{
  display:flex;
  border-bottom:1px solid rgba(242,242,242,0.1);
}
.trending-tab{
  flex:1;
  background:none;
  border:none;
  border-bottom:2px solid transparent;
  color:rgba(242,242,242,0.5);
  padding:10px 12px;
  font-size:10px;
  font-family:ui-monospace,monospace;
  cursor:pointer;
  border-radius:10px;  transition:all 0.2s ease;
  letter-spacing:0.5px;
}
.trending-tab:hover{
  color:rgba(242,242,242,0.8);
  background:rgba(242,242,242,0.03);
}
.trending-tab.active{
  color:#f2f2f2;
  border-bottom-color:rgba(242,242,242,0.5);
}

/* Trending Content */
.trending-content, .launches-content, .whales-content, .wallet-content{
  flex:1;
  overflow-y:auto;
  padding:8px;
}
.trending-loading, .launches-loading, .whales-loading{
  padding:20px;
  text-align:center;
  color:rgba(242,242,242,0.5);
  font-size:12px;
  font-family:ui-monospace,monospace;
}

/* Token Card */
.token-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  background:rgba(20,20,20,0.5);
  border:1px solid rgba(242,242,242,0.08);
  border-radius:14px;
  border-radius:4px;
  margin-bottom:8px;
  cursor:pointer;
  border-radius:10px;  transition:all 0.2s ease;
}
.token-card:hover{
  background:rgba(40,40,40,0.6);
  border-color:rgba(242,242,242,0.2);
}
.token-rank{
  font-size:11px;
  color:rgba(242,242,242,0.4);
  font-family:ui-monospace,monospace;
  min-width:24px;
}
.token-icon{
  width:32px;
  height:32px;
  border-radius:50%;
  object-fit:cover;
  margin-right:8px;
  flex-shrink:0;
}
.token-info{
  flex:1;
  min-width:0;
}
.token-name{
  font-size:12px;
  color:#f2f2f2;
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.token-symbol{
  font-size:10px;
  color:rgba(242,242,242,0.5);
  font-family:ui-monospace,monospace;
}
.token-metrics{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
}
.token-price{
  font-size:11px;
  color:#f2f2f2;
  font-family:ui-monospace,monospace;
}
.token-change{
  font-size:10px;
  font-family:ui-monospace,monospace;
}
.token-change.positive{
  color:#4ade80;
}
.token-change.negative{
  color:#f87171;
}
.token-volume{
  font-size:9px;
  color:rgba(242,242,242,0.4);
  font-family:ui-monospace,monospace;
}

/* DEX Badges */
.dex-badge{
  font-size:8px;
  padding:2px 4px;
  border-radius:2px;
  margin-left:6px;
  font-family:ui-monospace,monospace;
  vertical-align:middle;
}
.dex-badge.pumpfun{
  background:rgba(139,92,246,0.2);
  color:#8b5cf6;
}
.dex-badge.raydium{
  background:rgba(147,51,234,0.2);
  color:#a855f7;
}

/* Graduation Badge */
.grad-badge{
  font-size:9px;
  padding:2px 6px;
  background:rgba(250,204,21,0.2);
  color:#facc15;
  border-radius:2px;
  margin-left:6px;
  font-family:ui-monospace,monospace;
}
.graduation-card{
  border-left:3px solid rgba(250,204,21,0.5);
}
.grads-subtitle{
  font-size:10px;
  color:rgba(242,242,242,0.4);
  font-family:ui-monospace,monospace;
  padding:8px 16px;
  border-bottom:1px solid rgba(242,242,242,0.1);
}
.grads-content{
  flex:1;
  overflow-y:auto;
  padding:8px;
}

/* Wallet Input */
.wallet-input-container{
  display:flex;
  gap:8px;
  padding:12px 16px;
  border-bottom:1px solid rgba(242,242,242,0.1);
}
.wallet-input{
  flex:1;
  background:rgba(0,0,0,0.5);
  border:1px solid rgba(242,242,242,0.15);
  border-radius:12px;  color:#f2f2f2;
  padding:10px 12px;
  font-size:12px;
  font-family:ui-monospace,monospace;
  outline:none;
  transition:border-color 0.2s ease;
}
.wallet-input:focus{
  border-color:rgba(242,242,242,0.4);
}
.wallet-input::placeholder{
  color:rgba(242,242,242,0.3);
}
.wallet-search-btn{
  background:rgba(242,242,242,0.1);
  border:1px solid rgba(242,242,242,0.2);
  color:#f2f2f2;
  padding:10px 20px;
  font-size:11px;
  font-family:ui-monospace,monospace;
  cursor:pointer;
  border-radius:10px;  transition:all 0.2s ease;
  letter-spacing:1px;
}
.wallet-search-btn:hover{
  background:rgba(242,242,242,0.2);
  border-color:rgba(242,242,242,0.4);
}

/* Whale Card */
.whale-card{
  padding:12px;
  background:rgba(20,20,20,0.5);
  border:1px solid rgba(242,242,242,0.08);
  border-radius:14px;
  border-radius:4px;
  margin-bottom:8px;
}
.whale-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
}
.whale-action{
  font-size:11px;
  font-family:ui-monospace,monospace;
  padding:4px 8px;
  border-radius:2px;
}
.whale-action.buy{
  background:rgba(168,85,247,0.2);
  color:#a855f7;
}
.whale-action.sell{
  background:rgba(248,113,113,0.2);
  color:#f87171;
}
.whale-time{
  font-size:10px;
  color:rgba(242,242,242,0.4);
  font-family:ui-monospace,monospace;
}
.whale-details{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.whale-token{
  font-size:12px;
  color:#f2f2f2;
}
.whale-amount{
  font-size:11px;
  color:rgba(242,242,242,0.7);
  font-family:ui-monospace,monospace;
}
.whale-wallet{
  font-size:9px;
  color:rgba(242,242,242,0.3);
  font-family:ui-monospace,monospace;
  margin-top:6px;
}

/* Winner Wallets */
.winners-content{
  flex:1;
  overflow-y:auto;
  padding:8px;
}
.winners-subtitle{
  padding:8px 12px;
  color:rgba(242,242,242,0.5);
  font-size:10px;
  font-family:ui-monospace,monospace;
  border-bottom:1px solid rgba(242,242,242,0.05);
}
.winners-loading{
  padding:20px;
  text-align:center;
  color:rgba(242,242,242,0.5);
  font-size:12px;
  font-family:ui-monospace,monospace;
}
.winner-card{
  padding:16px;
  background:rgba(20,20,20,0.5);
  border:1px solid rgba(242,242,242,0.08);
  border-radius:14px;
  border-radius:4px;
  margin-bottom:12px;
  transition:all 0.2s ease;
}
.winner-card:hover{
  background:rgba(30,30,30,0.6);
  border-color:rgba(242,242,242,0.15);
}
.winner-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(242,242,242,0.08);
}
.winner-rank{
  font-size:18px;
  font-weight:bold;
}
.winner-score{
  font-size:16px;
  font-weight:bold;
  font-family:ui-monospace,monospace;
  padding:4px 10px;
  border-radius:3px;
  letter-spacing:1px;
}
.score-high{
  color:#8b5cf6;
  background:rgba(139,92,246,0.1);
}
.score-medium{
  color:#ffaa00;
  background:rgba(255,170,0,0.1);
}
.score-low{
  color:rgba(242,242,242,0.5);
  background:rgba(242,242,242,0.06);
}
.winner-wallet-info{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
  padding:8px;
  background:rgba(0,0,0,0.3);
  border-radius:3px;
}
.winner-wallet{
  flex:1;
  font-size:10px;
  color:rgba(242,242,242,0.7);
  font-family:ui-monospace,monospace;
  word-break:break-all;
}
.winner-copy-btn,
.winner-track-btn{
  padding:4px 8px;
  background:rgba(242,242,242,0.06);
  border:1px solid rgba(242,242,242,0.1);
  border-radius:3px;
  color:rgba(242,242,242,0.6);
  font-size:14px;
  cursor:pointer;
  border-radius:10px;  transition:all 0.2s ease;
}
.winner-copy-btn:hover,
.winner-track-btn:hover{
  background:rgba(242,242,242,0.1);
  border-color:rgba(242,242,242,0.2);
}
.winner-metrics{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-bottom:14px;
}
.winner-metric{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.winner-metric .metric-label{
  font-size:9px;
  color:rgba(242,242,242,0.4);
  font-family:ui-monospace,monospace;
  letter-spacing:0.5px;
  text-transform:uppercase;
}
.winner-metric .metric-value{
  font-size:12px;
  color:rgba(242,242,242,0.85);
  font-family:ui-monospace,monospace;
  font-weight:600;
}
.winner-breakdown{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid rgba(242,242,242,0.08);
}
.breakdown-title{
  font-size:10px;
  color:rgba(242,242,242,0.5);
  font-family:ui-monospace,monospace;
  margin-bottom:10px;
  letter-spacing:1px;
}
.breakdown-bars{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.breakdown-item{
  display:flex;
  align-items:center;
  gap:8px;
}
.breakdown-label{
  font-size:9px;
  color:rgba(242,242,242,0.5);
  font-family:ui-monospace,monospace;
  width:80px;
  flex-shrink:0;
}
.breakdown-bar-container{
  flex:1;
  height:8px;
  background:rgba(242,242,242,0.06);
  border-radius:2px;
  overflow:hidden;
}
.breakdown-bar{
  height:100%;
  background:linear-gradient(90deg,rgba(139,92,246,0.5),rgba(139,92,246,0.8));
  border-radius:2px;
  transition:width 0.3s ease;
}
.breakdown-value{
  font-size:9px;
  color:rgba(242,242,242,0.6);
  font-family:ui-monospace,monospace;
  width:40px;
  flex-shrink:0;
  text-align:right;
}

/* Liquidity Monitor */
.liquidity-content{
  flex:1;
  overflow-y:auto;
  padding:8px;
}
.liquidity-subtitle{
  padding:8px 12px;
  color:rgba(242,242,242,0.5);
  font-size:10px;
  font-family:ui-monospace,monospace;
  border-bottom:1px solid rgba(242,242,242,0.05);
}
.liquidity-tabs{
  display:flex;
  gap:4px;
  padding:8px;
  border-bottom:1px solid rgba(242,242,242,0.05);
}
.liquidity-tab{
  padding:6px 12px;
  background:rgba(242,242,242,0.02);
  border:1px solid rgba(242,242,242,0.05);
  border-radius:3px;
  color:rgba(242,242,242,0.5);
  font-size:9px;
  font-family:ui-monospace,monospace;
  letter-spacing:1px;
  cursor:pointer;
  border-radius:10px;  transition:all 0.2s ease;
}
.liquidity-tab:hover{
  color:rgba(242,242,242,0.8);
  background:rgba(242,242,242,0.03);
}
.liquidity-tab.active{
  color:#f2f2f2;
  border-color:rgba(242,242,242,0.2);
  background:rgba(242,242,242,0.06);
}
.liquidity-loading{
  padding:20px;
  text-align:center;
  color:rgba(242,242,242,0.5);
  font-size:12px;
  font-family:ui-monospace,monospace;
}
.liquidity-card{
  padding:14px;
  background:rgba(20,20,20,0.5);
  border:1px solid rgba(242,242,242,0.08);
  border-radius:14px;
  border-radius:4px;
  margin-bottom:10px;
  cursor:pointer;
  border-radius:10px;  transition:all 0.2s ease;
}
.liquidity-card:hover{
  background:rgba(30,30,30,0.6);
  border-color:rgba(242,242,242,0.15);
}
.liquidity-card.severity-high{
  border-left:3px solid rgba(255,68,68,0.6);
}
.liquidity-card.severity-medium{
  border-left:3px solid rgba(255,170,0,0.6);
}
.liquidity-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(242,242,242,0.05);
}
.liquidity-type{
  font-size:11px;
  font-weight:bold;
  font-family:ui-monospace,monospace;
  color:rgba(242,242,242,0.85);
  letter-spacing:1px;
}
.liquidity-severity{
  font-size:9px;
  font-family:ui-monospace,monospace;
  padding:3px 8px;
  border-radius:2px;
  background:rgba(242,242,242,0.06);
  color:rgba(242,242,242,0.5);
  letter-spacing:0.5px;
}
.severity-high .liquidity-severity{
  background:rgba(255,68,68,0.1);
  color:#ff4444;
}
.severity-medium .liquidity-severity{
  background:rgba(255,170,0,0.1);
  color:#ffaa00;
}
.liquidity-token{
  margin-bottom:10px;
}
.liquidity-token-name{
  font-size:12px;
  font-weight:600;
  color:rgba(242,242,242,0.9);
  font-family:ui-monospace,monospace;
}
.liquidity-details{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
  margin-bottom:10px;
}
.liquidity-stat{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.liquidity-stat .stat-label{
  font-size:8px;
  color:rgba(242,242,242,0.4);
  font-family:ui-monospace,monospace;
  letter-spacing:0.5px;
  text-transform:uppercase;
}
.liquidity-stat .stat-value{
  font-size:11px;
  color:rgba(242,242,242,0.85);
  font-family:ui-monospace,monospace;
  font-weight:600;
}
.liquidity-stat .stat-value.change-positive{
  color:#4ade80;
}
.liquidity-stat .stat-value.change-negative{
  color:#ff4444;
}
.liquidity-secondary{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:8px;
  background:rgba(0,0,0,0.3);
  border-radius:3px;
  margin-bottom:8px;
}
.secondary-label{
  font-size:8px;
  color:rgba(242,242,242,0.4);
  font-family:ui-monospace,monospace;
  letter-spacing:0.5px;
}
.secondary-value{
  font-size:10px;
  color:rgba(242,242,242,0.7);
  font-family:ui-monospace,monospace;
}
.liquidity-warning{
  padding:8px;
  background:rgba(255,170,0,0.05);
  border:1px solid rgba(255,170,0,0.15);
  border-radius:3px;
  font-size:9px;
  color:rgba(255,170,0,0.9);
  font-family:ui-monospace,monospace;
  margin-bottom:8px;
}
.liquidity-actions{
  display:flex;
  gap:6px;
  margin-top:10px;
}
.liq-action-btn{
  flex:1;
  padding:6px;
  background:rgba(242,242,242,0.06);
  border:1px solid rgba(242,242,242,0.1);
  border-radius:3px;
  color:rgba(242,242,242,0.7);
  font-size:10px;
  font-family:ui-monospace,monospace;
  cursor:pointer;
  border-radius:10px;  transition:all 0.2s ease;
}
.liq-action-btn:hover{
  background:rgba(242,242,242,0.1);
  border-color:rgba(242,242,242,0.2);
  color:rgba(242,242,242,0.9);
}

/* Copy Trade */
.copy-subtitle{
  padding:8px 12px;
  color:rgba(242,242,242,0.5);
  font-size:10px;
  font-family:ui-monospace,monospace;
  border-bottom:1px solid rgba(242,242,242,0.05);
}
.tool-settings-btn{
  padding:6px 10px;
  background:rgba(242,242,242,0.06);
  border:1px solid rgba(242,242,242,0.1);
  border-radius:3px;
  color:rgba(242,242,242,0.6);
  font-size:14px;
  cursor:pointer;
  border-radius:10px;  transition:all 0.2s ease;
  margin-right:6px;
}
.tool-settings-btn:hover{
  background:rgba(242,242,242,0.1);
  border-color:rgba(242,242,242,0.2);
}
.copy-settings-panel{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background:rgba(10,10,10,0.98);
  border:1px solid rgba(242,242,242,0.15);
  border-radius:12px;  border-radius:6px;
  padding:20px;
  max-width:400px;
  width:90%;
  z-index:1000;
}
.settings-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:16px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(242,242,242,0.1);
}
.settings-title{
  font-size:14px;
  font-weight:bold;
  color:rgba(242,242,242,0.9);
  font-family:ui-monospace,monospace;
  letter-spacing:1px;
}
.settings-close-btn{
  background:none;
  border:none;
  color:rgba(242,242,242,0.5);
  font-size:24px;
  cursor:pointer;
  border-radius:10px;  padding:0;
  width:24px;
  height:24px;
}
.settings-close-btn:hover{
  color:rgba(242,242,242,0.9);
}
.settings-content{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.setting-item{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.setting-label{
  font-size:10px;
  color:rgba(242,242,242,0.5);
  font-family:ui-monospace,monospace;
  letter-spacing:0.5px;
  text-transform:uppercase;
}
.setting-input,
.setting-select{
  padding:8px;
  background:rgba(242,242,242,0.06);
  border:1px solid rgba(242,242,242,0.1);
  border-radius:3px;
  color:rgba(242,242,242,0.9);
  font-size:12px;
  font-family:ui-monospace,monospace;
}
.setting-input:focus,
.setting-select:focus{
  outline:none;
  border-color:rgba(242,242,242,0.25);
}
.setting-toggle{
  display:flex;
  gap:6px;
}
.toggle-btn{
  flex:1;
  padding:8px;
  background:rgba(242,242,242,0.06);
  border:1px solid rgba(242,242,242,0.1);
  border-radius:3px;
  color:rgba(242,242,242,0.5);
  font-size:10px;
  font-family:ui-monospace,monospace;
  cursor:pointer;
  border-radius:10px;  transition:all 0.2s ease;
  letter-spacing:0.5px;
}
.toggle-btn:hover{
  background:rgba(242,242,242,0.1);
}
.toggle-btn.active{
  background:rgba(139,92,246,0.15);
  border-color:rgba(139,92,246,0.3);
  color:#8b5cf6;
}
.setting-checkbox{
  display:flex;
  align-items:center;
  gap:8px;
}
.setting-checkbox input[type="checkbox"]{
  width:16px;
  height:16px;
  cursor:pointer;
  border-radius:10px;}
.setting-checkbox label{
  font-size:10px;
  color:rgba(242,242,242,0.7);
  font-family:ui-monospace,monospace;
  cursor:pointer;
  border-radius:10px;}
.settings-save-btn{
  margin-top:12px;
  padding:10px;
  background:rgba(139,92,246,0.1);
  border:1px solid rgba(139,92,246,0.2);
  border-radius:3px;
  color:#8b5cf6;
  font-size:11px;
  font-family:ui-monospace,monospace;
  cursor:pointer;
  border-radius:10px;  transition:all 0.2s ease;
  letter-spacing:1px;
}
.settings-save-btn:hover{
  background:rgba(139,92,246,0.2);
  border-color:rgba(139,92,246,0.4);
}
.copy-stats{
  display:flex;
  gap:12px;
  padding:8px 12px;
  background:rgba(0,0,0,0.3);
  border-bottom:1px solid rgba(242,242,242,0.05);
}
.copy-stat-item{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.copy-stat-item .stat-label{
  font-size:8px;
  color:rgba(242,242,242,0.4);
  font-family:ui-monospace,monospace;
  letter-spacing:0.5px;
  text-transform:uppercase;
}
.copy-stat-item .stat-value{
  font-size:11px;
  color:rgba(242,242,242,0.85);
  font-family:ui-monospace,monospace;
  font-weight:600;
}
.copy-following{
  padding:8px 12px;
  border-bottom:1px solid rgba(242,242,242,0.05);
}
.copy-following-label{
  font-size:9px;
  color:rgba(242,242,242,0.5);
  font-family:ui-monospace,monospace;
  letter-spacing:0.5px;
  margin-bottom:6px;
}
.copy-following-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.copy-following-item{
  display:flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  background:rgba(242,242,242,0.06);
  border:1px solid rgba(242,242,242,0.1);
  border-radius:3px;
}
.copy-wallet-addr{
  font-size:9px;
  color:rgba(242,242,242,0.7);
  font-family:ui-monospace,monospace;
}
.copy-remove-btn{
  background:none;
  border:none;
  color:rgba(242,242,242,0.4);
  font-size:14px;
  cursor:pointer;
  border-radius:10px;  padding:0;
}
.copy-remove-btn:hover{
  color:rgba(255,68,68,0.8);
}
.copy-trade-card{
  padding:14px;
  background:rgba(20,20,20,0.5);
  border:1px solid rgba(242,242,242,0.08);
  border-radius:14px;
  border-radius:4px;
  margin-bottom:10px;
  cursor:pointer;
  border-radius:10px;  transition:all 0.2s ease;
}
.copy-trade-card:hover{
  background:rgba(30,30,30,0.6);
  border-color:rgba(242,242,242,0.15);
}
.copy-trade-header{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  flex-wrap:wrap;
}
.risk-badge{
  font-size:8px;
  font-family:ui-monospace,monospace;
  padding:3px 6px;
  border-radius:2px;
  letter-spacing:0.5px;
  font-weight:600;
}
.risk-badge.risk-low{
  background:rgba(139,92,246,0.1);
  color:#8b5cf6;
}
.risk-badge.risk-medium{
  background:rgba(255,170,0,0.1);
  color:#ffaa00;
}
.risk-badge.risk-high{
  background:rgba(255,68,68,0.1);
  color:#ff4444;
}
.copy-trade-stats{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:10px 0;
  padding:8px;
  background:rgba(0,0,0,0.3);
  border-radius:3px;
}
.copy-stat-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.copy-stat-label{
  font-size:9px;
  color:rgba(242,242,242,0.5);
  font-family:ui-monospace,monospace;
}
.copy-stat-value{
  font-size:10px;
  color:rgba(242,242,242,0.8);
  font-family:ui-monospace,monospace;
  font-weight:600;
}
.price-change{
  font-size:10px;
  font-family:ui-monospace,monospace;
  font-weight:600;
}
.price-change.positive{
  color:#8b5cf6;
}
.price-change.negative{
  color:#ff4444;
}
.copy-trade-actions{
  display:flex;
  gap:6px;
  margin-top:10px;
}
.copy-trade-btn,
.copy-analyze-btn{
  flex:1;
  padding:6px;
  background:rgba(242,242,242,0.06);
  border:1px solid rgba(242,242,242,0.1);
  border-radius:3px;
  color:rgba(242,242,242,0.7);
  font-size:10px;
  font-family:ui-monospace,monospace;
  cursor:pointer;
  border-radius:10px;  transition:all 0.2s ease;
}
.copy-trade-btn:hover,
.copy-analyze-btn:hover{
  background:rgba(242,242,242,0.1);
  border-color:rgba(242,242,242,0.2);
  color:rgba(242,242,242,0.9);
}

/* Wallet Tracker */
.wallet-summary{
  background:rgba(20,20,20,0.5);
  border:1px solid rgba(242,242,242,0.1);
  border-radius:4px;
  padding:16px;
  margin-bottom:12px;
}
.wallet-total{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-bottom:12px;
  border-bottom:1px solid rgba(242,242,242,0.1);
  margin-bottom:12px;
}
.wallet-total-label{
  font-size:10px;
  color:rgba(242,242,242,0.5);
  font-family:ui-monospace,monospace;
  letter-spacing:1px;
  margin-bottom:4px;
}
.wallet-total-value{
  font-size:24px;
  color:#f2f2f2;
  font-family:ui-monospace,monospace;
  font-weight:600;
}
.wallet-breakdown{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.wallet-breakdown-item{
  display:flex;
  justify-content:space-between;
  font-size:11px;
  color:rgba(242,242,242,0.7);
  font-family:ui-monospace,monospace;
}
.wallet-tokens-header{
  font-size:11px;
  color:rgba(242,242,242,0.5);
  font-family:ui-monospace,monospace;
  letter-spacing:1px;
  padding:8px 0;
  border-bottom:1px solid rgba(242,242,242,0.1);
  margin-bottom:8px;
}
.wallet-tx{
  display:flex;
  justify-content:space-between;
  padding:8px 12px;
  background:rgba(20,20,20,0.3);
  border:1px solid rgba(242,242,242,0.05);
  border-radius:4px;
  margin-bottom:4px;
}
.wallet-tx-type{
  font-size:10px;
  color:rgba(242,242,242,0.6);
  font-family:ui-monospace,monospace;
}
.wallet-tx-time{
  font-size:10px;
  color:rgba(242,242,242,0.4);
  font-family:ui-monospace,monospace;
}

/* Responsive adjustments */
@media (max-width:640px){
  .future-message, .art-generator, .signals-map{
    width:calc(100% - 48px);
    padding:16px;
  }
  #artCanvas, #mapCanvas{
    max-width:100%;
  }
  .live-transmission{
    right:24px;
    bottom:100px;
    width:calc(100% - 48px);
  }
  .tools-nav{
    top:120px;
    left:20px;
    max-width:calc(100% - 40px);
  }
  .tool-tab{
    padding:6px 10px;
    font-size:9px;
  }
  .tool-section{
    top:180px;
    left:20px;
    width:calc(100% - 40px);
    max-height:calc(100vh - 220px);
  }
}

/* =========================================================
/* Classic button style toggle - activate with Ctrl+Shift+B */
.classic-buttons .v2-search-btn,
.classic-buttons .v2-toggle-btn,
.classic-buttons .art-trigger-btn,
.classic-buttons .server-status-btn,
.classic-buttons .tool-tab,
.classic-buttons .query-submit,
.classic-buttons .query-input,
.classic-buttons .query-response,
.classic-buttons .signal{
  border-radius:0 !important;
}

   UI v2 (toggleable; see script.js -> html/body class ui-v2)
   ========================================================= */

.kbd{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:1px 6px;
  border:1px solid rgba(242,242,242,0.18);
  border-bottom-color:rgba(242,242,242,0.28);
  border-radius:6px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:11px;
  color:rgba(242,242,242,0.85);
  background:rgba(255,255,255,0.03);
}

/* Default: v2 hidden */
.v2-hero,
.v2-social,
.v2-data,
.cp-modal,
.token-panel,
.v2-sheet{
  display:none;
}

body.ui-v2{
  min-height:100vh;
}
body.ui-v2 .wrap{
  height:auto;
  min-height:100vh;
}

/* In v2, keep monolith behavior unchanged (classic styling) */
body.ui-v2 .monolith{
  right:-10%;
  z-index:-1;  opacity:0.6;
  position:fixed;
  height:100vh;
  z-index:-1;
  max-width:110vw;
}

/* Fix monolith overflow on mobile */
@media (max-width:640px){
  body.ui-v2 .monolith{
    right: 0;
    max-width: 100vw;
  }
}

/* Hide classic-only controls in v2 (but keep tool panels available for nav actions) */
body.ui-v2 .title,
body.ui-v2 .query-interface,
body.ui-v2 .status,
body.ui-v2 .signal,
body.ui-v2 .tools-nav,
body.ui-v2 .xlink,
body.ui-v2 .art-trigger-btn,
body.ui-v2 .x-social-link,
body.ui-v2 #v2ColumnsBtn{
  display:none !important;
}

/* Hide tools nav (HOME, TOKENS, WALLETS, COPY) in BASIC UI */
body:not(.ui-v2) .tools-nav{
  display:none !important;
}

/* Show status button only in V2 UI */
.status-trigger-btn{
  display:none;
}
body.ui-v2 .status-trigger-btn{
  display:block;
}

/* Solana Price Header */
.solana-price-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  background:rgba(10,10,10,0.95);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(242,242,242,0.1);
  z-index:1300;
  padding:8px 20px;
  display:none;
}

.solana-icon{
  width:16px;
  height:16px;
  border-radius:50%;
  margin-right:8px;
  flex-shrink:0;
}

.price-container{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.price-main{
  display:flex;
  align-items:center;
  gap:12px;
}

.price-symbol{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:16px;
  font-weight:600;
  color:#8b5cf6;
  letter-spacing:0.5px;
}

.price-value{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:18px;
  font-weight:600;
  color:rgba(242,242,242,0.95);
}

.price-change{
  display:flex;
  align-items:center;
  gap:4px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12px;
  font-weight:500;
}

.price-change.positive .change-value{
  color:#4ade80;
}

.price-change.negative .change-value{
  color:#ff6b6b;
}

.change-icon{
  font-size:14px;
  transition:transform 0.2s ease;
}

.price-change.positive .change-icon{
  color:#4ade80;
  transform:rotate(45deg);
}

.price-change.negative .change-icon{
  color:#ff6b6b;
  transform:rotate(-45deg);
}

.price-details{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

.price-stat{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
}

.stat-label{
  font-size:9px;
  color:rgba(242,242,242,0.5);
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing:0.5px;
  text-transform:uppercase;
}

.stat-value{
  font-size:11px;
  color:rgba(242,242,242,0.8);
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight:500;
}

/* Show Solana price header in V2 */
body.ui-v2 .solana-price-header{
  display:block;
}

/* Adjust V2 logo position when price header is visible */
body.ui-v2 .v2-title-logo{
  top:70px;
}

/* Adjust corner controls position when price header is visible */
body.ui-v2 .corner-controls{
  top:70px;
}

/* Responsive adjustments for Solana price header */
@media (max-width: 768px) {
  .solana-price-header{
    padding:6px 12px;
  }

  .price-container{
    gap:12px;
  }

  .price-main{
    gap:6px;
  }

  .solana-icon{
    width:16px;
    height:16px;
    margin-right:6px;
  }

  .price-symbol{
    font-size:14px;
  }

  .price-value{
    font-size:16px;
  }

  .price-change{
    font-size:11px;
  }

  .price-details{
    gap:10px;
  }

  .price-stat{
    align-items:flex-start;
  }

  .stat-label{
    font-size:8px;
  }

  .stat-value{
    font-size:10px;
  }

  /* Adjust positions for mobile */
  body.ui-v2 .v2-title-logo{
    top:55px;
  }

  body.ui-v2 .corner-controls{
    top:55px;
  }
}

/* V2 Logo/Title */
.v2-title-logo{
  position:absolute;
  top:28px;
  left:28px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:32px;
  font-weight:600;
  letter-spacing:0.1em;
  color:rgba(242,242,242,0.9);
  z-index:1200;
  display:none;
}

/* Larger logo on mobile */
@media (max-width: 768px) {
  .v2-title-logo {
    font-size:36px;
  }
}
body.ui-v2 .v2-title-logo{
  display:block;
}

/* Show v2 sections */
body.ui-v2 .v2-hero,
body.ui-v2 .v2-data{
  display:block;
  position:relative;
  z-index:2;
}

/* Hide recently monitored tokens section */
body.ui-v2 .v2-social{
  display:none !important;
}

/* Compact DEX badges on mobile */
@media (max-width: 768px) {
  .dex-badge {
    font-size: 9px !important;
    padding: 2px 4px !important;
  }
}

/* Force horizontal containment for UI v2 */
body.ui-v2 [style*="position:absolute"],
body.ui-v2 [style*="position:fixed"] {
  max-width: 100vw !important;
  right: auto !important;
}

/* Ultimate overflow prevention for UI v2 */
html:has(body.ui-v2),
body.ui-v2 {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* Adjust tool panels position in v2 */
body.ui-v2 .tool-section{
  top:80px;
  left:20px;
  max-height:calc(100vh - 120px);
  z-index:100;
}

.v2-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.v2-search-btn,
.v2-toggle-btn,
.status-trigger-btn{
  background:rgba(242,242,242,0.03);
  border:1px solid rgba(242,242,242,0.12);
  color:rgba(242,242,242,0.78);
  padding:7px 10px;
  border-radius:10px;
  cursor:pointer;
  border-radius:10px;  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:11px;
  transition:all 0.18s ease;
}
.v2-search-btn:hover,
.v2-toggle-btn:hover,
.status-trigger-btn:hover{
  border-color:rgba(242,242,242,0.25);
  color:rgba(242,242,242,0.95);
  background:rgba(242,242,242,0.06);
}

.v2-hero{
  width:100%;
  padding:120px 20px 10px;
  max-width:1100px;
  margin:0 auto;
}

/* More top spacing on mobile */
@media (max-width: 768px) {
  .v2-hero {
    padding:130px 20px 10px;
  }
}
.v2-hero-inner{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap:16px;
  align-items:start;
}
.v2-hero-copy{
  border:1px solid rgba(242,242,242,0.08);
  border-radius:14px;
  background:rgba(10,10,10,0.62);
  border-radius:14px;
  padding:18px 18px 16px;
}
.v2-eyebrow{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:10px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:rgba(154,154,154,0.85);
  margin-bottom:10px;
}
.v2-title{
  margin:0 0 10px 0;
  font-size:32px;
  line-height:1.05;
  letter-spacing:-0.02em;
}
.v2-subtitle{
  margin:0 0 14px 0;
  color:rgba(242,242,242,0.70);
  font-size:14px;
  line-height:1.55;
  max-width:52ch;
}
.v2-cta-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.v2-primary,
.v2-secondary,
.v2-ghost{
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  border-radius:10px;  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  transition:all 0.18s ease;
}
.v2-primary{
  border:1px solid rgba(139,92,246,0.28);
  color:#8b5cf6;
  background:rgba(139,92,246,0.09);
}
.v2-primary:hover{
  background:rgba(139,92,246,0.16);
  border-color:rgba(139,92,246,0.40);
}
.v2-secondary{
  border:1px solid rgba(242,242,242,0.14);
  color:rgba(242,242,242,0.86);
  background:rgba(242,242,242,0.04);
}
.v2-secondary:hover{
  background:rgba(242,242,242,0.07);
  border-color:rgba(242,242,242,0.24);
}
.v2-ghost{
  border:1px solid rgba(242,242,242,0.12);
  color:rgba(242,242,242,0.78);
  background:rgba(242,242,242,0.03);
}
.v2-ghost:hover{
  background:rgba(242,242,242,0.06);
  border-color:rgba(242,242,242,0.22);
}
.v2-quick-row{
  display:flex;
  gap:10px;
  margin-top:8px;
}
.v2-quick-input{
  flex:1;
  background:rgba(0,0,0,0.35);
  border:1px solid rgba(242,242,242,0.14);
  color:rgba(242,242,242,0.92);
  padding:10px 12px;
  border-radius:12px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:13px;
  outline:none;
}
.v2-quick-input:focus{
  border-color:rgba(242,242,242,0.28);
  background:rgba(255,255,255,0.03);
}
.v2-quick-go{
  border:1px solid rgba(242,242,242,0.14);
  color:rgba(242,242,242,0.82);
  background:rgba(242,242,242,0.04);
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  border-radius:10px;  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.v2-quick-go:hover{
  background:rgba(242,242,242,0.07);
  border-color:rgba(242,242,242,0.24);
}
.v2-hint{
  margin-top:10px;
  font-size:12px;
  color:rgba(154,154,154,0.8);
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.v2-hero-preview{
  border:1px solid rgba(242,242,242,0.08);
  border-radius:14px;
  background:rgba(10,10,10,0.62);
  border-radius:14px;
  padding:14px;
}
.v2-preview-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.v2-card{
  border:1px solid rgba(242,242,242,0.08);
  border-radius:14px;
  background:rgba(0,0,0,0.28);
  border-radius:12px;
  padding:12px;
}
.v2-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.v2-card-title{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:rgba(242,242,242,0.78);
}
.v2-card-action{
  border:none;
  background:rgba(242,242,242,0.03);
  color:rgba(100,180,255,0.85);
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:11px;
  cursor:pointer;
  border-radius:10px;  padding:0;
  text-decoration:underline;
  text-decoration-color:rgba(100,180,255,0.25);
}
.v2-card-action:hover{
  color:rgba(140,200,255,1);
  text-decoration-color:rgba(140,200,255,0.55);
}
.v2-card-body{
  min-height:44px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12px;
  color:rgba(242,242,242,0.82);
  line-height:1.5;
}

.v2-skeleton{
  position:relative;
  overflow:hidden;
}
.v2-skeleton::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(255,255,255,0.00), rgba(255,255,255,0.06), rgba(255,255,255,0.00));
  transform:translateX(-60%);
  animation:v2Shimmer 1.2s ease-in-out infinite;
}
@keyframes v2Shimmer{
  0%{transform:translateX(-60%)}
  100%{transform:translateX(60%)}
}

.v2-social,
.v2-data{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding:10px 20px 14px;
}
.v2-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:8px 0 10px;
  flex-wrap:wrap;
}
.v2-section-title{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:rgba(242,242,242,0.78);
}
.v2-section-meta{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:11px;
  color:rgba(154,154,154,0.8);
}
.v2-chip-row{
  display:flex;
  gap:8px;
  overflow:auto;
  padding:6px 2px 10px;
  scroll-snap-type:x mandatory;
}
.v2-chip{
  scroll-snap-align:start;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(242,242,242,0.10);
  background:rgba(10,10,10,0.55);
  cursor:pointer;
  border-radius:10px;  user-select:none;
  white-space:nowrap;
}
.v2-chip:hover{
  border-color:rgba(242,242,242,0.20);
  background:rgba(242,242,242,0.06);
}
.v2-chip-sym{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:11px;
  color:rgba(242,242,242,0.9);
}
.v2-chip-meta{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:10px;
  color:rgba(154,154,154,0.85);
}

.v2-section-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.v2-pill-tabs{
  display:flex;
  gap:4px;
  padding:4px;
  border:1px solid rgba(242,242,242,0.08);
  border-radius:14px;
  background:rgba(10,10,10,0.5);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  flex-shrink:0;
}
.v2-pill-tabs::-webkit-scrollbar{display:none}
.v2-pill{
  padding:7px 10px;
  border:1px solid transparent;
  background:rgba(242,242,242,0.03);
  color:rgba(242,242,242,0.62);
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:10px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  cursor:pointer;
  border-radius:10px;
  transition:all 0.18s ease;
  white-space:nowrap;
  flex-shrink:0;
}
.v2-pill:hover{
  color:rgba(242,242,242,0.9);
}
.v2-pill.active{
  border-color:rgba(242,242,242,0.18);
  background:rgba(242,242,242,0.06);
  color:rgba(242,242,242,0.92);
}

.v2-table-wrap{
  border:1px solid rgba(242,242,242,0.08);
  border-radius:14px;
  background:rgba(10,10,10,0.62);
  border-radius:14px;
  overflow:auto;
  max-height:520px;
}
.v2-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:880px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12px;
}
.v2-table thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:rgba(5,5,5,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(242,242,242,0.08);
  color:rgba(154,154,154,0.9);
  text-transform:uppercase;
  letter-spacing:0.12em;
  font-size:10px;
  padding:10px 10px;
  text-align:left;
  cursor:pointer;
  border-radius:10px;  user-select:none;
}
.v2-table tbody td{
  border-bottom:1px solid rgba(242,242,242,0.06);
  padding:10px 10px;
  color:rgba(242,242,242,0.82);
}
.v2-table tbody tr:hover td{
  background:rgba(242,242,242,0.03);
}
/* Token icon in table */
.v2-token-name{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.v2-token-icon{
  width:22px;
  height:22px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
  background:rgba(255,255,255,0.06);
}
.v2-token-icon-placeholder{
  display:inline-block;
  width:22px;
  height:22px;
  border-radius:50%;
  background:rgba(255,255,255,0.06);
  flex-shrink:0;
}
.v2-table .v2-num{
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.v2-table .v2-row-actions{
  display:flex;
  gap:6px;
  justify-content:flex-end;
}
.v2-icon-btn{
  border:1px solid rgba(242,242,242,0.12);
  background:rgba(242,242,242,0.03);
  color:rgba(242,242,242,0.75);
  border-radius:10px;
  padding:6px 8px;
  cursor:pointer;
  border-radius:10px;  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:11px;
}
.v2-icon-btn:hover{
  background:rgba(242,242,242,0.06);
  border-color:rgba(242,242,242,0.22);
  color:rgba(242,242,242,0.95);
}
/* Quick filter pills */
.v2-filters{
  display:flex;
  gap:6px;
  padding:0 20px;
  margin:6px auto 4px;
  max-width:1100px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.v2-filters::-webkit-scrollbar{display:none}
.v2-filter-pill{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  color:rgba(255,255,255,0.5);
  font-size:11px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding:4px 10px;
  border-radius:12px;
  cursor:pointer;
  transition:all 0.15s;
  white-space:nowrap;
  flex-shrink:0;
}
.v2-filter-pill:hover, .v2-filter-pill.active{
  background:rgba(139,92,246,0.15);
  border-color:rgba(139,92,246,0.3);
  color:rgba(255,255,255,0.9);
}

/* Auto-refresh — bar hidden, refresh still runs in background */
.v2-refresh-bar{display:none}

.token-change.warning{
  color:#f59e0b;
}
/* Sparkline */
.v2-sparkline{
  display:inline-block;
  vertical-align:middle;
  opacity:0.85;
}

/* Risk score badges */
.risk-badge{
  display:inline-block;
  padding:2px 8px;
  border-radius:4px;
  font-size:10px;
  font-weight:600;
  letter-spacing:0.05em;
}
.risk-low{
  background:rgba(34,197,94,0.15);
  color:#22c55e;
}
.risk-med{
  background:rgba(245,158,11,0.15);
  color:#f59e0b;
}
.risk-high{
  background:rgba(239,68,68,0.15);
  color:#ef4444;
}

.v2-row-active{
  background:rgba(139,92,246,0.12) !important;
  outline:1px solid rgba(139,92,246,0.3);
}
.v2-row-tooltip{
  position:fixed;
  display:none;
  background:rgba(10,10,10,0.95);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:8px;
  padding:10px 14px;
  font-size:12px;
  line-height:1.6;
  color:rgba(255,255,255,0.85);
  z-index:2000;
  pointer-events:none;
  max-width:260px;
  backdrop-filter:blur(12px);
  box-shadow:0 4px 20px rgba(0,0,0,0.4);
}
.v2-fav-btn{
  color:rgba(255,255,255,0.25);
  font-size:13px;
}
.v2-fav-btn.active{
  color:#facc15;
}
.v2-fav-btn:hover{
  color:#facc15;
}

/* Command Palette */
.cp-modal{
  position:absolute;
  inset:0;
  z-index:2000;
  align-items:flex-start;
  justify-content:center;
  padding:80px 16px 16px;
}
.cp-modal[style*="display:none"]{display:none !important;}
.cp-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.82);
  backdrop-filter:blur(6px);
}
.cp-panel{
  position:relative;
  width:min(720px, 100%);
  border:1px solid rgba(242,242,242,0.12);
  background:rgba(10,10,10,0.94);
  border-radius:16px;
  box-shadow:0 0 80px rgba(0,0,0,0.75);
  overflow:hidden;
}
.cp-input-row{
  display:flex;
  gap:10px;
  padding:12px;
  border-bottom:1px solid rgba(242,242,242,0.08);
}
.cp-input{
  flex:1;
  border:1px solid rgba(242,242,242,0.12);
  background:rgba(0,0,0,0.35);
  color:rgba(242,242,242,0.92);
  border-radius:12px;
  padding:10px 12px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:13px;
  outline:none;
}
.cp-input:focus{
  border-color:rgba(242,242,242,0.25);
  background:rgba(255,255,255,0.03);
}
.cp-close{
  border:1px solid rgba(242,242,242,0.12);
  background:rgba(242,242,242,0.03);
  color:rgba(242,242,242,0.75);
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  border-radius:10px;  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.cp-close:hover{
  background:rgba(242,242,242,0.06);
  border-color:rgba(242,242,242,0.22);
  color:rgba(242,242,242,0.95);
}
.cp-hint{
  padding:10px 12px 0;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:11px;
  color:rgba(154,154,154,0.8);
}
.cp-results{
  max-height:420px;
  overflow:auto;
  padding:8px 8px 12px;
}
.cp-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid transparent;
  cursor:pointer;
  border-radius:10px;}
.cp-item:hover{
  background:rgba(242,242,242,0.04);
  border-color:rgba(242,242,242,0.08);
}
.cp-item.active{
  background:rgba(100,180,255,0.10);
  border-color:rgba(100,180,255,0.25);
}
.cp-left{
  min-width:0;
}
.cp-title{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12px;
  color:rgba(242,242,242,0.92);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.cp-sub{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:11px;
  color:rgba(154,154,154,0.85);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.cp-tag{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:10px;
  color:rgba(154,154,154,0.8);
  border:1px solid rgba(242,242,242,0.10);
  border-radius:999px;
  padding:3px 8px;
  background:rgba(255,255,255,0.02);
  flex-shrink:0;
}

/* Token Panel */
.token-panel{
  position:absolute;
  inset:0;
  z-index:2100;
}
.token-panel[style*="display:none"]{display:none !important;}
.token-panel-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.78);
  backdrop-filter:blur(6px);
}
.token-panel-inner{
  position:absolute;
  top:0;
  right:0;
  height:100%;
  width:min(560px, 100%);
  background:rgba(10,10,10,0.96);
  border-left:1px solid rgba(242,242,242,0.10);
  box-shadow:-40px 0 80px rgba(0,0,0,0.7);
  display:flex;
  flex-direction:column;
}
.token-panel-top{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 12px;
  border-bottom:1px solid rgba(242,242,242,0.08);
}
.token-back{
  border:1px solid rgba(242,242,242,0.12);
  background:rgba(242,242,242,0.03);
  color:rgba(242,242,242,0.8);
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
  border-radius:10px;}
.token-back:hover{
  background:rgba(242,242,242,0.06);
  border-color:rgba(242,242,242,0.22);
}
.token-breadcrumbs{
  flex:1;
  min-width:0;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:11px;
  color:rgba(154,154,154,0.85);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.token-top-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.token-top-btn{
  border:1px solid rgba(242,242,242,0.12);
  background:rgba(242,242,242,0.03);
  color:rgba(242,242,242,0.8);
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
  border-radius:10px;  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:11px;
  text-decoration:none;
}
.token-top-btn:hover{
  background:rgba(242,242,242,0.06);
  border-color:rgba(242,242,242,0.22);
  color:rgba(242,242,242,0.95);
}
.token-close{
  border:none;
  background:rgba(242,242,242,0.03);
  color:rgba(242,242,242,0.7);
  font-size:28px;
  line-height:1;
  cursor:pointer;
  border-radius:10px;  padding:2px 8px;
}
.token-close:hover{
  color:rgba(242,242,242,1);
}
.token-head{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 14px 10px;
}
.token-logo{
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid rgba(242,242,242,0.12);
  background:rgba(0,0,0,0.35);
  object-fit:cover;
}
.token-id{
  flex:1;
  min-width:0;
}
.token-name{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:14px;
  color:rgba(242,242,242,0.95);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.token-symbol{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12px;
  color:rgba(154,154,154,0.9);
}
.token-accent-chip{
  width:14px;
  height:14px;
  border-radius:999px;
  border:1px solid rgba(242,242,242,0.14);
  background:var(--token-accent, rgba(139,92,246,0.55));
  box-shadow:0 0 18px rgba(139,92,246,0.12);
}
.token-stats{
  padding:0 14px 10px;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:8px;
}
.token-stat{
  border:1px solid rgba(242,242,242,0.08);
  border-radius:14px;
  background:rgba(0,0,0,0.25);
  border-radius:12px;
  padding:10px 10px;
}
.token-stat .k{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:10px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:rgba(154,154,154,0.9);
  margin-bottom:6px;
}
.token-stat .v{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:13px;
  color:rgba(242,242,242,0.92);
  font-variant-numeric:tabular-nums;
}
.token-stat .v.risk-loading{
  color:rgba(154,154,154,0.7);
  animation:pulse 1.5s ease-in-out infinite;
}
.token-stat .v.risk-low{
  color:#22c55e;
  text-shadow:0 0 8px rgba(34,197,94,0.3);
}
.token-stat .v.risk-medium{
  color:#f59e0b;
  text-shadow:0 0 8px rgba(245,158,11,0.3);
}
.token-stat .v.risk-high{
  color:#ef4444;
  text-shadow:0 0 8px rgba(239,68,68,0.3);
}
@keyframes pulse{
  0%,100%{opacity:0.5}
  50%{opacity:1}
}
.token-tabs{
  display:flex;
  gap:6px;
  padding:10px 14px;
  border-top:1px solid rgba(242,242,242,0.06);
  border-bottom:1px solid rgba(242,242,242,0.08);
}
.token-tab{
  flex:1;
  border:1px solid rgba(242,242,242,0.08);
  border-radius:14px;
  background:rgba(242,242,242,0.03);
  color:rgba(242,242,242,0.65);
  border-radius:12px;
  padding:10px 10px;
  cursor:pointer;
  border-radius:10px;  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:10px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  transition:all 0.18s ease;
}
.token-tab:hover{
  border-color:rgba(242,242,242,0.18);
  color:rgba(242,242,242,0.9);
}
.token-tab.active{
  border-color:rgba(139,92,246,0.22);
  background:rgba(139,92,246,0.08);
  color:#8b5cf6;
}
.token-body{
  flex:1;
  overflow:auto;
  padding:14px;
}
.token-grid{
  display:grid;
  grid-template-columns:1fr 0.9fr;
  gap:12px;
}
.token-panel-card{
  border:1px solid rgba(242,242,242,0.08);
  border-radius:14px;
  background:rgba(0,0,0,0.25);
  border-radius:14px;
  padding:12px;
}
.token-panel-card .hd{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:10px;
  color:rgba(154,154,154,0.9);
  letter-spacing:0.12em;
  text-transform:uppercase;
  margin-bottom:10px;
}
.token-iframe{
  width:100%;
  height:360px;
  border:none;
  border-radius:12px;
  background:#0a0a0a;
}
.token-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.token-event{
  border:1px solid rgba(242,242,242,0.06);
  background:rgba(242,242,242,0.03);
  border-radius:12px;
  padding:10px;
}
.token-event .t{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:11px;
  color:rgba(242,242,242,0.9);
}
.token-event .m{
  margin-top:6px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:11px;
  color:rgba(154,154,154,0.85);
  line-height:1.5;
}

/* Column sheet (mobile-friendly) */
body.ui-v2 .v2-sheet{
  display:block;
  position:absolute;
  inset:0;
  z-index:2050;
}
.v2-sheet[style*="display:none"]{display:none !important;}
.v2-sheet-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.75);
  backdrop-filter:blur(6px);
}
.v2-sheet-panel{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(520px, calc(100% - 24px));
  max-height:min(560px, calc(100% - 24px));
  overflow:hidden;
  border:1px solid rgba(242,242,242,0.12);
  background:rgba(10,10,10,0.96);
  border-radius:16px;
  box-shadow:0 0 80px rgba(0,0,0,0.75);
  display:flex;
  flex-direction:column;
}
.v2-sheet-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 12px;
  border-bottom:1px solid rgba(242,242,242,0.08);
}
.v2-sheet-title{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:rgba(242,242,242,0.82);
}
.v2-sheet-close{
  border:none;
  background:rgba(242,242,242,0.03);
  color:rgba(242,242,242,0.7);
  font-size:28px;
  line-height:1;
  cursor:pointer;
  border-radius:10px;}
.v2-sheet-body{
  padding:12px;
  overflow:auto;
}
.v2-sheet-actions{
  display:flex;
  gap:10px;
  padding:12px;
  border-top:1px solid rgba(242,242,242,0.08);
}
.v2-check{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid rgba(242,242,242,0.08);
  border-radius:14px;
  background:rgba(0,0,0,0.25);
  margin-bottom:8px;
}
.v2-check label{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12px;
  color:rgba(242,242,242,0.86);
}
.v2-check input{
  width:18px;
  height:18px;
}

/* Chrome Store badge - replaces signal status in BASIC UI */
.chrome-store-badge{
  position:fixed;
  bottom:16px;
  left:12px;
  z-index:1300;
  opacity:0.6;
  transition:opacity 0.3s ease;
}
.chrome-store-badge:hover{
  opacity:1;
}
.chrome-store-badge img{
  height:50px;
  width:auto;
  display:block;
}

/* Hide in PRO UI */
body.ui-v2 .chrome-store-badge{
  display:none;
}


.server-status-indicator{
  margin-left:6px;
  font-weight:600;
}

.server-status-indicator.online{
  color:#8b5cf6;
  text-shadow:0 0 6px rgba(139,92,246,0.6);
  animation:pulse 3s ease-in-out infinite;
  position:relative;
}

.server-status-indicator.online::after{
  content:attr(data-text);
  position:absolute;
  top:0;
  left:0;
  color:#8b5cf6;
  opacity:0.1;
  animation:glitch 2s ease-in-out infinite;
}

@keyframes glitch {
  0%, 100% { transform:translate(0); }
  20% { transform:translate(-1px, 1px); }
  40% { transform:translate(-1px, -1px); }
  60% { transform:translate(1px, 1px); }
  80% { transform:translate(1px, -1px); }
}

.server-status-indicator.offline{
  color:#ff6b6b;
  text-shadow:0 0 6px rgba(255,107,107,0.6);
}

.server-status-indicator.tuning{
  color:#ffaa00;
  text-shadow:0 0 6px rgba(255,170,0,0.6);
  animation:blink 1.5s ease-in-out infinite;
}

@keyframes blink {
  0%, 50% { opacity: 0.6; }
  51%, 100% { opacity: 1; }
}

@keyframes pulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

/* Compare button */
.v2-cmp-btn{opacity:0.4;font-size:12px}
.v2-cmp-btn:hover{opacity:0.8}
.v2-cmp-btn.active{opacity:1;color:#a78bfa}

/* Compare panel */
.v2-compare-panel{
  position:fixed;
  bottom:0;left:0;right:0;
  background:rgba(10,10,10,0.95);
  backdrop-filter:blur(16px);
  border-top:1px solid rgba(168,85,247,0.3);
  padding:16px 24px;
  z-index:900;
  max-height:320px;
  overflow-y:auto;
  animation:slideUp .25s ease;
}
@keyframes slideUp{
  from{transform:translateY(100%);opacity:0}
  to{transform:translateY(0);opacity:1}
}
.v2-compare-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
  font-size:14px;
  font-weight:600;
  color:#f2f2f2;
}
.v2-compare-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.v2-compare-table th{
  text-align:center;
  padding:6px 12px;
  color:#a78bfa;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.v2-compare-table td{
  text-align:center;
  padding:6px 12px;
  border-bottom:1px solid rgba(255,255,255,0.04);
}
.v2-compare-label{
  text-align:left !important;
  color:var(--muted);
  font-weight:500;
  white-space:nowrap;
}

@media (max-width:900px){
  .v2-hero-inner{grid-template-columns:1fr}
  .v2-table{min-width:600px}
}
@media (max-width:768px){
  .v2-data{padding:8px 10px 14px}
  .v2-section-head{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  .v2-section-actions{
    justify-content:space-between;
    width:100%;
  }
  .v2-pill-tabs{
    flex:1;
    min-width:0;
  }
  .v2-pill{
    padding:6px 8px;
    font-size:9px;
  }
  .v2-filters{padding:0 10px}
  .v2-filter-pill{font-size:10px;padding:4px 8px}
  .v2-table{min-width:auto;width:100%}
  .v2-table thead th{
    padding:8px 6px;
    font-size:9px;
  }
  .v2-table tbody td{padding:8px 6px;font-size:11px}
  .v2-table-wrap{border-radius:10px;max-height:460px}
  .v2-row-actions{gap:3px}
  .v2-icon-btn{padding:4px 5px;font-size:9px}
  .v2-ghost{font-size:10px;padding:5px 8px}
}
@media (max-width:640px){
  .v2-title{font-size:28px}
  .token-panel-inner{width:100%}
  .token-grid{grid-template-columns:1fr}
  .token-iframe{height:320px}
  .v2-compare-panel{padding:12px 16px}
  .v2-compare-table{font-size:12px}
  .v2-compare-table th,.v2-compare-table td{padding:4px 8px}
}
@media (max-width:480px){
  .v2-data{padding:6px 6px 10px}
  .v2-pill{padding:5px 7px;font-size:8px;letter-spacing:0.03em}
  .v2-pill-tabs{gap:2px;padding:3px}
  .v2-table tbody td{padding:6px 4px;font-size:10px}
  .v2-table thead th{padding:6px 4px;font-size:8px}
  .v2-icon-btn{padding:3px 4px;font-size:8px}
  .v2-cmp-btn,.v2-fav-btn{font-size:10px}
  .v2-filters{gap:4px;padding:0 6px}
  .v2-token-icon,.v2-token-icon-placeholder{width:14px;height:14px}
  .v2-token-name{gap:4px}
}