/* ==========================================
ROOT VARIABLES
========================================== */

:root{

--bg:#0b1020;

--card:#121a2f;
--card2:#1a2540;

--primary:#6366f1;
--secondary:#8b5cf6;

--success:#22c55e;
--warning:#f59e0b;
--danger:#ef4444;

--text:#ffffff;
--muted:#94a3b8;

--border:
rgba(255,255,255,.08);

}

/* ==========================================
RESET
========================================== */

*{

margin:0;
padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Inter',sans-serif;

background:var(--bg);

color:white;

overflow-x:hidden;

}

/* ==========================================
BACKGROUND
========================================== */

.bg-gradient{

position:fixed;

inset:0;

z-index:-1;

background:

radial-gradient(
circle at top left,
rgba(99,102,241,.18),
transparent 40%
),

radial-gradient(
circle at bottom right,
rgba(139,92,246,.18),
transparent 40%
);

}

/* ==========================================
NAVBAR
========================================== */

.navbar{

display:flex;

justify-content:space-between;

align-items:center;

padding:24px 40px;

position:sticky;

top:0;

z-index:999;

background:
rgba(11,16,32,.85);

backdrop-filter:blur(20px);

border-bottom:
1px solid var(--border);

}

.logo{

font-size:1.8rem;

font-family:'Syne',sans-serif;

font-weight:800;

background:
linear-gradient(
90deg,
var(--primary),
var(--secondary)
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

.navbar nav{

display:flex;

gap:16px;

}

.navbar nav a{

text-decoration:none;

color:#cbd5e1;

padding:10px 16px;

border-radius:999px;

transition:.3s;

}

.navbar nav a:hover{

background:
rgba(255,255,255,.06);

color:white;

}

.nav-actions{

display:flex;

gap:12px;

}

/* ==========================================
BUTTONS
========================================== */

.primary-btn{

padding:14px 24px;

border:none;

border-radius:14px;

cursor:pointer;

font-weight:700;

color:white;

background:
linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

transition:.3s;

}

.outline-btn{

padding:14px 24px;

border-radius:14px;

background:none;

border:
1px solid var(--border);

color:white;

cursor:pointer;

transition:.3s;

}

/* ==========================================
SECTION BASE
========================================== */

section{

max-width:1400px;

margin:auto;

padding:0 40px 120px;

}

.section-header{

text-align:center;

margin-bottom:60px;

}

.section-header span{

display:inline-block;

padding:10px 18px;

border-radius:999px;

background:
rgba(99,102,241,.15);

color:#c7d2fe;

font-weight:700;

margin-bottom:14px;

}

.section-header h2{

font-size:3rem;

font-family:'Syne',sans-serif;

}

/* ==========================================
HERO
========================================== */

.hero{

max-width:1400px;

margin:auto;

padding:120px 40px;

display:grid;

grid-template-columns:
1.1fr .9fr;

gap:60px;

align-items:center;

}

.hero-badge{

display:inline-block;

padding:10px 18px;

border-radius:999px;

background:
rgba(99,102,241,.15);

color:#c7d2fe;

font-weight:700;

margin-bottom:24px;

}

.hero h1{

font-size:
clamp(
3.5rem,
8vw,
6rem
);

line-height:1.05;

font-family:'Syne',sans-serif;

margin-bottom:20px;

}

.hero h1 span{

background:
linear-gradient(
90deg,
var(--primary),
var(--secondary)
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

.hero p{

max-width:650px;

font-size:1.1rem;

line-height:1.9;

color:var(--muted);

margin-bottom:30px;

}

.hero-actions{

display:flex;

gap:14px;

flex-wrap:wrap;

}

/* ==========================================
HERO PREVIEW
========================================== */

.hero-preview{

display:flex;

justify-content:center;

align-items:center;

}

.preview-card{

width:100%;

max-width:380px;

padding:34px;

border-radius:30px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

display:flex;

flex-direction:column;

gap:20px;

}

.preview-card p{

display:flex;

justify-content:space-between;

align-items:center;

}

/* ==========================================
OVERVIEW STATS
========================================== */

.stats-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:24px;

}

.stat-card{

padding:34px;

text-align:center;

border-radius:28px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

}

.stat-card h1{

font-size:2.8rem;

font-family:'Syne',sans-serif;

margin-bottom:12px;

background:
linear-gradient(
90deg,
var(--primary),
var(--secondary)
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

.stat-card p{

color:var(--muted);

}

/* ==========================================
CATEGORY GRID
========================================== */

.category-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:24px;

}

.category-card{

padding:40px;

text-align:center;

font-size:2rem;

border-radius:30px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

transition:.35s ease;

}

.category-card:hover{

transform:
translateY(-8px);

}

.category-card h3{

font-size:1.2rem;

margin:16px 0;

}

.category-card p{

font-size:1rem;

line-height:1.8;

color:var(--muted);

}

/* ==========================================
STATUS SECTION
========================================== */

.status-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:24px;

}

.status-card{

padding:34px;

text-align:center;

border-radius:28px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

}
/* ==========================================
STATUS INDICATORS
========================================== */

.online,
.offline,
.busy,
.away{

display:inline-flex;

align-items:center;

gap:8px;

padding:12px 18px;

border-radius:999px;

font-weight:700;

}

.online{

background:
rgba(34,197,94,.15);

color:#4ade80;

}

.offline{

background:
rgba(148,163,184,.15);

color:#cbd5e1;

}

.busy{

background:
rgba(239,68,68,.15);

color:#f87171;

}

.away{

background:
rgba(245,158,11,.15);

color:#fbbf24;

}

/* ==========================================
BADGES
========================================== */

.badge-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:24px;

}

.badge-card{

padding:34px;

text-align:center;

border-radius:28px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

}

.badge{

width:60px;
height:60px;

display:inline-flex;

align-items:center;
justify-content:center;

border-radius:50%;

font-weight:700;

font-size:1.1rem;

margin-bottom:18px;

}

.badge.red{

background:#ef4444;

}

.badge.green{

background:#22c55e;

}

.badge.orange{

background:#f59e0b;

}

.badge.purple{

background:#8b5cf6;

}

/* ==========================================
TAGS & CHIPS
========================================== */

.tag-showcase{

display:flex;

flex-wrap:wrap;

gap:14px;

justify-content:center;

}

.tag{

padding:12px 18px;

border-radius:999px;

background:
rgba(255,255,255,.06);

border:
1px solid var(--border);

font-weight:600;

}

.tag.red{

background:
rgba(239,68,68,.15);

color:#f87171;

}

.tag.green{

background:
rgba(34,197,94,.15);

color:#4ade80;

}

.tag.orange{

background:
rgba(245,158,11,.15);

color:#fbbf24;

}

.tag.purple{

background:
rgba(139,92,246,.15);

color:#c4b5fd;

}

.tag.cyan{

background:
rgba(6,182,212,.15);

color:#67e8f9;

}

/* ==========================================
PILLS
========================================== */

.pill-grid{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:24px;

}

.pill-card{

padding:30px;

text-align:center;

border-radius:24px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

}

.pill{

padding:12px 22px;

border-radius:999px;

font-weight:700;

}

.pill.accent{

background:
linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

}

.pill.success{

background:#22c55e;

}

.pill.danger{

background:#ef4444;

}

.pill.warning{

background:#f59e0b;

}

.pill.purple{

background:#8b5cf6;

}

.pill.dark{

background:#0f172a;

border:
1px solid var(--border);

}

/* ==========================================
VERSION LABELS
========================================== */

.version-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:24px;

}

.version-card{

padding:30px;

text-align:center;

border-radius:24px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

}

.version{

padding:12px 18px;

border-radius:999px;

font-weight:700;

}

.version.stable{

background:
rgba(34,197,94,.15);

color:#4ade80;

}

.version.beta{

background:
rgba(245,158,11,.15);

color:#fbbf24;

}

.version.alpha{

background:
rgba(239,68,68,.15);

color:#f87171;

}

.version.release{

background:
rgba(99,102,241,.15);

color:#a5b4fc;

}

/* ==========================================
HIGHLIGHT TEXT
========================================== */

.highlight-card{

padding:40px;

border-radius:30px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

line-height:2.2;

font-size:1.1rem;

}

.highlight{

padding:4px 10px;

border-radius:8px;

background:
rgba(99,102,241,.2);

}

.highlight.yellow{

background:
rgba(245,158,11,.2);

}

.highlight.green{

background:
rgba(34,197,94,.2);

}

.highlight.purple{

background:
rgba(139,92,246,.2);

}

/* ==========================================
GRADIENT TEXT
========================================== */

.gradient-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:24px;

}

