:root {
  --background: 150 24% 98%;
  --foreground: 164 35% 8%;
  --primary: 150 78% 38%;
  --primary-foreground: 0 0% 100%;
  --accent: 174 72% 42%;
  --secondary: 150 18% 94%;
  --muted: 150 13% 91%;
  --muted-foreground: 158 11% 42%;
  --destructive: 0 74% 54%;
  --border: 150 20% 86%;
  --card: 0 0% 100%;
  --nav: 160 36% 7%;
  --shadow-sm: 0 8px 22px rgba(8, 28, 20, .07);
  --shadow-md: 0 16px 40px rgba(8, 28, 20, .10);
  --shadow-lg: 0 24px 70px rgba(8, 28, 20, .16);
  --transition-fast: 160ms ease;
  --transition-smooth: 320ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 28px;
}
.dark {
  --background: 160 28% 7%;
  --foreground: 150 28% 94%;
  --primary: 148 74% 48%;
  --primary-foreground: 160 30% 5%;
  --accent: 174 75% 48%;
  --secondary: 160 22% 12%;
  --muted: 160 18% 16%;
  --muted-foreground: 154 12% 68%;
  --destructive: 0 70% 58%;
  --border: 160 18% 20%;
  --card: 160 25% 10%;
  --nav: 160 42% 4%;
  --shadow-sm: 0 8px 22px rgba(0,0,0,.24);
  --shadow-md: 0 16px 40px rgba(0,0,0,.32);
  --shadow-lg: 0 24px 70px rgba(0,0,0,.44);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: hsl(var(--background)); color: hsl(var(--foreground)); }
a { text-decoration: none; color: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
input, select, textarea { font-size: max(16px, 1rem); }
.section { width: min(100% - 28px, 1180px); margin-inline: auto; }
.tap { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; transition: var(--transition-fast); }
.card { border: 1px solid hsl(var(--border) / .85); background: hsl(var(--card) / .82); border-radius: var(--radius-lg); padding: 12px; box-shadow: var(--shadow-sm); backdrop-filter: blur(14px); transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-fast); }
.card:hover { transform: translateY(-5px) scale(1.015); box-shadow: 0 24px 56px hsl(var(--primary) / .16); border-color: hsl(var(--primary) / .35); }
.pill { display: inline-flex; min-height: 30px; align-items: center; border-radius: 999px; background: hsl(var(--primary) / .12); color: hsl(var(--primary)); padding: 0 10px; font-size: 12px; font-weight: 800; }
.section-title { font-size: 1.03rem; line-height: 1.2; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.btn-white, .btn-ghost { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 0 22px; font-weight: 950; transition: var(--transition-smooth); }
.btn-white { background: white; color: hsl(var(--primary)); box-shadow: 0 18px 42px rgba(0,0,0,.16); }
.btn-ghost { border: 1px solid rgba(255,255,255,.32); background: rgba(255,255,255,.12); color: white; backdrop-filter: blur(12px); }
.btn-white:hover, .btn-ghost:hover { transform: translateY(-2px) scale(1.02); }
.glass { border: 1px solid hsl(var(--border) / .8); border-radius: var(--radius-lg); background: hsl(var(--card) / .72); padding: 20px; box-shadow: var(--shadow-sm); backdrop-filter: blur(18px); }
.icon-glow { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 20px; background: hsl(var(--primary) / .13); color: hsl(var(--primary)); box-shadow: 0 0 26px hsl(var(--primary) / .22); flex: none; }
.ad-card { min-height: 122px; display: grid; place-items: center; text-align: center; border: 1px dashed hsl(var(--border)); border-radius: var(--radius-lg); background: repeating-linear-gradient(135deg, hsl(var(--secondary)), hsl(var(--secondary)) 10px, hsl(var(--muted)) 10px, hsl(var(--muted)) 20px); font-weight: 950; color: hsl(var(--muted-foreground)); }
.ad-card span { font-size: 12px; font-weight: 700; }
.stat-card { min-height: 94px; display: grid; place-items: center; gap: 3px; border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); background: hsl(var(--card) / .82); box-shadow: var(--shadow-sm); text-align: center; color: hsl(var(--primary)); }
.stat-card strong { display: block; font-size: 1.12rem; color: hsl(var(--foreground)); font-weight: 950; }
.stat-card span { font-size: 12px; font-weight: 800; color: hsl(var(--muted-foreground)); }
.mobile-shot { min-width: 170px; height: 330px; border-radius: 30px; padding: 16px; box-shadow: var(--shadow-lg); color: white; display: flex; flex-direction: column; justify-content: space-between; border: 7px solid rgba(10,10,10,.88); }
.mobile-shot span { font-size: 44px; }
.mobile-shot p { font-weight: 950; font-size: 1.15rem; }
.mobile-shot small { opacity: .8; }
.social, .page-btn { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; border-radius: 16px; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--primary)); transition: var(--transition-fast); }
.social:hover, .page-btn:hover, .page-btn.active { background: hsl(var(--primary)); color: white; transform: translateY(-2px); }
.empty-state { border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); padding: 34px; text-align: center; background: hsl(var(--card)); box-shadow: var(--shadow-sm); font-weight: 850; }
.loader-card { min-height: 170px; display: grid; place-items: center; border-radius: var(--radius-lg); background: hsl(var(--card)); border: 1px solid hsl(var(--border)); box-shadow: var(--shadow-sm); }
.loader-card span { width: 12px; height: 12px; margin: 4px; display: inline-block; border-radius: 999px; background: hsl(var(--primary)); animation: bounce 900ms infinite alternate; }
.loader-card span:nth-child(2) { animation-delay: 130ms; }
.loader-card span:nth-child(3) { animation-delay: 260ms; }
.loader-card p { color: hsl(var(--muted-foreground)); font-weight: 800; }
.skeleton { position: relative; overflow: hidden; background: hsl(var(--muted)); }
.skeleton::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, hsl(var(--card) / .75), transparent); animation: shimmer 1.2s infinite; }
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.animated-gradient { background-size: 180% 180%; animation: gradientShift 8s ease infinite; }
.animate-in { animation: fadeSlide .34s ease both; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@keyframes bounce { to { transform: translateY(-12px); opacity: .55; } }
@keyframes shimmer { 100% { transform: translateX(100%); } }
@keyframes gradientShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes fadeSlide { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 768px) { .section { width: min(100% - 48px, 1180px); } }