/* ===== CLAW SCREENER Shared Styles ===== */

/* Animations */
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInScale{from{opacity:0;transform:scale(0.96)}to{opacity:1;transform:scale(1)}}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes countUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 4px rgba(255,68,102,0.4)}50%{box-shadow:0 0 14px rgba(255,68,102,0.9)}}
@keyframes heroGrad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes dashFlow{from{stroke-dashoffset:20}to{stroke-dashoffset:0}}
@keyframes starBounce{0%{transform:scale(1)}25%{transform:scale(1.4)}50%{transform:scale(0.9)}75%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
@keyframes toastProgress{from{width:100%}to{width:0}}
@keyframes borderGlow{0%,100%{border-color:rgba(125,108,255,0.15)}50%{border-color:rgba(20,241,149,0.3)}}
@keyframes floatUp{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes imgReveal{from{opacity:0;filter:blur(8px) saturate(0.5)}to{opacity:1;filter:blur(0) saturate(1)}}

/* Base Reset */
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:#0a0a0f;
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(100,80,255,0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 100%, rgba(20,241,149,0.04) 0%, transparent 50%),
    linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size:100% 100%, 100% 100%, 60px 60px, 60px 60px;
  font-family:'Inter',sans-serif;
  color:rgba(255,255,255,0.9);
  min-height:100vh;
}

/* Scrollbar */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:#0a0a0f}
::-webkit-scrollbar-thumb{background:#1a1a25;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#7d6cff}

/* ===== Navigation ===== */
.site-nav{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(18,18,26,0.8);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,0.06);
  padding:16px 32px;
  display:flex;
  align-items:center;
  gap:24px;
}
.nav-logo{
  font-family:'Chakra Petch',sans-serif;
  font-size:24px;
  font-weight:700;
  letter-spacing:-0.02em;
  cursor:pointer;
  user-select:none;
  text-decoration:none;
  display:flex;
  align-items:center;
  flex-shrink:0;
}
.nav-logo-icon{
  width:28px;
  height:28px;
  object-fit:contain;
  filter:drop-shadow(0 0 6px rgba(100,80,255,0.5));
  transition:filter 0.3s;
}
.nav-logo:hover .nav-logo-icon{
  filter:drop-shadow(0 0 10px rgba(20,241,149,0.6));
}
.nav-logo-claw{
  background:linear-gradient(135deg, #14f195, #6450ff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.nav-logo-screener{
  color:rgba(255,255,255,0.9);
}
.nav-links{
  display:flex;
  gap:4px;
  align-items:center;
}
.nav-link{
  padding:8px 16px;
  font-family:'DM Mono',monospace;
  font-size:13px;
  font-weight:500;
  color:rgba(255,255,255,0.5);
  background:transparent;
  border:none;
  border-radius:8px;
  cursor:pointer;
  transition:all 0.2s;
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}
.nav-link:hover{
  color:rgba(255,255,255,0.9);
  background:rgba(255,255,255,0.04);
}
.nav-link.active{
  color:#7d6cff;
  background:rgba(125,108,255,0.1);
}
.nav-right{
  display:flex;
  gap:12px;
  align-items:center;
  margin-left:auto;
}
.nav-stat-pill{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  background:#12121a;
  border:1px solid rgba(255,255,255,0.06);
  border-radius:20px;
  font-size:12px;
  font-family:'DM Mono',monospace;
}
.nav-stat-value{
  font-weight:600;
  background:linear-gradient(135deg, #14f195, #6450ff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.nav-health-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(255,255,255,0.3);
  flex-shrink:0;
}
.nav-health-dot.ok{
  background:#14f195;
  box-shadow:0 0 8px rgba(20,241,149,0.5);
}
.nav-health-dot.err{
  background:#ff4466;
  box-shadow:0 0 8px rgba(255,68,102,0.5);
  animation:glowPulse 2s infinite;
}

/* Hamburger */
.nav-hamburger{
  display:none;
  width:38px;
  height:38px;
  background:#12121a;
  border:1px solid rgba(255,255,255,0.06);
  border-radius:8px;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:rgba(255,255,255,0.7);
  flex-shrink:0;
}
.nav-mobile-menu{
  display:none;
  position:fixed;
  top:65px;
  left:0;
  right:0;
  background:rgba(18,18,26,0.97);
  backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,0.06);
  padding:16px;
  flex-direction:column;
  gap:4px;
  z-index:1001;
  animation:fadeIn 0.2s ease;
}
.nav-mobile-menu.open{
  display:flex;
}
.nav-mobile-menu .nav-link{
  padding:12px 16px;
  font-size:14px;
  border-radius:8px;
}

/* ===== Page Container ===== */
.page-container{
  max-width:1600px;
  margin:0 auto;
  padding:32px;
}

/* ===== Page Hero ===== */
.page-hero{
  text-align:center;
  padding:60px 20px 48px;
  position:relative;
}
.page-hero-title{
  font-family:'Chakra Petch',sans-serif;
  font-size:48px;
  font-weight:700;
  margin-bottom:16px;
  background:linear-gradient(135deg, #14f195, #7d6cff, #14f195);
  background-size:200% 200%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:heroGrad 6s ease infinite;
}
.page-hero-subtitle{
  font-size:16px;
  color:rgba(255,255,255,0.5);
  max-width:640px;
  margin:0 auto;
  line-height:1.6;
  font-family:'DM Mono',monospace;
}

/* ===== Cards ===== */
.card{
  background:#12121a;
  border:1px solid rgba(255,255,255,0.06);
  border-radius:12px;
  padding:24px;
  transition:all 0.3s;
}
.card:hover{
  border-color:rgba(125,108,255,0.2);
  box-shadow:0 4px 24px rgba(100,80,255,0.1);
}
.card-glow:hover{
  box-shadow:0 4px 32px rgba(100,80,255,0.15);
  transform:translateY(-2px);
}

/* ===== Chain Badges (shared) ===== */
.chain-badge{
  padding:4px 10px;
  border-radius:20px;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.05em;
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-family:'DM Mono',monospace;
}
.chain-badge.base{
  background:rgba(100,80,255,0.15);
  color:#7d6cff;
  border:1px solid rgba(100,80,255,0.2);
}
.chain-badge.solana{
  background:rgba(20,241,149,0.15);
  color:#14f195;
  border:1px solid rgba(20,241,149,0.2);
}

/* ===== Filter Bar ===== */
.filter-bar{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 20px;
  background:#12121a;
  border:1px solid rgba(255,255,255,0.06);
  border-radius:12px;
  margin-bottom:24px;
  flex-wrap:wrap;
}
.filter-pill{
  padding:8px 16px;
  font-family:'DM Mono',monospace;
  font-size:12px;
  font-weight:600;
  color:rgba(255,255,255,0.5);
  background:transparent;
  border:1px solid rgba(255,255,255,0.06);
  border-radius:20px;
  cursor:pointer;
  transition:all 0.2s;
}
.filter-pill:hover{
  color:rgba(255,255,255,0.9);
  border-color:rgba(125,108,255,0.3);
}
.filter-pill.active{
  color:#7d6cff;
  background:rgba(125,108,255,0.1);
  border-color:rgba(125,108,255,0.3);
}
.filter-select{
  background:#0a0a0f;
  border:1px solid rgba(255,255,255,0.06);
  border-radius:8px;
  color:rgba(255,255,255,0.9);
  padding:8px 12px;
  font-size:12px;
  font-family:'DM Mono',monospace;
  cursor:pointer;
  transition:all 0.2s;
}
.filter-select:focus{
  outline:none;
  border-color:#7d6cff;
  box-shadow:0 0 0 3px rgba(125,108,255,0.1);
}
.filter-input{
  background:#0a0a0f;
  border:1px solid rgba(255,255,255,0.06);
  border-radius:8px;
  color:rgba(255,255,255,0.9);
  padding:8px 12px;
  font-size:12px;
  font-family:'DM Mono',monospace;
  transition:all 0.2s;
  width:100px;
}
.filter-input:focus{
  outline:none;
  border-color:#7d6cff;
  box-shadow:0 0 0 3px rgba(125,108,255,0.1);
}
.filter-label{
  font-size:11px;
  color:rgba(255,255,255,0.5);
  text-transform:uppercase;
  letter-spacing:0.1em;
  font-weight:600;
  font-family:'DM Mono',monospace;
}
.filter-checkbox{
  width:16px;
  height:16px;
  accent-color:#7d6cff;
  cursor:pointer;
}
.filter-spacer{
  flex:1;
}
.filter-divider{
  width:1px;
  height:24px;
  background:rgba(255,255,255,0.06);
}
.filter-count-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:10px;
  background:linear-gradient(135deg, #14f195, #7d6cff);
  color:#0a0a0f;
  font-size:10px;
  font-weight:700;
  font-family:'DM Mono',monospace;
  animation:fadeInScale 0.2s ease;
}
.filter-clear-btn{
  padding:6px 14px;
  background:rgba(255,68,102,0.08);
  border:1px solid rgba(255,68,102,0.15);
  border-radius:20px;
  color:rgba(255,68,102,0.8);
  font-size:11px;
  font-weight:600;
  font-family:'DM Mono',monospace;
  cursor:pointer;
  transition:all 0.2s;
  display:flex;
  align-items:center;
  gap:4px;
  white-space:nowrap;
}
.filter-clear-btn:hover{
  background:rgba(255,68,102,0.15);
  border-color:rgba(255,68,102,0.3);
  color:#ff4466;
}

/* ===== Token Explorer Card Grid ===== */
.token-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-bottom:24px;
}
.explorer-card{
  background:rgba(18,18,26,0.7);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:16px;
  padding:22px;
  cursor:pointer;
  transition:all 0.35s cubic-bezier(0.4,0,0.2,1);
  animation:fadeIn 0.4s ease both;
  position:relative;
  overflow:hidden;
}
.explorer-card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:2px;
  background:linear-gradient(135deg, #14f195, #6450ff);
  opacity:0;
  transition:opacity 0.3s;
}
.explorer-card::after{
  content:'';
  position:absolute;
  inset:-1px;
  border-radius:16px;
  padding:1px;
  background:linear-gradient(135deg, rgba(20,241,149,0.2), rgba(125,108,255,0.2));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:opacity 0.35s;
  pointer-events:none;
}
.explorer-card:hover{
  border-color:transparent;
  box-shadow:0 8px 32px rgba(100,80,255,0.15), 0 0 0 1px rgba(125,108,255,0.1);
  transform:translateY(-3px);
}
.explorer-card:hover::before{opacity:1}
.explorer-card:hover::after{opacity:1}

/* ===== Detail Panel (inline) ===== */
.detail-panel{
  background:rgba(18,18,26,0.85);
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:20px;
  padding:36px;
  margin-bottom:24px;
  animation:fadeInScale 0.35s cubic-bezier(0.4,0,0.2,1);
  box-shadow:0 12px 48px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.04);
}
.detail-two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
}
.detail-header{
  display:flex;
  align-items:center;
  gap:20px;
  margin-bottom:28px;
  padding-bottom:20px;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.detail-back{
  padding:8px 16px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:8px;
  font-size:12px;
  color:rgba(255,255,255,0.7);
  cursor:pointer;
  transition:all 0.15s;
  font-family:'DM Mono',monospace;
  display:flex;
  align-items:center;
  gap:6px;
  text-decoration:none;
}
.detail-back:hover{
  background:rgba(125,108,255,0.1);
  border-color:rgba(125,108,255,0.3);
  color:#7d6cff;
}

/* ===== Metrics Grid ===== */
.metrics-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.metric-card{
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:12px;
  padding:16px;
  transition:all 0.25s;
}
.metric-card:hover{
  background:rgba(255,255,255,0.04);
  border-color:rgba(125,108,255,0.15);
  transform:translateY(-1px);
}
.metric-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:rgba(255,255,255,0.5);
  margin-bottom:6px;
  font-family:'DM Mono',monospace;
}
.metric-value{
  font-size:18px;
  font-weight:700;
  color:rgba(255,255,255,0.9);
  font-family:'DM Mono',monospace;
}