.gradient-card{

padding:40px;

text-align:center;

border-radius:28px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

}

.gradient{

font-size:2rem;

font-weight:800;

font-family:'Syne',sans-serif;

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

.gradient.orange{

background:
linear-gradient(
90deg,
#f97316,
#f59e0b
);

}

.gradient.purple{

background:
linear-gradient(
90deg,
#8b5cf6,
#ec4899
);

}

.gradient.cyan{

background:
linear-gradient(
90deg,
#06b6d4,
#3b82f6
);

}

.gradient.sunset{

background:
linear-gradient(
90deg,
#fb7185,
#f97316
);

}

/* ==========================================
TEXT DECORATIONS
========================================== */

.decorations-card{

padding:40px;

border-radius:30px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

display:grid;

gap:20px;

}

.underline-accent{

text-decoration:underline;

text-decoration-color:
var(--primary);

text-decoration-thickness:3px;

}

.strike{

text-decoration:line-through;

opacity:.7;

}

.bold-accent{

font-weight:800;

color:#a5b4fc;

}

.text-glow{

color:white;

text-shadow:
0 0 12px rgba(99,102,241,.8);

}

/* ==========================================
INLINE CODE
========================================== */

.inline-code-grid{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:24px;

}

.code-card{

padding:34px;

border-radius:28px;

background:
#0f172a;

border:
1px solid var(--border);

}

.inline-code{

padding:4px 10px;

border-radius:8px;

font-family:
"Fira Code",
monospace;

background:
rgba(255,255,255,.08);

color:#67e8f9;

}/* ==========================================
TOOLTIPS
========================================== */

.tooltip-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:24px;

}

.tooltip-card{

padding:40px;

text-align:center;

border-radius:28px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

}

.tooltip{

position:relative;

display:inline-block;

cursor:pointer;

padding:12px 18px;

border-radius:999px;

background:
rgba(255,255,255,.06);

}

.tooltip-text{

position:absolute;

left:50%;
bottom:130%;

transform:
translateX(-50%);

min-width:180px;

padding:12px 16px;

border-radius:12px;

font-size:.9rem;

background:#0f172a;

border:
1px solid var(--border);

opacity:0;

visibility:hidden;

transition:.3s;

z-index:10;

}

.tooltip-text.bottom{

top:130%;
bottom:auto;

}

.tooltip:hover .tooltip-text{

opacity:1;

visibility:visible;

}

/* ==========================================
KEYBOARD SHORTCUTS
========================================== */

.keyboard-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:24px;

}

.keyboard-card{

padding:34px;

text-align:center;

font-size:1.2rem;

border-radius:28px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

}

.kbd{

display:inline-flex;

align-items:center;
justify-content:center;

min-width:54px;

padding:10px 14px;

border-radius:10px;

font-weight:700;

background:#0f172a;

border:
1px solid rgba(255,255,255,.12);

box-shadow:
0 4px 12px rgba(0,0,0,.2);

}

/* ==========================================
ANIMATED BADGES
========================================== */

.animated-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:24px;

}

.animated-card{

padding:36px;

text-align:center;

border-radius:28px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

}

.animated-badge{

display:inline-block;

padding:12px 20px;

border-radius:999px;

font-weight:700;

animation:
pulseBadge 2s infinite;

}

.animated-badge.red{

background:#ef4444;

}

.animated-badge.green{

background:#22c55e;

}

.animated-badge.orange{

background:#f59e0b;

}

.animated-badge.purple{

background:#8b5cf6;

}

/* ==========================================
LIVE INDICATORS
========================================== */

.live-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:24px;

}

.live-card{

padding:34px;

display:flex;

align-items:center;

justify-content:center;

gap:12px;

border-radius:28px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

}

.live-dot{

width:12px;
height:12px;

border-radius:50%;

background:#22c55e;

animation:
pulseDot 2s infinite;

}

.live-dot.green{

background:#22c55e;

}

.live-dot.orange{

background:#f59e0b;

}

.live-dot.red{

background:#ef4444;

}

/* ==========================================
LOADING SPINNERS
========================================== */

.loading-grid{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:24px;

}

.loading-card{

padding:36px;

display:flex;

align-items:center;

justify-content:center;

gap:14px;

border-radius:28px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

}

.loading-spinner{

width:24px;
height:24px;

border-radius:50%;

border:
3px solid rgba(255,255,255,.2);

border-top-color:
var(--primary);

animation:
spin 1s linear infinite;

}

.loading-spinner.accent{

border-top-color:
#06b6d4;

}

.loading-spinner.purple{

border-top-color:
#8b5cf6;

}

/* ==========================================
PROGRESS LABELS
========================================== */

.progress-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:24px;

}

.progress-card{

padding:34px;

text-align:center;

border-radius:28px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

}

.progress-label{

padding:12px 20px;

border-radius:999px;

font-weight:700;

background:
rgba(99,102,241,.15);

color:#a5b4fc;

}

.progress-label.success{

background:
rgba(34,197,94,.15);

color:#4ade80;

}

.progress-label.warning{

background:
rgba(245,158,11,.15);

color:#fbbf24;

}

.progress-label.danger{

background:
rgba(239,68,68,.15);

color:#f87171;

}

/* ==========================================
PREMIUM LABELS
========================================== */

.premium-grid{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:16px;

}

.premium-label{

padding:12px 22px;

border-radius:999px;

font-weight:700;

background:
linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

}

.premium-label.gold{

background:
linear-gradient(
135deg,
#f59e0b,
#facc15
);

}

.premium-label.silver{

background:
linear-gradient(
135deg,
#94a3b8,
#e2e8f0
);

color:#111827;

}

.premium-label.purple{

background:
linear-gradient(
135deg,
#8b5cf6,
#ec4899
);

}

/* ==========================================
VERIFIED BADGES
========================================== */

.verified-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:24px;

}

