/**
 * ═══════════════════════════════════════════════════════════════
 * NEXUS — Next-Gen Gaming Theme for AgionesCMS
 * CSS Nesting · Container Queries · :has() · oklch() · @property
 * ═══════════════════════════════════════════════════════════════
 * Author: Yamiru (Viktor Vasko) — yamiru.com
 * Version: 2.0.0
 * AI SEO 2026+ optimized — data-ai-* attribute aware
 */

/* ╔══════════════════════════════════════════════════════════════╗
   ║ FONTS                                                        ║
   ╚══════════════════════════════════════════════════════════════╝ */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Manrope:wght@300;400;500;600;700;800&display=swap');

/* ╔══════════════════════════════════════════════════════════════╗
   ║ @property — Animated custom properties                       ║
   ╚══════════════════════════════════════════════════════════════╝ */
@property --glow-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@property --glow-opacity {
    syntax: "<number>";
    initial-value: 0;
    inherits: false;
}

@property --accent-hue {
    syntax: "<number>";
    initial-value: 285;
    inherits: true;
}

@property --shimmer-x {
    syntax: "<percentage>";
    initial-value: -100%;
    inherits: false;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║ CSS VARIABLES — oklch() color system                         ║
   ╚══════════════════════════════════════════════════════════════╝ */
:root {
    /* === Core palette via oklch for perceptual uniformity === */
    --nx-primary: oklch(0.68 0.18 285);       /* electric violet */
    --nx-primary-dim: oklch(0.48 0.14 285);
    --nx-primary-bright: oklch(0.78 0.20 285);
    
    --nx-accent: oklch(0.82 0.22 115);        /* laser lemon */
    --nx-accent-dim: oklch(0.62 0.16 115);
    
    --nx-hot: oklch(0.68 0.22 10);            /* cyber pink */
    --nx-hot-dim: oklch(0.50 0.18 10);
    
    --nx-success: oklch(0.72 0.19 155);       /* neon mint */
    --nx-warning: oklch(0.78 0.17 85);        /* amber pulse */
    --nx-info: oklch(0.70 0.15 230);          /* frost blue */
    --nx-danger: oklch(0.62 0.22 25);         /* crimson */
    
    /* === Surfaces — dark layered system === */
    --nx-void: oklch(0.12 0.02 280);          /* deepest black-purple */
    --nx-base: oklch(0.15 0.02 275);          /* body background */
    --nx-surface: oklch(0.18 0.025 275);      /* card/panel */
    --nx-surface-raised: oklch(0.21 0.03 275);/* elevated card */
    --nx-surface-overlay: oklch(0.24 0.03 275);/* modal/dropdown */
    
    /* === Borders & lines === */
    --nx-border: oklch(0.28 0.03 275);
    --nx-border-subtle: oklch(0.22 0.02 275);
    --nx-border-active: var(--nx-primary);
    
    /* === Text === */
    --nx-text: oklch(0.90 0.01 275);
    --nx-text-secondary: oklch(0.65 0.02 275);
    --nx-text-muted: oklch(0.50 0.02 275);
    --nx-text-on-primary: oklch(0.15 0.02 285);
    
    /* === Fallback hex for older browsers === */
    --nx-primary-hex: #BF7AF0;
    --nx-accent-hex: #D6FF6B;
    --nx-hot-hex: #FF5E8A;
    --nx-base-hex: #0C0C14;
    --nx-surface-hex: #161625;
    
    /* === Typography === */
    --nx-font-heading: 'Chakra Petch', 'Segoe UI', system-ui, sans-serif;
    --nx-font-body: 'Manrope', 'Segoe UI', system-ui, sans-serif;
    --nx-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
    
    /* === Sizing & spacing === */
    --nx-radius-xs: 4px;
    --nx-radius-sm: 6px;
    --nx-radius: 10px;
    --nx-radius-lg: 16px;
    --nx-radius-xl: 24px;
    --nx-radius-full: 9999px;
    
    /* === Shadows & glows === */
    --nx-shadow-sm: 0 1px 3px oklch(0 0 0 / 0.3);
    --nx-shadow: 0 4px 16px oklch(0 0 0 / 0.4);
    --nx-shadow-lg: 0 8px 32px oklch(0 0 0 / 0.5);
    --nx-glow-primary: 0 0 20px oklch(0.68 0.18 285 / 0.4);
    --nx-glow-accent: 0 0 20px oklch(0.82 0.22 115 / 0.3);
    --nx-glow-hot: 0 0 20px oklch(0.68 0.22 10 / 0.3);
    
    /* === Transitions === */
    --nx-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --nx-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --nx-duration: 0.25s;
    --nx-duration-slow: 0.5s;
    
    /* === Misc === */
    color-scheme: dark;
    accent-color: var(--nx-primary, #BF7AF0);
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║ KEYFRAMES                                                    ║
   ╚══════════════════════════════════════════════════════════════╝ */
@keyframes nx-glow-rotate {
    to { --glow-angle: 360deg; }
}

@keyframes nx-shimmer {
    to { --shimmer-x: 200%; }
}

@keyframes nx-fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes nx-pulse-glow {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

@keyframes nx-scan-line {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100vh); }
}

@keyframes nx-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║ BASE STYLES                                                  ║
   ╚══════════════════════════════════════════════════════════════╝ */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--nx-font-body);
    background: var(--nx-base, #0C0C14);
    color: var(--nx-text, #e0e0e0);
    line-height: 1.65;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    min-block-size: 100dvh;

    /* Ambient background glow */
    &::before {
        content: '';
        position: fixed;
        inset: 0;
        background:
            radial-gradient(ellipse 60% 50% at 15% 85%, oklch(0.68 0.18 285 / 0.07) 0%, transparent 60%),
            radial-gradient(ellipse 50% 40% at 85% 15%, oklch(0.68 0.22 10 / 0.06) 0%, transparent 55%),
            radial-gradient(ellipse 70% 60% at 50% 50%, oklch(0.82 0.22 115 / 0.03) 0%, transparent 70%);
        pointer-events: none;
        z-index: -1;
    }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║ TYPOGRAPHY                                                   ║
   ╚══════════════════════════════════════════════════════════════╝ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--nx-font-heading);
    font-weight: 700;
    color: var(--nx-text, #fff);
    letter-spacing: 0.02em;
    line-height: 1.2;
    text-wrap: balance;
}

h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
h3 { font-size: clamp(1.15rem, 2.5vw, 1.5rem); }

a {
    color: var(--nx-primary, #BF7AF0);
    text-decoration: none;
    transition: color var(--nx-duration) var(--nx-ease),
                text-shadow var(--nx-duration) var(--nx-ease);

    &:hover {
        color: var(--nx-primary-bright, #d8a8f8);
        text-shadow: 0 0 12px oklch(0.68 0.18 285 / 0.5);
    }
}

code, pre {
    font-family: var(--nx-font-mono);
}

code {
    background: var(--nx-surface, #161625);
    color: var(--nx-accent, #D6FF6B);
    padding: 0.15em 0.4em;
    border-radius: var(--nx-radius-xs);
    font-size: 0.88em;
    border: 0.5px solid var(--nx-border-subtle);
}

::selection {
    background: oklch(0.68 0.18 285 / 0.35);
    color: #fff;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║ SCROLLBAR                                                    ║
   ╚══════════════════════════════════════════════════════════════╝ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--nx-void, #080810); }
::-webkit-scrollbar-thumb {
    background: var(--nx-border, #3a3a5c);
    border-radius: 3px;

    &:hover { background: var(--nx-primary, #BF7AF0); }
}

/* Firefox */
* { scrollbar-width: thin; scrollbar-color: var(--nx-border, #3a3a5c) var(--nx-void, #080810); }

/* ╔══════════════════════════════════════════════════════════════╗
   ║ HEADER / NAVIGATION                                          ║
   ╚══════════════════════════════════════════════════════════════╝ */
.main-header {
    background: oklch(0.13 0.02 275 / 0.92);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border-block-end: 0.5px solid var(--nx-border-subtle);
    position: sticky;
    inset-block-start: 0;
    z-index: 1030;
    transition: box-shadow var(--nx-duration) var(--nx-ease);

    &.scrolled {
        box-shadow: 0 2px 20px oklch(0 0 0 / 0.5);
    }

    & .navbar {
        padding-block: 0.75rem;
    }

    & .navbar-brand {
        font-family: var(--nx-font-heading);
        font-weight: 700;
        font-size: 1.4rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--nx-primary, #BF7AF0) !important;
        transition: text-shadow var(--nx-duration) var(--nx-ease);

        &:hover {
            text-shadow: var(--nx-glow-primary);
        }

        & img { max-height: 38px; }
    }

    & .nav-link {
        color: var(--nx-text-secondary, #a0a0b8) !important;
        font-weight: 600;
        font-size: 0.85rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        padding: 0.6rem 0.9rem !important;
        border-radius: var(--nx-radius-sm);
        position: relative;
        transition: color var(--nx-duration) var(--nx-ease),
                    background var(--nx-duration) var(--nx-ease);

        /* Animated underline */
        &::after {
            content: '';
            position: absolute;
            inset-block-end: 2px;
            inset-inline-start: 50%;
            inline-size: 0;
            block-size: 1.5px;
            background: var(--nx-primary, #BF7AF0);
            box-shadow: 0 0 8px oklch(0.68 0.18 285 / 0.6);
            transition: inline-size var(--nx-duration) var(--nx-ease-spring),
                        inset-inline-start var(--nx-duration) var(--nx-ease-spring);
            border-radius: 1px;
        }

        &:hover {
            color: var(--nx-text, #e0e0e0) !important;
            background: oklch(0.68 0.18 285 / 0.06);

            &::after {
                inline-size: 70%;
                inset-inline-start: 15%;
            }
        }

        &.active {
            color: var(--nx-primary, #BF7AF0) !important;

            &::after {
                inline-size: 70%;
                inset-inline-start: 15%;
            }
        }
    }

    & .dropdown-menu {
        background: var(--nx-surface-overlay, #2a2a40);
        border: 0.5px solid var(--nx-border);
        border-radius: var(--nx-radius);
        box-shadow: var(--nx-shadow-lg);
        padding: 0.4rem;
        animation: nx-fadeInUp 0.2s var(--nx-ease);
    }

    & .dropdown-item {
        color: var(--nx-text-secondary);
        border-radius: var(--nx-radius-sm);
        padding: 0.5rem 0.9rem;
        font-size: 0.9rem;
        transition: all var(--nx-duration) var(--nx-ease);

        &:hover {
            background: oklch(0.68 0.18 285 / 0.12);
            color: var(--nx-primary, #BF7AF0);
        }
    }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║ HERO                                                         ║
   ╚══════════════════════════════════════════════════════════════╝ */
.hero-section {
    background: linear-gradient(165deg, var(--nx-void) 0%, var(--nx-base) 50%, oklch(0.16 0.04 285) 100%);
    padding-block: clamp(3rem, 8vw, 6rem);
    position: relative;
    overflow: hidden;

    /* Scan line effect */
    &::before {
        content: '';
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            oklch(0.68 0.18 285 / 0.015) 2px,
            oklch(0.68 0.18 285 / 0.015) 4px
        );
        pointer-events: none;
        animation: nx-scan-line 12s linear infinite;
    }

    & h1 {
        text-shadow: 0 0 40px oklch(0.68 0.18 285 / 0.3);
    }

    /* :has() — if hero has a search form, add extra padding */
    &:has(.search-form, form) {
        padding-block-end: clamp(4rem, 10vw, 7rem);
    }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║ CARDS — Container Queries + :has()                           ║
   ╚══════════════════════════════════════════════════════════════╝ */
.card {
    container-type: inline-size;
    container-name: card;
    background: var(--nx-surface, #161625);
    border: 0.5px solid var(--nx-border-subtle);
    border-radius: var(--nx-radius);
    transition: transform var(--nx-duration) var(--nx-ease),
                border-color var(--nx-duration) var(--nx-ease),
                box-shadow var(--nx-duration) var(--nx-ease);
    overflow: hidden;

    &:hover {
        border-color: var(--nx-primary, #BF7AF0);
        box-shadow: 0 4px 24px oklch(0.68 0.18 285 / 0.15);
        transform: translateY(-3px);
    }

    /* :has(img) — cards with images get a glow accent */
    &:has(img) {
        &:hover {
            box-shadow: 0 4px 32px oklch(0.68 0.18 285 / 0.2),
                        0 0 0 0.5px var(--nx-primary);
        }
    }

    /* :has(.badge) — cards with badges get top glow line */
    &:has(.badge) {
        border-image: linear-gradient(90deg, var(--nx-primary), var(--nx-accent), var(--nx-hot)) 1;
        border-image-slice: 1;
        border-top-width: 1.5px;
        border-top-style: solid;
    }

    & .card-header {
        background: oklch(0.68 0.18 285 / 0.06);
        border-block-end: 0.5px solid var(--nx-border-subtle);
        font-family: var(--nx-font-heading);
        font-weight: 600;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        font-size: 0.85rem;
        padding: 0.75rem 1rem;
    }

    & .card-body {
        padding: 1rem;
    }

    & .card-footer {
        background: oklch(0.13 0.02 275 / 0.5);
        border-block-start: 0.5px solid var(--nx-border-subtle);
        padding: 0.65rem 1rem;
    }

    & .card-title a {
        color: var(--nx-text, #e0e0e0);
        transition: color var(--nx-duration) var(--nx-ease);

        &:hover { color: var(--nx-primary, #BF7AF0); }
    }
}

/* Container query: card narrower than 280px */
@container card (max-width: 280px) {
    .card-body { padding: 0.75rem; }
    .card-title { font-size: 0.9rem; }
    .server-stats { font-size: 0.75rem; }
}

/* Container query: card wider than 500px — horizontal layout */
@container card (min-width: 500px) {
    .card-body {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 1rem;
        align-items: start;
    }
}

/* Server card specifics */
.server-card {
    border-inline-start: 2px solid var(--nx-primary, #BF7AF0);
    position: relative;

    /* Gradient overlay from left */
    &::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, oklch(0.68 0.18 285 / 0.04) 0%, transparent 40%);
        pointer-events: none;
        transition: opacity var(--nx-duration) var(--nx-ease);
    }

    &:hover {
        border-inline-start-color: var(--nx-accent, #D6FF6B);

        &::before {
            background: linear-gradient(90deg, oklch(0.82 0.22 115 / 0.04) 0%, transparent 40%);
        }
    }

    &.featured,
    &:has(.badge.bg-warning) {
        border-inline-start-color: var(--nx-warning);
        background: linear-gradient(90deg, oklch(0.78 0.17 85 / 0.06) 0%, transparent 50%);
    }
}

.server-banner-container {
    background: var(--nx-void, #080810) !important;
    border-block-end: 0.5px solid var(--nx-border-subtle);
}

.server-ip code {
    background: var(--nx-void);
    color: var(--nx-accent, #D6FF6B);
    font-size: 0.82rem;
    padding: 0.2em 0.5em;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║ BUTTONS                                                      ║
   ╚══════════════════════════════════════════════════════════════╝ */
.btn {
    font-family: var(--nx-font-heading);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: var(--nx-radius);
    padding: 0.55rem 1.3rem;
    transition: all var(--nx-duration) var(--nx-ease);
    position: relative;
    overflow: hidden;
    isolation: isolate;

    /* Shimmer on hover */
    &::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, transparent, oklch(1 0 0 / 0.08), transparent);
        transform: translateX(var(--shimmer-x, -100%));
        transition: none;
    }

    &:hover::before {
        animation: nx-shimmer 0.8s var(--nx-ease);
    }
}

.btn-primary {
    background: transparent;
    border: 1.5px solid var(--nx-primary, #BF7AF0);
    color: var(--nx-primary, #BF7AF0);

    &:hover, &:focus-visible {
        background: var(--nx-primary, #BF7AF0);
        color: var(--nx-text-on-primary, #1a0a28);
        box-shadow: var(--nx-glow-primary);
        transform: translateY(-1px);
    }
}

.btn-success {
    background: transparent;
    border: 1.5px solid var(--nx-success, #4ade80);
    color: var(--nx-success, #4ade80);

    &:hover, &:focus-visible {
        background: var(--nx-success);
        color: var(--nx-text-on-primary);
        box-shadow: 0 0 20px oklch(0.72 0.19 155 / 0.4);
    }
}

.btn-danger {
    background: transparent;
    border: 1.5px solid var(--nx-danger, #ef4444);
    color: var(--nx-danger, #ef4444);

    &:hover { background: var(--nx-danger); color: #fff; }
}

.btn-outline-primary {
    border-color: var(--nx-primary, #BF7AF0);
    color: var(--nx-primary, #BF7AF0);

    &:hover {
        background: oklch(0.68 0.18 285 / 0.12);
        color: var(--nx-primary-bright);
    }
}

.btn-vote {
    background: var(--nx-accent, #D6FF6B);
    border: none;
    color: var(--nx-void, #080810);
    font-weight: 700;

    &:hover {
        box-shadow: var(--nx-glow-accent);
        transform: scale(1.04);
        color: var(--nx-void);
    }
}

.btn-gradient {
    background: linear-gradient(135deg, var(--nx-primary) 0%, var(--nx-hot) 100%);
    border: none;
    color: #fff;

    &:hover {
        filter: brightness(1.15);
        box-shadow: 0 4px 20px oklch(0.68 0.18 285 / 0.3);
        color: #fff;
    }
}

/* Loading state */
.btn.loading {
    pointer-events: none;
    opacity: 0.7;

    &::after {
        content: '';
        display: inline-block;
        inline-size: 14px;
        block-size: 14px;
        margin-inline-start: 8px;
        border: 2px solid currentColor;
        border-block-start-color: transparent;
        border-radius: 50%;
        animation: spin 0.6s linear infinite;
    }
}

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

/* ╔══════════════════════════════════════════════════════════════╗
   ║ FORMS — accent-color + :has(:invalid)                        ║
   ╚══════════════════════════════════════════════════════════════╝ */
.form-control,
.form-select {
    background: var(--nx-surface, #161625);
    border: 0.5px solid var(--nx-border);
    color: var(--nx-text, #e0e0e0);
    border-radius: var(--nx-radius);
    padding: 0.6rem 0.9rem;
    font-size: 0.95rem;
    transition: border-color var(--nx-duration) var(--nx-ease),
                box-shadow var(--nx-duration) var(--nx-ease);

    &::placeholder { color: var(--nx-text-muted); }

    &:focus {
        background: var(--nx-surface);
        border-color: var(--nx-primary, #BF7AF0);
        box-shadow: 0 0 0 3px oklch(0.68 0.18 285 / 0.15);
        color: var(--nx-text);
        outline: none;
    }

    &:invalid:not(:placeholder-shown) {
        border-color: var(--nx-danger);
        box-shadow: 0 0 0 3px oklch(0.62 0.22 25 / 0.15);
    }
}

/* :has(:invalid) — form-group with invalid input */
.form-group:has(:invalid:not(:placeholder-shown)),
.mb-3:has(:invalid:not(:placeholder-shown)) {
    & .form-label { color: var(--nx-danger); }
    & .invalid-feedback { display: block; }
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--nx-primary, #BF7AF0);
}

.form-check-input {
    background-color: var(--nx-surface);
    border-color: var(--nx-border);

    &:checked {
        background-color: var(--nx-primary, #BF7AF0);
        border-color: var(--nx-primary, #BF7AF0);
    }
}

.input-group-text {
    background: var(--nx-surface-raised, #1f1f35);
    border: 0.5px solid var(--nx-border);
    color: var(--nx-text-secondary);
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║ BADGES                                                       ║
   ╚══════════════════════════════════════════════════════════════╝ */
.badge {
    font-family: var(--nx-font-heading);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.3em 0.6em;
    border-radius: var(--nx-radius-xs);
}

.bg-primary { background: var(--nx-primary, #BF7AF0) !important; color: var(--nx-text-on-primary) !important; }
.bg-success { background: var(--nx-success) !important; color: #0a1a0a !important; }
.bg-warning { background: var(--nx-warning) !important; color: #1a1200 !important; }
.bg-danger { background: var(--nx-danger) !important; color: #fff !important; }
.bg-info { background: var(--nx-info) !important; color: #0a0a1a !important; }
.bg-secondary { background: var(--nx-border, #3a3a5c) !important; color: var(--nx-text) !important; }

/* ╔══════════════════════════════════════════════════════════════╗
   ║ TABLES                                                       ║
   ╚══════════════════════════════════════════════════════════════╝ */
.table {
    color: var(--nx-text);
    --bs-table-bg: transparent;
    --bs-table-striped-bg: oklch(0.16 0.02 275 / 0.5);
    --bs-table-hover-bg: oklch(0.68 0.18 285 / 0.06);
    border-color: var(--nx-border-subtle);

    & th {
        font-family: var(--nx-font-heading);
        font-weight: 600;
        font-size: 0.8rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--nx-text-secondary);
        border-block-end: 1px solid var(--nx-border);
    }

    & td { border-color: var(--nx-border-subtle); }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║ ALERTS                                                       ║
   ╚══════════════════════════════════════════════════════════════╝ */
.alert {
    background: var(--nx-surface, #161625);
    border: 0.5px solid;
    border-radius: var(--nx-radius);
    font-size: 0.9rem;
}

.alert-success { border-color: var(--nx-success); color: var(--nx-success); }
.alert-danger { border-color: var(--nx-danger); color: var(--nx-danger); }
.alert-warning { border-color: var(--nx-warning); color: var(--nx-warning); }
.alert-info { border-color: var(--nx-info); color: var(--nx-info); }

/* ╔══════════════════════════════════════════════════════════════╗
   ║ PAGINATION                                                   ║
   ╚══════════════════════════════════════════════════════════════╝ */
.pagination {
    gap: 3px;

    & .page-link {
        background: var(--nx-surface);
        border: 0.5px solid var(--nx-border-subtle);
        color: var(--nx-text-secondary);
        border-radius: var(--nx-radius-sm) !important;
        font-size: 0.85rem;
        padding: 0.4rem 0.75rem;
        transition: all var(--nx-duration) var(--nx-ease);

        &:hover {
            border-color: var(--nx-primary, #BF7AF0);
            color: var(--nx-primary);
            background: oklch(0.68 0.18 285 / 0.08);
        }
    }

    & .page-item.active .page-link {
        background: var(--nx-primary, #BF7AF0);
        border-color: var(--nx-primary);
        color: var(--nx-text-on-primary);
    }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║ STATS                                                        ║
   ╚══════════════════════════════════════════════════════════════╝ */
.stat-card .stat-value {
    font-family: var(--nx-font-heading);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    color: var(--nx-primary, #BF7AF0);
    text-shadow: 0 0 30px oklch(0.68 0.18 285 / 0.4);
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║ RATING STARS                                                 ║
   ╚══════════════════════════════════════════════════════════════╝ */
.rating-stars,
.server-rating {
    & .fa-star, & .bi-star-fill { color: var(--nx-warning); }
    & .far.fa-star, & .bi-star { color: var(--nx-border); }
}

.rating-select {
    & .fa-star, & .bi-star, & .bi-star-fill {
        cursor: pointer;
        transition: transform var(--nx-duration) var(--nx-ease-spring);

        &:hover { transform: scale(1.25); }
    }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║ LIST GROUP                                                   ║
   ╚══════════════════════════════════════════════════════════════╝ */
.list-group-item {
    background: var(--nx-surface, #161625);
    border-color: var(--nx-border-subtle);
    color: var(--nx-text);

    &.active {
        background: var(--nx-primary, #BF7AF0);
        border-color: var(--nx-primary);
        color: var(--nx-text-on-primary);
    }

    &:hover:not(.active) {
        background: oklch(0.68 0.18 285 / 0.06);
        color: var(--nx-primary, #BF7AF0);
    }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║ BREADCRUMB                                                   ║
   ╚══════════════════════════════════════════════════════════════╝ */
.breadcrumb { background: transparent; }
.breadcrumb-item a { color: var(--nx-text-muted); }
.breadcrumb-item.active { color: var(--nx-primary, #BF7AF0); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--nx-text-muted); }

/* ╔══════════════════════════════════════════════════════════════╗
   ║ FOOTER                                                       ║
   ╚══════════════════════════════════════════════════════════════╝ */
.main-footer,
.footer {
    background: var(--nx-void, #080810);
    border-block-start: 0.5px solid var(--nx-border-subtle);
    color: var(--nx-text-muted);

    & h5 {
        font-family: var(--nx-font-heading);
        color: var(--nx-primary, #BF7AF0);
        font-size: 0.85rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    & a {
        color: var(--nx-text-muted);
        transition: color var(--nx-duration) var(--nx-ease);

        &:hover { color: var(--nx-primary, #BF7AF0); text-shadow: none; }
    }

    & .social-links a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: 0.5px solid var(--nx-border-subtle);
        border-radius: var(--nx-radius-sm);
        transition: all var(--nx-duration) var(--nx-ease);

        &:hover {
            border-color: var(--nx-primary, #BF7AF0);
            box-shadow: 0 0 12px oklch(0.68 0.18 285 / 0.3);
            color: var(--nx-primary) !important;
        }
    }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║ BACK TO TOP                                                  ║
   ╚══════════════════════════════════════════════════════════════╝ */
.back-to-top {
    background: var(--nx-primary, #BF7AF0);
    color: var(--nx-text-on-primary, #1a0a28);
    border: none;
    border-radius: var(--nx-radius);
    box-shadow: var(--nx-glow-primary);

    &:hover {
        transform: translateY(-3px);
        box-shadow: 0 0 30px oklch(0.68 0.18 285 / 0.5);
    }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║ TOAST & COOKIE CONSENT                                       ║
   ╚══════════════════════════════════════════════════════════════╝ */
.toast {
    background: var(--nx-surface-overlay, #2a2a40);
    border: 0.5px solid var(--nx-border);
    color: var(--nx-text);
    border-radius: var(--nx-radius);
}

.cookie-consent {
    background: var(--nx-void, #080810);
    border-block-start: 0.5px solid var(--nx-border-subtle);
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║ LOADING / SKELETON                                           ║
   ╚══════════════════════════════════════════════════════════════╝ */
.skeleton {
    background: linear-gradient(90deg,
        var(--nx-surface) 25%,
        var(--nx-surface-raised) 50%,
        var(--nx-surface) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.spinner-overlay {
    background: oklch(0.12 0.02 280 / 0.85);
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║ UTILITY CLASSES                                              ║
   ╚══════════════════════════════════════════════════════════════╝ */
.text-muted { color: var(--nx-text-muted) !important; }
.text-dark { color: var(--nx-text) !important; }
.bg-dark { background-color: var(--nx-void) !important; }
.bg-light { background-color: var(--nx-surface) !important; }
.bg-white { background-color: var(--nx-surface) !important; }
.border { border-color: var(--nx-border-subtle) !important; }
.card-footer.bg-white { background: var(--nx-surface) !important; }

.text-gradient {
    background: linear-gradient(135deg, var(--nx-primary) 0%, var(--nx-hot) 50%, var(--nx-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.neon-text {
    text-shadow:
        0 0 5px oklch(0.68 0.18 285 / 0.6),
        0 0 15px oklch(0.68 0.18 285 / 0.4),
        0 0 30px oklch(0.68 0.18 285 / 0.2);
}

.neon-box {
    box-shadow:
        0 0 5px oklch(0.68 0.18 285 / 0.5),
        0 0 15px oklch(0.68 0.18 285 / 0.3),
        inset 0 0 5px oklch(0.68 0.18 285 / 0.2);
}

/* Glass effect */
.glass {
    background: oklch(0.18 0.025 275 / 0.6);
    backdrop-filter: blur(12px) saturate(1.3);
    -webkit-backdrop-filter: blur(12px) saturate(1.3);
    border: 0.5px solid oklch(1 0 0 / 0.06);
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║ ANIMATIONS & ENTRANCE                                        ║
   ╚══════════════════════════════════════════════════════════════╝ */
.fade-in {
    animation: nx-fadeInUp 0.35s var(--nx-ease) both;
}

.hover-lift {
    transition: transform var(--nx-duration) var(--nx-ease),
                box-shadow var(--nx-duration) var(--nx-ease);

    &:hover {
        transform: translateY(-4px);
        box-shadow: var(--nx-shadow-lg);
    }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║ AI SEO 2026+ — data-ai-* attribute styles                   ║
   ╚══════════════════════════════════════════════════════════════╝ */
[data-ai-fact] {
    position: relative;
    border-inline-start: 2px solid oklch(0.82 0.22 115 / 0.3);
    padding-inline-start: 0.75rem;
    margin-block: 0.5rem;
}

[data-ai-summary] {
    background: oklch(0.68 0.18 285 / 0.04);
    border-radius: var(--nx-radius);
    padding: 1rem;
    border: 0.5px solid oklch(0.68 0.18 285 / 0.15);
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║ RESPONSIVE                                                   ║
   ╚══════════════════════════════════════════════════════════════╝ */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background: var(--nx-surface-overlay, #2a2a40);
        padding: 1rem;
        border-radius: var(--nx-radius);
        margin-block-start: 0.75rem;
        border: 0.5px solid var(--nx-border-subtle);
        box-shadow: var(--nx-shadow-lg);
    }

    .section-padding { padding-block: 2rem; }
}

@media (max-width: 767.98px) {
    .server-thumb { width: 60px; height: 45px; }
    .rank-badge { font-size: 0.9rem; min-width: 36px; }
    .hero-section { padding-block: 2.5rem; }

    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.25rem; }
}

@media (max-width: 575.98px) {
    .card-body { padding: 0.75rem; }
    .btn { padding: 0.45rem 1rem; font-size: 0.8rem; }
    .container { padding-inline: 0.75rem; }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║ PRINT                                                        ║
   ╚══════════════════════════════════════════════════════════════╝ */
@media print {
    .navbar, .main-header, .footer, .main-footer,
    .back-to-top, .cookie-consent { display: none !important; }

    body {
        background: #fff;
        color: #000;
        font-size: 11pt;
    }

    a[href]::after { content: " (" attr(href) ")"; }

    .card {
        border: 1px solid #ccc;
        break-inside: avoid;
    }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║ 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;
    }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║ FALLBACKS for older browsers (no oklch)                      ║
   ╚══════════════════════════════════════════════════════════════╝ */
@supports not (color: oklch(0.5 0.1 0)) {
    :root {
        --nx-primary: #BF7AF0;
        --nx-primary-dim: #8B4FC8;
        --nx-primary-bright: #D8A8F8;
        --nx-accent: #D6FF6B;
        --nx-hot: #FF5E8A;
        --nx-success: #4ADE80;
        --nx-warning: #FBBF24;
        --nx-info: #60A5FA;
        --nx-danger: #EF4444;
        --nx-void: #080810;
        --nx-base: #0C0C14;
        --nx-surface: #161625;
        --nx-surface-raised: #1F1F35;
        --nx-surface-overlay: #2A2A40;
        --nx-border: #3A3A5C;
        --nx-border-subtle: #2A2A44;
        --nx-text: #E0E0E8;
        --nx-text-secondary: #A0A0B8;
        --nx-text-muted: #707088;
        --nx-text-on-primary: #1A0A28;
    }

    body::before {
        background:
            radial-gradient(ellipse 60% 50% at 15% 85%, rgba(191, 122, 240, 0.07) 0%, transparent 60%),
            radial-gradient(ellipse 50% 40% at 85% 15%, rgba(255, 94, 138, 0.06) 0%, transparent 55%),
            radial-gradient(ellipse 70% 60% at 50% 50%, rgba(214, 255, 107, 0.03) 0%, transparent 70%);
    }
}