:root{
	/* Softer pastel palette */
			--bg-1: #05060a; /* near-black base */
			--bg-2: #071021; /* very deep slate */
			--card: rgba(255,255,255,0.02);
			--glass: rgba(255,255,255,0.01);
			--muted: rgba(180,200,220,0.85);
			--accent: #00d4ff; /* electric cyan */
			--accent-2: #8a4cff; /* vivid purple */
			--gold: #f4c15b; /* subtle warm accent */
			/* scrollbar colors are defined later for clarity (theme-aware) */

	/* light theme defaults (overridden in .theme-light) */
	--light-bg: #fbfcff;
	--light-card: #ffffff;
	--light-text: #0b2540;
	--light-muted: rgba(11,37,64,0.55);
	/* segmented control text vars: default assumes dark theme (white on colored pill) */
	--seg-text-active: #ffffff;
	--seg-active-bg: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
}
*{box-sizing:border-box;font-family:Inter,system-ui,Segoe UI,Roboto,'Helvetica Neue',Arial}
body{margin:0;min-height:100vh;color:#e6eef8;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* while the document has .loading, hide interactive content beneath the loader */
.loading body > .wrap{opacity:0;visibility:hidden;pointer-events:none;user-select:none}
.loading .site-header, .loading main, .loading .site-footer{opacity:0;visibility:hidden}
.loading *{scroll-behavior:auto}
.loading{overflow:hidden}
.loading body{overflow:hidden}
.loading .wrap{filter:blur(6px) saturate(.95);transform:scale(.998)}
.theme-light.loading .wrap{filter:blur(4px) saturate(1)}

/* high-quality layered background: subtle radial lights + smooth linear base */
body{
	background-color: var(--bg-1);
	background-image:
		radial-gradient(700px 300px at 8% 12%, rgba(124,58,237,0.10), transparent 10%),
		radial-gradient(500px 220px at 90% 80%, rgba(6,182,212,0.06), transparent 8%),
		linear-gradient(180deg, rgba(10,14,30,0.92), rgba(7,16,32,0.98));
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-size:cover;
}

.wrap{max-width:960px;margin:26px auto;padding:12px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.012), rgba(255,255,255,0.008));box-shadow:0 6px 30px rgba(2,6,23,0.28)}
header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.controls-box{display:flex;align-items:center;justify-content:space-between;flex:1 1 0;min-width:0}
	.header-actions{display:flex;align-items:center;gap:8px}
h1{font-size:20px;margin:0}
.controls{display:flex;gap:10px;align-items:center}
.controls input,.controls select{padding:10px 12px;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,0.015),transparent);border:1px solid rgba(255,255,255,0.06);color:inherit;min-width:180px;box-shadow:inset 0 -6px 18px rgba(2,6,23,0.02)}
.controls button{padding:8px 10px;border-radius:10px;background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted);font-weight:700;cursor:pointer;backdrop-filter:blur(4px)}

.filter-card{display:inline-flex;align-items:center;padding:8px 10px;border-radius:10px;background:transparent;border:1px solid rgba(255,255,255,0.04);box-shadow:none;gap:8px}
.sr-only{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.list{display:flex;flex-direction:column;gap:14px}
.card{display:flex;align-items:center;gap:12px;padding:10px;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,0.014),rgba(255,255,255,0.006));border:1px solid rgba(255,255,255,0.035);position:relative;overflow:visible;transition:transform 160ms cubic-bezier(.2,.9,.2,1),box-shadow 140ms;will-change:transform,opacity}
.list .card{transform-origin:top left}
	.avatar{width:52px;height:52px;border-radius:8px;object-fit:cover;flex:0 0 52px;border:1px solid rgba(255,255,255,0.04);box-shadow:0 6px 14px rgba(2,6,23,0.28);backface-visibility:hidden}
	.avatar-ring{width:58px;height:58px;border-radius:8px;display:grid;place-items:center;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:3px;position:relative}
	.avatar-ring{width:58px;height:58px;--ring-padding:3px;--ring-radius:8px;border-radius:var(--ring-radius);display:grid;place-items:center;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);padding:var(--ring-padding);position:relative;overflow:hidden;transition:box-shadow 160ms, border-color 160ms, background 160ms}
	.avatar{position:absolute;inset:calc(-1 * var(--ring-padding) - 2px);object-fit:cover;object-position:center center;display:block;border-radius:calc(var(--ring-radius) - var(--ring-padding)) !important;border:0;margin:0;padding:0;z-index:1}

/* ensure avatars are crisp on retina */
.avatar, .logo-img{image-rendering:optimizeQuality;image-rendering:crisp-edges;display:block}

/* draw a subtle inner frame above the image using an inset box-shadow so corners stay covered */
.avatar-ring::after{content:"";position:absolute;inset:0;border-radius:var(--ring-radius);z-index:4;pointer-events:none;box-shadow:inset 0 0 0 var(--ring-padding) rgba(255,255,255,0.04)}

/* ensure overlay sits beneath the image but above the background */
.avatar-ring::before{z-index:1}
.avatar-ring .avatar-fallback{z-index:4}
.avatar-ring img{z-index:1;position:relative;width:100%;height:100%;object-fit:cover}

/* ensure header logo image is perfectly centered and covers */
.site-logo .logo-img{object-position:center center}

/* Light theme: make avatar ring gradient and border more visible */
.theme-light .avatar-ring{background:linear-gradient(180deg, rgba(10,24,40,0.06), rgba(10,24,40,0.02));border:1px solid rgba(11,37,64,0.06);box-shadow:0 8px 20px rgba(11,37,64,0.06)}
.theme-light .avatar{border-color:rgba(11,37,64,0.08)}

/* Gradient overlay for avatars: subtle color wash over the image for a premium look */
.avatar-ring::before{
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	mix-blend-mode: overlay;
	background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(6,182,212,0.06));
	opacity: 0.38;
	transition: opacity 220ms ease, transform 220ms ease;
}

/* Make overlay subtler on hover and slightly shift for a lively effect */
.site-logo:hover .avatar-ring::before,
.card:hover .avatar-ring::before{opacity:0.55;transform:translateY(-4px)}