.verified-card{

padding:34px;

display:flex;

align-items:center;

justify-content:center;

gap:12px;

border-radius:28px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

}

.verified-badge{

width:28px;
height:28px;

display:inline-flex;

align-items:center;
justify-content:center;

border-radius:50%;

font-size:.9rem;

font-weight:700;

background:#22c55e;

}

.verified-badge.blue{

background:#3b82f6;

}

.verified-badge.gold{

background:#f59e0b;

}

.verified-badge.purple{

background:#8b5cf6;

}

/* ==========================================
ANIMATIONS
========================================== */

@keyframes pulseBadge{

0%,100%{

transform:scale(1);

}

50%{

transform:scale(1.08);

}

}

@keyframes pulseDot{

0%{

box-shadow:
0 0 0 0 rgba(34,197,94,.5);

}

70%{

box-shadow:
0 0 0 12px rgba(34,197,94,0);

}

100%{

box-shadow:
0 0 0 0 rgba(34,197,94,0);

}

}

@keyframes spin{

to{

transform:rotate(360deg);

}

}
/* ==========================================
NOTIFICATION LABELS
========================================== */

.notification-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:24px;

}

.notification-card{

padding:34px;

text-align:center;

border-radius:28px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

}

.notify-label{

display:inline-block;

padding:12px 20px;

border-radius:999px;

font-weight:700;

}

.notify-label.info{

background:
rgba(59,130,246,.15);

color:#60a5fa;

}

.notify-label.success{

background:
rgba(34,197,94,.15);

color:#4ade80;

}

.notify-label.warning{

background:
rgba(245,158,11,.15);

color:#fbbf24;

}

.notify-label.danger{

background:
rgba(239,68,68,.15);

color:#f87171;

}

/* ==========================================
ALERT SPANS
========================================== */

.alert-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:24px;

}

.alert-card{

padding:34px;

text-align:center;

border-radius:28px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

}

.alert-span{

display:inline-flex;

align-items:center;

gap:8px;

padding:12px 20px;

border-radius:12px;

font-weight:700;

}

.alert-span.success{

background:
rgba(34,197,94,.15);

color:#4ade80;

}

.alert-span.warning{

background:
rgba(245,158,11,.15);

color:#fbbf24;

}

.alert-span.danger{

background:
rgba(239,68,68,.15);

color:#f87171;

}

.alert-span.info{

background:
rgba(59,130,246,.15);

color:#60a5fa;

}

/* ==========================================
SOCIAL COUNTERS
========================================== */

.social-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:24px;

}

.social-card{

padding:40px;

text-align:center;

font-size:2rem;

border-radius:30px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

transition:.35s ease;

}

.social-card:hover{

transform:
translateY(-8px);

}

.social-count{

display:block;

margin-top:14px;

font-size:1.5rem;

font-weight:700;

}

/* ==========================================
RATING BADGES
========================================== */

.rating-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:24px;

}

.rating-card{

padding:34px;

text-align:center;

border-radius:28px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

}

.rating-badge{

padding:12px 20px;

border-radius:999px;

font-weight:700;

background:
rgba(255,255,255,.08);

}

.rating-badge.gold{

background:
linear-gradient(
135deg,
#f59e0b,
#facc15
);

color:#111827;

}

.rating-badge.green{

background:
rgba(34,197,94,.15);

color:#4ade80;

}

.rating-badge.purple{

background:
rgba(139,92,246,.15);

color:#c4b5fd;

}

/* ==========================================
USER MENTIONS
========================================== */

.mentions-card{

padding:40px;

border-radius:30px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

display:grid;

gap:18px;

line-height:2;

}

.mention{

padding:4px 10px;

border-radius:999px;

font-weight:700;

background:
rgba(59,130,246,.15);

color:#60a5fa;

}

.mention.purple{

background:
rgba(139,92,246,.15);

color:#c4b5fd;

}

.mention.green{

background:
rgba(34,197,94,.15);

color:#4ade80;

}

/* ==========================================
CATEGORY MARKERS
========================================== */

.marker-grid{

display:flex;

flex-wrap:wrap;

gap:14px;

justify-content:center;

}

.marker{

padding:12px 18px;

border-radius:999px;

font-weight:700;

}

.marker.design{

background:
rgba(236,72,153,.15);

color:#f9a8d4;

}

.marker.code{

background:
rgba(59,130,246,.15);

color:#60a5fa;

}

.marker.marketing{

background:
rgba(245,158,11,.15);

color:#fbbf24;

}

.marker.finance{

background:
rgba(34,197,94,.15);

color:#4ade80;

}

.marker.support{

background:
rgba(148,163,184,.15);

color:#cbd5e1;

}

.marker.ai{

background:
rgba(139,92,246,.15);

color:#c4b5fd;

}

/* ==========================================
AVAILABILITY LABELS
========================================== */

.availability-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:24px;

}

.availability-card{

padding:34px;

text-align:center;

border-radius:28px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

}

.availability{

padding:12px 20px;

border-radius:999px;

font-weight:700;

}

.availability.available{

background:
rgba(34,197,94,.15);

color:#4ade80;

}

.availability.limited{

background:
rgba(245,158,11,.15);

color:#fbbf24;

}

.availability.soldout{

background:
rgba(239,68,68,.15);

color:#f87171;

}

.availability.preorder{

background:
rgba(99,102,241,.15);

color:#a5b4fc;

}

/* ==========================================
SMART METADATA
========================================== */

.metadata-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:24px;

}

.metadata-card{

padding:34px;

text-align:center;

border-radius:28px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

}

.meta-item{

display:inline-flex;

align-items:center;

gap:10px;

font-weight:600;

color:#cbd5e1;

}
/* ==========================================
ACHIEVEMENT BADGES
========================================== */

.achievement-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:24px;

}

.achievement-card{

padding:36px;

text-align:center;

border-radius:30px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

}

.achievement-badge{

display:inline-block;

padding:14px 24px;

border-radius:999px;

font-weight:700;

}

.achievement-badge.gold{

background:
linear-gradient(
135deg,
#f59e0b,
#facc15
);

color:#111827;

}

.achievement-badge.silver{

background:
linear-gradient(
135deg,
#94a3b8,
#e2e8f0
);

color:#111827;

}

.achievement-badge.bronze{

background:
linear-gradient(
135deg,
#b45309,
#d97706
);

}

.achievement-badge.diamond{

background:
linear-gradient(
135deg,
#06b6d4,
#3b82f6
);

}

/* ==========================================
AI LABELS
========================================== */

.ai-grid{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:16px;

}

.ai-label{

padding:12px 20px;

border-radius:999px;

font-weight:700;

background:
linear-gradient(
135deg,
#6366f1,
#8b5cf6
);

}

.ai-label.purple{

background:
linear-gradient(
135deg,
#8b5cf6,
#ec4899
);

}

.ai-label.cyan{

background:
linear-gradient(
135deg,
#06b6d4,
#3b82f6
);

}

.ai-label.green{

background:
linear-gradient(
135deg,
#22c55e,
#10b981
);

}

/* ==========================================
FEATURE FLAGS
========================================== */

.flags-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:24px;

}

.flag-card{

padding:34px;

text-align:center;

border-radius:28px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

}