/* ===== Section Titles ===== */
.section-title{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:rgba(255,255,255,0.5);
  font-weight:700;
  margin-bottom:16px;
  font-family:'DM Mono',monospace;
  display:flex;
  align-items:center;
  gap:8px;
}
.section-title::before{
  content:'';
  width:3px;
  height:12px;
  background:linear-gradient(135deg, #14f195, #6450ff);
  border-radius:2px;
}

/* ===== Trust Showcase ===== */
.trust-showcase{
  display:flex;
  align-items:center;
  gap:20px;
  padding:20px;
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:12px;
}
.trust-tier-label{
  font-size:16px;
  font-weight:700;
  color:rgba(255,255,255,0.9);
  font-family:'Chakra Petch',sans-serif;
}
.trust-tier-desc{
  font-size:12px;
  color:rgba(255,255,255,0.5);
  margin-top:4px;
  font-family:'DM Mono',monospace;
}

/* ===== Breakdown Bars ===== */
.breakdown-bars{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.breakdown-item{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.breakdown-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.breakdown-label{
  font-size:12px;
  color:rgba(255,255,255,0.5);
  font-family:'DM Mono',monospace;
}
.breakdown-value{
  font-size:12px;
  font-weight:600;
  color:rgba(255,255,255,0.9);
  font-family:'DM Mono',monospace;
}
.breakdown-bar{
  height:6px;
  background:rgba(255,255,255,0.04);
  border-radius:20px;
  overflow:hidden;
}
.breakdown-fill{
  height:100%;
  background:linear-gradient(135deg, #14f195, #6450ff);
  border-radius:20px;
  transition:width 0.6s ease;
}

/* ===== Info Grid ===== */
.info-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.info-item{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.info-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:rgba(255,255,255,0.5);
  font-family:'DM Mono',monospace;
}
.info-value{
  font-size:14px;
  color:rgba(255,255,255,0.9);
  word-break:break-all;
  display:flex;
  align-items:center;
  gap:8px;
}
.info-value.mono{
  font-family:'DM Mono',monospace;
  font-size:12px;
}

/* ===== Timeline ===== */
.timeline{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.timeline-item{
  padding:16px;
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.06);
  border-left:3px solid #7d6cff;
  border-radius:8px;
  cursor:pointer;
  transition:all 0.15s;
}
.timeline-item:hover{
  background:rgba(125,108,255,0.05);
  border-left-color:#14f195;
}
.timeline-header{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:6px;
  flex-wrap:wrap;
}
.timeline-agent{
  font-weight:600;
  color:rgba(255,255,255,0.9);
  font-family:'Chakra Petch',sans-serif;
  font-size:13px;
}
.timeline-pill{
  padding:2px 8px;
  border-radius:20px;
  font-size:10px;
  font-weight:600;
  background:rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.5);
  font-family:'DM Mono',monospace;
  text-transform:uppercase;
  letter-spacing:0.05em;
}
.timeline-date{
  font-size:11px;
  color:rgba(255,255,255,0.5);
  margin-left:auto;
  font-family:'DM Mono',monospace;
}
.timeline-content{
  font-size:12px;
  color:rgba(255,255,255,0.5);
  line-height:1.5;
  font-family:'DM Mono',monospace;
}

/* ===== Toasts ===== */
.toast-container{
  position:fixed;
  bottom:24px;
  right:24px;
  z-index:2000;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.toast{
  padding:14px 20px;
  background:rgba(18,18,26,0.95);
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,0.08);
  border-left:3px solid #7d6cff;
  border-radius:14px;
  min-width:300px;
  max-width:420px;
  animation:slideInRight 0.35s cubic-bezier(0.4,0,0.2,1);
  box-shadow:0 12px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.03);
  display:flex;
  align-items:center;
  gap:12px;
  font-family:'DM Mono',monospace;
  position:relative;
  overflow:hidden;
  transition:opacity 0.3s, transform 0.3s;
}
.toast.success{border-left-color:#14f195}
.toast.error{border-left-color:#ff4466}
.toast.info{border-left-color:#7d6cff}
.toast-icon{width:18px;height:18px;flex-shrink:0}
.toast.success .toast-icon{color:#14f195}
.toast.error .toast-icon{color:#ff4466}
.toast.info .toast-icon{color:#7d6cff}
.toast-message{font-size:13px;color:rgba(255,255,255,0.9);flex:1}
.toast-progress{
  position:absolute;
  bottom:0;left:0;
  height:2px;
  background:linear-gradient(90deg, #14f195, #7d6cff);
  animation:toastProgress 3s linear forwards;
  border-radius:0 0 0 14px;
}
.toast.success .toast-progress{background:linear-gradient(90deg, #14f195, #34d399)}
.toast.error .toast-progress{background:linear-gradient(90deg, #ff4466, #ff6b6b)}
.toast.info .toast-progress{background:linear-gradient(90deg, #7d6cff, #a78bfa)}

/* ===== Pagination ===== */
.pagination{
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#12121a;
  border:1px solid rgba(255,255,255,0.06);
  border-radius:12px;
  font-family:'DM Mono',monospace;
}
.pagination-info{font-size:12px;color:rgba(255,255,255,0.5)}
.pagination-center{display:flex;gap:6px}
.page-btn{
  min-width:36px;
  height:36px;
  padding:0 12px;
  background:#0a0a0f;
  border:1px solid rgba(255,255,255,0.06);
  border-radius:8px;
  color:rgba(255,255,255,0.9);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:all 0.15s;
  font-family:'DM Mono',monospace;
  display:flex;
  align-items:center;
  justify-content:center;
}
.page-btn:hover:not(:disabled):not(.active){
  background:#1a1a25;
  border-color:rgba(125,108,255,0.3);
  color:#7d6cff;
}
.page-btn.active{
  background:rgba(125,108,255,0.15);
  border-color:rgba(125,108,255,0.3);
  color:#7d6cff;
}
.page-btn:disabled{opacity:0.3;cursor:not-allowed}

/* ===== Buttons ===== */
.btn-gradient{
  padding:12px 28px;
  background:linear-gradient(135deg, #14f195, #7d6cff);
  border:none;
  border-radius:8px;
  color:#0a0a0f;
  font-size:14px;
  font-weight:700;
  font-family:'DM Mono',monospace;
  cursor:pointer;
  transition:all 0.2s;
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
}
.btn-gradient:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 20px rgba(20,241,149,0.3);
}
.btn-outline{
  padding:12px 28px;
  background:transparent;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:8px;
  color:rgba(255,255,255,0.9);
  font-size:14px;
  font-weight:600;
  font-family:'DM Mono',monospace;
  cursor:pointer;
  transition:all 0.2s;
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
}
.btn-outline:hover{
  border-color:rgba(125,108,255,0.4);
  background:rgba(125,108,255,0.05);
  color:#7d6cff;
}
.copy-btn{
  padding:4px 10px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:8px;
  font-size:11px;
  color:rgba(255,255,255,0.5);
  cursor:pointer;
  transition:all 0.15s;
  font-family:'DM Mono',monospace;
}
.copy-btn:hover{
  background:rgba(125,108,255,0.1);
  border-color:rgba(125,108,255,0.3);
  color:#7d6cff;
}

/* ===== Podium ===== */
.podium-section{
  display:flex;
  justify-content:center;
  gap:24px;
  margin-bottom:40px;
  align-items:flex-end;
  padding-top:20px;
}
.podium-card{
  background:rgba(18,18,26,0.8);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:20px;
  padding:28px 24px;
  text-align:center;
  width:260px;
  transition:all 0.35s cubic-bezier(0.4,0,0.2,1);
  position:relative;
  overflow:hidden;
}
.podium-card::after{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 0%, rgba(255,255,255,0.03) 0%, transparent 60%);
  pointer-events:none;
}
.podium-card:hover{
  border-color:rgba(125,108,255,0.2);
  box-shadow:0 8px 40px rgba(100,80,255,0.15);
  transform:translateY(-6px);
}
.podium-card.gold{border-top:3px solid #f0b90b}
.podium-card.silver{border-top:3px solid #c0c0c0}
.podium-card.bronze{border-top:3px solid #cd7f32}
.podium-card.gold .podium-rank{color:#f0b90b}
.podium-card.silver .podium-rank{color:#c0c0c0}
.podium-card.bronze .podium-rank{color:#cd7f32}
.podium-rank{
  font-size:28px;
  font-weight:700;
  font-family:'Chakra Petch',sans-serif;
  margin-bottom:12px;
}
.podium-avatar{
  width:72px;
  height:72px;
  border-radius:50%;
  margin:0 auto 12px;
  display:block;
  border:3px solid transparent;
}
.podium-card.gold .podium-avatar{border-color:#f0b90b;box-shadow:0 0 16px rgba(240,185,11,0.3)}
.podium-card.silver .podium-avatar{border-color:#c0c0c0;box-shadow:0 0 16px rgba(192,192,192,0.2)}
.podium-card.bronze .podium-avatar{border-color:#cd7f32;box-shadow:0 0 16px rgba(205,127,50,0.2)}
.podium-name{
  font-size:16px;
  font-weight:700;
  font-family:'Chakra Petch',sans-serif;
  color:rgba(255,255,255,0.9);
  margin-bottom:4px;
}
.podium-meta{
  font-size:12px;
  color:rgba(255,255,255,0.5);
  font-family:'DM Mono',monospace;
  margin-bottom:12px;
}

/* ===== Agent Row ===== */
.agent-row{
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px 20px;
  background:rgba(18,18,26,0.7);
  backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:14px;
  cursor:pointer;
  transition:all 0.25s cubic-bezier(0.4,0,0.2,1);
  margin-bottom:8px;
  animation:fadeIn 0.4s ease both;
}
.agent-row:hover{
  border-color:rgba(125,108,255,0.2);
  background:rgba(26,26,37,0.9);
  box-shadow:0 4px 20px rgba(100,80,255,0.08);
  transform:translateX(4px);
}
.agent-row-rank{
  font-size:18px;
  font-weight:700;
  font-family:'Chakra Petch',sans-serif;
  color:rgba(255,255,255,0.3);
  width:36px;
  text-align:center;
  flex-shrink:0;
}
.agent-row-avatar{
  width:40px;
  height:40px;
  border-radius:50%;
  flex-shrink:0;
}
.agent-row-info{
  flex:1;
  min-width:0;
}
.agent-row-name{
  font-size:14px;
  font-weight:600;
  font-family:'Chakra Petch',sans-serif;
  color:rgba(255,255,255,0.9);
  display:flex;
  align-items:center;
  gap:6px;
}
.agent-row-desc{
  font-size:11px;
  color:rgba(255,255,255,0.5);
  font-family:'DM Mono',monospace;
  max-width:320px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.agent-row-stats{
  display:flex;
  gap:20px;
  align-items:center;
}
.agent-row-stat{
  text-align:center;
}
.agent-row-stat-label{
  font-size:10px;
  color:rgba(255,255,255,0.3);
  text-transform:uppercase;
  letter-spacing:0.05em;
  font-family:'DM Mono',monospace;
}
.agent-row-stat-value{
  font-size:14px;
  font-weight:600;
  font-family:'DM Mono',monospace;
  color:rgba(255,255,255,0.9);
}
.karma-high{color:#14f195}
.karma-medium{color:#f0b90b}

/* ===== Pipeline Steps ===== */
.pipeline{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  margin:48px 0;
  flex-wrap:wrap;
}
.pipeline-step{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding:24px 20px;
  background:#12121a;
  border:1px solid rgba(255,255,255,0.06);
  border-radius:12px;
  width:180px;
  text-align:center;
  position:relative;
  transition:all 0.3s;
}
.pipeline-step:hover{
  border-color:rgba(125,108,255,0.2);
  box-shadow:0 4px 24px rgba(100,80,255,0.1);
  transform:translateY(-2px);
}
.pipeline-step-icon{
  width:40px;
  height:40px;
  background:linear-gradient(135deg, rgba(20,241,149,0.15), rgba(125,108,255,0.15));
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#14f195;
}
.pipeline-step-num{
  font-size:10px;
  font-weight:700;
  color:rgba(255,255,255,0.3);
  font-family:'DM Mono',monospace;
  letter-spacing:0.1em;
}
.pipeline-step-title{
  font-size:13px;
  font-weight:600;
  color:rgba(255,255,255,0.9);
  font-family:'DM Mono',monospace;
}
.pipeline-connector{
  width:40px;
  height:2px;
  background:linear-gradient(90deg, #14f195, #7d6cff);
  flex-shrink:0;
}

/* ===== Footer ===== */
.site-footer{
  border-top:1px solid rgba(255,255,255,0.06);
  padding:40px 32px;
  margin-top:60px;
}
.footer-inner{
  max-width:1600px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
}
.footer-brand{
  font-family:'Chakra Petch',sans-serif;
  font-size:18px;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:8px;
}
.footer-logo-icon{
  width:24px;
  height:24px;
  object-fit:contain;
  filter:drop-shadow(0 0 4px rgba(100,80,255,0.4));
}
.footer-brand-claw{
  background:linear-gradient(135deg, #14f195, #6450ff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.footer-brand-screener{color:rgba(255,255,255,0.9)}
.footer-links{
  display:flex;
  gap:24px;
}
.footer-link{
  font-size:13px;
  color:rgba(255,255,255,0.5);
  text-decoration:none;
  font-family:'DM Mono',monospace;
  transition:color 0.2s;
}
.footer-link:hover{color:#7d6cff}
.footer-copy{
  font-size:12px;
  color:rgba(255,255,255,0.3);
  font-family:'DM Mono',monospace;
}

/* ===== Watchlist Star ===== */
.watchlist-star{
  font-size:20px;
  cursor:pointer;
  color:rgba(255,255,255,0.15);
  transition:color 0.2s, transform 0.15s, filter 0.2s;
  user-select:none;
  line-height:1;
  flex-shrink:0;
}
.watchlist-star:hover{
  color:#f0b90b;
  transform:scale(1.2);
  filter:drop-shadow(0 0 6px rgba(240,185,11,0.4));
}
.watchlist-star.watched{
  color:#f0b90b;
  filter:drop-shadow(0 0 4px rgba(240,185,11,0.3));
}
.watchlist-star.bounce{
  animation:starBounce 0.4s ease;
}

/* ===== Skeleton ===== */
.skeleton{
  height:20px;
  background:linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s ease-in-out infinite;
  border-radius:8px;
}
.skeleton-circle{
  border-radius:50%;
}

/* ===== Token Image ===== */
.token-img{
  width:36px;
  height:36px;
  border-radius:50%;
  flex-shrink:0;
  animation:imgReveal 0.4s ease both;
  object-fit:cover;
  background:#12121a;
}
.token-img-lg{
  width:56px;
  height:56px;
}
.token-img-xl{
  width:72px;
  height:72px;
}

/* ===== High Trust Glow ===== */
.explorer-card.high-trust{
  border-color:rgba(20,241,149,0.12);
}
.explorer-card.high-trust::before{
  background:linear-gradient(135deg, #14f195, #34d399);
  opacity:0.6;
}
.explorer-card.high-trust:hover{
  box-shadow:0 8px 32px rgba(20,241,149,0.12), 0 0 0 1px rgba(20,241,149,0.1);
}

/* ===== Suspicious Warning Glow ===== */
.explorer-card.suspicious{
  border-color:rgba(255,68,102,0.1);
}
.explorer-card.suspicious::before{
  background:linear-gradient(135deg, #ff4466, #ff6b6b);
  opacity:0.4;
}
.explorer-card.suspicious:hover{
  box-shadow:0 8px 32px rgba(255,68,102,0.12), 0 0 0 1px rgba(255,68,102,0.1);
}

/* ===== Pipeline Steps (enhanced) ===== */
.pipeline-step-icon{
  width:44px;
  height:44px;
  background:linear-gradient(135deg, rgba(20,241,149,0.15), rgba(125,108,255,0.15));
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#14f195;
  transition:all 0.3s;
}
.pipeline-step:hover .pipeline-step-icon{
  background:linear-gradient(135deg, rgba(20,241,149,0.25), rgba(125,108,255,0.25));
  box-shadow:0 4px 16px rgba(20,241,149,0.15);
  transform:scale(1.05);
}

/* ===== Page transitions ===== */
.page-container{
  animation:fadeIn 0.3s ease;
}

/* ===== Empty state ===== */
.empty-state-icon{
  width:64px;
  height:64px;
  color:rgba(255,255,255,0.06);
  margin:0 auto 24px;
  display:block;
  animation:floatUp 3s ease-in-out infinite;
}

/* ===== Responsive ===== */
@media(max-width:1024px){
  .token-grid{grid-template-columns:repeat(2,1fr)}
  .metrics-grid{grid-template-columns:repeat(2,1fr)}
  .detail-two-col{grid-template-columns:1fr}
  .podium-section{gap:16px}
  .podium-card{width:220px;padding:24px 16px}
  .pipeline{gap:0}
  .nav-links .nav-link span.nav-link-text{display:none}
}
@media(max-width:768px){
  .site-nav{padding:12px 20px;gap:12px}
  .page-container{padding:20px}
  .page-hero{padding:40px 16px 32px}
  .page-hero-title{font-size:36px}
  .token-grid{grid-template-columns:1fr}
  .metrics-grid{grid-template-columns:1fr}
  .info-grid{grid-template-columns:1fr}
  .podium-section{flex-direction:column;align-items:center}
  .podium-card{width:100%;max-width:320px}
  .podium-card.gold{order:-1}
  .agent-row-stats{display:none}
  .pipeline{flex-direction:column;gap:0}
  .pipeline-connector{width:2px;height:24px}
  .nav-links{display:none}
  .nav-hamburger{display:flex}
  .filter-bar{flex-direction:column;align-items:stretch}
  .filter-divider{width:100%;height:1px}
  .footer-inner{flex-direction:column;text-align:center}
  .footer-links{flex-wrap:wrap;justify-content:center}
}
@media(max-width:480px){
  .page-container{padding:16px}
  .page-hero-title{font-size:28px}
  .page-hero-subtitle{font-size:14px}
  .podium-card{padding:20px 12px}
  .podium-avatar{width:56px;height:56px}
  .pagination{flex-direction:column;gap:12px}
}

/* ===== BEAUTIFICATION FEATURES ===== */

/* 2. Scroll Reveal */
[data-reveal]{
  opacity:0;
  transform:translateY(24px);
  transition:opacity 0.6s ease, transform 0.6s ease;
}
[data-reveal].revealed{
  opacity:1;
  transform:translateY(0);
}
[data-reveal="left"]{transform:translateX(-24px)}
[data-reveal="left"].revealed{transform:translateX(0)}
[data-reveal="right"]{transform:translateX(24px)}
[data-reveal="right"].revealed{transform:translateX(0)}
[data-reveal="scale"]{transform:scale(0.95)}
[data-reveal="scale"].revealed{transform:scale(1)}

/* 3. 3D Tilt Card */
.tilt-card{
  transition:transform 0.15s ease;
  transform-style:preserve-3d;
  will-change:transform;
}

/* 4. Animated Rotating Gradient Border */
@property --border-angle{
  syntax:'<angle>';
  initial-value:0deg;
  inherits:false;
}
@keyframes borderRotate{to{--border-angle:360deg}}
.gradient-border-spin{
  position:relative;
}
.gradient-border-spin::before{
  content:'';
  position:absolute;
  inset:-2px;
  border-radius:18px;
  background:conic-gradient(from var(--border-angle), #14f195, #7d6cff, #ff4466, #f0b90b, #14f195);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  padding:2px;
  animation:borderRotate 4s linear infinite;
  opacity:0;
  transition:opacity 0.3s;
  pointer-events:none;
  z-index:-1;
}
.gradient-border-spin:hover::before{
  opacity:1;
}
.high-trust.gradient-border-spin::before{
  opacity:0.5;
}

/* 5. Tooltips (pure CSS) */
.tooltip{position:relative}
.tooltip::after{
  content:attr(data-tooltip);
  position:absolute;
  bottom:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%) scale(0.85);
  background:#1a1a25;
  color:rgba(255,255,255,0.9);
  padding:6px 12px;
  border-radius:8px;
  font-size:11px;
  font-family:'DM Mono',monospace;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  transition:all 0.2s cubic-bezier(0.175,0.885,0.32,1.275);
  border:1px solid rgba(255,255,255,0.1);
  box-shadow:0 4px 16px rgba(0,0,0,0.4);
  z-index:100;
}
.tooltip:hover::after{
  opacity:1;
  transform:translateX(-50%) scale(1);
}

/* 6. Sparkline Container */
.sparkline-wrap{display:inline-flex;align-items:center;vertical-align:middle}

/* 7. Scroll-to-Top Button */
.scroll-top-btn{
  position:fixed;
  bottom:24px;
  right:24px;
  width:44px;
  height:44px;
  border-radius:50%;
  background:rgba(125,108,255,0.15);
  border:1px solid rgba(125,108,255,0.3);
  color:#7d6cff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  opacity:0;
  transform:translateY(20px);
  transition:all 0.3s ease;
  z-index:1000;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.scroll-top-btn.visible{
  opacity:1;
  transform:translateY(0);
}
.scroll-top-btn:hover{
  background:rgba(125,108,255,0.3);
  transform:translateY(-2px);
  box-shadow:0 4px 20px rgba(125,108,255,0.3);
}

/* 8. Animated Nav Indicator (sliding underline) */
.nav-link{position:relative}
.nav-link::after{
  content:'';
  position:absolute;
  bottom:-2px;
  left:50%;
  width:0;
  height:2px;
  background:linear-gradient(90deg,#14f195,#7d6cff);
  border-radius:2px;
  transition:width 0.3s ease, left 0.3s ease;
}
.nav-link:hover::after,
.nav-link.active::after{
  width:100%;
  left:0;
}

/* 9. Better Mobile Drawer */
.nav-mobile-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.6);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  z-index:998;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.3s;
}
.nav-mobile-backdrop.open{
  opacity:1;
  pointer-events:auto;
}
.nav-mobile-menu{
  right:-280px;
  width:280px;
  transition:right 0.3s cubic-bezier(0.22,1,0.36,1);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.nav-mobile-menu.open{
  right:0;
}

/* 10. Footer Wave Divider */
.footer-wave{
  width:100%;
  height:60px;
  overflow:hidden;
  margin-bottom:-1px;
}
.footer-wave svg{
  display:block;
  width:100%;
  height:100%;
}

/* 11. Image Blur-Up */
.img-blur-up{
  filter:blur(8px);
  opacity:0.6;
  transition:filter 0.5s ease, opacity 0.5s ease;
}
.img-blur-up.loaded{
  filter:blur(0);
  opacity:1;
}

/* 12. Podium Glow Effects */
.podium-card.gold{
  box-shadow:0 0 40px rgba(240,185,11,0.15), 0 0 80px rgba(240,185,11,0.05);
}
.podium-card.gold::before{
  content:'';
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  background:conic-gradient(from var(--border-angle,0deg), #f0b90b, #ff6600, #f0b90b);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  padding:2px;
  animation:borderRotate 3s linear infinite;
  z-index:-1;
}
.podium-card.silver{
  box-shadow:0 0 30px rgba(192,192,192,0.1);
}
.podium-card.bronze{
  box-shadow:0 0 30px rgba(205,127,50,0.1);
}

/* 13. Particle Styles */
.particle-container{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}
.particle{
  position:absolute;
  width:2px;
  height:2px;
  background:rgba(125,108,255,0.4);
  border-radius:50%;
  animation:particleFloat linear infinite;
}
.particle:nth-child(odd){background:rgba(20,241,149,0.3)}
@keyframes particleFloat{
  0%{transform:translateY(0) translateX(0);opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{transform:translateY(-100vh) translateX(20px);opacity:0}
}

/* 14. Count-up visible class */
.count-up{
  transition:opacity 0.3s;
}

/* 15. Card press/click feedback */
.explorer-card:active, .agent-row:active, .podium-card:active{
  transform:scale(0.98);
  transition:transform 0.1s;
}

/* 16. Focus visible styles for accessibility */
.filter-pill:focus-visible, .page-btn:focus-visible, .btn-gradient:focus-visible, .btn-outline:focus-visible{
  outline:2px solid #7d6cff;
  outline-offset:2px;
}

/* ===== BEAUTIFICATION WAVE 2 ===== */

/* 17. Animated Number Counter Glow */
@keyframes countGlow{0%{text-shadow:none}50%{text-shadow:0 0 12px rgba(20,241,149,0.4)}100%{text-shadow:none}}
.count-glow{animation:countGlow 0.6s ease}

/* 18. Detail Panel Slide-In Transition */
@keyframes slideInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes backdropFadeIn{from{opacity:0}to{opacity:1}}
.detail-panel-animate{animation:slideInUp 0.4s cubic-bezier(0.22,1,0.36,1)}
.detail-backdrop{
  position:fixed;inset:0;background:rgba(10,10,15,0.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  z-index:50;animation:backdropFadeIn 0.3s ease;
}

/* 19. Grid/List View Transition */
.token-grid.view-transitioning{
  opacity:0.3;
  transform:scale(0.98);
  transition:opacity 0.2s ease, transform 0.2s ease;
}
.token-grid.view-ready{
  opacity:1;
  transform:scale(1);
  transition:opacity 0.3s ease, transform 0.3s ease;
}

/* 20. Filter Change Card Animation */
@keyframes cardFadeIn{from{opacity:0;transform:translateY(12px) scale(0.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.card-enter{animation:cardFadeIn 0.35s cubic-bezier(0.22,1,0.36,1) both}

/* 21. Data Refresh Pulse */
@keyframes refreshPulse{0%{box-shadow:0 0 0 0 rgba(20,241,149,0.3)}70%{box-shadow:0 0 0 8px rgba(20,241,149,0)}100%{box-shadow:0 0 0 0 rgba(20,241,149,0)}}
.refresh-pulse{animation:refreshPulse 0.6s ease}

/* 22. Typewriter Cursor */
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.typewriter-cursor::after{content:'|';animation:blink 0.8s step-end infinite;color:#7d6cff;font-weight:400}

/* 23. Staggered Card Entrance */
.stagger-enter{opacity:0;transform:translateY(16px);animation:cardFadeIn 0.4s cubic-bezier(0.22,1,0.36,1) both}
.stagger-enter:nth-child(1){animation-delay:0ms}
.stagger-enter:nth-child(2){animation-delay:50ms}
.stagger-enter:nth-child(3){animation-delay:100ms}
.stagger-enter:nth-child(4){animation-delay:150ms}
.stagger-enter:nth-child(5){animation-delay:200ms}
.stagger-enter:nth-child(6){animation-delay:250ms}
.stagger-enter:nth-child(7){animation-delay:300ms}
.stagger-enter:nth-child(8){animation-delay:350ms}
.stagger-enter:nth-child(9){animation-delay:400ms}
.stagger-enter:nth-child(10){animation-delay:450ms}
.stagger-enter:nth-child(11){animation-delay:500ms}
.stagger-enter:nth-child(12){animation-delay:550ms}
.stagger-enter:nth-child(n+13){animation-delay:600ms}

/* 24. Suspicious Token Red Pulse */
@keyframes suspiciousPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,68,102,0)}50%{box-shadow:0 0 20px 2px rgba(255,68,102,0.15)}}
.explorer-card.suspicious{animation:cardFadeIn 0.4s cubic-bezier(0.22,1,0.36,1) both, suspiciousPulse 3s ease-in-out 0.5s infinite}

/* 25. Watchlist Star Celebration Burst */
@keyframes starBurst{0%{box-shadow:0 0 0 0 rgba(240,185,11,0.6)}50%{box-shadow:0 0 0 12px rgba(240,185,11,0)}100%{box-shadow:0 0 0 0 rgba(240,185,11,0)}}
@keyframes starGlow{0%{filter:drop-shadow(0 0 0px rgba(240,185,11,0))}50%{filter:drop-shadow(0 0 10px rgba(240,185,11,0.8))}100%{filter:drop-shadow(0 0 4px rgba(240,185,11,0.3))}}
.watchlist-star.celebrating{animation:starGlow 0.5s ease}
.watchlist-star.celebrating::before{
  content:'';position:absolute;inset:-6px;border-radius:50%;
  animation:starBurst 0.5s ease;pointer-events:none;
}

/* 26. About Page Animated Connectors */
@keyframes drawLine{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.animated-connector line{
  stroke-dasharray:100;
  stroke-dashoffset:100;
}
.animated-connector.revealed line{
  animation:drawLine 1s ease forwards;
}

/* 27. Lookup Result Slide-Up Reveal */
@keyframes slideUpReveal{from{opacity:0;transform:translateY(20px) scale(0.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.result-card{animation:slideUpReveal 0.4s cubic-bezier(0.22,1,0.36,1)}

/* 28. Gradient Scrollbar Thumb */
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, #7d6cff, #14f195);
  border-radius:3px;
}
::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, #9d8cff, #34f1b5);
}

/* 29. Active Filter Pill Glow */
.filter-pill.active{
  box-shadow:0 0 12px rgba(125,108,255,0.25);
  border-color:rgba(125,108,255,0.5);
}

/* 30. Animated Empty States (bobbing) */
@keyframes emptyBob{0%,100%{transform:translateY(0) rotate(0deg)}25%{transform:translateY(-6px) rotate(2deg)}75%{transform:translateY(-3px) rotate(-1deg)}}
.empty-state-icon{animation:emptyBob 4s ease-in-out infinite}

/* 31. Hover Card Scale Preview */
.explorer-card:hover{transform:translateY(-4px) scale(1.015)}
.agent-row:hover{transform:translateX(6px) scale(1.005)}

/* 32. Page Load Progress Bar */
@keyframes progressSlide{0%{width:0}50%{width:70%}100%{width:100%}}
.page-progress{
  position:fixed;top:0;left:0;height:2px;z-index:9999;
  background:linear-gradient(90deg,#14f195,#7d6cff,#ff4466);
  animation:progressSlide 1.5s ease forwards;
  border-radius:0 2px 2px 0;
  box-shadow:0 0 8px rgba(20,241,149,0.4);
}
.page-progress.done{opacity:0;transition:opacity 0.3s ease 0.2s}

/* No-data placeholders */
.no-data{color:rgba(255,255,255,0.2);font-style:italic}
.new-listing-cell{
  color:rgba(125,108,255,0.6);
  font-family:'DM Mono',monospace;
  font-size:11px;
  font-style:italic;
}
.new-badge{
  background:rgba(125,108,255,0.15);
  color:#9d8cff;
  border:1px solid rgba(125,108,255,0.25);
  padding:2px 8px;
  font-size:10px;
  font-weight:700;
  border-radius:20px;
  font-family:'DM Mono',monospace;
  letter-spacing:0.05em;
  margin-left:4px;
}