/* ========================================
   OnlyFans Stats - Bundled CSS
   All styles in one file for performance
   ======================================== */

/* Self-hosted Inter font (latin) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- base/_variables.css --- */
/* ========================================
   Design Tokens & CSS Variables
   ======================================== */

:root {
    /* Brand Colors */
    --primary: #00AFF0;
    --primary-dark: #0088CC;
    --primary-light: #E6F7FF;
    --primary-rgb: 0, 175, 240;

    /* Neutral Colors */
    --text: #1a1a2e;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --background: #f8fafc;
    --surface: #ffffff;
    --border: #e5e7eb;
    --border-light: #f3f4f6;

    /* Semantic Colors */
    --success: #10b981;
    --success-light: #d1fae5;
    --success-dark: #059669;
    --danger: #ef4444;
    --danger-light: #fee2e2;
    --warning: #f59e0b;
    --warning-light: #fef3c7;
    --info: #3b82f6;
    --info-light: #dbeafe;

    /* Accent Colors */
    --blue: #3b82f6;
    --orange: #f97316;
    --green: #22c55e;
    --purple: #8b5cf6;
    --pink: #ec4899;

    /* Gold/Silver/Bronze for rankings */
    --gold: #FFD700;
    --gold-gradient: linear-gradient(135deg, #FFD700, #FFA500);
    --silver: #C0C0C0;
    --silver-gradient: linear-gradient(135deg, #C0C0C0, #A8A8A8);
    --bronze: #CD7F32;
    --bronze-gradient: linear-gradient(135deg, #CD7F32, #B8860B);

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-primary: 0 4px 14px 0 rgba(0, 175, 240, 0.39);

    /* Spacing Scale */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;
    --spacing-4xl: 96px;

    /* Border Radius */
    --radius-sm: 4px;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition: 200ms ease;
    --transition-slow: 300ms ease;
    --transition-bounce: 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Z-Index Scale */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-tooltip: 600;
    --z-toast: 700;
    --z-mobile-backdrop: 998;
    --z-mobile-menu: 999;
    --z-mobile-toggle: 1000;

    /* Header Height */
    --header-height: 70px;

    /* Container Width */
    --container-max: 1280px;

    /* Font Sizes */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;

    /* Font Weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;

    /* Line Heights */
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;

    /* Breakpoints (for reference in JS) */
    --bp-sm: 480px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1200px;
    --bp-2xl: 1440px;
}

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
    :root.auto-dark {
        --text: #f8fafc;
        --text-secondary: #9ca3af;
        --text-muted: #6b7280;
        --background: #0f172a;
        --surface: #1e293b;
        --border: #334155;
        --border-light: #1e293b;
    }
}

/* --- base/_reset.css --- */
/* ========================================
   CSS Reset
   ======================================== */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background: var(--background);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

main {
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    font-family: inherit;
    cursor: pointer;
}

ul, ol {
    list-style: none;
}

/* Accessibility: Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- base/_typography.css --- */
/* ========================================
   Typography System
   ======================================== */

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    color: var(--text);
}

h1 {
    font-size: var(--text-4xl);
    font-weight: var(--font-extrabold);
}

h2 {
    font-size: var(--text-2xl);
}

h3 {
    font-size: var(--text-xl);
}

h4 {
    font-size: var(--text-lg);
}

h5 {
    font-size: var(--text-base);
}

h6 {
    font-size: var(--text-sm);
}

/* Paragraph */
p {
    margin-bottom: 1em;
}

p:last-child {
    margin-bottom: 0;
}

/* Links */
a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--primary);
}

/* Strong & Bold */
strong, b {
    font-weight: var(--font-semibold);
}

/* Small */
small {
    font-size: var(--text-sm);
}

/* Code */
code {
    font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
    font-size: 0.875em;
    padding: 2px 6px;
    background: var(--border-light);
    border-radius: var(--radius-sm);
}

/* Blockquote */
blockquote {
    padding-left: var(--spacing-lg);
    border-left: 4px solid var(--primary);
    font-style: italic;
    color: var(--text-secondary);
}

/* Lists */
ul, ol {
    padding-left: var(--spacing-lg);
}

li {
    margin-bottom: var(--spacing-xs);
}

/* Selection */
::selection {
    background: var(--primary);
    color: white;
}

/* Focus visible */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Text colors */
.text-primary { color: var(--primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }

/* Text sizes */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }

/* Font weights */
.font-normal { font-weight: var(--font-normal); }
.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold { font-weight: var(--font-bold); }

/* --- base/_utilities.css --- */
/* ========================================
   Utility Classes
   ======================================== */

/* Display */
.hidden { display: none !important; }
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }

/* Flex utilities */
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }

/* Gap */
.gap-xs { gap: var(--spacing-xs); }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }
.gap-xl { gap: var(--spacing-xl); }

/* Text alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Margin */
.m-0 { margin: 0; }
.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }
.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Padding */
.p-0 { padding: 0; }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }

/* Width & Height */
.w-full { width: 100%; }
.h-full { height: 100%; }
.min-w-0 { min-width: 0; }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.inset-0 { inset: 0; }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

/* Border radius */
.rounded { border-radius: var(--radius); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* Shadows */
.shadow { box-shadow: var(--shadow); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* Background */
.bg-primary { background-color: var(--primary); }
.bg-surface { background-color: var(--surface); }
.bg-background { background-color: var(--background); }

/* Cursor */
.cursor-pointer { cursor: pointer; }

/* Transitions */
.transition { transition: all var(--transition); }
.transition-fast { transition: all var(--transition-fast); }

/* Truncate text */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus ring */
.focus-ring:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Aspect ratios */
.aspect-square { aspect-ratio: 1; }
.aspect-video { aspect-ratio: 16/9; }
.aspect-portrait { aspect-ratio: 3/4; }

/* Object fit */
.object-cover { object-fit: cover; }
.object-contain { object-fit: contain; }

/* Pointer events */
.pointer-events-none { pointer-events: none; }

/* User select */
.select-none { user-select: none; }

/* Opacity */
.opacity-0 { opacity: 0; }
.opacity-50 { opacity: 0.5; }
.opacity-100 { opacity: 1; }

/* Z-index */
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-50 { z-index: 50; }

/* Whitespace */
.whitespace-nowrap { white-space: nowrap; }

/* Touch action for better mobile performance */
.touch-manipulation { touch-action: manipulation; }

/* ========================================
   Responsive Utilities
   ======================================== */

/* Responsive visibility */
@media (max-width: 479px) {
    .hide-xs { display: none !important; }
}

@media (min-width: 480px) and (max-width: 767px) {
    .hide-sm { display: none !important; }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .hide-md { display: none !important; }
}

@media (min-width: 1024px) {
    .hide-lg { display: none !important; }
}

@media (max-width: 767px) {
    .hide-mobile { display: none !important; }
}

@media (min-width: 768px) {
    .hide-desktop { display: none !important; }
}

/* Responsive text */
@media (max-width: 767px) {
    .text-sm-xs { font-size: var(--text-xs) !important; }
    .text-sm-sm { font-size: var(--text-sm) !important; }
    .text-sm-base { font-size: var(--text-base) !important; }
}

/* Touch-friendly sizing */
.touch-target {
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Safe area padding for mobile */
@supports (padding: max(0px)) {
    .safe-area-bottom {
        padding-bottom: max(var(--spacing-lg), env(safe-area-inset-bottom));
    }

    .safe-area-top {
        padding-top: max(var(--spacing-lg), env(safe-area-inset-top));
    }
}

/* Scrolling optimization */
.scroll-smooth {
    scroll-behavior: smooth;
}

.scroll-snap-x {
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.scroll-snap-item {
    scroll-snap-align: start;
}

/* Prevent content shift */
.contain-layout {
    contain: layout;
}

.contain-paint {
    contain: paint;
}

.contain-strict {
    contain: strict;
}

/* Animation visibility */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .animate-on-scroll {
        opacity: 1;
        transform: none;
    }
}

/* --- layout/_container.css --- */
/* ========================================
   Container & Layout
   ======================================== */

/* Container */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.container-sm {
    max-width: 800px;
}

.container-lg {
    max-width: 1440px;
}

.container-fluid {
    max-width: none;
}

/* Main Content */
.main {
    min-height: calc(100vh - var(--header-height) - 200px);
}

/* Sections */
.section {
    padding: var(--spacing-3xl) 0;
}

.section-alt {
    background: var(--surface);
}

.section-dark {
    background: #1a1a2e;
    color: white;
}

.section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: var(--spacing-xl);
    gap: var(--spacing-lg);
}

.section-header h2 {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--text);
    margin: 0;
}

.section-header p {
    color: var(--text-secondary);
    margin-top: var(--spacing-xs);
    margin-bottom: 0;
}

.section-header.centered {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.section-cta {
    text-align: center;
    margin-top: var(--spacing-xl);
}

/* Breadcrumb */
.breadcrumb {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: var(--spacing-md) 0;
}

.breadcrumb ol {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    list-style: none;
    font-size: var(--text-sm);
    padding: 0;
    margin: 0;
}

.breadcrumb li {
    display: flex;
    align-items: center;
}

.breadcrumb li:not(:last-child)::after {
    content: '/';
    margin: 0 var(--spacing-sm);
    color: var(--text-muted);
}

.breadcrumb a {
    color: var(--text-secondary);
    transition: color var(--transition-fast);
}

.breadcrumb a:hover {
    color: var(--primary);
}

.breadcrumb li:last-child span {
    color: var(--text);
    font-weight: var(--font-medium);
}

/* Hero Section */
.hero {
    position: relative;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    padding: var(--spacing-3xl) 0;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2300AFF0' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
}

.hero-content {
    position: relative;
    text-align: center;
    color: white;
}

.hero h1 {
    font-size: var(--text-5xl);
    font-weight: var(--font-extrabold);
    line-height: var(--leading-tight);
    margin-bottom: var(--spacing-md);
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2);
}

.hero p {
    font-size: var(--text-lg);
    color: rgba(255, 255, 255, 0.9);
    max-width: 600px;
    margin: 0 auto var(--spacing-xl);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.hero-stats {
    display: flex;
    justify-content: center;
    gap: var(--spacing-2xl);
    margin-top: var(--spacing-xl);
}

.hero-stat {
    text-align: center;
}

.hero-stat .stat-number {
    display: block;
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--primary);
}

.hero-stat .stat-label {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.6);
}

/* Quick Links Section */
.quick-links {
    background: var(--surface);
    padding: var(--spacing-xl) 0;
    border-bottom: 1px solid var(--border);
}

/* Sidebar Layout */
.layout-sidebar {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--spacing-xl);
}

.sidebar {
    position: sticky;
    top: calc(var(--header-height) + var(--spacing-lg));
    align-self: start;
}

/* Info Items */
.info-item {
    padding: var(--spacing-md);
    background: var(--background);
    border-radius: var(--radius);
}

.info-label {
    display: block;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
}

.info-value {
    font-weight: var(--font-semibold);
    color: var(--text);
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: var(--spacing-3xl);
}

.empty-state svg,
.empty-state i {
    color: var(--text-muted);
    margin-bottom: var(--spacing-lg);
}

.empty-state h3 {
    font-size: var(--text-xl);
    color: var(--text);
    margin-bottom: var(--spacing-sm);
}

.empty-state p {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
}

/* Responsive */
@media (max-width: 768px) {
    .container {
        padding: 0 var(--spacing-md);
    }

    .hero h1 {
        font-size: var(--text-3xl);
    }

    .hero-stats {
        flex-wrap: wrap;
        gap: var(--spacing-lg);
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .layout-sidebar {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: static;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 var(--spacing-md);
    }

    .section {
        padding: var(--spacing-2xl) 0;
    }
}

/* --- layout/_header.css --- */
/* ========================================
   Header & Navigation
   ======================================== */

.header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    height: var(--header-height);
    display: flex;
    align-items: center;
}

.header .container {
    display: flex;
    align-items: center;
    height: 100%;
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    gap: var(--spacing-lg);
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text);
    text-decoration: none;
    flex-shrink: 0;
}

.logo span {
    color: var(--text);
}

.logo strong {
    color: var(--primary);
}

.logo svg,
.logo img {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

/* Navigation Menu */
.nav-menu {
    display: flex;
    align-items: center;
    list-style: none;
    gap: var(--spacing-xs);
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: var(--spacing-sm) var(--spacing-md);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    border-radius: var(--radius);
    transition: all var(--transition);
    white-space: nowrap;
}

.nav-link i {
    transition: all var(--transition-fast);
}

.nav-link .icon-sm {
    width: 16px;
    height: 16px;
}

.nav-link .icon-xs {
    width: 12px;
    height: 12px;
    margin-left: 2px;
}

.nav-link:hover {
    color: var(--text);
    background: var(--border-light);
}

.nav-link:hover i {
    color: var(--primary);
}

.nav-link.active {
    color: var(--primary);
    background: var(--primary-light);
}

.nav-dropdown:hover .nav-link .icon-xs:last-child {
    transform: rotate(180deg);
}

/* Dropdown */
.nav-dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-sm);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all var(--transition);
    z-index: var(--z-dropdown);
}

.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu a {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-secondary);
    border-radius: var(--radius);
    transition: all var(--transition-fast);
}

.dropdown-menu a i {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.dropdown-menu a:hover {
    background: var(--primary-light);
    color: var(--primary-dark);
}

.dropdown-menu a:hover i {
    color: var(--primary);
}

.dropdown-more {
    border-top: 1px solid var(--border);
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm) !important;
    font-weight: var(--font-medium);
    justify-content: space-between;
}

/* Nav Search */
.nav-search {
    flex: 1;
    max-width: 300px;
}

/* Mobile Toggle */
.mobile-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: var(--spacing-sm);
    background: none;
    border: none;
    cursor: pointer;
    z-index: 100;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.mobile-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: all var(--transition);
    transform-origin: center;
}

.mobile-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-toggle.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.mobile-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile Navigation */
.mobile-nav-backdrop {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 98;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
}

.mobile-nav-backdrop.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Responsive */
@media (max-width: 768px) {
    .navbar {
        position: relative;
    }

    .nav-menu {
        display: flex;
        position: fixed;
        top: var(--header-height);
        left: 0;
        width: 85%;
        max-width: 320px;
        height: calc(100vh - var(--header-height));
        flex-direction: column;
        align-items: stretch;
        padding: 0;
        background: var(--surface);
        z-index: 99;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
    }

    .nav-menu.active {
        transform: translateX(0) !important;
    }

    .nav-menu > li {
        border-bottom: 1px solid var(--border-light);
    }

    .nav-menu > li:last-child {
        border-bottom: none;
    }

    .nav-link {
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: var(--text-base);
        justify-content: flex-start;
    }

    .nav-search {
        display: none;
    }

    .mobile-toggle {
        display: flex;
        order: 3;
    }

    .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        padding: 0;
        background: var(--background);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .dropdown-menu a {
        padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-2xl);
    }

    .nav-dropdown.open .dropdown-menu {
        max-height: 500px;
    }

    .mobile-nav-backdrop {
        display: block;
    }

    /* Mobile Search in Menu */
    .mobile-search {
        padding: var(--spacing-md);
        border-bottom: 1px solid var(--border);
        margin-bottom: var(--spacing-md);
        list-style: none;
    }

    .mobile-search .search-wrapper {
        position: relative;
        width: 100%;
    }

    .mobile-search .search-icon {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-muted);
        pointer-events: none;
    }

    .mobile-search .search-input {
        width: 100%;
        padding: 14px 16px 14px 44px;
        font-size: var(--text-base);
        background: var(--background);
        border: 1px solid var(--border);
        border-radius: var(--radius);
    }

    .mobile-search .search-input:focus {
        outline: none;
        border-color: var(--primary);
    }

    .mobile-search .search-results {
        position: relative;
        top: auto;
        margin-top: var(--spacing-sm);
        box-shadow: none;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        max-height: 300px;
        overflow-y: auto;
    }

    /* Dropdown arrow rotation */
    .nav-dropdown .dropdown-arrow {
        transition: transform 0.3s ease;
    }

    .nav-dropdown.open .dropdown-arrow {
        transform: rotate(180deg);
    }
}