.feature-flag{

padding:12px 20px;

border-radius:999px;

font-weight:700;

}

.feature-flag.enabled{

background:
rgba(34,197,94,.15);

color:#4ade80;

}

.feature-flag.disabled{

background:
rgba(239,68,68,.15);

color:#f87171;

}

.feature-flag.beta{

background:
rgba(245,158,11,.15);

color:#fbbf24;

}

.feature-flag.experimental{

background:
rgba(139,92,246,.15);

color:#c4b5fd;

}

/* ==========================================
ACTIVITY INDICATORS
========================================== */

.activity-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:24px;

}

.activity-card{

padding:34px;

text-align:center;

border-radius:28px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

}

.activity-indicator{

padding:12px 20px;

border-radius:999px;

font-weight:700;

background:
rgba(34,197,94,.15);

color:#4ade80;

}

.activity-indicator.yellow{

background:
rgba(245,158,11,.15);

color:#fbbf24;

}

.activity-indicator.red{

background:
rgba(239,68,68,.15);

color:#f87171;

}

.activity-indicator.blue{

background:
rgba(59,130,246,.15);

color:#60a5fa;

}

/* ==========================================
FAQ
========================================== */

.faq-grid{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:24px;

}

.faq-card{

padding:34px;

border-radius:28px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

}

.faq-card h3{

margin-bottom:16px;

}

.faq-card p{

line-height:1.9;

color:var(--muted);

}

/* ==========================================
DOCUMENTATION
========================================== */

.docs-card{

padding:40px;

border-radius:30px;

background:#0f172a;

border:
1px solid var(--border);

overflow:auto;

}

.docs-card pre{

font-family:
"Fira Code",
monospace;

line-height:2;

color:#38bdf8;

}

/* ==========================================
GALLERY
========================================== */

.gallery-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:24px;

}

.gallery-card{

padding:40px;

text-align:center;

font-size:2rem;

cursor:pointer;

border-radius:30px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

transition:.35s ease;

}

.gallery-card:hover{

transform:
translateY(-8px);

}

.gallery-card h3{

font-size:1.1rem;

margin-top:16px;

}

/* ==========================================
FOOTER
========================================== */

.footer{

background:#050b16;

border-top:
1px solid var(--border);

}

.footer-grid{

max-width:1400px;

margin:auto;

padding:80px 40px;

display:grid;

grid-template-columns:
2fr 1fr 1fr 1fr;

gap:40px;

}

.footer h3,
.footer h4{

margin-bottom:18px;

}

.footer p,
.footer li{

color:var(--muted);

line-height:1.8;

}

.footer ul{

list-style:none;

}

.footer-bottom{

padding:24px;

text-align:center;

border-top:
1px solid var(--border);

color:var(--muted);

}

/* ==========================================
MODAL
========================================== */

.modal-overlay{

position:fixed;

inset:0;

background:
rgba(0,0,0,.65);

backdrop-filter:blur(8px);

display:flex;

align-items:center;

justify-content:center;

opacity:0;

visibility:hidden;

transition:.35s;

z-index:2000;

}

.modal-overlay.active{

opacity:1;

visibility:visible;

}

.modal{

width:min(720px,92%);

border-radius:30px;

overflow:hidden;

background:
linear-gradient(
145deg,
#111827,
#1e293b
);

border:
1px solid rgba(255,255,255,.08);

}

.modal-header{

display:flex;

justify-content:space-between;

align-items:center;

padding:24px;

border-bottom:
1px solid rgba(255,255,255,.06);

}

.modal-header button{

background:none;

border:none;

color:white;

font-size:1.2rem;

cursor:pointer;

}

.modal-content{

padding:40px;

}

/* ==========================================
SCROLL TO TOP
========================================== */

.scroll-top{

position:fixed;

right:30px;
bottom:30px;

width:60px;
height:60px;

border:none;

border-radius:50%;

cursor:pointer;

font-size:1.3rem;

color:white;

background:
linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

opacity:0;

visibility:hidden;

transition:.35s;

z-index:999;

}

.scroll-top.show{

opacity:1;

visibility:visible;

}

/* ==========================================
ANIMATIONS
========================================== */

@keyframes fadeUp{

from{

opacity:0;

transform:
translateY(30px);

}

to{

opacity:1;

transform:
translateY(0);

}

}

.gallery-card,
.faq-card,
.achievement-card,
.flag-card{

animation:
fadeUp .7s ease both;

}

/* ==========================================
RESPONSIVE
========================================== */

@media(max-width:992px){

.stats-grid,
.category-grid,
.status-grid,
.badge-grid,
.version-grid,
.tooltip-grid,
.keyboard-grid,
.animated-grid,
.live-grid,
.progress-grid,
.notification-grid,
.alert-grid,
.social-grid,
.rating-grid,
.availability-grid,
.metadata-grid,
.achievement-grid,
.flags-grid,
.activity-grid,
.gallery-grid{

grid-template-columns:
repeat(2,1fr);

}

.footer-grid{

grid-template-columns:
repeat(2,1fr);

}

}

@media(max-width:768px){

.navbar{

flex-direction:column;

gap:20px;

}

.navbar nav{

flex-wrap:wrap;

justify-content:center;

}

.hero{

grid-template-columns:1fr;

text-align:center;

}

.stats-grid,
.category-grid,
.status-grid,
.badge-grid,
.pill-grid,
.version-grid,
.gradient-grid,
.inline-code-grid,
.tooltip-grid,
.keyboard-grid,
.animated-grid,
.live-grid,
.loading-grid,
.progress-grid,
.verified-grid,
.notification-grid,
.alert-grid,
.social-grid,
.rating-grid,
.availability-grid,
.metadata-grid,
.achievement-grid,
.flags-grid,
.activity-grid,
.faq-grid,
.gallery-grid{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

}

.hero h1{

font-size:2.8rem;

}

.section-header h2{

font-size:2rem;

}

}

@media(max-width:480px){

section{

padding-left:20px;
padding-right:20px;

}

.hero{

padding:100px 20px;

}

.modal-content{

padding:24px;

}

}

/* ==========================================
FINAL POLISH
========================================== */

.primary-btn:hover{

transform:
translateY(-2px);

box-shadow:
0 12px 30px rgba(99,102,241,.35);

}

.outline-btn:hover{

background:
rgba(255,255,255,.06);

}

.logo{

letter-spacing:1px;

}

.gallery-card,
.category-card,
.badge-card{

backdrop-filter:
blur(18px);

}
/* ============================================================
   THEME STYLING OVERRIDES
   Navbar, Sidebar, and Footer theme colors:
   - Light Mode: White background, dark text/icons
   - Dark Mode: Black background, light/white text/icons
   ============================================================ */

/* ==========================================
   1. LIGHT MODE SPECIFIC (body:not(.dark-mode))
   ========================================== */
body:not(.dark-mode) .navbar,
body:not(.dark-mode) header.navbar,
body:not(.dark-mode) nav.navbar,
body:not(.dark-mode) .sidebar,
body:not(.dark-mode) aside.sidebar,
body:not(.dark-mode) .footer,
body:not(.dark-mode) footer.footer {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
}