/* Light theme needs a darker/softer overlay so avatar images remain readable */
.theme-light .avatar-ring::before{
	background: linear-gradient(135deg, rgba(10,24,40,0.06), rgba(11,37,64,0.04));
	mix-blend-mode: normal;
	opacity: 0.28;
}

/* If the image itself is missing and fallback shows, keep the fallback visible with gradient tint disabled */
.avatar-ring .avatar-fallback{position:absolute;inset:0;display:grid;place-items:center;z-index:4}
.avatar-ring img{display:block;position:relative;z-index:2}

/* Avatar loader (shows while image is loading) */
.avatar-loader{
	position:absolute;inset:0;display:grid;place-items:center;z-index:5;pointer-events:none;opacity:1;transition:opacity 180ms ease, transform 180ms ease;
}
.avatar-loader .dot{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,0.14);border-top-color:rgba(255,255,255,0.6);animation:spin 900ms linear infinite}
.avatar.loaded + .avatar-loader{opacity:0;transform:scale(0.9);visibility:hidden}
.avatar:not(.loaded) + .avatar-loader{opacity:1;visibility:visible}
@keyframes spin{to{transform:rotate(360deg)}}

/* Rank badge overlay placed on avatar-ring */
.rank-badge{position:absolute;left:-6px;top:-6px;min-width:28px;height:28px;border-radius:6px;display:grid;place-items:center;font-weight:900;color:#fff;background:transparent;box-shadow:none;border:0;font-size:14px;padding:0;transition:transform 360ms cubic-bezier(.2,.9,.2,1),box-shadow 360ms}
.rank-badge.first{transform:rotate(-18deg);color:var(--gold);text-shadow:0 2px 8px rgba(246,200,76,0.14);font-size:20px;width:34px;height:34px;border-radius:8px;display:grid;place-items:center;background:linear-gradient(180deg,rgba(255,250,230,0.12),rgba(255,245,200,0.04));box-shadow:0 10px 30px rgba(246,200,76,0.08)}
.rank-badge.small{position:absolute;left:6px;top:6px;min-width:22px;height:22px;border-radius:5px;display:grid;place-items:center;background:#ffffff;color:var(--bg-2);padding:0 6px;font-weight:800;font-size:12px;box-shadow:0 6px 18px rgba(2,6,23,0.12);border:1px solid rgba(2,6,23,0.06);z-index:8}
.stat{display:inline-flex;align-items:center;gap:10px;padding:6px 8px;border-radius:10px;background:rgba(6,12,20,0.45);border:1px solid rgba(255,255,255,0.03);font-weight:800;font-size:12px;color:rgba(230,238,248,0.9);min-height:28px;line-height:1}
.stat .emoji{font-size:13px;display:inline-flex;align-items:center}
.stat .stat-icon{width:28px;height:22px;display:inline-grid;place-items:center;border-radius:6px;margin-right:6px;flex:0 0 auto;box-shadow:inset 0 -6px 18px rgba(2,6,23,0.12)}
.stat .num{font-variant-numeric: tabular-nums;font-size:13px;font-weight:900;padding:4px 8px;border-radius:8px;background:rgba(255,255,255,0.03);color:#fff;min-width:48px;text-align:center}

/* Per-type small colored accents */
.stat.voice .stat-icon{background:linear-gradient(90deg, rgba(124,58,237,0.95), rgba(6,182,212,0.95));color:#fff}
.stat.stream .stat-icon{background:linear-gradient(90deg, rgba(99,102,241,0.95), rgba(124,58,237,0.95));color:#fff}
.stat.members .stat-icon{background:linear-gradient(90deg, rgba(255,209,102,0.95), rgba(255,255,255,0.06));color:#071021}
.stat.fake .stat-icon{background:linear-gradient(90deg, rgba(191,45,45,0.95), rgba(143,22,22,0.95));color:#fff}

/* Also tint the numeric badge slightly per type for quick scanning */
.stat.voice .num{background:linear-gradient(90deg, rgba(124,58,237,0.12), rgba(6,182,212,0.08));color:var(--accent)}
.stat.stream .num{background:linear-gradient(90deg, rgba(99,102,241,0.12), rgba(124,58,237,0.08));color:#7c3aed}
.stat.members .num{background:rgba(255,255,255,0.02);color:var(--muted)}
.stat.fake .num{background:rgba(255,100,100,0.06);color:#ff8a8a}
.stat .num{display:inline-block;min-width:44px;text-align:right;transition:transform 360ms cubic-bezier(.2,.9,.2,1),color 300ms,text-shadow 300ms}

/* when a stat increases, animate from above --> current position with accent color */
.stat .num.num--up{
	animation: stat-up 820ms cubic-bezier(.2,.9,.2,1);
	color: var(--accent);
	text-shadow: 0 8px 24px rgba(0,212,255,0.12);
}

/* when a stat decreases, animate from below --> current position with red tint */
.stat .num.num--down{
	animation: stat-down 820ms cubic-bezier(.2,.9,.2,1);
	color: #ff8a8a;
	text-shadow: 0 8px 20px rgba(255,90,90,0.10);
}

@keyframes stat-up{
	0%{ transform: translateY(-14px) scale(.98); opacity:0 }
	45%{ transform: translateY(6px) scale(1.06); opacity:1 }
	100%{ transform: translateY(0) scale(1); opacity:1 }
}

@keyframes stat-down{
	0%{ transform: translateY(14px) scale(.98); opacity:0 }
	45%{ transform: translateY(-6px) scale(1.04); opacity:1 }
	100%{ transform: translateY(0) scale(1); opacity:1 }
}

/* subtle background flash for the whole stat block when any change occurs */
.stat.num-flash{position:relative;overflow:visible}
.stat.num-flash::after{content:'';position:absolute;inset:0;border-radius:6px;background:linear-gradient(90deg, rgba(124,58,237,0.06), rgba(6,182,212,0.04));opacity:0;pointer-events:none;transition:opacity 360ms}
.stat.num-flash .num{transform-origin:center center}
.stat.num-flash.show::after{opacity:1}

/* Stat icon base: allow per-type background colors to show; compact sizing */
.stat .stat-icon, .stat-icon.fa-solid{
	background: transparent; /* allow per-type backgrounds */
	padding: 4px;                /* small internal padding */
	width: 20px;
	height: 20px;
	font-size: 13px;           /* ensure glyph is readable */
	line-height: 20px;
	display: inline-grid;
	place-items: center;
	color: #ffffff;            /* default icon color (can be overridden per-type) */
	box-shadow:0 6px 14px rgba(2,6,23,0.08);
	border: 0;
	border-radius: 6px;
	margin-right: 8px;
	transition: transform 120ms ease, color 120ms ease, box-shadow 160ms;
}
/* remove hover lift to avoid layout jitter; keep a subtle color hint if desired */
.stat:hover .stat-icon{ transform: none; box-shadow: none }

/* Override any earlier type-specific backgrounds so icons stay transparent */
.stat.voice .stat-icon.fa-solid, .stat.stream .stat-icon.fa-solid, .stat.members .stat-icon.fa-solid{ background: transparent !important; color: #fff !important }

/* Tweak stat icons to be compact and proportional to the numbers */
.stat .stat-icon, .stat-icon.fa-solid{
  width:20px;               /* overall container size */
  height:20px;
  font-size:13px;          /* FontAwesome glyph size */
  padding:4px;             /* small internal padding */
  border-radius:6px;       /* gentle rounding */
  margin-right:8px;
  display:inline-grid;
  place-items:center;
  transition:transform 140ms ease,box-shadow 140ms ease,background 140ms ease;
  box-shadow:0 6px 14px rgba(2,6,23,0.08); /* subtler shadow */
}
/* reduce emphasis on hover, keep a small lift only */
.stat:hover .stat-icon{transform:translateY(-2px);box-shadow:0 10px 22px rgba(2,6,23,0.10)}

/* Stat types */
.stat.voice{background:linear-gradient(90deg,rgba(124,58,237,0.08),rgba(6,182,212,0.06));border:1px solid rgba(124,58,237,0.12);color:#fff;box-shadow:0 6px 28px rgba(124,58,237,0.06)}
.stat.stream{background:linear-gradient(90deg,rgba(99,102,241,0.08),rgba(124,58,237,0.06));border:1px solid rgba(99,102,241,0.12)}
.stat.members{background:linear-gradient(90deg,rgba(255,255,255,0.01),transparent);border:1px solid rgba(255,255,255,0.03);color:var(--muted)}
.stat.fake{background:linear-gradient(90deg,rgba(255,255,255,0.01),transparent);border:1px solid rgba(143, 22, 22, 0.466);color:var(--muted)}

/* Crown icon inside badge for first place */
.rank-badge .crown{font-size:14px}

/* badge pop when highlighted */
.card.highlight .rank-badge{transform:translate(-2px,-2px) rotate(-18deg) scale(1.12);box-shadow:0 12px 40px rgba(124,58,237,0.22)}

/* subtle float on load */
@keyframes floaty{0%{transform:translateY(0)}50%{transform:translateY(-4px)}100%{transform:translateY(0)}}

.card{transition:transform 160ms cubic-bezier(.2,.9,.2,1),box-shadow 140ms;will-change:transform,opacity}
.rank-badge .crown{display:block}

/* Large diagonal crown for first (no box) */
.crown-large{position:absolute;left:-18px;top:-18px;font-size:32px;transform:rotate(-22deg);z-index:12;pointer-events:none}
.crown-large i{font-size:28px;color:var(--gold);text-shadow:0 6px 18px rgba(246,200,76,0.12)}

/* stars (small golden dots) */
.crown-large .star{position:absolute;width:6px;height:6px;border-radius:50%;background:linear-gradient(90deg,var(--gold),#ffd89b);opacity:0;transform:scale(0.6);pointer-events:none}
.crown-large .s1{left:22px;top:6px}
.crown-large .s2{left:30px;top:12px}
.crown-large .s3{left:18px;top:20px}
.crown-large .s4{left:6px;top:18px}
.crown-large .s5{left:-2px;top:8px}
.crown-large .s6{left:10px;top:2px}

/* keyframe for outward burst */
@keyframes star-spark{
	0%{opacity:0;transform:translate(0,0) scale(0.8)}
	30%{opacity:1;transform:translate(calc(var(--tx,0px)/3), calc(var(--ty,0px)/3)) scale(1)}
	70%{opacity:0.9}
	100%{opacity:0;transform:translate(var(--tx,0px),var(--ty,0px)) scale(1.15)}
}

/* continuous, subtle star animation (infinite) with staggered delays */
.crown-large .star-svg{position:absolute;width:12px;height:12px;fill:var(--gold);opacity:0;transform:scale(0.9);z-index:20}
.crown-large .s1{left:18px;top:4px;--tx:-8px;--ty:-20px;animation:star-spark 2200ms cubic-bezier(.2,.9,.2,1) infinite 60ms}
.crown-large .s2{left:26px;top:10px;--tx:14px;--ty:-22px;animation:star-spark 2200ms cubic-bezier(.2,.9,.2,1) infinite 360ms}
.crown-large .s3{left:18px;top:20px;--tx:22px;--ty:-6px;animation:star-spark 2200ms cubic-bezier(.2,.9,.2,1) infinite 680ms}
.crown-large .s4{left:6px;top:18px;--tx:28px;--ty:8px;animation:star-spark 2200ms cubic-bezier(.2,.9,.2,1) infinite 980ms}
.crown-large .s5{left:-2px;top:8px;--tx:8px;--ty:18px;animation:star-spark 2200ms cubic-bezier(.2,.9,.2,1) infinite 1280ms}
.crown-large .s6{left:10px;top:0px;--tx:-12px;--ty:6px;animation:star-spark 2200ms cubic-bezier(.2,.9,.2,1) infinite 1580ms}

/* subtle, continuous crown glow pulse */
@keyframes crown-glow{0%{filter:drop-shadow(0 6px 18px rgba(255,215,96,0.06)) scale(1)}50%{filter:drop-shadow(0 12px 34px rgba(255,215,96,0.16)) scale(1.04)}100%{filter:drop-shadow(0 6px 18px rgba(255,215,96,0.06)) scale(1)}}
.crown-large i{animation: crown-glow 2600ms ease-in-out infinite}

/* keep a slightly stronger effect when top-change occurs (one-off boost) */
.card.top-change .crown-large i{animation-duration:900ms;transform:scale(1.06)}

/* list move smoother */

.list-move{transition:transform 480ms cubic-bezier(.2,.9,.2,1)}
.theme-light body{
	/* lighter layered background that mirrors dark theme accents but optimized for light */
	background-color: var(--light-bg);
	background-image:
		radial-gradient(600px 260px at 10% 10%, rgba(124,58,237,0.06), transparent 10%),
		radial-gradient(420px 180px at 88% 78%, rgba(6,182,212,0.04), transparent 8%),
		linear-gradient(180deg, rgba(250,252,255,1), rgba(243,247,251,1));
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-size:cover;
	color:var(--light-text);
}
.theme-light .wrap{background:linear-gradient(180deg, rgba(255,255,255,0.92), rgba(250,252,255,0.96));box-shadow:0 10px 40px rgba(11,37,64,0.04);color:var(--light-text);border-radius:12px;border:1px solid rgba(11,37,64,0.04)}
.theme-light .site-header{background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,252,255,0.98));border:1px solid rgba(11,37,64,0.06);box-shadow:0 6px 22px rgba(11,37,64,0.03);border-radius:10px}
.theme-light .card{border:1px solid rgba(11,37,64,0.04);background:linear-gradient(180deg, rgba(255,255,255,0.96), rgba(250,252,255,0.98));color:var(--light-text);box-shadow:0 8px 26px rgba(11,37,64,0.04)}
.theme-light .top-left-stats .stat{background:rgba(255,255,255,0.96);color:var(--light-text);border:1px solid rgba(11,37,64,0.04)}
.theme-light .server-name{color:var(--light-text)}
.theme-light .tags{color:var(--light-muted)}

/* light theme: badge-style stats that mirror dark gradients but remain legible */
.theme-light .stat{background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(250,252,255,0.96));border:1px solid rgba(11,37,64,0.04);color:var(--light-text);box-shadow:0 6px 18px rgba(11,37,64,0.02)}
.theme-light .stat .stat-icon{box-shadow:none;color:inherit}
.theme-light .stat .num{background:rgba(11,37,64,0.04);color:var(--light-text);font-weight:800}
.theme-light .stat.voice .stat-icon{background:linear-gradient(90deg, rgba(124,58,237,0.95), rgba(6,182,212,0.95));color:#fff}
.theme-light .stat.stream .stat-icon{background:linear-gradient(90deg, rgba(99,102,241,0.95), rgba(124,58,237,0.95));color:#fff}
.theme-light .stat.members .stat-icon{background:linear-gradient(90deg, rgba(255,209,102,0.95), rgba(255,255,255,0.06));color:#071021}
.theme-light .stat.fake .stat-icon{background:linear-gradient(90deg, rgba(191,45,45,0.95), rgba(143,22,22,0.95));color:#fff}
.theme-light .stat.voice .num{background:linear-gradient(90deg, rgba(124,58,237,0.12), rgba(6,182,212,0.08));color:var(--accent)}
.theme-light .stat.stream .num{background:linear-gradient(90deg, rgba(99,102,241,0.12), rgba(124,58,237,0.08));color:#7c3aed}
.theme-light .stat.members .num{background:rgba(11,37,64,0.03);color:var(--light-text)}
.theme-light .stat.fake .num{background:rgba(255,100,100,0.06);color:#a33}

/* segmented control overrides for light theme */
.theme-light .filter-segment button{color:var(--light-muted)}
.theme-light .filter-segment button.active{color:#fff;background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 8px 28px rgba(124,58,237,0.06)}
.theme-light .filter-segment .underline{box-shadow:0 8px 28px rgba(6,34,58,0.04)}
.meta{flex:1;display:flex;flex-direction:column}
.server-name{font-weight:800;font-size:13px;letter-spacing:0.3px}

/* hover polish: gentle lift and deeper shadow for interactivity (reduced to avoid repaint storms) */
.card:hover{transform:translateY(-4px);box-shadow:0 10px 28px rgba(2,6,23,0.22)}

/* Only allow stat motion/flash for visible cards (adds .is-visible via IntersectionObserver in JS) */
.list .card:not(.is-visible) .num.num--up,
.list .card:not(.is-visible) .num.num--down,
.list .card:not(.is-visible) .stat.num-flash::after{ animation: none !important; transition: none !important; opacity: 1 !important }

/* High-DPI tweaks: slightly thicker borders and sharper shadows */
@media (-webkit-min-device-pixel-ratio:2), (min-resolution:192dpi){
	.avatar{border-width:1px}
	.avatar-ring{--ring-padding:3px}
	.rank-badge.small{font-size:11px}
	.stat{font-size:13px}
}
.tags{font-size:12px;color:var(--muted);text-transform:uppercase}
.small{font-size:13px;color:var(--muted)}
.stats{display:flex;gap:10px;align-items:center}
.stat{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border-radius:4px;background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent);border:1px solid rgba(255,255,255,0.03);font-weight:700;font-size:12px}
.stat .emoji{font-size:13px}
.stat .num{font-variant-numeric: tabular-nums}
.list-move{transition:transform 520ms cubic-bezier(.2,.85,.25,1)}
/* removed continuous pulse; animate only when top changes */
.card.top-change{animation:top-pop 900ms cubic-bezier(.2,.9,.2,1);box-shadow:0 18px 60px rgba(139,92,246,0.12);border-color:rgba(139,92,246,0.14)}
.card.top-change .rank-badge{box-shadow:0 14px 40px rgba(255,217,125,0.12)}

@keyframes top-pop{0%{transform:translateY(0) scale(.995);opacity:0.98}30%{transform:translateY(-8px) scale(1.02);opacity:1}100%{transform:translateY(0) scale(1);opacity:1}}

@keyframes pulse{0%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.01)}100%{transform:translateY(0) scale(1)} }
.list-enter-from{opacity:0;transform:translateY(10px) scale(.99)}
.list-enter-active{transition:all 360ms cubic-bezier(.2,.9,.2,1)}
.list-leave-to{opacity:0;transform:translateY(-8px)}
.highlight{box-shadow:0 14px 50px rgba(124,58,237,0.18);border:1px solid rgba(124,58,237,0.28)}

/* small responsive tweaks */
@media (max-width:720px){
	.wrap{margin:18px;padding:16px}
	.rank-badge{left:-6px;top:-6px;min-width:30px;height:30px;font-size:12px}
	.avatar{width:100%;height:100%}
	.avatar-ring{width:60px;height:60px;padding:2px}
	.meta{min-width:0}
	.voice-wrap{width:92px}
	.stats{gap:6px}
}

/* theme-aware scrollbar (WebKit + Firefox) */
:root{
	/* enhanced scrollbar vars (defaults target dark theme) */
	--scroll-thumb: rgba(255,255,255,0.12); /* slightly stronger by default */
	--scroll-thumb-hover: rgba(255,255,255,0.20);
	--scroll-thumb-active: rgba(255,255,255,0.28);
	--scroll-thumb-border: rgba(255,255,255,0.04);
	--scroll-track: rgba(2,6,23,0.02);
}

/* apply scrollbar coloring explicitly to html/body and the main wrap so it's visible on Windows/Edge */
/* apply scrollbar coloring explicitly to html/body and the main wrap */
html, body, .wrap { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent }
/* ensure html uses the same background so no native white strip shows */
html{background:inherit}

/* WebKit: keep width but hide thumb until user interaction to avoid always-visible look */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background: transparent;border-radius:10px}
*::-webkit-scrollbar-thumb{
  background: transparent; /* invisible by default */
  border-radius:10px;
  border:2px solid transparent;
  background-clip:padding-box;
  transition: background-color 160ms ease, box-shadow 160ms ease;
}
/* show subtle thumb when user hovers over the page or the main .wrap area */
body:hover *::-webkit-scrollbar-thumb, .wrap:hover::-webkit-scrollbar-thumb{
  background: var(--scroll-thumb);
  box-shadow: inset 0 0 0 1px var(--scroll-thumb-border), 0 6px 16px rgba(2,6,23,0.12);
}
*::-webkit-scrollbar-thumb:hover{ background: var(--scroll-thumb-hover); box-shadow: inset 0 0 0 1px var(--scroll-thumb-border), 0 12px 36px rgba(2,6,23,0.25); }

/* Firefox: make scrollbar invisible by default, use color on hover (limited control) */
html{ scrollbar-width: thin; scrollbar-color: transparent transparent }
html:hover{ scrollbar-color: var(--scroll-thumb) transparent }

/* Ensure .wrap-specific rules follow the same pattern */
.wrap::-webkit-scrollbar{width:10px;height:10px}
.wrap::-webkit-scrollbar-thumb{ background: transparent }
.wrap:hover::-webkit-scrollbar-thumb{ background: var(--scroll-thumb) }

/* loader inner + header/footer polish */
.site-loader{display:none}

.site-header{
	display:flex;align-items:center;justify-content:space-between;gap:12px;
	padding:16px 18px;margin-bottom:20px;
	border-radius:5px;background:rgba(255,255,255,0.01);
	border:1px solid rgba(255,255,255,0.03);transition:all 180ms ease;backdrop-filter:blur(4px)
}

/* Fullscreen page loader */
#page-loader{position:fixed;inset:0;display:grid;place-items:center;background:linear-gradient(180deg, rgba(5,6,10,0.92), rgba(7,16,32,0.96));z-index:9999;transition:opacity 420ms ease, visibility 420ms;opacity:1;visibility:visible}
#page-loader[aria-hidden="true"]{opacity:0;visibility:hidden;pointer-events:none}
#page-loader .loader-inner{display:flex;flex-direction:column;align-items:center;gap:18px;padding:28px;border-radius:12px}
#page-loader .loader-logo img{width:84px;height:84px;border-radius:14px;object-fit:cover;box-shadow:0 18px 40px rgba(2,6,23,0.5)}
#page-loader .loader-ring{display:flex;gap:8px;align-items:center}
#page-loader .loader-ring span{width:12px;height:12px;border-radius:50%;background:linear-gradient(180deg,var(--accent),var(--accent-2));box-shadow:0 8px 20px rgba(124,58,237,0.18);opacity:0.14;transform:scale(.7);animation:loader-pop 1100ms cubic-bezier(.2,.9,.2,1) infinite}
#page-loader .loader-ring span:nth-child(2){animation-delay:160ms}
#page-loader .loader-ring span:nth-child(3){animation-delay:320ms}
#page-loader .loader-text{color:rgba(255,255,255,0.9);font-weight:700;letter-spacing:0.2px}

@keyframes loader-pop{0%{opacity:0.12;transform:scale(.76)}40%{opacity:1;transform:scale(1)}100%{opacity:0.14;transform:scale(.76)}}

/* light theme variant */
.theme-light #page-loader{background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,253,0.98));}
.theme-light #page-loader .loader-text{color:var(--light-text)}
.theme-light #page-loader .loader-ring span{background:linear-gradient(180deg,var(--accent),var(--accent-2));box-shadow:0 8px 20px rgba(11,37,64,0.06)}

/* Unified header logo: larger, crisper, and theme-aware */
.site-logo{width:72px;height:72px;border-radius:8px;display:grid;place-items:center;overflow:hidden;flex:0 0 72px;background:linear-gradient(135deg, rgba(88,101,242,0.18), rgba(124,58,237,0.14));border:1px solid rgba(255,255,255,0.06);box-shadow:0 12px 36px rgba(2,6,23,0.16);transition:transform 180ms ease}
.site-logo:hover{transform:translateY(-3px) scale(1.02)}
.site-logo .logo-img{width:100%;height:100%;object-fit:cover;display:block;border-radius:8px}
.site-logo .logo-fallback{display:grid;place-items:center;font-weight:900;color:#ffffff;font-size:22px;width:100%;height:100%;letter-spacing:0.6px}

.header-title h1{font-size:20px;margin:0;font-weight:800}
.header-title .subtitle{margin:4px 0 0;font-size:13px;color:var(--muted);opacity:0.95}

.header-actions{display:flex;align-items:center;gap:10px}

/* Slightly lift the header visually on dark theme */
.theme-purple .site-header{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01))}

/* ...existing code... */
.wrap{margin-bottom:24px}

.list-wrap{display:block}
.list-controls{display:flex;justify-content:flex-start;margin-bottom:18px}
.btn-theme{border-radius:10px;padding:8px 10px;display:inline-grid;place-items:center;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);border:1px solid rgba(255,255,255,0.06);transition:transform 240ms, background-color 240ms, color 240ms}
.btn-theme:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(2,6,23,0.12)}
.btn-theme:active{transform:translateY(0)}
.filter-card select{background:transparent;border:0;color:inherit;font-weight:700}

/* segmented control */
/* segmented control */
.filter-segment{position:relative;display:flex;align-items:center;background:transparent;border-radius:6px;padding:4px;border:1px solid rgba(255,255,255,0.04);gap:6px;flex-wrap:nowrap;flex:1 1 auto;min-width:0}
.filter-segment button{background:transparent;border:0;padding:6px 8px;height:32px;border-radius:6px;color:var(--muted);display:inline-flex;gap:8px;align-items:center;justify-content:center;cursor:pointer;font-weight:800;position:relative;z-index:2;line-height:1;transition:color 200ms ease, background 200ms ease;flex:0 1 auto;min-width:40px}
.filter-segment button .icon{width:16px;height:16px;flex:0 0 16px;opacity:0.98;display:inline-block;vertical-align:middle;transition:transform 160ms ease,filter 160ms,opacity 160ms;color:var(--muted);fill:currentColor;filter:drop-shadow(0 6px 14px rgba(2,6,23,0.36))}
.filter-segment button .icon path{fill:currentColor}
.filter-segment button.active .icon{transform:scale(1.05);filter:none;color:#fff}
.filter-segment button .label{font-size:12px;display:inline-block;line-height:1}
.filter-segment button.active{color:var(--seg-text-active);background:var(--seg-active-bg)}
.filter-segment .underline{position:absolute;left:var(--underline-left,6px);bottom:6px;height:26px;border-radius:6px;background:linear-gradient(90deg,var(--accent),var(--accent-2));width:var(--underline-width,0px);transition:left 220ms cubic-bezier(.2,.9,.2,1),width 220ms;box-shadow:none}

/* compact segmented control: smaller pill buttons with subtler active state */
.filter-segment.compact{border-radius:8px;padding:3px;gap:6px;justify-content:space-between}
.filter-segment.compact button{padding:6px 8px;height:32px;border-radius:8px;font-size:12px;font-weight:700}
.filter-segment.compact button .icon{width:14px;height:14px;margin-right:6px}
.filter-segment.compact button.active{background:linear-gradient(90deg, rgba(88,101,242,0.14), rgba(124,58,237,0.10));color:var(--seg-text-active)}
.filter-segment.compact .underline{height:28px;bottom:6px;border-radius:8px;box-shadow:0 8px 18px rgba(88,101,242,0.06)}

/* Header logo styles */


/* category styles removed */

/* use simple filter-card styles for select-based filter fallback */

.crown-svg{color:var(--gold);filter:drop-shadow(0 8px 28px rgba(241,199,122,0.08))}
.theme-icon{transition:transform 220ms, color 320ms}
.theme-toggle[aria-pressed="true"] .theme-icon{transform:rotate(20deg);color:var(--accent-2)}
.theme-toggle[aria-pressed="false"] .theme-icon{color:var(--muted)}

/* Make the header theme toggle more visible on light theme */
.theme-light .btn-theme{background:linear-gradient(180deg, rgba(10,24,40,0.06), rgba(10,24,40,0.02));border:1px solid rgba(11,37,64,0.08);color:var(--light-text);box-shadow:0 8px 20px rgba(11,37,64,0.06)}
.theme-light .btn-theme .theme-icon{color:var(--light-text)}

/* stat icons */
.stat-icon{width:14px;height:14px;margin-right:6px;fill:currentColor;opacity:0.95}
.stat.voice{background:linear-gradient(90deg,rgba(124,58,237,0.12),rgba(6,182,212,0.06));border:1px solid rgba(124,58,237,0.08);color:#fff}
.stat.stream{background:linear-gradient(90deg,rgba(99,102,241,0.08),rgba(124,58,237,0.06));border:1px solid rgba(99,102,241,0.08)}
.stat.members{background:linear-gradient(90deg,rgba(255,255,255,0.01),transparent);border:1px solid rgba(255,255,255,0.03);color:var(--muted)}

/* footer responsive: keep it card-width and centered */
.site-footer{max-width:1100px;margin:18px auto 0;position:relative;border-radius:12px;padding:12px 16px;z-index:60;display:flex;justify-content:center;align-items:center}
.site-footer small{opacity:0.7}

.theme-light .site-footer{border-color:rgba(11,37,64,0.06);background:transparent;color:var(--light-muted)}

/* Make footer visually match the header (background, border, shadow) */
.site-footer{
	background: rgba(255,255,255,0.01);
	border: 1px solid rgba(255,255,255,0.03);
	box-shadow: 0 6px 18px rgba(2,6,23,0.12);
	border-radius:5px;
	justify-content:space-between;
}

/* footer text block */
.footer-left{font-size:13px;color:var(--muted);max-width:100%;line-height:1.35}
.footer-left a{color:var(--accent);text-decoration:underline}

/* Theme toggle sizing: generally match segmented control height; header-specific uses 34px to match header filter */
.btn-theme{height:40px;padding:8px 10px;display:inline-flex;align-items:center;justify-content:center}
.header-actions .btn-theme{height:34px;padding:6px 10px;font-size:13px}

/* footer filters: compact pill and polished active state */
#header-filters{display:flex;align-items:center;gap:6px;margin-right:6px;flex:0 0 auto;min-width:0;justify-content:flex-start}
#header-filters .filter-segment{margin:0;background:transparent;border-radius:6px;padding:1px;border:1px solid rgba(255,255,255,0.03);flex:0 0 auto;min-width:0;max-width:140px;gap:4px;width:auto}
#header-filters .filter-segment .underline{display:none}
#header-filters .filter-segment button{padding:2px 6px;height:26px;border-radius:6px;font-size:11px;font-weight:800;color:var(--muted);background:transparent;flex:0 0 auto;min-width:0}
#header-filters .filter-segment button .icon{width:14px;height:14px;margin-right:0;flex:0 0 14px;display:inline-flex;align-items:center;justify-content:center}
/* In the header we prefer icon-only compact pills to save space; labels hidden but available via title attribute */
#header-filters .filter-segment button .label{display:none}
#header-filters .filter-segment button.active{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;box-shadow:0 6px 16px rgba(88,101,242,0.12)}
.header-actions{min-width:0}

@media (max-width:720px){
	.site-footer{margin:10px 12px}
	/* Mobile: more comfortable page padding */
	.wrap{margin:12px auto;padding:12px}
	header{flex-direction:column;align-items:flex-start;gap:8px}
	h1{font-size:18px}

	/* Cards stack and breathe more on mobile */
	.list{gap:12px}
	.card{flex-direction:row;align-items:flex-start;padding:12px;gap:12px;border-radius:10px}
	.avatar-ring{width:56px;height:56px;padding:3px}
	.avatar{width:100%;height:100%;border-radius:8px}

	/* Slightly smaller header logo on narrow screens */
	.site-logo{width:56px;height:56px;flex:0 0 56px}

	.meta{min-width:0}
	.server-name{font-size:14px}
	.tags{font-size:11px}

	/* Stats wrap under meta for compact vertical stacking */
	.stats{flex-wrap:wrap;margin-left:auto;margin-top:6px;gap:8px}
	.stat{padding:6px 10px;font-size:12px;border-radius:8px}

	/* Segmented control becomes horizontally scrollable with larger touch targets */
	.filter-segment{overflow:auto;-webkit-overflow-scrolling:touch;padding:6px;gap:8px}
	.filter-segment button{padding:10px 14px;height:44px;border-radius:12px;font-size:14px;display:inline-flex;align-items:center;justify-content:center;text-align:center}
	.filter-segment .underline{height:36px;bottom:4px;border-radius:10px;transition:left 200ms cubic-bezier(.2,.9,.2,1),width 200ms}
	/* ensure underline is positioned with transform to avoid subpixel tearing on mobile */
	.filter-segment{--underline-left:6px;--underline-width:0px}
	.filter-segment .underline{left:0;transform:translateX(var(--underline-left));width:var(--underline-width)}

	/* Increase tappable area for header buttons */
	.btn-theme{padding:10px 12px;border-radius:12px}

	/* hide native scrollbar on small screens for a cleaner native-app feel */
	@media (max-width:480px){
		*::-webkit-scrollbar{display:none}
		html{scrollbar-width:none}
	}

	/* Mobile footer adjustments: stack and wrap to avoid overflowing text */
	.site-footer{flex-direction:column;align-items:flex-start;gap:8px;padding:12px 14px}
	.site-footer #header-filters{width:100%;display:flex;flex-wrap:wrap;gap:8px;order:1}
	.site-footer .footer-left{width:100%;order:2;text-align:left;word-break:break-word;overflow-wrap:anywhere;font-size:13px;color:var(--muted)}
}

/* Extra small screens: stack card content to avoid name/stat overlap */
@media (max-width:420px){
	.card{flex-direction:column;align-items:stretch;padding:12px 10px;gap:10px}
	.avatar-ring{width:56px;height:56px}
	.meta{width:100%;order:1}
	.server-name{font-size:15px;word-break:break-word;line-height:1.15}
	.tags{display:block;margin-top:6px;font-size:11px}
	.stats{width:100%;order:2;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-start;margin-left:0;margin-top:6px}
	.stat{flex:0 0 auto;min-width:0}
	.filter-segment{padding:6px}

	/* Center avatar, name and description on very small screens */
	.card.center-mobile, .card{align-items:center}
	.avatar-ring{margin:0 auto}
	.meta{display:flex;flex-direction:column;align-items:center;text-align:center}
	.small{margin-top:6px;text-align:center}
	.tags{display:block;text-align:center}
	.stats{justify-content:center}
}

@media (max-width:640px){
  /* Stack header actions vertically on narrow screens so the segmented filter sits above the theme button.
     The filter expands to full width (scrollable if necessary); the theme button is centered below it. */
  .header-actions{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
  #header-filters{width:100%;justify-content:flex-start}
  #header-filters .filter-segment{width:100%;overflow:auto;-webkit-overflow-scrolling:touch}
  /* Make the toggle easier to hit and visually separated from the filter */
  .btn-theme{align-self:center;margin-top:8px}
}

/* Icon polish: make segmented and stat icons more legible and colorful without breaking layout */
.filter-segment button .icon{
  width:18px;height:18px;flex:0 0 18px;opacity:0.98;display:inline-block;vertical-align:middle;transition:transform 160ms ease,filter 160ms,opacity 160ms;color:var(--muted);fill:currentColor;filter:drop-shadow(0 6px 14px rgba(2,6,23,0.36));
}
.filter-segment button .icon path{fill:currentColor}
.filter-segment button.active .icon{transform:scale(1.05);filter:none;color:#fff}

/* Support FontAwesome <i> icons alongside inline SVGs */
.icon, i.icon{display:inline-grid;place-items:center;line-height:1}
.icon{width:18px;height:18px}
.icon.fa-solid, .stat-icon.fa-solid{font-size:18px;line-height:1;display:inline-grid;place-items:center}
.stat-icon{width:18px;height:18px;border-radius:8px;padding:6px;margin-right:8px;display:inline-grid;place-items:center}
.stat-icon.fa-solid{padding:6px;border-radius:8px}

/* ===== Tooltips (data-tooltip or title-based) =====
	 Modern, compact tooltips that adapt to dark/light themes.
	 Use data-tooltip="text" on elements for custom text, otherwise title attribute is used. */
.has-tooltip{position:relative}
.has-tooltip[data-tooltip]::after,
.has-tooltip[title]::after{
	/* prefer data-tooltip, fall back to title when data-tooltip absent */
	content: attr(data-tooltip) "" attr(title);
	position:absolute;
	white-space:nowrap;
	font-size:12px;
	padding:6px 8px;
	border-radius:6px;
	opacity:0;pointer-events:none;transform:translateY(6px) scale(.98);
	transition:opacity 220ms cubic-bezier(.2,.9,.2,1), transform 220ms cubic-bezier(.2,.9,.2,1);
	z-index:120;
	box-shadow:0 8px 26px rgba(2,6,23,0.28);
	color:#fff;
	background:linear-gradient(180deg, rgba(0,0,0,0.82), rgba(0,0,0,0.72));
	left:50%; transform-origin:top center; transform:translateX(-50%) translateY(6px) scale(.98);
}
.has-tooltip[data-tooltip]:hover::after,
.has-tooltip[title]:hover::after,
.has-tooltip[data-tooltip]:focus::after,
.has-tooltip[title]:focus::after{
	opacity:1;transform:translateX(-50%) translateY(0) scale(1)
}

/* Prefer data-tooltip over title attribute if both exist */


/* prefer-reduced-motion handling */
@media (prefers-reduced-motion:reduce){
	.has-tooltip[data-tooltip]::after,.has-tooltip[title]::after{transition:none}
}

/* Light theme: invert tooltip colors and soften shadow */

/* Tooltips use same dark style across themes for visual consistency (matches mockup) */

/* Positioning variants: top (default), bottom, left, right via data-placement */
.has-tooltip[data-placement='bottom']::after{top:100%;margin-top:8px;transform:translateX(-50%) translateY(6px) scale(.98)}
.has-tooltip[data-placement='top']::after{bottom:100%;top:auto;margin-bottom:8px}
.has-tooltip[data-placement='left']::after{left:auto;right:100%;transform:translateX(-6px)}
.has-tooltip[data-placement='right']::after{left:100%;transform:translateX(6px)}

/* Color accents for FontAwesome stat icons (match gradients via background) */
.stat.voice .stat-icon.fa-solid{background:linear-gradient(90deg,#7c3aed22,#06b6d422);color:#ffffff}
.stat.stream .stat-icon.fa-solid{background:linear-gradient(90deg,#00d4ff33,#8a4cff33);color:#ffffff}
.stat.members .stat-icon.fa-solid{background:linear-gradient(90deg,rgba(255,209,102,0.12),rgba(255,255,255,0.02));color:var(--light-text, #e6eef8)}

/* Compact adjustments */
.filter-segment.compact .icon.fa-solid{font-size:16px}
.filter-segment.compact .stat-icon.fa-solid{font-size:16px;padding:4px}

/* ===== Compact stat pills (both dark & light) =====
	 Make stat boxes slightly smaller and more compact while
	 preserving the per-type color accents and retina clarity. */
.stat{
	padding:4px 6px !important;
	border-radius:8px !important;
	gap:4px !important;
	font-size:12px !important;
	min-height:24px !important;
}
.stat .stat-icon,
.stat-icon.fa-solid{
	width:20px !important;
	height:20px !important;
	font-size:13px !important;
	padding:4px !important;
	border-radius:6px !important;
	margin-right:4px !important;
	box-shadow:0 6px 12px rgba(2,6,23,0.06) !important;
}
.stat .num{
	font-size:12px !important;
	font-weight:800 !important;
	padding:3px 6px !important;
	min-width:40px !important;
	border-radius:6px !important;
}

/* Slightly larger on high DPI to remain crisp */
@media (-webkit-min-device-pixel-ratio:2), (min-resolution:192dpi){
	.stat{font-size:13px}
	.stat .stat-icon{width:22px;height:22px;font-size:14px;padding:5px}
	.stat .num{min-width:44px;padding:4px 8px}
}

/* Final tweaks: ensure the fake (red) icon is visible in light theme even if inline styles exist */
.stat.fake .stat-icon.fa-solid{background:linear-gradient(90deg, rgba(191,45,45,0.95), rgba(143,22,22,0.95)) !important; color:#fff !important}
.theme-light .stat.fake .stat-icon.fa-solid{background:linear-gradient(90deg, rgba(191,45,45,0.95), rgba(143,22,22,0.95)) !important; color:#fff !important}

/* Slight spacing tweak for all stat icons to tighten the row like the provided mockup */
.stat .stat-icon{margin-right:4px}
.stat{gap:4px}

/* Global radius normalization: ensure consistent 5px radius across UI components */
.ui-radius-override,
.wrap,
.site-header,
.site-footer,
.card,
.button,
btn-theme,
.filter-segment,
.filter-segment button,
.filter-card,
.avatar-ring,
.avatar,
.avatar-fallback,
.site-logo,
.rank-badge,
.rank-badge.small,
.crown-large,
.crown-large i,
.stat,
.stat .stat-icon,
.filter-segment.compact button,
.list .card,
.meta,
.controls input,
.controls select {
  border-radius: 5px !important;
}

/* Also ensure outlines/inner elements that used larger radii are clamped */
.filter-segment .underline,
.filter-segment.compact .underline{
  border-radius:5px !important;height:auto
}

/* utility class if specific elements should be excluded in future */
.no-radius { border-radius: 0 !important }

/* Theme-specific icon colors and scrollbar tuning */
/* Dark theme (default / theme-purple) */
.theme-purple{
  --scroll-thumb: rgba(255,255,255,0.12);
  --scroll-thumb-hover: rgba(255,255,255,0.20);
  --scroll-thumb-active: rgba(255,255,255,0.28);
  --scroll-thumb-border: rgba(255,255,255,0.04);
  --scroll-track: transparent;
}

.theme-purple .icon,
.theme-purple .stat-icon,
.theme-purple .filter-segment button .icon{
  color: #ffffff; /* crisp white icons on dark */
  filter: drop-shadow(0 6px 14px rgba(2,6,23,0.36));
}

/* Light theme adjustments */
.theme-light{
  --scroll-thumb: rgba(10,24,40,0.10);
  --scroll-thumb-hover: rgba(10,24,40,0.18);
  --scroll-thumb-active: rgba(10,24,40,0.26);
  --scroll-thumb-border: rgba(10,24,40,0.06);
  --scroll-track: transparent;
}

.theme-light .icon,
.theme-light .stat-icon,
.theme-light .filter-segment button .icon{
  color: var(--light-text); /* dark icons for light theme */
  filter: none; /* avoid heavy drop-shadows on light bg */
}

/* stat specific: override earlier forced white in light theme */
.theme-light .stat .stat-icon.fa-solid{ color: var(--light-text) !important; background: transparent !important }

/* header filters: make sure active state icon contrasts on light theme */
.theme-light #header-filters .filter-segment button.active .icon{ color: #fff }
.theme-light #header-filters .filter-segment button.active{ background: linear-gradient(90deg,var(--accent),var(--accent-2)); color: #fff; box-shadow:0 8px 22px rgba(124,58,237,0.08) }

/* Ensure scrollbar track remains transparent everywhere */
*::-webkit-scrollbar-track, .wrap::-webkit-scrollbar-track{ background: transparent }