/* Desktop only - hide mobile search */
@media (min-width: 769px) {
    .mobile-search {
        display: none !important;
    }
}

/* --- layout/_footer.css --- */
/* ========================================
   Footer
   ======================================== */

.footer {
    background: #1a1a2e;
    color: white;
    padding: var(--spacing-3xl) 0 var(--spacing-xl);
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
}

.footer-top {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--spacing-3xl);
    padding-bottom: var(--spacing-2xl);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-brand .logo {
    margin-bottom: var(--spacing-md);
    color: white;
}

.footer-brand .logo span {
    color: rgba(255, 255, 255, 0.85);
}

.footer-brand .logo strong {
    color: var(--primary);
}

.footer-brand .logo svg,
.footer-brand .logo img {
    width: 28px;
    height: 28px;
}

.footer-brand p {
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    margin: 0;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-xl);
}

.footer-col h4 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    margin-bottom: var(--spacing-md);
    color: white;
}

.footer-col h4 i {
    color: var(--primary);
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col a {
    display: block;
    padding: 6px 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--text-sm);
    transition: color var(--transition-fast);
}

.footer-col a:hover {
    color: white;
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--spacing-xl);
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.5);
}

.footer-legal {
    display: flex;
    gap: var(--spacing-lg);
}

.footer-legal a {
    color: rgba(255, 255, 255, 0.5);
    transition: color var(--transition-fast);
}

.footer-legal a:hover {
    color: white;
}

/* Trust Section in Footer */
.footer-trust {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-trust-badge {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.6);
}

.footer-trust-badge svg,
.footer-trust-badge i {
    color: var(--primary);
}

/* Footer Social Links */
.footer-social {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: white;
    transition: all var(--transition-fast);
}

.footer-social a:hover {
    background: var(--primary);
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
    .footer-top {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }

    .footer-links {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-bottom {
        flex-direction: column;
        gap: var(--spacing-md);
        text-align: center;
    }
}

@media (max-width: 480px) {
    .footer-links {
        grid-template-columns: 1fr;
    }
}

/* --- layout/_sidebar.css --- */
/* ========================================
   Sidebar
   ======================================== */

/* Profile Sidebar */
.profile-sidebar {
    position: sticky;
    top: calc(var(--header-height) + var(--spacing-lg));
    align-self: start;
}

.profile-avatar-wrapper {
    position: relative;
    margin-bottom: var(--spacing-lg);
}

.profile-avatar {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius-xl);
    object-fit: cover;
}

.profile-avatar.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    font-size: 4rem;
    font-weight: var(--font-bold);
}

.profile-verified {
    position: absolute;
    bottom: var(--spacing-md);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    background: var(--surface);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--primary);
}

.profile-actions {
    margin-bottom: var(--spacing-lg);
}

.profile-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    background: var(--background);
    border-radius: var(--radius);
    margin-top: var(--spacing-md);
}

.profile-price.free .price-value {
    color: var(--success);
}

.price-label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.price-value {
    font-weight: var(--font-bold);
    color: var(--text);
}

.profile-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

/* Profile Main Content */
.profile-main {
    min-width: 0;
}

.profile-header {
    margin-bottom: var(--spacing-xl);
}

.profile-header h1 {
    font-size: var(--text-4xl);
    font-weight: var(--font-bold);
    color: var(--text);
    margin-bottom: var(--spacing-xs);
}

.profile-username {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
}

.profile-bio {
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

/* Filter Sidebar */
.filter-sidebar {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border: 1px solid var(--border);
}

.filter-sidebar-title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border);
}

.filter-group {
    margin-bottom: var(--spacing-lg);
}

.filter-group:last-child {
    margin-bottom: 0;
}

.filter-group-title {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Responsive */
@media (max-width: 1024px) {
    .profile-sidebar {
        position: static;
        display: grid;
        grid-template-columns: auto 1fr;
        gap: var(--spacing-xl);
        align-items: start;
    }

    .profile-avatar-wrapper {
        width: 200px;
        margin-bottom: 0;
    }
}

@media (max-width: 768px) {
    .profile-sidebar {
        grid-template-columns: 1fr;
    }

    .profile-avatar-wrapper {
        width: 150px;
        margin: 0 auto var(--spacing-lg);
    }
}

/* --- layout/_grid.css --- */
/* ========================================
   Grid System
   ======================================== */

/* Base Grid */
.grid {
    display: grid;
    gap: var(--spacing-lg);
}

/* Column variations */
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
.grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

/* Auto-fill grids */
.grid-auto-fill-sm { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.grid-auto-fill-md { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid-auto-fill-lg { grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); }

/* Specific grids */
.creators-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
}

.creators-grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-md);
}

.price-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
}

.countries-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-md);
}

.quick-links-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-sm);
}

.top-lists-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
}

.location-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
}

.profile-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--spacing-2xl);
}

.profile-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.related-rankings-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
}

.ranking-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-lg);
}

.trending-hot-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-md);
}

.insight-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
}

/* Responsive grids */
@media (min-width: 1200px) {
    .ranking-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .ranking-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1024px) {
    .creators-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .related-rankings-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .profile-grid {
        grid-template-columns: 1fr;
    }

    .trending-hot-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .insight-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .creators-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .quick-links-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .price-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .faq-grid {
        grid-template-columns: 1fr;
    }

    .top-lists-grid {
        grid-template-columns: 1fr;
    }

    .location-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .trending-hot-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .insight-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .creators-grid,
    .quick-links-grid,
    .price-grid,
    .related-rankings-grid {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .profile-info-grid {
        grid-template-columns: 1fr;
    }

    .location-grid {
        grid-template-columns: 1fr;
    }

    .trending-hot-grid {
        grid-template-columns: 1fr;
    }
}

/* --- components/_buttons.css --- */
/* ========================================
   Buttons
   ======================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 12px 24px;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    line-height: 1;
    border-radius: var(--radius);
    border: none;
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
    white-space: nowrap;
    touch-action: manipulation;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Primary Button */
.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-primary:hover:not(:disabled) {
    background: var(--primary-dark);
    box-shadow: var(--shadow-primary);
}

.btn-primary:active:not(:disabled) {
    transform: scale(0.98);
}

/* Secondary Button */
.btn-secondary {
    background: var(--text);
    color: white;
}

.btn-secondary:hover:not(:disabled) {
    background: #2d2d44;
}

/* Outline Button */
.btn-outline {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
}

.btn-outline:hover:not(:disabled) {
    background: var(--background);
    border-color: var(--text-secondary);
}

/* Ghost Button */
.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
}

.btn-ghost:hover:not(:disabled) {
    background: var(--border-light);
    color: var(--text);
}

/* Success Button */
.btn-success {
    background: var(--success);
    color: white;
}

.btn-success:hover:not(:disabled) {
    background: var(--success-dark);
}

/* Danger Button */
.btn-danger {
    background: var(--danger);
    color: white;
}

.btn-danger:hover:not(:disabled) {
    background: #dc2626;
}

/* Button Sizes */
.btn-sm {
    padding: 8px 16px;
    font-size: var(--text-xs);
}

.btn-lg {
    padding: 16px 32px;
    font-size: var(--text-base);
}

/* Block Button */
.btn-block {
    display: flex;
    width: 100%;
}

/* Icon Button */
.btn-icon {
    padding: var(--spacing-sm);
    border-radius: var(--radius);
}

.btn-icon.btn-sm {
    padding: 6px;
}

.btn-icon.btn-lg {
    padding: var(--spacing-md);
}

/* Button Group */
.btn-group {
    display: inline-flex;
}

.btn-group .btn {
    border-radius: 0;
}

.btn-group .btn:first-child {
    border-radius: var(--radius) 0 0 var(--radius);
}

.btn-group .btn:last-child {
    border-radius: 0 var(--radius) var(--radius) 0;
}

.btn-group .btn:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

/* Loading State */
.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin: -8px 0 0 -8px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.6s linear infinite;
}

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

/* --- components/_cards.css --- */
/* ========================================
   Cards
   ======================================== */

/* Base Card */
.card {
    background: var(--surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: all var(--transition);
}

.card:hover {
    box-shadow: var(--shadow-lg);
}

.card-body {
    padding: var(--spacing-lg);
}

.card-header {
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--border-light);
}

.card-footer {
    padding: var(--spacing-lg);
    border-top: 1px solid var(--border-light);
}

/* Creator Card - Large Thumbnail Style */
.creator-card {
    position: relative;
    background: var(--surface);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: all var(--transition);
    contain: layout style;
}

.creator-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.creator-rank {
    position: absolute;
    top: var(--spacing-md);
    left: var(--spacing-md);
    padding: 8px 14px;
    background: linear-gradient(135deg, rgba(0,0,0,0.8), rgba(0,0,0,0.6));
    backdrop-filter: blur(4px);
    color: white;
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    border-radius: var(--radius-full);
    z-index: 10;
}

/* Rank Change Badge */
.rank-change-badge {
    position: absolute;
    top: var(--spacing-md);
    left: 70px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 6px 10px;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    border-radius: var(--radius-full);
    backdrop-filter: blur(4px);
    z-index: 10;
}

.rank-change-badge.up {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.9), rgba(5, 150, 105, 0.9));
    color: white;
}

.rank-change-badge.down {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.9), rgba(220, 38, 38, 0.9));
    color: white;
}

.rank-change-badge i,
.rank-change-badge svg {
    width: 12px;
    height: 12px;
}

.creator-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.creator-avatar {
    position: relative;
    width: 100%;
    aspect-ratio: 3/4;
    background: var(--border-light);
    overflow: hidden;
}

.creator-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform var(--transition-slow);
}

.creator-card:hover .creator-avatar img {
    transform: scale(1.05);
}

.creator-avatar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 40%, transparent 100%);
    pointer-events: none;
}

.avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    font-size: 4rem;
    font-weight: var(--font-bold);
    text-transform: uppercase;
}

.verified-badge {
    position: absolute;
    bottom: var(--spacing-md);
    right: var(--spacing-md);
    width: 28px;
    height: 28px;
    background: var(--surface);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    z-index: 5;
}

.verified-badge svg,
.verified-badge i {
    width: 18px;
    height: 18px;
    color: var(--primary);
}

.creator-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--spacing-md);
    padding-top: var(--spacing-xl);
    z-index: 5;
    color: white;
}

.creator-info h3 {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8), 0 2px 8px rgba(0,0,0,0.5);
}

.creator-username {
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.95);
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

/* Price Overlay in Thumbnail */
.creator-price-overlay {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    z-index: 10;
}

.creator-price-overlay .price {
    display: inline-block;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    color: white;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    border-radius: var(--radius);
}

.creator-price-overlay .price.free {
    background: var(--success);
}

/* Compact Creator Card - Stats inside overlay */
.creator-card.compact .creator-info {
    padding-bottom: var(--spacing-md);
}

.creator-stats-inline {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xs);
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.9);
}

.creator-stats-inline span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.creator-stats-inline i,
.creator-stats-inline svg {
    width: 12px;
    height: 12px;
    opacity: 0.8;
}

/* Creator growth indicator */
.creator-growth {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: var(--spacing-xs);
    padding: 3px 8px;
    background: rgba(16, 185, 129, 0.2);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: #10b981;
    width: fit-content;
}

.creator-growth i,
.creator-growth svg {
    width: 12px;
    height: 12px;
}

/* Trending badge inside compact cards */
.creator-card.compact .trending-badge {
    position: absolute;
    top: var(--spacing-sm);
    left: var(--spacing-sm);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: linear-gradient(135deg, var(--orange), #dc2626);
    color: white;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    border-radius: var(--radius-full);
    animation: pulse-glow 2s ease-in-out infinite;
}

.creator-card.compact .trending-badge i {
    width: 14px;
    height: 14px;
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.4); }
    50% { box-shadow: 0 0 15px 5px rgba(249, 115, 22, 0.2); }
}

/* Hide separate stats and price for compact cards */
.creator-card.compact .creator-stats,
.creator-card.compact .creator-price {
    display: none;
}

.creator-stats {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    background: var(--surface);
}

.creator-stats .stat {
    display: flex;
    align-items: center;
    gap: 6px;
}

.creator-stats .stat svg,
.creator-stats .stat i {
    color: var(--primary);
    width: 16px;
    height: 16px;
}

.creator-price {
    padding: var(--spacing-md);
    padding-top: 0;
    background: var(--surface);
}

.creator-price .price {
    display: inline-block;
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--text), #2d2d44);
    color: white;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    border-radius: var(--radius);
}

.creator-price .price.free {
    background: linear-gradient(135deg, var(--success), var(--success-dark));
}

/* Stat Card */
.stat-card {
    background: var(--surface);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}

.stat-card.highlight {
    background: var(--primary-light);
    border-color: var(--primary);
}

.stat-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--background);
    border-radius: var(--radius);
    margin-bottom: var(--spacing-md);
    color: var(--primary);
}

.stat-card.highlight .stat-icon {
    background: var(--primary);
    color: white;
}

.stat-content .stat-value {
    display: block;
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--text);
}

.stat-content .stat-label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* Quick Link Card */
.quick-link-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--background);
    border-radius: var(--radius-lg);
    transition: all var(--transition);
}

.quick-link-card:hover {
    background: var(--primary-light);
    transform: translateY(-2px);
}

.quick-link-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    flex-shrink: 0;
}

.quick-link-icon.blue { background: rgba(59, 130, 246, 0.1); color: var(--blue); }
.quick-link-icon.orange { background: rgba(249, 115, 22, 0.1); color: var(--orange); }
.quick-link-icon.green { background: rgba(34, 197, 94, 0.1); color: var(--green); }
.quick-link-icon.purple { background: rgba(139, 92, 246, 0.1); color: var(--purple); }

.quick-link-text h3 {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text);
}

.quick-link-text p {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0;
}

/* Category Card */
.category-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--background);
    border-radius: var(--radius-lg);
    transition: all var(--transition);
}

.category-card:hover {
    background: var(--primary-light);
}

.category-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: white;
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    border-radius: var(--radius-lg);
    flex-shrink: 0;
}

.category-content {
    flex: 1;
    min-width: 0;
}

.category-content h3 {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text);
}

.creator-count {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.category-arrow {
    color: var(--text-muted);
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.category-card:hover .category-arrow {
    color: var(--primary);
    transform: translateX(4px);
}

/* Country Card - Legacy */
.country-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--background);
    border-radius: var(--radius-lg);
    transition: all var(--transition);
}

.country-card:hover {
    background: var(--primary-light);
}

.country-flag {
    font-size: 2rem;
    flex-shrink: 0;
}

.country-name {
    font-weight: var(--font-semibold);
    color: var(--text);
}