/* Ensure text, icons, links inside these components are dark */
body:not(.dark-mode) .navbar *,
body:not(.dark-mode) header.navbar *,
body:not(.dark-mode) nav.navbar *,
body:not(.dark-mode) .sidebar *,
body:not(.dark-mode) aside.sidebar *,
body:not(.dark-mode) .footer *,
body:not(.dark-mode) footer.footer * {
  color: #334155 !important;
}

/* Titles and major headings */
body:not(.dark-mode) .navbar .logo,
body:not(.dark-mode) .sidebar .sidebar-brand,
body:not(.dark-mode) .sidebar h2,
body:not(.dark-mode) .sidebar .brand-text,
body:not(.dark-mode) .footer h2,
body:not(.dark-mode) .footer h3,
body:not(.dark-mode) .footer-logo {
  color: #0f172a !important;
}

/* Sidebar navigation links */
body:not(.dark-mode) .sidebar-nav li a,
body:not(.dark-mode) .sidebar ul li a,
body:not(.dark-mode) .sidebar a {
  background: transparent !important;
  color: #475569 !important;
}

/* Sidebar active link and hover states */
body:not(.dark-mode) .sidebar-nav li.active a,
body:not(.dark-mode) .sidebar-nav li a:hover,
body:not(.dark-mode) .sidebar ul li.active a,
body:not(.dark-mode) .sidebar ul li a:hover,
body:not(.dark-mode) .sidebar a:hover,
body:not(.dark-mode) .sidebar .active a {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

body:not(.dark-mode) .sidebar-nav li.active a *,
body:not(.dark-mode) .sidebar-nav li a:hover *,
body:not(.dark-mode) .sidebar ul li.active a *,
body:not(.dark-mode) .sidebar ul li a:hover *,
body:not(.dark-mode) .sidebar a:hover *,
body:not(.dark-mode) .sidebar .active a * {
  color: #0f172a !important;
}

/* Footer links hover */
body:not(.dark-mode) .footer a:hover,
body:not(.dark-mode) footer.footer a:hover {
  color: #4f46e5 !important; /* Premium brand indigo */
}

/* Search bar inside navbar */
body:not(.dark-mode) .search-bar input {
  background-color: #f8fafc !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}
body:not(.dark-mode) .search-bar input::placeholder {
  color: #64748b !important;
}

/* Outline and secondary buttons inside light navbar/sidebar */
body:not(.dark-mode) .navbar .nav-btn.outline-nav-btn,
body:not(.dark-mode) .navbar .outline-btn {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}
body:not(.dark-mode) .navbar .nav-btn.outline-nav-btn:hover,
body:not(.dark-mode) .navbar .outline-btn:hover {
  background-color: #f1f5f9 !important;
}


/* ==========================================
   2. DARK MODE SPECIFIC (body.dark-mode)
   ========================================== */
body.dark-mode .navbar,
body.dark-mode header.navbar,
body.dark-mode nav.navbar,
body.dark-mode .sidebar,
body.dark-mode aside.sidebar,
body.dark-mode .footer,
body.dark-mode footer.footer {
  background: #000000 !important;
  background-color: #000000 !important;
  color: #f8fafc !important;
  border-color: #1e293b !important;
  box-shadow: none !important;
}

/* Ensure text, icons, links inside these components are light */
body.dark-mode .navbar *,
body.dark-mode header.navbar *,
body.dark-mode nav.navbar *,
body.dark-mode .sidebar *,
body.dark-mode aside.sidebar *,
body.dark-mode .footer *,
body.dark-mode footer.footer * {
  color: #cbd5e1 !important; /* slate-300 */
}

/* Titles and major headings */
body.dark-mode .navbar .logo,
body.dark-mode .sidebar .sidebar-brand,
body.dark-mode .sidebar h2,
body.dark-mode .sidebar .brand-text,
body.dark-mode .footer h2,
body.dark-mode .footer h3,
body.dark-mode .footer-logo {
  color: #ffffff !important;
}

/* Sidebar navigation links */
body.dark-mode .sidebar-nav li a,
body.dark-mode .sidebar ul li a,
body.dark-mode .sidebar a {
  background: transparent !important;
  color: #94a3b8 !important;
}

/* Sidebar active link and hover states */
body.dark-mode .sidebar-nav li.active a,
body.dark-mode .sidebar-nav li a:hover,
body.dark-mode .sidebar ul li.active a,
body.dark-mode .sidebar ul li a:hover,
body.dark-mode .sidebar a:hover,
body.dark-mode .sidebar .active a {
  background-color: #1e293b !important; /* slate-800 */
  color: #ffffff !important;
}

body.dark-mode .sidebar-nav li.active a *,
body.dark-mode .sidebar-nav li a:hover *,
body.dark-mode .sidebar ul li.active a *,
body.dark-mode .sidebar ul li a:hover *,
body.dark-mode .sidebar a:hover *,
body.dark-mode .sidebar .active a * {
  color: #ffffff !important;
}

/* Footer links hover */
body.dark-mode .footer a:hover,
body.dark-mode footer.footer a:hover {
  color: #818cf8 !important; /* Indigo-400 */
}

/* Search bar inside navbar */
body.dark-mode .search-bar input {
  background-color: #0f172a !important;
  color: #ffffff !important;
  border: 1px solid #1e293b !important;
}
body.dark-mode .search-bar input::placeholder {
  color: #475569 !important;
}

/* Secondary/outline buttons in dark navbar */
body.dark-mode .navbar .nav-btn.outline-nav-btn,
body.dark-mode .navbar .outline-btn {
  background-color: #000000 !important;
  color: #ffffff !important;
  border: 1px solid #334155 !important;
}
body.dark-mode .navbar .nav-btn.outline-nav-btn:hover,
body.dark-mode .navbar .outline-btn:hover {
  background-color: #0f172a !important;
}


/* ==========================================
   3. THEME TOGGLE BUTTON STYLING (GLOBAL)
   ========================================== */
.theme-toggle,
#darkModeToggle,
#theme-toggle {
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  font-size: 1.15rem !important;
  padding: 8px 12px !important;
  border-radius: 9999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}

body:not(.dark-mode) .theme-toggle,
body:not(.dark-mode) #darkModeToggle,
body:not(.dark-mode) #theme-toggle {
  color: #475569 !important;
  background-color: #f1f5f9 !important;
}
body:not(.dark-mode) .theme-toggle:hover,
body:not(.dark-mode) #darkModeToggle:hover,
body:not(.dark-mode) #theme-toggle:hover {
  color: #0f172a !important;
  background-color: #e2e8f0 !important;
  transform: scale(1.05);
}

body.dark-mode .theme-toggle,
body.dark-mode #darkModeToggle,
body.dark-mode #theme-toggle {
  color: #e2e8f0 !important;
  background-color: #1e293b !important;
}
body.dark-mode .theme-toggle:hover,
body.dark-mode #darkModeToggle:hover,
body.dark-mode #theme-toggle:hover {
  color: #ffffff !important;
  background-color: #334155 !important;
  transform: scale(1.05);
}

/* Floating theme toggle button (for pages without navbar/sidebar) */
.theme-toggle-floating {
  position: fixed !important;
  top: 20px !important;
  right: 20px !important;
  z-index: 9999 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}
body.dark-mode .theme-toggle-floating {
  box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important;
}