.country-count {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* Country Card - New Design */
.country-card-new {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    transition: all var(--transition);
    text-decoration: none;
}

.country-card-new:hover {
    border-color: var(--primary);
    background: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.country-flag-lg {
    font-size: 2.5rem;
    line-height: 1;
    flex-shrink: 0;
}

.country-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.country-name-new {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.country-creators {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* Countries Grid - New */
.countries-grid-new {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
}

@media (max-width: 1024px) {
    .countries-grid-new {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .countries-grid-new {
        grid-template-columns: repeat(2, 1fr);
    }

    .country-flag-lg {
        font-size: 2rem;
    }

    .country-name-new {
        font-size: var(--text-sm);
    }
}

@media (max-width: 480px) {
    .countries-grid-new {
        grid-template-columns: 1fr;
    }
}

/* Country Show More */
.country-hidden {
    display: none;
}

.countries-grid-new.expanded .country-hidden {
    display: flex;
}

.btn-show-more {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.btn-show-more .show-less-text,
.btn-show-more .show-less-icon {
    display: none;
}

.btn-show-more[data-expanded="true"] .show-more-text,
.btn-show-more[data-expanded="true"] .show-more-icon {
    display: none;
}

.btn-show-more[data-expanded="true"] .show-less-text,
.btn-show-more[data-expanded="true"] .show-less-icon {
    display: inline-flex;
}

/* Price Card */
.price-card {
    position: relative;
    padding: var(--spacing-xl);
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius-xl);
    text-align: center;
    transition: all var(--transition);
}

.price-card:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
}

.price-card.free {
    border-color: var(--success);
    background: var(--success-light);
}

.price-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 12px;
    background: var(--success);
    color: white;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    border-radius: var(--radius-full);
}

.price-card h3 {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text);
    margin-bottom: var(--spacing-sm);
}

.price-card p {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
}

.price-tag {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--primary);
}

/* Insight Card (New - Analytics) */
.insight-card {
    background: var(--surface);
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg);
    border: 1px solid var(--border);
    transition: all var(--transition);
}

.insight-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-lg);
}

.insight-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-md);
}

.insight-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
}

.insight-badge {
    padding: 4px 10px;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    border-radius: var(--radius-full);
}

.insight-value {
    font-size: var(--text-3xl);
    font-weight: var(--font-extrabold);
    color: var(--text);
    line-height: 1;
    margin-bottom: var(--spacing-xs);
}

.insight-label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.insight-trend {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: var(--spacing-md);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
}

.insight-trend.up { color: var(--success); }
.insight-trend.down { color: var(--danger); }

/* Top List Card */
.top-list-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-xl);
    background: var(--surface);
    border-radius: var(--radius-xl);
    border: 2px solid var(--border);
    transition: all var(--transition);
}

.top-list-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.top-list-card.gold {
    border-color: var(--gold);
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.05), transparent);
}

.top-list-card.silver {
    border-color: var(--silver);
    background: linear-gradient(135deg, rgba(192, 192, 192, 0.05), transparent);
}

.top-list-card.bronze {
    border-color: var(--bronze);
    background: linear-gradient(135deg, rgba(205, 127, 50, 0.05), transparent);
}

.top-number {
    font-size: 3rem;
    font-weight: var(--font-extrabold);
    line-height: 1;
}

.top-list-card.gold .top-number { color: var(--gold); }
.top-list-card.silver .top-number { color: var(--silver); }
.top-list-card.bronze .top-number { color: var(--bronze); }

.top-list-content h3 {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--text);
    margin-bottom: var(--spacing-xs);
}

.top-list-content p {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0;
}

/* Location Card */
.location-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--background);
    border-radius: var(--radius-lg);
    transition: all var(--transition);
}

.location-card:hover {
    background: var(--primary-light);
    transform: translateY(-2px);
}

.location-flag {
    font-size: 2.5rem;
    flex-shrink: 0;
}

.location-content h3 {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text);
}

.location-content p {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0;
}

@media (max-width: 640px) {
    .creator-avatar {
        aspect-ratio: 1;
    }

    .avatar-placeholder {
        font-size: 2rem;
    }
}

/* --- components/_badges.css --- */
/* ========================================
   Badges
   ======================================== */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    border-radius: var(--radius-full);
    white-space: nowrap;
}

/* Badge variants */
.badge-primary {
    background: var(--primary-light);
    color: var(--primary-dark);
}

.badge-success {
    background: var(--success-light);
    color: var(--success);
}

.badge-danger {
    background: var(--danger-light);
    color: var(--danger);
}

.badge-warning {
    background: var(--warning-light);
    color: #b45309;
}

.badge-info {
    background: var(--info-light);
    color: var(--blue);
}

.badge-neutral {
    background: var(--border-light);
    color: var(--text-secondary);
}

/* Badge sizes */
.badge-sm {
    padding: 2px 6px;
    font-size: 0.6875rem;
}

.badge-lg {
    padding: 6px 14px;
    font-size: var(--text-sm);
}

/* Rank Badge */
.rank-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-md);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-align: center;
    min-width: 100px;
}

.rank-badge-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    color: white;
}

.rank-badge-icon.gold { background: var(--gold-gradient); color: #1a1a2e; }
.rank-badge-icon.silver { background: var(--silver-gradient); color: #1a1a2e; }
.rank-badge-icon.bronze { background: var(--bronze-gradient); }
.rank-badge-icon.primary { background: var(--primary); }

.rank-badge-value {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--text);
}

.rank-badge-label {
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

/* Rank Number */
.rank-number {
    display: inline-block;
    padding: 8px 14px;
    background: linear-gradient(135deg, rgba(0,0,0,0.85), rgba(0,0,0,0.65));
    backdrop-filter: blur(4px);
    color: white;
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    border-radius: var(--radius-full);
}

/* Top 3 styling */
.rank-number.gold {
    background: var(--gold-gradient);
    color: #1a1a2e;
}

.rank-number.silver {
    background: var(--silver-gradient);
    color: #1a1a2e;
}

.rank-number.bronze {
    background: var(--bronze-gradient);
    color: white;
}

/* Rank Change */
.rank-change {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px 8px;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    border-radius: var(--radius);
    background: rgba(255,255,255,0.95);
}

.rank-change.up {
    color: var(--success);
}

.rank-change.down {
    color: var(--danger);
}

.rank-change.new {
    background: var(--primary-light);
    color: var(--primary-dark);
}

/* Growth Badge */
.growth-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    border-radius: var(--radius);
}

.growth-badge.positive {
    background: var(--success-light);
    color: var(--success);
}

.growth-badge.negative {
    background: var(--danger-light);
    color: var(--danger);
}

/* Tag */
.tag {
    display: inline-block;
    padding: 6px 12px;
    background: var(--background);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.tag:hover {
    background: var(--primary-light);
    color: var(--primary-dark);
}

/* Filter Chip */
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 6px 16px;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.filter-chip:hover {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary-dark);
}

.filter-chip.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* Price Tag */
.price {
    display: inline-block;
    padding: 6px 12px;
    background: var(--text);
    color: white;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    border-radius: var(--radius);
}

.price.free {
    background: var(--success);
}

.price.premium {
    background: linear-gradient(135deg, var(--purple), var(--pink));
}

/* Verified Badge (Icon style) */
.verified-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: var(--primary);
    border-radius: 50%;
    color: white;
}

.verified-icon svg,
.verified-icon i {
    width: 12px;
    height: 12px;
}

/* Hero Badge */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 8px 16px;
    background: rgba(0, 175, 240, 0.15);
    border: 1px solid rgba(0, 175, 240, 0.3);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--primary);
    margin-bottom: var(--spacing-lg);
}

.hero-badge i,
.hero-badge svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    animation: hero-badge-pulse 2s ease-in-out infinite;
}

@keyframes hero-badge-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.15); }
}

/* Status Indicator */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
}

.status-dot.online { background: var(--success); }
.status-dot.offline { background: var(--text-muted); }
.status-dot.busy { background: var(--warning); }

/* Trending Badge */
.trending-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--success-light);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--success);
    white-space: nowrap;
}

.trending-badge svg,
.trending-badge i {
    width: 16px;
    height: 16px;
}

/* --- components/_forms.css --- */
/* ========================================
   Forms
   ======================================== */

/* Form Group */
.form-group {
    margin-bottom: var(--spacing-lg);
}

/* Labels */
.form-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

/* Base Input */
.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 12px 16px;
    font-size: var(--text-base);
    font-family: inherit;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: all var(--transition);
    touch-action: manipulation;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.form-input::placeholder {
    color: var(--text-muted);
}

/* Textarea */
.form-textarea {
    min-height: 120px;
    resize: vertical;
}

/* Select */
.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
    cursor: pointer;
}

/* Checkbox & Radio */
.form-check {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
}

.form-check-input {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    cursor: pointer;
}

.form-check-label {
    font-size: var(--text-sm);
    color: var(--text);
    cursor: pointer;
}

/* Search Wrapper */
.search-wrapper {
    position: relative;
}

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

.search-input {
    width: 100%;
    padding: 10px 16px 10px 40px;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    transition: all var(--transition);
}

.search-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

/* Search Results Dropdown */
.search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    margin-top: var(--spacing-sm);
    display: none;
    max-height: 400px;
    overflow-y: auto;
    z-index: var(--z-dropdown);
}

.search-results.active {
    display: block;
}

.search-results-list {
    padding: var(--spacing-sm);
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    transition: background var(--transition-fast);
}

.search-result-item:hover {
    background: var(--border-light);
}

.search-result-avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    overflow: hidden;
    flex-shrink: 0;
}

.search-result-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.search-result-info {
    flex: 1;
    min-width: 0;
}

.search-result-info strong {
    display: block;
    font-size: var(--text-sm);
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-info span {
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.search-result-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.search-result-meta .followers {
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.search-no-results {
    padding: var(--spacing-xl);
    text-align: center;
    color: var(--text-secondary);
}

/* Hero Search */
.hero-search {
    max-width: 600px;
    margin: 0 auto 32px;
}

.hero-search .search-box {
    display: flex;
    gap: 8px;
}

.hero-search .search-box input {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 1rem;
}

.hero-search .search-box input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.hero-search .search-box input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.15);
}

.hero-search .search-box button {
    padding: 12px 24px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition);
    white-space: nowrap;
}

/* Filter Section */
.filter-section {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border);
}

.filter-group {
    margin-bottom: var(--spacing-md);
}

.filter-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

/* Input States */
.form-input.error,
.form-select.error,
.form-textarea.error {
    border-color: var(--danger);
}

.form-input.error:focus,
.form-select.error:focus,
.form-textarea.error:focus {
    box-shadow: 0 0 0 3px var(--danger-light);
}

.form-error {
    display: block;
    margin-top: var(--spacing-xs);
    font-size: var(--text-sm);
    color: var(--danger);
}

.form-help {
    display: block;
    margin-top: var(--spacing-xs);
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* Input Sizes */
.form-input-sm {
    padding: 8px 12px;
    font-size: var(--text-sm);
}

.form-input-lg {
    padding: 16px 20px;
    font-size: var(--text-lg);
}

@media (max-width: 480px) {
    .hero-search .search-box {
        flex-direction: column;
        gap: 8px;
    }

    .hero-search .search-box input {
        width: 100%;
        padding: 12px 14px;
    }

    .hero-search .search-box button {
        width: 100%;
        padding: 12px 20px;
    }
}

/* --- components/_pagination.css --- */
/* ========================================
   Pagination
   ======================================== */

.pagination {
    margin-top: var(--spacing-xl);
    text-align: center;
}

.pagination-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

.pagination-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 10px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-weight: var(--font-medium);
    color: var(--text);
    transition: all var(--transition-fast);
    cursor: pointer;
}

.pagination-btn:hover:not(:disabled) {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-pages {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.pagination-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    transition: all var(--transition-fast);
    cursor: pointer;
}

.pagination-page:hover:not(.active) {
    border-color: var(--primary);
    color: var(--primary);
}

.pagination-page.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.pagination-ellipsis {
    padding: 0 var(--spacing-sm);
    color: var(--text-muted);
}

.pagination-info {
    margin-top: var(--spacing-md);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* Compact Pagination */
.pagination-compact .pagination-wrapper {
    gap: 4px;
}

.pagination-compact .pagination-page {
    width: 32px;
    height: 32px;
    font-size: var(--text-sm);
}

.pagination-compact .pagination-btn {
    padding: 8px 14px;
    font-size: var(--text-sm);
}

/* Mobile Pagination */
@media (max-width: 480px) {
    .pagination-wrapper {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .pagination-pages {
        order: -1;
    }

    .pagination-btn {
        width: 100%;
        justify-content: center;
    }
}

/* --- components/_icons.css --- */
/* ========================================
   Icons - Lucide Integration
   ======================================== */

/* Base icon styles */
.icon,
[data-lucide] {
    display: inline-flex;
    width: 1em;
    height: 1em;
    stroke-width: 2;
    stroke: currentColor;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Icon sizes */
.icon-xs,
[data-lucide].icon-xs {
    width: 12px;
    height: 12px;
}

.icon-sm,
[data-lucide].icon-sm {
    width: 16px;
    height: 16px;
}

.icon-md,
[data-lucide].icon-md {
    width: 20px;
    height: 20px;
}

.icon-lg,
[data-lucide].icon-lg {
    width: 24px;
    height: 24px;
}

.icon-xl,
[data-lucide].icon-xl {
    width: 32px;
    height: 32px;
}

.icon-2xl,
[data-lucide].icon-2xl {
    width: 48px;
    height: 48px;
}

/* Icon colors */
.icon-primary { color: var(--primary); }
.icon-secondary { color: var(--text-secondary); }
.icon-muted { color: var(--text-muted); }
.icon-success { color: var(--success); }
.icon-danger { color: var(--danger); }
.icon-warning { color: var(--warning); }
.icon-white { color: white; }

/* Icon animations */
.icon-animated {
    transition: transform var(--transition), color var(--transition);
}

.icon-animated:hover {
    transform: scale(1.1);
}

/* Pulse animation - for verified badges, live indicators */
.icon-pulse {
    animation: icon-pulse 2s infinite;
}

@keyframes icon-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Spin animation - for loading states */
.icon-spin {
    animation: icon-spin 1s linear infinite;
}

@keyframes icon-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Bounce animation */
.icon-bounce {
    animation: icon-bounce 1s ease infinite;
}

@keyframes icon-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* Growth indicator animations */
.icon-growth-up {
    animation: growth-up 0.3s ease-out;
}

@keyframes growth-up {
    from {
        transform: translateY(4px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.icon-growth-down {
    animation: growth-down 0.3s ease-out;
}

@keyframes growth-down {
    from {
        transform: translateY(-4px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Hover animations */
.icon-hover-lift:hover {
    transform: translateY(-2px);
}

.icon-hover-scale:hover {
    transform: scale(1.15);
}

.icon-hover-rotate:hover {
    transform: rotate(15deg);
}

/* Icon with text */
.icon-text {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.icon-text .icon,
.icon-text [data-lucide] {
    flex-shrink: 0;
}

/* Icon button */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: var(--radius);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.icon-btn:hover {
    background: var(--border-light);
    color: var(--text);
}

.icon-btn.icon-btn-sm {
    width: 28px;
    height: 28px;
}

.icon-btn.icon-btn-lg {
    width: 44px;
    height: 44px;
}

/* Icon in circle */
.icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--background);
}

.icon-circle.icon-circle-sm {
    width: 28px;
    height: 28px;
}

.icon-circle.icon-circle-lg {
    width: 56px;
    height: 56px;
}

.icon-circle.icon-circle-primary {
    background: var(--primary-light);
    color: var(--primary);
}

.icon-circle.icon-circle-success {
    background: var(--success-light);
    color: var(--success);
}

/* SVG icons (legacy inline SVGs) */
svg.icon {
    width: 1em;
    height: 1em;
}

/* Specific icon overrides for verified badge */
.verified-badge .icon,
.verified-badge [data-lucide] {
    width: 18px;
    height: 18px;
    color: var(--primary);
}

/* --- pages/_home.css --- */
/* ========================================
   Homepage Specific Styles
   ======================================== */

/* Hero Section Enhancement */
.home-hero {
    padding: var(--spacing-4xl) 0;
}

.home-hero .hero-badge {
    margin-bottom: var(--spacing-lg);
    animation: badge-pulse 2s infinite;
}

@keyframes badge-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Platform Stats Animation */
.hero-stats .hero-stat {
    opacity: 0;
    transform: translateY(20px);
    animation: stat-fade-in 0.5s ease forwards;
}

.hero-stats .hero-stat:nth-child(1) { animation-delay: 0.1s; }
.hero-stats .hero-stat:nth-child(2) { animation-delay: 0.2s; }
.hero-stats .hero-stat:nth-child(3) { animation-delay: 0.3s; }
.hero-stats .hero-stat:nth-child(4) { animation-delay: 0.4s; }

@keyframes stat-fade-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animated counter effect */
.stat-number[data-count] {
    transition: all 0.5s ease-out;
}

/* Top Lists Section */
.top-lists-section {
    padding: var(--spacing-2xl) 0;
}

/* Browse by Location */
.location-section {
    background: var(--surface);
}

/* Categories Section */
.categories-section .category-card {
    border: 1px solid transparent;
}

.categories-section .category-card:hover {
    border-color: var(--primary);
}

/* Price Section */
.price-section .price-card.featured {
    transform: scale(1.05);
    z-index: 1;
}

/* FAQ Section */
.faq-section {
    background: var(--background);
}

.faq-item {
    background: var(--surface);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    transition: all var(--transition);
}

.faq-item:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

.faq-item h3 {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text);
    margin-bottom: var(--spacing-md);
}

.faq-item p {
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
    margin: 0;
}

/* Trust Section (E-E-A-T) */
.trust-section {
    background: linear-gradient(135deg, var(--surface) 0%, var(--background) 100%);
    padding: var(--spacing-3xl) 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-xl);
}

.trust-item {
    text-align: center;
    padding: var(--spacing-lg);
}

.trust-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-light);
    border-radius: var(--radius-lg);
    color: var(--primary);
}

.trust-item h4 {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text);
    margin-bottom: var(--spacing-xs);
}

.trust-item p {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0;
}

/* Insight Cards Row */
.insights-section {
    background: var(--surface);
    padding: var(--spacing-2xl) 0;
    border-bottom: 1px solid var(--border);
}

.insight-card.trending {
    border-left: 4px solid var(--orange);
}

.insight-card.earners {
    border-left: 4px solid var(--success);
}

.insight-card.hot {
    border-left: 4px solid var(--danger);
}

/* Section animations on scroll */
.section-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}

.section-animate.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive */
@media (max-width: 1024px) {
    .trust-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .home-hero {
        padding: var(--spacing-3xl) 0;
    }

    .hero-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }
}

@media (max-width: 480px) {
    .trust-grid {
        grid-template-columns: 1fr;
    }
}

/* --- pages/_creator.css --- */
/* ========================================
   Creator Profile Page - Hero-Centric Layout
   ======================================== */

/* ========================================
   Hero Section
   ======================================== */

.creator-hero {
    background: linear-gradient(135deg, var(--surface) 0%, var(--background) 100%);
    padding: var(--spacing-2xl) 0;
    border-bottom: 1px solid var(--border);
}

.hero-profile {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
}

/* Hero Avatar */
.hero-avatar-wrapper {
    position: relative;
    flex-shrink: 0;
}

.hero-avatar {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: var(--radius-xl);
    border: 4px solid var(--surface);
    box-shadow: var(--shadow-lg);
}

.hero-avatar.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    font-size: 3rem;
    font-weight: var(--font-bold);
}

.verified-badge-hero {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    border: 3px solid var(--surface);
}

/* Hero Info */
.hero-info {
    flex: 1;
    min-width: 0;
}

.hero-info h1 {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--text);
    margin-bottom: var(--spacing-xs);
    line-height: 1.2;
}

.hero-username {
    font-size: var(--text-base);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
}

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm);
}

.meta-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 4px 12px;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.meta-tag:hover {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary-dark);
}

.meta-rank {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 4px 12px;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: #92400e;
}

.meta-rank i {
    color: #d97706;
}

.rank-change-inline {
    font-size: var(--text-xs);
    margin-left: 4px;
}

.rank-change-inline.up { color: var(--success); }
.rank-change-inline.down { color: var(--danger); }

/* Hero CTA */
.hero-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--spacing-md);
    flex-shrink: 0;
}

.price-display {
    text-align: right;
}

.price-amount {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--text);
}

.price-amount.free {
    color: var(--success);
}

.price-period {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.hero-btn {
    white-space: nowrap;
}

.hero-btn-group {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.hero-btn-compare {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--text-sm);
    border-color: var(--border);
    color: var(--text-secondary);
}

.hero-btn-compare:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-light);
}

/* ========================================
   Stats Bar
   ======================================== */

.stats-bar {
    background: var(--surface);
    padding: var(--spacing-lg) 0;
    border-bottom: 1px solid var(--border);
}

.stats-bar-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
}

.stat-bar-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--background);
    border-radius: var(--radius-lg);
}

.stat-bar-item i {
    color: var(--primary);
}

.stat-bar-item.highlight {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.stat-bar-item.highlight i,
.stat-bar-item.highlight .stat-bar-value,
.stat-bar-item.highlight .stat-bar-label {
    color: white;
}

.stat-bar-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.stat-bar-value {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text);
    line-height: 1;
}

.stat-bar-label {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-top: 2px;
}

.stat-bar-change {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    padding: 2px 6px;
    border-radius: var(--radius);
}

.stat-bar-change.up {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.stat-bar-change.down {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

/* ========================================
   Content Section
   ======================================== */

.creator-content {
    padding: var(--spacing-lg) 0;
}

.content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
}

/* About Card */
.about-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
}

.about-card h2 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text);
    margin-bottom: var(--spacing-lg);
}

.about-card h2 i {
    color: var(--primary);
}

.bio-text {
    font-size: var(--text-base);
    color: var(--text);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--spacing-lg);
}

.bio-text.muted {
    color: var(--text-muted);
    font-style: italic;
}

.content-details {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.detail-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--background);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.detail-item i {
    color: var(--text-muted);
}

/* Earnings Card V2 */
.earnings-card-v2 {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
}

.earnings-card-v2 h2 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text);
    margin-bottom: var(--spacing-lg);
}

.earnings-card-v2 h2 i {
    color: var(--success);
}

.earnings-main {
    margin-bottom: var(--spacing-lg);
}

.earnings-primary {
    text-align: center;
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, var(--success), #059669);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-md);
}

.earnings-value-lg {
    display: block;
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    color: white;
    line-height: 1;
    margin-bottom: var(--spacing-xs);
}

.earnings-primary .earnings-label {
    display: block;
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: var(--spacing-xs);
}

.earnings-primary .earnings-range {
    display: block;
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.7);
}

.earnings-secondary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

.earnings-item {
    text-align: center;
    padding: var(--spacing-md);
    background: var(--background);
    border-radius: var(--radius);
}

.earnings-item-value {
    display: block;
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--text);
    margin-bottom: 2px;
}

.earnings-item-label {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.earnings-rank-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--primary-light);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--primary-dark);
    margin-bottom: var(--spacing-md);
    transition: all var(--transition-fast);
}

.earnings-rank-link:hover {
    background: var(--primary);
    color: white;
}

.earnings-disclaimer {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* ========================================
   Growth Trends
   ======================================== */

.growth-trends {
    background: var(--surface);
    padding: var(--spacing-xl) 0;
    border-top: 1px solid var(--border);
}

.growth-trends h2 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text);
    margin-bottom: var(--spacing-lg);
}

.growth-trends h2 i {
    color: var(--orange);
}

.trends-grid {
    display: flex;
    gap: var(--spacing-md);
    overflow-x: auto;
    padding-bottom: var(--spacing-sm);
}

.trend-item {
    flex: 1;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--background);
    border-radius: var(--radius-lg);
    text-align: center;
}

.trend-item.highlight {
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: white;
}

.trend-item.highlight .trend-period,
.trend-item.highlight .trend-value,
.trend-item.highlight i {
    color: white;
}

.trend-period {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.trend-value {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text);
}

.trend-value.up { color: var(--success); }
.trend-value.down { color: var(--danger); }
.trend-item.highlight .trend-value.up,
.trend-item.highlight .trend-value.down { color: white; }

.trend-rate {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* ========================================
   Similar Section
   ======================================== */

.similar-section {
    background: var(--background);
    padding: var(--spacing-lg) 0;
}

.similar-section .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-lg);
}

.similar-section .section-header h2 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--text);
}

.similar-section .section-header h2 i {
    color: var(--primary);
}

.section-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--primary);
}

.section-link:hover {
    color: var(--primary-dark);
}

.similar-scroll {
    display: flex;
    gap: var(--spacing-md);
    overflow-x: auto;
    padding-bottom: var(--spacing-md);
    -webkit-overflow-scrolling: touch;
}

.similar-card {
    flex-shrink: 0;
    width: 200px;
    display: flex;
    flex-direction: column;
    padding: var(--spacing-md);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: all var(--transition);
}

.similar-card:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.similar-avatar {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: var(--spacing-md);
}

.similar-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.similar-avatar .avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
}

.similar-info {
    flex: 1;
    margin-bottom: var(--spacing-sm);
}

.similar-name {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.similar-username {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
}

.similar-stats {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.similar-price {
    text-align: center;
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--border-light);
}

.similar-price span {
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--text);
}

.similar-price .free {
    color: var(--success);
}

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 1024px) {
    .content-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .hero-profile {
        flex-wrap: wrap;
    }

    .hero-avatar {
        width: 100px;
        height: 100px;
    }

    .hero-info {
        flex: 1 1 calc(100% - 120px);
    }

    .hero-cta {
        flex: 1 1 100%;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding-top: var(--spacing-md);
        border-top: 1px solid var(--border);
        margin-top: var(--spacing-md);
    }

    .price-display {
        text-align: left;
    }

    .stats-bar-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .trends-grid {
        flex-wrap: nowrap;
    }
}

@media (max-width: 480px) {
    .creator-hero {
        padding: var(--spacing-lg) 0;
    }

    .hero-profile {
        flex-direction: column;
        text-align: center;
    }

    .hero-avatar {
        width: 100px;
        height: 100px;
    }

    .hero-info {
        flex: 1 1 100%;
    }

    .hero-meta {
        justify-content: center;
    }

    .hero-cta {
        flex-direction: column;
        width: 100%;
    }

    .price-display {
        text-align: center;
    }

    .hero-btn {
        width: 100%;
    }

    .hero-btn-group {
        flex-direction: column;
        width: 100%;
    }

    .hero-btn-compare {
        width: 100%;
        justify-content: center;
    }

    .stats-bar-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-sm);
    }

    .stat-bar-item {
        padding: var(--spacing-sm);
    }

    .stat-bar-value {
        font-size: var(--text-lg);
    }

    .trends-grid {
        gap: var(--spacing-sm);
    }

    .trend-item {
        min-width: 100px;
        padding: var(--spacing-sm);
    }

    .similar-card {
        width: 160px;
    }
}

/* ========================================
   Performance Badge (Hero)
   ======================================== */

.performance-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-lg);
    margin-top: var(--spacing-md);
    font-weight: var(--font-semibold);
}

.performance-badge .grade {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
}

.performance-badge .label {
    font-size: var(--text-xs);
    opacity: 0.9;
}

.performance-badge.grade-a\+,
.performance-badge.grade-a {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.performance-badge.grade-b\+,
.performance-badge.grade-b {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
}

.performance-badge.grade-c\+,
.performance-badge.grade-c {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.performance-badge.grade-d {
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: white;
}

.performance-badge.grade-f {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
}

/* ========================================
   Key Highlights Section
   ======================================== */

.key-highlights {
    padding: var(--spacing-md) 0;
    background: var(--background);
    border-bottom: 1px solid var(--border);
}

.highlights-scroll {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    justify-content: center;
}

.highlight-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: linear-gradient(135deg, var(--primary-light), rgba(139, 92, 246, 0.15));
    border: 1px solid var(--primary);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--primary-dark);
    white-space: nowrap;
    transition: all var(--transition-fast);
}

.highlight-badge:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .highlights-scroll {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: var(--spacing-sm);
        -webkit-overflow-scrolling: touch;
    }

    .highlights-scroll::-webkit-scrollbar {
        height: 4px;
    }

    .highlights-scroll::-webkit-scrollbar-thumb {
        background: var(--border);
        border-radius: var(--radius-full);
    }
}

/* ========================================
   Summary Section
   ======================================== */

.creator-summary {
    padding: var(--spacing-lg) 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.summary-card {
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
}

.summary-card h2 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text);
    margin-bottom: var(--spacing-lg);
}

.summary-card h2 i {
    color: var(--primary);
}

.summary-text {
    font-size: var(--text-base);
    color: var(--text);
    line-height: var(--leading-relaxed);
}

/* ========================================
   3-Column Content Grid
   ======================================== */

.content-grid-3col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-lg);
}

@media (max-width: 768px) {
    .content-grid-3col {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
}

/* ========================================
   Analysis Card
   ======================================== */

.analysis-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
}

.analysis-card h2 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text);
    margin-bottom: var(--spacing-lg);
}

.analysis-card h2 i {
    color: var(--primary);
}

.performance-metrics {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.metric-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.metric-label {
    flex: 0 0 120px;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.metric-bar {
    flex: 1;
    height: 8px;
    background: var(--background);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.metric-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    border-radius: var(--radius-full);
    transition: width 0.5s ease;
}

.metric-value {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text);
    min-width: 60px;
    text-align: right;
}

.metric-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
}

.metric-badge.exceptional,
.metric-badge.very-active {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

.metric-badge.high,
.metric-badge.active {
    background: rgba(59, 130, 246, 0.15);
    color: #2563eb;
}

.metric-badge.above-average,
.metric-badge.moderate {
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
}

.metric-badge.average,
.metric-badge.low-activity {
    background: rgba(107, 114, 128, 0.15);
    color: #4b5563;
}

.metric-badge.below-average,
.metric-badge.unknown {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

.analysis-text {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border);
    font-size: var(--text-sm);
    line-height: 1.7;
    color: var(--text-secondary);
}

/* ========================================
   Value Card
   ======================================== */

.value-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
}

.value-card h2 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text);
    margin-bottom: var(--spacing-lg);
}

.value-card h2 i {
    color: var(--success);
}

.value-score {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.value-circle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    margin-bottom: var(--spacing-sm);
}

.value-number {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    line-height: 1;
}

.value-max {
    font-size: var(--text-xs);
    opacity: 0.8;
}

.value-rating {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--primary);
}

.value-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.value-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm);
    background: var(--background);
    border-radius: var(--radius);
    font-size: var(--text-sm);
}

.value-row span:first-child {
    color: var(--text-secondary);
}

.value-row span:last-child {
    font-weight: var(--font-medium);
    color: var(--text);
}

/* ========================================
   Growth Section
   ======================================== */

.growth-section {
    padding: var(--spacing-lg) 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
}

.growth-section h2 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text);
    margin-bottom: var(--spacing-lg);
}

.growth-section h2 i {
    color: var(--success);
}

.growth-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--spacing-xl);
    align-items: start;
}

@media (max-width: 768px) {
    .growth-grid {
        grid-template-columns: 1fr;
    }
}

.growth-stats {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.growth-stat-item {
    padding: var(--spacing-md);
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.growth-period {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-xs);
}

.growth-value {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text);
}

.growth-value.up {
    color: var(--success);
}

.growth-value.down {
    color: var(--danger);
}

.growth-percent {
    font-size: var(--text-sm);
    font-weight: var(--font-normal);
    opacity: 0.8;
}

.growth-chart {
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    min-height: 200px;
}

.trending-badge {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border);
}

.trending-badge a {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: white;
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    transition: all var(--transition);
}

.trending-badge a:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* ========================================
   Content Library
   ======================================== */

.content-library {
    padding: var(--spacing-lg) 0;
    background: var(--background);
    border-top: 1px solid var(--border);
}