/* Sidebar list item toggle button */
.sidebar .theme-toggle-sidebar {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 16px !important;
  width: calc(100% - 32px) !important;
  margin: 10px 16px !important;
  border-radius: 8px !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  border: none !important;
  background-color: transparent !important;
}
body:not(.dark-mode) .sidebar .theme-toggle-sidebar {
  color: #475569 !important;
  background-color: #f1f5f9 !important;
}
body:not(.dark-mode) .sidebar .theme-toggle-sidebar:hover {
  color: #0f172a !important;
  background-color: #e2e8f0 !important;
}
body.dark-mode .sidebar .theme-toggle-sidebar {
  color: #cbd5e1 !important;
  background-color: #1e293b !important;
}
body.dark-mode .sidebar .theme-toggle-sidebar:hover {
  color: #ffffff !important;
  background-color: #334155 !important;
}
/* ============================================================
   THEME STYLING OVERRIDES
   Navbar, Sidebar, and Footer theme colors:
   - Light Mode: White background, dark text/icons
   - Dark Mode: Black background, light/white text/icons
   ============================================================ */

/* ==========================================
   1. LIGHT MODE SPECIFIC (body:not(.dark-mode))
   ========================================== */
body:not(.dark-mode) .navbar,
body:not(.dark-mode) header.navbar,
body:not(.dark-mode) nav.navbar,
body:not(.dark-mode) .sidebar,
body:not(.dark-mode) aside.sidebar,
body:not(.dark-mode) .footer,
body:not(.dark-mode) footer.footer {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
}

/* Ensure text, icons, links inside these components are dark */
body:not(.dark-mode) .navbar *,
body:not(.dark-mode) header.navbar *,
body:not(.dark-mode) nav.navbar *,
body:not(.dark-mode) .sidebar *,
body:not(.dark-mode) aside.sidebar *,
body:not(.dark-mode) .footer *,
body:not(.dark-mode) footer.footer * {
  color: #334155 !important;
}

/* Titles and major headings */
body:not(.dark-mode) .navbar .logo,
body:not(.dark-mode) .sidebar .sidebar-brand,
body:not(.dark-mode) .sidebar h2,
body:not(.dark-mode) .sidebar .brand-text,
body:not(.dark-mode) .footer h2,
body:not(.dark-mode) .footer h3,
body:not(.dark-mode) .footer-logo {
  color: #0f172a !important;
}

/* Sidebar navigation links */
body:not(.dark-mode) .sidebar-nav li a,
body:not(.dark-mode) .sidebar ul li a,
body:not(.dark-mode) .sidebar a {
  background: transparent !important;
  color: #475569 !important;
}

/* Sidebar active link and hover states */
body:not(.dark-mode) .sidebar-nav li.active a,
body:not(.dark-mode) .sidebar-nav li a:hover,
body:not(.dark-mode) .sidebar ul li.active a,
body:not(.dark-mode) .sidebar ul li a:hover,
body:not(.dark-mode) .sidebar a:hover,
body:not(.dark-mode) .sidebar .active a {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

body:not(.dark-mode) .sidebar-nav li.active a *,
body:not(.dark-mode) .sidebar-nav li a:hover *,
body:not(.dark-mode) .sidebar ul li.active a *,
body:not(.dark-mode) .sidebar ul li a:hover *,
body:not(.dark-mode) .sidebar a:hover *,
body:not(.dark-mode) .sidebar .active a * {
  color: #0f172a !important;
}

/* Footer links hover */
body:not(.dark-mode) .footer a:hover,
body:not(.dark-mode) footer.footer a:hover {
  color: #4f46e5 !important; /* Premium brand indigo */
}

/* Search bar inside navbar */
body:not(.dark-mode) .search-bar input {
  background-color: #f8fafc !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}
body:not(.dark-mode) .search-bar input::placeholder {
  color: #64748b !important;
}

/* Outline and secondary buttons inside light navbar/sidebar */
body:not(.dark-mode) .navbar .nav-btn.outline-nav-btn,
body:not(.dark-mode) .navbar .outline-btn {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}
body:not(.dark-mode) .navbar .nav-btn.outline-nav-btn:hover,
body:not(.dark-mode) .navbar .outline-btn:hover {
  background-color: #f1f5f9 !important;
}


/* ==========================================
   2. DARK MODE SPECIFIC (body.dark-mode)
   ========================================== */
body.dark-mode .navbar,
body.dark-mode header.navbar,
body.dark-mode nav.navbar,
body.dark-mode .sidebar,
body.dark-mode aside.sidebar,
body.dark-mode .footer,
body.dark-mode footer.footer {
  background: #000000 !important;
  background-color: #000000 !important;
  color: #f8fafc !important;
  border-color: #1e293b !important;
  box-shadow: none !important;
}

/* Ensure text, icons, links inside these components are light */
body.dark-mode .navbar *,
body.dark-mode header.navbar *,
body.dark-mode nav.navbar *,
body.dark-mode .sidebar *,
body.dark-mode aside.sidebar *,
body.dark-mode .footer *,
body.dark-mode footer.footer * {
  color: #cbd5e1 !important; /* slate-300 */
}

/* Titles and major headings */
body.dark-mode .navbar .logo,
body.dark-mode .sidebar .sidebar-brand,
body.dark-mode .sidebar h2,
body.dark-mode .sidebar .brand-text,
body.dark-mode .footer h2,
body.dark-mode .footer h3,
body.dark-mode .footer-logo {
  color: #ffffff !important;
}

/* Sidebar navigation links */
body.dark-mode .sidebar-nav li a,
body.dark-mode .sidebar ul li a,
body.dark-mode .sidebar a {
  background: transparent !important;
  color: #94a3b8 !important;
}

/* Sidebar active link and hover states */
body.dark-mode .sidebar-nav li.active a,
body.dark-mode .sidebar-nav li a:hover,
body.dark-mode .sidebar ul li.active a,
body.dark-mode .sidebar ul li a:hover,
body.dark-mode .sidebar a:hover,
body.dark-mode .sidebar .active a {
  background-color: #1e293b !important; /* slate-800 */
  color: #ffffff !important;
}

body.dark-mode .sidebar-nav li.active a *,
body.dark-mode .sidebar-nav li a:hover *,
body.dark-mode .sidebar ul li.active a *,
body.dark-mode .sidebar ul li a:hover *,
body.dark-mode .sidebar a:hover *,
body.dark-mode .sidebar .active a * {
  color: #ffffff !important;
}

/* Footer links hover */
body.dark-mode .footer a:hover,
body.dark-mode footer.footer a:hover {
  color: #818cf8 !important; /* Indigo-400 */
}

/* Search bar inside navbar */
body.dark-mode .search-bar input {
  background-color: #0f172a !important;
  color: #ffffff !important;
  border: 1px solid #1e293b !important;
}
body.dark-mode .search-bar input::placeholder {
  color: #475569 !important;
}

/* Secondary/outline buttons in dark navbar */
body.dark-mode .navbar .nav-btn.outline-nav-btn,
body.dark-mode .navbar .outline-btn {
  background-color: #000000 !important;
  color: #ffffff !important;
  border: 1px solid #334155 !important;
}
body.dark-mode .navbar .nav-btn.outline-nav-btn:hover,
body.dark-mode .navbar .outline-btn:hover {
  background-color: #0f172a !important;
}


/* ==========================================
   3. THEME TOGGLE BUTTON STYLING (GLOBAL)
   ========================================== */
.theme-toggle,
#darkModeToggle,
#theme-toggle {
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  font-size: 1.15rem !important;
  padding: 8px 12px !important;
  border-radius: 9999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}

body:not(.dark-mode) .theme-toggle,
body:not(.dark-mode) #darkModeToggle,
body:not(.dark-mode) #theme-toggle {
  color: #475569 !important;
  background-color: #f1f5f9 !important;
}
body:not(.dark-mode) .theme-toggle:hover,
body:not(.dark-mode) #darkModeToggle:hover,
body:not(.dark-mode) #theme-toggle:hover {
  color: #0f172a !important;
  background-color: #e2e8f0 !important;
  transform: scale(1.05);
}