.content-library h2 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text);
    margin-bottom: var(--spacing-lg);
}

.content-library h2 i {
    color: var(--primary);
}

.library-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
}

@media (max-width: 768px) {
    .library-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.library-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-align: center;
}

.library-item i {
    color: var(--primary);
}

.library-count {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--text);
}

.library-label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

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

.faq-section {
    padding: var(--spacing-lg) 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
}

.faq-section h2 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--text);
    margin-bottom: var(--spacing-xl);
}

.faq-section h2 i {
    color: var(--primary);
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.faq-item {
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    transition: all var(--transition);
}

.faq-item:hover {
    border-color: var(--primary-light);
}

.faq-item h3 {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text);
    margin-bottom: var(--spacing-sm);
}

.faq-answer p {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

/* --- pages/_ranking.css --- */
/* ========================================
   Ranking & Listing Pages
   ======================================== */

/* Ranking Header */
.ranking-header {
    background: var(--surface);
    padding: var(--spacing-xl) 0;
    border-bottom: 1px solid var(--border);
}

.ranking-header-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-xl);
}

.ranking-title h1 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    color: var(--text);
    margin-bottom: var(--spacing-xs);
}

.ranking-title h1 i {
    color: var(--primary);
}

.ranking-description {
    color: var(--text-secondary);
}

.ranking-stats {
    display: flex;
    gap: var(--spacing-xl);
}

.ranking-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ranking-stat i {
    color: var(--primary);
    margin-bottom: var(--spacing-xs);
}

.ranking-stat .stat-number {
    display: block;
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text);
}

.ranking-stat .stat-text {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* Filter Section */
.filter-section {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border);
}

.filter-group {
    margin-bottom: var(--spacing-md);
}

.filter-group:last-child {
    margin-bottom: 0;
}

.filter-label {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.filter-chip {
    display: inline-block;
    padding: 6px 14px;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.filter-chip:hover {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary-dark);
}

/* Ranking Tabs */
.ranking-tabs {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ranking-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 12px 20px;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    white-space: nowrap;
    transition: all var(--transition);
    cursor: pointer;
}

.ranking-tab:hover {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary-dark);
}

.ranking-tab.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.ranking-tab svg,
.ranking-tab i {
    flex-shrink: 0;
}

/* Ranking Section */
.ranking-section {
    padding: var(--spacing-xl) 0 var(--spacing-3xl);
}

/* View Controls */
.view-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.view-toggle {
    display: flex;
    gap: var(--spacing-xs);
    background: var(--background);
    padding: 4px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.view-btn:hover {
    color: var(--text);
}

.view-btn.active {
    background: var(--surface);
    color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.view-count {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* Ranking Grid */
.ranking-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
}

/* Ranking Card (Grid View) */
.ranking-card {
    position: relative;
    background: var(--surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: all var(--transition);
}

.ranking-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
}

.ranking-position {
    position: absolute;
    top: var(--spacing-md);
    left: var(--spacing-md);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.rank-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    color: white;
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    border-radius: var(--radius);
}

.rank-change {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 8px;
    border-radius: var(--radius);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
}

.rank-change.up {
    background: rgba(16, 185, 129, 0.2);
    color: var(--success);
}

.rank-change.down {
    background: rgba(239, 68, 68, 0.2);
    color: var(--danger);
}

/* Top 3 special styling */
.ranking-card:nth-child(1) .rank-number { background: var(--gold-gradient); color: #1a1a2e; }
.ranking-card:nth-child(2) .rank-number { background: var(--silver-gradient); color: #1a1a2e; }
.ranking-card:nth-child(3) .rank-number { background: var(--bronze-gradient); color: white; }

.ranking-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.ranking-avatar {
    position: relative;
    width: 100%;
    aspect-ratio: 3/4;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    overflow: hidden;
}

.ranking-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform var(--transition-slow);
}

.ranking-card:hover .ranking-avatar img {
    transform: scale(1.06);
}

.ranking-avatar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);
    pointer-events: none;
}

.ranking-avatar .verified-badge {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    bottom: auto;
    padding: 6px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--radius-full);
    color: var(--primary);
}

.ranking-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--spacing-md);
    z-index: 5;
}

.ranking-info h3 {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    margin-bottom: 4px;
}

.ranking-username {
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.85);
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.ranking-metrics {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--surface);
    border-bottom: 1px solid var(--border-light);
}

.ranking-metrics .metric {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.ranking-metrics .metric svg,
.ranking-metrics .metric i {
    color: var(--primary);
}

.ranking-price {
    padding: var(--spacing-md);
    background: var(--surface);
    text-align: center;
}

.ranking-price .price {
    display: inline-block;
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--text), #2d2d44);
    color: white;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    border-radius: var(--radius);
    width: 100%;
}

.ranking-price .price.free {
    background: linear-gradient(135deg, var(--success), var(--success-dark));
}

/* ========================================
   List View
   ======================================== */

.ranking-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.ranking-list-item {
    display: grid;
    grid-template-columns: 70px 1fr auto auto;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    transition: all var(--transition-fast);
}

.ranking-list-item:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

/* Top 3 special styling for list view */
.ranking-list-item:nth-child(1) .rank-number { background: var(--gold-gradient); color: #1a1a2e; }
.ranking-list-item:nth-child(2) .rank-number { background: var(--silver-gradient); color: #1a1a2e; }
.ranking-list-item:nth-child(3) .rank-number { background: var(--bronze-gradient); color: white; }

.list-rank {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.list-rank .rank-number {
    padding: 6px 12px;
    background: var(--background);
    border-radius: var(--radius);
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    color: var(--text);
}

.list-rank .rank-change {
    font-size: 0.65rem;
}

.list-creator {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    min-width: 0;
}

.list-avatar {
    width: 56px;
    height: 56px;
    border-radius: var(--radius);
    overflow: hidden;
    flex-shrink: 0;
}

.list-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.list-avatar .avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    font-weight: var(--font-bold);
    font-size: var(--text-xl);
}

.list-info {
    min-width: 0;
}

.list-info h3 {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list-username {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.list-stats {
    display: flex;
    gap: var(--spacing-xl);
}

.list-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.list-stat i {
    color: var(--primary);
}

.list-price {
    min-width: 100px;
    text-align: center;
}

.list-price .price {
    display: inline-block;
    padding: 8px 16px;
    background: var(--text);
    color: white;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    border-radius: var(--radius);
}

.list-price .price.free {
    background: var(--success);
}

/* Empty State */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--spacing-3xl);
    background: var(--surface);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
}

.empty-state i {
    color: var(--text-muted);
    margin-bottom: var(--spacing-lg);
}

.empty-state h3 {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--text);
    margin-bottom: var(--spacing-sm);
}

.empty-state p {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
}

/* Related Rankings */
.related-rankings-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
}

.related-ranking-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--background);
    border-radius: var(--radius-lg);
    transition: all var(--transition);
}

.related-ranking-card:hover {
    background: var(--primary-light);
    transform: translateY(-2px);
}

.related-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
}

.related-icon.blue { background: rgba(59, 130, 246, 0.1); color: var(--blue); }
.related-icon.orange { background: rgba(249, 115, 22, 0.1); color: var(--orange); }
.related-icon.green { background: rgba(34, 197, 94, 0.1); color: var(--green); }
.related-icon.purple { background: rgba(139, 92, 246, 0.1); color: var(--purple); }

.related-content h3 {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text);
}

.related-content p {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0;
}

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 1200px) {
    .ranking-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .related-rankings-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .ranking-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ranking-list-item {
        grid-template-columns: 60px 1fr auto;
    }

    .list-stats {
        display: none;
    }
}

@media (max-width: 768px) {
    .ranking-header-content {
        flex-direction: column;
    }

    .ranking-stats {
        width: 100%;
        justify-content: space-around;
    }

    .view-controls {
        flex-direction: column;
        align-items: flex-start;
    }

    .ranking-list-item {
        grid-template-columns: 50px 1fr;
        gap: var(--spacing-md);
    }

    .list-price {
        display: none;
    }

    .related-rankings-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .ranking-grid {
        grid-template-columns: 1fr;
    }

    .filter-chips {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: var(--spacing-sm);
        margin: 0 calc(var(--spacing-lg) * -1);
        padding-left: var(--spacing-lg);
        padding-right: var(--spacing-lg);
    }

    .filter-chip {
        flex-shrink: 0;
    }
}

/* --- pages/_seo-page.css --- */
/* ========================================
   SEO Pages (Category, Country, Price, etc.)
   ======================================== */

/* SEO Header */
.seo-header {
    background: var(--surface);
    padding: var(--spacing-xl) 0;
    border-bottom: 1px solid var(--border);
}

.seo-header-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-xl);
}

.seo-title h1 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    color: var(--text);
    margin-bottom: var(--spacing-sm);
}

.seo-title h1 i {
    color: var(--primary);
}

.seo-intro {
    color: var(--text-secondary);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
}

.seo-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--spacing-sm);
}

.seo-count,
.seo-updated {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.seo-count i,
.seo-updated i {
    color: var(--primary);
}

/* Filter Tags */
.seo-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border);
}

.filter-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 6px 14px;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.filter-tag i {
    width: 14px;
    height: 14px;
}

.filter-tag.category { border-color: var(--primary); background: var(--primary-light); color: var(--primary-dark); }
.filter-tag.country { border-color: var(--blue); background: rgba(59, 130, 246, 0.1); color: var(--blue); }
.filter-tag.price { border-color: var(--success); background: rgba(16, 185, 129, 0.1); color: var(--success); }
.filter-tag.year { border-color: var(--orange); background: rgba(249, 115, 22, 0.1); color: var(--orange); }

/* SEO Content */
.seo-content {
    padding: var(--spacing-xl) 0 var(--spacing-3xl);
}

/* Related SEO Grid */
.related-seo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
}

.related-seo-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: all var(--transition);
}

.related-seo-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.related-seo-title {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text);
}

.related-seo-count {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.related-seo-count i {
    width: 12px;
    height: 12px;
}

/* Evergreen Grid */
.evergreen-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
}

.evergreen-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: all var(--transition);
}

.evergreen-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.evergreen-flag {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--primary);
    min-width: 32px;
}

.evergreen-name {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text);
}

/* Price Cards */
.evergreen-card.price-card {
    flex-direction: column;
    text-align: center;
}

.price-tag {
    display: inline-block;
    padding: 6px 16px;
    background: var(--text);
    color: white;
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    border-radius: var(--radius);
    margin-bottom: var(--spacing-sm);
}

.price-tag.free {
    background: var(--success);
}

/* Top Cards */
.evergreen-card.top-card {
    flex-direction: column;
    text-align: center;
}

.top-badge {
    display: inline-block;
    padding: 6px 16px;
    background: var(--gold-gradient);
    color: #1a1a2e;
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    border-radius: var(--radius);
    margin-bottom: var(--spacing-sm);
}

/* Category Chips */
.category-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.category-chip {
    display: inline-block;
    padding: 8px 16px;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.category-chip:hover {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary-dark);
}

/* SEO Page Header (legacy) */
.seo-page-header {
    background: var(--surface);
    padding: var(--spacing-xl) 0;
    border-bottom: 1px solid var(--border);
}

.seo-page-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.seo-page-title h1 {
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    color: var(--text);
}

.seo-page-icon {
    font-size: 2.5rem;
}

.seo-page-description {
    color: var(--text-secondary);
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    max-width: 800px;
}

.seo-page-stats {
    display: flex;
    gap: var(--spacing-xl);
    margin-top: var(--spacing-lg);
}

.seo-page-stat {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.seo-page-stat svg,
.seo-page-stat i {
    color: var(--primary);
}

.seo-page-stat span {
    font-weight: var(--font-medium);
    color: var(--text);
}

/* SEO Content Section */
.seo-content-section {
    padding: var(--spacing-xl) 0;
}

.seo-content {
    max-width: 800px;
}

.seo-content h2 {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--text);
    margin-bottom: var(--spacing-md);
}

.seo-content p {
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--spacing-md);
}

.seo-content ul {
    list-style: disc;
    padding-left: var(--spacing-xl);
    margin-bottom: var(--spacing-md);
}

.seo-content li {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

/* Trending Section on SEO Pages */
.seo-trending-section {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    padding: var(--spacing-2xl) 0;
}

.seo-trending-section .section-header h2 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: white;
}

.seo-trending-section .section-header h2 svg,
.seo-trending-section .section-header h2 i {
    color: var(--primary);
}

.seo-trending-section .see-all {
    color: var(--primary);
    font-weight: var(--font-medium);
    transition: color var(--transition-fast);
}

.seo-trending-section .see-all:hover {
    color: white;
}

/* Trending Cards in Dark Section */
.trending-hot-card {
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    transition: all var(--transition);
}

.trending-hot-card:hover {
    background: rgba(255, 255, 255, 0.1);
}

.hot-rank {
    position: absolute;
    top: var(--spacing-sm);
    left: var(--spacing-sm);
    padding: 4px 10px;
    background: var(--primary);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    color: white;
}

.hot-card-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: white;
}

.hot-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: var(--spacing-sm);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.hot-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hot-info .hot-name {
    display: block;
    font-weight: var(--font-semibold);
    font-size: var(--text-sm);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.hot-info .hot-growth {
    font-size: var(--text-xs);
    color: var(--success);
    font-weight: var(--font-medium);
}

/* Trending List */
.trending-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.trending-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: var(--surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    transition: all var(--transition);
}

.trending-item:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

.trending-rank {
    width: 50px;
    text-align: center;
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text);
}

.trending-avatar {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    flex-shrink: 0;
}

.trending-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.trending-info {
    flex: 1;
    min-width: 0;
}

.trending-name {
    font-weight: var(--font-semibold);
    color: var(--text);
    margin-bottom: 4px;
}

.trending-username {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.trending-growth {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--success);
}

/* Period Tabs */
.period-tabs {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border);
}

.period-tab {
    padding: 10px 20px;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition);
}

.period-tab:hover {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary-dark);
}

.period-tab.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* Related Pages Grid */
.related-pages {
    margin-top: var(--spacing-3xl);
    padding: var(--spacing-2xl) 0;
    background: var(--background);
}

.related-pages-title {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    margin-bottom: var(--spacing-lg);
}

.related-pages-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
}

.related-page-card {
    padding: var(--spacing-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: all var(--transition);
}

.related-page-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
}

.related-page-card h3 {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text);
    margin-bottom: var(--spacing-xs);
}

.related-page-card p {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0;
}

/* ========================================
   Content Pages (Methodology, About, etc.)
   ======================================== */

/* Page Header */
.page-header {
    background: var(--surface);
    padding: var(--spacing-xl) 0;
    border-bottom: 1px solid var(--border);
}

.page-header h1 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    color: var(--text);
    margin-bottom: var(--spacing-sm);
}

.page-header h1 i {
    color: var(--primary);
}

.page-intro {
    font-size: var(--text-lg);
    color: var(--text-secondary);
}

/* Content Grid */
.content-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--spacing-2xl);
}

.content-main {
    min-width: 0;
}

.content-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* Content Sections */
.content-section {
    margin-bottom: var(--spacing-2xl);
    padding-bottom: var(--spacing-2xl);
    border-bottom: 1px solid var(--border);
}

.content-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.content-section h2 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text);
    margin-bottom: var(--spacing-md);
}

.content-section h2 i {
    color: var(--primary);
}

.content-section p {
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--spacing-md);
}

.content-section p:last-child {
    margin-bottom: 0;
}

/* Styled List */
.styled-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.styled-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

.styled-list li i {
    color: var(--success);
    flex-shrink: 0;
    margin-top: 4px;
}

/* Data Point Grid */
.data-point-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.data-point {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--spacing-lg);
    background: var(--background);
    border-radius: var(--radius-lg);
}

.data-point i {
    color: var(--primary);
    margin-bottom: var(--spacing-sm);
}

.data-value {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--text);
    margin-bottom: var(--spacing-xs);
}

.data-label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* Factor List */
.factor-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.factor-item {
    padding: var(--spacing-lg);
    background: var(--background);
    border-radius: var(--radius-lg);
    border-left: 3px solid var(--primary);
}

.factor-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.factor-header i {
    color: var(--primary);
}

.factor-header h3 {
    flex: 1;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text);
    margin: 0;
}

.factor-weight {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    padding: 4px 10px;
    background: var(--primary-light);
    color: var(--primary-dark);
    border-radius: var(--radius-full);
}

.factor-item p {
    margin: 0;
    font-size: var(--text-sm);
}

/* Disclaimer Box */
.disclaimer-box {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: rgba(249, 115, 22, 0.1);
    border: 1px solid rgba(249, 115, 22, 0.3);
    border-radius: var(--radius-lg);
    margin-top: var(--spacing-lg);
}

.disclaimer-box > i {
    color: var(--orange);
    flex-shrink: 0;
}

.disclaimer-box p {
    margin: 0;
    font-size: var(--text-sm);
}

.disclaimer-box p + p {
    margin-top: var(--spacing-sm);
}

/* Update Schedule */
.update-schedule {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
}

.schedule-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md);
    background: var(--background);
    border-radius: var(--radius);
}

.schedule-type {
    font-weight: var(--font-medium);
    color: var(--text);
}

.schedule-freq {
    font-size: var(--text-sm);
    color: var(--primary);
    font-weight: var(--font-semibold);
}

/* Feature Grid */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.feature-item {
    padding: var(--spacing-lg);
    background: var(--background);
    border-radius: var(--radius-lg);
}

.feature-item i {
    color: var(--primary);
    margin-bottom: var(--spacing-md);
}

.feature-item h3 {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text);
    margin-bottom: var(--spacing-sm);
}

.feature-item p {
    margin: 0;
    font-size: var(--text-sm);
}

/* Stats Highlight */
.stats-highlight {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
    margin: var(--spacing-lg) 0;
}

.stat-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--spacing-lg);
    background: var(--primary);
    border-radius: var(--radius-lg);
    color: white;
}

.stat-number {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    margin-bottom: var(--spacing-xs);
}

.stat-label {
    font-size: var(--text-sm);
    opacity: 0.9;
}

/* Sidebar Cards */
.sidebar-card {
    padding: var(--spacing-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.sidebar-card h3 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text);
    margin-bottom: var(--spacing-md);
}

.sidebar-card h3 i {
    color: var(--primary);
}

.sidebar-card p {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
    line-height: var(--leading-relaxed);
}

.sidebar-card.highlight {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-color: transparent;
    color: white;
}

.sidebar-card.highlight h3,
.sidebar-card.highlight h3 i {
    color: white;
}

.sidebar-card.highlight p {
    color: rgba(255, 255, 255, 0.8);
}

/* Sidebar Links */
.sidebar-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-links li {
    margin-bottom: var(--spacing-xs);
}

.sidebar-links a {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    color: var(--text-secondary);
    border-radius: var(--radius);
    transition: all var(--transition-fast);
}

.sidebar-links a:hover {
    background: var(--primary-light);
    color: var(--primary-dark);
}

.sidebar-card.highlight .sidebar-links a {
    color: rgba(255, 255, 255, 0.9);
}

.sidebar-card.highlight .sidebar-links a:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.sidebar-links a i {
    width: 14px;
    height: 14px;
}

/* Responsive */
@media (max-width: 1024px) {
    .content-grid {
        grid-template-columns: 1fr;
    }

    .content-sidebar {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .sidebar-card {
        flex: 1;
        min-width: 280px;
    }

    .data-point-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-highlight {
        grid-template-columns: repeat(2, 1fr);
    }

    .related-seo-grid,
    .evergreen-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .seo-header-content {
        flex-direction: column;
    }

    .seo-meta {
        flex-direction: row;
        align-items: center;
    }

    .seo-page-stats {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .related-pages-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .category-chips {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: var(--spacing-sm);
        margin: 0 calc(var(--spacing-lg) * -1);
        padding-left: var(--spacing-lg);
        padding-right: var(--spacing-lg);
    }

    .category-chip {
        flex-shrink: 0;
    }
}

@media (max-width: 480px) {
    .related-pages-grid,
    .related-seo-grid,
    .evergreen-grid {
        grid-template-columns: 1fr;
    }

    .data-point-grid,
    .stats-highlight {
        grid-template-columns: 1fr;
    }

    .feature-grid {
        grid-template-columns: 1fr;
    }

    .sidebar-card {
        min-width: 100%;
    }
}

/* ========================================
   Contact Page Styles
   ======================================== */

.contact-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
}

.contact-option {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    text-align: center;
    transition: all var(--transition);
}

.contact-option:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

.contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: var(--radius-full);
    margin-bottom: var(--spacing-md);
}

.contact-option h3 {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text);
    margin-bottom: var(--spacing-sm);
}

.contact-option p {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--spacing-md);
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.faq-list .faq-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--spacing-lg);
}

.faq-list .faq-item h4 {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text);
    margin-bottom: var(--spacing-sm);
}

.faq-list .faq-item p {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    margin: 0;
}

.faq-list .faq-item a {
    color: var(--primary);
    text-decoration: underline;
}

@media (max-width: 768px) {
    .contact-options {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   Categories Directory Enhanced Styles
   ======================================== */

/* Directory Header */
.directory-header {
    background: linear-gradient(135deg, var(--surface) 0%, var(--primary-light) 100%);
    border-bottom: 1px solid var(--border);
    padding: var(--spacing-2xl) 0;
    text-align: center;
}

.directory-header-content h1 {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: var(--spacing-sm);
}

.directory-intro {
    font-size: 1.1rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

/* Directory Stats Bar */
.directory-stats-bar {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
    flex-wrap: wrap;
}

.stat-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.stat-pill i {
    color: var(--primary);
}

/* Directory Controls */
.directory-controls {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    flex-wrap: wrap;
}

.directory-search {
    position: relative;
    flex: 1;
    max-width: 320px;
}

.directory-search .search-icon {
    position: absolute;
    left: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    width: 18px;
    height: 18px;
}

.directory-search-input {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) 44px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.95rem;
    background: var(--surface);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.directory-search-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.directory-sort-select {
    padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.95rem;
    background: var(--surface);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.directory-sort-select:focus {
    outline: none;
    border-color: var(--primary);
}

/* Directory Content */
.directory-content {
    padding: var(--spacing-2xl) 0;
}

/* Category/Country Directory Grid */
.directory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--spacing-md);
}

.directory-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: all var(--transition);
    position: relative;
}

.directory-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

/* Popular Category Badge */
.directory-card.popular {
    border-color: var(--warning);
    background: linear-gradient(135deg, var(--surface) 0%, var(--warning-light) 100%);
}

.popular-badge {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--warning);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    text-transform: uppercase;
}

.popular-badge i {
    width: 12px;
    height: 12px;
}

.directory-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--primary-light);
    border-radius: var(--radius);
    color: var(--primary);
    flex-shrink: 0;
}

.directory-info {
    flex: 1;
    min-width: 0;
}

.directory-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}

.directory-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.directory-count {
    font-size: 0.85rem;
    color: var(--primary);
    font-weight: 500;
}

/* Creator Previews in Directory Card */
.directory-previews {
    display: flex;
    margin-left: auto;
    margin-right: var(--spacing-sm);
}

.preview-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--surface);
    object-fit: cover;
    margin-left: -10px;
}

.preview-avatar:first-child {
    margin-left: 0;
}

.directory-arrow {
    color: var(--text-muted);
    flex-shrink: 0;
    transition: transform var(--transition);
}

.directory-card:hover .directory-arrow {
    transform: translateX(4px);
    color: var(--primary);
}

/* FAQ Accordion Styles */
.faq-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: var(--spacing-sm);
    overflow: hidden;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    list-style: none;
}

.faq-question::-webkit-details-marker {
    display: none;
}

.faq-question span {
    flex: 1;
    padding-right: var(--spacing-md);
}

.faq-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--text-muted);
    transition: transform var(--transition);
}

details.faq-item[open] .faq-icon {
    transform: rotate(180deg);
}

.faq-answer {
    padding: 0 var(--spacing-lg) var(--spacing-lg);
    color: var(--text-secondary);
    line-height: 1.7;
}

.faq-answer p {
    margin: 0;
}

/* Related Rankings Grid Enhancement */
.related-rankings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--spacing-md);
}

.related-ranking-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: center;
    transition: all var(--transition);
}

.related-ranking-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.related-ranking-card i {
    color: var(--primary);
}

.related-name {
    font-weight: 500;
    color: var(--text);
}

/* Section Header with Icon */
.section-header h2 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.section-header h2 i {
    color: var(--primary);
}

/* Combinations Grid */
.combinations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--spacing-md);
}

.combination-card {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-weight: 500;
    color: var(--text);
    text-align: center;
    transition: all var(--transition);
}

.combination-card:hover {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--primary-dark);
}

/* Screen reader only class */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Search no results */
.search-no-results {
    text-align: center;
    padding: var(--spacing-2xl);
}

.search-no-results i {
    color: var(--text-muted);
    margin-bottom: var(--spacing-md);
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: var(--spacing-3xl);
}

.empty-state i {
    color: var(--text-muted);
    margin-bottom: var(--spacing-md);
}

.empty-state h3 {
    color: var(--text);
    margin-bottom: var(--spacing-sm);
}

.empty-state p {
    color: var(--text-secondary);
}

/* Countries Directory Grid */
.countries-directory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-md);
}

.country-directory-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: all var(--transition);
}

.country-directory-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.country-flag-large {
    font-size: 2.5rem;
    line-height: 1;
    flex-shrink: 0;
}

.country-directory-info {
    flex: 1;
    min-width: 0;
}

.country-directory-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}

.country-directory-count {
    font-size: 0.85rem;
    color: var(--primary);
    font-weight: 500;
}

/* Responsive Directory Styles */
@media (max-width: 768px) {
    .directory-header-content h1 {
        font-size: 1.75rem;
    }

    .directory-intro {
        font-size: 1rem;
    }

    .directory-stats-bar {
        gap: var(--spacing-sm);
    }

    .stat-pill {
        font-size: 0.8rem;
        padding: 4px 10px;
    }

    .directory-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .directory-search {
        max-width: none;
    }

    .directory-grid {
        grid-template-columns: 1fr;
    }

    .directory-card {
        flex-wrap: wrap;
        padding-top: var(--spacing-xl);
    }

    .directory-previews {
        position: absolute;
        top: var(--spacing-sm);
        right: var(--spacing-lg);
    }

    .popular-badge {
        top: auto;
        bottom: var(--spacing-sm);
    }

    .faq-question {
        padding: var(--spacing-md);
    }

    .faq-answer {
        padding: 0 var(--spacing-md) var(--spacing-md);
    }

    .related-rankings-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .related-ranking-card {
        padding: var(--spacing-md);
    }

    .combinations-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .countries-directory-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
}

/* --- pages/_error.css --- */
/* ========================================
   Error Pages
   ======================================== */

.error-page {
    text-align: center;
    padding: var(--spacing-4xl) 0;
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.error-icon {
    width: 120px;
    height: 120px;
    margin: 0 auto var(--spacing-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-light);
    border-radius: 50%;
    color: var(--primary);
}

.error-icon svg,
.error-icon i {
    width: 60px;
    height: 60px;
}

.error-code {
    font-size: 8rem;
    font-weight: var(--font-extrabold);
    color: var(--primary);
    line-height: 1;
    margin-bottom: var(--spacing-md);
}

.error-page h1 {
    font-size: var(--text-3xl);
    color: var(--text);
    margin-bottom: var(--spacing-md);
}

.error-page p {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xl);
    max-width: 500px;
}

.error-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
}

/* Helpful Links */
.error-helpful-links {
    margin-top: var(--spacing-3xl);
    text-align: left;
    max-width: 600px;
}

.error-helpful-links h2 {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

.error-helpful-links ul {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.error-helpful-links a {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    transition: all var(--transition-fast);
}

.error-helpful-links a:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.error-helpful-links a svg,
.error-helpful-links a i {
    color: var(--primary);
}

/* 404 Animation */
.error-404-animation {
    position: relative;
    display: inline-block;
}

.error-404-animation .digit {
    display: inline-block;
    animation: bounce-digit 1s ease-in-out infinite;
}

.error-404-animation .digit:nth-child(1) { animation-delay: 0s; }
.error-404-animation .digit:nth-child(2) { animation-delay: 0.1s; }
.error-404-animation .digit:nth-child(3) { animation-delay: 0.2s; }

@keyframes bounce-digit {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* 500 Error specific */
.error-500 .error-code {
    color: var(--danger);
}

.error-500 .error-icon {
    background: var(--danger-light);
    color: var(--danger);
}

/* Maintenance Mode */
.maintenance-page {
    text-align: center;
    padding: var(--spacing-4xl) 0;
}

.maintenance-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto var(--spacing-xl);
    color: var(--warning);
    animation: wrench-rotate 3s ease-in-out infinite;
}

@keyframes wrench-rotate {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-20deg); }
    75% { transform: rotate(20deg); }
}

.maintenance-progress {
    max-width: 400px;
    margin: var(--spacing-xl) auto;
}

.maintenance-progress-bar {
    height: 6px;
    background: var(--border-light);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.maintenance-progress-fill {
    height: 100%;
    background: var(--primary);
    width: 60%;
    animation: progress-pulse 2s ease-in-out infinite;
}

@keyframes progress-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Responsive */
@media (max-width: 480px) {
    .error-code {
        font-size: 5rem;
    }

    .error-helpful-links ul {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   Similar Section Top (Moved Up)
   ======================================== */

.similar-section-top {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: var(--spacing-lg) 0;
}

.similar-section-top .section-header h2 {
    font-size: var(--text-lg);
}

/* ========================================
   Exit Intent Modal
   ======================================== */

.exit-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.exit-modal.active {
    opacity: 1;
    visibility: visible;
}

.exit-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.exit-modal-content {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--surface);
    border-radius: var(--radius-xl);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s ease;
}

.exit-modal.active .exit-modal-content {
    transform: scale(1) translateY(0);
}

.exit-modal-close {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    z-index: 1;
}

.exit-modal-close:hover {
    background: var(--danger);
    border-color: var(--danger);
    color: white;
}

.exit-modal-header {
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-lg);
}

.exit-modal-header h3 {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text);
    margin-bottom: var(--spacing-sm);
}

.exit-modal-header h3 i {
    color: var(--primary);
}

.exit-modal-header p {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.exit-modal-creators {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    padding: 0 var(--spacing-xl);
}

.exit-creator-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
    overflow: hidden;
    min-width: 0;
}

.exit-creator-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.exit-creator-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius);
    overflow: hidden;
    flex-shrink: 0;
}

.exit-creator-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.exit-creator-avatar .avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    font-weight: var(--font-bold);
    font-size: var(--text-lg);
}

.exit-creator-info {
    flex: 1;
    min-width: 0;
}

.exit-creator-name {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.exit-creator-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.exit-creator-meta i {
    opacity: 0.7;
}

.exit-creator-price {
    margin-left: auto;
    font-weight: var(--font-semibold);
    color: var(--text);
}

.exit-creator-price.free {
    color: var(--success);
}

.exit-modal-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-xl);
}

.exit-continue-btn {
    width: 100%;
    justify-content: center;
}

.exit-stay-btn {
    width: 100%;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
}

.exit-stay-btn:hover {
    background: var(--background);
    border-color: var(--primary);
    color: var(--primary);
}