body.dark-mode .theme-toggle,
body.dark-mode #darkModeToggle,
body.dark-mode #theme-toggle {
  color: #e2e8f0 !important;
  background-color: #1e293b !important;
}
body.dark-mode .theme-toggle:hover,
body.dark-mode #darkModeToggle:hover,
body.dark-mode #theme-toggle:hover {
  color: #ffffff !important;
  background-color: #334155 !important;
  transform: scale(1.05);
}

/* Floating theme toggle button (for pages without navbar/sidebar) */
.theme-toggle-floating {
  position: fixed !important;
  top: 20px !important;
  right: 20px !important;
  z-index: 9999 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}
body.dark-mode .theme-toggle-floating {
  box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important;
}

/* Sidebar list item toggle button */
.sidebar .theme-toggle-sidebar {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 16px !important;
  width: calc(100% - 32px) !important;
  margin: 10px 16px !important;
  border-radius: 8px !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  border: none !important;
  background-color: transparent !important;
}
body:not(.dark-mode) .sidebar .theme-toggle-sidebar {
  color: #475569 !important;
  background-color: #f1f5f9 !important;
}
body:not(.dark-mode) .sidebar .theme-toggle-sidebar:hover {
  color: #0f172a !important;
  background-color: #e2e8f0 !important;
}
body.dark-mode .sidebar .theme-toggle-sidebar {
  color: #cbd5e1 !important;
  background-color: #1e293b !important;
}
body.dark-mode .sidebar .theme-toggle-sidebar:hover {
  color: #ffffff !important;
  background-color: #334155 !important;
}

/* =============================================
   NEW COMPONENT STYLES — span.html additions
   ============================================= */

/* --- Neon Glow Text --- */
.sp-neon {
  font-weight: 800;
  letter-spacing: 2px;
  font-family: 'Syne', sans-serif;
}
.sp-neon-cyan {
  color: #22d3ee;
  text-shadow: 0 0 8px #22d3ee, 0 0 20px #22d3ee, 0 0 40px #06b6d4;
}
.sp-neon-purple {
  color: #c084fc;
  text-shadow: 0 0 8px #c084fc, 0 0 20px #a855f7, 0 0 40px #7c3aed;
}
.sp-neon-green {
  color: #4ade80;
  text-shadow: 0 0 8px #4ade80, 0 0 20px #22c55e, 0 0 40px #16a34a;
}

/* --- Inline Progress Label --- */
.sp-prog-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.sp-prog-label {
  width: 64px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
}
.sp-prog-bar-wrap {
  flex: 1;
  height: 7px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 99px;
  overflow: hidden;
}
.sp-prog-bar {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  position: relative;
  overflow: hidden;
}
.sp-prog-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  animation: shimSpan 2s infinite;
}
@keyframes shimSpan {
  from { transform: translateX(-100%); }
  to   { transform: translateX(200%); }
}
.sp-prog-pct {
  font-size: 12px;
  font-weight: 800;
  width: 34px;
  text-align: right;
  color: #e2e8f0;
  flex-shrink: 0;
}

/* --- Avatar Name Chip --- */
.sp-avatar-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 4px;
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #a5b4fc;
  cursor: default;
  transition: all 0.25s ease;
  text-decoration: none;
}
.sp-avatar-chip img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.sp-avatar-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(99,102,241,0.2);
}
.sp-chip-green {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.25);
  color: #6ee7b7;
}
.sp-chip-green:hover { box-shadow: 0 4px 14px rgba(16,185,129,0.2); }
.sp-chip-purple {
  background: rgba(168, 85, 247, 0.08);
  border-color: rgba(168, 85, 247, 0.25);
  color: #d8b4fe;
}
.sp-chip-purple:hover { box-shadow: 0 4px 14px rgba(168,85,247,0.2); }
.sp-chip-dark {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  color: #94a3b8;
}

/* --- Countdown Timer --- */
.sp-countdown {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sp-cd-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 14px;
  padding: 10px 16px;
  min-width: 64px;
}
.sp-cd-num {
  font-size: 28px;
  font-weight: 800;
  font-family: 'Syne', sans-serif;
  line-height: 1;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: transform 0.15s ease;
}
.sp-cd-lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #64748b;
  margin-top: 2px;
}
.sp-cd-sep {
  font-size: 22px;
  font-weight: 800;
  color: #6366f1;
  line-height: 1;
  margin-bottom: 14px;
  opacity: 0.7;
}

/* --- Marquee Ticker --- */
.sp-ticker-wrap {
  display: flex;
  align-items: center;
  overflow: hidden;
  background: rgba(99, 102, 241, 0.05);
  border-top: 1px solid rgba(99, 102, 241, 0.12);
  border-bottom: 1px solid rgba(99, 102, 241, 0.12);
  height: 44px;
  width: 100%;
}
.sp-ticker-label {
  flex-shrink: 0;
  padding: 4px 14px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 0 8px 8px 0;
  margin-right: 20px;
  animation: tickerLabelPulse 2s ease-in-out infinite;
}
@keyframes tickerLabelPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99,102,241,0.4); }
  50%       { box-shadow: 0 0 0 6px rgba(99,102,241,0); }
}
.sp-ticker-track {
  display: flex;
  gap: 64px;
  white-space: nowrap;
  animation: spTickerScroll 20s linear infinite;
}
.sp-ticker-track:hover {
  animation-play-state: paused;
}
.sp-ticker-item {
  font-size: 13px;
  font-weight: 600;
  color: #94a3b8;
  transition: color 0.2s;
}
.sp-ticker-item:hover {
  color: #e2e8f0;
}
@keyframes spTickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* =============================================
   NEW COMPONENT STYLES — span.html additions
   ============================================= */

/* --- Neon Glow Text --- */
.sp-neon {
  font-weight: 800;
  letter-spacing: 2px;
  font-family: 'Syne', sans-serif;
}
.sp-neon-cyan {
  color: #22d3ee;
  text-shadow: 0 0 8px #22d3ee, 0 0 20px #22d3ee, 0 0 40px #06b6d4;
}
.sp-neon-purple {
  color: #c084fc;
  text-shadow: 0 0 8px #c084fc, 0 0 20px #a855f7, 0 0 40px #7c3aed;
}
.sp-neon-green {
  color: #4ade80;
  text-shadow: 0 0 8px #4ade80, 0 0 20px #22c55e, 0 0 40px #16a34a;
}

/* --- Inline Progress Label --- */
.sp-prog-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.sp-prog-label {
  width: 64px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
}
.sp-prog-bar-wrap {
  flex: 1;
  height: 7px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 99px;
  overflow: hidden;
}
.sp-prog-bar {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  position: relative;
  overflow: hidden;
}
.sp-prog-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  animation: shimSpan 2s infinite;
}
@keyframes shimSpan {
  from { transform: translateX(-100%); }
  to   { transform: translateX(200%); }
}
.sp-prog-pct {
  font-size: 12px;
  font-weight: 800;
  width: 34px;
  text-align: right;
  color: #e2e8f0;
  flex-shrink: 0;
}

/* --- Avatar Name Chip --- */
.sp-avatar-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 4px;
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #a5b4fc;
  cursor: default;
  transition: all 0.25s ease;
  text-decoration: none;
}
.sp-avatar-chip img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.sp-avatar-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(99,102,241,0.2);
}
.sp-chip-green {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.25);
  color: #6ee7b7;
}
.sp-chip-green:hover { box-shadow: 0 4px 14px rgba(16,185,129,0.2); }
.sp-chip-purple {
  background: rgba(168, 85, 247, 0.08);
  border-color: rgba(168, 85, 247, 0.25);
  color: #d8b4fe;
}
.sp-chip-purple:hover { box-shadow: 0 4px 14px rgba(168,85,247,0.2); }
.sp-chip-dark {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  color: #94a3b8;
}

/* --- Countdown Timer --- */
.sp-countdown {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sp-cd-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 14px;
  padding: 10px 16px;
  min-width: 64px;
}
.sp-cd-num {
  font-size: 28px;
  font-weight: 800;
  font-family: 'Syne', sans-serif;
  line-height: 1;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: transform 0.15s ease;
}
.sp-cd-lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #64748b;
  margin-top: 2px;
}
.sp-cd-sep {
  font-size: 22px;
  font-weight: 800;
  color: #6366f1;
  line-height: 1;
  margin-bottom: 14px;
  opacity: 0.7;
}

/* --- Marquee Ticker --- */
.sp-ticker-wrap {
  display: flex;
  align-items: center;
  overflow: hidden;
  background: rgba(99, 102, 241, 0.05);
  border-top: 1px solid rgba(99, 102, 241, 0.12);
  border-bottom: 1px solid rgba(99, 102, 241, 0.12);
  height: 44px;
  width: 100%;
}
.sp-ticker-label {
  flex-shrink: 0;
  padding: 4px 14px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 0 8px 8px 0;
  margin-right: 20px;
  animation: tickerLabelPulse 2s ease-in-out infinite;
}
@keyframes tickerLabelPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99,102,241,0.4); }
  50%       { box-shadow: 0 0 0 6px rgba(99,102,241,0); }
}
.sp-ticker-track {
  display: flex;
  gap: 64px;
  white-space: nowrap;
  animation: spTickerScroll 20s linear infinite;
}
.sp-ticker-track:hover {
  animation-play-state: paused;
}
.sp-ticker-item {
  font-size: 13px;
  font-weight: 600;
  color: #94a3b8;
  transition: color 0.2s;
}
.sp-ticker-item:hover {
  color: #e2e8f0;
}
@keyframes spTickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* =============================================
   NEW COMPONENT STYLES — span.html additions
   ============================================= */

/* --- Neon Glow Text --- */
.sp-neon {
  font-weight: 800;
  letter-spacing: 2px;
  font-family: 'Syne', sans-serif;
}
.sp-neon-cyan {
  color: #22d3ee;
  text-shadow: 0 0 8px #22d3ee, 0 0 20px #22d3ee, 0 0 40px #06b6d4;
}
.sp-neon-purple {
  color: #c084fc;
  text-shadow: 0 0 8px #c084fc, 0 0 20px #a855f7, 0 0 40px #7c3aed;
}
.sp-neon-green {
  color: #4ade80;
  text-shadow: 0 0 8px #4ade80, 0 0 20px #22c55e, 0 0 40px #16a34a;
}

/* --- Inline Progress Label --- */
.sp-prog-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.sp-prog-label {
  width: 64px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
}
.sp-prog-bar-wrap {
  flex: 1;
  height: 7px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 99px;
  overflow: hidden;
}
.sp-prog-bar {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  position: relative;
  overflow: hidden;
}
.sp-prog-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  animation: shimSpan 2s infinite;
}
@keyframes shimSpan {
  from { transform: translateX(-100%); }
  to   { transform: translateX(200%); }
}
.sp-prog-pct {
  font-size: 12px;
  font-weight: 800;
  width: 34px;
  text-align: right;
  color: #e2e8f0;
  flex-shrink: 0;
}

/* --- Avatar Name Chip --- */
.sp-avatar-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 4px;
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #a5b4fc;
  cursor: default;
  transition: all 0.25s ease;
  text-decoration: none;
}
.sp-avatar-chip img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.sp-avatar-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(99,102,241,0.2);
}
.sp-chip-green {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.25);
  color: #6ee7b7;
}
.sp-chip-green:hover { box-shadow: 0 4px 14px rgba(16,185,129,0.2); }
.sp-chip-purple {
  background: rgba(168, 85, 247, 0.08);
  border-color: rgba(168, 85, 247, 0.25);
  color: #d8b4fe;
}
.sp-chip-purple:hover { box-shadow: 0 4px 14px rgba(168,85,247,0.2); }
.sp-chip-dark {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  color: #94a3b8;
}

/* --- Countdown Timer --- */
.sp-countdown {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sp-cd-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 14px;
  padding: 10px 16px;
  min-width: 64px;
}
.sp-cd-num {
  font-size: 28px;
  font-weight: 800;
  font-family: 'Syne', sans-serif;
  line-height: 1;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: transform 0.15s ease;
}
.sp-cd-lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #64748b;
  margin-top: 2px;
}
.sp-cd-sep {
  font-size: 22px;
  font-weight: 800;
  color: #6366f1;
  line-height: 1;
  margin-bottom: 14px;
  opacity: 0.7;
}

/* --- Marquee Ticker --- */
.sp-ticker-wrap {
  display: flex;
  align-items: center;
  overflow: hidden;
  background: rgba(99, 102, 241, 0.05);
  border-top: 1px solid rgba(99, 102, 241, 0.12);
  border-bottom: 1px solid rgba(99, 102, 241, 0.12);
  height: 44px;
  width: 100%;
}
.sp-ticker-label {
  flex-shrink: 0;
  padding: 4px 14px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 0 8px 8px 0;
  margin-right: 20px;
  animation: tickerLabelPulse 2s ease-in-out infinite;
}
@keyframes tickerLabelPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99,102,241,0.4); }
  50%       { box-shadow: 0 0 0 6px rgba(99,102,241,0); }
}
.sp-ticker-track {
  display: flex;
  gap: 64px;
  white-space: nowrap;
  animation: spTickerScroll 20s linear infinite;
}
.sp-ticker-track:hover {
  animation-play-state: paused;
}
.sp-ticker-item {
  font-size: 13px;
  font-weight: 600;
  color: #94a3b8;
  transition: color 0.2s;
}
.sp-ticker-item:hover {
  color: #e2e8f0;
}
@keyframes spTickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}