.exit-modal-footer {
    text-align: center;
    padding: 0 var(--spacing-xl) var(--spacing-xl);
}

.exit-modal-footer a {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--text-sm);
    color: var(--primary);
    transition: all var(--transition-fast);
}

.exit-modal-footer a:hover {
    color: var(--primary-dark);
}

@media (max-width: 480px) {
    .exit-modal {
        padding: var(--spacing-md);
    }

    .exit-modal-content {
        max-height: 85vh;
    }

    .exit-modal-header {
        padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-md);
    }

    .exit-modal-creators {
        grid-template-columns: 1fr;
        padding: 0 var(--spacing-lg);
    }

    .exit-modal-actions {
        padding: var(--spacing-lg);
    }

    .exit-modal-footer {
        padding: 0 var(--spacing-lg) var(--spacing-lg);
    }
}

/* ========================================
   SEO Trending Page
   ======================================== */

.trending-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: linear-gradient(135deg, var(--orange), #dc2626);
    color: white;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    border-radius: var(--radius-full);
    margin-bottom: var(--spacing-sm);
}

.trending-badge i {
    width: 14px;
    height: 14px;
}

.top-trending {
    border-color: var(--orange);
    background: linear-gradient(135deg, var(--surface) 0%, rgba(249, 115, 22, 0.05) 100%);
}

.top-trending .trending-badge {
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.4); }
    50% { box-shadow: 0 0 15px 5px rgba(249, 115, 22, 0.2); }
}

/* ========================================
   SEO Earnings/Highest Paid Page
   ======================================== */

.earnings-header {
    background: linear-gradient(135deg, var(--surface) 0%, rgba(34, 197, 94, 0.05) 100%);
}

.earnings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--spacing-lg);
}

.earner-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--spacing-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    transition: all var(--transition);
}

.earner-card:hover {
    border-color: var(--success);
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.earner-card.top-earner {
    border-color: var(--warning);
    background: linear-gradient(135deg, var(--surface) 0%, rgba(245, 158, 11, 0.05) 100%);
}

.earner-badge {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--gold-gradient);
    color: #1a1a2e;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    border-radius: var(--radius-full);
}

.earner-badge i {
    width: 12px;
    height: 12px;
}

.earner-rank {
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

.earner-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.earner-avatar {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    flex-shrink: 0;
}

.earner-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.earner-avatar .avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    font-weight: var(--font-bold);
    font-size: var(--text-xl);
}

.earner-info {
    flex: 1;
    min-width: 0;
}

.earner-name {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.earner-username {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.earner-earnings {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--background);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-md);
}

.earnings-amount {
    flex: 1;
    text-align: center;
}

.earnings-label {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.earnings-value {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--success);
}

.earnings-amount.yearly .earnings-value {
    color: var(--primary);
}

.earner-stats {
    display: flex;
    justify-content: center;
    gap: var(--spacing-lg);
}

.earner-stats .stat {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.earner-stats .stat i {
    color: var(--primary);
    width: 14px;
    height: 14px;
}

/* ========================================
   Compare Page Styles
   ======================================== */

.compare-header {
    background: var(--surface);
    padding: var(--spacing-xl) 0;
    border-bottom: 1px solid var(--border);
    text-align: center;
}

.compare-header h1 {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--text);
    margin-bottom: var(--spacing-sm);
}

.compare-header h1 i {
    color: var(--primary);
}

.compare-intro {
    font-size: var(--text-base);
    color: var(--text-secondary);
}

.compare-section {
    padding: var(--spacing-2xl) 0;
}

.compare-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--spacing-lg);
    align-items: center;
    margin-bottom: var(--spacing-2xl);
}

.compare-creator {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--spacing-xl);
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius-xl);
    transition: all var(--transition);
}

.compare-creator.winner {
    border-color: var(--success);
    background: linear-gradient(135deg, var(--surface) 0%, rgba(34, 197, 94, 0.05) 100%);
}

.compare-avatar {
    width: 100px;
    height: 100px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-bottom: var(--spacing-md);
}

.compare-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.compare-avatar .avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    font-weight: var(--font-bold);
    font-size: var(--text-3xl);
}

.compare-name {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text);
    margin-bottom: var(--spacing-xs);
}

.compare-username {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
}

.compare-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: var(--radius-full);
    color: white;
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
}

.compare-table {
    background: var(--surface);
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--border);
}

.compare-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    border-bottom: 1px solid var(--border);
}

.compare-row:last-child {
    border-bottom: none;
}

.compare-cell {
    padding: var(--spacing-lg);
    text-align: center;
}

.compare-cell.label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    background: var(--background);
    min-width: 140px;
}

.compare-cell.label i {
    color: var(--primary);
}

.compare-cell.winner {
    background: rgba(34, 197, 94, 0.1);
}

.compare-cell.winner .compare-value {
    color: var(--success);
    font-weight: var(--font-bold);
}

.compare-value {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text);
}

.compare-value.free {
    color: var(--success);
}

.compare-actions {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
    flex-wrap: wrap;
}

/* Compare AI Content Section */
.compare-ai-section {
    padding: var(--spacing-2xl) 0;
    background: var(--surface);
}

.compare-ai-section h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text);
    margin-bottom: var(--spacing-xl);
}

.compare-ai-section h2 i {
    color: var(--primary);
}

.compare-ai-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
}

.compare-ai-card {
    background: var(--background);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    overflow: hidden;
}

.compare-ai-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--surface) 100%);
    border-bottom: 1px solid var(--border);
}

.compare-ai-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    object-fit: cover;
    border: 2px solid var(--primary);
}

.compare-ai-header h3 {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text);
    margin: 0;
}

.compare-ai-content {
    padding: var(--spacing-md);
}

.compare-ai-content .ai-section {
    margin-bottom: var(--spacing-md);
}

.compare-ai-content .ai-section:last-child {
    margin-bottom: 0;
}

.compare-ai-content .ai-section h4 {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--primary);
    margin-bottom: var(--spacing-xs);
}

.compare-ai-content .ai-section p {
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

.compare-ai-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
    color: var(--text-muted);
    text-align: center;
}

.compare-ai-empty i {
    margin-bottom: var(--spacing-sm);
    opacity: 0.5;
}

@media (max-width: 768px) {
    .compare-ai-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   Question/Featured Snippet Page
   ======================================== */

.question-header {
    background: linear-gradient(135deg, var(--surface) 0%, var(--primary-light) 100%);
    padding: var(--spacing-xl) 0;
    border-bottom: 1px solid var(--border);
}

.question-header h1 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--text);
}

.question-header h1 i {
    color: var(--primary);
}

.answer-section {
    padding: var(--spacing-2xl) 0;
    background: var(--background);
}

.featured-answer {
    padding: var(--spacing-xl);
    background: var(--surface);
    border: 2px solid var(--primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.featured-answer h2 {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text);
    margin-bottom: var(--spacing-lg);
}

.answer-content {
    margin-bottom: var(--spacing-xl);
}

.answer-text {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--text);
    margin-bottom: var(--spacing-lg);
}

.answer-text p {
    margin: 0;
}

.featured-creator {
    margin-top: var(--spacing-lg);
}

.featured-creator-header {
    margin-bottom: var(--spacing-md);
}

.featured-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 6px 14px;
    background: var(--gold-gradient);
    color: #1a1a2e;
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    border-radius: var(--radius-full);
}

.featured-badge i {
    width: 16px;
    height: 16px;
}

.featured-creator-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: all var(--transition);
}

.featured-creator-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

.featured-avatar {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    flex-shrink: 0;
}

.featured-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.featured-avatar .avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    font-weight: var(--font-bold);
    font-size: var(--text-2xl);
}

.featured-info {
    flex: 1;
    min-width: 0;
}

.featured-info h3 {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--text);
    margin-bottom: 2px;
}

.featured-username {
    display: block;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

.featured-stats {
    display: flex;
    gap: var(--spacing-lg);
}

.featured-stats .stat {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.featured-stats .stat i {
    color: var(--primary);
    width: 14px;
    height: 14px;
}

.featured-action {
    flex-shrink: 0;
}

/* Top 10 List */
.top-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.top-list-item {
    display: grid;
    grid-template-columns: 50px 60px 1fr auto;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: all var(--transition);
}

.top-list-item:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

.top-list-item.first {
    background: linear-gradient(135deg, var(--surface) 0%, rgba(245, 158, 11, 0.05) 100%);
    border-color: var(--warning);
}

.top-list-item .list-rank {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--text);
}

.top-list-item .list-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius);
    overflow: hidden;
}

.top-list-item .list-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.top-list-item .list-avatar .avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    font-weight: var(--font-bold);
}

.top-list-item .list-info h3 {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text);
    margin-bottom: 2px;
}

.top-list-item .list-username {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.top-list-item .list-stats {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.top-list-item .list-stats .followers i {
    color: var(--primary);
}

.view-more {
    text-align: center;
    margin-top: var(--spacing-xl);
}

/* ========================================
   Related Section (Shared)
   ======================================== */

.related-section {
    padding: var(--spacing-2xl) 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
}

.related-section h2 {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text);
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

.related-links {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.related-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    color: var(--text);
    font-weight: var(--font-medium);
    transition: all var(--transition);
}

.related-link:hover {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--primary-dark);
}

.related-link i {
    color: var(--primary);
}

/* ========================================
   FAQ Section (SEO Pages)
   ======================================== */

.faq-section {
    padding: var(--spacing-2xl) 0;
}

.faq-section h2 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text);
    margin-bottom: var(--spacing-lg);
}

.faq-section h2 i {
    color: var(--primary);
}

.faq-section .faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.faq-section .faq-item {
    padding: var(--spacing-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.faq-section .faq-item h3 {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text);
    margin-bottom: var(--spacing-sm);
}

.faq-section .faq-answer p {
    margin: 0;
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

/* ========================================
   Responsive - SEO Pages
   ======================================== */

@media (max-width: 992px) {
    .compare-grid {
        grid-template-columns: 1fr 60px 1fr;
        gap: var(--spacing-sm);
    }

    .compare-vs {
        width: 50px;
        height: 50px;
        font-size: var(--text-base);
    }

    .compare-creator {
        padding: var(--spacing-md);
    }

    .earnings-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .compare-ai-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
}

@media (max-width: 768px) {
    .compare-header {
        padding: var(--spacing-lg) 0;
    }

    .compare-header h1 {
        font-size: var(--text-xl);
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    .compare-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }

    .compare-vs {
        width: 40px;
        height: 40px;
        font-size: var(--text-sm);
        margin: var(--spacing-xs) auto;
    }

    .compare-creator {
        padding: var(--spacing-md);
    }

    .compare-avatar {
        width: 80px;
        height: 80px;
    }

    .compare-name {
        font-size: var(--text-lg);
    }

    .compare-section {
        padding: var(--spacing-lg) 0;
    }

    .compare-table {
        margin-top: var(--spacing-md);
    }

    .compare-table {
        border-radius: var(--radius-lg);
    }

    .compare-row {
        display: flex;
        flex-wrap: wrap;
        padding: var(--spacing-sm);
        gap: var(--spacing-xs);
    }

    .compare-cell {
        padding: var(--spacing-sm);
    }

    .compare-cell.label {
        order: -1;
        flex: 0 0 100%;
        text-align: center;
        background: var(--background);
        padding: var(--spacing-xs) var(--spacing-sm);
        border-radius: var(--radius-sm);
        min-width: auto;
        font-size: var(--text-sm);
    }

    .compare-cell:not(.label) {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        background: var(--surface);
        border-radius: var(--radius-sm);
    }

    .earnings-grid {
        grid-template-columns: 1fr;
    }

    .featured-creator-card {
        flex-direction: column;
        text-align: center;
    }

    .featured-stats {
        justify-content: center;
    }

    .top-list-item {
        grid-template-columns: 40px 50px 1fr;
    }

    .top-list-item .list-stats {
        display: none;
    }

    .compare-ai-section {
        padding: var(--spacing-lg) 0;
    }

    .compare-ai-section h2 {
        font-size: var(--text-lg);
        margin-bottom: var(--spacing-md);
    }

    .compare-ai-header {
        padding: var(--spacing-sm);
    }

    .compare-ai-avatar {
        width: 40px;
        height: 40px;
    }

    .compare-ai-header h3 {
        font-size: var(--text-base);
    }

    .compare-ai-content {
        padding: var(--spacing-sm);
    }

    .compare-ai-content .ai-section h4 {
        font-size: var(--text-xs);
    }

    .compare-ai-content .ai-section p {
        font-size: var(--text-xs);
    }
}

@media (max-width: 480px) {
    .compare-header h1 {
        font-size: var(--text-lg);
    }

    .compare-intro {
        font-size: var(--text-sm);
    }

    .compare-avatar {
        width: 70px;
        height: 70px;
    }

    .compare-name {
        font-size: var(--text-base);
    }

    .compare-username {
        font-size: var(--text-xs);
    }

    .compare-table {
        font-size: var(--text-sm);
    }

    .compare-value {
        font-size: var(--text-sm);
    }

    .compare-cell.label {
        font-size: var(--text-xs);
    }

    .related-section {
        padding: var(--spacing-lg) 0;
    }

    .related-section h2 {
        font-size: var(--text-lg);
    }

    .related-links {
        flex-direction: column;
        align-items: stretch;
    }

    .related-link {
        justify-content: center;
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--text-sm);
    }

    .compare-actions {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .compare-actions .btn {
        width: 100%;
        justify-content: center;
        font-size: var(--text-sm);
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .compare-ai-empty {
        padding: var(--spacing-md);
    }

    .compare-ai-empty i {
        width: 32px;
        height: 32px;
    }

    .compare-ai-empty p {
        font-size: var(--text-sm);
    }

    .compare-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================
   Card UI Enhancements - Spacing & Truncation
   ======================================== */

/* Card Grid Spacing */
.ranking-grid {
    gap: var(--spacing-lg);
    padding: var(--spacing-md);
}

/* Card Internal Spacing */
.ranking-card {
    padding: 0;
    overflow: hidden;
}

.ranking-card .ranking-info {
    padding: var(--spacing-md) var(--spacing-lg);
}

.ranking-card .ranking-metrics {
    padding: var(--spacing-sm) var(--spacing-md);
    gap: var(--spacing-sm);
}

.ranking-card .ranking-price {
    padding: var(--spacing-md);
}

/* Text Truncation - Card Names */
.ranking-info h3,
.list-info h3,
.exit-creator-name,
.earner-name,
.trending-name,
.hot-info .hot-name,
.directory-name,
.country-directory-name,
.featured-info h3,
.top-list-item .list-info h3,
.compare-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Text Truncation - Usernames */
.ranking-username,
.list-username,
.exit-creator-username,
.earner-username,
.trending-username,
.featured-username,
.compare-username,
.top-list-item .list-username {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Category/Meta Info Truncation */
.ranking-card .ranking-category,
.list-info .list-category,
.exit-creator-meta,
.directory-desc {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Multi-line Truncation for Descriptions */
.directory-desc,
.seo-intro,
.page-intro {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
}

/* Card Hover Spacing Enhancement */
.ranking-card:hover {
    transform: translateY(-4px);
}

/* Exit Modal Card Spacing */
.exit-creator-card {
    padding: var(--spacing-md);
    gap: var(--spacing-sm);
}

.exit-creator-info {
    max-width: calc(100% - 60px);
}

/* Trending Cards Spacing */
.trending-item {
    padding: var(--spacing-md) var(--spacing-lg);
}

.trending-hot-card {
    padding: var(--spacing-md);
}

/* Earner Cards Spacing */
.earner-card {
    padding: var(--spacing-lg);
}

.earner-header {
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.earner-earnings {
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

/* List View Spacing */
.ranking-list-item {
    padding: var(--spacing-md) var(--spacing-lg);
    gap: var(--spacing-md);
}

/* Directory Cards Spacing */
.directory-card {
    padding: var(--spacing-md) var(--spacing-lg);
}

/* Mobile Spacing Adjustments */
@media (max-width: 768px) {
    .ranking-grid {
        gap: var(--spacing-md);
        padding: var(--spacing-sm);
    }

    .ranking-card .ranking-info {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .ranking-card .ranking-metrics {
        padding: var(--spacing-xs) var(--spacing-sm);
        flex-wrap: wrap;
    }

    .ranking-card .ranking-metrics .metric {
        font-size: var(--text-xs);
    }

    .exit-modal-creators {
        gap: var(--spacing-sm);
    }

    .exit-creator-card {
        padding: var(--spacing-sm);
    }

    .earner-card {
        padding: var(--spacing-md);
    }

    .directory-card {
        padding: var(--spacing-md);
    }
}

@media (max-width: 480px) {
    .ranking-grid {
        padding: 0;
    }

    .ranking-card .ranking-info h3 {
        font-size: var(--text-base);
    }

    .ranking-card .ranking-metrics {
        justify-content: space-between;
    }

    .exit-creator-info {
        max-width: calc(100% - 50px);
    }
}

/* ============================================
   Question/Answer Page - Most Followers
   ============================================ */

/* Question Hero */
.question-hero {
    background: linear-gradient(135deg, var(--primary) 0%, #6366f1 100%);
    padding: var(--spacing-2xl) 0;
    color: white;
    text-align: center;
}

.question-hero-content {
    max-width: 800px;
    margin: 0 auto;
}

.question-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-md);
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    margin-bottom: var(--spacing-md);
}

.question-hero h1 {
    font-size: var(--text-3xl);
    font-weight: var(--font-extrabold);
    margin-bottom: var(--spacing-sm);
    line-height: 1.2;
}

.question-subtitle {
    font-size: var(--text-base);
    opacity: 0.9;
}

/* Featured Answer V2 */
.featured-answer-v2 {
    background: var(--surface);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
}

.answer-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border);
}

.answer-header i {
    color: var(--primary);
}

.answer-header h2 {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text);
    margin: 0;
}

.answer-text {
    font-size: var(--text-lg);
    color: var(--text);
    line-height: 1.7;
    margin-bottom: var(--spacing-xl);
}

.answer-text strong {
    color: var(--primary);
}

/* Winner Spotlight */
.winner-spotlight {
    position: relative;
    padding-top: var(--spacing-xl);
}

.winner-crown {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.4);
    z-index: 1;
}

.winner-crown i {
    color: white;
    width: 32px;
    height: 32px;
}

.winner-card {
    display: block;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%);
    border: 2px solid #fbbf24;
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl) var(--spacing-xl) var(--spacing-xl);
    text-align: center;
    transition: all var(--transition);
    text-decoration: none;
}

.winner-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(245, 158, 11, 0.2);
}

.winner-avatar {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto var(--spacing-lg);
}

.winner-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fbbf24;
}

.winner-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: white;
    border: 3px solid var(--surface);
}

.winner-info h3 {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--text);
    margin-bottom: var(--spacing-xs);
}

.winner-username {
    font-size: var(--text-base);
    color: var(--text-secondary);
}

.verified-icon {
    color: var(--primary);
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-left: var(--spacing-xs);
}

.winner-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
    margin: var(--spacing-xl) 0;
    padding: var(--spacing-lg);
    background: var(--surface);
    border-radius: var(--radius-lg);
}

.winner-stat {
    text-align: center;
}

.winner-stat i {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
}

.winner-stat.primary i {
    color: var(--primary);
}

.winner-stat .stat-value {
    display: block;
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text);
}

.winner-stat .stat-label {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.winner-cta .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* Section Header */
.section-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.section-header h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--text);
    margin-bottom: var(--spacing-sm);
}

.section-header h2 i {
    color: var(--primary);
}

.section-subtitle {
    font-size: var(--text-base);
    color: var(--text-secondary);
}

/* Leaderboard */
.leaderboard {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xl);
}

.leaderboard-item {
    display: grid;
    grid-template-columns: 50px 60px 1fr auto auto;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: all var(--transition);
    text-decoration: none;
}

.leaderboard-item:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
    transform: translateX(4px);
}

.leaderboard-item.gold {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, var(--surface) 100%);
    border-color: #fbbf24;
}

.leaderboard-item.silver {
    background: linear-gradient(135deg, rgba(156, 163, 175, 0.1) 0%, var(--surface) 100%);
    border-color: #9ca3af;
}

.leaderboard-item.bronze {
    background: linear-gradient(135deg, rgba(180, 83, 9, 0.1) 0%, var(--surface) 100%);
    border-color: #b45309;
}

.leaderboard-rank {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.gold-icon { color: #fbbf24; }
.silver-icon { color: #9ca3af; }
.bronze-icon { color: #b45309; }

.rank-number {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--text-secondary);
}

.leaderboard-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius);
    overflow: hidden;
}

.leaderboard-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.leaderboard-info h3 {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text);
    margin-bottom: 2px;
}

.leaderboard-username {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.leaderboard-stats {
    display: flex;
    gap: var(--spacing-lg);
}

.leaderboard-followers,
.leaderboard-likes {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.leaderboard-followers i {
    color: var(--primary);
}

.leaderboard-likes i {
    color: #ef4444;
}

.leaderboard-action {
    color: var(--text-muted);
}

.leaderboard-item:hover .leaderboard-action {
    color: var(--primary);
}

/* Related Cards */
.related-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
}

.related-card {
    display: block;
    padding: var(--spacing-xl);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: all var(--transition);
    text-decoration: none;
}

.related-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.related-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto var(--spacing-md);
    background: var(--primary-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.related-icon i {
    color: var(--primary);
    width: 28px;
    height: 28px;
}

.related-icon.trending {
    background: #fef3c7;
}

.related-icon.trending i {
    color: #f59e0b;
}

.related-icon.crown {
    background: #ede9fe;
}

.related-icon.crown i {
    color: #8b5cf6;
}

.related-card h3 {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text);
    margin-bottom: var(--spacing-xs);
}

.related-card p {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0;
}

/* Responsive for Question Page */
@media (max-width: 768px) {
    .question-hero h1 {
        font-size: var(--text-2xl);
    }

    .winner-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .leaderboard-item {
        grid-template-columns: 40px 50px 1fr auto;
    }

    .leaderboard-stats {
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    .leaderboard-likes {
        display: none;
    }

    .related-cards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .question-hero {
        padding: var(--spacing-xl) 0;
    }

    .question-hero h1 {
        font-size: var(--text-xl);
    }

    .winner-avatar {
        width: 100px;
        height: 100px;
    }

    .winner-info h3 {
        font-size: var(--text-xl);
    }

    .winner-stats {
        padding: var(--spacing-md);
    }

    .winner-stat .stat-value {
        font-size: var(--text-lg);
    }

    .leaderboard-item {
        grid-template-columns: 35px 45px 1fr;
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .leaderboard-stats,
    .leaderboard-action {
        display: none;
    }
}

/* ============================================
   Compact Question Page Styles
   ============================================ */

/* Answer Section Compact */
.answer-section-compact {
    padding: var(--spacing-xl) 0;
    background: var(--background);
}

.answer-box {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border: 1px solid var(--border);
}

.answer-box h1 {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text);
    margin-bottom: var(--spacing-md);
}

.answer-box .answer-text {
    font-size: var(--text-base);
    color: var(--text);
    margin-bottom: var(--spacing-md);
}

.answer-box .answer-text strong {
    color: var(--primary);
}

/* Winner Card Compact */
.winner-card-compact {
    display: grid;
    grid-template-columns: 60px 50px 1fr auto auto;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(251, 191, 36, 0.02) 100%);
    border: 2px solid #fbbf24;
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all var(--transition);
}

.winner-card-compact:hover {
    box-shadow: 0 4px 20px rgba(251, 191, 36, 0.2);
    transform: translateY(-2px);
}

.winner-rank {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.winner-rank i {
    color: #fbbf24;
}

.winner-rank span {
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: #b45309;
}

.winner-avatar-sm {
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    overflow: hidden;
}

.winner-avatar-sm img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.winner-details h3 {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text);
    margin-bottom: 2px;
}

.winner-details .winner-username {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.winner-metrics {
    display: flex;
    gap: var(--spacing-md);
}

.winner-metrics .metric {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.winner-metrics .metric i {
    color: var(--primary);
}

.winner-arrow {
    color: var(--text-muted);
}

.winner-card-compact:hover .winner-arrow {
    color: var(--primary);
}

/* Section Header Inline */
.section-header-inline {
    margin-bottom: var(--spacing-md);
}

.section-header-inline h2 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--text);
}

.section-header-inline h2 i {
    color: var(--primary);
}

/* Leaderboard Compact */
.ranking-section.compact {
    padding: var(--spacing-lg) 0;
}

.leaderboard-compact {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-lg);
}

.leaderboard-row {
    display: grid;
    grid-template-columns: 36px 36px 1fr auto;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    transition: all var(--transition);
}

.leaderboard-row:hover {
    border-color: var(--primary);
    background: var(--primary-light);
}

.leaderboard-row.gold {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, var(--surface) 100%);
    border-color: #fbbf24;
}

.leaderboard-row.silver {
    background: linear-gradient(135deg, rgba(156, 163, 175, 0.15) 0%, var(--surface) 100%);
    border-color: #9ca3af;
}

.leaderboard-row.bronze {
    background: linear-gradient(135deg, rgba(180, 83, 9, 0.15) 0%, var(--surface) 100%);
    border-color: #b45309;
}

.lb-rank {
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--text-secondary);
    text-align: center;
    min-width: 28px;
}

.lb-rank.top3 {
    font-size: var(--text-base);
    color: var(--text);
}

.leaderboard-row.gold .lb-rank { color: #b45309; }
.leaderboard-row.silver .lb-rank { color: #6b7280; }
.leaderboard-row.bronze .lb-rank { color: #92400e; }

.lb-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.lb-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lb-info {
    min-width: 0;
}

.lb-name {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lb-username {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lb-followers {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    white-space: nowrap;
}

.lb-followers i {
    color: var(--primary);
}

/* Responsive Compact */
@media (max-width: 992px) {
    .leaderboard-compact {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .winner-card-compact {
        grid-template-columns: 50px 40px 1fr auto;
    }

    .winner-metrics {
        display: none;
    }

    .answer-box h1 {
        font-size: var(--text-lg);
    }
}

@media (max-width: 480px) {
    .answer-section-compact {
        padding: var(--spacing-md) 0;
    }

    .answer-box {
        padding: var(--spacing-md);
    }

    .winner-card-compact {
        grid-template-columns: 40px 36px 1fr auto;
        padding: var(--spacing-sm);
        gap: var(--spacing-xs);
    }

    .winner-rank i {
        width: 18px;
        height: 18px;
    }

    .winner-avatar-sm {
        width: 36px;
        height: 36px;
    }

    .winner-details h3 {
        font-size: var(--text-sm);
    }

    .leaderboard-row {
        grid-template-columns: 30px 30px 1fr auto;
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    .lb-avatar {
        width: 28px;
        height: 28px;
    }

    .lb-name {
        font-size: var(--text-xs);
    }

    .lb-username {
        display: none;
    }
}

/* ============================================
   Compare Tool Page
   ============================================ */

/* Compare Tool Header */
.compare-tool-header {
    background: linear-gradient(135deg, var(--primary) 0%, #6366f1 100%);
    padding: var(--spacing-xl) 0;
    color: white;
    text-align: center;
}

.compare-tool-header h1 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    margin-bottom: var(--spacing-sm);
}

.compare-tool-intro {
    font-size: var(--text-base);
    opacity: 0.9;
}

/* Compare Form Section */
.compare-tool-section {
    padding: var(--spacing-2xl) 0;
    background: var(--background);
}

.compare-form {
    max-width: 900px;
    margin: 0 auto;
}

.compare-inputs {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--spacing-lg);
    align-items: start;
    margin-bottom: var(--spacing-xl);
}

.creator-select {
    position: relative;
}

.creator-select label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text);
    margin-bottom: var(--spacing-sm);
}

.search-input-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    transition: all var(--transition);
}

.search-input-wrapper:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 175, 240, 0.1);
}

.search-input-wrapper i {
    color: var(--text-muted);
    flex-shrink: 0;
}

.search-input-wrapper input {
    flex: 1;
    border: none;
    outline: none;
    font-size: var(--text-base);
    background: transparent;
    color: var(--text);
}

.search-input-wrapper input::placeholder {
    color: var(--text-muted);
}

.clear-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: var(--border);
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all var(--transition);
}

.clear-btn:hover {
    background: var(--text-muted);
    color: white;
}

/* Search Results */
.search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    display: none;
    max-height: 300px;
    overflow-y: auto;
    margin-top: var(--spacing-xs);
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    cursor: pointer;
    transition: background var(--transition);
}

.search-result-item:hover {
    background: var(--primary-light);
}

.result-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    object-fit: cover;
}

.result-info {
    flex: 1;
    min-width: 0;
}

.result-name {
    display: block;
    font-weight: var(--font-medium);
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.result-username {
    display: block;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.no-results {
    padding: var(--spacing-lg);
    text-align: center;
    color: var(--text-muted);
}

/* Selected Creator */
.selected-creator {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--primary-light);
    border: 2px solid var(--primary);
    border-radius: var(--radius-lg);
}

.selected-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius);
    object-fit: cover;
}

.selected-info {
    flex: 1;
    min-width: 0;
}

.selected-name {
    display: block;
    font-weight: var(--font-semibold);
    color: var(--text);
}

.selected-username {
    display: block;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.remove-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: var(--surface);
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all var(--transition);
}

.remove-btn:hover {
    background: #fee2e2;
    color: #ef4444;
}

/* VS Badge */
.compare-vs-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: 50%;
    font-weight: var(--font-bold);
    color: var(--text-secondary);
    margin-top: 28px;
}

/* Compare Button */
.compare-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
}

.compare-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* How It Works */
.compare-how-section {
    padding: var(--spacing-2xl) 0;
    background: var(--surface);
}

.compare-how-section h2 {
    text-align: center;
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text);
    margin-bottom: var(--spacing-xl);
}

.how-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl);
    max-width: 900px;
    margin: 0 auto;
}

.how-step {
    text-align: center;
}

.step-number {
    width: 48px;
    height: 48px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    margin: 0 auto var(--spacing-md);
}

.how-step h3 {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text);
    margin-bottom: var(--spacing-xs);
}

.how-step p {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* Popular Comparisons */
.popular-comparisons-section {
    padding: var(--spacing-2xl) 0;
    background: var(--background);
}

.popular-comparisons-section h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text);
    margin-bottom: var(--spacing-xl);
}

.popular-comparisons-section h2 i {
    color: var(--primary);
}

.popular-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    max-width: 900px;
    margin: 0 auto;
}

.popular-comparison {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all var(--transition);
}

.popular-comparison:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

.pop-creator {
    font-weight: var(--font-medium);
    color: var(--text);
}

.pop-vs {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-transform: uppercase;
}

/* Compare Tool Responsive */
@media (max-width: 768px) {
    .compare-inputs {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .compare-vs-badge {
        margin: 0 auto;
    }

    .how-steps {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .popular-grid {
        grid-template-columns: 1fr;
    }

    .compare-tool-header h1 {
        font-size: var(--text-xl);
    }
}

@media (max-width: 480px) {
    .compare-tool-section {
        padding: var(--spacing-lg) 0;
    }

    .selected-creator {
        padding: var(--spacing-sm);
    }

    .selected-avatar {
        width: 40px;
        height: 40px;
    }
}